/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: page.
 * 1d0111afa362f6d78aeb682dc6bf3442bb5c4f216367a2c5e03a6a3dafdaba7b  components/bgg-stats.css
 * (note: components/bgg-stats.css cut at byte 1398: unparsable tail "[data-brand=\"maldito\"] " dropped)
 * e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855  components/recommendation-tile.css
 * c136c9e690df7a10ac6f8cda527ff174e4224ea1b043224daf84e64362e8076f  components/cross-sell-strip.css
 */
@layer components {
.dv-bggstats { display: grid; gap: var(--s-sp-2); padding: var(--s-sp-3); background: var(--c-panel-well); color: var(--s-text); border-radius: var(--s-radius); }
.dv-bggstats__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.dv-bggstats__cols > div { display: grid; justify-items: center; gap: var(--s-sp-1); padding-inline: var(--s-sp-2); }
.dv-bggstats__cols > div + div { border-inline-start: var(--s-rule-w) solid var(--s-rule); }
.dv-bggstats dt { font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); }
.dv-bggstats dd { margin: 0; display: flex; align-items: center; gap: var(--s-sp-1); min-height: var(--c-hex-size); font: var(--t-price); }
.dv-bggstats__w { color: var(--p-orange-500); }
.dv-bggstats__o { color: var(--p-pink-500); fill: currentColor; width: var(--p-16); height: var(--p-16); }
.dv-bggstats [data-comp="bgg-attribution"] { justify-self: center; min-height: var(--s-target); margin-block: calc(-1 * var(--s-sp-2)); color: var(--s-text-muted); }
[data-brand="maldito"] .dv-bggstats { background: var(--p-black-950); color: var(--p-white); }
[data-brand="maldito"] .dv-bggstats__cols > div + div { border-color: var(--p-black-line); }
[data-brand="maldito"] .dv-bggstats dt, [data-brand="maldito"] .dv-bggstats [data-comp="bgg-attribution"] { color: var(--p-mg-ink-2-dark); }



.dv-xsell__sub { padding-block-end: var(--s-sp-4); }
.dv-reason { display: inline-flex; align-items: center; gap: var(--s-sp-2); min-height: var(--p-24); font: var(--t-small); color: var(--s-text); }
.dv-reason .dv-icon { color: var(--s-accent); }
.dv-xfam { display: grid; gap: var(--s-sp-3); }
@media (min-width: 768px) { .dv-xfam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-reco { position: relative; display: grid; grid-template-columns: var(--p-96) 1fr; grid-template-areas: "cover body" "foot foot"; gap: var(--s-sp-3) var(--s-sp-4); align-items: start; padding: var(--c-card-pad); background: var(--c-card-bg); border-radius: var(--s-radius); transition: transform var(--p-dur-lift) var(--s-ease), background-color var(--s-dur) var(--s-ease); }
.dv-reco:hover, .dv-reco:focus-within { transform: translateY(var(--c-lift)); }
.dv-reco.is-selected { background: var(--s-text); color: var(--s-surface); --s-text: var(--p-white); --s-text-muted: var(--p-slate-200); --c-card-bg: var(--p-navy-900); }
.dv-reco.is-selected .dv-row__k { color: var(--p-slate-200); }
.dv-reco.is-selected .dv-reason .dv-icon { color: var(--p-white); }
.dv-reco.is-out { opacity: 0.7; }
.dv-reco__cover { grid-area: cover; display: grid; place-items: center; width: var(--p-96); height: var(--p-96); padding: var(--s-sp-2); background: var(--c-cover-well); border-radius: var(--s-radius); overflow: hidden; }
.dv-reco__cover > img { width: 100%; height: 100%; object-fit: contain; }
.dv-reco__cover > .dv-nocover { grid-area: 1 / 1; margin: calc(-1 * var(--s-sp-2)); width: calc(100% + 2 * var(--s-sp-2)); height: calc(100% + 2 * var(--s-sp-2)); }
.dv-reco__body { grid-area: body; display: grid; gap: var(--s-sp-1); justify-items: start; padding-inline-end: var(--s-target); min-width: 0; }
.dv-reco__chip { display: inline-flex; align-items: center; padding: var(--p-2) var(--s-sp-2); background: var(--c-chip-bg); color: var(--c-badge-fg); border-radius: var(--s-radius); }
.dv-reco__name { font: var(--t-heading-sm); }
.dv-reco__name a { text-decoration: none; display: inline-block; min-width: var(--s-target); padding-block: var(--s-hit); margin-block: calc(-1 * var(--s-hit)); }
.dv-reco__name a:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); text-underline-offset: var(--p-4); }
.dv-reco__foot { grid-area: foot; display: flex; flex-wrap: wrap; gap: var(--s-sp-3); align-items: center; }
.dv-reco__check { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: grid; place-items: center; width: var(--s-target); height: var(--s-target); cursor: pointer; }
.dv-reco__check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dv-reco__check input:checked + .dv-check__box { background: var(--s-surface); border-color: var(--s-surface); }
.dv-reco__check input:checked + .dv-check__box::after { content: ""; width: var(--p-6); height: var(--p-12); border: solid var(--p-navy-900); border-width: 0 var(--s-rule-w-2) var(--s-rule-w-2) 0; transform: rotate(45deg) translate(calc(-1 * var(--p-1)), calc(-1 * var(--p-1))); }
.dv-reco__check input:focus-visible + .dv-check__box { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: var(--s-ring-offset); }
.dv-reco.is-selected .dv-reco__check input:focus-visible + .dv-check__box { outline-color: var(--s-focus-on-dark); }
.dv-reco.is-selected [data-comp="qty-stepper"] { --s-surface: var(--p-white); --s-text: var(--p-navy-900); }
.dv-reco.is-selected .dv-reco__chip { background: var(--p-white-a24); color: var(--p-white); }
.dv-xsum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-sp-3); margin-block-start: var(--s-sp-3); padding: var(--s-sp-3) var(--s-sp-4); background: var(--c-card-bg); border-radius: var(--s-radius); }
.dv-xsum__txt { display: flex; align-items: baseline; gap: var(--s-sp-4); }
.dv-xrail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .dv-xrail { grid-template-columns: none; } }
@media (prefers-reduced-motion: reduce) { .dv-reco:hover, .dv-reco:focus-within { transform: none; } }
.dv-reason__t { min-width: 0; }  /* one wrapping text run next to the icon: without it each text node and <b> is its own flex item and the line breaks mid phrase */
}