/* =========================================================
   BioHealth Kitchen™ — shared stylesheet (all pages)
   ========================================================= */

:root{
  --cream:#FFFFFF;
  --white:#FFFFFF;
  --mint:#E3F2E6;
  --sage:#f2f5e1;
  --leaf:#D3E47C;          /* botanical green, primary brand green */
  --leaf-deep:#2C5E3B;     /* deep green for headings and contrast */
  --lime:#C4DE4A;          /* fresh lime accent */
  --olive:#8FA943;         /* olive accent for italic editorial words */
  --peach:#F9DFC9;
  --apricot:#F4B98A;
  --sun:#F6C94B;
  --char:#2A2C28;          /* charcoal, typography only */
  --char-soft:rgba(42,44,40,.68);
  --ring:rgba(62,124,79,.22);
  --r-lg:28px; --r-md:20px; --r-full:999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--cream);color:var(--char);font-size:17px;line-height:1.68}
h1,h2,h3{font-weight:700;line-height:1.14;letter-spacing:-.015em;color:var(--char)}
em.ed{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:1.04em;color:var(--leaf);letter-spacing:.005em}
a{color:inherit}
.wrap{max-width:1600px;margin:0 auto;padding:0 28px}
.tm{font-size:.55em;vertical-align:.7em}
section{padding:30px 0}
.kicker{color:var(--leaf);font-weight:700;font-size:15px;margin-bottom:12px}
h1{font-size:clamp(34px,4.4vw,52px);font-weight:600;color:#41544A;max-width:18em}
h2{font-size:clamp(26px,3vw,36px);color:var(--char);}
h3{font-size:20px}
.intro,p.body{margin-top:14px;font-size:17.5px;color:var(--char-soft)}
.lede{margin-top:20px;font-size:19px;color:var(--char-soft);max-width:38em}
.sub{margin:24px 0 8px;font-size:19.5px;color:var(--char-soft);max-width:34em}
.trust{margin-top:26px;font-weight:600;font-size:14.5px;color:var(--leaf-deep)}
.trust span{opacity:.4;margin:0 10px}

.learn{display:inline-block;margin-top:18px;font-weight:700;font-size:15.5px;color:var(--leaf-deep);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--sage);text-decoration-thickness:2px}
.learn:hover,.learn:focus-visible{color:var(--leaf);text-decoration-color:var(--leaf)}

.btn{display:inline-block;font-weight:700;font-size:16px;padding:16px 32px;border-radius:var(--r-full);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}
.btn-solid{background:var(--leaf);color:#fff;box-shadow:0 10px 24px rgba(62,124,79,.28)}
.btn-solid:hover{background:var(--leaf-deep);transform:translateY(-2px)}
.btn-soft{background:#253E30;color:#fff}
.btn-soft:hover{background:#D3E47C}
.cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* Photography placeholder + image/video capable .ph */
.ph{position:relative;padding:0;overflow:hidden;color:transparent;font-size:0;background:
  radial-gradient(120% 90% at 20% 15%,#F1F7E8 0%,transparent 55%),
  radial-gradient(110% 90% at 85% 80%,var(--peach) 0%,transparent 50%),
  linear-gradient(150deg,var(--mint) 0%,var(--sage) 100%);border-radius:var(--r-md)}
.ph img,.ph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph video{z-index:1}
@media (prefers-reduced-motion:reduce){.ph video{display:none}}

/* ===== Top bar: country selector ===== */
.topbar{position:relative;z-index:70;background:#253e30;color:#fff; padding: 5px;}
.topbar-inner{display:flex;justify-content:flex-end;align-items:center;padding-top:8px;padding-bottom:8px}
.country-dd{position:relative}
.country-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:800;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:8px 16px;cursor:pointer;line-height:1}
.country-btn:hover,.country-btn:focus-visible,.country-dd.open .country-btn{background:rgba(255,255,255,.12);border-color:#fff}
.country-btn:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.country-btn .globe{width:15px;height:15px;fill:none;stroke:#D3E47C;stroke-width:1.6}
.country-btn small{font-size:8px;opacity:.8;transition:transform .2s ease}
.country-dd.open .country-btn small{transform:rotate(180deg)}
.country-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;list-style:none;margin:0;padding:10px;background:#253e30;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 24px 54px rgba(0,0,0,.35);display:none}
.country-dd.open .country-menu{display:block}
.country-menu a{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:10px;color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.country-menu a:hover,.country-menu a:focus-visible,.country-menu a[aria-current]{background:#1F3428;}
.country-menu .flag{display:inline-flex;width:26px;height:17px;border-radius:3px;overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.country-menu .flag svg{width:100%;height:100%;display:block}
@media (max-width:640px){
  .topbar-inner{padding-top:6px;padding-bottom:6px}
  .country-btn{font-size:11.5px;padding:7px 13px}
  .country-menu{min-width:230px}
}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(42,44,40,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;order:1}
.logo svg{width:38px;height:38px}
.logo img{height:100px;width:auto;max-width:276px;object-fit:contain;display:block}
.logo-word{font-weight:800;font-size:17px;line-height:1.05;color:var(--char)}
.logo-word small{display:block;font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--leaf)}

.nav-links{display:flex;gap:19px;list-style:none;font-weight:600;font-size:14px;align-items:center;flex-wrap:nowrap;white-space:nowrap;order:2}
.nav-links a{text-decoration:none;color:var(--char-soft)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--leaf-deep)}
.nav-dd{position:relative}
.nav-dd > button{font-family:inherit;font-weight:600;font-size:14px;line-height:1.4;color:var(--char-soft);background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px}
.nav-dd > button:hover,.nav-dd > button:focus-visible{color:var(--leaf-deep)}
.nav-dd .dd{position:absolute;top:calc(100% + 0px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid rgba(42,44,40,.08);border-radius:18px;box-shadow:0 24px 54px rgba(42,44,40,.16);padding:10px;min-width:240px;display:none;z-index:60}
.nav-dd:hover .dd,.nav-dd:focus-within .dd,.nav-dd.dd-open .dd{display:block}
.nav-dd .dd a{display:block;padding:10px 14px;border-radius:12px;font-weight:600;font-size:14.5px;color:var(--char);text-decoration:none}
.nav-dd .dd a:hover{background:var(--mint);color:var(--leaf-deep)}
.nav-login{background:var(--leaf);color:#fff !important;border-radius:999px;padding:9px 20px;font-weight:700;font-size:14px}
.nav-login:hover{background:var(--leaf-deep)}

/* ===== Mobile nav toggle (hamburger) ===== */
.nav-toggle{display:none;order:2;width:44px;height:44px;flex:0 0 auto;align-items:center;justify-content:center;background:none;border:0;border-radius:12px;cursor:pointer;padding:0}
.nav-toggle:hover,.nav-toggle:focus-visible{background:var(--mint)}
.nav-toggle:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:22px;height:2px;border-radius:2px;background:var(--char);transition:transform .2s ease,opacity .2s ease,background .2s ease}
.nav-toggle span{position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1180px){
  .nav{flex-wrap:wrap;row-gap:0}
  .nav-toggle{display:flex}
  .nav-links{
    display:none;
    order:3;
    flex-basis:100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    white-space:normal;
    gap:0;
    margin-top:16px;
    padding:10px 0 22px;
    border-top:1px solid rgba(42,44,40,.08);
    max-height:calc(100vh - 90px);
    overflow-y:auto;
  }
  .nav-links.open{display:flex}
  .nav-links > li{width:100%;border-bottom:1px solid rgba(42,44,40,.06)}
  .nav-links > li:last-child{border-bottom:0}
  .nav-links > li > a{display:block;padding:15px 4px;font-size:16px}
  .nav-dd{width:100%}
  .nav-dd > button{width:100%;justify-content:space-between;padding:15px 4px;font-size:16px}
  .nav-dd .dd{position:static;transform:none;top:auto;left:auto;box-shadow:none;border:0;border-radius:14px;background:var(--mint);min-width:0;width:100%;margin:0 0 12px;padding:6px}
  .nav-dd .dd a{padding:12px 14px;font-size:15px}
  .nav-login{display:inline-block;width:auto;margin:14px 4px 0;text-align:center}
}

/* ===== Crumb (breadcrumb) ===== */
.crumb{font-weight:700;font-size:14px;color:var(--leaf);margin-bottom:16px}
.crumb a{color:#999;text-decoration:none}
.crumb a:hover{color:var(--leaf-deep)}
.crumb span{margin:0 8px;opacity:.4}

/* =========================================================
   Hero video background — used at the top of every page
   ========================================================= */
.hero-video{position:relative;overflow:hidden;color:#fff;padding:74px 0 68px; height:900px; display:flex; align-items:center; }
.hero-video.hero-lg{padding:96px 0 84px}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,26,18,.66) 0%,rgba(16,26,18,.5) 45%,rgba(14,24,16,.82) 100%);z-index:1}
.hero-video .wrap{position:relative;z-index:2;width:100%}
.hero-video .crumb{color:rgba(255,255,255,.7)}
.hero-video .crumb a{color:rgba(255,255,255,.92)}
.hero-video .crumb a:hover{color:#fff}
.hero-video .kicker{color:var(--lime)}
.hero-video h1{color:#fff}
.hero-video .lede,.hero-video .sub{color:rgba(255,255,255,.88)}
.hero-video .trust{color:rgb(195 218 77)}
.hero-video .trust span{opacity:.6}
.hero-video .menu-note{color:rgba(255,255,255,.75)}
.hero-video .ms-label{color:#fff}
.hero-badge{display:inline-flex;align-items:center;gap:8px;margin-top:22px;background:rgba(255,255,255,.94);border-radius:var(--r-full);padding:10px 20px;font-weight:800;font-size:14px;color:var(--leaf-deep);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.hero-badge b{color:var(--leaf)}
@media (prefers-reduced-motion:reduce){.hero-video video{display:none}}

/* Mobile hero: video becomes a normal block up top, text flows below it
   instead of being overlaid on the video like on desktop. */
@media (max-width:640px){
  .hero-video{
    height:auto;
    padding:0 0 40px;
    display:flex;
    flex-direction:column;
    color:var(--char);
  }
  .hero-video.hero-lg{padding:0 0 40px}
  .hero-video video{
    position:relative;
    inset:auto;
    order:1;
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block;
  }
  .hero-video::before{content:none}
  .hero-video .wrap{
    order:2;
    padding-top:30px;
  }
  .hero-video .crumb{color:var(--char-soft)}
  .hero-video .crumb a{color:var(--char)}
  .hero-video .crumb a:hover{color:var(--leaf-deep)}
  .hero-video .kicker{color:var(--leaf-deep)}
  .hero-video h1{color:var(--char)}
  .hero-video .lede,.hero-video .sub{color:var(--char-soft)}
  .hero-video .trust{color:var(--leaf-deep);  text-align: center;}
  .hero-video .trust span{opacity:.4}
  .hero-video .menu-note{color:var(--char-soft)}
  .hero-video .ms-label{color:var(--leaf-deep); text-align: center;}
}

.hero-image { height: auto; background: #000; padding: 40px 20px;}
.hero-image h1 {color:#fff; }
.hero-image p {color:#fff; }

/* Meal search widget (used in the homepage hero) */
.mealsearch{position:relative;margin-top:30px;max-width:600px}
.ms-row{display:flex;gap:12px}
.ms-unit{position:relative;flex:1}
.ms-label{display:block;font-weight:700;font-size:14.5px;color:var(--leaf-deep);margin-bottom:10px}
.ms-box{display:flex;align-items:center;gap:12px;background:var(--white);border:1.5px solid rgba(42,44,40,.1);border-radius:999px;padding:15px 22px;box-shadow:0 14px 34px rgba(0,0,0,.18);color:var(--leaf-deep)}
.ms-box:focus-within{border-color:var(--leaf);box-shadow:0 14px 34px rgba(62,124,79,.3)}
.ms-box input{flex:1;border:0;outline:0;font-family:inherit;font-size:16px;color:var(--char);background:transparent}
.ms-box input::placeholder{color:rgba(42,44,40,.45)}
.ms-caret{color:var(--leaf);font-size:14px}
.ms-panel{position:absolute;z-index:30;left:0;min-width:100%;width:max-content;max-width:320px;top:calc(100% + 10px);background:var(--white);border:1px solid rgba(42,44,40,.08);border-radius:22px;box-shadow:0 26px 60px rgba(42,44,40,.18);padding:12px;max-height:340px;overflow:auto}
.ms-group{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf);padding:12px 14px 6px}
.ms-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;font-weight:600;font-size:15.5px;color:var(--char);cursor:pointer;text-decoration:none}
.ms-item:hover,.ms-item.sel{background:var(--mint);color:var(--leaf-deep)}
.ms-item small{font-weight:600;font-size:12px;color:rgba(42,44,40,.5)}
.ms-empty{padding:16px 14px;font-size:15px;color:var(--char-soft)}
@media (max-width:1000px){.mealsearch{max-width:100%}.ms-row{flex-direction:column}.ms-panel{max-width:100%}}

/* Menu search / note (food database hero) */
.search-row{margin-top:30px}
.search-row input{width:100%;max-width:460px;font-family:inherit;font-size:16px;padding:14px 20px;border-radius:999px;border:1.5px solid rgba(42,44,40,.14);background:var(--white)}
.search-row input:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(62,124,79,.25)}
.menu-note{font-size:14px;color:var(--char-soft);margin-top:14px}

/* Quote */
.quote{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:clamp(20px,2.2vw,25px);color:var(--leaf-deep)}

/* ===== Cards and panels ===== */
.panel{background:var(--white);border-radius:var(--r-lg);padding:36px;border:1px solid rgba(42,44,40,.06)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:var(--white);border-radius:var(--r-md);padding:28px;border:1px solid rgba(42,44,40,.06)}
.card h3{color:var(--leaf-deep);margin-bottom:8px}
.card p{font-size:15.5px;color:var(--char-soft)}
.card .chip{display:inline-block;background:var(--mint);color:var(--leaf-deep);font-weight:700;font-size:13px;border-radius:var(--r-full);padding:5px 14px;margin-bottom:14px}

/* ===== Comparison ===== */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.compare .col{border-radius:var(--r-lg);padding:34px}
.compare .them{background:#F3F1E7;border:1px solid rgba(42,44,40,.07)}
.compare .us{background:var(--mint);border:1.5px solid var(--ring)}
.compare h3{margin-bottom:18px}
.compare .them h3{color:var(--char-soft)}
.compare .us h3{color:var(--leaf-deep)}
.compare ul{list-style:none}
.compare li{padding:10px 0 10px 30px;position:relative;font-size:16px;border-top:1px solid rgba(42,44,40,.07)}
.compare li:first-child{border-top:0}
.compare .them li::before{content:"•";position:absolute;left:8px;color:var(--apricot)}
.compare .us li::before{content:"✓";position:absolute;left:4px;color:var(--leaf);font-weight:800}
.compare .us li{font-weight:600}

/* ===== Vertical steps ===== */
.vsteps{margin-top:44px;position:relative;max-width:720px}
.vsteps::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;background:linear-gradient(var(--leaf),rgba(62,124,79,.12))}
.vstep{position:relative;padding:0 0 36px 66px}
.vstep:last-child{padding-bottom:0}
.vstep::before{content:"";position:absolute;left:11px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--cream);border:2.5px solid var(--leaf)}
.vstep .num{font-style:italic;font-weight:700;font-size:15px;color:var(--leaf)}
.vstep h3{margin:2px 0 6px}
.vstep p{color:var(--char-soft);max-width:36em;font-size:16.5px}

/* ===== BioPlate rings ===== */
.bioplate{position:relative;width:100%;aspect-ratio:1/1;max-width:520px;margin:44px auto 0}
.bp-ring{position:absolute;border-radius:50%;z-index:2}
.bp-ring b{position:absolute;background:var(--cream);padding:5px 15px;font-size:13.5px;font-weight:700;border-radius:var(--r-full);white-space:nowrap;box-shadow:0 2px 10px rgba(42,44,40,.1)}
.bp1 b{top:0;left:50%;transform:translate(-50%,-50%)}
.bp2 b{top:50%;right:0;transform:translate(34%,-50%)}
.bp3 b{bottom:0;left:50%;transform:translate(-50%,50%)}
.bp4 b{top:50%;left:0;transform:translate(-34%,-50%)}
.bp1{inset:0;border:2px solid var(--ring)}.bp1 b{color:var(--leaf-deep)}
.bp2{inset:8.5%;border:2px solid rgba(244,185,138,.6)}.bp2 b{color:#C07A3E}
.bp3{inset:17%;border:2px solid rgba(246,201,75,.65)}.bp3 b{color:#B08A1F}
.bp4{inset:25.5%;border:2px solid rgba(196,222,74,.8)}.bp4 b{color:#75903B}
.bp-meal{position:absolute;inset:34%;border-radius:50%;overflow:hidden;box-shadow:0 22px 48px rgba(62,124,79,.28);z-index:1}
.bp-meal .ph{height:100%;border-radius:0}
.bioplate-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;margin-top:0px}

/* ===== Sections on tint ===== */
.tint{background:var(--mint);border-radius:56px}
.tint-white{background:var(--white);border-radius:56px}
.tint-sage{background:var(--sage);border-radius:0px}

/* ===== Closing CTA ===== */
.closing{text-align:center;padding:30px 0}
.closing h2{margin:0 auto}
.closing p{max-width:38em;margin:16px auto 0;color:var(--char-soft)}
.tri{display:flex;justify-content:center;gap:16px;margin:44px 0 40px;flex-wrap:wrap}
.tri div{background:var(--white);border-radius:var(--r-md);padding:24px 30px;min-width:220px;border:1px solid rgba(42,44,40,.06)}
.tri b{display:block;font-size:17px;color:var(--leaf-deep);margin-bottom:6px}
.tri span{font-size:14.5px;color:var(--char-soft)}

/* ===== Footer ===== */
footer{background:#000;padding:50px 0;border-radius:0px 0px 0 0;margin-top:60px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot > div{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:flex-end}
footer a{text-decoration:none;font-weight:600;color:#fff}
footer a:hover{color:var(--leaf-deep)}
.legal{margin-top:24px;font-size:13px;color:#999}
@media (max-width:700px){
  .foot{flex-direction:column;text-align:center}
  .foot > div{justify-content:center;gap:12px 20px}
}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important}
}

/* =========================================================
   Homepage-only components
   ========================================================= */
.bio{background:var(--white);border-radius:56px 56px 0 0}
.bio-flow{display:grid;grid-template-columns:repeat(4,1.3fr) 1.3fr;gap:26px;align-items:center;margin-top:15px}
.bio-circle{aspect-ratio:1/1;border-radius:50%;background:#fff;border:5px solid #D3E47C;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;transition:transform .25s ease}
.bio-circle:hover{transform:translateY(-6px)}
.bio-circle:nth-child(2){background:#fff;border:5px solid #D3E47C;}
.bio-circle:nth-child(3){background:#fff;border:5px solid #D3E47C;}
.bio-circle h3{font-size:21px;margin-bottom:8px;color:var(--leaf-deep)}
.bio-circle p{font-size:14.5px;color:var(--char-soft);line-height:1.5}
.bio-meal{aspect-ratio:1/1;border-radius:50%;overflow:hidden;box-shadow:0 24px 56px rgba(62,124,79,.24)}
.bio-line{margin-top:48px;text-align:center;font-weight:700;font-size:clamp(16px,2vw,20px);color:var(--leaf-deep)}
.bio-line span{color:var(--apricot);margin:0 12px}

.goals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.goal{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1.14;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease}
.goal:hover,.goal:focus-visible{transform:translateY(-6px);box-shadow:0 22px 44px rgba(42,44,40,.16)}
.goal .ph{position:absolute;inset:0}
.goal .glabel{position:relative;background:rgba(255,255,255,.92);border-radius:14px;padding:12px 16px;font-weight:800;font-size:16px;color:var(--char)}
.goal .glabel small{display:block;font-weight:600;font-size:12.5px;color:var(--char-soft);margin-top:2px}
.g2 .ph{background:linear-gradient(150deg,var(--peach),#F3CBAE)}
.g3 .ph{background:linear-gradient(150deg,var(--mint),var(--sage))}
.g4 .ph{background:linear-gradient(150deg,#FBEFD3,#F6DFA8)}
.g5 .ph{background:linear-gradient(150deg,#EAF4D4,#D8E9A9)}
.g6 .ph{background:linear-gradient(150deg,#E6F0F0,#CFE4E0)}
.g7 .ph{background:linear-gradient(150deg,#F4E4E0,#EACDC4)}
.g8 .ph{background:linear-gradient(150deg,#EFF2E2,#DDE3C6)}

.meals{background:var(--white)}
.meal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.meal{background:var(--cream);border-radius:var(--r-md);overflow:hidden;border:1px solid rgba(42,44,40,.06);transition:transform .22s ease,box-shadow .22s ease}
.meal:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(42,44,40,.12)}
.meal .ph{aspect-ratio:4/2.9}
.meal-body{padding:22px}
.meal h3{font-size:19.5px}
.meal .tags{font-size:13.5px;color:var(--leaf-deep);font-weight:600;margin:8px 0 10px}
.meal .tags span{opacity:.4;margin:0 7px}
.meal .macros{font-size:14px;color:var(--char-soft);font-weight:600}
.biomatch{display:inline-flex;align-items:center;gap:8px;margin-top:16px;background:var(--mint);color:var(--leaf-deep);font-weight:800;font-size:14px;border-radius:var(--r-full);padding:8px 16px}
.biomatch i{width:9px;height:9px;border-radius:50%;background:var(--leaf);display:inline-block}
.meal-note{margin-top:30px;font-size:15.5px;color:var(--char-soft);max-width:none}

.how{background:var(--mint);border-radius:0px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.steps-3{grid-template-columns:repeat(3,1fr)}
.step{background:var(--white);border-radius:var(--r-md);padding:26px 24px 30px}
.step .num{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:34px;color:var(--leaf);line-height:1}
.step h3{font-size:19px;margin:14px 0 8px}
.step p{font-size:15px;color:var(--char-soft)}
.step .ph{aspect-ratio:4/2.4;border-radius:14px;margin-bottom:18px}

.human-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:16px}
.human-photo{aspect-ratio:4/4.4;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 26px 60px rgba(42,44,40,.14)}
.chef-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.chef{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:var(--r-full);padding:8px 20px 8px 8px;font-weight:700;font-size:14.5px;border:1px solid rgba(42,44,40,.07)}
.chef .ph{width:44px;height:44px;border-radius:50%;padding:0}
.chef small{display:block;font-weight:600;color:var(--char-soft);font-size:12.5px}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.team-card{background:var(--white);border-radius:var(--r-md);padding:0 0 26px;border:1px solid rgba(42,44,40,.06);overflow:hidden}
.team-card .ph{aspect-ratio:4/2.7}
.team-card h3{font-size:19px;color:var(--leaf-deep);margin:20px 22px 8px}
.team-card p{font-size:15.5px;color:var(--char-soft);margin:0 22px}
@media (max-width:1000px){.team-grid{grid-template-columns:1fr}}

.adv{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;margin-top:26px;background:var(--white);border:2px solid var(--leaf);border-radius:var(--r-lg);padding:30px;box-shadow:0 22px 50px rgba(62,124,79,.14)}
.adv-photo{aspect-ratio:8/5;border-radius:18px}
.adv b{color:var(--leaf-deep)}
@media (max-width:1000px){.adv{grid-template-columns:1fr}}

@media (max-width:1000px){
  .human-grid,.bioplate-grid{grid-template-columns:1fr;gap:32px}
  .bio-flow{grid-template-columns:1fr 1fr}
  .bio-meal{grid-column:span 2;max-width:340px;margin:0 auto}
  .goals-grid{grid-template-columns:repeat(2,1fr)}
  .meal-grid,.steps,.steps-3{grid-template-columns:1fr}
  /* BioPlate: force the round graphic above its copy, and keep it centred */
  .bioplate-grid{display:flex;flex-direction:column}
  .bioplate{order:1;margin:0 auto;width:100%}
  .bioplate-grid > div:last-child{order:2;text-align:center}
  .bioplate-grid .learn{display:inline-block}
}
@media (max-width:640px){
  /* Blood / Gut / DNA / signature meal: swipeable horizontal carousel on mobile,
     one card visible at a time with the next peeking in from the edge. */
  .bio-flow{
    display:flex;
    grid-template-columns:unset;
    gap:16px;
    margin-top:36px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:6px;
  }
  .bio-flow::-webkit-scrollbar{display:none}
  .bio-flow > .bio-circle,
  .bio-flow > .bio-meal{
    flex:0 0 78%;
    max-width:78%;
    width:78%;
    margin:0;
    scroll-snap-align:start;
  }
  .bio-meal{aspect-ratio:1/1}
  .chef-row{justify-content:center}
  /* Keep the BioPlate graphic compact and tidy on narrow screens */
  .bioplate{max-width:300px}
  .bp-ring b{font-size:11.5px;padding:4px 11px}
}
@media (max-width:420px){
  .goals-grid{grid-template-columns:1fr}
  .goal{aspect-ratio:16/10}
  .bioplate{max-width:250px}
  .bp-ring b{font-size:10px;padding:3px 9px}
}

/* =========================================================
   Explore the Menu (food database) components
   ========================================================= */
.band{aspect-ratio:16/6;border-radius:24px;margin-bottom:26px}
.menu-cat{padding:44px 0}
.menu-cat h2{margin-bottom:6px}
.mi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.mi{background:var(--white);border:1px solid rgba(42,44,40,.07);border-radius:16px;padding:18px 18px 16px;position:relative}
.mi-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.mi h3{font-size:16.5px;line-height:1.3}
.mi-price{font-weight:800;font-size:14px;color:var(--leaf-deep);white-space:nowrap}
.mi-macro{font-size:13.5px;color:var(--char-soft);margin-top:6px;font-weight:600}
.mi-kcal{display:inline-block;margin-top:10px;background:var(--mint);color:var(--leaf-deep);font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 12px}
.cat-nav{position:sticky;top:71px;z-index:40;background:rgba(251,249,241,.94);backdrop-filter:blur(8px);padding:12px 0;border-bottom:1px solid rgba(42,44,40,.06)}
.cat-nav .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cat-nav a{flex:0 0 auto;background:var(--white);border:1.5px solid rgba(42,44,40,.1);border-radius:999px;padding:8px 16px;font-weight:700;font-size:13.5px;text-decoration:none;color:var(--char)}
.cat-nav a:hover{background:var(--mint);border-color:var(--leaf);color:var(--leaf-deep)}
@media (max-width:900px){.mi-grid{grid-template-columns:repeat(2,1fr)}.band{aspect-ratio:16/8}}
@media (max-width:560px){.mi-grid{grid-template-columns:1fr}}

/* =========================================================
   Order form / start form / consent / privacy copy
   ========================================================= */
.start-form{margin-top:34px;max-width:760px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.start-form label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:14.5px;color:var(--leaf-deep)}
.start-form input[type=text],.start-form input[type=email],.start-form input[type=tel],.start-form input[type=date],.start-form select{font-family:inherit;font-size:16px;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(42,44,40,.14);background:var(--cream);color:var(--char)}
.start-form textarea{font-family:inherit;font-size:16px;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(42,44,40,.14);background:var(--cream);color:var(--char);resize:vertical}
.start-form input:focus,.start-form select:focus,.start-form textarea:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(62,124,79,.15)}
.consent{flex-direction:row!important;align-items:flex-start;gap:10px!important;font-weight:500!important;font-size:14px!important;color:var(--char-soft)!important;margin:22px 0 26px;max-width:56em}
.consent input{margin-top:4px;accent-color:var(--leaf)}
.consent a{color:var(--leaf-deep)}
.privacy-copy h3{color:var(--leaf-deep);margin-top:34px}
.privacy-copy h3:first-child{margin-top:0}
@media (max-width:700px){
  .form-grid{grid-template-columns:1fr}
  /* Some forms (e.g. Change password) include an empty <label></label> as a
     spacer so a field lines up in the second column on the 2-column desktop
     grid. Stacked to 1 column on mobile that spacer becomes a blank row —
     hide it here since it has no content of its own. */
  .form-grid label:empty{display:none}
}

/* =========================================================
   Login card
   ========================================================= */
.login-card{max-width:460px;margin:-40px auto 90px;position:relative;z-index:3;background:#fff;border:1px solid rgba(42,44,40,.08);border-radius:26px;padding:40px;box-shadow:0 26px 60px rgba(0,0,0,.18)}
.login-card h1{font-size:28px;color:var(--char)}
.login-card p{color:var(--char-soft);font-size:15.5px;margin-top:8px}
.login-card label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:14px;color:var(--leaf-deep);margin-top:20px}
.login-card input{font-family:inherit;font-size:16px;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(42,44,40,.14);background:#fff;color:var(--char)}
.login-card input:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(62,124,79,.15)}
.login-card .btn{width:100%;margin-top:26px;text-align:center}
.login-card .aux{text-align:center;margin-top:18px;font-size:14px}
.login-card .aux a{color:var(--leaf-deep);font-weight:700}

/* =========================================================
   Credits page
   ========================================================= */
.credits-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.credits-table{border-collapse:collapse;width:100%;min-width:640px;margin-top:0}
.credits-table td{padding:10px 12px;border-bottom:1px solid rgba(42,44,40,.1);font-size:14.5px;vertical-align:middle}
.credits-table img{width:84px;height:56px;object-fit:cover;border-radius:10px;display:block}
.credits-table a{color:var(--leaf)}
@media (max-width:700px){
  .credits-table{min-width:560px}
  .credits-table td{padding:9px 10px;font-size:13.5px}
  .credits-table img{width:64px;height:44px}
}

@media (max-width:900px){
  .grid-2,.grid-3,.compare{grid-template-columns:1fr}
}

/* =========================================================
   General small-screen pass (applies across every page)
   ========================================================= */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  section{padding:15px 0}
  .closing{padding:60px 0}
  .tint,.tint-white,.tint-sage,.how{border-radius:0px}
  .bio,footer{border-radius:0px 0px 0 0}
  .panel{padding:24px}
  .card{padding:22px}
  .adv{padding:20px}
  .compare .col{padding:24px}
  .tri{gap:12px}
  .tri div{padding:20px 22px;min-width:0;flex:1 1 140px}
  .login-card{margin:-24px auto 60px;padding:28px 24px}
  .cta-row{gap:10px}
}
@media (max-width:400px){
  .goal .glabel{font-size:14.5px;padding:10px 12px}
  .bp-ring b{font-size:12px;padding:4px 11px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =========================================================
   Clickable menu-item cards (product grid -> product page)
   ========================================================= */
.mi{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.mi:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(42,44,40,.1);border-color:rgba(62,124,79,.3)}
.mi:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.mi-thumb{aspect-ratio:4/3;border-radius:12px;overflow:hidden;margin-bottom:14px;background:linear-gradient(150deg,var(--mint),var(--sage))}
.mi-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mi-view{display:inline-block;margin-top:12px;font-weight:700;font-size:12.5px;color:var(--leaf-deep);opacity:.85}
.mi-view::after{content:"→";margin-left:4px;transition:margin .16s ease}
.mi:hover .mi-view::after{margin-left:8px}

/* =========================================================
   Product detail page
   ========================================================= */
.pd-section{padding:56px 0 90px}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-image{aspect-ratio:4/3;border-radius:26px;overflow:hidden;background:linear-gradient(150deg,var(--mint),var(--sage));position:sticky;top:110px}
.pd-image img{width:100%;height:100%;object-fit:cover;display:block}
.pd-cat-link{font-weight:700;font-size:13.5px;color:var(--leaf);text-decoration:none}
.pd-cat-link:hover{text-decoration:underline}
.pd-info h1{font-size:clamp(28px,3.4vw,40px);margin-top:10px}
.pd-price{display:block;margin-top:14px;font-weight:800;font-size:24px;color:var(--leaf-deep)}
.pd-desc{margin-top:18px;font-size:17px;color:var(--char-soft);max-width:42em}
.pd-nutri{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px}
.pd-nutri div{background:var(--white);border:1px solid rgba(42,44,40,.08);border-radius:14px;padding:14px 10px;text-align:center}
.pd-nutri b{display:block;font-size:18px;color:var(--leaf-deep)}
.pd-nutri span{display:block;margin-top:4px;font-size:12px;color:var(--char-soft);font-weight:600}
.pd-buybar{margin-top:32px;padding:22px;background:var(--mint);border-radius:20px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.qty-stepper{display:flex;align-items:center;gap:0;background:var(--white);border-radius:999px;border:1.5px solid rgba(42,44,40,.12);overflow:hidden}
.qty-stepper button{width:44px;height:44px;border:none;background:transparent;font-size:20px;font-weight:700;color:var(--leaf-deep);cursor:pointer;line-height:1}
.qty-stepper button:hover{background:var(--sage)}
.qty-stepper input{width:48px;text-align:center;border:none;background:transparent;font-size:17px;font-weight:700;color:var(--char);font-family:inherit;-moz-appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pd-subtotal{font-weight:700;font-size:15px;color:var(--leaf-deep)}
.pd-buybar .btn{white-space:nowrap}
.pd-meta{margin-top:22px;font-size:13.5px;color:var(--char-soft)}
.related{margin-top:80px}
.related h2{font-size:22px}
@media (max-width:1000px){
  .pd-grid{grid-template-columns:1fr;gap:30px}
  .pd-image{position:static}
}
@media (max-width:640px){
  .pd-section{padding:36px 0 60px}
  .pd-nutri{grid-template-columns:repeat(2,1fr)}
  .pd-buybar{flex-direction:column;align-items:stretch}
  .pd-buybar .btn{text-align:center}
}

/* =========================================================
   Purchase / checkout page
   ========================================================= */
.order-summary{background:var(--white);border:1px solid rgba(42,44,40,.08);border-radius:22px;padding:22px;display:flex;gap:18px;align-items:center;margin-top:30px}
.order-summary .os-thumb{width:110px;height:88px;border-radius:14px;overflow:hidden;flex:0 0 auto;background:linear-gradient(150deg,var(--mint),var(--sage))}
.order-summary .os-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.order-summary .os-info{flex:1 1 auto;min-width:0}
.order-summary .os-info h3{font-size:18px}
.order-summary .os-info p{margin-top:4px;color:var(--char-soft);font-size:14.5px}
.order-summary .os-qty{display:flex;align-items:center;gap:14px}
.order-summary .os-total{font-weight:800;font-size:19px;color:var(--leaf-deep);white-space:nowrap}
.empty-cart{margin-top:30px;padding:30px;border-radius:20px;background:var(--mint);text-align:center}
@media (max-width:640px){
  .order-summary{flex-wrap:wrap}
  .order-summary .os-total{margin-left:auto}
}

/* --- 50/50 checkout layout: order summary (left) + form (right) --- */
.checkout-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:34px}
.checkout-col{min-width:0}

.order-summary-card{background:var(--white);border:1px solid rgba(42,44,40,.08);border-radius:22px;padding:26px}
.order-summary-card .os-thumb{width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin-bottom:20px;background:linear-gradient(150deg,var(--mint),var(--sage))}
.order-summary-card .os-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.order-summary-card h3{font-size:22px}
.order-summary-card .os-unit-price{margin-top:6px;font-size:15px;color:var(--char-soft)}
.order-summary-card .os-unit-price a{color:var(--leaf-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.os-qty-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(42,44,40,.08);flex-wrap:wrap}
.os-note{margin-top:18px;padding:18px 20px;background:var(--mint);border-radius:16px;font-size:14px;font-weight:600;color:var(--leaf-deep)}

.checkout-form{max-width:none;margin-top:0}
.form-section{border:0;padding:0;margin:0 0 30px}
.form-section:last-of-type{margin-bottom:0}
.form-section legend{width:100%;padding:0 0 14px;font-weight:800;font-size:15.5px;color:var(--leaf-deep);border-bottom:1px solid rgba(42,44,40,.08);margin-bottom:18px}
.full-row{grid-column:1/-1}
.card-fields{margin-top:18px}

@media (max-width:900px){
  .checkout-grid{grid-template-columns:1fr;gap:30px}
  .order-summary-card{position:static}
}

/* =========================================================
   Thank-you page — personalised health / cellular needs box
   ========================================================= */
.health-box{margin-top:6px;background:var(--mint);border-radius:32px;padding:44px}
.health-box .sub{margin-top:12px;margin-bottom:0;max-width:44em}
.health-rows{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.health-row{background:var(--white);border-radius:16px;padding:16px 18px;display:grid;grid-template-columns:200px 1fr auto;gap:14px;align-items:center;border:1px solid rgba(42,44,40,.08)}
.health-row select,.health-row input{font-family:inherit;font-size:15px;padding:11px 14px;border-radius:10px;border:1.5px solid rgba(42,44,40,.14);background:var(--cream);color:var(--char)}
.health-row select:focus,.health-row input:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(62,124,79,.15)}
.health-remove{width:38px;height:38px;border-radius:50%;border:none;background:var(--peach);color:#9a4b1f;font-weight:800;font-size:17px;cursor:pointer;line-height:1}
.health-remove:hover{background:var(--apricot)}
.health-empty{font-size:14.5px;color:var(--char-soft);font-style:italic;padding:6px 2px}
.health-add{margin-top:22px;display:inline-flex;align-items:center;gap:8px;background:var(--leaf);color:#fff;font-weight:700;font-size:15px;border:none;border-radius:999px;padding:13px 24px;cursor:pointer;transition:background .18s ease}
.health-add:hover{background:var(--leaf-deep)}
.health-add .plus{font-size:18px;line-height:1}
.health-save-row{margin-top:26px}
@media (max-width:700px){
  .health-box{padding:28px 22px;border-radius:24px}
  .health-row{grid-template-columns:1fr;gap:10px}
  .health-remove{justify-self:end}
}

/* =========================================================
   Nav — Shopping Cart link + item-count badge
   ========================================================= */
.nav-cart{position:relative;font-weight:800;color:var(--leaf-deep)}
.nav-cart:hover,.nav-cart:focus-visible{color:var(--leaf-deep)}
.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--leaf);color:#fff;font-size:11px;font-weight:800;vertical-align:middle}

/* =========================================================
   Explore the Menu — quick "add to cart" button on each card
   ========================================================= */
.mi-link{display:block;text-decoration:none;color:inherit}
.mi-link:focus-visible{outline:3px solid var(--leaf);outline-offset:2px}
.mi-quickadd{position:absolute;top:14px;right:14px;z-index:3;margin:0}
.mi-add-btn{width:34px;height:34px;border-radius:50%;border:none;background:#E8863B;color:#fff;font-size:18px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 8px 18px rgba(42,44,40,.18);transition:background .16s ease,transform .16s ease}
.mi-add-btn:hover{background:#C96E29;transform:scale(1.08)}

/* =========================================================
   Shopping Cart page
   ========================================================= */
.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;margin-top:34px;align-items:start}
.cart-flash{border-radius:14px;padding:14px 18px;font-weight:600;font-size:14.5px;margin-bottom:22px}
.cart-flash.ok{background:var(--mint);color:var(--leaf-deep)}
.cart-flash.err{background:var(--peach);color:#9a4b1f}
.cart-rows{display:flex;flex-direction:column}
.cart-row{display:grid;grid-template-columns:76px 1fr auto auto auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(42,44,40,.08)}
.cart-row:last-child{border-bottom:0}
.cart-thumb{width:76px;height:60px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,var(--mint),var(--sage));flex:0 0 auto}
.cart-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cart-info h3{font-size:16.5px;line-height:1.3}
.cart-info h3 a{text-decoration:none;color:var(--char)}
.cart-info h3 a:hover{color:var(--leaf-deep)}
.cart-unit{margin-top:4px;font-size:13.5px;color:var(--char-soft)}
.cart-line-total{font-weight:800;font-size:15.5px;color:var(--leaf-deep);white-space:nowrap}
.cart-remove{width:34px;height:34px;border-radius:50%;border:none;background:var(--peach);color:#9a4b1f;font-weight:800;font-size:17px;cursor:pointer;line-height:1}
.cart-remove:hover{background:var(--apricot)}
.cart-actions-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.cart-actions-row form{margin:0}
.btn-danger{display:inline-block;font-weight:700;font-size:16px;padding:16px 32px;border-radius:var(--r-full);border:none;cursor:pointer;background:#D9534F;color:#fff;transition:background .18s ease,transform .18s ease}
.btn-danger:hover{background:#B5423E;transform:translateY(-2px)}
.cart-side-col{display:flex;flex-direction:column;gap:22px}
.coupon-form{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.coupon-form input[type=text]{flex:1;min-width:0;font-family:inherit;font-size:15px;padding:13px 16px;border-radius:12px;border:1.5px solid rgba(42,44,40,.14);background:var(--cream)}
.coupon-form input[type=text]:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(62,124,79,.15)}
.coupon-msg{margin-top:12px;font-size:13.5px;font-weight:700}
.coupon-msg.ok{color:var(--leaf-deep)}
.coupon-msg.err{color:#B5423E}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:15px;color:var(--char-soft);border-bottom:1px solid rgba(42,44,40,.07)}
.summary-row:last-child{border-bottom:0}
.summary-total{margin-top:4px;font-weight:800;font-size:18px;color:var(--leaf-deep)}
.summary-total span{color:var(--leaf-deep)}
.payment-icons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pm-chip{background:var(--mint);color:var(--leaf-deep);font-weight:700;font-size:13px;border-radius:999px;padding:8px 14px}
.cart-checkout-btn{display:block;width:100%;text-align:center;margin-top:20px}
@media (max-width:900px){
  .cart-layout{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* Card-style row: thumbnail spans both lines, name/price up top with the
     remove (x) tucked into the corner, quantity + line total share a row
     below. Fixes the old layout where the qty-stepper stretched full width. */
  .cart-row{
    grid-template-columns:60px 1fr auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "thumb info   remove"
      "thumb stepper total";
    column-gap:14px;
    row-gap:12px;
    padding:20px 0;
  }
  .cart-thumb{grid-area:thumb;width:60px;height:60px;align-self:start}
  .cart-info{grid-area:info;min-width:0}
  .cart-info h3{font-size:15px}
  .cart-unit{font-size:13px}
  .cart-remove{grid-area:remove;justify-self:end;align-self:start;width:30px;height:30px;font-size:15px}
  .qty-stepper{grid-area:stepper;justify-self:start;align-self:center}
  .qty-stepper button{width:36px;height:36px;font-size:18px}
  .qty-stepper input{width:34px;font-size:15px}
  .cart-line-total{grid-area:total;justify-self:end;align-self:center;font-size:16px}
  .cart-actions-row{flex-direction:column;align-items:stretch}
  .cart-actions-row .btn,.cart-actions-row .btn-danger{width:100%;text-align:center}
}

/* =========================================================
   Checkout — saved-address picker (Amazon-style address book)
   ========================================================= */
.saved-addresses{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.saved-address-option{display:block;cursor:pointer}
.saved-address-option input{position:absolute;opacity:0;width:1px;height:1px}
.saved-address-option .address-card{display:block;height:100%;border:1.5px solid rgba(42,44,40,.14);border-radius:16px;padding:16px 18px;font-size:14.5px;color:var(--char-soft);transition:border-color .16s ease,background .16s ease}
.saved-address-option .address-card p{margin:2px 0;color:var(--char)}
.saved-address-option input:checked + .address-card{border-color:var(--leaf);background:var(--mint)}
.saved-address-option input:focus-visible + .address-card{outline:2px solid var(--leaf);outline-offset:2px}
@media (max-width:700px){.saved-addresses{grid-template-columns:1fr}}

/* =========================================================
   My Account — profile, saved addresses, orders
   ========================================================= */
.account-link-card{display:block;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.account-link-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(42,44,40,.1)}
.account-link-card h3{margin-top:2px}

.address-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:18px}
.address-card{border:1.5px solid rgba(42,44,40,.1);border-radius:16px;padding:16px 18px;font-size:14.5px;color:var(--char-soft);position:relative}
.address-card.is-default{border-color:var(--leaf)}
.address-card p{margin:2px 0;color:var(--char)}
.address-card .pm-chip{margin-bottom:8px}
.address-actions{display:flex;gap:14px;margin-top:12px}
.address-actions form{margin:0}

.order-list{display:flex;flex-direction:column;gap:14px}
.order-row,.order-card-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.order-row{background:var(--white);border:1px solid rgba(42,44,40,.08);border-radius:18px;padding:18px 22px}
.order-card{background:var(--white);border:1px solid rgba(42,44,40,.08);border-radius:18px;padding:22px}
.order-row h3,.order-card h3{font-size:17px}
.order-meta{margin-top:4px;font-size:13.5px;color:var(--char-soft)}
.order-status{background:var(--mint);color:var(--leaf-deep);font-weight:700;font-size:12.5px;border-radius:999px;padding:6px 14px}
.order-total{font-weight:800;font-size:16px;color:var(--leaf-deep);margin-left:auto}
.order-items{list-style:none;margin-top:16px;padding-top:16px;border-top:1px solid rgba(42,44,40,.08);font-size:14.5px;color:var(--char-soft);display:flex;flex-direction:column;gap:4px}
.order-address{margin-top:12px;font-size:13.5px;color:var(--char-soft)}

/* =========================================================
   BioMedical Kitchen page (medical-kitchen.php)
   Styles moved out of inline style="" attributes and the
   inline <style> block.
   ========================================================= */

/* --- Hero tagline (under the h1) --- */
.hero-tagline{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(19px,2.4vw,26px);margin:6px 0 2px;opacity:.95}

/* --- Tighter intro lede --- */
.lede.lede-tight{margin:10px 0 18px}

/* --- Spacing modifiers --- */
.grid-2.grid-2--tight{margin-top:18px}
p.body.body--spaced{margin-top:18px}

/* --- Images inside cards / full-width feature image --- */
.card-img{width:100%;height:450px;object-fit:cover;border-radius:14px;display:block;margin-bottom:14px}
.card-img--tall{height:190px}
.feature-img{width:100%;height:340px;object-fit:cover;border-radius:18px;display:block;margin:26px 0}

/* --- Comparison columns (BioHealth vs BioMedical) --- */
.compare .col-kitchen{background:var(--mint);border:1.5px solid var(--ring)}
.compare .col-kitchen h3{color:var(--leaf-deep)}
.compare .col-medical{background:var(--sage)}
.compare-tagline{font-weight:600;margin:0 0 10px}

/* --- Pricing cards --- */
.card-center{text-align:center}
.card-mint{background:var(--mint);border:1.5px solid var(--ring)}
.card-sage{background:var(--sage)}
.price-badge{display:inline-block;background:var(--leaf-deep);color:#fff;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 16px;margin-bottom:12px}
.card .price-amount{font-size:34px;font-weight:800;color:var(--leaf-deep);margin:6px 0 10px}
.card .price-amount--sm{font-size:26px}
.programme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:26px}

/* --- "Why customers choose us" dark band --- */
.why-hero{background:var(--leaf-deep);color:#fff;padding:90px 0}
.why-hero .wrap{text-align:center}
.why-hero h2{color:#fff;margin:0 auto}
.why-lede{max-width:44em;margin:16px auto 0;color:rgba(255,255,255,.88);font-size:17px}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:44px;text-align:left}
.why-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:26px}
.why-card h3{color:#fff;margin:0 0 8px}
.why-card p{color:rgba(255,255,255,.85);margin:0}

/* --- Closing CTA row --- */
.closing .cta-row{justify-content:center}

/* --- Member stories: auto-scrolling carousel --- */
.story-scroller{overflow:hidden;margin-top:26px}
.story-track{display:flex;gap:22px;width:max-content;animation:storyScroll 40s linear infinite}
.story-scroller:hover .story-track{animation-play-state:paused}
.story-card{width:360px;flex:0 0 auto;background:var(--white);border:1.5px solid rgba(42,44,40,.08);border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.story-card h3{color:var(--leaf-deep);margin:0 0 8px}
.story-card .chip{display:inline-block;background:var(--leaf-deep);color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:5px 14px;margin-bottom:14px}
.story-card .quote{font-size:17px;margin:0 0 14px}
.story-name{font-weight:700;color:var(--leaf-deep);margin:0}
.story-programme{font-size:14px;margin:2px 0 0;opacity:.75}
.story-note{font-size:12.5px;font-style:italic;margin:8px 0 0;opacity:.6}
@keyframes storyScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){.story-card{width:300px}}

/* --- 50/50 split: text left, video right (e.g. "Around the individual") --- */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-text{min-width:0}
.split-media{min-width:0;border-radius:18px;overflow:hidden;}
.split-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:1000px){
  .split-grid{grid-template-columns:1fr;gap:28px}
}

/* --- 4 across on one row (e.g. the four test-price cards); 2 across on tablet, 1 on phones --- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}

/* --- Hero (video) fallback background + star rating, page-scoped --- */
body.page-medical .hero-video{display:flex;align-items:center;background:#000}
body.page-medical .hero-video > .wrap{width:100%}
.hero-rating{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff}
.hero-rating .stars{color:var(--sun);letter-spacing:2.5px;font-size:16px;line-height:1}
@media (max-width:640px){
  .hero-rating{color:var(--leaf-deep);margin-left:0 !important}
  body.page-medical .hero-video{background:var(--cream)}
}

/* --- Test product cards (pricing section) --- */
.test-card{padding:0 0 28px;text-align:center;display:flex;flex-direction:column;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.test-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(42,44,40,.14)}
.tc-img{position:relative}
.tc-img img{width:100%;height:180px;object-fit:cover;display:block}
.tc-chip{position:absolute;top:14px;left:14px;background:var(--leaf-deep);color:#fff;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 16px;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.test-card h3{margin:20px 22px 0;color:var(--leaf-deep)}
.tc-price{font-size:34px;font-weight:800;color:var(--leaf-deep);margin:6px 0 10px}
.tc-price small{font-size:14px;font-weight:700;color:var(--char-soft)}
.tc-copy{padding:0 26px;font-size:15px;color:var(--char-soft);flex:1}
.tc-btn{margin:20px auto 0;padding:13px 34px;font-size:15px}

/* --- Quick-facts stat strip --- */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:28px}
.stat-strip > div{background:var(--leaf-deep);border-radius:16px;padding:18px 20px;text-align:center}
.stat-strip b{display:block;font-size:30px;font-weight:800;color:#fff;line-height:1.15}
.stat-strip span{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85)}
body.page-medical p.body{}

/* --- Solid green icon badges inside test card photos --- */
.tc-badge{position:absolute;right:12px;bottom:12px;width:48px;height:48px;border-radius:50%;background:var(--leaf-deep);color:#fff !important;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.tc-badge svg{width:26px;height:26px}
.tc-badge-wide{width:auto;height:48px;border-radius:999px;padding:0 16px;gap:8px;font-weight:800;font-size:16px}
.tc-badge-wide svg{width:22px;height:22px}

/* --- Pricing: primary tests + blood layer --- */
.tier-label{font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:13.5px;color:var(--leaf-deep);margin:8px 0 16px}
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.blood-layer{display:grid;grid-template-columns:500px 1fr;padding:0;overflow:visible;text-align:left}
.blood-layer .bl-img{position:relative;overflow:hidden;border-radius:var(--r-md) 0 0 var(--r-md)}
.blood-layer .bl-img img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
.bl-body{padding:30px 34px}
.bl-body h3{color:var(--leaf-deep);margin:0}
.bl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.bl-chips span{background:var(--mint);color:var(--leaf-deep);font-weight:700;font-size:13.5px;border-radius:999px;padding:8px 16px}
.bl-dd{position:relative}
.bl-dd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.bl-dd summary::-webkit-details-marker{display:none}
.bl-dd[open] summary small{display:inline-block;transform:rotate(180deg)}
.bl-menu{position:absolute;z-index:30;top:calc(100% + 10px);left:0;min-width:520px;max-height:330px;overflow:auto;background:#fff;border:1.5px solid var(--ring);border-radius:16px;box-shadow:0 22px 44px rgba(0,0,0,.16);padding:8px}
.bl-row{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:10px}
.bl-row:hover{background:var(--mint)}
.bl-row-info{flex:1;min-width:0}
.bl-row-info b{display:block;font-size:14px;color:var(--char)}
.bl-row-info small{font-size:12px;color:var(--char-soft)}
.bl-row-price{color:var(--leaf-deep);font-weight:800;font-size:14px;white-space:nowrap}
.bl-select{cursor:pointer;border:0;background:var(--leaf-deep);color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:7px 16px}
.bl-select:hover{opacity:.88}
.bl-detail{margin-top:20px;background:var(--mint);border:1.5px solid var(--ring);border-radius:16px;padding:0;overflow:hidden}
.bl-detail-grid{display:grid;grid-template-columns:230px 1fr}
.bl-detail-grid img{width:100%;height:100%;min-height:170px;object-fit:cover;display:block}
.bl-detail-body{padding:20px 24px}
@media (max-width:760px){.bl-detail-grid{grid-template-columns:1fr}.bl-detail-grid img{min-height:0;height:150px}}
.bl-detail-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.bl-detail-head h4{margin:0;font-size:19px;color:var(--leaf-deep)}
.bl-detail-price{font-size:22px;font-weight:800;color:var(--leaf-deep);white-space:nowrap}
.bl-detail-desc{margin:8px 0 14px;font-size:14.5px;color:var(--char-soft)}
.bl-detail-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.bl-detail-chip{background:#fff;border:1px solid var(--ring);color:var(--leaf-deep);font-weight:700;font-size:13px;border-radius:999px;padding:7px 15px}
.bl-note{font-size:12px;color:var(--char-soft);padding:8px 14px 6px;margin:0}
@media (max-width:760px){.bl-menu{position:static;min-width:0;max-height:280px;margin-top:10px}}
@media (max-width:760px){.blood-layer{grid-template-columns:1fr}.blood-layer .bl-img{border-radius:var(--r-md) var(--r-md) 0 0}.blood-layer .bl-img img{min-height:0;height:200px}.bl-body{padding:24px 22px}}

/* --- Chip colour override for the BioMedical Kitchen page --- */
body.page-medical .card .chip,body.page-medical .chip{background:var(--leaf-deep) !important;color:#fff !important}

/* =========================================================
   Black placeholder boxes standing in for images that will
   be added later (used across pages wherever an <img> has
   been swapped out for <div class="img-placeholder">).
   ========================================================= */
.img-placeholder{background:#000;display:block}

/* =========================================================
   Legal pages: Privacy Policy, Terms & Conditions,
   Data Protection  (body.page-legal)
   ========================================================= */
.page-legal .policy-wrap{max-width:860px;margin:0 auto;padding:0 24px 20px}
.page-legal .policy-wrap h1{font-size:clamp(32px,4vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:800;color:var(--char);max-width:none;margin:26px 0 6px}
.page-legal .policy-wrap h1 .ed{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;color:var(--olive)}
.page-legal .policy-wrap .updated{font-size:13.5px;color:var(--char-soft);margin-bottom:8px}
.page-legal .policy-wrap .intro{font-size:16.5px;color:var(--char-soft);line-height:1.7;margin:12px 0 8px}
.page-legal .policy-wrap h2{font-size:20px;color:var(--leaf-deep);margin:30px 0 10px;letter-spacing:-.01em}
.page-legal .policy-wrap p{font-size:15px;line-height:1.75;color:var(--char-soft);margin-bottom:12px}
.page-legal .policy-wrap .note{background:var(--mint);border-radius:14px;padding:16px 20px;font-size:13.5px;color:var(--leaf-deep);font-weight:600;margin:26px 0 10px}

/* =========================================================
   BioHealthcare Club page  (body.page-club)
   ========================================================= */
.page-club .club-wrap{max-width:1180px;margin:0 auto;padding:0 24px;overflow-x:hidden}
.page-club .club-wrap .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:30px 0 14px}
.page-club .club-wrap .kicker{display:inline-block;background:var(--leaf-deep);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:9px 20px;margin-bottom:20px}
.page-club .club-wrap h1{font-size:clamp(38px,4.8vw,58px);line-height:1.02;letter-spacing:-.03em;font-weight:800;color:var(--char);max-width:none}
.page-club .club-wrap h1 .ed,
.page-club .club-wrap h2 .ed{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;color:var(--olive)}
.page-club .club-wrap .sub{margin:18px 0 22px;font-size:17px;line-height:1.65;color:var(--char-soft);max-width:33em}
.page-club .club-wrap .pts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.page-club .club-wrap .pt{background:var(--mint);border-radius:16px;padding:16px 22px;text-align:center;flex:0 0 auto}
.page-club .club-wrap .pt b{display:block;font-size:26px;font-weight:800;color:var(--leaf-deep);line-height:1.1}
.page-club .club-wrap .pt span{font-size:12.5px;font-weight:600;color:var(--char-soft)}
.page-club .club-wrap .photo img{width:100%;height:520px;object-fit:cover;border-radius:26px;display:block;box-shadow:0 30px 70px rgba(44,94,63,.2)}
.page-club .club-wrap section{padding:34px 0 6px}
.page-club .club-wrap h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em}
.page-club .club-wrap .lede{margin:8px 0 22px;color:var(--char-soft);font-size:16px;max-width:42em}
.page-club .club-wrap .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.page-club .club-wrap .step{background:#fff;border:1.5px solid var(--ring);border-radius:20px;padding:24px 26px}
.page-club .club-wrap .step .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--leaf-deep);color:#fff;font-weight:800;font-size:15px;margin-bottom:12px}
.page-club .club-wrap .step h3{font-size:17.5px;margin-bottom:6px;color:var(--leaf-deep)}
.page-club .club-wrap .step p{font-size:14.5px;color:var(--char-soft)}
.page-club .club-wrap .redeem{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.page-club .club-wrap .rc{background:#fff;border:1.5px solid var(--ring);border-radius:20px;padding:24px 20px;text-align:center;transition:transform .18s ease,box-shadow .18s ease}
.page-club .club-wrap .rc:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(44,94,63,.14)}
.page-club .club-wrap .rc svg{width:64px;height:64px;margin:0 auto 12px;display:block}
.page-club .club-wrap .rc h3{font-size:16px;color:var(--leaf-deep);margin-bottom:5px}
.page-club .club-wrap .rc p{font-size:13.5px;color:var(--char-soft)}
.page-club .club-wrap .fam-card{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:center;background:#fff;border:1.5px solid var(--ring);border-radius:20px;padding:26px 28px;margin-top:18px}
.page-club .club-wrap .fam-card svg{width:84px;height:84px}
.page-club .club-wrap .fam-body h3{font-size:17px;color:var(--leaf-deep);margin-bottom:5px}
.page-club .club-wrap .fam-body p{font-size:14.5px;color:var(--char-soft);margin-bottom:12px}
.page-club .club-wrap .fam-chips{display:flex;flex-wrap:wrap;gap:8px}
.page-club .club-wrap .fam-chips span{background:var(--mint);color:var(--leaf-deep);font-weight:700;font-size:13px;border-radius:999px;padding:7px 15px}
.page-club .club-wrap .join{background:var(--mint);border-radius:26px;padding:40px;margin-top:36px;text-align:center}
.page-club .club-wrap .join h2{color:var(--leaf-deep)}
.page-club .club-wrap .join p{margin:8px auto 20px;color:var(--char-soft);font-size:15.5px;max-width:36em}
.page-club .club-wrap .join form{display:grid;grid-template-columns:1fr 1.2fr auto;gap:12px;max-width:720px;margin:0 auto}
.page-club .club-wrap .join input{font:inherit;font-size:15px;padding:14px 18px;border:1.5px solid var(--ring);border-radius:999px;background:#fff;outline:none;width:100%}
.page-club .club-wrap .join input:focus{border-color:var(--leaf-deep)}
.page-club .club-wrap .join button{font:inherit;font-weight:800;font-size:15px;cursor:pointer;border:0;border-radius:999px;padding:14px 30px;background:var(--leaf);color:#fff;white-space:nowrap;box-shadow:0 10px 24px rgba(62,124,79,.28);transition:transform .18s ease}
.page-club .club-wrap .join button:hover{transform:translateY(-2px)}
.page-club .club-wrap .join .consent{font-size:12px;color:var(--char-soft);margin-top:14px}
.page-club .club-wrap .join .thanks{display:none}
.page-club .club-wrap .join.done .thanks{display:block}
.page-club .club-wrap .join.done form,
.page-club .club-wrap .join.done .consent,
.page-club .club-wrap .join.done .join-sub{display:none}
.page-club .club-wrap .join .thanks b{display:block;font-size:22px;color:var(--leaf-deep);margin-bottom:6px}
@media (max-width:900px){
  .page-club .club-wrap .hero{grid-template-columns:1fr;gap:26px;text-align:center}
  .page-club .club-wrap .sub,.page-club .club-wrap .pts{margin-left:auto;margin-right:auto;justify-content:center}
  .page-club .club-wrap .photo img{height:320px}
  .page-club .club-wrap .steps{grid-template-columns:1fr}
  .page-club .club-wrap .join form{grid-template-columns:1fr}
  .page-club .club-wrap .join{padding:30px 22px}
}
@media (max-width:700px){
  .page-club .club-wrap .fam-card{grid-template-columns:1fr;text-align:center}
  .page-club .club-wrap .fam-card svg{margin:0 auto}
  .page-club .club-wrap .fam-chips{justify-content:center}
}

/* =========================================================
   Footer: logo + grouped link columns (includes/footer.php)
   ========================================================= */
.foot{align-items:flex-start;gap:40px}
.foot-brand{max-width:300px}
.foot-brand .logo img{height:84px;width:auto;display:block}
.foot-brand p{margin-top:12px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.7)}
.foot > .foot-cols{display:grid;grid-template-columns:repeat(4,auto);gap:30px 48px;justify-content:end;flex:1}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf);margin-bottom:4px}
.foot-col a{font-size:14.5px;line-height:1.4}
footer .foot-col a:hover,footer .foot-col a[aria-current="page"]{color:var(--leaf)}
footer .legal{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;text-align:center}
@media (max-width:1000px){.foot > .foot-cols{grid-template-columns:repeat(2,auto);justify-content:start}}
@media (max-width:640px){
  .foot{align-items:center}
  .foot-brand{margin:0 auto;text-align:center}
  .foot-brand .logo img{margin:0 auto}
  .foot > .foot-cols{grid-template-columns:1fr 1fr;justify-content:center;text-align:left;width:100%}
}
@media (max-width:420px){.foot > .foot-cols{grid-template-columns:1fr;text-align:center}}

/* =========================================================
   Blood test detail + plan selection  (blood-test.php)
   ========================================================= */
.page-bloodtest .bt-hero{padding:34px 0 10px}
.bt-top{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.bt-media{position:relative;border-radius:var(--r-lg);overflow:hidden}
.bt-media img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
.bt-media-chip{position:absolute;top:18px;left:18px;background:var(--leaf-deep);color:#fff;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-full);padding:7px 16px}
.bt-cat{display:inline-block;background:var(--mint);color:var(--leaf-deep);font-weight:700;font-size:13.5px;border-radius:var(--r-full);padding:7px 16px;margin-bottom:14px}
.page-bloodtest .bt-summary h1{color:var(--leaf-deep);max-width:none;font-weight:700}
.bt-price{margin-top:12px;font-size:30px;font-weight:800;color:var(--leaf-deep)}
.bt-price small{font-size:15px;font-weight:600;color:var(--char-soft)}
.bt-desc{margin:10px 0 18px;font-size:17px;color:var(--char-soft);max-width:34em}
.bt-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.bt-facts span{background:#fff;border:1.5px solid var(--ring);color:var(--leaf-deep);font-weight:700;font-size:13.5px;border-radius:var(--r-full);padding:7px 15px}

.bt-about{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:start}
.bt-included{list-style:none;margin-top:20px;display:grid;gap:10px}
.bt-included li{position:relative;padding-left:30px;font-size:16px;color:var(--char)}
.bt-included li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:50%;background:var(--leaf-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.bt-biomarkers{background:var(--mint);border:1.5px solid var(--ring);border-radius:var(--r-md);padding:26px 28px}
.bt-biomarkers h3{display:flex;align-items:center;gap:10px;color:var(--leaf-deep);font-size:19px;margin-bottom:16px}
.bt-biomarkers h3 span{background:var(--leaf-deep);color:#fff;font-size:13px;font-weight:800;border-radius:var(--r-full);padding:3px 11px}
.bt-biomarkers ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;max-height:420px;overflow:auto}
.bt-biomarkers li{background:#fff;border-radius:10px;padding:9px 13px;font-size:14.5px;font-weight:600;color:var(--char);line-height:1.35}

.bt-choose{background:var(--leaf-deep);color:#fff;padding:60px 0 70px;border-radius:56px}
.bt-step{text-align:center;color:var(--leaf);font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px}
.bt-step:not(:first-of-type){margin-top:44px}
.bt-plan input,.bt-start input{position:absolute;opacity:0;pointer-events:none}
.bt-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bt-plan,.bt-start{position:relative;display:block;cursor:pointer}
.bt-plan-card,.bt-start-card{display:flex;flex-direction:column;height:100%;background:var(--sage);color:var(--char);border:2px solid transparent;border-radius:var(--r-md);padding:22px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.bt-plan:hover .bt-plan-card,.bt-start:hover .bt-start-card{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.2)}
.bt-plan input:checked + .bt-plan-card,.bt-start input:checked + .bt-start-card{background:#fff;border-color:var(--leaf);box-shadow:0 0 0 4px rgba(211,228,124,.45)}
.bt-plan input:focus-visible + .bt-plan-card,.bt-start input:focus-visible + .bt-start-card{outline:3px solid var(--leaf);outline-offset:3px}
.bt-save{align-self:flex-start;background:var(--olive);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-full);padding:4px 11px;margin-bottom:8px}
.bt-plan-name{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:21px;color:var(--leaf-deep)}
.bt-plan-price{margin-top:10px;font-size:24px;font-weight:800;color:var(--leaf-deep);line-height:1.2}
.bt-plan-price small{font-size:13px;font-weight:600;color:var(--char-soft)}
.bt-plan-total{margin-top:4px;font-size:13px;font-weight:700;color:var(--olive)}
.bt-plan-copy{margin-top:10px;font-size:14px;line-height:1.55;color:var(--char-soft)}
.bt-starts{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:16px;justify-content:center}
.bt-start-card{padding:26px 28px}
.bt-opt{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--olive)}
.bt-start-title{margin-top:8px;font-family:'Playfair Display',serif;font-size:23px;font-weight:600;line-height:1.2;color:var(--leaf-deep)}
.bt-start-copy{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--char-soft)}
.bt-clinic{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:16px;justify-content:center;margin-top:18px}
.bt-clinic[hidden]{display:none}
.bt-clinic label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:13.5px;color:#fff}
.bt-clinic select{font:inherit;font-size:15px;font-weight:600;padding:12px 16px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px;background:#fff;color:var(--char)}
.bt-clinic select:disabled{opacity:.6}
.bt-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:620px;margin:40px auto 0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);padding:20px 24px}
.bt-bar > div{display:flex;flex-direction:column;gap:3px}
.bt-bar-label{font-size:13px;font-weight:600;color:rgba(255,255,255,.75)}
.bt-bar-sel{font-size:17px;color:#fff}
.bt-bar-sel b{font-size:19px}
.bt-bar-hint{font-size:13px;color:var(--leaf)}
.bt-bar .btn{border:0;cursor:pointer;font-family:inherit;color:var(--leaf-deep)}
.bt-bar .btn:hover{background:#fff;color:var(--leaf-deep)}
.bt-bar .btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.bt-center{justify-content:center}
.bt-notfound{padding:40px 0}
@media (max-width:1000px){.bt-plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .bt-top,.bt-about{grid-template-columns:1fr;gap:28px}
  .bt-media img{min-height:240px}
  .bt-choose{border-radius:0;padding:44px 0 54px}
}
@media (max-width:560px){
  .bt-plans,.bt-starts,.bt-clinic{grid-template-columns:1fr}
  .bt-bar{flex-direction:column;align-items:stretch;text-align:center}
}
/* Home-collection-only tests (KnowMyGut™, Food DNA): single, non-selectable start card */
.bt-starts-single{grid-template-columns:minmax(0,520px)}
.bt-start-static{background:#fff;border-color:var(--leaf);cursor:default}

/* =========================================================
   Checkout: BioHealthcare Club points + order summary (purchase.php)
   ========================================================= */
.lp-card{background:var(--mint);border:1.5px solid var(--ring);border-radius:var(--r-md);padding:22px 24px}
.lp-title{font-weight:800;color:var(--leaf-deep);font-size:16px}
.lp-sub{margin-top:6px;font-size:14px;line-height:1.55;color:var(--char-soft)}
.lp-signin{margin-top:14px;padding:12px 26px;font-size:15px}
.lp-balance{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.lp-label{width:100%;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.lp-points{font-size:30px;font-weight:800;color:var(--leaf-deep);line-height:1.15}
.lp-points small{font-size:15px;font-weight:700}
.lp-worth{font-size:14.5px;font-weight:600;color:var(--char-soft)}
.lp-msg{margin-top:14px;background:#fff;border-radius:12px;padding:12px 16px;font-size:14.5px;font-weight:600;color:var(--leaf-deep)}
.lp-note{margin-top:12px;font-size:13.5px;color:#9a4b1f;background:var(--peach);border-radius:12px;padding:10px 14px}
.start-form .lp-field{margin-top:18px}
.lp-control{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.lp-control input[type=range]{flex:1 1 220px;accent-color:var(--leaf-deep);min-width:0;height:28px}
.start-form .lp-control input[type=number]{width:130px;font-family:inherit;font-size:16px;font-weight:700;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(42,44,40,.14);background:#fff;color:var(--char)}
.start-form .lp-control input[aria-invalid=true]{border-color:#B5423E}
.lp-max{font:inherit;font-weight:700;font-size:14px;cursor:pointer;border:1.5px solid var(--leaf-deep);background:#fff;color:var(--leaf-deep);border-radius:999px;padding:11px 18px;white-space:nowrap}
.lp-max:hover{background:var(--leaf-deep);color:#fff}
.lp-help{margin-top:10px;font-size:13.5px;color:var(--char-soft)}
.lp-error{margin-top:8px;font-size:13.5px;font-weight:700;color:#B5423E}

.lp-summary{margin:30px 0 4px;max-width:520px;padding:26px 28px;border:1.5px solid var(--ring)}
.lp-summary h3{color:var(--leaf-deep);margin-bottom:6px}
.lp-summary .lp-row span{color:var(--leaf-deep);font-weight:700}
.lp-summary .lp-row small{font-weight:600;color:var(--char-soft)}
.lp-summary .summary-row[hidden]{display:none}
.lp-earn{margin-top:14px;background:var(--mint);border-radius:12px;padding:12px 16px;font-size:14.5px;color:var(--leaf-deep)}
.lp-earn small{display:block;margin-top:2px;font-size:12.5px;color:var(--char-soft)}
.lp-earn a{color:var(--leaf-deep);font-weight:700}
@media (max-width:640px){
  .lp-card{padding:18px}
  .lp-control{gap:10px}
  .lp-control input[type=range]{flex-basis:100%}
  .start-form .lp-control input[type=number]{flex:1}
  .lp-summary{padding:20px;max-width:none}
}

/* =========================================================
   Header "Join Club Card" button + Club join form messages
   ========================================================= */
.nav-club{border:1.5px solid var(--leaf-deep);color:var(--leaf-deep) !important;border-radius:999px;padding:7.5px 18px;font-weight:700;font-size:14px}
.nav-club:hover,.nav-club:focus-visible,.nav-club[aria-current="page"]{background:var(--leaf-deep);color:#fff !important}
/* Desktop widths just above the mobile menu: tighten the nav so all items (incl. Join Club Card) fit. */
@media (min-width:1181px) and (max-width:1560px){
  .nav-links{gap:13px;font-size:13.5px}
  .nav-links .nav-dd > button{font-size:13.5px}
  .logo img{height:74px}
  .nav-club,.nav-login{padding:7px 14px;font-size:13.5px}
}
@media (min-width:1181px) and (max-width:1340px){
  .nav-links{gap:10px;font-size:13px}
  .nav-links .nav-dd > button{font-size:13px}
  .logo img{height:60px}
  .nav-club,.nav-login{padding:6px 12px;font-size:13px}
}
@media (max-width:1180px){
  .nav-links > li > a.nav-club{display:block;margin:14px 4px 0;padding:14px 20px;text-align:center;font-size:16px}
}
.page-club .club-wrap .join .club-error{margin:14px auto 0;max-width:36em;background:var(--peach);color:#9a4b1f;font-weight:700;font-size:14px;border-radius:12px;padding:10px 16px}
.page-club .club-wrap .join .club-error[hidden]{display:none}
.club-hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.page-club .club-wrap .join input[readonly]{background:var(--sage);color:var(--char-soft)}

/* =========================================================
   Customer dashboard: Club points (dashboard.php)
   ========================================================= */
.account-content .admin-stats.has-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
a.admin-stat-points{text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
a.admin-stat-points:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(42,44,40,.08)}
.admin-stat-icon.i-points{background:#EEF5D0;color:var(--leaf-deep)}
.points-panel{margin-top:28px;background:var(--mint);border:1.5px solid var(--ring);border-radius:var(--r-md);padding:26px 28px}
.points-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.points-kicker{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.points-balance{margin-top:4px;font-size:34px;font-weight:800;line-height:1.1;color:var(--leaf-deep)}
.points-balance small{font-size:15px;font-weight:700}
.points-worth{margin-top:4px;font-size:14.5px;color:var(--char-soft)}
.points-head .btn{padding:13px 26px;font-size:15px}
.points-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:20px}
.points-facts div{background:#fff;border-radius:14px;padding:14px 16px}
.points-facts b{display:block;font-size:20px;font-weight:800;color:var(--leaf-deep)}
.points-facts span{font-size:13px;color:var(--char-soft)}
.points-note{margin-top:12px;font-size:14px;color:var(--char-soft)}
.points-note a{color:var(--leaf-deep);font-weight:700}
.points-empty{margin-top:16px;background:#fff;border-radius:14px;padding:14px 16px;font-size:14.5px;color:var(--char-soft)}
.points-history{margin-top:18px;background:#fff;border-radius:14px}
.points-history .num{text-align:right;white-space:nowrap}
.points-history .pts-plus{color:var(--leaf-deep);font-weight:800}
.points-history .pts-minus{color:#B5423E;font-weight:800}
@media (max-width:640px){
  .points-panel{padding:20px}
  .points-balance{font-size:28px}
  .points-head .btn{width:100%;text-align:center}
}
.points-history td:first-child{white-space:nowrap}
@media (max-width:640px){.account-content .admin-stats.has-points .admin-stat-points{grid-column:1/-1}}