/* ===========================================================================
   Skincare vertical · PDP chapters.
   Data blocks are deadpan AND static: no animation on a spec row (§7.13).

   LOAD ORDER: this sheet is globbed into assets/vertical/ and loads after
   components.css (alphabetical) and after every engine sheet, so PDP-scoped
   corrections to engine components belong here rather than in components.css.
   =========================================================================== */

/* ---------- the one-liner under the product name ----------
   Type law §2: the wit — display ITALIC, max one appearance per view, and
   this is the PDP's one. Lowercase product name above it, mono price below.
   The family/style/weight triplet lives on `.wit` in primitives.css and the
   markup composes it; only size, colour and measure are the PDP's business. */

/* ===========================================================================
   PDP-SCOPED CORRECTIONS TO ENGINE COMPONENTS
   =========================================================================== */

/* ---- availability pill ----------------------------------------------------
   The engine paints --positive in --stock-in green. On a page whose only
   other hues are cupric and ink, a green chip beside the H1 was the one
   off-system colour in the first viewport. Availability is a status FACT, not
   a success event, so it moves onto the blue system. --success is left alone
   for genuine success feedback (order placed, review posted). */
  color: var(--brand-hover);
  border-color: var(--border-strong);
  background: var(--brand-muted);
}

/* ===========================================================================
   THE BUY RAIL
   Everything a person needs to decide, in the column with the button in it.
   Density is deliberate and tight — 0.75–1rem inside blocks, 1.25rem between
   them — because this column now carries what four full-width chapters used
   to, and an airy rail would just rebuild the scroll it replaced.
   =========================================================================== */



/* ---- the active ------------------------------------------------------------
   THE FOCAL BLOCK of the rail, and the reason the brand exists. Hierarchy is
   built from three levers at once rather than size alone: the label is 11px
   mono muted, the number is 2.75rem mono cupric, the compound is 1.125rem/600
   ink. Squint and the percentage is the only thing left. */
.pdp-active {
  padding: var(--p-space-4) var(--p-space-4-5);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-muted);
}
.pdp-active__k { margin: 0; font-size: var(--p-text-11); letter-spacing: var(--p-tracking-12); color: var(--brand-hover); }
.pdp-active__v { margin: var(--p-space-1) 0 0; display: flex; align-items: baseline; gap: var(--p-space-2); flex-wrap: wrap; }
.pdp-active__pct {
  font-size: 2.75rem; line-height: 1; color: var(--brand);
  font-variant-numeric: tabular-nums; letter-spacing: var(--p-tracking-n20);
}
.pdp-active__cmp { font-size: var(--p-text-18); font-weight: 600; letter-spacing: var(--p-tracking-n10); color: var(--foreground); }
.pdp-active__blend { font-size: var(--p-text-16); color: var(--foreground); }
.pdp-active__qual { font-size: var(--p-text-11); letter-spacing: var(--p-tracking-8); color: var(--ink-3); }
.pdp-active__sup { margin: var(--p-space-2) 0 0; font-size: var(--p-text-14); color: var(--ink-2); }

/* ---- key facts -------------------------------------------------------------
   Four cells, hairline-ruled, tabular. Auto-fit so a SKU carrying two facts
   makes two wide cells rather than two cells and a hole. */
.pdp-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--p-space-3-5) var(--p-space-5); margin: 0;
  border-block: 1px solid var(--border); padding-block: var(--p-space-3-5);
}
.pdp-facts dt { font-family: var(--font-mono); font-size: var(--p-text-11); letter-spacing: var(--p-tracking-6); text-transform: uppercase; color: var(--ink-3); }
.pdp-facts dd { margin: var(--p-space-1) 0 0; font-family: var(--font-mono); font-size: var(--p-text-15); color: var(--foreground); font-variant-numeric: tabular-nums; }

/* ---- the layering conflict -------------------------------------------------
   CUPRIC, not the law's amber. Amber-as-an-accent was the plan — icon, rule
   and label only, no sand fill — but rendered on the live page #7D4D05 is
   still visibly brown at 3px, and brown is the one thing this palette has
   been cleared of twice. Semantics do not depend on the hue here: the alert
   glyph and the literal words DO NOT LAYER carry the caution, so colour is
   not the only indicator (WCAG 1.4.1). It is still the only bordered,
   iconned row in the rail. */
/* ---- the one before-you-buy line -------------------------------------------
   WAS A BORDERED PANEL WITH A BRAND SPINE. In the rebuilt column it sits
   between the benefit list and the stock line, and at panel weight it out-shouted
   both — a layering conflict is a caveat, not a headline. Same weight as the
   stock line beneath it now, distinguished only by the amber the rest of the
   system already uses for caution. */
.pdp-conflict {
  display: flex; align-items: center; gap: var(--p-space-2); margin: 0;
  font-size: var(--p-text-14); line-height: 1.4; color: var(--ink-2);
}
.pdp-conflict svg { color: var(--warning); flex-shrink: 0; }
.pdp-conflict__k {
  font-size: var(--p-text-11); letter-spacing: var(--p-tracking-10);
  font-weight: 600; color: var(--warning);
}
/* ---- dispatch / transit / returns ------------------------------------------
   The three questions every reference PDP answers beside the button. Numbers
   come from the published policy, never from a promise invented here. */

/* ---- progressive disclosure ------------------------------------------------
   Native <details>, so keyboard and screen-reader behaviour are the platform's
   and not a reimplementation. Hairline rows, no card — a stack of boxes here
   would compete with the button directly above. */
.pdp-panels { border-top: 1px solid var(--border); }
.pdp-panel { border-bottom: 1px solid var(--border); }
.pdp-panel__sum {
  display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-4);
  padding: 0.9375rem 0; cursor: pointer; list-style: none;
  font-size: var(--p-text-15); font-weight: 600; color: var(--foreground);
  min-height: 44px;                      /* WCAG target on the whole row */
}
.pdp-panel__sum::-webkit-details-marker { display: none; }
.pdp-panel__sum:hover { color: var(--brand-hover); }
.pdp-panel__sum:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }
.pdp-panel__chev { color: var(--ink-3); transition: transform 180ms var(--ms-ease, cubic-bezier(0.23,1,0.32,1)); }
.pdp-panel[open] .pdp-panel__chev { transform: rotate(180deg); }
.pdp-panel__body { padding: 0 0 var(--p-space-4-5); }
.pdp-panel__hint { margin: 0 0 var(--p-space-3); font-size: var(--p-text-14); line-height: 1.5; color: var(--ink-2); }
.pdp-panel__note { margin: var(--p-space-3) 0 0; font-size: var(--p-text-14); line-height: 1.55; color: var(--ink-2); }
.pdp-panel__inci { margin: 0; font-size: var(--p-text-13); line-height: 1.7; color: var(--ink-2); word-break: break-word; }
@media (prefers-reduced-motion: reduce) { .pdp-panel__chev { transition: none; } }

/* the ramp swatch, inside its panel */
.pdp-ramp { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--p-space-4); align-items: start; }
.pdp-ramp__swatch {
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--band); color: var(--band-on);
  border-radius: var(--radius-sm); font-size: var(--p-text-12); letter-spacing: var(--p-tracking-8);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 6%, transparent);   /* edge for the pale bands */
}
.pdp-ramp__meta { margin: 0; display: grid; gap: var(--p-space-2-5); }
.pdp-ramp__meta dt { font-size: var(--p-text-11); letter-spacing: var(--p-tracking-12); color: var(--ink-3); }
.pdp-ramp__meta dd { margin: 0.1rem 0 0; font-size: var(--p-text-14); color: var(--foreground); }

/* ---- the rail is long now, so the product stays put ------------------------
   Sticky needs the grid item to size to its content, hence align-items:start
   on .pdp-hero. Only above 1024, where there are two columns to hold apart. */
@media (min-width: 1024px) {
  .pdp-hero { align-items: start; }
  .pdp-gallery { position: sticky; top: 5.5rem; }
}

/* ---- gallery stage --------------------------------------------------------
   .stage-light paints a radial gradient ending on cream #F5EFE3. Every
   packshot is already SHOT on a cream sweep, so the frame was staging an
   image that carries its own stage — a cream vignette in the corners around a
   cream photograph. The photograph keeps the cream; the frame does not. */
.pdp-gallery__slide.stage-light { background: var(--surface); }
.pdp-gallery__slide { background: var(--surface); }

/* ---- gallery ratio --------------------------------------------------------
   The engine stage is 1400/1737 (0.806) because the supplement frames were
   shot portrait. EVERY SKINCARE FRAME IS SQUARE — verified against the
   uploaded original: 04-hero-1600.webp is 1600x1600. With object-fit:contain
   (which the engine chose deliberately, to letterbox rather than silently
   crop) a square image in a 0.806 stage leaves ~64px dead bands top and
   bottom. The cream stage gradient used to hide them; with the stage flat
   white they showed as a cream rectangle floating in a white frame.
   Fixing the RATIO removes the letterbox instead of camouflaging it, and the
   contain safety net stays in place for any frame that is not square. */
.pdp-gallery__main { aspect-ratio: 1 / 1; background: var(--surface); }
.pdp-thumb { aspect-ratio: 1 / 1; background: var(--surface); }

/* ---- closing band ---------------------------------------------------------
   Two panels: copy on the deep-blue stage, the product's own photograph
   full-bleed down the right. Same idiom as the approved homepage statement
   section, and it needs no cutout — see ms_pdp_guarantee_image in copy.php. */
.pdp-close { padding: 0; overflow: hidden; }
/* The engine paints two stacked radial washes here so the band "is not a flat
   rectangle". With a photograph filling half the panel that job is done, and
   what is left is a gradient in UI for its own sake (§7.1). */
.pdp-close::before { content: none; }
.pdp-close__copy { padding: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .pdp-close { grid-template-columns: 1.1fr 1fr; gap: 0; align-items: stretch; }
  .pdp-close__copy { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
}
.pdp-close__media--bleed { justify-self: stretch; align-self: stretch; min-height: 100%; }
.pdp-close__media--bleed img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  filter: none;                      /* the cutout's drop shadow makes no sense on a bleed */
  border-radius: 0;
}
@media (max-width: 899px) {
  /* The engine hides the media below 900px. A full-bleed photograph is worth
     keeping on mobile — it just moves under the copy.
     SQUARE, not 16/10: the packshots are square, so a landscape box with
     object-fit:cover cropped 37% of the height and cut the base off the
     bottle. At 1/1 nothing is cropped and it matches the gallery above. */
  .pdp-close__media--bleed { display: block; aspect-ratio: 1 / 1; }
}

/* The secondary was invisible: the markup says .btn--onink but the only rule
   in the engine is .ms-btn--onink, so it fell through to the bare .btn — dark
   text on the navy panel. Named for the class that is actually in the DOM. */
.pdp-close .btn--onink {
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--brand-foreground) 42%, transparent);
  color: var(--brand-foreground);
}
.pdp-close .btn--onink:hover {
  background: color-mix(in oklab, var(--brand-foreground) 14%, transparent);
  border-color: color-mix(in oklab, var(--brand-foreground) 62%, transparent);
  color: var(--brand-foreground);
}

/* ---- one vertical rhythm for the whole page -------------------------------
   Reading down the PDP the axis was: chapters hard-left, compare CENTRED,
   reviews CENTRED, related hard-left, FAQ hard-left. Two centred blocks
   dropped into four left-aligned ones do not read as a deliberate change of
   rhythm — they read as misalignment. Everything hangs off the same left edge
   now. The comparison no longer needs a line here: its head is an editorial
   split in the engine, left-aligned by construction. */
.reviews__head { margin-inline: 0; text-align: left; }
.reviews__none { margin-inline: 0; text-align: left; }
.reviews__none .rform { margin-inline: 0; }
/* The sub-paragraph carries its OWN `margin: … auto`, so unsetting it on the
   parent left the copy hanging 105px right of the heading above it. */
.reviews__nonesub { margin-inline: 0; }

/* ---- below-fold rhythm -----------------------------------------------------
   The engine bands are padding-block: 6rem, which is right when a chapter
   carries a full composition. Four of ours carried ~150px of spec rows, so
   the page ran 6,577px for roughly 800px of content and every section read as
   its own page. Those four are now in the rail; what is left is real content,
   and it gets a rhythm that varies by weight instead of one 96px slab
   everywhere — related and compare are dense, faq and reviews lighter. */
.pdp-chapter { padding-block: var(--p-space-14); }
@media (min-width: 1024px) { .pdp-chapter { padding-block: var(--p-space-18); } }

/* Alternating tint bands were separating sections that belong to one document.
   One ground, hairlines for division — the same argument as the left edge. */
.pdp-chapter--compare, .pdp-chapter--reviews {
  background: var(--background);
  border-top: 1px solid var(--border);
}
.pdp-chapter--related { border-top: none; padding-top: 0; }   /* continues the hero */

/* ---- gallery: thumbs UNDER the stage on desktop ----------------------------
   The engine puts the rail on the left ("keeps the stage optically centred
   against the buy box") — right when the buy box was short. The rail now
   carries the concentration, the facts, the conflict and three disclosure
   panels, so it is ~950px against a 526px stage and the left column ended in
   430px of white.

   Moving the thumbs under the stage does two things at once: the product
   photograph goes from 526 to 612px square (+16% on the single most
   persuasive element on the page) and the column grows ~170px, which is most
   of the gap closed. Whatever remains is what a sticky gallery is FOR. */
@media (min-width: 900px) {
  .pdp-gallery--multi { grid-template-columns: minmax(0, 1fr); gap: var(--p-space-3); }
  .pdp-gallery--multi .pdp-gallery__thumbs { order: 0; flex-direction: row; overflow-x: auto; max-height: none; }
  .pdp-gallery--multi .pdp-thumb { flex: 0 0 4.5rem; width: 4.5rem; }
}

/* ---- below-fold measures ---------------------------------------------------
   Both of these were narrow blocks hard-left in a 1280px band, so the section
   read as half-empty rather than deliberately measured. */

/* The comparison used to be capped at 64rem and hard-left in a 1280px band,
   which left the right third of the section empty. The engine tray now takes
   the full measure, so there is nothing to override here — the cap is gone
   rather than raised. */

/* The empty review state is a narrow form in a wide band. Two attempts at a
   two-column layout both failed the same way: the engine renders eyebrow,
   heading, subtitle and form as four FLAT SIBLINGS, so any grid that spans
   the form beside the other three either stretches them down its height or
   reorders them under it. Fixing that properly means changing the engine's
   markup for every vertical, which this page does not justify. The form just
   gets a wider measure instead — an honest column, not a broken grid. */
.pdp-chapter--reviews .reviews__none { max-width: 52rem; }
.pdp-chapter--reviews .reviews__none .rform { max-width: 42rem; }

/* ===========================================================================
   THE SELL
   Description, benefits, ingredient education, numbered steps. The page had
   none of this: post_content was written on all 23 SKUs and never rendered,
   _ms_highlights was empty everywhere, and the named actives were printed
   without a word on what they do.
   =========================================================================== */

/* THE LEDE AND THE RAIL'S BENEFIT OVERRIDE BOTH GO.
 *
 * `.pdp-lede` styled the description where it used to open the buy rail; the
 * description is an accordion now and `.pdp-panel__p` carries it. The catalogue
 * coverage gate caught this one on deploy — the rule was still in the bundle
 * with nothing rendering it.
 *
 * `.pdp-benefits--rail` was this vertical resetting the engine's 2-up bordered
 * chips back to a plain tick list. The argument was right and it is now the
 * ENGINE's default, so the override is not just dead — keeping it would be the
 * vertical re-implementing an engine law, which is how the same declaration
 * ends up drawn twice from two layers. Deleted rather than re-pointed.
 *
 * The gate did not flag this second one: it works on class FAMILIES, and
 * `pdp-benefits` is still catalogued through the engine's own rule, so a dead
 * MODIFIER on a live family is invisible to it. Worth knowing.
 */

/* ---- numbered application steps -------------------------------------------- */
.pdp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--p-space-3); counter-reset: none; }
.pdp-steps li { display: flex; gap: var(--p-space-3); align-items: flex-start; font-size: var(--p-text-14); line-height: 1.5; color: var(--ink-2); }
.pdp-steps__n {
  flex: 0 0 auto; min-width: 1.5rem; font-size: var(--p-text-11); letter-spacing: var(--p-tracking-8);
  color: var(--brand-hover); padding-top: 0.15rem;
}

/* ---- what's inside ---------------------------------------------------------
   Card-per-ingredient, the shape rhode/ILIA/Seed all converge on, because a
   reader scans for the one ingredient they came to check rather than reading
   the set. auto-fit so two actives make two wide cards, not two and a hole. */
.pdp-chapter--inside { border-top: 1px solid var(--border); }
.pdp-inside__head { max-width: 46rem; margin-bottom: var(--p-space-8); }
.pdp-inside__h {
  margin: var(--p-space-2) 0 0; font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 600;
  letter-spacing: var(--p-tracking-n20); line-height: 1.12; text-wrap: balance;
}
.pdp-inside__sub { margin: var(--p-space-3) 0 0; font-size: var(--p-text-16); line-height: 1.55; color: var(--ink-2); }
/* Authored prose, so the `em` cannot carry a class — this one restates the
   device rather than composing `.wit`. It is the documented exception. */
.pdp-inside__sub em { font-family: var(--font-display, 'Helvetica Neue', Arial, sans-serif); font-style: italic; color: var(--brand); }

.pdp-inside {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--p-space-4);
}
.pdp-ing {
  padding: var(--p-space-4-5) var(--p-space-5);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--elevation-card);
}
.pdp-ing__role { margin: 0; font-family: var(--font-mono); font-size: var(--p-text-10); letter-spacing: var(--p-tracking-6); color: var(--ink-3); }
.pdp-ing__name {
  margin: var(--p-space-1-5) 0 0; font-size: var(--p-text-16); font-weight: 600; letter-spacing: var(--p-tracking-n10);
  color: var(--foreground); display: flex; align-items: baseline; gap: var(--p-space-2); flex-wrap: wrap;
}
.pdp-ing__dose {
  font-size: var(--p-text-12); font-weight: 400; color: var(--brand);
  font-variant-numeric: tabular-nums;
  padding: var(--p-space-0-5) 0.4375rem; border-radius: var(--radius-sm);
  background: var(--brand-muted);
}
.pdp-ing__blurb { margin: var(--p-space-2) 0 0; font-size: var(--p-text-14); line-height: 1.55; color: var(--ink-2); }

.pdp-inside__note {
  margin: var(--p-space-7) 0 0; max-width: 52ch;
  font-size: var(--p-text-13); line-height: 1.55; color: var(--ink-3);
  padding-left: var(--p-space-3-5); border-left: 2px solid var(--border);
}

/* ===========================================================================
   THE BEFORE / AFTER CHAPTER
   Renderer + honesty rules: verticals/skincare/inc/results.php

   THE SEAM IS THE SIGNATURE. Two photographs meet on a hard 2px cupric rule —
   the dilution ramp's own hard-edged band (§8: "stepped bands, hard edges" is
   the brand's ONLY decorative device) doing structural work as the join of the
   comparison. No slider handle, no gradient fade, no cross-dissolve: a second
   decorative device would cost the first one its meaning, and a soft edge on a
   before/after is the visual grammar of a claim being blurred.

   NO SHADOW ON THE PAIR. Cards here default to a border and no shadow (§7.5),
   and a drop shadow under a photograph reads as a sticker laid on the page
   rather than a window cut into it.
   =========================================================================== */

.pdp-chapter--results { border-top: 1px solid var(--border); }

/* ---- composition ----------------------------------------------------------
   --single is an editorial split: the argument on the left, the evidence on
   the right. It exists because a lone pair under a full-width heading left
   ~590px of the 1328px axis empty at 1440 — measured in the harness, not
   guessed — and a stranded card is the difference between a page that was
   composed and a page that was assembled.

   The columns are 5:6, not 1:1. The evidence gets the larger share because it
   is the focal element of the chapter; equal columns would say the heading and
   the photographs matter equally, which is not what this section is for. */
.pdp-ba__layout--grid   { display: block; }
.pdp-ba__layout--single { display: block; }

@media (min-width: 1024px) {
  .pdp-ba__layout--single {
    display: grid; grid-template-columns: 5fr 6fr;
    /* Column gap only. A row gap here would stack on the caveat's own margin
       and open ~88px between the claim and the sentence that follows it. */
    column-gap: var(--p-space-16); row-gap: 0;
    align-items: start;
    /* auto/1fr, not implicit rows. With implicit rows the body spanning both
       splits the height evenly and the caveat floats detached in the middle of
       the left column; sizing row 1 to the head parks it directly under the
       claim, where it reads as the next sentence. */
    grid-template-rows: auto 1fr;
  }
  /* The head stops being a banner and becomes a column, so it drops the
     bottom margin that was separating it from content now beside it. */
  .pdp-ba__layout--single .pdp-ba__head { max-width: none; margin-bottom: 0; }
  .pdp-ba__layout--single .pdp-ba__case:only-child { max-width: none; }

  /* The evidence column is taller than the argument column, which left ~340px
     of empty left column under the claim. The standing caveat fills it — and
     belongs there anyway: it qualifies the whole chapter, not one pair, so it
     reads as the closing sentence of the argument rather than a footnote
     stapled to a photograph. */
  .pdp-ba__layout--single .pdp-ba__head { grid-column: 1; grid-row: 1; }
  .pdp-ba__layout--single .pdp-ba__body { grid-column: 2; grid-row: 1 / span 2; }
  .pdp-ba__layout--single .pdp-ba__note {
    grid-column: 1; grid-row: 2; align-self: start;
    margin-top: var(--p-space-6);   /* it is now a paragraph in a column, not a chapter footer */
  }
}

/* ---- chapter head ---------------------------------------------------------
   Measure caps at 46rem to match .pdp-inside__head — the two chapters are
   adjacent and a different measure between them reads as a mistake. */
.pdp-ba__head { max-width: 46rem; margin-bottom: var(--p-space-9); }
.pdp-ba__h    { margin: var(--p-space-2) 0 0; }
.pdp-ba__sub  {
  margin: var(--p-space-3) 0 0; max-width: 58ch;
  font-size: var(--p-text-16); line-height: 1.55; color: var(--ink-2);
  text-wrap: pretty;
}

/* ---- the claim, restated verbatim -----------------------------------------
   Same key/value shape as .pdp-active in the buy rail, deliberately: this is
   the identical gesture (a mono micro-label over the one fact that matters)
   and reusing it ties the pictures to the approved `_ms_claim` string rather
   than to a paraphrase written here.

   NOT set in the display italic. Brand law §2 rations Fraunces italic to ONE
   appearance per view and the PDP spends it on the section leads. */
.pdp-ba__claimbox {
  margin: var(--p-space-6) 0 0; padding: var(--p-space-4) var(--p-space-5);
  border: 1px solid var(--border); border-left: 2px solid var(--brand);
  border-radius: var(--radius-sm);   /* §8: callouts are sm, cards are md */
  background: var(--brand-muted);
}
.pdp-ba__claimk {
  margin: 0; font-size: var(--p-text-12); text-transform: uppercase;
  color: var(--brand-hover);
}
.pdp-ba__claimv {
  margin: var(--p-space-2) 0 0; font-size: var(--p-text-17); line-height: 1.4;
  font-weight: 500; color: var(--foreground); text-wrap: pretty;
}

/* ---- the case list --------------------------------------------------------
   auto-fit means the count decides the layout with no PHP branch: one case
   fills the row, two sit side by side above ~60rem, four make a 2x2. The
   :only-child cap exists because a single pair across the full 75rem axis
   renders two 600px-wide faces — larger than the product photography above it,
   which inverts the page's hierarchy. */
.pdp-ba {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--p-space-10);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.pdp-ba__case:only-child { max-width: 46rem; }
.pdp-ba__fig { margin: 0; }

/* ---- the pair -------------------------------------------------------------
   The halves are flush and the cupric rule is a BORDER on the after half
   rather than a grid gutter — a gutter would show the page ground through the
   seam and the join would read as two separate pictures rather than one
   comparison. (Written without the obvious word followed by a colon on
   purpose: check-styles.sh greps declarations out of raw text, so prose in a
   comment can register as a literal and fail the gate. It did.)

   overflow:hidden on the pair clips both images to the outer radius, so the
   inner frames need no radius of their own — concentric by construction. */
.pdp-ba__pair {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.pdp-ba__half { position: relative; }
.pdp-ba__half--after { border-inline-start: 2px solid var(--brand); }

/* aspect-ratio on the FRAME, not the file: the pair holds its shape from first
   paint, so nothing below it moves as the two images decode. */
.pdp-ba__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
}

/* MICRO-LABEL SIZE IS 12px, NOT 11. Brand law §2 sets a hard 12px floor —
   "nothing ships smaller, anywhere" — and every label in this chapter was
   drafted at 11 because neighbouring components already are. Two of them
   carry a legal disclosure, and a disclosure set below the brand's own
   legibility floor is not clear and conspicuous in any sense that matters.
   Martian Mono is a wide face, so 12px here reads larger than 12px sans;
   the strings were re-measured at this size, not just bumped. */

/* ---- the state tags -------------------------------------------------------
   Live text over the photograph, never baked into it (§5 kill-list #14).

   The polarity is the argument in miniature: BEFORE wears the page's own cream
   and ink, AFTER wears cupric. The brand colour ARRIVES with the result. Both
   pairs are on the §1 approved-combinations table — ink on cream 16.23:1,
   cream on cupric 5.72:1 — so the labels stay AA on any photograph underneath
   without a scrim, a gradient or a blur, all three of which are banned. */
.pdp-ba__tag {
  position: absolute; inset-block-start: var(--p-space-3); inset-inline-start: var(--p-space-3);
  padding: var(--p-space-1) var(--p-space-3);
  border-radius: var(--radius-chip);
  font-size: var(--p-text-12); text-transform: uppercase; line-height: 1.6;
  background: var(--background); color: var(--foreground);
  /* The untreated frame is a pale cream sweep and the tag's ground is the
     page's own white, so without an edge the pill dissolves into the
     photograph it is labelling. The treated tag needs no border — cupric
     separates itself. */
  border: 1px solid var(--border-strong);
}
.pdp-ba__half--after .pdp-ba__tag {
  background: var(--brand); color: var(--brand-foreground); border-color: var(--brand);
}

/* ---- the receipt ----------------------------------------------------------
   Square corners and a hairline top rule, because this is the data layer and
   the data layer is a monograph row (§4.3: "the receipt has corners"). The
   concern reads as the row's subject, the mono string as its provenance. */
.pdp-ba__receipt {
  margin: var(--p-space-4) 0 0; padding-top: var(--p-space-3);
  border-top: 1px solid var(--border); border-radius: 0;
}
.pdp-ba__rrow {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--p-space-1) var(--p-space-4); justify-content: space-between;
}
.pdp-ba__concern {
  font-size: var(--p-text-15); font-weight: 600; color: var(--foreground);
  letter-spacing: var(--p-tracking-n10);
}
.pdp-ba__meta {
  font-size: var(--p-text-12); text-transform: uppercase; color: var(--ink-3);
}

/* ---- the standing caveat --------------------------------------------------
   Same treatment as .pdp-inside__note so the page's two honest footnotes look
   like one editorial voice rather than two apologies. */
.pdp-ba__note {
  margin: var(--p-space-9) 0 0; max-width: 60ch;
  font-size: var(--p-text-13); line-height: 1.55; color: var(--ink-3);
  padding-left: var(--p-space-3); border-left: 2px solid var(--border);
}

/* ---- stacked below 640 ----------------------------------------------------
   A portrait face crop side-by-side on a 375px screen gives each half ~163px,
   at which the pores and texture the comparison is ABOUT stop being visible —
   so the split turns horizontal and each frame gets the full column. The
   cupric rule follows it. */
@media (max-width: 639px) {
  .pdp-ba__pair { grid-template-columns: 1fr; }
  .pdp-ba__half--after { border-inline-start: 0; border-block-start: 2px solid var(--brand); }
  .pdp-ba__img { aspect-ratio: 4 / 3; }
}

/* ---- the source stamp -----------------------------------------------------
   NOT amber. The layering-conflict row above already settled this for the
   whole vertical: #7D4D05 reads visibly brown at small sizes and brown is the
   one hue this palette has been cleared of twice, so caution here is carried
   by a cupric rule plus the literal words — which also keeps colour from being
   the only indicator (WCAG 1.4.1).

   The ASYMMETRY is deliberate and is the honest way round. An illustration
   gets the loud bordered strip; a real panel gets the quiet brand wash. A
   disclosure you style more softly than your credential is a disclosure you
   are hiding, so the treatment scales with how much the reader needs it, not
   with how much we would enjoy them reading it. */
.pdp-ba__source {
  margin: var(--p-space-3) 0 0;
  padding: var(--p-space-2) var(--p-space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--p-text-12); text-transform: uppercase; line-height: 1.5;
}
.pdp-ba__source--illustration {
  border: 1px solid var(--border-strong); border-left: 3px solid var(--brand);
  background: var(--surface); color: var(--foreground);
}
.pdp-ba__source--study,
.pdp-ba__source--demo {
  border-left: 3px solid var(--brand);
  background: var(--brand-muted); color: var(--brand-hover);
}

/* The hoisted stamp speaks for the whole chapter, so it carries more weight
   than a per-pair one: full measure of the head column and a little more air
   above it. Same colours — the register does not change, only the scope. */
.pdp-ba__source--shared { margin-top: var(--p-space-5); }


/* ---- panel prose ------------------------------------------------------------
   The product description moved out of the buy rail and into the first
   accordion; it needs the same measure and leading it had there. */
.pdp-panel__p { margin: 0 0 var(--p-space-3); font-size: var(--p-text-15); line-height: 1.6; color: var(--ink-2); }
.pdp-panel__p:last-child { margin-bottom: 0; }

/* THE ACTIVE and the facts strip now share one panel, so the strip needs a
   rule above it rather than the section spacing it used to inherit. */
.pdp-panel__body .pdp-active + .pdp-facts {
  margin-top: var(--p-space-4); padding-top: var(--p-space-4);
  border-top: 1px solid var(--border);
}