/* ================================================================
   Like to Love Collections (L2L Collections)
   PREMIUM LIGHT THEME SYSTEM v5
   Stage 1: Design Foundation - loads after inline styles.
   Version: 20260802-v5-l2l-green

   Brand: Like to Love Collections (L2L Collections).
   Volume 1 (2026-08-02): the brown/warm brand identity was replaced by
   the single dark-green L2L identity. Only colour values changed - no
   selector, layout, spacing, radius, shadow, typography or breakpoint
   in this file was modified.
   ================================================================ */

/* -- DESIGN TOKENS --------------------------------------------- */
:root {
    /* ==============================================================
       L2L BRAND IDENTITY - single dark-green colour family.
       Authoritative definition (this file loads after public-app.css).
       Contrast (WCAG 2.1, vs #FFFFFF):
         --brand-primary        11.08:1  AAA
         --brand-primary-hover  13.14:1  AAA
         --brand-primary-active 15.19:1  AAA
         --brand-primary-muted   6.39:1  AA
       ============================================================== */
    --brand-primary:        #1B4332;
    --brand-primary-hover:  #14372A;
    --brand-primary-active: #0E2C20;
    --brand-primary-soft:   #EDF4F0;
    --brand-primary-muted:  #2D6A4F;
    --brand-primary-border: #C2D6CB;
    --brand-on-primary:     #FFFFFF;
    --brand-focus-ring:     #2D6A4F;
    /* Light-on-dark brand accent, for dark surfaces (footer, dark hero
       bands) where the dark greens fall below contrast minimums.
       8.0:1 on the footer gradient's #2A2A2A end-stop. */
    --brand-on-dark:        #8FCFAE;
    /* Legacy alias consumed by .hero #heroBtn1's var(--brand-brown, ...)
       fallback - defined here so that button follows the new identity. */
    --brand-brown:          #1B4332;

    /* -- Color: Premium light palette -------------------------- */
    --white:        #FFFFFF;
    --light-gray:   #F7F5F1;
    --medium-gray:  #E8E4DE;
    --dark-gray:    #555555;
    --text-dark:    #151515;
    --text-light:   #555555;
    --text-muted:   #888888;
    --black:        #151515;

    /* Single-accent system */
    --primary-brown:     var(--brand-primary);          /* primary action = dark green */
    --primary-dark:      var(--brand-primary-active);
    --primary-light:     var(--brand-primary-muted);
    --accent-gold:       var(--brand-primary-muted);   /* warm accent — use sparingly */
    --accent-terracotta: var(--brand-primary-muted);
    --accent-green:      var(--brand-primary);

    /* Neutralised gradients (kept for selector compat, not displayed) */
    --gradient-light:    linear-gradient(135deg, #F7F5F1 0%, #FFFFFF 100%);
    --gradient-warm:     linear-gradient(135deg, #2D6A4F 0%, #1B4332 100%);
    --gradient-dark:     linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    --gradient-rich:     linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
    --gradient-heritage: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);

    /* -- Shadows — refined -------------------------------------- */
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.05);
    --shadow-md:  0 3px 12px rgba(0,0,0,0.07);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.09);
    --shadow-xl:  0 16px 40px rgba(0,0,0,0.11);
    --shadow-xxl: 0 24px 56px rgba(0,0,0,0.13);

    /* -- Border radius — tighter -------------------------------- */
    --radius-sm:   3px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    /* -- Transitions -------------------------------------------- */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.22s ease-out;
    --transition-slow: 0.4s ease-out;

    /* -- Spacing — increased for premium feel ------------------- */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-xxl: 4rem;
    --space-3xl: 6rem;
    --section-spacing: 5rem;

    /* -- Typography --------------------------------------------- */
    --font-size-xs:   0.7rem;
    --font-size-sm:   0.8rem;
    --font-size-base: 0.95rem;
    --font-size-lg:   1.0625rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;
    --font-size-6xl:  3.75rem;

    /* -- Layout ------------------------------------------------- */
    --header-height:      72px;
    --container-padding:  1.5rem;
    --max-container:      1280px;
}

/* -- Force light theme (safety lock — dark mode removed) ------- */
html[data-theme="dark"] {
    --white:       #FFFFFF !important;
    --light-gray:  #F7F5F1 !important;
    --medium-gray: #E8E4DE !important;
    --dark-gray:   #555555 !important;
    --text-dark:   #151515 !important;
    --text-light:  #555555 !important;
    --text-muted:  #888888 !important;
    --black:       #151515 !important;
    --gradient-light: linear-gradient(135deg, #F7F5F1 0%, #FFFFFF 100%) !important;
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.05) !important;
    --shadow-md:  0 3px 12px rgba(0,0,0,0.07) !important;
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.09) !important;
    --shadow-xl:  0 16px 40px rgba(0,0,0,0.11) !important;
    --shadow-xxl: 0 24px 56px rgba(0,0,0,0.13) !important;
}

/* -- Hide dark mode toggle (removed from HTML, CSS safety net) -- */
.theme-toggle { display: none !important; }

/* ================================================================
   GLOBAL BASE
   ================================================================ */
body {
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-dark);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

a { color: var(--text-dark); }
a:hover { color: var(--accent-gold); }

/* ================================================================
   BUTTONS — flat, confident, no shimmer, no gradient
   ================================================================ */
.btn {
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    min-height: 48px;
    padding: 0.75rem 2rem;
    box-shadow: none;
    transition:
        background var(--transition-fast),
        color      var(--transition-fast),
        border-color var(--transition-fast);
    border-width: 2px;
    border-style: solid;
}

/* Kill shimmer sweep */
.btn::before { display: none !important; }

/* No hover lift */
.btn:hover  { transform: none !important; box-shadow: none !important; }
.btn:active { transform: none; box-shadow: none; }

/* Primary: solid brand dark green */
.btn-primary {
    background:   var(--brand-primary);
    color:        var(--brand-on-primary);
    border-color: var(--brand-primary);
    box-shadow:   none;
}
.btn-primary:hover {
    background:   var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color:        var(--brand-on-primary);
    transform:    none !important;
    box-shadow:   none !important;
}
.btn-primary:active {
    background:   var(--brand-primary-active);
    border-color: var(--brand-primary-active);
}

/* Secondary: transparent + border */
.btn-secondary {
    background:   transparent;
    color:        var(--text-dark);
    border-color: rgba(21,21,21,0.3);
    box-shadow:   none;
}
.btn-secondary:hover {
    background:   var(--brand-primary);
    color:        var(--brand-on-primary);
    border-color: var(--brand-primary);
    transform:    none !important;
    box-shadow:   none !important;
}

/* Hero secondary (over dark photo) */
.hero-actions .btn-secondary {
    background:   rgba(255,255,255,0.10);
    color:        #fff;
    border-color: rgba(255,255,255,0.5);
}
.hero-actions .btn-secondary:hover {
    background:   rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.8);
    color:        #fff;
}

/* Outline */
.btn-outline {
    background:   transparent;
    color:        var(--text-dark);
    border-color: rgba(21,21,21,0.25);
    box-shadow:   none;
}
.btn-outline:hover {
    background:   var(--brand-primary);
    color:        var(--brand-on-primary);
    border-color: var(--brand-primary);
    transform:    none !important;
    box-shadow:   none !important;
}

/* Size variants */
.btn-small {
    min-height:   36px;
    padding:      0.4rem 1rem;
    font-size:    0.72rem;
    border-width: 1.5px;
}

.btn-large {
    min-height: 54px;
    padding:    0.9rem 2.5rem;
    font-size:  0.82rem;
}

.btn-hero {
    min-height: 50px;
    padding:    0.85rem 2.25rem;
    font-size:  0.8rem;
}

/* ================================================================
   HEADER & NAVIGATION
   ================================================================ */
header {
    height:             var(--header-height);
    backdrop-filter:    none;
    -webkit-backdrop-filter: none;
    box-shadow:         none;
    border-bottom:      none;
    background:         transparent;
    transition:
        background     var(--transition-base),
        border-color   var(--transition-base);
}

header.scrolled {
    background:          rgba(255,255,255,0.97);
    border-bottom:       1px solid var(--medium-gray);
    backdrop-filter:     blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:          none;
}

.header-container { height: var(--header-height); }

/* Logo */
.logo          { gap: 0.5rem; }
.logo-image    { height: 48px; width: 48px; }
.logo-text {
    font-family:     'Playfair Display', serif;
    font-size:       1.0rem;
    font-weight:     600;
    color:           #fff;
    text-shadow:     0 1px 12px rgba(0,0,0,0.45);
    letter-spacing:  0.04em;
    position:        relative;
    bottom:          0.15cm; /* slight elevation beside logo image */
}
.logo-text span { color: #fff; }

header.scrolled .logo-text       { color: var(--text-dark); text-shadow: none; }
header.scrolled .logo-text span  { color: var(--accent-gold); }

/* Nav links — tighter to prevent overflow with 9 items */
.nav-link {
    font-size:       0.62rem;     /* reduced from 0.74rem */
    font-weight:     600;
    letter-spacing:  0.04em;      /* reduced from 0.07em */
    text-transform:  uppercase;
    color:           rgba(255,255,255,0.92);
    padding:         0.4rem 0.42rem;  /* reduced from 0.75rem side padding */
    border-radius:   0;
    background:      transparent;
    border:          none;
    text-shadow:     0 1px 8px rgba(0,0,0,0.3);
    transition:      color var(--transition-fast);
    white-space:     nowrap;
}

header .nav-link { color: rgba(255,255,255,0.92); }

header.scrolled .nav-link {
    color:       var(--text-dark);
    text-shadow: none;
}

.nav-link:hover,
header .nav-link:hover,
header.scrolled .nav-link:hover {
    color:      var(--accent-gold);
    background: transparent;
}

/* Active state: underline instead of pill */
.nav-link.active,
header .nav-link.active {
    color:                #fff;
    background:           transparent;
    border:               none;
    font-weight:          700;
    text-decoration:      underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

header.scrolled .nav-link.active {
    color: var(--text-dark);
}

.nav-link.active::after { display: none; }

/* Desktop header actions */
.header-action-pill {
    background: transparent;
    border:     none;
    color:      rgba(255,255,255,0.9);
    box-shadow: none;
}

header.scrolled .header-action-pill { color: var(--text-dark); }

.icon-btn {
    background: transparent;
    border:     none;
    box-shadow: none;
    color:      rgba(255,255,255,0.9);
}

header.scrolled .icon-btn { color: var(--text-dark); }

/* Mobile actions */
.mobile-actions .theme-toggle,
.mobile-actions .icon-btn {
    color: rgba(255,255,255,0.9);
}

header.scrolled .mobile-actions .icon-btn,
header.scrolled .mobile-actions .theme-toggle {
    color: var(--text-dark);
}

/* Hamburger bars */
.bar { background: rgba(255,255,255,0.9); }
header.scrolled .bar { background: var(--text-dark); }

/* Cart count badge */
.cart-count {
    background:  var(--accent-gold);
    color:       #fff;
    font-size:   0.6rem;
    font-weight: 700;
}

/* Dropdown menu */
.dropdown-menu {
    border-radius:  var(--radius-md);
    box-shadow:     var(--shadow-lg);
    border:         1px solid var(--medium-gray);
}

.dropdown-menu a:hover {
    background: var(--light-gray);
    color:      var(--text-dark);
}

/* Mobile nav drawer */
.header-right {
    background: rgba(255,255,255,0.98) !important;
}

/* ================================================================
   SECTION SPACING — generous
   ================================================================ */
.about,
.categories-nav-section,
.products-section,
.community-stats-section,
.award-section,
.community-stories-section,
.community-gallery-section,
.community-cta-section,
.care-section,
.faqs-section,
.blog-section,
.legal-section {
    padding-top:    5rem;
    padding-bottom: 5rem;
}

/* Contact uses tighter padding — it is secondary footer-adjacent content */
.contact {
    padding-top:    2.5rem;
    padding-bottom: 1.5rem;
}

.shop-hero,
.community-hero,
.supplements-hero,
.blog-hero,
.legal-hero {
    padding-top:    3.5rem;
    padding-bottom: 3.5rem;
}

/* ================================================================
   SECTION BACKGROUNDS — clean & consistent
   ================================================================ */
.about               { background: var(--white); }
.contact             { background: var(--light-gray); }
.categories-nav-section { background: var(--white); border-bottom: 1px solid var(--medium-gray); }
.products-section    { background: var(--white); }
.community-stats-section  { background: var(--white); }
.award-section       { background: var(--light-gray); }
.community-stories-section{ background: var(--light-gray); }
.community-gallery-section{ background: var(--white); }
.care-section        { background: var(--light-gray); }
.faqs-section        { background: var(--white); }
.blog-section        { background: var(--white); }
.legal-section       { background: var(--white); }

/* Accent section for shop/community hero */
.shop-hero    { background: #111111; }
.community-hero { background: #111111; }

/* Light hero for info pages */
.supplements-hero,
.blog-hero,
.legal-hero {
    background:   var(--light-gray);
    color:        var(--text-dark);
}

.supplements-hero-title,
.blog-hero-title,
.legal-hero-title   { color: var(--text-dark); }

.supplements-hero-subtitle,
.blog-hero-subtitle,
.legal-hero-subtitle,
.supplements-hero .section-subtitle,
.blog-hero .section-subtitle,
.legal-hero .section-subtitle { color: var(--text-light); }

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.section-header { margin-bottom: 3rem; }

.section-title {
    font-size:      clamp(1.75rem, 3vw, 2.5rem);
    font-weight:    400;
    letter-spacing: -0.025em;
    color:          var(--text-dark);
}

/* Remove underline decoration */
.section-title::after { display: none !important; }

.section-subtitle {
    font-size:   0.92rem;
    line-height: 1.7;
    color:       var(--text-light);
    font-weight: 400;
    margin-top:  0.5rem;
}

/* Section labels/chips */
.section-label,
.section-tag,
.section-chip {
    background:      var(--light-gray);
    color:           var(--text-muted);
    border:          1px solid var(--medium-gray);
    font-size:       0.62rem;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    padding:         4px 10px;
    border-radius:   var(--radius-sm);
    font-weight:     600;
}

/* ================================================================
   PRODUCT CARDS
   ================================================================ */
.product-card {
    background:    var(--white);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm);
    border:        1px solid var(--medium-gray);
    transition:
        box-shadow   var(--transition-base),
        border-color var(--transition-base);
}

/* Remove heritage gradient stripe */
.product-card::before { display: none !important; }

.product-card:hover {
    transform:    none;
    box-shadow:   var(--shadow-md);
    border-color: rgba(21,21,21,0.12);
}

/* Product grid — max 3 columns */
.products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .products-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
    }
}

/* Hide product ID label */
.product-id-label { display: none; }

/* Product typography */
.product-name-text {
    font-size:   0.88rem;
    font-weight: 600;
    color:       var(--text-dark);
}

.product-card:hover .product-name-text { color: var(--text-dark); }

.price-amount,
.product-price {
    font-size:   0.9rem;
    font-weight: 600;
    color:       var(--text-dark);
}

.price-label,
.price-from {
    font-size:  0.72rem;
    color:      var(--text-muted);
    font-weight: 400;
}

/* Add to cart button on card — smaller, less prominent */
.product-card .btn-primary {
    font-size:   0.72rem;
    min-height:  38px;
    padding:     0.45rem 1.25rem;
    letter-spacing: 0.06em;
}

/* ================================================================
   CATEGORIES NAV
   ================================================================ */
.categories-nav {
    background:    var(--light-gray);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-md);
    padding:       4px;
    gap:           4px;
}

.category-nav-btn {
    background:     transparent;
    border:         none;
    border-radius:  var(--radius-sm);
    font-size:      0.74rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    color:          var(--text-muted);
    padding:        0.4rem 0.9rem;
}

.category-nav-btn i { color: var(--text-muted); }

.category-nav-btn:hover,
.category-nav-btn.active {
    background:  var(--white);
    color:       var(--text-dark);
    border:      none;
    box-shadow:  var(--shadow-sm);
    transform:   none;
}

.category-nav-btn.active i,
.category-nav-btn:hover i { color: var(--accent-gold); }

/* ================================================================
   SHOP HERO (Stage 4 will do full redesign — foundational here)
   ================================================================ */
.shop-hero-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: #fff;
}

.shop-hero-subtitle  { color: rgba(255,255,255,0.8); }

.shop-stat {
    background:   rgba(255,255,255,0.08);
    border:       1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
}

/* ================================================================
   CONTACT SECTION
   ================================================================ */
.contact-card {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow:    none;
    padding:       1.25rem;
}

.contact-card:hover {
    border-color: rgba(21,21,21,0.12);
    box-shadow:   var(--shadow-sm);
    transform:    none;
}

.contact-icon {
    background:    var(--brand-primary);
    border-radius: var(--radius-md);
    box-shadow:    none;
}

/* ================================================================
   ABOUT / STORY SECTION
   ================================================================ */
.story-card {
    background:    var(--light-gray);
    border:        none;              /* boundary invisible */
    border-radius: var(--radius-lg);
    box-shadow:    none;
}

.story-card:hover { transform: none; box-shadow: none; }

.mission-card {
    background:    var(--light-gray);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow:    none;
}

.mission-card::before { display: none !important; }
.mission-card:hover   { transform: none; box-shadow: none; }

/* ================================================================
   COMMUNITY SECTION
   ================================================================ */
.community-stat-card {
    background:    var(--light-gray);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
}

.community-stat-card:hover {
    box-shadow:   var(--shadow-sm);
    border-color: rgba(21,21,21,0.12);
    transform:    translateY(-2px);
}

.community-stat-number { color: var(--text-dark); }

.impact-stat, .community-stat {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-md);
}

/* ================================================================
   CARE CARDS
   ================================================================ */
.care-card {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow:    none;
}

.care-card:hover { transform: none; box-shadow: var(--shadow-sm); }

/* ================================================================
   FAQ ACCORDION
   ================================================================ */
.faq-item {
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-md);
    box-shadow:    none;
    margin-bottom: 6px;
}

.faq-item::before { display: none !important; }

.faq-item.active {
    border-color: rgba(21,21,21,0.15);
    box-shadow:   none;
}

.faq-question       { padding: 1rem 1.25rem; }
.faq-question h3    { font-size: 0.86rem; font-weight: 600; color: var(--text-dark); }

.faq-toggle-icon {
    width:         28px;
    height:        28px;
    border-radius: var(--radius-sm);
    font-size:     0.72rem;
    background:    var(--medium-gray);
    color:         var(--text-dark);
}

.faq-item.active .faq-toggle-icon {
    background: var(--text-dark);
    color:      #fff;
}

/* ================================================================
   HERO STAT BLOCKS (over dark background)
   ================================================================ */
.stat {
    background:    rgba(255,255,255,0.10);
    border:        1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-md);
    box-shadow:    none;
    padding:       0.75rem 1.25rem;
}

.stat:hover { transform: none; box-shadow: none; }
.stat-number, .stat-label { color: #fff; }

/* ================================================================
   MODALS
   ================================================================ */
.modal-content,
.modal-container {
    border-radius: var(--radius-xl);
    box-shadow:    var(--shadow-xl);
    border:        1px solid var(--medium-gray);
    background:    var(--white);
}

.cart-panel {
    background: var(--white);
}

/* ================================================================
   CART / CHECKOUT
   ================================================================ */
.cart-item {
    border-bottom: 1px solid var(--medium-gray);
    padding:       0.875rem 0;
}

.cart-item:last-child { border-bottom: none; }

/* ================================================================
   NOTIFICATIONS / TOASTS
   ================================================================ */
.notification {
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-md);
    border:        1px solid var(--medium-gray);
    padding:       0.875rem 1.125rem;
    font-size:     0.82rem;
}

/* ================================================================
   FOOTER
   ================================================================ */
footer {
    /* Dark footer: scoped variable overrides so every descendant rule that
       reads --text-light/--text-dark/--text-muted/--medium-gray via var()
       automatically gets a readable light-on-dark color, with no need to
       touch each of the ~15 rules that consume them individually. */
    --text-light:  #c9c4ba;
    --text-dark:   #ffffff;
    --text-muted:  #9a948a;
    --medium-gray: rgba(255,255,255,0.12);
    /* Brand accent on a dark surface: the dark greens would fail
       contrast here, so the footer scope swaps in the light variant.
       Same mechanism the line above uses for the text tokens. */
    --accent-gold: var(--brand-on-dark);
    background:    var(--gradient-rich);   /* dark shaded background */
    padding-top:   4.5rem;
    padding-bottom: 2rem;
    border-top:    1px solid var(--medium-gray);
}

.footer-content {
    gap: 2rem;
}

.footer-section h3 {
    font-size:       0.68rem;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--text-muted);
    margin-bottom:   1.25rem;
}

footer .footer-links a,
.footer-section ul li a {
    font-size:   0.82rem;
    color:       var(--text-light);
    opacity:     1;
    font-weight: 400;
    transition:  color var(--transition-fast);
}

footer .footer-links a:hover,
.footer-section ul li a:hover { color: var(--text-dark); opacity: 1; }

/* Footer nav-links: strip all nav styling, inherit footer dark text */
footer .footer-section ul li a.nav-link,
footer .footer-section ul li a.nav-link:hover,
footer .footer-section ul li a.nav-link.active {
    color:          var(--text-light) !important;
    background:     transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration:none !important;
    padding:        0 !important;
    min-height:     unset !important;
    border-radius:  0 !important;
    border:         none !important;
    font-size:      0.82rem;
    font-weight:    400;
}
footer .footer-section ul li a.nav-link:hover { color: var(--text-dark) !important; }

/* .footer-nav — new class for footer links (no nav-link style conflicts) */
.footer-nav {
    display:        block;
    color:          var(--text-light);
    font-size:      0.82rem;
    font-weight:    400;
    text-decoration:none;
    padding:        0.2rem 0;
    transition:     color 0.15s;
}
.footer-nav:hover { color: var(--text-dark); text-decoration: none; }

.footer-logo-text {
    color:    var(--text-dark);        /* dark text on light bg */
    position: relative;
    bottom:   0.15cm;
}
.footer-logo-text span { color: var(--accent-gold); }
.footer-logo-image      { height: 40px; width: 40px; }
.footer-description     { color: var(--text-light); font-size: 0.8rem; line-height: 1.65; }

.social-link {
    background:    rgba(255,255,255,0.07);
    border:        1px solid rgba(255,255,255,0.1);
    color:         rgba(255,255,255,0.65);
    border-radius: var(--radius-sm);
    transition:    background var(--transition-fast), color var(--transition-fast);
}

.social-link:hover {
    background: rgba(255,255,255,0.14);
    color:      #fff;
}

footer .copyright { font-size: 0.72rem; color: var(--text-light); }
footer .copyright a { color: var(--accent-gold); }

/* Newsletter in footer */
.newsletter-form input[type="email"] {
    background:    rgba(255,255,255,0.08);
    border:        1px solid rgba(255,255,255,0.12);
    color:         rgba(255,255,255,0.9);
    border-radius: var(--radius-sm);
}

.newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }

.newsletter-form .btn-primary {
    background:   var(--brand-primary);
    border-color: var(--brand-primary);
    color:        var(--brand-on-primary);
    font-size:    0.72rem;
    min-height:   38px;
    padding:      0.45rem 1rem;
}

.newsletter-form .btn-primary:hover {
    background:   var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color:        var(--brand-on-primary);
}

/* ================================================================
   FORMS — search, contact, checkout
   ================================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border-radius: var(--radius-md);
    border:        1px solid var(--medium-gray);
    font-size:     0.88rem;
    padding:       0.65rem 1rem;
    min-height:    44px;
    background:    var(--white);
    color:         var(--text-dark);
    transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--text-dark);
    box-shadow:   0 0 0 2px rgba(21,21,21,0.06);
    outline:      none;
}

/* ================================================================
   BADGES / STATUS
   ================================================================ */
.badge, [class*="badge-"], .tag {
    font-size:      0.62rem;
    font-weight:    600;
    border-radius:  var(--radius-sm);
    letter-spacing: 0.04em;
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.24); }

/* ================================================================
   ACCESSIBILITY — focus ring
   ================================================================ */
:focus-visible {
    outline:        2px solid var(--text-dark);
    outline-offset: 2px;
}

/* ================================================================
   LOCATION CARDS
   ================================================================ */
.location-card {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow:    none;
}
.location-card:hover {
    box-shadow:   var(--shadow-sm);
    border-color: rgba(21,21,21,0.12);
    transform:    none;
}

/* ================================================================
   BLOG / UPDATE CARDS
   ================================================================ */
.update-card {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow:    none;
}
.update-card:hover {
    box-shadow:   var(--shadow-md);
    border-color: rgba(21,21,21,0.1);
    transform:    translateY(-2px);
}

/* ================================================================
   SEARCH OVERLAY
   ================================================================ */
.search-bar {
    background:   rgba(255,255,255,0.98);
    border-bottom: 1px solid var(--medium-gray);
    backdrop-filter: blur(10px);
}

.search-input {
    font-size: 0.9rem;
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-md);
}

.search-result-item {
    border-bottom: 1px solid var(--medium-gray);
}
.search-result-item:hover { background: var(--light-gray); }

/* ================================================================
   SPLASH SCREEN
   ================================================================ */
.splash-spinner {
    border-color: var(--medium-gray);
    border-top-color: var(--accent-gold);
}

/* ================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ================================================================ */
@media (max-width: 768px) {
    .btn        { min-height: 44px; padding: 0.65rem 1.5rem; font-size: 0.76rem; }
    .btn-hero   { min-height: 46px; }
    .btn-small  { min-height: 34px; }

    .section-header { margin-bottom: 2rem; }

    .section-title { font-size: clamp(1.5rem, 5vw, 2rem); }

    .about,
    .contact,
    .products-section,
    .care-section,
    .faqs-section,
    .blog-section,
    .legal-section,
    .categories-nav-section,
    .community-stats-section,
    .award-section,
    .community-stories-section,
    .community-gallery-section {
        padding-top:    3.5rem;
        padding-bottom: 3.5rem;
    }

    .shop-hero,
    .community-hero {
        padding-top:    2.5rem;
        padding-bottom: 2.5rem;
    }

    .supplements-hero,
    .blog-hero,
    .legal-hero {
        padding-top:    2rem;
        padding-bottom: 2rem;
    }

    .logo-image { height: 40px; width: 40px; }
    .logo-text  { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .product-card { border-radius: var(--radius-md); }
    .btn { min-height: 42px; padding: 0.6rem 1.25rem; font-size: 0.74rem; }

    .products-grid { gap: 1rem; }
}

/* ================================================================
   STAGE 2 — COMPONENT REFINEMENTS
   Header · Nav · Buttons · Product Cards · Forms · Footer · Mobile
   ================================================================ */

/* -- 1. HEADER — strip the warm pill container ----------------- */
.header-right {
    background:          transparent;
    border-radius:       0;
    border:              none;
    backdrop-filter:     none;
    -webkit-backdrop-filter: none;
    box-shadow:          none;
    padding:             0;
    gap:                 0.25rem;
    margin-left:         auto;
}

/* Header actions left-border divider — pushed right to clear last nav link */
.header-actions {
    border-left:   1px solid rgba(255,255,255,0.2);
    padding-left:  0.75rem;
    margin-left:   1.5rem;   /* increased from 0.5rem — ensures gap before divider */
    border-top:    none;
    border-right:  none;
    border-bottom: none;
    background:    transparent;
    box-shadow:    none;
    flex-shrink:   0;         /* never compress the icons area */
}

header.scrolled .header-actions {
    border-left-color: var(--medium-gray);
}

/* -- 2. ICON BUTTONS & SEARCH — clean, no pill circles -------- */
.icon-btn,
.header-action-pill.icon-btn {
    width:         40px;
    height:        40px;
    min-width:     40px;
    background:    transparent;
    border:        none;
    border-radius: var(--radius-sm);
    box-shadow:    none;
    color:         rgba(255,255,255,0.9);
    font-size:     1rem;
    transition:    background var(--transition-fast), color var(--transition-fast);
}

.icon-btn:hover,
.header-action-pill.icon-btn:hover {
    background:  rgba(255,255,255,0.12);
    color:       #fff;
    transform:   none;
    box-shadow:  none;
}

/* Scrolled state — dark icons */
header.scrolled .icon-btn,
header.scrolled .header-action-pill.icon-btn {
    color: var(--text-dark);
}

header.scrolled .icon-btn:hover,
header.scrolled .header-action-pill.icon-btn:hover {
    background: var(--light-gray);
    color:      var(--text-dark);
}

/* Cart count badge border adapts to header state */
.cart-count {
    border-color: transparent;
    top:   -5px;
    right: -5px;
}

/* -- 3. HAMBURGER BARS — white over hero, dark when scrolled --- */
.mobile-menu-toggle .bar {
    background: rgba(255,255,255,0.92);
}

header.scrolled .mobile-menu-toggle .bar {
    background: var(--text-dark);
}

/* When drawer is open, bars must be dark (drawer is white) */
.mobile-menu-toggle.active .bar {
    background: var(--text-dark);
}

/* -- 4. SEARCH BAR — white overlay ----------------------------- */
.search-bar {
    background:   rgba(255,255,255,0.98);
    border-bottom: 1px solid var(--medium-gray);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:   var(--shadow-md);
}

.search-input {
    background:  var(--white);
    color:       var(--text-dark);
    border:      1px solid var(--medium-gray);
    border-radius: var(--radius-md);
    padding:     0.55rem 1rem;
    font-size:   0.9rem;
}

.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--text-dark); outline: none; }

.search-submit,
.search-close {
    color: var(--text-dark);
    border-radius: var(--radius-sm);
}

.search-submit:hover,
.search-close:hover {
    background: var(--light-gray);
    color:      var(--text-dark);
}

/* Search results */
.search-results {
    background: var(--white);
    border:     1px solid var(--medium-gray);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
}

.search-result-item {
    border-bottom: 1px solid var(--medium-gray);
    color:         var(--text-dark);
}

.search-result-item:hover { background: var(--light-gray); }

.search-result-name  { color: var(--text-dark); font-weight: 600; }
.search-result-price { color: var(--text-muted); }

/* -- 5. HERO BUTTONS — inverted for dark photo ----------------- */
.hero-actions .btn-primary {
    background:   rgba(255,255,255,0.95);
    color:        var(--text-dark);
    border-color: rgba(255,255,255,0.95);
}

.hero-actions .btn-primary:hover {
    background:   #fff;
    color:        var(--text-dark);
    border-color: #fff;
    transform:    none !important;
    box-shadow:   none !important;
}

/* -- Hero Btn2: embedded arrow badge ------------------------------ */
.hero #heroBtn2 .btn-arrow-sq {
    display:         flex;
    align-items:     center;
    justify-content: center;
    align-self:      stretch;
    width:           56px;
    flex-shrink:     0;
    margin-top:      -14px;
    margin-bottom:   -14px;
    background:      #1B4332 !important;
    border-radius:   5px;
    color:           #ffffff !important;
    font-size:       0.92rem;
    font-weight:     900;
    margin-left:     8px;
    transition:      background var(--transition-fast);
}
#heroBtn2 .btn-arrow-sq {
    display:         flex;
    align-items:     center;
    justify-content: center;
    align-self:      stretch;
    width:           56px;
    flex-shrink:     0;
    margin-top:      -14px;
    margin-bottom:   -14px;
    background:      #1B4332 !important;
    border-radius:   5px;
    color:           #ffffff !important;
    font-size:       0.92rem;
    font-weight:     900;
    margin-left:     8px;
    transition:      background var(--transition-fast);
}

.hero #heroBtn2:hover .btn-arrow-sq {
    background: #14372A !important;
}
#heroBtn2:hover .btn-arrow-sq {
    background: #14372A !important;
}



.hero-actions .btn-secondary {
    background:   transparent;
    color:        rgba(255,255,255,0.9);
    border-color: rgba(255,255,255,0.45);
}

.hero-actions .btn-secondary:hover {
    background:   rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.75);
    color:        #fff;
}

/* -- 6. PRODUCT CARD REFINEMENTS ------------------------------- */
/* Name hover: stay dark, no brown */
.product-card:hover .product-name-text { color: var(--text-dark); }

/* Product info area — more breathing room */
.product-info {
    padding: 0.875rem 1rem 1rem;
    gap:     0.5rem;
}

/* Category tag — neutral, no brown */
.product-category {
    background:     var(--light-gray);
    color:          var(--text-muted);
    border-radius:  var(--radius-sm);
    font-size:      0.65rem;
    font-weight:    600;
    letter-spacing: 0.04em;
    padding:        2px 7px;
    border:         none;
}

/* Product image hover — subtle zoom only */
.product-card:hover .product-img img { transform: scale(1.03); }

/* Product badge — dark instead of brown */
.product-badge {
    background: var(--text-dark);
    color:      #fff;
    border-radius: var(--radius-sm);
}

/* Price separator */
.product-price { border-top: 1px solid var(--medium-gray); }

/* Size info chip */
.size-info {
    background:    var(--light-gray);
    color:         var(--text-muted);
    border-radius: var(--radius-sm);
    font-size:     0.7rem;
    font-weight:   500;
    padding:       2px 6px;
}

/* Product name — full weight */
.product-name { padding: 0; min-height: unset; }
.product-name-text {
    font-weight: 600;
    font-size:   0.88rem;
    line-height: 1.35;
}

/* Add-to-cart button inside card — smaller, plainer */
.product-info .btn-primary,
.product-card .btn-primary {
    font-size:     0.72rem;
    min-height:    36px;
    padding:       0.4rem 1.1rem;
    letter-spacing: 0.06em;
    border-width:  1.5px;
}

/* -- 7. CARE CARD ICON PANEL — transparent, dark icon -------- */
.care-card-icon-panel {
    background: transparent !important;
    border-right: 1px solid var(--medium-gray);
}
@media (max-width: 767px) {
    .care-card-icon-panel { border-right: none; border-bottom: 1px solid var(--medium-gray); }
}
.care-card-icon-panel h3 {
    color: var(--text-dark);
}
.care-card-icon-panel .care-icon {
    background: transparent !important;
    border:      none !important;
    color:       var(--text-dark) !important;
    font-size:   1.6rem;
}

.care-card-icon-panel .care-icon {
    background: rgba(255,255,255,0.1);
    color:      rgba(255,255,255,0.9);
}

/* -- 8. CATEGORY NAV REFINEMENTS ------------------------------- */
.category-nav-btn {
    padding:        0.45rem 1rem;
    transition:     background var(--transition-fast), color var(--transition-fast),
                    box-shadow var(--transition-fast);
}

/* "All" button stands out as the default active */
.category-nav-btn:first-child { font-weight: 700; }

/* -- 9. FORM LABELS -------------------------------------------- */
label,
.form-label {
    display:        block;
    font-size:      0.78rem;
    font-weight:    600;
    color:          var(--text-dark);
    letter-spacing: 0.02em;
    margin-bottom:  0.375rem;
}

.form-group { margin-bottom: 1.25rem; }

/* Checkout / contact form specifics */
.form-section-title {
    font-size:   0.78rem;
    font-weight: 700;
    color:       var(--text-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom:  1px solid var(--medium-gray);
}

/* Textarea */
textarea.form-control,
textarea {
    min-height:  100px;
    resize:      vertical;
    line-height: 1.6;
}

/* Select arrow */
select {
    appearance:         none;
    -webkit-appearance: none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 0.875rem center;
    padding-right:      2.5rem;
}

/* -- 10. FOOTER — responsive grid ------------------------------ */
/* Footer grid columns */
.footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
}

@media (max-width: 1100px) {
    .footer-content {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-section.footer-newsletter {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }

    .footer-section.footer-main {
        grid-column: 1 / -1;
    }

    .footer-section.footer-newsletter {
        grid-column: 1 / -1;
    }
}

@media (max-width: 400px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Footer bottom row */
.footer-bottom {
    border-top:  1px solid var(--medium-gray);
    padding-top: 1.5rem;
    margin-top:  1.5rem;
}

/* Social links grid */
.social-links {
    display:    flex;
    gap:        0.5rem;
    flex-wrap:  wrap;
    margin-top: 1rem;
}

.social-link {
    width:  34px;
    height: 34px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.85rem;
    flex-shrink:     0;
    text-decoration: none;
}

/* Newsletter input row */
.newsletter-form {
    display:    flex;
    gap:        0.5rem;
    flex-wrap:  wrap;
    margin-top: 0.75rem;
}

.newsletter-form input[type="email"] {
    flex:       1;
    min-width:  0;
    font-size:  0.82rem;
    min-height: 40px;
    padding:    0.5rem 0.875rem;
}

/* -- 11. MOBILE NAVIGATION POLISH ------------------------------ */
@media (max-width: 767px) {
    /* Clean white drawer — not warm parchment */
    .header-right {
        background:   #fff;
        border-left:  1px solid var(--medium-gray);
        box-shadow:   -6px 0 32px rgba(0,0,0,0.08);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding:      2.5rem 1.25rem 2rem;
        gap:          0;
        max-width:    300px;
    }

    /* Mobile nav links — clean, full-width, large tap targets */
    .main-nav { width: 100%; align-items: flex-start; }

    .main-nav ul {
        flex-direction: column;
        gap:   0;
        width: 100%;
        align-items: flex-start;
    }

    .main-nav ul li { width: 100%; }

    .nav-link {
        color:           var(--text-dark) !important;
        text-shadow:     none !important;
        font-size:       0.82rem !important;
        font-weight:     600 !important;
        letter-spacing:  0.06em !important;
        text-transform:  uppercase !important;
        padding:         0.875rem 0 !important;
        border-bottom:   1px solid var(--medium-gray) !important;
        border-radius:   0 !important;
        background:      transparent !important;
        border-top:      none !important;
        border-left:     none !important;
        border-right:    none !important;
        text-decoration: none !important;
        display:         flex !important;
        justify-content: space-between !important;
        align-items:     center !important;
        width:           100% !important;
        min-height:      48px !important;
    }

    .nav-link.active {
        color:           var(--text-dark) !important;
        font-weight:     700 !important;
        text-decoration: none !important;
        background:      transparent !important;
    }

    .nav-link:hover { color: var(--accent-gold) !important; }

    /* Mobile hamburger — white over dark hero */
    .mobile-menu-toggle {
        width:  44px;
        height: 44px;
        padding: 10px 6px;
    }

    .mobile-menu-toggle .bar {
        width:      24px;
        height:     2px;
        background: rgba(255,255,255,0.92);
    }

    header.scrolled .mobile-menu-toggle .bar {
        background: var(--text-dark);
    }

    .mobile-menu-toggle.active .bar {
        background: var(--text-dark);
    }

    /* Mobile icon buttons */
    .mobile-actions .icon-btn {
        width:    40px;
        height:   40px;
        color:    rgba(255,255,255,0.9);
        background: transparent;
        border:   none;
        box-shadow: none;
    }

    header.scrolled .mobile-actions .icon-btn {
        color: var(--text-dark);
    }

    /* Mobile cart count */
    .mobile-actions .cart-count { border-color: transparent; }

    /* Header container tight padding on mobile */
    header .container {
        padding-left:  0.875rem;
        padding-right: 0.875rem;
    }

    /* Logo on mobile */
    .logo {
        gap:           0.375rem;
        white-space:   nowrap;
        flex-shrink:   0;
    }

    .logo-image { height: 44px; width: 44px; }
    .logo-text  { font-size: 0.88rem; }
}

/* -- 12. BUTTON CONSISTENCY — final pass ----------------------- */
/* Ensure no gradient bleeds through on any button variant */
.btn-primary,
.btn-secondary,
.btn-outline {
    background-image: none !important;
}

/* Remove excessive box-shadow from any button hover */
.btn:hover,
.btn:focus {
    box-shadow: none !important;
}

/* Quantity stepper buttons in cart / product modal */
.qty-btn, .quantity-btn {
    width:         32px;
    height:        32px;
    background:    var(--light-gray);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-sm);
    color:         var(--text-dark);
    font-size:     1rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background var(--transition-fast);
}

.qty-btn:hover, .quantity-btn:hover {
    background: var(--medium-gray);
}

/* -- 13. MODAL BASE REFINEMENTS -------------------------------- */
.modal-header {
    border-bottom: 1px solid var(--medium-gray);
    padding-bottom: 1rem;
}

.modal-header h2,
.modal-header h3 {
    font-size:   1.15rem;
    font-weight: 600;
    color:       var(--text-dark);
}

.modal-close {
    background: transparent;
    border:     none;
    color:      var(--text-muted);
    cursor:     pointer;
    padding:    0.25rem;
    font-size:  1.1rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.modal-close:hover {
    color:      var(--text-dark);
    background: var(--light-gray);
}

/* -- 14. PRODUCT SECTION HEADER -------------------------------- */
.products-title {
    font-size:   clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 400;
    color:       var(--text-dark);
}

/* Sort / filter controls */
.sort-select select,
.search-box input {
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-md);
    font-size:     0.82rem;
    color:         var(--text-dark);
    background:    var(--white);
    min-height:    40px;
    padding:       0.5rem 0.875rem;
}

.sort-select select:focus,
.search-box input:focus {
    border-color: var(--text-dark);
    box-shadow:   0 0 0 2px rgba(21,21,21,0.06);
    outline:      none;
}

/* -- 15. SHOP HERO STAT CHIPS ---------------------------------- */
.shop-stat {
    background:    rgba(255,255,255,0.08);
    border:        1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding:       0.5rem 1rem;
}

.shop-stat-number { font-weight: 700; font-size: 1.1rem; }
.shop-stat-label  { font-size: 0.72rem; }

/* -- 16. CART ITEM REFINEMENTS --------------------------------- */
.cart-item-image {
    border-radius: var(--radius-md);
    background:    var(--light-gray);
    border:        1px solid var(--medium-gray);
    overflow:      hidden;
}

.cart-item-name {
    font-size:   0.88rem;
    font-weight: 600;
    color:       var(--text-dark);
}

.cart-item-price {
    font-size:   0.88rem;
    font-weight: 600;
    color:       var(--text-dark);
}

.remove-item {
    color:     var(--text-muted);
    font-size: 0.75rem;
    cursor:    pointer;
    background: none;
    border:    none;
    padding:   0;
    transition: color var(--transition-fast);
}

.remove-item:hover { color: #DC3545; }

/* Cart total row */
.cart-total {
    border-top:  2px solid var(--text-dark);
    margin-top:  1rem;
    padding-top: 1rem;
    font-weight: 700;
    font-size:   1rem;
    color:       var(--text-dark);
}

/* -- 17. SECTION DIVIDERS / VISUAL RHYTHM ---------------------- */
/* Subtle dividers between major sections (replaces background-color gaps) */
.about        { border-top: none; }
.contact      { border-top: 1px solid var(--medium-gray); }
.products-section { border-top: 1px solid var(--medium-gray); }

/* -- 18. TABLET/MOBILE (max-width: 1023px) — drawer + actions -- */
@media (max-width: 1023px) {
    /* Strip the dark frosted pill from mobile-actions */
    .mobile-actions {
        gap:              0.15rem;
        padding:          0;
        border-radius:    0;
        background:       transparent;
        backdrop-filter:  none;
        -webkit-backdrop-filter: none;
        box-shadow:       none;
    }

    /* Make the nav drawer clean white */
    .header-right {
        background:          #fff;
        border:              1px solid var(--medium-gray);
        border-right:        none;
        box-shadow:          -6px 0 32px rgba(0,0,0,0.08);
        backdrop-filter:     none;
        -webkit-backdrop-filter: none;
    }

    /* Bar color white over hero (already set in 767 block, safety here too) */
    .mobile-menu-toggle .bar {
        background: rgba(255,255,255,0.92);
        box-shadow: none;
    }

    header.scrolled .mobile-menu-toggle .bar,
    .mobile-menu-toggle.active .bar {
        background: var(--text-dark);
        box-shadow: none;
    }

    /* Mobile actions icon color */
    .mobile-actions .icon-btn,
    .mobile-actions .theme-toggle,
    .mobile-menu-toggle {
        color: rgba(255,255,255,0.92);
    }

    header.scrolled .mobile-actions .icon-btn,
    header.scrolled .mobile-actions .theme-toggle,
    header.scrolled .mobile-menu-toggle {
        color: var(--text-dark);
    }
}

/* -- PRINT SAFE (don't let new styles break quote/receipt print) */
@media print {
    .theme-toggle { display: none !important; }
    header, footer, .mobile-menu-toggle { display: none !important; }
}

/* ================================================================
   STAGE 3 — HERO TRANSFORMATION
   Image-first editorial experience. CMS bindings fully preserved.
   ================================================================ */

/* -- 1. HERO SECTION BASE --------------------------------------- */
.hero {
    min-height:      92vh;
    align-items:     flex-end;          /* push content to bottom */
    justify-content: flex-start;
    padding-top:     0;
    padding-bottom:  6rem;
    background-position: center center;
    background-size: cover;
}

/* -- 2. OVERLAY — subtle bottom vignette for text legibility ---- */
/* Re-enable ::before (inline CSS had display:none on it) */
.hero::before {
    display:    block !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.28) 45%,
        rgba(0, 0, 0, 0.05) 100%
    ) !important;
    z-index:         1 !important;
    pointer-events:  none !important;
    content:         '' !important;
    position:        absolute !important;
    inset:           0 !important;
}

/* Kill ::after overlay */
.hero::after { display: none !important; }

/* -- 3. HERO CONTAINER — single column, left-anchored ----------- */
.hero-container {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     flex-start !important;
    justify-content: flex-end !important;
    gap:             0 !important;
    width:           100% !important;
    max-width:       var(--max-container) !important;
    padding-left:    var(--container-padding) !important;
    padding-right:   var(--container-padding) !important;
    padding-bottom:  0 !important;
    /* grid override */
    grid-template-columns: unset !important;
}

/* -- 4. HERO CONTENT — left-aligned, width constrained ----------- */
.hero-content {
    text-align:  left !important;
    order:       unset !important;
    width:       100% !important;
    max-width:   600px;
    padding:     0 !important;
}

/* -- 5. Stats: hidden (not in current layout) --- */
.hero-stats  { display: none !important; }

/* -- 6. HERO TITLE — editorial serif ----------------------------  */
.hero-title {
    font-family:    'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-weight:    400 !important;
    font-size:      clamp(2.75rem, 5.5vw, 4.5rem) !important;
    line-height:    1.08 !important;
    letter-spacing: -0.01em !important;
    color:          #ffffff !important;
    margin-bottom:  1.25rem !important;
    gap:            0.1em !important;
    text-align:     left !important;
}

.title-line { display: block; }

/* Highlight word in warm gold */
.highlight { color: var(--accent-gold) !important; }

/* -- 7. HERO DESCRIPTION — brief, legible ---------------------- */
.hero-description {
    font-size:    0.95rem !important;
    line-height:  1.7 !important;
    color:        rgba(255, 255, 255, 0.75) !important;
    font-weight:  400 !important;
    max-width:    460px !important;
    margin:       0 0 2.25rem 0 !important;
    text-align:   left !important;
}

/* -- 8. HERO ACTIONS — single CTA only ------------------------ */
.hero-actions {
    display:         flex !important;
    gap:             1rem !important;
    justify-content: flex-start !important;
    flex-wrap:       nowrap !important;
    margin-bottom:   0 !important;
    width:           auto !important;
    flex-direction:  row !important;
}

/* -- 9. HERO SHOP CTA — editorial rectangular outline button --- */
#heroBtn2 {
    background:     transparent !important;
    color:          #fff !important;
    border:         1.5px solid rgba(255, 255, 255, 0.55) !important;
    border-radius:  0 !important;
    font-size:      0.72rem !important;
    font-weight:    600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding:        0.85rem 2.5rem !important;
    min-height:     46px !important;
    box-shadow:     none !important;
    transition:
        border-color var(--transition-fast),
        background   var(--transition-fast) !important;
}

#heroBtn2:hover {
    background:   rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.90) !important;
    color:        #fff !important;
    transform:    none !important;
    box-shadow:   none !important;
}

/* Hide the shopping-bag icon — text-only CTA */
#heroBtn2 > i { display: none !important; }

/* -- 10. SCROLL INDICATOR — minimal circle at bottom center --- */
.hero-scroll {
    position:  absolute;
    bottom:    2rem;
    left:      50%;
    transform: translateX(-50%);
    z-index:   3;
}

.scroll-down {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border:          1px solid rgba(255, 255, 255, 0.28);
    border-radius:   50%;
    color:           rgba(255, 255, 255, 0.50);
    text-decoration: none;
    font-size:       0.7rem;
    animation:       heroScrollBounce 2.8s ease-in-out infinite;
    transition:
        border-color var(--transition-fast),
        color        var(--transition-fast);
}

.scroll-down:hover {
    border-color: rgba(255, 255, 255, 0.65);
    color:        rgba(255, 255, 255, 0.85);
}

@keyframes heroScrollBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(7px); }
}

/* -- 11. HEADER ? HERO COHESION -------------------------------- */
/* Transparent over hero, solid when scrolled — already handled
   in Stage 1/2 via .scrolled class from the existing scroll JS.
   These rules sharpen the transition for the Stage 3 hero. */

header {
    transition:
        background     0.25s ease-out,
        border-color   0.25s ease-out,
        backdrop-filter 0.25s ease-out !important;
}

/* Ensure logo text is readable against the dark hero photo */
.logo-text,
.logo-text span {
    color: #fff !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5) !important;
}

/* When scrolled — logo becomes dark-branded */
header.scrolled .logo-text {
    color:       var(--text-dark) !important;
    text-shadow: none !important;
}

header.scrolled .logo-text span {
    color:       var(--accent-gold) !important;
    text-shadow: none !important;
}

/* -- 12. MOBILE HERO ------------------------------------------- */
@media (max-width: 1023px) {
    .hero {
        min-height:     88vh;
        min-height:     88dvh;
        padding-bottom: 4rem;
    }

    .hero-content { max-width: 100%; }

    .hero-title {
        font-size: clamp(2.25rem, 6vw, 3.25rem) !important;
    }

    .hero-description {
        font-size: 0.9rem !important;
        max-width: 85% !important;
    }
}

@media (max-width: 767px) {
    .hero {
        min-height:     88vh;
        min-height:     88dvh;
        padding-bottom: 3.25rem;
    }

    /* Override inline CSS center-alignment on mobile */
    .hero-content {
        text-align:  left !important;
        max-width:   100% !important;
        padding:     0 !important;
    }

    .hero-container {
        padding-left:  1.25rem !important;
        padding-right: 1.25rem !important;
    }

    .hero-title {
        font-size:      clamp(2rem, 8vw, 2.75rem) !important;
        margin-bottom:  1rem !important;
        text-align:     left !important;
    }

    .hero-description {
        font-size:     0.875rem !important;
        max-width:     100% !important;
        margin-bottom: 1.75rem !important;
        text-align:    left !important;
    }

    .hero-actions {
        justify-content: flex-start !important;
        width:           auto !important;
    }

    /* Override inline CSS .btn-hero flex:1 (prevents full-stretch) */
    #heroBtn2 {
        flex:       0 0 auto !important;
        min-width:  0 !important;
        padding:    0.75rem 1.75rem !important;
        font-size:  0.7rem !important;
    }

    /* Scroll indicator hidden on mobile — saves vertical space */
    .hero-scroll { display: none !important; }

    /* Override inline mobile overlay — keep our gradient */
    .hero::before {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.30) 50%,
            rgba(0, 0, 0, 0.05) 100%
        ) !important;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height:     90vh;
        min-height:     90dvh;
        padding-bottom: 2.75rem;
    }

    .hero-title {
        font-size: clamp(1.875rem, 9vw, 2.5rem) !important;
    }

    #heroBtn2 {
        padding:   0.7rem 1.5rem !important;
        font-size: 0.68rem !important;
    }
}

/* -- 13. PRESERVE: animateHeroNumbers still targets stat IDs --- */
/* Stats are display:none via CSS but DOM elements + IDs remain  */
/* so the JS counter animation fires harmlessly on hidden els.   */

/* ================================================================
   STAGE 4 — HOMEPAGE TRANSFORMATION
   Section order: Featured ? Story ? Collections ? Impact ?
   Newsletter ? Contact (bottom)
   ================================================================ */

/* -- Global section spacing rhythm ---------------------------- */
.home-featured-section,
.home-story-section,
.home-collections-section,
.home-impact-section,
.home-newsletter-section {
    padding-top:    6rem;
    padding-bottom: 6rem;
}

@media (max-width: 768px) {
    .home-featured-section,
    .home-story-section,
    .home-collections-section,
    .home-impact-section,
    .home-newsletter-section {
        padding-top:    4rem;
        padding-bottom: 4rem;
    }
}

/* -- Section header centering for new sections ----------------- */
.home-section-header {
    text-align:    center;
    margin-bottom: 3rem;
}

.home-section-header .section-title { margin-bottom: 0.5rem; }

/* -- 1. FEATURED PRODUCTS SECTION ------------------------------ */
.home-featured-section {
    background: var(--white);
    border-top:  1px solid var(--medium-gray);
}

/* Tighten the grid to 3 columns on the homepage */
.home-featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .home-featured-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
}

@media (min-width: 1024px) {
    .home-featured-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1.25rem !important;
    }
}

/* "View Full Collection" CTA row */
.home-featured-footer {
    text-align:  center;
    padding-top: 1rem;
}

/* -- 2. BRAND STORY SECTION — simplified ----------------------- */
.home-story-section {
    background: var(--light-gray);
}

/* Hide the complex sub-sections that overwhelm the homepage */
/* Story content: single column wrapper — bounds both story card
   and mission cards to the same max-width.
   Original story card was 700px; user requested +2 cm (˜76 px).  */
.home-story-section .story-content {
    display:    block !important;
    max-width:  776px !important;   /* 700px + 2 cm ˜ 776px */
    margin:     0 auto !important;
}

/* Story card fills the wrapper (override the inner 700px cap) */
.home-story-section .story-card {
    max-width: 100% !important;
    width:     100% !important;
    margin:    0 !important;        /* centring now handled by parent */
}

/* Mission/Vision: inside the story card — single row of 2 cards */
.home-story-section .mission-vision-section {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   1rem !important;
    margin-top:            1.5rem !important;  /* space below story text */
    max-width:             100% !important;
}

/* Mission/Vision cards — no shading, uniform with story card */
.home-story-section .mission-card {
    background:     transparent !important;
    border:         1px solid var(--medium-gray) !important;
    border-radius:  var(--radius-md) !important;
    padding:        1.25rem !important;
    text-align:     left;
    box-shadow:     none !important;
    display:        flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* No icons */
.home-story-section .mission-icon { display: none !important; }

.home-story-section .mission-card h3 {
    font-family:    'Playfair Display', Georgia, serif !important;
    font-size:      0.92rem !important;
    font-weight:    500 !important;
    color:          var(--text-dark) !important;
    margin-bottom:  0.5rem !important;
    letter-spacing: -0.01em !important;
    line-height:    1.3 !important;
}

.home-story-section .mission-card p {
    font-size:   0.8rem !important;
    color:       var(--text-light) !important;
    line-height: 1.7 !important;
    margin:      0 !important;
    font-weight: 400 !important;
}

/* Mobile: cards stack vertically below story card */
@media (max-width: 480px) {
    .home-story-section .mission-vision-section {
        grid-template-columns: 1fr !important;
    }
}

/* Simplify the story card to clean text block */
.home-story-section .story-card {
    background:    transparent;
    border:        none;
    box-shadow:    none;
    padding:       0;
    max-width:     700px;
    margin:        0 auto;
    text-align:    center;
}

.home-story-section .story-icon { display: none; }

.home-story-section #aboutStoryHeading {
    font-family:    'Playfair Display', Georgia, serif;
    font-weight:    400;
    font-size:      clamp(1.5rem, 3vw, 2.25rem);
    color:          var(--text-dark);
    margin-bottom:  1.25rem;
    line-height:    1.25;
}

.home-story-section #aboutStoryP1 {
    font-size:    0.95rem;
    line-height:  1.75;
    color:        var(--text-light);
    font-weight:  400;
    max-width:    600px;
    margin-left:  auto;
    margin-right: auto;
}

/* Hide secondary paragraph and detail cards on homepage */
.home-story-section .story-secondary-p  { display: none !important; }
.home-story-section #aboutDetailCards   { display: none !important; }

/* Simplify section header for story */
.home-story-section .section-header {
    text-align:    center;
    margin-bottom: 2.5rem;
}

.home-story-section .story-content { padding: 0; }
.home-story-section .story-section { max-width: 100%; }

/* -- 3. COLLECTIONS SECTION ------------------------------------ */
.home-collections-section {
    background:  var(--white);
    overflow:    hidden;
    padding-bottom: 0;    /* craft slider bleeds to edge */
}

/* Give the viewport more height */
.home-collections-section .craft-slider-viewport {
    margin-top: 0;
}

/* -- 4. IMPACT SNAPSHOT ---------------------------------------- */
.home-impact-section {
    background:   var(--text-dark);
    padding-top:  4rem;
    padding-bottom: 4rem;
}

.home-impact-grid {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             0;
    flex-wrap:       nowrap;
}

.home-impact-stat {
    flex:            1;
    text-align:      center;
    padding:         2rem 1.5rem;
    border-right:    1px solid rgba(255,255,255,0.08);
}

.home-impact-stat:last-child { border-right: none; }

.home-impact-number {
    display:        block;
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      clamp(2.5rem, 5vw, 4rem);
    font-weight:    400;
    color:          var(--accent-gold);
    line-height:    1;
    margin-bottom:  0.5rem;
    letter-spacing: -0.02em;
}

.home-impact-label {
    display:        block;
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.55);
}

@media (max-width: 640px) {
    .home-impact-grid  { flex-direction: column; gap: 0; }
    .home-impact-stat  {
        border-right:  none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding:       1.5rem 2rem;
        width:         100%;
    }
    .home-impact-stat:last-child { border-bottom: none; }
    .home-impact-number { font-size: clamp(2rem, 8vw, 3rem); }
}

/* -- 5. NEWSLETTER STRIP ------------------------------------------ */
.home-newsletter-section {
    background:   var(--light-gray);
    border-top:   1px solid var(--medium-gray);
    border-bottom: 1px solid var(--medium-gray);
}

.home-newsletter-inner {
    max-width:  560px;
    margin:     0 auto;
    text-align: center;
}

.home-newsletter-title {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      clamp(1.5rem, 3vw, 2rem);
    font-weight:    400;
    color:          var(--text-dark);
    margin-bottom:  0.75rem;
    letter-spacing: -0.01em;
}

.home-newsletter-subtitle {
    font-size:      0.9rem;
    line-height:    1.7;
    color:          var(--text-light);
    font-weight:    400;
    margin-bottom:  2rem;
}

.home-newsletter-form {
    display:   flex;
    gap:       0.75rem;
    max-width: 440px;
    margin:    0 auto;
}

.home-newsletter-form input[type="email"] {
    flex:          1;
    min-width:     0;
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-md);
    font-size:     0.88rem;
    padding:       0.65rem 1rem;
    min-height:    48px;
    background:    var(--white);
    color:         var(--text-dark);
    transition:    border-color var(--transition-fast);
}

.home-newsletter-form input[type="email"]:focus {
    border-color: var(--text-dark);
    outline:      none;
    box-shadow:   0 0 0 2px rgba(21,21,21,0.06);
}

.home-newsletter-form input::placeholder { color: var(--text-muted); }

.home-newsletter-form .btn-primary {
    flex-shrink:    0;
    white-space:    nowrap;
    min-height:     48px;
    padding:        0.65rem 1.5rem;
    font-size:      0.74rem;
    letter-spacing: 0.08em;
}

@media (max-width: 480px) {
    .home-newsletter-form {
        flex-direction: column;
        gap: 0.625rem;
    }
    .home-newsletter-form .btn-primary { width: 100%; }
}

/* -- 7. CONTACT SECTION — de-emphasized, accessible at bottom -- */
.contact {
    border-top: 1px solid var(--medium-gray);
}

/* -- Navigation: 5 items, tighter spacing ---------------------- */
.main-nav ul { gap: 0.25rem; }

/* -- About section — section header centred -------------------- */
.home-story-section .story-section .section-header {
    text-align: center;
}

/* -- Loading overlay: always hidden (separate from splash) ------ */
#loadingOverlay,
.loading-overlay,
.loading-spinner,
.spinner-circle { display: none !important; }

/* -- Inline fa-spin: disabled (avoid visual noise) -------------- */
.fa-spin, i.fa-spin, .fas.fa-spin { animation: none !important; }

/* -- Body booting: always fully visible ------------------------- */
/* The splash screen (z-index:99999) covers everything, so the   */
/* body being visible underneath is intentional and safe.        */
body.app-booting { visibility: visible !important; opacity: 1 !important; }

/* ================================================================
   SPLASH SCREEN — minimal boot cover
   Covers the page during JS initialisation so users never see the
   featured-products section before the hero renders.
   Background: primary brand colour. Spinner: thin, single-ring.
   Dismissed by JS (finalizeInitialRender) with a 0.3s fade.
   ================================================================ */
@keyframes lufa-spin {
    to { transform: rotate(360deg); }
}

/* CSS-only fallback: auto-hide after 5s if JS never fires */
@keyframes lufa-splash-fallback {
    0%,   90%  { opacity: 1; pointer-events: all; }
    100%       { opacity: 0; pointer-events: none; }
}

#splash-screen {
    position:        fixed;
    inset:           0;
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #151515; /* primary brand dark */
    opacity:         1;
    /* JS-triggered fade uses the transition; fallback uses the animation */
    transition:      opacity 0.3s ease;
    animation:       lufa-splash-fallback 5s linear forwards;
    pointer-events:  all;
}

/* JS adds .splash-done — takes over from the fallback animation */
#splash-screen.splash-done {
    animation:      none;  /* cancel the 5s fallback */
    opacity:        0;
    pointer-events: none;
}

/* Thin single-ring spinner — 28px, 2px stroke */
.splash-spinner {
    width:         28px;
    height:        28px;
    border:        2px solid rgba(255,255,255,0.12);
    border-top:    2px solid rgba(255,255,255,0.88);
    border-radius: 50%;
    animation:     lufa-spin 0.75s linear infinite;
    display:       block !important;
}

@media (prefers-reduced-motion: reduce) {
    #splash-screen  { animation: lufa-splash-fallback 5s linear forwards; transition: none; }
    .splash-spinner { animation: none; border-top-color: rgba(255,255,255,0.6); }
}

/* ================================================================
   MULTI-FIX BLOCK
   1. Index hero hidden by default — only shown on home page via JS
   2. Community stories top border removed
   3. Story card + dropdown merged (no radius at join)
   4. Gallery tags: no blur, no dark background
   5. Header contact button: more vertical padding
   6. Mobile impact cards: single row of 3
   ================================================================ */

/* -- 1. INDEX HERO: hidden by default (JS shows for home only) -- */
#hero {
    display: none;
}
/* When JS calls showPage('home'), it sets style.display = 'block'
   which overrides this. All other pages leave it display:none.    */

/* -- 2. COMMUNITY STORIES: remove top heritage stripe ---------- */
.community-stories-section .story-card::before,
.stories-grid .story-card::before {
    display: none !important;
    content:  none !important;
}

/* -- 3. STORY CARD + EXPANDED DROPDOWN: merge at intersection --- */
/* Card loses bottom radius when expanded — drop matches card top  */
.community-stories-section .story-card.story-card-open {
    border-bottom-left-radius:  0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Expanded panel: flat top, matches card's now-square bottom */
.community-stories-section .story-expanded {
    border-top:                 none !important;
    border-radius:              0 0 var(--radius-md) var(--radius-md) !important;
    border-top-left-radius:     0 !important;
    border-top-right-radius:    0 !important;
}

/* -- 4. GALLERY TAGS: transparent, no blur --------------------- */
.gallery-item-tag {
    backdrop-filter:         none !important;
    -webkit-backdrop-filter: none !important;
    background:              transparent !important;
    color:                   rgba(255, 255, 255, 0.92) !important;
    border:                  1px solid rgba(255, 255, 255, 0.55) !important;
    text-shadow:             0 1px 4px rgba(0,0,0,0.6);  /* keep text legible */
}

/* -- 5. HEADER CONTACT BUTTON: more vertical padding ----------- */
a.header-contact-btn,
header a.header-contact-btn {
    padding-top:    0.65rem !important;
    padding-bottom: 0.65rem !important;
    min-height:     42px !important;
}

/* -- 6. MOBILE IMPACT CARDS: 3 in a single row ----------------- */
@media (max-width: 767px) {
    .home-impact-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap:                   0.625rem !important;
    }
    .home-impact-card { aspect-ratio: 3 / 4 !important; }
}

@media (max-width: 400px) {
    .home-impact-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap:                   0.375rem !important;
    }
    .home-impact-card { aspect-ratio: 2 / 3 !important; }

    /* Scale overlay text for narrow cards */
    .home-impact-overlay .home-impact-number { font-size: clamp(1.25rem, 6vw, 2rem) !important; }
    .home-impact-overlay .home-impact-label  { font-size: 0.55rem !important; letter-spacing: 0.06em !important; }
}

/* -- Header Contact Button ------------------------------------- */
/* Does NOT carry the .nav-link class — uses [data-page] routing  */
a.header-contact-btn,
header a.header-contact-btn {
    display:          inline-flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    background-color: #1B4332 !important;   /* brand primary, literal - no var dependency */
    background-image: none !important;
    color:            #ffffff !important;
    border:           none !important;
    border-radius:    6px !important;
    padding:          0.45rem 1.1rem !important;
    font-size:        0.72rem !important;
    font-weight:      700 !important;
    letter-spacing:   0.07em !important;
    text-transform:   uppercase !important;
    text-decoration:  none !important;
    text-shadow:      none !important;
    white-space:      nowrap !important;
    min-height:       36px !important;
    transition:       background-color 0.15s ease !important;
    flex-shrink:      0;
    opacity:          1 !important;
}

a.header-contact-btn:hover,
header a.header-contact-btn:hover {
    background-color: #14372A !important;   /* brand primary hover */
    color:            #ffffff !important;
    text-decoration:  none !important;
    transform:        none !important;
    box-shadow:       none !important;
}

/* Hide on mobile — accessible via footer / mobile nav */
@media (max-width: 1023px) {
    a.header-contact-btn,
    header a.header-contact-btn { display: none !important; }
}

/* Community stories cards — border radius removed */
/* Community stories — unified single card: outer card carries all chrome */
.community-stories-section .story-card,
.stories-grid .story-card {
    border-radius: var(--radius-xl) !important;
    background:    var(--white) !important;
    box-shadow:    0 4px 18px rgba(11, 31, 23,0.07) !important;
    border:        1px solid rgba(27, 67, 50,0.07) !important;
    border-top:    3px solid var(--primary-brown) !important;
    transition:    transform var(--transition-base), box-shadow var(--transition-base) !important;
}
.community-stories-section .story-card:hover,
.stories-grid .story-card:hover {
    transform:  translateY(-3px) !important;
    box-shadow: 0 14px 36px rgba(11, 31, 23,0.13) !important;
}
/* Inner face: layout only — no duplicate chrome */
.community-stories-section .story-card-inner,
.stories-grid .story-card-inner {
    background:    transparent !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    border:        none !important;
    box-shadow:    none !important;
}
/* Toggle wrapper: transparent so outer card background shows through */
.community-stories-section .story-toggle-wrapper,
.stories-grid .story-toggle-wrapper {
    background:    transparent !important;
    border-radius: 0 !important;
}

/* -- Cart scroll setup handled at end of file (final block) ---- */

/* ================================================================
   CART LAYOUT REFINEMENTS v2
   Wider summary column · Breathable order summary · Tighter items
   ================================================================ */

/* -- Cart modal: wide enough for both columns to breathe ------- */
.cart-modal {
    max-width:  1020px !important;
    max-height: 88vh !important;
}

/* -- Cart content: items = flexible, summary = fixed 420px ------ */
/* Giving the summary more room removes the squeeze.
   The items column shrinks proportionally (still scrollable).    */
.cart-content {
    grid-template-columns: 1fr 420px !important;
    min-height:            480px !important;
    max-height:            calc(88vh - 72px) !important;
}

/* -- Items column ---------------------------------------------- */
.cart-items-section {
    padding:    1.25rem 1.5rem !important;
    background: var(--white);
}

/* -- Cart item card: smaller image to reclaim horizontal space -- */
.cart-item {
    grid-template-columns: 70px 1fr auto !important;
    gap:                   0.875rem !important;
    padding:               1rem 0 !important;
    align-items:           flex-start !important;
}

.cart-item-image {
    width:         70px !important;
    height:        70px !important;
    border-radius: var(--radius-md) !important;
    border:        1px solid var(--medium-gray) !important;
}

.cart-item-details {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0.25rem !important;
    padding-top:    0.1rem;
    min-width:      0;
}

.cart-item-name {
    font-size:     0.85rem !important;
    font-weight:   600 !important;
    line-height:   1.35 !important;
    color:         var(--text-dark) !important;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.cart-item-meta {
    font-size: 0.7rem !important;
    color:     var(--text-muted) !important;
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.cart-item-price {
    font-size:   0.85rem !important;
    font-weight: 700 !important;
    color:       var(--text-dark) !important;
    margin-top:  0.2rem !important;
}

.cart-item-actions {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-end !important;
    gap:            0.5rem !important;
    padding-top:    0.1rem;
    flex-shrink:    0;
}

/* -- Order summary column — spacious, uncluttered --------------- */
.cart-summary-section {
    background:  var(--light-gray) !important;
    border-left: 1px solid var(--medium-gray) !important;
    overflow-y:  auto;
}

.cart-summary {
    padding:        2rem !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            1.5rem !important;   /* consistent spacing between groups */
    height:         100% !important;
    min-height:     0;
}

/* Summary heading — clean, editorial */
.summary-header {
    margin:  0 !important;
    padding: 0 !important;
    border:  none !important;
}

.summary-header h3 {
    font-family:    'Playfair Display', Georgia, serif !important;
    font-size:      1.1rem !important;
    font-weight:    400 !important;
    color:          var(--text-dark) !important;
    letter-spacing: -0.01em;
    margin:         0 !important;
}

/* Line items */
.summary-items {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0.75rem !important;
    margin:         0 !important;
    padding:        1.25rem !important;
    background:     var(--white);
    border-radius:  var(--radius-md);
    border:         1px solid var(--medium-gray);
}

.summary-item {
    display:     flex !important;
    font-size:   0.88rem !important;
    padding:     0 !important;
    color:       var(--text-dark) !important;
}

.summary-item span:first-child { color: var(--text-light); }

.summary-item.total {
    font-size:    0.95rem !important;
    font-weight:  700 !important;
    padding-top:  0.875rem !important;
    margin-top:   0.25rem !important;
    border-top:   1.5px solid var(--medium-gray) !important;
}

.summary-item.total span:first-child { color: var(--text-dark); }

/* Shipping options — no nested card, just clean rows */
.shipping-options {
    margin:        0 !important;
    padding:       0 !important;
    background:    transparent !important;
    border:        none !important;
    border-radius: 0 !important;
}

.option-group h4 {
    font-size:      0.68rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color:          var(--text-muted) !important;
    margin-bottom:  0.75rem !important;
}

.option-group h4 i { display: none !important; }

.option-item {
    margin-bottom: 0.625rem !important;
}

.option-item:last-child { margin-bottom: 0 !important; }

.option-label {
    display:       flex !important;
    align-items:   flex-start !important;
    gap:           0.625rem !important;
    padding:       0.75rem 0.875rem !important;
    background:    var(--white) !important;
    border:        1px solid var(--medium-gray) !important;
    border-radius: var(--radius-md) !important;
    cursor:        pointer !important;
}

.option-title {
    flex-direction: row !important;
    align-items:    center !important;
    gap:            0.375rem;
}

.option-title i    { font-size: 0.82rem; color: var(--text-muted); }
.option-title span { font-size: 0.82rem !important; font-weight: 600; color: var(--text-dark); }

/* Hide verbose description text — too much to read in sidebar */
.option-description { display: none !important; }

/* Freight info — collapse to a single-line note */
.freight-info {
    margin:        0 !important;
    padding:       0.875rem 1rem !important;
    border-radius: var(--radius-md) !important;
    background:    rgba(21,21,21,0.04) !important;
    border:        none !important;
}

.info-header {
    margin-bottom: 0.375rem !important;
}

.info-header h4 {
    font-size:   0.72rem !important;
    font-weight: 600 !important;
    color:       var(--text-dark) !important;
}

.info-header i { color: var(--accent-gold) !important; font-size: 0.72rem !important; }

/* Show only the first paragraph of freight info */
.info-content p {
    font-size:     0.72rem !important;
    line-height:   1.6 !important;
    color:         var(--text-light) !important;
    margin-bottom: 0 !important;
}

.info-content p:not(:first-child) { display: none !important; }

/* CTAs — natural bottom of summary */
.cart-actions {
    margin-top:    auto !important;
    padding-top:   0 !important;
    gap:           0.625rem !important;
}

#proceedCheckout {
    min-height:     52px !important;
    font-size:      0.82rem !important;
    letter-spacing: 0.06em !important;
    border-radius:  var(--radius-md) !important;
}

#continueShoppingBtn {
    min-height:   42px !important;
    font-size:    0.78rem !important;
    color:        var(--text-muted) !important;
    border-color: transparent !important;
    background:   transparent !important;
}

#continueShoppingBtn:hover {
    color:        var(--text-dark) !important;
    background:   var(--white) !important;
    border-color: var(--medium-gray) !important;
}

/* -- Mobile cart layout ----------------------------------------- */
@media (max-width: 767px) {
    .cart-content {
        grid-template-columns: 1fr !important;
        max-height: none !important;
    }

    .cart-items-section {
        padding: 1rem 1.125rem !important;
    }

    .cart-item {
        grid-template-columns: 60px 1fr auto !important;
    }

    .cart-item-image { width: 60px !important; height: 60px !important; }

    .cart-summary    { padding: 1.25rem !important; gap: 1.25rem !important; }
    .summary-items   { padding: 1rem !important; }

    .cart-summary { padding: 1.25rem !important; }
}

/* ================================================================
   IMPACT IMAGE CARDS · GALLERY GRID · BUTTON WIRING POLISH
   ================================================================ */

/* -- Impact section: header colors flow from the section's own --text-dark/--text-light overrides -- */
.home-impact-header .section-title  { color: var(--text-dark) !important; }
.home-impact-header .section-subtitle { color: var(--text-light) !important; }

/* Impact image cards — 6 cards, 3 per row */
.home-impact-grid {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   1.25rem !important;
    margin-top:            2rem;
}

.home-impact-card {
    position:      relative;
    aspect-ratio:  4 / 3;
    border-radius: var(--radius-lg);
    overflow:      hidden;
    cursor:        default;
}

.home-impact-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    filter:     grayscale(100%);   /* black and white */
    -webkit-filter: grayscale(100%);
    transition: transform 0.5s ease-out;
}

.home-impact-card:hover img {
    transform: scale(1.04);
    filter:    grayscale(100%);   /* stays black and white on hover */
    -webkit-filter: grayscale(100%);
}

/* Warm gradient overlay (not pure black) */
.home-impact-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(20,10,4,0.68) 0%, rgba(20,10,4,0.15) 55%, transparent 100%);
    display:    flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding:    1.5rem 1rem;
    text-align: center;
}

.home-impact-overlay .home-impact-number {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      clamp(2rem, 4vw, 3.5rem);
    font-weight:    400;
    color:          var(--accent-gold);
    line-height:    1;
    letter-spacing: -0.02em;
    margin-bottom:  0.375rem;
    display:        block;
}

.home-impact-overlay .home-impact-label {
    font-size:      0.75rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.85);
    display:        block;
}

@media (max-width: 767px) {
    .home-impact-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.875rem !important;
    }
    .home-impact-card { aspect-ratio: 4 / 3; }
}

@media (max-width: 400px) {
    .home-impact-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }
    .home-impact-card { aspect-ratio: 1 / 1; }
}

/* -- Gallery grid — responsive masonry-style -------------------- */
.gallery-grid {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:                   0.625rem !important;
}

.gallery-item {
    position:      relative;
    aspect-ratio:  1 / 1;
    overflow:      hidden;
    border-radius: var(--radius-sm);
    cursor:        pointer;
    background:    var(--light-gray);
}

.gallery-item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.45s ease-out;
}

.gallery-item:hover img  { transform: scale(1.06); }

/* Hover tag — appears over image when user hovers */
.gallery-item-tag {
    position:    absolute;
    bottom:      0;
    left:        0;
    right:       0;
    padding:     0.5rem 0.75rem;
    background:  rgba(0, 0, 0, 0.72);
    color:       #ffffff;
    font-size:   0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align:  center;
    /* Hidden by default */
    opacity:     0;
    transform:   translateY(4px);
    transition:  opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.gallery-item:hover .gallery-item-tag {
    opacity:   1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; }
    /* Show tags on mobile without hover (touch devices) */
    .gallery-item-tag { opacity: 1; transform: translateY(0); font-size: 0.65rem; padding: 0.375rem 0.5rem; }
}

@media (max-width: 480px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   SHOP CONTROL ROW — category pills + search + sort on one line
   ================================================================ */

/* -- SHOP CONTROL ROW: pills · search · sort on one line -------- */

/* Flex row: pills on left at natural size, search+sort on right */
.shop-controls-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-wrap:       nowrap;
}

/* Category nav: shrinks to fit button content, scrolls if categories overflow */
.shop-controls-row .categories-nav {
    flex:            0 0 auto;
    min-width:       0;
    max-width:       100%;
    overflow-x:      auto;
    overflow-y:      clip;
    scrollbar-width: none;
    flex-wrap:       nowrap;
    margin:          0;
}

.shop-controls-row .categories-nav::-webkit-scrollbar { display: none; }

/* Search + sort pinned to the right, never stretch or shrink away */
.shop-search-sort {
    display:     flex;
    align-items: center;
    gap:         0.625rem;
    flex-shrink: 0;
}

/* Search input — compact width in the control row */
.shop-search-sort .search-box input {
    width:       190px !important;
    /* Restore left padding so icon and placeholder don't overlap.
       Stage 7 form rule sets padding:0.6rem 0.875rem !important
       which removes the 2.25rem left gap the icon needs.          */
    padding-left: 2.25rem !important;
}

/* Ensure the search icon is visible and not behind text */
.shop-search-sort .search-box {
    position: relative;
}

.shop-search-sort .search-box i {
    position:   absolute;
    left:       0.75rem;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--text-muted);
    font-size:  0.75rem;
    pointer-events: none;
    z-index:    1;
}

/* Sort select — compact */
.shop-search-sort .sort-select select {
    min-width: 130px;
}

/* Sort icon: hidden on desktop — only mobile CSS re-enables it in collapsed state */
.sort-icon-only { display: none; }

/* Products header: title only, tighter spacing */
.products-header {
    margin-bottom: 1.5rem;
}

/* Mobile: pills full-width on top, search+sort below */
@media (max-width: 767px) {
    .shop-controls-row {
        flex-wrap: wrap;
        gap:       0.75rem;
    }

    .shop-controls-row .categories-nav {
        flex:  0 0 100%;
        order: 1;
    }

    .shop-search-sort {
        flex:  0 0 100%;
        order: 2;
    }

    .shop-search-sort .search-box { flex: 1; }
    .shop-search-sort .search-box input { width: 100% !important; }

    .shop-search-sort .sort-select,
    .shop-search-sort .sort-select select { width: 100%; }
}

/* ================================================================
   CONTACT FORM TRIM · CRAFT CARD BUTTON RESTORE
   ================================================================ */

/* Contact locations + padding handled in Stage 10 block — see below */

/* -- Craft card "Shop [category]" button — fully transparent, white
   bold outline + text, no blur, only revealed on hover (see
   public-app.css for the opacity-reveal logic on
   .craft-button-container). Background stays transparent in both
   the default and hover states — no tint, no blur, no brown.      -- */
.craft-btn,
.craft-card .craft-btn,
a.craft-btn {
    color:       #ffffff !important;
    background:  transparent !important;
    border:      2.5px solid #ffffff !important;
    border-radius: var(--radius-md) !important;
    font-size:   0.75rem !important; /* slight reduction — mobile default */
    font-weight: 800 !important;
    min-height:  36px !important;
    width:       100% !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap:         0.375rem !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    backdrop-filter: none !important;
    box-shadow:  none !important;
}

/* PC view only — noticeably smaller button text */
@media (min-width: 768px) {
    .craft-btn,
    .craft-card .craft-btn,
    a.craft-btn {
        font-size: 0.65rem !important;
    }
}

.craft-btn:hover,
.craft-card .craft-btn:hover,
a.craft-btn:hover {
    background:   transparent !important;
    border-color: #ffffff !important;
    color:        #ffffff !important;
    transform:    none !important;
    box-shadow:   none !important;
    backdrop-filter: none !important;
}

/* ================================================================
   FOOTER SOCIAL BAR
   White pill button, centred, above all footer columns.
   All properties forced with !important to override footer cascade.
   ================================================================ */

/* Outer wrapper — centres the pill */
.footer-social-bar {
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    width:           100% !important;
    padding-top:     0.5rem !important;
    padding-bottom:  2.5rem !important;
    margin-bottom:   2.5rem !important;
    border-bottom:   1px solid rgba(255, 255, 255, 0.10) !important;
    background:      transparent !important;
}

/* White pill strip — forced white background */
.footer-social-strip {
    display:          flex !important;         /* flex not inline-flex for reliability */
    flex-direction:   row !important;
    align-items:      center !important;
    gap:              0 !important;
    background-color: #ffffff !important;      /* explicit background-color, not shorthand */
    background-image: none !important;         /* prevent any inherited gradient */
    border-radius:    9999px !important;
    padding:          6px 8px !important;
    box-shadow:       0 4px 20px rgba(0, 0, 0, 0.35) !important;
    overflow:         hidden !important;       /* contain any icon bleed */
    min-width:        0;
}

/* Individual icon links — forced black on white */
.footer-social-icon {
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    width:            48px !important;
    height:           48px !important;
    min-width:        48px !important;
    color:            #111111 !important;       /* black icons */
    font-size:        1.1rem !important;
    text-decoration:  none !important;
    background:       transparent !important;
    border:           none !important;
    border-radius:    9999px !important;
    flex-shrink:      0 !important;
    transition:       background 0.15s ease !important;
    line-height:      1 !important;
}

/* Ensure the <i> icon inherits the black colour */
.footer-social-icon i,
.footer-social-icon svg {
    color:     inherit !important;
    fill:      currentColor;
    font-size: inherit !important;
}

/* Hover: light grey tint, keep icons black */
.footer-social-icon:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    color:            #000000 !important;
    transform:        none !important;
    box-shadow:       none !important;
    border:           none !important;
}

/* An icon with no configured URL must not be shown.
   Both body.php (style="display:none") and app-legacy.js
   (link.style.display = 'none') already try to hide these, but
   `display: flex !important` above outranks an inline style, so both were
   defeated and TikTok and LinkedIn rendered as icons linking to "#".
   Two social buttons that go nowhere read as an unfinished site.
   Set the URL in Admin -> Settings -> Social Accounts and the icon appears. */
.footer-social-icon[href="#"],
.footer-social-icon[href=""],
.footer-social-icon:not([href]) {
    display: none !important;
}

/* Hairline dividers between icons */
.footer-social-icon + .footer-social-icon {
    border-left: 1px solid rgba(0, 0, 0, 0.10) !important;
}

/* Mobile */
@media (max-width: 480px) {
    .footer-social-icon {
        width:     42px !important;
        height:    42px !important;
        min-width: 42px !important;
        font-size: 1rem !important;
    }
    .footer-social-bar { padding-bottom: 2rem !important; margin-bottom: 2rem !important; }
}

/* ================================================================
   GRID & LOGO POLISH
   5-col featured grid · 3-col shop grid (desktop) · Larger logo
   ================================================================ */

/* -- GRID OVERFLOW ROOT FIX ------------------------------------ */
/* Stage 5 set overflow:visible on .product-card, allowing images
   and content to bleed outside the cell boundary and visually
   overlap adjacent cards. Restoring overflow:hidden fixes this.
   min-width:0 stops CSS grid auto-sizing from expanding cells.   */

.product-card {
    overflow:  hidden !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.home-featured-grid,
.products-grid {
    overflow:   clip;       /* prevent scroll-context side effects */
    min-width:  0;
    box-sizing: border-box;
}

.home-featured-grid > *,
.products-grid > * {
    min-width:  0;
    max-width:  100%;
    overflow:   hidden;
    box-sizing: border-box;
}

.product-image,
.product-img,
.product-image-content,
.product-img img {
    max-width:  100% !important;
    width:      100% !important;
    min-width:  0 !important;
    overflow:   hidden;
    display:    block;
}

/* -- FEATURED PRODUCTS GRID: 5 desktop · 2 mobile ------------- */
.home-featured-grid {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   1rem !important;
    margin-bottom:         3rem !important;
    width:                 100%;
    box-sizing:            border-box;
}

@media (min-width: 640px) {
    .home-featured-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (min-width: 1024px) {
    .home-featured-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1rem !important;
    }
}

@media (min-width: 1440px) {
    .home-featured-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1.25rem !important;
    }
}

@media (max-width: 380px) {
    .home-featured-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* -- SHOP PRODUCTS GRID: 3 desktop · 2 mobile ----------------- */
/* !important overrides the inline repeat(4,1fr) at 1200px       */
.products-grid:not(.home-featured-grid):not(.pm-related-grid) {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   1.25rem !important;
    box-sizing:            border-box;
}

@media (min-width: 768px) {
    .products-grid:not(.home-featured-grid):not(.pm-related-grid) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (min-width: 900px) {
    .products-grid:not(.home-featured-grid):not(.pm-related-grid) {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.75rem !important;
    }
}

@media (min-width: 1200px) {
    .products-grid:not(.home-featured-grid):not(.pm-related-grid) {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
}

/* -- LOGO: larger image, header height unchanged --------------- */
/* Desktop: 62px logo inside 72px header (5px top/bottom margin) */
.logo-image,
header .logo-image {
    height: 62px !important;
    width:  62px !important;
}

/* Mobile: 52px logo */
@media (max-width: 1023px) {
    .logo-image,
    header .logo-image {
        height: 52px !important;
        width:  52px !important;
    }
}

@media (max-width: 767px) {
    .logo-image,
    header .logo-image {
        height: 48px !important;
        width:  48px !important;
    }
}

/* ================================================================
   HERO FULL-VIEWPORT · STORY CARD PADDING · FOOTER QUICK-LINKS
   ================================================================ */

/* -- 1. HERO: fills from below header to screen bottom (desktop) - */
@media (min-width: 1024px) {
    .hero {
        margin-top:     var(--header-height) !important;
        min-height:     calc(100dvh - var(--header-height)) !important;
        height:         calc(100dvh - var(--header-height)) !important;
        padding-top:    0 !important;
        padding-bottom: 5rem !important;
    }

    /* Remove the extra top-margin gap between hero and featured products */
    #mainContent:has(#homePage.active) {
        margin-top: 0 !important;
    }
}

/* Tablet: comfortable height without hard-locking to 100dvh */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero {
        margin-top:  var(--header-height) !important;
        min-height:  calc(92dvh - var(--header-height)) !important;
        padding-top: 0 !important;
    }

    #mainContent:has(#homePage.active) {
        margin-top: 0 !important;
    }
}

/* Mobile: keep existing behaviour but also clear the header */
@media (max-width: 767px) {
    .hero {
        margin-top:  var(--header-height) !important;
        padding-top: 0 !important;
        min-height:  88dvh !important;
    }

    #mainContent:has(#homePage.active) {
        margin-top: 0 !important;
    }
}

/* -- 2. STORY CARD: horizontal breathing room ------------------ */
.home-story-section .story-card {
    padding-left:  2rem !important;
    padding-right: 2rem !important;
    padding-top:   2rem !important;
    padding-bottom: 2rem !important;
    background:    var(--white) !important;
    border:        1px solid var(--medium-gray) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow:    var(--shadow-sm) !important;
}

@media (max-width: 640px) {
    .home-story-section .story-card {
        padding-left:  1.25rem !important;
        padding-right: 1.25rem !important;
    }
}


/* -- 4. FOOTER QUICK-LINKS: nav-link class normalised in footer - */
/* Company links now have class="nav-link" for showPage() routing.
   Override nav-link header styles so they look correct in footer. */
footer .footer-section ul li a.nav-link {
    display:          block !important;
    justify-content:  unset !important;
    padding:          0 !important;
    min-height:       unset !important;
    font-size:        0.78rem !important;
    font-weight:      400 !important;
    letter-spacing:   0 !important;
    text-transform:   none !important;
    text-decoration:  none !important;
    background:       transparent !important;
    border:           none !important;
    border-radius:    0 !important;
    color:            rgba(255,255,255,0.85) !important;
    text-shadow:      none !important;
}

footer .footer-section ul li a.nav-link:hover {
    color:      var(--accent-gold) !important;
    background: transparent !important;
    transform:  translateX(3px);
    border:     none !important;
    text-decoration: none !important;
}

footer .footer-section ul li a.nav-link.active {
    color:          rgba(255,255,255,0.85) !important;
    background:     transparent !important;
    text-decoration: none !important;
    font-weight:    400 !important;
}

/* ================================================================
   FINAL POLISH — Always-white header & footer spacing
   ================================================================ */

/* -- HEADER: solid white at all times -------------------------- */
header,
header.scrolled {
    background:             rgba(255, 255, 255, 0.98) !important;
    border-bottom:          1px solid var(--medium-gray) !important;
    backdrop-filter:        blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition:             border-color var(--transition-base) !important;
}

/* Logo — always dark-branded */
.logo-text,
header .logo-text,
header.scrolled .logo-text {
    color:       var(--text-dark) !important;
    text-shadow: none !important;
}

.logo-text span,
header .logo-text span,
header.scrolled .logo-text span {
    color:       var(--accent-gold) !important;
    text-shadow: none !important;
}

/* -- NAV LINKS: always dark, no white pill ---------------------- */
.nav-link,
header .nav-link,
header.scrolled .nav-link {
    color:       var(--text-dark) !important;
    text-shadow: none !important;
    background:  transparent !important;
    border:      none !important;
}

.nav-link:hover,
header .nav-link:hover,
header.scrolled .nav-link:hover {
    color:      var(--accent-gold) !important;
    background: transparent !important;
    border:     none !important;
}

/* Active state: dark underline only — no white pill background */
.nav-link.active,
header .nav-link.active,
header.scrolled .nav-link.active {
    color:                     var(--text-dark) !important;
    background:                transparent !important;
    border:                    none !important;
    font-weight:               700 !important;
    text-decoration:           underline !important;
    text-underline-offset:     4px !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color:     var(--text-dark) !important;
}

/* -- ICON BUTTONS: always dark --------------------------------- */
.icon-btn,
.header-action-pill,
header .icon-btn,
header .header-action-pill,
header.scrolled .icon-btn,
header.scrolled .header-action-pill {
    color: var(--text-dark) !important;
}

.icon-btn:hover,
header .icon-btn:hover {
    background: var(--light-gray) !important;
    color:      var(--text-dark) !important;
}

/* -- MOBILE ACTIONS: always dark ------------------------------- */
.mobile-actions .icon-btn,
header .mobile-actions .icon-btn,
header.scrolled .mobile-actions .icon-btn {
    color: var(--text-dark) !important;
}

/* -- HAMBURGER BARS: always dark ------------------------------- */
.mobile-menu-toggle .bar,
header .mobile-menu-toggle .bar,
header.scrolled .mobile-menu-toggle .bar {
    background: var(--text-dark) !important;
    box-shadow: none !important;
}

/* When drawer is open, bars stay dark (already on white page bg) */
.mobile-menu-toggle.active .bar {
    background: var(--text-dark) !important;
}

/* Header actions border — always uses medium gray */
.header-actions {
    border-left-color: var(--medium-gray) !important;
}

/* -- FOOTER: improved vertical spacing ------------------------- */
footer {
    padding-top:    4rem !important;
    padding-bottom: 2.5rem !important;
}

/* Column grid gap — more breathing room between columns */
.footer-content {
    gap:           2.5rem 2rem !important;
    margin-bottom: 2.5rem !important;
}

/* Section heading — more space below before list starts */
.footer-section h3 {
    margin-bottom:  1.25rem !important;
    padding-bottom: 0.625rem !important;
    border-bottom:  1px solid rgba(255,255,255,0.08) !important;
}

/* List items — larger vertical gap between links */
.footer-section ul {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
}

.footer-section ul li {
    margin-bottom: 0 !important;
    line-height:   1.5;
}

/* Footer description — more margin below */
.footer-description {
    margin-bottom: 1.25rem !important;
    line-height:   1.75 !important;
}

/* Social links — more spacing between icons */
.social-links {
    gap:        0.625rem !important;
    margin-top: 1rem !important;
}

/* Footer bottom divider — more breathing room */
.footer-bottom {
    border-top:  1px solid rgba(255,255,255,0.1) !important;
    padding-top: 1.75rem !important;
    margin-top:  0 !important;
}

.footer-bottom .copyright p {
    font-size:   0.78rem !important;
    line-height: 1.65 !important;
    opacity:     0.65 !important;
}

/* Mobile footer spacing */
@media (max-width: 640px) {
    footer          { padding-top: 3rem !important; padding-bottom: 2rem !important; }
    .footer-content { gap: 2rem 1.25rem !important; margin-bottom: 2rem !important; }
    .footer-section h3 { margin-bottom: 0.875rem !important; }
}

/* ================================================================
   STAGE 10 — VISUAL CONSISTENCY, UX HARMONIZATION & BRAND COHESION
   One design system across every page, section, and component.
   ================================================================ */

/* -- 1. FOOTER — newsletter removed, 4-column grid ------------ */
.footer-content {
    grid-template-columns: 2fr 1fr 1fr 1fr;
}

@media (max-width: 1100px) {
    .footer-content { grid-template-columns: 1fr 1fr 1fr; }
    .footer-section.footer-main { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .footer-content { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .footer-section.footer-main { grid-column: 1 / -1; }
}

@media (max-width: 400px) {
    .footer-content { grid-template-columns: 1fr; }
}

/* Footer link hover — consistent gold accent */
.footer-section ul li a:hover,
footer .footer-links a:hover { color: var(--accent-gold) !important; opacity: 1 !important; }

/* -- 2. INNER PAGE HEROES — editorial style, unified ----------- */
/* All inner page heroes (blog, supplements, legal, community) get the
   same clean white editorial treatment as the Stage 5 shop header.   */

/* Base overrides — strip heavy gradient + SVG pattern */
.blog-hero,
.supplements-hero,
.legal-hero {
    background:   var(--white) !important;
    color:        var(--text-dark) !important;
    border-bottom: 1px solid var(--medium-gray);
    padding-top:    5rem !important;
    padding-bottom: 3rem !important;
    text-align:     center;
}

/* Kill the SVG pattern overlays — all inner page heroes */
.blog-hero::before,
.supplements-hero::before,
.legal-hero::before,
.community-hero::before {
    display: none !important;
    background-image: none !important;
}

/* Community hero — white editorial, matching all other inner page heroes */
.community-hero {
    background:     var(--white) !important;
    color:          var(--text-dark) !important;
    border-bottom:  1px solid var(--medium-gray) !important;
    min-height:     0 !important;
    padding-top:    3.5rem !important;
    padding-bottom: 1.5rem !important;
}

.community-hero .page-hero-content {
    padding: 1.25rem 1rem 0.75rem;
}

.community-hero::before { display: none !important; background-image: none !important; }

.community-hero-content::before { display: none !important; content: none !important; }

.community-hero .dp-eyebrow {
    color: var(--accent-gold);
}

.blog-hero-content::before {
    content:        'Blog';
    display:        block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.875rem;
}

.supplements-hero-content::before {
    content:        'Help & Care';
    display:        block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.875rem;
}

.legal-hero-content::before {
    content:        'Policies';
    display:        block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.875rem;
}

/* -- 4. INNER HERO TYPOGRAPHY — editorial serif ---------------- */
.blog-hero-title,
.supplements-hero-title,
.legal-hero-title,
.community-hero h1 {
    font-family:    'Playfair Display', Georgia, serif !important;
    font-weight:    400 !important;
    font-size:      clamp(1.75rem, 4vw, 2.5rem) !important;
    letter-spacing: -0.01em !important;
    line-height:    1.15 !important;
    color:          var(--text-dark) !important;
    margin-bottom:  0.875rem !important;
}

/* Community hero titles — dark on white background */
.community-hero h1 { color: var(--text-dark) !important; }

.blog-hero-subtitle,
.supplements-hero-subtitle,
.legal-hero-subtitle {
    font-size:   0.92rem !important;
    line-height: 1.7 !important;
    color:       var(--text-light) !important;
    font-weight: 400 !important;
    max-width:   560px;
    margin-left:  auto !important;
    margin-right: auto !important;
}

/* -- 5. TYPOGRAPHY — global consistency fixes ------------------ */
/* Price amount — use neutral dark, not brown */
.price-amount { color: var(--text-dark) !important; }

/* Community hero subtitle — dark on white background */
.community-hero p {
    font-size:   0.92rem !important;
    line-height: 1.7 !important;
    color:       var(--text-light) !important;
}

/* Blog section heading */
.blog-section .section-title {
    font-family:    'Playfair Display', Georgia, serif;
    font-weight:    400;
    letter-spacing: -0.01em;
}

/* -- 6. CARE CARDS — border colour to neutral ------------------ */
.care-card {
    border:     1px solid var(--medium-gray) !important;
    box-shadow: var(--shadow-sm) !important;
}

.care-card:hover {
    box-shadow: var(--shadow-md) !important;
}

/* -- 7. FAQ SECTION — consistent background -------------------- */
.faqs-section {
    background:    var(--light-gray);
    border-top:    1px solid var(--medium-gray);
    border-bottom: 1px solid var(--medium-gray);
}

/* -- 8. COMMUNITY CTA — light background ---------------------- */
.community-cta-section {
    text-align:     center;
    padding-top:    4rem;
    padding-bottom: 4rem;
    background:     #f2ede8;   /* same warm linen as footer */
    border-top:     1px solid var(--medium-gray);
    border-bottom:  1px solid var(--medium-gray);
}

.community-cta-section h3 {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      clamp(1.5rem, 3vw, 2rem);
    font-weight:    400;
    color:          var(--text-dark);
    margin-bottom:  0.75rem;
    letter-spacing: -0.01em;
}

.community-cta-section p {
    color:         var(--text-light);
    font-size:     0.92rem;
    margin-bottom: 2rem;
}

.community-cta-section .btn {
    background:     var(--text-dark) !important;
    color:          var(--white) !important;
    border:         1.5px solid var(--text-dark) !important;
    border-radius:  0 !important;
    letter-spacing: 0.1em !important;
    font-size:      0.72rem !important;
    text-transform: uppercase !important;
}
.community-cta-section .btn:hover {
    background:   var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
}

.community-cta-section .btn i { display: none !important; }

.community-cta-section .btn:hover {
    background:   rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.85) !important;
}

/* -- 9. COMMUNITY STATS — consistent card style ---------------- */
.community-stat-card {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm);
}

.community-stat-card:hover {
    box-shadow:   var(--shadow-md);
    border-color: rgba(21,21,21,0.12);
    transform:    translateY(-2px);
}

/* -- 10. LEGAL SECTION — readable content area ----------------- */
.legal-section {
    padding-top:    4rem;
    padding-bottom: 5rem;
}

.legal-content {
    max-width:   800px;
    margin:      0 auto;
    font-size:   0.95rem;
    line-height: 1.75;
    color:       var(--text-dark);
}

.legal-content h2,
.legal-content h3 {
    font-family:    'Playfair Display', Georgia, serif;
    font-weight:    400;
    color:          var(--text-dark);
    margin-top:     2rem;
    margin-bottom:  0.875rem;
}

.legal-content p   { margin-bottom: 1rem; color: var(--text-light); }
.legal-content ul,
.legal-content ol  { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-content li  { margin-bottom: 0.5rem; color: var(--text-light); line-height: 1.7; }

/* Legal content sections (generated by displayLegalPage) */
.legal-item           { margin-bottom: 2rem; }
.legal-item-heading   {
    font-family:    'Playfair Display', Georgia, serif;
    font-weight:    600;
    font-size:      1.05rem;
    color:          var(--text-dark);
    margin-bottom:  0.75rem;
}
.legal-item-body p    { margin-bottom: 0.875rem; color: var(--text-light); line-height: 1.75; }

/* -- 11. BLOG CARDS — restore original horizontal layout ------- */
/* Original design: single-column list of horizontal cards.
   Image panel (280px) on the left, content on the right.
   Stage 10 accidentally converted these to a multi-column
   vertical grid — reverting to the original flex layout.        */

.updates-grid {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

.update-card {
    display:        flex !important;
    flex-direction: column !important;   /* mobile: vertical */
    background:     var(--white);
    border:         1px solid var(--medium-gray) !important;
    border-radius:  var(--radius-xl) !important;
    overflow:       hidden;
    box-shadow:     var(--shadow-sm) !important;
    transition:     transform var(--transition-base), box-shadow var(--transition-base);
}

@media (min-width: 768px) {
    .update-card {
        flex-direction: row !important;   /* desktop: horizontal */
    }
}

/* Left panel: fixed-width image */
.update-card-image {
    position:   relative;
    width:      100%;
    height:     200px;
    flex-shrink: 0;
    overflow:   hidden;
}

@media (min-width: 768px) {
    .update-card-image {
        width:      280px !important;
        height:     auto !important;
        min-height: 180px;
    }
}

.update-card-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    /* NO aspect-ratio — image fills panel height */
    transition: transform var(--transition-slow);
}

/* Right panel: content */
.update-card-body {
    display:         flex;
    flex:            1;
    flex-direction:  column;
    justify-content: center;
    gap:             0.5rem;
    padding:         1.4rem 1.75rem;
    border-left:     3px solid rgba(27, 67, 50, 0.12);
}

.update-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 14px 36px rgba(11, 31, 23, 0.13) !important;
    border-color: rgba(27, 67, 50, 0.15) !important;
}

.update-card-title {
    font-size:   0.98rem;
    font-weight: 700;
    color:       var(--text-dark);
    line-height: 1.35;
    transition:  color var(--transition-fast);
    font-family: inherit !important;   /* keep Montserrat, not Playfair */
    letter-spacing: 0 !important;
}

.update-card:hover .update-card-title { color: var(--primary-brown); }

.update-card-copy {
    color:       var(--text-light);
    font-size:   0.82rem;
    line-height: 1.65;
}

.update-card-date {
    font-size:      0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--text-light);
}

.update-platform {
    display:        inline-flex;
    align-items:    center;
    padding:        3px 9px;
    border-radius:  var(--radius-full);
    background:     rgba(27, 67, 50, 0.08);
    font-size:      0.68rem;
    font-weight:    700;
    color:          var(--primary-brown);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* -- 12. CONTACT AT BOTTOM — reduced visual weight ------------- */
/* Contact is now secondary content (bottom of homepage).
   It retains full functionality but is visually compressed. */
#contact {
    background:     var(--light-gray);
    border-top:     1px solid var(--medium-gray);
    padding-top:    2.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Root cause of "extra space at bottom of form":
   CSS Grid default align-items:stretch makes the form cell match
   the taller contact-cards cell height, leaving a gap below the
   submit button. Setting start prevents that stretching.          */
#contact .contact-content {
    align-items: start !important;
}

/* Also prevent individual grid cells from stretching */
#contact .contact-info,
#contact .contact-form {
    align-self: start !important;
}

/* Shop locations section — visible */
.shop-locations-contact {
    display: block;
}

#contact .section-title {
    font-size:   clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 400;
}

/* -- 13. SECTION SPACING CONSISTENCY --------------------------- */
/* All major sections across all pages share the same vertical rhythm */
.care-section,
.faqs-section,
.blog-section,
.community-stats-section,
.award-section,
.community-stories-section,
.community-gallery-section {
    padding-top:    4rem;
    padding-bottom: 4rem;
}

.supplements-hero,
.blog-hero,
.legal-hero {
    /* already handled above — belt-and-suspenders */
}

/* -- 14. BUTTON SYSTEM — final consistency pass ---------------- */
/* Ensure no brown gradient bleeds through on any page */
.btn-primary {
    background:    var(--text-dark) !important;
    color:         #fff !important;
    border-color:  var(--text-dark) !important;
    border-radius: var(--radius-md) !important;
    box-shadow:    none !important;
    background-image: none !important;
}

.btn-primary:hover {
    background:   #333 !important;
    border-color: #333 !important;
    box-shadow:   none !important;
    transform:    none !important;
}

/* Outline variant — clean and consistent */
.btn-outline {
    background:    transparent !important;
    color:         var(--text-dark) !important;
    border:        1.5px solid var(--medium-gray) !important;
    box-shadow:    none !important;
    border-radius: var(--radius-md) !important;
    background-image: none !important;
}

.btn-outline:hover {
    background:   var(--light-gray) !important;
    border-color: rgba(21,21,21,0.3) !important;
    color:        var(--text-dark) !important;
    transform:    none !important;
    box-shadow:   none !important;
}

/* Secondary variant */
.btn-secondary {
    background:    var(--white) !important;
    color:         var(--text-dark) !important;
    border:        1.5px solid var(--medium-gray) !important;
    box-shadow:    none !important;
    border-radius: var(--radius-md) !important;
}

.btn-secondary:hover {
    background:   var(--light-gray) !important;
    border-color: rgba(21,21,21,0.3) !important;
    transform:    none !important;
    box-shadow:   none !important;
}

/* Exception: hero CTA buttons keep transparent/white treatment */
.hero-actions .btn-primary {
    background:    rgba(255,255,255,0.95) !important;
    color:         var(--text-dark) !important;
    border-color:  rgba(255,255,255,0.95) !important;
    border-radius: 0 !important;
}

.hero-actions .btn-primary:hover {
    background:   #fff !important;
    border-color: #fff !important;
}

.hero-actions #heroBtn2 {
    background:    transparent !important;
    color:         #fff !important;
    border:        1.5px solid rgba(255,255,255,0.55) !important;
    border-radius: 0 !important;
}

/* -- 15. FORM CONSISTENCY — final global pass ------------------ */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    border:        1px solid var(--medium-gray) !important;
    border-radius: var(--radius-md) !important;
    font-size:     0.88rem !important;
    padding:       0.6rem 0.875rem !important;
    min-height:    44px !important;
    background:    var(--white) !important;
    color:         var(--text-dark) !important;
    transition:    border-color var(--transition-fast) !important;
    box-shadow:    none !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--text-dark) !important;
    box-shadow:   0 0 0 2px rgba(21,21,21,0.06) !important;
    outline:      none !important;
}

/* Suppress checkbox/radio overrides (use accent-color only) */
input[type="checkbox"],
input[type="radio"] {
    min-height:    unset !important;
    padding:       0 !important;
    border:        none !important;
    border-radius: unset !important;
    background:    unset !important;
    box-shadow:    none !important;
}

/* -- 16. IMAGE CONSISTENCY — uniform treatment ----------------- */
/* Consistent image card frame across collections, blog, gallery */
.gallery-item {
    overflow:      hidden;
    border-radius: var(--radius-md);
    background:    var(--light-gray);
}

.gallery-item img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 0.5s ease-out;
}

.gallery-item:hover img { transform: scale(1.03); }

/* Gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* -- 17. MOBILE CONSISTENCY — inner pages ----------------------- */
@media (max-width: 767px) {
    /* Inner page heroes — consistent mobile padding */
    .blog-hero,
    .supplements-hero,
    .legal-hero {
        padding-top:    3rem !important;
        padding-bottom: 2.5rem !important;
    }

    .community-hero {
        padding-top:    3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Care cards stack on mobile */
    .care-section,
    .faqs-section,
    .blog-section,
    .community-stats-section,
    .award-section,
    .community-stories-section,
    .community-gallery-section {
        padding-top:    2.5rem;
        padding-bottom: 2.5rem;
    }

    /* Blog grid — single column on phone */
    .updates-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Legal content — comfortable reading on phone */
    .legal-content {
        font-size: 0.88rem;
    }

    .legal-section {
        padding-top:    2.5rem;
        padding-bottom: 3rem;
    }

    /* Gallery grid */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- 18. NAV LINK STYLE — consistent active/hover -------------- */
/* Ensure footer nav links don't inherit .nav-link pill treatment */
.footer-section ul li a.nav-link {
    justify-content:  flex-start;
    padding:          0;
    min-height:       unset;
    font-weight:      400 !important;
    font-size:        0.78rem !important;
    border-radius:    0;
    border:           none;
    text-shadow:      none;
    background:       transparent !important;
    color:            rgba(255,255,255,0.85) !important;
}

.footer-section ul li a.nav-link:hover {
    background:   transparent !important;
    color:        var(--accent-gold) !important;
    border:       none !important;
}

.footer-section ul li a.nav-link.active {
    background:     transparent !important;
    border-color:   transparent !important;
    font-weight:    400 !important;
}

/* -- 19. SECTION LABEL / CHIP CONSISTENCY ---------------------- */
/* Ensure all section eyebrow chips use same treatment */
.section-label,
.section-tag,
.section-chip,
.shop-eyebrow,
.blog-hero-content::before,
.supplements-hero-content::before,
.legal-hero-content::before {
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

/* -- 20. SECTION HEADER TEXT ALIGN — inner pages --------------- */
.blog-section .section-header,
.care-section .section-header,
.faqs-section .section-header,
.community-stats-section .section-header,
.award-section .section-header,
.community-stories-section .section-header,
.community-gallery-section .section-header {
    text-align: center;
}

/* -- 21. STORY CARD — boundary invisible (all contexts) ------- */
.story-card,
.home-story-section .story-card,
.story-section .story-card {
    border:     none !important;
    box-shadow: none !important;
    outline:    none !important;
}

/* -- 23. AWARD SECTION — consistent card ----------------------- */
.award-card {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm);
}

.award-card:hover {
    box-shadow:  var(--shadow-md);
    transform:   translateY(-2px);
}

/* -- 24. NOTIFCATION TOAST — consistent design token ----------- */
.notification {
    border-radius: var(--radius-md);
    border:        1px solid var(--medium-gray);
    box-shadow:    var(--shadow-lg);
    background:    var(--white);
    color:         var(--text-dark);
}

.notification.success i { color: #28a745; }
.notification.error   i { color: #dc3545; }
.notification.info    i { color: #17a2b8; }

/* -- 25. ACCESSIBILITY — focus-visible on links ---------------- */
a:focus-visible {
    outline:        2px solid var(--text-dark);
    outline-offset: 2px;
    border-radius:  2px;
}

/* -- Print safety ----------------------------------------------- */
@media print {
    .blog-hero::before,
    .supplements-hero::before,
    .legal-hero::before { display: none !important; }
}

/* ================================================================
   STAGE 8 — MOBILE OPTIMIZATION, RESPONSIVE POLISH & PERFORMANCE
   No new features. Surgical refinement only.
   ================================================================ */

/* -- 1. Horizontal overflow prevention ------------------------- */
html, body {
    overflow-x: hidden;
    max-width:  100%;
}

/* -- 2. Touch targets: minimum 44px on all interactive controls - */
/* Quantity buttons in product modal */
.pm-qty-selector .quantity-btn {
    width:  44px !important;
    height: 44px !important;
}

.pm-qty-selector .quantity-input {
    width:       48px;
    height:      44px !important;
    line-height: 44px;
}

/* Quantity buttons in cart item */
.quantity-control .quantity-btn {
    width:       36px !important;
    height:      36px !important;
    min-width:   36px;
    min-height:  36px;
}

.quantity-control .quantity {
    line-height: 36px !important;
    display:     inline-block;
}

/* Remove button — needs visual tap area */
.remove-btn {
    min-width:       44px;
    min-height:      44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* Close buttons */
.pm-close-btn  { min-width: 40px; min-height: 40px; }
.cart-close-btn { min-width: 40px; min-height: 40px; }

/* Mobile menu toggle */
.mobile-menu-toggle {
    min-width:  44px;
    min-height: 44px;
}

/* Category filter buttons */
.category-nav-btn {
    min-height: 36px;
    padding:    0.45rem 1rem;
}

/* -- 3. Overflow containment for animated sections ------------- */
/* overflow:clip clips visually like hidden but does NOT create a
   scroll container — vertical touch swipes pass through to the page.
   overflow:hidden on these sections was trapping touch events. */
.home-collections-section { overflow: clip; }
.home-impact-section      { overflow: clip; }

/* -- 4. Scroll padding respects sticky category nav ----------- */
html {
    scroll-padding-top: calc(var(--header-height) + 56px);
}

/* -- 5. Image safety ------------------------------------------- */
img { max-width: 100%; }

/* Fixed-dimension images must keep their height */
.logo-image,
.footer-logo-image,
.pm-image img,
.product-image-content { height: 100% !important; }

/* -- 6. Number input: remove spinners (cross-browser) ----------- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] { -moz-appearance: textfield; }

/* -- 7. Reduced motion: extend to Stage 6-7 animations ---------- */
@media (prefers-reduced-motion: reduce) {
    .pm-panel,
    .modal-content { animation: none !important; }

    @keyframes pmSlideIn        { from, to { opacity: 1; transform: none; } }
    @keyframes heroScrollBounce { from, to { transform: none; } }
    /* craftScroll animation removed — carousel is now user-controlled */
}

/* -- 8. Typography Playfair consistency ------------------------ */
.pm-name, .shop-header-title, .home-newsletter-title,
.pm-related-title, .cart-modal-title-group h2,
.checkout-modal-header h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}

/* ================================================================
   TABLET SECTION SPACING (768–1023px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .home-featured-section,
    .home-story-section,
    .home-impact-section,
    .home-newsletter-section,
    .about,
    .products-section {
        padding-top:    4rem;
        padding-bottom: 4rem;
    }

    .home-collections-section {
        padding-top:    4rem;
        padding-bottom: 2rem;
    }

    /* Product grid at tablet */
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.75rem !important; }

    /* Cart two-column at tablet still works (checks out) */
    .cart-content { grid-template-columns: 1fr 300px; }
}

/* ================================================================
   MOBILE 767px AND BELOW
   ================================================================ */
@media (max-width: 767px) {

    /* Shop header ----------------------------------------------- */
    .shop-header-section {
        padding-top:    3rem;
        padding-bottom: 2rem;
    }

    .shop-header-title  { font-size: clamp(1.5rem, 7vw, 2rem); }
    .shop-eyebrow       { margin-bottom: 0.5rem; }

    /* Products section ------------------------------------------- */
    .products-section {
        padding-top:    2rem;
        padding-bottom: 4rem;
    }

    .products-header {
        margin-bottom: 1.5rem;
        gap:           0.75rem;
    }

    .products-title { font-size: 0.95rem; letter-spacing: 0; }

    /* Collections section --------------------------------------- */
    .home-collections-section {
        padding-bottom: 2rem !important;
    }

    /* Contact at bottom of homepage ----------------------------- */
    #homePage .contact {
        padding-top:    2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Cart modal on mobile: scrollable -------------------------- */
    .cart-modal {
        max-height:     95vh;
        overflow-y:     auto;
        flex-direction: column;
    }

    .cart-modal .modal-body {
        overflow-y:             auto;
        -webkit-overflow-scrolling: touch;
        max-height:             none;
        flex:                   none;
    }

    .cart-summary {
        padding-bottom: 5rem; /* buffer for mobile browser chrome */
    }

    /* Nav links in mobile drawer: larger tap targets */
    .main-nav ul { padding-top: 0.5rem; }

    /* Hamburger accessibility size */
    .mobile-menu-toggle { min-width: 44px; min-height: 44px; }
}

/* ================================================================
   SMALL MOBILE 480px AND BELOW
   ================================================================ */
@media (max-width: 480px) {
    /* Shop header ----------------------------------------------- */
    .shop-header-section { padding-top: 2.5rem; padding-bottom: 1.75rem; }
    .shop-header-title   { font-size: clamp(1.375rem, 8vw, 1.75rem); }

    /* Checkout form: single column ------------------------------ */
    .form-row { grid-template-columns: 1fr !important; gap: 0; }

    /* Checkout body padding */
    .checkout-modal .modal-body { padding: 1.25rem; }

    /* Place Order button slightly larger */
    #placeOrderBtn { min-height: 52px; font-size: 0.82rem !important; }

    /* Home story: tighter paragraph ----------------------------- */
    .home-story-section #aboutStoryP1 { font-size: 0.88rem !important; }

    /* Newsletter form: always stacked */
    .home-newsletter-form { flex-direction: column; gap: 0.625rem; }

    /* Impact numbers slightly smaller */
    .home-impact-number { font-size: clamp(1.875rem, 9vw, 3rem) !important; }
}

/* ================================================================
   VERY SMALL 380px AND BELOW
   ================================================================ */
@media (max-width: 380px) {
    /* Single-column product grids */
    .products-grid,
    .home-featured-grid {
        grid-template-columns: 1fr !important;
        gap:                   1.5rem !important;
    }

    /* Hero CTA fits the screen */
    #heroBtn2 {
        padding:        0.7rem 1.25rem !important;
        font-size:      0.66rem !important;
        letter-spacing: 0.09em !important;
    }

    /* Product modal info column */
    .pm-info-col {
        padding: 1.25rem 1rem 2.5rem !important;
    }

    .pm-name    { font-size: 1.25rem !important; }
    .pm-price   { font-size: 1.375rem !important; }
    .pm-trust   { gap: 0.75rem; }
    .pm-related { padding: 1.5rem 1rem 2.5rem; }

    /* Cart item tighter at 320px */
    .cart-item        { grid-template-columns: 54px 1fr auto !important; gap: 0.625rem !important; }
    .cart-item-image  { width: 54px !important; height: 54px !important; }

    /* Footer single column */
    .footer-content { grid-template-columns: 1fr !important; }

    /* Craft cards slightly smaller */
    .craft-grid .craft-card {
        width:      185px !important;
        min-height: 270px !important;
    }
}

/* ================================================================
   STAGE 7 — CART & CHECKOUT TRANSFORMATION
   Premium purchasing experience. All JS IDs & class selectors
   preserved. CSS-first approach.
   ================================================================ */

/* -- Cart modal sizing ----------------------------------------- */
.cart-modal {
    max-width:  900px;
    max-height: 90vh;
    overflow:   hidden;
    display:    flex;
    flex-direction: column;
}

.cart-modal::before { display: none !important; }

/* -- Cart modal header ----------------------------------------- */
.cart-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.25rem 1.75rem;
    border-bottom:   1px solid var(--medium-gray);
    flex-shrink:     0;
    background:      var(--white);
    position:        sticky;
    top:             0;
    z-index:         2;
}

.cart-modal-title-group {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.cart-modal-title-group h2 {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      1.125rem;
    font-weight:    400;
    color:          var(--text-dark);
    margin:         0;
    letter-spacing: -0.01em;
}

.cart-modal-title-group .items-count {
    font-size:   0.72rem;
    font-weight: 500;
    color:       var(--text-muted);
    background:  var(--light-gray);
    padding:     2px 8px;
    border-radius: var(--radius-full);
}

.cart-close-btn {
    width:           32px;
    height:          32px;
    background:      transparent;
    border:          none;
    color:           var(--text-muted);
    cursor:          pointer;
    font-size:       0.8rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    transition:      background var(--transition-fast), color var(--transition-fast);
    flex-shrink:     0;
}

.cart-close-btn:hover { background: var(--light-gray); color: var(--text-dark); }

/* -- Cart modal body ------------------------------------------- */
.cart-modal .modal-body {
    flex:       1;
    min-height: 0;
    overflow:   hidden;
    padding:    0;
}

/* -- Cart content: two-column grid ---------------------------- */
.cart-content {
    display:             grid;
    grid-template-columns: 1fr 320px;
    height:              100%;
    min-height:          400px;
    max-height:          calc(90vh - 70px);
}

/* Cart empty spans both columns */
.cart-empty {
    grid-column: 1 / -1;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     5rem 2rem;
    flex-direction: column;
    text-align:  center;
}

/* Items column */
.cart-items-section {
    border-right:  1px solid var(--medium-gray);
    overflow-y:    auto;
    padding:       1.5rem;
    max-height:    none;
}

/* -- Cart items (JS-generated, CSS only) ----------------------- */
.cart-items {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.cart-item {
    display:               grid;
    grid-template-columns: 72px 1fr auto;
    gap:                   1rem;
    align-items:           center;
    padding:               1.125rem 0;
    border-bottom:         1px solid var(--medium-gray);
    background:            transparent;
    border:                none;
    border-bottom:         1px solid var(--medium-gray);
    border-radius:         0;
    box-shadow:            none;
    transition:            none;
}

.cart-item:last-child { border-bottom: none; }
.cart-item:hover { transform: none; box-shadow: none; border-color: var(--medium-gray); }

.cart-item-image {
    width:               72px;
    height:              72px;
    border-radius:       var(--radius-md);
    background-size:     cover;
    background-position: center;
    background-color:    var(--light-gray);
    border:              1px solid var(--medium-gray);
    flex-shrink:         0;
}

.cart-item-details {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    min-width:      0;
}

.cart-item-name {
    font-size:     0.88rem;
    font-weight:   600;
    color:         var(--text-dark);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.cart-item-meta {
    font-size:     0.72rem;
    color:         var(--text-muted);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.cart-item-price {
    font-size:   0.88rem;
    font-weight: 600;
    color:       var(--text-dark);
    margin-top:  0.25rem;
}

/* Cart item actions (qty control + remove) */
.cart-item-actions {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
    flex-shrink:    0;
}

.quantity-control {
    display:       flex;
    align-items:   center;
    border:        1.5px solid var(--medium-gray);
    border-radius: var(--radius-sm);
    overflow:      hidden;
}

.quantity-control .quantity-btn {
    width:           28px;
    height:          28px;
    background:      transparent;
    border:          none;
    color:           var(--text-dark);
    font-size:       0.65rem;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--transition-fast);
    min-height:      unset;
    border-radius:   0;
    padding:         0;
    box-shadow:      none;
}

.quantity-control .quantity-btn:hover { background: var(--light-gray); transform: none; }

.quantity-control .quantity {
    width:        30px;
    text-align:   center;
    font-size:    0.82rem;
    font-weight:  600;
    color:        var(--text-dark);
    border-left:  1px solid var(--medium-gray);
    border-right: 1px solid var(--medium-gray);
    line-height:  28px;
    display:      block;
}

.remove-btn {
    background:   none;
    border:       none;
    color:        var(--text-muted);
    cursor:       pointer;
    font-size:    0.72rem;
    padding:      0.2rem;
    transition:   color var(--transition-fast);
    min-height:   unset;
    border-radius: 0;
    box-shadow:   none;
}

.remove-btn:hover { color: #c0392b; transform: none; box-shadow: none; }

/* -- Empty cart state ------------------------------------------ */
.cart-empty .empty-state i      { font-size: 2rem; color: var(--medium-gray); margin-bottom: 1rem; }
.cart-empty .empty-state h3     { font-size: 1rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; }
.cart-empty .empty-state p      { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.5rem; }
#continueShopping               { min-height: 44px; font-size: 0.78rem; letter-spacing: 0.06em; }

/* -- Cart summary (right column) ------------------------------- */
.cart-summary-section {
    overflow-y: auto;
}

.cart-summary {
    display:        flex;
    flex-direction: column;
    height:         100%;
    padding:        1.5rem;
    min-height:     0;
}

.summary-header {
    margin-bottom:  1.25rem;
    padding-bottom: 1rem;
    border-bottom:  1px solid var(--medium-gray);
}

.summary-header h3 {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin:         0;
}

/* Summary line items */
.summary-items {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
    margin-bottom:  1.5rem;
}

.summary-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.85rem;
    color:           var(--text-dark);
}

.summary-item span:first-child { color: var(--text-light); }
.summary-item span:last-child  { font-weight: 500; }

.summary-item.total {
    font-weight:    700;
    font-size:      1rem;
    padding-top:    0.75rem;
    border-top:     1.5px solid var(--text-dark);
    margin-top:     0.25rem;
}

.summary-item.total span:first-child { color: var(--text-dark); }

/* Shipping options */
.shipping-options { margin-bottom: 1rem; }

.option-group h4 {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.75rem;
}

.option-group h4 i { display: none; }

.option-item { margin-bottom: 0.5rem; }

.option-label {
    display:       flex;
    align-items:   flex-start;
    gap:           0.625rem;
    padding:       0.875rem;
    border:        1.5px solid var(--medium-gray);
    border-radius: var(--radius-md);
    cursor:        pointer;
    transition:    border-color var(--transition-fast), background var(--transition-fast);
}

.option-label:hover { border-color: rgba(21,21,21,0.35); }

.option-label input[type="checkbox"] {
    margin-top:   2px;
    accent-color: var(--text-dark);
    min-height:   unset;
    flex-shrink:  0;
    width:        16px;
    height:       16px;
    border:       none;
    border-radius: 0;
    padding:      0;
    box-shadow:   none;
}

.option-title {
    display:     flex;
    flex-direction: column;
    gap:         0.25rem;
}

.option-title span { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); }
.option-title i { display: none; }

.option-description {
    font-size:   0.72rem;
    color:       var(--text-muted);
    line-height: 1.5;
}

/* Freight info box */
.freight-info {
    padding:       0.875rem;
    background:    var(--light-gray);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.info-header {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    margin-bottom: 0.5rem;
}

.info-header i { color: var(--accent-gold); font-size: 0.75rem; }
.info-header h4 { font-size: 0.78rem; font-weight: 700; color: var(--text-dark); margin: 0; }

.info-content p {
    font-size:     0.75rem;
    line-height:   1.6;
    color:         var(--text-light);
    margin-bottom: 0.375rem;
}

.info-content p:last-child { margin-bottom: 0; }

/* Cart CTAs */
.cart-actions {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
    margin-top:     auto;
    padding-top:    1.25rem;
}

#proceedCheckout {
    min-height:   50px;
    font-size:    0.78rem !important;
    width:        100%;
    border-radius: var(--radius-md) !important;
    letter-spacing: 0.06em !important;
}

#continueShoppingBtn {
    width:     100%;
    min-height: 42px;
    font-size: 0.78rem !important;
}

/* Trust note below CTAs */
.cart-trust-note {
    display:   flex;
    gap:       0.5rem;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color:     var(--text-muted);
    margin-top: 0.75rem;
    letter-spacing: 0.02em;
}

.cart-trust-note i { font-size: 0.65rem; color: var(--accent-gold); }

/* ================================================================
   CHECKOUT MODAL
   ================================================================ */
.checkout-modal {
    max-width: 700px;
}

.checkout-modal::before { display: none !important; }

/* Checkout header */
.checkout-modal-header {
    padding:       1.25rem 1.75rem;
    border-bottom: 1px solid var(--medium-gray);
}

.checkout-modal-header h2 {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      1.125rem;
    font-weight:    400;
    color:          var(--text-dark);
    margin:         0;
    letter-spacing: -0.01em;
}

/* Order summary preview */
.order-summary-preview {
    background:    var(--light-gray);
    border-radius: var(--radius-md);
    border:        1px solid var(--medium-gray);
    padding:       1.25rem;
    margin-bottom: 2rem;
}

.order-summary-preview h4 {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  1rem;
}

/* Form sections */
.form-section {
    margin-bottom:  2rem;
    padding-bottom: 2rem;
    border-bottom:  1px solid var(--medium-gray);
}

.form-section:last-of-type { border-bottom: none; }

.form-section > h3 {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  1.25rem;
}

/* Form labels — clean, no icons */
.form-group label {
    font-size:      0.78rem;
    font-weight:    600;
    color:          var(--text-dark);
    letter-spacing: 0.01em;
    margin-bottom:  0.375rem;
    display:        block;
}

.form-group label i { display: none; }

/* Form row two-column */
.form-row {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       1rem;
}

@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; }
}

/* Payment options */
.payment-options {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
}

.payment-option-label {
    display:       flex;
    align-items:   flex-start;
    gap:           0.875rem;
    padding:       1rem;
    border:        1.5px solid var(--medium-gray);
    border-radius: var(--radius-md);
    cursor:        pointer;
    transition:    border-color var(--transition-fast), background var(--transition-fast);
}

.payment-option-label:hover { border-color: rgba(21,21,21,0.3); }

.payment-option-label input[type="radio"] {
    margin-top:   3px;
    accent-color: var(--text-dark);
    min-height:   unset;
    flex-shrink:  0;
    width:        16px;
    height:       16px;
    border:       none;
    border-radius: 50%;
    padding:      0;
    box-shadow:   none;
}

.payment-option-body {
    display:     flex;
    align-items: flex-start;
    gap:         0.625rem;
}

.payment-option-body i { color: var(--accent-gold); margin-top: 2px; font-size: 1rem; }

.payment-option-body strong {
    display:       block;
    font-size:     0.88rem;
    font-weight:   600;
    color:         var(--text-dark);
    margin-bottom: 0.25rem;
}

.payment-option-body small {
    font-size: 0.75rem;
    color:     var(--text-muted);
    line-height: 1.4;
}

/* Checkout actions — Place Order is primary */
.checkout-actions {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    padding-top:    1.5rem;
    border-top:     1px solid var(--medium-gray);
}

#placeOrderBtn {
    min-height:     52px;
    font-size:      0.82rem !important;
    letter-spacing: 0.06em !important;
    order:         -3;    /* always first */
}

#requestQuoteBtn {
    min-height: 46px;
    font-size:  0.78rem !important;
    order:     -2;
}

#backToCart {
    min-height: 40px;
    font-size:  0.78rem !important;
    order:     -1;
    color:      var(--text-muted);
    border-color: transparent;
}

#backToCart:hover {
    color:        var(--text-dark);
    border-color: var(--medium-gray);
    background:   transparent;
}

/* Trust note in checkout */
.checkout-trust {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.625rem;
    font-size:       0.72rem;
    color:           var(--text-muted);
    margin-top:      0.75rem;
    letter-spacing:  0.02em;
}

.checkout-trust i { font-size: 0.68rem; color: var(--accent-gold); }

/* -- Mobile cart & checkout ------------------------------------ */
@media (max-width: 768px) {
    /* Cart: single column on mobile */
    .cart-content {
        grid-template-columns: 1fr;
        max-height:            none;
        height:                auto;
    }

    .cart-items-section {
        border-right:  none;
        border-bottom: 1px solid var(--medium-gray);
        overflow-y:    visible;
    }

    .cart-summary-section { overflow-y: visible; }

    .cart-summary { min-height: unset; }

    .cart-modal {
        max-height: 95vh;
    }

    /* Cart item smaller image on mobile */
    .cart-item {
        grid-template-columns: 60px 1fr auto;
        gap:                   0.75rem;
    }

    .cart-item-image { width: 60px; height: 60px; }

    /* Checkout modal full height on mobile */
    .checkout-modal { max-width: 100%; }

    .checkout-actions { gap: 0.625rem; }

    #placeOrderBtn { min-height: 50px; }
}

/* ================================================================
   STAGE 6 — PRODUCT MODAL EXPERIENCE
   Premium two-column product detail. All JS IDs preserved.
   ================================================================ */

/* -- Visually hidden (for aria-labelledby targets) ------------- */
.visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:    -1px;
    overflow:   hidden;
    clip:       rect(0 0 0 0);
    white-space: nowrap;
    border:     0;
}

/* -- Hide the old modal chrome from other modals, not product -- */
/* The product modal no longer uses .modal-container/.modal-content */
#productModal .modal-container { display: none !important; }

/* -- Product modal: full-viewport overlay ---------------------- */
#productModal {
    display:  none;          /* JS sets inline style.display=block to show */
    position: fixed;
    inset:    0;
    z-index:  2000;
}

/* Scroll wrapper (sits above the overlay) */
.pm-scroll {
    position:         relative;
    z-index:          1;
    width:            100%;
    height:           100%;
    overflow-y:       auto;
    -webkit-overflow-scrolling: touch;
    display:          flex;
    justify-content:  center;
    align-items:      flex-start;
    padding:          3rem 1.5rem 5rem;
    box-sizing:       border-box;
}

/* White panel */
.pm-panel {
    position:      relative;
    background:    var(--white);
    width:         100%;
    max-width:     1060px;
    border-radius: var(--radius-lg);
    box-shadow:    0 32px 80px rgba(0,0,0,0.22);
    overflow:      hidden;
    animation:     pmSlideIn 0.25s ease-out;
}

@keyframes pmSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Close button */
.pm-close-btn {
    position:        absolute;
    top:             1rem;
    right:           1rem;
    z-index:         10;
    width:           34px;
    height:          34px;
    background:      rgba(0,0,0,0.06);
    border:          none;
    border-radius:   50%;
    cursor:          pointer;
    color:           var(--text-dark);
    font-size:       0.8rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--transition-fast);
    line-height:     1;
}

.pm-close-btn:hover { background: rgba(0,0,0,0.12); }
.pm-close-btn:focus-visible { outline: 2px solid var(--text-dark); outline-offset: 2px; }

/* -- Two-column body ------------------------------------------- */
.pm-body {
    display:               grid;
    grid-template-columns: 1fr 1fr;
}

/* -- Image column ---------------------------------------------- */
.pm-image-col {
    background:    var(--light-gray);
    position:      sticky;
    top:           0;
    align-self:    start;
    max-height:    100vh;
}

.pm-image {
    aspect-ratio: 1 / 1;
    width:        100%;
    overflow:     hidden;
    background:   var(--light-gray);
}

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

/* -- Info column ----------------------------------------------- */
.pm-info-col {
    padding:    3rem 2.5rem 3rem;
    overflow-y: auto;
    max-height: 100vh;
}

/* Eyebrow / category */
.pm-eyebrow {
    font-size:      0.66rem;
    font-weight:    700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.625rem;
}

/* Product name */
.pm-name {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      clamp(1.35rem, 2.5vw, 1.875rem);
    font-weight:    400;
    color:          var(--text-dark);
    line-height:    1.15;
    margin-bottom:  1rem;
    letter-spacing: -0.01em;
}

/* Price block */
.pm-price-block {
    display:         flex;
    align-items:     baseline;
    gap:             0.625rem;
    margin-bottom:   1.5rem;
    padding-bottom:  1.5rem;
    border-bottom:   1px solid var(--medium-gray);
}

.pm-price {
    font-size:      1.625rem;
    font-weight:    600;
    color:          var(--text-dark);
    letter-spacing: -0.02em;
    line-height:    1;
}

.pm-price-note {
    font-size:   0.78rem;
    color:       var(--text-muted);
    font-weight: 400;
}

/* Description */
.pm-description {
    font-size:     0.9rem;
    line-height:   1.75;
    color:         var(--text-light);
    font-weight:   400;
    margin-bottom: 1.5rem;
    white-space:   pre-line;
}

/* Section heading */
.pm-section-heading {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-dark);
    margin-bottom:  0.75rem;
}

/* Size section */
.pm-section { margin-bottom: 1.5rem; }

.pm-size-options {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
}

.size-option {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.875rem 1rem;
    border:          1.5px solid var(--medium-gray);
    border-radius:   var(--radius-md);
    cursor:          pointer;
    transition:
        border-color var(--transition-fast),
        background   var(--transition-fast);
    gap:             0.5rem;
}

.size-option:hover  { border-color: rgba(21,21,21,0.4); }

.size-option.active {
    border-color: var(--text-dark);
    background:   var(--light-gray);
}

.size-info       { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.size-name       { font-weight: 600; font-size: 0.88rem; color: var(--text-dark); }
.size-details    { font-size: 0.72rem; color: var(--text-muted); }
.size-price      { font-weight: 700; font-size: 0.9rem; color: var(--text-dark); flex-shrink: 0; }

/* Fumigation */
.pm-fumigation { margin-bottom: 1.5rem; }

.pm-fumi-label {
    display:       flex;
    gap:           0.875rem;
    align-items:   flex-start;
    padding:       1rem;
    background:    var(--light-gray);
    border-radius: var(--radius-md);
    cursor:        pointer;
    border:        1.5px solid transparent;
    transition:    border-color var(--transition-fast);
}

.pm-fumi-label:hover { border-color: var(--medium-gray); }

.pm-fumi-label input[type="checkbox"] {
    width:        18px;
    height:       18px;
    margin-top:   2px;
    flex-shrink:  0;
    accent-color: var(--text-dark);
    cursor:       pointer;
    min-height:   unset;
    border:       none;
    border-radius: 0;
    padding:      0;
}

.pm-fumi-text  { display: flex; flex-direction: column; gap: 0.25rem; }

.pm-fumi-title {
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--text-dark);
    display:     flex;
    gap:         0.375rem;
    align-items: center;
}

.pm-fumi-desc {
    font-size: 0.75rem;
    color:     var(--text-muted);
}

/* Purchase row */
.pm-purchase {
    display:       flex;
    gap:           0.875rem;
    margin-bottom: 1.5rem;
    align-items:   stretch;
}

.pm-qty-selector {
    display:       flex;
    align-items:   center;
    border:        1.5px solid var(--medium-gray);
    border-radius: var(--radius-md);
    overflow:      hidden;
    flex-shrink:   0;
}

.pm-qty-selector .quantity-btn {
    width:           42px;
    height:          50px;
    background:      transparent;
    border:          none;
    color:           var(--text-dark);
    font-size:       1.15rem;
    font-weight:     300;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--transition-fast);
    flex-shrink:     0;
}

.pm-qty-selector .quantity-btn:hover { background: var(--light-gray); }

.pm-qty-selector .quantity-input {
    width:         46px;
    height:        50px;
    text-align:    center;
    border:        none;
    border-left:   1px solid var(--medium-gray);
    border-right:  1px solid var(--medium-gray);
    font-size:     0.9rem;
    font-weight:   600;
    color:         var(--text-dark);
    background:    transparent;
    -moz-appearance: textfield;
    min-height:    unset;
    border-radius: 0;
    padding:       0;
    box-shadow:    none;
}

.pm-qty-selector .quantity-input:focus { outline: none; box-shadow: none; }

.pm-qty-selector .quantity-input::-webkit-outer-spin-button,
.pm-qty-selector .quantity-input::-webkit-inner-spin-button { display: none; }

.pm-atc-btn {
    flex:        1;
    min-height:  50px;
    font-size:   0.78rem !important;
    letter-spacing: 0.08em !important;
    border-radius: var(--radius-md) !important;
}

/* Trust strip */
.pm-trust {
    display:       flex;
    gap:           1.25rem;
    flex-wrap:     wrap;
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--medium-gray);
}

.pm-trust-item {
    font-size:   0.72rem;
    font-weight: 600;
    color:       var(--text-muted);
    display:     flex;
    align-items: center;
    gap:         0.35rem;
}

.pm-trust-item i { color: var(--accent-gold); font-size: 0.68rem; }

/* Accordions (native <details>/<summary>) */
.pm-accordions { border-top: 1px solid var(--medium-gray); }

.pm-accordion { border-bottom: 1px solid var(--medium-gray); }

.pm-accordion-toggle {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         1rem 0;
    font-size:       0.82rem;
    font-weight:     600;
    color:           var(--text-dark);
    cursor:          pointer;
    list-style:      none;
    letter-spacing:  0.02em;
    user-select:     none;
}

.pm-accordion-toggle::-webkit-details-marker { display: none; }

.pm-accordion-toggle::after {
    content:     '+';
    font-size:   1.1rem;
    font-weight: 300;
    color:       var(--text-muted);
    flex-shrink: 0;
}

details[open] > .pm-accordion-toggle::after { content: '-'; }

.pm-accordion-body {
    padding-bottom: 1.25rem;
    font-size:      0.85rem;
    line-height:    1.7;
    color:          var(--text-light);
}

.pm-accordion-body p { margin-bottom: 0; }

.pm-meta-grid {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
}

.pm-meta-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.82rem;
    padding:         0.375rem 0;
    border-bottom:   1px solid var(--medium-gray);
}

.pm-meta-item:last-child { border-bottom: none; }

.pm-meta-label { color: var(--text-muted); font-weight: 400; }
.pm-meta-value { color: var(--text-dark);  font-weight: 600; }

/* -- Related products strip ------------------------------------ */
.pm-related {
    background:    var(--light-gray);
    border-top:    1px solid var(--medium-gray);
    padding:       2.5rem 2.5rem 3rem;
}

.pm-related-title {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      1.125rem;
    font-weight:    400;
    color:          var(--text-dark);
    margin-bottom:  1.75rem;
    letter-spacing: -0.01em;
}

.pm-related-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
}

@media (max-width: 900px) { .pm-related-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px) { .pm-related-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* -- Mobile product modal -------------------------------------- */
@media (max-width: 768px) {
    .pm-scroll {
        padding: 0;
        align-items: flex-start;
    }

    .pm-panel {
        border-radius: 0;
        min-height:    100vh;
        box-shadow:    none;
        animation:     none;
    }

    .pm-body { grid-template-columns: 1fr; }

    .pm-image-col {
        position:   static;
        max-height: none;
    }

    .pm-image    { aspect-ratio: 4 / 3; }

    .pm-info-col {
        padding:    1.75rem 1.25rem 3rem;
        max-height: none;
    }

    .pm-name     { font-size: 1.375rem; }

    .pm-purchase {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pm-qty-selector { align-self: flex-start; }

    .pm-atc-btn  { min-height: 50px; }

    .pm-related  { padding: 2rem 1.25rem 3rem; }

    .pm-close-btn {
        top:   0.75rem;
        right: 0.75rem;
    }
}

/* ================================================================
   STAGE 5 — SHOP EXPERIENCE TRANSFORMATION
   Clean editorial shop header · Premium product cards ·
   Minimal category nav · Refined search & sort controls
   ================================================================ */

/* -- CMS sink — holds off-screen CMS IDs ----------------------- */
.cms-sink {
    position:   absolute;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    clip:       rect(0 0 0 0);
    white-space: nowrap;
    pointer-events: none;
    opacity:    0;
}

/* ================================================================
   SHOP HEADER — editorial, white, minimal
   ================================================================ */
.shop-header-section {
    background:     var(--white);
    padding-top:    5rem;
    padding-bottom: 3rem;
    border-bottom:  1px solid var(--medium-gray);
    text-align:     center;
}

.shop-header-content {
    max-width:  680px;
    margin:     0 auto;
}

.shop-eyebrow {
    display:        block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  1rem;
}

.shop-header-title {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      clamp(2rem, 4vw, 3rem);
    font-weight:    400;
    color:          var(--text-dark);
    line-height:    1.1;
    letter-spacing: -0.015em;
    margin-bottom:  0.875rem;
}

.shop-header-subtitle {
    font-size:   0.92rem;
    line-height: 1.7;
    color:       var(--text-light);
    font-weight: 400;
    max-width:   520px;
    margin:      0 auto;
}

@media (max-width: 767px) {
    .shop-header-section {
        padding-top:    3.5rem;
        padding-bottom: 2.5rem;
    }
    .shop-header-title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
}

/* ================================================================
   CATEGORY NAV — minimal pill strip
   ================================================================ */
.categories-nav-section {
    background:     var(--white);
    padding-top:    1.25rem;
    padding-bottom: 1.25rem;
    border-bottom:  1px solid var(--medium-gray);
    position:       sticky;
    top:            var(--header-height);
    z-index:        50;
}

.categories-nav {
    display:          flex;
    gap:              4px;
    overflow-x:       auto;
    overflow-y:       clip;   /* clip = no scroll container; prevents vertical swipe capture */
    scrollbar-width:  none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior:  smooth;
    padding:          3px;
    background:       var(--light-gray);
    border:           1px solid var(--medium-gray);
    border-radius:    var(--radius-full);
    width:            fit-content;
    max-width:        100%;
}

.categories-nav::-webkit-scrollbar { display: none; }

.category-nav-btn {
    display:         flex;
    align-items:     center;
    gap:             0.35rem;
    padding:         0.4rem 1rem;
    font-size:       0.72rem;
    font-weight:     600;
    letter-spacing:  0.04em;
    color:           var(--text-muted);
    background:      transparent;
    border:          none;
    border-radius:   var(--radius-full);
    cursor:          pointer;
    white-space:     nowrap;
    flex-shrink:     0;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color      var(--transition-fast),
        box-shadow var(--transition-fast);
}

.category-nav-btn i { display: none; }   /* hide icons — text-only is cleaner */

.category-nav-btn:hover {
    color:       var(--text-dark);
    background:  rgba(255,255,255,0.7);
    transform:   none;
    box-shadow:  none;
}

.category-nav-btn.active {
    background:  var(--white);
    color:       var(--text-dark);
    font-weight: 700;
    box-shadow:  0 1px 6px rgba(0,0,0,0.07);
    transform:   none;
    border:      none;
}

@media (max-width: 767px) {
    .categories-nav-section { padding: 0.875rem 0; }
    .categories-nav         { border-radius: var(--radius-lg); }
    .category-nav-btn       { padding: 0.375rem 0.875rem; font-size: 0.7rem; }
}

/* ================================================================
   PRODUCTS SECTION — generous spacing
   ================================================================ */
.products-section {
    background:     var(--white);
    padding-top:    3rem;
    padding-bottom: 6rem;
}

/* Products header: title left, controls right */
.products-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.25rem;
    margin-bottom:   2.5rem;
    flex-wrap:       wrap;
}

.products-title {
    font-family:    'Playfair Display', Georgia, serif;
    font-size:      1.125rem;
    font-weight:    400;
    color:          var(--text-dark);
    letter-spacing: -0.01em;
    margin-bottom:  0;
    white-space:    nowrap;
}

.products-actions {
    display:   flex;
    gap:       0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Search box */
.search-box {
    position: relative;
    flex:     0 0 auto;
}

.search-box i {
    position:  absolute;
    left:      0.75rem;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.search-box input {
    width:         220px;
    padding:       0.55rem 0.875rem 0.55rem 2.25rem;
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-full);
    font-size:     0.82rem;
    background:    var(--light-gray);
    color:         var(--text-dark);
    min-height:    38px;
    transition:
        border-color var(--transition-fast),
        background   var(--transition-fast);
}

.search-box input:focus {
    outline:     none;
    border-color: var(--text-dark);
    background:  var(--white);
    box-shadow:  none;
}

.search-box input::placeholder { color: var(--text-muted); }

/* Sort select */
.sort-select select {
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-full);
    background:    var(--light-gray);
    color:         var(--text-dark);
    font-size:     0.78rem;
    font-weight:   600;
    padding:       0.5rem 2rem 0.5rem 0.875rem;
    min-height:    38px;
    cursor:        pointer;
    appearance:    none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 0.75rem center;
    min-width: 140px;
    transition: border-color var(--transition-fast);
}

.sort-select select:focus {
    outline:      none;
    border-color: var(--text-dark);
    background-color: var(--white);
}

@media (max-width: 640px) {
    .products-header    { flex-direction: column; align-items: flex-start; }
    .products-actions   { width: 100%; }
    .search-box         { flex: 1; }
    .search-box input   { width: 100%; }
    .sort-select        { width: 100%; }
    .sort-select select { width: 100%; }
}

/* ================================================================
   PRODUCT CARDS — premium, image-led, clean
   ================================================================ */
.products-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   2rem;
}

@media (min-width: 640px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (min-width: 900px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

@media (min-width: 1280px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

/* Card itself */
.product-card {
    background:     var(--white);
    border:         none;
    border-radius:  0;
    box-shadow:     none;
    cursor:         pointer;
    display:        flex;
    flex-direction: column;
    overflow:       visible;
    transition:     opacity var(--transition-fast);
    outline:        none;
}

/* No top gradient stripe */
.product-card::before { display: none !important; }

.product-card:hover   { transform: none; box-shadow: none; opacity: 0.92; }
.product-card:focus-visible { outline: 2px solid var(--text-dark); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Product image — square aspect, no border, slight reveal on hover */
.product-image {
    position:      relative;
    overflow:      hidden;
    background:    var(--light-gray);
    aspect-ratio:  1 / 1;
    width:         100%;
    border-radius: var(--radius-md);
    margin-bottom: 0.875rem;
}

.product-img {
    width:  100%;
    height: 100%;
}

.product-image-content,
.product-img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.5s ease-out;
}

.product-card:hover .product-image-content,
.product-card:hover .product-img img { transform: scale(1.04); }

/* Info below image */
.product-info {
    padding:  0;
    gap:      0.25rem;
    display:  flex;
    flex-direction: column;
}

.product-name-text {
    font-size:   0.9rem;
    font-weight: 500;
    color:       var(--text-dark);
    line-height: 1.4;
    margin:      0;
    letter-spacing: 0;
}

.product-card:hover .product-name-text { color: var(--text-dark); }

/* Price row */
.product-price {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    margin-top:  0.25rem;
    border-top:  none;
    padding-top: 0;
}

.price-amount {
    font-size:   0.86rem;
    font-weight: 500;
    color:       var(--text-muted);
    letter-spacing: 0;
}

.price-from { font-size: 0.75em; }

.size-info {
    font-size:   0.72rem;
    color:       var(--text-muted);
    background:  none;
    padding:     0;
    border-radius: 0;
}

/* ================================================================
   MOBILE PRODUCT GRID
   ================================================================ */
@media (max-width: 640px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .product-name-text { font-size: 0.82rem; }
    .price-amount      { font-size: 0.8rem; }
}

@media (max-width: 380px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ================================================================
   EMPTY / LOADING STATES
   ================================================================ */
.products-empty,
.products-loading {
    padding: 5rem 2rem;
    text-align: center;
}

.empty-state i        { color: var(--medium-gray); font-size: 2.5rem; margin-bottom: 1rem; }
.empty-state h3       { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.empty-state p        { font-size: 0.88rem; color: var(--text-muted); }

/* Compact empty state (Volume 1) — used where a section has no records yet.
   Keeps the message on one calm line instead of a tall, icon-led empty band,
   so an unpopulated section reads as "nothing here yet", not as broken. */
.empty-state-compact  { padding: 1.75rem 1rem; }
.empty-state-compact p{ margin: 0; max-width: 46ch; margin-left: auto; margin-right: auto; }
.spinner-circle       { border-color: var(--medium-gray); border-top-color: var(--text-dark); }

/* ================================================================
   PRODUCT BADGE — minimal
   ================================================================ */
.product-badge {
    position:      absolute;
    top:           0.75rem;
    left:          0.75rem;
    background:    var(--text-dark);
    color:         #fff;
    font-size:     0.62rem;
    font-weight:   700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:       3px 8px;
    border-radius: 0;
    z-index:       2;
}

/* ================================================================
   HOMEPAGE FEATURED GRID — matches shop grid style
   ================================================================ */
.home-featured-grid {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   2rem !important;
    margin-bottom:         3rem;
}

@media (min-width: 900px) {
    .home-featured-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 2.5rem !important; }
}

@media (max-width: 480px) {
    .home-featured-grid { gap: 1.25rem !important; }
}


/* ================================================================
   SPLIT HERO — 50/50 premium editorial layout
   Left: content  ·  Right: 4-image layered composition
   All Stage 3 full-bleed hero overrides applied here (final).
   ================================================================ */

/* -- Hero section: clear background, grid layout --------------- */
.hero {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows:    1fr !important;
    min-height:            calc(100dvh - var(--header-height)) !important;
    height:                calc(100dvh - var(--header-height)) !important;
    margin-top:            var(--header-height) !important;
    padding:               0 !important;
    align-items:           stretch !important;
    background:            #FAF8F5 !important;
    background-image:      none !important;
    overflow:              hidden !important;
    position:              relative !important;
}

/* hero-split spans both columns */
.hero-split {
    grid-column: 1 / -1;
    display:     grid;
    grid-template-columns: 1fr 1fr;
    height:      100%;
    width:       100%;
    max-width:   1600px;
    margin:      0 auto;
}

/* Kill all old full-bleed overlays and scroll indicator */
.hero::before,
.hero::after     { display: none !important; }
.hero-background,
.hero-mobile-bg  { display: none !important; }
.hero-scroll     { display: none !important; }

/* -- LEFT column: content area --------------------------------- */
.hero-left {
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
    padding:         4rem 3.5rem 4rem 3.5rem;
    position:        relative;
    z-index:         2;
}

.hero .hero-content {
    max-width:  520px;
    text-align: left !important;
    width:      100%;
}

/* Homepage only: keep the split-hero badge hidden */
.hero .hero-badge {
    display:        none !important;
    background:     transparent !important;
    color:          var(--accent-gold) !important;
    border:         0 !important;
    padding:        0 !important;
    border-radius:  0 !important;
    font-size:      0.68rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom:  0.6rem !important;
    text-shadow:    none !important;
    box-shadow:     none !important;
}

/* -- Hero title — dark editorial serif ------------------------- */
.hero .hero-title {
    font-family:    'Playfair Display', Georgia, serif !important;
    font-weight:    400 !important;
    font-size:      clamp(2.5rem, 4.5vw, 4rem) !important;
    line-height:    1.1 !important;
    letter-spacing: -0.02em !important;
    color:          var(--text-dark) !important;
    text-shadow:    none !important;
    margin-bottom:  1.25rem !important;
    gap:            0.08em !important;
    text-align:     left !important;
    display:        flex !important;
    flex-direction: column !important;
}

.hero .title-line { display: block; }

/* -- Hero description ------------------------------------------ */
.hero .hero-description {
    font-size:   0.97rem !important;
    line-height: 1.72 !important;
    color:       var(--text-light) !important;
    font-weight: 400 !important;
    max-width:   440px !important;
    margin:      0 0 2rem 0 !important;
    text-align:  left !important;
    text-shadow: none !important;
}

/* Hero actions: Stage 3 positioning restored (left-aligned in split) */
.hero .hero-actions {
    justify-content: flex-start !important;
    flex-direction:  row !important;
    margin-bottom:   1.5rem !important;
    width:           auto !important;
}

/* Btn1: styling only — visibility controlled by inline style / JS (admin toggle) */
.hero #heroBtn1 {
    display:          inline-flex;
    background:       var(--brand-primary, #1B4332) !important;
    color:            #ffffff !important;
    border:           2px solid var(--brand-primary, #1B4332) !important;
    border-radius:    var(--radius-md, 8px) !important;
    font-size:        0.82rem !important;
    font-weight:      600 !important;
    letter-spacing:   0.1em !important;
    text-transform:   uppercase !important;
    padding:          1rem 2.75rem !important;
    min-height:       54px !important;
    align-items:      center !important;
    gap:              0.5rem !important;
    text-decoration:  none !important;
}

/* Btn2: dark text/border — hero background is light cream (#FAF8F5) */
.hero #heroBtn2 {
    background:      transparent !important;
    color:           var(--text-dark) !important;
    border:          2px solid var(--text-dark) !important;
    border-radius:   var(--radius-md) !important;
    font-size:       0.82rem !important;
    font-weight:     600 !important;
    letter-spacing:  0.1em !important;
    text-transform:  uppercase !important;
    padding:         1rem 5px 1rem 2.75rem !important;
    min-height:      64px !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
}

.hero #heroBtn2:hover {
    background:   rgba(21,21,21,0.06) !important;
    border-color: var(--text-dark) !important;
    color:        var(--text-dark) !important;
    transform:    none !important;
    box-shadow:   none !important;
}

.hero #heroBtn2 > i { display: none !important; }

/* Single-button layout: size to fit text + badge on one line */
#heroBtn1[style*="display: none"] ~ #heroBtn2 {
    flex:        0 0 auto !important;
    width:       auto !important;
    white-space: nowrap !important;
}

/* Stats hidden per Stage 3 (CMS IDs in DOM) */
.hero .hero-stats { display: none !important; }

/* -- RIGHT column: visual frame -------------------------------- */
.hero-right {
    position:        relative;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        visible;
    padding:         3rem 2rem;
}

/* Fixed-size composition container */
.hero-visual-frame {
    position: relative;
    width:    580px;
    height:   560px;
    flex-shrink: 0;
}

/* -- Base card styles ------------------------------------------ */
.hero-frame-card {
    position:      absolute;
    overflow:      hidden;
    border-radius: 22px;
    box-shadow:    0 10px 30px rgba(0,0,0,0.06);
    cursor:        default;
}

.hero-frame-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* -- FRAME POSITIONS — 5 vertical portrait cards, fanned spread --
   Z-INDEX (each unique):
     Frame 1  z:10  — leftmost   (deepest)
     Frame 2  z:20  — 2nd left
     Frame 3  z:30  — centre
     Frame 4  z:40  — 2nd right
     Frame 5  z:50  — rightmost  (topmost)
   Each card overlaps the next by ~95 px.
   ---------------------------------------------------------------- */

/* Frame area widened to 600px to comfortably fit 5 cards */
.hero-visual-frame { width: 600px; height: 530px; }

.hero-frame-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }

/* All 5 cards: same size, 190×340px portrait */
.hero-frame-1 {
    width:     190px;
    height:    340px;
    top:       72px;
    left:      8px;
    z-index:   10;
    transform: rotate(-8deg) scale(0.92);
}
.hero-frame-2 {
    width:     190px;
    height:    340px;
    top:       44px;
    left:      103px;      /* overlaps F1 by: 8+190-103 = 95px */
    z-index:   20;
    transform: rotate(-4deg) scale(0.94);
}
.hero-frame-3 {
    width:     190px;
    height:    340px;
    top:       32px;
    left:      198px;      /* overlaps F2 by 95px */
    z-index:   30;
    transform: rotate(0deg) scale(0.96);
}
.hero-frame-4 {
    width:     190px;
    height:    340px;
    top:       48px;
    left:      293px;      /* overlaps F3 by 95px */
    z-index:   40;
    transform: rotate(4deg) scale(0.98);
}
.hero-frame-5 {
    width:     190px;
    height:    340px;
    top:       72px;
    left:      388px;      /* overlaps F4 by 95px; right edge: 578px */
    z-index:   50;
    transform: rotate(8deg) scale(1.00);
}

/* -- Hover: lift while preserving each card's rotation -------- */
.hero-frame-1:hover { transform: rotate(-8deg) scale(0.94) translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.10) !important; }
.hero-frame-2:hover { transform: rotate(-4deg) scale(0.96) translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.10) !important; }
.hero-frame-3:hover { transform: rotate(0deg)  scale(0.98) translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.10) !important; }
.hero-frame-4:hover { transform: rotate(4deg)  scale(1.00) translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.10) !important; }
.hero-frame-5:hover { transform: rotate(8deg)  scale(1.02) translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.10) !important; }

/* -- Staggered fade-up: Frame 1 first ? Frame 5 last ----------- */
@keyframes hf1FadeUp {
    from { opacity: 0; transform: rotate(-8deg) scale(0.92) translateY(40px); }
    to   { opacity: 1; transform: rotate(-8deg) scale(0.92) translateY(0); }
}
@keyframes hf2FadeUp {
    from { opacity: 0; transform: rotate(-4deg) scale(0.94) translateY(40px); }
    to   { opacity: 1; transform: rotate(-4deg) scale(0.94) translateY(0); }
}
@keyframes hf3FadeUp {
    from { opacity: 0; transform: rotate(0deg) scale(0.96) translateY(40px); }
    to   { opacity: 1; transform: rotate(0deg) scale(0.96) translateY(0); }
}
@keyframes hf4FadeUp {
    from { opacity: 0; transform: rotate(4deg) scale(0.98) translateY(40px); }
    to   { opacity: 1; transform: rotate(4deg) scale(0.98) translateY(0); }
}
@keyframes hf5FadeUp {
    from { opacity: 0; transform: rotate(8deg) scale(1.00) translateY(40px); }
    to   { opacity: 1; transform: rotate(8deg) scale(1.00) translateY(0); }
}

.hero-frame-1 { animation: hf1FadeUp 0.7s ease-out 0.10s both; }
.hero-frame-2 { animation: hf2FadeUp 0.7s ease-out 0.25s both; }
.hero-frame-3 { animation: hf3FadeUp 0.7s ease-out 0.40s both; }
.hero-frame-4 { animation: hf4FadeUp 0.7s ease-out 0.55s both; }
.hero-frame-5 { animation: hf5FadeUp 0.7s ease-out 0.70s both; }

/* -- LEFT content fade-in --------------------------------------- */
@keyframes heroLeftFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-left .hero-content { animation: heroLeftFadeUp 0.7s ease-out 0.15s both; }

/* -- TABLET (768–1023px) --------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-split { grid-template-columns: 1fr 1fr; }

    .hero-left  { padding: 3rem 2rem; }
    .hero .hero-content { max-width: 100%; }

    /* Tablet: 5 portrait cards, ~80% */
    .hero-visual-frame { width: 480px; height: 420px; }

    .hero-frame-1 { width: 152px; height: 272px; top: 58px; left: 6px; }
    .hero-frame-2 { width: 152px; height: 272px; top: 35px; left: 82px; }
    .hero-frame-3 { width: 152px; height: 272px; top: 25px; left: 158px; }
    .hero-frame-4 { width: 152px; height: 272px; top: 38px; left: 234px; }
    .hero-frame-5 { width: 152px; height: 272px; top: 58px; left: 310px; }
}

/* -- MOBILE (=767px) ------------------------------------------- */
@media (max-width: 767px) {
    /* Stack: content on top, composition below */
    .hero {
        display:        flex !important;
        flex-direction: column !important;
        height:         auto !important;
        min-height:     100dvh !important;
        overflow:       hidden !important;
    }

    .hero-split {
        display:        flex;
        flex-direction: column;
        height:         auto;
        width:          100%;
    }

    /* LEFT: content block */
    .hero-left {
        padding:         3rem 1.5rem 2rem;
        justify-content: center;
    }

    .hero .hero-content { max-width: 100%; text-align: center !important; }
    .hero .hero-title   { text-align: center !important; align-items: center !important; }
    .hero .hero-description { text-align: center !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .hero .hero-actions {
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    .hero #heroBtn1,
    .hero #heroBtn2 {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 0.82rem 0.9rem !important;
        min-height: 46px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap !important;
    }

    /* RIGHT: composition - rebuild mobile proportionally */
    .hero-right {
        padding:    1.5rem 1rem 3rem;
        min-height: 400px;
        height:     420px;
    }

    /* Smaller composition for mobile */
    /* Mobile: 5 portrait cards, compact fan */
    .hero-visual-frame { width: 340px; height: 300px; }

    .hero-frame-1 { width: 108px; height: 192px; top: 42px; left: 4px; }
    .hero-frame-2 { width: 108px; height: 192px; top: 24px; left: 60px; }
    .hero-frame-3 { width: 108px; height: 192px; top: 18px; left: 116px; }
    .hero-frame-4 { width: 108px; height: 192px; top: 28px; left: 172px; }
    .hero-frame-5 { width: 108px; height: 192px; top: 44px; left: 224px; }
}

/* ================================================================
   CART FINAL — two-column independent scroll  (beats all above)
   KEY: .cart-modal needs an EXPLICIT height (not max-height) so
   flex children can resolve height:100% and actually render.
   ================================================================ */

/* Give the modal an explicit height — flex children resolve correctly */
.cart-modal {
    display:        flex !important;
    flex-direction: column !important;
    width:          100% !important;
    max-width:      1020px !important;
    height:         82vh !important;    /* explicit — not max-height */
    max-height:     82vh !important;
    overflow:       hidden !important;
    border-radius:  var(--radius-lg) !important;
}

/* Header never grows/shrinks */
.cart-modal-header {
    flex:        0 0 auto !important;
    flex-shrink: 0 !important;
}

/* Body fills everything below the header */
.cart-modal .modal-body {
    flex:       1 1 0px !important;
    min-height: 0 !important;          /* critical for flex scroll */
    overflow:   hidden !important;
    padding:    0 !important;
}

/* Grid exactly fills the body */
.cart-content {
    display:               grid !important;
    grid-template-columns: 1fr 420px !important;
    height:                100% !important;
    min-height:            0 !important;
}

/* LEFT — items column scrolls */
.cart-items-section {
    min-height:             0 !important;
    overflow-y:             auto !important;
    overflow-x:             hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* RIGHT — summary column scrolls */
.cart-summary-section {
    min-height:             0 !important;
    overflow-y:             auto !important;
    overflow-x:             hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* Summary: flex column so CTAs stay at the bottom */
.cart-summary {
    display:        flex !important;
    flex-direction: column !important;
    min-height:     100% !important;
    height:         auto !important;
}

/* Thin scrollbar — visible but not intrusive */
.cart-items-section::-webkit-scrollbar,
.cart-summary-section::-webkit-scrollbar { width: 4px; }

.cart-items-section::-webkit-scrollbar-track,
.cart-summary-section::-webkit-scrollbar-track { background: transparent; }

.cart-items-section::-webkit-scrollbar-thumb,
.cart-summary-section::-webkit-scrollbar-thumb {
    background: rgba(21,21,21,0.22);
    border-radius: 4px;
}

.cart-items-section::-webkit-scrollbar-thumb:hover,
.cart-summary-section::-webkit-scrollbar-thumb:hover {
    background: rgba(21,21,21,0.40);
}

/* Mobile — full-width single column, body scrolls */
@media (max-width: 767px) {
    .cart-modal {
        height:     auto !important;
        max-height: 92vh !important;
    }

    .cart-modal .modal-body {
        overflow-y: auto !important;
    }

    .cart-content {
        grid-template-columns: 1fr !important;
        height:                auto !important;
    }

    .cart-items-section,
    .cart-summary-section {
        overflow-y: visible !important;
        min-height: 0 !important;
    }
}

/* ================================================================
   FINAL OVERRIDES — must be last in file to win every cascade
   Fixes: hero visibility · story expand · contact btn · impact grid
   ================================================================ */

/* FIX 1 — Hero visibility via CSS class (class-based, not inline style).
   CSS !important beats JS inline style, so inline style cannot toggle a
   display:none !important rule. Solution: use a .hero-visible class that
   has higher specificity than .hero{display:grid!important}.
   #hero.hero-visible (1,1,0) beats .hero (0,1,0) even with !important.   */

#hero {
    display: none !important;            /* hidden by default */
}

#hero.hero-visible {
    display: grid !important;            /* shown only when JS adds this class; grid preserves 2-col layout */
}

/* FIX 3 — Community story card + expanded dropdown appear merged.
   Remove the gap/border mismatch at the card-bottom / panel-top join.     */

/* Card loses its brown bottom-border when open — panel takes over */
.community-stories-section .story-card.story-card-open {
    border-bottom-left-radius:  0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom:              1.5px solid var(--primary-brown) !important;
}

/* Expanded panel: no top border, no top radius — sits flush on card */
.community-stories-section .story-card.story-card-open .story-expanded,
.community-stories-section .story-expanded.open {
    border-top:              none !important;
    border-top-left-radius:  0 !important;
    border-top-right-radius: 0 !important;
    margin-top:              -1px !important;  /* close any 1px gap */
}

/* FIX 5 — Contact button: taller vertical padding.
   Re-asserted here so it wins over earlier declarations.                   */
a.header-contact-btn {
    padding-top:    0.7rem !important;
    padding-bottom: 0.7rem !important;
    min-height:     44px !important;
}

/* FIX 6 — Mobile impact cards: 3 in a single row on all mobile sizes.
   Placed after earlier repeat(2,1fr) rules so this wins the cascade.      */
@media (max-width: 767px) {
    .home-impact-grid {
        display:               grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap:                   0.5rem !important;
    }
    .home-impact-card {
        aspect-ratio: 3 / 4 !important;
    }
    .home-impact-overlay .home-impact-number {
        font-size:   clamp(1.1rem, 5.5vw, 1.75rem) !important;
    }
    .home-impact-overlay .home-impact-label {
        font-size:   0.56rem !important;
        letter-spacing: 0.06em !important;
    }
}

@media (max-width: 400px) {
    .home-impact-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap:                   0.35rem !important;
    }
    .home-impact-card { aspect-ratio: 2 / 3 !important; }
}

/* ================================================================
   CRAFT SLIDER SCROLL-THROUGH FIX
   The craft grid has width:max-content inside overflow:hidden.
   Browsers (especially iOS/Safari) treat this as potentially
   horizontally scrollable and consume touch events to "check",
   which blocks the user from scrolling the page vertically past
   the Our Collections section.

   touch-action:pan-y tells the browser: vertical touch = page scroll.
   overscroll-behavior:none prevents scroll chaining from stopping
   at this element's boundary.
   pointer-events:none on the grid itself prevents accidental event
   capture while still allowing clicks on .craft-btn inside the cards.
   ================================================================ */

/* Section: only vertical touch events pass through */
.home-collections-section {
    touch-action:       pan-y !important;
    overscroll-behavior: none !important;
}

/* Desktop: static grid, no override needed */
/* Mobile: override via @media in public-app.css */
.craft-slider-viewport,
.home-collections-section .craft-slider-viewport {
    touch-action: pan-x pan-y;
}

/* Grid: pointer events re-enabled (no animation — cards are interactive) */
.craft-grid {
    touch-action:   pan-x pan-y;
    pointer-events: auto;
    user-select:    none;
}

/* Cards remain fully interactive */
.craft-card,
.craft-btn,
.craft-card .craft-content {
    pointer-events: auto;
}
.craft-card {
    overflow: hidden;
}

.community-stat-card img:hover {
    filter: grayscale(60%);
}

/* ================================================================
   CATEGORY CAROUSEL + SEARCH/SORT — SINGLE AUTHORITATIVE BLOCK
   overflow-y:clip (not hidden) on .categories-nav means the element
   never becomes a vertical scroll container, so finger swipes UP or
   DOWN anywhere in the section always reach the page scroll.
   ================================================================ */

/* -- Mobile = 767px: pills row on top, search+sort row below --- */
@media (max-width: 767px) {
    .shop-controls-row {
        flex-wrap: wrap;
        gap:       0.5rem;
    }

    .shop-controls-row .categories-nav {
        flex:          0 0 100%;
        order:         1;
        border-radius: var(--radius-lg);
        width:         100%;
        max-width:     100%;
    }

    .shop-search-sort {
        flex:        0 0 100%;
        order:       2;
        display:     flex;
        align-items: center;
        gap:         6px;
        padding:     0 0.25cm;
        box-sizing:  border-box;
    }

    #shopSearchBox {
        flex:      1 1 0%;
        min-width: 0;
        transition: flex 0.25s ease;
    }
    #shopSortWrap {
        flex:        1 1 0%;
        min-width:   0;
        flex-shrink: 1;
        transition:  flex 0.25s ease;
        position:    relative;
    }

    #shopSearchBox input,
    .shop-search-sort .search-box input {
        width:      100%    !important;
        min-height: 44px    !important;
        padding:    0.55rem 0.6rem 0.55rem 2rem !important;
        font-size:  0.8rem;
        box-sizing: border-box;
    }
    .shop-search-sort .sort-select select,
    #shopSortWrap select {
        width:      100%    !important;
        max-width:  100%;
        min-width:  0       !important;
        min-height: 44px    !important;
        padding:    0.55rem 1.6rem 0.55rem 0.6rem;
        font-size:  0.8rem;
        box-sizing: border-box;
    }

    .sort-icon-only { display: none; }
}

/* -- Search-expanded: search widens, sort collapses to icon --- */
@media (max-width: 767px) {
    .shop-controls-row.search-expanded #shopSearchBox { flex: 1 1 auto; }

    .shop-controls-row.search-expanded #shopSortWrap {
        flex:            0 0 44px;
        max-width:       44px;
        min-height:      44px;
        border:          1px solid var(--medium-gray, #E8E4DE);
        border-radius:   8px;
        background:      var(--light-gray, #F8F9FA);
        display:         flex;
        align-items:     center;
        justify-content: center;
        overflow:        hidden;
    }
    .shop-controls-row.search-expanded #shopSortWrap select {
        opacity:0 !important; pointer-events:none !important;
        width:0 !important; padding:0 !important; border:none !important;
        position:absolute; height:0;
    }
    .shop-controls-row.search-expanded #shopSortWrap .sort-icon-only {
        display:flex !important; align-items:center; justify-content:center;
        font-size:1rem; color:var(--text-dark,#151515);
        pointer-events:none; width:100%; height:100%;
    }
}

/* -- Sort-active: sort widens, search collapses to icon ------- */
@media (max-width: 767px) {
    .shop-controls-row.sort-active #shopSortWrap {
        flex: 1 1 auto;
        max-width: calc(100% - 52px);
    }
    .shop-controls-row.sort-active #shopSearchBox {
        flex:0 0 44px; max-width:44px; min-height:44px;
        border:1px solid var(--medium-gray,#E8E4DE); border-radius:8px;
        background:var(--light-gray,#F8F9FA);
        display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    .shop-controls-row.sort-active #shopSearchBox input {
        width:0 !important; padding:0 !important; border:none !important;
        opacity:0 !important; pointer-events:none !important; position:absolute;
    }
    .shop-controls-row.sort-active #shopSearchBox i {
        position:static !important; transform:none !important;
        font-size:1rem !important; color:var(--text-dark,#151515) !important;
        display:flex !important; align-items:center; justify-content:center;
        pointer-events:auto; cursor:pointer;
    }
}

/* ================================================================
   CART MODAL — FIX COLLAPSED BODY (height: 0)
   ================================================================ */
#cartModal .modal-content {
    min-height: min(82vh, 560px);
    height:     min(82vh, 560px);
}
@media (max-width: 767px) {
    #cartModal .modal-content {
        min-height: min(88vh, 520px);
        height:     min(88vh, 520px);
        max-height: 92vh;
        width:      calc(100vw - 24px);
        margin:     0 auto;
    }
    #cartModal .modal-body {
        flex:        1 1 auto;
        min-height:  0;
        overflow-y:  auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ================================================================
   PHASE 3 STRUCTURAL UPGRADES
   ================================================================ */

/* -- Hero single image -------------------------------------------- */
/* (The .hero-single-image rules that stood here were removed with the single
   hero image. The hero now renders .hero-frames — see "HERO IMAGE FRAMES"
   below, which is the only place the composition is styled.) */

/* -- Carousel navigation buttons --------------------------------- */
.craft-slider-container {
    position: relative;
    display:  flex;
    align-items: center;
    gap: 0;
}
.craft-slider-container .craft-slider-viewport {
    flex: 1 1 0;
    min-width: 0;
}
.carousel-nav-btn {
    flex-shrink:     0;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--white);
    border:          1px solid var(--medium-gray);
    color:           var(--text-dark);
    font-size:       0.85rem;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         10;
    box-shadow:      0 2px 8px rgba(0,0,0,0.1);
    transition:      background 0.15s, transform 0.15s;
    position:        relative;
}
.carousel-nav-btn:hover {
    background:  var(--text-dark);
    color:       var(--white);
    transform:   scale(1.08);
}
.carousel-prev { margin-right: 10px; }
.carousel-next { margin-left:  10px; }
@media (max-width: 480px) {
    .carousel-nav-btn { width: 34px; height: 34px; font-size: 0.75rem; }
    .carousel-prev { margin-right: 6px; }
    .carousel-next { margin-left:  6px; }
}

/* -- Mobile nav contact button ------------------------------------ */
.mobile-contact-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    color:           inherit;
    text-decoration: none;
}
@media (min-width: 881px) { .mobile-contact-btn { display: none; } }

/* -- Impact section: dark shaded background ------------------------ */
.home-impact-section {
    /* Dark section: scoped overrides so .home-impact-header's title/subtitle
       (which read var(--text-dark)/var(--text-light)) stay readable. */
    --text-dark:   #ffffff;
    --text-light:  #c9c4ba;
    background:    var(--gradient-rich);
    border-top:    1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* -- Category craft-card — neutral fallback + minimal overlay ------ */
.craft-card {
    background-color: #f3eee7; /* neutral fallback when no image loads */
}
.craft-card::before {
    background: none !important;
}

/* -- Contact: combined Get in Touch card -------------------------- */
.contact-card-combined {
    background:    var(--white);
    border:        1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
}
.contact-card-combined h3 {
    font-weight:   600;
    font-size:     1rem;
    color:         var(--text-dark);
    margin-bottom: 1rem;
}
.contact-actions-row {
    display:         flex;
    gap:             0.75rem;
    margin-bottom:   1rem;
    flex-wrap:       wrap;
}
.contact-action-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             4px;
    padding:         0.65rem 1rem;
    border:          1px solid var(--medium-gray);
    border-radius:   var(--radius-md);
    background:      var(--light-gray);
    color:           var(--text-dark);
    text-decoration: none;
    font-size:       0.8rem;
    font-weight:     500;
    transition:      background 0.15s, border-color 0.15s;
    min-width:       72px;
}
.contact-action-btn:hover { background: var(--medium-gray); border-color: var(--text-dark); }
.contact-action-whatsapp:hover { background: #25d366; border-color: #25d366; color: #fff; }
.contact-action-icon { font-size: 1.1rem; }
.contact-details-list {
    display:        flex;
    flex-direction: column;
    gap:            0.4rem;
    margin-bottom:  0.75rem;
}
.contact-hours {
    font-size:  0.78rem;
    color:      var(--text-muted);
    margin-top: 0.25rem;
}

/* -- Footer section headings — adapt to light bg ----------------- */
.footer-bottom {
    border-top: 1px solid var(--medium-gray);
    margin-top: 2rem;
    padding-top: 1.5rem;
}

/* ================================================================
   UX POLISH PASS — colour fixes, sizing, layout
   ================================================================ */

/* -- Desktop nav: tight to avoid overlap with divider + contact btn -- */
.main-nav .nav-link {
    font-size:       0.62rem;
    letter-spacing:  0.04em;
    padding:         0.35rem 0.3rem;   /* reduced from 0.42rem — more room */
}
/* Contact link visible only in mobile nav */
.mobile-only-nav { display: none; }
@media (max-width: 880px) {
    .mobile-only-nav { display: block; }
    .nav-link-contact {
        color: var(--accent-gold) !important;
        font-weight: 700 !important;
    }
}
/* mobile-contact-btn removed from DOM belt-and-suspenders */
.mobile-contact-btn { display: none !important; }

/* -- Hero: reduced text + smaller contained image frame ---------- */
.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.4rem) !important;
}
.hero-description {
    font-size: clamp(0.82rem, 1.2vw, 0.95rem) !important;
}
/* Hero image frame — slightly larger than previous (1cm added each side) */
/* ================================================================
   HERO IMAGE FRAMES — three admin-managed images
   ================================================================
   Replaces the single hero image. The composition keeps the same
   footprint the single image occupied (516 x 416), so the rest of
   the hero layout is unchanged: one tall feature frame on the left
   with two stacked beside it.

       +-----------+-------+
       |           |   2   |
       |     1     +-------+
       |           |   3   |
       +-----------+-------+

   Grid rather than absolute positioning, so the frames stay in
   proportion at every width instead of needing per-breakpoint
   coordinates the way the old five-card composition did.          */
.hero-frames {
    width:         92%;
    max-width:     516px;
    height:        416px;
    margin:        auto;
    flex-shrink:   0;
    display:       grid;
    grid-template-columns: 1.34fr 1fr;
    grid-template-rows:    1fr 1fr;
    gap:           14px;
}

.hero-frame {
    position:      relative;
    overflow:      hidden;
    border-radius: 18px;
    box-shadow:    0 18px 48px rgba(0,0,0,0.18);
    background:    var(--light-gray, #f3eee7);
    transition:    transform 0.35s ease, box-shadow 0.35s ease;
}

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

/* The feature frame spans both rows. */
.hero-frame--1 { grid-column: 1; grid-row: 1 / span 2; }
.hero-frame--2 { grid-column: 2; grid-row: 1; }
.hero-frame--3 { grid-column: 2; grid-row: 2; }

/* The two smaller frames sit slightly tighter than the feature one,
   which keeps the eye on frame 1 without shrinking them awkwardly. */
.hero-frame--2,
.hero-frame--3 { box-shadow: 0 12px 32px rgba(0,0,0,0.15); }

/* -- Composite corner treatment ----------------------------------
   The three frames are read as one block, so only the OUTER corners
   of the composition are rounded and every inner corner stays square:

     +----------+  +-------+     1  top-left  + bottom-left
     |          |  |   2   |     2  top-right
     |    1     |  +-------+     3  bottom-right
     |          |  |   3   |
     +----------+  +-------+

   One radius value across all three outer corners, so the group reads
   as a single rounded rectangle rather than three cards that happen to
   sit near each other. The smaller frames previously carried their own
   14px radius; that is dropped here in favour of the shared 18px.

   This must stay AFTER the uniform `border-radius` on .hero-frame —
   both selectors are one class deep, so source order is what decides. */
.hero-frame--1 { border-radius: 18px 0 0 18px; }
.hero-frame--2 { border-radius: 0 18px 0 0; }
.hero-frame--3 { border-radius: 0 0 18px 0; }

.hero-frame:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0,0,0,0.22); }

/* -- TABLET: same composition, proportional rather than fixed-height
   The hero-right column is much narrower here than the 516px the desktop
   composition assumes, so a fixed 350px height stretched the feature frame
   into a 128x350 sliver. Driving the height from the width keeps every frame
   at the same shape it has on desktop, whatever the column resolves to.   */
@media (min-width: 768px) and (max-width: 1023px) {
    /* The hero stays side by side here, which leaves the image column only
       ~256px wide. Two columns of frames inside 256px produced 110x290
       slivers, so the composition stacks instead: the feature frame runs the
       full width with the two smaller frames beneath it. Same arrangement as
       mobile, sized for the wider column.
       (aspect-ratio was tried first and worked against us — .hero-right is a
        centred flex container, so the height resolved first and the width was
        derived FROM it, shrinking the whole composition.)                  */
    .hero-frames {
        width:      100%;
        max-width:  360px;
        height:     auto;
        gap:        12px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    168px 112px;
    }
    /* The composition rotates here, so the outer corners rotate with it:
       the feature frame now rounds along the TOP, and the two smaller
       frames take the bottom-left and bottom-right. Same rule as desktop
       — round the outside of the block, square everything inside it. */
    .hero-frame--1 { grid-column: 1 / -1; grid-row: 1; border-radius: 14px 14px 0 0; }
    .hero-frame--2 { grid-column: 1; grid-row: 2; border-radius: 0 0 0 14px; }
    .hero-frame--3 { grid-column: 2; grid-row: 2; border-radius: 0 0 14px 0; }
}

/* -- MOBILE: feature frame full width, the other two side by side -
   Three frames in one row would be too small to read on a phone.  */
@media (max-width: 767px) {
    .hero-frames {
        width:      100%;
        max-width:  100%;
        height:     auto;
        margin:     0;
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    200px 128px;
        gap:        10px;
    }
    /* Same reflowed arrangement as tablet, so the same corner logic:
       feature frame rounds along the top, the two beneath take the
       bottom-left and bottom-right outer corners. */
    .hero-frame--1 { grid-column: 1 / -1; grid-row: 1; border-radius: 14px 14px 0 0; }
    .hero-frame--2 { grid-column: 1; grid-row: 2; border-radius: 0 0 0 14px; }
    .hero-frame--3 { grid-column: 2; grid-row: 2; border-radius: 0 0 14px 0; }
    .hero-frame:hover { transform: none; }
}

@media (max-width: 380px) {
    .hero-frames { grid-template-rows: 168px 108px; gap: 8px; }
}

/* -- Category cards: soften dark overlay significantly ----------- */
/* The ::after pseudo creates a gradient from near-black.
   Override to a lighter, warm-tone gradient. */
.craft-card {
    background-color: #f3eee7 !important; /* neutral fallback, keeps focus on the uploaded image */
}
.craft-card::after {
    background: linear-gradient(
        to top,
        rgba(18, 16, 12, 0.18) 0%,
        rgba(18, 16, 12, 0.08) 28%,
        rgba(18, 16, 12, 0.00) 58%
    ) !important;
}

/* -- Contact section: tighten layout, equal widths --------------- */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* equal columns */
    gap: 1.5rem;
    align-items: start;
}
/* On mobile stack them */
@media (max-width: 767px) { .contact-content { grid-template-columns: 1fr; } }

/* Contact info column: fill equal width */
.contact-info {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}
/* Both cards in info column stretch to fill */
.contact-info .contact-card,
.contact-info .contact-card-combined {
    width:     100%;
    box-sizing:border-box;
}
/* Remove excess padding/margin that was creating space */
.contact-card-combined { padding: 1.25rem; }
.contact-card .contact-details { padding: 0; }
/* Slim down the contact-details-list links */
.contact-details-list .contact-link { padding: 0.4rem 0; font-size: 0.88rem; }

/* -- Product images: portrait 3:4 frame, full image visible ------- */
.product-img, .product-image { aspect-ratio: 3/4; overflow: hidden; }
.product-image-content {
    width:          100% !important;
    height:         100% !important;
    object-fit:     contain !important;   /* show full image, no cropping */
    object-position:center !important;
    display:        block;
}

/* -- Hero image frame fix: enforce fixed dimensions --------------- */
.hero-right {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* -- Our Impact community stats: remove top gap ------------------- */
.community-stats-section {
    padding-top: 1.25rem;
}

/* -- Z-index audit — ensure no conflicts -------------------------- */
/* Current: splash=99999 (CSS), cart modal=2000, product panel=auto */
/* Ensure modals/overlays are above each other correctly */
.pm-scroll { z-index: 1500; }  /* product panel below cart */
#cartModal  { z-index: 2000; } /* cart above product panel */
/* Splash is already 99999 via CSS — remains highest */

/* ================================================================
   PAGE HERO SYSTEM — all dedicated & existing secondary pages
   Works without an image (dark text on light bg).
   When JS adds .has-image class ? shows bg image + overlay + white text.
   ================================================================ */
.page-hero {
    position:   relative;
    min-height: 240px;
    display:    flex;
    align-items:center;
    overflow:   hidden;
    background: var(--light-gray);  /* default: clean light bg */
}

/* Background image layer */
.page-hero-bg {
    position: absolute;
    inset:    0;
    z-index:  0;
}
.page-hero-bg img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position:center;
    display:        none;   /* hidden until .has-image */
}
.page-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to bottom, rgba(10,6,3,0.45) 0%, rgba(10,6,3,0.70) 100%);
    opacity:    0;          /* hidden until .has-image */
    transition: opacity 0.3s;
}

/* Content layer sits above bg */
.page-hero-content {
    position:   relative;
    z-index:    1;
    padding:    3rem 1rem;
    text-align: center;
}
.page-hero-content h1,
.page-hero-content .blog-hero-title,
.page-hero-content .supplements-hero-title {
    color:       var(--text-dark);   /* default dark */
    font-family: 'Playfair Display', Georgia, serif;
    font-size:   clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 400;
    margin-bottom: 0.5rem;
    transition:  color 0.3s;
}
.page-hero-content p,
.page-hero-content .blog-hero-subtitle,
.page-hero-content .supplements-hero-subtitle,
.page-hero-content #communityHeroDesc {
    color:       var(--text-light);   /* default muted */
    font-size:   clamp(0.88rem, 1.5vw, 1rem);
    max-width:   600px;
    margin:      0 auto;
    line-height: 1.6;
    transition:  color 0.3s;
}

/* -- When image is loaded: white text + visible overlay ----------- */
.page-hero.has-image .page-hero-bg img     { display: block; }
.page-hero.has-image .page-hero-overlay    { opacity: 1; }
.page-hero.has-image .page-hero-content h1,
.page-hero.has-image .page-hero-content .blog-hero-title,
.page-hero.has-image .page-hero-content .supplements-hero-title,
.page-hero.has-image #communityHeroTitle    { color: #fff !important; }
.page-hero.has-image .page-hero-content p,
.page-hero.has-image .page-hero-content .blog-hero-subtitle,
.page-hero.has-image .page-hero-content .supplements-hero-subtitle,
.page-hero.has-image #communityHeroDesc     { color: rgba(255,255,255,0.82) !important; }

@media (max-width: 480px) {
    .page-hero { min-height: 180px; }
    .page-hero-content { padding: 2rem 1rem; }
}

/* ----------------------------------------------------------------
   DEDICATED PAGE (dp-*) SYSTEM
   Mirrors the Shop page header exactly.
   All new dedicated pages (Locations, FAQs, Care, New Updates)
   use this system — no hero images, no complex overlays,
   just a clean header + content section like #shopPage.
   ---------------------------------------------------------------- */
.dp-header-section {
    background:  var(--white);
    border-bottom: 1px solid var(--medium-gray);
    padding:     2.5rem 0 2rem;
}
.dp-header-content {
    text-align:  center;
}
.dp-eyebrow {
    display:        inline-block;
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--accent-gold);
    margin-bottom:  0.6rem;
}
.dp-title {
    font-family:   'Playfair Display', Georgia, serif;
    font-size:     clamp(1.8rem, 4vw, 2.8rem);
    font-weight:   400;
    color:         var(--text-dark);
    margin-bottom: 0.5rem;
    letter-spacing:-0.01em;
}
.dp-subtitle {
    font-size:   clamp(0.85rem, 1.5vw, 1rem);
    color:       var(--text-light);
    max-width:   540px;
    margin:      0 auto;
    line-height: 1.65;
}
.dp-content-section {
    padding:    2.5rem 0 4rem;
    background: var(--white);
}
@media (max-width: 480px) {
    .dp-header-section { padding: 1.75rem 0 1.5rem; }
    .dp-content-section { padding: 1.75rem 0 3rem; }
}

/* -- Footer: Policies section links — bolded ---------------------- */
/* Target the Policies footer-section specifically by checking h3 text */
footer .footer-section:last-of-type .footer-nav,
footer .footer-section:nth-of-type(3) .footer-nav {
    font-weight: 600;
}
/* More targeted: any footer-nav inside a section whose h3 says "Policies" */
footer .footer-section .footer-nav {
    font-weight: 400;  /* default */
}
/* Policies links — same weight as other footer links (not bold) */
footer .footer-policies-section .footer-nav {
    font-weight: 400;
    color: var(--text-light);
}
/* ================================================================
   FINAL GRID-COLUMN OVERRIDE — placed last so it beats every
   earlier conflicting "stage" rule above (multiple !important
   layers had accumulated over time, leaving Shop locked at 3
   columns and the homepage Featured row locked at 4 on desktop).

   Shop (PC view):           4 product cards per row
   Homepage Featured (PC):   5 product cards per row
   ================================================================ */
@media (min-width: 1024px) {
    .products-grid:not(.home-featured-grid):not(.pm-related-grid) {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }
    .home-featured-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1.5rem !important;
    }
}



/* Community page spacing parity with New Updates */
.community-stats-section:not(:has(.community-stat-card)) {
    display: none !important;
}

#communityPage .award-section {
    margin-top: 0 !important;
    margin-bottom: var(--section-spacing) !important;
    padding-top: 2.5rem !important;
}

/* ================================================================
   MOBILE POLISH FIX PASS — placed last so it beats all earlier rules
   Fixes:
     1. Hero background gap (cream bg must fill behind transparent header)
     2. Arrow badge flush against outer button edges (no inset spacing)
     4. Checkout modal: full-height scroll on Android / small screens
     5. Payment option tap targets + small-phone modal tightening
   ================================================================ */

/* ── 1. Hero gap fix ─────────────────────────────────────────────
   Original: margin-top:header-height leaves a strip of white body bg
   visible between the fixed transparent header and the cream hero bg.
   Fix: push the section to y=0 (bg fills behind header) and compensate
   with padding-top so content still clears the fixed header bar.      */
.hero {
    margin-top: 0 !important;
    padding-top: var(--header-height) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
}
/* Mobile stacked layout: hero uses flex-column.
   padding-top on hero already handles the header offset, so trim
   hero-left's own top padding to avoid a double gap on small screens.  */
@media (max-width: 767px) {
    .hero {
        height: auto !important;
    }
    .hero-left {
        padding-top: 1.75rem !important;
    }
}

/* ── 2. Arrow badge flush against outer button (all four edges) ───
   Root cause of vertical gap: the button has padding-top/bottom 1rem,
   and align-self:stretch only fills the content box (inside padding),
   leaving a ~16px gap at top and bottom of the badge.
   Fix: zero out vertical padding on the button — min-height + align-items:center
   still centres the text. overflow:hidden clips the badge to the border-radius.  */
.hero #heroBtn2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}
.hero #heroBtn2 .btn-arrow-sq,
#heroBtn2 .btn-arrow-sq {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    border-radius: 0 !important;
}
/* Mobile variant: badge stretches full height and pushes to far right */
@media (max-width: 767px) {
    .hero #heroBtn2 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
        padding-left: 1.1rem !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }
    .hero #heroBtn2 .btn-arrow-sq {
        margin-left: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: stretch !important;
        border-radius: 0 !important;
        width: 40px !important;
        font-size: 0.8rem !important;
    }
}

/* ── 4. Checkout modal: full-height scroll on Android ─────────────
   -webkit-overflow-scrolling:touch for smooth inertia on Samsung.   */
@media (max-width: 767px) {
    .checkout-modal .modal-content {
        max-height: 95dvh !important;
        height: 95dvh !important;
    }
    .checkout-content {
        max-height: calc(95dvh - 64px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 5a. Very small phones (≤390px): squeeze modal padding ─────────*/
@media (max-width: 390px) {
    .checkout-modal .modal-content {
        max-height: 98dvh !important;
        height: 98dvh !important;
        border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    }
    .checkout-content {
        max-height: calc(98dvh - 56px) !important;
    }
    .modal-header {
        padding: 0.75rem 1rem !important;
    }
    .modal-body {
        padding: 0.75rem 1rem !important;
    }
}

/* ── 5b. Payment option: larger tap targets on mobile ───────────── */
@media (max-width: 767px) {
    .payment-option-label {
        padding: var(--space-md) !important;
        min-height: 56px;
        align-items: center !important;
    }
    .payment-option-body strong {
        font-size: 0.88rem !important;
    }
    .payment-option-body small {
        font-size: 0.72rem !important;
        margin-top: 1px !important;
    }
}