* {
    font-family: "Poppins", sans-serif;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-18 {
    font-size: 18px;
}

body,
html {
    overflow-x: hidden;
}

.form-control {
    outline: unset !important;
    box-shadow: unset !important;
}

.fs-20 {
    font-size: 20px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999999999999;
    background-color: white;
}

main {
    padding-top: 181px;
}
/*  This is for the main website navigation colour scheme*/
.bg-black {
    background-color: #183838 !important; /* Your custom color */
}

.topbar.py-2 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* Change topbar background color */
.topbar {
    background-color: #F2F2F2 !important; /* example dark grey */
}

/* Change link & icon colors inside topbar */
.topbar a {
    color: #183838 !important;            /* white icons/links */
}

.topbar a:hover {
    color: #f39c12 !important;         /* example hover color (orange) */
}

.topbar span {
    color: #183838; /* light grey divider */
    margin: 0 8px; /* spacing between icons */
}

.sorter .container.my-3 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.filter-container {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.filter-col {
    padding: 0.5rem !important;
}
.hero-img-half {
    height: calc(100vh - 149px);
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.links-img {
    width: 155px;
    height: 155px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: auto;
}

video.img-fluid {
    overflow: hidden;
    height: calc(100vh - 149px);
    width: 100%;
    object-fit: cover;
}

.image img {
    height: calc(100vh - 149px);
    width: 100%;
    object-fit: cover;
    object-position: top;
}

.brand-img {
    height: 300px;
    object-fit: cover;
    object-position: top;
}

.bg-black-50 {
    background-color: rgba(255, 255, 255, 0);
}

.top-search {
    width: 480px;
    max-width: 100%;
}

section.video.bg-black {
    position: relative;
    top: 7px;
    margin-bottom: 7px;
}

.fs-30 {
    font-size: 30px;
}

.footer-top,
.footer-middle,
.footer-bottom {
    background-color: #FFF4CA; /* Original Colour Code was #F7F7F7, Changed for Hatsworld*/
}

/*Hatsworld Baner Starts Here*/

/* Page Wrapper */
.page-wrapper {
    margin: 0;
    padding: 0;
    display: flex; /* Use flex to eliminate any potential inline whitespace issues */
    flex-direction: column;
}

/* Hero Banner */
.banner-slick {
    position: relative;
    width: 100%;
    height: 100%; /* Match .video-holder height */
}

.banner-slick .slick-list.draggable,
.banner-slick .slick-track {
    height: 100% !important; /* Ensure full height of .video-holder */
    width: 100%;
    margin: 0; /* Remove any Slick-introduced margins */
}

.listing-hero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.banner-content {
    position: absolute;
    bottom: 12px;
    left: 15px;
    padding: 8px;
    color: #ffffff;
    text-align: left;
    z-index: 10;
}

.banner-content h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-content a.btn {
    font-size: 1.125rem;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none;
    line-height: 1.5;
    min-width: 120px;
}

.hero, .ribbon {
    margin: 0 !important; /* Override any defaults */
    padding: 0;
}

.slick-dots {
    bottom: 8px;
    margin: 0;
    padding: 0;
}

.slick-dots li button:before {
    font-size: 12px;
    color: #ffffff;
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}

/* Hatsworld Banner Finish Here*/

.video-holder {
    width: 100%;
    height: 500px; /* Default for desktop (e.g., 12-inch, 14-inch) */
    overflow: hidden;
    position: relative;
}

.video-holder video.img-fluid {
    height: 100%;
}

.video-content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10000;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 50px;
    padding-bottom: 50px;
}

.video-content h2 {
    font-size: 70px;
    color: white;
    text-transform: uppercase;
}

.slider-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    top: 25px;
}

.image img.h-400 {
    height: 500px;
}

.inspired {
    background-color: #D6D4CD;
}

.slider-nav .slick-slide {
    transform: scale(0.9);
    transition: 0.5s;
}

.slider-nav .slick-current {
    transform: scale(1);
}

.slider-for img {
    height: 680px;
    object-fit: cover;
    object-position: top;
}

.slider-nav img {
    height: 150px;
    object-fit: cover;
    object-position: top;
}

input[type='radio'] {
    display: none;
}

input[type='radio']+label {
    border: 2px solid rgb(152, 152, 152);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    color: rgb(152, 152, 152);
}

input[type='radio']:checked+label {
    background-color: white;
    border: 2px solid black;
    color: black;
}

.chart {
    /* width: 500px; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.chart .rate-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    height: 30px;
    padding: 20px 0;
    padding: 10px;
}

.chart .rate-box>* {
    height: 100%;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #444;
}

.rate-box .value {
    display: flex;
    align-items: center;
}

.rate-box .value:hover {
    color: #66bb6a;
}

.chart .value {
    font-size: 30px;
    cursor: pointer;
}

.rate-box .progress-bar {
    border-width: 1px;
    position: relative;
    background-color: #cfd8dc91;
    height: 10px;
    border-radius: 100px;
    width: 350px;
}

.rate-box .progress-bar .progress {
    background-color: #66bb6a;
    height: 100%;
    border-radius: 100px;
    transition: 300ms ease-in-out;
}

.global {
    height: 100%;
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.one .fas {
    color: #cfd8dc;
}

.two {
    background: linear-gradient(to right, #66bb6a 0%, transparent 0%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    transition: 0.5s ease-in-out all;
}

.global>span {
    font-size: 90px;
    font-weight: 500;
}

.rating-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 10%;
}

.rating-icons span {
    position: absolute;
    display: flex;
    font-size: 30px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
}

.total-reviews {
    font-size: 25px !important;
}

.avatar {
    min-width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 2px solid black;
}

.reviews-holder {
    height: 200px;
    overflow-y: scroll;
}

.lity.lity-opened.lity-image {
    z-index: 9999999999;
}

button.like-prev.btn.slick-arrow {
    position: absolute;
    z-index: 100;
    background: #ffffff94;
    height: 50%;
    border-radius: 0;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

button.like-prev.btn.slick-arrow:hover {
    background: #ffffff;
}

button.like-next.btn.slick-arrow {
    position: absolute;
    z-index: 100;
    background: #ffffff94;
    height: 50%;
    border-radius: 0;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}




.megamenu {
    position: fixed;
    top: 189x;
    z-index: 99999999999;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: white;
    width: 100% !important;
    max-height: 450px; /* Reduced from 600px to prevent overlap */
}

/* Scrollable left section */
.megamenu .col-lg-8 {
    max-height: 450px; /* Match megamenu height */
    overflow-y: auto; /* Only left section scrolls */
    padding-right: 10px; /* Prevent scrollbar overlap */
}

/* Fixed right section */
.megamenu .col-lg-4.image-grid {
    max-height: 400px; /* Match megamenu height */
    overflow-y: hidden; /* No scrolling */
}


/* Highlight active main category when megamenu is open */
.menu-item .has-megamenu {
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Smooth transition */
display: inline-block;
  padding: 1px 1px;
}
.menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px; /* expands hover zone slightly left */
  right: -20px; /* and right */
  bottom: 0;
}
.menu-item:hover::before {
  background: transparent; /* invisible area for hover trigger */
}

.menu-item:hover .megamenu {
  display: block !important;
}



.mobile {
    display: none;
}

.col-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}

.megamenu-bg {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    height: 100vh;
    width: 100% !important;
    display: none;
}

.cart-info-btn,
.wishlist-info-btn,
.profile-info-btn {
    cursor: pointer;
}

.cart-dropdown,
.wishlist-dropdown {
    position: absolute;
    display: none;
    width: 300px;
    padding: 20px;
    border: 1px solid rgb(197, 197, 197);
    right: 0;
    top: 30px;
    background: white;
    border-radius: 10px;
    z-index: 100000000001;
}

.profile-dropdown {
    position: absolute;
    display: none;
    width: 200px;
    padding: 20px;
    border: 1px solid rgb(197, 197, 197);
    right: 0;
    top: 30px;
    background: white;
    border-radius: 10px;
    z-index: 100000000001;
}

.fs-12 {
    font-size: 12px;
}

div#exampleModal {
    z-index: 99999999999999999999;
}

.cookie {
    background-color: #FEE258;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999999;
}

.mt-4.sharer a {
    margin: 0 5px;
    padding: 0 !important;
}

.news-letter .row {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    display: inline-flex;
    margin: auto;
}

section.news-letter.py-5.bg-black .container {
    display: flex;
}

.news-letter input.form-control.border-0 {
    width: 400px;
}

.badge.bg-primary.position-absolute {
    z-index: 1000;
    top: 10px;
    left: 23px;
    font-size: 17px;
    padding: 10px 30px;
}

/* product listing */
.img-holder-1 .badge.badge-primary.bg-primary,
.img-holder-1 .badge.badge-light.bg-light {
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight: 500;
    font-size: 12px;
}

.img-holder-1 .wishlist {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-weight: 500;
}

#item-list .col-lg-3 {
    display: none;
}

body {
    padding-right: 0 !important;
}

img.img-fluid.card-imgs {
    height: 25px;
}

.bg-light-primary {
    background-color: #cacffc;
}

.card-info {
    display: none;
}

.card-info.active {
    display: flex;
}

.form-control,
.form-select {
    outline: unset !important;
    box-shadow: unset !important;
}

.second-row {
    display: none;
}

.second-row.active {
    display: block;
}

main.product-main {
    padding-top: 265px;
}

main.product-main.active {
    padding-top: 320px;
}

.filter-btn-mobile {
    display: none;
}

span.clicked {
    display: none;
}

button.clicked span.clicked {
    display: block;
}

button.clicked span.not-clicked {
    display: none;
}

.multiselect {
    position: relative;
}

.selectBox {
    position: relative;
}

.selectBox select {
    width: 100%;
    font-weight: bold;
}

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.checkboxes {
    display: none;
    border: 1px #dadada solid;
}

.checkboxes label {
    display: block;
}

.checkboxes label:hover {
    background-color: #1e90ff;
}

.selectBox {
    width: 90%;
}

div.checkboxes {
    position: absolute;
    background: white;
    border: unset;
    width: 100%;
    left: 0;
    padding: 16px;
    border-radius: 10px;
    top: 195%;
}

div.checkboxes label {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-radius: 4px;
}

h5.product-name {
    height: 50px;
    overflow: hidden;
}

.w-50px {
    min-width: 30px !important;
    border: unset;
}

.modal-header {
    background-color: #EBEBEB;
}

.row.g-3.shipping-address.active {
    display: none;
}

#clear-filter {
    display: none;
    margin-left: auto;
}

.color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid white;
    outline: 2px solid transparent;
}

.color1 {
    background-color: #e63946;
}

.color2 {
    background-color: #a8dadc;
}

.color3 {
    background-color: #457b9d;
}

.color4 {
    background-color: #f4a261;
}

.color5 {
    background-color: #2a9d8f;
}

.color6 {
    background-color: #e9c46a;
}

.color7 {
    background-color: #264653;
}

/* Dynamic Ribbon Style for Desktop*/

.ribbon {
    padding: 0.5rem 0; /* Tighter padding for closer attachment */
    font-family: 'Poppins', sans-serif;
    margin: 0 !important; /* Override any margins */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.ribbon .container {
    margin: 0 auto;
    padding: 0 15px; /* Bootstrap default */
}

.ribbon .text-center {
    margin: 0;
    padding: 0;
}

.ribbon .d-flex {
    margin: 0;
}

.ribbon-text {
    font-size: 1.1rem;
    min-width: 70px;
    line-height: 1.5;
    margin: 0;
}

.ribbon-text p {
margin: 0; /* Remove default <p> margins */
}

.ribbon-link {
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.3s ease;
}

.ribbon-link:hover {
    color: #FFF4CA !important;
}
/* Floating WhatsApp Icon */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Ensure it stays above other elements */
    background-color: #25D366; /* WhatsApp green */
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #20b358; /* Darker green on hover */
    transform: scale(1.1); /* Slight zoom effect */
}

.whatsapp-float i {
    font-size: 40px; /* Icon size */
}

.whatsapp-float span {
    display: none; /* Hidden by default */
}
/* For Load More Products*/
#loading {
    visibility: hidden;
    text-align: center;
    padding: 20px;
    min-height: 50px;
}
#loading.visible {
    visibility: visible;
}

/* Wishlist Icon */
.wishlist {
    color: #000; /* Default color (empty heart) */
    background-color: #F0F0F0; /* Default background */
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    display: flex;
    font-weight: 500;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.wishlist.active {
    color: #ff0000; /* Red color when in wishlist (filled heart) */
    background-color: #FFF4CA; /* Keep background consistent */
}

.wishlist.active i {
    color: #ff0000; /* Ensure icon color matches */
}

.wishlist:hover {
    color: #ff5555; /* Lighter red on hover */
}

.wishlist-link {
text-decoration: none !important;  /* Overrides Bootstrap's default underline /
color: inherit !important;         / Inherit color from parent .wishlist to avoid Bootstrap's link blue */
}

/* Ensure wishlist circle centers the heart globally */
.wishlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px; /* Adjust to match your circle size; e.g., 36px or 44px */
  height: 40px;
  border-radius: 50%;
  text-decoration: none; /* Prevent underline */
  transition: background-color 0.3s ease; /* Optional: Smooth hover */
}

/* Reset heart icon positioning */
.wishlist i {
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 14px; /* Adjust if heart is too big/small */
}

/* Mobile-specific: Extra nudge for smaller screens */
@media (max-width: 768px) {
  .wishlist {
    width: 36px !important; /* Slightly smaller on mobile if needed */
    height: 36px !important;
  }
  
  .wishlist i {
    font-size: 12px !important; /* Scale down heart if overflowing */
  }
}



/* New In Badge */
.badge.bg-primary.position-absolute {
    background-color: #28a745 !important; /* Green background for "New In" */
    color: #ffffff !important; /* White text for contrast */
    font-size: 14px;
    padding: 8px 20px;
    top: 10px;
    left: 10px;
    font-weight: 500;
}



/* Quantity counter layout */
.input-group.flex-nowrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* small spacing between buttons and input */
}

/* Buttons */
.input-group.flex-nowrap .btnUpdateBasket {
  flex: 0 0 auto; /* buttons stay fixed size */
  padding: 0.25rem 0.6rem;
  font-size: 16px;
  line-height: 1;
}

/* Auto-resizing input */
.input-group.flex-nowrap .btnBasketEdit.auto-resize {
  flex: 0 0 auto; /* input doesn’t stretch uncontrollably */
  width: auto;
  min-width: 40px;
  max-width: 80px;
  text-align: center;
  padding: 0 5px;
}



/* Wishlist and Remove Item links - customizable colors */
.wishlist-link {
  color: #007bff; /* default blue */
}
.remove-link {
  color: #dc3545; /* default red */
}

/* Responsive fixes for smaller screens */
@media (max-width: 576px) {
  .cart .main .col-2 img {
    max-width: 60px;
  }
  .cart .main .col-4 {
    font-size: 14px;
  }
  .wishlist-link,
  .remove-link {
    display: block;
    margin-bottom: 5px;
  }
}

#wishlistDropdown .wishlist-items {
    max-height: 300px;      /* adjust as needed */
    overflow-y: auto;
}

/* Button Transitions and Styles (Adopted & Refined) */
.btn {
    transition: background-color 0.3s ease-in-out, 
                border-color 0.3s ease-in-out, 
                color 0.3s ease-in-out,
                transform 0.2s ease !important;
}

.btnAddCart {
    transition: background-color 0.5s ease-in-out, 
                border-color 0.5s ease-in-out, 
                color 0.5s ease-in-out, 
                transform 0.2s ease !important;
}

.btnAddCart.btn-success {
    transform: scale(1.05); /* Subtle scale for add feedback */
}

/* Dark Base for Add to Cart / Update Cart (Default & In-Cart States) */
.btn-dark,
.btnAddCart.btn-dark {
    background-color: #fff !important;
    border-color: #000 !important;
    color: #000 !important; /* White text */
}

.btn-dark:hover:not(:disabled),
.btnAddCart.btn-dark:hover:not(:disabled) {
    background-color: #183838 !important; /* Dark teal shift */
    border-color: #183838 !important; /* Turquoise border */
    color: #FFF4CA !important; /* Light yellow text on hover */
    transform: scale(1.02); /* Subtle scale */
}

/* Disabled / Out-of-Stock (Light Grey) */
.btn-dark:disabled,
.btnAddCart:disabled {
    background-color: #6c757d !important; /* Bootstrap secondary grey */
    border-color: #6c757d !important;
    color: #fff !important;
    opacity: 0.65;
    cursor: not-allowed;
    transform: none; /* No scale on disabled */
}

/* Success Flash (Add Feedback) */
.btnAddCart.btn-success {
    background-color: #28a745 !important; /* Green for success */
    border-color: #28a745 !important;
    color: #fff !important;
    transform: scale(1.05);
}

.btnAddCart.btn-success:hover {
    background-color: #218838 !important; /* Darker green */
    border-color: #1e7e34 !important;
}


/* Desktop: Highlight on hover */
@media (min-width: 768px) {
    .menu-item:hover .has-megamenu {
        color: #FFF4CA !important; /* Matches footer color */
        text-decoration: underline !important;
    }
}

/*----------------------------------Mobile View 767px------------------------------*/
@media (max-width: 767px) {
    main {
        padding-top: 148px; /* Matches 60px navbar */
    }

    .top-search {
        width: 480px;
        max-width: 100%;
        display: none !important;
    }

    .border-bottom-light {
    border-bottom: 1px solid #e9ecef !important; /* very light grey */
  }
    section.main-menu.py-2.bg-black .container {
        overflow-x: scroll;
    }

    .main-menu .d-flex.justify-content-between.align-items-center.gap-4 {
        min-width: 350% !important;
        padding: 10px;
    }

    section.product-details.py-5>.container>.row {
        gap: 20px;
    }

    .item.card.border-0.shadow .d-flex {
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .chart {
        max-width: 100%;
    }

    .global {
        display: none;
    }

    section.links.py-4 .d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }

    .news-letter .col-md-2.text-center.my-auto {
        display: none;
    }

    .footer-middle.py-4.border-bottom .row {
        gap: 20px;
    }

    /* Hatsworld Banners Mobile View Starts Here */
    .video-holder {
        width: 100%;
        height: 136px; /* Your original mobile fix */
        overflow: hidden;
    }

    .banner-slick {
        height: 100%; /* Match .video-holder */
        aspect-ratio: 4 / 3; /* Taller for mobile */
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important; /* Match .video-holder */
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%; /* Match .video-holder */
    }

    .banner-content {
        bottom: 8px;
        left: 10px;
        padding: 5px;
    }

    .banner-content h2 {
        font-size: 1.25rem;
        line-height: 1.2;
        max-width: 85%;
    }

    .banner-content a.btn {
        font-size: 0.75rem;
        padding: 4px 8px;
        border-radius: 20px;
        min-width: 80px;
    }

    .slick-dots li button:before {
        font-size: 10px;
    }

    .ribbon {
        padding: 0.5rem 0; /* Tighter padding */
        margin: 0 !important;
    }

    .ribbon-text {
        font-size: 0.75rem;
        text-align: center;
    }

    .ribbon-link {
        font-size: 0.75rem;
    }

    .video-content {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10000;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: column;
        padding-left: 15px;
        padding-bottom: 15px;
    }

    .video-content h2 {
        font-size: 40px;
        color: white;
        text-transform: uppercase;
    }

    .slider-overlay {
        display: none;
    }

    .ps-5,
    .p-5 {
        padding: 15px !important;
    }

    .d-flex.justify-content-between.items-center.px-4.gap-3.mb-4 {
        flex-direction: column;
    }

    form.d-flex.w-50.justify-content-start.align-items-center.gap-2 {
        flex-direction: column;
        width: 100% !important;
        align-items: flex-start !important;
    }

    section.cont-slider.py-4 {
        display: none;
    }

    span.count {
        display: none;
    }

    .mobile {
        display: block;
    }

    .mobile-search {
        display: none;
    }

    .mobile-search.active {
        display: block;
    }

    .megamenu {
        position: fixed;
        top: 196px;
        z-index: 99999999999;
        left: -12px;
        width: 95% !important;
        left: -12px;
        transform: unset;
        display: none;
        overflow: scroll;
        min-height: calc(100vh - 155px);
        padding-bottom: 20px; 
   }

    .megamenu>.container>.card {
        height: calc(100vh - 155px);
    }

    .megamenu .card.border-0.p-4.rounded-0 {
        padding: 15px !important;
        font-size: 12px;
        padding-top: 15px !important;
    }
    .megamenu .card .row {
        margin-top: 5px; /* Added to ensure first subcategory is not cut off */
    }

    .megamenu ul.list-unstyled.m-0.p-0 * {
        font-size: 12px !important;
        padding-bottom: 10px;
    }

  .megamenu .col-lg-8,
    .megamenu .col-lg-4 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        width: 100%;
        margin-bottom: 30px;
    }
    .megamenu .col-lg-4 {
        max-width: 40% !important;
        flex: 0 0 40% !important;
        width: 40%;
    }

    .menu-item:has(.megamenu[style*="display: block"]) .has-megamenu {
        color: #FFF4CA !important; /* Matches footer color */
        text-decoration: underline !important;
    }


.menu-item {
    position: relative;
	padding: 0 30px;
}

.menu-item:hover .megamenu {
    display: block !important;
}

.menu-item:hover + .megamenu-bg,
.menu-item .megamenu:hover + .megamenu-bg {
    display: block !important; /* Assumes .megamenu-bg is a sibling after each .menu-item; adjust selector if placement differs */
}



    .link-item.mb-3 ul {
        display: none;
    }

    .link-item.mb-3 {
        margin-bottom: 0 !important;
    }

    .megamenu .col-4 {
        padding: 1px;
        margin: 0;
    }

    .megamenu .col-lg-4 {
        margin: 4px;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .megamenu .col-lg-4 .row.g-3 {
        padding-bottom:300px; /* Added to ensure bottom row names are visible */
    }
    .megamenu .col-lg-4 .row.g-3 .col-4 {
        padding: 5px;
    }
    .megamenu .col-lg-4 .row.g-3 .col-4 .fs-14 {
        font-size: 12px;
    }
    .megamenu .link-item::after {
        display: inline-block;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
        position: absolute;
        right: 0;
        top: 7px;
    }

    .link-item.mb-3 {
        margin-bottom: 0 !important;
        position: relative;
    }

    .link-item.mb-3 p {
        margin: 0 !important;
    }

    .link-item.mb-3 {
        margin-bottom: 10px !important;
    }

    ul.list-unstyled.m-0.p-0.come {
        display: block;
    }

    section.main-menu.py-2.bg-black a {
        font-size: 13px;
    }

    .main-menu .d-flex.justify-content-between.align-items-center.gap-4 {
        min-width: 250% !important;
        padding: 10px;
    }

    .profile-dropdown {
        right: -50px;
    }

    .wishlist-dropdown {
        right: -85px;
    }

    .news-letter input.form-control.border-0 {
        width: 100%;
    }

    .row-rev {
        flex-direction: column-reverse;
    }

    .product-count {
        display: none;
    }

    select.form.select.border.w-auto.border-black.rounded-pill.px-4.py-1 {
        width: 100% !important;
    }

    .filter-btn-mobile {
        display: block;
    }

    .filter-rows-bg {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999999999;
        background: rgba(0, 0, 0, 0.7);
        height: 100vh;
        width: 100%;
        display: none;
    }

    .filter-rows-bg.active {
        display: block;
    }

    form.filter-rows {
        position: fixed;
        top: 0;
        z-index: 99999999999999;
        background: white;
        padding: 19px;
        height: 100vh;
        width: 90%;
        right: 0;
        padding-top: 50px;
        overflow-y: auto;
        display: none;
    }

    form.filter-rows.active {
        display: block;
    }

    .more-holder {
        display: none;
    }

    .second-row {
        display: block;
    }

    .first-row .col-md-2,
    .second-row .col-md-2 {
        border-left: unset !important;
        border-right: 0 !important;
        border-top: 0 !important;
    }

    main.product-main {
        padding-top: 275px;
    }

    div.checkboxes {
        position: relative;
        background: white;
        border: unset;
        width: 100%;
        left: 0;
        padding: 16px 12px;
        border-radius: 10px;
        top: 0;
        z-index: 100000000;
    }

    .row.main.align-items-center .col-2 {
        flex: 0 0 30%;
    }

    .row.main.align-items-center .col-4 {
        flex: 0 0 70%;
    }

    .row.row.main.align-items-center {
        position: relative;
    }

    .col.text-end {
        position: absolute;
        right: 0;
        top: 30px;
    }

    .row.main.align-items-center.mob-hide {
        display: none;
    }

    .row.p-0.w-100 {
        margin: auto;
    }

    .d-flex.justify-content-start.align-items-start.gap-5 {
        flex-direction: column;
        gap: 10px !important;
        margin-bottom: 20px;
    }

    .col-md-12.mt-5 h4.mb-3 {
        margin-bottom: 0 !important;
    }

    h5.product-name {
        font-size: 16px !important;
        height: 40px;
    }

    .product-main h5 span {
        font-size: 16px;
    }

    .product-main .d-flex.justify-content-between.items-center.gap-3 {
        flex-direction: column;
        gap: 5px !important;
    }

    header.scrolling section.topbar.py-2.bg-light,
    header.scrolling .navbar.py-3,
    header.scrolling .sorter {
        display: none;
    }

    header.scrolling .container.pt-1.pb-4 {
        padding-bottom: 0 !important;
    }

    main.product-main.scrolling {
        padding-top: 165px;
    }

    button#clear-filter {
        background: red;
        color: white !important;
        padding: 4px 10px !important;
        margin-top: 17px;
        font-size: 14px !important;
    }

    /* Dynamic Ribbon for Mobile */
    .ribbon {
        padding: 0.5rem 0;
        margin: 0 !important;
    }

    .ribbon-text {
        font-size: 0.75rem;
        text-align: center;
    }

    .ribbon-link {
        font-size: 0.75rem;
    }
    #cartCount, #cntWL {
        display: inline-block !important; /* Override span.count { display: none; } */
        position: absolute;
        top: -12px;
        right: -15px;
        background-color: #183838; /* Replace with your chosen color, e.g., #183838 */
        color: #FFF4CA;
        border-radius: 50%;
        padding: 2px 5px;
        font-size: 10px;
        line-height: 1;
        text-align: center;
        min-width: 15px;
    }
}

@media (max-width: 576px) {
    main {
        padding-top: 196px; /* Smaller for tiny screens */
    }

    .video-holder {
        height: 136px; /* Your original mobile fix */
    }

    .banner-slick {
        height: 100%; /* Match .video-holder */
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content h2 {
        font-size: 1rem;
        max-width: 80%;
    }

    .banner-content a.btn {
        font-size: 0.625rem;
        padding: 3px 6px;
        border-radius: 18px;
        min-width: 60px;
    }

    .ribbon-text {
        font-size: 0.625rem;
    }
.whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
    .whatsapp-float i {
        font-size: 28px;
    }
}

/* iPad (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .video-holder {
        height: 300px; /* Suitable for iPad portrait/landscape */
    }

    .banner-slick {
        height: 100%; /* Match .video-holder */
        aspect-ratio: 4 / 3; /* Taller for tablets */
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important;
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content {
        bottom: 10px;
        left: 12px;
        padding: 6px;
    }

    .banner-content h2 {
        font-size: 1.5rem;
    }

    .banner-content a.btn {
        font-size: 0.875rem;
        padding: 6px 12px;
        min-width: 100px;
    }

    .ribbon-text {
        font-size: 0.9rem;
    }

    
}

/* 12-inch (~1280px) */
@media (min-width: 1025px) and (max-width: 1365px) {
    .video-holder {
        height: 400px; /* Balanced for 12-inch screens */
    }

    .banner-slick {
        height: 100%;
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important;
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content h2 {
        font-size: 1.75rem;
    }

    .banner-content a.btn {
        font-size: 1rem;
        padding: 8px 14px;
        min-width: 110px;
    }

    .ribbon-text {
        font-size: 1rem;
    }

   }

/* 14-inch (~1366–1535px) */
@media (min-width: 1366px) and (max-width: 1535px) {
    .video-holder {
        height: 500px; /* Suitable for 14-inch screens */
    }

    .banner-slick {
        height: 100%;
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important;
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content h2 {
        font-size: 2rem;
    }

    .banner-content a.btn {
        font-size: 1.125rem;
        padding: 8px 16px;
        min-width: 120px;
    }

    .ribbon-text {
        font-size: 1.1rem;
    }

   }

/* 16-inch (~1536–1920px) */
@media (min-width: 1536px) and (max-width: 1920px) {
    .video-holder {
        height: 600px; /* Suitable for 16-inch screens */
    }

    .banner-slick {
        height: 100%;
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important;
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content h2 {
        font-size: 2.25rem;
    }

    .banner-content a.btn {
        font-size: 1.25rem;
        padding: 10px 18px;
        min-width: 140px;
    }

    .ribbon-text {
        font-size: 1.2rem;
    }

   
}

/* 23-inch (~1920px) */
@media (min-width: 1921px) and (max-width: 2559px) {
    .video-holder {
        height: 700px; /* Matches your 700px banner height */
    }

    .banner-slick {
        height: 100%;
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important;
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content h2 {
        font-size: 2.25rem;
    }

    .banner-content a.btn {
        font-size: 1.25rem;
        padding: 10px 18px;
        min-width: 140px;
    }

    .ribbon-text {
        font-size: 1.25rem;
    }

  }

/* 27-inch (~2560px) */
@media (min-width: 2560px) and (max-width: 3839px) {
    .video-holder {
        height: 750px; /* Slightly taller for 27-inch */
    }

    .banner-slick {
        height: 100%;
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important;
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content h2 {
        font-size: 2.5rem;
    }

    .banner-content a.btn {
        font-size: 1.5rem;
        padding: 12px 20px;
        min-width: 160px;
    }

    .ribbon-text {
        font-size: 1.3rem;
    }

  }

/* 32-inch (~3840px and up) */
@media (min-width: 3840px) {
    .video-holder {
        height: 800px; /* Slightly taller for 4K/32-inch */
    }

    .banner-slick {
        height: 100%;
    }

    .banner-slick .slick-list.draggable,
    .banner-slick .slick-track {
        height: 100% !important;
        width: 100%;
        margin: 0;
    }

    .listing-hero {
        height: 100%;
    }

    .banner-content h2 {
        font-size: 2.75rem;
    }

    .banner-content a.btn {
        font-size: 1.75rem;
        padding: 14px 22px;
        min-width: 180px;
    }

    .ribbon-text {
        font-size: 1.4rem;
    }

  }
/* Responsive fixes for smaller screens - Full mobile (phones) */
@media (max-width: 767.98px) {
  .cart .main .col-2 img {
    max-width: 60px;
  }
  .cart .main .col-4 {
    font-size: 14px;
  }
  
  /* Mobile two-row layout */
  .cart .mobile-layout .top-row {
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .cart .mobile-layout .top-row .col-3:first-child {
    flex: 0 0 60px;  /* Fixed image width */
    padding-right: 0.5rem;
  }

  .cart .mobile-layout .top-row .col-6 {
    flex: 1;
    padding: 0;
  }

  .cart .mobile-layout .top-row .col-3:last-child {
    flex: 0 0 80px;  /* Fixed price width */
    padding-left: 0.5rem;
    text-align: right;
  }

  .cart .mobile-layout .bottom-row {
    gap: 1rem;
  }

  .cart .mobile-layout .qty-col .input-group {
    min-width: 100px;
  }

  .cart .mobile-layout .qty-col button {
    min-width: 32px;
    padding: 0.25rem;
  }

  .cart .mobile-layout .total-col {
    white-space: nowrap;
  }

  /* Hide desktop stacked on mobile */
  .cart .stacked-cols {
    display: none !important;
  }

  /* Zebra stripes for overall row */
  .cart > .row:nth-child(even) {
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 0.75rem;
  }

  /* NEW: Prevent wrapping in price, quantity, and total columns */
  .cart .main .col:nth-of-type(3), /* Price column */
  .cart .main .col:nth-of-type(5), /* Total column */
  .cart .main .col.d-flex { /* Quantity column */
    white-space: nowrap;
    flex-wrap: nowrap;
    font-size: 0.875rem; /* Slightly smaller font for better fit */
  }

  .cart .main .col.d-flex .input-group {
    flex-wrap: nowrap;
    min-width: 90px; /* Ensure quantity input group doesn't shrink too much */
  }

  .cart .main .col.d-flex input[type="number"] {
    min-width: 40px; /* Fixed width for quantity input to prevent overflow */
    max-width: 40px;
  }

  .cart .main .col.d-flex button {
    min-width: 25px; /* Compact buttons */
    padding: 0.25rem 0.125rem;
    font-size: 0.875rem;
  }
}

/* Slimmed Button Styles – Separate Add vs. Update with No Hover on Add */
.btn {
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.2s ease !important;
}

.btnAddCart {
    transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out, color 0.5s ease-in-out, transform 0.2s ease !important;
}

.btnAddCart.btn-success {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #fff !important;
    transform: scale(1.05);
}

.btnAddCart.btn-success:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}

/* Add to Cart State (Default/Not in Cart) – White, No Hover Change */
.btnAddCart.add-cart {
    background-color: #fff !important;  /* White bg – your desired landing color */
    border-color: #000 !important;      /* Black border */
    color: #000 !important;             /* Black text */
    border-width: 2px;
}

/* No hover change for Add to Cart – stays white */
.btnAddCart.add-cart:hover:not(:disabled) {
    background-color: #fff !important;  /* Stays white – edit if subtle shift wanted */
    border-color: #000 !important;
    color: #000 !important;
    /* No transform to keep it static */
}

/* Update Cart State (In Cart) – Black, Dark Hover */
.btnAddCart.update-cart {
    background-color: #000 !important;  /* Black bg – your desired for Update */
    border-color: #000 !important;
    color: #fff !important;             /* White text */
}

.btnAddCart.update-cart:hover:not(:disabled) {
    background-color: #183838 !important;  /* Dark grey/teal hover – edit for Update hover */
    border-color: #183838 !important;
    color: #FFF4CA !important;             /* Yellow text on hover */
    transform: scale(1.02);                /* Subtle scale for Update */
}

/* Disabled (Out-of-Stock) – Light Grey for Both */
.btnAddCart:disabled,
.btnAddCart.add-cart:disabled,
.btnAddCart.update-cart:disabled {
    background-color: #6c757d !important;  /* Grey bg */
    border-color: #6c757d !important;
    color: #fff !important;
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.btnAddCart:disabled:hover {
    background-color: #6c757d !important;  /* No hover on disabled */
}

/* Cart Dropdown Font Size Overrides */
.cart-dropdown .fs-14 {
    font-size: 0.8125rem !important;  /* Smaller than default (was ~0.875rem); change to 1rem for larger */
}

.cart-dropdown .fs-12 {
    font-size: 0.6875rem !important;  /* Empty state text; adjust as needed */
}

/* Bold elements (names, totals) - slightly larger for emphasis */
.cart-dropdown .fw-semibold.fs-14 {
    font-size: 0.875rem !important;  /* e.g., Product names & £total; tweak for hierarchy */
}

/* Item count & headers */
.cart-dropdown #modalCartItems,
.cart-dropdown p.fs-14.mb-0 {
    font-size: 0.8125rem !important;
}

/* Buttons (View Bag, Checkout) - Keep readable on small screens */
.cart-dropdown .btn {
    font-size: 0.75rem !important;  /* Smaller buttons if needed */
}

/* Global Cart Dropdown Size Reduction */
.cart-dropdown {
    transform: scale(1) !important;  /* Overall 10% shrink: Scales fonts/images/spacing proportionally; tweak 0.85 for more */
    transform-origin: top left !important;  /* Anchor to top-left to avoid clipping */
    font-size: 0.875rem !important;  /* Base font shrink (14px → 12.5px); affects all text globally */
    padding: 0.75rem !important;     /* Reduce internal padding (was ~1rem); frees vertical space */
    line-height: 1.3 !important;     /* Tighter line spacing to pack content denser */
}

/* Fine-tune images if scale blurs them */
.cart-dropdown img {
    width: 100px !important;  /* Shrink product images (was ~50-60px); adjust to 35px for more space */
    height: auto !important;
}

/* Optional: Reduce button sizes for bottom bar */
.cart-dropdown .btn {
    padding: 0.525rem 1rem !important;  /* Smaller buttons: Less height */
    font-size: 0.9rem !important;
}

/* Global Wishlist Dropdown Size Reduction (Mirrors Cart) */
.wishlist-dropdown {
    transform: scale(1) !important;  /* Matches cart: No shrink, but ready for tweaks (e.g., 0.9 for 10%) */
    transform-origin: top left !important;  /* Anchor to top-left to avoid clipping */
    font-size: 0.875rem !important;  /* Base font shrink (14px → 12.5px); affects names/labels globally */
    padding: 0.75rem !important;     /* Reduce internal padding (was ~1rem); frees vertical space */
    line-height: 1.3 !important;     /* Tighter line spacing to pack content denser */
}

/* Fine-tune images (matches cart: 100px width) */
.wishlist-dropdown img {
    width: 100px !important;  /* Scaled product images; adjust to 80px for more compact */
    height: auto !important;
}

/* Optional: Bold names get slight emphasis without growing */
.wishlist-dropdown .fw-semibold {
    font-size: 0.9rem !important;  /* Slightly larger for readability (e.g., product names) */
}

/*====================================*/
/*===========================================================================*/
/* FULL-BLEED Masonry: Edge-to-Edge, 4-5 Auto Columns, Full 6 Images Visible */
.megamenu {
    position: fixed !important;
    left: 0 !important;  /* Edge-to-edge: No centering */
    transform: none !important;  /* Kill translateX */
    width: 100vw !important;  /* Full viewport width - no calc for exact edge */
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;  /* No side gaps */
    background: white !important;
    z-index: 99999999999 !important;
    display: none;
    overflow: hidden !important;  /* No outer scroll; handle inner */
    max-height: 600px !important;  /* Your original height */
    overflow-x: hidden !important;  /* Clip any horizontal creep */
}

/* Inner container: Full width, no padding */
.megamenu > .container {
    width: 100vw !important;  /* Match megamenu width for true edge */
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Card: Minimal padding, full bleed */
.megamenu .card {
    border: none !important;
    padding: 1rem !important;  /* Light overall padding; adjust for your design */
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* Row: Flex for left/right split, full width - Tighter gap */
.megamenu .row {
    display: flex !important;
    flex-wrap: nowrap !important;  /* No wrap; side-by-side */
    width: 100% !important;
    margin: 0 !important;
    gap: 1rem !important;  /* Reduced gap to minimize push on right */
}

/* Left: 75% width for 4-5 auto columns, scrollable */
.megamenu .col-lg-8 {
    flex: 0 0 75% !important;  /* Wider left for more columns (like Next's ~70-80%) */
    max-width: 75% !important;
    width: 75% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;  /* Scroll ONLY left content */
    overflow-x: hidden !important;
    max-height: 550px !important;  /* Under total height */
    hyphens: none !important;
    word-break: keep-all !important;
}

.megamenu .col-lg-8 > .masonry-container {
    display: block !important;
    column-count: auto !important;  /* Auto 4-5 columns based on content/space */
    column-gap: 1.5rem !important;  /* Tight gaps for full space use */
    column-width: 220px !important;  /* Slightly wider for 4-5 fit; auto-adjusts count */
    column-fill: balance !important;  /* Masonry: Fill gaps */
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;  /* Top/bottom only; no sides */
    overflow: visible !important;
    break-inside: avoid !important;
    hyphens: none !important;
    word-break: keep-all !important;
}

.megamenu .col-lg-8 > .masonry-container .masonry-item {
    display: inline-block !important;
    width: 100% !important;
    margin-bottom: 0.75rem !important;
    break-inside: avoid-column !important;
    vertical-align: top !important;
    padding: 0.25rem !important;
    hyphens: none !important;
    word-break: keep-all !important;
}

.megamenu .col-lg-8 > .masonry-container .masonry-item .link-item {
    break-inside: avoid-column !important;
    width: 100% !important;
}

.megamenu .col-lg-8 > .masonry-container .masonry-item ul.sub-subcategories {
    break-inside: avoid-column !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0 0 0 1rem !important;  /* Tight indent */
    list-style: none !important;
    hyphens: none !important;
    word-break: keep-all !important;
}

.megamenu .col-lg-8 > .masonry-container .masonry-item ul.sub-subcategories li {
    break-inside: avoid !important;
    margin-bottom: 0.5rem !important;
    hyphens: none !important;
    word-break: keep-all !important;
    line-height: 1.4 !important;
}

.megamenu .col-lg-8 .subcategory-toggle,
.megamenu .col-lg-8 a.fs-14 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
    hyphens: none !important;
    word-break: keep-all !important;
    font-size: 14px !important;
}

/* Right: 25% fixed, no scroll/images stay visible */
.megamenu .col-lg-4.image-grid {
    flex: 0 0 25% !important;  /* Slim right for images */
    max-width: 25% !important;
    width: 25% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;  /* No scroll; clip if needed */
    max-height: none !important;  /* No max-height—allow full 6 images */
    height: auto !important;  /* Auto height to fit 2 rows */
    position: sticky !important;  /* Sticks during left scroll */
    top: 0 !important;
    contain: layout !important;  /* Isolate: Prevent child overflows from affecting parent */
}

.megamenu .col-lg-4.image-grid .row.g-3 {
    max-height: none !important;  /* Full height for 2 rows of 3 images */
    overflow: hidden !important;
    height: auto !important;  /* Auto-fit content */
    flex-wrap: wrap !important;  /* Force wrap to 2 rows */
    align-content: flex-start !important;  /* Top-align rows */
}

/* Fallback for no subcats: Fit in left */
.megamenu .col-lg-8 .col-lg-4 {  /* No-subcat fallback */
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* STRONGER Anti-Overflow: Zero All Right-Side Spacing */
.megamenu .col-lg-4.image-grid {
    box-sizing: border-box !important;  /* Include padding in 25% width */
    overflow-x: hidden !important;  /* Clip horizontal spills */
    overflow-y: hidden !important;  /* No vertical scroll on images */
}

.megamenu .col-lg-4.image-grid .row.g-3 {
    box-sizing: border-box !important;
    width: 100% !important;  /* Force full container fit */
    margin: 0 !important;  /* Kill Bootstrap negative margins */
    padding: 0 !important;  /* Zero padding—no breathing room if it causes spill */
    gap: 0 !important;  /* No gaps; tight pack */
}

.megamenu .col-lg-4.image-grid .col-4 {
    padding: 0 !important;  /* Zero padding on images—no push */
    box-sizing: border-box !important;
    width: calc(33.333% - 0.1rem) !important;  /* Tiny calc to fit exactly 3 per row */
}

.megamenu .col-lg-4.image-grid img.mega-menu-img,
.megamenu .col-lg-4.image-grid span.fs-14 {
    width: 100% !important;  /* Images/text fill col-4 without excess */
    max-width: 100% !important;
    height: auto !important;  /* Prevent fixed heights from causing overflow */
}

/* Global: Ensure no global Bootstrap overflows in dropdown */
.megamenu * {
    box-sizing: border-box !important;
}



/* Mobile: Stack full-width, scroll on whole */
@media (max-width: 991px) {
    .megamenu {
        width: 100vw !important;  /* Full for mobile */
        left: 0 !important;
        transform: none !important;
    }
    .megamenu .row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    .megamenu .col-lg-8,
    .megamenu .col-lg-4.image-grid {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-y: auto !important;  /* Scroll both on mobile */
        max-height: 400px !important;  /* Shorter for mobile */
    }
    .megamenu .col-lg-8 > .masonry-container {
        column-count: 1 !important;
        column-gap: 0 !important;
        column-width: auto !important;
    }
    .megamenu .col-lg-8 .subcategory-toggle,
    .megamenu .col-lg-8 a.fs-14 {
        white-space: normal !important;
        text-overflow: clip !important;
        word-break: normal !important;
    }
}

/*=============================*/
/* ================================= */
/* Mobile fixes for masonry + images */
/* ================================= */
@media (max-width: 991px) {

  /* ✅ Toggle subcategories with max-height inside masonry */
  .sub-subcategories {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .sub-subcategories.open {
    max-height: 500px; /* big enough for most sub-lists */
  }

  /* ✅ Fix masonry layout to become single-column on mobile */
  .megamenu .col-lg-8 > .masonry-container {
    column-count: 1 !important;
    column-gap: 0 !important;
    column-width: 100% !important;
  }

  /* ✅ Fix 6-image grid layout */
  .megamenu .col-lg-4.image-grid .row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .megamenu .col-lg-4.image-grid .col-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}
/* ================================= */
/* Mobile: unified scroll masonry + images */
/* ================================= */
@media (max-width: 991px) {

  /* Masonry: single column for subcategories */
  .megamenu .col-lg-8 > .masonry-container {
    column-count: 1 !important;
    column-gap: 0 !important;
    column-width: 100% !important;
  }

  /* Image grid after subcategories */
  .mobile-image-grid .row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .mobile-image-grid .col-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-image-grid img.mega-menu-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
@media (max-width: 991px) {

  /* ✅ Break image grid out of masonry column flow */
  .mobile-image-grid {
    display: block !important;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    -moz-column-break-inside: avoid !important;
    width: 100% !important;
  }

  /* ✅ Ensure row acts like flex container again */
  .mobile-image-grid .row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0 !important;
  }

  /* ✅ Force columns to 3 per row */
  .mobile-image-grid .col-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-image-grid img.mega-menu-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
@media (max-width: 991px) {
  .mobile-image-grid .row.g-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  .mobile-image-grid .col-4 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding: 0 !important;
  }
}