/* ================================================================
   LUFA BASKET — PREMIUM LIGHT THEME SYSTEM v4
   Stage 1: Design Foundation — loads after inline styles.
   Version: 20260617-v4-premium
   ================================================================ */

/* -- DESIGN TOKENS --------------------------------------------- */
:root {
    /* -- 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:     #151515;   /* primary action = near-black */
    --primary-dark:      #000000;
    --primary-light:     #333333;
    --accent-gold:       #B87945;   /* warm accent — use sparingly */
    --accent-terracotta: #B87945;
    --accent-green:      #4A7C59;

    /* Neutralised gradients (kept for selector compat, not displayed) */
    --gradient-light:    linear-gradient(135deg, #F7F5F1 0%, #FFFFFF 100%);
    --gradient-warm:     linear-gradient(135deg, #B87945 0%, #8B6240 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 near-black */
.btn-primary {
    background:   var(--text-dark);
    color:        #fff;
    border-color: var(--text-dark);
    box-shadow:   none;
}
.btn-primary:hover {
    background:   #333333;
    border-color: #333333;
    color:        #fff;
    transform:    none !important;
    box-shadow:   none !important;
}

/* 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(--text-dark);
    color:        #fff;
    border-color: var(--text-dark);
    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(--text-dark);
    color:        #fff;
    border-color: var(--text-dark);
    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(--text-dark);
    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 {
    background:    #f2ede8;   /* warm linen — replaces black */
    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(--accent-gold);
    border-color: var(--accent-gold);
    color:        #fff;
    font-size:    0.72rem;
    min-height:   38px;
    padding:      0.45rem 1rem;
}

.newsletter-form .btn-primary:hover {
    background:   #9e6438;
    border-color: #9e6438;
    color:        #fff;
}

/* ================================================================
   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:      #8C9299 !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:      #8C9299 !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: #9DA3AA !important;
}
#heroBtn2:hover .btn-arrow-sq {
    background: #9DA3AA !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;
    }
}
.home-story-section .founder-section        { display: none !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: #151515 !important;   /* explicit dark, 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: #333333 !important;
    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(20,12,8,0.07) !important;
    border:        1px solid rgba(139,69,19,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(20,12,8,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 on light background ---------------- */
.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:     none;              /* no grayscale — full colour */
    transition: transform 0.5s ease-out;
}

.home-impact-card:hover img {
    transform: scale(1.04);
    filter:    none;
}

/* 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;
}

/* 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 · FOUNDER SECTION
   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;
    }
}

/* -- 3. MEET OUR FOUNDER: re-enable & editorial 2-col layout --- */
/* Override the Stage 4 display:none that hid the founder section */
.home-story-section .founder-section {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   4rem !important;
    align-items:           center !important;
    margin-top:            3.5rem !important;
    padding-top:           3.5rem !important;
    border-top:            1px solid var(--medium-gray) !important;
    position:              relative !important;
}

/* Eyebrow label — shortened to avoid duplication with #founderNameTitle */
.home-story-section .founder-content::before {
    content:        'Founder';
    display:        block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  1rem;
}

/* Founder name/title heading */
.home-story-section .founder-title {
    font-family:    'Playfair Display', Georgia, serif !important;
    font-size:      clamp(1.375rem, 2.5vw, 1.875rem) !important;
    font-weight:    400 !important;
    color:          var(--text-dark) !important;
    margin-bottom:  1.25rem !important;
    letter-spacing: -0.01em !important;
}

/* Founder bio — show only first paragraph (#founderBio1) */
.home-story-section #founderBio1 {
    font-size:     0.92rem !important;
    line-height:   1.75 !important;
    color:         var(--text-light) !important;
    font-weight:   400 !important;
    margin-bottom: 1.5rem !important;
    display:       block !important;
}

/* Hide second and third bio paragraphs */
.home-story-section #founderBio2,
.home-story-section #founderBio3 { display: none !important; }

/* Founder signature — name and title */
.home-story-section .founder-signature {
    display:     flex;
    flex-direction: column;
    gap:         0.25rem;
}

.home-story-section .signature-name {
    font-weight:    600;
    font-size:      0.92rem;
    color:          var(--text-dark);
}

.home-story-section .signature-title {
    font-size: 0.78rem;
    color:     var(--text-muted);
}

/* Founder image column — 3:4 ratio, clean, no decoration */
.home-story-section .founder-image {
    order: -1;  /* image on left */
}

.home-story-section .image-container {
    position: relative;
    width:    100%;
}

.home-story-section .founder-img-wrapper {
    aspect-ratio:  3 / 4;
    overflow:      hidden;
    border-radius: var(--radius-lg);
    background:    var(--light-gray);
    width:         100%;
}

.home-story-section .founder-image-content {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
}

/* Hide decorative elements */
.home-story-section .image-decoration,
.home-story-section .founder-tag { display: none !important; }

/* Mobile: single column, image on top */
@media (max-width: 767px) {
    .home-story-section .founder-section {
        grid-template-columns: 1fr !important;
        gap:    2.5rem !important;
    }

    .home-story-section .founder-image {
        order: -1;   /* still image first */
        max-width: 280px;
        margin:    0 auto;
    }

    .home-story-section .founder-img-wrapper {
        aspect-ratio: 3 / 4;
    }
}

/* -- 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(139, 69, 19, 0.12);
}

.update-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 14px 36px rgba(20, 12, 8, 0.13) !important;
    border-color: rgba(139, 69, 19, 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(139, 69, 19, 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,
.founder-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;
}

.payment-gateway-note {
    margin-top:    0.75rem;
    font-size:     0.75rem;
    color:         var(--text-muted);
    padding:       0.75rem;
    background:    var(--light-gray);
    border-radius: var(--radius-sm);
}

/* 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); }
.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; }
}

/* ================================================================
   MEET OUR FOUNDER — header at top, name/role tags on image
   ================================================================ */

/* Founder section: 3-area grid
   Row 1: header spans full width
   Row 2: image | bio side by side                                 */
.home-story-section .founder-section {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows:    auto 1fr !important;
    gap:                   0 2rem !important;
    margin-top:            2rem !important;
    padding-top:           2rem !important;
    border-top:            1px solid var(--medium-gray) !important;
    max-width:             776px;
    margin-left:           auto;
    margin-right:          auto;
}

/* -- Section header: spans both columns at the very top --------- */
.founder-section-header {
    grid-column:   1 / -1;    /* full width */
    margin-bottom: 1.5rem;
    text-align:    left;
}

/* Eyebrow chip above the h2 */
.founder-eyebrow-label {
    display:        inline-block;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.625rem;
}

/* Founder name heading */
.home-story-section .founder-title {
    font-family:    'Playfair Display', Georgia, serif !important;
    font-size:      clamp(1.25rem, 2.5vw, 1.75rem) !important;
    font-weight:    400 !important;
    color:          var(--text-dark) !important;
    letter-spacing: -0.01em !important;
    margin:         0 !important;
    line-height:    1.2 !important;
}

/* Remove old CSS ::before eyebrow (now a real HTML element) */
.home-story-section .founder-content::before { display: none !important; content: none !important; }

/* -- Image column: RIGHT side ----------------------------------- */
.home-story-section .founder-image {
    position: relative;
    order:    1;    /* image on right, bio on left */
}

.home-story-section .image-container {
    position: relative;
    width:    100%;
}

/* 3:4 portrait image */
.home-story-section .founder-img-wrapper {
    aspect-ratio:  3 / 4 !important;
    overflow:      hidden !important;
    border-radius: var(--radius-lg) !important;
    background:    var(--light-gray);
    position:      relative;
    width:         100%;
}

.home-story-section .founder-image-content {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
}

/* -- Single merged tag — bottom-right of image ------------------ */
/* Transparent pill: no fill, white outline, white text, compact   */
.founder-img-tag {
    position:        absolute;
    bottom:          1rem;
    right:           1rem;
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    padding:         0.3rem 0.75rem;
    border-radius:   var(--radius-full);
    font-size:       0.66rem;
    font-weight:     600;
    letter-spacing:  0.02em;
    white-space:     nowrap;
    z-index:         2;
    background:      transparent;
    color:           #fff;
    border:          1.5px solid rgba(255,255,255,0.60);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-width:       calc(100% - 2rem);
}

.founder-img-tag i { font-size: 0.62rem; opacity: 0.80; }

.founder-tag-name { font-weight: 700; }
.founder-tag-sep  { opacity: 0.55; font-weight: 400; }
.founder-tag-role { font-weight: 400; opacity: 0.90; }

/* -- Bio column ------------------------------------------------- */
.home-story-section .founder-content {
    display:         flex !important;
    flex-direction:  column !important;
    justify-content: center !important;
    padding:         0 !important;
}

/* Show only founderBio1 */
.home-story-section #founderBio1 {
    font-size:   0.92rem !important;
    line-height: 1.75 !important;
    color:       var(--text-light) !important;
    font-weight: 400 !important;
    display:     block !important;
    margin:      0 !important;
}

/* Keep bio2 and bio3 hidden */
.home-story-section #founderBio2,
.home-story-section #founderBio3 { display: none !important; }

/* Hide remaining signature elements (IDs moved to image tags) */
.home-story-section .founder-signature,
.home-story-section .image-decoration,
.home-story-section .founder-tag { display: none !important; }

/* -- Mobile: stack header ? image ? bio ------------------------ */
@media (max-width: 767px) {
    .home-story-section .founder-section {
        grid-template-columns: 1fr !important;
        grid-template-rows:    auto !important;
    }

    .home-story-section .founder-image { order: 0 !important; }
    .home-story-section .founder-content { margin-top: 1.25rem; }
}

/* ================================================================
   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-brown, #8B4513) !important;
    color:            #ffffff !important;
    border:           2px solid var(--brand-brown, #8B4513) !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 -------------------------------------------- */
.hero-single-image {
    width:         100%;
    height:        100%;
    border-radius: var(--radius-xl);
    overflow:      hidden;
    position:      relative;
}
.hero-single-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-xl);
}
@media (max-width: 768px) {
    .hero-single-image {
        height:        340px;
        border-radius: var(--radius-lg);
    }
}

/* -- 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 — lighter background ------------------------ */
.home-impact-section {
    background: var(--light-gray);
    border-top:    1px solid var(--medium-gray);
    border-bottom: 1px solid var(--medium-gray);
}

/* -- 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-single-image {
    width:         92%;
    max-width:     516px;   /* was 440px + ~76px (2cm across) */
    height:        416px;   /* was 340px + ~76px (2cm tall) */
    border-radius: 18px;
    overflow:      hidden;
    margin:        auto;
    box-shadow:    0 18px 48px rgba(0,0,0,0.18);
    flex-shrink:   0;
}
.hero-single-image img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position:center;
    display:        block;
}
@media (max-width: 768px) {
    .hero-single-image { width:100%; max-width:100%; height:300px; border-radius:12px; margin:0; }
}

/* -- 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)
     3. PayPal button container visibility when payment method chosen
     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;
    }
}

/* ── 3. PayPal button container visibility ────────────────────────
   Guarantee a minimum rendered height so the container is never
   invisible when the SDK is still loading its iframe.               */
#paypal-button-container {
    min-height: 55px;
    border-radius: var(--radius-md);
    overflow: visible !important;
    transition: opacity 0.2s;
}

/* ── 4. Checkout modal: full-height scroll on Android ─────────────
   Taller modal so PayPal buttons aren't clipped off-screen.
   -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;
    }
    /* Give the PayPal container a subtle border so user knows
       something will render there (even before SDK loads)           */
    #paypal-button-container:not([style*="display: none"]) {
        border: 1px solid var(--medium-gray);
        padding: 6px;
        background: var(--white);
    }
}