.store-footer-wrap,
.store-footer {
  background-color: #8e5d40 !important;
  background-image: none !important;
}

/* ==========================================
   FIX FOR TAB-TRIGGER BUTTONS (Active / Inactive)
   ========================================== */
button.tab-trigger {
  border-color: #8e5d40 !important;
  color: #8e5d40 !important;
  background-color: transparent !important;
}

button.tab-trigger:hover,
button.tab-trigger.active,
button.tab-trigger[aria-selected="true"] {
  background-color: #8e5d40 !important;
  color: #ffffff !important;
  border-color: #8e5d40 !important;
}

/* Specific styling for inactive state if explicitly classed */
button.tab-trigger.inactive,
button.tab-trigger:not(.active):not([aria-selected="true"]) {
  background-color: #ffffff !important;
  color: #8e5d40 !important;
  border-color: #8e5d40 !important;
}


/* Button Container Style - Extra Tall (Global Default) */
a.more-link.more-link--arrowed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px; 
    padding: 32px 40px; 
    background: linear-gradient(135deg, #8e5d40 0%, #b37861 100%);
    color: #ffffff !important; 
    border-radius: 9999px; 
    text-decoration: none;
    font-weight: 700; 
    font-size: 18px !important; 
    box-shadow: 0 4px 10px rgba(142, 93, 64, 0.3); 
}

/* Hover Effect */
a.more-link.more-link--arrowed:hover {
    background: linear-gradient(135deg, #b37861 0%, #8e5d40 100%); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 14px rgba(142, 93, 64, 0.4);
}

/* Scaled-up SVG Icon */
a.more-link.more-link--arrowed .arrow-icon {
    width: 36px !important; 
    height: 36px !important; 
}

/* Smooth transitions */
a.more-link.more-link--arrowed,
a.more-link.more-link--arrowed:hover {
    transition: all 0.3s ease-in-out !important;
}


/* 1. Parent container handles the gap between the lists */
.marquee {
    display: flex !important;
    overflow: hidden !important;
    gap: 80px !important; 
}

/* 2. The lists move seamlessly */
.marquee__content {
    display: flex !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
    justify-content: flex-start !important;
    gap: 80px !important; 
    padding: 0 !important; 
    margin: 0 !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}
/* 3. Logos size - INCREASED */
.marquee__content img {
    max-height: 160px !important; 
    max-width: 240px !important;  
    width: auto !important;
    height: auto !important;
    object-fit: contain; 
}

.marquee__content li {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* 4. The Magic Keyframes for seamless looping */

/* For Arabic (RTL) */
html[dir="rtl"] .marquee__content,
body[dir="rtl"] .marquee__content,
.marquee__content {
    animation-name: scrollRight !important;
}
@keyframes scrollRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100% + 80px)); } 
}

/* For English (LTR) */
html[dir="ltr"] .marquee__content,
body[dir="ltr"] .marquee__content {
    animation-name: scrollLeft !important;
}
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - 80px)); } 
}

/* Hide the "View all" button by targeting the path, ignoring the domain */
a[href*="/brands"] {
    display: none !important;
}


/* Product Index Page Header Banner Styling */
.product-index-page-header.relative.mb-\[15px\].lg\:mb-10.min-h-\[90px\].\!p-0.text-white.flex-center {
    min-height: 400px !important;
    max-height: 500px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-index-page-header.relative.mb-\[15px\].lg\:mb-10.min-h-\[90px\].\!p-0.text-white.flex-center > .w-full {
    height: 100% !important;
    max-height: 500px !important;
    object-fit: cover !important;
}

.product-index-page-header.relative.mb-\[15px\].lg\:mb-10.min-h-\[90px\].\!p-0.text-white.flex-center img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* Perfect Size Fix for the Specific Banner Button */
.relative.flex.flex-col.justify-center.text-start.items-start.lg\:gap-5.max-w-lg > .more-link.more-link--arrowed.group.transition-all.duration-300 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    height: auto !important;
    width: auto !important;
    max-width: 100% !important;
}




@keyframes swiperZoomPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

.swiper-lazy-wrap.w-full.flex-center.overflow-hidden.swiper-slide.swiper-slide-active > .absolute.top-0.w-full.object-cover.h-full.loaded {
    animation: swiperZoomPulse 10s ease-in-out infinite !important;
    transition: transform 0.3s ease !important;
}



.tab-trigger.quicklinks-item {
    background-color: #8e5d40 !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    border: none !important;
    padding: 8px 20px !important;
}

.tab-trigger.quicklinks-item .tabs.hide-scroll.mb-5 {
    background: transparent !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
}







/* Style the floating chat widget and back-to-top buttons with a solid theme background */
.floating-contacts__trigger,
.floating-contacts__item,
button.floating-contacts__trigger.floating-contacts__icon {
    background-color: #8e5d40 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.floating-contacts__trigger:hover,
.floating-contacts__item:hover {
    background-color: #b37861 !important;
}

/* Force icons inside to stay visible and white */
.floating-contacts__trigger span,
.floating-contacts__trigger i,
.floating-contacts__item i {
    color: #ffffff !important;
    fill: #ffffff !important;
}




/* Style the scroll progress circle wrapper and path to match your brand */
/* Style the scroll progress circle wrapper and set the progress stroke to white */
#progress-scroll {
    background-color: #8e5d40 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#progress-scroll path {
    stroke: #ffffff !important;
}

#progress-scroll:hover {
    background-color: #b37861 !important;
}



/* Increase the footer logo height and ensure clear display */
.store-footer img.max-h-44,
.store-footer a img {
    height: 100px !important;
    max-height: 100px !important;
    width: auto !important;
    object-fit: contain !important;
}





/* 1. Create a clear box around the entire product card to contain the options */
.s-products-list-wrapper.s-products-list-filters-results .s-product-card {
    border: 1px solid #e5e7eb; /* Light gray border */
    border-radius: 8px; /* Smooth rounded corners */
    background-color: #ffffff; /* Solid white background */
    padding-bottom: 16px; /* Breathing room at the bottom */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    height: auto !important; /* Forces the card to stretch and fit all variants */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Keeps the image corners neat */
}

/* 2. Add padding to the content area so text/buttons don't touch the borders */
.s-products-list-wrapper.s-products-list-filters-results .s-product-card-content {
    padding: 12px 16px; 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 3. Neaten up the variant pills (Optional, to make them look cleaner) */
.s-products-list-wrapper.s-products-list-filters-results .s-product-card-options {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}




/* Adds a dark overlay to the background image container */
.container.bg-cover.isolate::before {
    content: "";
    position: absolute;
    inset: 0; /* Stretches the overlay to cover the whole container (top, left, right, bottom 0) */
    background-color: rgba(0, 0, 0, 0.6); /* Black overlay with 60% opacity. Change 0.6 to make it darker/lighter */
    border-radius: inherit; /* Keeps the edges curved exactly like the parent container */
    z-index: -1; /* Puts the overlay BEHIND your content, but ABOVE the background image */
}