/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: page.
 * ae526aacc76ed11ddcda6b403c1ce06c509c0308a782ce4d561cd4d1ce9526d8  components/product-info-main.css
 * 9946025d0dbbe714d586ee910f0d5d2cf50142e045936d9a1036693c37d37fee  components/product-media.css
 * 382b0a036232481b55d91795080f3c9f562da2ed71abc1f4da9d3683df380376  pdp/pdp-base.css
 * fcc14f500c3ee13db117450e7920dbda6695c8d39b7d2d2502a4da28483618a0  pdp/pdp-b.css
 * e8523af274a3f4edbe1dacb2fb0bbd56cb6fafeb37cc1e388366249ffd8d8c2f  components/maldito-graphic.css
 * 1a6945f45ac0a4187a1e99ca7b6e448c79007e4e90e85aad5afd563ac0360a2d  pdp/maldito.css
 * c0e22d4526361a2d196a312dbd1f6e7bb60a6dd5af0406fc335d6d14de9d2fe8  pages.css
 */
@layer components {
.dv-pdp__info { display: grid; gap: var(--s-sp-4); align-content: start; }
.dv-pdp__act { display: flex; flex-wrap: wrap; gap: var(--s-sp-2); align-items: center; padding-block: var(--s-sp-3); }
.dv-pdp__act .dv-btn { flex: 1; min-width: var(--p-160); }
.dv-pdp__links { display: flex; gap: var(--s-sp-5); }
.dv-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.dv-facts > div { display: grid; gap: var(--p-2); padding: var(--s-sp-3) var(--s-sp-3) var(--s-sp-3) 0; }
.dv-facts dt { font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); }
.dv-facts dd { margin: 0; font: var(--t-body); }

.dv-gallery { background: var(--c-cover-well); border-radius: var(--s-radius); aspect-ratio: 1; display: grid; place-items: center; }
.dv-gallery img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 768px) { .dv-gallery { position: sticky; inset-block-start: calc(var(--c-promo-h) + var(--c-header-row) + var(--s-sp-4)); } }
.dv-gallery .dv-nocover { padding: var(--s-sp-6); }
.dv-gallery .dv-nocover img { width: auto; height: var(--p-48); }
.dv-gallery .dv-nocover__name { font: var(--t-display); -webkit-line-clamp: 5; }

/* =========================================================================
   PDP proposals - shared pieces (prefix pdp-). Tokens only (scan.mjs).
   Owner rules applied here:
   - enclosed SURFACES (tint ground, no border) instead of loose text, buttons and lines
   - LINE BUDGET: (1) the section rule with the pink notch (.dv-ledger-head), (2) a hairline BETWEEN ledger rows
     (row + row, never after the last), (3) control borders (stepper, secondary button, preset, checkbox).
     Nothing else draws a line.
   - every control: hover, focus-visible (global ring), active
   ========================================================================= */
@layer components {
  .pdp-main { padding-block-end: var(--s-sp-8); }
  .pdp-gap { display: grid; gap: var(--s-sp-5); }

  /* ---- Surface: the grouping device ---------------------------------------- */
  .pdp-surface { background: var(--s-surface-tint); border-radius: var(--s-radius); padding: var(--s-sp-4); }
  @media (min-width: 768px) { .pdp-surface { padding: var(--s-sp-5); } }
  .pdp-surface__title { font: var(--t-heading-sm); }

  /* ---- Photo well + white plate behind the box art (stays) ------------------- */
  .pdp-well { display: grid; place-items: center; padding: var(--s-sp-3); background: var(--s-surface-tint); border-radius: var(--s-radius); }
  .pdp-plate { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: var(--s-sp-4); background: var(--s-surface); border-radius: var(--s-radius); }
  .pdp-plate > img { width: 100%; height: 100%; object-fit: contain; }
  .pdp-well.is-mini { padding: var(--p-4); }
  .pdp-well.is-mini .pdp-plate { padding: var(--p-4); }


  .pdp-main .dv-badge.is-out { box-shadow: none; background: var(--c-chip-out); color: var(--c-badge-fg); }
  .dv-qty__input:hover, .dv-qty__input:active { background: var(--s-surface-tint); }

  /* ---- Identity: SKU line + name. Maldito variant = black block (?brand=maldito) ---- */
  .pdp-id { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-sp-2); align-content: start; min-width: 0; }
  .pdp-id__name { font: var(--t-display); letter-spacing: var(--p-track-display); text-wrap: balance; }
  .pdp-id__sku { font: var(--t-small); display: flex; flex-wrap: wrap; gap: var(--p-2) var(--s-sp-4); }
  .pdp-id__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-2); }
  .pdp-id .dv-maldito-pill { justify-self: start; }

  /* ---- Price ------------------------------------------------------------------ */
  .pdp-price { display: grid; gap: var(--s-sp-1); }
  .pdp-price__label { font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); }
  .pdp-price__now { font: var(--t-price-pdp); font-variant-numeric: tabular-nums; letter-spacing: var(--p-track-display); }
  .pdp-price__group { font: var(--t-small); color: var(--s-text-muted); }
  .pdp-ph { font: var(--t-small); color: var(--s-text-muted); }
  .pdp-hint { font: var(--t-small); color: var(--s-text-muted); }

  /* ---- Controls: text link, preset chip, checkbox ------------------------------- */
  .pdp-link { display: inline-flex; align-items: center; gap: var(--s-sp-1); min-height: var(--s-target); padding-inline: var(--s-sp-2); background: transparent; border: 0; border-radius: var(--s-radius); color: var(--s-text); font: var(--t-small); text-decoration: underline var(--s-rule-w) var(--s-text-muted); text-underline-offset: var(--p-4); transition: background-color var(--s-dur) var(--s-ease), transform var(--s-dur) var(--s-ease); }
  .pdp-link:hover { background: var(--c-hover-tint); text-decoration-color: var(--s-accent); text-decoration-thickness: var(--s-rule-w-2); }
  .pdp-link:active { transform: translateY(var(--p-1)); background: var(--c-hover-tint); }

  /* ---- Specs: compact definition list, no lines ------------------------------------ */
  .pdp-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sp-4) var(--s-sp-5); margin: 0; }
  .pdp-specs > div { display: grid; gap: var(--p-2); align-content: start; min-width: 0; }
  .pdp-specs dt { font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); }
  .pdp-specs dd { margin: 0; font: var(--t-body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .pdp-specs.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 1024px) { .pdp-specs.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pdp-specs.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 768px) { .pdp-specs.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---- BGG stats panel: Rating hexagon, Weight, Owned + attribution ------------------- */
  .pdp-bgg { display: grid; gap: var(--s-sp-3); }
  .pdp-bgg__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sp-3); margin: 0; align-items: end; }
  .pdp-bgg__stat { display: grid; justify-items: start; gap: var(--s-sp-1); align-content: end; }
  .pdp-bgg__stat dt { order: 2; font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); }
  .pdp-bgg__stat dd { order: 1; margin: 0; font: var(--t-price-lead); font-variant-numeric: tabular-nums; }
  .pdp-bgg__stat dd small { font: var(--t-small); color: var(--s-text-muted); }
  .pdp-bgg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-sp-2) var(--s-sp-4); margin-block-start: var(--s-sp-1); }

  .pdp-bgg__empty { font: var(--t-small); color: var(--s-text-muted); max-width: var(--p-measure-body); }

  /* ---- Ledger rows (cross-sell A and the also-bought list) ------------------------------ */
  .pdp-ledger { container: pdpledger / inline-size; display: grid; margin: 0; padding: 0; list-style: none; }
  .pdp-xrow { display: grid; grid-template-columns: var(--p-56) minmax(0, 1fr); grid-template-areas: "cover main" "why why" "buy buy"; gap: var(--s-sp-2) var(--s-sp-3); align-items: center; padding-block: var(--s-sp-3); }
  .pdp-xrow + .pdp-xrow { border-block-start: var(--s-rule-w) solid var(--s-rule); }
  .pdp-xrow__cover { grid-area: cover; display: block; width: var(--p-56); }
  .pdp-xrow__cover .pdp-well { padding: var(--p-4); }
  .pdp-xrow__main { grid-area: main; display: grid; gap: var(--p-2); min-width: 0; }
  .pdp-xrow__name { font: var(--t-heading-sm); }
  .pdp-xrow__name a { display: inline-block; min-height: var(--s-target); padding-block: var(--s-hit); margin-block: calc(-1 * var(--s-hit)); text-decoration: none; }
  .pdp-xrow__name a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
  .pdp-xrow__name a:active { color: var(--dv-btn-hover); }
  .pdp-xrow__why { grid-area: why; }
  .pdp-xrow__buy { grid-area: buy; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-2) var(--s-sp-3); }
  .pdp-xrow__price { font: var(--t-price); font-variant-numeric: tabular-nums; margin-inline-start: auto; }
  @container pdpledger (min-width: 640px) {
    .pdp-xrow { grid-template-columns: var(--p-56) minmax(0, 1fr) minmax(0, var(--p-240)) var(--p-80) auto; grid-template-areas: "cover main why price buy"; gap: var(--s-sp-5); }
    .pdp-xrow__buy { display: contents; }
    .pdp-xrow__price { grid-area: price; text-align: end; margin: 0; }
    .pdp-xrow__act { grid-area: buy; display: flex; align-items: center; gap: var(--s-sp-2); }
  }
  .pdp-xrow__act { display: flex; align-items: center; gap: var(--s-sp-2); }
  .pdp-xrow__act .dv-btn { min-width: var(--p-96); }  /* one Add width in every row: the Maldito label is uppercase and tracked, so without this the auto buy track differs per row and the price and stepper columns drift by 5 px */

  /* Reason badge: flame, count only (O-8). Reuses .dv-reason; this only keeps it on one line. */
  .pdp-xrow__why .dv-reason, .pdp-xtile .dv-reason { white-space: normal; min-height: var(--p-24); }

  /* ---- Rail tile (B) ---------------------------------------------------------------- */
  .pdp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, var(--p-280)); gap: var(--s-sp-3); overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: var(--s-sp-2); list-style: none; margin: 0; padding-inline: 0; }
  .pdp-rail > * { scroll-snap-align: start; }
  .pdp-xtile__brand { margin: 0; }
  .pdp-xtile .pdp-xtile__brand .dv-brandtag { height: auto; padding-inline: 0; }
  .pdp-xtile .pdp-xtile__brand .dv-brandtag.is-devir img { height: var(--p-24); width: auto; }
  .pdp-rail-nav { display: flex; justify-content: flex-end; gap: var(--s-sp-2); margin-block-end: var(--s-sp-2); }
  .pdp-rail-nav[hidden] { display: none; }
  .pdp-rail-nav__btn { display: inline-grid; place-items: center; width: var(--s-target); height: var(--s-target); padding: 0; border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: transparent; color: var(--s-text); cursor: pointer; }
  .pdp-rail-nav__btn:hover:not(:disabled) { background: var(--c-hover-tint); }
  .pdp-rail-nav__btn:disabled { color: var(--s-text-muted); cursor: default; }
  /* Three tiles and a half: the cut fifth tile reads as "scroll", and the thin track shows the rail moves (a 15 px sliver with no cue hid it from pointer users). */
  @media (min-width: 768px) { .pdp-rail { grid-auto-columns: calc((100% - 3 * var(--s-sp-4)) / 3.5); gap: var(--s-sp-4); scrollbar-width: thin; scrollbar-color: var(--s-text-muted) transparent; } }
  .pdp-rail.is-3 { }
  .pdp-xtile { display: grid; gap: var(--s-sp-3); align-content: start; min-width: 0; padding: var(--s-sp-3); background: var(--s-surface-tint); border-radius: var(--s-radius); grid-template-rows: auto auto auto 1fr auto; }
  .pdp-xtile .pdp-well { background: var(--c-cover-well); padding: var(--s-sp-2); }
  .pdp-xtile__body { display: grid; gap: var(--p-2); align-content: start; }
  .pdp-xtile__name { font: var(--t-heading-sm); min-height: 2lh; }
  .pdp-xtile__name a { display: inline-block; min-height: var(--s-target); padding-block: var(--s-hit); margin-block: calc(-1 * var(--s-hit)); text-decoration: none; }
  .pdp-xtile__name a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
  .pdp-xtile__name a:active { color: var(--dv-btn-hover); }
  .pdp-xtile__foot { display: grid; gap: var(--s-sp-2); }
  .pdp-xtile__price { font: var(--t-price); font-variant-numeric: tabular-nums; }

  /* ---- Checkbox ------------------------------------------------------------------------ */
  .pdp-pick { position: relative; display: inline-grid; place-items: center; width: var(--s-target); height: var(--s-target); flex: none; cursor: pointer; }
  .pdp-pick > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .pdp-pick__box { display: grid; place-items: center; width: var(--p-24); height: var(--p-24); border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-text-on-dark); transition: background-color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease), transform var(--s-dur) var(--s-ease); }
  .pdp-pick__box .dv-icon { opacity: 0; width: var(--p-16); height: var(--p-16); }
  .pdp-pick:hover .pdp-pick__box { border-color: var(--s-text); }
  .pdp-pick:active .pdp-pick__box { transform: translateY(var(--p-1)); background: var(--s-surface-tint); }
  .pdp-pick > input:checked + .pdp-pick__box { background: var(--s-surface-navy); border-color: var(--s-surface-navy); }
  .pdp-pick > input:checked + .pdp-pick__box .dv-icon { opacity: 1; }
  .pdp-pick > input:focus-visible + .pdp-pick__box { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: var(--s-ring-offset); }
  .pdp-pick:hover > input:checked + .pdp-pick__box { background: var(--p-blue-700); border-color: var(--p-blue-700); }

  /* ---- Layout switch A / B / C (round 4, review control) and the missing-product page ------------------------------ */
  .pdp-switchbar { display: flex; justify-content: flex-end; padding-block-end: var(--s-sp-2); }
  .pdp-switch { display: inline-flex; align-items: center; gap: var(--s-sp-3); }
  .pdp-switch__lbl { font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); }
  .pdp-switch__list { display: inline-flex; margin: 0; padding: 0; border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); overflow: hidden; }
  .pdp-switch__opt { display: inline-flex; align-items: center; gap: var(--s-sp-2); min-height: var(--s-target); min-width: var(--s-target); padding-inline: var(--s-sp-3); color: var(--s-text); text-decoration: none; font: var(--t-small); background: var(--s-surface); transition: background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease); }
  .pdp-switch__opt b { font: var(--t-heading-sm); }
  .pdp-switch__list li + li .pdp-switch__opt { border-inline-start: var(--s-rule-w) solid var(--s-edge); }
  .pdp-switch__opt:hover { background: var(--s-surface-tint); }
  .pdp-switch__opt:active { transform: translateY(var(--p-1)); }
  .pdp-switch__opt[aria-current="page"] { background: var(--c-btn-bg); color: var(--c-btn-fg); }
  .pdp-switch__opt:focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: calc(-1 * var(--s-ring-w)); }
  @media (max-width: 767px) { .pdp-switch__opt span { display: none; } .pdp-switch__lbl { display: none; } }
  .pdp-specs__gap { grid-column: 1 / -1; }
  .pdp-specs__gap dd { color: var(--s-text-muted); font: var(--t-small); }
  .pdp-missing { display: grid; gap: var(--s-sp-4); padding-block: var(--s-sp-8); justify-items: start; }

  /* ---- Dev note for placeholders ---------------------------------------------------------- */
  .pdp-note { font: var(--t-label); color: var(--s-text-muted); }
}

/* PDP B - Editorial. Cover stage on a tint band, title set big, navy specs strip, slim buy band (fixed bar on phones),
   story + details in two asymmetric columns, cross-sell as a rail of enclosed tiles. */
@layer components {
  .pdp-band { background: var(--s-surface-tint); padding-block: var(--s-sp-4) var(--s-sp-6); }
  .pdp-b__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-sp-5); align-items: center; }
  .pdp-b__title { display: grid; gap: var(--s-sp-4); align-content: center; min-width: 0; order: 2; }
  .pdp-b__title .pdp-id__name { font: 900 clamp(var(--p-56), calc(5vw + var(--p-24)), var(--p-96)) / 0.95 var(--s-font); letter-spacing: var(--p-track-display); overflow-wrap: normal; font-size: calc(clamp(var(--p-56), calc(5vw + var(--p-24)), var(--p-96)) * var(--mg-fit, 1)); }
  .pdp-b__title .pdp-id__name.is-fit-ink { font-size: calc(clamp(var(--p-24), calc(5vw + var(--p-24)), var(--p-96)) * var(--mg-fit, 1)); }
  .pdp-b__lead { font: var(--t-lead); max-width: var(--p-480); }
  .pdp-b__award { display: inline-flex; align-items: center; gap: var(--s-sp-2); justify-self: start; min-height: var(--p-32); padding-inline: var(--s-sp-3); background: var(--p-chip-orange); color: var(--p-navy-900); border-radius: var(--s-radius); font: var(--t-small); }
  .pdp-b__cover { order: 1; }
  @media (min-width: 768px) { .pdp-b__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-sp-7); } .pdp-b__title { order: 1; } .pdp-b__cover { order: 2; } .pdp-b__cover .pdp-plate { aspect-ratio: 1; } }
  .pdp-band .pdp-well { background: var(--c-cover-well); }
  .pdp-band .pdp-well .pdp-plate, .pdp-xtile .pdp-well .pdp-plate { background: light-dark(var(--s-surface), transparent); }   /* the well is the one light plate in both modes: no dark mat between it and the cover */
  .pdp-b__cover .pdp-plate { aspect-ratio: 1; max-width: var(--p-560); margin-inline: auto; }

  /* specs strip */
  .pdp-strip { background: var(--s-surface-navy); color: var(--s-text-on-dark); padding-block: var(--s-sp-5); }
  .pdp-strip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sp-5) var(--s-sp-4); margin: 0; }
  .pdp-strip__list > div { display: grid; gap: var(--s-sp-1); }
  .pdp-strip__list dt { order: 2; font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-on-dark-muted); }
  .pdp-strip__list dd { order: 1; margin: 0; font: var(--t-title); font-variant-numeric: tabular-nums; letter-spacing: var(--p-track-display); }
  .pdp-strip__list dd small { font: var(--t-small); color: var(--s-text-on-dark-muted); }
  @media (min-width: 768px) { .pdp-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pdp-strip__list dd { font: var(--t-numeral); letter-spacing: var(--p-track-display); } }

  /* buy bar: slim band on desktop, fixed bar on phones */
  .pdp-bar { background: var(--s-surface-tint); }
  .pdp-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-3) var(--s-sp-6); padding-block: var(--s-sp-4); }
  .pdp-bar__price { display: grid; gap: var(--p-2); }
  .pdp-bar__price .pdp-price__now { font: var(--t-price-lead); }
  .pdp-bar__meta { display: grid; gap: var(--s-sp-1); font: var(--t-small); color: var(--s-text-muted); margin-inline-end: auto; }
  .pdp-bar__act { display: flex; align-items: center; gap: var(--s-sp-2); }
  .pdp-bar__stock { display: none; }
  @media (min-width: 768px) { .pdp-bar__stock { display: inline-flex; } .pdp-bar__in { min-height: var(--p-96); padding-block: var(--s-sp-3); } }
  @media (max-width: 767px) {
    .pdp-main { padding-block-end: var(--p-96); }
    .pdp-bar { position: fixed; inset-inline: 0; inset-block-end: var(--revbar-h, 0px); z-index: 30;   /* sits above the review bar (z 80, fixed at the bottom), never under it */ background: var(--s-surface-navy); color: var(--s-text-on-dark); }
    .pdp-bar :focus-visible { outline-color: var(--s-focus-on-dark); }
    .pdp-bar [data-comp="qty-stepper"] :focus-visible { outline-color: var(--s-focus-on-light); outline-offset: calc(-1 * var(--s-ring-w)); }
    .pdp-bar .pdp-price__label, .pdp-bar__meta, .pdp-bar__hint { display: none; }
    .pdp-bar__in { flex-wrap: nowrap; justify-content: space-between; gap: var(--s-sp-2); padding-block: var(--s-sp-2); }
    .pdp-bar .dv-btn { background: var(--c-btn-inverse-bg); color: var(--c-btn-inverse-fg); border-color: var(--c-btn-inverse-bg); padding-inline: var(--s-sp-3); }
    .pdp-bar .dv-btn.is-secondary:hover { background: var(--s-text); border-color: var(--s-text); color: var(--s-surface); }
    .pdp-bar .pdp-price__now { font: var(--t-price); }
  }
  /* 359 px and under: price and controls do not fit on one line, so the bar takes two (price, then stepper and Add filling the width) */
  @media (max-width: 359px) {
    .pdp-main { padding-block-end: calc(var(--p-96) + var(--p-48)); }
    .pdp-bar__in { flex-wrap: wrap; justify-content: flex-start; }
    .pdp-bar__act { flex: 1 1 100%; }
    .pdp-bar__act .dv-btn { flex: 1; min-width: 0; }
  }

  /* story + details, 7:5 */
  .pdp-b__story { display: grid; gap: var(--s-sp-6); padding-block: var(--s-sp-6) var(--s-sp-5); align-items: start; }
  @media (min-width: 768px) { .pdp-b__story { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-sp-8); padding-block: var(--s-sp-8) var(--s-sp-6); } }
  .pdp-b__prose { display: grid; gap: var(--s-sp-4); max-width: var(--p-measure-body); }
  .pdp-b__prose p:first-child { font: var(--t-lead); }
  .pdp-b__details { display: grid; gap: var(--s-sp-3); }
  .pdp-b__details .pdp-surface { display: grid; gap: var(--s-sp-4); }
  .pdp-b__details .pdp-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-b__x { padding-block-end: var(--s-sp-6); }
}

/* Maldito graphic language, Direction 1 "Manual-faithful" (MG manual p.15-22, owner-approved proposal, Diana's red rule). BRAND-RULES section 10.
   Light = the manual's grey ground with red slabs; dark = black ground with red and white slabs. Both come from the --mg-* roles in tokens.css (light-dark()),
   scoped to <main data-brand="maldito">, body[data-brand="maldito"], [data-surface="maldito"] and the Maldito card surfaces. Devir header, footer and overlays are carved out.
   Red budget (Diana: red must not blind): at most TWO large red slabs per page; cards and rows use black/white buttons that turn red on hover only; red TEXT only in display
   type of 52 px or more (everything else on red is white, 4.81:1). Shapes are clip-path polygons on pseudo-layers with the manual's own geometry (tokens.css --p-shape-*);
   the hard shadow is the same polygon on an offset layer: no blur, no gradient, no filter. The wordmark and its tab take no shape, shadow or effect (manual p.15).
   Motion: transform/opacity/clip-path only, none for reduced motion. */
/* Unwrapped on purpose: imported with layer(components), so these rules sit directly in the components layer and beat the nested-layer pdp/*.css (same reason as polish-m2.css). */
  /* ---- Display faces: opt-in per heading (class), 24 px or more. Never product names in cards, never header or footer. ---- */
  .mg-display { font: var(--t-mg-display); letter-spacing: var(--p-track-comic); text-wrap: balance; }
  .mg-title { font: var(--t-mg-title); letter-spacing: var(--p-track-comic); text-wrap: balance; }
  .mg-display.is-xl { font-family: var(--p-font-comic); font-weight: var(--p-weight-regular); font-size: clamp(var(--p-52), calc(var(--p-24) + 5.4vw), var(--p-96)); line-height: 0.98; letter-spacing: var(--p-track-comic); }
  .mg-red-ink { color: var(--mg-red); }   /* display type of 52 px or more only (qa/maldito.mjs rule) */

  /* ---- On-red context: a red slab re-declares ink, buttons and ring so nothing inherits across the ground change. ---- */
  .mg-on-red, .mg-band, body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy, .pdp-bar) {
    color: var(--mg-on-red); --s-text: var(--mg-on-red); --s-text-muted: var(--mg-on-red); --s-rule: var(--p-white-a24); --s-edge: var(--mg-on-red); --s-accent: var(--mg-on-red); --s-surface: var(--p-black-950); --s-surface-tint: var(--p-black-950);
    --s-focus-on-light: var(--mg-on-red); --c-btn-bg: var(--p-white); --c-btn-fg: var(--p-black-950); --c-btn-hover-bg: var(--p-black-950); --c-btn-hover-fg: var(--p-white); --m-btn-hover: var(--p-black-950); --m-hover-bg: var(--p-black-a24);
    --c-btn-disabled-bg: var(--p-mg-dis-bg-light); --c-btn-disabled-fg: var(--p-mg-dis-fg-light); --c-hover-tint: var(--p-black-a24); --c-shape-shadow: var(--p-black-950); --c-shape-fill: var(--p-white); --c-shape-ink: var(--p-black-950);
  }
  /* The stepper on red is a white control with a black figure (it is never a red-on-white label). */
  :is(.mg-on-red, .mg-band, body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy, .pdp-bar)) [data-comp="qty-stepper"] { --s-text: var(--p-black-950); --s-surface: var(--p-white); --s-edge: var(--p-white); --c-hover-tint: var(--p-mg-pale-red); --s-focus-on-light: var(--p-black-950); --s-rule: var(--p-black-950); background: var(--p-white); color: var(--p-black-950); border-color: var(--p-white); }

  /* ---- Slab: the manual's shape painted on two layers behind the content (::before = hard shadow, ::after = fill). The box stays a rectangle, so text, hit area and focus ring are never clipped. ---- */
  .mg-sl { position: relative; isolation: isolate; --sl-fill: var(--mg-red); --sl-shade: var(--mg-hard); --sl-shape: var(--p-shape-main); --sl-dx: var(--p-shape-off-lg-x); --sl-dy: var(--p-shape-off-lg-y); }
  .mg-sl::before, .mg-sl::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--sl-shape); pointer-events: none; }
  .mg-sl::before { background: var(--sl-shade); transform: translate(var(--sl-dx), var(--sl-dy)); }
  .mg-sl::after { background: var(--sl-fill); }
  .mg-sl.is-flat::before { display: none; }
  .mg-sl.is-md { --sl-dx: var(--p-shape-off-md-x); --sl-dy: var(--p-shape-off-md-y); }

  /* Eyes pattern (manual p.20, second pattern): the SVG's alpha is the mask, the colour is a token. Doubled so it reads at the manual's strength on grey, black and red alike. */
  .mg-eyes { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mg-eyes-ink, var(--mg-pattern));
    -webkit-mask: url("../assets/img/maldito-pattern-eyes.svg") 0 0 / var(--p-pattern-w) var(--p-pattern-h) repeat, url("../assets/img/maldito-pattern-eyes.svg") 0 0 / var(--p-pattern-w) var(--p-pattern-h) repeat;
    mask: url("../assets/img/maldito-pattern-eyes.svg") 0 0 / var(--p-pattern-w) var(--p-pattern-h) repeat add, url("../assets/img/maldito-pattern-eyes.svg") 0 0 / var(--p-pattern-w) var(--p-pattern-h) repeat; }

  /* Head disc (manual p.19 TU PERFIL, p.21 example 5): the symbol in a disc with a hard shadow. */
  .mg-disc { position: relative; isolation: isolate; display: grid; place-items: center; width: var(--d, var(--p-96)); aspect-ratio: 1; flex: none; }
  .mg-disc::before, .mg-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1; }
  .mg-disc::before { background: var(--disc-shade, var(--p-black-950)); transform: translate(var(--p-shape-off-md-x), var(--p-shape-off-md-y)); }
  .mg-disc::after { background: var(--disc-fill, var(--p-white)); }
  .mg-disc img { width: 70%; height: auto; }

  /* ---- Red band, bleeding to the edge with the eyes pattern (manual p.21 example 1). ONE of the page's two red slabs. ---- */
  .mg-band { position: relative; isolation: isolate; padding-block: clamp(var(--p-24), 3vw, var(--p-56)) clamp(var(--p-32), 4vw, var(--p-72)); color: var(--mg-on-red); --mg-eyes-ink: var(--p-white-a85); }
  .mg-band::after { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--mg-red); clip-path: var(--p-shape-bleed); }
  .mg-band > .mg-eyes { clip-path: var(--p-shape-bleed); }
  .mg-band a:not(.dv-btn) { color: inherit; text-underline-offset: var(--p-4); }
  .mg-band .mg-disc { --disc-fill: var(--p-white); --disc-shade: var(--p-black-950); }
  .mg-band__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-sp-5); }
  .mg-band__title { font: var(--t-mg-display); font-size: clamp(var(--p-32), calc(var(--p-24) + 4.6vw), var(--p-96)); line-height: 0.98; margin: 0; overflow-wrap: normal; hyphens: none; }
  .mg-band__meta { margin-block-start: var(--s-sp-3); font: var(--t-lead); }
  .mg-band__meta b { font-weight: var(--p-weight-black); }
  .mg-band .mg-disc { --d: clamp(var(--p-72), calc(var(--p-24) + 7vw), var(--p-120)); transform: rotate(-6deg); }

  /* Section heading on a fitted slab with its hard shadow (manual p.21 example 2). The second red slab at most; used where the page has no sphere or buy slab. */
  .mg-sh { display: inline-block; margin: 0 var(--p-shape-off-md-x) var(--p-shape-off-md-y) 0; padding: var(--p-slab-pad); font: var(--t-mg-display); color: var(--mg-on-red); }
  .mg-sh.mg-sl { --sl-dx: var(--p-shape-off-md-x); --sl-dy: var(--p-shape-off-md-y); }

  /* Small accent slab (rule tick, product-name underline): 64 x 8, the one red mark that is not a large slab. */
  .mg-slab { display: block; width: var(--c-shape-slab-w); height: var(--c-shape-slab-h); clip-path: var(--p-shape-main); background: var(--c-shape-fill); }
  [data-brand="maldito"]:not([data-surface]) .dv-ledger-head::after { width: var(--c-shape-slab-w); height: var(--c-shape-slab-h); clip-path: var(--p-shape-main); background: var(--c-shape-fill); }
  .ms-pattern { position: relative; isolation: isolate; min-height: var(--p-120); border: var(--s-rule-w) solid var(--s-rule); background-color: var(--s-surface); }
  .ms-rules { margin: 0; padding-inline-start: var(--s-sp-5); display: grid; gap: var(--s-sp-1); font: var(--t-small); }

  /* ================================================================================================
     Maldito scope. @scope root = the Maldito page/section/specimen or a Maldito card; limit = the Devir chrome and every nested Devir surface.
     ================================================================================================ */
  @scope ([data-brand="maldito"], [data-surface="maldito"], .dv-tile.is-maldito, .dv-card.is-maldito, .dv-crow.is-maldito, .dv-row.is-maldito) to (.dv-header, .dv-footer, .dv-overlay, [data-surface]:not([data-surface="maldito"])) {
    /* Buttons (manual p.19): caps in Graphik Black, the p.19 shape. Primary = neutral slab (black on light, white on dark), flat; it turns red on hover only. */
    :is(.dv-btn:not(.is-secondary, .is-tertiary, .is-inverse, .is-inverse-outline, .is-shape), :is(.pdp-xtile, .pdp-xrow) .dv-btn.is-secondary) { position: relative; isolation: isolate; background: transparent; border-color: transparent; border-radius: 0; color: var(--c-btn-fg); text-transform: uppercase; letter-spacing: var(--p-track-btn); }
    :is(.dv-btn:not(.is-secondary, .is-tertiary, .is-inverse, .is-inverse-outline, .is-shape), :is(.pdp-xtile, .pdp-xrow) .dv-btn.is-secondary)::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--p-shape-cta); background: var(--c-btn-bg); pointer-events: none; }
    :is(.dv-btn:not(.is-secondary, .is-tertiary, .is-inverse, .is-inverse-outline, .is-shape), :is(.pdp-xtile, .pdp-xrow) .dv-btn.is-secondary):hover:not(:disabled, [aria-disabled="true"]) { background: transparent; border-color: transparent; color: var(--c-btn-hover-fg); }
    :is(.dv-btn:not(.is-secondary, .is-tertiary, .is-inverse, .is-inverse-outline, .is-shape), :is(.pdp-xtile, .pdp-xrow) .dv-btn.is-secondary):hover:not(:disabled, [aria-disabled="true"])::after { background: var(--c-btn-hover-bg); }
    :is(.dv-btn:not(.is-secondary, .is-tertiary, .is-inverse, .is-inverse-outline, .is-shape), :is(.pdp-xtile, .pdp-xrow) .dv-btn.is-secondary):disabled, :is(.dv-btn:not(.is-secondary, .is-tertiary, .is-inverse, .is-inverse-outline, .is-shape), :is(.pdp-xtile, .pdp-xrow) .dv-btn.is-secondary):disabled:hover { background: transparent; border-color: transparent; color: var(--c-btn-disabled-fg); letter-spacing: 0; }
    :is(.dv-btn:not(.is-secondary, .is-tertiary, .is-inverse, .is-inverse-outline, .is-shape), :is(.pdp-xtile, .pdp-xrow) .dv-btn.is-secondary):disabled::after { background: var(--c-btn-disabled-bg); }
    .dv-btn:disabled { letter-spacing: 0; }

    /* Red Add (Diana, DIANA-FEEDBACK-01, R3/R5): the action button of a card, tile, ledger row and PDP row is red with a white label, on a neutral ground only. Secondary buttons stay neutral.
       States: rest red, hover a deeper red, active the deepest, focus-visible the 3 px ink ring (base), disabled the grey slab (rules above), added the neutral slab with the check (never a second red). */
    :is(.dv-card__add, .dv-tile__add, .dv-row__add, .pdp-xtile [data-add], .pdp-xrow [data-add]) { --c-btn-bg: var(--mg-red); --c-btn-fg: var(--mg-on-red); --c-btn-hover-bg: var(--mg-red-hover); --c-btn-hover-fg: var(--mg-on-red); }
    :is(.dv-card__add, .dv-tile__add, .dv-row__add, .pdp-xtile [data-add], .pdp-xrow [data-add]):active:not(:disabled, [aria-disabled="true"])::after { background: var(--mg-red-press); }
    :is(.dv-card__add, .dv-tile__add, .dv-row__add, .pdp-xtile [data-add], .pdp-xrow [data-add]).is-done { --c-btn-bg: var(--mg-neutral); --c-btn-fg: var(--mg-on-neutral); --c-btn-hover-bg: var(--mg-neutral); --c-btn-hover-fg: var(--mg-on-neutral); }
    .dv-btn.is-secondary { border-radius: 0; border-width: var(--s-rule-w-2); text-transform: uppercase; letter-spacing: var(--p-track-btn); }

    /* Stepper: square, 2 px ink frame (UI contrast), bold figure. */
    [data-comp="qty-stepper"] { border-radius: 0; border-color: var(--s-text); box-shadow: inset 0 0 0 var(--s-rule-w) var(--s-text); }   /* 2 px ink frame from a 1 px border plus a 1 px inset ring: the outer box equals the Devir stepper */
    .dv-qty__input { border-inline-color: var(--s-text); box-shadow: inset var(--s-rule-w) 0 0 var(--s-text), inset calc(-1 * var(--s-rule-w)) 0 0 var(--s-text); font-weight: var(--p-weight-black); }

    /* Toolbar controls. */
    .dv-select { border-radius: 0; border-width: var(--s-rule-w-2); border-color: var(--s-text); }
    .dv-toolbar__view { border: var(--s-rule-w-2) solid var(--s-text); }
    .dv-toolbar__view .dv-iconbtn { border: 0; border-radius: 0; }
    .dv-toolbar__view .dv-iconbtn[aria-pressed="true"] { background: var(--s-text); color: var(--s-surface); }
    .dv-toolbar__view .dv-iconbtn:not([aria-pressed="true"]):hover { background: var(--c-hover-tint); }

    /* Covers and poster tiles sit on a white plate in both modes (dark ink on it), and a cover link is never underlined. */
    .dv-tile__cover, .dv-row__cover { --s-text: var(--p-black-950); --c-nocover-bg: var(--p-white); --c-nocover-ink: var(--p-black-950); text-decoration: none; }
    .dv-card__plate, .dv-card__plate .dv-nocover { --c-nocover-bg: var(--p-white); --c-nocover-ink: var(--p-black-950); text-decoration: none; }
    .pdp-xtile .pdp-well, .pdp-xrow__cover { --s-text: var(--p-black-950); }

    /* Out of stock: the cover keeps its opaque white plate in both modes; only the picture washes out, so nothing turns muddy on black and the stock state stays readable. */
    .dv-row.is-out .dv-row__cover { opacity: 1; }
    .dv-row.is-out .dv-row__cover > img, .dv-tile.is-out .dv-tile__cover > img, .dv-card.is-out .dv-card__plate > img, .dv-crow.is-out .dv-card__plate > img { opacity: 0.55; }
    .dv-badge.is-out { background: transparent; box-shadow: inset 0 0 0 var(--s-rule-w-2) var(--s-text); color: var(--s-text); }
    .dv-badge.is-in { background: var(--dv-chip-green); color: var(--dv-text); }
    .dv-badge:not(.is-out, .is-in) { background: var(--mg-neutral); color: var(--mg-on-neutral); }
  }

  /* ---- Maldito cards (tile, card, card-row): one slab with the manual's shape and a hard shadow. Maldito-flagged cards anywhere, and every card inside a Maldito scope that is not a nested Devir surface. ---- */
  :is(.dv-tile.is-maldito, .dv-card.is-maldito, .dv-crow.is-maldito, [data-brand="maldito"] :is(.dv-tile, .dv-card, .dv-crow):not(:is([data-surface]:not([data-surface="maldito"]), .dv-header, .dv-footer, .dv-overlay) *)) {
    isolation: isolate; background: transparent; border-color: transparent; border-radius: 0; box-shadow: none;   /* the 1 px border stays (transparent): same content box as a Devir card, so container-driven type and line heights match */
    &::before, &::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--p-shape-card); pointer-events: none; }
    &::after { background: var(--c-card-bg); }
    &:is(.dv-card, .dv-crow)::after { background: var(--c-pc-ground); }
    &::before { background: var(--mg-hard); transform: translate(var(--p-shape-off-sm-x), var(--p-shape-off-sm-y)); }   /* the shadow lives in the grid gap: the card box is the same size as a Devir card, so a mixed row stays aligned */
    &:hover, &:focus-within { border-color: transparent; }
  }
  /* PDP cross-sell tile (rail): same slab as the cards. */
  [data-brand="maldito"] .pdp-xtile[data-surface="maldito"] { position: relative; isolation: isolate; background: transparent; border-radius: 0; }
  [data-brand="maldito"] .pdp-xtile[data-surface="maldito"]::before, [data-brand="maldito"] .pdp-xtile[data-surface="maldito"]::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--p-shape-card); pointer-events: none; }
  [data-brand="maldito"] .pdp-xtile[data-surface="maldito"]::after { background: var(--mg-surface); }
  [data-brand="maldito"] .pdp-xtile[data-surface="maldito"]::before { background: var(--mg-hard); transform: translate(var(--p-shape-off-sm-x), var(--p-shape-off-sm-y)); }
  [data-brand="maldito"] .pdp-xtile[data-surface="maldito"] .pdp-well { background: var(--p-white); border-radius: 0; }
  @media (prefers-reduced-motion: reduce) {
    .mg-sl::before, .mg-sl::after { transition: none; }
  }

  /* Featured CTA (manual p.19): irregular shape, hard shadow, white bold label. At most one per view. The button box stays a normal 44 px+ target
     (focus ring and hit area are the box); the polygon and its shadow are painted behind it. */
  .dv-btn.is-shape { justify-self: start; justify-content: center; position: relative; isolation: isolate; background: transparent; border-color: transparent; border-radius: 0; color: var(--c-shape-ink); margin-inline-end: var(--c-shape-dx); margin-block-end: var(--c-shape-dy); text-transform: uppercase; letter-spacing: var(--p-track-btn); }
  .dv-btn.is-shape::before, .dv-btn.is-shape::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--p-shape-cta); transition: transform var(--s-dur) var(--s-ease); }
  .dv-btn.is-shape::before { background: var(--c-shape-shadow); transform: translate(var(--c-shape-dx), var(--c-shape-dy)); }
  .dv-btn.is-shape::after { background: var(--c-shape-fill); }
  .dv-btn.is-shape:hover:not(:disabled):not([aria-disabled="true"]) { background: transparent; border-color: transparent; color: var(--c-shape-ink); }
  .dv-btn.is-shape:hover::after { transform: translate(calc(var(--c-shape-dx) / 2), calc(var(--c-shape-dy) / 2)); }
  .dv-btn.is-shape:active::after { transform: translate(var(--c-shape-dx), var(--c-shape-dy)); }
  .dv-btn.is-shape:active { transform: none; }
  .dv-btn.is-shape.is-more::before, .dv-btn.is-shape.is-more::after { clip-path: var(--p-shape-more); }
  @media (prefers-reduced-motion: reduce) {
    .dv-btn.is-shape::before, .dv-btn.is-shape::after { transition: none; }
  }

/* Filled Maldito icons (include.js swaps the sprite on Maldito surfaces): solid currentColor, no stroke. */
.dv-icon.is-mg { fill: currentColor; stroke: none; }

/* Narrowest cards and rows: the caps label of the shaped button drops to the 12 px floor and loses its tracking, so "Unavailable" never spills out of its slab. */
@container pcard (max-width: 340px) { :is(.dv-card.is-maldito, [data-brand="maldito"] .dv-card) .dv-btn:disabled { font-size: var(--p-12); letter-spacing: 0; } }
@container pcard (max-width: 240px) { :is(.dv-card.is-maldito, [data-brand="maldito"] .dv-card) .dv-btn { font-size: var(--p-12); letter-spacing: 0; } }
@container dvrow (max-width: 280px) { :is(.dv-crow.is-maldito, [data-brand="maldito"] .dv-crow, [data-brand="maldito"] .dv-row) .dv-btn { font-size: var(--p-12); letter-spacing: 0; } }

/* =========================================================================
   Maldito mode and surface-scoped tokens (shared by pdp-maldito-*.html, maldito-states.html and, later, the other worktree).
   Mode switch: body[data-brand="maldito"]. Rule that must hold everywhere: a SURFACE sets its own ink, ink-muted, line, ground and
   control tokens TOGETHER; nothing inherits text colour across a ground change. A light card inside a black band re-declares the light set.
   ========================================================================= */
@layer components {
  /* Generic rules read per-surface custom properties (--m-*), so the NEAREST surface wins. No descendant selectors keyed on a surface:
     those would leak into a light card nested in a black band. */
  /* reconciled: secondary, disabled and hover colours come from the main token system (base.css), which reads the same surface tokens */
  /* [data-surface="maldito"] (specimen frames) is a Maldito scope: its light and dark tokens live in tokens.css with the rest of the Maldito mode. */

  /* ---- Brand tags (cart, search, cross-sell, mini-cart lines) --------------------- */

  .ms-lang { display: inline-flex; align-items: center; min-height: var(--p-24); padding-inline: var(--s-sp-2); border-radius: var(--s-radius); background: var(--p-chip-blue); color: var(--p-navy-900); font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; white-space: nowrap; }
  .ms-lang.is-pt { background: var(--p-chip-green); }
  .ms-lang.is-both { background: var(--p-chip-orange); }

  /* ---- Header lockup: Devir logo, thin divider, Maldito head. The head enters with a 240 ms rise + fade (transform + opacity only). ---- */
  @keyframes ms-enter { from { opacity: 0; transform: translateX(calc(-1 * var(--p-8))); } to { opacity: 1; transform: none; } }

  /* ---- Transitions between modes ---------------------------------------------------------- */

  /* ---- Sheet layout ---------------------------------------------------------------------------- */
}

/* =========================================================================
   Maldito product pages, Direction 1 (Manual-faithful). Unwrapped on purpose (see maldito-graphic.css). body[data-brand="maldito"] only.
   Red budget: ONE sphere behind the cover + ONE red buy slab per page (two large slabs). Title is red display type of 52 px or more; the
   compact order-first page (C) has a 96 px thumbnail, so its title is ink and only the buy slab is red.
   ========================================================================= */
body[data-brand="maldito"] .pdp-main { overflow-x: clip; }
/* Sphere (manual p.18, p.21 example 4): organic circle bleeding off the outer edge, behind the white cover plate. */
body[data-brand="maldito"] :is(.pdp-band .pdp-well:not(.is-mini), .pdp-a__media .pdp-well) { position: relative; isolation: isolate; background: transparent; padding: var(--s-sp-6) var(--s-sp-5); }
body[data-brand="maldito"] :is(.pdp-band .pdp-well:not(.is-mini), .pdp-a__media .pdp-well)::before { content: ""; position: absolute; z-index: -1; top: 50%; left: var(--sph-x, 64%); height: 100%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: var(--p-shape-sphere); background: var(--mg-red); }
body[data-brand="maldito"] :is(.pdp-band, .pdp-a) { overflow: clip; }
body[data-brand="maldito"] .pdp-a__media .pdp-well { --sph-x: 36%; }
body[data-brand="maldito"] :is(.pdp-a__side, .pdp-b__title) { position: relative; z-index: 1; }
body[data-brand="maldito"] .pdp-band { background: transparent; }
body[data-brand="maldito"] .pdp-plate { background: var(--p-white); border-radius: 0; }
body[data-brand="maldito"] .pdp-b__cover .pdp-plate { max-width: var(--p-480); }
/* Identity. */
body[data-brand="maldito"] .pdp-id { background: transparent; color: var(--s-text); padding: 0; }
body[data-brand="maldito"] .pdp-id__name.mg-pdp-name { font: var(--t-mg-hero); font-size: max(var(--p-52), calc(var(--f-mg-hero) * var(--mg-fit, 1))); letter-spacing: var(--p-track-comic); color: var(--mg-red); overflow-wrap: normal; hyphens: none; text-wrap: balance; }
/* A long word ("Terraforming") would overflow its column: pdp.js sets --mg-fit to the share that fits. Red type never goes under 52 px: when the fit needs less, the title turns ink and keeps shrinking (24 px and up). */
body[data-brand="maldito"] .pdp-id__name.mg-pdp-name.is-fit-ink { font-size: calc(var(--f-mg-hero) * var(--mg-fit, 1)); color: var(--s-text); }
body[data-brand="maldito"] :is(.pdp-a__side, .pdp-b__title) { min-width: 0; }
body[data-brand="maldito"] .pdp-a__side { grid-template-columns: minmax(0, 1fr); }
body[data-brand="maldito"] .pdp-c__id .pdp-id__name.mg-pdp-name { font: var(--t-mg-title); color: var(--s-text); }
body[data-brand="maldito"] .ms-lang { background: var(--mg-neutral); color: var(--mg-on-neutral); }
body[data-brand="maldito"] .pdp-id .dv-row__k { color: var(--s-text-muted); }
body[data-brand="maldito"] .pdp-b__lead { color: var(--s-text); }
/* Surfaces and fact strip. */
body[data-brand="maldito"] .pdp-surface, body[data-brand="maldito"] .pdp-acc { background: var(--mg-surface); border-radius: 0; }
body[data-brand="maldito"] .pdp-strip { background: var(--mg-strip); color: var(--p-white); border: 0; }
body[data-brand="maldito"] .pdp-strip__list dt { color: var(--p-mg-ink-2-dark); }
body[data-brand="maldito"] .pdp-main .dv-badge.is-out { background: transparent; box-shadow: inset 0 0 0 var(--s-rule-w-2) var(--s-text); color: var(--s-text); }
body[data-brand="maldito"] .pdp-link { text-decoration-color: var(--s-text); }
/* Buy slab (manual p.19 right panel, p.21 example 3): the one red slab next to the sphere. Everything on it is white; buttons are white slabs with a black label. */
body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy) { isolation: isolate; background: transparent; border-radius: 0; padding: var(--s-sp-6) var(--s-sp-6) var(--s-sp-6); margin: 0 var(--p-shape-off-lg-x) var(--p-shape-off-lg-y) 0; }
body[data-brand="maldito"] .pdp-c__buy { position: relative; }
@media (max-width: 767px) { body[data-brand="maldito"] .pdp-a__buy { position: relative; } }
body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy)::before, body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy)::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--p-shape-main); pointer-events: none; }
body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy)::before { background: var(--mg-hard); transform: translate(var(--p-shape-off-lg-x), var(--p-shape-off-lg-y)); }
body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy)::after { background: var(--mg-red); }
body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy) .dv-badge:not(.is-out, .is-in) { background: var(--p-black-950); color: var(--p-white); }
body[data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy) :is(.pdp-price__label, .pdp-price__group, .pdp-ph, .pdp-hint, .pdp-a__total, .pdp-c__lbl, .pdp-preset small) { color: var(--mg-on-red); }
body[data-brand="maldito"] .pdp-link { color: inherit; }
body[data-brand="maldito"] .pdp-preset { border-width: var(--s-rule-w-2); border-radius: 0; }
body[data-brand="maldito"] .pdp-preset[aria-pressed="true"] { background: var(--p-white); color: var(--p-black-950); border-color: var(--p-white); }
body[data-brand="maldito"] .pdp-preset[aria-pressed="true"] small { color: var(--p-black-950); }
body[data-brand="maldito"] .pdp-preset[aria-pressed="true"]:hover { background: var(--p-mg-pale-red); border-color: var(--p-mg-pale-red); }
body[data-brand="maldito"] .pdp-c__usual { border-radius: 0; }
/* B: the buy bar is a red band running to the bleed (the second red slab); on phones it is the fixed bar. */
body[data-brand="maldito"] .pdp-bar { position: relative; isolation: isolate; background: transparent; }
body[data-brand="maldito"] .pdp-bar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mg-red); clip-path: var(--p-shape-bleed); pointer-events: none; }
@media (max-width: 767px) {
  body[data-brand="maldito"] .pdp-bar { position: fixed; background: transparent; color: var(--mg-on-red); }
  body[data-brand="maldito"] .pdp-bar .dv-btn { padding-inline: var(--s-sp-3); }
}
/* Page-level pieces. */
body[data-brand="maldito"] .dv-ledger-head { border-block-end-color: var(--s-rule-strong); }
body[data-brand="maldito"] .pdp-hint { color: var(--s-text-muted); }
/* maldito-states.html specimens */
body[data-brand="maldito"] .pdp-id { grid-template-columns: minmax(0, 1fr); }
body[data-brand="maldito"] .pdp-id__name { min-width: 0; }
/* Pressed states keep ink on their own ground (the Devir blue and tint of the base rules would sit on black). */
body[data-brand="maldito"] :is(.pdp-xrow__name, .pdp-xtile__name, .pdp-xcheck__name) a:active { color: var(--s-text); }
body[data-brand="maldito"] .pdp-preset:active { background: var(--s-surface); }

/* Maldito surfaces use black, white, grey and the red only (QA-M3 MAJOR-5): the Devir navy of the BGG hexagon and of a ticked add-on box becomes the neutral slab (black on light, white on dark). Devir rows nested in a Maldito page keep their own navy. */
@layer components {
  .pdp-xcheck[data-surface="maldito"] .pdp-pick > input:checked + .pdp-pick__box, .pdp-xcheck[data-surface="maldito"] .pdp-pick:hover > input:checked + .pdp-pick__box { background: var(--mg-neutral); border-color: var(--mg-neutral); color: var(--mg-on-neutral); }
}

/* Page-level compositions (listing, product page, cart, catalogue). Magento layout XML containers in the port. */
.dv-pdp { display: grid; gap: var(--s-sp-5); padding-block: var(--s-sp-3) var(--s-sp-7); }
@media (min-width: 768px) { .dv-pdp { grid-template-columns: 7fr 5fr; gap: var(--s-sp-7); align-items: start; } }

/* ---- Catalogue and decisions pages (review tooling, not storefront) ---- */

/* loaders.html and motion.html specimens */

/* motion.html */

/* qa-report.html (generated from QA-SELF.md) */   /* EAN and other long digit codes never break */

/* ---- cards.html (TV#153) review page ---- */

/* ---- compare.html (TV#153) ---- */

/* light tint swatches on cards.html (TV#153) */
}

/* hand-authored tail (bundles.json) */
@layer utilities {
/* Magento shells around the mock markup (V3a): the price comes from the Pricing Render, the stock cue from the type block, the form is the add-to-cart form itself. */
/* @price:begin */
/* T-65 / GL-D65 (D-V3-1, in force since V3): the struck original price sits next to (phone) or under (from 768 px) the customer price, muted and 400 weight; the customer price keeps the lead weight. */
.pdp-bar__price .price-box { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-sp-2); margin: 0; padding: 0; }
.pdp-price__now .price { font: inherit; color: inherit; }
.pdp-price__now :is(.special-price, .old-price) .price-label { position: absolute; width: var(--p-1); height: var(--p-1); margin: calc(-1 * var(--p-1)); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pdp-price__now .old-price { font: var(--t-small); color: var(--s-text-muted); }
.pdp-price__now .old-price .price { text-decoration: line-through; }
.pdp-bar__price :is(.minimal-price-link, .price-from, .price-to) .price-container { display: inline-flex; flex-direction: column; }
.pdp-bar__price :is(.minimal-price-link, .price-from, .price-to) .price-label { font: var(--t-small); color: var(--s-text-muted); white-space: nowrap; }
/* @price:end */
.pdp-bar .stock { display: contents; }
.pdp-bar__price .devir-login-cta a { font: var(--t-small); color: var(--s-text); text-decoration: underline; text-underline-offset: var(--p-4); }
.pdp-bar__act { margin: 0; }
/* The out-of-stock badge is wider than a phone bar can hold next to the controls; it only shows from 768 px (mock rule) and may wrap there. */
.pdp-bar .dv-badge { white-space: normal; text-align: center; min-width: 0; }
/* Row under the bar: tier prices, notify me, wishlist and compare links of the core blocks. The mock draws none of them; they stay reachable on every width. */
.pdp-extra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-2) var(--s-sp-5); padding-block: var(--s-sp-3) 0; font: var(--t-small); }
.pdp-extra :is(.product.alert a.action.alert, .product-addto-links a) { display: inline-flex; align-items: center; min-height: var(--s-target); padding-inline: var(--s-sp-2); color: var(--s-text); text-decoration: underline var(--s-rule-w) var(--s-text-muted); text-underline-offset: var(--p-4); }
.pdp-extra :is(.product.alert a.action.alert, .product-addto-links a):hover { background: var(--c-hover-tint); text-decoration-color: var(--s-accent); }
.pdp-extra :is(.prices-tier, .product-social-links, .product-addto-links) { display: flex; flex-wrap: wrap; gap: var(--s-sp-2) var(--s-sp-4); margin: 0; padding: 0; list-style: none; }
.pdp-extra .prices-tier .price { font: inherit; }
.pdp-b__text > :first-child { margin-block-start: 0; }
.pdp-b__text > p + p { margin-block-start: var(--s-sp-3); }
.pdp-b__text + .pdp-b__text p:first-child { font: var(--t-body); }
.pdp-b__prose .pdp-b__text ul, .pdp-b__prose .pdp-b__text ol { padding-inline-start: var(--s-sp-5); }
.pdp-b__videos { display: flex; flex-wrap: wrap; gap: var(--s-sp-2) var(--s-sp-4); margin: 0; }
.pdp-b__x .pdp-rail { margin: 0; }
/* @price:begin */
/* The phone bar is navy: the struck list price uses the on-dark muted colour (G1). */
@media (max-width: 767px) { .pdp-bar .pdp-price__now .old-price { color: var(--s-text-on-dark-muted); } }
/* @price:end */
.pdp-b__x .pdp-xtile__price { margin: 0; }
.pdp-id { margin: 0; }
/* The ledger-row pieces the cross-sell tile and the id line use (components/product-ledger-row.css and polish-m2.css in the mock load on every mock page; on Luma routes the listing bundle is not loaded here). */
.dv-pair { display: inline-flex; gap: var(--s-sp-1); white-space: nowrap; }
.dv-row__k { color: var(--s-text-muted); }
.dv-row__k, .dv-row__code { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; font-variant-numeric: tabular-nums; }
.pdp-xtile .dv-row__sku { font: var(--t-small); color: var(--s-text); display: flex; flex-wrap: wrap; gap: var(--p-1) var(--s-sp-4); margin: 0; }
/* @price:begin */
/* From 768 px the struck list price sits under the amount: the price column keeps the width of the mock's single amount and the buy controls stay on the bar's row. */
@media (min-width: 768px) { .pdp-bar__price .price-box { flex-direction: column; align-items: flex-start; } }
/* @price:end */
}