/* =====================================================================
   MASTER WALL DZ — Brand redesign layer
   ---------------------------------------------------------------------
   Loaded LAST on every customer-facing page (see components/header.php).
   Never loaded by the admin panel, so admin/edit.php keeps its own look.

   Palette is sampled directly from assets/uploads/logo.png:
     green  #00A100   signature "M" stripes
     red    #E60003   the "DZ" mark
     black  #000000   the circle
     white  #FFFFFF   the letterform
     + the print spectrum of the colour grid (cyan / magenta / yellow /
       orange / green / blue / purple)
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */

:root {
    /* Green ramp */
    --mw-green-50:  #F0FAF0;
    --mw-green-100: #D9F5D9;
    --mw-green-200: #A8E8A8;
    --mw-green-300: #6FD46F;
    --mw-green-400: #35BE35;
    --mw-green-500: #00A100;
    --mw-green-600: #007F00;
    --mw-green-700: #006400;
    --mw-green-800: #004D00;
    --mw-green-900: #003A00;

    /* Red ramp */
    --mw-red-400: #FF3B3F;
    --mw-red-500: #E60003;
    --mw-red-600: #C40002;
    --mw-red-700: #97000A;

    /* Print spectrum from the logo colour grid */
    --mw-cyan:    #00AEEF;
    --mw-magenta: #EC008C;
    --mw-yellow:  #FFE900;
    --mw-orange:  #F7941D;
    --mw-purple:  #522398;
    --mw-blue:    #0C2D8C;
    --mw-steel:   #A7A9AC;

    /* Neutrals */
    --mw-ink:    #0A0A0A;
    --mw-ink-2:  #151515;
    --mw-ink-3:  #212121;
    --mw-line:   #E7E9E7;
    --mw-line-2: #D6D9D6;
    --mw-muted:  #6B7070;
    --mw-body:   #121212;
    --mw-canvas: #F7F8F7;
    --mw-white:  #FFFFFF;

    /* Signature gradients */
    --mw-spectrum: linear-gradient(90deg,
        var(--mw-cyan) 0%,
        var(--mw-magenta) 16%,
        var(--mw-yellow) 32%,
        var(--mw-orange) 48%,
        var(--mw-green-500) 64%,
        var(--mw-blue) 82%,
        var(--mw-purple) 100%);
    --mw-green-gradient: linear-gradient(135deg, var(--mw-green-600) 0%, var(--mw-green-800) 100%);
    --mw-green-glow:    linear-gradient(135deg, var(--mw-green-500) 0%, var(--mw-green-700) 100%);

    /* Geometry */
    --mw-radius-sm: 10px;
    --mw-radius-md: 14px;
    --mw-radius-lg: 20px;
    --mw-radius-xl: 28px;
    --mw-header-h: 84px;

    /* Elevation */
    --mw-shadow-xs: 0 1px 2px rgba(10, 10, 10, .05);
    --mw-shadow-sm: 0 2px 10px rgba(10, 10, 10, .06);
    --mw-shadow-md: 0 10px 30px rgba(10, 10, 10, .08);
    --mw-shadow-lg: 0 24px 60px rgba(10, 10, 10, .14);
    --mw-shadow-green: 0 14px 34px rgba(0, 161, 0, .30);

    /* --- Bridge into the existing --theme-* token system -------------
       theme.min.css paints most of the storefront through these tokens,
       so remapping them repaints the whole site consistently. */
    --theme-primary-50:  var(--mw-green-50);
    --theme-primary-100: var(--mw-green-100);
    --theme-primary-200: var(--mw-green-200);
    --theme-primary-300: var(--mw-green-300);
    --theme-primary-400: var(--mw-green-400);
    --theme-primary-500: var(--mw-green-500);
    --theme-primary-600: var(--mw-green-600);
    --theme-primary-700: var(--mw-green-700);
    --theme-primary-800: var(--mw-green-800);
    --theme-primary-900: var(--mw-green-900);

    --theme-neutral-50:  #F7F7F7;
    --theme-neutral-100: #EDEDED;
    --theme-neutral-200: #DFDFDF;
    --theme-neutral-300: #C6C6C6;
    --theme-neutral-400: #9E9E9E;
    --theme-neutral-500: #7A7A7A;
    --theme-neutral-600: #5E5E5E;
    --theme-neutral-700: #444444;
    --theme-neutral-800: #2C2C2C;
    --theme-neutral-900: #1A1A1A;
    --theme-neutral-950: #0A0A0A;

    --theme-primary:   var(--mw-green-500);
    --theme-secondary: var(--mw-ink-2);
    --theme-accent:    var(--mw-green-800);
    --theme-bg:        var(--mw-white);
    --theme-text:      var(--mw-body);

    --theme-btn-bg:         var(--mw-green-600);
    --theme-btn-text:       #FFFFFF;
    --theme-btn-hover-bg:   var(--mw-green-800);
    --theme-btn-hover-text: #FFFFFF;

    --theme-nav-bg:     var(--mw-white);
    --theme-nav-text:   var(--mw-ink);
    --theme-nav-hover:  var(--mw-green-600);

    --theme-footer-bg:         var(--mw-ink);
    --theme-footer-text:       #9EA3A3;
    --theme-footer-heading:    #FFFFFF;
    --theme-footer-link:       #B9BEBE;
    --theme-footer-link-hover: var(--mw-green-400);
    --theme-footer-border:     rgba(255, 255, 255, .10);

    --theme-card-bg:     var(--mw-white);
    --theme-card-text:   #141414;
    --theme-card-border: rgba(10, 10, 10, .09);

    --theme-link:       var(--mw-green-700);
    --theme-link-hover: var(--mw-green-900);
    --theme-icon:       #6B7070;

    --theme-status-success:     var(--mw-green-600);
    --theme-status-success-text: #FFFFFF;
    --theme-status-danger:      var(--mw-red-500);
    --theme-status-danger-text:  #FFFFFF;
    --theme-status-warning:     #B45309;
    --theme-status-warning-text: #FFFFFF;
    --theme-status-info:        var(--mw-cyan);
    --theme-status-info-text:   #FFFFFF;

    --theme-pattern: var(--mw-green-500);
    --wa-icon-color: #FFFFFF;
}

/* =====================================================================
   2. BASE
   ===================================================================== */

body {
    background-color: var(--mw-canvas);
    background-image:
        radial-gradient(1100px 520px at 100% -8%, rgba(0, 161, 0, .08), transparent 62%),
        radial-gradient(900px 480px at -8% 6%, rgba(0, 0, 0, .05), transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--mw-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body::before {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(0, 161, 0, .05) 0%, transparent 52%),
        radial-gradient(ellipse at 88% 82%, rgba(0, 161, 0, .035) 0%, transparent 52%);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--mw-ink);
    letter-spacing: -.01em;
}

a { transition: color .18s ease; }

::selection {
    background: var(--mw-green-500);
    color: #FFFFFF;
}

:focus-visible {
    outline: 2px solid var(--mw-green-500);
    outline-offset: 3px;
}

section[id] {
    scroll-margin-top: calc(var(--mw-header-h) + 16px);
}

/* =====================================================================
   3. HEADER / NAVIGATION
   ===================================================================== */

.main-header {
    background: rgba(255, 255, 255, .88) !important;
    color: var(--mw-ink) !important;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(10, 10, 10, .07);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}

/* Signature accent: the logo colour grid as a hairline under the bar. */
.main-header::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: var(--mw-spectrum);
    opacity: .9;
    pointer-events: none;
}

.main-header.is-scrolled {
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 10px 34px rgba(10, 10, 10, .12);
}

.header-container {
    max-width: 1280px;
    min-height: var(--mw-header-h);
    padding: 12px 24px;
}

.logo {
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.logo:hover {
    transform: translateY(-1px);
}

.logo-img {
    height: 60px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

.main-nav {
    gap: 34px;
}

.nav-link {
    font-weight: 600;
    font-size: 15.5px;
    color: var(--mw-ink) !important;
    padding: 8px 2px;
    letter-spacing: -.005em;
}

.nav-link:hover {
    color: var(--mw-green-700) !important;
}

.nav-link::after {
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mw-green-500), var(--mw-green-300));
}

.nav-link:hover::after {
    width: 100%;
}

.header-actions { gap: 12px; }

.cart-icon {
    background: var(--mw-green-50);
    color: var(--mw-green-700) !important;
    border: 1px solid rgba(0, 161, 0, .16);
    border-radius: 999px;
    padding: 9px 11px;
}

.cart-icon:hover {
    background: var(--mw-green-600);
    border-color: var(--mw-green-600);
    color: #FFFFFF !important;
}

.cart-icon:hover .cod-badge {
    background: var(--mw-ink) !important;
    color: #FFFFFF !important;
}

.cod-badge {
    background: var(--mw-ink);
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: .04em;
    padding: 3px 7px;
    top: -7px;
    inset-inline-start: -6px;
}

/* The counter sits on the opposite edge from the COD pill so the two
   badges never overlap (the RTL header mirrors the whole cluster). */
.cart-count-badge {
    background: var(--mw-red-500);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(230, 0, 3, .35);
    top: -7px;
    inset-inline-start: auto;
    inset-inline-end: -5px;
}

.lang-switch {
    border: 1.5px solid rgba(10, 10, 10, .14);
    color: var(--mw-ink);
    font-weight: 700;
    letter-spacing: .02em;
}

.lang-switch:hover,
.lang-switch:focus-visible {
    background: var(--mw-green-50);
    border-color: var(--mw-green-500);
    color: var(--mw-green-800);
}

/* Mobile drawer */
.mobile-nav {
    top: var(--mw-header-h);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--mw-line);
    box-shadow: 0 18px 40px rgba(10, 10, 10, .14);
    padding: 14px;
}

.mobile-nav-link {
    color: var(--mw-ink);
    font-weight: 600;
    border-bottom: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-sm);
    margin-bottom: 4px;
    transition: background-color .18s ease, color .18s ease, padding-inline-start .18s ease;
}

.mobile-nav-link:hover {
    background: var(--mw-green-50);
    color: var(--mw-green-800);
    padding-inline-start: 18px;
}

.mobile-menu-btn { color: var(--mw-ink) !important; }

/* =====================================================================
   4. SECTION HEADINGS
   ===================================================================== */

.section { padding: 88px 0; }

.section-header { margin-block-end: 48px; }

.section-title {
    color: var(--mw-ink) !important;
    font-weight: 900;
    letter-spacing: -.025em;
}

.section-title::after {
    background: linear-gradient(90deg, var(--mw-green-500), var(--mw-green-300)) !important;
    width: 64px;
    height: 4px;
    border-radius: 999px;
    bottom: -14px;
}

.section-header.reveal.is-visible .section-title::after { width: 104px; }

.section-subtitle {
    color: var(--mw-muted) !important;
    font-size: 16.5px;
    max-width: 640px;
}

/* =====================================================================
   5. BUTTONS
   ===================================================================== */

.hero-cta,
.product-btn,
.submit-btn,
.btn-primary,
.btn,
.final-cta__btn,
.mobile-order-bar-btn,
.filter-apply,
.cart-checkout .submit-btn,
.cart-checkout .btn-primary {
    background: var(--mw-green-gradient) !important;
    color: #FFFFFF !important;
    border: 1px solid transparent !important;
    border-radius: var(--mw-radius-md);
    font-weight: 700;
    letter-spacing: -.005em;
    box-shadow: 0 8px 20px rgba(0, 127, 0, .22);
    position: relative;
    overflow: hidden;
}

.hero-cta:hover,
.product-btn:hover,
.submit-btn:hover,
.btn-primary:hover,
.btn:hover,
.final-cta__btn:hover,
.mobile-order-bar-btn:hover,
.filter-apply:hover,
.cart-checkout .submit-btn:hover,
.cart-checkout .btn-primary:hover {
    background: linear-gradient(135deg, var(--mw-green-700) 0%, var(--mw-green-900) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: var(--mw-shadow-green);
    filter: none;
}

/* Sheen sweep on the primary buttons */
.hero-cta::after,
.product-btn::after,
.submit-btn::after,
.btn-primary::after,
.btn::after,
.final-cta__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 48%, transparent 66%);
    transform: translateX(-120%);
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.hero-cta:hover::after,
.product-btn:hover::after,
.submit-btn:hover::after,
.btn-primary:hover::after,
.btn:hover::after,
.final-cta__btn:hover::after {
    transform: translateX(120%);
}

.hero-cta {
    padding: 17px 42px;
    font-size: 16px;
    border-radius: var(--mw-radius-lg);
}

/* Secondary / ghost buttons */
.btn-secondary,
.btn.btn-secondary {
    background: var(--mw-white) !important;
    color: var(--mw-ink) !important;
    border: 1.5px solid var(--mw-line-2) !important;
    box-shadow: var(--mw-shadow-xs);
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
    background: var(--mw-green-50) !important;
    color: var(--mw-green-800) !important;
    border-color: var(--mw-green-500) !important;
    box-shadow: 0 8px 20px rgba(0, 161, 0, .16);
}

.btn-block { width: 100%; display: inline-flex; justify-content: center; }

/* "Add to cart" reads as a secondary action next to the solid CTA. */
.add-to-cart-btn {
    background: transparent !important;
    color: var(--mw-green-700) !important;
    border: 1.5px solid var(--mw-green-500) !important;
    border-radius: var(--mw-radius-md);
    font-weight: 700;
}

.add-to-cart-btn:hover:not(:disabled) {
    background: var(--mw-green-600) !important;
    color: #FFFFFF !important;
    border-color: var(--mw-green-600) !important;
}

.add-to-cart-btn:disabled {
    background: transparent !important;
    color: var(--mw-muted) !important;
    border-color: var(--mw-line-2) !important;
}

/* =====================================================================
   6. PRODUCT CARDS / GRID
   ===================================================================== */

.products-grid {
    gap: 28px;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.product-card {
    background: var(--mw-white) !important;
    color: var(--mw-body) !important;
    border: 1px solid var(--mw-line) !important;
    border-radius: var(--mw-radius-lg) !important;
    box-shadow: var(--mw-shadow-sm);
    overflow: hidden;
    transition: transform .32s cubic-bezier(.22, .61, .36, 1), box-shadow .32s ease, border-color .32s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 161, 0, .38) !important;
    box-shadow: 0 22px 48px rgba(10, 10, 10, .14);
}

.product-image {
    background: #F1F3F2;
    aspect-ratio: 4 / 3;
}

.product-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-bottom: 1px solid var(--mw-line);
    pointer-events: none;
    z-index: 1;
}

.product-image img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.product-card:hover .product-image img { transform: scale(1.07); }

.product-info { padding: 20px 20px 22px; }

.product-name {
    color: var(--mw-ink) !important;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 8px;
}

.product-card:hover .product-name { color: var(--mw-green-800) !important; }

.product-price {
    color: var(--mw-ink) !important;
    font-weight: 900;
    letter-spacing: -.02em;
    margin-bottom: 16px;
}

.product-price span { color: var(--mw-muted) !important; }

.price-old { color: var(--mw-muted) !important; }

.discount-badge {
    background: linear-gradient(135deg, var(--mw-red-500), var(--mw-red-700));
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(230, 0, 3, .32);
    border-radius: 999px;
    font-size: 12.5px;
    letter-spacing: .02em;
}

.discount-badge-inline {
    background: linear-gradient(135deg, var(--mw-red-500), var(--mw-red-700));
    color: #FFFFFF !important;
}

.product-card-actions { gap: 9px; }

.product-card-link:focus-visible { outline-color: var(--mw-green-500); }

/* =====================================================================
   7. CATEGORIES
   ===================================================================== */

.categories-grid { gap: 22px; }

.category-card {
    background: var(--mw-white) !important;
    color: var(--mw-body) !important;
    border: 1px solid var(--mw-line) !important;
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-sm);
    padding: 34px 24px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}

.category-card:hover {
    border-color: var(--mw-green-500) !important;
    transform: translateY(-6px);
    box-shadow: var(--mw-shadow-md);
}

.category-icon {
    background: var(--mw-green-gradient);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(0, 127, 0, .26);
}

.category-name { color: var(--mw-ink) !important; }

.category-card .category-image {
    border: 3px solid var(--mw-white);
    box-shadow: 0 10px 28px rgba(10, 10, 10, .16);
}

.category-card:hover .category-image {
    box-shadow: 0 16px 34px rgba(0, 161, 0, .22);
}

.category-card .category-name { color: var(--mw-ink); }

.subcategories-strip .category-card {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    box-shadow: var(--mw-shadow-xs);
}

/* =====================================================================
   8. FEATURES STRIP (dark band)
   ===================================================================== */

.features {
    background: var(--mw-ink) !important;
    color: var(--mw-muted);
    padding: 88px 0;
    position: relative;
}

.features::before {
    height: 2px;
    background: var(--mw-spectrum);
    opacity: .85;
}

.features .section-title { color: #FFFFFF !important; }

.features .section-title::after {
    background: linear-gradient(90deg, var(--mw-green-500), var(--mw-green-300)) !important;
}

.features .section-subtitle { color: rgba(255, 255, 255, .72) !important; }

.feature-item {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--mw-radius-lg);
    padding: 36px 26px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), background .3s ease, border-color .3s ease;
}

.feature-item:hover {
    transform: translateY(-6px);
    background: rgba(0, 161, 0, .10);
    border-color: rgba(0, 161, 0, .42);
}

.feature-icon {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: none;
    transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.feature-icon svg { color: var(--mw-green-400); }

.feature-item:hover .feature-icon {
    background: rgba(0, 161, 0, .18);
    border-color: var(--mw-green-500);
    transform: rotate(8deg);
}

.feature-item:hover .feature-icon svg { color: #FFFFFF; }

.feature-title {
    color: #FFFFFF !important;
    font-weight: 800;
}

.feature-desc { color: rgba(255, 255, 255, .66) !important; }

/* =====================================================================
   9. FAQ
   ===================================================================== */

.faq-list { gap: 14px; max-width: 900px; }

.faq-item {
    background: var(--mw-white) !important;
    color: var(--mw-body) !important;
    border: 1px solid var(--mw-line) !important;
    border-inline-start: 4px solid var(--mw-green-500) !important;
    border-radius: var(--mw-radius-md) !important;
    box-shadow: var(--mw-shadow-xs);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
}

.faq-item:hover {
    box-shadow: var(--mw-shadow-md);
    transform: translateY(-2px);
}

.faq-item[open] {
    border-inline-start-color: var(--mw-green-700) !important;
    box-shadow: var(--mw-shadow-md);
}

.faq-question {
    color: var(--mw-ink) !important;
    padding: 22px 24px;
    font-weight: 700;
}

.faq-question:hover { background: var(--mw-green-50); }

.faq-icon {
    background: var(--mw-green-700) !important;
    color: #FFFFFF !important;
}

.faq-item[open] .faq-icon {
    background: var(--mw-green-500) !important;
}

.faq-item svg { color: inherit !important; }

.faq-answer { color: var(--mw-body) !important; }
.faq-answer p { color: var(--mw-body) !important; opacity: .88; }

/* =====================================================================
   10. REVIEWS
   ===================================================================== */

.review-card {
    background: var(--mw-white) !important;
    color: var(--mw-body) !important;
    border: 1px solid var(--mw-line) !important;
    border-radius: var(--mw-radius-lg) !important;
    box-shadow: var(--mw-shadow-sm);
    padding: 32px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}

.review-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 161, 0, .30) !important;
    box-shadow: var(--mw-shadow-md);
}

.review-card::before { color: var(--mw-green-500); opacity: .07; }

.review-stars .star.filled,
.product-rating-line .stars .star.filled { color: #E8B400; }

.review-text { color: var(--mw-body) !important; }

.review-avatar {
    background: var(--mw-green-gradient) !important;
    color: #FFFFFF !important;
}

.review-name { color: var(--mw-ink) !important; }
.review-verified { color: var(--mw-green-700); }
.review-author { border-top-color: var(--mw-line); }

/* =====================================================================
   11. CATALOG — toolbar, filters, pagination
   ===================================================================== */

.page-header {
    background: var(--mw-ink) !important;
    padding: 64px 0;
}

.page-header::before {
    background:
        radial-gradient(circle at 82% 18%, rgba(0, 161, 0, .22) 0%, transparent 45%),
        radial-gradient(circle at 18% 84%, rgba(230, 0, 3, .12) 0%, transparent 42%);
}

.page-title { color: #FFFFFF; font-weight: 900; }
.page-subtitle { color: rgba(255, 255, 255, .68); }

.products-section { padding: 56px 0 80px; }

/* Top category row: equal circles in one swipeable line. Native overflow
   follows the page direction, so Arabic starts at the right edge. */
.catalog-cats { margin-bottom: 28px; }

.catalog-cats-track {
    display: flex;
    justify-content: safe center;
    gap: 12px;
    margin: 0;
    padding: 4px 2px 8px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.catalog-cats-track::-webkit-scrollbar { display: none; }

/* Mouse users have no swipe gesture, so they get a visible scrollbar. */
@media (hover: hover) and (pointer: fine) {
    .catalog-cats-track { scrollbar-width: thin; }
}

.catalog-cats-track > li {
    flex: 0 0 96px;
    scroll-snap-align: start;
}

.catalog-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--mw-ink);
    text-align: center;
    text-decoration: none;
}

.catalog-cat-image {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mw-canvas);
    border: 2px solid var(--mw-line);
    box-sizing: border-box;
    transition: border-color .18s ease, transform .18s ease;
}

.catalog-cat-image picture { display: contents; }

.catalog-cat-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catalog-cat:hover .catalog-cat-image { border-color: var(--mw-green-500); }
.catalog-cat:active .catalog-cat-image { transform: scale(.96); }
.catalog-cat:focus-visible { outline: 2px solid var(--mw-green-500); outline-offset: 2px; border-radius: 10px; }

.catalog-cat.is-active .catalog-cat-image {
    border-color: var(--mw-green-500);
    box-shadow: 0 0 0 2px var(--mw-green-500);
}

.catalog-cat-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.catalog-cat.is-active .catalog-cat-name { color: var(--mw-green-700); }

:root[data-theme="dark"] .catalog-cat { color: var(--theme-card-text); }
:root[data-theme="dark"] .catalog-cat-image {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
}
:root[data-theme="dark"] .catalog-cat.is-active .catalog-cat-image { border-color: var(--mw-green-500); }
:root[data-theme="dark"] .catalog-cat.is-active .catalog-cat-name { color: var(--mw-green-500); }

.products-toolbar {
    background: var(--mw-white) !important;
    border: 1px solid var(--mw-line) !important;
    border-radius: var(--mw-radius-lg) !important;
    box-shadow: var(--mw-shadow-sm);
    padding: 14px 16px;
    margin-bottom: 22px;
}

.search-box,
.toolbar-search {
    background: var(--mw-canvas);
    border: 1px solid var(--mw-line);
    border-radius: 999px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.search-box:focus-within,
.toolbar-search:focus-within {
    border-color: var(--mw-green-500);
    box-shadow: 0 0 0 4px rgba(0, 161, 0, .14);
    background: var(--mw-white);
}

.search-box svg { color: var(--mw-muted) !important; }

.results-count,
.products-result-count { color: var(--mw-muted) !important; }

.filter-sidebar {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-lg);
    padding: 22px 22px 24px;
    box-shadow: var(--mw-shadow-sm);
    position: sticky;
    top: calc(var(--mw-header-h) + 18px);
}

.filter-sidebar-head { border-bottom-color: var(--mw-line); }

.filter-eyebrow {
    color: var(--mw-green-700) !important;
    font-weight: 800;
}

.filter-sidebar-title { color: var(--mw-ink) !important; }

.filter-label { color: var(--mw-muted) !important; }

.filter-toggle-btn {
    background: var(--mw-white);
    color: var(--mw-green-700);
    border: 1.5px solid var(--mw-green-500);
    border-radius: var(--mw-radius-md);
    box-shadow: var(--mw-shadow-xs);
}

.filter-toggle-btn:hover {
    background: var(--mw-green-50);
    color: var(--mw-green-800);
    box-shadow: 0 0 0 4px rgba(0, 161, 0, .14);
}

.filter-toggle-count { background: var(--mw-green-600); }

.filter-option:hover { background: var(--mw-green-50); }

.filter-option-box {
    border-color: var(--mw-line-2);
    background: var(--mw-white);
    border-radius: 6px;
}

.filter-option-input:checked + .filter-option-box {
    background: var(--mw-green-700);
    border-color: var(--mw-green-700);
}

.filter-option-input:checked + .filter-option-box::after { border-color: #FFFFFF; }

.filter-option-input:focus-visible + .filter-option-box { outline-color: var(--mw-green-500); }

.filter-pill {
    border-color: var(--mw-line-2);
    border-radius: 999px;
    background: var(--mw-white);
}

.filter-pill:hover {
    border-color: var(--mw-green-500);
    color: var(--mw-green-800);
    background: var(--mw-green-50);
}

.filter-pill:has(.filter-option-input:checked) {
    background: var(--mw-green-700);
    border-color: var(--mw-green-700);
    color: #FFFFFF;
}

.filter-pill:has(.filter-option-input:focus-visible) { outline-color: var(--mw-green-500); }

.filter-select {
    background: var(--mw-white);
    border-color: var(--mw-line-2);
    color: var(--mw-ink);
    border-radius: var(--mw-radius-sm);
}

.filter-select:hover { border-color: var(--mw-green-500); }

.filter-select:focus {
    border-color: var(--mw-green-500);
    box-shadow: 0 0 0 4px rgba(0, 161, 0, .14);
}

.filter-select-chevron { color: var(--mw-muted); }

.empty-state {
    background: var(--mw-white);
    border: 1px dashed var(--mw-line-2);
    border-radius: var(--mw-radius-lg);
    color: var(--mw-muted);
    padding: 72px 24px;
}

.pagination { gap: 10px; margin-top: 52px; }

.pagination-btn {
    background: var(--mw-white);
    border: 1.5px solid var(--mw-line);
    border-radius: var(--mw-radius-md);
    color: var(--mw-ink) !important;
    font-weight: 700;
    box-shadow: var(--mw-shadow-xs);
}

.pagination-btn:hover {
    background: var(--mw-green-50);
    border-color: var(--mw-green-500);
    color: var(--mw-green-800) !important;
    transform: translateY(-2px);
}

.pagination-btn.active {
    background: var(--mw-green-700) !important;
    border-color: var(--mw-green-700) !important;
    color: #FFFFFF !important;
}

/* =====================================================================
   12. PRODUCT DETAIL PAGE
   ===================================================================== */

.product-detail { padding: 36px 0 80px; }

.product-trustbar {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-sm);
    padding: 18px 22px;
    margin-bottom: 30px;
}

.trust-item__icon {
    background: var(--mw-green-50);
    color: var(--mw-green-700);
    border: 1px solid rgba(0, 161, 0, .16);
}

.trust-item__title { color: var(--mw-ink) !important; }
.trust-item__sub { color: var(--mw-muted) !important; }

.product-detail-media .product-slider {
    border-radius: var(--mw-radius-lg);
    border: 1px solid var(--mw-line);
    box-shadow: var(--mw-shadow-md);
    overflow: hidden;
}

.slider-nav {
    background: rgba(255, 255, 255, .94);
    color: var(--mw-ink);
    border: 1px solid var(--mw-line);
    box-shadow: var(--mw-shadow-sm);
}

.slider-nav:hover {
    background: var(--mw-green-gradient) !important;
    color: #FFFFFF;
    border-color: transparent;
}

.slider-dot { background: rgba(255, 255, 255, .55); }

.slider-dot.active {
    background: var(--mw-green-500);
    box-shadow: 0 0 0 4px rgba(0, 161, 0, .25);
}

.product-detail-info h1 {
    color: var(--mw-ink) !important;
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.28;
}

.product-detail-price {
    color: var(--mw-ink) !important;
    font-weight: 900;
    letter-spacing: -.03em;
}

.product-detail-price span { color: var(--mw-muted) !important; }

.product-detail-desc { color: var(--mw-muted) !important; line-height: 1.9; }

.option-label { color: var(--mw-ink) !important; font-weight: 700; }

.color-btn {
    border-color: var(--mw-line-2);
    box-shadow: var(--mw-shadow-xs);
}

.color-btn.selected {
    border-color: var(--mw-green-600);
    box-shadow: 0 0 0 3px rgba(0, 161, 0, .22);
}

.size-btn {
    background: var(--mw-white);
    border: 1.5px solid var(--mw-line-2);
    border-radius: var(--mw-radius-sm);
    color: var(--mw-ink) !important;
    font-weight: 700;
}

.size-btn:hover { border-color: var(--mw-green-500); color: var(--mw-green-800) !important; }

.size-btn.selected {
    background: var(--mw-green-gradient) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.bundle-btn {
    background: var(--mw-white);
    border: 1.5px solid var(--mw-line-2);
    border-radius: var(--mw-radius-md);
    box-shadow: var(--mw-shadow-xs);
}

.bundle-btn:hover { border-color: var(--mw-green-500); }

.bundle-btn.selected {
    background: var(--mw-green-gradient) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
}

.bundle-price { color: var(--mw-muted) !important; }
.bundle-btn.selected .bundle-price { color: rgba(255, 255, 255, .88) !important; }

.bundle-color-item,
.bundle-item {
    background: var(--mw-canvas);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-md);
}

.piece-header { border-bottom-color: var(--mw-line); }
.piece-number, .piece-label, .piece-option-label { color: var(--mw-ink) !important; }

.single-color-btn.selected,
.single-size-btn.selected,
.bundle-btn.selected {
    outline-color: var(--mw-green-500);
}

/* How it works */
.how-step {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-sm);
    padding: 26px 24px;
}

.how-step-num {
    background: var(--mw-green-gradient);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(0, 127, 0, .26);
}

.how-step-title { color: var(--mw-ink) !important; }
.how-step-desc { color: var(--mw-muted) !important; }

/* Final CTA */
.final-cta {
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(0, 161, 0, .14), transparent 62%),
        var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-xl);
    box-shadow: var(--mw-shadow-md);
    padding: 52px 30px;
}

.final-cta h2 { color: var(--mw-ink) !important; font-weight: 900; letter-spacing: -.025em; }
.final-cta__sub { color: var(--mw-muted) !important; }

/* Product description */
.product-description h2 {
    color: var(--mw-ink) !important;
    border-bottom: 3px solid var(--mw-green-500);
}

.product-description-content {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-sm);
}

.product-description-content p,
.product-description-content li { color: var(--mw-body) !important; }

.related-products h2 { color: var(--mw-ink) !important; font-weight: 900; }

.images-grid img {
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-sm);
    border: 1px solid var(--mw-line);
}

/* =====================================================================
   13. ORDER / CHECKOUT FORMS
   ===================================================================== */

.order-form {
    background: var(--mw-white) !important;
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-md);
}

/* The wrapper only positions the card (sticky) — the card chrome lives on
   .order-form so the two don't stack into a double border. */
.order-form-wrapper {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.order-form {
    --form-field-bg: #F7F8F7;
    --form-field-border: rgba(10, 10, 10, .12);
    --form-accent: var(--mw-green-700);
    --form-muted: #5F6666;
    padding: 28px 24px 30px;
}

.order-form h2 { color: var(--mw-ink) !important; font-weight: 900; }

.form-head-sub { color: var(--mw-muted) !important; }

.form-group label,
.order-form .form-group label,
.order-form .option-label { color: var(--mw-ink) !important; }

.order-form .form-group input,
.order-form .form-group select,
.order-form .form-group textarea {
    background: var(--form-field-bg) !important;
    border-color: var(--form-field-border) !important;
    border-radius: var(--mw-radius-sm);
    color: var(--mw-ink) !important;
}

.order-form .form-group input:focus,
.order-form .form-group select:focus,
.order-form .form-group textarea:focus {
    border-color: var(--mw-green-600) !important;
    box-shadow: 0 0 0 4px rgba(0, 161, 0, .14);
}

.order-form .radio-label {
    border-color: var(--form-field-border);
    background: var(--form-field-bg);
    color: var(--mw-muted);
    border-radius: var(--mw-radius-md);
}

.order-form .radio-label:has(input:checked) {
    border-color: var(--mw-green-600);
    background: var(--mw-green-50);
    color: var(--mw-green-800);
    box-shadow: inset 0 0 0 1px var(--mw-green-600);
}

.order-form .radio-label:has(input:focus-visible) {
    box-shadow: 0 0 0 4px rgba(0, 161, 0, .18);
}

.form-assurances,
.order-note { color: var(--mw-muted) !important; }
.form-assurances svg,
.order-note svg { color: var(--mw-green-600); }

.receipt-summary {
    background: var(--form-field-bg);
    border: 1px solid var(--form-field-border);
    border-radius: var(--mw-radius-md);
}

.receipt-badge {
    background: rgba(0, 161, 0, .14);
    color: var(--mw-green-700);
}

.receipt-row-total .receipt-value {
    color: var(--mw-green-700) !important;
    font-weight: 900;
}

.receipt-divider {
    background: linear-gradient(to left, transparent, rgba(10, 10, 10, .16) 18%, rgba(10, 10, 10, .16) 82%, transparent);
}

.order-form .total-price-display .price,
.order-form .delivery-price-display .price { color: var(--mw-green-700) !important; }

.form-message {
    border-radius: var(--mw-radius-md);
    font-weight: 700;
}

.form-message.success {
    background: rgba(0, 127, 0, .10);
    color: var(--mw-green-800);
    border: 1.5px solid rgba(0, 127, 0, .40);
}

.form-message.error {
    background: rgba(230, 0, 3, .08);
    color: var(--mw-red-600);
    border: 1.5px solid rgba(230, 0, 3, .35);
}

.cod-delivery-warning {
    background: rgba(180, 83, 9, .08);
    color: #8A4208;
    border: 1px solid rgba(180, 83, 9, .35);
    border-radius: var(--mw-radius-sm);
}

.success-message {
    background: rgba(0, 127, 0, .08);
    border: 1.5px solid rgba(0, 127, 0, .35);
    border-radius: var(--mw-radius-lg);
}

.success-message h3 { color: var(--mw-green-800); }
.success-message .order-id { color: var(--mw-ink); }

.spinner {
    border-color: var(--mw-line-2);
    border-top-color: var(--mw-green-600);
}

/* Sticky mobile order bar */
.mobile-order-bar {
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--mw-line);
    box-shadow: 0 -8px 30px rgba(10, 10, 10, .14);
}

.mobile-order-bar-label { color: var(--mw-muted) !important; }

.mobile-order-bar-number {
    color: var(--mw-green-700) !important;
    font-weight: 900;
}

/* =====================================================================
   14. CART PAGE
   ===================================================================== */

.cart-section {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

.cart-layout { gap: 32px; }

.cart-items { gap: 16px; }

.cart-item {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-sm);
    padding: 18px;
}

.cart-item:hover {
    border-color: rgba(0, 161, 0, .34);
    box-shadow: var(--mw-shadow-md);
}

.cart-item-name { color: var(--mw-ink) !important; }
.cart-item-option-label { color: var(--mw-ink) !important; }
.cart-item-unit { color: var(--mw-muted) !important; }

.cart-item-total {
    color: var(--mw-green-700) !important;
    font-weight: 900;
}

.cart-checkout {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-md);
    padding: 24px;
}

.cart-checkout-title {
    color: var(--mw-ink) !important;
    font-weight: 900;
    border-bottom-color: var(--mw-line);
}

.cart-checkout-title::before { background: var(--mw-green-500); }

.cart-checkout .form-group input,
.cart-checkout .form-group select,
.cart-checkout .form-group textarea {
    background: var(--mw-canvas);
    border-color: rgba(10, 10, 10, .12);
    border-radius: var(--mw-radius-sm);
    color: var(--mw-ink);
}

.cart-checkout .form-group input:focus,
.cart-checkout .form-group select:focus,
.cart-checkout .form-group textarea:focus {
    border-color: var(--mw-green-600);
    box-shadow: 0 0 0 4px rgba(0, 161, 0, .14);
}

.cart-checkout .radio-label {
    border-color: rgba(10, 10, 10, .12);
    background: var(--mw-canvas);
    border-radius: var(--mw-radius-sm);
}

.cart-checkout .radio-label:has(input:checked) {
    border-color: var(--mw-green-600);
    background: var(--mw-green-50);
    color: var(--mw-green-800);
    box-shadow: inset 0 0 0 1px var(--mw-green-600);
}

.cart-color-chip.selected {
    box-shadow:
        0 0 0 1px rgba(10, 10, 10, .30),
        0 0 0 4px var(--mw-green-500);
    border-color: var(--mw-ink);
}

.cart-size-chip {
    border-color: rgba(10, 10, 10, .12);
    background: var(--mw-white);
    border-radius: var(--mw-radius-sm);
}

.cart-size-chip:hover {
    border-color: var(--mw-green-500);
    color: var(--mw-green-800);
}

.cart-size-chip.selected {
    background: var(--mw-green-700);
    border-color: var(--mw-green-700);
    color: #FFFFFF;
}

.qty-stepper {
    border-color: rgba(10, 10, 10, .12);
    border-radius: var(--mw-radius-sm);
    background: var(--mw-white);
}

.qty-btn:hover {
    background: var(--mw-green-600);
    color: #FFFFFF;
}

.cart-item-remove:hover { background: rgba(230, 0, 3, .10); }

.cart-clear-btn,
.cart-checkout .cart-clear-btn { color: var(--mw-red-600); }

.cart-empty {
    background: var(--mw-white);
    border: 1px solid var(--mw-line);
    border-radius: var(--mw-radius-xl);
    box-shadow: var(--mw-shadow-md);
    padding: 72px 32px;
}

.cart-empty-icon {
    background: var(--mw-green-gradient);
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(0, 127, 0, .28);
}

.cart-empty h2 { color: var(--mw-ink) !important; font-weight: 900; }
.cart-empty p { color: var(--mw-muted) !important; }

.cart-toast {
    background: var(--mw-ink);
    color: #FFFFFF;
    border-radius: var(--mw-radius-md);
    box-shadow: var(--mw-shadow-lg);
    border-inline-start: 4px solid var(--mw-green-500);
}

.cart-toast-error {
    background: var(--mw-red-600);
    border-inline-start-color: var(--mw-red-400);
}

/* =====================================================================
   15. THANK YOU PAGE
   ===================================================================== */

.thank-you-section {
    background: var(--mw-canvas);
    padding: clamp(48px, 8vw, 88px) 0;
}

.thank-you-card {
    background: var(--mw-white);
    color: var(--mw-body);
    border: 1px solid var(--mw-line);
    border-top: 5px solid var(--mw-green-500);
    border-radius: var(--mw-radius-xl);
    box-shadow: var(--mw-shadow-lg);
    max-width: 620px;
}

.thank-you-icon {
    background: rgba(0, 161, 0, .12);
    color: var(--mw-green-700);
}

.thank-you-title {
    color: var(--mw-ink) !important;
    font-weight: 900;
    letter-spacing: -.025em;
}

.thank-you-subtitle { color: var(--mw-muted) !important; }

.thank-you-order-id {
    background: var(--mw-canvas);
    border-color: var(--mw-line);
    border-radius: var(--mw-radius-md);
}

.thank-you-order-num { color: var(--mw-green-700) !important; }

.thank-you-details {
    background: var(--mw-canvas);
    border-color: var(--mw-line);
    border-radius: var(--mw-radius-md);
}

.thank-you-label { color: var(--mw-muted) !important; }
.thank-you-value { color: var(--mw-ink) !important; }
.thank-you-total { color: var(--mw-green-700) !important; }

.thank-you-steps {
    background: rgba(0, 161, 0, .07);
    border: 1px solid rgba(0, 161, 0, .22);
    border-radius: var(--mw-radius-md);
    text-align: start;
}

.thank-you-steps-title { color: var(--mw-green-800) !important; }
.thank-you-steps-list { color: var(--mw-body) !important; opacity: .86; }

/* =====================================================================
   16. FOOTER
   ===================================================================== */

.main-footer {
    background: var(--mw-ink) !important;
    color: var(--mw-muted);
    border-top: 0;
    padding: 64px 0 22px;
    position: relative;
}

.main-footer::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--mw-spectrum);
}

.footer-container { max-width: 1280px; }

.footer-title {
    color: #FFFFFF !important;
    font-weight: 900;
    letter-spacing: -.02em;
}

.footer-desc { color: var(--mw-muted) !important; line-height: 1.9; }

.footer-links li { color: var(--mw-muted); }

.main-footer .footer-links a,
.main-footer .footer-nav a,
.main-footer .footer-link {
    color: #B9BEBE !important;
    font-weight: 500;
}

.main-footer .footer-links a:hover,
.main-footer .footer-nav a:hover,
.main-footer .footer-link:hover {
    color: var(--mw-green-400) !important;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .10);
    margin-top: 40px;
    padding-top: 22px;
}

.footer-bottom p { color: #7E8484 !important; }

.footer-social-link {
    border-color: rgba(255, 255, 255, .14);
    color: #B9BEBE !important;
    width: 42px;
    height: 42px;
}

.footer-social-link:hover {
    background: rgba(0, 161, 0, .16);
    border-color: var(--mw-green-500);
    color: var(--mw-green-400) !important;
}

.main-footer .footer-social-facebook:not(.is-empty) {
    background: rgba(24, 119, 242, .16);
    border-color: rgba(24, 119, 242, .45);
    color: #5DA0F7 !important;
}

.main-footer .footer-social-facebook:not(.is-empty) svg { color: #5DA0F7 !important; }

.main-footer .footer-social-facebook:not(.is-empty):hover {
    background: #1877F2;
    border-color: #1877F2;
    color: #FFFFFF !important;
}

.main-footer .footer-social-facebook:not(.is-empty):hover svg { color: #FFFFFF !important; }

.main-footer .footer-social-instagram:not(.is-empty) {
    background: linear-gradient(45deg, #FEDA77 0%, #F58529 25%, #DD2A7B 50%, #8134AF 75%, #515BD4 100%);
    border-color: transparent;
    color: #FFFFFF !important;
}

.main-footer .footer-social-instagram:not(.is-empty) svg { color: #FFFFFF !important; }

.main-footer .footer-social-tiktok:not(.is-empty) {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: #FFFFFF !important;
}

.main-footer .footer-social-tiktok:not(.is-empty):hover {
    background: #000000;
    border-color: var(--mw-green-500);
}

/* =====================================================================
   17. FLOATING WHATSAPP + SCROLL CONTROLS
   ===================================================================== */

.whatsapp-float {
    background: #25D366;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
    border: 2px solid rgba(255, 255, 255, .85);
}

.scroll-btn {
    background: rgba(255, 255, 255, .95);
    color: var(--mw-ink);
    border: 1px solid var(--mw-line);
    box-shadow: var(--mw-shadow-md);
}

.scroll-btn:hover {
    background: var(--mw-green-600);
    color: #FFFFFF;
    border-color: transparent;
}

.scroll-btn:focus-visible { outline-color: var(--mw-green-500); }

.features .scroll-btn { background: rgba(255, 255, 255, .95); }

.features .scroll-btn:hover {
    background: var(--mw-green-600);
    color: #FFFFFF;
}

/* =====================================================================
   18. HOME (boutique) OVERRIDES
   ===================================================================== */

body.home-boutique {
    --hb-text: #3A4242;
    --hb-heading: #0A0A0A;
    --hb-black: #0A0A0A;
    --hb-border: rgba(10, 10, 10, .08);
    --hb-bg: #FFFFFF;
    background: var(--mw-canvas);
}

body.home-boutique .main-header {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(10, 10, 10, .07);
}

body.home-boutique .header-container {
    max-width: 1280px;
    min-height: var(--mw-header-h);
    padding: 10px 24px;
}

body.home-boutique .logo-img,
body.home-boutique .logo img {
    height: 56px;
    max-width: 160px;
}

body.home-boutique .main-nav { gap: 32px; }

body.home-boutique .nav-link {
    color: var(--mw-ink) !important;
    font-weight: 600;
    font-size: 15.5px;
    padding: 8px 2px;
    line-height: normal;
}

body.home-boutique .nav-link::after { display: block; }

body.home-boutique .nav-link:hover { color: var(--mw-green-700) !important; }

body.home-boutique .cart-icon {
    background: var(--mw-green-50);
    color: var(--mw-green-700) !important;
    border: 1px solid rgba(0, 161, 0, .16);
    border-radius: 999px;
    padding: 9px 11px;
}

body.home-boutique .cart-icon:hover {
    background: var(--mw-green-600);
    color: #FFFFFF !important;
}

body.home-boutique .mobile-nav { top: var(--mw-header-h); }

body.home-boutique .mobile-menu-btn { color: var(--mw-ink) !important; }

/* Hero */
.hb-hero { position: relative; overflow: hidden; }

.hb-slider { height: min(72vh, 620px); }

.hb-slide::before {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, .32) 42%, rgba(0, 0, 0, .82) 100%),
        radial-gradient(90% 60% at 50% 100%, rgba(0, 161, 0, .22) 0%, transparent 70%);
    opacity: 1;
}

.hb-slide-empty {
    background:
        radial-gradient(80% 60% at 30% 20%, rgba(0, 161, 0, .30), transparent 65%),
        radial-gradient(70% 60% at 80% 80%, rgba(230, 0, 3, .20), transparent 65%),
        linear-gradient(135deg, #101010, #000000);
}

.hb-hero-text {
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--hb-display);
    font-weight: 900;
    font-size: clamp(38px, 6.4vw, 78px);
    line-height: 1.16;
    letter-spacing: -.03em;
    color: #FFFFFF;
    text-shadow: 0 10px 40px rgba(0, 0, 0, .55);
    padding: 0 24px;
    max-width: 1080px;
    margin-inline: auto;
}

/* Signature: the logo colour grid as a rule under the hero line. */
.hb-hero-text::after {
    content: '';
    display: block;
    width: min(320px, 60%);
    height: 5px;
    margin: 26px auto 0;
    border-radius: 999px;
    background: var(--mw-spectrum);
    box-shadow: 0 6px 26px rgba(0, 0, 0, .35);
}

.hb-categories {
    max-width: 1280px;
    padding: 64px 20px 8px;
}

.hb-cat-title {
    font-family: var(--hb-display);
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 900;
    color: var(--mw-ink);
    padding: 0 0 22px;
    min-height: 0;
    letter-spacing: -.03em;
}

.hb-cat-row { gap: 22px; padding: 8px 0; }

.hb-cat {
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-md);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

.hb-cat::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .30) 45%, rgba(0, 0, 0, .68));
    opacity: .92;
}

.hb-cat:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 54px rgba(10, 10, 10, .26);
}

.hb-cat-round { border-radius: 50%; }
.hb-cat-rect { border-radius: var(--mw-radius-xl); }

.hb-cat-name {
    font-family: var(--hb-display);
    font-weight: 800;
    color: #FFFFFF;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .5);
    margin-bottom: 0;
    padding: 0 14px;
}

.hb-cat-noimg {
    background:
        radial-gradient(70% 60% at 30% 25%, rgba(0, 161, 0, .35), transparent 68%),
        linear-gradient(135deg, #171717, #050505);
}

.hb-contact {
    max-width: 1080px;
    padding: 64px 20px 56px;
    text-align: center;
}

.hb-contact-title {
    font-family: var(--hb-display);
    font-weight: 800;
    font-size: clamp(20px, 2.4vw, 28px);
    color: var(--mw-ink);
    letter-spacing: -.02em;
}

.hb-social { gap: 12px; }

.hb-social-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    box-shadow: var(--mw-shadow-sm);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
}

.hb-social-icon:hover { transform: translateY(-3px); box-shadow: var(--mw-shadow-md); opacity: 1; }
.hb-social-facebook  { background: #1877F2; }
.hb-social-instagram { background: linear-gradient(45deg, #FEDA77, #F58529, #DD2A7B, #8134AF, #515BD4); }
.hb-social-tiktok    { background: #0A0A0A; }

.hb-contact-line {
    color: var(--mw-ink);
    font-weight: 700;
    font-size: 17px;
}

.hb-contact-line:hover { color: var(--mw-green-700); }

/* =====================================================================
   19. DARK MODE
   ===================================================================== */

:root[data-theme="dark"] {
    --theme-bg:        #101211;
    --theme-text:      #E8EAE9;
    --theme-card-bg:   #181A19;
    --theme-card-text: #E8EAE9;
    --theme-card-border: rgba(255, 255, 255, .12);
    --theme-nav-bg:    #0D0F0E;
    --theme-nav-text:  #E8EAE9;
    --theme-footer-bg: #070807;
    --theme-footer-text: #9EA3A3;
    --theme-footer-heading: #FFFFFF;
    --theme-footer-link: #B9BEBE;
    --theme-footer-link-hover: var(--mw-green-400);
    --theme-footer-border: rgba(255, 255, 255, .10);
    --theme-btn-bg:       var(--mw-green-600);
    --theme-btn-text:     #FFFFFF;
    --theme-btn-hover-bg: var(--mw-green-800);
    --theme-btn-hover-text: #FFFFFF;
    --theme-link:       var(--mw-green-400);
    --theme-link-hover: var(--mw-green-300);
    --theme-icon:       #9EA3A3;
    --theme-accent:     var(--mw-green-500);
}

:root[data-theme="dark"] body {
    background-color: #101211;
    background-image:
        radial-gradient(1100px 520px at 100% -8%, rgba(0, 161, 0, .12), transparent 62%),
        radial-gradient(900px 480px at -8% 6%, rgba(255, 255, 255, .04), transparent 60%);
    color: #E8EAE9;
}

:root[data-theme="dark"] a { color: var(--mw-green-400); }
:root[data-theme="dark"] a:hover { color: var(--mw-green-300); }

:root[data-theme="dark"] .main-header {
    background: rgba(13, 15, 14, .92) !important;
    color: #E8EAE9 !important;
    border-bottom-color: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] .main-header .nav-link { color: #E8EAE9 !important; }
:root[data-theme="dark"] .main-header .nav-link:hover { color: var(--mw-green-400) !important; }

:root[data-theme="dark"] .mobile-nav {
    background: rgba(16, 18, 17, .98);
    border-bottom-color: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] .mobile-nav-link {
    color: #E8EAE9;
    border-bottom-color: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .mobile-nav-link:hover {
    background: rgba(0, 161, 0, .14);
    color: var(--mw-green-300);
}

:root[data-theme="dark"] .lang-switch {
    color: #E8EAE9;
    border-color: rgba(255, 255, 255, .20);
}

:root[data-theme="dark"] .cart-icon {
    background: rgba(0, 161, 0, .16);
    border-color: rgba(0, 161, 0, .34);
    color: var(--mw-green-300) !important;
}

:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 { color: #FFFFFF !important; }

:root[data-theme="dark"] .section-subtitle,
:root[data-theme="dark"] .product-detail-desc { color: #A6ACAB !important; }

:root[data-theme="dark"] .product-card,
:root[data-theme="dark"] .review-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .products-toolbar,
:root[data-theme="dark"] .form-card,
:root[data-theme="dark"] .order-form,
:root[data-theme="dark"] .data-table {
    background: var(--theme-card-bg) !important;
    color: var(--theme-card-text) !important;
    border-color: var(--theme-card-border) !important;
}

:root[data-theme="dark"] .product-image { background: #1D201F; }

:root[data-theme="dark"] .pagination-btn {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    color: #E8EAE9 !important;
}

:root[data-theme="dark"] .pagination-btn.active {
    background: var(--mw-green-600) !important;
    border-color: var(--mw-green-600) !important;
    color: #FFFFFF !important;
}

:root[data-theme="dark"] .size-btn,
:root[data-theme="dark"] .bundle-btn,
:root[data-theme="dark"] .color-btn { border-color: rgba(255, 255, 255, .20); }

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: #1B1E1D !important;
    color: #E8EAE9 !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

:root[data-theme="dark"] .order-form {
    --form-field-bg: #1B1E1D;
    --form-field-border: rgba(255, 255, 255, .14);
    --form-accent: var(--mw-green-400);
    --form-muted: #A6ACAB;
}

:root[data-theme="dark"] .order-form .radio-label {
    background: #1B1E1D;
    color: #A6ACAB;
}

:root[data-theme="dark"] .order-form .radio-label:has(input:checked) {
    background: rgba(0, 161, 0, .16);
    color: var(--mw-green-300);
}

:root[data-theme="dark"] .filter-sidebar,
:root[data-theme="dark"] .filter-pill,
:root[data-theme="dark"] .filter-select,
:root[data-theme="dark"] .filter-toggle-btn,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .toolbar-search,
:root[data-theme="dark"] .cart-item,
:root[data-theme="dark"] .cart-checkout,
:root[data-theme="dark"] .cart-empty,
:root[data-theme="dark"] .thank-you-card,
:root[data-theme="dark"] .how-step,
:root[data-theme="dark"] .final-cta,
:root[data-theme="dark"] .product-description-content {
    background: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    color: var(--theme-card-text);
}

:root[data-theme="dark"] .filter-pill:hover,
:root[data-theme="dark"] .search-box:focus-within,
:root[data-theme="dark"] .toolbar-search:focus-within { background: rgba(0, 161, 0, .10); }

:root[data-theme="dark"] .filter-option:hover { background: rgba(0, 161, 0, .12); }
:root[data-theme="dark"] .faq-question:hover { background: rgba(0, 161, 0, .10); }

:root[data-theme="dark"] .category-card {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
}

:root[data-theme="dark"] .mobile-order-bar {
    background: rgba(16, 18, 17, .97);
    border-top-color: rgba(255, 255, 255, .12);
}

:root[data-theme="dark"] .cart-toast { background: #1B1E1D; border-inline-start-color: var(--mw-green-500); }

:root[data-theme="dark"] .thank-you-section { background: #101211; }

:root[data-theme="dark"] .thank-you-order-id,
:root[data-theme="dark"] .thank-you-details { background: #161817; border-color: var(--theme-card-border); }

:root[data-theme="dark"] .main-footer { background: #070807 !important; }

:root[data-theme="dark"] body.home-boutique {
    --hb-bg: #101211;
    --hb-text: #C9CFCE;
    --hb-heading: #FFFFFF;
    --hb-black: #FFFFFF;
    --hb-border: rgba(255, 255, 255, .10);
    background: #101211;
}

:root[data-theme="dark"] body.home-boutique .main-header {
    background: rgba(13, 15, 14, .92);
    border-bottom-color: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] body.home-boutique .nav-link { color: #E8EAE9 !important; }
:root[data-theme="dark"] body.home-boutique .cat-title,
:root[data-theme="dark"] body.home-boutique .hb-cat-title,
:root[data-theme="dark"] body.home-boutique .hb-contact-title { color: #FFFFFF !important; }
:root[data-theme="dark"] body.home-boutique .hb-contact-line { color: #E8EAE9; }

/* =====================================================================
   20. RESPONSIVE
   ===================================================================== */

@media (max-width: 1200px) {
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

@media (max-width: 992px) {
    :root { --mw-header-h: 76px; }
    .section { padding: 64px 0; }
    .filter-sidebar { position: static; top: auto; }
}

@media (max-width: 768px) {
    :root { --mw-header-h: 72px; }
    .header-container { padding: 12px 16px; }
    .logo-img { height: 50px; }
    .cod-badge { top: -3px; inset-inline-start: -3px; }
    .cart-count-badge { top: -5px; inset-inline-start: -5px; }
    .main-nav { gap: 0; }
    .section { padding: 56px 0; }
    .section-header { margin-block-end: 36px; }
    .products-grid { gap: 16px; }
    .product-info { padding: 16px; }
    .features { padding: 64px 0; }
    .features-grid { gap: 16px; }
    .hb-slider { height: 460px; }
    .hb-hero-text { font-size: clamp(28px, 7.4vw, 44px); }
    .hb-categories { padding: 44px 16px 4px; }
    .hb-contact { padding: 48px 16px 40px; }
}

@media (max-width: 576px) {
    :root { --mw-header-h: 66px; }
    .header-container { padding: 12px 14px; }
    .logo-img { height: 44px; }
    .section { padding: 46px 0; }
    .product-info { padding: 14px; }
    .product-name { font-size: 16px; }
    .product-price { font-size: 19px; }
    .feature-item { padding: 26px 18px; }
    .reviews-grid { gap: 14px; }
    .review-card { padding: 24px; }
    .cart-checkout { padding: 20px 18px; }
    .hb-slider { height: 400px; }
}

@media (max-width: 380px) {
    :root { --mw-header-h: 60px; }
    .header-container { padding: 12px 10px; }
    .logo-img { height: 40px; }
}

/* Home (boutique) header on small screens */
@media (max-width: 767px) {
    body.home-boutique .header-container {
        min-height: var(--mw-header-h);
        padding: 12px 14px;
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas: "cart lang logo menu";
        column-gap: 8px;
    }
    body.home-boutique .logo-img,
    body.home-boutique .logo img { height: 42px; }
    body.home-boutique .mobile-nav { top: var(--mw-header-h); }
    body.home-boutique .lang-switch {
        grid-area: lang;
        justify-self: end;
        align-self: center;
    }
    body.home-boutique .cart-icon { grid-area: cart; justify-self: start; }
    body.home-boutique .logo { grid-area: logo; justify-self: center; }
    body.home-boutique .mobile-menu-btn { grid-area: menu; justify-self: end; }
}

/* =====================================================================
   21. ACCESSIBILITY / PRINT
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-cta::after,
    .product-btn::after,
    .submit-btn::after,
    .btn-primary::after,
    .btn::after,
    .final-cta__btn::after { display: none; }
    .product-card:hover,
    .category-card:hover,
    .review-card:hover,
    .faq-item:hover,
    .feature-item:hover,
    .hb-cat:hover { transform: none; }
}

@media print {
    .main-header,
    .mobile-nav,
    .main-footer,
    .whatsapp-float-row,
    .mobile-order-bar,
    .scroll-btn { display: none !important; }
    body { background: #FFFFFF !important; }
    .product-card,
    .order-form,
    .thank-you-card { box-shadow: none !important; }
}