/* Forever Health Rx — treatment catalog, v20 "Stages" (2026-10-13).
   LifeMD-style stacked category panels with depth and texture, in the Brand Book line colours: each .stage is a deep→mid
   gradient of its category, white type, soft "orb" highlights (echo of the glass-sphere product photography), a fine noise
   texture (assets/noise.svg) and a frosted card holding mini product cards. Desktop: sticky stacking (assets/stages.js writes
   --p = how much the next panel covers this one; CSS scales/dims from it). Mobile and reduced motion: static panels.
   Shared tokens (.cat--<slug> --c/--c-tint/--c-soft/--c-deep/--c-mid), .ctag/.cdot and the mega menu live in site.css.
   Used by: home (#explore), /treatments/ hub, /treatments/<category>/, /treatments/<product>/ (with treatments.css).
   Previous versions: web-backups/catalog.v19.1-constructivist.bak.css, catalog.v19.2-fresh.bak.css */

/* ---------------------------------------------------------------- status + estimate marks */
.cstatus{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:5px 10px; border-radius:999px; white-space:nowrap; }
.cstatus::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.cstatus--live{ color:#1f5b4e; background:#e3f0ea; }
.cstatus--soon{ color:var(--navy); background:rgba(255,255,255,.92); box-shadow:0 2px 8px -2px rgba(0,32,79,.18); }
.cstatus--soon::before{ background:var(--c,var(--steel-deep)); }
.cest{ display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.04em; color:var(--muted); background:var(--off); border-radius:999px; padding:2px 7px; vertical-align:middle; }

/* ---------------------------------------------------------------- stages (stacked category panels) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.stages{ position:relative; display:flex; flex-direction:column; gap:16px; padding:clamp(24px,3.5vw,48px) 0 clamp(8px,1.5vw,16px); overflow:visible; }
.stages__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:6px; }
.stages__head h2{ font-size:clamp(30px,3.4vw,46px); line-height:1.04; letter-spacing:-.03em; color:var(--navy); margin-top:10px; }
.stages__head .link{ white-space:nowrap; }
.stages__head .hero__trust{ margin-top:14px; }
@media (max-width:899px){ .stages__head .hero__trust{ gap:6px 16px; } .stages__head .hero__trust li{ font-size:12.5px; } }
.stage{ position:sticky; top:calc(var(--nav-h) + 18px + var(--i,0) * 14px); z-index:calc(1 + var(--i,0));
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(24px,4vw,60px); align-items:stretch;
  min-height:min(580px, calc(100vh - var(--nav-h) - 48px)); padding:clamp(30px,3.6vw,52px) clamp(24px,4.2vw,60px);
  border-radius:28px; color:#fff; isolation:isolate; overflow:hidden;
  transform:scale(calc(1 - var(--p,0) * .06)); transform-origin:50% 0; will-change:transform;
  box-shadow:0 40px 80px -36px rgba(0,22,56,.55), inset 0 1px 0 rgba(255,255,255,.18); }
.stage__bg{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(46% 70% at 82% 14%, rgba(255,255,255,.26), transparent 70%),
             radial-gradient(30% 44% at 8% 96%, rgba(255,255,255,.16), transparent 70%),
             radial-gradient(22% 30% at 60% 110%, rgba(255,255,255,.12), transparent 70%),
             linear-gradient(135deg, var(--c-deep) 0%, var(--c-mid) 100%); }
.stage__bg::before{ content:""; position:absolute; inset:0; background:url(noise.svg) repeat; background-size:180px 180px; opacity:.3; mix-blend-mode:soft-light; }
.stage__bg::after{ content:""; position:absolute; right:-8%; top:-18%; width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, rgba(255,255,255,.34), rgba(255,255,255,.06) 55%, transparent 72%); filter:blur(2px); }
.stage::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit; background:rgba(0,22,56,.6); opacity:calc(var(--p,0) * .4); }
.stage__copy{ position:relative; display:flex; flex-direction:column; gap:18px; min-width:0; }
.stage__eyebrow{ display:inline-flex; align-self:flex-start; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:none; }
.stage__eyebrow .cdot{ background:#fff; width:7px; height:7px; }
.stage__n{ font-variant-numeric:tabular-nums; opacity:.85; }
.stage h2,.stage h1{ font-weight:300; font-size:clamp(38px,4.4vw,60px); line-height:1; letter-spacing:-.03em; color:#fff; max-width:13ch; margin:0; }
.stage h2 em,.stage h1 em{ font-family:var(--display-italic); font-style:italic; font-weight:400; letter-spacing:-.012em; padding-right:.06em; }
.stage__checks{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px; font-size:15.5px; line-height:1.45; max-width:40ch; }
.stage__checks li{ display:flex; gap:10px; align-items:flex-start; }
.stage__checks svg{ flex:none; width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:3px; }
.stage__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:auto; padding-top:10px; }
.stage .btn--white{ color:var(--c-deep); box-shadow:0 14px 30px -14px rgba(0,22,56,.55); }
.stage .btn--white svg{ color:var(--c-deep); }
.stage__ghost{ color:#fff; font-weight:500; font-size:15px; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:1px; transition:border-color .25s; }
.stage__ghost:hover{ border-color:#fff; }
.stage__tag{ display:none; }
.stage__m{ display:none; }
.stage__card{ position:relative; align-self:start; display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:22px; min-width:0;
  background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), inset 0 1px 0 rgba(255,255,255,.3), 0 30px 60px -36px rgba(0,22,56,.7); }
@media (min-width:900px){ .stage__card{ backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); } }
.stage__card-head{ display:flex; flex-direction:column; gap:6px; padding:2px 4px 0; }
.stage__card-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.78; }
.stage__card h3{ font-size:clamp(19px,1.7vw,24px); font-weight:400; letter-spacing:-.015em; color:#fff; line-height:1.15; }
.stage__minis{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini{ position:relative; display:grid; grid-template-columns:84px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:12px; row-gap:2px; padding:9px; border-radius:18px;
  background:#fff; color:var(--navy); box-shadow:0 10px 24px -18px rgba(0,22,56,.5); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
a.mini:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -18px rgba(0,22,56,.6); }
.mini img,.mini__tile{ grid-row:1 / span 3; width:84px; height:104px; object-fit:cover; border-radius:13px; background:var(--c-tint); }
.mini img.is-photo{ object-position:center 28%; }
.mini__tile{ display:grid; place-items:center; color:var(--c-deep); }
.mini__tile svg{ width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mini b{ font-size:14.5px; font-weight:500; line-height:1.2; letter-spacing:-.005em; padding-top:2px; }
.mini__gen{ font-size:12px; color:var(--c-deep); line-height:1.25; }
.mini__chips{ display:flex; flex-wrap:wrap; gap:4px; align-self:end; padding-top:4px; }
.mini__chips i{ font-style:normal; font-size:10.5px; font-weight:600; line-height:1; padding:4px 7px; border-radius:999px; background:var(--c-tint); color:var(--navy); white-space:nowrap; }
.mini__chips i.is-live{ background:#e3f0ea; color:#1f5b4e; }
.mini__chips i.is-soon{ background:var(--off); color:#3f5068; }
.mini--nolink{ opacity:.82; }
.mini__go{ position:absolute; right:10px; top:10px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--c-tint); color:var(--navy); opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .25s var(--ease); }
.mini__go svg{ width:13px; height:13px; }
a.mini:hover .mini__go{ opacity:1; transform:none; }
.stage__sub{ border-top:1px solid rgba(255,255,255,.26); padding-top:10px; display:grid; gap:8px; }
.stage__sub-label{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:12.5px; font-weight:600; }
.stage__sub-label small{ font-weight:400; font-size:11.5px; opacity:.8; }
.stage__sub .stage__minis{ grid-template-columns:1fr 1fr; }
.mini--row{ grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto; padding:6px 10px 6px 6px; row-gap:0; }
.mini--row img,.mini--row .mini__tile{ width:40px; height:40px; grid-row:1 / span 2; border-radius:10px; }
.mini--row b{ font-size:13.5px; padding-top:1px; }
.mini--row .mini__chips{ display:none; }
.stage__all{ align-self:flex-end; display:inline-flex; align-items:center; gap:6px; margin-top:2px; font-size:13.5px; font-weight:600; color:#fff; opacity:.92; }
.stage__all svg{ width:15px; height:15px; }
.stage__all:hover{ opacity:1; }
.stage:focus-within{ z-index:30; --p:0 !important; }
.stage--hero{ position:relative; top:auto; min-height:0; }
.stage--hero .stage__minis{ grid-template-columns:1fr 1fr; }
.stages__note{ max-width:900px; margin:10px auto 0; text-align:center; font-size:12.5px; line-height:1.55; color:var(--muted); }
@media (max-width:1100px){ .stage{ gap:24px; padding:28px 26px; } .stage h2,.stage h1{ font-size:clamp(34px,4.4vw,48px); } }
@media (max-width:899px){
  /* compact card (LifeMD-style): eyebrow · title · tagline · photo · product chips · CTA; uniform 14px gaps */
  .stages{ gap:14px; padding-top:18px; }
  /* v20.6: the stack effect also on mobile — sticky panels with 8px lips, scaled/dimmed by --p (stages.js) */
  .stage{ position:sticky; top:calc(var(--nav-h) + 8px + var(--i,0) * 8px); display:flex; flex-direction:column; min-height:0; padding:22px 20px 20px; border-radius:24px; box-shadow:0 24px 48px -30px rgba(0,22,56,.5); }
  .stage--hero{ position:relative; top:auto; transform:none !important; }
  .stage__copy{ gap:12px; }
  .stage h2,.stage h1{ font-size:clamp(32px,8.6vw,40px); max-width:none; }
  .stage__tag{ display:block; font-size:15.5px; line-height:1.4; opacity:.9; margin-top:-2px; }
  .stage__checks,.stage__card,.stage__ghost{ display:none; }
  .stage__m{ display:grid; gap:12px; margin:4px 0 2px; }
  .stage__m img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center 30%; border-radius:16px; box-shadow:0 18px 36px -24px rgba(0,22,56,.7); }
  .stage__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
  .stage__chips li{ font-size:12px; font-weight:600; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); }
  .stage__ctas{ margin-top:4px; padding-top:4px; }
  .stage .btn--white{ width:100%; min-height:50px; }
  /* v21.11 (2026-10-20, user: "reparte hacia abajo"): the category hero stacks in ONE column on phones (it inherited the desktop
     two-column grid, squeezing the treatment card beside the copy) and the three checks go one under the other. */
  .stage--hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:22px 18px 18px; }
  .stage--hero .stage__copy{ gap:12px; }
  .stage--hero .stage__card{ display:flex; padding:14px; margin:0; }
  .stage--hero .stage__checks{ display:grid; gap:8px; max-width:none; font-size:14.5px; line-height:1.4; }
  .stage--hero .stage__checks svg{ margin-top:2px; }
  .stage--hero .stage__card-head h3{ display:none; }   /* repeats the tagline already shown above */
  .stage--hero .stage__card-head{ padding:0 2px; }
  .stage--hero .stage__minis{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -14px; padding:2px 14px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .stage--hero .stage__minis::-webkit-scrollbar{ display:none; }
  .stage--hero .stage__minis .mini{ flex:0 0 78%; max-width:300px; scroll-snap-align:start; }
  .stage--hero .stage__sub .stage__minis .mini{ flex:0 0 68%; }
  .stages__head{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){ .stage{ position:relative; top:auto; transform:none !important; } .stage::after{ display:none; } .mini,.mini__go{ transition:none; } }

/* ---------------------------------------------------------------- product card (hub + category grids) */
.cgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:clamp(14px,1.6vw,20px); }
.ccard{ position:relative; display:flex; flex-direction:column; background:#fff; border-radius:24px; overflow:hidden; border:1px solid rgba(0,32,79,.06);
  box-shadow:0 1px 2px rgba(0,32,79,.04), 0 14px 34px -22px rgba(0,32,79,.28); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.ccard:hover{ transform:translateY(-5px); box-shadow:0 2px 4px rgba(0,32,79,.05), 0 26px 48px -22px rgba(0,32,79,.34); }
.ccard[hidden]{ display:none; }
.ccard__fig{ position:relative; margin:0; aspect-ratio:1/1; overflow:hidden; background:radial-gradient(110% 90% at 50% 8%, #fff 0%, var(--c-tint) 70%); }
.ccard__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.ccard__fig img.is-photo{ object-position:center 30%; }
.ccard:hover .ccard__fig img{ transform:scale(1.045); }
.ccard__fig .cstatus{ position:absolute; left:12px; bottom:12px; }
.ccard__fig .ctag{ position:absolute; top:12px; left:12px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:12px; padding:5px 10px 5px 8px; }
.ccard__body{ display:flex; flex-direction:column; gap:4px; padding:16px 18px 18px; flex:1; }
.ccard h3{ font-size:18px; font-weight:500; line-height:1.2; letter-spacing:-.01em; color:var(--navy); }
.ccard__gen{ font-size:12.5px; color:var(--c-deep); font-weight:500; }
.ccard__desc{ font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:4px; }
.ccard__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:14px; }
.ccard__price{ font-size:13px; color:var(--muted); }
.ccard__price b{ font-size:20px; font-weight:500; color:var(--navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ccard__go{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--c-tint); color:var(--navy); transition:background .3s, color .3s, transform .35s var(--ease); }
.ccard__go svg{ width:16px; height:16px; }
.ccard--live .ccard__go{ background:var(--navy); color:#fff; }
.ccard:hover .ccard__go{ transform:translateX(3px); }
.ccard__link::after{ content:""; position:absolute; inset:0; z-index:1; }   /* whole card clickable */
.ccard__link:focus-visible{ outline:none; }
.ccard:has(.ccard__link:focus-visible){ outline:3px solid var(--blue-300); outline-offset:3px; }
.ccard--nolink{ opacity:.85; }
.cgrid__sub{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:10px 0 -6px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; font-weight:600; color:var(--navy); }
.cgrid__sub small{ font-weight:400; color:var(--muted); }

/* ---------------------------------------------------------------- category pills (anchors) */
.ctabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.ctab{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 13px; border-radius:999px; background:#fff; border:1px solid rgba(0,32,79,.1);
  color:var(--navy); font-size:14px; font-weight:500; white-space:nowrap; transition:background .25s, color .25s, border-color .25s, box-shadow .25s; }
.ctab:hover{ border-color:var(--c,var(--navy)); }

/* ---------------------------------------------------------------- hub / category sections */
.chub{ text-align:center; padding-bottom:clamp(18px,2.5vw,32px) !important; }
.chub h1{ font-size:clamp(42px,5.6vw,76px); line-height:.98; letter-spacing:-.035em; color:var(--navy); margin:12px auto 14px; max-width:16ch; }
.chub h1 em{ font-family:var(--display-italic); font-style:italic; font-weight:400; color:var(--steel-deep); }
.chub .lead{ margin:0 auto; text-align:center; }
.csec{ scroll-margin-top:calc(var(--nav-h) + 24px); }
.csec + .csec{ margin-top:clamp(48px,6vw,80px); }
.csec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.csec__head h2{ font-size:clamp(28px,3vw,40px); line-height:1.05; letter-spacing:-.03em; color:var(--navy); margin-top:10px; }
.csec__head p{ font-size:15px; color:var(--muted); max-width:62ch; margin-top:6px; }
@media (max-width:760px){ .csec__head{ flex-direction:column; align-items:flex-start; } }
.cnote{ max-width:820px; margin:24px auto 0; text-align:center; font-size:12.5px; line-height:1.55; color:var(--muted); }
.calso{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--muted); }

/* three steps */
.csteps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
.csteps article{ padding:26px 22px 22px; background:#fff; border:1px solid rgba(0,32,79,.06); border-radius:22px; }
.csteps b{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--c-tint,var(--steel-tint)); color:var(--navy); font-size:15px; font-weight:600; margin-bottom:14px; font-variant-numeric:tabular-nums; }
.csteps h3{ font-size:18px; color:var(--navy); margin-bottom:6px; }
.csteps p{ font-size:14.5px; color:var(--muted); line-height:1.55; }
@media (max-width:900px){ .csteps{ grid-template-columns:1fr; } }
.chead{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; max-width:760px; margin:0 auto clamp(26px,3.4vw,40px); }
.chead h2{ font-size:clamp(30px,3.4vw,46px); line-height:1.04; letter-spacing:-.03em; color:var(--navy); }
.chead .lead{ text-align:center; margin:0 auto; }

/* ---------------------------------------------------------------- product page additions (body.tx-page) */
.tx-panel .ctag{ align-self:flex-start; }
.tx-tabs--cat{ flex-wrap:wrap; }
.tx-tabs--cat a{ padding:7px 14px; font-size:13.5px; }
.tx-fig img.is-photo{ object-position:center 30%; }
.cx-soon{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:16px; background:var(--c-soft,#f6f8fa); box-shadow:inset 0 0 0 1px rgba(0,32,79,.06); font-size:14px; line-height:1.5; color:var(--navy); }
.cx-soon .cdot{ margin-top:6px; }
.cx-safety h3{ font-size:clamp(22px,2vw,28px); color:var(--navy); margin-bottom:14px; }
.cx-safety h4{ font-size:16px; color:var(--navy); margin:20px 0 6px; }
.cx-safety p,.cx-safety li{ font-size:15px; line-height:1.6; color:var(--muted); }
.cx-safety ul{ padding-left:20px; display:grid; gap:6px; }
.cx-safety .box{ border:1.5px solid var(--navy); border-radius:16px; padding:16px 18px; margin:0 0 12px; background:#fff; }
.cx-safety .box--info{ border-color:transparent; background:var(--c-soft,#f3f7fa); box-shadow:inset 0 0 0 1px rgba(0,32,79,.06); }
.cx-safety .box h4{ margin-top:0; }
.cx-sources{ margin-top:20px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; }
.cx-sources ol{ padding-left:20px; display:grid; gap:4px; }
.cx-sources a{ color:var(--blue-700); text-decoration:underline; text-underline-offset:3px; word-break:break-word; }
.cx-about{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); }
.cx-about article{ background:#fff; border:1px solid rgba(0,32,79,.06); border-radius:22px; padding:22px; }
.cx-about h3{ display:flex; align-items:center; gap:9px; font-size:18px; color:var(--navy); margin-bottom:8px; }
.cx-about p{ font-size:15px; line-height:1.6; color:var(--muted); }
@media (max-width:900px){ .cx-about{ grid-template-columns:1fr; } }
/* plan selector: 3-month featured, 6/12 coming soon (landings) */
.tx-plans{ padding-top:10px; }
.tx-plans .tx-plan__chip{ position:absolute; top:-10px; right:10px; margin:0; z-index:2; }
.tx-plan{ position:relative; }
.tx-plan--featured{ border:2px solid transparent !important; background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(228,236,243,.86)) padding-box, linear-gradient(135deg,var(--c-deep,#00204f),var(--c,#9cb6cb)) border-box !important;
  transform:translateY(-4px) scale(1.02); box-shadow:0 22px 44px -18px rgba(0,32,79,.4) !important; z-index:1; }
.tx-plan--featured[aria-checked="true"]{ box-shadow:0 0 0 1px var(--navy), 0 22px 44px -18px rgba(0,32,79,.45) !important; }
.tx-plan--featured .tx-plan__chip{ background:var(--navy); color:#fff; }
.tx-plan--featured .tx-plan__price b{ font-size:30px; }
.tx-plan--flex .tx-plan__chip{ background:var(--steel-tint); color:var(--navy); box-shadow:none; }
.tx-plan--soon{ opacity:.55; cursor:default; pointer-events:none; }
.tx-plan--soon .tx-plan__chip{ background:#fff; color:var(--muted); border:1px dashed rgba(0,32,79,.35); box-shadow:none; }
.tx-plan__save{ font-size:12px; font-weight:600; color:var(--c-deep,var(--teal)); }
.tx-price__total{ font-size:13.5px; color:var(--muted); margin-top:2px; }
.tx-price__total b{ color:var(--navy); font-weight:600; }
@media (max-width:640px){ .tx-tabs--cat{ align-self:stretch; justify-content:center; border-radius:22px; } .tx-plan--featured{ transform:none; } }

@media (prefers-reduced-motion:reduce){ .ccard,.ccard__fig img,.ccard__go{ transition:none !important; } }

/* ---------------------------------------------------------------- home category cards (v20.5): two columns under the hero, LifeMD-style with our depth */
.catcards{ grid-area:cards; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:clamp(18px,3svh,30px); padding-top:clamp(14px,2.4svh,22px); border-top:1px solid rgba(0,32,79,.08); perspective:1400px; }
/* Tactile "stone" surface: colour gradient + volume vignette, two grain layers (fine + coarse, overlay), bevelled edge (light on top,
   shade below) and layered drop shadows so the card reads as a solid slab with weight. */
.catcard{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) clamp(150px,34%,230px); gap:18px; min-height:clamp(240px,31svh,300px); padding:22px 22px 22px 26px; border-radius:24px; overflow:hidden; isolation:isolate; color:#fff;
  background:radial-gradient(120% 95% at 22% 12%, rgba(255,255,255,.16), rgba(255,255,255,0) 52%), radial-gradient(90% 80% at 100% 100%, rgba(0,12,30,.22), rgba(0,12,30,0) 56%), linear-gradient(104deg, var(--c-vdeep,var(--c-deep)) 0%, var(--c-vdeep,var(--c-deep)) 26%, var(--c-vivid,var(--c-mid)) 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,10,28,.35), inset 0 -28px 44px -34px rgba(0,10,28,.5), inset 0 0 0 1px rgba(255,255,255,.07),
    0 1px 2px rgba(0,22,56,.22), 0 10px 18px -10px rgba(0,22,56,.4), 0 34px 60px -26px rgba(0,22,56,.6);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease); }
.catcard::before{ content:""; position:absolute; inset:0; z-index:-1; background:url(noise.svg) repeat, url(noise.svg) repeat; background-size:140px 140px, 420px 420px; opacity:.5; mix-blend-mode:overlay; }
.catcard::after{ content:""; position:absolute; z-index:-1; left:-14%; bottom:-46%; width:62%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), rgba(255,255,255,.05) 58%, transparent 72%); filter:blur(2px); }
.catcard:hover{ transform:translateY(-6px) rotateX(1.5deg); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,10,28,.35), inset 0 -28px 44px -34px rgba(0,10,28,.5), inset 0 0 0 1px rgba(255,255,255,.1),
    0 2px 3px rgba(0,22,56,.22), 0 16px 26px -12px rgba(0,22,56,.45), 0 46px 76px -28px rgba(0,22,56,.66); }
.catcard:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.catcard__n{ position:absolute; left:26px; top:20px; font-size:11px; font-weight:700; letter-spacing:.14em; opacity:.9; font-variant-numeric:tabular-nums; line-height:1; padding:6px 9px; border-radius:999px; background:rgba(0,10,28,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,10,28,.3); }
.catcard__body{ display:flex; flex-direction:column; justify-content:flex-end; gap:6px; min-width:0; padding-top:30px; }
.catcard__body b{ font-size:clamp(24px,2vw,30px); font-weight:500; line-height:1.06; letter-spacing:-.025em; text-wrap:balance; }
.catcard__body em{ font-family:var(--display-italic); font-style:italic; font-weight:400; font-size:clamp(17px,1.35vw,20px); line-height:1.2; opacity:.92; }
.catcard__body small{ display:flex; align-items:center; gap:7px; font-size:12px; opacity:.85; margin-top:2px; line-height:1.3; }
.catcard__body small i{ width:7px; height:7px; border-radius:50%; background:#8fe0b5; box-shadow:0 0 0 3px rgba(143,224,181,.25); flex:none; }
.catcard__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; padding:0; list-style:none; }
.catcard__chips li{ font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,10,28,.22), 0 1px 2px rgba(0,10,28,.18); white-space:nowrap; line-height:1.2; }
.catcard__go{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:14px; padding:9px 14px 9px 16px; border-radius:999px; background:linear-gradient(180deg,#fff,#f1f4f8); color:var(--c-vdeep,var(--c-deep)); font-size:13.5px; font-weight:600; line-height:1;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(0,10,28,.25), 0 10px 18px -10px rgba(0,10,28,.5); transition:box-shadow .35s, transform .35s var(--ease); }
.catcard__go svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.catcard:hover .catcard__go{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 3px 6px rgba(0,10,28,.25), 0 16px 26px -12px rgba(0,10,28,.55); } .catcard:hover .catcard__go svg{ transform:translateX(3px); }
.catcard__fig{ position:relative; border-radius:18px; overflow:hidden; align-self:stretch; min-height:100%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 2px 3px rgba(0,10,28,.28), 0 18px 30px -16px rgba(0,10,28,.6); }
.catcard__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform 1.4s var(--ease); }
.catcard__fig::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--c-deep) 0%, rgba(0,0,0,0) 48%); opacity:.5; mix-blend-mode:multiply; }
.catcard:hover .catcard__fig img{ transform:scale(1.05); }
/* v20.6: silhouette cut-out standing on the colour — the card's own gradient is the background (LifeMD-like), a soft glow
   behind the figure and a drop shadow under it give it volume. The figure runs to the card's bottom edge. */
.catcard__fig--cut{ border-radius:0; overflow:visible; box-shadow:none; margin:-22px -22px -22px 0; clip-path:inset(0); -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 18%); mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 18%); }   /* wide figures (busts) fade into the colour instead of a hard cut at the column edge */
.catcard__fig--cut::before{ content:""; position:absolute; right:-10%; left:10%; top:12%; height:95%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.26), rgba(255,255,255,.07) 58%, transparent 100%); filter:blur(10px); }
.catcard__fig--cut::after{ display:none; }
.catcard__fig--cut img{ position:absolute; top:5%; right:0; left:auto; bottom:auto; width:auto; max-width:none; height:calc(100% * var(--zoom,1.35)); object-fit:unset; filter:drop-shadow(0 24px 26px rgba(0,10,28,.45)); transition:transform .6s var(--ease); transform-origin:50% 0; }
.catcard:hover .catcard__fig--cut img{ transform:translateY(-3px) scale(1.02); }
.catcard--all{ --c-deep:#00204F; --c-mid:#3D5E7E; --c-vdeep:#00204F; --c-vivid:#3D5E7E; grid-template-columns:minmax(0,1fr); }
.catcard--all::after{ left:auto; right:-10%; bottom:-30%; width:52%; }
@media (max-width:1100px){ .catcard{ grid-template-columns:minmax(0,1fr) clamp(130px,32%,200px); padding:20px 18px 20px 22px; } .catcard__n{ left:22px; } .catcard__fig--cut{ margin:-20px -18px -20px 0; } }
@media (max-width:899px){
  /* v20.7: LifeMD-style mobile — one column, each card with its figure zoomed at the right */
  .catcards{ grid-template-columns:minmax(0,1fr); gap:10px; margin-top:16px; padding-top:14px; }
  .catcard{ grid-template-columns:minmax(0,1fr) 38%; gap:8px; min-height:186px; padding:16px 0 14px 16px; border-radius:20px; }
  .catcard__n{ left:16px; top:14px; font-size:10.5px; }
  .catcard__body{ padding-top:24px; gap:4px; padding-right:4px; }
  .catcard__body b{ font-size:20px; } .catcard__body em{ font-size:15px; } .catcard__body small{ font-size:11px; }
  .catcard__chips{ display:none; }
  .catcard__fig{ display:block; }
  .catcard__fig--cut{ margin:-16px 0 -14px 0; }
  .catcard__fig--cut img{ top:4%; height:calc(100% * var(--zoom-m,var(--zoom,1.35)) * .98); filter:drop-shadow(0 16px 18px rgba(0,10,28,.45)); }
  .catcard__fig--wide img{ top:auto; bottom:0; }   /* busts that fit whole stand on the bottom edge */
  .catcard__go{ margin-top:10px; padding:8px 12px 8px 13px; font-size:12.5px; }
  .catcard--lg{ grid-column:auto; min-height:186px; }
  .catcard--all{ grid-column:auto; grid-template-columns:minmax(0,1fr); min-height:0; padding-right:16px; }
  .catcard--all .catcard__body{ padding-top:24px; }
}
@media (prefers-reduced-motion:reduce){ .catcard,.catcard__go svg,.catcard__fig img{ transition:none; } }

/* 2026-11-03 RESPONSIVE PASS: sibling-product tabs wrap into rows of 40 px pills with a little air between rows (they were
   36 px and touching), and the wrapper keeps a soft radius when it grows to several rows. */
.tx-tabs--cat{ gap:2px; border-radius:24px; }
.tx-tabs--cat a{ display:inline-flex; align-items:center; min-height:40px; padding:0 15px; }