/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: page.
 * 9f3ea3ad80d18a4607e1f88195433104beb468651b131c7eb05d21cae6a535d8  components/qty-stepper.css
 * c8d471ffcf117463072ba1ff8e08c15a8f89d00a0a7526d0a4e9847632295a4e  components/bgg-attribution.css
 * 4741a27206f3ba400e0b100786c1b878b8f836714aace62be59b0ae820522f21  components/product-image-fallback.css
 * f9eef6694a9a67dd6592061361324a8b457ae08865196f7ece714efc1c69f244  components/breadcrumbs.css
 * 4d8e32edb8d29b87e8c059cee46f73b502048c065f139fb2afc437dfa2213662  components/product-price-final.css
 * 9aa28208ef48ff769d923d2b30d8a99021312434393047f64369d3c168ba54c1  components/product-info-stock-sku.css
 * 589fd6f713b6c19d0f2dbe5896b626c808c2a42cab9c542ad73eba382659102f  components/messages.css
 * c57d29a676b26fc6ebc4acacbec0a26a0f12609ac450a85b6e47bfcc5eff9c94  components/form-field.css
 * 9f94ff13b2625f96f745da37f3246a02702e3f5610c18c323c7f78f841930b5d  components/motion.css
 */
@layer components {
[data-comp="qty-stepper"] { display: inline-flex; align-items: stretch; border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-text); }
.dv-qty__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--s-target); height: var(--s-target); padding: 0; border: 0; background: transparent; color: inherit; }
.dv-qty__btn { transition: background-color var(--s-dur) var(--s-ease), transform var(--s-dur) var(--s-ease); }
.dv-qty__btn:hover:not(:disabled) { background: var(--c-hover-tint); }
.dv-qty__btn:active:not(:disabled) { transform: translateY(var(--p-1)); }
.dv-qty__btn:disabled { color: var(--s-text-muted); cursor: not-allowed; }
.dv-qty__input { flex: none; width: var(--p-56); height: var(--s-target); padding: 0; border: 0; border-inline: var(--s-rule-w) solid var(--s-rule); background: transparent; text-align: center; font: var(--t-button); -moz-appearance: textfield; appearance: textfield; }
.dv-qty__input::-webkit-outer-spin-button, .dv-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dv-qty__input:focus-visible { outline-offset: calc(-1 * var(--s-ring-w)); }
.dv-qty.is-invalid { border-color: var(--s-text-error); border-width: var(--s-rule-w-2); }

[data-comp="bgg-attribution"] { display: inline-flex; align-items: center; min-height: var(--s-target); margin-block: calc(-1 * var(--s-sp-2)); font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; color: var(--s-text-muted); text-decoration: underline var(--s-rule-w) currentColor; text-underline-offset: var(--p-4); }
[data-comp="bgg-attribution"]:hover { color: var(--s-text); }
[data-comp="bgg-attribution"].is-on-dark { color: var(--s-text-on-dark-muted); }
[data-comp="bgg-attribution"].is-on-dark:hover { color: var(--s-text-on-dark); }
.is-maldito [data-comp="bgg-attribution"].is-on-dark { color: var(--p-mg-ink-2-dark); }   /* neutral grey on Maldito cards */
.is-maldito [data-comp="bgg-attribution"].is-on-dark:hover { color: var(--p-white); }

.dv-nocover { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; width: 100%; height: 100%; min-height: var(--p-56); padding: var(--s-sp-3); background: var(--c-nocover-bg); border-radius: var(--s-radius); overflow: hidden; container: nocover / inline-size; }
.dv-nocover img { height: var(--p-32); width: auto; opacity: 0.4; }
.dv-nocover__name { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font: var(--t-poster); letter-spacing: var(--p-track-display); color: var(--c-nocover-ink, var(--s-text)); text-wrap: balance; overflow-wrap: anywhere; }
.dv-row__cover .dv-nocover { align-items: center; justify-content: center; padding: var(--s-sp-1); }
.dv-row__cover .dv-nocover img { height: var(--p-40); }
.dv-row__cover .dv-nocover__name, .dv-rankrow__cover .dv-nocover__name, .dv-minicart .dv-nocover__name { display: none; }

[data-comp="breadcrumbs"] { display: flex; align-items: center; min-height: var(--s-target); font: var(--t-small); }
.dv-crumbs__back { display: inline-flex; align-items: center; gap: var(--s-sp-1); min-height: var(--s-target); text-decoration: none; }
.dv-crumbs__back:hover { text-decoration: underline var(--s-rule-w-2) var(--s-accent); }
.dv-crumbs__list { display: none; }
@media (min-width: 768px) {
  .dv-crumbs__back { display: none; }
  .dv-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; }
  .dv-crumbs__list li { display: inline-flex; align-items: center; }
  .dv-crumbs__list li + li::before { content: "/"; margin-inline: var(--s-sp-2); color: var(--s-text-muted); }
  .dv-crumbs__list a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--s-target); min-width: var(--s-target); color: var(--s-text-muted); text-decoration: none; }
  .dv-crumbs__list a:hover { color: var(--s-text); text-decoration: underline var(--s-rule-w-2) var(--s-accent); }
  .dv-crumbs__list [aria-current] { color: var(--s-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--p-400); display: inline-block; }
}

[data-comp="product-price-final"] { display: grid; gap: var(--p-2); justify-items: start; }
.dv-price__was { color: var(--s-text-muted); }

[data-comp="product-info-stock-sku"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sp-2) var(--s-sp-4); }

[data-comp="messages"] { display: flex; align-items: flex-start; gap: var(--s-sp-3); padding: var(--s-sp-3) var(--s-sp-4); border: var(--s-rule-w) solid var(--s-edge); border-radius: var(--s-radius); background: var(--c-chip-info); color: var(--s-text); font: var(--t-body); }
[data-comp="messages"] .dv-icon { margin-block-start: var(--p-2); }
[data-comp="messages"].is-success { background: var(--c-chip-in); }
[data-comp="messages"].is-warning { background: var(--c-chip-warn); }
[data-comp="messages"].is-error { background: var(--c-chip-out); }

[data-comp="form-field"] { display: grid; gap: var(--s-sp-2); }
.dv-field__label { font: var(--t-small); }
.dv-field__input { width: 100%; height: var(--c-field-h); padding-inline: var(--s-sp-3); border: var(--s-rule-w) solid var(--c-field-edge); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-text); font: var(--t-body); }
.dv-field__input { transition: border-color var(--s-dur) var(--s-ease), background-color var(--s-dur) var(--s-ease); }
.dv-field__input:hover { border-color: var(--s-text); background: var(--c-hover-tint); }
.dv-field__input:focus-visible { outline: var(--s-ring-w) solid var(--s-focus-on-light); outline-offset: var(--p-1); border-color: var(--s-text); }
.dv-field__msg { display: flex; align-items: flex-start; gap: var(--s-sp-2); font: var(--t-small); color: var(--s-text-muted); }
.dv-field__msg.is-error { color: var(--s-text-error); }
.has-error .dv-field__input { border-color: var(--s-text-error); border-width: var(--s-rule-w-2); }
.is-disabled .dv-field__input { background: var(--c-field-disabled-bg); color: var(--s-text-muted); border-color: var(--s-rule); cursor: not-allowed; }
.is-disabled .dv-field__label { color: var(--s-text-muted); }

/* MOTION, round 4 (owner: "le faltan animaciones"). BRAND-RULES D-13 and section 11.
   Properties: transform, opacity, clip-path, stroke-dashoffset (colour only where an older component already had it). Durations 120 to 300 ms; the slab and hero entrance 400 ms, once, never a loop.
   Easing and times come from tokens (--p-ease, --p-ease-settle, --p-dur-*). Every effect lives inside prefers-reduced-motion: no-preference, so reduce = no motion and the final state is the base style.
   Every hover effect is paired with :focus-visible or :focus-within (keyboard sees what the mouse sees). Entrances switch off with html[data-reveal="off"] (the QA gates and the review hub use it).
   Registered in motion.html. Gate: qa/motion.mjs. */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Slab entrance (Maldito): a clip-path wipe from the left with a slight rotate settle. Final state is the base style, only a `from` frame is written. */
  @keyframes mo-slab-in { from { clip-path: inset(0 100% 0 0); transform: rotate(-1.4deg) translateY(var(--p-8)); } to { clip-path: inset(calc(-1 * var(--p-24))); transform: none; } }
  /* Large containers (the page-head band, the PDP buy slab) wipe and rise only: a rotated box would change its measured height and look like a layout shift. */
  @keyframes mo-band-in { from { clip-path: inset(0 100% 0 0); transform: translateY(var(--p-8)); } to { clip-path: inset(calc(-1 * var(--p-24))); transform: none; } }
  html:not([data-reveal="off"]) .mg-sl { animation: mo-slab-in var(--p-dur-slab) var(--p-ease-settle) both; }
  html:not([data-reveal="off"]) :is(.mg-band, [data-brand="maldito"] :is(.pdp-a__buy, .pdp-c__buy, .pdp-bar)) { animation: mo-band-in var(--p-dur-slab) var(--p-ease-settle) both; }

  html:not([data-reveal="off"]) .mo-slab.is-replay { animation: mo-slab-in var(--p-dur-slab) var(--p-ease-settle) both; }   /* specimen: replay on demand */

  /* 2. Hard-shadow press (Maldito cards, rows, tiles, disc): hover or focus lifts the face 2 x 3 px away from its shadow; :active translates the face ONTO the shadow. The shadow layer
        counter-translates so it never moves. transform only. */
  :is(.dv-card, .dv-crow, .dv-tile).is-maldito { --mo-x: var(--p-zero); --mo-y: var(--p-zero); transition: transform var(--p-dur-press) var(--s-ease), border-color var(--s-dur) var(--s-ease); }
  :is(.dv-card, .dv-crow, .dv-tile).is-maldito:is(:hover, :focus-within) { --mo-x: calc(-1 * var(--p-lift-x)); --mo-y: calc(-1 * var(--p-lift-y)); transform: translate(var(--mo-x), var(--mo-y)); }
  :is(.dv-card, .dv-crow, .dv-tile).is-maldito:active:not(:has(:is(button, input, select, .dv-bgg-link):active)) { --mo-x: var(--p-shape-off-sm-x); --mo-y: var(--p-shape-off-sm-y); transform: translate(var(--mo-x), var(--mo-y)); }
  :is(.dv-card, .dv-crow, .dv-tile).is-maldito::before { transition: transform var(--p-dur-press) var(--s-ease); transform: translate(calc(var(--p-shape-off-sm-x) - var(--mo-x)), calc(var(--p-shape-off-sm-y) - var(--mo-y))); }
  a.mg-disc, .mg-disc { --mo-x: var(--p-zero); --mo-y: var(--p-zero); }

  /* 3. CTA arrow nudge: the arrow glides 4 px on hover and keyboard focus. */
  .dv-btn svg:has(use[href*="i-arrow-right"]) { transition: transform var(--p-dur-in) var(--s-ease); }
  .dv-btn:is(:hover, :focus-visible):not(:disabled) svg:has(use[href*="i-arrow-right"]) { transform: translateX(var(--p-4)); }

  /* 4. Add-to-cart confirmation: the tick pops in with one soft overshoot, the label slides in. */
  @keyframes mo-tick { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
  @keyframes mo-done { from { opacity: 0; transform: translateY(var(--p-8)); } to { opacity: 1; transform: none; } }
  .dv-btn.is-done .dv-btn__done { animation: mo-done var(--p-dur-in) var(--s-ease) both; }
  .dv-btn.is-done .dv-btn__done .dv-icon { animation: mo-tick var(--p-dur-in) var(--p-ease-settle) var(--p-dur-fast) both; }

  /* 5. Quantity stepper: the buttons press in, the number bumps when it changes. */
  .dv-qty__btn:active:not(:disabled) { transform: scale(0.9); }
  @keyframes mo-bump { from { transform: scale(1.18); } to { transform: none; } }
  .dv-qty__input.is-bump { animation: mo-bump var(--p-dur-in) var(--p-ease-settle) both; }

  /* 6. Variant switch (PDP A / B / C): the old layout fades out, the new one rises in. */
  .pdp-main.is-swap-out { opacity: 0; transition: opacity var(--p-dur-out) var(--s-ease); }
  @keyframes mo-swap-in { from { opacity: 0; transform: translateY(var(--p-8)); } to { opacity: 1; transform: none; } }
  .pdp-main.is-swap-in { animation: mo-swap-in var(--p-dur-in) var(--s-ease) both; }

  /* 7. Theme switch: the whole page cross-fades (View Transitions, opacity only). The Review bar wraps the switch in document.startViewTransition. */
  ::view-transition-group(root) { animation-duration: var(--p-dur-in); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--p-dur-in); animation-timing-function: var(--p-ease); }

  /* 8. Page-head eyes pattern: no drift. The decorative pattern stays still on purpose (it already carries the slab; motion there fights the heading). */
}

/* Reduced motion, global net (WCAG 2.3.3): whatever an older component animates, nothing moves and nothing loops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
}