/* DJN product page template, round 11 (Oct 29, 2026): the gap-audit rebuild. Sits on top of the homepage site.css
   (copied unchanged): same tokens, header, stars and footer.
   System: one heading scale at weight 600 (H1 and H2 30 phone / 44 desktop, H3 19), body at two sizes (17 copy, 14 meta),
   big figures at 700. One section padding (56 phone / 112 desktop). White sections, one navy block, the navy footer.
   Rules only on accordion rows. Pill buttons, 10 px tiles and chips. Paragraphs capped at 62 characters. */

.pdp{ --sec:56px; --hgap:20px; }
@media (min-width:1024px){ .pdp{ --sec:112px; --hgap:32px; } }
.pdp main{ display:block; }
.pdp h1,.pdp h2,.pdp h3{ font-weight:600; letter-spacing:-0.02em; }
.pdp h1{ font-size:30px; line-height:1.05; text-wrap:balance; }
.pdp h2{ font-size:30px; line-height:1.08; text-wrap:balance; }
.pdp h3{ font-size:19px; line-height:1.25; letter-spacing:-0.01em; }
@media (min-width:1024px){ .pdp h1,.pdp h2{ font-size:44px; } }
.pdp main p,.pdp main dd,.pdp main li{ max-width:62ch; }

/* buttons: pill, 56 tall; one outline style */
.pdp .btn{ border-radius:999px; min-height:56px; padding:0 28px; }
.btn-o{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 28px; border:1px solid var(--ink); border-radius:999px; background:var(--ground); color:var(--ink); font:600 16px/1 var(--display); text-decoration:none; cursor:pointer; }
.btn-o:hover{ background:var(--ink); color:var(--ground); }

/* ---------- 1 main product ---------- */
.pm{ padding-bottom:var(--sec); }
.pm-media{ margin:0 calc(var(--gut) * -1); }
.gal{ position:relative; }
.g-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; background:var(--ground); outline-offset:-2px; }
.g-track::-webkit-scrollbar{ display:none; }
.g-slide{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
.g-slide img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.g-doc img{ object-fit:contain; }
/* round 15b: on phone the dots sit over the bottom of the slide; the label slide keeps its last lines above them */
@media (max-width:1023px){ .g-doc img{ padding-bottom:12%; background:var(--ground); } }
.g-zoom{ display:block; cursor:zoom-in; }
.g-bar{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; pointer-events:none; }
.g-dots{ display:flex; gap:8px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,0.85); }
.g-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); }
.g-dot.on{ background:var(--ink); }
.g-more{ display:none; }
.g-thumbs{ display:none; }
.g-lb{ width:min(88vh, 92vw); max-width:none; padding:0; border:0; border-radius:16px; background:var(--ground); overflow:visible; }
.g-lb::backdrop{ background:rgba(20,23,28,0.7); }
.g-lb img{ display:block; width:100%; height:auto; border-radius:16px; }
.g-lb button{ position:absolute; width:48px; height:48px; border-radius:50%; background:var(--ground); display:flex; align-items:center; justify-content:center; }
.g-lb svg{ width:22px; height:22px; fill:none; stroke:var(--ink); stroke-width:1.8; }
.g-lb-x{ top:12px; right:12px; }
.g-lb-p{ left:-64px; top:50%; margin-top:-24px; }
.g-lb-n{ right:-64px; top:50%; margin-top:-24px; }

.pm-info{ padding-top:12px; }
.pm-shelf{ display:none; font-size:14px; line-height:20px; color:var(--muted); }
.pm-shelf a{ display:inline-block; padding:12px 0; margin:-12px 0; text-decoration:none; }
.pm-shelf a:hover{ color:var(--accent); text-decoration:underline; }
.pm-row{ margin-top:6px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pm-rating{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:-8px 0; font-size:14px; text-decoration:none; }
.pm-rating .count{ text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:4px; }
.pdp .pm-info h1{ margin-top:0; }
.pm-price{ font:700 24px/1.2 var(--body); }
.pm-price s{ font-size:16px; font-weight:400; color:var(--muted); }   /* round 19: subscribe is the default, the one-time price struck beside it */
.pm-value{ margin-top:4px; font-size:14px; line-height:1.4; font-weight:600; color:var(--deep); }
@media (min-width:1024px){ .pm-value{ font-size:17px; } }
.pm-head{ margin-top:4px; font-size:17px; line-height:1.45; color:var(--muted); }

.buy{ margin-top:18px; }
.opt{ border:0; margin:0 0 16px; padding:0; min-width:0; }
.opt legend{ padding:0; margin-bottom:8px; font-size:14px; color:var(--muted); }
.opt legend b{ color:var(--ink); font-weight:600; }
.fl-note::before{ content:"\00b7\00a0"; }
.chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.chip{ position:relative; display:block; cursor:pointer; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip > span{ display:flex; align-items:center; justify-content:center; gap:6px; height:100%; min-height:48px; padding:6px; border:1px solid var(--line); border-radius:10px; font-size:14px; line-height:1.2; text-align:center; background:var(--ground); }
.chip .sw{ width:12px; height:12px; border-radius:50%; flex:none; }
.chip:hover > span{ border-color:var(--muted); }
.chip input:checked + span{ border:2px solid var(--ink); padding:5px; font-weight:600; }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

.plans{ border:0; margin:0; padding:0; min-width:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; column-gap:10px; }
/* subgrid: both tiles share one name row and one price row, so the one-time tile has no empty block */
.plan{ display:grid; grid-row:span 3; grid-template-rows:subgrid; }
.plan > label{ position:relative; display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start; row-gap:0; min-height:96px; padding:30px 14px 12px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:var(--ground); }
.plan input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.plan:hover > label{ border-color:var(--muted); }
.plan.on .p-tag{ top:-1px; right:11px; }
.plan.on > label{ border:2px solid var(--ink); padding:29px 13px 11px; background:var(--tile); }
.plan > label:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.p-name{ font:600 14px/1.3 var(--display); align-self:start; }
.p-tag{ position:absolute; top:0; right:12px; padding:5px 10px 6px; border-radius:0 0 8px 8px; background:var(--deep); color:var(--ground); font:600 14px/1 var(--display); font-style:normal; }
.p-price{ align-self:end; padding-top:8px; font:700 24px/1.1 var(--body); white-space:nowrap; }
.p-price s{ font-size:14px; font-weight:400; color:var(--muted); }
.plan[data-plan="sub"] [data-role="sub"]{ color:var(--accent); }
.p-sub{ color:var(--accent); }
.p-price small{ font:400 14px/1 var(--body); color:var(--muted); }
.p-per s{ color:var(--muted); }
.p-per{ margin-top:2px; font-size:14px; line-height:1.3; color:var(--muted); }
.plan.off{ opacity:0.55; }
.plan.off .p-price{ visibility:hidden; }
.p-more{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; font-size:14px; line-height:1.4; }
.p-more[hidden]{ display:none; }
.p-more p{ flex:1 1 220px; }
.p-cad{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); }
.p-cad select{ -webkit-appearance:none; appearance:none; min-height:44px; padding:0 36px 0 16px; border:1px solid var(--line); border-radius:999px; font:500 14px/1 var(--body); color:var(--ink); background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2314171C' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; cursor:pointer; }
/* round 19: wave-1 buy box. The promise leads (large, Work Navy), the support line is the grey line under it. */
.pm-lead{ margin-top:10px; font:700 20px/1.25 var(--display); letter-spacing:-.01em; color:var(--deep); text-wrap:balance; }
.pm-lead + .pm-head{ margin-top:6px; font-size:16px; }
@media (min-width:1024px){ .pm-lead{ margin-top:12px; font-size:24px; } .pm-lead + .pm-head{ font-size:17px; } }
/* quantity chip: a pack that beats the subscribe price per unit carries the tag; every pack shows its per-unit price */
/* free-shipping row: subscribe only; one tap adds the pair at the subscribe price */
.ship-add{ margin-top:14px; }
.ship-add[hidden]{ display:none; }
.ship-add label{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; min-height:64px; padding:8px 12px 8px 8px; border:1px dashed var(--muted); border-radius:10px; cursor:pointer; background:var(--ground); }
.ship-add input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.ship-add label:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }
.ship-add.on label{ border:2px solid var(--ink); border-style:solid; padding:7px 11px 7px 7px; background:var(--tile); }
.sa-img{ display:flex; }
.sa-img img{ width:48px; height:48px; border-radius:6px; object-fit:contain; background:#fff; border:1px solid var(--line); }
.sa-img img + img{ margin-left:-14px; }
.sa-pack .sa-img img + img{ margin-left:-30px; }   /* round 22: the pack thumbnails stack tight so the card keeps one width on every page */
.sa-txt{ min-width:0; font-size:14px; line-height:1.3; }
.sa-txt b{ display:block; font:600 14px/1.3 var(--display); }
.sa-sub{ display:block; margin-top:2px; color:var(--muted); }
.ship-add.on .sa-sub{ color:var(--ink); }
.sa-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:72px; min-height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--ink); font:600 14px/1 var(--display); }
.ship-add.on .sa-btn{ background:var(--ink); color:var(--ground); }
/* proof line at the button */
.bq{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:14px; line-height:1.4; }
.bq .stars{ flex:none; }
.bq-n{ color:var(--muted); white-space:nowrap; }
.bq + .trust{ margin-top:6px; color:var(--muted); }
.atc{ width:100%; margin-top:10px; justify-content:space-between; }
.atc.added{ background:var(--ink); }
.trust{ margin-top:12px; font-size:14px; line-height:1.45; }

@media (min-width:768px){
  .pm{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:40px; align-items:start; padding-top:24px; }
  .pm-media{ margin:0; }
  .pm-info{ padding-top:0; position:sticky; top:96px; }
  .pm-shelf{ display:block; margin-bottom:4px; }
}
@media (min-width:1024px){
  .pm{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:64px; padding-top:32px; }
  /* desktop gallery: slides 1-4 as a 2 x 2 grid; the label stays one click away */
  .g-track{ display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:visible; }
  .g-slide:nth-child(n+5){ display:none; }
  .g-slide img{ border-radius:10px; }
  .g-bar{ display:none; }
  .g-slide{ cursor:zoom-in; }
  .g-thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .g-thumb{ display:block; width:56px; height:56px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
  .g-thumb:hover{ border-color:var(--ink); }
  .g-thumb img{ width:100%; height:100%; object-fit:cover; }
  .g-more{ display:block; margin-top:12px; font-size:14px; }
  .pm-info{ top:112px; }
  .pm-head{ margin-top:8px; }
  .buy{ margin-top:24px; }
}

/* ---------- 2 the navy proof block ---------- */
/* texture system (round 15, Blake's Cyber Monday ad as reference): Work Navy into Deep Teal with fine film grain.
   Only here and on the navy gallery slides; light sections stay flat white. The grain tile (_scripts/build_texture.py) is
   white and black at about 5% opacity, 1 css px, seamless; it also dithers the gradient so it never bands.
   White on Deep Teal 11.2:1, Line on Deep Teal 8.5:1. */
.pdp-proof{ color:var(--ground); padding:var(--sec) 0;
  background-color:var(--deep);
  background-image:url(img/tex-grain.webp), linear-gradient(160deg, var(--deep) 0%, var(--deep) 28%, #17404B 100%);
  background-size:256px 256px, 100% 100%; }
/* on 2x and 3x screens the tile is drawn at half size, so a grain is 1 to 1.5 device px, never a 3 px blob */
@media (min-resolution:2dppx){ .pdp-proof{ background-size:128px 128px, 100% 100%; } }
/* end texture system */
.pdp-proof h2,.pdp-proof h3{ color:var(--ground); }
/* split: the photo belongs to the story. Phone: photo first at 4:3, inside the gutters. Desktop: square photo beside the copy,
   about 520 px, never taller than 560. */
.pf-media{ margin:0 0 32px; }
.pf-media img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:10px; }
.pf-lead{ margin-top:var(--hgap); font-size:17px; line-height:1.55; }
.bn-grid{ margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:40px 20px; }
.bn-f{ font:700 40px/1 var(--display); letter-spacing:-0.035em; white-space:nowrap; }
.bn-f span{ margin-left:4px; font-size:17px; letter-spacing:0; }
.bn-grid li:first-child .bn-f{ color:var(--pa, var(--ground)); }
.bn-grid h3{ margin-top:14px; }
.bn-p{ margin-top:6px; font-size:17px; line-height:1.45; }
.bn-s{ margin-top:8px; font-size:14px; line-height:1.45; color:var(--line); }
.bn-p,.bn-s{ text-wrap:pretty; }   /* round 18: no one-word last lines ("made of.") */
.pf-note{ margin-top:40px; font-size:14px; color:var(--line); }
@media (min-width:768px){
  .pf-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:48px; align-items:center; }
  .pf-media{ margin:0; }
  .pf-media img{ aspect-ratio:1 / 1; max-height:560px; }
}
@media (min-width:1024px){
  .pf-grid{ column-gap:80px; }
  .pf-copy{ padding-top:8px; }
  .bn-grid{ margin-top:48px; gap:48px 40px; }
  .bn-f{ font-size:56px; }
  .bn-f span{ font-size:19px; }
  .pf-note{ margin-top:48px; }
}
/* round 18: the toothpaste "Never in the tube" line closes the navy block (the in/never section is merged in and gone).
   One hairline, a small caps label, one large line: no grid, so no empty slot whether a paste has four items or five. */
.pf-never{ margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.22); }
.pf-nk{ font:700 14px/1.2 var(--display); letter-spacing:0.12em; text-transform:uppercase; color:var(--pa, var(--line)); }
.pf-nl{ margin-top:12px; font:700 24px/1.25 var(--display); letter-spacing:-0.02em; color:var(--ground); text-wrap:balance; }
/* round 20: the SuperSilver pages open the block with "In every tube" (the silver), then "Never in the tube" under it */
.pf-nk2{ margin-top:24px; }
@media (min-width:1024px){
  .pf-never{ margin-top:56px; padding-top:36px; }
  .pf-nl{ margin-top:14px; font-size:30px; }
  .pf-nk2{ margin-top:32px; }
}
/* navy straight into the white reviews (toothpastes, and the capsule pages whose dose list merged into the block) */
.pdp .pdp-proof + .reviews{ padding-top:var(--sec); }

/* ---------- 3 comparison (Turbo), price check (VMF), in / never (toothpaste) ---------- */
.pdp-compare,.pdp-price{ padding:var(--sec) 0; }
.pdp-reviews{ border-top:0; }
.cp-wrap{ margin-top:var(--hgap); }
.cp{ width:100%; border-collapse:collapse; border:0; }
.cp th,.cp td{ border:0; }
.cp thead{ display:none; }
.cp tbody{ display:grid; gap:24px; }
.cp tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); row-gap:6px; }
.cp tbody th{ display:flex; align-items:center; padding:10px 12px; border-radius:10px 0 0 10px; background:var(--tile); text-align:left; font:600 14px/1.3 var(--display); color:var(--ink); }
.cp td{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:0 12px; font-size:14px; line-height:1.4; color:var(--muted); }
.cp td::before{ content:attr(data-col); flex:none; }
.cp td .cp-v{ text-align:right; }
.cp td.cp-us{ grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:flex-end; padding:10px 12px; border-radius:0 10px 10px 0; background:var(--tile); color:var(--ink); font-weight:700; }
.cp td.cp-us::before{ content:none; }
.cp tr.cp-more{ display:none; }
.cp-open .cp tr.cp-more{ display:grid; }
.cp-all{ margin-top:24px; width:100%; }
.cp-note{ margin-top:20px; font-size:14px; line-height:1.45; color:var(--muted); }
@media (min-width:768px){
  .cp-all{ display:none; }
  .cp,.cp-open .cp{ display:table; table-layout:fixed; }
  .cp thead{ display:table-header-group; }
  .cp tbody,.cp-open .cp tbody{ display:table-row-group; }
  .cp tr,.cp tbody tr,.cp tr.cp-more,.cp-open .cp tr.cp-more{ display:table-row; }
  .cp th,.cp td,.cp tbody th,.cp td.cp-us{ display:table-cell; vertical-align:middle; text-align:center; padding:18px 16px; border-radius:0; background:none; font-size:14px; }
  .cp td::before{ content:none; }
  .cp td .cp-v{ text-align:center; }
  .cp thead th,.cp thead td{ padding:20px 16px; vertical-align:bottom; border-bottom:1px solid var(--ink); font-weight:400; }
  .cp-corner{ width:24%; }
  .cp thead th.cp-us,.cp td.cp-us{ background:var(--tile); }
  .cp tbody tr:last-child td.cp-us{ border-radius:0 0 10px 10px; }
  .cp thead th.cp-us{ border-radius:10px 10px 0 0; }
  .cp-mark{ display:block; width:44px; height:auto; margin:0 auto 10px; }
  .cp-n{ display:block; font:600 17px/1.25 var(--display); color:var(--ink); }
  .cp-s{ display:block; margin-top:4px; font-size:14px; color:var(--muted); }
  .cp tbody th{ text-align:left; padding-left:0; font:600 17px/1.3 var(--display); }
  .cp td{ font-size:17px; line-height:1.4; }
  .cp td.cp-us{ font-size:17px; font-weight:700; }
}
@media (min-width:1024px){
  .cp-wrap{ margin-top:48px; }
  .cp th,.cp td,.cp tbody th,.cp td.cp-us{ padding:22px 24px; }
  .cp tbody th{ padding-left:0; }
  .cp-mark{ width:52px; }
  .cp-note{ margin-top:24px; }
}

.pc-lead{ margin-top:var(--hgap); display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:600px){ .pc-lead{ grid-template-columns:1fr 1fr; } }
.pc-lead > div{ padding:16px; border-radius:10px; }
.pc-lead .pc-us{ background:var(--tile); }
.pc-k{ font:600 14px/1.3 var(--display); }
.pc-v{ margin-top:10px; font:700 40px/1 var(--display); letter-spacing:-0.035em; }
.pc-v span{ font-size:14px; letter-spacing:0; font-weight:600; }
.pc-us .pc-v{ color:var(--deep); }
.pc-them .pc-v{ color:var(--muted); }
.pc-s{ margin-top:6px; font-size:14px; line-height:1.35; color:var(--muted); }
.pc-rows{ margin:24px 0 0; display:grid; gap:20px; }
.pc-row{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; padding:0 16px; }
.pc-row dt{ grid-column:1 / -1; font:600 14px/1.3 var(--display); }
.pc-row dd{ margin:0; font-size:14px; line-height:1.4; color:var(--muted); }
.pc-row dd.pc-us{ color:var(--ink); }
@media (min-width:1024px){
  .pc-lead{ margin-top:48px; gap:24px; max-width:1040px; }
  .pc-lead > div{ padding:32px; }
  .pc-v{ font-size:64px; } .pc-v span{ font-size:17px; }
  .pc-rows{ max-width:1040px; gap:24px; margin-top:32px; }
  .pc-row{ grid-template-columns:repeat(2,1fr); padding:0 32px; column-gap:56px; }
  .pc-row dt{ font-size:17px; }
  .pc-row dd{ font-size:17px; }
}

.pdp-formula{ padding:var(--sec) 0; }
.fo-lead{ margin-top:12px; font-size:17px; line-height:1.5; }
.fo-grid{ margin-top:var(--hgap); display:grid; gap:28px; }
.fo-col h3{ color:var(--deep); }
.fo-col ul{ margin-top:8px; font-size:17px; line-height:1.55; }
.fo-col li{ display:inline; }
.fo-col li:not(:last-child)::after{ content:", "; }
@media (min-width:1024px){ .fo-grid{ margin-top:48px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px; } .fo-lead{ margin-top:20px; } }
/* ---------- 4 image moment + reviews ---------- */
.pdp .reviews{ background:var(--ground); padding:0 0 var(--sec); }   /* follows the white comparison block: one gap */
.rv-score{ font:700 56px/1 var(--display); letter-spacing:-0.04em; }
.rv-score span{ margin-left:6px; font:400 17px/1 var(--body); letter-spacing:0; color:var(--muted); }
.rv-sum .stars{ margin-top:12px; }
.rv-count{ margin-top:4px; font-size:14px; }
.rv-hist{ margin-top:16px; display:grid; gap:6px; max-width:320px; }
.rv-hist li{ display:grid; grid-template-columns:16px 1fr 40px; align-items:center; gap:10px; font-size:14px; line-height:20px; }
.hb-b{ height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.hb-b i{ display:block; height:100%; background:var(--ink); }
.hb-v{ text-align:right; color:var(--muted); }
.pdp .rv-row{ margin:40px calc(var(--gut) * -1) 0; padding:0 var(--gut); display:grid; grid-auto-flow:column; grid-auto-columns:84%; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut); scrollbar-width:none; }
.pdp .rv-row::-webkit-scrollbar{ display:none; }
.pdp .rv-row li{ scroll-snap-align:start; }
@media (min-width:768px){ .pdp .rv-row{ grid-auto-columns:44%; } }
.pdp .rv-row li{ border:0; padding:0; }
.rq-t{ font:600 19px/1.25 var(--display); letter-spacing:-0.01em; }
.rv-row .stars{ margin-top:8px; }
.pdp .rq{ margin:8px 0 0; }
.pdp .rq blockquote p{ font-size:17px; line-height:1.5; }
.pdp .rq figcaption{ margin-top:8px; font-size:14px; }
.pdp .q-name{ font-weight:400; color:var(--muted); }
.okendo-ph{ margin-top:40px; }
@media (min-width:1024px){
  .rv-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:96px; align-items:start; }
  .rv-score{ font-size:72px; }
  .pdp .rv-row{ margin:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; overflow:visible; }
  .okendo-ph{ grid-column:2; margin-top:48px; }
}

/* ---------- 5 questions: one accordion list (FAQ + label + shipping), the guarantee beside it ---------- */
.pdp-faq{ padding:0 0 var(--sec); }   /* follows the white reviews block: one gap, not two */
.fq-grid{ display:grid; }
.pdp .faq-list{ margin-top:var(--hgap); display:block; border-top:1px solid var(--line); }
/* the guarantee card: the photo belongs to "Try it on us" and its buy button, never to the questions */
.fq-guar{ margin-top:40px; }
.fq-img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:10px; margin-bottom:20px; }
.pdp .faq details{ border-bottom:1px solid var(--line); border-top:0; }
.pdp .faq summary{ min-height:56px; padding:12px 0; font:500 17px/1.35 var(--body); }
.ac-b{ padding:0 0 24px; }
.ac-b > p,.pdp .faq details .ac-b p{ padding:0; font-size:17px; line-height:1.55; }
.ac-b p + p{ margin-top:12px; }
.fq-guar p{ margin-top:8px; font-size:17px; line-height:1.5; }
.fq-guar .btn{ margin-top:20px; width:100%; justify-content:space-between; }
@media (min-width:1024px){
  .fq-grid{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:96px; align-items:start; }
  .fq-main{ grid-column:2; grid-row:1; }
  .fq-guar{ grid-column:1; grid-row:1; margin-top:0; position:sticky; top:112px; }
  .fq-guar .btn{ width:auto; min-width:280px; gap:24px; }
}
.fx-wrap{ display:grid; gap:20px; }
.fx{ border:1px solid var(--ink); padding:12px 14px; max-width:640px; }
.fx-serv{ font-size:14px; line-height:1.4; padding-bottom:8px; border-bottom:6px solid var(--ink); }
.fx table{ width:100%; border-collapse:collapse; font-size:14px; line-height:1.35; }
.fx thead th,.fx thead td{ padding:6px 0; font-weight:700; text-align:left; border-bottom:3px solid var(--ink); }
.fx thead td{ text-align:right; }
.fx tbody th{ text-align:left; font-weight:400; padding:6px 8px 6px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.fx tbody td{ text-align:right; padding:6px 0 6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:top; }
.fx-blend th{ font-weight:700!important; }
.fx-sub{ display:block; font-weight:400; color:var(--muted); }
.fx-foot,.fx-note{ margin-top:8px; font-size:14px; color:var(--muted); }
.ac-b .fx-foot,.ac-b .fx-note,.ac-b .fx-serv{ font-size:14px; }


/* ---------- 6 related ---------- */
.pdp-rel{ padding:0 0 var(--sec); }
.pdp-rel .sec-head{ margin-bottom:var(--hgap); }
.rel-row{ margin:0 calc(var(--gut) * -1); padding:0 var(--gut); display:grid; grid-auto-flow:column; grid-auto-columns:44%; column-gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--gut); scrollbar-width:none; }
.rel-row::-webkit-scrollbar{ display:none; }
.rel-card{ scroll-snap-align:start; }
.rel-card a{ display:flex; flex-direction:column; text-decoration:none; }
.rel-card img{ width:100%; aspect-ratio:5/4; background:var(--tile); border-radius:10px; }
.rel-name{ margin-top:12px; font:600 17px/1.3 var(--display); }
.rel-line{ margin-top:4px; font-size:14px; line-height:20px; }
.rel-price{ margin-top:6px; display:flex; flex-direction:column; font-size:14px; line-height:20px; color:var(--muted); }
.rel-price b{ color:var(--ink); font-size:17px; }
.rel-card a:hover .rel-name{ color:var(--accent); }
@media (min-width:768px){ .rel-row{ grid-auto-columns:30%; } }
@media (min-width:1024px){
  .rel-row{ margin:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(4,1fr); gap:24px; overflow:visible; }
  .rel-price{ flex-direction:row; gap:12px; align-items:baseline; }
}

/* ---------- sticky add to cart (phone and tablet) ---------- */
.sticky-atc{ position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; align-items:center; gap:10px; padding:10px var(--gut); padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:var(--ground); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .2s; }
.sticky-atc[hidden]{ display:none; }
.sticky-atc.show{ transform:none; }
.sticky-atc img{ width:44px; height:44px; flex:none; border-radius:8px; }
.sa-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sa-n{ font:600 14px/1.25 var(--display); }
.sa-o{ font-size:14px; line-height:1.3; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdp .sa-b{ flex:none; min-height:48px; padding:0 20px; font-size:15px; }
@media (min-width:1024px){ .sticky-atc{ display:none!important; } }

/* ---------- footer: a little more air on product pages; the sticky bar must not cover the last line on phone ---------- */
.pdp .ftr{ padding-top:64px; padding-bottom:96px; }
.pdp .f-legal{ line-height:1.5; }
@media (min-width:1024px){ .pdp .ftr{ padding-top:96px; padding-bottom:32px; } }
/* round 17: capsule and liquid pages, "every amount on the label" section (djn-compare, dose mode). White ground, type only. */
.pdp-doses{ padding:var(--sec) 0; }
.ds-lead{ margin-top:12px; font-size:17px; line-height:1.5; }
.ds-grid{ margin-top:var(--hgap); display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; }
.ds-f{ font:700 32px/1 var(--display); letter-spacing:-0.03em; color:var(--deep); white-space:nowrap; }
.ds-f span{ margin-left:3px; font-size:16px; letter-spacing:0; }
.ds-grid h3{ margin-top:10px; font-size:17px; line-height:1.3; }
.ds-s{ margin-top:4px; font-size:15px; line-height:1.45; color:var(--muted); }
.ds-foot{ margin-top:32px; font-size:15px; line-height:1.5; color:var(--muted); }
@media (min-width:1024px){ .ds-grid{ margin-top:48px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px 40px; } .ds-f{ font-size:48px; } .ds-f span{ font-size:19px; } .ds-grid h3{ font-size:19px; } .ds-lead{ margin-top:20px; } }
/* round 18: the one remaining dose list (Next Level) sits on Tile, so it never runs into the white reviews below */
.pdp-doses{ background:var(--tile); }
.pdp .pdp-doses + .reviews{ padding-top:var(--sec); }
/* round 19: quotes from customers who received loyalty points carry one quiet line under the name.
   To hide every one of them, add .rv-pts{display:none} (no other rule here sets its display). */
.rv-pts{ display:block; margin-top:2px; font-size:13px; line-height:1.3; font-weight:400; color:var(--muted); }
.bq-q{ flex:1 1 100%; min-width:0; }   /* the stars sit on their own line above the quote */