/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: chrome.
 * 969a2df1a9800a2bec3972f94016c3ad385d2ceacfbf465becd2b1b80c4693ea  components/header-container.css
 * 7d9460f2913fdee9a75e296fcf5dba44c490fe61cb8380e418bd4f7ba30130a2  components/top-search.css
 * 6e69338dcd38961adc361b477cd86e6b87281f1861bdd5aa807c517ab1a023e9  components/catalog-topnav.css
 * 073721b6d6e04dd2238c9f06275f9008e4a027887c9cd44116f48468df5c6ad4  polish-m2.css
 */
.dv-chrome [data-comp="header-container"] { position: sticky; inset-block-start: 0; z-index: 40; background: var(--s-surface-navy); color: var(--s-text-on-dark); transition: transform var(--p-dur-in) var(--s-ease); }
.dv-chrome .dv-promo { display: none; }
.dv-chrome .dv-header__main { display: grid; grid-template-columns: var(--s-target) 1fr var(--s-target) var(--s-target) var(--s-target); grid-template-areas: "menu logo theme account cart" "search search search search search"; align-items: center; height: calc(var(--c-header-row) + var(--c-header-search-row)); row-gap: 0; padding-block-end: var(--s-sp-1); }
.dv-chrome .dv-header__menu { grid-area: menu; margin-inline-start: calc(-1 * var(--s-sp-2)); }
.dv-chrome .dv-header__brand { grid-area: logo; display: flex; align-items: center; justify-self: start; margin-inline-start: var(--s-sp-2); }
.dv-chrome .dv-header__logo { display: inline-flex; align-items: center; height: var(--s-target); }
.dv-chrome .dv-header__logo img { height: var(--c-logo-h); width: auto; }
.dv-chrome .dv-header__catalog { display: none; }
.dv-chrome .dv-header__search { grid-area: search; align-self: start; }
.dv-chrome .dv-header__account { grid-area: account; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sp-2); height: var(--s-target); min-width: var(--s-target); text-decoration: none; border-radius: var(--s-radius); }
.dv-chrome .dv-header__account { transition: background-color var(--s-dur) var(--s-ease); }
.dv-chrome .dv-header__account:hover { background: var(--p-white-a12); }
.dv-chrome .dv-header__account:active { transform: translateY(var(--p-1)); }
.dv-chrome .dv-header__account-txt { display: none; font: var(--t-nav); }
.dv-chrome .dv-header__theme { grid-area: theme; }
.dv-chrome .dv-theme-ic { display: none; }
.dv-chrome[data-theme="auto"] .dv-theme-ic.is-auto, .dv-chrome[data-theme="light"] .dv-theme-ic.is-light, .dv-chrome[data-theme="dark"] .dv-theme-ic.is-dark { display: block; }
.dv-chrome .dv-header__cart { grid-area: cart; margin-inline-end: calc(-1 * var(--s-sp-2)); }
.dv-chrome .dv-header__count { position: absolute; inset-block-start: var(--p-2); inset-inline-end: var(--p-2); min-width: var(--p-20); height: var(--p-20); padding-inline: var(--s-sp-1); border-radius: var(--s-radius-dot); background: var(--p-pink-500); color: var(--p-white); font: var(--t-label); display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767px) {
  .dv-chrome [data-comp="header-container"].is-hidden { transform: translateY(-100%); }
}
@media (min-width: 768px) {
  .dv-chrome .dv-promo { display: block; height: var(--c-promo-h); background: var(--p-blue-700); font: var(--t-label); }
  .dv-chrome .dv-promo__in { display: flex; align-items: center; justify-content: space-between; height: 100%; }
    .dv-chrome .dv-header__main { grid-template-columns: auto auto 1fr auto auto auto; grid-template-areas: "logo catalog search theme account cart"; gap: var(--s-sp-5); padding-block-end: 0; }
  .dv-chrome .dv-header__menu { display: none; }
  .dv-chrome .dv-header__logo { margin-inline-start: 0; }
  .dv-chrome .dv-header__search { align-self: center; max-width: var(--p-640); width: 100%; justify-self: center; }
  .dv-chrome .dv-header__catalog { grid-area: catalog; display: inline-flex; align-items: center; gap: var(--s-sp-2); height: var(--s-target); padding-inline: var(--s-sp-3); border: var(--s-rule-w) solid var(--p-white-a24); border-radius: var(--s-radius); background: transparent; color: inherit; font: var(--t-nav); }
  .dv-chrome .dv-header__catalog { transition: background-color var(--s-dur) var(--s-ease); }
  .dv-chrome .dv-header__catalog:hover, .dv-chrome .dv-header__catalog[aria-expanded="true"] { background: var(--p-white-a12); }
  .dv-chrome .dv-header__catalog:active { transform: translateY(var(--p-1)); }
  .dv-chrome .dv-header__catalog[aria-expanded="true"] { box-shadow: inset 0 calc(-1 * var(--s-rule-w-2)) 0 var(--s-accent); }
  .dv-chrome .dv-header__account { padding-inline: var(--s-sp-3); }
  .dv-chrome .dv-header__account-txt { display: inline; }
  .dv-chrome .dv-header__cart { margin-inline-end: 0; }
}

/* Maldito lockup: DEVIR | head. Thin divider and head enter once (transform, opacity). Header stays Devir. */
.dv-chrome .dv-lockup__line { width: var(--s-rule-w); height: var(--c-logo-h); margin-inline: var(--c-lockup-clear); background: var(--p-white-a24); transform-origin: center; animation: dv-lockup-line var(--p-dur-in) var(--s-ease) both; }
.dv-chrome .dv-lockup__head { display: inline-flex; align-items: center; justify-content: flex-start; min-width: var(--s-target); height: var(--s-target); animation: dv-lockup-head var(--p-dur-in) var(--s-ease) var(--p-dur-fast) both; }
.dv-chrome .dv-lockup__head img { height: var(--c-lockup-head); width: auto; aspect-ratio: 240.88 / 220.08; }
@keyframes dv-lockup-line { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes dv-lockup-head { from { transform: translateX(calc(-1 * var(--p-8))); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dv-chrome .dv-lockup__line, .dv-chrome .dv-lockup__head { animation: none; } }
@media (min-width: 768px) { .dv-chrome .dv-header__brand { margin-inline-start: 0; } }

.dv-chrome [data-comp="top-search"] { position: relative; display: flex; align-items: center; width: 100%; height: var(--s-target); background: var(--s-surface); color: var(--s-text); border-radius: var(--s-radius); }
.dv-chrome .dv-search__icon { position: absolute; inset-inline-start: var(--s-sp-3); color: var(--s-text-muted); pointer-events: none; }
.dv-chrome .dv-search__input { flex: 1; min-width: 0; height: 100%; padding: 0 var(--s-sp-3) 0 var(--p-44); border: 0; background: transparent; font: var(--t-body); color: var(--s-text); border-radius: var(--s-radius); }
.dv-chrome .dv-search__input::placeholder { color: var(--s-text-muted); opacity: 1; }
.dv-chrome .dv-search__input:focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-dark); outline-offset: var(--p-2); }
.dv-chrome .dv-search__go { width: var(--s-target); height: 100%; border: 0; border-inline-start: var(--s-rule-w) solid var(--s-rule); background: var(--s-surface-tint); color: var(--s-text); display: inline-flex; align-items: center; justify-content: center; border-radius: 0 var(--s-radius) var(--s-radius) 0; }
.dv-chrome .dv-search__go { transition: background-color var(--s-dur) var(--s-ease); }
.dv-chrome .dv-search__go:hover { background: var(--p-navy-a16); }
.dv-chrome .dv-search__go:active { transform: translateY(var(--p-1)); }
.dv-chrome .dv-suggest { position: absolute; inset-inline: calc(-1 * var(--s-rule-w)); inset-block-start: calc(100% + var(--s-sp-1)); z-index: 60; max-height: 70dvh; overflow: auto; padding-block-end: var(--s-sp-2); }
.dv-chrome .dv-suggest__group { padding: var(--s-sp-3) var(--s-sp-4) var(--s-sp-1); color: var(--s-text-muted); }
.dv-chrome .dv-suggest__row { display: grid; grid-template-columns: var(--c-cover-ac) 1fr auto; gap: var(--s-sp-3); align-items: center; min-height: var(--s-target); padding: var(--s-sp-2) var(--s-sp-4); text-decoration: none; }
.dv-chrome .dv-suggest__row img { width: var(--c-cover-ac); height: var(--c-cover-ac); object-fit: contain; background: var(--c-cover-well); }
.dv-chrome .dv-suggest__row:hover, .dv-chrome .dv-suggest__row[aria-selected="true"] { background: var(--s-surface-tint); }
.dv-chrome .dv-suggest__row[aria-selected="true"] { box-shadow: inset var(--s-rule-w-2) 0 0 var(--s-text); }
.dv-chrome .dv-suggest__txt { display: grid; min-width: 0; }
.dv-chrome .dv-suggest__name { font: var(--t-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-chrome .dv-suggest__sku { font: var(--t-small); color: var(--s-text-muted); }
.dv-chrome .dv-suggest__sku b { color: var(--s-text); }
.dv-chrome .dv-suggest__cat { display: flex; align-items: center; justify-content: space-between; min-height: var(--s-target); padding-inline: var(--s-sp-4); text-decoration: none; font: var(--t-body); }
.dv-chrome .dv-suggest__cat:hover { background: var(--s-surface-tint); }
.dv-chrome .dv-suggest__empty { padding: var(--s-sp-4); display: grid; gap: var(--s-sp-2); }
.dv-chrome .dv-suggest:not([hidden]) { animation: dv-menu-in var(--p-dur-in) var(--s-ease) both; }
@media (prefers-reduced-motion: reduce) { .dv-chrome .dv-suggest:not([hidden]) { animation: none; } }
/* Dark only: the field fill (#10132a) is 1.22:1 against the navy header, so the field gets a 1 px edge (--s-edge, ~5:1 on the header). Light stays borderless (transparent). */
.dv-chrome [data-comp="header-container"] [data-comp="top-search"] { outline: var(--s-rule-w) solid light-dark(transparent, var(--s-edge)); outline-offset: calc(-1 * var(--s-rule-w)); }

.dv-chrome .dv-mega { position: fixed; inset: 0; z-index: 70; overflow: auto; border-block-start-width: 0; }
.dv-chrome .dv-mega__bar { display: flex; align-items: center; justify-content: space-between; height: var(--c-header-row); padding-inline: var(--s-gutter); }
.dv-chrome .dv-mega__grid { display: grid; gap: var(--s-sp-5); padding-block: var(--s-sp-4) var(--s-sp-7); }
.dv-chrome .dv-mega__cat { display: flex; align-items: center; justify-content: space-between; min-height: var(--p-48); font: var(--t-heading-sm); text-decoration: none; border-block-end: var(--s-rule-w) solid var(--s-rule); }
/* ONE line per category row in every state: the 1 px hairline at rest; on hover, focus and the current row it is replaced (never joined) by a 2 px accent line, and there is no text underline. */
.dv-chrome .dv-mega__cat:is(:hover, :focus-visible, [aria-current="true"]) { border-block-end-color: transparent; box-shadow: inset 0 calc(-1 * var(--s-rule-w-2)) 0 var(--s-accent); text-decoration: none; }
.dv-chrome .dv-mega__kid { display: flex; align-items: center; min-height: var(--p-48); text-decoration: none; font: var(--t-body); }
.dv-chrome .dv-mega__kid:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-6); }
.dv-chrome .dv-mega__kids, .dv-chrome .dv-mega__new { display: grid; align-content: start; gap: var(--s-sp-2); }
.dv-chrome .dv-mega__covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sp-3); }
.dv-chrome .dv-mega__cover { display: grid; gap: var(--s-sp-2); text-decoration: none; }
.dv-chrome .dv-mega__cover img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--c-cover-well); }
@media (min-width: 768px) {
  .dv-chrome .dv-mega { position: absolute; inset: 100% 0 auto; max-height: calc(100dvh - var(--c-header-row) - var(--c-promo-h)); border-block-start-width: var(--c-overlay-top-w); }
  .dv-chrome .dv-mega__bar { display: none; }
  .dv-chrome .dv-mega__grid { grid-template-columns: var(--p-280) 1fr var(--p-320); gap: var(--s-sp-6); padding-block: var(--s-sp-5) var(--s-sp-6); }
  .dv-chrome .dv-mega__cat, .dv-chrome .dv-mega__kid { min-height: var(--s-target); }
  .dv-chrome .dv-mega__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-sp-5); }
}
@media (min-width: 768px) { .dv-chrome .dv-mega[data-demo] { position: static; max-height: none; } }
.dv-chrome .dv-mega[data-demo] { position: static; inset: auto; overflow: visible; }
.dv-chrome .dv-mega[data-demo] .dv-mega__bar { display: none; }
.dv-chrome .dv-mega.is-open { animation: dv-menu-in var(--p-dur-in) var(--s-ease) both; }
@keyframes dv-menu-in { from { opacity: 0; transform: translateY(calc(-1 * var(--p-8))); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dv-chrome .dv-mega.is-open { animation: none; } }

/* Easter egg: hover or keyboard focus on "Maldito Games" retints the whole panel to the Maldito identity (tokens.css shares the Maldito token set via :has()). Header and footer stay Devir. */
.dv-chrome .dv-mega, .dv-chrome .dv-mega a, .dv-chrome .dv-mega p, .dv-chrome .dv-mega svg { transition: color var(--p-dur-in) var(--s-ease), background-color var(--p-dur-in) var(--s-ease), border-color var(--p-dur-in) var(--s-ease); }
.dv-chrome .dv-mega__mal { height: var(--p-40); opacity: 0; transform: translateY(var(--p-8)); transition: opacity var(--p-dur-in) var(--s-ease), transform var(--p-dur-in) var(--s-ease); }
.dv-chrome .dv-mega__mal img { height: 100%; width: auto; }
.dv-chrome .dv-mega:has(.dv-mega__cat--maldito:hover) .dv-mega__mal, .dv-chrome .dv-mega:has(.dv-mega__cat--maldito:focus-visible) .dv-mega__mal { opacity: 1; transform: none; }
.dv-chrome .dv-mega:has(.dv-mega__cat--maldito:hover) .dv-mega__cat[aria-current="true"], .dv-chrome .dv-mega:has(.dv-mega__cat--maldito:focus-visible) .dv-mega__cat[aria-current="true"]:not(:hover, :focus-visible) { box-shadow: none; border-block-end-color: var(--s-rule); }
@media (prefers-reduced-motion: reduce) { .dv-chrome .dv-mega, .dv-chrome .dv-mega a, .dv-chrome .dv-mega p, .dv-chrome .dv-mega svg, .dv-chrome .dv-mega__mal { transition: none; } .dv-chrome .dv-mega__mal { transform: none; } }

/* 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. */
@media (min-width: 768px) and (max-width: 1023px) {
  .dv-chrome .dv-mega__grid { grid-template-columns: var(--p-280) minmax(0, 1fr); }
  .dv-chrome .dv-mega__new { grid-column: 1 / -1; }
}
@media (min-width: 1024px) { .dv-chrome .dv-mega__grid { grid-template-columns: var(--p-280) minmax(0, 1fr) var(--p-320); } }
/* 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. */
.dv-chrome .dv-search__input { min-width: 0; }

/* 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-search__input:hover { background-color: var(--c-hover-tint); }
.dv-chrome .dv-search__input:active { background-color: var(--s-surface-tint); }
.dv-chrome .dv-header__logo img, .dv-chrome .dv-lockup__head img { transition: opacity var(--s-dur) var(--s-ease); }
.dv-chrome .dv-header__logo:hover img, .dv-chrome .dv-lockup__head:hover img { opacity: 0.75; }
.dv-chrome .dv-header__logo:active img, .dv-chrome .dv-lockup__head:active img { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .dv-chrome .dv-header__logo img, .dv-chrome .dv-lockup__head img { 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). */  /* 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-header__logo, .dv-chrome .dv-header__logo img, .dv-chrome .dv-lockup__head, .dv-chrome .dv-lockup__line { flex: none; }
.dv-chrome .dv-header__logo { min-width: var(--s-target); }

/* hand-authored tail (bundles.json) */
.dv-chrome .dv-header__theme { visibility: hidden; }
body.dv-page .dv-chrome .dv-header__theme { visibility: visible; }
html.is-locked { overflow: hidden; }