/* Product detail page — the compact, high-conversion layout approved
   2026-09-14 (desktop 1440, tablet 834, mobile 390 mocks).
 *
 * WHAT THIS REPLACES, AND WHY. The previous product page was a long-form
 * editorial article: a light hero, a trust marquee, then numbered essay
 * sections. It read well and converted badly -- the price and the action sat
 * below three screens of prose, and the facts a shopper actually decides on
 * (sample, preparation, state, what it measures) were scattered between them.
 * The regression was one of KIND, not length: each pass shortened the article
 * instead of replacing it with a product page, so shortening it again would
 * not have fixed it. This file is the product page: one dark hero carrying the
 * identity, a purchase card fixed to it carrying the decision, and beneath it
 * a short, scannable, continuous hierarchy -- no tab bar, no anchor strip.
 *
 * Everything here is driven by tokens already defined in celio-content.css, so
 * the page cannot drift from the brand. Nothing in this file styles the shared
 * header; the header owns itself (header.css) and must not be reachable from a
 * page-family stylesheet. */

/* ------------------------------------------------------------- breadcrumbs */
.pdp-crumbs{max-width:1320px;margin:0 auto;padding:12px var(--cg-pad-x);
  font:500 12.5px/1.5 var(--cg-font-mono);color:var(--cg-muted);
  display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.pdp-crumbs a{color:var(--cg-muted);text-decoration:none}
.pdp-crumbs a:hover{color:var(--cg-forest);text-decoration:underline}
.pdp-crumbs__sep{color:var(--cg-border-strong)}
.pdp-crumbs__here{color:var(--cg-forest);font-weight:600}

/* -------------------------------------------------------------------- hero */
/* NOT overflow:hidden. Below 900px the purchase card leaves the hero grid and
   overlaps the hero's foot, but it is still a DOM child of the hero -- so a
   clipping hero cut the bottom 10-13px off the Add to Cart button and all of
   its focus outline at 834, 390 and 320. The clip existed only to contain the
   decorative orb, so the orb gets its own clipping box (.pdp-hero__deco) and
   the hero stops clipping its own content. */
.pdp-hero{position:relative;background:var(--cg-forest-deep);color:var(--cg-on-dark);
  isolation:isolate}
.pdp-hero__deco{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.pdp-hero__wrap{max-width:1320px;margin:0 auto;padding:36px var(--cg-pad-x) 34px;
  display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start}
.pdp-hero__orb{position:absolute;top:-70px;right:-60px;width:300px;height:300px;
  border-radius:50%;background:radial-gradient(circle at 34% 30%,#BBDD6A,#7FA733 62%,#5d7f24);
  opacity:.5;pointer-events:none}
.pdp-badge{display:inline-block;background:var(--cg-lime);color:var(--cg-forest-ink);
  font:700 12px/1 var(--cg-font-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--cg-r-pill)}
.pdp-hero h1{margin:14px 0 0;font-size:clamp(28px,3.1vw,44px);line-height:1.08;
  letter-spacing:-.022em;font-weight:800;color:#fff;max-width:14ch}
.pdp-hero h1.pdp-h1--long{max-width:20ch;font-size:clamp(25px,2.5vw,35px)}
.pdp-lede{margin:14px 0 0;max-width:52ch;font-size:16px;line-height:1.55;
  color:var(--cg-on-dark-body)}

/* Fact chips. Only rendered when the underlying fact exists -- there is no
   placeholder chip, so a product with no preparation simply has one chip
   fewer and the row reflows. */
.pdp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.pdp-chip{display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.17);
  color:var(--cg-on-dark);border-radius:12px;padding:10px 15px;
  font-size:13.5px;font-weight:500;line-height:1.25}
.pdp-chip svg{flex:none;opacity:.85}

/* ----------------------------------------------------------- purchase card */
.pdp-buy{background:#fff;color:var(--cg-ink);border-radius:20px;padding:22px 22px 24px;
  box-shadow:0 18px 44px -18px rgba(12,24,10,.55);align-self:start}
.pdp-buy__price{font-size:40px;line-height:1;font-weight:800;color:var(--cg-forest);
  letter-spacing:-.025em}
.pdp-buy__terms{margin:8px 0 16px;font-size:12px;line-height:1.45;color:var(--cg-muted)}
.pdp-buy__rows{border-top:1px solid var(--cg-hairline)}
.pdp-buy__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--cg-hairline);font-size:13.5px}
.pdp-buy__k{color:var(--cg-muted);flex:none}
.pdp-buy__v{color:var(--cg-ink-strong);font-weight:600;text-align:right;
  overflow-wrap:anywhere;min-width:0}
.pdp-buy__v--state{color:var(--cg-forest)} /* was --cg-lime-deep: 2.81:1 on white, fails AA 4.5:1 */
.pdp-buy__state{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-weight:600;color:var(--cg-forest);display:inline-flex;align-items:center;gap:5px}
.pdp-buy__act{margin-top:18px;display:flex;flex-direction:column;align-items:center;
  padding-bottom:6px}   /* the focus ring is 3px at 3px offset; give it room */
/* The one sentence under Add to cart: same width as the button, left-aligned
   with it, secondary size and the muted colour. No box, no icon. */
.pdp-buy__act .pdp-buy__avail{margin:8px 0 0;width:260px;max-width:100%;text-align:left;
  font-size:13.5px;line-height:1.5;color:var(--cg-muted)}
/* In NY/NJ/RI the same slot says "Unavailable for collection in <state>." with
   one Change link (owner, 2026-09-16): same size and place, no box, no icon.
   The sticky notice under the header is the explanation. */
.pdp-buy__avail .linklike{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:underline}
/* The state line is centred under the centred button (owner, 2026-09-16). */
.pdp-buy__act .pdp-buy__avail--off{text-align:center}

/* THE CTA. Compact and centred, never an edge-to-edge banner: a button that
   spans its container reads as a section divider, not as the one thing to do.
   Widths are the approved 240-280 desktop / 220-240 mobile. */
.pdp-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:260px;max-width:100%;min-height:52px;line-height:1.2;padding:0 26px;
  background:var(--cg-forest);color:#fff;border:0;border-radius:var(--cg-r-pill);
  font:700 16px/1 var(--cg-font-sans);cursor:pointer;
  transition:background .18s var(--cg-ease),transform .18s var(--cg-ease),box-shadow .18s var(--cg-ease)}
.pdp-cta:hover{background:var(--cg-forest-ink);box-shadow:0 10px 22px -10px rgba(24,41,19,.7)}
.pdp-cta:focus-visible{outline:3px solid var(--cg-lime);outline-offset:3px}
.pdp-cta:active{transform:translateY(1px)}
.pdp-cta[disabled],.pdp-cta[aria-disabled="true"]{background:var(--cg-border-strong);
  color:#fff;cursor:not-allowed;box-shadow:none;transform:none;opacity:.85}
.pdp-cta[disabled]:hover,.pdp-cta[aria-disabled="true"]:hover{background:var(--cg-border-strong)}
.pdp-buy__note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--cg-muted);
  text-align:center}
.pdp-buy__blocked{margin:12px 0 0;font-size:12.5px;line-height:1.5;
  color:var(--cg-alert-head);background:var(--cg-alert-bg);
  border:1px solid var(--cg-alert-border);border-radius:10px;padding:10px 12px}

/* ------------------------------------------------------------ content grid */
.pdp-main{max-width:1320px;margin:0 auto;padding:30px var(--cg-pad-x) 12px}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:22px;align-items:start}
.pdp-stack{display:flex;flex-direction:column;gap:22px;min-width:0}

.pdp-card{background:var(--cg-card);border:1px solid var(--cg-border);
  border-radius:18px;padding:22px 24px;min-width:0}
.pdp-card__head{display:flex;align-items:center;gap:11px;margin:0 0 14px}
.pdp-card__ico{flex:none;width:30px;height:30px;border-radius:9px;
  background:var(--cg-card-inset);display:grid;place-items:center;color:var(--cg-forest)}
.pdp-card__num{flex:none;width:30px;height:30px;border-radius:50%;
  background:#E9F0D8;color:var(--cg-lime-deep);display:grid;place-items:center;
  font:700 12px/1 var(--cg-font-mono)}
.pdp-card h2{margin:0;font-size:19px;line-height:1.25;font-weight:700;
  color:var(--cg-heading);letter-spacing:-.01em}
.pdp-card p{margin:0 0 11px;font-size:15px;line-height:1.62;color:var(--cg-ink)}
.pdp-card p:last-child{margin-bottom:0}

/* Who might consider — an inset panel inside the About card, as in the mock. */
.pdp-who{margin:18px 0 0;background:var(--cg-card-inset);border-radius:14px;padding:18px 20px}
.pdp-who ul{margin:0;padding-left:20px}
.pdp-who li{font-size:14.5px;line-height:1.6;color:var(--cg-ink);margin:0 0 7px}
.pdp-who li:last-child{margin-bottom:0}
.pdp-more{margin:12px 0 0}
.pdp-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;font-weight:700;font-size:14px;color:var(--cg-forest);
  text-decoration:underline;text-underline-offset:3px}
.pdp-more>summary::-webkit-details-marker{display:none}
.pdp-more>summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--cg-ease)}
.pdp-more[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.pdp-more__body{margin:12px 0 0}
.pdp-more__body li{font-size:14.5px;line-height:1.6;margin:0 0 7px}

/* ------------------------------------------------------- test details table */
.pdp-facts{width:100%;border-collapse:collapse;font-size:14px}
.pdp-facts th,.pdp-facts td{text-align:left;padding:9px 0;vertical-align:top;
  border-bottom:1px solid var(--cg-hairline);overflow-wrap:anywhere}
.pdp-facts tr:last-child th,.pdp-facts tr:last-child td{border-bottom:0}
.pdp-facts th{color:var(--cg-muted);font-weight:500;width:44%;padding-right:14px}
.pdp-facts td{color:var(--cg-ink-strong);font-weight:600;text-align:right}

/* ---------------------------------------------------------- reference range */
.pdp-range__val{font-size:27px;line-height:1.15;font-weight:800;color:var(--cg-forest);
  letter-spacing:-.02em;margin:0 0 9px;overflow-wrap:anywhere}
.pdp-range__note{font-size:13px;line-height:1.55;color:var(--cg-muted);margin:0}
.pdp-range ul{margin:0;padding-left:18px}
.pdp-range li{font-size:14px;line-height:1.6;color:var(--cg-ink);margin:0 0 6px}

/* ------------------------------------------------ related tests and panels */
.pdp-rel__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Scoped through `.cg` so this (0,2,0) outranks `.cg a{color:var(--cg-lime-deep)}`
   (0,1,1) on specificity: the bare `.pdp-rel__all{color:var(--cg-forest)}` was
   losing that tie-break and rendering lime-deep-on-white at 2.73:1. */
.cg .pdp-rel__all{font-size:14px;font-weight:700;color:var(--cg-forest);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pdp-rel__all:hover{text-decoration:underline}
.pdp-rel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0 0}
.pdp-rel__card{border:1px solid var(--cg-border);border-radius:14px;padding:16px;
  background:var(--cg-surface);display:flex;flex-direction:column;gap:9px;min-width:0}
.pdp-rel__name{font-size:15px;font-weight:700;color:var(--cg-heading);line-height:1.3;
  text-decoration:none;overflow-wrap:anywhere}
.pdp-rel__name:hover{text-decoration:underline}
.pdp-rel__desc{font-size:13px;line-height:1.5;color:var(--cg-muted);margin:0}
.pdp-rel__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:6px}
.pdp-rel__price{font-size:20px;font-weight:800;color:var(--cg-forest);letter-spacing:-.02em}
/* Deliberately a quiet icon button: a related product must never out-shout the
   primary CTA on the page it is shown on. */
.pdp-rel__add{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--cg-lime-deep);
  background:transparent;color:var(--cg-lime-deep);display:grid;place-items:center;
  cursor:pointer;flex:none;transition:background .16s var(--cg-ease),color .16s var(--cg-ease)}
.pdp-rel__add:hover{background:var(--cg-lime-deep);color:#fff}
.pdp-rel__add:focus-visible{outline:3px solid var(--cg-lime);outline-offset:2px}
.pdp-rel__add[disabled]{border-color:var(--cg-border-strong);color:var(--cg-border-strong);
  cursor:not-allowed}
.pdp-rel__req{font-size:13px;font-weight:700;color:var(--cg-lime-deep);text-decoration:none}

/* ------------------------------------------------------------- resources */
.pdp-res__list{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.pdp-res__list a{font-size:14px;color:var(--cg-forest);font-weight:600;
  display:inline-flex;align-items:center;gap:6px;overflow-wrap:anywhere}

/* --------------------------------------------------------- disclosures */
.pdp-disc{background:var(--cg-card);border:1px solid var(--cg-border);border-radius:18px;
  overflow:hidden}
.pdp-disc+.pdp-disc{margin-top:14px}
.pdp-disc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  padding:18px 22px;font-size:17px;font-weight:700;color:var(--cg-heading)}
.pdp-disc>summary::-webkit-details-marker{display:none}
.pdp-disc__chev{margin-left:auto;width:10px;height:10px;border-right:2px solid var(--cg-muted);
  border-bottom:2px solid var(--cg-muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--cg-ease);flex:none}
.pdp-disc[open] .pdp-disc__chev{transform:rotate(225deg) translate(-1px,-1px)}
.pdp-disc__body{padding:0 22px 20px}
.pdp-disc__body p,.pdp-disc__body li{font-size:14.5px;line-height:1.65;color:var(--cg-ink)}
.pdp-qa{border-top:1px solid var(--cg-hairline);padding:14px 0 0;margin:14px 0 0}
.pdp-qa:first-child{border-top:0;padding-top:0;margin-top:0}
.pdp-qa h3{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--cg-heading)}
.pdp-qa p{margin:0}

.pdp-sections{max-width:1320px;margin:0 auto;padding:0 var(--cg-pad-x) 44px;
  display:flex;flex-direction:column;gap:22px}

/* ============================ responsive ============================
   One column below 900px. The purchase card leaves the hero grid and sits
   directly under it, inset from the viewport edges and still visually joined
   to the hero by the green that runs behind its top edge. */
@media (max-width:1180px){
  .pdp-hero__wrap{grid-template-columns:minmax(0,1fr) 360px;gap:28px}
  .pdp-rel__grid{gap:13px}
}
@media (max-width:900px){
  :root{--cg-pad-x:26px}
  .pdp-hero__wrap{display:block;padding-bottom:0}
  .pdp-hero h1,.pdp-hero h1.pdp-h1--long{max-width:100%}
  .pdp-chips{margin-top:18px}
  /* The card overlaps the hero foot: it belongs to the product, not to the
     section below it. Done with flow and a negative bottom margin -- no
     transform, so the button's real box (and its focus ring) is exactly where
     layout says it is. */
  .pdp-buy{margin:22px calc(var(--cg-pad-x) * -1 + 6px) -30px}
  .pdp-hero{padding-bottom:0}
  .pdp-hero__wrap{padding-bottom:0}
  .pdp-main{padding-top:48px}
  .pdp-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .pdp-stack{gap:18px}
  .pdp-rel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp-cta{width:240px}
  .pdp-buy__act .pdp-buy__avail{width:240px}   /* keeps the sentence's left edge on the button's */
}
@media (max-width:620px){
  .pdp-hero__wrap{padding-top:26px}
  .pdp-hero h1{font-size:clamp(23px,6.2vw,30px)}
  .pdp-card{padding:18px 17px}
  .pdp-buy{padding:19px 18px 21px}
  .pdp-buy__price{font-size:34px}
  .pdp-cta{width:230px;min-height:50px}
  .pdp-buy__act .pdp-buy__avail{width:230px}   /* keeps the sentence's left edge on the button's */
  .pdp-chips{gap:8px}
  .pdp-chip{padding:9px 12px;font-size:12.5px}
  .pdp-rel__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .pdp-rel__card{padding:13px}
  .pdp-rel__price{font-size:17px}
  .pdp-rel__add{width:36px;height:36px}
  .pdp-res__list{flex-direction:column;gap:9px}
}
@media (max-width:380px){
  :root{--cg-pad-x:16px}
  .pdp-cta{width:220px}
  .pdp-buy__act .pdp-buy__avail{width:220px}   /* keeps the sentence's left edge on the button's */
  .pdp-rel__grid{grid-template-columns:minmax(0,1fr)}
}

/* what's included — panel composition, prominent (never inside a disclosure) */
.pdp-inc{margin:12px 0 0;padding-left:20px;columns:2;column-gap:26px}
.pdp-inc li{font-size:14px;line-height:1.6;color:var(--cg-ink);margin:0 0 5px;
  break-inside:avoid;overflow-wrap:anywhere}
.pdp-inc a{color:var(--cg-forest);text-decoration:none}
.pdp-inc a:hover{text-decoration:underline}
.pdp-buy__price--none{font-size:24px;line-height:1.2}
@media (max-width:620px){.pdp-inc{columns:1}}
.pdp-buy__state--off{color:var(--cg-alert-accent)}
.pdp-buy__blocked .linklike{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-weight:700;color:var(--cg-alert-head);text-decoration:underline}

/* The product page owns the full viewport width: the hero is a band, not a
   card inside the article column. Only this page shape opts out of the 1200px
   article measure; every other family is untouched. */
.cg-page--pdp{max-width:none;background:var(--cg-bg)}
.cg-page--pdp>main{max-width:none;padding:0}

/* The orb is decoration and must never compete with the sentence it sits
   behind. On a phone it moves clear of the text column entirely. */
@media (max-width:900px){
  .pdp-hero__orb{width:200px;height:200px;top:-84px;right:-70px;opacity:.38}
}
@media (max-width:620px){
  .pdp-hero__orb{width:158px;height:158px;top:-66px;right:-56px;opacity:.32}
}




/* One column, at a readable measure. Used when a product has no About to sit
   beside Test details -- a half-empty two-column grid reads as a page that
   failed to load, rather than a product we simply hold less copy for. */
/* Full page width, so this card keeps the same rhythm as Related tests and
   Quest resources below it -- a narrower card above full-width sections reads
   as a row that failed to finish. The TABLE inside is what gets the readable
   measure: a four-row key/value list stretched to 1320px puts an ocean between
   a label and its value. */
.pdp-single{display:flex;flex-direction:column;gap:22px}
.pdp-single .pdp-facts,.pdp-single .pdp-range__val,.pdp-single .pdp-range__note{max-width:720px}
@media (max-width:900px){.pdp-single{gap:18px}.pdp-single .pdp-facts{max-width:none}}

/* Purchase card: the quiet link from the prep summary to the full instruction. */
.pdp-buy__more { display:inline-block; margin-left:8px; font-size:12px; color:var(--cg-forest,#1c3a13); text-decoration:underline; white-space:nowrap; }
#prep-details { scroll-margin-top:140px; }