/* ============================================================
   SITE STYLE SYSTEM — "luxerist" botanical-luxury adaptation
   Profile: luxerist (botanical-luxury commerce)
   Industry: Ayurvedic wellness clinic + herbal commerce
   Brand swap: accent = the site's forest green (one-for-one);
   gold remains the decorative secondary. Structure, neutrals,
   radii ladder, shadow recipes, type treatment and motion kit
   follow the luxerist profile verbatim.
   Load AFTER style.css — this file only overrides.
   ============================================================ */

/* ----------------------------------------------------------
   1. TOKENS — role-named, the single source of truth
   ---------------------------------------------------------- */
:root {
    /* Palette (brand swap: forest green kept, luxerist neutrals adopted) */
    --brand-accent: var(--primary);            /* buttons, prices, active states */
    --brand-accent-dark: var(--primary-dark);  /* press / hover token */
    --brand-accent-soft: var(--primary-ultra-light); /* tinted fills, chips */
    --brand-ink: #1A211B;                      /* charcoal-green ink */
    --brand-muted: #667260;                    /* meta text, kickers (4.6:1 on page) */
    --brand-gold-label: #86691b;               /* dark gold for small caps labels (4.8:1) */
    --brand-page: #f3f6f4;                     /* pale green-tinted page ground */
    --brand-surface: #E9EEE8;                  /* sage fill */
    --brand-line: #E2E7E0;                     /* quiet dividers */
    --lx-card-line: rgba(20, 40, 28, .07);     /* green-tinted hairline */
    --lx-sale: var(--danger);                  /* errors / sale only */

    /* Luxerist glass chrome (one recipe, never per-component) */
    --lx-glass-bg: rgba(255, 253, 251, .62);
    --lx-glass-blur: blur(22px) saturate(180%);
    --lx-glass-border: rgba(255, 255, 255, .55);
    --lx-glass-hi: inset 0 1px 0 rgba(255, 255, 255, .7);

    /* Radii ladder (cards 14 / 18 / 24, controls pill) */
    --r-xs: 10px; --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;

    /* Feather-soft, green-tinted shadows (replaces harsh black) */
    --lx-shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px -8px rgba(28, 48, 33, .06);
    --lx-shadow-float: 0 10px 34px rgba(18, 40, 75, .16), inset 0 1px 0 rgba(255, 255, 255, .7);

    /* iOS motion kit */
    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-tap: 120ms; --dur-fast: 180ms; --dur-base: 260ms; --dur-sheet: 340ms;

    /* Bottom bar geometry */
    --lx-bar-h: 66px;
    --lx-page-bottom: calc(var(--lx-bar-h) + 30px + env(safe-area-inset-bottom, 0px));

    /* ---- Retune the legacy tokens the old stylesheet consumes ---- */
    --bg: var(--brand-page);
    --border: var(--brand-line);
    --radius: var(--r-sm);
    --radius-lg: var(--r-md);
    --shadow: var(--lx-shadow-card);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .04), 0 10px 28px -10px rgba(28, 48, 33, .10);
    --shadow-lg: 0 18px 48px -16px rgba(28, 48, 33, .16), 0 4px 12px rgba(0, 0, 0, .05);
    --shadow-emboss: var(--lx-shadow-card);
    --shadow-emboss-lg: var(--shadow-md);
    --ease: var(--ease-ios);
}

/* ----------------------------------------------------------
   2. TYPOGRAPHY — light display type, bold capped
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    letter-spacing: -0.01em;
}

h1, .hero-slideshow h1 { letter-spacing: -0.02em; }

h1 b, h1 strong, h2 b, h2 strong, h3 b, h3 strong,
b, strong { font-weight: 600; }

/* Light serif display for the biggest headings (Playfair 400) */
h1 { font-weight: 400; }

body, p, li, td, th, input, select, textarea {
    letter-spacing: -0.005em;
}

/* Prices / numerics — money reads confident */
.product-price .price-current,
.product-price .price-old,
.product-price-lg,
.cart-summary span,
.order-total span,
[class*="price"] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Uppercase micro-label eyebrows — one scale (11px / 600 / .1em).
   Gold labels use the dark-gold token: light gold fails contrast
   at this size (2.1:1). */
.section-label,
.product-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-gold-label);
}

.slide-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------
   3. BUTTONS — pill geometry, luxerist reskin
   ---------------------------------------------------------- */
.btn,
button,
input[type="submit"],
select {
    border-radius: var(--r-pill);
}

textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"] {
    border-radius: var(--r-sm);
}

.btn {
    border-width: 1px;
    padding: 0.8rem 1.75rem;
    min-height: 48px;
    font-weight: 500;
    transition: transform var(--dur-tap) var(--ease-ios),
                background var(--dur-fast) var(--ease-ios),
                border-color var(--dur-fast) var(--ease-ios),
                box-shadow var(--dur-base) var(--ease-ios),
                color var(--dur-fast) var(--ease-ios);
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px -8px rgba(27, 94, 32, .35);
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: none;
}

/* Press feedback on everything (touch-first) */
.btn:active,
button:active,
.filter-bar .btn:active,
.bottom-nav-item:active {
    transform: scale(.97);
    transition-duration: var(--dur-tap);
}

/* Hover lifts are touch-gated: no card lift at all in luxerist;
   instead the hairline flips to accent on hover-capable pointers. */
.product-card,
.treatment-card,
.blog-card,
.feature-card,
.plant-card {
    transition: border-color var(--dur-base) var(--ease-ios),
                box-shadow var(--dur-base) var(--ease-ios);
}
@media (hover: hover) {
    .product-card:hover,
    .treatment-card:hover,
    .blog-card:hover,
    .plant-card:hover {
        transform: none;
        border-color: rgba(27, 94, 32, .28);
    }
}

/* ----------------------------------------------------------
   4. CARDS — hairline first, feather shadow second
   ---------------------------------------------------------- */
.product-card,
.treatment-card,
.blog-card,
.feature-card,
.plant-card,
.cart-summary,
.post-content,
.review-card,
.contact-card {
    border: 1px solid var(--lx-card-line);
    box-shadow: var(--lx-shadow-card);
    border-radius: var(--r-md);
}

.product-image img,
.blog-image img,
.treatment-card img {
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* ----------------------------------------------------------
   5. NAVBAR — frosted glass on scroll, no layout shift
   ---------------------------------------------------------- */
.navbar.scrolled {
    background: var(--lx-glass-bg);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--lx-card-line);
    box-shadow: none;
}

/* ----------------------------------------------------------
   6. MOBILE BOTTOM NAV — floating glass pill + raised cart FAB
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
    body {
        padding-bottom: var(--lx-page-bottom);
    }

    .mobile-bottom-nav {
        left: 14px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        height: var(--lx-bar-h);
        justify-content: space-around;
        align-items: center;
        background: var(--lx-glass-bg);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        backdrop-filter: blur(22px) saturate(180%);
        border: 1px solid var(--lx-glass-border);
        border-top: 1px solid var(--lx-glass-border);
        border-radius: var(--r-pill);
        box-shadow: var(--lx-shadow-float);
        padding: 0 10px;
    }

    .bottom-nav-item {
        font-size: 0.625rem;
        font-weight: 500;
        color: var(--brand-muted);
        padding: 6px 4px;
        min-width: 52px;
    }

    /* Inside a floating pill the old top-bar indicator reads wrong —
       active state = accent color + filled icon (handled below). */
    .bottom-nav-item.active::before {
        display: none;
    }

    .bottom-nav-item i { font-size: 1.15rem; }
    .bottom-nav-item.active { color: var(--brand-accent); }

    /* Raised center cart FAB — the luxerist signature */
    .bottom-nav-cart .bottom-nav-cart-icon {
        width: 56px;
        height: 56px;
        margin-top: -28px;
        border-radius: 50%;
        background: var(--brand-accent);
        color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .9);
        box-shadow: 0 10px 22px rgba(18, 40, 75, .30);
        transition: transform var(--dur-tap) var(--ease-ios),
                    background var(--dur-fast) var(--ease-ios);
    }

    .bottom-nav-cart .bottom-nav-cart-icon i { font-size: 1.25rem; }

    .bottom-nav-cart:active .bottom-nav-cart-icon {
        transform: scale(.94);
    }

    /* WhatsApp + back-to-top clear the floating bar */
    .bizchat-fab,
    .bizchat-wrapper {
        bottom: calc(var(--lx-page-bottom) + 4px);
    }

    .back-to-top {
        bottom: calc(var(--lx-page-bottom) + 4px);
    }
}

/* ----------------------------------------------------------
   7. CHIPS, PILLS, BADGES — tinted fills, glass on photos
   ---------------------------------------------------------- */
.product-badge,
.filter-bar .btn {
    border-radius: var(--r-pill);
}

.product-badge {
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product-badge.badge-out {
    background: var(--lx-sale);
}

/* ----------------------------------------------------------
   8. DETAILS — selection, focus, scrollbar, reduced motion
   ---------------------------------------------------------- */
::selection {
    background: var(--brand-accent-soft);
    color: var(--primary-dark);
}

:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

html {
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Cross-page view transitions (navigation only; chrome excluded
   so its backdrop-filter keeps working) */
@view-transition {
    navigation: auto;
}

/* Hide horizontal overflow caused by decorative absolutes */
.section,
.page-header {
    overflow-x: clip;
}