/* ============================================================
   Aluna — shared design system (palette + components)
   Real brand: sage heroes, orange accent, charcoal text, DM Sans
   ============================================================ */
:root{
  --orange:#f44706; --orange-deep:#d63d05; --teal:#00a99d;
  --ink:#2b2e2c;            /* headings / dark text (theme-text-color) */
  --body:#5a6268;           /* body text */
  --muted:#7a8288;          /* muted text */
  --sage:#d9e8df;           /* brand sage (theme-secondary) — header, footer, hero section */
  --hero:#d9e8df;           /* hero / sub-hero section background */
  --page:#eef4f0;           /* lighter sage for alternating content sections */
  --callout:#eef4f0;        /* callout / alt section */
  --panel:#cfe2da;          /* mega-menu panel */
  --border:#cdddd4; --border-soft:#bcd2c8;
  --dark:#d9e8df;           /* footer (sage) */
  --white:#fff; --grey:#f3f6f5; --cream:#fffaf6;
  --shadow:0 22px 46px -32px rgba(44,51,56,.5);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans","Open Sans",system-ui,sans-serif;color:var(--body);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .15s}
h1,h2,h3,.disp{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}

/* pill label */
.plabel{display:inline-block;background:var(--orange);color:#fff;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;padding:7px 16px;border-radius:999px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:11px;background:var(--orange);color:#fff;border:none;cursor:pointer;
  font:inherit;font-weight:700;font-size:.9rem;padding:9px 9px 9px 24px;border-radius:999px;
  transition:background .18s,transform .18s,box-shadow .18s}
.btn:hover{background:var(--orange-deep);transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(214,61,5,.6)}
.btn .arr{width:30px;height:30px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}
.btn .arr svg{width:15px;height:15px;color:var(--orange)}
.btn.ghost{background:#fff;color:var(--orange-deep)}
.btn.ghost .arr{background:var(--orange)} .btn.ghost .arr svg{color:#fff}
.btn.ghost:hover{background:#fff;box-shadow:0 14px 26px -14px rgba(44,51,56,.4)}

/* ---------- header + mega menu ---------- */
header.site{position:sticky;top:0;z-index:50;background:var(--sage);border-bottom:1px solid var(--border)}
.hd{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:24px}
.logo img{height:34px;width:auto;display:block}
.nav{display:flex;gap:6px;align-items:center}
.nav>.item{position:static}
.nav>.item>a{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--ink);padding:10px 14px;border-radius:10px;transition:color .15s,background .15s}
.nav>.item>a::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.5;transition:transform .2s}
.nav>.item>a.solo::after{display:none}
.nav>.item:hover>a{color:var(--orange);background:var(--callout)}
.nav>.item:hover>a::after{transform:rotate(225deg);margin-top:2px}
/* mega-menu panel (full-width) */
.mega{position:absolute;top:100%;left:0;right:0;background:var(--sage);border-top:1px solid var(--border-soft);
  box-shadow:0 30px 40px -20px rgba(44,62,52,.30);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:40}
.mega::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:24px}  /* hover bridge across header padding */
.nav>.item:hover .mega,.nav>.item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega .mwrap{max-width:1180px;margin:0 auto;padding:46px clamp(20px,4vw,40px);display:flex;justify-content:space-between;align-items:center;gap:50px;flex-wrap:wrap}
.mega .mcol{min-width:0}
.mega .mlabel{display:inline-block;background:var(--orange);color:#fff;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;padding:7px 16px;border-radius:999px;margin-bottom:20px}
.mega .mhead{display:block;font-family:"Playfair Display",serif;font-size:2.4rem;line-height:1.12;color:var(--ink);margin:10px 0;transition:color .15s}
.mega .mhead:hover{color:var(--orange-deep)}
.mega .mbtns{display:flex;gap:14px;flex-wrap:wrap;flex-shrink:0}
.mega .mbtns .btn{font-size:.95rem;padding:12px 12px 12px 28px}
.mega .mbtns .btn .arr{width:34px;height:34px}
/* header right-side */
.hd .cta{display:flex;align-items:center;gap:12px}
.hd .icons{display:flex;align-items:center;gap:8px}
.hd .ico{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .15s,box-shadow .15s}
.hd .ico:hover{transform:translateY(-2px);box-shadow:0 10px 18px -10px rgba(44,51,56,.4);color:var(--orange)}
.hd .ico svg{width:18px;height:18px}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger svg{width:26px;height:26px;color:var(--ink)}
#navtoggle{display:none}

/* ---------- hero (home) — two rounded boxes: orange content + light product ---------- */
.hero-outer{background:var(--page);padding:30px 0}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:stretch}
.hbox{border-radius:28px}
.hbox.left{background:var(--orange);color:var(--cream);padding:clamp(36px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.hbox.right{background:#ebf4f0;display:flex;align-items:center;justify-content:center;padding:14px;min-height:540px;overflow:hidden}
.hbox.right img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hero h1{font-size:clamp(2.2rem,3.3vw,3.1rem);line-height:1.05;margin:0 0 16px;color:var(--cream)}
.hero .lede{font-size:1.02rem;color:rgba(255,250,246,.92);margin:0 0 26px;max-width:34rem}
.hero .checks{list-style:none;padding:0;margin:0 0 28px}
.hero .checks li{display:flex;gap:13px;align-items:center;margin:13px 0;font-size:.98rem;color:rgba(255,250,246,.96)}
.hero .checks .tick{flex-shrink:0;color:#fff;display:flex;margin-top:1px}
.hero .checks .tick svg{width:16px;height:16px}
.hero .fine{margin-top:24px;font-size:.76rem;line-height:1.65;color:rgba(255,250,246,.78);max-width:42rem}
/* dark button (hero) */
.btn.dark{background:var(--ink);color:#fff}
.btn.dark .arr{background:transparent;border:2px solid rgba(255,255,255,.85)}
.btn.dark .arr svg{color:#fff}
.btn.dark:hover{background:#1a1f1c;transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,0,0,.5)}
@media(max-width:860px){ .hero{grid-template-columns:1fr} .hbox.right{min-height:360px;order:-1} }

/* trust strip */
.tstrip{background:var(--page);border-bottom:1px solid var(--border)}
.tstrip .row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding:18px 0}
.tstrip .item{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:var(--ink)}
.tstrip .item svg{width:17px;height:17px;color:var(--orange)}

/* ---------- sub-hero (inner pages) — ORANGE box on SAGE section ---------- */
.subhero-outer{background:var(--hero);padding:30px 0}
.subhero{background:var(--orange);color:var(--cream);border-radius:26px;padding:56px;text-align:center}
.subhero .plabel{background:rgba(255,255,255,.16);color:#fff;margin-bottom:18px}
.subhero h1{font-size:2.9rem;line-height:1.1;margin:0 0 14px;color:var(--cream)}
.subhero p{font-size:1.05rem;color:rgba(255,250,246,.9);margin:0 auto;max-width:40rem}
.subhero .btn{margin-top:26px}

/* ---------- sections ---------- */
section.sec{padding:80px 0}
.sec-head{text-align:center;max-width:48rem;margin:0 auto 50px}
.sec-head h2{font-size:2.4rem;line-height:1.14;margin:16px 0 12px}
.sec-head p{font-size:1.05rem;color:var(--muted);margin:0}
.bg-page{background:var(--page)} .bg-callout{background:var(--callout)} .bg-hero{background:var(--hero)}
.lead{max-width:760px;margin:0 auto;text-align:center;font-size:1.1rem;color:var(--muted)}
.prose{max-width:760px;margin:0 auto}.prose p{color:var(--body);margin:0 0 18px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:920px;margin:0 auto}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(44,51,56,.5)}
.card .ic{width:50px;height:50px;border-radius:12px;background:var(--orange);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.card .ic svg{width:24px;height:24px;color:#fff}
.card h3{font-size:1.25rem;margin:0 0 10px}
.card p{margin:0;font-size:.94rem;color:var(--body)}
.jtag{display:inline-block;background:var(--orange);color:#fff;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:5px 11px;border-radius:999px;margin-bottom:16px}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:820px;margin:0 auto}
.pcard{background:var(--callout);border:1px solid var(--border);border-radius:18px;padding:34px 32px;text-align:center;transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pcard h3{font-size:1.15rem;margin:0 0 8px}
.pcard .price{font-family:"Playfair Display",serif;font-size:2.6rem;color:var(--orange-deep);margin:6px 0}
.pcard .per{font-size:.85rem;color:var(--muted);margin:0 0 18px}
.pcard ul{list-style:none;padding:0;margin:0;text-align:left;display:inline-block}
.pcard li{font-size:.9rem;color:var(--ink);margin:9px 0;padding-left:26px;position:relative}
.pcard li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:700}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tmember{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px 26px;text-align:center;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.tmember:hover{transform:translateY(-5px);box-shadow:0 30px 50px -30px rgba(44,51,56,.5)}
.tmember .av{width:84px;height:84px;border-radius:50%;background:var(--hero);margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-family:"Playfair Display",serif;font-size:1.9rem;color:var(--orange-deep)}
.tmember h3{font-size:1.2rem;margin:0 0 2px}
.tmember .role{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);font-weight:700;margin:0 0 12px}
.tmember p{font-size:.9rem;color:var(--body);margin:0}

/* faq */
.faq{max-width:780px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:14px;padding:2px 26px;box-shadow:var(--shadow);transition:box-shadow .2s}
.faq details[open]{box-shadow:0 26px 44px -30px rgba(44,51,56,.5)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.04rem;color:var(--ink);padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:1.6rem;font-weight:400;line-height:1;transition:transform .2s}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--orange-deep)}
.faq details p{margin:0 0 22px;color:var(--body);font-size:.95rem;line-height:1.7}

/* register CTA (orange accent block) */
#register{background:var(--orange)}
#register .rwrap{max-width:680px;margin:0 auto;text-align:center}
#register .plabel{background:rgba(255,255,255,.18);color:#fff;margin-bottom:18px}
#register h2{color:#fff;font-size:2.4rem;margin:0 0 12px}
#register p.sub{color:rgba(255,255,255,.92);font-size:1.05rem;margin:0 0 28px}
#register form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:560px;margin:0 auto}
#register input{flex:1 1 200px;border:none;border-radius:999px;padding:15px 22px;font:inherit;font-size:.96rem;background:#fff;color:var(--ink)}
#register input::placeholder{color:#9aa7ad}
#register button{border:none;border-radius:999px;padding:15px 30px;font:inherit;font-weight:700;background:var(--ink);color:#fff;cursor:pointer;flex:1 1 100%;max-width:560px;transition:background .18s,transform .18s}
#register button:hover{background:#1a1f23;transform:translateY(-2px)}
#register .fine{margin-top:18px;font-size:.74rem;color:rgba(255,255,255,.78);line-height:1.6;max-width:48rem;margin:18px auto 0}

.disc{text-align:center;font-size:.78rem;color:var(--muted);margin:34px auto 0;max-width:54rem;line-height:1.6}

/* footer (sage) */
footer.site{background:var(--sage);color:var(--body);padding:54px 0 34px;font-size:.86rem}
footer.site .ftop{margin-bottom:34px}
footer.site .ftop img{height:38px;width:auto}
footer.site .fgrid{display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:40px}
footer.site a{color:var(--ink)}footer.site a:hover{color:var(--orange)}
footer.site .fcol p.h{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink);margin:0 0 16px;font-weight:700}
footer.site .fcol a{display:block;margin:8px 0;font-size:.86rem;font-weight:500}
footer.site .addr{font-style:normal;line-height:1.7;color:var(--body)}
footer.site .reg{margin-top:34px;padding-top:22px;border-top:1px solid var(--border);line-height:1.7;color:var(--muted)}

/* ---------- responsive / mobile menu ---------- */
@media(max-width:960px){
  .burger{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:#fff;flex-direction:column;align-items:stretch;gap:2px;
    padding:80px 18px 30px;box-shadow:-20px 0 50px -20px rgba(0,0,0,.3);transform:translateX(100%);transition:transform .25s;overflow:auto;z-index:60}
  #navtoggle:checked ~ .nav{transform:translateX(0)}
  .nav>.item>a{padding:14px 14px;border-radius:12px}
  .nav>.item>a::after{display:none}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:none;padding:0 0 6px 12px;min-width:0}
  .mega a{padding:9px 12px}
  /* simplify the mega-menu inside the mobile drawer: plain links, no overflow */
  .nav .mlabel,.nav .mbtns{display:none}
  .nav .mwrap,.nav .mcol{display:block;padding:0;gap:0}
  .nav .mhead{font-family:"DM Sans",system-ui,sans-serif;font-size:1rem;font-weight:500;color:var(--body);padding:8px 12px}
  .hero{padding:44px 28px}.hero h1{font-size:2.4rem}
  .subhero{padding:42px 26px}.subhero h1{font-size:2.2rem}
  .grid3,.team,.grid2,.plans,footer.site .fgrid{grid-template-columns:1fr 1fr}
  .sec-head h2{font-size:2rem}section.sec{padding:58px 0}
}
@media(max-width:760px){ .hero{flex-direction:column;align-items:flex-start}.hero-art{order:-1;width:100%}.hero-art img{max-width:300px;transform:none} }
@media(max-width:600px){ .grid3,.team,.grid2,.plans,footer.site .fgrid{grid-template-columns:1fr} }


/* pricing product cards */
.pcard .ptype{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);font-weight:700;margin:0 0 4px}
.pcard h3{font-size:1.5rem;margin:0 0 4px}
.pcard .btn{margin-top:18px}
.pcard-soon{border:1.5px dashed var(--orange);background:#fff}

.pcard .doses{list-style:none;padding:0;margin:14px 0 4px;text-align:left;width:100%}
.pcard .doses li{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;border-bottom:1px solid var(--border);font-size:.95rem}
.pcard .doses li:last-child{border-bottom:none}
.pcard .doses .dose{color:var(--ink);font-weight:600}
.pcard .doses .amt{font-family:"Playfair Display",serif;color:var(--orange-deep);font-weight:700;font-size:1.05rem}
.pcard .pnote{font-size:.76rem;color:var(--muted);margin:8px 0 0}
.pcard .doses li::before{content:none !important;display:none}

/* ============ SHOP ARCHIVE + PRODUCT PAGES ============ */
.crumb{font-size:.85rem;color:var(--muted);margin:0 0 22px}
.crumb a{color:var(--body);text-decoration:none}
.crumb a:hover{color:var(--orange)}

/* shop grid */
.shop{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.shopcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.shopcard:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(0,0,0,.28)}
.shopcard .pimg{aspect-ratio:16/10;background:#ebf4f0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.shopcard .pimg img{width:100%;height:100%;object-fit:cover}
.shopcard .flag{position:absolute;top:14px;left:14px;background:var(--orange);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.shopcard .pbody{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.shopcard .ptype{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);font-weight:700;margin:0 0 4px}
.shopcard h3{font-size:1.45rem;margin:0 0 7px}
.shopcard .pdesc{color:var(--body);font-size:.94rem;line-height:1.55;margin:0 0 16px;flex:1}
.shopcard .prow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shopcard .pfrom{font-size:.85rem;color:var(--muted)}
.shopcard .pfrom b{font-family:"Playfair Display",serif;color:var(--orange-deep);font-size:1.2rem;font-weight:700}
.shopcard .pgo{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink);font-size:.92rem}
.shopcard:hover .pgo .arr{transform:translateX(3px)}

/* product detail */
.product{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;margin-top:6px}
.product .pgallery{background:#ebf4f0;border-radius:24px;overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:sticky;top:100px}
.product .pgallery img{width:100%;height:100%;object-fit:cover}
.psum .ptype{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);font-weight:700;margin:0 0 4px}
.psum h1{font-family:"Playfair Display",serif;font-size:2.7rem;line-height:1.05;margin:4px 0 14px;color:var(--ink)}
.pbadge{display:inline-flex;align-items:center;gap:8px;background:var(--hero);color:var(--ink);border-radius:999px;padding:8px 15px;font-size:.8rem;font-weight:600;margin-bottom:18px}
.pbadge svg{width:15px;height:15px;color:var(--orange)}
.psum .lede{color:var(--body);font-size:1.06rem;line-height:1.6;margin:0 0 20px}
.psum .doses{list-style:none;padding:0;margin:0 0 6px}
.psum .doses li{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--border)}
.psum .doses li:last-child{border-bottom:none}
.psum .doses .dose{color:var(--ink);font-weight:600}
.psum .doses .amt{font-family:"Playfair Display",serif;color:var(--orange-deep);font-weight:700;font-size:1.1rem}
.psum .doses li::before{content:none !important;display:none}
.psum .pnote{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.buyrow{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.psum .fine{font-size:.76rem;color:var(--muted);line-height:1.5;margin:18px 0 0}
@media(max-width:860px){
  .shop{grid-template-columns:1fr}
  .product{grid-template-columns:1fr;gap:30px}
  .product .pgallery{position:static;aspect-ratio:16/11;max-width:460px}
  .psum h1{font-size:2.2rem}
}

/* ============ ENHANCEMENTS: quiz / BMI / trust / reviews / compare / journal / a11y ============ */

/* --- accessibility: visible focus --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}

/* --- eligibility quiz + BMI --- */
.quiz{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:24px;padding:clamp(26px,4vw,44px);box-shadow:var(--shadow)}
.quiz .qprogress{height:7px;background:var(--page);border-radius:999px;overflow:hidden;margin-bottom:30px}
.quiz .qbar{height:100%;width:0;background:var(--orange);border-radius:999px;transition:width .35s}
.qstep{display:none}.qstep.active{display:block;animation:qfade .3s}
@keyframes qfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.qstep .qnum{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--orange);font-weight:700}
.qstep h3{font-size:1.6rem;margin:6px 0 6px}
.qstep .qhelp{color:var(--body);margin:0 0 22px}
.qopts{display:grid;gap:12px}
.qopt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.qopt:hover{border-color:var(--orange);background:var(--page)}
.qopt:active{transform:scale(.99)}
.qopt .qdot{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--border)}
.qopt.sel{border-color:var(--orange);background:#fff4ef}.qopt.sel .qdot{border-color:var(--orange);background:var(--orange);box-shadow:inset 0 0 0 3px #fff}
.qfields{display:flex;gap:16px;flex-wrap:wrap}
.qfield{flex:1;min-width:140px}
.qfield label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.qfield input,.qfield select{width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;font:inherit;color:var(--ink);background:#fff}
.qbmi-out{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--page);font-weight:600;color:var(--ink);display:none}
.qbmi-out.show{display:block}
.qbmi-out b{font-family:"Playfair Display",serif;color:var(--orange-deep);font-size:1.3rem}
.qnav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.qback{background:none;border:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer;padding:10px}
.qback:hover{color:var(--ink)}
.qresult{display:none;text-align:center}.qresult.show{display:block;animation:qfade .3s}
.qresult .ric{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.qresult .ric svg{width:34px;height:34px;color:#fff}
.qresult.ok .ric{background:var(--orange)}.qresult.no .ric{background:#8a96a0}
.qresult h3{font-size:1.9rem;margin:0 0 10px}
.qresult p{color:var(--body);max-width:46ch;margin:0 auto 12px}
.qresult .ractions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* --- trust strip / GPhC badge / clinician reg --- */
.trustbadge{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 18px;max-width:430px}
.trustbadge .tlogo{flex-shrink:0;width:46px;height:46px;border-radius:10px;background:var(--page);display:flex;align-items:center;justify-content:center;color:var(--orange)}
.trustbadge .tlogo svg{width:24px;height:24px}
.trustbadge .tinfo{font-size:.82rem;line-height:1.45;color:var(--body)}
.trustbadge .tinfo b{display:block;color:var(--ink);font-size:.9rem}
.trustbadge .tinfo a{color:var(--orange-deep);font-weight:600}
.regno{display:inline-block;margin-top:8px;font-size:.78rem;color:var(--muted);font-weight:600}

/* --- testimonials --- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote{background:#fff;border:1px solid var(--border);border-radius:20px;padding:28px;display:flex;flex-direction:column}
.quote .stars{color:var(--orange);letter-spacing:2px;margin-bottom:12px;font-size:1rem}
.quote p{color:var(--ink);font-size:1.02rem;line-height:1.6;margin:0 0 18px;flex:1}
.quote .who{display:flex;align-items:center;gap:11px}
.quote .av{width:38px;height:38px;border-radius:50%;background:var(--panel);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700}
.quote .who b{color:var(--ink);font-size:.92rem}.quote .who span{display:block;color:var(--muted);font-size:.8rem}

/* --- comparison table --- */
.ctable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctable{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden}
.ctable th,.ctable td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;font-size:.93rem}
.ctable thead th{background:var(--page);color:var(--ink);font-family:"Playfair Display",serif;font-weight:600;font-size:1.05rem}
.ctable thead th .ptype{display:block;font-family:"DM Sans",sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);font-weight:700;margin-bottom:2px}
.ctable tbody th{font-weight:600;color:var(--muted);background:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ctable td{color:var(--body)}
.ctable .cfrom{font-family:"Playfair Display",serif;color:var(--orange-deep);font-weight:700;font-size:1.1rem}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:none}
.ctable .cgo{color:var(--orange-deep);font-weight:700}

/* --- journal --- */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.jcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.jcard:hover{transform:translateY(-5px);box-shadow:0 26px 54px -26px rgba(0,0,0,.28)}
.jcard .jimg{aspect-ratio:16/9;background:#ebf4f0;overflow:hidden}
.jcard .jimg img{width:100%;height:100%;object-fit:cover}
.jcard .jbody{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.jcard .jtagline{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);font-weight:700;margin:0 0 8px}
.jcard h3{font-size:1.25rem;line-height:1.25;margin:0 0 8px}
.jcard p{color:var(--body);font-size:.93rem;line-height:1.55;margin:0 0 16px;flex:1}
.jcard .jmeta{font-size:.8rem;color:var(--muted)}
.article{max-width:720px;margin:0 auto}
.article p{color:var(--body);font-size:1.07rem;line-height:1.75;margin:0 0 18px}
.article h2{font-size:1.7rem;margin:34px 0 12px}
.article h3{font-size:1.3rem;margin:26px 0 10px}
.article ul{color:var(--body);font-size:1.05rem;line-height:1.7;padding-left:1.2em;margin:0 0 18px}
.article .lead{font-size:1.18rem;color:var(--ink);line-height:1.6}
.article .ameta{color:var(--muted);font-size:.88rem;margin:0 0 26px;border-bottom:1px solid var(--border);padding-bottom:20px}

/* --- floating contact button --- */
.fab{position:fixed;right:20px;bottom:20px;z-index:70;display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:13px 20px 13px 16px;border-radius:999px;font-weight:700;font-size:.9rem;box-shadow:0 16px 34px -12px rgba(0,0,0,.5);transition:transform .16s,background .16s}
.fab:hover{transform:translateY(-3px);background:#1a1f1c;color:#fff}
.fab svg{width:20px;height:20px}
@media(max-width:560px){.fab span{display:none}.fab{padding:14px;border-radius:50%}}

/* responsive */
@media(max-width:860px){
  .quotes,.jgrid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .quiz{padding:24px 18px}
}

/* ============ WORDPRESS + WOOCOMMERCE INTEGRATION ============ */
.aluna-main{padding:10px 0 20px}
.entry-content{color:var(--body);font-size:1.05rem;line-height:1.75}
.entry-content h1,.entry-title{font-size:2.4rem;margin:0 0 18px}
.entry-content a{color:var(--orange-deep);font-weight:600}

/* Woo buttons -> brand */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.clinrx-start-consult,.clinrx-start-consult-single,
.wc-block-components-button{background:var(--orange)!important;color:#fff!important;border:none!important;border-radius:999px!important;
  padding:12px 26px!important;font-weight:700!important;font-family:"DM Sans",sans-serif!important;transition:background .18s,transform .18s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.clinrx-start-consult:hover,.clinrx-start-consult-single:hover{
  background:var(--orange-deep)!important;transform:translateY(-2px)}

/* shop grid */
.woocommerce ul.products li.product{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;text-align:center;transition:transform .16s,box-shadow .16s}
.woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:0 24px 50px -26px rgba(0,0,0,.22)}
.woocommerce ul.products li.product img{border-radius:12px;background:#ebf4f0}
.woocommerce ul.products li.product .price{color:var(--orange-deep);font-family:"Playfair Display",serif;font-weight:700}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{color:var(--muted)}

/* single product */
.woocommerce div.product .product_title{font-size:2.2rem}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--orange-deep);font-family:"Playfair Display",serif;font-weight:700;font-size:1.5rem}
.single-product .clinrx-pom-badge,.clinrx-pom-badge{display:inline-block;background:var(--hero);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;margin-bottom:12px}

/* forms (consultation / account / community) */
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.clinrx-form input,.clinrx-form select,.clinrx-form textarea,
.alunacomm input,.alunacomm textarea,.alunacomm select{
  border:1.5px solid var(--border)!important;border-radius:12px!important;padding:12px 14px!important;font:inherit!important}
.clinrx-form fieldset,.clinrx-group{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;margin:0 0 20px}
.clinrx-group h3,.clinrx-form legend{font-family:"Playfair Display",serif;font-size:1.3rem;color:var(--ink)}

/* account nav */
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--border)}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:12px 4px;font-weight:600;color:var(--ink)}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{color:var(--orange-deep)}

/* messages */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--orange)!important;border-radius:10px}

/* community inside shell */
.alunacomm-btn-primary{background:var(--orange)!important;color:#fff!important;border-radius:999px!important;padding:11px 22px!important;font-weight:700}

/* ====== SHOP/PRODUCT AESTHETIC FIXES ====== */
/* clean vertical product cards (fixes the floating "Start consultation" button) */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:24px;margin:0 0 10px;padding:0}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;display:flex!important;flex-direction:column;text-align:left;padding:16px}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;color:inherit}
.woocommerce ul.products li.product img{aspect-ratio:1/1;object-fit:contain!important;background:#ebf4f0;border-radius:12px;padding:14px;margin:0 0 14px!important;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:1.2rem!important;padding:0!important;margin:0 0 4px;line-height:1.2}
.woocommerce ul.products li.product .price{display:block;margin:2px 0 14px;font-size:1.15rem}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .clinrx-start-consult{margin-top:auto!important;width:100%;justify-content:center;float:none!important}
@media(max-width:980px){ .woocommerce ul.products{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .woocommerce ul.products{grid-template-columns:1fr} }

/* single product: contained image, tidy meta */
.woocommerce div.product .woocommerce-product-gallery{background:#ebf4f0;border-radius:16px;padding:18px}
.woocommerce div.product .woocommerce-product-gallery img{object-fit:contain;border-radius:8px;background:transparent}
.woocommerce div.product .product_meta .sku_wrapper{display:none}      /* hide SKU */
.woocommerce div.product .product_meta{font-size:.82rem;color:var(--muted);border-top:1px solid var(--border);padding-top:14px;margin-top:18px}
.woocommerce .clinrx-start-consult-single{display:inline-flex;margin-top:6px}
/* related products use same card grid */
.woocommerce .related.products ul.products,.woocommerce .upsells ul.products{grid-template-columns:repeat(3,1fr)}
/* WooCommerce clearfix pseudo-elements become grid items → empty leading cell. Kill them. */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
/* single product: make the main image fill its column */
.woocommerce div.product .woocommerce-product-gallery{width:46%!important;float:left;margin-bottom:2em}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image{width:100%!important;margin:0}
.woocommerce div.product .woocommerce-product-gallery img{width:100%!important;aspect-ratio:1/1;object-fit:contain}
.woocommerce div.product div.summary{width:50%!important}
/* real product photos are on white — white image tiles with a subtle border */
.woocommerce ul.products li.product img{background:#fff!important;border:1px solid var(--border)}
.woocommerce div.product .woocommerce-product-gallery{background:#fff!important;border:1px solid var(--border)}
/* treatments page — treatment selection cards */
.treatcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:940px;margin:0 auto}
.treatcards .card{display:flex;flex-direction:column}
.treatcards .tprod{width:100%;aspect-ratio:16/10;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;margin:0 0 16px}
.treatcards .tlogo{height:26px;width:auto;align-self:flex-start;margin:0 0 12px}
.treatcards .card p{flex:0 0 auto}
.treatcards .card .btn{margin-top:auto;align-self:flex-start}
@media(max-width:760px){.treatcards{grid-template-columns:1fr}}

/* ===== brand the community forum — override the plugin's off-palette navy/blue/mint ===== */
.alunacomm-wrap{
  --aluna-navy:#2b2e2c!important;      /* navy → Aluna ink (charcoal) */
  --aluna-navy-dk:#1a1f1c!important;
  --aluna-pale-blue:#fff7f3!important; /* pale-blue → warm tint */
  --aluna-cream:#fffaf6!important;     /* warm cream, not blue */
  --aluna-mint:#d9e8df!important;      /* bright mint → sage */
  --aluna-mint-dk:#cfe2da!important;
  --aluna-line:#cdddd4!important;      /* borders → sage */
}
/* branded forum header band */
.alunacomm-wrap .alunacomm-hero{background:#d9e8df;border-radius:22px;padding:34px 36px!important;margin-bottom:32px}
.alunacomm-wrap .alunacomm-hero h1{color:#2b2e2c;font-family:"Playfair Display",Georgia,serif}
.alunacomm-wrap .alunacomm-hero p{color:#5a6268}
/* softer category + content cards */
.alunacomm-wrap .alunacomm-cat-card{border-radius:16px}
.alunacomm-wrap .alunacomm-cats{gap:22px}
.alunacomm-wrap .alunacomm-disclaimer,.alunacomm-wrap .alunacomm-notice{border-radius:12px}

/* ===== MOTION: marquee trust strip + scroll reveal ===== */
.tstrip .row.marquee-host{overflow:hidden;justify-content:flex-start;flex-wrap:nowrap}
.marquee-track{display:flex;width:max-content;animation:aluna-marquee 32s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-grp{display:flex;align-items:center;gap:0 40px;padding-right:40px;flex-shrink:0}
.marquee-grp .item{white-space:nowrap}
@keyframes aluna-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

html.motion .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .65s cubic-bezier(.2,.7,.2,1)}
html.motion .reveal.in-view{opacity:1;transform:none}
html.motion .grid3 .card.reveal:nth-child(2){transition-delay:.08s}
html.motion .grid3 .card.reveal:nth-child(3){transition-delay:.16s}
html.motion .treatcards .card.reveal:nth-child(2){transition-delay:.06s}
html.motion .treatcards .card.reveal:nth-child(3){transition-delay:.12s}
html.motion .treatcards .card.reveal:nth-child(4){transition-delay:.18s}
@media (prefers-reduced-motion: reduce){ html.motion .reveal{opacity:1;transform:none;transition:none} .marquee-track{animation:none} }
/* Why-Aluna cards: sage fill */
.sage-cards .card{background:var(--sage)!important;border-color:transparent;box-shadow:none}
.sage-cards .card:hover{box-shadow:0 18px 40px -24px rgba(44,51,56,.28)}
/* Why-Aluna sage cards → white on hover */
.sage-cards .card{transition:background .28s ease,box-shadow .22s ease,transform .16s ease}
.sage-cards .card:hover{background:#fff!important;transform:translateY(-3px)}
/* Journey step cards → sage on hover (reverse of the Why-Aluna cards) */
.sage-hover .card{transition:background .28s ease,box-shadow .22s ease,transform .16s ease}
.sage-hover .card:hover{background:var(--sage)!important;border-color:transparent;transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(44,51,56,.28)}
/* single product image: fill the column at natural ratio (product photos are landscape) */
.woocommerce div.product .woocommerce-product-gallery{opacity:1!important;width:48%!important;float:left;display:flex;align-items:center}
.woocommerce div.product div.summary{width:48%!important}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper{width:100%!important;margin:0}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image{width:100%!important}
.woocommerce div.product .woocommerce-product-gallery img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain;border-radius:8px}
@media(max-width:760px){.woocommerce div.product .woocommerce-product-gallery,.woocommerce div.product div.summary{width:100%!important;float:none}}
/* FORCE clean product layout (div.product was rendering as grid; gallery flexslider collapsed the image) */
.woocommerce div.product{display:flex!important;flex-wrap:wrap;column-gap:4%;align-items:flex-start}
.woocommerce div.product .woocommerce-product-gallery{flex:0 0 48%!important;max-width:48%!important;width:48%!important;float:none!important;margin:0 0 2em;opacity:1!important}
.woocommerce div.product div.summary{flex:0 0 48%!important;max-width:48%!important;width:48%!important;float:none!important;margin:0}
.woocommerce div.product .woocommerce-tabs,.woocommerce div.product .related,.woocommerce div.product .upsells{flex:0 0 100%!important;max-width:100%!important;width:100%!important}
.woocommerce div.product .woocommerce-product-gallery__wrapper{width:100%!important;max-width:100%!important;transform:none!important;margin:0}
.woocommerce div.product .woocommerce-product-gallery__image{width:100%!important;max-width:100%!important;display:block;margin:0}
.woocommerce div.product .woocommerce-product-gallery img{width:100%!important;max-width:100%!important;height:auto!important;display:block;aspect-ratio:auto!important;border-radius:8px}
@media(max-width:760px){.woocommerce div.product .woocommerce-product-gallery,.woocommerce div.product div.summary{flex:0 0 100%!important;max-width:100%!important;width:100%!important}}

/* --- icon fallback (v29): inline SVGs in these spans were stripped from page
   content by wp_kses on save; render them from CSS instead. :empty guarantees
   this never doubles up on theme buttons whose <svg> is still present. --- */
.hero .checks .tick:empty{width:16px;height:16px}
.hero .checks .tick:empty::before,.btn .arr:empty::before{content:"";display:block;background:currentColor}
.hero .checks .tick:empty::before{width:16px;height:16px;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.btn .arr:empty::before{width:15px;height:15px;background:var(--orange);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E") center/contain no-repeat}
.btn.dark .arr:empty::before{background:#fff}
.btn.ghost .arr:empty::before{background:#fff}

/* hero button should hug its content, not stretch the flex column */
.hbox.left .btn{align-self:flex-start}
/* av-fix */
.av{width:44px;height:44px;border-radius:50%;background:#d9e8df;color:#22372e;display:inline-flex;align-items:center;justify-content:center;font-weight:600;line-height:1;flex-shrink:0;font-family:'DM Sans',sans-serif}
.who .av{width:38px;height:38px;font-size:15px}
.tmember .av{width:66px;height:66px;font-size:25px;margin-bottom:14px}
/* drawer-legibility: larger, darker menu options in the mobile/tablet drawer */
@media(max-width:960px){
 .nav>.item>a{font-size:1.05rem}
 .nav .mhead{font-size:1.2rem;color:var(--ink);font-weight:500;padding:11px 12px}
}