/* Product detail — what the block conversion adds.
   The authored PDP rules stay in public/css/korjin/product.css, which is
   global. Tokens only, per tokens.css. */

/* ---- block flow ----------------------------------------------------------
   Blocks arrive as flat siblings in whatever order the merchant set. A
   wrapping flex column gives that order meaning: everything is full width and
   stacks, except chips, badges and assurances, which are auto width and so
   pair up on a line and wrap to the next. Same mechanic as the hero band. */

.pdp__panel {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  row-gap: var(--sp-4);
  column-gap: var(--sp-3);
}

.pdp__b {
  flex: 0 0 100%;
  /* Gap owns the rhythm now; the authored per-element margins would double it
     and would land in the wrong places once blocks are reordered. */
  margin: 0;
}

.pdp__b--inline {
  flex: 0 0 auto;
}

/* A caption heading introduces the run of chips under it, so it wants the air
   above rather than below. */
.pdp__b--label {
  margin-top: var(--sp-5);
}

/* ---- claim badges -------------------------------------------------------- */

/* One real, centred list on its own line (QA-11). `.pdp__b` makes it full
   width, so the assurance lines after it can never share the badges' row. */
.pdp__badges {
  display: flex;
  flex-wrap: wrap;
  /* Edge to edge, equal gaps between the seals (QA R2-04). */
  justify-content: space-between;
  align-items: center;
  /* A minimum only — space-between sets the real spacing. Kept small so the
     five seals fit one line down to a 320px phone. */
  gap: var(--sp-1);
  list-style: none;
  padding: var(--sp-2) 0;
  /* The seals size to this row's width (cqi below), not the viewport's.
     Lifted so the tooltips paint over the buy box above them. */
  container-type: inline-size;
  position: relative;
  z-index: 2;
}

.pdp__badge {
  position: relative;
  display: flex;
  line-height: 0;
}

.pdp__badge:focus-visible {
  outline: 1px solid var(--gold-line);
  outline-offset: var(--sp-1);
}

/* ---- seal tooltip (QA R2-05) ---------------------------------------------
   Name and one claim line, shown on hover, keyboard focus or tap. Inverse
   ground so it reads as an overlay in either theme. Centred over its seal,
   except the two at each end, which anchor to their outer edge so the tip
   never runs off a phone screen. */

.pdp__badge-tip {
  --tip-x: -50%;
  position: absolute;
  bottom: calc(100% + var(--sp-3));
  left: 50%;
  z-index: 1;
  width: max-content;
  max-width: 14rem;
  padding: var(--sp-2) var(--sp-3);
  border-top: 2px solid var(--gold-line);
  background: var(--ground-inverse);
  color: var(--ink-inverse);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--tip-x), 4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.pdp__badge-tip strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pdp__badge:nth-child(-n + 2) .pdp__badge-tip {
  --tip-x: 0;
  left: 0;
}

.pdp__badge:nth-last-child(-n + 2) .pdp__badge-tip {
  --tip-x: 0;
  left: auto;
  right: 0;
}

/* The pointer: a turned square tucked under the tip's bottom edge, on the
   seal's centre whichever way the tip is anchored. */
.pdp__badge::after {
  content: "";
  position: absolute;
  bottom: calc(100% + var(--sp-3) - 5px);
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--ground-inverse);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.pdp__badge:hover .pdp__badge-tip,
.pdp__badge:focus .pdp__badge-tip {
  opacity: 1;
  transform: translate(var(--tip-x), 0);
}

.pdp__badge:hover::after,
.pdp__badge:focus::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pdp__badge-tip {
    transform: translate(var(--tip-x), 0);
    transition: opacity var(--dur-fast) linear;
  }
}

/* The assurance lines under the seals are centred as a group (QA R2-04).
   They are separate auto-width blocks in the panel's wrapping row, so auto
   inline margins centre them whether they share a line or wrap onto two. */
.pdp__panel > .pdp__assurance {
  margin-inline: auto;
  text-align: center;
}

/* Normalised on HEIGHT, not a square box. These badges are seals with
   different silhouettes — circles, diamonds, a wide oval — and their source
   viewBoxes differ to match. A square box makes SVG letterbox the wide ones,
   so Non-GMO rendered visibly smaller than Vegan beside it.

   The artwork carries its own lettering, and at the 46px this ran at it was
   still too small to read (QA R2-05). It now grows with the row: 16.5% of
   the row's width, capped at 72px on the desktop buy box, never under 44px
   (below that the lettering is mush). The seals' widths add up to ~5.5× their
   height, so five still fit one line at every width. The plain 56px is the
   fallback for browsers without container units. */
.pdp__badge-icon {
  height: 56px;
  height: clamp(44px, 16.5cqi, 72px);
  width: auto;
  color: var(--gold-line);
}

/* ---- chips --------------------------------------------------------------- */

.pdp__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35em 0.7em;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
}

/* The benefit marks are detailed seals, 36px in the benefits list; below
   ~24px their inner drawing turns to mush, so the chip grows a little rather
   than shrinking the mark (QA-12). */
.pdp__chip-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gold-line);
}

.pdp__chip:has(.pdp__chip-icon) {
  padding-left: 0.45em;
}

/* ---- variant picker ------------------------------------------------------ */

.buy__variant-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--sp-3);
}

.buy__variant {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rule);
  text-align: center;
}

.buy__variant[aria-checked="true"] {
  border-color: var(--gold-line);
  background: var(--ground-raised);
}

/* The lead pack is the decision; anything after it is an alternative, and
   Justin asked for it as "a smaller line item below without needing to be
   highlighted". So the row stops being an even grid the moment there is an
   alternative: the lead keeps its card, the rest become full-width quiet lines
   under it. Still radios — selectable, focusable, announced — only lighter.

   :has() rather than a class on the row, so the layout follows from what is
   actually rendered and cannot fall out of step with the markup. */
.buy__variant-row:has(.buy__variant--alt) {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.buy__variant--alt {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border: 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  color: var(--ink-muted);
}

.buy__variant--alt[aria-checked="true"] {
  background: none;
  border-top-color: var(--gold-line);
  color: var(--ink);
}

/* One-time keeps its card — Justin asked for it to stay, only to stop being the
   default. The selected state already carries the hierarchy, so no extra
   treatment: a dashed or faded alternative reads as unfinished or unavailable,
   which is the opposite of "kept". */

/* Unavailable is stated, not hidden — a shopper who cannot buy the 10-pack
   should see that it exists and is out, not wonder where it went. */
.buy__variant[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--rule-strong);
}

.pdp__cta[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}