/*
  RipRaptor styles. All values come from tokens.css.
  Mobile first: base rules are for phones, media queries add layout above.
    40rem (640px)  large phones
    48rem (768px)  tablets
    60rem (960px)  desktop
*/

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-stretch: var(--stretch-display);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
p + p { margin-top: var(--space-3); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -10rem; z-index: 10;
  padding: var(--space-2) var(--space-4); background: var(--color-brand); color: var(--color-brand-ink);
  font-weight: var(--weight-strong); border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-3); }
.muted { color: var(--color-ink-subtle); }
.num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon--search { --icon: url("../img/icon-search.656ae7329268.png"); }
.icon--bag { --icon: url("../img/icon-bag.325dff35bce4.png"); }
.icon--refresh { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M20 4v5h-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.page {
  flex: 1 0 auto; width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin: 0 auto; padding: 0 var(--gutter) var(--space-8);
}
@media (min-width: 48rem) {
  .page { max-width: calc(var(--page-width) + 2 * var(--gutter-wide)); padding-inline: var(--gutter-wide); }
}

/* Shared pieces ----------------------------------------------------------- */

.eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--color-ink-subtle); line-height: var(--leading-snug);
}
.page-title { font-size: var(--text-page-title); margin: var(--space-5) 0 var(--space-4); }
.section-title { font-size: var(--text-section); }
.section-note { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-ink-subtle); }
.block { margin-top: var(--space-7); }
.small-print { margin-top: var(--space-4); max-width: 44rem; font-size: var(--text-sm); color: var(--color-ink-subtle); }
.small-print p + p { margin-top: var(--space-2); }

.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-head__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-section); font-weight: var(--weight-heading); }
.section-head__icon { width: 1em; height: 1em; color: var(--color-brand); }
@media (max-width: 40rem) { .section-head__title { font-size: 1.25rem; } }
.section-head__all {
  flex: none; color: var(--color-ink-muted); font-weight: var(--weight-medium); font-size: var(--text-sm);
  text-decoration: none; background: none; border: 0; padding: var(--space-1) 0; font-family: inherit; cursor: pointer;
  transition: color var(--motion-fast);
}
.section-head__all:hover { color: var(--color-brand-text); }
.section-head__note { font-size: var(--text-sm); color: var(--color-ink-subtle); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0 var(--space-5);
  border: 1.5px solid var(--color-brand-action); border-radius: var(--radius);
  background: var(--color-brand-action); color: var(--color-brand-ink);
  font: inherit; font-weight: var(--weight-strong); line-height: 1.2; text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background var(--motion-fast);
}
@media (hover: hover) {
  .button:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); transform: translateY(-1px); box-shadow: var(--shadow-button-hover); }
}
.button:active { transform: scale(0.985); box-shadow: var(--shadow-button); transition-duration: 60ms; }
.button[aria-disabled="true"], .button:disabled { opacity: 0.55; pointer-events: none; }
.button--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-line); box-shadow: none; }
@media (hover: hover) { .button--quiet:hover { background: var(--color-shelf); border-color: var(--color-ink-subtle); box-shadow: none; } }
.button--small { min-height: 2.25rem; padding: 0 var(--space-4); font-size: var(--text-sm); }
.button--buy { flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
.button--buy .icon--bag { width: 1.9rem; height: 1.9rem; }
.button--card { min-width: 6.5rem; }
.button--big { min-width: 8rem; padding: var(--space-4) var(--space-5); font-size: var(--text-lg); }
.button--big .icon--bag { width: 2.75rem; height: 2.75rem; }

/* Price */
.price {
  display: inline-block; font-stretch: var(--stretch-price); font-weight: var(--weight-price);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap; color: var(--color-price);
}
.price--md { font-size: var(--text-price-md); }
.price--card { font-size: var(--text-price-card); }
.price--lg { font-size: var(--text-price-lg); }

/* Stock */
.stock, .stock-inline {
  display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--text-sm);
  line-height: var(--leading-snug); font-weight: var(--weight-strong);
}
.stock::before, .stock-inline::before { content: ""; flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.stock--in, .stock-inline--in_stock { color: var(--color-in-stock); }
.stock--preorder, .stock-inline--preorder { color: var(--color-preorder); }
.stock--out, .stock--none, .stock-inline--out_of_stock, .stock-inline--stale { color: var(--color-out); font-weight: var(--weight-body); }
.stock--preorder::before, .stock-inline--preorder::before, .stock--out::before, .stock-inline--out_of_stock::before, .stock-inline--stale::before {
  background: transparent; box-shadow: inset 0 0 0 1.5px currentColor;
}
.stock--none::before { display: none; }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.3em 0.8em;
  border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-strong); line-height: 1.2;
}
.badge svg { width: 1em; height: 1em; }
.badge--good { background: var(--color-price-soft); color: var(--color-price); }

/* Product images */
.product-image {
  display: grid; place-items: center; aspect-ratio: 1; background: var(--color-shelf);
  border-radius: var(--radius); color: var(--color-ink-subtle); overflow: hidden;
}
.product-image img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; opacity: 0.85; transition: opacity var(--motion-normal); }
.product-image img.is-loaded, .product-image img[data-loaded] { opacity: 1; }
.product-image .placeholder { width: 46%; height: 46%; color: var(--color-placeholder); }
.placeholder__face, .placeholder__top, .placeholder__side { fill: var(--color-paper); }
.placeholder__side { fill: var(--color-line-soft); }
.product-image--thumb { width: 3rem; border-radius: var(--radius-sm); }
.product-image--row { width: 4rem; }
.product-image--card { width: 100%; }
.product-image--trend { width: 100%; aspect-ratio: 5 / 4; }
.product-image--large { width: 100%; background: transparent; }
.product-image--large .placeholder { width: 46%; height: 46%; }
@media (min-width: 48rem) { .product-image--row { width: 5.5rem; } }

/* Header ------------------------------------------------------------------ */

.masthead { background: var(--color-paper); }
.masthead__inner {
  max-width: calc(var(--page-width) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: grid; grid-template-columns: 2.5rem 1fr 2.5rem;
  grid-template-areas: "back brand nav" "search search search";
  align-items: center; gap: var(--space-3);
}
.masthead--home .masthead__inner { grid-template-areas: "back brand nav"; }
.masthead__back {
  grid-area: back; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-left: -0.5rem;
  color: var(--color-brand); border-radius: var(--radius);
  transition: transform var(--motion-fast) var(--ease-standard), opacity var(--motion-fast);
}
.masthead__back svg { width: 1.75rem; height: 1.75rem; }
@media (hover: hover) { .masthead__back:hover { transform: translateX(-2px); opacity: 0.85; } }
.masthead__back:active { transform: translateX(-2px) scale(0.94); }
.masthead--home .masthead__back { visibility: hidden; }

.wordmark { grid-area: brand; justify-self: center; display: block; line-height: 0; border-radius: var(--radius); }
.wordmark__img { height: 2rem; width: auto; }
.masthead__search { grid-area: search; position: relative; }
.masthead__nav { grid-area: nav; justify-self: end; display: flex; gap: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.masthead__nav a { text-decoration: none; padding-block: var(--space-1); white-space: nowrap; color: var(--color-ink); transition: color var(--motion-fast); text-underline-offset: 0.35em; text-decoration-thickness: 2px; }
.masthead__nav a:hover, .masthead__nav a[aria-current="page"] { color: var(--color-brand-text); text-decoration: underline; }
.wordmark__img { transition: transform var(--motion-normal) var(--ease-out); }
@media (hover: hover) { .wordmark:hover .wordmark__img { transform: scale(1.03) rotate(-1deg); } }
.masthead__swipe-icon { display: none; width: 1.6rem; height: 1.6rem; }
@media (max-width: 47.99rem) {
  .masthead__nav a:not(.masthead__swipe) { display: none; }
  .masthead__swipe, .masthead__nav .masthead__swipe { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 2.75rem; padding: 0.25rem 0.25rem 0.2rem; margin-right: -0.25rem; color: var(--color-brand-text); border-radius: var(--radius-sm); font-size: 0.6875rem; font-weight: var(--weight-medium); letter-spacing: 0.01em; }
  .masthead__swipe span { line-height: 1; }
  .masthead__swipe-icon { display: block; width: 1.5rem; height: 1.5rem; }
  .masthead__swipe:active { transform: scale(0.94); }
}
@media (min-width: 48rem) {
  .masthead__inner {
    max-width: calc(var(--page-width) + 2 * var(--gutter-wide)); padding: var(--space-4) var(--gutter-wide);
    grid-template-columns: auto minmax(0, 30rem) 1fr; grid-template-areas: "brand search nav"; gap: var(--space-5);
  }
  .masthead--home .masthead__inner { grid-template-columns: auto 1fr; grid-template-areas: "brand nav"; }
  .masthead__back { display: none; }
  .wordmark { justify-self: start; }
  .masthead__nav { gap: var(--space-6); font-size: var(--text-lg); font-weight: var(--weight-strong); }
}

/* Search ------------------------------------------------------------------ */

.search { position: relative; display: flex; align-items: center; width: 100%; }
.search__icon { position: absolute; left: var(--space-4); width: 1.25rem; height: 1.25rem; color: var(--color-ink-subtle); pointer-events: none; transition: color var(--motion-fast), transform var(--motion-fast) var(--ease-standard); }
.search:focus-within .search__icon { color: var(--color-brand); transform: scale(1.06); }
.search input {
  flex: 1; min-width: 0; height: 3rem; padding: 0 var(--space-3) 0 3rem;
  border: 1.5px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-paper); color: var(--color-ink); font: inherit; -webkit-appearance: none; appearance: none;
  box-shadow: var(--shadow-input);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 1rem; height: 1rem; cursor: pointer; background: var(--color-ink-subtle); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23000'/%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.search input::placeholder { color: var(--color-ink-subtle); opacity: 1; }
.search input:focus-visible { outline: none; border-color: var(--color-brand); box-shadow: var(--shadow-input), 0 0 0 3px var(--color-brand-soft); }
.search__button {
  position: absolute; right: 0.3rem; height: calc(100% - 0.6rem); padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-pill); background: var(--color-brand-action); color: var(--color-brand-ink);
  font: inherit; font-weight: var(--weight-strong); cursor: pointer;
}
.search__button { transition: background var(--motion-fast), transform var(--motion-fast) var(--ease-standard); }
.search__button:hover { background: var(--color-brand-hover); }
.search__button:active { transform: scale(0.97); }
.search--header input { height: 2.75rem; box-shadow: none; }
.search--header .search__button { font-size: var(--text-sm); }
.search--large input { height: 3.5rem; font-size: var(--text-lg); padding-right: 8rem; }
.search--large .search__icon { left: var(--space-5); }
.search--large input { padding-left: 3.5rem; }
@media (max-width: 40rem) {
  /* Phones: the search icon and the keyboard's search key do the job. */
  .search--large input { padding-right: var(--space-4); }
  .search--large .search__button { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
  .intro { padding-top: 0; }
  .intro .search { margin-top: var(--space-3); }
  .search--header input { padding-right: var(--space-4); }
  .search--header .search__button { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
  .search--large input { height: 3.25rem; font-size: var(--text-base); padding-left: 2.75rem; }
  .search--large .search__icon { left: 0.95rem; width: 1.1rem; height: 1.1rem; }
}

.live {
  position: relative; margin-top: var(--space-2); border: 1px solid var(--color-line);
  border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-lift); overflow: hidden;
  animation: rise var(--motion-normal) var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.live__item { animation: rise var(--motion-normal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); }
.masthead .live { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin-top: var(--space-1); }
.live__status { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-ink-muted); }
.live__status:empty { display: none; }
.live__results { list-style: none; }
.live__item + .live__item { border-top: 1px solid var(--color-line); }
.live__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; }
.live__link { transition: background var(--motion-fast); }
.live__link:hover, .live__link:focus-visible, .live__item[aria-selected="true"] .live__link { background: var(--color-shelf); outline: none; }
.live__item[aria-selected="true"] .live__link { box-shadow: inset 3px 0 0 var(--color-brand); }
.live__body { min-width: 0; display: grid; }
.live__name { font-weight: var(--weight-strong); line-height: var(--leading-snug); }
.live__meta { font-size: var(--text-xs); color: var(--color-ink-subtle); }
.live__offer { flex: none; display: grid; justify-items: end; gap: 2px; }
.live__price { font-size: var(--text-lg); }
.live__offer .stock { font-size: var(--text-xs); }
.live__all { border-top: 1px solid var(--color-line); background: var(--color-shelf); }
.live__all a { display: block; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-brand-text); }

/* Footer ------------------------------------------------------------------ */

.site-footer { flex: none; border-top: 1px solid var(--color-line); background: var(--color-shelf); font-size: var(--text-sm); color: var(--color-ink-muted); }
.site-footer__inner { max-width: calc(var(--page-width) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-6) var(--gutter); display: grid; gap: var(--space-5); }
.site-footer__line { max-width: 40rem; }
.site-footer__line a { color: var(--color-ink); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-footer__nav a { display: inline-block; padding-block: var(--space-1); color: var(--color-ink); font-weight: var(--weight-strong); }
.site-footer__line a { display: inline-block; padding-block: var(--space-1); }
@media (min-width: 48rem) {
  .site-footer__inner { max-width: calc(var(--page-width) + 2 * var(--gutter-wide)); padding-inline: var(--gutter-wide); grid-template-columns: 1fr auto; align-items: start; }
}

.breadcrumbs { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; }
.breadcrumbs a { display: inline-block; padding-block: var(--space-1); }
.breadcrumbs li + li::before { content: "/"; margin: 0 var(--space-2); color: var(--color-ink-subtle); }

/* Home -------------------------------------------------------------------- */

/* Hero: one unit. Headline, one line, search, one line of meta, game chips. */
.hero { padding: var(--space-3) 0 0; text-align: center; }
.hero + .home-section { margin-top: var(--rhythm-hero); }
.hero > *, .masthead--home .wordmark { animation: rise var(--motion-slow) var(--ease-out) both; }
.hero > :nth-child(2) { animation-delay: 40ms; }
.hero > :nth-child(3) { animation-delay: 80ms; }
.hero > :nth-child(n + 4) { animation-delay: 120ms; }
.reveal { opacity: 0; transform: translateY(6px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }
.hero__title { font-size: var(--text-headline); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); line-height: var(--leading-tight); letter-spacing: -0.02em; max-width: 22ch; margin: 0 auto; }
.hero__subtitle { margin: var(--space-2) auto 0; max-width: 40ch; color: var(--color-ink-muted); font-size: var(--text-base); line-height: var(--leading-snug); }
.hero__search { margin: var(--space-4) auto 0; max-width: 44rem; text-align: left; }
.hero .live { text-align: left; max-width: 44rem; margin-inline: auto; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-subtle); }
.hero__checked { display: inline-flex; align-items: center; gap: 0.4em; }
.hero__icon { width: 1em; height: 1em; color: var(--color-brand-text); }
.hero__retailers { color: var(--color-ink-muted); font-weight: var(--weight-medium); }
.hero__sep { color: var(--color-line-strong); }
.masthead--home .wordmark__img { height: 2.75rem; }
.masthead--home .masthead__inner { padding-bottom: var(--space-2); }
@media (min-width: 48rem) {
  .hero { padding: var(--space-5) 0 0; }
  .hero__subtitle { font-size: var(--text-lg); }
  .hero__search { margin-top: var(--space-5); }
  .masthead--home .wordmark__img { height: 4rem; }
}

/* Search on the home page: the main action */
.search--large input { height: 3.75rem; font-size: var(--text-lg); padding-left: 3.5rem; border: 1.5px solid var(--color-line-strong); box-shadow: var(--shadow-search); }
@media (min-width: 40rem) { .search--large input { padding-right: 10rem; } }
.search--large input::placeholder { color: var(--color-ink-muted); }
.search--large .search__icon { left: var(--space-5); }
.search--large .search__button { height: 2.9rem; padding: 0 var(--space-5); font-size: var(--text-base); font-weight: var(--weight-heading); }
@media (min-width: 48rem) { .search--large input { height: 4rem; } .search--large .search__button { height: 3.1rem; } }

/* Game chips: scroll on phones, one tidy row on larger screens */
.chips { margin: var(--space-4) calc(-1 * var(--gutter)) 0; }
.chips__list { list-style: none; display: flex; gap: var(--space-2); overflow-x: auto; padding: 2px var(--gutter); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.chips__list::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-block; padding: 0.5em 0.95em; border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; scroll-snap-align: start; transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast) var(--ease-standard); }
@media (hover: hover) { .chip:hover { border-color: var(--color-brand); color: var(--color-brand-text); background: var(--color-brand-soft); } }
.chip:active { transform: scale(0.97); }
.chip[aria-current="page"] { background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand-text); }
.chip--more { color: var(--color-brand-text); border-style: dashed; }
@media (min-width: 40rem) {
  .chips { margin-inline: 0; }
  .chips__list { justify-content: center; padding-inline: 0; overflow: visible; }
  .chips__extra { display: none; }
}
.game-links { margin-top: var(--space-3); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); font-weight: var(--weight-strong); }
.game-links a { color: var(--color-brand-text); text-decoration: none; }
.game-links a:hover { text-decoration: underline; }
.game-links__label { font-size: var(--text-sm); font-weight: var(--weight-body); color: var(--color-ink-subtle); }

.home-section { margin-top: var(--rhythm-section); }
.home-section .section-head { margin-bottom: var(--rhythm-title); }

/* The focal point: one product, one big saving */
.focal {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); align-items: center;
  padding: var(--card-pad); border: 1px solid var(--color-brand-line); border-radius: var(--radius-card);
  background: linear-gradient(135deg, var(--color-brand-soft), var(--color-paper) 55%); text-decoration: none; color: inherit;
  transition: transform var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out);
}
@media (hover: hover) { .focal:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); } .focal:hover .product-image img { transform: scale(1.02); } }
.focal .product-image img { transition: transform var(--motion-normal) var(--ease-out); }
.focal__image { display: block; }
.product-image--focal { width: 100%; background: var(--color-paper); }
.focal__body { display: grid; gap: var(--space-1); min-width: 0; }
.focal__kicker { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-text); }
.focal__kicker-icon { width: 1.1em; height: 1.1em; }
.focal__name { font-size: var(--text-xl); font-weight: var(--weight-heading); line-height: var(--leading-snug); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.focal__meta { font-size: var(--text-sm); color: var(--color-ink-subtle); }
.focal__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.price--focal { font-size: var(--text-price-focal); }
.focal__was { font-size: var(--text-base); color: var(--color-ink-subtle); }
.focal__arrow { color: var(--color-ink-subtle); }
.focal__at { font-size: var(--text-sm); color: var(--color-ink-muted); }
.focal__save { display: inline-grid; justify-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--color-price); color: #fff; line-height: 1.25; }
.focal__save strong { font-size: var(--text-base); font-weight: var(--weight-price); font-variant-numeric: tabular-nums; }
.focal__save small { font-size: var(--text-xs); }
.focal__next { font-size: var(--text-sm); color: var(--color-ink-subtle); }
@media (min-width: 48rem) {
  .focal { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-6); padding: var(--space-5); }
  .focal__name { font-size: var(--text-page-title); }
  .focal__save { padding: var(--space-2) var(--space-4); }
  .focal__save strong { font-size: var(--text-xl); }
}

/* Trending: horizontal row of product cards */
.trending {
  list-style: none; display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: var(--space-1) var(--gutter) var(--space-3); margin: 0 calc(-1 * var(--gutter)); scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.trending::-webkit-scrollbar { display: none; }
.trending__item { flex: 0 0 calc((100% - var(--space-3)) / 1.8); scroll-snap-align: start; }
.trending__link {
  display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  background: var(--color-paper); text-decoration: none; height: 100%;
  transition: transform var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out), border-color var(--motion-normal);
}
.trending__link .product-image img { transition: transform var(--motion-normal) var(--ease-out); }
@media (hover: hover) {
  .trending__link:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); border-color: var(--color-line-strong); }
  .trending__link:hover .product-image img { transform: scale(1.02); }
}
.trending__link:active { transform: scale(0.99); }
.trending__link .product-image { border-radius: var(--radius-sm); margin-bottom: var(--space-1); }
.trending__name { padding: 0 var(--space-1); font-weight: var(--weight-strong); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.3em); }
.trending__price { padding: 0 var(--space-1); }
.trending__price .price { font-size: var(--text-price-md); }
.trending__retailer { padding: 0 var(--space-1); font-size: var(--text-xs); color: var(--color-ink-subtle); }
.trending__move { padding: 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.trending__move--down { color: var(--color-price); }
.trending__move--up { color: var(--color-more); }
@media (min-width: 48rem) {
  .trending { margin: 0; padding-inline: 0; }
  .trending__item { flex-basis: calc((100% - 4 * var(--space-3)) / 5); }
}

/* Biggest savings: the shop that wins, the one it beats, and by how much */
.savings { list-style: none; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); overflow: hidden; }
.saving + .saving { border-top: 1px solid var(--color-line-soft); }
.saving { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding-right: var(--card-pad); }
.saving__buy { min-width: 6rem; }
.saving__buy .icon--bag { width: 1.1rem; height: 1.1rem; }
.saving__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--card-pad); text-decoration: none; transition: background var(--motion-fast); }
@media (hover: hover) { .saving__link:hover { background: var(--color-shelf); } }
.saving__link:active { background: var(--color-shelf); }
.saving__body { min-width: 0; display: grid; gap: 2px; }
.saving__name { font-weight: var(--weight-strong); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.saving__best-line { font-size: var(--text-sm); color: var(--color-ink-muted); }
.saving__best { color: var(--color-price); font-weight: var(--weight-price); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.saving__retailer { white-space: nowrap; }
.saving__next { font-size: var(--text-xs); color: var(--color-ink-subtle); font-variant-numeric: tabular-nums; }
.saving__pill { flex: none; display: grid; justify-items: center; min-width: 6rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-price-soft); color: var(--color-price); text-align: center; line-height: 1.2; }
.saving__pill strong { font-size: var(--text-base); font-weight: var(--weight-price); font-variant-numeric: tabular-nums; }
.saving__pill small { font-size: var(--text-xs); font-weight: var(--weight-medium); }
.saving__chev { display: none; }
@media (max-width: 40rem) {
  .saving { grid-template-columns: 1fr; padding: 0 var(--card-pad) var(--space-3); }
  .saving__link { padding-inline: 0; }
  .saving__buy { justify-self: end; }
}
@media (min-width: 48rem) {
  .saving { padding-right: var(--space-5); }
  .saving__link { padding: var(--space-4) var(--space-5); gap: var(--space-4); }
  .saving__name { font-size: var(--text-base); }
  .saving__pill { min-width: 7.5rem; }
  .saving__pill strong { font-size: var(--text-lg); }
}

/* Price drops */
.drops { list-style: none; }
.drop + .drop { border-top: 1px solid var(--color-line); }
.drop__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; text-decoration: none; }
.drop__body { display: grid; min-width: 0; }
.drop__name { font-weight: var(--weight-medium); font-size: var(--text-sm); line-height: var(--leading-snug); }
.drop__meta { font-size: var(--text-sm); color: var(--color-ink-subtle); }
.drop__prices { display: grid; justify-items: end; gap: 2px; }
.drop__was { font-size: var(--text-xs); color: var(--color-ink-subtle); }

/* Recently released: set cards */
.sets { list-style: none; display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: var(--space-1) var(--gutter) var(--space-3); margin: 0 calc(-1 * var(--gutter)); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.sets::-webkit-scrollbar { display: none; }
.sets__item { flex: 0 0 11rem; scroll-snap-align: start; }
.set-card { display: grid; gap: var(--space-1); height: 100%; padding: var(--card-pad); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); text-decoration: none; color: inherit; transition: transform var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out), border-color var(--motion-normal); }
@media (hover: hover) { .set-card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); border-color: var(--color-line-strong); } }
.set-card__game { font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-brand-text); }
.set-card__name { font-weight: var(--weight-strong); line-height: var(--leading-snug); }
.set-card__count { font-size: var(--text-xs); color: var(--color-ink-subtle); }
@media (min-width: 48rem) {
  .sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .sets__item { flex: none; }
}

/* Set directory */
.home-section--directory { padding-top: var(--space-5); border-top: 1px solid var(--color-line-soft); }
.set-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-5) var(--space-6); }
.set-directory h3 { font-size: var(--text-base); }
.set-directory h3 a { display: inline-block; padding-block: 4px; text-decoration: none; }
.set-directory ul { list-style: none; margin-top: var(--space-2); }
.set-directory li { padding: 0; }
.set-directory li a { display: inline-block; padding-block: var(--space-1); }
.set-directory li a { text-decoration: none; color: var(--color-ink-muted); }
.set-directory li a:hover { color: var(--color-brand-text); }

/* Browse: search, game and set pages ---------------------------------------- */

.browse-head { padding: var(--space-4) 0 var(--space-3); }
.browse-head .breadcrumbs { margin: 0 0 var(--space-2); }
.browse-head__title { font-size: var(--text-page-title); overflow-wrap: anywhere; }
.browse-head__meta { margin-top: var(--space-2); color: var(--color-ink-muted); }
.browse-head__count { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-ink-subtle); }
.browse-head--empty { padding-top: var(--space-6); max-width: 42rem; }
.browse-head--empty .prose { margin-top: var(--space-3); }
.browse-head--empty .game-links { justify-content: flex-start; margin-top: var(--space-5); }

.set-nav { margin-bottom: var(--space-3); }
.set-nav__title { font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink-subtle); margin-bottom: var(--space-2); }
.set-nav ul { list-style: none; display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: none; }
.set-nav ul::-webkit-scrollbar { display: none; }
.set-nav a { flex: none; display: inline-block; padding: 0.4em 0.9em; border: 1px solid var(--color-line); border-radius: var(--radius-pill); text-decoration: none; color: var(--color-ink-muted); font-size: var(--text-sm); white-space: nowrap; }
.set-nav a:hover { border-color: var(--color-brand); color: var(--color-brand-text); }
.set-nav a[aria-current="page"] { background: var(--color-brand-action); border-color: var(--color-brand-action); color: var(--color-brand-ink); font-weight: var(--weight-strong); }

/* Filter pills */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) 0 var(--space-4); }
.pill {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 2.75rem; padding: 0 var(--space-3);
  border: 1.5px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-paper);
  font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink);
}
.pill--sort { border-color: var(--color-brand); color: var(--color-brand-text); }
.pill__icon { width: 1.25rem; height: 1.25rem; flex: none; }
.pill select, .pill__select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231f2430' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right center / 0.7rem;
  padding: 0 1.2rem 0 0; font: inherit; color: inherit; cursor: pointer; max-width: 12rem;
}
.pill select:focus-visible { outline: none; }
.pill { transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.pill:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
@media (hover: hover) { .pill:hover { border-color: var(--color-ink-subtle); } .pill--sort:hover { border-color: var(--color-brand-hover); } }
.pill--check { cursor: pointer; }
.pill--check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-brand); }
.filters__actions { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.filters__clear { color: var(--color-brand-text); }

/* Product cards (search results) */
.cards { list-style: none; display: grid; gap: var(--space-4); }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  position: relative; display: grid; grid-template-columns: 9rem minmax(0, 1fr); grid-template-areas: "image body" "rank rank";
  gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper);
  transition: transform var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out);
}
@media (hover: hover) { .card:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); } }
.card__image { grid-area: image; align-self: start; }
.card__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name check" "badge badge" "price buy" "at buy"; align-content: start; column-gap: var(--space-2); row-gap: var(--space-1); min-width: 0; }
.card__name { grid-area: name; font-size: var(--text-lg); font-stretch: 100%; line-height: var(--leading-snug); letter-spacing: 0; }
.card__name a { display: inline-block; padding-block: 2px; text-decoration: none; }
.card__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.card:hover .card__name a { text-decoration: underline; }
.card__check { grid-area: check; position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.3em; min-height: 1.75rem; padding: 0 var(--space-1); font-size: var(--text-xs); color: var(--color-ink-subtle); text-decoration: none; white-space: nowrap; }
.card__check svg { width: 1em; height: 1em; color: var(--color-brand-text); }
.card__at { font-weight: var(--weight-body); }
.rank__name { font-weight: var(--weight-body); }
.card__body .badge { grid-area: badge; justify-self: start; margin-top: var(--space-1); }
.card__price { grid-area: price; margin-top: var(--space-1); }
.card__at { grid-area: at; font-size: var(--text-sm); color: var(--color-ink-muted); }
.card__last { grid-area: at; font-size: var(--text-sm); color: var(--color-ink-subtle); font-variant-numeric: tabular-nums; }
.card__at strong { color: var(--color-ink); }
.delivered { font-weight: var(--weight-strong); color: var(--color-price); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__body .button--buy { grid-area: buy; position: relative; z-index: 1; align-self: end; }
.card__body .stock { grid-area: price; }
.card__rank { grid-area: rank; }

/* Ranked retailers */
.rank { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); font-size: var(--text-sm); }
.rank__item { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.rank__pos { font-weight: var(--weight-price); font-stretch: var(--stretch-price); }
.rank__pos--1 { color: var(--color-price); }
.rank__pos--2 { color: var(--color-more); }
.rank__name { font-weight: var(--weight-strong); }
.rank__price { font-weight: var(--weight-price); color: var(--color-price); font-variant-numeric: tabular-nums; }
.rank__price--more { color: var(--color-more); }

@media (max-width: 40rem) {
  .card { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .card__body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "check check" "badge badge" "price buy" "at buy"; }
  .card__name { font-size: var(--text-base); }
  .card__check { justify-self: start; }
  .price--card { font-size: 1.5rem; }
  .card__body .button--buy { padding: var(--space-2) var(--space-3); min-width: 5.5rem; font-size: var(--text-sm); }
  .card__body .button--buy .icon--bag { width: 1.5rem; height: 1.5rem; }
}

/* Plain result rows (related products) */
.results { list-style: none; border-top: 1px solid var(--color-line); }
.result { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "image body" "image offer"; column-gap: var(--space-4); row-gap: var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.result .product-image { grid-area: image; align-self: start; }
.result__body { grid-area: body; min-width: 0; }
.result__name { margin-top: 2px; font-size: var(--text-base); font-stretch: 100%; font-weight: var(--weight-strong); line-height: var(--leading-snug); letter-spacing: 0; }
.result__name a { display: inline-block; padding-block: 2px; text-decoration: none; }
.result__name a::after { content: ""; position: absolute; inset: 0; }
.result:hover .result__name a { text-decoration: underline; }
.result__meta { margin-top: 2px; font-size: var(--text-sm); color: var(--color-ink-muted); }
.result__offer { grid-area: offer; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.result__price { display: flex; align-items: baseline; gap: var(--space-2); }
.result__price-label { font-size: var(--text-xs); color: var(--color-ink-subtle); }
@media (min-width: 48rem) {
  .result { grid-template-columns: auto minmax(0, 1fr) minmax(11rem, auto); grid-template-areas: "image body offer"; align-items: center; }
  .result__offer { flex-direction: column; align-items: flex-end; text-align: right; }
}
.results--compact .product-image--row { width: 3.5rem; }

.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.pagination a[rel="next"] { justify-self: end; }
.pagination__status { font-size: var(--text-sm); color: var(--color-ink-subtle); text-align: center; }
.empty { padding: var(--space-6) 0; }
.empty__title { font-size: var(--text-xl); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.empty p { color: var(--color-ink-muted); }

/* Product page ------------------------------------------------------------- */

.product-head { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.hero-card {
  display: grid; gap: var(--space-3); padding: var(--space-4); text-align: center;
  border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card);
}
.hero-card__image { max-width: 14rem; width: 100%; margin: 0 auto; }
@media (min-width: 48rem) { .hero-card__image { max-width: 22rem; } }
.product-title { font-size: var(--text-product-title); color: var(--color-brand); overflow-wrap: break-word; }
@media (min-width: 60rem) {
  .product-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; column-gap: var(--space-6); }
  .hero-card { text-align: left; grid-template-columns: 1fr; }
  .hero-card__image { margin: 0; }
}

.buybox { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.buybox__main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.buybox__offer { display: grid; gap: var(--space-1); justify-items: start; }
.buybox__label { font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-subtle); }
.buybox__delivered { font-size: var(--text-lg); }
.buybox__retailer { font-weight: var(--weight-strong); }
.buybox__breakdown { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.buybox__sep { color: var(--color-ink-subtle); }
.buybox__summary { font-size: var(--text-sm); color: var(--color-ink-muted); }
.buybox__none { font-size: var(--text-xl); font-weight: var(--weight-heading); line-height: var(--leading-snug); }

/* Check prices */
.section-head--tight { margin-bottom: var(--space-2); }
.refresh { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-muted); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-strong); cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast) var(--ease-standard); }
.refresh .icon { color: var(--color-brand); transition: transform var(--motion-slow) var(--ease-out); }
@media (hover: hover) { .refresh:hover { border-color: var(--color-brand-line); color: var(--color-ink); } }
.refresh:active { transform: scale(0.97); }
.refresh[aria-busy="true"] { pointer-events: none; }
.refresh[aria-busy="true"] .icon { animation: spin 700ms linear infinite; }
.refresh--done .icon { transform: rotate(360deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.refresh__status { min-height: 1.4em; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--color-price); opacity: 0; transition: opacity var(--motion-normal); }
.refresh__status.is-shown { opacity: 1; }
.refresh__status.is-error { color: var(--color-more); }
.money { display: inline-block; }
.money--out { animation: money-out var(--motion-fast) var(--ease-standard) both; }
.money--in { animation: money-in var(--motion-normal) var(--ease-out) both; }
.money--down { color: var(--color-price); }
.money--up { color: var(--color-more); }
@keyframes money-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes money-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Price list */
.offers-section .section-title { margin-bottom: var(--space-3); }
.amazon-check .section-note { margin-bottom: var(--space-3); max-width: 44rem; }
.offers { list-style: none; border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; }
.offers__head { display: none; }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "retailer total" "stock action" "meta meta"; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3); }
.offer + .offer { border-top: 1px solid var(--color-line); }
.offer { transition: background var(--motion-fast); }
@media (hover: hover) { .offer:not(.offer--cheapest):hover { background: var(--color-shelf); } }
.offer--cheapest { background: var(--color-price-soft); }
.offer__retailer { grid-area: retailer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.offer__name { font-weight: var(--weight-strong); }
.offer__flag { padding: 0.1em 0.5em; border-radius: var(--radius-pill); background: var(--color-price); color: #fff; font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.4; }
.offer__stock { grid-area: stock; }
.offer__price, .offer__delivery, .offer__checked { display: none; }
.offer__total { grid-area: total; font-stretch: var(--stretch-price); font-weight: var(--weight-price); font-size: var(--text-price-md); line-height: 1.1; color: var(--color-price); }
.offer__meta { grid-area: meta; font-size: var(--text-sm); color: var(--color-ink-subtle); }
.offer__action { grid-area: action; justify-self: end; }
.offer__action .button { min-width: 5.5rem; }
.offer__link { display: inline-block; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.offer--muted .offer__name, .offer--muted .offer__total { color: var(--color-ink-muted); }
.offer--muted .offer__total { font-weight: var(--weight-strong); }
@media (min-width: 60rem) {
  .offers__head, .offer { grid-template-columns: minmax(8rem, 1.6fr) minmax(7rem, 1fr) 5.5rem 5.5rem 6.5rem minmax(6.5rem, 1fr) 6rem; grid-template-areas: "retailer stock price delivery total checked action"; column-gap: var(--space-4); }
  .offers__head { display: grid; padding: var(--space-2) var(--space-3); background: var(--color-shelf); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink-subtle); }
  .offer__price, .offer__delivery, .offer__checked { display: block; }
  .offer__price { grid-area: price; } .offer__delivery { grid-area: delivery; }
  .offer__checked { grid-area: checked; font-size: var(--text-sm); color: var(--color-ink-subtle); }
  .offer__meta { display: none; }
  .offer__price, .offer__delivery { color: var(--color-ink-muted); }
}
.offers-more { margin-top: var(--space-4); }
.offers-more summary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-weight: var(--weight-strong); cursor: pointer; list-style: none; color: var(--color-brand-text); }
.offers-more summary::-webkit-details-marker { display: none; }
.offers-more summary::before { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--motion-fast); }
.offers-more[open] summary::before { transform: rotate(45deg); }
.offers-more .offers { margin-top: var(--space-2); }

/* History and details */
.product-lower { display: grid; gap: var(--space-7); }
@media (min-width: 60rem) { .product-lower { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); } }
.chart { margin: var(--space-4) 0 0; }
.chart__plot { position: relative; height: 11rem; margin-right: 4.5rem; border-bottom: 1px solid var(--color-line); }
.chart__plot svg { width: 100%; height: 100%; overflow: visible; }
.chart__line { fill: none; stroke: var(--color-brand); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart__guide { stroke: var(--color-line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart__label { position: absolute; left: calc(100% + var(--space-2)); top: var(--y); transform: translateY(-50%); white-space: nowrap; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-ink-muted); line-height: 1.4; }
.chart__marker { position: absolute; left: var(--x); top: var(--y); width: 0.85rem; height: 0.85rem; border: 2.5px solid var(--color-paper); border-radius: 50%; background: var(--color-price); box-shadow: 0 0 0 2px var(--color-price); transform: translate(-50%, -50%); }
.chart__axis { display: flex; justify-content: space-between; margin-top: var(--space-1); margin-right: 4.5rem; font-size: var(--text-xs); color: var(--color-ink-subtle); }
.chart__summary { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }
.history__empty { margin-top: var(--space-4); color: var(--color-ink-muted); }
.details__list { margin: var(--space-4) 0 0; border-top: 1px solid var(--color-line); }
.details__list div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.details__list dt { color: var(--color-ink-subtle); font-size: var(--text-sm); padding-top: 0.1em; }
.details__list dd { margin: 0; text-align: left; }
.details__list dd a, .small-print a, .prose a { display: inline-block; padding-block: 2px; }
.related .section-title { margin-bottom: var(--space-3); }

/* Games index and text pages ---------------------------------------------- */

.game-index { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .game-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); } }
.game-index__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-brand); }
.game-index__head h2 { font-size: var(--text-section); }
.game-index__head h2 a { text-decoration: none; }
.game-index__head p { font-size: var(--text-sm); }
.game-index__sets { list-style: none; }
.game-index__sets a { display: inline-block; padding-block: var(--space-1); }
.game-index__sets li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.game-index__set-meta { font-size: var(--text-sm); color: var(--color-ink-subtle); white-space: nowrap; }

.prose-page { max-width: 42rem; }
.prose-page section { margin-top: var(--space-6); }
.prose-page h2 { font-size: var(--text-section); margin-bottom: var(--space-3); }
.prose { color: var(--color-ink-muted); }
.prose p + p { margin-top: var(--space-4); }
.prose--lead { font-size: var(--text-lg); color: var(--color-ink); }
.retailer-list { list-style: none; margin-top: var(--space-4); border-top: 1px solid var(--color-line); }
.retailer-list li { display: grid; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.retailer-list__name { font-weight: var(--weight-strong); }
.retailer-list__domain, .retailer-list__note { font-size: var(--text-sm); color: var(--color-ink-subtle); }
@media (min-width: 40rem) { .retailer-list li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-4); align-items: baseline; } }
.not-found .search { margin-top: var(--space-5); }

/* Swipe deck --------------------------------------------------------------- */

.page--deck { padding-bottom: var(--space-6); }
.deck-page { max-width: 30rem; margin: 0 auto; }
.deck-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }
.deck-title { font-size: var(--text-lg); }
@media (max-width: 47.99rem) {
  /* Phones: the header search goes so the card, buttons and saved count fit on one screen. */
  .body--deck .masthead__search { display: none; }
  .body--deck .masthead__inner { grid-template-areas: "back brand nav"; }
  .deck-hint { display: none; }
  /* The page is a column the height of the screen; the deck takes what is left
     after the header row and the two buttons, so both are always on screen. */
  .body--deck .page { padding-bottom: 0; }
  .deck-page { display: flex; flex-direction: column; height: calc(100dvh - var(--masthead-height, 3.75rem)); }
  .deck { flex: 1 1 auto; height: auto; min-height: 14rem; max-height: none; margin-top: var(--space-2); }
  .deck-actions { flex: none; margin: var(--space-2) 0 var(--space-3); gap: var(--space-7); }
  .saved { flex: none; }
  .deck-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .deck-btn svg { width: 3.25rem; height: 3.25rem; padding: 0.85rem; }
  .swipe { padding: var(--space-2); }
  .swipe__name { font-size: var(--text-lg); }
  .swipe__price { font-size: 1.75rem; }
  .saved { margin-top: var(--space-5); }
}
.deck-filter { flex: none; display: inline-flex; align-items: center; height: 2.5rem; padding: 0 var(--space-3); border: 1.5px solid var(--color-line); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.deck-hint { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-subtle); }

.deck { position: relative; height: min(70vh, 34rem); margin-top: var(--space-4); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.deck__nojs { padding: var(--space-4); }
.deck__status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--color-ink-subtle); padding: var(--space-4); }
.deck__status .button { margin-top: var(--space-3); }

.swipe {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  background: var(--color-paper); box-shadow: var(--shadow-lift);
  will-change: transform; transform-origin: 50% 110%; touch-action: pan-y; cursor: grab;
}
/* The new top card reveals in order: image, title, price, badge, button. */
.swipe--enter .swipe__image { animation: fade-in var(--motion-normal) var(--ease-out) both; }
.swipe--enter .swipe__name, .swipe--enter .swipe__meta { animation: rise var(--motion-normal) var(--ease-out) both 60ms; }
.swipe--enter .swipe__price, .swipe--enter .swipe__at { animation: rise var(--motion-normal) var(--ease-out) both 110ms; }
.swipe--enter .badge { animation: badge-in var(--motion-normal) var(--ease-out) both 170ms; }
.swipe--enter .button--buy, .swipe--enter .rank { animation: rise var(--motion-normal) var(--ease-out) both 210ms; }
@keyframes badge-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.swipe:active { cursor: grabbing; }
.swipe--behind { box-shadow: var(--shadow-card); }
.swipe--settle { transition: transform var(--motion-slow) var(--ease-out), opacity var(--motion-slow); }
.swipe--fly { transition: transform var(--motion-slow) var(--ease-out), opacity var(--motion-slow); }
.swipe__top { display: grid; grid-template-rows: minmax(3rem, 1fr) auto auto; gap: var(--space-2); min-height: 0; overflow: hidden; }
.swipe__image { display: grid; place-items: center; min-height: 3rem; border-radius: var(--radius); background: var(--color-shelf); overflow: hidden; }
@media (max-height: 40rem) { .swipe__meta { display: none; } .swipe__name { font-size: var(--text-base); } }
.swipe__image img { max-height: 100%; width: auto; object-fit: contain; padding: 4%; mix-blend-mode: multiply; pointer-events: none; opacity: 0.85; transition: opacity var(--motion-normal); }
.swipe__image img.is-loaded { opacity: 1; }
.swipe__image .placeholder { width: 45%; height: 45%; color: var(--color-ink-subtle); }
.swipe__name { font-size: var(--text-xl); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); color: var(--color-brand); line-height: var(--leading-tight); text-align: center; }
.swipe__meta { font-size: var(--text-sm); color: var(--color-ink-subtle); text-align: center; }
.swipe__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "offer buy" "rank rank"; align-items: center; gap: var(--space-2) var(--space-3); }
.swipe__offer { grid-area: offer; display: grid; gap: 2px; justify-items: start; }
.swipe__price { font-size: var(--text-price-card); }
.swipe__at { font-size: var(--text-sm); color: var(--color-ink-muted); }
.swipe .button--buy { grid-area: buy; }
.swipe .rank { grid-area: rank; }
.swipe__stamp {
  position: absolute; top: var(--space-4); padding: 0.3em 0.8em; border: 3px solid currentColor; border-radius: var(--radius);
  font-size: 1.5rem; font-weight: var(--weight-price); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0; pointer-events: none;
}
.swipe__stamp--save { left: var(--space-4); color: var(--color-price); transform: rotate(-12deg); }
.swipe__stamp--skip { right: var(--space-4); color: var(--color-more); transform: rotate(12deg); }

.deck-actions { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-4); }
.deck-btn {
  display: grid; justify-items: center; gap: var(--space-1); background: none; border: 0; padding: 0; font: inherit;
  font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-ink-muted); cursor: pointer;
}
.deck-btn svg { width: 3.75rem; height: 3.75rem; padding: 1rem; border-radius: 50%; background: var(--color-paper); box-shadow: var(--shadow-card); border: 1px solid var(--color-line); transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast); }
@media (hover: hover) { .deck-btn:hover svg { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); } }
.deck-btn:focus-visible svg { box-shadow: 0 0 0 3px var(--color-brand-soft); }
.deck-btn:active svg { transform: scale(0.94); transition-duration: 60ms; }
.deck-btn--skip svg { color: var(--color-more); }
.deck-btn--save svg { color: var(--color-price); }

.saved { margin-top: var(--space-7); }
.saved__count { color: var(--color-ink-subtle); font-weight: var(--weight-body); }
.saved__empty { font-size: var(--text-sm); color: var(--color-ink-subtle); }
.saved .savings:empty { display: none; }

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .reveal { opacity: 1; transform: none; }
  .swipe--settle, .swipe--fly { transition-duration: 1ms !important; }
}