/* Engine · product detail page styles.
   Buy hero, gallery carousel + thumb rail, sticky bar, trust row,
   compare table, related, FAQ, guarantee, narrow-viewport hardening.
 */

/* ===========================================================================
   PDP — ported from app/product/[slug]/product-view.tsx + sections/buy-hero.tsx
   Reference metrics (measured on cofactorsupply.com):
     crumb bar   padding 12px 24px 0
     buy hero    grid, gap 40px → lg:56px, padding 16px 24px 32px, lg 2 cols
     chapters    py-20 → lg:py-24 (80/96px), dark bands on --ink-band
   =========================================================================== */

/* ---- crumbs --------------------------------------------------------------- */
.pdp-crumbs { padding-top: 0.75rem; }
.pdp-back {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding-block: 0.375rem; margin-left: -0.125rem;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  transition: color 150ms var(--ease-out-quart);
}
.pdp-back:hover { color: var(--foreground); }
.pdp-back__chev { transform: rotate(90deg); }
.pdp-crumbs__trail { display: none; }
@media (min-width: 640px) {
  .pdp-back { display: none; }
  .pdp-crumbs__trail { display: flex; flex-wrap: wrap; }}


/* ---- buy hero ------------------------------------------------------------- */
.pdp-hero {
  display: grid; gap: 2.5rem;
  padding-top: 1rem; padding-bottom: 2rem;
}
@media (min-width: 1024px) {
  .pdp-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; padding-top: 1rem; }}


/* gallery */
.pdp-gallery { display: flex; min-width: 0; flex-direction: column; gap: 1.25rem; }
.pdp-gallery__code {
  position: absolute; top: 0.875rem; left: 0.875rem;
  display: inline-flex; align-items: center;
  border-radius: 999px; border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(6px); box-shadow: var(--elevation-whisper);
  padding: 0.25rem 0.625rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; color: var(--foreground);
}
.pdp-gallery__thumbs { display: flex; gap: 0.5rem; }
.pdp-thumb {
  width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: border-color 150ms var(--ease-out-quart), box-shadow 150ms var(--ease-out-quart);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { border-color: color-mix(in oklab, var(--foreground) 25%, transparent); }
.pdp-thumb.is-active { border-color: var(--brand); box-shadow: var(--shadow-ring-brand); }

/* buy box */
.pdp-buybox { display: flex; min-width: 0; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .pdp-buybox { gap: 1.25rem; }}

.pdp-buybox__head { display: flex; flex-direction: column; gap: 1rem; }
.pdp-statusrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.statuspill {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  border-radius: 999px; padding: 0.3125rem 0.6875rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2);
}
.statuspill__dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; }
.statuspill--positive { color: var(--stock-in); border-color: color-mix(in oklab, var(--stock-in) 30%, transparent); background: color-mix(in oklab, var(--stock-in) 8%, transparent); }
.statuspill--neutral  { color: var(--ink-3); }

.pdp-title {
  margin: 0; font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.1;
  letter-spacing: -0.025em; font-weight: 700; color: var(--foreground); text-wrap: balance;
}
.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0; }
.pdp-price__amount {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.875rem; line-height: 2.25rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--foreground);
}
@media (min-width: 1024px) { .pdp-price__amount { font-size: 2.25rem; line-height: 2.5rem; }}

.pdp-price__amount .woocommerce-Price-amount { color: inherit; font: inherit; }
.pdp-price__unit {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
@media (min-width: 1024px) { .pdp-price__unit { font-size: 1rem; }}

.pdp-tagline { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }

.pdp-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.pdp-bullets li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.45; color: var(--foreground); }
.pdp-bullets__tick {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1.125rem; height: 1.125rem; margin-top: 0.125rem;
  border-radius: 999px; background: var(--brand); color: var(--brand-foreground);
}

/* add to cart */
.pdp-atc { display: flex; flex-direction: column; gap: 0.875rem; }
@media (min-width: 480px) { .pdp-atc { flex-direction: row; align-items: stretch; }}

.pdp-qty {
  display: inline-flex; align-items: center; flex-shrink: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--background); height: 3rem;
}
.pdp-qty button {
  display: grid; place-items: center; width: 2.75rem; height: 100%;
  border: none; background: transparent; color: var(--foreground); cursor: pointer;
  transition: background-color 150ms var(--ease-out-quart);
}
.pdp-qty button:hover { background: var(--control); }
.pdp-qty button:active { transform: scale(0.94); }
.pdp-qty__input {
  width: 2.5rem; height: 100%; border: none; background: transparent; text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums; color: var(--foreground); outline: none;
  -moz-appearance: textfield;
}
.pdp-qty__input::-webkit-outer-spin-button,
.pdp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-add { flex: 1; }
.pdp-add[data-loading] { opacity: 0.6; pointer-events: none; }

.pdp-trust { display: flex; flex-direction: column; gap: 0.5rem; }
.pdp-trust__line {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-size: 0.8125rem; color: var(--muted-foreground);
}
.pdp-trust__line svg { color: var(--ink-3); flex-shrink: 0; }

/* ---- chapters ------------------------------------------------------------- */
.pdp-chapter { padding-block: 5rem; }
@media (min-width: 1024px) { .pdp-chapter { padding-block: 6rem; }}

.pdp-chapter--related, .pdp-chapter--faq { border-top: 1px solid var(--border); }
.pdp-chapter--tint { border-block: 1px solid var(--border); background: color-mix(in oklab, var(--surface-2) 42%, var(--background)); }

/* the dark data chapter — dark is only ever used where it carries data */
.pdp-chapter--ink { background: var(--ink-band); color: color-mix(in oklab, var(--p-neutral-0) 82%, transparent); }
.pdp-chapter__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .pdp-chapter__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }}

.pdp-chapter__title {
  margin: 0.625rem 0 0; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.1;
  letter-spacing: -0.025em; font-weight: 600; color: var(--p-neutral-0); text-wrap: balance;
}
.pdp-chapter__body {
  margin: 1rem 0 0; max-width: 52ch; line-height: 1.65;
  color: color-mix(in oklab, var(--p-neutral-0) 72%, transparent);
}

.pdp-chapter__note {
  margin: 1.75rem 0 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in oklab, var(--p-neutral-0) 45%, transparent);
}
.pdp-faq__sub { margin: 0.5rem 0 0; color: var(--muted-foreground); }

/* ---- sticky buy bar ------------------------------------------------------- */
.pdp-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-glassbar);
  transform: translateY(100%);
  transition: transform 260ms var(--ease-drawer);
}
.pdp-stickybar[hidden] { display: none; }
.pdp-stickybar.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .pdp-stickybar { transition: none; }}

.pdp-stickybar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 0.625rem;
}
.pdp-stickybar__id { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.pdp-stickybar__img { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: var(--radius-md); background: var(--p-stage-light-2); }
.pdp-stickybar__name {
  margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdp-stickybar__price {
  margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.pdp-stickybar__price .woocommerce-Price-amount { color: inherit; font: inherit; }
.pdp-stickybar__cta { flex-shrink: 0; }
@media (max-width: 479px) { .pdp-stickybar__id { display: none; } .pdp-stickybar__cta { width: 100%; }}


/* ===========================================================================
   ENRICHED CONVERSION SECTIONS
   Beat structure modelled on Fempia / AG1 / Grüns / Eight Sleep: each scroll
   answers the next objection in a DIFFERENT visual format.
   =========================================================================== */

/* ---- annotated gallery callouts (Fempia / Grüns device) -------------------- */
.pdp-callout {
  position: absolute; right: 0.875rem; z-index: 10;
  display: flex; flex-direction: column; gap: 0.0625rem;
  padding: 0.4375rem 0.6875rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px); box-shadow: var(--elevation-card);
  animation: pdp-callout-in 600ms var(--ease-out-quart) backwards;
}
.pdp-callout--0 { top: 28%; animation-delay: 220ms; }
.pdp-callout--1 { top: 46%; animation-delay: 340ms; }
@keyframes pdp-callout-in { from { opacity: 0; transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .pdp-callout { animation: none; }}

.pdp-callout__k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pdp-callout__v {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground);
}
@media (max-width: 639px) { .pdp-callout { display: none; }}


/* ---- benefit chips in the buy box (2-up icon grid) ------------------------- */
.pdp-benefits {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0.5rem;
}
@media (min-width: 480px) { .pdp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

.pdp-benefit {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 0.8125rem; line-height: 1.4; color: var(--foreground);
}
.pdp-benefit__tick {
  display: grid; place-items: center; flex-shrink: 0;
  width: 1rem; height: 1rem; margin-top: 0.0625rem;
  border-radius: 999px; background: var(--brand); color: var(--brand-foreground);
}

/* ---- trust strip under the CTA -------------------------------------------- */
.pdp-trustrow {
  list-style: none; margin: 0; padding: 0.875rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
}
.pdp-trustrow li { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.8125rem; color: var(--ink-2); }
.pdp-trustrow svg { color: var(--brand); flex-shrink: 0; }

/* ---- marquee band ---------------------------------------------------------- */
.pdp-marquee {
  overflow: hidden; border-block: 1px solid var(--border);
  background: var(--ink-band); padding-block: 0.875rem;
}
.pdp-marquee__track {
  display: flex; align-items: center; gap: 1.5rem; width: max-content;
  animation: pdp-marquee 38s linear infinite;
}
@keyframes pdp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pdp-marquee__track { animation: none; }}

.pdp-marquee__item {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in oklab, var(--p-neutral-0) 78%, transparent);
}
.pdp-marquee__dot { width: 3px; height: 3px; border-radius: 999px; background: var(--brand); flex-shrink: 0; }

/* ---- what's inside: the anatomy diagram ------------------------------------ */
.pdp-chapter--inside { border-top: 1px solid var(--border); }
.pdp-node { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 13.5rem; }
.pdp-node__disc {
  display: block; width: 7rem; aspect-ratio: 1 / 1; overflow: hidden; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--border);
  box-shadow: var(--elevation-whisper);
  transition: transform 300ms var(--ease-out-quart), box-shadow 300ms var(--ease-out-quart);
}
.pdp-node__disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .pdp-node:hover .pdp-node__disc { transform: scale(1.05); box-shadow: var(--elevation-card); }}

.pdp-node__k {
  margin-top: 1rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand);
}
.pdp-node__v { margin-top: 0.3125rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--foreground); text-wrap: balance; }
.pdp-node__b { margin-top: 0.3125rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
@media (min-width: 900px) {
  .pdp-node { position: absolute; width: 13.5rem; }
  /* disc center = top offset + half of 8.5rem disc; tuned to the spoke ends */
  .pdp-node__disc { width: 8.5rem; }
  .pdp-node--lt { left: 2%;  top: 0.75rem; }
  .pdp-node--lb { left: 2%;  top: 18.25rem; }
  .pdp-node--rt { right: 2%; top: 0.75rem; }
  .pdp-node--rb { right: 2%; top: 18.25rem; }}


/* ---- the comparison ---------------------------------------------------------
   Not a boxed table: open hairline rows, with OUR column rendered as a single
   raised brand band running through them — mini packshot in its header. */
.pdp-chapter--compare { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--surface-2) 42%, var(--background)); }
.pdp-compare__head { margin-bottom: 2.5rem; text-align: center; }
.pdp-compare { max-width: 56rem; margin-inline: auto; }
.pdp-compare__row {
  display: grid; grid-template-columns: 1fr 6.5rem 6rem; align-items: stretch;
  gap: 0 0.75rem;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .pdp-compare__row { grid-template-columns: 1fr 11rem 11rem; gap: 0 1rem; }}

.pdp-compare__row--head {
  border-bottom-color: var(--border-strong);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.pdp-compare__label {
  display: flex; align-items: center; padding-block: 1rem;
  font-size: 0.9375rem; color: var(--foreground);
}
.pdp-compare__cell { display: grid; place-items: center; padding-block: 1rem; }
.pdp-compare__cell svg { color: var(--ink-3); }
/* the brand band: every "us" cell shares one tinted, side-ruled column */
.pdp-compare__cell--us {
  background: color-mix(in oklab, var(--brand) 5%, var(--card));
  border-inline: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
}
.pdp-compare__cell--us svg { color: var(--brand); }
.pdp-compare__row--head .pdp-compare__cell--us {
  border-top: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pdp-compare__row:last-child { border-bottom: none; }
.pdp-compare__row:last-child .pdp-compare__cell--us {
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 22%, transparent);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.pdp-compare__row:last-child .pdp-compare__label { border-bottom: 1px solid transparent; }
.pdp-compare__usname {
  display: flex; flex-direction: column; align-items: center; gap: 0.4375rem;
  padding-block: 1rem 0.875rem;
  color: var(--brand); font-weight: 600; text-align: center;
}
.pdp-compare__jar {
  width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: 999px;
  border: 1px solid var(--border); background: var(--p-stage-light-2);
}
.pdp-compare__themname { display: grid; place-items: end center; padding-block: 1rem 0.875rem; color: var(--ink-3); text-align: center; }
.pdp-compare__no { color: var(--ink-4); }
.pdp-compare__maybe { font-size: 0.75rem; color: var(--ink-3); }

/* ---- how to use -------------------------------------------------------------
   Editorial composition, not template halves: the photo carries an overlapping
   shelf-tag card and a circular capsule-macro badge; the steps hang on a
   connected number rail. */
.pdp-chapter--howto { border-top: 1px solid var(--border); }
/* the number rail */
.pdp-steps {
  list-style: none; margin: 2.25rem 0 0; padding: 0;
  position: relative; display: flex; flex-direction: column; gap: 1.75rem;
}
.pdp-steps::before {
  content: ""; position: absolute; left: 1.0625rem; top: 1rem; bottom: 1rem;
  width: 1px; background: var(--border);
}
.pdp-step { position: relative; display: flex; gap: 1.125rem; }
.pdp-step__n {
  position: relative; z-index: 1; flex-shrink: 0;
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem;
  border: 1px solid color-mix(in oklab, var(--brand) 35%, var(--border));
  border-radius: 999px; background: var(--background);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--brand);
}
.pdp-step__t { margin: 0.3125rem 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.pdp-step__b { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }

/* ---- closing band ---------------------------------------------------------- */
.pdp-chapter--close { padding-bottom: 6rem; }
.pdp-close {
  position: relative; overflow: hidden; display: grid; gap: 2rem; align-items: center;
  border-radius: var(--radius-3xl-plus, 1.75rem); background: var(--surface-ink);
  padding: clamp(2rem, 5vw, 3.5rem);
}
/* quiet radial wash behind the jar so the band is not a flat rectangle */
.pdp-close::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42rem 28rem at 82% 30%, color-mix(in oklab, var(--brand) 16%, transparent), transparent 68%),
    radial-gradient(30rem 22rem at 8% 100%, color-mix(in oklab, var(--p-neutral-0) 5%, transparent), transparent 70%);
}
.pdp-close > * { position: relative; }
@media (min-width: 900px) { .pdp-close { grid-template-columns: 1.35fr 1fr; }}

.pdp-close__title {
  margin: 0.625rem 0 0; font-size: clamp(1.75rem, 3.8vw, 2.5rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.08; color: var(--p-neutral-0); text-wrap: balance;
}
.pdp-close__sub { margin: 0.875rem 0 0; max-width: 46ch; line-height: 1.6; color: color-mix(in oklab, var(--p-neutral-0) 72%, transparent); }
.pdp-close__row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.pdp-close__media { justify-self: center; }
.pdp-close__media img {
  display: block; width: 100%; max-width: 18rem; height: auto;
  filter: drop-shadow(0 28px 32px rgb(0 0 0 / 0.45));
}
@media (max-width: 899px) { .pdp-close__media { display: none; }}


/* ---- tiered pack selector (Fempia / Grüns quantity-break beat) ------------- */
.packs { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.packs__legend {
  padding: 0; margin-bottom: 0.125rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pack {
  position: relative; display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  background: var(--card);
  transition: border-color 160ms var(--ease-out-quart), box-shadow 160ms var(--ease-out-quart),
              background-color 160ms var(--ease-out-quart);
}
.pack:hover { border-color: color-mix(in oklab, var(--foreground) 28%, transparent); }
.pack.is-active {
  border-color: var(--brand);
  box-shadow: var(--shadow-ring-brand);
  background: color-mix(in oklab, var(--brand) 4%, var(--card));
}
.pack__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.pack__radio:focus-visible ~ .pack__mark { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent); }
.pack__mark {
  flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--background);
  transition: border-color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart);
}
.pack.is-active .pack__mark {
  border-color: var(--brand);
  background: radial-gradient(circle at 50% 50%, var(--brand) 0 42%, var(--background) 46%);
}
.pack__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3125rem; }
.pack__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pack__label { font-size: 0.9375rem; font-weight: 600; color: var(--foreground); }
.pack__badge {
  flex-shrink: 0; border-radius: 999px; padding: 0.1875rem 0.5rem;
  background: var(--brand-muted); color: var(--brand);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
}
.pack__badge .woocommerce-Price-amount { color: inherit; font: inherit; }
.pack__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.pack__unit {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.pack__unit .woocommerce-Price-amount { color: var(--foreground); font-weight: 600; }
.pack__per { color: var(--ink-3); }
.pack__total {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--foreground);
}
.pack__total .woocommerce-Price-amount { color: inherit; font: inherit; }

/* the saving flag on cart/drawer line items */
.ms-tierflag {
  display: inline-block; margin-left: 0.375rem;
  border-radius: 999px; padding: 0.0625rem 0.4375rem;
  background: var(--brand-muted); color: var(--brand);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
}

/* ==========================================================================
   PDP §B SUPPLY  ·  §C NOTHING ELSE
   ========================================================================== */

.pdp-price__unitcost {
  margin: .3rem 0 0;
  font-size: .8125rem;
  color: var(--data-accent);
  letter-spacing: .01em;
}

/* ==========================================================================
   PDP GALLERY — carousel + thumbnail rail
   Ecommerce gallery rules being honoured here, in order of how often sites
   get them wrong:
     1. FIXED ASPECT on the stage, so nothing reflows while images decode.
     2. Every frame the SAME ratio — a gallery that changes shape per slide
        reads as broken, which is why the generated angles are all 0.806.
     3. Native scroll-snap, so touch swipe costs nothing and never fights the
        browser's own momentum.
     4. Thumbnails vertical on desktop (they sit beside the stage, not under
        it, so the buy box stays above the fold), horizontal on mobile.
     5. Arrows are desktop-only affordances — on touch they are noise.
   ========================================================================== */

.pdp-gallery { display: grid; gap: .75rem; grid-template-columns: 1fr; min-width: 0; }
@media (min-width: 900px) {
  /* thumbs | stage — the rail on the left is the AG1/Oura arrangement and it
     keeps the stage optically centred against the buy box. */
  .pdp-gallery--multi { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .85rem; }
  .pdp-gallery--multi .pdp-gallery__thumbs { order: -1; }}


/* THE STAGE OWNS THE HEIGHT — nothing else may influence it.
   Previously the aspect-ratio lived on the slide, which is a flex item in a
   flex track whose own height was auto. With the default align-items:stretch
   the slide could end up taller than its ratio implied, and `object-fit:cover`
   then cropped the sides — which is why secondary frames looked violently
   zoomed while their thumbnails (sized independently) looked correct.
   Now: main declares the ratio, the track fills it absolutely, slides are
   100% of both axes. No circular sizing left to resolve. */
.pdp-gallery__main {
  position: relative;
  min-width: 0;
  aspect-ratio: 1400 / 1737;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.pdp-gallery__track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pdp-gallery__track::-webkit-scrollbar { display: none; }
.pdp-gallery__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.pdp-gallery__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  align-self: stretch;   /* never let a stray align-items shrink-wrap this */
  margin: 0;
  scroll-snap-align: center;
  overflow: hidden;
}
.pdp-gallery__img {
  /* Absolutely positioned, not height:100%. The rule this replaced pinned
     `aspect-ratio: 1/1` on the IMAGE because a percentage height resolves to
     auto against an aspect-ratio-derived parent — so the portrait packshot
     rendered square inside a 0.806 slide and left a dead band underneath.
     Filling an inset-0 box sidesteps that resolution question completely and
     leaves the ratio owned in exactly one place: the slide. */
  position: absolute;
  inset: 0;
  /* !important because WordPress, WooCommerce and the block-library global
     stylesheet all ship their own `img` sizing, and this element must not lose
     that fight — a mis-sized frame here reads as a broken zoom, which is
     exactly the bug this replaces. */
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  /* CONTAIN, not COVER. Every frame is pre-normalised to 1400x1737 before
     upload, so with a correct container the two are pixel-identical. They
     differ only when something upstream is wrong — and then contain
     letterboxes (obvious, harmless) while cover silently crops to a violent
     zoom. Given two ratio bugs have already surfaced here, fail safe. */
  object-fit: contain;
  object-position: center;
  display: block;
}

/* --- arrows: pointer devices only --------------------------------------- */
.pdp-gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem;
  display: none; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: color-mix(in oklab, var(--p-neutral-0) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--foreground);
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
@media (hover: hover) and (pointer: fine) { .pdp-gallery__nav { display: grid; }}

.pdp-gallery__nav:hover { background: var(--p-neutral-0); }
.pdp-gallery__nav:disabled { opacity: .28; pointer-events: none; }
.pdp-gallery__nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pdp-gallery__nav--prev { left: .7rem; }
.pdp-gallery__nav--next { right: .7rem; }
.pdp-gallery__nav--prev .ms-i { transform: rotate(90deg); }
.pdp-gallery__nav--next .ms-i { transform: rotate(-90deg); }

/* --- counter: the mobile affordance ------------------------------------- */
.pdp-gallery__counter {
  position: absolute; right: .7rem; bottom: .7rem; margin: 0;
  padding: .2rem .55rem;
  font-size: .6875rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--p-neutral-1000) 62%, transparent);
  color: var(--p-neutral-0);
  backdrop-filter: blur(6px);
}
.pdp-gallery__counter span { opacity: .55; margin: 0 .1rem; }
@media (hover: hover) and (pointer: fine) { .pdp-gallery__counter { display: none; }}


/* --- thumbnail rail ------------------------------------------------------ */
.pdp-gallery__thumbs {
  display: flex; gap: .5rem;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: .15rem;
}
.pdp-gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .pdp-gallery__thumbs { flex-direction: column; overflow-x: visible; overflow-y: auto; max-height: 100%; }}


.pdp-thumb {
  flex: 0 0 4rem;
  width: 4rem;
  aspect-ratio: 1400 / 1737;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  opacity: .62;
  transition: opacity .15s ease, border-color .15s ease;
}
@media (min-width: 900px) { .pdp-thumb { flex: 0 0 auto; width: 100%; }}

.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { opacity: .85; }
.pdp-thumb.is-active { opacity: 1; border-color: var(--foreground); }
.pdp-thumb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .pdp-gallery__track { scroll-behavior: auto; }
  .pdp-gallery__nav, .pdp-thumb { transition: none; }}