/* Supplement vertical · PDP chapter styles.
   Front-panel label, Supplement Facts panel, days-of-supply and cost
   arithmetic, the excipient list, ingredient anatomy, accordions.
 */

/* The printed-label facsimile — paper on the ink band. The 1px hairlines and
   mono rows mirror the physical front panel in the photography; the slight
   rotation and hard shadow make it read as an object, not a data table. */
.pdp-label {
  margin: 0; justify-self: center; width: min(100%, 24rem);
  background: var(--background); color: var(--foreground);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  transform: rotate(-1.25deg);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.25),
    0 24px 48px -16px rgb(0 0 0 / 0.55),
    inset 0 0 0 1px color-mix(in oklab, var(--foreground) 6%, transparent);
  transition: transform 300ms var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) { .pdp-label:hover { transform: rotate(0deg); }}

@media (prefers-reduced-motion: reduce) { .pdp-label { transition: none; }}

.pdp-label__brandrow {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding-bottom: 1.125rem;
}
.pdp-label__wordmark {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--foreground);
}
.pdp-label__tag {
  flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: 0.25rem;
  padding: 0.1875rem 0.4375rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-2);
  white-space: nowrap;
}
.pdp-label__name {
  margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.08; letter-spacing: -0.02em;
  font-weight: 700; color: var(--foreground); max-width: 11ch;
}
.pdp-label__rows { margin: 0; border-top: 1px solid var(--border-strong); }
.pdp-label__rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.5625rem;
  border-bottom: 1px solid var(--border-strong);
}
.pdp-label__rows dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pdp-label__rows dd {
  margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--foreground); text-align: right;
}
.pdp-label__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1rem;
}
.pdp-label__lot {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.pdp-label__seal {
  display: grid; place-items: center; gap: 0.125rem; text-align: center;
  width: 3.5rem; height: 3.5rem; border-radius: 999px;
  border: 1px dashed color-mix(in oklab, var(--brand) 55%, transparent);
  color: var(--brand); transform: rotate(-8deg);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.5rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3;
  text-transform: uppercase;
}

.pdp-directions__body { margin: 0.625rem 0 0; max-width: 62ch; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
.pdp-inside__head { max-width: 44rem; margin: 0 auto 3rem; text-align: center; }
.pdp-inside__lede { margin: 0.875rem auto 0; color: var(--ink-2); max-width: 52ch; }

/* Mobile-first: center disc stacked above a 2-col node grid, no spokes. */
.pdp-anatomy {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.25rem; justify-items: center;
}
.pdp-anatomy__lines { display: none; }
.pdp-anatomy__center {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 0.875rem;
}
.pdp-anatomy__disc {
  display: block; width: 13rem; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 999px; border: 1px solid var(--border);
  box-shadow: var(--elevation-card);
}
.pdp-anatomy__disc img, .pdp-anatomy__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-anatomy__chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px; padding: 0.3125rem 0.75rem;
  background: var(--surface); box-shadow: var(--elevation-whisper);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--foreground);
}
@media (min-width: 900px) {
  .pdp-anatomy { display: block; height: 34rem; max-width: 64rem; margin-inline: auto; }
  .pdp-anatomy__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .pdp-anatomy__lines line {
    stroke: color-mix(in oklab, var(--foreground) 22%, transparent);
    stroke-width: 1; vector-effect: non-scaling-stroke;
    stroke-dasharray: 3 4;
  }
  .pdp-anatomy__center {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .pdp-anatomy__disc { width: 15rem; }}

.pdp-howto { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .pdp-howto { grid-template-columns: 0.85fr 1fr; gap: 5rem; }}

.pdp-howto__media { position: relative; }
.pdp-howto__img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  box-shadow: var(--elevation-card);
}
.pdp-howto__badge, .pdp-howto__float { display: none; }
@media (min-width: 900px) {
  .pdp-howto__badge {
    position: absolute; top: 2.25rem; right: -1.75rem;
    display: block; width: 6.5rem; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 999px; border: 4px solid var(--background);
    box-shadow: var(--elevation-card);
  }
  .pdp-howto__badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pdp-howto__float {
    position: absolute; bottom: 2.25rem;
    /* hang off the photo's edge, but never off the viewport: on ≤80rem
       viewports the axis is flush, so the overhang retreats to -1rem (leaving
       8px of gutter); with margin to spare it grows back to the full -1.75rem */
    left: clamp(-1.75rem, calc(-1rem - (100vw - 80rem) / 2), -1rem);
    display: flex; flex-direction: column; gap: 0.1875rem;
    padding: 0.75rem 1rem;
    background: var(--background); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  }
  .pdp-howto__floatk {
    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-howto__floatv { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }}

.pdp-howto__title { margin-top: 0.625rem; }

/* --- §B two columns: what we can prove | what we refuse to guess --------- */
.pdp-supply__cols {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 1.75rem;
}
@media (min-width: 860px) {
  .pdp-supply__cols { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: 2.5rem; }}

.pdp-supply__colhead {
  margin: 0 0 .9rem;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.pdp-supply__list { margin: 0; }
.pdp-supply__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--border);
}
.pdp-supply__row:first-child { border-top: 1px solid var(--border); }
.pdp-supply__row dt { color: var(--ink-2); font-size: .9375rem; }
.pdp-supply__row dd { margin: 0; font-size: .9375rem; color: var(--ink-1, var(--foreground)); }

/* The refusal column reads as an aside, not a spec — deliberately unlike the
   left column, so the difference between proof and opinion is visible. */
.pdp-supply__col--refuse {
  border-left: 2px solid var(--rule);
  padding-left: 1.25rem;
}
.pdp-supply__body { margin: 0 0 .8rem; color: var(--ink-2); line-height: 1.6; max-width: 54ch; }
.pdp-supply__body--last { color: var(--ink-3); margin-bottom: 0; }

/* --- §C ingredients panel ------------------------------------------------ */
.pdp-nothing__grid {
  display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 860px) {
  .pdp-nothing__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 3rem; }}

.pdp-nothing__lead { color: var(--ink-2); margin: 1rem 0 0; max-width: 48ch; line-height: 1.6; }
.pdp-nothing__note {
  margin: 1rem 0 0; color: var(--ink-3); font-size: .9375rem;
  border-left: 2px solid var(--rule); padding-left: 1rem; max-width: 46ch;
}

.pdp-nothing__panel {
  margin: 0; padding: 1.25rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--card);
}
.pdp-nothing__panelhead {
  display: block; padding-bottom: .6rem; margin-bottom: .2rem;
  border-bottom: 2px solid var(--foreground);
}
.pdp-nothing__rows { margin: 0; }
.pdp-nothing__row {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .65rem 0; border-bottom: 1px solid var(--border);
}
.pdp-nothing__row dt { font-size: .8125rem; color: var(--ink-3); }
.pdp-nothing__row dd { margin: 0; font-size: .875rem; text-align: right; }

/* The empty line is the whole point — give it weight rather than hiding it. */
.pdp-nothing__row--empty dd { color: var(--data-accent); font-weight: 600; }

.pdp-nothing__excl {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem .75rem;
}
.pdp-nothing__excl li {
  font-size: .75rem; color: var(--ink-3);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.pdp-nothing__excl span { color: var(--ink-4); }

/* ==========================================================================
   SUPPLEMENT FACTS PANEL
   Styled as the printed document it is: heavy rules, condensed type, the
   thick bar under the title. Every supplement buyer recognises this object
   on sight, and imitating it faithfully is the point — a prettified
   "ingredients graphic" reads as marketing, the panel reads as a fact.
   ========================================================================== */
.pdp-facts__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pdp-facts__grid { grid-template-columns: minmax(0,5fr) minmax(0,4fr); gap: 3.5rem; }}


.pdp-facts__lead { color: var(--ink-2); margin: 1rem 0 0; max-width: 46ch; line-height: 1.6; }
.pdp-facts__points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.pdp-facts__points li { color: var(--ink-2); font-size: .9375rem; }
.pdp-facts__points .u-data { color: var(--data-accent); font-weight: 600; }

.pdp-facts__panel {
  margin: 0; padding: 1rem 1.15rem 1.15rem;
  border: 2px solid var(--foreground);
  border-radius: 2px;                 /* a printed panel has square corners */
  background: var(--p-neutral-0);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: .8125rem;
}
.pdp-facts__title {
  font-family: inherit; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  padding-bottom: .35rem; border-bottom: 8px solid var(--foreground); margin-bottom: .5rem;
  width: 100%;
}
.pdp-facts__meta p { margin: .15rem 0; display: flex; justify-content: space-between; gap: 1rem; }
.pdp-facts__table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.pdp-facts__table thead th {
  font-size: .6875rem; font-weight: 700; text-align: right; padding: .3rem 0;
  border-top: 4px solid var(--foreground); border-bottom: 1px solid var(--foreground);
}
.pdp-facts__table thead th:first-child { text-align: left; }
.pdp-facts__table tbody th { text-align: left; font-weight: 700; padding: .5rem 0; }
.pdp-facts__table tbody td { text-align: right; padding: .5rem 0; }
.pdp-facts__table tbody tr { border-bottom: 1px solid var(--foreground); }

.pdp-facts__other { margin: .6rem 0 0; padding-top: .5rem; border-top: 4px solid var(--foreground); }
.pdp-facts__foot  { margin: .35rem 0 0; color: var(--ink-3); font-size: .75rem; }
.pdp-facts__dshea {
  margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid var(--border-strong);
  font-size: .6875rem; line-height: 1.45; color: var(--ink-3);
  font-family: var(--font-sans, inherit);
}

/* ==========================================================================
   BUY-BOX ACCORDIONS
   ========================================================================== */
.pdp-acc { margin-top: 1.25rem; border-top: 1px solid var(--border); }
.pdp-acc__item { border-bottom: 1px solid var(--border); }
.pdp-acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 500;
}
.pdp-acc__q::-webkit-details-marker { display: none; }
.pdp-acc__q:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-sm); }
.pdp-acc__chev { color: var(--ink-3); transition: transform .18s ease; flex: 0 0 auto; }
.pdp-acc__item[open] .pdp-acc__chev { transform: rotate(180deg); }
.pdp-acc__a {
  padding: 0 0 1rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; max-width: 54ch;
}
@media (prefers-reduced-motion: reduce) { .pdp-acc__chev { transition: none; }}

@media (max-width: 460px) {
  /* Facts panel: the printed-document look survives, the type stops fighting
     the gutter. Values keep their own column so decimals still align. */
  .pdp-facts__panel { padding: .85rem .9rem 1rem; font-size: .75rem; }
  .pdp-facts__title { font-size: 1.25rem; border-bottom-width: 6px; }
  .pdp-facts__meta p { gap: .5rem; }
  .pdp-facts__table thead th { font-size: .625rem; }
  .pdp-facts__table tbody th { font-size: .75rem; padding-right: .5rem; hyphens: auto; }
  .pdp-facts__table tbody td { white-space: nowrap; padding-left: .35rem; }
  .pdp-facts__dshea { font-size: .625rem; }

  /* Ingredients panel: label/value stack rather than squeeze. */
  .pdp-nothing__row { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .pdp-nothing__row dd { text-align: left; }
  .pdp-nothing__excl { grid-template-columns: 1fr; }

  /* Supply columns: the refusal column keeps its rule but loses the indent
     that eats a fifth of a 390px screen. */
  .pdp-supply__col--refuse { padding-left: .9rem; }
  .pdp-supply__row { padding: .6rem 0; }

  /* Accordions: bigger tap target, per WCAG 2.5.8 (24px min). */
  .pdp-acc__q { padding: 1rem 0; min-height: 3rem; }}


/* Nothing on this page may cause a sideways scroll. The facts table is the
   only element with a real risk of it, so it gets an explicit escape hatch
   instead of relying on every cell staying short. */
.pdp-facts__panel { overflow-x: auto; }
.pdp-facts__table { min-width: 0; }