/*
  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"); }
/* The raptor head: web/static/img/raptor.png through a mask, like the icons, so it takes any token colour at any size
   from the one file. Orange (--color-brand) when it points you somewhere, ink when it looked and found nothing.
   Width and height come from --mark-size and the ratio tokens; the default is the floor, below which the crest smudges. */
.mark { --mark-size: var(--mark-sm); display: inline-block; flex: none; width: var(--mark-size); height: calc(var(--mark-size) / (var(--mark-ratio))); background: currentColor; -webkit-mask: url("../img/raptor.6098e72b588f.png") center / contain no-repeat; mask: url("../img/raptor.6098e72b588f.png") center / contain no-repeat; }
.mark--md { --mark-size: var(--mark-md); }

.page {
  --page-gutter: var(--gutter);
  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 { --page-gutter: var(--gutter-wide); 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); }
.page-head .page-title { margin-bottom: var(--space-2); }
.page-intro { max-width: 44rem; margin-bottom: var(--space-5); color: var(--color-ink-muted); }
.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--save { gap: var(--space-2); color: var(--color-ink-muted); }
.button--save .icon-save { width: 1.1rem; height: 1.1rem; flex: none; }
.button--save.is-saved { color: var(--color-brand-text); border-color: var(--color-brand-line); background: var(--color-brand-soft); }
.button--save.is-saved .icon-save path { fill: currentColor; }
.button--icon { width: 2.5rem; min-height: 2.5rem; padding: 0; border-radius: 50%; }
.button--icon .icon-save { width: 1.25rem; height: 1.25rem; }
.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); }
.badge--soon { background: var(--color-shelf); color: var(--color-ink-subtle); }
/* Pre-orders look the part: a quieter picture until the product is actually out. */
.is-upcoming .product-image img { opacity: 0.6; filter: grayscale(0.35); }
.trending__badge { align-self: flex-start; margin-top: var(--space-1); }

/* 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-2) 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-2);
}
.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, .masthead__watch-icon { display: none; width: 1.6rem; height: 1.6rem; }
@media (max-width: 47.99rem) {
  .masthead__inner { grid-template-columns: 2.5rem 1fr auto; }
  .masthead__nav { gap: var(--space-1); }
  .masthead__nav a:not(.masthead__swipe):not(.masthead__watch) { display: none; }
  .masthead__swipe, .masthead__watch { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 2.75rem; padding: 0.25rem 0.25rem 0.2rem; 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 { margin-right: -0.25rem; }
  .masthead__swipe span, .masthead__watch span { line-height: 1; }
  .masthead__watch [data-watch-count] { display: none; }
  .masthead__swipe-icon, .masthead__watch-icon { display: block; width: 1.5rem; height: 1.5rem; }
  .masthead__swipe:active, .masthead__watch:active { transform: scale(0.94); }
  /* Compact on phones: the page under it, not the header, should fill the first screen. */
  .masthead:not(.masthead--home) .wordmark__img { height: var(--masthead-logo); }
  .masthead .search--header input { height: var(--masthead-search); }
}
@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__button-arrow { display: none; width: 1.35rem; height: 1.35rem; }
.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 header search relies on the keyboard's search key; the home search keeps a round arrow button. */
  .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; }
}

.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); }
.site-footer__choice { padding: var(--space-1) 0; border: 0; background: none; color: var(--color-ink); font: inherit; font-weight: var(--weight-strong); cursor: pointer; }
@media (min-width: 48rem) {
  .site-footer__inner { max-width: calc(var(--page-width) + 2 * var(--gutter-wide)); padding-inline: var(--gutter-wide); }
}
/* Side by side only when the links fit beside a readable line; a tablet stacks them. */
@media (min-width: 60rem) {
  .site-footer__inner { 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. A line above, the headline with its orange second line, one line under, the search box and when
   prices were checked. Left aligned on a phone, centred on larger screens. */
.hero { padding: var(--space-3) 0 0; }
.hero + .home-section { margin-top: var(--rhythm-hero); }
.hero + .home-section--games { margin-top: var(--space-6); }
/* The hero does not animate on load: text arriving in sequence is decoration, not information. */
.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__eyebrow { margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-brand-text); }
.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; }
.hero__accent { display: block; color: var(--color-brand); }
.hero__subtitle { margin: var(--space-3) 0 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) 0 0; max-width: 44rem; text-align: left; }
.hero .live { text-align: left; max-width: 44rem; }
.hero__meta { display: flex; flex-wrap: wrap; 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; text-align: center; }
  .hero__title, .hero__subtitle, .hero__search, .hero .live { margin-inline: auto; }
  .hero__meta { justify-content: center; }
  .hero__subtitle { font-size: var(--text-lg); }
  .hero__search { margin-top: var(--space-5); }
  .masthead--home .wordmark__img { height: 4rem; }
}

/* Tiles: the games under the search box and the product types lower down */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tile {
  display: grid; gap: 2px; height: 100%; padding: var(--space-4); 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) { .tile:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); border-color: var(--color-brand-line); } }
.tile:active { transform: scale(0.99); }
.tile__name { font-size: var(--text-lg); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); line-height: var(--leading-snug); }
.tile__meta { font-size: var(--text-xs); color: var(--color-ink-subtle); }
.tile--type { grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-areas: "art name" "art meta"; column-gap: var(--space-2); align-items: center; }
.tile__art { grid-area: art; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--color-shelf); color: var(--color-placeholder); }
.tile__art .placeholder { width: 82%; height: 82%; }
.tile--type .tile__name { grid-area: name; align-self: end; font-size: var(--text-base); }
.tile--type .tile__meta { grid-area: meta; align-self: start; }
.tile--game { align-content: start; }
.tile__cover { margin-bottom: var(--space-2); }
.product-image--cover { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); }
/* The picture fills the well whatever its own size, so a tall box shot is scaled down rather than cut off. */
.product-image--cover img { position: absolute; inset: 0; }
.product-image--cover .placeholder { width: 40%; height: 70%; }
@media (hover: hover) { .tile--game .product-image img { transition: opacity var(--motion-normal), transform var(--motion-normal) var(--ease-out); } .tile--game:hover .product-image img { transform: scale(1.03); } }
@media (min-width: 40rem) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile--type { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--space-3); }
}
/* The games: one row that swipes sideways, like the product rows, with the next tile peeking in so it is plain there
   is more. Scrolled by the browser, so it works without JavaScript. */
.tiles--games {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: var(--space-1) var(--gutter) var(--space-3); margin: 0 calc(-1 * var(--gutter)); scroll-padding-inline: var(--gutter);
}
.tiles--games::-webkit-scrollbar { display: none; }
.tiles--games .tiles__item { flex: 0 0 calc((100% - 2 * var(--space-3)) / 2.4); scroll-snap-align: start; }
@media (min-width: 48rem) {
  .tiles--games { margin: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .tiles--games .tiles__item { flex-basis: calc((100% - 3 * var(--space-3)) / 3.5); }
}
@media (min-width: 60rem) { .tiles--games .tiles__item { flex-basis: calc((100% - 5 * var(--space-3)) / 5.5); } }

/* Raptor panels, the owner's design: the orange deals panel and the dark watchlist card. Big condensed capitals,
   the head cropped by the panel's edge, the whole panel one link. Orange here is the brand's own surface, at the
   owner's request; every price on the site stays green or red as before. The head is raptor-lg.png, sharp at this
   size, through the same mask as the small marks. */
.poster {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: center;
  padding: var(--poster-pad); border-radius: var(--radius-card); text-decoration: none;
  transition: transform var(--motion-normal) var(--ease-out), box-shadow var(--motion-normal) var(--ease-out);
}
@media (hover: hover) { .poster:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-hover); } }
.poster:active { transform: scale(0.99); }
.poster__body { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--space-3); max-width: 60%; }
.poster__title { font-size: var(--text-poster); font-weight: var(--weight-poster); font-stretch: var(--stretch-poster); line-height: var(--leading-poster); text-transform: uppercase; }
.poster__line { display: block; }
.poster__text { font-size: var(--text-xl); font-weight: var(--weight-heading); line-height: var(--leading-snug); }
.poster__button {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3) var(--space-4);
  border: 1.5px solid currentColor; border-radius: var(--radius-sm); font-weight: var(--weight-heading); line-height: var(--leading-tight);
}
.poster__mark {
  --mark-size: var(--mark-poster); position: absolute; z-index: 0; bottom: -18%;
  -webkit-mask-image: url("../img/raptor-lg.9623f43953a6.png"); mask-image: url("../img/raptor-lg.9623f43953a6.png");
}
/* Prices. Dropped.: ink capitals on orange, the head in paper on the right with its eye showing the orange. */
.poster--deals { background: var(--color-brand); color: var(--color-ink); }
.poster--deals .poster__text { color: var(--color-paper); }
.poster--deals .poster__button { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.poster--deals .poster__mark { right: -10%; color: var(--color-paper); }
/* Keep an eye on it.: paper capitals on ink, the head in orange coming in from the left. */
.poster--watch { background: var(--color-ink); color: var(--color-paper); }
.poster--watch .poster__body { justify-self: end; }
.poster--watch .poster__title { font-size: var(--text-poster-sm); }
.poster--watch .poster__text { font-size: var(--text-base); }
.poster--watch .poster__mark { --mark-size: var(--mark-poster-sm); left: -20%; color: var(--color-brand); }
/* Wider panels are shorter for their width: hang the head from the top so its eye always shows, and let the edge
   crop its neck. */
@media (min-width: 48rem) {
  .poster__mark { top: 8%; bottom: auto; }
  .poster--deals .poster__mark { right: 2%; }
  .poster--watch .poster__mark { left: -4%; }
}
@media (hover: hover) { .poster__button { transition: transform var(--motion-fast) var(--ease-standard); } .poster:hover .poster__button { transform: translateX(calc(-1 * var(--lift))); } }

/* 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; } }
@media (max-width: 40rem) {
  .search--large input { height: 3.5rem; font-size: var(--text-base); padding-left: 2.9rem; padding-right: 3.5rem; }
  .search--large .search__icon { left: 1rem; width: 1.15rem; height: 1.15rem; }
  .search--large .search__button { right: 0.4rem; width: 2.7rem; height: 2.7rem; padding: 0; border-radius: 50%; }
  .search--large .search__button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .search--large .search__button-arrow { display: block; }
}

/* 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); }

/* 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: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2) var(--space-2) var(--space-2); 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);
}
/* Every card ends with the same button, level across the row, with a little air above it. */
.trending__cta {
  display: flex; align-items: center; justify-content: center; gap: 0.3em; min-height: 2.25rem; margin-top: auto; padding: 0 var(--space-3);
  border: 1.5px solid var(--color-brand-line); border-radius: var(--radius-pill); color: var(--color-brand-text);
  font-size: var(--text-sm); font-weight: var(--weight-strong); white-space: nowrap;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}
.trending__link > :nth-last-child(2) { margin-bottom: var(--space-2); }
.trending__link:hover .trending__cta { background: var(--color-brand-soft); border-color: var(--color-brand); }
.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__retailer { white-space: normal; }
  .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); }

/* Coming soon: announced sets as plain rows */
.coming { margin-bottom: var(--space-5); }
.coming .section-head { margin-bottom: var(--space-2); }
.coming__list { list-style: none; }
.coming__row { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-top: 1px solid var(--color-line); min-width: 0; }
.coming__row:last-child { border-bottom: 1px solid var(--color-line); }
.coming__set { display: grid; min-width: 0; }
.coming__name { font-weight: var(--weight-strong); line-height: var(--leading-snug); text-decoration: none; overflow-wrap: anywhere; }
.coming__name:hover { color: var(--color-brand-text); text-decoration: underline; }
.coming__meta { font-size: var(--text-sm); color: var(--color-ink-muted); }
.coming__offer { font-size: var(--text-sm); color: var(--color-ink-muted); }
.coming__price { text-decoration: none; white-space: nowrap; }
.coming__price:hover .price { text-decoration: underline; }
.coming__price .price { line-height: var(--leading-snug); }
.coming__none { color: var(--color-ink-subtle); }
.coming__stock { color: var(--color-brand-text); text-decoration: none; }
.coming__stock:hover { text-decoration: underline; }
.browse-head__date { font-weight: var(--weight-strong); color: var(--color-ink); }
@media (min-width: 48rem) {
  .coming__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
  .coming__offer { text-align: right; }
}

/* 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-5); }
/* No luck. Yet.: the raptor in ink with an orange question mark, on a card of its own, as the owner drew it. */
.no-luck {
  display: grid; justify-items: center; gap: var(--space-3); max-width: 38rem; margin: 0 auto; padding: var(--poster-pad);
  border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper); text-align: center;
}
.no-luck .empty-mark { margin: 0; }
.no-luck__title { font-size: var(--text-poster-sm); font-weight: var(--weight-poster); font-stretch: var(--stretch-poster); line-height: var(--leading-poster); text-transform: uppercase; }
.no-luck__query { color: var(--color-ink-muted); overflow-wrap: anywhere; }
.no-luck .game-links { justify-content: center; margin-top: var(--space-2); }

.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 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); } }
.filters__actions { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.filters__clear { color: var(--color-brand-text); }
/* On and off filters as switches. The real checkbox stays in the page for the keyboard and for forms without JavaScript. */
.toggle {
  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 2.75rem; padding: 0 var(--space-3) 0 var(--space-2);
  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); cursor: pointer;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), color var(--motion-fast);
}
.toggle input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.toggle__track { position: relative; flex: none; width: 2.25rem; height: 1.25rem; border-radius: var(--radius-pill); background: var(--color-line-strong); transition: background var(--motion-fast); }
.toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 50%; background: var(--color-paper); transition: transform var(--motion-fast) var(--ease-standard); }
.toggle input:checked ~ .toggle__track { background: var(--color-brand-action); }
.toggle input:checked ~ .toggle__track::after { transform: translateX(1rem); }
.toggle:has(input:checked) { border-color: var(--color-brand); color: var(--color-brand-text); }
.toggle:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
@media (hover: hover) { .toggle:hover { border-color: var(--color-ink-subtle); } }

/* Product cards (search results) */
.cards { list-style: none; display: grid; gap: var(--space-4); }

/* Stock tabs on game and set pages: In stock, Pre-orders, Out of stock. The row stays at the top of the
   screen while the list scrolls, edge to edge, so the switch is always in reach. Without script each tab
   is a link to its own page; with it (web/static/js/tabs.js) the lists sit side by side and swipe, each
   snapping into place, and only the browser's scrolling moves during a swipe. */
.stock-tabs {
  position: sticky; top: 0; z-index: 2; background: var(--color-paper);
  margin: 0 calc(-1 * var(--page-gutter)) var(--space-4); padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--color-line);
}
.stock-tabs ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stock-tabs a {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-1);
  text-decoration: none; text-align: center; color: var(--color-ink-muted); font-weight: var(--weight-medium);
  box-shadow: inset 0 calc(-1 * var(--tab-bar)) 0 transparent; transition: color var(--motion-fast) var(--ease-out);
}
.stock-tabs a:hover { color: var(--color-ink); }
.stock-tabs a[aria-current="page"] { color: var(--color-ink); font-weight: var(--weight-strong); box-shadow: inset 0 calc(-1 * var(--tab-bar)) 0 var(--color-brand); }
.stock-tabs__label { font-size: var(--text-sm); line-height: var(--leading-tight); }
.stock-tabs__count { font-size: var(--text-xs); font-weight: var(--weight-body); color: var(--color-ink-subtle); font-variant-numeric: tabular-nums; }
.stock-panes.is-swipe {
  /* Relative, so the hidden headings and labels in the lists out of view are clipped with them. */
  position: relative; display: flex; align-items: flex-start; overflow: auto hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter));
}
.stock-panes.is-swipe::-webkit-scrollbar { display: none; }
.stock-panes.is-swipe > .stock-pane {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
  padding: var(--space-1) var(--page-gutter) var(--space-2);
}
.stock-pane__note { margin-bottom: var(--space-3); color: var(--color-ink-muted); font-size: var(--text-sm); }
.stock-pane__loading { padding: var(--space-6) 0; color: var(--color-ink-subtle); text-align: center; }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card {
  position: relative; display: grid; gap: var(--space-3); padding: var(--card-pad);
  border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card);
  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); } }
/* Top: picture, then language, name, type and badge, then the save button. */
.card__top { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
.card__image { display: block; }
.card__body { display: grid; gap: var(--space-1); justify-items: start; align-content: start; min-width: 0; }
.card__lang { padding: 0.2em 0.6em; border-radius: var(--radius-pill); background: var(--color-shelf); color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; }
.card__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__meta { font-size: var(--text-sm); color: var(--color-ink-subtle); }
.card__body .badge { margin-top: var(--space-1); }
.card__save { position: relative; z-index: 1; }
/* Middle: the cheapest delivered price and the shop, with Buy now beside them. */
.card__offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "price buy" "at buy"; align-items: center; column-gap: var(--space-3); row-gap: 2px; }
.card__offer--none { grid-template-columns: minmax(0, 1fr); grid-template-areas: "price" "at"; }
.card__price { grid-area: price; }
.card__at { grid-area: at; font-size: var(--text-sm); color: var(--color-ink-muted); }
/* A shop's multi-buy that costs less per item: a note, not a rival price, so it stays uncoloured. */
.card__deal { grid-column: 1 / -1; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-ink); }
.card__last { grid-area: at; font-size: var(--text-sm); color: var(--color-ink-subtle); font-variant-numeric: tabular-nums; }
.card__offer .stock { grid-area: price; }
.delivered { font-weight: var(--weight-strong); color: var(--color-price); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card__offer .button--buy { grid-area: buy; position: relative; z-index: 1; }
.button--buy.button--card { flex-direction: row; gap: var(--space-2); min-height: 2.75rem; min-width: 0; padding: 0 var(--space-4); }
.button--buy.button--card .icon--bag { width: 1.3rem; height: 1.3rem; }
/* Bottom: the two cheapest shops as rows, then the links to the full comparison. */
.shops { list-style: none; border-top: 1px solid var(--color-line-soft); }
.shops__row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line-soft); font-size: var(--text-sm); }
.shops__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-strong); }
.shops__flag { flex: none; padding: 0.1em 0.5em; border-radius: var(--radius-pill); background: var(--color-price-soft); color: var(--color-price); font-size: var(--text-xs); font-weight: var(--weight-strong); line-height: 1.4; }
.shops__price { flex: none; font-weight: var(--weight-price); color: var(--color-price); font-variant-numeric: tabular-nums; }
.shops__price--more { color: var(--color-more); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card__compare { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 2.5rem; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-brand-text); text-decoration: none; }
.card__compare:hover { text-decoration: underline; }
.card__check { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.35em; min-height: 2.5rem; font-size: var(--text-sm); color: var(--color-ink-muted); text-decoration: none; white-space: nowrap; transition: color var(--motion-fast); }
.card__check svg { width: 1em; height: 1em; color: var(--color-brand-text); }
.card__check:hover { color: var(--color-ink); }
@media (min-width: 48rem) {
  .card__top { grid-template-columns: 8.5rem minmax(0, 1fr) auto; }
  .card__name { font-size: var(--text-xl); }
}

/* 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) {
  .price--card { font-size: 1.75rem; }
}

/* 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); }
/* Empty states: the raptor looked and found nothing. Ink, above the heading, the same on every page. Where something
   went wrong (no results, page not found) an orange question mark stands beside it; where nothing is wrong (empty
   watchlist, end of the deck) the head is on its own. Added as an element, so the mid-page filtered-out state is untouched. */
.empty-mark { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--color-ink); }
.empty-mark__ask { font-size: var(--mark-md); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); line-height: var(--leading-tight); color: var(--color-brand); }

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

/* A phone sees the name, the picture, the cheapest delivered price and Buy now together on the first screen:
   name and details above the picture, the price straight under it, then the buttons. Wide screens put the picture
   beside the name and the price box. */
.page--product > .breadcrumbs { margin-top: var(--space-1); }
.product-head { display: grid; grid-template-areas: "intro" "media" "buy"; gap: var(--space-3); margin-top: var(--space-1); }
.product-intro { grid-area: intro; display: grid; gap: var(--space-1); min-width: 0; }
.product-title { font-size: var(--text-product-title); line-height: var(--leading-tight); color: var(--color-ink); overflow-wrap: anywhere; }
.product-head--long .product-title { font-size: var(--text-product-title-long); line-height: var(--leading-snug); }
.product-facts { font-size: var(--text-sm); color: var(--color-ink-muted); }
.product-media { grid-area: media; display: grid; place-items: center; border-radius: var(--radius-card); background: var(--color-shelf); overflow: hidden; }
@media (max-width: 59.99rem) {
  .product-media { height: var(--product-media-phone); }
  .product-head--long .product-media { height: var(--product-media-phone-long); }
  .product-head--note .product-media { height: calc(var(--product-media-phone) - var(--product-media-note)); }
  .product-head--long.product-head--note .product-media { height: calc(var(--product-media-phone-long) - var(--product-media-note)); }
}
/* The picture is square and as tall as the well, so it keeps its proportions at any width. */
.product-media .product-image--large { width: auto; height: 100%; max-width: 100%; background: transparent; }
@media (min-width: 60rem) {
  .product-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
    grid-template-areas: "media intro" "media buy"; column-gap: var(--space-6); row-gap: var(--space-4); align-items: start;
    margin-top: var(--space-3);
  }
  .product-media { aspect-ratio: var(--product-media-ratio); }
}

.buybox {
  --buybox-pad: var(--space-3);
  grid-area: buy; position: relative; isolation: isolate; display: grid; gap: var(--space-3); padding: var(--buybox-pad);
  border: 1px solid var(--color-brand-line); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card);
}
@media (min-width: 48rem) { .buybox { --buybox-pad: var(--space-4); } }
/* The price and Buy now, with the arrival sweep behind them. */
.buybox__lead { position: relative; isolation: isolate; display: grid; gap: var(--space-3); }
.buybox__offer { display: grid; gap: var(--space-1); }
.buybox__offer > p { margin: 0; }   /* the grid gap spaces these lines, not the usual paragraph margin */
.buybox__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); }
.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__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); line-height: 1; }
.buybox__price .price { font-size: var(--text-price-hero); }
.buybox__price .delivered { font-weight: var(--weight-strong); color: var(--color-price); }
.buybox__delivered { font-size: var(--text-sm); color: var(--color-ink-muted); }
.buybox__deal { font-size: var(--text-sm); color: var(--color-ink); }
.buybox__summary { 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__save { display: flex; justify-content: flex-start; }

/* Buy now: the raptor holding a bag, the words, and an arrow. One wide button to the cheapest shop. */
.buy-now {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: var(--buy-height); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  --buy-surface: var(--color-brand-action); border-radius: var(--radius); background: var(--buy-surface); color: var(--color-brand-ink);
  text-decoration: none; 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) { .buy-now:hover { --buy-surface: var(--color-brand-hover); transform: translateY(-1px); box-shadow: var(--shadow-button-hover); } }
.buy-now:active { transform: scale(0.985); box-shadow: var(--shadow-button); transition-duration: 60ms; }
.buy-now__mark { display: flex; align-items: center; align-self: stretch; padding-right: var(--space-3); border-right: 1px solid var(--color-on-brand-line); }
/* The logo's raptor head with a bag hooked on its lower jaw. The bag's place and size are shares of the head, so the
   pair scales together; the bag swings from the top of its handle. */
.buy-mark { position: relative; display: block; width: var(--buy-mark); height: calc(var(--buy-mark) / (var(--mark-ratio))); }
.buy-mark__head {
  display: block; width: var(--buy-mark-head); height: calc(var(--buy-mark-head) / (var(--mark-ratio))); background: currentColor;
  -webkit-mask: url("../img/raptor.6098e72b588f.png") center / contain no-repeat; mask: url("../img/raptor.6098e72b588f.png") center / contain no-repeat;
}
.buy-mark__bag { position: absolute; left: var(--buy-bag-left); top: var(--buy-bag-top); width: var(--buy-bag-size); height: auto; overflow: visible; transform-origin: 50% 0; }
/* A rim in the button's own colour parts the bag from the raptor's jaw where they cross, so the handle reads as hooked over it. */
.buy-mark__body { stroke: var(--buy-surface); stroke-width: var(--buy-bag-rim-svg); paint-order: stroke; }
.buy-mark__handle { filter: drop-shadow(0 0 var(--buy-bag-rim) var(--buy-surface)); }
.buy-mark__hole { fill: var(--buy-surface); }
.buy-now__text { display: grid; justify-items: center; gap: calc(var(--space-1) / 2); min-width: 0; text-align: center; }
.buy-now__label { font-size: var(--text-xl); font-weight: var(--weight-heading); font-stretch: var(--stretch-display); line-height: var(--leading-tight); }
.buy-now__shop { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-snug); overflow-wrap: anywhere; }
.buy-now__arrow { width: var(--buy-arrow); height: var(--buy-arrow); transition: transform var(--motion-fast) var(--ease-standard); }
@media (hover: hover) { .buy-now:hover .buy-now__arrow { transform: translateX(calc(-1 * var(--lift))); } }

/* Compare prices: an outlined button under Buy now, a plain link to the price list. */
.compare-jump {
  display: grid; justify-items: center; align-content: center; gap: calc(var(--space-1) / 2); min-height: var(--compare-height); padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-brand-action); border-radius: var(--radius); background: var(--color-paper);
  color: var(--color-ink); text-align: center; text-decoration: none;
  transition: background var(--motion-fast), transform var(--motion-fast) var(--ease-standard);
}
@media (hover: hover) { .compare-jump:hover { background: var(--color-brand-soft); } }
.compare-jump:active { transform: scale(0.985); }
.compare-jump__label { font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: var(--leading-tight); }
.compare-jump__arrow { display: inline-block; margin-left: var(--space-1); }
.compare-jump__note { font-size: var(--text-xs); color: var(--color-ink-muted); }

/* The price list heading: where Compare prices lands, clear of anything stuck to the top of the screen. */
#offers-title { scroll-margin-top: calc(var(--sticky-top, 0px) + var(--space-3)); }
#offers-title:focus { outline: none; }
#offers-title:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

/* Arrival, once per page view and only with motion allowed: the picture fades in, an orange sweep runs from it to the
   price box, then the bag swings once from the raptor's mouth and settles. Only opacity and transforms change, so
   nothing moves in the layout, and the price and button are readable and pressable throughout. */
.buybox__sweep {
  position: absolute; inset: calc(-1 * var(--buybox-pad)) calc(-1 * var(--buybox-pad)) 0; z-index: -1;
  border-radius: var(--radius-card) var(--radius-card) 0 0; overflow: hidden; pointer-events: none;
}
.buybox__sweep::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 60%; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--color-brand-soft) 40%, var(--color-brand-line) 75%, transparent);
}
@media (min-width: 60rem) {
  .buybox__sweep::before { inset: 0 auto 0 0; width: 50%; height: auto; background: linear-gradient(90deg, transparent, var(--color-brand-soft) 40%, var(--color-brand-line) 75%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  /* The whole well fades, so the picture blends into its own background throughout; once done nothing is left applied. */
  .product-media { animation: media-in var(--motion-slow) var(--ease-out) backwards; }
  .buybox__sweep::before { animation: sweep-down var(--motion-slow) var(--ease-standard) var(--motion-normal) both; }
  .buy-mark__bag { animation: bag-swing var(--motion-slow) var(--ease-out) calc(var(--motion-normal) + var(--motion-slow)) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
  .buybox__sweep::before { animation-name: sweep-across; }
}
@keyframes media-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes sweep-down { 0% { opacity: 0; transform: translateY(-100%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(120%); } }
@keyframes sweep-across { 0% { opacity: 0; transform: translateX(-100%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(200%); } }
@keyframes bag-swing {
  0% { transform: rotate(0); }
  35% { transform: rotate(var(--swing)); }
  70% { transform: rotate(calc(var(--swing) * -0.45)); }
  100% { transform: rotate(0); }
}
.alert-box { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-brand-line); border-radius: var(--radius); background: var(--color-brand-soft); scroll-margin-top: var(--space-6); }
.alert-box__title { font-weight: var(--weight-strong); }
.alert-box__form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.alert-box__input { flex: 1 1 12rem; min-width: 0; min-height: 2.25rem; padding: 0 var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-paper); font: inherit; font-size: var(--text-base); color: var(--color-ink); }
.alert-box__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.alert-box__note { font-size: var(--text-xs); color: var(--color-ink-muted); }
.alert-box__error { font-size: var(--text-sm); color: var(--color-more); font-weight: var(--weight-strong); }
.alert-box__done { font-weight: var(--weight-strong); color: var(--color-price); }
.alert-box__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.buybox__amazon { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-line); }
.buybox__amazon-button { flex: none; }
.buybox__amazon--lead { border-top: 0; padding-top: 0; }
.buybox__amazon--lead .buybox__amazon-button { width: 100%; }
@media (min-width: 48rem) { .buybox__amazon--lead .buybox__amazon-button { width: auto; } }
.buybox__amazon .buybox__summary { flex: 1 1 14rem; }
.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); }
.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__deal { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-ink); }
.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); }
.offer--amazon { background: var(--color-shelf); }
.offer--amazon .offer__action .button { white-space: nowrap; }
.offer__check { font-size: var(--text-sm); color: var(--color-ink-muted); }
@media (min-width: 60rem) {
  /* The Amazon row has no price columns: the sentence takes their room and the button keeps to one line. */
  .offer--amazon .offer__stock { grid-column: stock / checked; }
  .offer--amazon .offer__price, .offer--amazon .offer__delivery, .offer--amazon .offer__total, .offer--amazon .offer__checked { display: none; }
}
@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); }
.restock-note { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); }

/* Pick up where you left off ---------------------------------------------- */

.resume[hidden] { display: none; }
.resume__block { margin-bottom: var(--space-4); }
.resume__block[hidden] { display: none; }
.resume__label { margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-subtle); }
.resume__chips { flex-wrap: wrap; justify-content: flex-start; overflow: visible; padding: 0; }
.live__item--recent .live__link { font-weight: var(--weight-medium); }

/* Add to home screen card ------------------------------------------------- */

.install {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); z-index: 20;
  display: grid; gap: var(--space-3); padding: var(--space-4);
  border: 1px solid var(--color-brand-line); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-lift);
  transform: translateY(calc(100% + var(--gutter))); transition: transform var(--motion-slow) var(--ease-out);
}
.install[hidden] { display: none; }
.install.is-shown { transform: none; }
.install__text { font-size: var(--text-sm); line-height: var(--leading-body); }
.install__actions { display: flex; gap: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .install { transition: none; transform: none; } }
@media (min-width: 48rem) { .consent { right: auto; max-width: var(--panel-width); } }

/* Watchlist ---------------------------------------------------------------- */

.watch { list-style: none; border: 1px solid var(--color-line); border-radius: var(--radius-card); background: var(--color-paper); overflow: hidden; }
.watch__item { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "link" "prices" "actions"; gap: var(--space-2); padding: var(--space-3) var(--card-pad); }
.watch__item + .watch__item { border-top: 1px solid var(--color-line-soft); }
.watch__item[hidden] { display: none; }
.watch__link { grid-area: link; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); text-decoration: none; }
.watch__body { min-width: 0; display: grid; gap: 2px; }
.watch__name { font-weight: var(--weight-strong); line-height: var(--leading-snug); color: var(--color-ink); }
.watch__meta { font-size: var(--text-sm); color: var(--color-ink-subtle); }
.watch__prices { grid-area: prices; display: grid; gap: 2px; }
.watch__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.watch__at { font-size: var(--text-sm); color: var(--color-ink-muted); }
.watch__saved { font-size: var(--text-sm); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.watch__saved.is-down { color: var(--color-price); font-weight: var(--weight-strong); }
.watch__saved.is-up { color: var(--color-more); font-weight: var(--weight-strong); }
.watch__checked { font-size: var(--text-sm); color: var(--color-ink-subtle); }
.watch__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
@media (min-width: 48rem) {
  .watch__item { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "link prices actions"; align-items: center; gap: var(--space-4); }
  .watch__prices { justify-items: end; text-align: right; }
  .watch__now { justify-content: flex-end; }
}
.empty__action { margin-top: var(--space-4); }
.log__day { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-ink-subtle); }
.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); }
.not-found .empty-mark { margin-top: var(--space-6); }
.not-found .empty-mark + .page-title { margin-top: 0; }
/* A removed product's page: its set and game as plain rows */
.gone-links { list-style: none; margin-top: var(--space-5); border-top: 1px solid var(--color-line); }
.gone-links li { border-bottom: 1px solid var(--color-line); }
.gone-links a { display: block; padding: var(--space-3) 0; font-weight: var(--weight-medium); }

/* 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); }
.filters--deck { padding-bottom: 0; }
@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; }
  .deck-title { font-size: var(--text-base); }
  .filters--deck { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  /* The deck screen is a column exactly the height of the screen: heading,
     filters, the card taking all that is left, then the two buttons. The
     saved list sits below the fold and never squeezes the card. */
  .body--deck .page { padding-bottom: 0; }
  .deck-screen { display: flex; flex-direction: column; height: calc(100dvh - var(--masthead-height, 3.75rem)); }
  .deck-head, .filters--deck, .deck-actions { flex: none; }
  .deck { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; margin-top: var(--space-2); }
  .deck-actions { margin: var(--space-2) 0 var(--space-3); gap: var(--space-7); }
  .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__top { grid-template-rows: minmax(0, 1fr) auto auto; }
  .swipe__image { min-height: 10rem; }
  .swipe__name { font-size: var(--text-lg); }
  .swipe__price { font-size: 1.75rem; }
  .saved { margin-top: var(--space-5); }
}
.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; align-content: center; text-align: center; color: var(--color-ink-subtle); padding: var(--space-4); }
.deck__status .button { margin-top: var(--space-3); }
.deck__status .empty-mark { margin-bottom: var(--space-2); }

.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;
}
/* A new top card fades in as one piece: continuity from the card that just left, nothing more. */
.swipe--enter { animation: fade-in var(--motion-normal) var(--ease-out) both; }
.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 { position: relative; 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); } }
/* Absolute so the picture is sized to the box the grid gives it, never the other way round. */
.swipe__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%; box-sizing: border-box; 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; }
}

/* Message us */
.contact-form { display: grid; gap: var(--space-2); max-width: 40rem; }
.contact-form + .contact-form, .thread + .contact-form { margin-top: var(--space-5); }
.contact-form__label { font-weight: var(--weight-strong); margin-top: var(--space-2); }
.contact-form__input { width: 100%; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-paper); font: inherit; font-size: var(--text-base); color: var(--color-ink); }
.contact-form__text { resize: vertical; line-height: var(--leading-body); }
.contact-form__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.contact-form__note { font-size: var(--text-xs); color: var(--color-ink-muted); }
.contact-form__error { font-size: var(--text-sm); color: var(--color-more); font-weight: var(--weight-strong); }
.contact-form__done { font-weight: var(--weight-strong); color: var(--color-price); }
.contact-note { max-width: 40rem; margin-bottom: var(--space-4); color: var(--color-ink-muted); }
.thread { display: grid; gap: var(--space-3); max-width: 40rem; padding: 0; list-style: none; }
.thread__msg { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-paper); }
.thread__msg--us { border-color: var(--color-brand-line); background: var(--color-brand-soft); }
.thread__who { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.thread__who time { font-weight: var(--weight-body); color: var(--color-ink-subtle); }
.thread__body { margin-top: var(--space-1); overflow-wrap: anywhere; }