@font-face {
  font-family: Montserrat;
  src: url('/assets/fonts/montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('/assets/fonts/great-vibes.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --focus-ring: var(--focus-on-light); --link-hover-color: var(--color-black); --link-hover-thickness: 2px;

  color-scheme: light;
  font-family: var(--font-sans);
  color: var(--color-black);
  background: var(--color-white);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; font: var(--type-body); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; font-weight: var(--weight-medium); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); }
h1, h2 { text-wrap: balance; }
h3 { font: var(--type-heading-sm); }
p { text-wrap: pretty; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--space-4);
}
[hidden] { display: none !important; }
main:focus, section[tabindex='-1']:focus { outline: none; }
.container { margin-inline: auto; width: min(1280px, calc(100% - var(--gutter) * 2)); }
.icon { width: var(--icon-medium); height: var(--icon-medium); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { --focus-ring: var(--focus-on-dark); position: fixed; left: var(--space-24); top: var(--space-8); max-width: calc(100% - var(--space-48)); z-index: 20; padding: var(--space-12) var(--space-20); background: var(--color-yellow); color: var(--color-black); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.preview-line { --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; background: var(--surface-dark-hover); color: var(--text-on-dark-secondary); font: var(--type-caption); padding-block: var(--space-8); }
.preview-line .container { display: flex; gap: var(--space-8); align-items: center; }
.preview-dot { width: var(--space-4); height: var(--space-4); background: var(--color-yellow); }
/* One button model: L by default; M, S and Icon override only size variables.
   Existing component names are aliases so client and server markup share it. */
:is(.button, .lineup-link, .lineup-add, .product-add, .play-guide-demo-button,
  .header-cart, .menu-toggle, .cart-close, .game-dialog-close, .dialog-close,
  .gameplay-preview-close, :where(.cart-quantity) button, .video-control,
  .gameplay-preview-zoom, .checkout-all-self, .surmav-inspect, .play-guide-inspect) {
  --control-height: var(--button-height);
  --control-py: var(--space-12);
  --control-px: var(--space-24);
  --control-gap: var(--space-16);
  --control-icon: var(--icon-medium);
  --control-font: var(--type-body);
  --control-bg: transparent;
  --control-hover: var(--wash-dark-hover);
  --control-pressed: var(--wash-dark-pressed);
  --control-color: inherit;
  --control-border: transparent;
  --control-border-hover: var(--control-border);
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  min-width: var(--touch-min);
  max-width: 100%;
  padding: var(--control-py) var(--control-px);
  gap: var(--control-gap);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  background: var(--control-bg);
  color: var(--control-color);
  font: var(--control-font);
  font-weight: var(--weight-medium);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
:is(.button, .lineup-link, .lineup-add, .product-add, .play-guide-demo-button,
  .header-cart, .menu-toggle, .cart-close, .game-dialog-close, .dialog-close,
  .gameplay-preview-close, :where(.cart-quantity) button, .video-control,
  .gameplay-preview-zoom, .checkout-all-self, .surmav-inspect, .play-guide-inspect):not(:disabled, [aria-disabled='true']):hover {
  background: var(--control-hover);
  border-color: var(--control-border-hover);
}
:is(.button, .lineup-link, .lineup-add, .product-add, .play-guide-demo-button,
  .header-cart, .menu-toggle, .cart-close, .game-dialog-close, .dialog-close,
  .gameplay-preview-close, :where(.cart-quantity) button, .video-control,
  .gameplay-preview-zoom, .checkout-all-self, .surmav-inspect, .play-guide-inspect):not(:disabled, [aria-disabled='true']):active {
  background: var(--control-pressed);
  border-color: var(--control-border-hover);
}
:is(.button, .lineup-link, .lineup-add, .product-add, .play-guide-demo-button,
  .header-cart, .menu-toggle, .cart-close, .game-dialog-close, .dialog-close,
  .gameplay-preview-close, :where(.cart-quantity) button, .video-control,
  .gameplay-preview-zoom, .checkout-all-self, .surmav-inspect, .play-guide-inspect) .icon {
  width: var(--control-icon);
  height: var(--control-icon);
  flex-shrink: 0;
}
.button--medium, .button--header, .button--small-light, .cart-continue {
  --control-height: var(--button-compact-height);
  --control-py: var(--space-8);
  --control-px: var(--space-16);
  --control-gap: var(--space-12);
}
.button--small, .video-control, .gameplay-preview-zoom, .checkout-all-self, .surmav-inspect, .play-guide-inspect {
  --control-height: var(--touch-min);
  --control-py: var(--space-8);
  --control-px: var(--space-12);
  --control-gap: var(--space-8);
  --control-icon: var(--icon-small);
  --control-font: var(--type-small);
}

.button--icon, .header-cart, .menu-toggle, .cart-close, .game-dialog-close,
.dialog-close, .gameplay-preview-close, .cart-quantity button {
  --control-height: var(--touch-min);
  --control-py: 0;
  --control-px: 0;
  --control-gap: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  flex-shrink: 0;
}
/* Five variants, shared by all sizes. Surface containers own the focus color. */
.button--primary, .button--small-light, .lineup-add, .product-add {
  --control-bg: var(--color-yellow);
  --control-hover: var(--color-yellow-hover);
  --control-pressed: var(--color-yellow-pressed);
  --control-color: var(--color-black);
}
.button--outline-light, .button--header, .lineup-link, .play-guide-demo-button, .cart-continue, .surmav-inspect, .play-guide-inspect {
  --control-bg: var(--scrim-on-image);
  --control-hover: linear-gradient(var(--wash-dark-hover), var(--wash-dark-hover)), var(--scrim-on-image);
  --control-pressed: linear-gradient(var(--wash-dark-pressed), var(--wash-dark-pressed)), var(--scrim-on-image);
  --control-color: var(--text-on-dark);
  --control-border: var(--border-control-dark);
  --control-border-hover: var(--border-control-dark-hover);
}
.button--outline, .companies-section .play-guide-demo-button {
  --control-bg: transparent;
  --control-hover: var(--wash-light-hover);
  --control-pressed: var(--wash-light-pressed);
  --control-color: var(--text-on-light);
  --control-border: var(--border-control-light);
  --control-border-hover: var(--color-black);
}
.button--dark, .gift-copy .play-guide-demo-button, .purchase-panel > .button--primary {
  --control-bg: var(--color-black);
  --control-hover: var(--color-black-hover);
  --control-pressed: var(--color-black-pressed);
  --control-color: var(--text-on-dark);
  --control-border: transparent;
  --control-border-hover: transparent;
}
.button--ghost, .button--text, .video-control, .checkout-all-self {
  --control-bg: transparent;
  --control-hover: transparent;
  --control-pressed: transparent;
  --control-border: transparent;
  --control-border-hover: transparent;
  border: 0;
}
:is(.button--ghost, .button--text, .video-control, .checkout-all-self):not(:disabled, [aria-disabled='true']):hover {
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}
.game-dialog-close, .dialog-close {
  --control-hover: var(--wash-light-hover);
  --control-pressed: var(--wash-light-pressed);
}
.header-cart[aria-expanded='true'], .menu-toggle[aria-expanded='true'] { background: var(--wash-dark-hover); color: var(--text-on-dark); }
button:disabled, .button[aria-disabled='true'], .lineup-link[aria-disabled='true'],
.checkout-choice:has(input:disabled) {
  opacity: .4;
  cursor: default;
}

/* Fields share a visible label, border, typography and focus on each surface. */
.checkout-page, .partner-gift-section {
  --field-border: var(--border-control-dark);
  --field-color: var(--text-on-dark);
  --field-bg: var(--surface-dark-raised);
  --field-error: var(--color-error-on-dark);
  --field-placeholder: var(--text-on-dark-placeholder);
  color-scheme: dark;
}
.demo-form {
  --field-border: var(--border-control-light);
  --field-color: var(--text-on-light);
  --field-bg: var(--surface-light);
  --field-error: var(--color-error-on-light);
  --field-placeholder: var(--text-on-light-muted);
}
:where(.checkout-form, .checkout-shipping, .partner-field, .demo-form, #discount-form) :is(input:not([type='radio'], [type='checkbox']), select, textarea) {
  appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--field-height, var(--button-height));
  margin: 0;
  padding: var(--field-py, var(--space-12)) var(--field-px, var(--space-16));
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  color: var(--field-color);
  background-color: var(--field-bg);
  font: var(--type-body);
}
:where(.checkout-form, .checkout-shipping, .partner-field, .demo-form, #discount-form) :is(input, textarea)::placeholder { color: var(--field-placeholder); opacity: 1; }
:where(.checkout-form, .checkout-shipping, .partner-field, .demo-form, #discount-form) :is(input, select, textarea)[aria-invalid='true'] { border-color: var(--field-error); }
:is(.checkout-form, .checkout-shipping, .partner-field) select {
  padding-right: calc(var(--space-16) + var(--icon-small) + var(--space-8));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: var(--icon-small);
  cursor: pointer;
}
:is(.checkout-form, .checkout-shipping, .checkout-legal) input:is([type='radio'], [type='checkbox']) {
  width: var(--icon-medium);
  height: var(--icon-medium);
  min-height: 0;
  flex: 0 0 var(--icon-medium);
  padding: 0;
  margin: 0;
  accent-color: var(--color-yellow);
}
/* Native radios retain keyboard semantics; choice tiles show the guide's check. */
.checkout-choice input[type='radio'] {
  appearance: none;
  display: grid;
  place-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-yellow);
}
.checkout-choice input[type='radio']::before {
  content: '';
  width: 6px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  visibility: hidden;
}
.checkout-choice input:checked::before { visibility: visible; }
.checkout-choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: var(--space-4); }
.checkout-choice input:focus-visible { outline: none; }
.checkout-choice:has(input:disabled) { cursor: default; }
.checkout-choice:not(:has(input:disabled)):hover { border-color: var(--border-control-dark-hover); background: var(--wash-dark-hover); }
.checkout-choice:not(:has(input:disabled)):active { background: var(--wash-dark-pressed); }
.checkout-terms input[aria-invalid='true'] { outline: 1px solid var(--color-error-on-dark); outline-offset: var(--space-4); }
.checkout-terms input[aria-invalid='true']:focus-visible { outline: 2px solid var(--focus-ring); }

/* The header stays in view while scrolling; anchors and focus land below it. */
html { scroll-padding-top: var(--header-height); }
.site-header { background: var(--color-black); color: var(--color-white); border-bottom: 1px solid var(--line-dark-subtle); position: sticky; top: 0; z-index: 15; --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
.header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: var(--header-height); position: relative; gap: var(--space-40); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--touch-min); }
.brand img { width: 210px; height: auto; }
.site-header .brand { justify-self: start; min-width: 0; max-width: 100%; }
.site-header .brand img { width: 184px; max-width: 100%; }
.site-navigation { display: flex; align-items: center; font: var(--type-small); gap: var(--space-32); }
.site-navigation > a { display: inline-flex; align-items: center; color: var(--text-on-dark-muted); min-height: var(--touch-min); transition: color var(--duration-fast) var(--ease-out); }
.site-navigation > a:hover, .site-navigation > a[aria-current] { color: var(--color-white); }
.site-navigation > a:active { color: var(--color-yellow-pressed); }
.header-actions { display: flex; align-items: center; justify-self: end; gap: var(--space-4); color: var(--text-on-dark-muted); }
.language-switch { position: relative; font: var(--type-small); }
.language-switch > summary { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-width: var(--space-56); min-height: var(--touch-min); padding-inline: var(--space-8); color: inherit; border-radius: var(--radius-control); cursor: pointer; list-style: none; }
.language-switch > summary::-webkit-details-marker { display: none; }
.language-switch > summary .icon { width: var(--space-12); height: var(--space-12); transition: transform var(--duration-base) var(--ease-in-out); }
.language-switch[open] > summary, .language-switch > summary:hover { color: var(--color-white); background: var(--wash-dark-hover); }
.language-switch[open]:not(.is-closing) > summary .icon { transform: rotate(180deg); }
.language-options { position: absolute; z-index: 12; right: 0; top: calc(100% + var(--space-8)); width: 168px; margin: 0; padding: var(--space-8); list-style: none; background: var(--surface-dark-raised); border: 1px solid var(--line-dark); border-radius: var(--radius-container); box-shadow: var(--shadow-popover); }
.language-switch > summary, .language-options a { transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.language-options a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--touch-min); padding: var(--space-8) var(--space-12); color: var(--text-on-dark-secondary); border-radius: var(--radius-control); }
.language-options a:hover, .language-options a[aria-current] { color: var(--color-white); background: var(--wash-dark-hover); }
.language-options a .icon { color: var(--color-yellow); width: var(--icon-small); height: var(--icon-small); }
.header-cart { position: relative; }

.header-cart { position: relative; }
/* Round count badge: 8 px is half its 16 px height, preserving a pill for wider counts. */
.cart-count { position: absolute; top: 0; right: 0; display: grid; place-items: center; min-width: var(--space-16); height: var(--space-16); padding-inline: var(--space-4); border-radius: var(--radius-container); background: var(--color-yellow); color: var(--color-black); font: var(--type-caption); }
.menu-toggle { display: none; }

.inline-link { display: inline-flex; min-height: var(--touch-min); align-items: center; gap: var(--space-16); font: var(--type-body); font-weight: var(--weight-medium); }

.hero { --hero-min-height: 600px; background: var(--color-black); color: var(--color-white); position: relative; display: flex; flex-direction: column; min-height: var(--hero-min-height); isolation: isolate; overflow: clip; --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--scrim-hero); }
.hero-layout { position: relative; z-index: 2; flex: 1; display: flex; justify-content: flex-start; align-items: center; padding-block: var(--space-80) var(--space-40); text-align: left; }
.hero-copy { width: min(800px, 100%); }
.hero h1 { white-space: pre-line; letter-spacing: var(--tracking-heading); font: var(--type-display); text-wrap: balance; }
.hero-lead { max-width: 36em; margin-top: var(--space-20); color: var(--text-on-dark-secondary); font: var(--type-lead); text-wrap: pretty; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); padding: 0; margin: var(--space-24) 0 0; list-style: none; color: var(--text-on-dark-secondary); font: var(--type-body); }
.hero-benefits li { display: inline-flex; align-items: center; gap: var(--space-8); }
.hero-benefits .icon { flex-shrink: 0; width: var(--icon-small); height: var(--icon-small); color: var(--text-on-dark-muted); }
.hero-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-32); margin-top: var(--space-32); }

.hero-actions .button--primary { min-width: min(var(--button-hero-min-width), 100%); }

.hero-film { position: absolute; z-index: 0; inset: 0; background: var(--color-black); pointer-events: none; }
.hero-film .hero-poster, .hero-film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero-film video { position: absolute; inset: 0; opacity: 0; }
.hero-film video.has-frame { opacity: 1; }
@media (max-aspect-ratio: 1/1) {
  .hero-film .hero-poster, .hero-film video { object-position: 86% center; }
  /* Portrait video is only darkened at the top, so the copy stays there. */
  .hero-layout { align-items: flex-start; }
  .hero::after { background: var(--scrim-hero-mobile); }
}
.hero-film-bar { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-block: var(--space-16) var(--space-80); }

.section-curve { position: absolute; z-index: 3; left: 0; bottom: -1px; width: 100%; height: var(--space-64); fill: var(--surface-paper); pointer-events: none; }

/* Keep the approved opening at its viewport height as the game lineup follows. */
body[data-preview-stage='games'] { background: var(--color-black); }
body[data-preview-stage='games'] .hero { min-height: max(var(--hero-min-height), calc(100svh - var(--header-height) - var(--space-32) - 1px)); }
body[data-preview-stage='games'] .site-navigation > [aria-disabled='true'] { color: var(--text-on-dark-muted); cursor: default; }

/* Each game is one image-filled scene with a quiet, shared information layout. */
.game-lineup { --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; background: var(--color-black); color: var(--color-white); scroll-margin-top: var(--space-48); }
.lineup-grid { --lineup-divider: 1px; /* Edge-to-edge card separator. */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lineup-divider); background: var(--line-dark); }
.lineup-game { --lineup-content-gap: calc(var(--space-80) * 2); /* Preserve the 160 px art window between heading and info. */ position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--lineup-content-gap); min-width: 0; min-height: clamp(560px, 42vw, 680px); padding: var(--space-40) var(--gutter); overflow: hidden; background: var(--color-black); }
.lineup-game:nth-child(odd) { padding-left: var(--page-inset); }
/* Mirror the inset so both columns stay inside the page container on wide screens. */
.lineup-game:nth-child(even) { --lineup-edge-extra: calc(var(--page-inset) - var(--gutter)); padding-right: var(--page-inset); }
.lineup-art, .lineup-scene { position: absolute; inset: 0; pointer-events: none; }
.lineup-art { z-index: -1; }
.lineup-art::after { content: ''; position: absolute; inset: 0; background: var(--scrim-card); }
/* Lower the invitation so its lettering sits below the card title and intro. */
/* The invitation sits a little lower so its lettering clears the title; the top fades in instead of leaving a hard edge. */
.lineup-game--surmav .lineup-scene { top: var(--surmav-art-drop, 12%); bottom: calc(-1 * var(--surmav-art-drop, 12%)); -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--color-black) 16%); mask-image: linear-gradient(to bottom, transparent 0, var(--color-black) 16%); }
.lineup-scene > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lineup-heading h3 { font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
/* One intertwined CYE / 3D mark; the artwork remains visible through its gaps. */
.format-mark { position: absolute; z-index: 1; top: var(--space-24); right: calc(var(--lineup-edge-extra, 0px) + var(--space-24)); width: 124px; pointer-events: none; filter: drop-shadow(0 2px 2px #000b); }
.format-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.format-mark-type { fill: #f5f4ef; font: 600 80px var(--font-sans); letter-spacing: -3px; }
.lineup-game--threeD .lineup-heading { --format-mark-clearance: 116px; /* Optical clearance for the format artwork. */ padding-right: var(--format-mark-clearance); }
@media (min-width: 721px) and (max-width: 1000px), (max-width: 560px) {
  .format-mark { top: var(--space-20); right: calc(var(--lineup-edge-extra, 0px) + var(--space-16)); width: 94px; }
  .lineup-game--threeD .lineup-heading { --format-mark-clearance: 86px; /* Optical clearance for the format artwork. */ padding-right: var(--format-mark-clearance); }
}
@media (max-width: 380px) {
  .format-mark { width: 84px; }
  .lineup-game--threeD .lineup-heading { --format-mark-clearance: 76px; /* Optical clearance for the format artwork. */ padding-right: var(--format-mark-clearance); }
}
.lineup-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-16); margin-top: var(--space-8); color: var(--text-on-dark-muted); }
.lineup-availability { display: flex; align-items: center; gap: var(--space-8); font: var(--type-small); }
.lineup-availability--ready::before { content: ''; width: var(--space-4); height: var(--space-4); background: var(--color-yellow); border-radius: 50%; }
.lineup-availability--upcoming { min-height: var(--space-24); padding: 0 var(--space-8); border: 1px solid var(--badge-upcoming-border); border-radius: var(--radius-control); background: var(--badge-upcoming-bg); color: var(--color-yellow); font: var(--type-caption); font-weight: var(--weight-medium); }
.lineup-purchase { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-16); }
/* Prices: amount at normal spacing, euro sign smaller and close to the number (guide: price role). */
:is(.lineup-price, .game-price, .purchase-price, .checkout-total, .cart-total, .gift-selected-price) .price-currency { font-size: var(--price-currency-size); margin-left: var(--price-currency-gap); letter-spacing: 0; }
.lineup-price { color: var(--color-yellow); font: var(--type-price); letter-spacing: var(--tracking-price); }
.lineup-link { position: static; margin-left: auto; text-align: left; }

.lineup-specs { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: var(--space-8) var(--space-16); padding-top: var(--space-20); margin-top: var(--space-24); border-top: 1px solid var(--line-dark); color: var(--text-on-dark-muted); }
.lineup-format { font: var(--type-caption); }
.lineup-summary { max-width: 34em; margin-top: var(--space-16); color: var(--text-on-dark-secondary); font: var(--type-body); text-wrap: pretty; }
.lineup-actions { display: flex; flex: 1 1 max-content; flex-wrap: wrap; gap: var(--space-8); min-width: 0; }
/* Keep the actions together below the price when their translated labels need
   more room. A button on its own line fills that line. */
.lineup-actions > * { flex: 1 1 auto; }
.lineup-actions .lineup-link { margin-left: 0; }

.lineup-availability--upcoming + .lineup-format { display: inline-flex; align-items: center; min-height: var(--space-24); font-weight: var(--weight-medium); }
/* One row where it fits; two rows of height are reserved so neighbouring cards keep their buttons level. */
.lineup-specs { min-height: calc(var(--space-20) * 3 + var(--space-8) + 1px); column-gap: var(--space-20); }
.lineup-specs .room-overview, .lineup-specs .room-support { margin: 0; gap: var(--space-8) var(--space-20); font: var(--type-small); }
.room-overview.room-overview--labelled { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: var(--space-16); font: var(--type-small); }
.room-overview.room-overview--labelled > div { display: block; }
.room-overview--labelled dt { font: var(--type-caption); color: var(--text-on-dark-muted); }
.room-overview--labelled dt .icon { display: none; }
.room-overview.room-overview--labelled dd { margin-top: var(--space-4); }
@media (min-width: 721px) and (max-width: 1180px), (max-width: 560px) {
  .room-overview.room-overview--labelled { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .room-overview.room-overview--labelled > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
  .room-overview--labelled dt, .room-overview.room-overview--labelled dd { flex: 1; }
  .room-overview.room-overview--labelled dd { margin-top: 0; text-align: right; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lineup-scene { transition: transform var(--duration-art) var(--ease-art); }

  /* Only the buttons are clickable, so the artwork reacts to the game link alone. */
  .lineup-game:has(.lineup-link:hover) .lineup-scene { transform: scale(1.025); }

  .lineup-link .icon { transition: transform var(--duration-base) var(--ease-out); }
  .lineup-link:hover .icon { transform: translateX(var(--space-4)); }
}

html.game-open, html.game-open body { overflow: hidden; overscroll-behavior: none; }
html.game-open body { position: fixed; top: var(--game-scroll-offset, 0px); width: 100%; }
.game-dialog { border-radius: var(--radius-container); --dialog-inset: var(--space-40); --dialog-bottom: var(--space-40); width: min(640px, calc(100% - var(--space-40))); max-height: calc(100dvh - var(--space-40)); padding: 0; border: 0; background: var(--color-white); color: var(--color-black); overflow: hidden; }
.game-dialog[open] { display: flex; flex-direction: column; }
.game-dialog-toolbar { display: flex; justify-content: flex-end; flex-shrink: 0; padding: var(--space-8) var(--space-8) 0; }
#game-dialog-content { min-height: 0; padding: 0 var(--dialog-inset) var(--dialog-bottom); overflow-y: auto; overscroll-behavior: contain; }
.game-dialog::backdrop { background: var(--backdrop); }

.game-dialog h2 { font: var(--type-heading-sm); letter-spacing: var(--tracking-heading); }
.game-dialog h2:focus { outline: none; }
.game-dialog #game-dialog-story { margin-top: var(--space-24); font: var(--type-prose); color: var(--text-on-light-secondary); }
.game-dialog .room-badges { padding-right: var(--space-24); }
.game-dialog .game-dialog-delivery { padding-top: var(--space-24); margin-top: var(--space-24); border-top: 1px solid var(--line-light); font: var(--type-small); color: var(--text-on-light-secondary); }
@media (max-width: 1180px) {
  .lineup-game { padding: var(--space-32); }
}
@media (max-width: 720px) {
  .lineup-grid { grid-template-columns: minmax(0, 1fr); }
  .lineup-game { min-height: 520px; padding: var(--space-32) var(--gutter); }
  .lineup-link, .lineup-add { --control-height: var(--button-compact-height); --control-py: var(--space-8); --control-px: var(--space-16); --control-gap: var(--space-12); }
  .lineup-actions { flex-basis: 100%; }
  .lineup-actions > * { flex: 1 1 auto; }
  .lineup-game--surmav { --surmav-art-drop: 6%; }
  .game-dialog { --dialog-inset: var(--space-24); --dialog-bottom: var(--space-24); }
}
@media (max-width: 380px) {
  /* Keep the invitation lettering inside the narrow crop without separating its layers. */
  .lineup-game--surmav .lineup-scene { right: calc(-1 * var(--space-64)); }
  .lineup-game--surmav { --surmav-art-drop: 12%; }
}

.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-40); margin-bottom: var(--space-40); }
.section-heading h2, .gift-section h2, .faq-section h2, .catalog-how h2, .detail-how h2 { letter-spacing: var(--tracking-heading); font: var(--type-heading-md); }
.section-heading p { color: var(--text-on-light-secondary); margin-top: var(--space-12); max-width: 700px; font: var(--type-lead); }
.section-heading .inline-link { flex-shrink: 0; font: var(--type-body); font-weight: var(--weight-medium); }

body[data-view='home'] main { background: var(--surface-paper); }
.games-section { --game-card-width: 360px; --game-grid-gap: var(--space-24); background: var(--surface-paper); color: var(--color-black); padding-block: var(--space-80); scroll-margin-top: var(--space-24); }
.games-section .section-heading { justify-content: center; text-align: center; margin-bottom: var(--space-32); }
.games-section .section-heading p { font: var(--type-body); }
.game-stories { display: grid; grid-template-columns: repeat(2, minmax(0, var(--game-card-width))); gap: var(--game-grid-gap); justify-content: center; align-items: stretch; }
.game-panel { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: var(--space-24); }
.game-panel:only-child { grid-column: 1 / -1; justify-self: center; width: min(var(--game-card-width), 100%); }
.game-panel-art { position: relative; display: block; min-width: 0; border-radius: var(--radius-art); overflow: clip; background: var(--color-black); }
.game-panel-art:focus-visible { outline-offset: calc(-1 * var(--space-4)); outline-color: var(--focus-on-dark); }
.game-panel-scene { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; }
.game-panel-scene > img { width: 100%; height: 100%; object-fit: cover; }
.invitation-lettering { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: #24221f; font-family: 'Great Vibes', cursive; font-weight: 400; font-size: 100px; }
.invitation-lettering--ru { font-size: 72px; }
.game-panel-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-top: var(--space-16); }
.game-title { font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.story-hook { color: var(--text-on-light-secondary); margin-top: var(--space-4); font: var(--type-body); }
.room-badges { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16); }
.game-panel-art .room-badges { position: absolute; top: var(--space-12); left: var(--space-12); right: var(--space-12); margin: 0; }
.room-badge { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12); border: 1px solid var(--line-light); border-radius: var(--radius-control); color: var(--color-black); background: var(--color-white); font: var(--type-caption); }
.room-badge--ready { background: var(--color-yellow); border-color: var(--color-yellow); }
.room-badge--ready::before { content: ''; width: var(--space-4); height: var(--space-4); border-radius: 50%; background: currentColor; flex-shrink: 0; }
.room-overview, .room-support { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); padding: 0; margin: var(--space-20) 0 0; font: var(--type-body); }
.room-overview > div, .room-support > div { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.room-overview dt, .room-support dt { display: flex; }
.room-overview dd, .room-support dd { margin: 0; }
.room-overview .icon, .room-support .icon { width: var(--icon-small); height: var(--icon-small); color: var(--text-on-light-secondary); }
.room-support { color: var(--text-on-light-secondary); font: var(--type-caption); margin-top: var(--space-12); margin-bottom: var(--space-24); }
.game-panel .room-overview { margin-top: var(--space-12); gap: var(--space-4) var(--space-16); }
.game-panel .room-support { gap: var(--space-4) var(--space-16); margin-top: var(--space-8); margin-bottom: var(--space-16); }
.game-panel-action { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-12); margin-top: auto; padding-top: var(--space-16); border-top: 1px solid var(--line-light); }
.game-price { font: var(--type-price); letter-spacing: var(--tracking-price); }
.game-status { font: var(--type-body); font-weight: var(--weight-medium); color: var(--text-on-light-secondary); }
.game-panel-action .button { --control-height: var(--button-compact-height); --control-py: var(--space-8); --control-px: var(--space-16); --control-gap: var(--space-12); }
.games-footnote { max-width: calc(var(--game-card-width) * 2 + var(--game-grid-gap)); margin-top: var(--space-24); }
.game-stories + .demo-panel { margin-top: var(--space-48); }
.room-recommendation { display: flex; align-items: start; gap: var(--space-8); color: var(--text-on-light-secondary); font: var(--type-caption); }
.room-recommendation .icon { width: var(--icon-small); height: var(--icon-small); flex-shrink: 0; }

/* The product page shares the lineup artwork, typography and purchase controls. */
.product-introduction { display: grid; grid-template-columns: 1fr 1.1fr; clear: none; }
.product-introduction-art { position: relative; min-width: 0; min-height: 560px; overflow: hidden; background: var(--surface-dark-raised); }
.product-introduction-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Illustration shading: unlike a lineup card, this image has no overlaid copy. */
.product-introduction-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0000 65%, #0003); }
.product-introduction-copy { min-width: 0; padding: var(--space-56) var(--space-48) var(--space-32); }
.product-introduction-eyebrow { display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }
.product-introduction-eyebrow > span + span { border-left: 1px solid var(--line-dark); padding-left: var(--space-12); }
/* Facts: a 2 × 2 grid divided by hairlines, icon beside label and value. */
.product-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-32) 0 0; border-block: 1px solid var(--line-dark); }
.product-fact { --icon-optical-offset: 2px; /* Align the icon with the label's cap height. */ display: grid; grid-template-columns: var(--icon-medium) minmax(0, 1fr); align-content: start; column-gap: var(--space-16); padding: var(--space-20) var(--space-20) var(--space-20) 0; }
.product-fact:nth-child(2n) { padding-left: var(--space-24); border-left: 1px solid var(--line-dark); }
.product-fact:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
.product-fact dt { display: contents; }
.product-fact .icon { grid-row: span 2; width: var(--icon-medium); height: var(--icon-medium); margin-top: var(--icon-optical-offset); color: var(--color-white); }
.product-fact dt span { color: var(--text-on-dark-muted); font: var(--type-caption); }
.product-fact dd { margin: var(--space-4) 0 0; color: var(--color-white); font: var(--type-body); font-weight: var(--weight-medium); }
.product-fact dd small { display: block; margin-top: var(--space-4); color: var(--text-on-dark-muted); font: var(--type-caption); }
.product-introduction-copy:has(.product-reassure) { container-type: inline-size; }
.product-reassure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16); margin: var(--space-24) 0 0; padding: 0; list-style: none; }
.product-reassure li { --icon-optical-offset: 2px; display: grid; grid-template-columns: var(--icon-medium) minmax(0, 1fr); align-items: start; column-gap: var(--space-12); }
.product-reassure .icon { width: var(--icon-medium); height: var(--icon-medium); margin-top: var(--icon-optical-offset); color: var(--color-yellow); }
.product-reassure p { margin: 0; }
.product-reassure strong { display: block; color: var(--color-white); font: var(--type-small); font-weight: var(--weight-medium); }
.product-reassure span { display: block; margin-top: var(--space-4); color: var(--text-on-dark-muted); font: var(--type-caption); }
@container (max-width: 520px) {
  .product-reassure { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
}
.product-introduction-purchase { margin-top: var(--space-32); }
/* Endale / Kingituseks: a two-option switch above the buy button. */
.purchase-for { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-12); padding: var(--space-4); min-width: 0; border: 1px solid var(--line-dark); border-radius: var(--radius-control); }
.purchase-for label { display: flex; min-width: 0; cursor: pointer; }
.purchase-for label > span { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--touch-min); padding-inline: var(--space-12); border-radius: var(--radius-control); color: var(--text-on-dark-muted); font: var(--type-small); text-align: center; }
.purchase-for label:hover > input:not(:disabled) + span { color: var(--text-on-dark); background: var(--wash-dark-hover); }
.purchase-for input:checked + span { color: var(--color-white); background: var(--surface-dark-raised); }
.purchase-for input:focus-visible + span { outline: 2px solid var(--focus-on-dark); outline-offset: var(--space-4); }
.purchase-for:disabled { opacity: .4; }
.purchase-for:disabled label { cursor: default; }
.product-trust { display: grid; gap: var(--space-8); margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.product-trust li { --icon-optical-offset: 2px; display: flex; align-items: start; gap: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-small); }
.product-trust .icon { flex: none; width: var(--icon-small); height: var(--icon-small); margin-top: var(--icon-optical-offset); color: var(--color-yellow); }
.product-add { width: 100%; justify-content: start; }

.product-add-price { margin-left: auto; white-space: nowrap; font: inherit; letter-spacing: var(--tracking-price); }
.product-content-note { margin-top: var(--space-24); padding-top: var(--space-16); border-top: 1px solid var(--line-dark-subtle); font: var(--type-caption); color: var(--text-on-dark-muted); }
.surmav-page { background: var(--color-black); color: var(--color-white); --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
.surmav-hero { padding-bottom: var(--space-80); }
.surmav-back { display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--touch-min); margin-block: var(--space-24); color: var(--text-on-dark-muted); font: var(--type-small); }
.surmav-back:hover { color: var(--color-white); }
.surmav-back .icon { width: var(--space-16); height: var(--space-16); }
.surmav-page .product-introduction { grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--space-80); }
.surmav-page .product-introduction-art { min-height: 0; height: auto; aspect-ratio: 4 / 3; border: 1px solid var(--line-dark-subtle); border-radius: var(--radius-art); }
.surmav-page .product-introduction-copy { padding: 0; }
.product-gallery { min-width: 0; }
.product-gallery-stage { position: relative; touch-action: pan-y pinch-zoom; }
.product-gallery-panel { position: absolute; inset: 0; }
.product-gallery-panel[hidden] { display: none; }
.product-gallery-stage .product-gallery-panel > img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery-stage .product-gallery-panel:first-child > img { object-fit: cover; }
.product-gallery-thumbs { display: flex; gap: var(--space-12); margin-top: var(--space-16); }
.product-gallery-thumbs button { flex: 0 1 96px; min-width: 0; aspect-ratio: 4 / 3; padding: 3px; border: 1px solid var(--border-control-dark); border-radius: var(--radius-art); background: var(--surface-dark-raised); overflow: hidden; }
.product-gallery-thumbs button[aria-pressed='true'] { border-color: var(--color-yellow); box-shadow: inset 0 0 0 1px var(--color-yellow); }
.product-gallery-thumbs button:hover { border-color: var(--color-white); }
.product-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.product-gallery-caption { margin-top: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-caption); }
.surmav-page h1 { max-width: 13ch; font: var(--type-heading-lg); letter-spacing: var(--tracking-heading); }
.surmav-lead { margin-top: var(--space-24); max-width: 48ch; color: var(--text-on-dark-muted); font: var(--type-prose); }
.surmav-gameplay { padding-block: var(--space-80); background: var(--surface-dark-raised); }
.surmav-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-80); align-items: first baseline; margin-bottom: var(--space-40); }
.surmav-page h2 { max-width: 16ch; font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.surmav-section-heading p { max-width: 50ch; color: var(--text-on-dark-muted); font: var(--type-prose); }
.surmav-screen button { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border-control-dark); border-radius: var(--radius-art); overflow: hidden; background: var(--color-black); color: var(--color-white); }
.surmav-screen img { width: 100%; height: auto; }
.surmav-inspect { position: absolute; bottom: var(--space-16); right: var(--space-16); }
.surmav-screen button:not(:disabled):is(:hover, :focus-visible) .surmav-inspect { background: var(--control-hover); border-color: var(--control-border-hover); }
.surmav-screen button:not(:disabled):active .surmav-inspect { background: var(--control-pressed); }
.surmav-screen figcaption { margin-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }
.surmav-faq { padding-block: var(--space-96); }
.surmav-faq-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-80); margin-bottom: var(--space-48); }
.surmav-faq .faq-list summary { font-weight: var(--weight-medium); }
.surmav-faq .faq-list details[open] summary, .surmav-faq .faq-list summary:active { color: var(--color-white); }
.surmav-page > section[tabindex="-1"] { scroll-margin-top: 0; /* Section padding already gives the space below the header and section row. */ }
.surmav-page > section[tabindex="-1"]:focus { outline: none; }

/* Section row: hints that the page continues; sticks under the header and
   carries the buy button once the introduction has scrolled away. */
.surmav-hero:has(+ .product-sections) { padding-bottom: var(--space-48); }
.product-sections { --product-sections-height: var(--space-56); position: sticky; top: var(--header-height); z-index: 14; background: var(--color-black); border-top: 1px solid var(--line-dark); }
.product-sections[data-stuck] { border-bottom: 1px solid var(--line-dark); }
.product-sections > .container { display: flex; align-items: center; gap: var(--space-32); min-height: var(--product-sections-height); }
.product-sections-links { display: flex; gap: var(--space-32); min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.product-sections-links a, .product-sections-more { display: inline-flex; align-items: center; min-height: var(--product-sections-height); color: var(--text-on-dark-muted); font: var(--type-small); white-space: nowrap; text-decoration: none; transition: color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.product-sections-links a:hover, .product-sections-more:hover { color: var(--color-white); }
.product-sections-links a[aria-current] { color: var(--color-white); box-shadow: inset 0 -2px 0 var(--color-yellow); }
.product-sections-more { gap: var(--space-8); margin-left: auto; font: var(--type-caption); }
.product-sections-more .icon { width: var(--icon-small); height: var(--icon-small); }
.product-sections-buy { display: contents; }
.product-sections-title { display: none; order: -1; color: var(--color-white); font: var(--type-body); font-weight: var(--weight-medium); white-space: nowrap; }
.product-sections-buy .product-add { display: none; width: auto; flex: none; margin-left: auto; }
.product-sections[data-stuck] .product-sections-more { display: none; }
.product-sections[data-stuck] .product-sections-title { display: block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; animation: product-sections-in var(--duration-base) var(--ease-out); }
.product-sections[data-stuck] .product-add { display: inline-flex; animation: product-sections-in var(--duration-base) var(--ease-out); }
.product-sections-buy .product-add .product-add-price { margin-left: var(--space-16); }
@keyframes product-sections-in { from { opacity: 0; } }
html:has(.product-sections) { scroll-padding-top: calc(var(--header-height) + var(--space-56)); }
@media (max-width: 1100px) {
  .product-sections > .container, .product-sections-links { gap: var(--space-24); }
  .product-sections[data-stuck] .product-sections-title { display: none; }
}
@media (max-width: 1000px) {
  .surmav-page .product-introduction, .surmav-section-heading, .surmav-faq-layout { gap: var(--space-40); }
}
@media (max-width: 920px) {
  .surmav-page .product-introduction { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .product-sections-links { flex-wrap: wrap; gap: 0 var(--space-24); overflow: visible; }
  /* Two link rows fit beside the tablet buy button. Reserve both rows for
     anchor navigation and keyboard scrolling when the strip becomes sticky. */
  html:has(.product-sections) { scroll-padding-top: calc(var(--header-height) + var(--space-56) * 2); }
}
@media (max-width: 720px) {
  .surmav-page .product-introduction, .surmav-section-heading, .surmav-faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .surmav-page .product-introduction-copy { padding: 0; }
  .surmav-back { margin-block: var(--space-16); }
  .surmav-hero { padding-bottom: var(--space-64); }
  .surmav-gameplay, .surmav-faq { padding-block: var(--space-64); }
  .surmav-section-heading { align-items: start; gap: var(--space-16); margin-bottom: var(--space-24); }
  .surmav-inspect { bottom: var(--space-8); right: var(--space-8); }
  .surmav-hero:has(+ .product-sections) { padding-bottom: var(--space-40); }
  .product-sections { position: static; }
  .product-sections > .container { gap: var(--space-24); }
  .product-sections-links { flex-wrap: wrap; gap: 0 var(--space-24); overflow: visible; padding-block: var(--space-8); }
  .product-sections-links a { min-height: var(--touch-min); }
  .product-sections-more { display: none; }
  html:has(.product-sections) { scroll-padding-top: var(--header-height); scroll-padding-bottom: calc(var(--space-80) + var(--space-16) + env(safe-area-inset-bottom)); }
  .product-sections-buy { position: fixed; inset: auto 0 0; z-index: 14; display: flex; align-items: center; gap: var(--space-16); padding: var(--space-12) var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom)); background: var(--color-black); border-top: 1px solid var(--line-dark); visibility: hidden; transform: translateY(100%); transition: transform var(--duration-exit) var(--ease-in), visibility 0s var(--duration-exit); }
  .product-sections[data-buy-away] .product-sections-buy { visibility: visible; transform: none; transition: transform var(--duration-panel) var(--ease-out); }
  .product-sections .product-sections-title { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font: var(--type-small); font-weight: var(--weight-medium); animation: none; }
  .product-sections-buy .product-add .cart-state-icon { display: none; }
  .product-sections .product-sections-buy .product-add { display: inline-flex; animation: none; }
  body:has(.product-sections) .site-footer { padding-bottom: calc(var(--space-80) + env(safe-area-inset-bottom)); }
}
@media (max-width: 1000px) {
  .product-introduction-copy { padding: var(--space-56) var(--space-32) var(--space-32); }
}
@media (max-width: 720px) {
  .product-introduction { grid-template-columns: minmax(0, 1fr); }
  .product-introduction-art { min-height: 0; height: clamp(240px, 68vw, 360px); }
  .product-introduction-copy { padding: var(--space-24); }
  .product-facts, .product-introduction-purchase { margin-top: var(--space-24); }
  .product-fact:nth-child(2n) { padding-left: var(--space-16); }
  .product-fact { column-gap: var(--space-12); padding-right: var(--space-12); }
}
@media (max-width: 380px) {
  .product-introduction-copy { padding-inline: var(--space-16); }
  .product-facts { grid-template-columns: minmax(0, 1fr); }
  .product-fact:nth-child(2n) { padding-left: 0; border-left: 0; }
  .product-fact + .product-fact { border-top: 1px solid var(--line-dark); }
}
.purchase-panel .room-badge { border-color: var(--line-light); background: transparent; }
.purchase-panel .room-recommendation { margin-bottom: var(--space-16); }
/* The game is the focal point; the short journey and demo support it. */
.play-guide {
  position: relative;
  isolation: isolate;
  overflow: clip;

  --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px;
  background: var(--surface-dark-raised);
  color: var(--color-white);
  padding-block: var(--space-80);
  scroll-margin-top: 0;
}
.play-guide-brand { position: absolute; z-index: -1; top: calc(-1 * var(--space-96)); right: -180px; width: min(920px, 76vw); height: auto; aspect-ratio: 40 / 49; overflow: hidden; filter: brightness(0); opacity: .28; transform: rotate(-12deg); pointer-events: none; }
.play-guide-inner { position: relative; }
.play-guide-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-40); }
.play-guide h2 { flex-shrink: 0; font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.play-guide-journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); width: min(600px, 100%); padding: 0; margin: 0; list-style: none; color: var(--text-on-dark-muted); font: var(--type-small); }
.play-guide-journey li { display: flex; align-items: baseline; gap: var(--space-8); min-width: 0; }
.play-guide-step-number { flex: none; font: var(--type-caption); font-variant-numeric: tabular-nums; }
.play-guide-preview { position: relative; margin-top: var(--space-48); padding-bottom: var(--space-80); }
.play-guide-canvas { position: relative; }
.play-guide-screen { position: relative; display: block; width: 90%; margin-inline: auto; padding: 0; overflow: hidden; border: 1px solid var(--border-control-dark); border-radius: var(--radius-art); background: var(--color-black); color: var(--color-white); text-align: left; cursor: zoom-in; transition: border-color var(--duration-fast) var(--ease-out); }
.play-guide-screen img { width: 100%; height: auto; }
.play-guide-inspect { position: absolute; bottom: var(--space-12); right: var(--space-12); }
.play-guide-screen:hover, .play-guide-screen:focus-visible { border-color: var(--border-control-dark-hover); }
.play-guide-screen:not(:disabled):is(:hover, :focus-visible) .play-guide-inspect { background: var(--control-hover); border-color: var(--control-border-hover); }
.play-guide-screen:not(:disabled):active .play-guide-inspect { background: var(--control-pressed); }
.play-guide-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.play-guide-connectors path { stroke: var(--text-on-dark-secondary); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.play-guide-connectors .play-guide-connector-underlay path { stroke: var(--color-black); stroke-width: 4; }
.play-guide-connectors circle { fill: var(--color-yellow); stroke: var(--color-black); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.play-guide-annotations { position: absolute; inset: 0 0 var(--space-80); pointer-events: none; }
.play-guide-callout { position: absolute; display: inline-flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-16); border: 1px solid var(--line-dark-strong); border-radius: var(--radius-control); background: var(--surface-dark-raised); color: var(--color-white); font: var(--type-small); pointer-events: none; }
.play-guide-callout .icon { width: var(--icon-small); height: var(--icon-small); color: var(--color-yellow); }
.play-guide-callout--materials { left: 31%; bottom: 16%; transform: translateX(-50%); }
.play-guide-callout--room { right: 0; top: 32%; }
.play-guide-callout--hint { left: 0; top: calc(100% + var(--space-16)); }
.play-guide-callout--answer { left: 18%; top: calc(100% + var(--space-16)); }
/* Names the game in the screenshot: right under it, clear of the hint and answer callouts on the left. */
.play-guide-pictured { position: absolute; right: 5%; top: calc(100% + var(--space-16)); display: flex; gap: var(--space-8); align-items: start; margin: 0; color: var(--text-on-dark-muted); font: var(--type-caption); }
.play-guide-pictured .icon { flex: none; width: var(--icon-small); height: var(--icon-small); }
.play-guide-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-24) var(--space-48); align-items: center; margin-top: var(--space-40); }
.play-guide-demo-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
.play-guide-demo-heading h3 { font: var(--type-heading-sm); letter-spacing: var(--tracking-heading); }
.play-guide-demo-heading > span { color: var(--text-on-dark-muted); font: var(--type-caption); }
.play-guide-demo-body { max-width: 64ch; margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-small); }
.play-guide-demo-button { justify-content: space-between; text-align: left; }

.play-guide-demo-facts { display: flex; flex-wrap: wrap; align-items: start; gap: var(--space-12) var(--space-32); grid-column: 1 / -1; padding-top: var(--space-20); border-top: 1px solid var(--line-dark); color: var(--text-on-dark-muted); }
.play-guide-demo-facts .room-overview { margin: 0; font: var(--type-small); }
.play-guide-demo-facts .room-support { margin: 0; }
.play-guide-recommendation { display: flex; gap: var(--space-8); align-items: start; margin-top: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-caption); }
.play-guide-recommendation .icon { width: var(--icon-small); height: var(--icon-small); }
.play-guide-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24) var(--space-40); margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--line-dark); }
.play-guide-modes { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); padding: 0; margin: 0; list-style: none; color: var(--text-on-dark-muted); font: var(--type-small); }
.play-guide-modes li { display: inline-flex; align-items: center; gap: var(--space-12); }
.play-guide-modes li::before { content: ''; width: var(--space-4); height: var(--space-4); border-radius: 50%; background: var(--text-on-dark-muted); flex-shrink: 0; }
.play-guide-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-24); flex-shrink: 0; min-height: var(--touch-min); color: inherit; font: var(--type-body); }
.play-guide-link .icon { width: var(--icon-small); height: var(--icon-small); }
@media (max-width: 1180px) {
  .play-guide-heading { align-items: start; flex-direction: column; gap: var(--space-24); }
  .play-guide-journey { width: min(640px, 100%); }
}
/* Long translated callouts need clear space around their image targets. */
@media (max-width: 1360px) {
  .play-guide-preview { padding-bottom: 0; }
  .play-guide-screen { width: 100%; }
  .play-guide-connectors { display: none; }
  .play-guide-annotations { position: static; display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-32); margin-top: var(--space-16); }
  .play-guide-callout { position: static; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text-on-dark-muted); }
  .play-guide-callout--materials { transform: none; }
  .play-guide-callout .icon { color: var(--text-on-dark-muted); }
  .play-guide-pictured { position: static; margin-top: var(--space-16); }
}
@media (max-width: 720px) {
  .play-guide-brand { top: var(--space-32); right: -120px; width: 480px; opacity: .2; }
  .play-guide { padding-block: var(--space-64); }
  .play-guide-journey { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .play-guide-preview { margin-top: var(--space-32); }
  .play-guide-inspect { bottom: var(--space-8); right: var(--space-8); --control-py: 0; --control-px: 0; --control-icon: var(--icon-medium); }
  .play-guide-inspect > span { display: none; }
  .play-guide-inspect { width: var(--touch-min); justify-content: center; }
  .play-guide-annotations { gap: var(--space-12) var(--space-20); }
  .play-guide-callout { gap: var(--space-8); font: var(--type-caption); }
  .play-guide-demo { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); margin-top: var(--space-32); }
  .play-guide-demo-button { justify-content: space-between; text-align: left; }
  .play-guide-footer { align-items: flex-start; flex-direction: column; gap: var(--space-16); }
}

/* A real game screenshot can be inspected without starting or simulating play. */
html.gameplay-open, html.gameplay-open body { overflow: hidden; overscroll-behavior: none; }
html.gameplay-open body { position: fixed; top: var(--gameplay-scroll-offset, 0px); width: 100%; }
.gameplay-preview { --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; color-scheme: dark; width: min(1440px, calc(100% - var(--space-48))); max-width: none; max-height: calc(100dvh - var(--space-48)); padding: 0; border: 1px solid var(--line-dark); border-radius: var(--radius-container); background: var(--color-black); color: var(--color-white); overflow: hidden; }
.gameplay-preview[open] { display: flex; flex-direction: column; }
.gameplay-preview::backdrop { background: var(--backdrop); }
.gameplay-preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-12) var(--space-20); border-bottom: 1px solid var(--line-dark); flex-shrink: 0; }
.gameplay-preview-header h2 { font: var(--type-heading-sm); text-wrap: initial; }
.gameplay-preview-actions { display: flex; align-items: center; gap: var(--space-16); flex-shrink: 0; }

.gameplay-preview-zoom[aria-pressed='true'] .icon { transform: rotate(45deg); }

.gameplay-preview-viewport { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.gameplay-preview-viewport:focus-visible { outline-offset: calc(-1 * var(--space-4)); }
.gameplay-preview-viewport img { width: 100%; height: auto; max-height: calc(100dvh - 144px); object-fit: contain; }
.gameplay-preview-viewport.is-zoomed { height: calc(100dvh - 144px); }
.gameplay-preview-viewport.is-zoomed img { width: max(1200px, 150%); max-width: none; max-height: none; }
@media (max-width: 720px) {
  .gameplay-preview { width: calc(100% - var(--space-24)); max-height: calc(100dvh - var(--space-24)); }
  .gameplay-preview-header { flex-wrap: wrap; gap: var(--space-4); padding: var(--space-12); }
  .gameplay-preview-header h2 { width: 100%; padding-inline: var(--space-8); font: var(--type-heading-sm); }
  .gameplay-preview-actions { width: 100%; justify-content: space-between; }
  .gameplay-preview-viewport img { max-height: calc(100dvh - 160px); }
  .gameplay-preview-viewport.is-zoomed { height: calc(100dvh - 160px); }
}

.how-section { padding-block: var(--space-80); scroll-margin-top: var(--space-24); }
.how-layout { display: grid; gap: var(--space-40); }
.how-layout .section-heading { margin: 0; }
.how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); padding: 0; margin: 0; list-style: none; }
.how-grid li { display: grid; grid-template-columns: var(--space-40) minmax(0, 1fr); align-content: start; gap: var(--space-16); min-width: 0; }
.how-index { display: grid; place-items: center; width: var(--space-40); height: var(--space-40); border-bottom: 3px solid var(--color-yellow); }
.how-grid h3 { font: var(--type-heading-sm); }
.how-grid p { color: var(--text-on-light-secondary); margin-top: var(--space-8); font: var(--type-body); }
.demo-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; overflow: clip; min-width: 0; border: 1px solid var(--line-light); border-radius: var(--radius-container); background: var(--color-white); }
.demo-preview { display: flex; align-items: center; padding: var(--space-32); background: var(--surface-paper); }
.demo-preview img { width: 100%; height: auto; border-radius: var(--radius-art); box-shadow: 0 var(--space-12) var(--space-32) #10101018; }
.demo-copy { padding: var(--space-40); align-self: center; }
.eyebrow { display: block; color: var(--text-on-light-secondary); font: var(--type-small); margin-bottom: var(--space-8); }
.demo-copy h2, .demo-copy h3 { font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.demo-copy p { margin-top: var(--space-12); color: var(--text-on-light-secondary); font: var(--type-prose); max-width: 48ch; }
.demo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-20); margin-top: var(--space-20); }
.demo-meta .room-badges, .demo-meta .room-overview { margin: 0; }
.demo-meta .room-overview { font: var(--type-caption); }
.demo-copy .button { margin-top: var(--space-24); }
.demo-copy small { display: block; margin-top: var(--space-12); color: var(--text-on-light-secondary); font: var(--type-caption); }

/* A warm light pause gives the dark gift card its own visual weight. */
.gift-section {
  --focus-ring: var(--focus-on-light); --link-hover-color: var(--color-black); --link-hover-thickness: 2px;

  position: relative;
  overflow: clip;
  color: var(--color-black);
  background: var(--surface-warm);
  padding-block: var(--space-96);
  scroll-margin-top: 0;
}
.gift-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--space-80); }
.gift-visual { min-width: 0; }
.gift-art {
  --gift-tilt-x: 0deg;
  --gift-tilt-y: 0deg;
  --gift-light-x: 28%;
  --gift-light-y: 18%;
  --gift-light-angle: 0deg;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1.4;
  perspective: 1100px;
}
.gift-art::before { content: ''; position: absolute; inset: 5% -5%; background: radial-gradient(ellipse, #c7bb9929, transparent 65%); pointer-events: none; }
.gift-art-shadow { position: absolute; top: 76%; left: 12%; width: 80%; height: 11%; border-radius: 50%; background: #4f452d42; filter: blur(var(--space-20)); transform: rotate(-9deg); pointer-events: none; }
.gift-card-rig {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: min(536px, 90%);
  aspect-ratio: 1.65;
  transform-style: preserve-3d;
  transform: translateY(-8px) rotateX(calc(12deg + var(--gift-tilt-x))) rotateY(calc(-12deg + var(--gift-tilt-y))) rotateZ(-6deg);
  transition: transform var(--duration-slow) var(--ease-art);
}
.gift-card-edge { position: absolute; inset: 0; border-radius: var(--radius-art); background: linear-gradient(100deg, #635432, #e1cc92 22%, #74613c 58%, #b09b66); transform: translate3d(0, 3px, -3px); box-shadow: 0 10px 18px #29251a35, 0 32px 48px #29251a30; }
.gift-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  --gift-art-padding: 7cqw; /* Artwork scales with the card, independently of UI spacing. */
  padding: var(--gift-art-padding);
  border: 1px solid var(--border-gift);
  border-radius: var(--radius-art);
  overflow: hidden;
  background: var(--gift-face);
  box-shadow: inset 0 1px 0 #f1e3bc35, inset 0 -1px 0 var(--color-black-pressed);
}
.gift-card-face::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px); pointer-events: none; }
.gift-card-logo { position: relative; z-index: 2; width: 44%; height: auto; }
.gift-card-title { position: relative; z-index: 2; width: 92%; margin-top: auto; }
.gift-card-label { --gift-label-gap: 2.5cqw; /* Proportional artwork lettering gap. */ display: block; margin-bottom: var(--gift-label-gap); color: var(--gift-text-muted); font: var(--weight-regular) 2.8cqw/1.4 var(--font-sans); letter-spacing: .035em; }
.gift-card-name { display: block; color: var(--gift-text); font: var(--weight-regular) 10.2cqw/1.15 'Great Vibes', var(--font-sans); }
.gift-card-name:lang(ru) { font: var(--weight-regular) 6.8cqw/1.2 var(--font-sans); letter-spacing: var(--tracking-heading); }
.gift-card-name.gift-card-name--amount { font: var(--weight-regular) 12cqw/1.1 var(--font-sans); letter-spacing: var(--tracking-price); }
.gift-card-runner { position: absolute; width: 54%; height: auto; aspect-ratio: 40 / 49; top: 5%; right: -8%; overflow: hidden; opacity: .1; filter: grayscale(1) sepia(.7) brightness(1.5) drop-shadow(0 1px 0 #e8dab045); transform: rotate(4deg); }
.gift-card-shine { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .65; background: radial-gradient(ellipse at var(--gift-light-x) var(--gift-light-y), #ffffff17, transparent 60%), linear-gradient(calc(115deg + var(--gift-light-angle)), transparent 30%, #ffffff00 40%, #ffffff09 47%, #ffffff13 49%, transparent 60%); }
.gift-format { max-width: 38ch; margin: var(--space-16) auto 0; text-align: center; color: var(--text-on-light-secondary); font: var(--type-caption); }
.gift-eyebrow { display: block; margin-bottom: var(--space-20); color: var(--text-on-light-secondary); font: var(--type-small); }
.gift-copy h2 { max-width: 12ch; font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.gift-copy > p { max-width: 34ch; margin-top: var(--space-20); color: var(--text-on-light-secondary); font: var(--type-lead); }
.gift-occasions { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); padding: 0; margin: var(--space-24) 0 var(--space-32); list-style: none; color: var(--text-on-light-secondary); font: var(--type-small); }
.gift-occasions li { display: inline-flex; align-items: center; gap: var(--space-16); }
.gift-occasions li:not(:last-child)::after { content: ''; width: 2px; height: 2px; border-radius: 50%; background: var(--text-on-light-muted); }
.gift-copy .play-guide-demo-button { min-width: min(var(--button-hero-min-width), 100%); }

.gift-delivery { display: block; margin-top: var(--space-16); color: var(--text-on-light-muted); font: var(--type-caption); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gift-art[data-gift-active] .gift-card-rig { transition-duration: var(--duration-base); transition-timing-function: var(--ease-in-out); }
}
@media (max-width: 1180px) {
  .gift-layout { gap: var(--space-40); }
}
@media (max-width: 920px) {
  .gift-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); max-width: 560px; }
  .gift-copy { grid-row: 1; }
  .gift-copy h2 { max-width: 16ch; }
  .gift-copy > p { max-width: 38ch; }
  .gift-art { aspect-ratio: 1.45; }
}
@media (max-width: 720px) {
  .gift-section { padding-block: var(--space-64); }
  .gift-layout { gap: var(--space-40); }
  .gift-eyebrow { margin-bottom: var(--space-16); }
  .gift-copy > p { margin-top: var(--space-16); }
  .gift-occasions { margin-block: var(--space-20) var(--space-24); gap: var(--space-8) var(--space-12); font: var(--type-caption); }
  .gift-occasions li { gap: var(--space-12); }
  .gift-art { aspect-ratio: 1.45; }
  .gift-card-rig { width: 90%; }
}
.faq-section { padding-block: var(--space-96); background: var(--color-black); color: var(--color-white); --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; scroll-margin-top: var(--space-24); }
.faq-intro h2 { max-width: 12ch; font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.faq-intro > p { margin-top: var(--space-32); color: var(--text-on-dark-muted); font: var(--type-small); }
.faq-intro > a { display: inline-flex; align-items: center; min-height: var(--touch-min); gap: var(--space-16); font: var(--type-small); }
.faq-intro > a .icon { width: var(--space-16); height: var(--space-16); }
.faq-section .faq-list summary { font: var(--type-body); min-height: var(--space-80); font-weight: var(--weight-medium); }
.faq-section .faq-list summary:active, .faq-section .faq-list details[open] summary { color: var(--color-white); }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-80); }
.faq-list details { border-bottom: 1px solid var(--line-dark); }
.faq-list details:first-child { border-top: 1px solid var(--line-dark); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-24); cursor: pointer; min-height: 68px; padding: var(--space-20) 0; list-style: none; font: var(--type-body); font-weight: var(--weight-medium); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { width: var(--icon-medium); height: var(--icon-medium); transition: transform var(--duration-base) var(--ease-in-out); }
.faq-list summary:hover { color: var(--text-on-dark-muted); }
.faq-list summary:active, .faq-list details[open] summary { color: var(--color-black); }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list details[data-expanded='false'] summary .icon { transform: rotate(0deg); }
.faq-answer { display: flow-root; }
.faq-link { display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--touch-min); margin-bottom: var(--space-24); color: var(--color-white); font: var(--type-small); }
.faq-link .icon { width: var(--icon-small); height: var(--icon-small); }
.faq-list details p { max-width: 600px; margin: 0 var(--space-32) var(--space-24) 0; color: var(--text-on-dark-muted); font: var(--type-prose); }
.shop-note { background: var(--surface-paper); padding-block: var(--space-24) var(--space-40); }
.shop-note .container { display: flex; align-items: baseline; gap: var(--space-16); border-top: 1px solid var(--line-light); padding-top: var(--space-24); }
.coming-label { flex-shrink: 0; color: var(--text-on-light-secondary); border: 1px solid var(--border-control-light); border-radius: var(--radius-control); padding: var(--space-4) var(--space-8); font: var(--type-caption); font-weight: var(--weight-medium); }
.shop-note p { color: var(--text-on-light-secondary); font: var(--type-caption); }
.site-footer { padding: 0 0 var(--space-24); background: var(--color-black); color: var(--color-white); --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-80); align-items: start; padding-block: var(--space-48) var(--space-40); border-block: 1px solid var(--line-dark); }
.footer-brand .brand img { width: 184px; }
.footer-brand > p { margin-top: var(--space-24); color: var(--text-on-dark-muted); font: var(--type-small); }
.footer-brand > small { display: block; margin-top: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-caption); }
.footer-top h2 { margin-bottom: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-small); font-weight: var(--weight-medium); }
.footer-links { display: flex; flex-direction: column; align-items: start; font: var(--type-small); }
.footer-links a, .footer-contact > a { min-height: var(--touch-min); display: inline-flex; align-items: center; }
.footer-links a:hover, .footer-contact > a:hover { color: var(--color-yellow); }
.footer-contact { display: flex; flex-direction: column; align-items: start; min-width: 0; }
.footer-contact > a { max-width: 100%; overflow-wrap: anywhere; gap: var(--space-16); font: var(--type-small); }
.footer-contact .icon { width: var(--space-16); height: var(--space-16); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-24); padding-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-24); }
.footer-legal a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); min-height: var(--touch-min); }
.footer-languages { display: flex; gap: var(--space-4); }
.footer-languages a { display: grid; place-items: center; min-width: var(--touch-min); min-height: var(--touch-min); font: var(--type-small); text-underline-offset: var(--space-8); }
.footer-languages a[aria-current] { color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-yellow); }
.footer-languages a:hover { color: var(--color-white); }

.page-intro { padding: var(--space-48) 0 var(--space-48); }
.back-link { display: inline-flex; min-height: var(--touch-min); gap: var(--space-12); align-items: center; color: var(--text-on-light-secondary); font: var(--type-body); font-weight: var(--weight-medium); }
.back-link:hover { color: var(--color-black); }
.back-link:active { color: var(--color-black-pressed); }
.back-link .icon { width: var(--icon-medium); height: var(--icon-medium); }
.page-intro h1 { margin-top: var(--space-24); letter-spacing: var(--tracking-heading); font: var(--type-heading-lg); }
.page-intro p { color: var(--text-on-light-secondary); max-width: 700px; margin-top: var(--space-20); font: var(--type-lead); }
.games-section--full { padding-top: var(--space-32); }
.catalog-how { padding: var(--space-80) 0; }
.catalog-how .container { display: flex; justify-content: space-between; gap: var(--space-48); align-items: center; }
.catalog-how p { color: var(--text-on-light-secondary); margin-top: var(--space-16); max-width: 740px; font: var(--type-prose); }
.catalog-how .button { flex-shrink: 0; }
.detail-section { padding: var(--space-32) 0 var(--space-80); }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: var(--space-64); align-items: start; margin-top: var(--space-32); }
.detail-content { min-width: 0; }
.detail-category { display: inline-block; color: var(--text-on-light-secondary); margin-bottom: var(--space-16); font: var(--type-caption); }
.detail-content h1 { letter-spacing: var(--tracking-heading); font: var(--type-heading-lg); }
.detail-lead { color: var(--text-on-light-secondary); margin-top: var(--space-24); max-width: 710px; font: var(--type-lead); }
.detail-preview { margin-top: var(--space-32); overflow: hidden; }
.detail-preview img { width: 100%; height: auto; }
.detail-preview figcaption { padding: var(--space-12) var(--space-16); color: var(--text-on-light-secondary); background: var(--surface-paper); font: var(--type-caption); }
.detail-story { padding-top: var(--space-40); }
.detail-story h2, .detail-includes h2 { letter-spacing: var(--tracking-heading); font: var(--type-heading-md); }
.detail-story p { color: var(--text-on-light-secondary); margin-top: var(--space-20); font: var(--type-prose); }
.detail-includes { margin-top: var(--space-32); border-top: 1px solid var(--line-light); padding-top: var(--space-32); }
.detail-includes ul { padding: 0; margin: var(--space-24) 0 0; list-style: none; display: grid; gap: var(--space-16); }
.detail-includes li { display: flex; align-items: start; gap: var(--space-12); color: var(--text-on-light-secondary); font: var(--type-body); }
.detail-includes .icon { width: var(--icon-medium); height: var(--icon-medium); margin-top: var(--space-4); color: var(--color-black); }
.purchase-panel { border-radius: var(--radius-container); border-top: 8px solid var(--color-black); position: sticky; background: var(--color-yellow); padding: var(--space-32); margin-top: var(--space-8); top: calc(var(--header-height) + var(--space-24)); }

.purchase-price { font-family: var(--font-sans); letter-spacing: var(--tracking-price); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-16); font: var(--type-price-lg); }
.purchase-price-value { font: inherit; }
.purchase-price > span { font-family: var(--font-sans); letter-spacing: 0; color: var(--text-on-light-secondary); font: var(--type-caption); }
.purchase-status { font: var(--type-heading-sm); }
.purchase-panel > p { color: var(--text-on-light-secondary); margin-top: var(--space-12); font: var(--type-prose); }
.purchase-facts { margin: var(--space-24) 0; padding: var(--space-8) 0 var(--space-12); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.purchase-facts > div { display: flex; justify-content: space-between; font: var(--type-body); flex-wrap: wrap; gap: var(--space-4) var(--space-16); padding: var(--space-12) 0; align-items: start; }
.purchase-facts dt { display: flex; color: var(--text-on-light-secondary); min-width: 0; flex: 1 1 11em; gap: var(--space-8); align-items: start; overflow-wrap: normal; }
.purchase-facts dt .icon { width: var(--icon-small); height: var(--icon-small); }
.purchase-facts dd { margin: 0; text-align: right; max-width: none; min-width: 0; flex: 1 1 6em; overflow-wrap: anywhere; }
.purchase-panel > .button { width: 100%; margin-top: var(--space-8); min-height: var(--button-height); }
.purchase-note { display: flex; align-items: start; gap: var(--space-12); color: var(--text-on-light-secondary); margin-top: var(--space-24); font: var(--type-caption); }
.purchase-note .icon { width: var(--icon-medium); height: var(--icon-medium); margin-top: var(--space-4); }
.purchase-panel .content-note { border-top: 1px solid var(--line-light); padding-top: var(--space-20); margin-top: var(--space-24); font: var(--type-caption); }
.detail-how { background: var(--surface-paper); padding: var(--space-80) 0; }
.detail-how > .container { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-24) var(--space-64); align-items: start; }
.detail-how p { color: var(--text-on-light-secondary); margin-top: var(--space-16); font: var(--type-prose); }
.detail-how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-24); grid-row: span 2; }
.detail-how li { display: flex; gap: var(--space-20); }
.detail-how li > span { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; background: var(--color-yellow); font: var(--type-caption); }
.detail-how h3 { font: var(--type-heading-sm); }
.detail-how li p { margin-top: var(--space-4); font: var(--type-prose); }
.detail-how .button { justify-self: start; }
html.cart-open, html.cart-open body { overflow: hidden; overscroll-behavior: none; }
html.cart-open body { position: fixed; top: var(--cart-scroll-offset, 0px); width: 100%; }
.cart-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(440px, 100%); max-width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--line-dark); color: var(--color-white); background: var(--color-black); color-scheme: dark; overflow-y: auto; overscroll-behavior: contain; --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
.cart-drawer[open] { display: flex; flex-direction: column; animation: cart-enter var(--duration-panel) var(--ease-out) both; }
.cart-drawer::backdrop { background: var(--backdrop); animation: cart-shade-in var(--duration-panel) var(--ease-out) both; }
.cart-drawer.is-closing { animation: cart-leave var(--duration-exit) var(--ease-in) both; }
.cart-drawer.is-closing::backdrop { animation: cart-shade-out var(--duration-exit) var(--ease-in) both; }
.cart-drawer-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-20) var(--space-24); border-bottom: 1px solid var(--line-dark); flex-shrink: 0; background: var(--color-black); }
.cart-drawer { scroll-padding-top: calc(var(--touch-min) + var(--space-40) + 1px); }
.cart-drawer-head h2 { font: var(--type-heading-sm); letter-spacing: var(--tracking-heading); }

.cart-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: var(--space-48) var(--space-24); text-align: center; }
.cart-empty > .icon { width: var(--space-32); height: var(--space-32); color: var(--border-control-dark); margin-bottom: var(--space-24); }
.cart-empty h3 { font: var(--type-heading-sm); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); }
.cart-empty p { margin-top: var(--space-8); max-width: 28ch; color: var(--text-on-dark-muted); font: var(--type-body); }
.cart-empty .cart-continue { margin-top: var(--space-32); }

#cart-content { display: flex; flex-direction: column; flex: 1; }
.cart-selection { padding: var(--space-32) var(--space-24); }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--space-16); align-items: start; }
.cart-item-art { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line-dark-subtle); border-radius: var(--radius-art); }
.cart-item-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cart-item h3 { font: var(--type-body); font-weight: var(--weight-medium); letter-spacing: normal; }
.cart-item-info > p { margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.cart-item-price { font: var(--type-body); font-weight: var(--weight-medium); white-space: nowrap; letter-spacing: var(--tracking-price); }
.cart-items { margin: 0; padding: 0; list-style: none; }
.cart-items > li + li { margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--line-dark); }
.cart-item-info { min-width: 0; }
.cart-item h3 { overflow-wrap: anywhere; }
.cart-item-amount { display: grid; gap: var(--space-8); text-align: right; }
.cart-item-amount small { max-width: 10ch; color: var(--text-on-dark-muted); font: var(--type-caption); }
.cart-sample-art { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-on-dark-muted); background: var(--surface-dark-raised); }
.cart-gift-art { display: grid; place-items: center; height: 100%; background: var(--surface-dark-raised); }
.cart-gift-art .gift-art { width: 100%; aspect-ratio: 1; perspective: none; }
.cart-gift-art .gift-card-rig { transform: rotate(-8deg); transform-style: flat; width: 88%; }
.cart-gift-art .gift-card-face, .cart-gift-art .gift-card-edge { border-radius: var(--radius-art); }
.cart-gift-art .gift-art-shadow, .cart-gift-art .gift-art::before { display: none; }
.cart-sample-art .icon { width: var(--space-32); height: var(--space-32); }
.checkout-sample-note { margin-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-add-more { display: inline-flex; align-items: center; min-height: var(--touch-min); gap: var(--space-12); margin-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-small); }
.checkout-add-more:hover { color: var(--color-white); }
.checkout-add-more .icon { width: var(--space-16); height: var(--space-16); }


.cart-delivery { display: flex; align-items: start; gap: var(--space-12); margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--line-dark); color: var(--text-on-dark-muted); font: var(--type-small); }
.cart-delivery .icon { --icon-optical-offset: 2px; /* Align the icon with the text baseline. */ flex-shrink: 0; width: var(--space-16); height: var(--space-16); margin-top: var(--icon-optical-offset); }
.cart-summary { margin-top: auto; padding: var(--space-24); border-top: 1px solid var(--line-dark); }
.cart-total { display: flex; justify-content: space-between; gap: var(--space-24); font: var(--type-lead); font-weight: var(--weight-medium); }
.cart-total > :last-child { white-space: nowrap; font: var(--type-price-sm); letter-spacing: var(--tracking-price); }
.cart-checkout { width: 100%; margin-top: var(--space-24); }
.cart-preview-note { margin-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }

/* Checkout: product table on the left, contact and totals on the right. */
.checkout-page { min-height: calc(100svh - var(--header-height) - var(--space-32) - 1px); padding-bottom: var(--space-80); color: var(--color-white); background: var(--color-black); color-scheme: dark; --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
.checkout-shell { width: min(100%, calc(var(--container) + var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); }
.checkout-heading { margin-block: var(--space-32) var(--space-48); }
.checkout-page h1 { font: var(--type-heading-lg); letter-spacing: var(--tracking-heading); }
.checkout-heading > p { margin-top: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-body); }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--space-48); }
.checkout-products { min-width: 0; }
.checkout-table { border-collapse: collapse; table-layout: fixed; width: 100%; font: var(--type-small); font-variant-numeric: tabular-nums; }
.checkout-table th { padding: 0 0 var(--space-20); font: var(--type-caption); text-align: left; color: var(--text-on-dark-muted); border-bottom: 1px solid var(--line-dark); }
.checkout-table th:first-child { width: 46%; }
.checkout-table th:nth-child(2) { width: 16%; }
.checkout-table th:nth-child(3) { width: 22%; text-align: center; }
.checkout-table th:last-child { width: 16%; text-align: right; }
.checkout-table td { padding: var(--space-24) 0; vertical-align: middle; border-bottom: 1px solid var(--line-dark); }
.checkout-product-wrap { display: flex; gap: var(--space-16); align-items: center; padding-right: var(--space-16); }
.checkout-product .cart-item-art { width: var(--space-80); flex: 0 0 var(--space-80); }
.checkout-product h2 { font: var(--type-body); font-weight: var(--weight-medium); letter-spacing: normal; overflow-wrap: anywhere; }
.checkout-product .cart-item-info > p { margin-top: var(--space-4); }
.checkout-unit { white-space: nowrap; }
.checkout-unit small { display: block; margin-top: var(--space-4); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-quantity-cell { text-align: center; }
.checkout-line-total { text-align: right; white-space: nowrap; }
.mobile-cell-label { display: none; }
.cart-quantity { display: inline-flex; align-items: center; border: 1px solid var(--border-control-dark); border-radius: var(--radius-control); }

.cart-quantity-value { min-width: var(--space-24); text-align: center; }
.checkout-game-note { display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-game-note .icon { width: var(--space-16); height: var(--space-16); flex-shrink: 0; }
.price-vat-note { margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.additional-gift-games .price-vat-note { color: var(--text-on-light-muted); }
.checkout-summary { min-width: 0; padding: var(--space-32); border: 1px solid var(--line-dark); border-radius: var(--radius-container); background: var(--surface-dark-raised); }
.checkout-summary > h2 { margin-bottom: var(--space-32); font: var(--type-heading-sm); }
.checkout-costs { display: grid; gap: var(--space-16); font: var(--type-small); color: var(--text-on-dark-muted); }
.checkout-costs > div { display: flex; justify-content: space-between; gap: var(--space-16); }
.checkout-costs dd { margin: 0; white-space: nowrap; color: var(--color-white); }
.checkout-costs small { display: block; margin-top: var(--space-4); font: var(--type-caption); }
.cart-discount { margin-top: var(--space-16); container-type: inline-size; }
.cart-discount > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--touch-min); list-style: none; cursor: pointer; color: var(--text-on-dark-muted); font: var(--type-small); }
.cart-discount > summary::-webkit-details-marker { display: none; }
.cart-discount > summary:hover { color: var(--color-white); }
.cart-discount > summary .icon { width: var(--space-16); height: var(--space-16); flex-shrink: 0; }
.cart-discount[open] > summary .icon { transform: rotate(45deg); }
#discount-form { margin-top: var(--space-12); }
#discount-form label { display: block; margin-bottom: var(--space-8); font: var(--type-small); }
.discount-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-12); align-items: start; }
.discount-controls input { min-width: 0; --field-height: var(--button-compact-height); --field-py: var(--space-8); --field-px: var(--space-12); }
.discount-controls button { --control-font: var(--type-small); }
@container (max-width: 340px) {
  .discount-controls { grid-template-columns: minmax(0, 1fr); }
}
#discount-message.checkout-error { color: var(--color-error-on-dark); }
.checkout-discount-row dd { text-align: right; }
.checkout-discount-row dt small { color: var(--color-yellow); }
.cart-discount-total { display: flex; justify-content: space-between; gap: var(--space-16); margin-bottom: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-caption); }
.cart-discount-total > :last-child { white-space: nowrap; }
.checkout-total { display: flex; justify-content: space-between; gap: var(--space-24); margin-top: var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--line-dark); font: var(--type-lead); font-weight: var(--weight-medium); }
.checkout-total > :last-child { white-space: nowrap; font: var(--type-price-sm); letter-spacing: var(--tracking-price); }
.checkout-form, .checkout-confirmation { margin-top: var(--space-32); }
.checkout-form label { display: block; margin-bottom: var(--space-12); font: var(--type-small); }

#checkout-email-help { margin-top: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-error { margin-top: var(--space-12); color: var(--color-error-on-dark); font: var(--type-small); }

.checkout-submit { width: 100%; margin-top: var(--space-24); justify-content: space-between; }
.checkout-preview { margin-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-shipping { min-width: 0; margin: var(--space-40) 0 0; padding: 0; border: 0; }
.checkout-shipping legend, .checkout-shipping h2 { margin-bottom: var(--space-20); padding: 0; font: var(--type-body); }
.checkout-shipping legend small, .checkout-shipping h2 small { display: inline-block; margin-left: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-shipping-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.checkout-shipping-options label { display: flex; align-items: center; gap: var(--space-12); min-height: var(--space-64); padding: var(--space-16); border: 1px solid var(--border-control-dark); border-radius: var(--radius-control); cursor: pointer; font: var(--type-small); }
.checkout-shipping-options label:has(:checked) { border-color: var(--border-control-dark-hover); background: var(--wash-dark-hover); }
.checkout-shipping-options label > span:last-child { margin-left: auto; white-space: nowrap; color: var(--text-on-dark-muted); }

.checkout-destination-label { display: block; margin-block: var(--space-20) var(--space-8); font: var(--type-small); color: var(--text-on-dark-muted); }

.checkout-shipping-address { margin-top: var(--space-16); color: var(--text-on-dark-muted); font: var(--type-small); }
.checkout-success { display: grid; place-items: center; width: var(--space-48); height: var(--space-48); margin-bottom: var(--space-24); border: 1px solid var(--badge-upcoming-border); border-radius: 50%; color: var(--color-yellow); background: var(--badge-upcoming-bg); }
.checkout-recipient { padding-bottom: var(--space-24); border-bottom: 1px solid var(--line-dark); }
.checkout-recipient > span { color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-recipient p { margin-top: var(--space-8); overflow-wrap: anywhere; font: var(--type-body); }
.checkout-next { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: grid; gap: var(--space-24); }
.checkout-next li { display: grid; grid-template-columns: var(--space-24) minmax(0, 1fr); gap: var(--space-16); }
.checkout-next li > span { padding-top: var(--space-4); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-next h3 { font: var(--type-heading-sm); }
.checkout-next p { margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-confirmation > .checkout-preview { margin-top: var(--space-32); }
.checkout-confirmation > .button { margin-top: var(--space-24); }
.checkout-empty { max-width: 640px; padding-block: var(--space-64); }
.checkout-empty > .icon { width: var(--space-32); height: var(--space-32); color: var(--text-on-dark-muted); margin-bottom: var(--space-24); }
.checkout-empty p { margin-top: var(--space-24); color: var(--text-on-dark-muted); }
.checkout-empty .button { margin-top: var(--space-32); }
@media (max-width: 1100px) {
  .checkout-layout { gap: var(--space-32); grid-template-columns: minmax(0, 1fr) 320px; }
  .checkout-product .cart-item-art { width: var(--space-64); flex-basis: var(--space-64); }
}
@media (max-width: 1000px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .checkout-page { padding-bottom: var(--space-64); }
  .checkout-heading { margin-block: var(--space-16) var(--space-32); }
  .checkout-empty { padding-block: var(--space-32); }
}
@media (max-width: 920px) {
  .checkout-table, .checkout-table tbody { display: block; }
  .checkout-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .checkout-table tr { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-16); padding-block: var(--space-24); border-bottom: 1px solid var(--line-dark); }
  .checkout-table tr:first-child { border-top: 1px solid var(--line-dark); }
  .checkout-table td { display: block; padding: 0; border: 0; }
  .checkout-product { grid-column: 1 / -1; }
  .checkout-product .cart-item-art { width: var(--space-80); flex-basis: var(--space-80); }
  .checkout-product-wrap { padding-right: 0; }
  .mobile-cell-label { display: block; margin-bottom: var(--space-8); font: var(--type-caption); color: var(--text-on-dark-muted); }
  .checkout-unit > span:nth-child(2), .checkout-line-total > span:nth-child(2) { display: block; padding-top: var(--space-12); }
  .checkout-shipping { margin-top: var(--space-32); }
  .checkout-shipping-options { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .cart-item { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-12); }
  /* Keep long gift names readable in two lines without clipping the text. */
  .checkout-product-wrap { flex-wrap: wrap; }
  .checkout-product .cart-item-info { flex-basis: 100%; }
  .cart-selection, .cart-summary { padding: var(--space-24) var(--space-16); }
}
@keyframes cart-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes cart-leave { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes cart-shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cart-shade-out { from { opacity: 1; } to { opacity: 0; } }
/* Centred dialogs ease in instead of appearing at once; the shade fades like the cart's. */
:is(.game-dialog, .gameplay-preview, .preview-dialog)[open] { animation: dialog-enter var(--duration-panel) var(--ease-out) both; }
:is(.game-dialog, .gameplay-preview, .preview-dialog)[open]::backdrop { animation: cart-shade-in var(--duration-panel) var(--ease-out) both; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(var(--space-16)); } }

.preview-dialog { color: var(--color-black); background: var(--color-white); border: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-40); border-radius: var(--radius-container); width: min(520px, calc(100% - var(--space-40))); max-height: calc(100dvh - var(--space-40)); }
.preview-dialog::backdrop { background: var(--backdrop); }
.dialog-close { position: absolute; right: var(--space-16); top: var(--space-16); }

.dialog-icon { display: grid; place-items: center; background: var(--color-yellow); margin-bottom: var(--space-24); width: var(--button-height); height: var(--button-height); }
.preview-dialog h2 { letter-spacing: var(--tracking-heading); font: var(--type-heading-sm); }
.preview-dialog p { margin-top: var(--space-16); color: var(--text-on-light-secondary); font: var(--type-prose); }
.preview-dialog > .button { margin-top: var(--space-24); }

@media (max-width: 1180px) {
  .faq-layout { gap: var(--space-64); }

  .detail-layout { grid-template-columns: minmax(0, 1.55fr) minmax(310px, 1fr); gap: var(--space-40); }
  .catalog-how .container { align-items: start; }
}
@media (max-width: 920px) {
  .brand img { width: 190px; }

  .section-heading { margin-bottom: var(--space-32); gap: var(--space-24); }

  .footer-top { gap: var(--space-32); }
  .detail-layout { grid-template-columns: 1fr; gap: var(--space-32); }
  .purchase-panel { position: static; margin-top: 0; }
}
@media (max-width: 720px) {
  .brand img { width: 180px; }

  .section-heading { align-items: start; flex-direction: column; gap: var(--space-16); margin-bottom: var(--space-32); }

  .section-heading p { margin-top: var(--space-12); }

  .faq-layout { grid-template-columns: 1fr; gap: var(--space-64); }
  .faq-section { padding-block: var(--space-64); }
  .faq-intro h2 { max-width: none; }
  .faq-intro > p { margin-top: var(--space-20); }
  .faq-section .faq-list summary { min-height: var(--space-64); }
  .faq-list summary { padding-block: var(--space-16); }
  .faq-list details p { margin-right: var(--space-20); }

  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-32) var(--space-24); padding-block: var(--space-32); }
  .footer-brand, .footer-contact { grid-column: 1 / -1; }
  .footer-contact > a { gap: var(--space-8); }
  .footer-contact .icon { display: none; }
  .footer-bottom { align-items: start; flex-direction: column; gap: var(--space-8); padding-top: var(--space-24); }
  .footer-legal { gap: 0 var(--space-20); }
  .page-intro { padding-block: var(--space-32) var(--space-32); }
  .page-intro h1 { margin-top: var(--space-20); }
  .page-intro p { margin-top: var(--space-16); }
  .games-section--full { padding-top: var(--space-20); }
  .catalog-how .container { flex-direction: column; gap: var(--space-24); }

  .detail-section { padding-top: var(--space-24); padding-bottom: var(--space-64); }
  .catalog-how, .detail-how { padding-block: var(--space-64); }
  .detail-layout { grid-template-columns: 1fr; gap: var(--space-32); margin-top: var(--space-20); }

  .detail-lead { margin-top: var(--space-20); }
  .detail-preview { margin-top: var(--space-24); }
  .detail-story { padding-top: var(--space-32); }

  .detail-story p { margin-top: var(--space-16); }
  .detail-includes { margin-top: var(--space-24); padding-top: var(--space-24); }
  .purchase-panel { position: static; padding: var(--space-32); margin: 0; }
  .detail-how > .container { grid-template-columns: 1fr; gap: var(--space-32); }
  .detail-how ol { grid-row: auto; gap: var(--space-24); }
  .detail-how .button { justify-self: stretch; }
  .preview-dialog { padding: var(--space-24); }

}
/* The complete navigation changes as one unit at the same breakpoint in every language. */
@media (max-width: 1180px) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-8); }
  .menu-toggle { display: inline-flex; }
  .site-navigation {
    display: none;
    position: absolute;
    z-index: 10;
    top: 100%;
    right: calc(-1 * var(--gutter));
    left: calc(-1 * var(--gutter));
    padding: var(--space-16) var(--gutter) var(--space-24);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    background: var(--color-black);
    border-block: 1px solid var(--line-dark-subtle);
    border-radius: var(--radius-container);
    box-shadow: var(--shadow-popover);
  }
  .site-navigation.is-open { display: flex; }
  .site-navigation > a { padding-block: var(--space-12); }
}
@media (max-width: 720px) {
  .header-inner { gap: var(--space-4); }
}
@media (max-width: 380px) {
  .site-header .brand img { width: 160px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, *::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.demo-form { margin-top: var(--space-24); }
.demo-form .demo-form-facts { padding-bottom: var(--space-20); border-bottom: 1px solid var(--line-light); margin: 0 0 var(--space-24); color: var(--text-on-light-secondary); font: var(--type-body); }
.demo-form label { display: block; margin-bottom: var(--space-8); font: var(--type-small); }

.demo-form .demo-email-error { color: var(--color-error-on-light); font: var(--type-body); margin-top: var(--space-8); }
.demo-form .demo-newsletter { font: var(--type-body); color: var(--text-on-light-secondary); margin-top: var(--space-20); }
.demo-form .button { margin-top: var(--space-24); width: 100%; }
.demo-form .demo-confirmation { font: var(--type-caption); margin-top: var(--space-16); }
.demo-form small { display: block; color: var(--text-on-light-secondary); font: var(--type-caption); border-top: 1px solid var(--line-light); padding-top: var(--space-16); margin-top: var(--space-20); }

body[data-view='games'] .page-intro { color: var(--color-white); background: var(--color-black); --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
body[data-view='games'] .page-intro p, body[data-view='games'] .back-link { color: var(--text-on-dark-muted); }
body[data-view='games'] .back-link:hover { color: var(--color-white); }

/* Shared flow: a dark opening, one continuous light surface and repeated panels. */
body[data-view='games'] .games-section { padding-top: var(--space-32); }
@media (max-width: 1180px) {
  .hero-layout { padding-top: var(--space-64); }
  .games-section { --game-grid-gap: var(--space-24); }
  .how-grid { gap: var(--space-24); }
  .how-grid li { grid-template-columns: 1fr; gap: var(--space-12); }
  .demo-copy { padding: var(--space-32); }
}
@media (max-width: 920px) {
  .hero { --hero-min-height: 560px; }
  .how-grid { grid-template-columns: 1fr; }
  .how-grid li { grid-template-columns: var(--space-40) minmax(0, 1fr); gap: var(--space-16); }
  .demo-copy { padding: var(--space-32); }
}
@media (max-width: 720px) {
  .hero { --hero-min-height: 520px; }
  .hero-layout { padding-block: var(--space-48) var(--space-24); }
  .hero-lead { margin-top: var(--space-16); font: var(--type-body); }
  .hero-benefits { margin-top: var(--space-20); gap: var(--space-12) var(--space-20); font: var(--type-small); }
  .hero-actions { margin-top: var(--space-24); row-gap: var(--space-16); }
  .hero-film-bar { padding-block: var(--space-8) var(--space-64); }
  .section-curve { height: var(--space-40); }
  .games-section { padding-block: var(--space-64); --game-grid-gap: var(--space-16); }
  .games-section .section-heading { align-items: center; }
  .game-stories { grid-template-columns: minmax(0, var(--game-card-width)); gap: var(--game-grid-gap); }
  .games-footnote { max-width: var(--game-card-width); }
  .room-overview { gap: var(--space-8) var(--space-16); }
  .how-section { padding-block: var(--space-64); }
  .how-layout { gap: var(--space-32); }
  .demo-panel { grid-template-columns: 1fr; }
  .demo-copy { padding: var(--space-32); }
  .shop-note .container { align-items: start; }
}
@media (max-width: 380px) {
  .hero-actions { flex-direction: column; align-items: flex-start; row-gap: var(--space-16); }
  .hero-actions .button--ghost { justify-content: flex-start; text-align: left; }

  .demo-copy { padding: var(--space-32); }
  .game-panel-action { gap: var(--space-12); }
}

/* Partner gift cards: a dark FAQ-like band with shared form controls. */
.partner-gift-section { --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; background: var(--color-black); color: var(--color-white); padding-top: var(--space-96); scroll-margin-top: var(--space-24); }
.partner-gift-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-80); padding-bottom: var(--space-64); border-bottom: 1px solid var(--line-dark); }
.partner-gift-copy h2 { max-width: 14ch; font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.partner-gift-copy > p { max-width: 38ch; margin-top: var(--space-20); color: var(--text-on-dark-muted); font: var(--type-body); }
.partner-names { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); padding: 0; margin: var(--space-16) 0 0; list-style: none; color: var(--text-on-dark-muted); font: var(--type-small); }
.partner-names li { display: inline-flex; align-items: center; gap: var(--space-16); }
.partner-names li:not(:last-child)::after { content: ''; width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.partner-gift-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24) var(--space-32); }
.partner-field { min-width: 0; }
.partner-field--wide, .partner-actions { grid-column: 1 / -1; }
.partner-field label { display: block; margin-bottom: var(--space-4); color: var(--text-on-dark-muted); font: var(--type-small); }
/* Partner fields use the shared field system above. */

.partner-field select:invalid { color: var(--text-on-dark-placeholder); }
.partner-field select option { color: var(--text-on-dark); background: var(--surface-dark-raised); }
.partner-field textarea { min-height: var(--space-96); resize: vertical; }

.partner-help { margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.partner-error { margin-top: var(--space-8); color: var(--color-error-on-dark); font: var(--type-small); }
.partner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); margin-top: var(--space-8); }

.partner-actions small { flex: 1 1 220px; color: var(--text-on-dark-muted); font: var(--type-caption); }
.partner-gift-done h3 { font: var(--type-heading-sm); }
.partner-gift-done h3:focus { outline: none; }
.partner-gift-done p { max-width: 48ch; margin: var(--space-12) 0 var(--space-24); color: var(--text-on-dark-muted); font: var(--type-body); }
@media (max-width: 920px) {
  .partner-gift-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); }
}
@media (max-width: 720px) {
  .partner-gift-section { padding-top: var(--space-64); }
  .partner-gift-layout { padding-bottom: var(--space-64); }
  .partner-gift-copy h2 { max-width: none; }
  .partner-gift-form { grid-template-columns: minmax(0, 1fr); }
  .partner-actions .button { width: 100%; justify-content: space-between; }

}

/* Separate cart and checkout: one editable table, then one contact/delivery form. */
.checkout-progress { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-24); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-progress a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.checkout-progress > span { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.checkout-progress [aria-current] { color: var(--color-white); }
.checkout-progress .icon { width: var(--space-16); height: var(--space-16); opacity: .6; }
.checkout-details { margin: 0; }
.checkout-step { min-width: 0; margin: 0; padding: 0 0 var(--space-24); border: 0; }
.checkout-step + .checkout-step { padding-top: var(--space-24); border-top: 1px solid var(--line-dark); }
.checkout-step legend { float: left; width: 100%; margin: 0 0 var(--space-16); padding: 0; font: var(--type-body); letter-spacing: var(--tracking-heading); }
.checkout-step legend + * { clear: both; }
.checkout-step legend small { margin-left: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
.checkout-field { min-width: 0; }
.checkout-field + .checkout-field-grid, .checkout-field-grid + .checkout-field, .checkout-choice-grid + .checkout-field-grid, .checkout-field-help + .checkout-field-grid { margin-top: var(--space-24); }
.checkout-field-help, .checkout-field #checkout-email-help { margin-top: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-caption); }

.checkout-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.checkout-form .checkout-choice { display: flex; align-items: center; gap: var(--space-12); min-height: var(--button-compact-height); margin: 0; padding: var(--space-8) var(--space-16); border: 1px solid var(--border-control-dark); border-radius: var(--radius-control); cursor: pointer; font: var(--type-body); }
.checkout-choice:has(:checked) { border-color: var(--border-control-dark-hover); background: var(--wash-dark-hover); }

.checkout-choice > span { min-width: 0; overflow-wrap: anywhere; }
.checkout-choice small { margin-left: auto; color: var(--text-on-dark-muted); white-space: normal; font: var(--type-caption); }
.checkout-order-lines { display: grid; gap: var(--space-24); list-style: none; padding: 0; margin: 0; font: var(--type-small); }
.checkout-order-lines li { display: flex; justify-content: space-between; gap: var(--space-16); }
.checkout-order-lines li > div { min-width: 0; overflow-wrap: anywhere; }
.checkout-order-lines li > span { white-space: nowrap; }
.checkout-order-lines small { display: block; margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-edit { display: inline-flex; align-items: center; gap: var(--space-12); min-height: var(--touch-min); margin-block: var(--space-16) var(--space-24); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-edit:hover { color: var(--color-white); }
.checkout-edit .icon { width: var(--space-16); height: var(--space-16); }
.checkout-order-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32); margin-top: var(--space-40); }
.checkout-order-details dt { color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-order-details dd { margin: var(--space-12) 0 0; font: var(--type-small); overflow-wrap: anywhere; }
.checkout-order-details dd span { display: block; margin-top: var(--space-8); }
.checkout-order-details dd small { display: block; margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-page--details .checkout-shell > .surmav-back { margin-bottom: 0; }
.checkout-page--details .checkout-heading { margin-block: var(--space-16) var(--space-32); }
.checkout-details label { margin-bottom: var(--space-8); }
.checkout-details input:not([type='radio']), .checkout-details select { --field-height: var(--button-compact-height); --field-py: var(--space-8); --field-px: var(--space-12); }
.checkout-page--details .checkout-summary { padding: var(--space-32); }
.checkout-page--details .checkout-summary > h2 { margin-bottom: var(--space-24); }
.checkout-page--details .checkout-order-lines { gap: var(--space-16); }
.checkout-page--details .checkout-edit { margin-block: var(--space-8) var(--space-16); }
.checkout-gift-intro { display: flex; align-items: start; gap: var(--space-16); margin-bottom: var(--space-16); }
.checkout-gift-intro .checkout-field-help { margin: 0; }
.checkout-all-self { flex-shrink: 0; }
.checkout-gift-list { display: grid; gap: var(--space-12); }
.checkout-gift-recipient { min-width: 0; margin: 0; padding: var(--space-16); border: 1px solid var(--line-dark); border-radius: var(--radius-container); background: var(--wash-dark-hover); }
.checkout-gift-recipient > legend { display: flex; align-items: center; gap: var(--space-8); font: var(--type-small); }
.checkout-gift-number { display: inline-grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; color: var(--text-on-dark-muted); background: var(--wash-dark-hover); font: var(--type-caption); }
.checkout-gift-recipient .checkout-field-grid { margin-top: var(--space-16); }

@media (max-width: 600px) {
  .checkout-field-grid, .checkout-choice-grid, .checkout-order-details { grid-template-columns: minmax(0, 1fr); }
  .checkout-step legend { font: var(--type-body); }
  .checkout-step { padding-bottom: var(--space-24); }
  .checkout-step + .checkout-step { padding-top: var(--space-24); }
  .checkout-progress { margin-bottom: var(--space-16); }
  .checkout-gift-intro { display: block; }
  .checkout-gift-recipient > legend { font: var(--type-small); }

}
.checkout-heading { margin-block: var(--space-24) var(--space-40); }
.checkout-progress { float: right; margin: var(--space-8) 0 0 var(--space-24); }
@media (max-width: 600px) {
  .checkout-shell > .surmav-back { margin-bottom: 0; }
  .checkout-heading { margin-block: var(--space-16) var(--space-32); }
  .checkout-progress { float: none; margin: 0 0 var(--space-16); }
}

/* Complete review navigation; retains the approved homepage composition. */
.site-header--checkout .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
.site-header--checkout :is(.site-navigation, .header-cart, .menu-toggle), .site-footer--checkout :is(.footer-top, .footer-languages) { display: none; }
.site-footer--checkout .footer-bottom { border-top: 1px solid var(--line-dark); }
.preview-overview { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-8); min-height: 28px; color: var(--color-white); }
.preview-overview .icon, .footer-legal .icon, .checkout-legal .icon { width: 13px; height: 13px; flex-shrink: 0; }
.checkout-legal { display: grid; gap: var(--space-4); margin: var(--space-16) 0; color: var(--text-on-dark-muted); font: var(--type-caption); }
.checkout-legal a { display: inline-flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; min-height: 44px; }
.checkout-terms { display: flex; align-items: flex-start; gap: var(--space-12); min-height: var(--touch-min); padding-block: var(--space-12); color: var(--color-white); cursor: pointer; }

.checkout-terms > span { min-width: 0; }
.checkout-terms a { display: inline; min-height: 0; }
.checkout-terms a .icon { width: 14px; height: 14px; vertical-align: middle; }

.catalog-page { background: var(--color-black); color: var(--color-white); --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); --link-hover-thickness: 1px; }
.catalog-demo { padding: var(--space-80) 0; background: var(--surface-dark-raised); }
.catalog-demo-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items: center; }
.catalog-demo img { width: 100%; height: auto; border: 1px solid var(--line-dark); border-radius: var(--radius-art); }
.catalog-demo-label { font: var(--type-small); color: var(--text-on-dark-muted); margin-bottom: var(--space-12); }
.catalog-demo h2 { font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.catalog-demo h2 + p { margin: var(--space-20) 0 var(--space-24); max-width: 520px; color: var(--text-on-dark-muted); font: var(--type-prose); }

@media(max-width:720px) { .catalog-demo-layout { grid-template-columns: 1fr; gap: var(--space-24); } .catalog-demo { padding: var(--space-64) 0; } .preview-overview { min-height: 44px; } }

.companies-section { --focus-ring: var(--focus-on-light); --link-hover-color: var(--color-black); --link-hover-thickness: 2px; background: var(--surface-warm); color: var(--color-black); padding-block: var(--space-80); }
.companies-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-80); }
.companies-section h1 { font: var(--type-heading-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); }
.companies-section .surmav-back { margin-bottom: var(--space-40); }
.companies-list { margin: 0; padding: 0; list-style: none; }
.companies-list li { border-top: 1px solid var(--line-light); padding-block: var(--space-24); }
.companies-list li:last-child { border-bottom: 1px solid var(--line-light); }
.additional-page .companies-list h2 { margin: 0 0 var(--space-12); font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.additional-page--companies .companies-section { padding-block: var(--space-48) var(--space-80); }
.companies-list p { margin: 0; color: var(--text-on-light-secondary); }
.companies-section .play-guide-demo-button { margin-top: var(--space-32); }
@media (max-width: 720px) { .companies-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); } .companies-section, .additional-page--companies .companies-section { padding-block: var(--space-64); } }

/* Shared facts also appear on dark game pages and in light dialogs. */
:is(.game-lineup, .surmav-page, .play-guide) :is(.room-overview .icon, .room-support, .room-support .icon, .room-recommendation) { color: var(--text-on-dark-muted); }
.game-dialog .room-overview--labelled dt { color: var(--text-on-light-secondary); }
.gift-section .gift-delivery { color: var(--text-on-light-secondary); }
.companies-section .surmav-back { color: var(--text-on-light-secondary); }

.companies-section .surmav-back:hover { color: var(--text-on-light); }

/* Selected controls and compact price labels use the guide's medium weight. */
.site-navigation > a[aria-current], .language-options a[aria-current], .footer-languages a[aria-current],
.purchase-for input:checked + span,
.checkout-choice:has(:checked), .checkout-shipping-options label:has(:checked) { font-weight: var(--weight-medium); }
.checkout-unit > span:not(.mobile-cell-label), .checkout-line-total > span:not(.mobile-cell-label), .checkout-order-lines li > span, .checkout-costs dd { font: var(--type-body); font-weight: var(--weight-medium); letter-spacing: var(--tracking-price); }

/* Focus returned after a mouse/touch close stays quiet until the next key press (app.js restoreFocus). */
[data-quiet-focus]:focus-visible { outline: none; }
/* Links in prose always identify themselves with an underline, on either surface.
   Cart removal keeps text-button semantics and its existing 44 px target. */
:is(p a, dd a, .inline-link, .faq-link, .faq-intro > a, #play-guide-demo-title a, .footer-legal a, .checkout-legal a,
  .checkout-terms a, .additional-text-link, .play-guide-link, .preview-overview):not(.button) {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: var(--space-4);
}
:is(p a, dd a, .inline-link, .faq-link, .faq-intro > a, #play-guide-demo-title a, .footer-legal a, .checkout-legal a,
  .checkout-terms a, .additional-text-link, .play-guide-link, .preview-overview):not(.button):hover {
  text-decoration-color: var(--link-hover-color);
  text-decoration-thickness: var(--link-hover-thickness);
}
/* Account for the sticky header during both anchor navigation and keyboard focus. */
main [id], main :is(a, button, input, select, textarea, summary, [tabindex]),
.site-footer, .site-footer :is(a, button) { scroll-margin-top: var(--space-48); }

/* Reserve the longest localized state, including while it is visually hidden. */
.cart-state-label { display: inline-grid; flex-shrink: 0; white-space: nowrap; overflow-wrap: normal; }
.cart-state-label > span { grid-area: 1 / 1; }
.cart-state-label > [aria-hidden='true'] { visibility: hidden; }
/* The gift label may wrap in a narrow column rather than overflow the button. */
.cart-gift-label { min-width: 0; text-align: left; }
.button--small .cart-gift-label { white-space: nowrap; }
:is(.lineup-add, .product-add) .cart-state-icon { width: var(--icon-medium); height: var(--icon-medium); flex: 0 0 var(--icon-medium); }

/* Text actions keep their caption baseline while offering a 44 px touch target. */
.cart-remove, .cart-undo {
  display: inline-block;
  padding: calc((var(--touch-min) - 1lh) / 2) 0;
  margin-block: calc((1lh - var(--touch-min)) / 2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-on-dark-muted);
  font: inherit;
  vertical-align: baseline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--space-4);
}
.cart-remove:is(:hover, :active), .cart-undo:is(:hover, :active) { color: var(--text-on-dark); }
.cart-inline-action { white-space: nowrap; }
.cart-meta-separator { color: var(--text-on-dark-muted); }
.cart-undo-row { color: var(--text-on-dark-muted); font: var(--type-caption); overflow-wrap: anywhere; }
.cart-items > .cart-undo-row { padding-block: var(--space-16); }
#cart-content > .cart-items { padding: var(--space-24); }
.checkout-table .cart-undo-row > td { grid-column: 1 / -1; }

/* LHV bank selection follows the existing checkout choice controls. */
.checkout-bank-options { border: 0; padding: 0; margin: var(--space-16) 0 0; min-width: 0; }

.checkout-bank-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.checkout-form .checkout-bank { position: relative; display: flex; justify-content: center; gap: var(--space-8); min-height: var(--button-height); padding: var(--space-12) var(--space-8); font: var(--type-body); font-weight: var(--weight-medium); background: var(--surface-dark-raised); }
.checkout-bank input { flex: 0 0 var(--space-20); width: var(--space-20); }
/* Unselected banks center their text; the native radio keeps label and keyboard focus. */
.checkout-bank input[type='radio']:not(:checked) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.checkout-bank > span { text-align: center; }
.checkout-form .checkout-bank:has(input:checked) { border-color: var(--color-yellow); color: var(--color-yellow); }
@media (max-width: 600px) { .checkout-bank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.checkout-summary-column { min-width: 0; }
.checkout-help { margin-top: var(--space-16); text-align: left; color: var(--text-on-dark-muted); font: var(--type-small); letter-spacing: normal; }
.checkout-help a { text-decoration: underline; text-underline-offset: 4px; }
.checkout-payment-options { display: grid; gap: var(--space-24); }
.checkout-payment-option { padding: 0; }
.checkout-payment-option + .checkout-payment-option { border-top: 1px solid var(--line-dark); padding-top: var(--space-24); }
.checkout-payment-option > .checkout-choice-grid { grid-template-columns: minmax(0, 1fr); }
.checkout-form .checkout-payment-option > .checkout-choice-grid > .checkout-choice { padding: 0; border: 0; background: none; min-height: var(--touch-min); font-weight: var(--weight-medium); }
.checkout-payment-option .checkout-bank-options > legend { color: var(--text-on-dark-secondary); font: var(--type-body); }
.checkout-page--details .checkout-field-help { color: var(--text-on-dark-secondary); font: var(--type-small); }

@media (min-width: 1001px) {
  .checkout-summary--sticky { position: sticky; top: var(--checkout-summary-top); }
}

.checkout-payment-option > .checkout-choice-grid input[type='radio'] { border: 1px solid var(--border-control-dark); border-radius: 50%; }
.checkout-payment-option > .checkout-choice-grid input[type='radio']:checked { border-color: var(--color-yellow); }
.checkout-payment-option > .checkout-choice-grid input[type='radio']::before { width: 8px; height: 8px; border: 0; border-radius: 50%; background: currentColor; transform: none; }

.staging-actions { display: flex; flex-wrap: wrap; gap: var(--space-16); margin-block: var(--space-24) var(--space-32); }
.staging-actions .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.staging-delivery { margin-bottom: var(--space-48); }
.staging-delivery h2 { font: var(--type-heading-sm); }
.staging-delivery > p { margin-top: var(--space-12); color: var(--text-on-dark-muted); }
.staging-delivery-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-24); list-style: none; padding: 0; margin: var(--space-24) 0 0; }
.staging-delivery-item { display: flex; flex-direction: column; align-items: start; gap: var(--space-12); min-width: 0; padding: var(--space-24); border: 1px solid var(--line-dark); border-radius: var(--radius-container); background: var(--surface-dark-raised); overflow-wrap: anywhere; }
.staging-delivery-item h3 { font: var(--type-body); font-weight: var(--weight-medium); }
.staging-delivery-item p { font: var(--type-small); }
.staging-delivery-item p span { display: block; margin-top: var(--space-4); }
.staging-delivery-item .staging-delivery-state { color: var(--text-on-dark-muted); }
.staging-delivery-item .button { margin-top: auto; max-width: 100%; white-space: normal; }
.staging-order-details { margin-top: var(--space-24); border-top: 1px solid var(--line-dark); }
.staging-order-details > summary { padding-block: var(--space-16); min-height: var(--touch-min); cursor: pointer; font: var(--type-body); }
.staging-order-details .checkout-order-details { margin-top: var(--space-16); }
.staging-result .checkout-layout > div { min-width: 0; }
.staging-result > .checkout-shell > .checkout-help { margin-top: var(--space-32); }

:root:has(.contact-section) { background: var(--surface-dark); }
body:has(.contact-section) { min-height: 100vh; min-height: 100dvh; }
.contact-section { --focus-ring: var(--focus-on-dark); --link-hover-color: var(--color-yellow); color: var(--text-on-dark); background: var(--surface-dark); padding-block: var(--space-64); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-64); max-width: 1120px; }
.contact-layout h1 { font: var(--type-heading-lg); margin-bottom: var(--space-24); }
.contact-layout h2 { font: var(--type-heading-sm); margin-bottom: var(--space-24); }
.contact-layout p { line-height: 1.65; margin-bottom: var(--space-24); }
.contact-layout a { color: var(--text-on-dark); text-underline-offset: 4px; }
.contact-form, .contact-field { display: grid; gap: var(--space-12); min-width: 0; }
.contact-form { gap: var(--space-24); }
.contact-field label span, .contact-privacy { color: var(--text-on-dark-muted); }
.contact-field input, .contact-field textarea, .contact-field select { width: 100%; min-width: 0; border: 1px solid var(--line-dark); border-radius: var(--radius-control); background: var(--surface-dark-raised); color: var(--text-on-dark); font: inherit; padding: var(--space-16); }
.contact-form[hidden] { display: none; }
.contact-field textarea { resize: vertical; min-height: 160px; }
.contact-form .button { justify-self: start; }
@media (max-width: 760px) { .contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-40); } .contact-section { padding-block: var(--space-40); } }