.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
        :root {
            --bg:        #f4f0e6;
            --bg2:       #ede8dc;
            --bg3:       #e6e0d2;
            --surface:   #faf7f0;
            --surface2:  #f2ede3;
            --border:    rgba(30,61,38,0.1);
            --border-md: rgba(30,61,38,0.22);
            --border-hi: rgba(30,61,38,0.42);
            --forest:    #1a3d26;
            --forest2:   #255c38;
            --forest3:   #3d7a52;
            --text:      #1a2e1f;
            --text-2:    #5a6e60;
            --text-3:    #8a9e8e;
            --warn:      #c07820;
            --r:         10px;
            --r-lg:      16px;
            --r-xl:      22px;
        }

        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Raleway', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        body::before {
            content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.022;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* ── HEADER ── */
        header { position:fixed; top:0; left:0; right:0; z-index:300; transition:all 0.4s ease; }
        header.scrolled { background:rgba(244,240,230,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
        .header-inner { max-width:1300px; margin:0 auto; padding:0 2.5rem; height:68px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
        .header-brand { display:flex; align-items:center; cursor:pointer; }
        .header-logo { display:flex; align-items:center; justify-content:center; width:42px; height:42px; background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.32); border-radius:10px; transition:all 0.3s; }
        .header-logo:hover { background:rgba(255,255,255,0.25); }
        header.scrolled .header-logo { background:var(--forest); border-color:var(--forest); }
        .logo-vip { font-family:'Raleway',sans-serif; font-size:0.72rem; font-weight:800; letter-spacing:2px; color:#fff; }
        .header-nav { display:flex; align-items:center; gap:0.2rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; opacity:0; pointer-events:none; transition:opacity 0.3s; }
        header.scrolled .header-nav { opacity:1; pointer-events:auto; }
        .header-nav::-webkit-scrollbar { display:none; }
        .header-nav-btn { padding:0.42rem 1rem; background:transparent; border:none; font-family:'Raleway',sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:1px; color:rgba(255,255,255,0.72); cursor:pointer; transition:all 0.2s; white-space:nowrap; border-radius:6px; position:relative; }
        .header-nav-btn::after { content:''; position:absolute; bottom:2px; left:50%; right:50%; height:1.5px; background:rgba(255,255,255,0.8); transition:all 0.25s ease; border-radius:2px; }
        .header-nav-btn:hover { color:#fff; }
        .header-nav-btn:hover::after, .header-nav-btn.active::after { left:15%; right:15%; }
        .header-nav-btn.active { color:#fff; }
        header.scrolled .header-nav-btn { color:var(--text-3); }
        header.scrolled .header-nav-btn::after { background:var(--forest); }
        header.scrolled .header-nav-btn:hover, header.scrolled .header-nav-btn.active { color:var(--forest); }
        .cart-btn { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.35); border-radius:100px; padding:0.48rem 1.2rem; color:#fff; font-family:'Raleway',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:1px; cursor:pointer; transition:all 0.3s; justify-self:end; }
        .cart-btn:hover { background:rgba(255,255,255,0.26); }
        header.scrolled .cart-btn { background:var(--forest); border-color:var(--forest); color:var(--bg); }
        header.scrolled .cart-btn:hover { background:var(--forest2); }
        .cart-badge { background:#fff; color:var(--forest); border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:0.62rem; font-weight:800; }
        header.scrolled .cart-badge { background:var(--bg); }
        @media(max-width:640px) { .header-inner{padding:0 1rem;} .header-nav-btn{font-size:0.68rem;padding:0.38rem 0.65rem;letter-spacing:0.3px;} }

        /* ── HERO ── */
        .hero {
            position: relative; min-height:600px; min-height:100dvh;
            display:flex; align-items:center; justify-content:center;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute; inset:0;
            background: url('../img/hero-bg.jpg') center center / cover no-repeat;
        }

        .hero-overlay {
            position: absolute; inset:0;
            background: linear-gradient(to bottom,
                rgba(10,20,14,0.2) 0%,
                rgba(10,20,14,0.38) 50%,
                rgba(10,20,14,0.58) 100%);
        }

        .hero-content {
            position: relative; z-index:2;
            text-align:center; padding:0 2rem;
            animation: heroFade 1.2s ease both;
        }

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

        .hero h1 {
            font-family: 'Cormorant Garamond', serif;
            font-size: clamp(3.5rem, 7vw, 6.5rem);
            font-weight:600; color:#fff;
            letter-spacing:-1px; line-height:1.0;
            margin-bottom:0.9rem;
            text-shadow: 0 2px 30px rgba(0,0,0,0.3);
            animation: heroFade 1.2s 0.15s ease both;
        }

        .hero h1 em { font-style:italic; font-weight:400; }

        .hero-tagline {
            font-family: 'Cormorant Garamond', serif;
            font-style:italic; font-size:1.3rem; font-weight:400;
            color: rgba(255,255,255,0.78); letter-spacing:1px;
            margin-bottom:2.5rem;
            animation: heroFade 1.2s 0.28s ease both;
        }

        .hero-cta {
            display:inline-flex; align-items:center; gap:10px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.42);
            border-radius:100px; padding:0.72rem 2rem;
            font-family:'Raleway',sans-serif;
            font-size:0.78rem; font-weight:600;
            color:#fff; letter-spacing:2px; text-transform:uppercase;
            cursor:pointer; transition:all 0.3s; text-decoration:none;
            animation: heroFade 1.2s 0.4s ease both;
        }

        .hero-cta:hover { background: rgba(255,255,255,0.26); }

        .scroll-indicator {
            position:absolute; bottom:2.5rem; left:50%;
            transform:translateX(-50%); z-index:2;
            animation: heroFade 1.2s 0.6s ease both;
        }

        .scroll-circle {
            width:34px; height:34px; border-radius:50%;
            border: 1px solid rgba(255,255,255,0.4);
            display:flex; align-items:center; justify-content:center;
            color:rgba(255,255,255,0.65); font-size:0.9rem;
            animation: bounce 2.2s infinite;
        }

        @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

        /* ── BC TAGLINE STRIP ── */
        .bc-strip {
            background: var(--forest);
            padding: 1.1rem 3rem;
            text-align:center;
        }

        .bc-strip-text {
            font-family: 'Cormorant Garamond', serif;
            font-style:italic; font-size:1.15rem; font-weight:400;
            color: rgba(244,240,230,0.85); letter-spacing:0.5px;
        }

        /* ── CATEGORY NAV ── */
        .cat-nav {
            background: var(--surface2);
            border-bottom: 1px solid var(--border);
            position: sticky; top:0; z-index:100;
        }

        .cat-nav-inner {
            max-width:1300px; margin:0 auto;
            padding:0 3rem;
            display:flex; align-items:center;
            overflow-x:auto;
        }

        .cat-tab {
            padding:1.3rem 2.2rem;
            font-family:'Raleway',sans-serif;
            font-size:0.85rem; font-weight:700;
            letter-spacing:2px; text-transform:uppercase;
            color: var(--text-3);
            border-bottom:3px solid transparent;
            cursor:pointer; transition:all 0.25s;
            white-space:nowrap; background:none;
            border-top:none; border-left:none; border-right:none;
            position: relative;
        }

        .cat-tab:hover { color:var(--forest2); }
        .cat-tab.active { color:var(--forest); border-bottom-color:var(--forest); }

        /* ── CATEGORY HERO ── */
        .cat-hero {
            position:relative; height:520px;
            display:flex; align-items:flex-end;
            overflow:hidden;
        }

        .cat-hero-bg {
            position:absolute; inset:0;
            background-size:cover; background-position:center;
            transition:opacity 0.25s ease;
        }

        .cat-hero-content { transition: opacity 0.25s ease; }

        .cat-hero-overlay {
            position:absolute; inset:0;
            background: linear-gradient(to bottom,
                rgba(10,20,14,0.08) 0%,
                rgba(10,20,14,0.25) 50%,
                rgba(10,20,14,0.72) 100%);
        }

        .cat-hero-content {
            position:relative; z-index:2;
            padding:2.8rem 3rem;
            max-width:1300px; width:100%; margin:0 auto;
        }

        .cat-hero-label {
            font-family:'Raleway',sans-serif;
            font-size:0.62rem; font-weight:600;
            letter-spacing:3px; text-transform:uppercase;
            color:rgba(255,255,255,0.5); margin-bottom:0.5rem;
        }

        .cat-hero-title {
            font-family:'Cormorant Garamond',serif;
            font-size:clamp(2.8rem,5.5vw,4.5rem);
            font-weight:600; color:#fff;
            letter-spacing:-0.5px; line-height:1.0;
            text-shadow:0 2px 20px rgba(0,0,0,0.3);
        }

        .cat-hero-sub {
            font-family:'Cormorant Garamond',serif;
            font-style:italic; font-size:1.15rem;
            color:rgba(255,255,255,0.68); margin-top:0.5rem;
        }

        /* ── PRODUCTS ── */
        .products-section {
            background: var(--bg);
            padding: 3rem 3rem 5rem;
        }

        .products-inner { max-width:1300px; margin:0 auto; }

        .products-eyebrow {
            font-family:'Raleway',sans-serif;
            font-size:0.65rem; font-weight:600;
            letter-spacing:2px; text-transform:uppercase;
            color:var(--text-3);
            padding-bottom:1.2rem; margin-bottom:2rem;
            border-bottom:1px solid var(--border);
        }

        .grid {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
            gap:1.5rem;
        }

        /* ── PRODUCT CARD ── */
        .card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-xl);
            overflow: hidden;
            display:flex; flex-direction:column;
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
            opacity:0; animation: cardIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
            box-shadow: 0 2px 12px rgba(26,61,38,0.06);
        }

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

        .card.oos { animation: cardInDim 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
        @keyframes cardInDim {
            from { opacity:0; transform:translateY(14px); }
            to   { opacity:0.65; transform:translateY(0); }
        }

        .card:not(.oos):hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(26,61,38,0.14);
            border-color: var(--border-md);
        }

        .card-vis {
            height:195px; position:relative; overflow:hidden;
            background-size:cover; background-position:center;
        }

        .card-vis-overlay {
            position:absolute; inset:0;
            background: linear-gradient(to bottom,
                rgba(244,240,230,0) 35%,
                rgba(244,240,230,0.88) 100%);
        }

        .stock-badge {
            position:absolute; top:12px; right:12px;
            padding:0.28rem 0.68rem; border-radius:100px;
            font-family:'Raleway',sans-serif;
            font-size:0.62rem; font-weight:700;
            letter-spacing:0.5px; text-transform:uppercase; z-index:2;
        }

        .badge-in  { background:rgba(26,61,38,0.85); color:#e8f0ea; }
        .badge-low { background:rgba(140,90,10,0.85); color:#faeeda; }
        .badge-oos { background:rgba(100,30,30,0.75); color:#fce8e8; }
        .badge-inquire { background:rgba(26,61,38,0.8); color:#e8f4ea; }

        .card-body {
            padding:1.4rem 1.5rem 1.3rem;
            display:flex; flex-direction:column; gap:0.85rem; flex:1;
        }

        .card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:0.8rem; }

        .card-name {
            font-family:'Cormorant Garamond',serif;
            font-size:1.3rem; font-weight:600;
            color:var(--forest); line-height:1.15;
        }

        .card-dosage {
            font-family:'JetBrains Mono',monospace;
            font-size:0.62rem; color:var(--text-3);
            background:var(--bg3); border:1px solid var(--border);
            border-radius:4px; padding:0.22rem 0.55rem;
            white-space:nowrap; flex-shrink:0;
        }

        .card-desc {
            font-family:'Raleway',sans-serif;
            font-size:0.8rem; color:var(--text-2);
            line-height:1.65; font-weight:400;
        }

        .card-benefits { display:flex; flex-direction:column; gap:0.38rem; }

        .benefit {
            display:flex; align-items:flex-start; gap:8px;
            font-size:0.76rem; color:var(--text-2);
            font-family:'Raleway',sans-serif;
        }

        .bpip { width:12px; height:1px; background:var(--forest3); flex-shrink:0; margin-top:8px; opacity:0.5; }

        .lab-tag {
            font-family:'Raleway',sans-serif;
            font-size:0.66rem; font-weight:500; color:var(--text-3);
            border-top:1px solid var(--border); padding-top:0.6rem;
        }

        /* ── KIT INFO ── */
        .kit-info {
            font-family:'Raleway',sans-serif; font-size:0.65rem; font-weight:600;
            letter-spacing:1px; text-transform:uppercase; color:var(--text-3);
            padding:0.35rem 0; display:flex; align-items:center; gap:0.45rem;
        }
        .kit-info-sep { opacity:0.35; }

        /* ── KIT SELECTOR (legacy — unused, kept for OOS fallback) ── */
        .kit-selector { display:flex; gap:0.4rem; margin-top:0.2rem; }

        .kit-opt {
            flex:1; padding:0.5rem 0.3rem;
            border:1px solid var(--border); border-radius:7px;
            background:transparent;
            font-family:'Raleway',sans-serif;
            font-size:0.68rem; font-weight:600;
            color:var(--text-2); cursor:pointer;
            transition:all 0.18s; text-align:center; line-height:1.3;
        }

        .kit-opt:hover { border-color:var(--border-md); color:var(--forest); }

        .kit-opt.selected {
            background:var(--forest); border-color:var(--forest); color:var(--bg);
        }

        .kit-opt.maxed {
            opacity:0.45; cursor:not-allowed;
            border-color:var(--border); color:var(--text-3);
        }

        .kit-opt .opt-label { display:block; font-size:0.6rem; opacity:0.7; font-weight:500; }
        .kit-opt .opt-price { display:block; font-size:0.82rem; font-weight:700; margin-top:1px; }
        .kit-opt .opt-qty   { display:block; font-size:0.57rem; opacity:0.55; font-weight:400; }
        .kit-opt .opt-max   { display:block; font-size:0.57rem; color:var(--warn); font-weight:600; margin-top:1px; }

        .card-footer {
            margin-top:auto; padding-top:1rem;
            border-top:1px solid var(--border);
            display:flex; align-items:center; justify-content:space-between; gap:0.8rem;
        }

        .price-block .price {
            font-family:'Cormorant Garamond',serif;
            font-size:1.5rem; font-weight:600;
            color:var(--forest); line-height:1;
        }

        .price-block .currency { font-family:'Raleway',sans-serif; font-size:0.62rem; color:var(--text-3); margin-top:1px; }

        .add-btn {
            padding:0.52rem 1.1rem;
            background:var(--forest); color:var(--bg);
            border:none; border-radius:7px; cursor:pointer;
            font-family:'Raleway',sans-serif;
            font-size:0.74rem; font-weight:700;
            letter-spacing:0.8px; text-transform:uppercase;
            transition:all 0.2s; white-space:nowrap;
        }

        .add-btn:hover { background:var(--forest2); transform:translateY(-1px); }

        .oos-tag {
            padding:0.45rem 0.9rem; background:transparent; color:var(--text-3);
            border:1px solid var(--border); border-radius:7px;
            font-family:'Raleway',sans-serif; font-size:0.72rem; font-weight:500;
        }

        .price-oos .price { text-decoration:line-through; opacity:0.4; color:var(--text-3); }
        .price-oos .currency { opacity:0.4; }



        /* ── FAQ SECTION ── */
        .faq-section {
            background: var(--surface2);
            padding: 6rem 3rem;
            border-top: 1px solid var(--border);
        }

        .faq-inner { max-width: 900px; margin: 0 auto; }

        .faq-header { text-align:left; margin-bottom:3.5rem; }

        .faq-label {
            font-family:'Raleway',sans-serif;
            font-size:0.62rem; font-weight:600;
            letter-spacing:3px; text-transform:uppercase;
            color:var(--text-3); margin-bottom:0.8rem;
        }

        .faq-title {
            font-family:'Cormorant Garamond',serif;
            font-size:clamp(2rem,4vw,3rem);
            font-weight:600; color:var(--forest);
            letter-spacing:-0.5px; line-height:1.1;
        }

        .faq-title em { font-style:italic; font-weight:400; }

        .faq-grid { display:flex; flex-direction:column; gap:0; }

        .faq-item {
            border-bottom: 1px solid var(--border);
        }

        .faq-item:first-child { border-top: 1px solid var(--border); }

        .faq-q {
            width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
            padding:1.4rem 0;
            background:transparent; border:none; cursor:pointer;
            font-family:'Raleway',sans-serif; font-size:0.92rem; font-weight:600;
            color:var(--forest); text-align:left; transition:all 0.2s;
        }

        .faq-q:hover { color:var(--forest2); }

        .faq-q.open .faq-icon { transform:rotate(45deg); }

        .faq-icon {
            font-size:1.2rem; font-weight:300; color:var(--forest3);
            flex-shrink:0; transition:transform 0.25s ease;
            width:24px; height:24px; display:flex; align-items:center; justify-content:center;
        }

        .faq-a {
            display:grid; grid-template-rows:0fr;
            font-family:'Raleway',sans-serif;
            font-size:0.85rem; color:var(--text-2); line-height:1.75;
            transition: grid-template-rows 0.35s cubic-bezier(0.4,0,0.2,1);
        }

        .faq-a.open { grid-template-rows:1fr; }

        .faq-a-inner { overflow:hidden; }
        .faq-a.open .faq-a-inner { padding:0 0 1.6rem; }

        .faq-a p { margin-bottom:0.9rem; }
        .faq-a p:last-child { margin-bottom:0; }

        .faq-a ol {
            padding-left:1.2rem; margin:0.8rem 0 1rem;
            display:flex; flex-direction:column; gap:0.65rem;
        }

        .faq-a ol li { line-height:1.65; }
        .faq-a ol li strong { color:var(--forest); font-weight:600; }

        .faq-note {
            background:rgba(26,61,38,0.05);
            border:1px solid rgba(26,61,38,0.14);
            border-radius:6px;
            padding:0.7rem 1rem;
            font-size:0.78rem; color:var(--text-3);
            font-style:italic;
            margin-top:1rem !important;
        }

        /* ── LIFESTYLE STRIP (bottom) ── */
        .lifestyle-strip {
            display:grid; grid-template-columns:1fr 1fr;
            min-height:440px;
        }

        .lifestyle-img {
            position:relative;
            background: #1a3d26 url('../img/hero-bg.jpg') center center / cover no-repeat;
        }

        .lifestyle-img::after {
            content:''; position:absolute; inset:0;
            background:rgba(26,61,38,0.1);
        }

        .lifestyle-text {
            background:var(--forest);
            padding:4.5rem;
            display:flex; flex-direction:column;
            justify-content:center; gap:1.4rem;
        }

        .lifestyle-label {
            font-family:'Raleway',sans-serif;
            font-size:0.62rem; font-weight:600;
            letter-spacing:3px; text-transform:uppercase;
            color:rgba(244,240,230,0.42);
        }

        .lifestyle-title {
            font-family:'Cormorant Garamond',serif;
            font-style:italic; font-weight:400;
            font-size:2.8rem; color:#f4f0e6;
            line-height:1.1; letter-spacing:-0.3px;
        }

        .lifestyle-body {
            font-family:'Raleway',sans-serif;
            font-size:0.88rem; font-weight:400;
            color:rgba(244,240,230,0.68); line-height:1.8; max-width:360px;
        }

        .lifestyle-list { display:flex; flex-direction:column; gap:0.6rem; }

        .lifestyle-list-item {
            display:flex; align-items:center; gap:10px;
            font-family:'Raleway',sans-serif;
            font-size:0.8rem; font-weight:500;
            color:rgba(244,240,230,0.72);
        }

        .lifestyle-list-item::before {
            content:''; width:18px; height:1px;
            background:rgba(244,240,230,0.3); flex-shrink:0;
        }

        /* ── FOOTER ── */
        footer { background:var(--forest); padding:4rem 3rem; }

        .footer-inner {
            max-width:1300px; margin:0 auto;
            display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; align-items:start;
        }

        .footer-brand-name {
            font-family:'Raleway',sans-serif; font-size:0.92rem; font-weight:700;
            color:#f4f0e6; margin-bottom:0.4rem;
        }

        .footer-tagline {
            font-family:'Cormorant Garamond',serif; font-style:italic;
            font-size:1rem; color:rgba(244,240,230,0.58); margin-bottom:1rem;
        }

        .footer-disc {
            font-family:'Raleway',sans-serif; font-size:0.7rem;
            color:rgba(244,240,230,0.36); line-height:1.65;
        }

        .footer-col-title {
            font-family:'Raleway',sans-serif; font-size:0.62rem; font-weight:700;
            letter-spacing:2px; text-transform:uppercase;
            color:rgba(244,240,230,0.38); margin-bottom:1rem;
        }

        .footer-links { display:flex; flex-direction:column; gap:0.6rem; }

        .footer-links a {
            font-family:'Raleway',sans-serif; font-size:0.82rem;
            color:rgba(244,240,230,0.6); text-decoration:none; transition:color 0.2s;
        }

        .footer-links a:hover { color:#f4f0e6; }

        .footer-bottom {
            background:rgba(0,0,0,0.2); padding:1.2rem 3rem;
            text-align:center; font-family:'Raleway',sans-serif;
            font-size:0.65rem; color:rgba(244,240,230,0.28); letter-spacing:0.5px;
        }

        /* ── MODAL ── */
        .overlay {
            display:none; position:fixed; inset:0;
            background:rgba(10,20,14,0.62);
            backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
            z-index:500; align-items:center; justify-content:center; padding:1rem;
        }

        .overlay.open { display:flex; animation:fadeIn 0.22s ease; }
        @keyframes fadeIn { from{opacity:0}to{opacity:1} }

        .panel {
            background:var(--surface); border:1px solid var(--border-md);
            border-radius:var(--r-xl); width:100%; max-width:500px;
            max-height:92vh; overflow-y:auto;
            box-shadow:0 40px 100px rgba(10,20,14,0.35);
            animation:slideUp 0.28s cubic-bezier(0.4,0,0.2,1);
        }

        .panel::before { content:''; display:block; height:3px; background:var(--forest); border-radius:var(--r-xl) var(--r-xl) 0 0; }

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

        .panel-head {
            display:flex; align-items:center; justify-content:space-between;
            padding:1.3rem 1.7rem; border-bottom:1px solid var(--border);
            position:sticky; top:0; background:var(--surface); z-index:10;
        }

        .panel-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:600; color:var(--forest); }

        .panel-close {
            background:var(--bg2); border:1px solid var(--border); color:var(--text-2);
            width:30px; height:30px; border-radius:6px; cursor:pointer;
            display:flex; align-items:center; justify-content:center; font-size:1rem; transition:all 0.15s;
        }

        .panel-close:hover { color:var(--forest); border-color:var(--border-hi); }

        .panel-body { padding:1.6rem; }

        .cart-item {
            display:flex; align-items:center; gap:1rem;
            padding:0.9rem 0; border-bottom:1px solid var(--border);
        }

        .ci-info { flex:1; min-width:0; }
        .ci-name { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:600; color:var(--forest); }
        .ci-sub  { font-family:'Raleway',sans-serif; font-size:0.72rem; color:var(--text-2); margin-top:2px; }

        .ci-qty { display:flex; align-items:center; gap:5px; }

        .cq-btn {
            width:26px; height:26px; background:var(--bg2);
            border:1px solid var(--border); color:var(--text-2);
            border-radius:5px; cursor:pointer; font-size:0.88rem; transition:all 0.15s;
        }

        .cq-btn:hover { color:var(--forest); border-color:var(--border-hi); }

        .cq-val { font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:var(--forest); min-width:18px; text-align:center; }

        .ci-remove {
            background:rgba(168,48,48,0.07); border:1px solid rgba(168,48,48,0.15);
            color:#a83030; padding:0.28rem 0.6rem; border-radius:4px;
            font-size:0.72rem; cursor:pointer; font-family:'Raleway',sans-serif; transition:all 0.15s;
        }

        .ci-remove:hover { background:rgba(168,48,48,0.14); }

        .cart-empty { text-align:center; padding:3rem 1rem; color:var(--text-3); font-family:'Raleway',sans-serif; }

        .summary-box {
            background:var(--bg2); border:1px solid var(--border);
            border-radius:var(--r); padding:1.1rem; margin-top:1.4rem;
        }

        .sum-row { display:flex; justify-content:space-between; font-family:'Raleway',sans-serif; font-size:0.85rem; color:var(--text-2); margin-bottom:0.55rem; }

        .sum-row.total {
            font-size:0.95rem; color:var(--forest); font-weight:700;
            border-top:1px solid var(--border); padding-top:0.65rem; margin-top:0.2rem; margin-bottom:0;
        }

        .sum-row.total .tv { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:600; }

        .btn-primary {
            width:100%; padding:0.88rem;
            background:var(--forest); color:var(--bg);
            border:none; border-radius:9px; cursor:pointer;
            font-family:'Raleway',sans-serif; font-weight:700; font-size:0.78rem;
            letter-spacing:1.5px; text-transform:uppercase; margin-top:1rem; transition:all 0.2s;
        }

        .btn-primary:hover:not(:disabled) { background:var(--forest2); transform:translateY(-1px); }
        .btn-primary:disabled { background:var(--bg3); color:var(--text-3); cursor:not-allowed; }

        .btn-ghost {
            width:100%; padding:0.75rem; background:transparent; color:var(--text-2);
            border:1px solid var(--border); border-radius:9px; cursor:pointer;
            font-family:'Raleway',sans-serif; font-size:0.78rem; margin-top:0.5rem; transition:all 0.2s;
        }

        .btn-ghost:hover { color:var(--forest); border-color:var(--border-hi); }

        .cart-view {} .cart-view.hide { display:none; }
        .checkout-view { display:none; } .checkout-view.show { display:block; }
        .post-order-view { display:none; } .post-order-view.show { display:block; }
        .success-view { display:none; text-align:center; padding:2rem 0; } .success-view.show { display:block; }

        .form-section {
            font-family:'Raleway',sans-serif; font-size:0.65rem; text-transform:uppercase;
            letter-spacing:2px; color:var(--text-3); margin:1.5rem 0 1rem;
            display:flex; align-items:center; gap:8px;
        }

        .form-section::after { content:''; flex:1; height:1px; background:var(--border); }

        .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
        .fg-full { grid-column:1/-1; }

        .fg label {
            display:block; font-family:'Raleway',sans-serif; font-size:0.68rem; font-weight:600;
            color:var(--text-2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.38rem;
        }

        .fg input {
            width:100%; padding:0.65rem 0.85rem; background:var(--bg2); border:1px solid var(--border);
            border-radius:7px; color:var(--text); font-family:'Raleway',sans-serif; font-size:0.88rem; transition:all 0.15s;
        }

        .fg input:focus { outline:none; border-color:var(--forest3); background:var(--surface); box-shadow:0 0 0 3px rgba(26,61,38,0.08); }
        .fg input::placeholder { color:var(--text-3); }

        .info-notice {
            background:rgba(26,61,38,0.05); border:1px solid rgba(26,61,38,0.12);
            border-radius:10px; padding:1rem; margin-top:1rem;
            display:flex; flex-direction:column; gap:0.6rem;
        }

        .info-row { display:flex; align-items:flex-start; gap:8px; font-family:'Raleway',sans-serif; font-size:0.79rem; color:var(--text-2); line-height:1.5; }
        .info-row .ipip { width:12px; height:1px; background:var(--forest3); flex-shrink:0; margin-top:8px; opacity:0.5; }

        .post-order-steps { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1.4rem; }

        .po-step { display:flex; align-items:flex-start; gap:12px; padding:0.9rem; background:var(--bg2); border:1px solid var(--border); border-radius:10px; }

        .step-num {
            width:22px; height:22px; border-radius:50%;
            background:rgba(26,61,38,0.1); border:1px solid rgba(26,61,38,0.25);
            color:var(--forest); font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:700;
            display:flex; align-items:center; justify-content:center; flex-shrink:0;
        }

        .step-text { font-family:'Raleway',sans-serif; font-size:0.82rem; color:var(--text-2); line-height:1.5; }
        .step-text strong { color:var(--forest); font-weight:600; }

        .po-notices { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:1rem; margin-bottom:1.2rem; display:flex; flex-direction:column; gap:0.55rem; }
        .notice-row { display:flex; align-items:flex-start; gap:8px; font-family:'Raleway',sans-serif; font-size:0.78rem; color:var(--text-3); line-height:1.45; }
        .notice-row .np { width:12px; height:1px; background:var(--warn); flex-shrink:0; margin-top:8px; }

        .success-icon { width:60px; height:60px; background:rgba(26,61,38,0.08); border:1.5px solid rgba(26,61,38,0.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 1.2rem; animation:popIn 0.4s cubic-bezier(0.4,0,0.2,1); }
        @keyframes popIn { from{transform:scale(0.4);opacity:0}to{transform:scale(1);opacity:1} }

        .success-title { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:600; color:var(--forest); margin-bottom:0.7rem; }
        .success-body  { font-family:'Raleway',sans-serif; font-size:0.88rem; color:var(--text-2); line-height:1.65; margin-bottom:1.3rem; }

        .success-note { background:rgba(26,61,38,0.06); border:1px solid rgba(26,61,38,0.15); border-radius:10px; padding:1rem; font-family:'Raleway',sans-serif; font-size:0.82rem; color:var(--forest3); text-align:left; margin-bottom:1.5rem; line-height:1.6; }

        .toast { position:fixed; bottom:2rem; right:2rem; background:var(--forest); color:var(--bg); border-radius:10px; padding:0.82rem 1.2rem; font-family:'Raleway',sans-serif; font-size:0.82rem; font-weight:600; z-index:9999; box-shadow:0 8px 30px rgba(26,61,38,0.3); transform:translateY(80px); opacity:0; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); max-width:280px; }
        .toast.show { transform:translateY(0); opacity:1; }

        ::-webkit-scrollbar { width:4px; }
        ::-webkit-scrollbar-track { background:var(--bg2); }
        ::-webkit-scrollbar-thumb { background:var(--forest3); border-radius:2px; }

        @media(max-width:900px) {
            .lifestyle-strip { grid-template-columns:1fr; }
            .lifestyle-img { height:300px; }
            .footer-inner { grid-template-columns:1fr 1fr; gap:2rem; }
        }
        @media(max-width:640px) {
            .footer-inner { grid-template-columns:1fr; }
        }

        @media(max-width:640px) {
            .header-inner, .products-section, .cat-nav-inner, .cat-hero-content { padding-left:1.5rem; padding-right:1.5rem; }
            .lifestyle-text { padding:2.5rem; }
            .grid { grid-template-columns:1fr; }
            .form-grid { grid-template-columns:1fr; }
            .hero h1 { font-size:3rem; }
        }

        /* ── SEO CONTENT SECTION ── */
        .seo-section { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:5rem 2.5rem; }
        .seo-inner { max-width:900px; margin:0 auto; }
        .seo-header { margin-bottom:2.5rem; }
        .seo-label { font-family:'Raleway',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--forest3); margin-bottom:0.75rem; }
        .seo-title { font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:500; color:var(--forest); line-height:1.25; }
        .seo-title em { font-style:italic; color:var(--forest3); }
        .seo-body p { font-family:'Raleway',sans-serif; font-size:0.95rem; color:var(--text-2); line-height:1.8; margin-bottom:1.25rem; }
        .seo-body h3 { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-weight:600; color:var(--forest); margin:2rem 0 0.75rem; }
        .seo-body strong { color:var(--text); font-weight:600; }
        @media(max-width:640px) {
            .seo-section { padding:3.5rem 1.5rem; }
            .seo-title { font-size:1.7rem; }
        }

/* ── SEO Specs Table ─────────────────────────────────────────────────────── */
.seo-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}
.seo-specs-table th {
    background: rgba(26,61,38,0.08);
    color: var(--forest);
    text-align: left;
    padding: 0.6rem 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.75rem;
    border-bottom: 2px solid var(--border-md);
}
.seo-specs-table td {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.seo-specs-table tr:last-child td { border-bottom: none; }
.seo-specs-table tr:hover td { background: rgba(26,61,38,0.03); }

/* ── SEO Disclaimer ──────────────────────────────────────────────────────── */
.seo-disclaimer {
    font-size: 0.82rem;
    color: var(--text-3);
    font-style: italic;
    border: 1px solid var(--border-md);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    background: rgba(26,61,38,0.03);
    margin: 1rem 0;
}

/* -- Lab Report Button --------------------------------------------------- */
.report-btn {
    background: transparent;
    border: 1px solid var(--forest3);
    color: var(--forest);
    font-size: 0.7rem;
    font-family: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-block;
}
.report-btn:hover {
    border-color: var(--forest);
    color: var(--bg);
    background: var(--forest);
}
.lab-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* -- Lab Report Modal ---------------------------------------------------- */
.report-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.report-modal.open { display: flex; }
.report-modal-inner {
    background: #111;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.report-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.report-modal-title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
.report-modal-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}
.report-modal-close:hover { color: #fff; }
.report-modal-body { flex: 1; overflow: hidden; min-height: 0; }
.report-iframe {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: none;
    background: #fff;
}
.report-modal-foot {
    padding: 12px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}
.report-download-btn {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 14px;
    border-radius: 4px;
    transition: color 0.2s, border-color 0.2s;
}
.report-download-btn:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
@media (max-width: 600px) {
    .report-modal-inner { max-height: 95vh; }
    .report-iframe { min-height: 360px; }
}