/* ==========================================================================
   VERIDEX BIOSCIENCES — Design System
   Built to Veridex Brand Identity System, 2026 Edition.
   Palette ratio: 70% ink + forest / 20% off white / 10% mint accents.
   Guideline constraints: no gradients, no gold, no shadows.
   ========================================================================== */
:root {
  /* --- Core palette (brand book p.03) --- */
  --ink:         #090C0F;   /* INK         */
  --panel:       #0D1518;   /* PANEL       */
  --forest:      #142522;   /* FOREST      */
  --deep-green:  #2F8E70;   /* DEEP GREEN  */
  --mint:        #5AC599;   /* MINT        */
  --mint-bright: #75DDB3;   /* BRIGHT MINT */
  --off-white:   #F5F8FF;   /* OFF WHITE   */
  --slate:       #92A0B1;   /* SLATE       */

  /* --- Semantic surface tokens --- */
  --bg:          var(--ink);
  --bg-2:        var(--panel);
  --bg-card:     var(--forest);
  --bg-card-2:   #1A302B;   /* forest, one step up for hover states */

  /* --- Semantic accent tokens (10% of the composition) --- */
  --accent:      var(--mint);
  --accent-h:    var(--mint-bright);
  --accent-deep: var(--deep-green);
  --accent-dim:  rgba(90,197,153,0.07);
  --accent-dim2: rgba(90,197,153,0.15);

  /* --- Type tokens (20% off white) --- */
  --text:        var(--off-white);
  --text-2:      var(--slate);
  --text-3:      #808E9B;   /* slate, dimmed — WCAG AA (4.75:1) on forest cards */

  /* --- Lines --- */
  --border:      rgba(90,197,153,0.18);
  --border-2:    #1E2E2B;

  /* --- Status --- */
  --red:         #E96A80;   /* AA on forest cards (5.2:1) and ink (6.4:1) */
  --green:       var(--mint);

  /* --- Geometry --- */
  --radius:      10px;
  --radius-lg:   16px;
  --transition:  0.22s ease;

  /* Depth is expressed with borders and surface steps, never shadow.
     --shadow / --shadow-glow are retired; kept as `none` so any
     stray reference degrades cleanly instead of breaking. */
  --shadow:      none;
  --shadow-glow: none;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--bg);color:var(--text);font-family:'Manrope','Segoe UI',system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--accent-h);}
h1,h2,h3,h4,h5{line-height:1.25;font-weight:700;letter-spacing:-0.01em;}
h1{font-size:clamp(2rem,4vw,3.2rem);}
h2{font-size:clamp(1.5rem,3vw,2.2rem);}
h3{font-size:1.2rem;}
p{color:var(--text-2);}
.accent{color:var(--accent);}
.muted{color:var(--text-3);}
.container{max-width:1240px;margin:0 auto;padding:0 24px;}
.container-sm{max-width:820px;margin:0 auto;padding:0 24px;}
.section{padding:80px 0;}
.section-sm{padding:48px 0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.flex{display:flex;align-items:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.text-center{text-align:center;}
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}.mt-48{margin-top:48px;}
.mb-8{margin-bottom:8px;}.mb-16{margin-bottom:16px;}.mb-24{margin-bottom:24px;}.mb-32{margin-bottom:32px;}
.w-full{width:100%;}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius);font-weight:600;font-size:.95rem;cursor:pointer;transition:all var(--transition);border:none;text-decoration:none;white-space:nowrap;}
.btn-primary{background:var(--accent);color:#000;}
.btn-primary:hover{background:var(--accent-h);color:#000;transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent);}
.btn-outline:hover{background:var(--accent-dim2);color:var(--accent);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text-2);border:1.5px solid var(--border-2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:8px 18px;font-size:.875rem;}
.btn-lg{padding:16px 40px;font-size:1.05rem;border-radius:12px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;}
.badge-accent{background:var(--accent-dim2);color:var(--accent);border:1px solid var(--border);}
.badge-green{background:rgba(90,197,153,.12);color:var(--green);border:1px solid rgba(90,197,153,.25);}
.badge-gold{background:rgba(90,197,153,.12);color:var(--mint);border:1px solid rgba(90,197,153,.25);}
/* Notice bar */
.notice-bar{background:var(--accent);color:#000;text-align:center;padding:10px;font-size:.82rem;font-weight:600;}
.notice-bar a{color:#000;text-decoration:underline;}
/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(9,12,15,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-2);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px;}
.logo{font-size:1.25rem;font-weight:800;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px;flex-shrink:0;letter-spacing:1px;}
.logo span{color:var(--accent);}
.logo-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.nav{display:flex;align-items:center;gap:4px;}
.nav a{padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--text-2);transition:all var(--transition);}
.nav a:hover,.nav a.active{color:var(--text);background:var(--accent-dim2);}
.nav a.nav-cta{background:var(--accent);color:#000;font-weight:700;padding:8px 18px;}
.nav a.nav-cta:hover{background:var(--accent-h);}
.header-actions{display:flex;align-items:center;gap:12px;}
.cart-btn{position:relative;background:var(--bg-card);border:1px solid var(--border-2);border-radius:8px;padding:8px 14px;color:var(--text-2);cursor:pointer;transition:all var(--transition);font-size:.9rem;display:flex;align-items:center;gap:8px;text-decoration:none;}
.cart-btn:hover{border-color:var(--accent);color:var(--accent);}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--accent);color:#000;width:18px;height:18px;border-radius:50%;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.mobile-menu-btn{display:none;background:none;border:1px solid var(--border-2);color:var(--text-2);padding:8px;border-radius:8px;cursor:pointer;line-height:0;}
.mobile-menu-btn svg{width:20px;height:20px;}
/* Mobile nav drop-down — the .nav is hidden below 768px until the burger opens it */
@media(max-width:768px){
  .nav.is-open{display:flex;flex-direction:column;gap:4px;position:absolute;inset:100% 0 auto 0;background:var(--bg-2);border-bottom:1px solid var(--border-2);padding:16px;z-index:60;}
  .nav.is-open a{padding:12px 14px;font-size:1rem;}
}
/* Breadcrumb */
.breadcrumb{font-size:.82rem;color:var(--text-3);padding:20px 0 0;}
.breadcrumb a{color:var(--text-3);}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{margin:0 6px;}
.breadcrumb .cur{color:var(--text-2);}
/* Hero */
.hero{padding:100px 0 80px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;background:transparent;pointer-events:none;}
.hero::after{content:'';position:absolute;bottom:-100px;left:-100px;width:400px;height:400px;background:transparent;pointer-events:none;}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--accent-dim2);border:1px solid var(--border);color:var(--accent);padding:6px 16px;border-radius:20px;font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px;}
.hero h1{margin-bottom:20px;}
.hero p{font-size:1.1rem;margin-bottom:36px;max-width:480px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px;}
.hero-stats{display:flex;gap:32px;padding-top:24px;border-top:1px solid var(--border-2);flex-wrap:wrap;}
.hero-stat .num{font-size:1.8rem;font-weight:800;color:var(--accent);}
.hero-stat .lbl{font-size:.8rem;color:var(--text-3);}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;}
.hero-img-wrap{position:relative;border-radius:var(--radius-lg);overflow:visible;border:1px solid var(--border);border-color:var(--accent);}
.hero-img-wrap svg{width:100%;border-radius:var(--radius-lg);}
/* The vial columns are flex items. Flex items default to min-width:auto, which
   floors them at the image's intrinsic 400px width — so the inline width:120px
   was being ignored and each vial rendered 400x868. min-width:0 lets them
   shrink; flex:1 1 0 then shares the row evenly. */
.hero-img-wrap > div{min-width:0;flex:1 1 0;max-width:132px;}
.hero-img-wrap img{width:100%;height:auto;display:block;}
.hero-badge-float{position:absolute;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(12px);}
.hero-badge-float.top-left{top:20px;left:-20px;}
.hero-badge-float.bot-right{bottom:20px;right:-20px;}
.hbf-icon{width:36px;height:36px;background:var(--accent-dim2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.1rem;}
.hbf-text .t1{font-size:.75rem;color:var(--text-3);}
.hbf-text .t2{font-size:.9rem;font-weight:700;color:var(--text);}
/* Page header (interior pages) */
.page-hero{padding:56px 0 48px;text-align:center;}
.page-hero .eyebrow{display:inline-block;color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;}
.page-hero p{max-width:640px;margin:0 auto;}
/* Section headers */
.section-header{margin-bottom:48px;}
.section-header.center{text-align:center;}
.section-header .eyebrow{display:inline-block;color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;}
.section-header h2{margin-bottom:12px;}
.section-header p{max-width:560px;}
.section-header.center p{margin:0 auto;}
/* Category grid */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:64px;}
.cat-card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:28px 24px;cursor:pointer;transition:all var(--transition);text-decoration:none;display:block;}
.cat-card:hover{border-color:var(--accent);background:var(--bg-card-2);transform:translateY(-3px);}
.cat-icon{width:52px;height:52px;background:var(--accent-dim2);border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px;}
.cat-card h3{font-size:1rem;margin-bottom:4px;color:var(--text);}
.cat-card p{font-size:.82rem;color:var(--text-3);margin-bottom:14px;}
.cat-count{font-size:.78rem;color:var(--accent);font-weight:600;}
/* Product card */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.product-card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition);display:flex;flex-direction:column;}
.product-card:hover{border-color:var(--border);transform:translateY(-3px);}
.product-img{aspect-ratio:1;overflow:hidden;background:var(--panel);position:relative;display:flex;align-items:center;justify-content:center;padding:10px;}
.product-img svg{width:100%;height:100%;}
/* Vial renders are 400x868 (roughly 1:2.17) sitting in a 1:1 box. The global
   img{max-width:100%} constrains width only, so height overflows and the
   bottom of the vial gets clipped by overflow:hidden.
   Constrain by height instead, and cap it well short of the box so the vial
   sits inset rather than filling edge to edge — at 100% it reads oversized
   and the cap collides with the absolutely-positioned stock badge. */
.product-img img{width:auto;height:auto;max-height:70%;max-width:52%;object-fit:contain;}
.product-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px;z-index:2;}
.product-body{padding:16px;flex:1;display:flex;flex-direction:column;}
.product-category{font-size:.72rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.product-card h3{font-size:.92rem;line-height:1.35;margin-bottom:8px;color:var(--text);}
.product-card h3 a{color:inherit;}
.product-card h3 a:hover{color:var(--accent);}
.product-research{font-size:.78rem;color:var(--text-3);margin-bottom:16px;flex:1;}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid var(--border-2);}
.product-price{font-size:1.15rem;font-weight:800;color:var(--text);}
.product-price .currency{font-size:.8rem;color:var(--text-3);font-weight:400;margin-left:2px;}
/* Trust bar */
.trust-bar{background:var(--bg-2);border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);padding:12px 0;}
.trust-bar .inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:32px;}
.trust-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-2);font-weight:500;}
.trust-dot{width:4px;height:4px;background:var(--border-2);border-radius:50%;}
/* Trust cards */
.trust-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.trust-card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:28px 22px;text-align:center;}
.trust-card-icon{width:56px;height:56px;background:var(--accent-dim2);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 16px;}
.trust-card h3{font-size:.95rem;margin-bottom:6px;}
.trust-card p{font-size:.82rem;}
/* FAQ */
.faq-list{max-width:780px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border-2);}
.faq-q{width:100%;background:none;border:none;color:var(--text);font-size:1rem;font-weight:600;text-align:left;padding:20px 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color var(--transition);}
.faq-q:hover{color:var(--accent);}
.faq-q .icon{width:24px;height:24px;border:1.5px solid var(--border-2);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;transition:all var(--transition);color:var(--accent);}
.faq-item.open .faq-q .icon{background:var(--accent);color:#000;border-color:var(--accent);}
.faq-a{display:none;padding:0 0 20px;color:var(--text-2);font-size:.95rem;line-height:1.7;}
.faq-item.open .faq-a{display:block;}
.faq-cat-label{color:var(--accent);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:40px 0 8px;}
.faq-cat-label:first-child{margin-top:0;}
/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition);display:flex;flex-direction:column;}
.blog-card:hover{border-color:var(--border);transform:translateY(-3px);}
.blog-img{height:180px;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;overflow:hidden;}
.blog-img::before{content:'';position:absolute;inset:0;background:transparent;}
.blog-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.blog-category{font-size:.72rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.blog-card h3{font-size:1rem;margin-bottom:8px;}
.blog-card h3 a{color:var(--text);}
.blog-card h3 a:hover{color:var(--accent);}
.blog-card p{font-size:.85rem;flex:1;margin-bottom:16px;}
.blog-meta{font-size:.78rem;color:var(--text-3);display:flex;align-items:center;gap:12px;}
.article-body{max-width:760px;margin:0 auto;}
.article-body h2{margin:40px 0 16px;}
.article-body h3{margin:28px 0 12px;}
.article-body p{margin-bottom:18px;}
.article-body ul,.article-body ol{color:var(--text-2);margin:0 0 18px 22px;}
.article-body li{margin-bottom:8px;}
/* CTA Banner */
.cta-banner{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:60px 48px;text-align:center;position:relative;overflow:hidden;}
.cta-banner::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:transparent;}
.cta-banner h2{margin-bottom:12px;}
.cta-banner p{margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto;}
.cta-banner .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
/* Footer */
.site-footer{background:var(--bg-2);border-top:1px solid var(--border-2);padding:64px 0 32px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-brand p{font-size:.875rem;margin:12px 0 20px;max-width:280px;}
.footer-social{display:flex;gap:10px;}
.social-btn{width:38px;height:38px;background:var(--bg-card);border:1px solid var(--border-2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--text-2);transition:all var(--transition);text-decoration:none;}
.social-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.footer-col h4{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:16px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{color:var(--text-2);font-size:.875rem;transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--accent);}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border-2);display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.footer-bottom p{font-size:.8rem;color:var(--text-3);}
.disclaimer{background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.2);border-radius:8px;padding:14px 18px;font-size:.8rem;color:var(--text-3);max-width:600px;line-height:1.6;}
.disclaimer strong{color:var(--red);}
/* Product detail page */
.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding:32px 0 0;}
.pd-gallery{position:sticky;top:100px;}
.pd-img-main{background:var(--panel);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:32px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1.05;}
.pd-img-main svg{width:70%;height:100%;}
.pd-img-main img{width:auto;height:auto;max-height:86%;max-width:52%;object-fit:contain;}
.pd-category{font-size:.8rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.pd-title{font-size:1.9rem;margin-bottom:14px;}
.pd-badges{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.pd-desc{font-size:1.02rem;margin-bottom:24px;}
.pd-variants{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;}
.pd-variant{border:1.5px solid var(--border-2);border-radius:var(--radius);padding:12px 18px;cursor:pointer;background:var(--bg-card);transition:all var(--transition);}
.pd-variant.active,.pd-variant:hover{border-color:var(--accent);background:var(--accent-dim2);}
.pd-variant .v-dose{font-weight:700;font-size:.95rem;color:var(--text);}
.pd-variant .v-price{font-size:.82rem;color:var(--text-3);}
.pd-buybox{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:24px;margin-bottom:28px;}
.pd-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;}
.pd-price{font-size:2rem;font-weight:800;}
.pd-price .currency{font-size:1rem;color:var(--text-3);font-weight:500;}
.pd-buy-actions{display:flex;gap:12px;}
.pd-buy-actions .btn{flex:1;justify-content:center;}
.pd-specs{width:100%;border-collapse:collapse;margin-bottom:8px;}
.pd-specs tr{border-bottom:1px solid var(--border-2);}
.pd-specs td{padding:12px 4px;font-size:.88rem;}
.pd-specs td:first-child{color:var(--text-3);width:42%;}
.pd-specs td:last-child{color:var(--text);font-weight:600;}
.pd-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-2);margin:56px 0 28px;}
.pd-tab-btn{padding:12px 20px;font-weight:600;font-size:.9rem;color:var(--text-3);border-bottom:2px solid transparent;cursor:default;}
.pd-tab-btn.active{color:var(--accent);border-color:var(--accent);}
.related-strip{margin-top:64px;}
/* Forms */
.form-field{margin-bottom:20px;}
.form-field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px;color:var(--text-2);}
.form-field input,.form-field select,.form-field textarea{width:100%;background:var(--bg-card);border:1.5px solid var(--border-2);border-radius:var(--radius);padding:12px 14px;color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color var(--transition);}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);}
.form-field textarea{resize:vertical;min-height:120px;}
.contact-card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:32px;}
.info-row{display:flex;gap:14px;margin-bottom:22px;align-items:flex-start;}
.info-row .ic{width:40px;height:40px;background:var(--accent-dim2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;}
.info-row h4{font-size:.92rem;margin-bottom:4px;color:var(--text);}
.info-row p{font-size:.85rem;margin:0;}
/* Tables (calculator, legal) */
.calc-card{background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:32px;}
.calc-result{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:20px;text-align:center;}
.calc-result .r-num{font-size:2rem;font-weight:800;color:var(--accent);}
.calc-result .r-lbl{font-size:.82rem;color:var(--text-3);}
.legal-body h2{margin:36px 0 14px;font-size:1.2rem;}
.legal-body p,.legal-body li{font-size:.92rem;color:var(--text-2);margin-bottom:14px;}
.legal-body ul{margin-left:22px;}
.legal-updated{color:var(--text-3);font-size:.85rem;margin-bottom:32px;}
/* Cart / Account */
.cart-table{width:100%;border-collapse:collapse;}
.cart-table th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:0 0 16px;border-bottom:1px solid var(--border-2);}
.cart-table td{padding:20px 0;border-bottom:1px solid var(--border-2);font-size:.9rem;}
.empty-state{text-align:center;padding:64px 24px;background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius-lg);}
.empty-state .e-icon{font-size:3rem;margin-bottom:16px;}
.account-tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap;}
.account-tabs a{padding:10px 18px;border-radius:var(--radius);background:var(--bg-card);border:1px solid var(--border-2);font-size:.88rem;font-weight:600;color:var(--text-2);}
.account-tabs a.active{background:var(--accent-dim2);border-color:var(--accent);color:var(--accent);}
/* Responsive */
@media(max-width:1024px){.product-grid{grid-template-columns:repeat(3,1fr);}.cat-grid{grid-template-columns:repeat(2,1fr);}.trust-cards{grid-template-columns:repeat(2,1fr);}.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}.hero-inner{gap:40px;}.pd-layout{grid-template-columns:1fr;}.pd-gallery{position:static;}}
@media(max-width:768px){.hero-inner{grid-template-columns:1fr;}
  /* Keep the vial lineup on phones — it's the most persuasive asset on the page.
     It moves below the CTAs and crops to two vials so label type stays readable. */
  .hero-visual{order:2;margin-top:4px;}
  .hero-img-wrap > div:nth-child(3),.hero-img-wrap > div:nth-child(4){display:none;}
  .hero-img-wrap > div{max-width:150px;}
  .hero-badge-float.top-left{top:8px;left:8px;}
  .hero-badge-float.bot-right{bottom:8px;right:8px;}
  .logo span{display:none;}
  .product-grid{grid-template-columns:repeat(2,1fr);}.cat-grid{grid-template-columns:1fr 1fr;}.blog-grid{grid-template-columns:1fr;}.grid-2,.grid-3{grid-template-columns:1fr;}.footer-grid{grid-template-columns:1fr;}.nav{display:none;}.mobile-menu-btn{display:flex;}.section{padding:56px 0;}.hero{padding:60px 0 48px;}.hero-stats{flex-wrap:wrap;gap:20px;}}
@media(max-width:480px){.product-grid{grid-template-columns:1fr 1fr;}.cat-grid{grid-template-columns:1fr;}.trust-cards{grid-template-columns:1fr 1fr;}.cta-banner{padding:40px 24px;}}

/* ==========================================================================
   Cart & checkout
   ========================================================================== */
.cart-lines{display:flex;flex-direction:column;gap:2px;margin-bottom:28px;}
.cart-line{display:grid;grid-template-columns:72px 1fr auto auto;gap:18px;align-items:center;
  background:var(--bg-card);border:1px solid var(--border-2);border-radius:var(--radius);padding:14px 18px;}
.cart-line-img{width:72px;height:96px;background:var(--panel);border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cart-line-img img{width:auto;height:86%;max-width:100%;object-fit:contain;}
.cart-line-name{color:var(--text);font-weight:700;font-size:1rem;display:block;}
.cart-line-name:hover{color:var(--accent);}
.cart-line-dose{color:var(--text-2);font-size:.88rem;margin-top:2px;}
.cart-line-remove{background:none;border:none;color:var(--text-3);font-size:.82rem;cursor:pointer;
  padding:4px 0;margin-top:6px;font-family:inherit;text-decoration:underline;}
.cart-line-remove:hover{color:var(--red);}
.cart-line-price{font-weight:700;font-size:1.05rem;min-width:80px;text-align:right;}

.cart-qty{display:flex;align-items:center;gap:2px;border:1px solid var(--border-2);
  border-radius:8px;overflow:hidden;}
.cart-qty button{background:var(--panel);border:none;color:var(--text);width:32px;height:32px;
  cursor:pointer;font-size:1.05rem;font-family:inherit;transition:background var(--transition);}
.cart-qty button:hover{background:var(--accent-dim2);color:var(--accent);}
.cart-qty span{min-width:34px;text-align:center;font-weight:600;font-size:.92rem;}

.cart-summary{background:var(--bg-card);border:1px solid var(--border-2);
  border-radius:var(--radius-lg);padding:24px;}
.cart-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  color:var(--text-2);font-size:.94rem;}
.cart-row.cart-total{border-top:1px solid var(--border-2);margin-top:8px;padding-top:16px;
  color:var(--text);font-weight:700;font-size:1.18rem;}
.cart-nudge{font-size:.86rem;color:var(--accent);background:var(--accent-dim);
  border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:14px;}
.cart-nudge.free{color:var(--mint-bright);}

.checkout-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:start;}
.checkout-form{background:var(--bg-card);border:1px solid var(--border-2);
  border-radius:var(--radius-lg);padding:28px;}
.checkout-aside{position:sticky;top:92px;}
.checkout-form .grid-2{gap:16px;}

.etransfer-box{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 22px;margin-top:8px;}
.etransfer-box strong{color:var(--accent);}

/* the vial chips are now interactive */
.pd-variant{cursor:pointer;}
.pd-variant:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.pd-tab-btn{cursor:pointer;text-decoration:none;}

@media(max-width:820px){
  .checkout-grid{grid-template-columns:1fr;gap:28px;}
  .checkout-aside{position:static;}
  .cart-line{grid-template-columns:56px 1fr auto;gap:12px;padding:12px;}
  .cart-line-img{width:56px;height:76px;}
  .cart-line-price{grid-column:2/-1;text-align:left;min-width:0;}
}

/* ==========================================================================
   Order confirmation — a receipt, not a terminal dump
   ========================================================================== */
.order-confirm{max-width:780px;margin:0 auto;}
.oc-head{text-align:center;padding:8px 0 36px;}
.oc-check{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  background:var(--accent);color:var(--ink);font-size:2rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;}
.oc-head h2{margin-bottom:10px;}
.oc-head p{font-size:1.02rem;}
.oc-head p strong{color:var(--text);}
.oc-ref{display:inline-block;margin-top:18px;padding:8px 18px;border-radius:20px;
  background:var(--accent-dim2);border:1px solid var(--border);color:var(--text-2);
  font-size:.9rem;letter-spacing:.02em;}
.oc-ref strong{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;margin-left:6px;}

.oc-warn{background:rgba(226,86,110,.08);border:1px solid rgba(226,86,110,.25);
  border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;
  font-size:.9rem;color:var(--text-2);line-height:1.6;}

.oc-panel{background:var(--bg-card);border:1px solid var(--border-2);
  border-radius:var(--radius-lg);padding:26px 28px;margin-bottom:20px;}
.oc-panel h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-3);margin-bottom:18px;font-weight:700;}
.oc-pay{border-color:var(--accent);}
.oc-pay .oc-sub{font-size:.9rem;margin:-8px 0 20px;}

.oc-pay-list{display:flex;flex-direction:column;gap:1px;}
.oc-pay-list > div{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--border-2);}
.oc-pay-list > div:last-child{border-bottom:none;}
.oc-pay-list dt{color:var(--text-2);font-size:.9rem;}
.oc-pay-list dd{display:flex;align-items:center;gap:10px;color:var(--text);
  font-size:.95rem;text-align:right;}
.oc-pay-list dd.oc-strong{font-weight:700;font-size:1.08rem;color:var(--accent);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em;}

.oc-copy{background:var(--panel);border:1px solid var(--border-2);color:var(--text-3);
  border-radius:6px;padding:4px 10px;font-size:.75rem;font-family:inherit;cursor:pointer;
  transition:all var(--transition);letter-spacing:.02em;}
.oc-copy:hover{border-color:var(--accent);color:var(--accent);}
.oc-copy.is-copied,.btn.is-copied{border-color:var(--accent);color:var(--accent);}

.oc-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;}
.oc-grid .oc-panel{margin-bottom:0;}

.oc-items{width:100%;border-collapse:collapse;}
.oc-items td{padding:12px 0;border-bottom:1px solid var(--border-2);
  font-size:.92rem;vertical-align:top;}
.oc-items .oc-qty{width:38px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.oc-items .oc-name{display:block;color:var(--text);font-weight:600;}
.oc-items .oc-dose{display:block;color:var(--text-3);font-size:.82rem;margin-top:2px;}
.oc-items .oc-amt{text-align:right;color:var(--text);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.oc-items tfoot td{color:var(--text-2);border-bottom:none;padding:8px 0;}
.oc-items tfoot .oc-total td{border-top:1px solid var(--border-2);padding-top:16px;
  color:var(--text);font-weight:700;font-size:1.1rem;}

.oc-address{font-style:normal;color:var(--text-2);line-height:1.85;font-size:.92rem;}
.oc-address strong{color:var(--text);}
.oc-notes{font-size:.9rem;}

.oc-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:32px 0 0;}
.oc-foot{text-align:center;color:var(--text-3);font-size:.78rem;margin-top:28px;
  letter-spacing:.04em;text-transform:uppercase;}

@media(max-width:760px){
  .oc-grid{grid-template-columns:1fr;}
  .oc-pay-list > div{flex-direction:column;align-items:flex-start;gap:8px;}
  .oc-pay-list dd{text-align:left;}
}

/* Printed receipt: drop the site chrome, invert to ink on white */
@media print{
  .site-header,.site-footer,.notice-bar,.breadcrumb,.oc-actions,.oc-copy,
  .trust-bar,.mobile-menu-btn{display:none !important;}
  body{background:#fff !important;color:#000 !important;}
  .oc-panel{background:#fff !important;border:1px solid #ccc !important;
    break-inside:avoid;}
  .oc-check{background:#000 !important;color:#fff !important;}
  .oc-head h2,.oc-items .oc-name,.oc-address strong,.oc-items tfoot .oc-total td{color:#000 !important;}
  .oc-panel h3,.oc-address,.oc-items td,.oc-head p{color:#333 !important;}
  .oc-pay-list dd.oc-strong,.oc-ref strong{color:#000 !important;}
  a[href]:after{content:"";}
}

.oc-note{margin-top:18px;padding:14px 18px;border-radius:var(--radius);
  background:var(--accent-dim);border:1px solid var(--border);
  font-size:.88rem;line-height:1.65;color:var(--text-2);}
.oc-note strong{color:var(--text);}
.oc-note em{color:var(--accent);font-style:normal;}

/* --- Welcome offer (cart) ------------------------------------------------ */
.gift-box{border:1px solid var(--accent-dim2);background:var(--accent-dim);border-radius:var(--radius);padding:18px 20px;margin:18px 0;}
.gift-box-locked{border-style:dashed;}
.gift-title{font-weight:700;color:var(--text);margin-bottom:10px;}
.gift-options{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;}
.gift-option{display:flex;align-items:center;gap:8px;color:var(--text);cursor:pointer;}
.gift-option input{accent-color:var(--mint);width:16px;height:16px;}
.gift-free{color:var(--mint);font-weight:800;font-size:.85rem;letter-spacing:.04em;}
.gift-fine{color:var(--text-2);font-size:.8rem;margin-top:10px;line-height:1.5;}
.gift-tag{color:var(--mint);font-weight:700;}
.cart-qty-fixed{justify-content:center;color:var(--text-2);}

/* Neutral informational note on the receipt (e.g. welcome-vial eligibility) —
   distinct from .oc-warn, which stays reserved for real failures. */
.oc-info{background:var(--accent-dim);border:1px solid var(--accent-dim2);
  border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;
  font-size:.9rem;color:var(--text-2);line-height:1.6;}

/* --- Welcome-offer popup ------------------------------------------------- */
.vdx-popup-overlay{position:fixed;inset:0;background:rgba(9,12,15,.78);backdrop-filter:blur(3px);
  z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;
  animation:vdxFade .25s ease;}
@keyframes vdxFade{from{opacity:0}to{opacity:1}}
.vdx-popup{position:relative;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:40px 36px 28px;max-width:440px;width:100%;
  text-align:center;animation:vdxUp .3s ease;}
@keyframes vdxUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.vdx-popup-icon{font-size:2.4rem;margin-bottom:10px;}
.vdx-popup h3{font-size:1.45rem;margin-bottom:12px;color:var(--text);}
.vdx-popup-lead{color:var(--text-2);margin-bottom:8px;line-height:1.6;}
.vdx-popup-lead strong{color:var(--accent);}
.vdx-popup-sub{color:var(--text-2);font-size:.92rem;margin-bottom:22px;}
.vdx-popup-x{position:absolute;top:12px;right:16px;background:none;border:none;
  color:var(--text-3);font-size:1.5rem;cursor:pointer;line-height:1;padding:4px;}
.vdx-popup-x:hover{color:var(--text);}
.vdx-popup-no{display:block;margin:14px auto 0;background:none;border:none;
  color:var(--text-3);font-size:.82rem;cursor:pointer;text-decoration:underline;}
.vdx-popup-no:hover{color:var(--text-2);}
.vdx-popup-fine{color:var(--text-3);font-size:.72rem;margin-top:16px;line-height:1.5;}

/* Receipt resources line */
.oc-resources{text-align:center;color:var(--text-2);font-size:.88rem;margin:20px 0 6px;}

/* ==== Mobile polish ==== */
.ti-check{color:var(--mint);font-weight:800;margin-right:8px;}
.blog-img svg{width:54px;height:54px;}
.cart-btn svg{flex-shrink:0;}
@media(max-width:768px){
  .container,.container-sm{padding:0 16px;}
  .header-inner{gap:10px;}
  .logo{font-size:.98rem;letter-spacing:.5px;gap:7px;}
  .logo-icon{width:28px;height:28px;}
  .cart-btn{padding:7px 10px;font-size:.85rem;gap:6px;}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;}
  .hero-stat .num{font-size:1.35rem;}
  .hero-stat .lbl{font-size:.75rem;}
  .trust-dot{display:none;}
  .trust-bar .inner{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;justify-items:start;}
  .trust-item{font-size:.8rem;}
  .trust-item:last-child{grid-column:1 / -1;justify-self:center;}
  .product-footer{flex-direction:column;align-items:stretch;gap:10px;}
  .product-footer .btn{width:100%;justify-content:center;}
  .product-price{font-size:1.05rem;}
  .blog-img{height:120px;}
  .product-badges{gap:6px;}
}

/* --- DoseIQ conversion panel (order receipt) ----------------------------- */
.oc-doseiq{background:var(--accent-dim);border:1.5px solid var(--accent);
  border-radius:var(--radius-lg);padding:30px 32px;margin:28px 0 10px;text-align:center;}
.oc-dq-head{font-size:1.3rem;font-weight:800;color:var(--text);margin-bottom:8px;letter-spacing:-.01em;}
.oc-dq-sub{color:var(--text-2);margin-bottom:16px;}
.oc-dq-list{list-style:none;margin:0 auto 20px;padding:0;display:inline-flex;
  flex-direction:column;gap:9px;text-align:left;}
.oc-dq-list li{color:var(--text);font-size:.95rem;line-height:1.5;}
.oc-dq-list li::before{content:'✓  ';color:var(--mint);font-weight:800;}
.oc-dq-btn{display:inline-flex;justify-content:center;min-width:280px;}
.oc-dq-fine{color:var(--text-3);font-size:.78rem;margin-top:12px;}
@media(max-width:768px){.oc-doseiq{padding:22px 18px;}.oc-dq-btn{width:100%;}}
@media print{.oc-doseiq{display:none !important;}}

/* ==========================================================================
   Inline SVG icon system — replaces the emoji set (brand book: no gradients,
   no shadows; these are single-weight line art inheriting currentColor).
   ========================================================================== */
.cat-icon svg,.feature-icon svg,.trust-card-icon svg,.hbf-icon svg,
.info-row .ic svg,.e-icon svg{
  width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
svg[data-solid]{fill:currentColor;stroke:none;}
.cat-icon,.trust-card-icon,.hbf-icon,.info-row .ic{color:var(--accent);}
.ti-check svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;}
.ti-check{display:inline-flex;align-items:center;}
.notice-bar svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px;}
.hero-eyebrow svg{width:14px;height:14px;flex-shrink:0;}
.mobile-menu-btn svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.e-icon svg{width:48px;height:48px;color:var(--text-3);}
.e-icon{display:flex;justify-content:center;margin-bottom:16px;}
.tci-num{font-size:1.35rem;font-weight:800;color:var(--accent);}

/* ==========================================================================
   Add-to-cart toast — confirmation near nothing was happening before
   ========================================================================== */
.vdx-toast{position:fixed;right:20px;bottom:20px;z-index:1200;
  background:var(--bg-card);border:1px solid var(--accent);border-radius:var(--radius);
  padding:14px 18px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 40px);
  transform:translateY(12px);opacity:0;transition:transform .25s ease,opacity .25s ease;}
.vdx-toast.is-in{transform:translateY(0);opacity:1;}
.vdx-toast .vt-check{width:26px;height:26px;flex-shrink:0;border-radius:50%;
  background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;}
.vdx-toast .vt-check svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}
.vdx-toast .vt-msg{font-size:.92rem;color:var(--text);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.vdx-toast a{font-weight:700;white-space:nowrap;}

/* ==========================================================================
   Blog thumbnails — typographic cards instead of a lone icon in a grey box
   ========================================================================== */
.blog-img-type{flex-direction:column;align-items:flex-start;justify-content:center;
  gap:10px;padding:24px 22px;background:var(--panel);}
.blog-img-type .bit-cat{font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);}
.blog-img-type .bit-name{font-size:1.7rem;font-weight:800;letter-spacing:-.01em;
  color:var(--accent);line-height:1.1;}
.blog-img-type .bit-rule{width:44px;height:1px;background:var(--mint);opacity:.7;}
@media(max-width:768px){.blog-img-type .bit-name{font-size:1.45rem;}}

/* ==========================================================================
   Shop page — 3-up grid (bigger vial renders, 5-item categories break 3+2),
   fixed pill rows, and the catalog search that the JSON-LD SearchAction promises
   ========================================================================== */
.product-grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1024px){.product-grid-3{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.product-grid-3{grid-template-columns:repeat(2,1fr);}}
.product-price{min-width:0;}
.product-card{min-width:0;}
.shop-pills{display:grid;grid-template-columns:repeat(3,auto);gap:8px;justify-content:center;}
.shop-pills .btn{justify-content:center;}
@media(max-width:700px){
  .shop-pills{grid-template-columns:1fr 1fr;justify-content:stretch;}
  .shop-pills .btn{white-space:normal;line-height:1.3;padding:10px 12px;}
}
.shop-search{max-width:460px;margin:20px auto 0;}
.shop-search input{width:100%;background:var(--bg-card);border:1.5px solid var(--border-2);
  border-radius:var(--radius);padding:12px 16px;color:var(--text);font-family:inherit;
  font-size:.95rem;transition:border-color var(--transition);}
.shop-search input:focus{outline:none;border-color:var(--accent);}
.shop-search input::placeholder{color:var(--text-3);}
.shop-no-results{display:none;text-align:center;padding:48px 24px;color:var(--text-2);}

/* Product page: never let the buy row or spec table force the page wider
   than the phone — the buttons stack and long spec values wrap instead. */
.pd-layout > *{min-width:0;}
.pd-buy-actions{flex-wrap:wrap;}
.pd-specs td:last-child{overflow-wrap:anywhere;}
@media(max-width:520px){
  .pd-buy-actions{flex-direction:column;}
  .pd-buy-actions .btn{width:100%;}
}

/* Contact form status banners */
.form-note{border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;font-size:.92rem;line-height:1.6;}
.form-note-ok{background:var(--accent-dim);border:1px solid var(--accent);color:var(--text);}
.form-note-err{background:rgba(233,106,128,.08);border:1px solid rgba(233,106,128,.35);color:var(--text-2);}


/* ---------------------------------------------------- header catalog search */
/* The field is absolutely positioned to the LEFT of the magnifier so opening it
   overlays the nav instead of pushing the cart button off the row. */
.hdr-search{position:relative;display:flex;align-items:center;flex:0 0 auto;}
.hdr-search-toggle{background:var(--bg-card);border:1px solid var(--border-2);border-radius:8px;
  padding:9px 11px;color:var(--text-2);cursor:pointer;line-height:0;transition:all var(--transition);}
.hdr-search-toggle:hover,.hdr-search.open .hdr-search-toggle{border-color:var(--accent);color:var(--accent);}
.hdr-search-input{position:absolute;right:100%;top:50%;transform:translateY(-50%);
  width:0;opacity:0;padding:0;margin-right:0;pointer-events:none;
  border:1px solid transparent;background:#0E1714;border-radius:8px;color:var(--text-1);
  font-size:.9rem;font-family:inherit;
  transition:width var(--transition),opacity var(--transition),padding var(--transition),margin var(--transition);}
.hdr-search-input::placeholder{color:var(--text-2);opacity:.75;}
.hdr-search-input::-webkit-search-cancel-button{filter:invert(.6);}
.hdr-search.open .hdr-search-input{width:min(260px,42vw);opacity:1;padding:8px 12px;margin-right:8px;
  border-color:var(--border-2);pointer-events:auto;
  /* opaque halo so the nav underneath is fully masked, not peeking round the edges */
  box-shadow:0 0 0 7px #090C0F;}
.hdr-search.open .hdr-search-input:focus{outline:none;border-color:var(--accent);}
/* below 900px reserve room for the logo, cart and burger so the field never
   runs off the left edge on a small phone */
@media(max-width:900px){.hdr-search.open .hdr-search-input{width:min(240px,calc(100vw - 207px));}}
@media print{.hdr-search{display:none !important;}}

/* the search button costs ~38px; tighten the row before it can overflow */
@media(max-width:1260px){.header-inner{gap:14px;}.nav{gap:2px;}}

/* PRE-EXISTING BUG, fixed 2026-08-11: the horizontal nav stopped fitting around
   1150px but did not collapse to the burger until 768px, so the header row
   overflowed by 90-190px on small laptops. Collapse it at 1120px instead. */
@media(max-width:1120px){
  .nav{display:none;}
  .mobile-menu-btn{display:flex;}
  .nav.is-open{display:flex;flex-direction:column;gap:4px;position:absolute;inset:100% 0 auto 0;
    background:var(--bg-2);border-bottom:1px solid var(--border-2);padding:16px;z-index:60;}
  .nav.is-open a{padding:12px 14px;font-size:1rem;}
}

/* 320px-class phones: tighten the action row so the search button fits */
@media(max-width:380px){
  .header-inner{gap:6px;}
  .cart-btn{padding:8px 8px;font-size:.8rem;gap:5px;}
  .hdr-search-toggle{padding:9px 8px;}
}