/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: chrome.
 * 010b87ce58da9779610439947ee3689a36554e61ba4345ae2ad0530bd878e180  components/footer-links.css
 * 2f14754ac814ba7a184d049f06c11f6333cc123d902047461ed705eca8d32e47  components/form-subscribe.css
 * 073721b6d6e04dd2238c9f06275f9008e4a027887c9cd44116f48468df5c6ad4  polish-m2.css
 */
.dv-chrome [data-comp="footer-links"] { background: var(--c-footer-bg); color: var(--s-text-on-dark); padding-block: var(--s-sp-7) var(--s-sp-5); }
.dv-chrome .dv-footer__news { padding-block-end: var(--s-sp-4); }
.dv-chrome .dv-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sp-5) var(--s-sp-4); padding-block: var(--s-sp-6); }
.dv-chrome .dv-footer__brand { grid-column: 1 / -1; }
.dv-chrome .dv-footer__brand a { display: inline-flex; align-items: center; min-height: var(--s-target); }
.dv-chrome .dv-footer__cols nav > p { padding-block-end: var(--s-sp-2); }
.dv-chrome .dv-footer__cols a { display: flex; align-items: center; min-height: var(--s-target); text-decoration: none; font: var(--t-body); }
.dv-chrome .dv-footer__cols a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-text-on-dark); text-underline-offset: var(--p-6); }
.dv-chrome .dv-footer__legal { font: var(--t-label); color: var(--s-text-on-dark-muted); padding-block-start: var(--s-sp-4); text-transform: none; letter-spacing: 0; }
@media (min-width: 768px) {
  .dv-chrome .dv-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .dv-chrome .dv-footer__brand { grid-column: auto; }
}

.dv-chrome .dv-footer__legal { padding-block-start: var(--s-sp-4); }
.dv-chrome .dv-review { display: grid; gap: var(--s-sp-2); padding: var(--s-sp-3); margin-block-end: var(--s-sp-4); background: var(--p-white-a12); border-radius: var(--s-radius); }
.dv-chrome .dv-review > .dv-t-label { color: var(--s-text-on-dark-muted); }
.dv-chrome .dv-review__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-2); }
.dv-chrome .dv-review .dv-chip { background: transparent; color: var(--s-text-on-dark); border-color: var(--p-white-a24); }
.dv-chrome .dv-review .dv-chip:hover { background: var(--p-white-a12); border-color: var(--s-text-on-dark); }
.dv-chrome .dv-review .dv-chip[aria-pressed="true"] { background: var(--s-text-on-dark); color: var(--p-navy-900); border-color: var(--s-text-on-dark); }
.dv-chrome .dv-review__links { display: flex; flex-wrap: wrap; gap: var(--s-sp-1) var(--s-sp-4); }
.dv-chrome .dv-review__links a { display: inline-flex; align-items: center; min-height: var(--s-target); min-width: var(--s-target); }
.dv-chrome[data-devnotes="off"] .dv-review { display: none; }
.dv-chrome .dv-loaderov { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: var(--s-sp-5); background: var(--s-surface-navy); color: var(--s-text-on-dark); }
.dv-chrome .dv-loaderov .dvl-ovsk { width: min(90vw, var(--p-560)); color: var(--s-text-on-dark); }
.dv-chrome .dv-loaderov .dvl-skel { background: var(--p-white-a12); }
.dv-chrome .dv-loaderov .dvl-sk-row { border-block-end: 0; }
.dv-chrome .dv-toast { position: fixed; inset-inline-start: 50%; inset-block-end: var(--s-sp-5); z-index: 95; display: flex; align-items: center; gap: var(--s-sp-3); max-width: calc(100vw - 2 * var(--s-sp-4)); padding: var(--s-sp-3) var(--s-sp-5); background: var(--p-navy-900); color: var(--s-text-on-dark); border-radius: var(--s-radius); font: var(--t-body); opacity: 0; visibility: hidden; transform: translate(-50%, var(--p-12)); transition: opacity var(--p-dur-in) var(--s-ease), transform var(--p-dur-in) var(--s-ease), visibility var(--p-zero) linear var(--p-dur-in); }
.dv-chrome .dv-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.dv-chrome .dv-btn[aria-busy="true"]::before { content: ""; width: var(--p-16); height: var(--p-16); border: var(--s-rule-w-2) solid currentColor; border-inline-end-color: transparent; border-radius: var(--s-radius-dot); animation: dvl-turn calc(var(--p-dur-in) * 4) linear infinite; }
@media (prefers-reduced-motion: reduce) { .dv-chrome .dv-btn[aria-busy="true"]::before { animation: none; border-inline-end-color: currentColor; } .dv-chrome .dv-toast { transform: translate(-50%, 0); } }

/* Review index (dev only): collapsible, grouped, 44 px targets, no lines */
.dv-chrome .dv-review { display: grid; gap: var(--s-sp-2); }
.dv-chrome .dv-review__toggle { display: flex; align-items: center; gap: var(--s-sp-3); min-height: var(--s-target); padding: 0 var(--s-sp-2); border: 0; background: transparent; color: var(--s-text-on-dark); text-align: start; border-radius: var(--s-radius); transition: background-color var(--s-dur) var(--s-ease); }
.dv-chrome .dv-review__toggle:hover { background: var(--p-white-a12); }
.dv-chrome .dv-review__hint { flex: 1; color: var(--s-text-on-dark-muted); }
.dv-chrome .dv-review__toggle[aria-expanded="true"] .dv-icon { transform: rotate(180deg); }
.dv-chrome .dv-review__toggle .dv-icon { transition: transform var(--s-dur) var(--s-ease); }
.dv-chrome .dv-review__body { display: grid; gap: var(--s-sp-4); padding: var(--s-sp-2); }
@media (min-width: 768px) { .dv-chrome .dv-review__body { grid-template-columns: repeat(auto-fit, minmax(var(--p-240), 1fr)); } }
.dv-chrome .dv-review__internal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-2); color: var(--s-text-on-dark); }
.dv-chrome .dv-review__grp { display: grid; gap: var(--s-sp-1); align-content: start; }
.dv-chrome .dv-review__grp > .dv-t-label { color: var(--s-text-on-dark-muted); padding-block-start: var(--s-sp-2); }
.dv-chrome .dv-review__grp > .dv-t-label:first-child { padding-block-start: 0; }
.dv-chrome .dv-review__grp a { display: flex; align-items: center; min-height: var(--s-target); font: var(--t-small); text-decoration: none; }
.dv-chrome .dv-review__grp a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-text-on-dark); text-underline-offset: var(--p-6); }
.dv-chrome .dv-review__soon { display: flex; flex-direction: column; justify-content: center; min-height: var(--s-target); font: var(--t-small); color: var(--s-text-on-dark-muted); cursor: not-allowed; }
.dv-chrome .dv-review__soon em { font-style: normal; font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .dv-chrome .dv-review__toggle .dv-icon { transition: none; } }

.dv-chrome [data-comp="form-subscribe"] { display: grid; gap: var(--s-sp-4); }
.dv-chrome .dv-news__row { display: grid; gap: var(--s-sp-2); }
.dv-chrome .dv-news__input { width: 100%; height: var(--c-field-h); padding-inline: var(--s-sp-3); border: var(--s-rule-w) solid var(--p-white-a24); border-radius: var(--s-radius); background: var(--p-white-a12); color: var(--s-text-on-dark); font: var(--t-body); }
.dv-chrome .dv-news__input::placeholder { color: var(--s-text-on-dark-muted); opacity: 1; }
.dv-chrome .dv-news__input:focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-dark); outline-offset: var(--p-1); }
.dv-chrome .dv-news__field { display: grid; gap: var(--s-sp-2); }
.dv-chrome .dv-news__field.has-error .dv-news__input { border-color: var(--s-text-on-dark); border-width: var(--s-rule-w-2); }
.dv-chrome .dv-news__err { display: flex; align-items: center; gap: var(--s-sp-2); font: var(--t-small); color: var(--s-text-on-dark); }
.dv-chrome .dv-news__done { display: flex; align-items: center; gap: var(--s-sp-3); font: var(--t-body); }
@media (min-width: 768px) {
  .dv-chrome [data-comp="form-subscribe"] { grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--s-sp-6); }
  .dv-chrome .dv-news__row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* 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). */

/* M2: compact (hlist) tiles hold their text inside the tile. One column in the Maldito-states frames; the head wraps instead of overflowing. */

/* 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. */

/* H3: grid tracks written as 1fr grow to the content's min-content and push the page wide; minmax(0, 1fr) lets them shrink. */
/* L3: no vertical rules between the BGG figures (line budget): the columns are separated by space only. */

/* Compact (hlist) tiles: two columns on tablets, three from 1024, so the text column always holds a legacy code. */

/* Listing rows and toolbar: a row may wrap its buy zone instead of pushing the page wide. */

/* Portal row banner: keep the two-column phone form on tablets, the four-column form from 1024. */

/* Breadcrumb current page may not push its row wider than the page. */

/* Code values in definition lists (case EAN, pallet) stay whole. */

/* Rails: wide enough for a 19-character legacy code. Three columns on tablets, four from 1024, five (Maldito: four) from 1280. */

/* Rails inside narrow review frames fill by minimum width; the PDP rail shows three tiles on tablets. */
/* 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. */

/* 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. */

/* Auto-fit tracks with a fixed minimum overflow a phone narrower than that minimum: clamp the minimum to the container. */
/* 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) */
/* 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 */

/* Review and specimen frames: grid and flex items may shrink below their content so a frame never widens the page. */

/* M3: a focused control is never hidden under the sticky header (104 px at desktop, 108 px on phones, plus a little air). */

/* M4: the hero Pause control is drawn in the on-dark ink (it sat navy on the navy band, 1:1). */

/* M8: hover and active for the control kinds that had none. Colour, background and transform/opacity only. */
.dv-chrome .dv-news__input:hover { background: var(--p-white-a24); border-color: var(--s-text-on-dark); }
.dv-chrome .dv-news__input:active { background: var(--p-white-a12); }

/* 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). */  /* 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 */
.dv-chrome .dv-news__field { min-width: 0; }
@media (min-width: 768px) { .dv-chrome .dv-news__row { grid-template-columns: minmax(var(--p-120), 1fr) auto; } }