/* Font loaded via HTML for better performance - NOT CSS @import */


/* CRITICAL: Prevent breadcrumbs/sublinks flash (FOUC) */
/* Hide initially, then reveal with correct styling */
.prestige-breadcrumbs,
.sub-links-bar,
.nav-links,
ol.prestige-breadcrumbs,
[class*="breadcrumb"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-direction: row !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Smooth reveal after CSS loads */
    animation: fadeIn 0.2s ease-out forwards;
}

/* Animation for smooth reveal */
@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* Force LI items to stay inline */
.prestige-breadcrumbs li,
ol.prestige-breadcrumbs li,
[class*="breadcrumb"] li {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Hide scrollbar */
.prestige-breadcrumbs::-webkit-scrollbar,
.sub-links-bar::-webkit-scrollbar,
.nav-links::-webkit-scrollbar {
    display: none;
}

/* MOBILE FIX: Force single line breadcrumbs - FULL WIDTH */
@media (max-width: 768px) {
    .prestige-breadcrumbs,
    ol.prestige-breadcrumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        /* Full Width */
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    .prestige-breadcrumbs li {
        flex-shrink: 0 !important;
        display: inline-flex !important;
    }
}

/* =========================================
   1. Golden Header Bottom Bar
   ========================================= */
.golden-info-bar {
    width: 100%;
    height: 70px;
    background-color: #FCF4F0;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    font-size: 12px;
    font-weight: normal;
    box-sizing: border-box;
    z-index: 99;
    direction: ltr;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.golden-info-bar span {
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Wishlist Heart Filled State */
.new-wishlist-icon.is-added i {
    color: #f67070 !important;
}

/* Section 2: Global Button Styling - Removed (Superseded by Section 12) */
/* Content removed during refactoring for cleanliness */

/* Wishlist Page Add to Cart Button */
salla-button.s-button-wrap button.s-button-primary-outline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #3f3f3f !important;
    border-color: #3f3f3f !important;
    color: #ffffff !important;
}

salla-button.s-button-wrap button.s-button-primary-outline .s-button-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

salla-button.s-button-wrap button.s-button-primary-outline:hover {
    background-color: #ff8000 !important;
    border-color: #ff8000 !important;
    color: #ffffff !important;
}

/* Wishlist Delete (X) Button */
button.btn--delete.s-button-icon.s-button-danger {
    border-radius: 8px !important;
    background-color: #3f3f3f !important;
    border-color: #3f3f3f !important;
    width: 38px !important;
    height: 38px !important;
}

button.btn--delete.s-button-icon.s-button-danger:hover {
    background-color: #ff8000 !important;
    border-color: #ff8000 !important;
}

/* Discount badge color moved to Section 13 (Forced Override) for higher specificity */


/* =========================================
   4. Products Per Row Settings
   ========================================= */
:root {
    --products_per_row_lg: 5 !important;
    --products_per_row_md: 4 !important;
    --products_per_row_sm: 2 !important;
}




/* =========================================
   5. Product Card Styling
   ========================================= */
custom-salla-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 !important;
    transition: transform 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
}

custom-salla-product-card:hover {
    transform: translateY(-5px);
}

.prestige-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    padding: 12px !important;
    border: none !important;
    background: transparent !important;
    position: static !important;
}

/* Discount badge layout (color handled in Forced Overrides section 13) */
.s-product-card-promotion-title,
.prestige-label {
    border-radius: 0 10px 0 10px !important;
    font-weight: 800 !important;
    font-size: 13px;
    padding: 4px 10px;
    position: absolute;
    top: 0 !important;
    right: 0 !important;
    z-index: 20;
}

/* Add to cart button styling - layout only (colors handled in Forced Overrides section) */
salla-add-product-button button,
.s-button-element {
    border-radius: 10px !important;
    height: 40px !important;
    width: 100% !important;
    font-weight: bold;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Price styling */
.s-product-card-sale-price h4 {
    color: #f67070 !important;
    font-size: 1.1rem;
}

.before-price {
    color: #9ca3af !important;
    text-decoration: line-through;
    font-size: 0.9rem;
    margin-right: 8px;
}

/* Title styling */
.product_title_color {
    color: #3f3f46 !important;
    font-size: 14px !important;
    text-align: right;
    margin-bottom: 4px;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important;
    height: 3em !important;
}

/* Wishlist icon */
.wishlist-icon {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f67070;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.wishlist-icon:hover {
    background: #fff5f5;
    border-color: #f67070;
}

/* Hide floating buttons - Only the icon version, not the main button */
salla-add-product-button.prestige-product-card-content-icon {
    display: none !important;
}

/* Quick view - visible on desktop only */
button.s-product-card-quick-view-btn {
    display: block !important; 
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide Quick View on Mobile */
@media (max-width: 768px) {
    button.s-product-card-quick-view-btn {
        display: none !important;
    }
}

/* Card actions layout */
.new-card-actions {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    width: 100%;
    gap: 5px;
    position: relative;
    z-index: 50;
    pointer-events: auto;
}


.add-btn-wrapper {
    flex: 1; /* Takes remaining space */
    width: auto !important;
}



.add-btn-wrapper salla-button button,
.add-btn-wrapper .s-button-element {
    border-radius: 8px !important;
    height: 35px !important;
    width: 100% !important;
    font-weight: bold;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px !important;
}

.add-btn-wrapper button i {
    margin-left: 5px;
}

/* Hover effects for new Mobile Buttons (Share & Wishlist) */

/* Common style for standard icons (Wishlist & Share) */
.new-wishlist-icon,
.new-share-icon {
    width: 35px !important;
    height: 35px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s;
    background-color: transparent;
    flex-shrink: 0;
}

.new-wishlist-icon i,
.new-share-icon i {
    font-size: 20px;
    color: #999;
    font-weight: normal;
    transition: all 0.2s;
}

/* Wishlist Active/Hover */
.new-wishlist-icon:hover {
    background-color: #fff0f0;
}
.new-wishlist-icon:hover i {
    color: #f67070;
    transform: scale(1.1);
}
.new-wishlist-icon.is-added i {
    color: #f67070 !important;
}

/* Share Active/Hover */
.new-share-icon {
    position: relative;
}
.new-share-icon:hover {
    background-color: #f0f8ff;
}
.new-share-icon:hover i {
    color: #3f3f3f;
}


/* =========================================
   Share Dropdown Menu
   ========================================= */
.share-dropdown-menu {
    position: absolute; /* Relative to body */
    width: 140px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.2);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    z-index: 999999; /* Highest priority */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    border: 1px solid #f0f0f0;
}

/* Arrow logic - simple approach since we move it dynamically */
.share-dropdown-menu::after {
    display: none; /* Hide arrow for now as dynamic positioning makes it tricky to align perfectly */
}

/* Animations based on position */
.share-dropdown-menu.position-top {
    transform: translateY(10px);
}
.share-dropdown-menu.position-bottom {
    transform: translateY(-10px);
}

.share-dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #555;
    border-radius: 6px;
    transition: background 0.1s;
    text-decoration: none;
    cursor: pointer;
}

.share-item:hover {
    background-color: #f9f9f9;
    color: #000;
}

.share-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.share-item.whatsapp i { color: #25D366; }
.share-item.twitter i { color: #1DA1F2; }
.share-item.copy i { color: #555; }

@media (max-width: 1024px) {
    .s-products-list-wrapper {
        grid-template-columns: repeat(var(--products_per_row_md), minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .s-products-list-wrapper {
        grid-template-columns: repeat(var(--products_per_row_sm), minmax(0, 1fr)) !important;
    }
}


/* =========================================
   6. Product Page - Quantity Input Fix
   ========================================= */
.s-product-details-quantity input,
.s-quantity-input input,
salla-quantity-input input,
.product-quantity input,
input[type="number"].s-quantity-input-input {
    color: #000000 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: bold !important;
}


/* =========================================
   7. Brands Page Styling
   ========================================= */
.brand-item,
.s-brands-item,
.s-brand-card {
    border: 1px solid #f3f3f3 !important;
    border-radius: 12px !important;
    padding: 15px !important;
    transition: all 0.3s ease-in-out !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.brand-item:hover,
.s-brands-item:hover,
.s-brand-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    border-color: #e5e5e5 !important;
}

.brands-grid,
.s-brands-page .grid,
.s-brands-list {
    display: grid !important;
    grid-template-columns: repeat(var(--products_per_row_lg), 1fr) !important;
    gap: 15px !important;
}

@media (max-width: 1024px) {

    .brands-grid,
    .s-brands-page .grid,
    .s-brands-list {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 640px) {

    .brands-grid,
    .s-brands-page .grid,
    .s-brands-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =========================================
   8. Quick Links Section (Features)
   ========================================= */
.s-block--features,
.s-block--features .s-block__content,
.s-block--features .swiper-container,
.s-block--features .swiper-wrapper {
    height: auto !important;
    min-height: 500px !important;
    overflow: visible !important;
    padding-bottom: 50px !important;
}

.s-block--features__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    height: 100% !important;
    margin-bottom: 20px !important;
}

.s-block--features__item img,
.feature-image img {
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    background-color: #fcfbf8 !important;
    padding: 30px !important;
    object-fit: contain !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease !important;
    margin-bottom: 20px !important;
    display: block !important;
}

.s-block--features__item:hover img {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.s-block--features__item h3,
.s-block--features__item h4,
.s-block--features__item p,
.feature-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #444 !important;
    margin-top: 5px !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.4 !important;
}


/* =========================================
   9. Fixed Banners Grid
   ========================================= */
.s-block--fixed-banner .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

@media (min-width: 768px) {
    .s-block--fixed-banner .grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .s-block--fixed-banner .grid {
        gap: 20px !important;
    }
}

.s-block--fixed-banner .banner--fixed img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px;
}


/* =========================================
   10. Tailwind Utility Classes
   ========================================= */
.md\:grid-cols-6 {
    grid-template-columns: repeat(var(--products_per_row_lg), minmax(0, 1fr)) !important;
}

.md\:flex-row {
    flex-direction: row !important;
}

.md\:flex-row-reverse {
    flex-direction: row-reverse !important;
}

.md\:items-start {
    align-items: flex-start !important;
}

.md\:items-center {
    align-items: center !important;
}

.md\:justify-start {
    justify-content: flex-start !important;
}

.md\:justify-between {
    justify-content: space-between !important;
}

.md\:gap-16 {
    gap: 4rem !important;
}

.md\:gap-2\.5 {
    gap: 0.625rem !important;
}

.md\:gap-3 {
    gap: 0.75rem !important;
}

.md\:gap-5 {
    gap: 1.25rem !important;
}

.md\:gap-8 {
    gap: 2rem !important;
}

.md\:gap-y-20 {
    row-gap: 5rem !important;
}

.md\:rounded {
    border-radius: var(--border-radius) !important;
}

.md\:border-none {
    border-style: none !important;
}

.md\:p-0 {
    padding: 0px !important;
}

.md\:p-10 {
    padding: 2.5rem !important;
}

.md\:p-5 {
    padding: 1.25rem !important;
}

.md\:p-8 {
    padding: 2rem !important;
}

.md\:px-14 {
    padding-left: 3.5rem !important;
    padding-right: 3.5rem !important;
}

.md\:px-20 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}

.md\:px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.md\:px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.md\:px-8 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.md\:py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.md\:py-20 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}


/* =========================================
   11. Categories Mobile View
   ========================================= */
.s-block--categories .aspect-square,
salla-slider:has(.slide--one-sixth) .aspect-square,
.s-block--categories .swiper-wrapper,
salla-slider:has(.slide--one-sixth) .swiper-wrapper {
    overflow: visible !important;
    border-radius: 0 !important;
}

/* Increase slider image container height by 5% */
.slide--one-sixth .aspect-square {
    padding-bottom: 5% !important;
}

/* Disable hover zoom effect on slider images */
.slide--one-sixth [class*="group-hover:scale"],
.slide--one-sixth .bg-cover {
    transform: none !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
    transition: none !important;
}

.s-block--categories .bg-cover,
salla-slider:has(.slide--one-sixth) .bg-cover {
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {

    .s-block--categories,
    .s-block--categories .container,
    .s-block--categories .wrapper,
    .s-block--categories .s-slider-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }

    .s-block--categories .swiper-wrapper,
    salla-slider:has(.slide--one-sixth) .swiper-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 5px !important;
        column-gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .s-block--categories .slide--one-sixth,
    salla-slider:has(.slide--one-sixth) .slide--one-sixth {
        width: 24.5% !important;
        max-width: unset !important;
        margin: 0 !important;
        padding: 2px !important;
        height: auto !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .s-block--categories .aspect-square,
    salla-slider:has(.slide--one-sixth) .aspect-square {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        max-width: unset !important;
    }

    .s-block--categories .text,
    salla-slider:has(.slide--one-sixth) .text {
        position: static !important;
        transform: none !important;
        margin-top: 2px !important;
        text-align: center !important;
        color: #333 !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        width: 100% !important;
        line-height: 1.2 !important;
    }

    body .s-block--categories [class*="group-hover:scale-110"],
    body .slide--one-sixth [class*="group-hover:scale-110"],
    body .swiper-slide [class*="group-hover:scale-110"] {
        transform: none !important;
        --tw-scale-x: 1 !important;
        --tw-scale-y: 1 !important;
        transition: none !important;
    }
}


/* =========================================
   12. Forced Button Overrides - ORANGE CTA
   ========================================= */
body .s-button-element.s-button-primary,
body .s-button-btn.s-button-primary,
body button.s-add-to-cart-button,
body .product-card-add-btn,
body .new-card-actions button,
body salla-add-product-button button,
body .s-product-card-content .s-button-btn,
body salla-mini-checkout-widget,
body .s-add-product-button-mini-checkout,
body .s-add-product-button-mini-checkout-content {
    background-color: #3f3f3f !important;
    border-color: #3f3f3f !important;
    color: #ffffff !important;
}

body .s-button-element.s-button-primary:hover,
body .s-button-btn.s-button-primary:hover,
body button.s-add-to-cart-button:hover,
body .product-card-add-btn:hover,
body .new-card-actions button:hover,
body salla-add-product-button button:hover,
body .s-product-card-content .s-button-btn:hover,
body salla-mini-checkout-widget:hover,
body .s-add-product-button-mini-checkout:hover,
body .s-add-product-button-mini-checkout-content:hover {
    background-color: #ff8000 !important;
    border-color: #ff8000 !important;
    color: #ffffff !important;
}

body salla-mini-checkout-widget svg,
body .s-add-product-button-mini-checkout svg {
    fill: #ffffff !important;
}

body salla-mini-checkout-widget,
body .s-add-product-button-mini-checkout,
body .s-mini-checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0.5rem !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

body .s-add-product-button-mini-checkout-content,
body [slot="widget-label"] {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    width: 100% !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
}


/* =========================================
   13. Discount Badge Forced Override
   ========================================= */
body .s-product-card-promotion-title,
body .promotion-title,
body .sale-badge,
body .s-product-card-sale-badge,
body .prestige-label,
body .s-product-card-label {
    background-color: #ff8000 !important;
    color: #ffffff !important;
    border: none !important;
}


/* =========================================
   14. Breadcrumbs Styling
   ========================================= */
body .prestige-breadcrumbs a,
body .prestige-breadcrumbs span,
body .prestige-breadcrumbs .fix-align.text-dark {
    color: #ffffff !important;
}

body .prestige-breadcrumbs,
body ol.prestige-breadcrumbs {
    background-color: #464646 !important;
}


/* =========================================
   15. Global Layout (Wider Container)
   ========================================= */
@media (min-width: 768px) {

    body .container,
    body .s-container,
    body .wrapper,
    body .inner,
    body .header-wrapper {
        max-width: 85% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body .s-block--product-card-grid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body .s-products-list-wrapper.s-products-list-horizontal-cards,
    body .s-block--product-card-grid .grid,
    body .product-grid {
        gap: 10px !important;
        column-gap: 10px !important;
    }

    body .slide-brand img {
        height: 60px !important;
        width: auto !important;
        max-height: unset !important;
    }

    body .slide-brand,
    body .slide_brand__content {
        min-height: 85px !important;
    }
}

/* Default Grid Columns on Desktop (matches root variable) */
@media (min-width: 1024px) {

    .s-block--product-card-grid .grid,
    .product-grid,
    .s-products-list-wrapper {
        grid-template-columns: repeat(var(--products_per_row_lg), 1fr) !important;
    }
}


/* =========================================
   16. Promotional Popup Modal
   ========================================= */
body .promo-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999999 !important;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.promo-modal-overlay.show {
    opacity: 1;
}

.promo-modal-content {
    background: #fff;
    width: 90%;
    max-width: 800px;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.promo-modal-overlay.show .promo-modal-content {
    transform: translateY(0);
}

.promo-modal-image {
    width: 50%;
    background-size: cover;
    background-position: center;
    min-height: 400px;
    position: relative;
}

.promo-modal-info {
    width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    direction: rtl;
}

.promo-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.promo-modal-title {
    font-size: 22px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4;
}

.promo-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.promo-features-list li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
}

.promo-features-list li::before {
    content: "✔";
    color: #3f3f3f;
    font-weight: bold;
}

.promo-email-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
    font-family: inherit;
    text-align: right;
}

.promo-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff8000, #ff9a33);
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 128, 0, 0.3);
}

.promo-submit-btn:hover {
    background: linear-gradient(135deg, #D4A574, #e6b98a);
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.4);
}

.promo-footer-link {
    font-size: 11px;
    color: #888;
    margin-top: 15px;
    text-align: center;
    display: block;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .promo-modal-content {
        flex-direction: row;
        max-width: 95%;
        min-height: 320px;
    }

    .promo-modal-image {
        width: 40%;
        height: auto;
        min-height: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 0 8px 8px 0;
    }

    .promo-modal-info {
        width: 60%;
        padding: 15px;
    }
    
    .promo-modal-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .promo-features-list li {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .promo-modal-close {
        top: 10px;
        right: 10px;
    }
}


/* =========================================
   17. Product Page - Share & Wishlist Buttons
   ========================================= */
salla-button.s-social-share-btn.s-button-wrap,
salla-button.btn--wishlist.s-button-wrap {
    background: transparent !important;
    background-color: transparent !important;
}

.s-button-light-outline,
button.s-button-light-outline,
.s-social-share-btn.s-button-light-outline,
.btn--wishlist.s-button-light-outline {
    background: transparent !important;
    background-color: transparent !important;
    min-width: 50px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.s-social-share-btn svg,
.s-social-share-btn i,
.btn--wishlist svg,
.btn--wishlist i,
.s-button-light-outline svg,
.s-button-light-outline i {
    color: #333 !important;
    fill: #333 !important;
}

.s-button-light-outline:hover {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
}


/* =========================================
   18. Fix Duplicate Account Menu
   ========================================= */
.golden-info-bar .s-user-menu,
.golden-info-bar .dropdown,
.golden-info-bar .s-dropdown,
.sub-links-bar .s-user-menu {
    display: none !important;
}


/* =========================================
   19. Product Description Background
   ========================================= */
article.article--main#more-content {
    background-color: #f9fafb !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
}


/* =========================================
   20. Product Image Magnifier
   ========================================= */
.product-image-container {
    position: relative;
    cursor: crosshair;
}

.img-magnifier-lens {
    position: absolute;
    border: 3px solid #ff8000;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    cursor: none;
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background-repeat: no-repeat;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.product-image-container:hover .img-magnifier-lens {
    opacity: 1;
}

.magnifier-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3f3f3f;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 50;
    pointer-events: none;
}


/* =========================================
   21. Product Image Size Reduction (20%)
   ========================================= */
.details-slider .s-slider-container {
    max-width: 80% !important;
    margin: 0 auto !important;
}

.details-slider .swiper-slide.homeslider__slide img {
    max-width: 100% !important;
    height: auto !important;
}

/* =========================================
   22. Hide Golden Bar on Product Pages (Keep Menu)
   ========================================= */
body.product-single .golden-info-bar {
    display: none !important;
}

body.product-single .prestige-breadcrumbs {
    margin-top: 0 !important;
}

/* Increase header height on product page */
body.product-single .prestige-header {
    height: 80px !important;
    min-height: 80px !important;
}

/* =========================================
   23. Thumbnail Styling
   ========================================= */
.s-slider-thumbs .swiper-slide {
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.s-slider-thumbs .swiper-slide-thumb-active,
.s-slider-thumbs .swiper-slide:hover {
    border-color: #ff8000 !important;
}

.s-slider-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* =========================================
   24. Site Background Color
   ========================================= */
body {
    background-color: #fafafa !important;
}

/* =========================================
   25. Header Icons (Cart & User) Styling
   ========================================= */
/* Cart icon wrapper */
.s-cart-summary-wrapper,
.header-cart,
salla-cart-summary {
    transition: all 0.3s ease !important;
}

.s-cart-summary-wrapper svg,
.s-cart-summary-wrapper i,
.header-cart svg,
.header-cart i,
salla-cart-summary svg {
    fill: #3f3f3f !important;
    color: #3f3f3f !important;
    transition: all 0.3s ease !important;
}

.s-cart-summary-wrapper:hover,
.header-cart:hover,
salla-cart-summary:hover {
    transform: scale(1.25) !important;
}

.s-cart-summary-wrapper:hover svg,
.s-cart-summary-wrapper:hover i,
.header-cart:hover svg,
.header-cart:hover i,
salla-cart-summary:hover svg {
    fill: #ff8000 !important;
    color: #ff8000 !important;
}

/* User icon wrapper */
.s-user-menu,
.header-user,
salla-user-menu,
.user-icon {
    transition: all 0.3s ease !important;
    transform: scale(1.25) !important;
}

.s-user-menu:hover,
.header-user:hover,
salla-user-menu:hover,
.user-icon:hover {
    transform: scale(1.1) !important;
}

.s-user-menu:hover svg,
.s-user-menu:hover i,
.header-user:hover svg,
.header-user:hover i,
salla-user-menu:hover svg {
    fill: #D4847A !important;
    color: #D4847A !important;
}

/* Cart badge (count) styling */
.s-cart-summary-count {
    background-color: #ff6b6b !important;
    font-weight: bold !important;
    box-shadow: 0 2px 5px rgba(255, 107, 107, 0.4) !important;
}

/* =========================================
   26. Product Page Brand Logo
   ========================================= */
.product-brand {
    width: 7rem !important;
    /* 112px - increased by additional 15% */
    height: auto !important;
}

.product-brand img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* =========================================
   27. Product Page Share & Wishlist Buttons
   ========================================= */
.s-social-share-btn.s-button-light-outline,
.btn--wishlist.s-button-light-outline {
    background-color: #D4847A !important;
    border-color: #D4847A !important;
}

/* Gap between share and wishlist buttons */
ul.flex:has(.s-social-share-btn):has(.btn--wishlist) {
    gap: 1px !important;
}

salla-social-share {
    margin-left: 1px !important;
}

.s-social-share-btn.s-button-light-outline svg,
.s-social-share-btn.s-button-light-outline i,
.btn--wishlist.s-button-light-outline svg,
.btn--wishlist.s-button-light-outline i {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.s-social-share-btn.s-button-light-outline:hover,
.btn--wishlist.s-button-light-outline:hover {
    background-color: #3f3f3f !important;
    border-color: #3f3f3f !important;
}

/* ===== Section 22: Tax Certificate Modal ===== */
/* ===== Section 22: Tax Certificate Modal ===== */
.tax-modal {
    display: none !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    /* Max z-index */
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(5px);
    align-items: center !important;
    justify-content: center !important;
    inset: 0 !important;
    /* Ensure full coverage */
}

.tax-modal.show {
    display: flex !important;
    animation: fadeIn 0.3s;
}

.tax-modal-content {
    margin: auto !important;
    display: block !important;
    max-width: 90% !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    object-fit: contain !important;
}

.tax-modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 35px !important;
    color: #f1f1f1 !important;
    font-size: 40px !important;
    font-weight: bold !important;
    transition: 0.3s !important;
    cursor: pointer !important;
    line-height: 1 !important;
    z-index: 2147483648 !important;
}

.tax-modal-close:hover,
.tax-modal-close:focus {
    color: #bbb !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* ===== Section 20: Installment Section Styling ===== */
salla-installment {
    display: block;
    background-color: #ffffff !important;
    padding: 1.25rem !important;
    border-radius: 0.375rem !important;
    margin-bottom: 1rem !important;
}

.s-installment-emkan-wrapper {
    background-color: #fff !important;
    border: 1px solid #e5e7eb !important;
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    /* rounded-lg */
    margin-top: 0.5rem;
}

.s-installment-emkan-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.s-installment-emkan-content img {
    height: 24px;
    width: auto;
}

.s-installment-emkan-content-text {
    font-size: 0.875rem;
    color: #374151;
}

/* =========================================
   28. Load More Button Styling
   ========================================= */
.s-button-load-more,
.btn--load-more,
.s-infinite-scroll-btn {
    border-radius: 10px !important;
}

/* =========================================
   30. Hide Slider Navigation (Side Arrows)
   ========================================= */
.swiper-button-next,
.swiper-button-prev,
.s-slider-block__nav {
    display: none !important;
}

/* =========================================
   31. Filter Toggle Feature
   ========================================= */
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 8px 15px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #3f3f3f;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.filter-toggle-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.filter-toggle-btn i {
    font-size: 16px;
}

/* Hidden Filters State */
body.filters-hidden .s-layout__sidebar,
body.filters-hidden .sidebar,
body.filters-hidden aside {
    display: none !important;
}

body.filters-hidden .s-layout__content,
body.filters-hidden .main-content,
body.filters-hidden .s-products-list-wrapper {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(6, 1fr) !important;
    /* Force 6 cols when full width */
}

/* Infinite Scroll Removed */

/* =========================================
   32. Strict Homepage & Hidden Layout (Final Override)
   ========================================= */
@media (min-width: 1024px) {

    /* STRICTLY Force 6 Columns for Homepage Only */
    .store-home .s-products-list-wrapper,
    .index .s-products-list-wrapper,
    .brands-single .s-products-list-wrapper,
    .store-home .s-block--product-card-grid .grid,
    .index .s-block--product-card-grid .grid,
    .store-home .s-block--special-products .grid,
    .index .s-block--special-products .grid,
    .store-home .product-grid,
    .index .product-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}


/* =========================================
/* =========================================
   33. Mobile Layout & Overflow Fix (Root Cause)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Fix Global Container Overflow */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body .app-inner,
    body .container,
    body .s-container,
    body .wrapper,
    body .main-content,
    body .s-product-details {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        /* Allow shrinking */
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Force Vertical Layout for Product Details */
    body.product-single .flex,
    body.product-single .row,
    body.product-single .s-product-details>div {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    /* 3. Ensure Product Description is Visible and Full Width */
    body.product-single article.article--main,
    body.product-single #more-content {
        display: block !important;
        width: 100% !important;
        /* height, max-height, overflow removed to allow "Read More" JS to work */
        /* visibility, opacity removed to allow default transitions */
        margin: 20px 0 !important;
        padding: 10px !important;
        background: #fdfdfd !important;
        border: 1px solid #eee !important;
    }

    /* 4. Fix Installment Widget Layout */
    body.product-single salla-installment {
        display: block !important;
        width: 100% !important;
        margin: 15px 0 !important;
        clear: both !important;
    }

    /* 5. Ensure Sticky Bar / Add to Cart is Visible */
    .sticky-product-bar,
    .product-form,
    salla-add-product-button {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 999 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .sticky-product-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important; /* Ensure visibility against content */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        gap: 10px !important; /* Visual separation requested by user */
        padding: 10px !important; /* Ensure internal spacing */
        display: flex !important; /* Reinforce flex for gap to work */
        flex-direction: row !important; /* Ensure horizontal layout if not already */
        flex-wrap: nowrap !important;
    }
}


/* =========================================
   34. Fix Breadcrumbs/Sub-links (Horizontal Scroll)
   ========================================= */
ol.prestige-breadcrumbs,
/* Target semantic tag for specificity */
nav .prestige-breadcrumbs,
.prestige-breadcrumbs,
.prestige-breadcrumbs ol,
.prestige-breadcrumbs ul,
.sub-links-bar,
.sub-links-bar ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: center !important;
    /* FULL WIDTH - Edge to Edge */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
}

/* Hide scrollbars */
.prestige-breadcrumbs::-webkit-scrollbar,
.sub-links-bar::-webkit-scrollbar {
    display: none !important;
}

.prestige-breadcrumbs li,
.prestige-breadcrumbs a,
.sub-links-bar li,
.sub-links-bar a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    white-space: nowrap !important;
    float: none !important;
}

/* Fix arrows/separators in breadcrumbs */
.prestige-breadcrumbs li::after,
.prestige-breadcrumbs li .arrow {
    display: inline-block !important;
    position: static !important;
    margin: 0 5px !important;
}


/* =========================================
   35. Mobile Layout & Interactive Elements (Consolidated)
   ========================================= */

/* A. Mobile Vertical Icon Stack (iHerb Style) */
@media (max-width: 768px) {
    /* Hide Default Wishlist duplicates */
    .product-form .btn--wishlist,
    .product-header-actions .btn--wishlist, 
    .s-social-share-wrapper .btn--wishlist,
    salla-button.btn--wishlist.hidden { 
        display: none !important; 
    }

    /* Wrapper */
    .vertical-icons-wrapper {
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        z-index: 100000 !important; /* CRITICAL: Must be higher than magnifier lens (9999) */
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important; /* 64px based logic applied as gap */
        align-items: center !important;
        pointer-events: none; /* Wrapper itself passes clicks */
    }

    /* Buttons (Heart & Share) - Final Style */
    .vertical-icons-wrapper .btn--wishlist,
    .vertical-icons-wrapper salla-social-share,
    .vertical-icons-wrapper .s-social-share-btn,
    .vertical-icons-wrapper .custom-wishlist-btn,
    .vertical-icons-wrapper .custom-share-btn {
        pointer-events: auto !important;
        position: static !important;
        transform: none !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 48px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important; /* Match user preference for matching Heart (transparent) */
        border: 1px solid #666 !important; /* Soft black */
        margin: 0 !important;
        box-shadow: none !important;
        z-index: 1 !important;
        cursor: pointer !important;
    }

    /* Icons (SVG) */
    .vertical-icons-wrapper i,
    .vertical-icons-wrapper svg,
    .vertical-icons-wrapper .sicon-heart,
    .vertical-icons-wrapper .sicon-share-alt,
    .vertical-icons-wrapper salla-social-share svg,
    .vertical-icons-wrapper .s-social-share-btn svg {
        display: block !important;
        visibility: visible !important;
        font-size: 24px !important;
        line-height: 1 !important;
        min-width: 24px !important;
        width: 24px !important;
        height: 24px !important;
        color: #666 !important;
        fill: none !important;
        stroke: #666 !important;
        stroke-width: 1.2px !important; /* Thin outline */
        opacity: 1 !important;
    }

    /* Wishlist Heart - Filled Red when added */
    .vertical-icons-wrapper .custom-wishlist-btn.is-added svg {
        fill: #ef4444 !important;
        stroke: #ef4444 !important;
    }
    
    .vertical-icons-wrapper salla-social-share::part(button) {
        color: #666 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Hover State */
    .vertical-icons-wrapper .btn--wishlist:hover,
    .vertical-icons-wrapper salla-social-share:hover,
    .vertical-icons-wrapper .custom-wishlist-btn:hover,
    .vertical-icons-wrapper .custom-share-btn:hover {
        background: rgba(255,255,255,0.95) !important;
        border-color: #000 !important;
    }

    /* Custom Vertical Share Dropdown */
    .custom-share-container {
        position: relative;
    }

    .share-dropdown {
        display: none;
        position: absolute;
        top: 0;
        left: 100%; /* To the right of the button */
        margin-left: 10px;
        flex-direction: column;
        background: white;
        border: 1px solid #eee;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 100001;
        min-width: 160px;
        padding: 5px;
        pointer-events: auto !important;
    }

    /* Show state handled by JS toggling class */
    .share-dropdown.show {
        display: flex !important;
    }

    .share-option {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        width: 100%;
        border: none;
        background: transparent;
        cursor: pointer;
        text-align: right; /* RTL alignment */
        font-size: 14px;
        color: #333;
        border-radius: 4px;
        transition: background 0.2s;
        pointer-events: auto !important;
    }

    .share-option:hover {
        background: #f5f5f5;
    }
    
    .share-option svg {
        flex-shrink: 0;
        pointer-events: none; /* Ensure clicks pass to button */
    }

    /* B. Layout Adjustments (Header, Footer, Breadcrumbs) */
    
    /* Header Icons Horizontal */
    header .flex.text-base.items-center.justify-center,
    .site-header .flex.flex-col.items-center,
    .header-buttons-wrapper {
        flex-direction: row !important;
        gap: 15px !important;
    }

    /* Footer Icons Horizontal */
    .footer-payment-icons,
    .s-verify-payment,
    footer .flex.items-stretch.rtl\:space-x-reverse.space-x-2 {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    footer .flex.items-stretch.rtl\:space-x-reverse.space-x-2 > * {
        margin-bottom: 5px !important;
    }

    /* Full Width Breadcrumbs */
    .prestige-breadcrumbs {
        width: 100% !important;
        max-width: 100vw !important;
        padding-inline: 15px !important;
        margin-inline: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
}

/* =========================================
   36. Slider & Thumbnails Customization
   ========================================= */

/* Active Thumbnail Style (Single Soft Black Line) */
.thumbs-slider .swiper-slide-thumb-active,
.product-thumbs .swiper-slide-thumb-active,
.swiper-slide-thumb-active {
    border: 1px solid #666 !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    border-radius: 8px !important;
}

/* Remove internal image borders */
.thumbs-slider .swiper-slide-thumb-active img,
.product-thumbs .swiper-slide-thumb-active img,
.swiper-slide-thumb-active img,
.thumbs-slider .swiper-slide:hover img {
    border: none !important;
    box-shadow: none !important;
}

/* Remove Pseudo-elements triggering double lines */
.thumbs-slider .swiper-slide-thumb-active::after,
.product-thumbs .swiper-slide-thumb-active::after,
.swiper-slide-thumb-active::after {
    content: none !important;
    display: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Cancel Hover Effects on NON-ACTIVE thumbnails only */
.thumbs-slider .swiper-slide:not(.swiper-slide-thumb-active):hover,
.product-thumbs .swiper-slide:not(.swiper-slide-thumb-active):hover {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Keep active border visible even during hover */
.swiper-slide-thumb-active,
.swiper-slide-thumb-active:hover {
    border: 1px solid #666 !important;
}

/* =========================================
   38. Magnifier Lens Style
   ========================================= */
.img-magnifier-lens {
    position: absolute;
    width: 300px;       /* 20% larger */
    height: 300px;
    border-radius: 50%;
    border: 1px solid #333; /* Thin soft black border */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Stronger shadow */
    cursor: none;
    pointer-events: none; /* Crucial: clicks pass through to image */
    z-index: 9999 !important; /* Maximum z-index */
    opacity: 0;
    transition: opacity 0.15s ease-out; /* Smoother fade */
    background-repeat: no-repeat;
    background-color: #fff;
    display: none; /* JS will toggle block */
}

/* Show only on hover */
.product-image-container:hover .img-magnifier-lens {
    display: block;
}

/* =========================================
    35. Fix Mobile Header - Icons & Layout (TESTED - Absolute Layout)
    ========================================= */
@media (max-width: 768px) {
    /* 1. Header Container */
    .prestige-header {
        display: block !important; /* Changed from flex to block for absolute children */
        width: 100% !important;
        max-width: 100vw !important;
        height: 60px !important;
        min-height: 60px !important;
        background: white !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 999 !important;
        padding: 0 !important;
    }
    
    /* 2. Logo - Absolute Center */
    .prestige-logo,
    .prestige-header > a[href*="roa-care"] {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 1000 !important;
        width: auto !important;
        min-width: 120px !important; /* Increased min-width */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }
    .prestige-logo img,
    .prestige-header > a img {
        max-height: 40px !important;
        width: auto !important;
        display: block !important;
    }

    /* 3. Icon Groups - Absolute Positioning Pinned to Sides */
    .prestige-header > div {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        z-index: 20 !important;
        height: 100% !important;
    }
    
    /* Group 1 (Menu, Search, Lang) -> Move to RIGHT for Arabic/RTL feel */
    .prestige-header > div:first-child {
        right: 10px !important;
        left: auto !important;
        justify-content: flex-end !important;
    }
    
    /* Group 2 (User, Cart) -> Move to LEFT for Arabic/RTL feel */
    .prestige-header > div:last-child,
    .prestige-header > div:nth-child(3) {
        left: 10px !important;
        right: auto !important;
        justify-content: flex-start !important;
    }

    /* 4. User Menu - Strict control */
    salla-user-menu {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    /* Hide Text */
    salla-user-menu .s-user-menu-trigger-content,
    salla-user-menu .s-user-menu-trigger-hello,
    salla-user-menu .s-user-menu-trigger-name {
        display: none !important;
    }
    /* Hide Arrow */
    salla-user-menu .s-user-menu-trigger-icon {
        display: none !important;
    }
    /* Avatar Size */
    .s-user-menu-avatar-wrap {
        width: 30px !important;
        height: 30px !important;
        border: 1px solid #f0f0f0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }
    .s-user-menu-trigger-avatar {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 5. Cart Summary */
    salla-cart-summary,
    .s-cart-summary-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        text-decoration: none !important;
    }
    .s-cart-summary-count {
        position: absolute !important;
        top: -6px !important;
        left: -6px !important;
        background: #ef4444 !important;
        color: white !important;
        font-size: 10px !important;
        padding: 2px 5px !important;
        border-radius: 10px !important;
        line-height: 1 !important;
        z-index: 20 !important;
    }
    .s-cart-summary-content {
        display: none !important;
    }
    .s-cart-summary-icon,
    .sicon-shopping-bag {
        font-size: 22px !important;
        color: #333 !important;
    }

    /* 6. Other Header Icons */
    .prestige-header i,
    .mburger,
    .sicon-search,
    .sicon-globe {
        font-size: 22px !important;
        color: #333 !important;
        cursor: pointer !important;
    }

    /* 7. CRITICAL: Remove transform from ALL dropdown ancestors */
    /* Based on HTML: salla-user-menu > .s-user-menu-wrapper > .s-user-menu-toggler > .s-user-menu-dropdown */
    /* Transform on ancestors breaks position:fixed on dropdown */
    salla-user-menu,
    .s-user-menu-wrapper,
    .s-user-menu-toggler,
    .s-user-menu-trigger-slot {
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* 8. User Menu Dropdown - Proper Full Screen Overlay */
    .s-user-menu-dropdown {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        background: #fff !important;
        z-index: 99999 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Dropdown Header */
    .s-user-menu-dropdown-header {
        display: flex !important;
        align-items: center !important;
        padding: 15px !important;
        border-bottom: 1px solid #eee !important;
        background: #f9f9f9 !important;
        gap: 12px !important;
    }
    
    .s-user-menu-dropdown-header img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
    }
    
    .s-user-menu-dropdown-header-content {
        flex: 1 !important;
    }
    
    .s-user-menu-dropdown-header-content span {
        font-size: 12px !important;
        color: #888 !important;
    }
    
    .s-user-menu-dropdown-header-content p {
        font-size: 16px !important;
        font-weight: bold !important;
        color: #333 !important;
        margin: 0 !important;
    }
    
    .s-user-menu-dropdown-header-close {
        width: 32px !important;
        height: 32px !important;
        border: none !important;
        background: transparent !important;
        cursor: pointer !important;
    }

    /* Dropdown List */
    .s-user-menu-dropdown-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
    }
    
    .s-user-menu-dropdown-item {
        border-bottom: 1px solid #eee !important;
    }
    
    .s-user-menu-dropdown-item-link {
        display: flex !important;
        align-items: center !important;
        padding: 15px 20px !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 15px !important;
        gap: 12px !important;
    }
    
    .s-user-menu-dropdown-item-link:hover {
        background: #f5f5f5 !important;
    }
    
    .s-user-menu-dropdown-item-prefix {
        width: 24px !important;
        height: 24px !important;
        color: #666 !important;
    }
    
    .s-user-menu-dropdown-item-prefix svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Logout item styling */
    .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
        color: #e74c3c !important;
    }
}

/* =========================================
   36. Force Hide Sticky Bar (Checkout Interaction)
   ========================================= */
.force-hide-sticky {
    display: none !important;
    visibility: hidden !important;
    z-index: -1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}