/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: page.
 * 073721b6d6e04dd2238c9f06275f9008e4a027887c9cd44116f48468df5c6ad4  polish-m2.css
 * c66e74a2b33798ce5e8e400aa8f18a9dc49052a29271441d273416a7a9c0b6a3  polish-r2.css
 */
@layer polish {
/* polish-m2.css: fixes from the blind QA (QA-M2.md). Imported LAST in components.css, as a top-level rule set of the components layer.
   Why a separate file: pdp/*.css wrap their rules in a nested @layer components, and a nested layer loses to the rules the parent layer holds directly,
   so a PDP or Maldito-states rule can never beat the card rules. Rules here are direct, therefore specificity decides. Tokens only (scan.mjs). */

/* M1: the Maldito wordmark is never drawn below 96 px, in tags (cards, rows) and in the PDP identity pill (112 px since round 2). */
.dv-brandtag img { flex: none; }
.dv-brandtag { flex: none; }
.pdp-id .dv-maldito-pill img { width: var(--p-112); height: auto; }

/* M2: compact (hlist) tiles hold their text inside the tile. One column in the Maldito-states frames; the head wraps instead of overflowing. */
.ms-frame .dv-hlist { grid-template-columns: minmax(0, 1fr); }
.dv-hlist .dv-tile { grid-template-columns: var(--p-96) minmax(0, 1fr); }
.dv-combo__head { flex-wrap: wrap; }

/* H4: SKU / EAN / legacy codes never break letter by letter. The old rule (overflow-wrap: anywhere on the pair) is replaced by nowrap on the label, the code and the pair;
   the SKU line wraps BETWEEN pairs (it is a flex-wrap row), never inside one. Tabular figures keep the codes aligned. */
.dv-pair, .dv-row .dv-pair, .dv-tile .dv-pair, .dv-bggc .dv-pair, .dv-reco .dv-pair { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; min-width: 0; }
.dv-row__k, .dv-row__code, .dv-minicart__sku, .dv-code { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; font-variant-numeric: tabular-nums; }
.dv-row__sku { min-width: 0; }

/* H3: grid tracks written as 1fr grow to the content's min-content and push the page wide; minmax(0, 1fr) lets them shrink. */
.dv-cart { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .dv-cart { grid-template-columns: minmax(0, 1fr) var(--p-400); } }
@media (min-width: 768px) {
  .dv-bgglist { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .dv-bggc:nth-child(1) { grid-column: span 12; }
  .dv-bggc:nth-child(2), .dv-bggc:nth-child(3) { grid-column: span 6; }
}
.dv-bggc__head { flex-wrap: wrap; }
.dv-bggstats { min-width: 0; }
.dv-bggstats__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* L3: no vertical rules between the BGG figures (line budget): the columns are separated by space only. */
.dv-bggstats__cols > div + div, [data-brand="maldito"] .dv-bggstats__cols > div + div { border-inline-start: 0; }
.dv-bggc { min-width: 0; }
.dv-bggc__id, .dv-bggc__stats { min-width: 0; }

/* Compact (hlist) tiles: two columns on tablets, three from 1024, so the text column always holds a legacy code. */
.dv-hlist { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .dv-hlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dv-hlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ms-frame .dv-hlist { grid-template-columns: minmax(0, 1fr); }
.dv-pair { flex-wrap: wrap; }

/* Listing rows and toolbar: a row may wrap its buy zone instead of pushing the page wide. */
.dv-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (min-width: 768px) { .dv-toolbar { grid-template-columns: minmax(0, 1fr) auto auto auto; } }
.dv-row__buy { flex-wrap: wrap; min-width: 0; }
.dv-row__add { flex: 1 1 var(--p-120); }
.dv-row__stock, .dv-row__price { min-width: 0; }

/* Portal row banner: keep the two-column phone form on tablets, the four-column form from 1024. */
@media (min-width: 768px) and (max-width: 1023px) {
  .dv-portal--row { grid-template-columns: var(--p-96) minmax(0, 1fr); }
  .dv-portal--row .dv-portal__thumb { grid-row: 1 / 4; height: var(--p-96); }
}
@media (min-width: 1024px) { .dv-portal--row { grid-template-columns: var(--p-96) auto minmax(0, 1fr) auto; } }

/* Breadcrumb current page may not push its row wider than the page. */
.dv-crumbs__list { min-width: 0; }
.dv-crumbs__list li { min-width: 0; max-width: 100%; }
.dv-crumbs__list [aria-current] { max-width: min(100%, var(--p-400)); }

/* Code values in definition lists (case EAN, pallet) stay whole. */
.dv-doc td { overflow-wrap: normal; }

/* Rails: wide enough for a 19-character legacy code. Three columns on tablets, four from 1024, five (Maldito: four) from 1280. */
@media (min-width: 768px) {
  .dv-rail, .dv-maldito .dv-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .dv-rail, .dv-maldito .dv-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .dv-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Rails inside narrow review frames fill by minimum width; the PDP rail shows three tiles on tablets. */
@media (min-width: 768px) { .ms-frame .dv-rail { grid-template-columns: repeat(auto-fill, minmax(var(--p-240), 1fr)); } }
@media (min-width: 768px) and (max-width: 1023px) { .pdp-rail { grid-auto-columns: calc((100% - 2 * var(--s-sp-4)) / 3); } }
@media (min-width: 768px) and (max-width: 1023px) { .ms-row.is-3, .ms-row.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mega menu on tablets: two columns, the "new" column drops below. */
/* A .dv-wrap used as a specimen inside a review column fills the column instead of subtracting the page gutter twice. */
.dv-state > .dv-wrap { width: 100%; }

/* Narrow phones (280 to 359): a grid track written as auto/1fr may not grow with its content; buttons may wrap their label; rows, compact tiles and PDP rows stack so a 25-character code fits. */
@media (max-width: 767px) { .dv-line__grid, .dv-stack { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 359px) {
  .dv-btn { white-space: normal; text-align: center; }
  .dv-hlist .dv-tile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cover" "id" "price" "foot"; }
  .dv-hlist .dv-tile__cover { max-width: var(--p-96); }
  .pdp-xrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "main" "why" "buy"; }
}
@container dvrow (max-width: 340px) {
  .dv-row { grid-template-columns: var(--c-cover-row) minmax(0, 1fr); grid-template-areas: "cover price" "main main" "stock stock" "buy buy"; }
}
@media (max-width: 359px) {
  .dv-rankrow { grid-template-columns: var(--p-40) var(--c-cover-mini) minmax(0, 1fr); padding-inline: var(--s-sp-2); }
  .dv-rankrow > .dv-rankrow__orders, .dv-rankrow > .dv-t-price { grid-column: 3; }
  .dv-portal__by { flex-wrap: wrap; }
  .dv-bggc:nth-child(n) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cover" "id" "stats" "price" "foot"; }
  .dv-bggc__cover { max-width: var(--p-160); }
  .pdp-xcheck { grid-template-columns: var(--s-target) var(--p-56) minmax(0, 1fr); padding-inline-end: var(--s-sp-2); }
}

/* Auto-fit tracks with a fixed minimum overflow a phone narrower than that minimum: clamp the minimum to the container. */
.dv-states { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--p-240)), 1fr)); }
.dv-states.is-wide, .mo-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--p-320)), 1fr)); }
.dv-xfam4, .dv-pgames { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--p-240)), 1fr)); }
/* Portal "run your event": a short list (2 or 3 products) keeps the normal tile width instead of stretching to the full row (design review, Diana, round 1) */
.dv-portalrun .dv-xfam4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--p-240)), 1fr)); }
/* DIANA-009: on a computer the short list never reads oversized, a fixed 3 tracks on tablet and 4 on desktop, filled or not, none wider than 360 px */
@media (min-width: 768px) { .dv-portalrun .dv-xfam4 { grid-template-columns: repeat(3, minmax(0, var(--p-360))); } }
@media (min-width: 1200px) { .dv-portalrun .dv-xfam4 { grid-template-columns: repeat(4, minmax(0, var(--p-360))); } }
@media (max-width: 359px) {
  .pdp-xcheck { grid-template-areas: "pick cover cover" "main main main" "qty qty sum"; }
}
.dv-crumbs__list [aria-current] { min-width: 0; max-width: var(--p-400); }
.mo-mal__row { flex-wrap: wrap; }
@media (max-width: 359px) {
  .dv-rankrow { grid-template-columns: var(--p-40) minmax(0, 1fr); }
  .dv-rankrow__main, .dv-rankrow > .dv-rankrow__orders, .dv-rankrow > .dv-t-price { grid-column: 1 / -1; }
  .dv-portal--row { grid-template-columns: minmax(0, 1fr); }
  .dv-portal--row .dv-portal__thumb { grid-row: auto; }
  .dv-portaltag { max-width: 100%; }
}

/* Review and specimen frames: grid and flex items may shrink below their content so a frame never widens the page. */
.dv-crumbs, .dv-state > *, .dv-searchdemo, .dv-suggest, .ms-sec, .ms-list, .ms-line, .ms-mega__new, .ms-mega__new > *, .dv-pair-grid > section, .dv-pair-grid > section > * { min-width: 0; }
.dv-suggest__group, .ms-line__name { overflow-wrap: anywhere; }
.dv-state > .dv-searchdemo { width: 100%; }
.ms-mega__new a, .ms-mega__new .pdp-well, .ms-mega__new .pdp-plate { min-width: 0; max-width: 100%; }
@media (max-width: 359px) { .ms-mega__new { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 359px) {
  .ms-line { grid-template-columns: minmax(0, 1fr); }
}

/* M3: a focused control is never hidden under the sticky header (104 px at desktop, 108 px on phones, plus a little air). */
html { scroll-padding-top: var(--p-120); }

/* M4: the hero Pause control is drawn in the on-dark ink (it sat navy on the navy band, 1:1). */
.dv-hero__ctrl .dv-iconbtn { color: var(--s-text-on-dark); }
.dv-hero__ctrl .dv-iconbtn:hover { background: var(--p-white-a24); }
.dv-hero__ctrl .dv-iconbtn:active { background: var(--p-white-a12); }

/* M8: hover and active for the control kinds that had none. Colour, background and transform/opacity only. */
.dv-qty__input:hover { background: var(--c-hover-tint); }
.dv-qty__input:active { background: var(--s-surface-tint); }
.dv-cartrow__main a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
.dv-cartrow__main a:active { color: var(--s-text-muted); }
.dv-bgg:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
.dv-bgg:active { color: var(--s-text-muted); }
.dv-cat { transition: transform var(--p-dur-lift) var(--s-ease); }
.dv-cat:hover, .dv-cat:focus-within { transform: translateY(var(--c-lift)); }
.dv-cat:active { transform: none; }
.pdp-xrow__cover .pdp-well, .pdp-xtile .pdp-well { transition: transform var(--p-dur-lift) var(--s-ease); }
.pdp-xrow__cover:hover .pdp-well, .pdp-xtile .pdp-well:hover { transform: translateY(var(--c-lift)); }
.pdp-xrow__cover:active .pdp-well, .pdp-xtile .pdp-well:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dv-cat, .dv-cat:hover, .dv-cat:focus-within, .pdp-xrow__cover:hover .pdp-well, .pdp-xtile .pdp-well:hover { transition: none; transform: none; }
}

/* Targets: short product names keep a 44 px wide hit area; the header logo is never squeezed by the Maldito lockup; PDP ledger rows stack on tablets
   (the five-column form needs more than a 720 px container and collapsed the name column to 12 px). */
.pdp-xrow__name a, .pdp-xtile__name a, .pdp-xcheck__name a { min-width: var(--s-target); }
.pdp-xtile .dv-reason { min-height: 2lh; }  /* the reason is data driven (one or two lines) and cross-sell-strip.css is unlayered: reserve two lines here so the title row starts at the same height in every tile of a rail */
@media (min-width: 768px) and (max-width: 1023px) {
  .pdp-xrow { 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); }
  .pdp-xrow__buy { display: flex; }
  .pdp-xrow__price { grid-area: auto; text-align: start; margin-inline-start: auto; }
  .pdp-xrow__act { grid-area: auto; }
}

/* polish-r2.css: Maldito round 2 and no-jump fixes. Imported LAST in components.css (direct rules in the components layer, so specificity decides). Tokens only (scan.mjs).
   M-R2-1 The Maldito wordmark gets room: 112 px on the 48 px tile tab, 104 px on the 44 px card tab (shared by both brands so mixed rows still align), never flush with an edge.
   M-R2-2 The cover is the hero: tiles give the cover more of the well, and a narrow Maldito card keeps the cover column and lets the tab bleed to the card edge.
   M-R2-3 Rows: the brand is a small head mark in the metadata line (once per row), and none at all on the all-Maldito page, whose header already names the brand. */

/* tiles (listing grid, home rail, search) */
.dv-tile.is-maldito .dv-brandtag.is-maldito { height: var(--p-48); padding-block: var(--p-6); padding-inline: var(--s-sp-3) var(--s-sp-4); }
.dv-tile.is-maldito .dv-brandtag.is-maldito img { width: var(--p-112); height: auto; display: block; }
.dv-tile.is-maldito { container: mtile / inline-size; }
/* the head is one fixed 48 px line for every brand (the stock badge lives beside the price), so covers line up across a mixed row */
.dv-tile.is-maldito .dv-tile__cover { padding: var(--s-sp-2); }
.dv-tile.is-maldito .dv-tile__cover > img { inset: var(--s-sp-2); width: calc(100% - 2 * var(--s-sp-2)); height: calc(100% - 2 * var(--s-sp-2)); }
.dv-hlist .dv-tile.is-maldito .dv-brandtag.is-maldito { height: auto; padding-block: var(--p-4); }
.dv-hlist .dv-tile.is-maldito .dv-brandtag.is-maldito img { width: var(--p-112); }

/* cards (variants a and b) and card rows */
.dv-card.is-maldito .dv-card__tab, .dv-crow.is-maldito .dv-card__tab { box-sizing: border-box; padding-block: var(--p-4); }
.dv-card.is-maldito .dv-card__tab img, .dv-crow.is-maldito .dv-card__tab img { width: var(--p-104); height: auto; display: block; }
/* a narrow Maldito card (B, and the default): the tab sits beside the cover with tight side padding and the wordmark at its 96 px minimum, bleeding to the card edge */
@container pcard (width < 320px) {
  .dv-card.is-maldito:not([data-card="a"] *) .dv-card__tab { padding-inline: var(--s-sp-2); margin-inline-end: calc(-1 * var(--c-card-pad)); }
  .dv-card.is-maldito:not([data-card="a"] *) .dv-card__tab img { width: var(--p-96); }
}



/* rows: quiet brand mark in the metadata line */
.dv-rowbrand { display: inline-flex; align-items: center; gap: var(--s-sp-1); color: var(--s-text-muted); white-space: nowrap; }
.dv-rowbrand img { height: var(--p-20); width: auto; flex: none; }
.dv-maldito-page .dv-rowbrand { display: none; }

/* product list: truthful empty state when the filters match nothing */
.dv-listempty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-3); padding-block: var(--s-sp-6); }
}