/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: page.
 * adeed187f7b39893f367fb76e79393f4c7ed58da7621b4033e0950bd75a03d7f  components/product-ledger-row.css
 * e1844e4ac96b321d1cb1b6ecfbb3f09d472b25218d2d663aa3139bf4d40a483d  components/product-tile.css
 * 3906fcf298b724c80cfe58d29b4dbdf626841e41f5b26b688e44645b9596c06e  components/product-card.css
 * e8523af274a3f4edbe1dacb2fb0bbd56cb6fafeb37cc1e388366249ffd8d8c2f  components/maldito-graphic.css
 * c0e22d4526361a2d196a312dbd1f6e7bb60a6dd5af0406fc335d6d14de9d2fe8  pages.css
 */
@layer components {
.dv-rows { container: dvrow / inline-size; display: grid; }
.dv-row { display: grid; grid-template-columns: var(--c-cover-row) 1fr auto; grid-template-areas: "cover main price" "cover stock stock" "buy buy buy"; gap: var(--s-sp-1) var(--s-sp-4); align-items: start; padding-block: var(--s-sp-4); border-block-end: var(--s-rule-w) solid var(--s-rule); transition: background-color var(--s-dur) var(--s-ease); }
.dv-row:last-child { border-block-end: 0; }
.dv-row:hover, .dv-row:focus-within { background: var(--c-hover-tint); }
.dv-row__cover { grid-area: cover; display: block; width: var(--c-cover-row); height: var(--c-cover-row); background: var(--c-cover-well); border-radius: var(--s-radius); overflow: hidden; }
.dv-row__cover { display: grid; place-items: center; padding: var(--s-sp-1); }
.dv-row__cover { position: relative; }
.dv-row__cover > img { position: absolute; inset: var(--s-sp-1); width: calc(100% - 2 * var(--s-sp-1)); height: calc(100% - 2 * var(--s-sp-1)); object-fit: contain; }  /* absolute: a percent height on a grid item let portrait covers overflow the box */
.dv-row__cover > .dv-nocover { grid-area: 1 / 1; margin: calc(-1 * var(--s-sp-1)); width: calc(100% + 2 * var(--s-sp-1)); height: calc(100% + 2 * var(--s-sp-1)); }
.dv-row__main { grid-area: main; display: grid; gap: var(--p-2); justify-items: start; min-width: 0; }
.dv-row__name { font: var(--t-heading-sm); }
.dv-row__name a { text-decoration: none; }
.dv-row__name a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
.dv-row__sku { font: var(--t-small); color: var(--s-text); display: flex; flex-wrap: wrap; gap: var(--p-1) var(--s-sp-4); }
.dv-pair { display: inline-flex; gap: var(--s-sp-1); white-space: nowrap; }
.dv-lead .dv-row__ean { display: none; }
.dv-row__k { color: var(--s-text-muted); }
.dv-row__code { }
.dv-row__stock { grid-area: stock; }
.dv-row__price { grid-area: price; text-align: end; white-space: nowrap; }
.dv-row__buy { grid-area: buy; display: flex; gap: var(--s-sp-2); align-items: center; padding-block-start: var(--s-sp-2); }
.dv-row__add { flex: 1; }
.dv-row.is-out .dv-row__cover { opacity: 0.6; }
/* Wide rows: the buy column has a FIXED width (stepper + Add, or the lone Unavailable button right-aligned in it), so price, stepper and Add line up down the whole list
   whatever the stock state (cardalign gate). Below 760 px of list width the buy zone drops to its own line, where Add fills the row in every state. */
@container dvrow (min-width: 760px) {
  .dv-row { grid-template-columns: var(--c-cover-row) minmax(0, 1fr) var(--p-96) var(--p-80) calc(var(--p-280) + var(--p-8)); grid-template-areas: "cover main stock price buy"; align-items: center; gap: var(--s-sp-5); padding-block: var(--s-sp-3); }
  .dv-row__stock { justify-self: start; }
  .dv-row__buy { padding-block-start: 0; justify-content: flex-end; }
  .dv-row__add { flex: none; min-width: var(--p-120); }
}
.dv-maldito-pill { display: inline-flex; align-items: center; padding: var(--s-sp-1) 0; background: none; border-radius: var(--s-radius); }
.dv-maldito-pill img { height: var(--p-20); width: auto; }

/* Name links: 44 px hit area without changing the layout (padding balanced by negative margin). */
.dv-row__name a, .dv-leadp h3 a, .dv-rankrow__main h3 a, .dv-cartrow__main > a, .dv-minicart__name { display: inline-block; min-width: var(--s-target); padding-block: calc((var(--s-target) - 1lh) / 2); margin-block: calc(-1 * (var(--s-target) - 1lh) / 2); }
.dv-row .dv-pair, .dv-tile .dv-pair { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.dv-row__main { min-width: 0; }

/* Card system, round 2: a card is ONE enclosed surface (tint ground, no border, no shadow). Zones: header (brand tag + stock), photo well, identity, commerce, footer action.
   Equal heights in a row; identity top-aligned, price and action pinned to the bottom. Cards in a row are separated by gaps, never by rules. */
.dv-tile { position: relative; display: flex; flex-direction: column; gap: var(--s-sp-3); min-width: 0; height: 100%; padding: var(--c-card-pad); background: var(--c-card-bg); border-radius: var(--s-radius); transition: transform var(--p-dur-lift) var(--s-ease); }
.dv-tile:hover, .dv-tile:focus-within { transform: translateY(var(--c-lift)); }
.dv-tile:active { transform: none; }
.dv-tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sp-2); height: var(--p-48); }  /* 48 for every brand: the Maldito wordmark tag is 48 tall, so a mixed row keeps its cover plates on one line */
.dv-tile__cover { display: grid; place-items: center; aspect-ratio: 1; padding: var(--s-sp-3); background: var(--c-cover-well); border-radius: var(--s-radius); overflow: hidden; }
.dv-tile__cover { position: relative; }
.dv-tile__cover > img { position: absolute; inset: var(--s-sp-3); width: calc(100% - 2 * var(--s-sp-3)); height: calc(100% - 2 * var(--s-sp-3)); object-fit: contain; }
.dv-tile__cover > .dv-nocover { grid-area: 1 / 1; margin: calc(-1 * var(--s-sp-3)); width: calc(100% + 2 * var(--s-sp-3)); height: calc(100% + 2 * var(--s-sp-3)); }
.dv-tile__id { display: flex; flex-direction: column; gap: var(--s-sp-1); align-items: flex-start; }
.dv-tile__name { font: var(--t-heading-sm); min-height: 2lh; }
.dv-tile__name a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: var(--s-target); padding-block: calc((var(--s-target) - 1lh) / 2); margin-block: calc(-1 * (var(--s-target) - 1lh) / 2); }
.dv-tile__name a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
.dv-tile__priceline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sp-2); margin-block-start: auto; min-height: var(--p-24); }
.dv-tile__price { margin: 0; }
.dv-tile.is-out .dv-tile__cover > img { opacity: 0.6; }
.dv-bggmini { display: inline-flex; align-items: center; gap: var(--s-sp-2); font: var(--t-small); }
.dv-bggmini__rank { font-weight: var(--s-weight-strong); }
.dv-bggmini__k { font-weight: var(--s-weight-body); }
/* Brand tags: integrated into the surface, flush in the top-left corner */

.dv-brandtag { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--s-sp-2); height: var(--c-brandtag-h); padding-inline: var(--c-card-pad) var(--s-sp-3); border-radius: var(--s-radius) 0 var(--s-radius) 0; margin: calc(-1 * var(--c-card-pad)) 0 0 calc(-1 * var(--c-card-pad)); }
.dv-brandtag img { height: var(--p-20); width: auto; }
.dv-brandtag.is-devir { background: var(--c-tag-devir-bg); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) :is(.dv-brandtag.is-devir, .dv-card__tab) img[src$="logo-devir-navy.png"] { filter: brightness(0) invert(1); } }
html[data-theme="dark"] :is(.dv-brandtag.is-devir, .dv-card__tab) img[src$="logo-devir-navy.png"] { filter: brightness(0) invert(1); }
/* Maldito tag, default treatment (c): the real sticker wordmark at a legible 100 px on a black tab in the corner of the surface (never below 96 px). */
.dv-brandtag.is-maldito { background: var(--c-tag-maldito-bg); padding-block: var(--p-3); }
.dv-brandtag.is-maldito img { height: auto; width: var(--p-100); }
/* Maldito logo on a dark ground (DIANA-001..005, 010, 012, 015, 019, 020): no tab, the manual's white-outline sticker with black ink (BRAND-RULES 11, p.12). The navy-ink file is for light grounds only; swap the asset, never filter it. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) img[src$="maldito-lockup-outline-navy.svg"] { content: url("../../images/devir/home/maldito-lockup-outline.svg"); }
  html:not([data-theme="light"]) img[src$="maldito-head-outline-navy.svg"] { content: url("../../images/devir/home/maldito-head-outline.svg"); }
}
html[data-theme="dark"] img[src$="maldito-lockup-outline-navy.svg"] { content: url("../../images/devir/home/maldito-lockup-outline.svg"); }
html[data-theme="dark"] img[src$="maldito-head-outline-navy.svg"] { content: url("../../images/devir/home/maldito-head-outline.svg"); }
/* Alternatives shown in decisions.html: (a) head alone in a square black tab, (b) head plus MALDITO in Graphik Black caps */
.dv-brandtag.is-v-a { padding-inline: var(--s-sp-2); }
.dv-brandtag.is-v-a img, .dv-brandtag.is-v-b img { width: auto; height: var(--p-32); }
.dv-brandtag.is-v-b { padding-inline: var(--s-sp-2) var(--s-sp-3); }
.dv-brandtag.is-v-b b { font: var(--t-heading-sm); letter-spacing: var(--p-track-label); color: var(--p-white); text-transform: uppercase; }
/* Horizontal compact variant (new arrivals strip): same surface, cover left */
.dv-hlist { display: grid; gap: var(--s-sp-3); }
.dv-hlist .dv-tile { display: grid; grid-template-columns: var(--p-96) 1fr; grid-template-areas: "cover head" "cover id" "cover price" "foot foot"; grid-template-rows: auto 1fr auto auto; align-items: start; gap: var(--s-sp-2) var(--s-sp-4); height: 100%; }
.dv-hlist .dv-tile__head { grid-area: head; }
.dv-hlist .dv-tile__cover { grid-area: cover; padding: var(--s-sp-2); }
.dv-hlist .dv-tile__cover > .dv-nocover { margin: calc(-1 * var(--s-sp-2)); width: calc(100% + 2 * var(--s-sp-2)); height: calc(100% + 2 * var(--s-sp-2)); }
.dv-hlist .dv-tile__id { grid-area: id; }
.dv-hlist .dv-tile__priceline { grid-area: price; margin: 0; flex-wrap: wrap; }
.dv-hlist .dv-tile__foot { grid-area: foot; }
.dv-hlist .dv-nocover__name { display: none; }
@media (min-width: 768px) { .dv-hlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .dv-tile:hover, .dv-tile:focus-within { transform: none; } }
.dv-brandtag.is-inline { margin: 0; border-radius: var(--s-radius); padding-inline: var(--s-sp-2); height: var(--p-40); }
.dv-hlist .dv-brandtag { margin: 0; border-radius: var(--s-radius); padding-inline: var(--s-sp-2); }
.dv-hlist .dv-brandtag.is-maldito img { width: var(--p-96); }

/* Surface rule: a component that paints its own ground declares ink, muted ink and rule with it (nothing inherits ink across a ground change). */
.dv-tile, .dv-bggc, .dv-leadp, .dv-reco:not(.is-selected) { color: var(--c-card-ink); --s-text: var(--c-card-ink); --s-text-muted: var(--c-card-ink-muted); --s-rule: var(--c-card-line); --s-surface: var(--c-card-bg); --s-edge: var(--c-card-ink-muted); --s-focus-on-light: var(--c-card-ink); --c-hover-tint: var(--c-card-hover); --c-btn-bg: var(--c-card-ink); --c-btn-fg: var(--c-card-bg); --c-btn-hover-bg: var(--c-card-hover-btn, var(--c-card-ink-muted)); --m-btn-hover: var(--c-card-hover-btn, var(--c-card-ink-muted)); --m-hover-bg: var(--c-card-hover); --c-btn-disabled-bg: var(--c-card-bg); --c-btn-disabled-fg: var(--c-card-ink-muted); --c-btn-disabled-edge: var(--c-card-line); --c-chip-quiet: var(--c-card-line); }
.dv-tile .dv-row__k, .dv-bggc .dv-row__k, .dv-leadp .dv-row__k, .dv-reco .dv-row__k { color: var(--c-card-ink-muted); }
.dv-tile .dv-btn.is-secondary:hover, .dv-bggc .dv-btn.is-secondary:hover { color: var(--s-surface); }

/* product-card + product-card-row (TV#153). Reads --c-pc-* (tokens.css); the variant (A Library-faithful, B square) is only tokens plus the tab position below.
   Zones, top to bottom: tab, plate, id (title, chip + line, SKU), strip (3 facts + source line), foot (price, stepper, Add). Equal heights: the card fills its grid cell,
   the title reserves 2 lines, the chip block reserves chip + 1 line, the strip is pinned down and has the same rows on every card. */
.dv-card, .dv-crow {
  container: pcard / inline-size;
  position: relative; min-width: 0; height: 100%;
  padding: var(--c-pc-pad);
  background: var(--c-pc-ground); color: var(--c-pc-ink);
  border: var(--s-rule-w) solid var(--c-pc-border); border-radius: var(--c-pc-radius); box-shadow: var(--c-pc-shadow);
  transition: transform var(--p-dur-lift) var(--s-ease), border-color var(--s-dur) var(--s-ease);
  /* surface rule: the card declares ink, muted ink, rule, accent, buttons and disabled state with its own ground */
  --s-text: var(--c-pc-ink); --s-text-muted: var(--c-pc-muted); --s-rule: var(--c-pc-line); --s-surface: var(--c-pc-ground); --s-edge: var(--c-pc-edge-ui);
  --s-focus-on-light: var(--c-pc-focus); --s-accent: var(--p-pink-500); --c-hover-tint: var(--c-pc-hover);
  --c-btn-bg: var(--c-pc-btn); --c-btn-fg: var(--c-pc-btn-fg); --c-btn-hover-bg: var(--c-pc-btn-hover); --m-btn-hover: var(--c-pc-btn-hover); --c-btn-hover-fg: var(--c-pc-btn-hover-fg, var(--c-btn-fg)); --m-hover-bg: var(--c-pc-hover);
  --c-btn-disabled-bg: var(--c-pc-dis-bg); --c-btn-disabled-fg: var(--c-pc-dis-fg); --c-btn-disabled-edge: var(--c-pc-dis-edge); --c-chip-quiet: var(--c-pc-chip-quiet);
}
.dv-card.is-maldito, .dv-crow.is-maldito { --s-accent: var(--p-red-500); }
/* Inner grid (the card itself is the container, so layout switches live one level down). Cover column left (sized by the art: square plate), tab then identity right, strip and buy zone full width below. */
.dv-card__in { display: grid; grid-template-columns: clamp(var(--p-96), 50%, var(--p-200)) minmax(0, 1fr); grid-template-areas: "plate tab" "plate id" "sku sku" "strip strip" "foot foot"; grid-template-rows: auto 1fr auto auto auto; column-gap: var(--s-sp-3); row-gap: var(--c-pc-gap-in); min-width: 0; height: 100%; align-content: start; }
.dv-card__in > .dv-card__plate { grid-area: plate; align-self: start; }
.dv-card__in > .dv-card__tab { grid-area: tab; position: static; justify-self: start; align-self: start; margin-block-start: calc(-1 * (var(--c-pc-pad) + var(--s-rule-w))); border-radius: 0 0 var(--c-pc-radius-tab) var(--c-pc-radius-tab); }
.dv-card__in > .dv-card__id { grid-area: id; }
.dv-card__in > .dv-row__sku { grid-area: sku; }  /* full card width on its own row: the legacy SKU is the B2B search key and is never cut */
.dv-card__in > .dv-card__strip { grid-area: strip; margin-block-start: calc(var(--c-pc-gap-group) - var(--c-pc-gap-in)); }  /* rhythm: tight (--c-pc-gap-in) inside a group, --c-pc-gap-group between groups */
.dv-card__in > .dv-card__foot { grid-area: foot; margin-block-start: calc(var(--c-pc-gap-group) - var(--c-pc-gap-in)); }  /* the hairline sits mid-way: generous space above (strip) and below (price) */
[data-card="a"] .dv-card__in { padding-block-start: calc(var(--c-pc-tab-h) / 2); }
[data-card="a"] .dv-card__in > .dv-card__tab { position: absolute; inset-block-start: calc(var(--c-pc-tab-h) / -2); inset-inline-start: 50%; translate: -50% 0; margin: 0; border-radius: var(--c-pc-radius-tab); }
.dv-crow { padding-block-start: calc(var(--c-pc-tab-h) + var(--s-sp-2)); gap: var(--c-pc-gap); }
.dv-card:hover, .dv-card:focus-within, .dv-crow:hover, .dv-crow:focus-within { transform: translateY(var(--c-lift)); border-color: var(--c-pc-edge-ui); }
.dv-card:active, .dv-crow:active { transform: none; }
.dv-card .dv-row__k, .dv-crow .dv-row__k { color: var(--c-pc-muted); }

/* Tab. B: flush in the top-left corner of the surface, bleeding to the edge. A: a pill straddling the top edge, centred (the Library pill). */
.dv-card__tab { position: absolute; inset-block-start: calc(-1 * var(--s-rule-w)); inset-inline-start: calc(-1 * var(--s-rule-w)); display: inline-flex; align-items: center; box-sizing: border-box; height: var(--c-pc-tab-h); padding-inline: var(--c-card-pad) var(--s-sp-3); background: var(--c-pc-tab); border-block-end: var(--s-rule-w-2) solid var(--c-pc-tab-edge); border-radius: var(--c-pc-radius) 0 var(--c-pc-radius-tab) 0; }
.dv-card__tab img { height: var(--p-24); width: auto; }
.dv-crow { container-name: pcrow; }
.is-maldito .dv-card__tab img { height: auto; width: var(--p-100); flex: none; }
.is-maldito .dv-card__tab { width: max-content; max-width: none; }
/* Brand tab on a card: logo only, no filled tile (design review, round 1). The Devir mark is navy on light and flips to white in dark mode. */
.dv-card__tab { background: none; border-color: transparent; box-shadow: none; }
[data-card="a"] .dv-card__in { padding-block-start: calc(var(--c-pc-tab-h) / 2); }
[data-card="a"] .dv-crow { padding-block-start: calc(var(--c-pc-tab-h) / 2 + var(--c-card-pad)); }
[data-card="a"] .dv-card__tab { inset-block-start: calc(var(--c-pc-tab-h) / -2); inset-inline-start: 50%; translate: -50% 0; padding-inline: var(--s-sp-4); border: var(--s-rule-w) solid var(--c-pc-tab-edge); border-radius: var(--c-pc-radius-tab); }

/* Plate: white, thin border, the real cover contained. */
.dv-card__plate { position: relative; --s-text: var(--c-pc-plate-ink); --c-nocover-bg: var(--c-pc-nocover); display: grid; place-items: center; aspect-ratio: 1; padding: var(--s-sp-1); background: var(--c-pc-plate); border: var(--s-rule-w) solid var(--c-pc-plate-line); border-radius: var(--c-pc-radius-in); overflow: hidden; }
.dv-card__plate > img { position: absolute; inset: var(--s-sp-1); width: calc(100% - 2 * var(--s-sp-1)); height: calc(100% - 2 * var(--s-sp-1)); object-fit: contain; }  /* absolute: a percent height on a grid item resolved to the image's own ratio and overflowed the plate */
.dv-card__plate > .dv-nocover { grid-area: 1 / 1; margin: calc(-1 * var(--s-sp-1)); width: calc(100% + 2 * var(--s-sp-1)); height: calc(100% + 2 * var(--s-sp-1)); border-radius: 0; }
.dv-card__plate .dv-nocover__name { -webkit-line-clamp: 2; font-size: var(--f-cq-poster); overflow-wrap: break-word; }
@container nocover (max-width: 100px) { .dv-card__plate .dv-nocover__name { display: none; } }
.dv-card.is-out .dv-card__plate > img, .dv-crow.is-out .dv-card__plate > img { opacity: 0.6; }

/* Identity: title (2 lines reserved), chip + line on ONE row, SKU. */
.dv-card__id { display: flex; flex-direction: column; gap: var(--c-pc-gap-in); align-items: flex-start; min-width: 0; }
.dv-card__name { font: var(--p-weight-black) var(--f-cq-title) / var(--p-lh-heading) var(--s-font); min-height: var(--s-target); line-height: calc(var(--s-target) / 2); width: 100%; }
.dv-card__name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; min-height: inherit; overflow-wrap: anywhere; }
.dv-card__name a::after { content: ""; position: absolute; inset: calc(-1 * var(--s-rule-w)); border-radius: var(--c-pc-radius); }
.dv-card__name a:focus-visible { outline: none; }
.dv-card__name a:focus-visible::after { outline: var(--s-ring-w) solid var(--c-pc-focus); outline-offset: var(--s-ring-offset); }
.dv-card:hover .dv-card__name a, .dv-crow:hover .dv-card__name a { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
.dv-card__status { display: flex; align-items: center; gap: var(--s-sp-2); width: 100%; min-width: 0; }
.dv-card__status .dv-badge { flex: none; min-height: var(--p-20); }
.dv-card__status .dv-card__line { max-width: 100%; }
.dv-card__line { flex: 1 1 0; min-width: 0; min-height: 1lh; display: block; overflow-wrap: anywhere; font: var(--p-weight-regular) var(--f-cq-small) / var(--p-lh-body) var(--s-font); color: var(--c-pc-muted); }
.dv-l-short { display: none; }
@container pcard (max-width: 360px) { .dv-card .dv-l-full { display: none; } .dv-card .dv-l-short { display: inline; } }
.dv-card .dv-row__sku, .dv-crow .dv-row__sku { font: var(--p-weight-regular) var(--f-cq-small) / var(--p-lh-body) var(--s-font); }
.dv-crow .dv-row__sku { font: var(--t-label); }
@container pcard (max-width: 240px) { .dv-card .dv-row__k { position: absolute; width: var(--p-1); height: var(--p-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* Strip: ONE compact dark row, three equal columns with hairline dividers; each fact is icon | value over label. A 20 px source caption closes it (same height on every card). */
.dv-card__strip { display: grid; gap: var(--s-sp-1); padding: var(--s-sp-2) var(--s-sp-2) var(--s-sp-1); background: var(--c-pc-strip); color: var(--c-pc-strip-ink); border: var(--s-rule-w) solid var(--c-pc-strip); border-radius: var(--c-pc-radius-in); }
.is-maldito > .dv-card__strip, .is-maldito .dv-card__strip { border-color: var(--c-pc-strip-rule); }
.dv-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.dv-card__facts > div { display: grid; grid-template-columns: auto minmax(0, auto); grid-template-areas: "ic v" "ic k"; justify-content: center; align-items: center; column-gap: var(--s-sp-1); padding-inline: var(--p-2); border-inline-start: var(--s-rule-w) solid var(--c-pc-strip-rule); min-width: 0; }
.dv-card__facts > div:first-child { border-inline-start: 0; }
.dv-card__facts dt { display: contents; font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--c-pc-strip-label); }
.dv-card__facts dt .dv-icon { grid-area: ic; color: var(--c-pc-ic); }
.dv-card__facts dt .dv-cfact__k { grid-area: k; line-height: var(--p-lh-heading); }
.dv-cfact.is-rate dt .dv-icon { color: var(--c-pc-ic-rate); }
.dv-cfact.is-weight dt .dv-icon { color: var(--c-pc-ic-weight); }
.dv-cfact.is-owned dt .dv-icon { color: var(--c-pc-ic-owned); }
.dv-card__facts dd { grid-area: v; margin: 0; font: var(--p-weight-black) var(--f-cq-val) / var(--p-lh-heading) var(--s-font); color: var(--c-pc-strip-ink); white-space: nowrap; }
@container pcard (max-width: 360px) {
  .dv-card .dv-card__facts dt { letter-spacing: var(--p-track-label-tight); }
  .dv-card .dv-card__facts > div { grid-template-columns: 1fr auto auto 1fr; grid-template-areas: none; }
  .dv-card .dv-card__facts dt .dv-icon { grid-area: auto; grid-column: 2; grid-row: 1; }
  .dv-card .dv-card__facts dd { grid-area: auto; grid-column: 3; grid-row: 1; }
  .dv-card .dv-card__facts dt .dv-cfact__k { grid-area: auto; grid-column: 1 / -1; grid-row: 2; text-align: center; }
}
/* Narrow cards (280 px of content and under): labels leave the screen (they stay for assistive tech) and the icon sits above the value, so six-digit counts never meet their neighbours. */
@container pcard (max-width: 280px) { .dv-card .dv-cfact__k { position: absolute; width: var(--p-1); height: var(--p-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .dv-card .dv-card__facts > div { grid-template-columns: minmax(0, 1fr); } .dv-card .dv-card__facts dt .dv-icon { grid-column: 1; grid-row: 1; justify-self: center; } .dv-card .dv-card__facts dd { grid-column: 1; grid-row: 2; justify-self: center; } }
.dv-card__src { display: flex; align-items: center; height: var(--p-20); border-block-start: var(--s-rule-w) solid var(--c-pc-strip-rule); padding-block-start: var(--s-sp-1); font: var(--t-label); line-height: var(--p-lh-tight); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--c-pc-strip-label); white-space: nowrap; }
.dv-card__src a { position: relative; z-index: 1; color: var(--c-pc-strip-label); }
.dv-card__src a:hover { color: var(--c-pc-strip-ink); }
.dv-card__src a:focus-visible { outline-color: var(--s-focus-on-dark); }

/* Footer zone (buy zone): price is part of it. Default c: price over the stepper, Add spans both rows. Wide containers: price, stepper, Add in ONE row. */
.dv-card__foot { display: grid; gap: var(--s-sp-2); padding-block-start: var(--p-10); border-block-start: var(--s-rule-w) solid var(--c-pc-line); }
.dv-card__pricebox { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sp-2); min-width: 0; }
.dv-card__price { font: var(--p-weight-black) var(--f-cq-price) / var(--p-lh-tight) var(--s-font); font-variant-numeric: tabular-nums; }
.dv-crow .dv-card__price { font: var(--t-price); line-height: var(--p-lh-tight); }
.dv-card__unit { font: var(--t-label); color: var(--c-pc-muted); white-space: nowrap; }
.dv-card__buy { display: flex; flex-wrap: wrap; gap: var(--s-sp-2); align-items: center; position: relative; z-index: 1; }
.dv-card__add { padding-inline: var(--s-sp-3); flex: 1 1 var(--p-96); min-height: var(--c-btn-h); }
@container pcard (max-width: 240px) { .dv-card__add, .dv-card__buy [data-comp="qty-stepper"] { min-height: calc(var(--s-target) + 2 * var(--s-rule-w)); } }  /* narrowest cards: 46 px for both, so the 1.45 height cap holds at 280 px */  /* 48: stepper and Add share one height in every brand and mode */
.dv-card__buy [data-comp="qty-stepper"] { box-sizing: border-box; min-height: var(--c-btn-h); background: var(--c-pc-ground); border-color: var(--c-pc-edge-ui); border-radius: var(--c-pc-radius-in); }
.dv-card__buy .dv-btn { border-radius: var(--c-pc-radius-in); }
.dv-card__buy .dv-qty__input:disabled { color: var(--c-pc-muted); }
/* out of stock: the dead stepper is no brighter than the Unavailable label (same disabled ink and edge, dark Maldito included) */
.dv-card.is-out .dv-card__buy [data-comp="qty-stepper"] { border-color: var(--c-pc-dis-edge); }
.dv-card.is-out .dv-card__buy .dv-qty__btn:disabled, .dv-card.is-out .dv-card__buy .dv-qty__input:disabled { color: var(--c-pc-dis-fg); }
.dv-card__foot { grid-template-columns: auto minmax(var(--p-96), 1fr); grid-template-areas: "price price" "step add"; column-gap: var(--s-sp-2); row-gap: var(--s-sp-1); align-items: stretch; }  /* ONE buy row: stepper and Add share the same box height, price on its own line above */
.dv-card__pricebox { grid-area: price; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--s-sp-2); }
.dv-card__buy { display: contents; }
.dv-card__buy [data-comp="qty-stepper"] { grid-area: step; position: relative; z-index: 1; }
.dv-card__add { grid-area: add; position: relative; z-index: 1; min-width: max-content; height: auto; }
@container pcard (max-width: 240px) {
  .dv-card__foot { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "price price" "step add"; }
  .dv-card__pricebox { justify-content: space-between; }
  .dv-card__add { height: auto; }
  .dv-card.is-out .dv-card__foot { grid-template-areas: "price price" "add add"; }
  .dv-card .dv-qty__input { width: var(--s-target); }  /* 44 px target kept; frees 12 px so Add stays 72 px or more next to the stepper */
}
@container pcard (max-width: 240px) { .dv-card.is-out .dv-card__buy [data-comp="qty-stepper"] { display: none; } }
@container pcard (max-width: 280px) {
  [data-buy="a"] .dv-card.is-out .dv-card__buy [data-comp="qty-stepper"], [data-buy="b"] .dv-card.is-out .dv-card__buy [data-comp="qty-stepper"] { display: none; }
  [data-buy="a"] .dv-card__buy, [data-buy="b"] .dv-card__buy { flex-wrap: nowrap; }
  [data-buy="a"] .dv-card__add, [data-buy="b"] .dv-card__add { flex: 1 1 0; min-width: 0; padding-inline: var(--p-2); }
}
/* a: price row, then stepper + Add in one row (hairline above the zone); b: the same in a tint block (buy-zone options on cards.html) */
[data-buy="a"] .dv-card__foot, [data-buy="b"] .dv-card__foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; row-gap: var(--s-sp-2); }
[data-buy="a"] .dv-card__pricebox, [data-buy="b"] .dv-card__pricebox { grid-area: auto; flex-direction: row; align-items: baseline; justify-content: space-between; }
[data-buy="a"] .dv-card__buy, [data-buy="b"] .dv-card__buy { display: flex; }
[data-buy="a"] .dv-card__buy [data-comp="qty-stepper"], [data-buy="b"] .dv-card__buy [data-comp="qty-stepper"] { grid-area: auto; }
[data-buy="a"] .dv-card__add, [data-buy="b"] .dv-card__add { grid-area: auto; min-width: 0; height: auto; }
[data-buy="b"] .dv-card__foot { padding: var(--s-sp-3); border-block-start: 0; background: var(--c-pc-block); border-radius: var(--c-pc-radius-in); }

/* Wider cards: the status chip and its line share one row from 480 px of content; under that they stack so neither is cut. */
@container pcard (max-width: 480px) { .dv-card__status { display: grid; justify-items: start; gap: var(--p-2); } }
@container pcard (min-width: 360px) and (max-width: 480px) { .dv-card__in > .dv-card__foot { grid-template-columns: auto minmax(var(--p-96), 1fr); grid-template-areas: "price price" "step add"; align-items: stretch; row-gap: var(--s-sp-1); } .dv-card__in > .dv-card__foot .dv-card__pricebox { justify-content: flex-start; } }
@container pcard (min-width: 480px) { .dv-card__in > .dv-card__foot { border-block-start: 0; padding-block-start: 0; grid-template-columns: var(--p-96) auto minmax(0, 1fr); grid-template-areas: "price step add"; align-items: center; column-gap: var(--s-sp-3); } .dv-card__in > .dv-card__foot .dv-card__add { height: auto; min-width: var(--p-96); } }
@container pcard (min-width: 640px) and (max-width: 1024px) { .dv-card .dv-cfact__k { position: absolute; width: var(--p-1); height: var(--p-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .dv-card .dv-card__facts > div { grid-template-columns: minmax(0, 1fr); } .dv-card .dv-card__facts dt .dv-icon { grid-column: 1; grid-row: 1; justify-self: center; } .dv-card .dv-card__facts dd { grid-column: 1; grid-row: 2; justify-self: center; } }
@container pcard (min-width: 760px) {
  .dv-card__in { grid-template-columns: clamp(var(--p-120), 22%, var(--p-200)) minmax(var(--p-240), 1fr) var(--p-320); grid-template-areas: "plate tab tab" "plate id id" "plate sku sku" "plate strip foot"; }
  .dv-card__in > .dv-card__foot { margin-block-start: 0; align-content: center; grid-template-columns: auto minmax(var(--p-96), 1fr); grid-template-areas: "price price" "step add"; align-items: stretch; row-gap: var(--s-sp-1); }
  .dv-card__in > .dv-card__foot .dv-card__pricebox { justify-content: flex-start; }
}

/* Grids that hold the new cards: columns reflow with auto-fill so a card is never narrower than 280 px (up to 4 across), instead of squeezing four cards into 1036 px. */
.dv-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--p-280), 100%), 1fr)); gap: calc(var(--s-sp-5) + var(--c-pc-tab-h)) var(--s-sp-5); align-items: stretch; }
.dv-cardgrid.is-4 { grid-template-columns: repeat(auto-fill, minmax(max(min(var(--p-280), 100%), calc((100% - 3 * var(--s-sp-5)) / 4)), 1fr)); }
[data-card="b"] .dv-cardgrid, .dv-cardgrid[data-card="b"] { row-gap: var(--s-sp-5); }
[data-card] .dv-results[data-view="cards"] [data-cards] { grid-template-columns: repeat(auto-fill, minmax(min(var(--p-280), 100%), 1fr)); gap: var(--s-sp-5); }
[data-card="a"] .dv-results[data-view="cards"] [data-cards] { row-gap: calc(var(--s-sp-5) + var(--c-pc-tab-h) / 2); }
[data-card] .dv-rail { grid-auto-columns: min(96%, var(--p-320)); }
@media (min-width: 768px) { [data-card] .dv-rail, [data-card] .dv-maldito .dv-rail { grid-template-columns: repeat(auto-fill, minmax(var(--p-280), 1fr)); } }
/* A straddling tab would be clipped by a scrolling rail: give the rail room above the cards. */
[data-card="a"] .dv-rail, [data-card="a"] .dv-hlist, [data-card="a"] .dv-xfam4 { padding-block-start: calc(var(--c-pc-tab-h) / 2); row-gap: calc(var(--s-sp-5) + var(--c-pc-tab-h) / 2); }
[data-card] .dv-hlist, [data-card] .dv-xfam4 { gap: var(--s-sp-4); grid-template-columns: repeat(auto-fill, minmax(min(var(--p-280), 100%), 1fr)); }

/* Ledger-row translation: same zones in a row, container-driven (the .dv-rows host is the container). */
.dv-rows:has(> .dv-crow) { gap: var(--s-sp-4); }
[data-card="a"] .dv-rows:has(> .dv-crow) { padding-block-start: calc(var(--c-pc-tab-h) / 2); row-gap: calc(var(--s-sp-4) + var(--c-pc-tab-h) / 2); }
.dv-crow { display: grid; grid-template-columns: var(--p-96) minmax(0, 1fr); grid-template-areas: "plate id" "sku sku" "strip strip" "foot foot"; gap: var(--c-pc-gap) var(--s-sp-4); align-items: start; }
.dv-crow > .dv-card__plate { grid-area: plate; aspect-ratio: 1; padding: var(--s-sp-2); }
.dv-crow > .dv-card__plate > img { inset: var(--s-sp-2); width: calc(100% - 2 * var(--s-sp-2)); height: calc(100% - 2 * var(--s-sp-2)); }
.dv-crow > .dv-card__plate > .dv-nocover { margin: calc(-1 * var(--s-sp-2)); width: calc(100% + 2 * var(--s-sp-2)); height: calc(100% + 2 * var(--s-sp-2)); }
.dv-crow .dv-nocover img { height: var(--p-40); }
.dv-crow > .dv-card__id { grid-area: id; }
.dv-crow > .dv-row__sku { grid-area: sku; }
.dv-crow > .dv-card__strip { grid-area: strip; margin: 0; }
.dv-crow > .dv-card__foot { grid-area: foot; }
.dv-crow .dv-card__name { min-height: var(--s-target); font: var(--t-heading-sm); }
@container dvrow (min-width: 760px) {
  .dv-crow { grid-template-columns: var(--p-96) minmax(0, 1fr) var(--p-320); grid-template-areas: "plate id foot" "plate sku foot" "plate strip foot"; }  /* fixed buy column: price, stepper and Add line up down the list in every stock state */
  .dv-crow > .dv-card__foot { border-block-start: 0; padding-block-start: 0; border-inline-start: var(--s-rule-w) solid var(--c-pc-line); padding-inline-start: var(--s-sp-4); align-self: stretch; align-content: center; min-width: 0; }
}
@container dvrow (min-width: 1024px) {
  .dv-crow { grid-template-columns: var(--p-96) minmax(0, 1fr) minmax(var(--p-240), var(--p-280)) var(--p-320); grid-template-areas: "plate id strip foot" "plate sku strip foot"; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .dv-card:hover, .dv-card:focus-within, .dv-crow:hover, .dv-crow:focus-within { transform: none; } }
.dv-card .dv-pair, .dv-crow .dv-pair { display: block; white-space: normal; overflow-wrap: normal; word-break: normal; min-width: 0; max-width: 100%; }  /* never clipped: if label and code cannot share the width, the line breaks at the SKU label, never inside the code */
.dv-card .dv-row__code, .dv-crow .dv-row__code { white-space: nowrap; }
.dv-card .dv-row__sku, .dv-crow .dv-row__sku { min-width: 0; max-width: 100%; }
@container dvrow (max-width: 1024px) {
  .dv-crow .dv-cfact__k { position: absolute; width: var(--p-1); height: var(--p-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .dv-crow .dv-card__facts > div { grid-template-areas: "ic" "v"; justify-items: center; }
}
@container dvrow (max-width: 280px) {
  .dv-crow > .dv-card__plate { width: var(--p-96); }
  .dv-crow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plate" "id" "sku" "strip" "foot"; }
}

/* Buy-zone options a and b keep their own foot layout at every container width (they win over the container-driven foot rules). */
[data-buy="a"] .dv-card .dv-card__in > .dv-card__foot, [data-buy="b"] .dv-card .dv-card__in > .dv-card__foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
[data-buy="a"] .dv-card .dv-card__in > .dv-card__foot .dv-card__pricebox, [data-buy="b"] .dv-card .dv-card__in > .dv-card__foot .dv-card__pricebox { grid-area: auto; justify-content: space-between; }
/* One buy row at every width: stepper and Add never wrap apart (options a and b); Add fills the rest of the row, 96 px at least. */
[data-buy="a"] .dv-card .dv-card__buy, [data-buy="b"] .dv-card .dv-card__buy { flex-wrap: nowrap; align-items: stretch; }
[data-buy="a"] .dv-card .dv-card__add, [data-buy="b"] .dv-card .dv-card__add { flex: 1 1 var(--p-96); min-width: var(--p-96); }
@container pcard (max-width: 280px) { [data-buy="a"] .dv-card .dv-card__add, [data-buy="b"] .dv-card .dv-card__add { min-width: 0; } }
@container pcard (max-width: 280px) { [data-buy="a"] .dv-card .dv-qty__input, [data-buy="b"] .dv-card .dv-qty__input { width: var(--s-target); } [data-buy="b"] .dv-card .dv-card__in > .dv-card__foot { padding-inline: var(--s-sp-1); } }  /* tight cards (a stage plate narrows them): 44 px input and a 4 px tint inset give Add its room back (96 px at 290 px and up, 70 px under it) */
/* Ledger row on the narrowest phones: the stepper and Add share one row, Add takes what is left. */
@container dvrow (max-width: 280px) { .dv-crow .dv-card__add { min-width: 0; padding-inline: var(--p-2); } .dv-crow .dv-qty__input { width: var(--s-target); } }

/* 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("../../images/devir/home/maldito-pattern-eyes.svg") 0 0 / var(--p-pattern-w) var(--p-pattern-h) repeat, url("../../images/devir/home/maldito-pattern-eyes.svg") 0 0 / var(--p-pattern-w) var(--p-pattern-h) repeat;
    mask: url("../../images/devir/home/maldito-pattern-eyes.svg") 0 0 / var(--p-pattern-w) var(--p-pattern-h) repeat add, url("../../images/devir/home/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; } }

/* Page-level compositions (listing, product page, cart, catalogue). Magento layout XML containers in the port. */
.dv-pagehead { padding-block: var(--s-sp-5) var(--s-sp-3); }
.dv-pagehead .dv-ledger-head { margin-block-end: 0; }
.dv-pagehead p.dv-t-lead { padding-block-start: var(--s-sp-3); }
.dv-listing { display: grid; gap: var(--s-sp-4); padding-block-end: var(--s-sp-7); }
.dv-results [data-cards] { display: none; }
.dv-results[data-view="cards"] [data-rows] { display: none; }
.dv-results[data-view="cards"] [data-cards] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sp-3); padding-block: var(--s-sp-4); }
@media (min-width: 768px) {
  .dv-listing { grid-template-columns: var(--p-240) 1fr; gap: var(--s-sp-7); align-items: start; }
  .dv-results[data-view="cards"] [data-cards] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 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: the grid cells are the sidebar and the main column, the price block comes from the Pricing Render. */
.dv-listing > .sidebar { display: contents; }
.dv-listing > .column.main { min-width: 0; }
/* @price:begin */
/* T-65 / GL-D65 (owner, 2026-10-27; deviation D-V2-1, reverses the fix1 default): a customer with a special price sees the ORIGINAL price struck through and muted under the customer's price, which keeps the 900 price weight. Styling only: Magento already prints both amounts. The mock draws one amount, so this is a documented deviation. The labels ("Special Price", "Regular Price") stay for screen readers. Qualifiers that change what the amount means ("As low as", "From", "To") stay visible. */
.dv-row__price .price-box, .dv-tile__price .price-box { display: flex; flex-direction: column; align-items: flex-end; gap: 0; margin: 0; padding: 0; }
.dv-tile__price .price-box { align-items: flex-start; }
.dv-row__price :is(.special-price, .old-price) .price-label, .dv-tile__price :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; }
.dv-row__price .price, .dv-tile__price .price { font: inherit; color: inherit; }
.dv-row__price .old-price, .dv-tile__price .old-price { font: var(--t-small); color: var(--s-text-muted); }
.dv-row__price .old-price .price, .dv-tile__price .old-price .price { text-decoration: line-through; text-decoration-thickness: var(--s-rule-w); }
.dv-row__price :is(.minimal-price-link, .price-from, .price-to) .price-container, .dv-tile__price :is(.minimal-price-link, .price-from, .price-to) .price-container { display: inline-flex; flex-direction: column; align-items: flex-end; }
.dv-tile__price :is(.minimal-price-link, .price-from, .price-to) .price-container { align-items: flex-start; }
.dv-row__price :is(.minimal-price-link, .price-from, .price-to) .price-label, .dv-tile__price :is(.minimal-price-link, .price-from, .price-to) .price-label { font: var(--t-small); color: var(--s-text-muted); white-space: nowrap; }
/* F2-01 / T65-01 (fix round 1): ONE price column for every row, 96 px wide, taken from the title column (1fr): no negative margin into the gap, so the out-of-stock badge (116.6 px in the 96 px stock column) never reaches the price cell. Stock, price and buy keep one x and width on every wide row (the fix2 per-row max-content drifted 599 to 603 px) and a 9 to 10 character price ("101,97 US$") fits the box. */
@container dvrow (min-width: 760px) { .dv-row { grid-template-columns: var(--c-cover-row) minmax(0, 1fr) var(--p-96) var(--p-96) calc(var(--p-280) + var(--p-8)); } }
/* @price:end */
.dv-row__price .devir-login-cta a, .dv-tile__price .devir-login-cta a { font: var(--t-small); color: var(--s-text); text-decoration: underline; text-underline-offset: var(--p-4); white-space: normal; }
.dv-results > .dv-rows { margin: 0; padding: 0; }
.dv-results > .dv-tilegrid { margin: 0; }
/* The core stock wrapper (div.stock, the shape the F7 guest scrubber removes) must not add a box between the mock's flex items. */
.dv-results .stock { display: contents; }
/* Deviation from the mock: the out-of-stock badge is wider than a two-column card at phone widths and pushed the page sideways (G3); it may now wrap its label inside the card. Unchanged where it fits. */
.dv-tile__priceline .dv-badge { white-space: normal; text-align: center; min-width: 0; }
/* Deviation from the mock: four card columns in the 768 to 1023 px band (rail beside them) leave about 98 px per card and the card content pushes the page 22 px wider (G3); three columns there. */
@media (min-width: 768px) and (max-width: 1023px) { .dv-results[data-view="cards"] [data-cards] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* F-05: no is-out class reaches the markup (the F7 guest scrubber cannot remove a class); the dimming follows the stock node the scrubber does remove. */
.dv-row:has(.stock.unavailable) .dv-row__cover { opacity: 0.6; }
.dv-tile:has(.stock.unavailable) .dv-tile__cover > img { opacity: 0.6; }
}