/* Pass 9 generated PDP system: gallery / ticket / ledger / long-form.
   Pass 11 promotes its bridge tokens to global.css. */

html { scroll-padding-block-start: calc(var(--nav-h-mobile) + var(--space-4)); }
body { background: var(--bg); color: var(--gray-light); font-family: var(--sans); font-weight: 400; }
body > main { inline-size: min(100%, 1240px); margin-inline: auto; padding: 0 20px var(--space-16); }
[hidden] { display: none !important; }
.icon { display: inline-block; inline-size: 16px; block-size: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 54px;
  overflow: hidden;
  color: var(--gray-dark);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}
.pdp-breadcrumb a { color: var(--gray-light); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pdp-breadcrumb > :last-child { overflow: hidden; text-overflow: ellipsis; }
.bc-sep { color: var(--gray-faint); }

.pdp {
  display: grid;
  grid-template-areas: "gallery" "variants" "buy" "left";
  gap: var(--space-5);
  align-items: start;
}
.gallery {
  grid-area: gallery;
  justify-self: center;
  inline-size: min(100%, calc(56vh * .8), 306px);
  aspect-ratio: 4 / 5;
}
.gallery__well {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: radial-gradient(70% 45% at 50% 84%, var(--pink-dim), transparent 70%), var(--surface-2);
}
.product-hero-img {
  inline-size: 80%;
  block-size: 80%;
  object-fit: contain;
  border-radius: var(--radius);
  transition: transform var(--d-3) var(--ease-out);
}
.product-hero-img--muted { opacity: .6; }
.product-fallback-label { display: none; }
.product-fallback-label.is-visible {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 12%;
  padding: var(--space-5);
  border: 1px solid var(--border);
  color: var(--gray-light);
  font-family: var(--mono);
  text-align: center;
}
.ribbon,
.purity {
  position: absolute;
  z-index: 1;
  min-block-size: 26px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 12px; /* Pass 14 (m6): badge floor */
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ribbon { inset-block-start: var(--space-4); inset-inline-start: var(--space-4); border: 1px solid var(--border-pink); background: var(--surface-3); color: var(--pink-text); }
.purity { inset-block-end: var(--space-4); inset-inline-end: var(--space-4); border: 1px solid var(--border-pink); background: var(--pink-dim); color: var(--pink-text); }

.pdp-dose { grid-area: variants; min-inline-size: 0; }
.pdp-dose__options {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.pdp-dose__options::-webkit-scrollbar { display: none; }
.dose-btn {
  flex: 0 0 auto;
  min-block-size: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--gray-light);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  scroll-snap-align: start;
}
.dose-btn small { color: var(--gray); font: inherit; font-size: 11px; }
.dose-btn[aria-pressed="true"] { border-color: var(--border-pink); background: var(--pink-soft); color: var(--white); }
.dose-btn[aria-pressed="true"] small { color: var(--pink-text); }

.pdp__left { grid-area: left; display: grid; gap: var(--space-4); min-inline-size: 0; }
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.spec { min-inline-size: 0; padding: var(--space-4); border-block-end: 1px solid var(--border); }
.spec:nth-child(odd) { border-inline-end: 1px solid var(--border); }
.spec:nth-last-child(-n + 2) { border-block-end: 0; }
.spec-label,
.spec-value { margin: 0; }
.spec-label,
.strip-kicker,
.section-tag,
.hero-tag,
.inventory-banner__eyebrow,
.cross-sell__eyebrow {
  color: var(--pink-text);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
}
.spec-label { font-size: 12px; } /* Pass 14 (m6): spec-label floor; the other eyebrows stay at the 10px badge size */
.spec-value { margin-block-start: var(--space-1); color: var(--white); font-size: 14px; line-height: 1.35; }
.spec:first-child .spec-label,
.spec:first-child .spec-value { font-family: var(--mono); font-weight: 500; }
.pdp-included {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.pdp-included__list { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
.pdp-included li + li { margin-block-start: var(--space-2); }

.buybox {
  grid-area: buy;
  min-inline-size: 0;
  padding: var(--space-6);
  border: 1px solid var(--border-hover);
  border-block-start: 2px solid var(--border-pink);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
/* Pass 14 (m7): clamp the head's single column to the buy box. Without it the
   stock pill's fit-content width sizes the auto track (≈500px at 390) and every
   head line — hero-tag, hero-sub, price row — overflows and clips at the edge. */
.buybox__head { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.title {
  max-inline-size: 14ch;
  margin: 0;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(38px, 8vw, 52px);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  letter-spacing: -.015em;
  line-height: .96;
  text-align: start;
  text-wrap: balance;
}
.title--long { font-size: 34px; line-height: 1; }
.hero-sub { color: var(--gray); font-family: var(--mono); font-size: 12px; font-weight: 400; }
.buybox__price-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.buybox__price {
  color: var(--white);
  font-family: var(--mono);
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.doc-chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: fit-content;
  min-block-size: 26px;
  margin: 0;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  background: var(--surface-2);
  max-inline-size: 100%;
  color: var(--gray-light);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}
/* Pass 14 (m7): global.css pins .pill to 26px + nowrap; inside the clamped buy-box head the
   stock line must wrap instead of running past the box. */
.pill { block-size: auto; white-space: normal; }
.pill--stock { border-color: var(--border); color: var(--success); }
/* Pass 14 (m5): --gray-faint is for the strike line only (dd §2); the text reads in --gray (9.5:1 on --surface-2). */
.pill--muted { color: var(--gray); text-decoration: line-through; text-decoration-color: var(--gray-faint); }
.stock-dot { inline-size: 7px; block-size: 7px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; background: currentColor; }
.pill--muted .stock-dot { background: transparent; }
.buybox__proof {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: fit-content;
  min-block-size: 44px; /* Pass 14 (m8): ledger jump target */
  margin: 0;
  color: var(--gray-light);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  overflow-wrap: anywhere;
  text-decoration-color: var(--border-pink);
  text-underline-offset: .2em;
}
.buybox__proof [data-pdp-proof-label],
.buybox__proof [data-pdp-proof-batch] { font-weight: 500; }
.hero-desc { inline-size: 100%; max-inline-size: 58ch; margin: 0; color: var(--gray-light); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; }
/* Pass 14 (m6): responsive-fixes.css .hero-points .hero-pill re-pins 10px + nowrap at higher
   specificity; same selector here (later in the bundle) restores the 12px floor and wrapping. */
.hero-points .hero-pill { font-size: 12px; white-space: normal; }
.hero-pill {
  min-block-size: 26px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--gray);
  font-family: var(--mono);
  font-size: 12px; /* Pass 14 (m6): fact-chip floor */
  font-weight: 400;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  white-space: normal !important;
}
.callout { padding: var(--space-4); border-inline-start: 2px solid var(--border-pink); background: var(--surface-2); }
.callout p { margin: 0; }
.callout p + p { margin-block-start: var(--space-2); }
.buybox__order { display: grid; gap: var(--space-4); margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border); }
.order-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); }
.order-section-head h2 { margin: 0; color: var(--white); font-family: var(--serif); font-size: 26px; font-weight: 400; }

.inventory-banner { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.inventory-banner__copy { margin-block-start: var(--space-1); color: var(--gray-light); font-size: 14px; }
.tier-selector { display: grid; gap: var(--space-2); }
.tier-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-block-size: 66px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--gray-light);
  cursor: pointer;
}
.tier-card.selected { border-color: var(--border-pink); background: var(--pink-soft); }
.buybox .tier-card.tier-card--popular,
.buybox .tier-card.tier-card--value { border-color: var(--border) !important; box-shadow: none; }
.buybox .tier-card.selected,
.buybox .tier-card.tier-card--popular.selected,
.buybox .tier-card.tier-card--value.selected { border-color: var(--border-pink) !important; background: var(--pink-soft); box-shadow: none; }
.tier-card__popular-badge {
  position: absolute;
  inset-block-start: -9px;
  inset-inline-end: var(--space-3);
  inset-inline-start: auto;
  padding: 2px var(--space-2);
  border: 1px solid var(--border-pink);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--pink-text);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: none;
}
.buybox .tier-card__popular-badge--value { background: var(--surface-3); color: var(--pink-text); }
.tier-card__quantity,
.tier-card__amount { display: flex; flex-direction: column; min-inline-size: 0; }
.qty { color: var(--white); font-family: var(--mono); font-size: 17px; font-weight: 500; }
.qty-label,
.price-sub { color: var(--gray); font-family: var(--mono); font-size: 10px; font-weight: 400; }
.price { color: var(--white); font-family: var(--mono); font-size: 15px; font-weight: 400; font-variant-numeric: tabular-nums; }
.save { color: var(--success); font-family: var(--mono); font-size: 10px; font-weight: 500; text-align: end; }
.pdp-bundle-ticket { inline-size: 100%; margin: 0; text-align: start; }

.buybox__quantity { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.buybox__quantity-copy { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.buybox__quantity-copy strong,
.buybox__quantity-total strong { color: var(--white); font-family: var(--mono); font-weight: 500; }
.buybox__quantity-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.buybox__stepper { display: inline-grid; grid-template-columns: 44px 52px 44px; align-items: center; }
.buybox__step,
.buybox__quantity-input {
  min-block-size: 44px;
  border: 1px solid var(--border-hover);
  background: var(--surface);
  color: var(--white);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.buybox__step { cursor: pointer; }
.buybox__step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.buybox__step:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.buybox__quantity-input { inline-size: 52px; border-inline: 0; border-radius: 0; }
.buybox__quantity-input { font-size: 16px; }
.buybox__step:disabled { color: var(--gray-faint); cursor: not-allowed; }

.buybox__sum { display: grid; gap: 0; margin: 0; border-block: 1px solid var(--border); }
.buybox__sum > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 44px; }
.buybox__sum dt { color: var(--gray); font-family: var(--mono); font-size: 11px; font-weight: 400; }
.buybox__sum dd { margin: 0; color: var(--white); font-family: var(--mono); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }
.buybox__sum-total { border-block-start: 1px solid var(--border); }
.buybox__sum-total dd { font-size: 20px; font-weight: 500; }
.buybox__delivery { display: flex; align-items: center; gap: var(--space-3); min-block-size: 48px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--gray-light); font-family: var(--mono); font-size: 11px; font-weight: 400; }
.buybox__delivery-icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; color: var(--success); }
.buybox__delivery-icon svg { display: block; inline-size: 100%; block-size: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.order-btn,
.btn-secondary,
.btn-ghost {
  min-block-size: 44px;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.order-btn {
  inline-size: 100%;
  min-block-size: 50px;
  font-size: 14px; /* Pass 14 (m6): primary CTA label floor */
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  background: var(--pink-hover);
  color: var(--white);
  box-shadow: var(--shadow-pink);
  cursor: pointer;
  transition: transform var(--d-1) var(--ease-out);
}
.order-btn--ghost {
  border-color: var(--border-hover);
  background: transparent;
  color: var(--gray-light);
  box-shadow: none;
}
.btn-secondary,
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-4); border: 1px solid var(--border-hover); background: transparent; color: var(--gray-light); }
.bacwater-note { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--gray); font-family: var(--mono); font-size: 11px; }
.bacwater-note a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--gray-light); text-underline-offset: .2em; }
.pdp-soldout .order-btn { box-shadow: none; }

.batch-ledger,
.section,
.strip,
.cross-sell { margin-block-start: var(--space-12); }
.batch-ledger { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.batch-ledger__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
.batch-ledger h2,
.section h2,
.cross-sell__title { margin: var(--space-2) 0 0; color: var(--white); font-family: var(--serif); font-size: clamp(30px, 6vw, 44px); font-weight: 400; font-variant-numeric: lining-nums; line-height: 1; text-wrap: balance; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.batch-ledger__table,
.chemistry-table { inline-size: 100%; border-collapse: collapse; }
.batch-ledger__table { min-inline-size: 760px; font-family: var(--mono); font-size: 13px; font-weight: 400; }
.batch-ledger__table thead,
.chemistry-table thead { background: var(--surface-2); color: var(--gray-dark); }
.batch-ledger__table thead { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.batch-ledger__table th,
.batch-ledger__table td,
.chemistry-table th,
.chemistry-table td { min-block-size: 44px; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); text-align: start; vertical-align: middle; }
.batch-ledger__table tbody th { color: var(--white); font-weight: 500; }
.batch-ledger__table td { color: var(--gray-light); }
.batch-ledger__purity { color: var(--white) !important; font-size: 16px; font-weight: 500 !important; }
.batch-ledger code,
.chemistry-table code { color: inherit; font-family: var(--mono); font-weight: 400; overflow-wrap: anywhere; }
.batch-ledger__verify { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; color: var(--pink-text); text-underline-offset: .2em; white-space: nowrap; }
.batch-ledger__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; color: var(--gray); font-family: var(--mono); font-size: 13px; font-weight: 400; }
.batch-ledger__meta a { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; color: var(--pink-text); }

.section { max-inline-size: 920px; }
.section > h2,
.section > .rv > h2 { max-inline-size: 18ch; }
.section-intro { max-inline-size: 65ch; color: var(--gray-light); }
.prose { color: var(--gray-light); font-size: 15px; line-height: 1.65; }
.prose > :first-child { margin-block-start: 0; }
.prose > :last-child { margin-block-end: 0; }
.prose h3 { margin: var(--space-8) 0 var(--space-3); color: var(--white); font-family: var(--serif); font-size: 26px; font-weight: 400; }
.prose p,
.prose ul { max-inline-size: 65ch; }
.prose a,
.section a,
.strip a { color: var(--pink-text); }
.chemistry-table-scroll { margin-block-start: var(--space-5); }
.chemistry-table { color: var(--gray-light); font-family: var(--mono); font-size: 12px; font-weight: 400; }
.chemistry-table th { color: var(--white); font-weight: 500; }
.chemistry-table thead th { color: var(--gray-dark); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.chemistry-table--spec th { inline-size: 42%; }
.product-micro-note { color: var(--gray); font-family: var(--mono); font-size: 11px; font-weight: 400; }
.product-micro-note--spaced { margin-block-start: var(--space-4); }
.strip { display: grid; gap: var(--space-3); }
.strip-card { padding: var(--space-4); border-block-start: 1px solid var(--border); }
.strip-copy { margin-block-start: var(--space-1); color: var(--gray-light); }
.strip-copy a,
.product-micro-note a { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; }
.clicks { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); min-block-size: 44px; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border); color: var(--gray-light); font-family: var(--mono); font-size: 12px; }
.cr a { display: flex; min-block-size: 44px; align-items: center; }
.cr:last-child { border-block-end: 0; }
.cr.head { background: var(--surface-2); color: var(--gray-dark); font-size: 10px; text-transform: uppercase; }

.faq { margin-block-start: var(--space-5); border-block-start: 1px solid var(--border); }
.qa { border-block-end: 1px solid var(--border); }
.qa summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-4); align-items: center; min-block-size: 60px; padding-block: var(--space-3); color: var(--white); cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qh { font-size: 16px; font-weight: 500; }
.qa__chevron { inline-size: 20px; block-size: 20px; fill: none; stroke: var(--gray); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--d-2) var(--ease-out); }
.qa[open] .qa__chevron { transform: rotate(180deg); }
.ans { padding: 0 0 var(--space-4); }
.faq-answer { max-inline-size: 65ch; color: var(--gray-light); font-size: 15px; line-height: 1.6; }
.faq-answer p { margin: 0; }

.sticky-buy {
  --_sticky-h: 72px;
  position: fixed;
  z-index: 800;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-block-size: var(--_sticky-h);
  padding: var(--space-2) 20px calc(var(--space-2) + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.sticky-buy__identity { display: flex; flex-direction: column; min-inline-size: 0; }
.sticky-buy__identity span { overflow: hidden; color: var(--gray); font-family: var(--mono); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy__identity strong { color: var(--white); font-family: var(--mono); font-size: 15px; font-weight: 500; }
.sticky-buy__cta { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding-inline: var(--space-5); border-radius: var(--radius); background: var(--pink-hover); color: var(--white); font-family: var(--mono); font-size: 14px; /* Pass 14 (m6) */ font-weight: 500; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.sticky-buy__cta--ghost { border: 1px solid var(--border-hover); background: transparent; color: var(--gray-light); }
body:has(.sticky-buy) { padding-block-end: calc(72px + env(safe-area-inset-bottom)); }
body.drawer-open .sticky-buy { opacity: 0; pointer-events: none; transform: translateY(100%); }

.rv { opacity: 1; transform: none; }

:where(a, button, [role="radio"], input):focus-visible { outline: 2px solid var(--pink-text); outline-offset: 3px; }
@media (hover: hover) {
  .order-btn:hover,
  .sticky-buy__cta:hover { transform: translateY(-1px); }
  .order-btn--ghost:hover,
  .sticky-buy__cta--ghost:hover { border-color: var(--pink-text); background: transparent; color: var(--pink-text); }
  .btn-ghost:hover,
  .btn-secondary:hover { color: var(--pink-text); }
  .gallery:hover .product-hero-img { transform: scale(1.03); }
}

@media (min-width: 720px) {
  body > main { padding-inline: var(--space-6); }
  .buybox__sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .buybox__sum > div { display: block; padding: var(--space-3); border-inline-end: 1px solid var(--border); }
  .buybox__sum > div:last-child { border-inline-end: 0; }
  .buybox__sum-total { border-block-start: 0; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section,
  .strip,
  .cross-sell,
  .batch-ledger { margin-block-start: var(--space-16); }
}

@media (min-width: 900px) {
  .pdp {
    grid-template-areas: "gallery buy" "variants buy" "left buy";
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: var(--space-8);
  }
  .gallery { justify-self: stretch; inline-size: 100%; }
  .tier-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier-card { grid-template-columns: 1fr; align-content: space-between; min-block-size: 112px; }
  .save { text-align: start; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  html { scroll-padding-block-start: calc(var(--nav-h-desktop) + var(--space-4)); }
  body > main { padding-inline: var(--space-8); }
  .buybox { position: sticky; inset-block-start: calc(var(--nav-h-desktop) + var(--space-4)); padding: var(--space-6); box-shadow: var(--shadow-2); }
  .buybox__head { gap: var(--space-1); }
  .title { font-size: 44px; text-align: start; }
  .title--long { font-size: 34px; }
  .buybox__order { gap: var(--space-2); margin-block-start: var(--space-4); padding-block-start: var(--space-4); }
  .buybox--long-title .title { font-size: 30px; }
  .buybox--long-title .buybox__order { gap: var(--space-1); }
  .order-section-head { display: none; }
  .tier-card { min-block-size: 92px; padding: var(--space-2); }
  .buybox__quantity { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
  .buybox__quantity-row { flex-wrap: nowrap; }
  .buybox__sum > div { min-block-size: 54px; padding: var(--space-2); }
  .buybox__delivery { min-block-size: 44px; padding-block: var(--space-2); }
  .order-btn { min-block-size: 48px; }
  .sticky-buy { display: none; }
  body:has(.sticky-buy) { padding-block-end: 0; }
  .batch-ledger,
  .section,
  .strip,
  .cross-sell { margin-block-start: var(--space-20); }
}

@media (max-width: 719px) {
  /* Keep the mobile product name within the first 620 px while preserving the
     gallery's reserved 4:5 box and every captured product image. */
  .gallery { inline-size: min(100%, calc(52vh * .8), 284px); }
  .batch-ledger { padding: var(--space-4); }
  .batch-ledger__table { min-inline-size: 0; }
  .batch-ledger__table thead,
  .chemistry-table:has(tr > :nth-child(4)) thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .batch-ledger__table tbody,
  .batch-ledger__table tr,
  .batch-ledger__table th,
  .batch-ledger__table td,
  .chemistry-table:has(tr > :nth-child(4)) tbody,
  .chemistry-table:has(tr > :nth-child(4)) tr,
  .chemistry-table:has(tr > :nth-child(4)) th,
  .chemistry-table:has(tr > :nth-child(4)) td { display: block; inline-size: 100%; }
  .batch-ledger__table tr,
  .chemistry-table:has(tr > :nth-child(4)) tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); border-block-end: 1px solid var(--border); }
  .batch-ledger__table th,
  .batch-ledger__table td,
  .chemistry-table:has(tr > :nth-child(4)) th,
  .chemistry-table:has(tr > :nth-child(4)) td { min-block-size: 0; padding: var(--space-2); border: 0; }
  .batch-ledger__table th,
  .batch-ledger__purity { grid-column: span 1; }
  .batch-ledger__table td::before,
  .chemistry-table:has(tr > :nth-child(4)) td::before { content: attr(data-label); display: block; margin-block-end: 2px; color: var(--gray-dark); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
  .chemistry-table:has(tr > :nth-child(4)) th { grid-column: 1 / -1; }
  .table-wrap { overflow: hidden; }
}

@media (max-width: 479px) {
  .tier-card { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) auto; }
  .tier-card__popular-badge { inset-inline-end: var(--space-2); }
  .buybox { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .qa__chevron,
  .product-hero-img,
  .order-btn,
  .sticky-buy,
  .sticky-buy__cta { transition: none !important; transform: none !important; }
}