/* =========================================================
   game punk — design tokens
   ========================================================= */
:root {
  /* Brand colours (Retro Pixel Punk palette) */
  --gp-bg:        #2D1B4E;
  --gp-surface:   #3A2560;
  --gp-border:    #4E3778;
  --gp-purple:    #FF00A0;
  --gp-pink:      #00F0FF;
  --gp-yellow:    #FF6B35;
  --gp-text:      #FFF8E7;
  --gp-muted:     #B9A9D9;
  /* Lightened from #7A6A9E (under 4.5:1 on the dark surfaces) to at least ~5.6:1, above
     the WCAG AA 4.5:1 for the small text it's used on. The redesign :root below leaves it. */
  --gp-muted-2:   #9689BC;

  /* Glow tints — same hues as --gp-purple/--gp-pink, used for hover/focus glows */
  --gp-purple-glow: rgba(255, 0, 160, 0.35);
  --gp-pink-glow:   rgba(0, 240, 255, 0.25);

  /* Type */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  /* Layout */
  --wrap-width: 1080px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gp-bg);
  color: var(--gp-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Faint fixed glows so the hero's neon carries down the page, too faint to affect text
   contrast. z-index:0 is required: without it body has no stacking context and the
   z-index:-1 pseudo-elements render behind the page background, invisible. */
body {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Keeps the footer at the bottom on short pages. */
body > main { flex: 1 0 auto; }
body > .site-footer { flex: 0 0 auto; }

/* The pixel-art neon London skyline, fixed in place as the page scrolls. Sized to 75% of
   the width (at least 900px) rather than to cover, so the whole skyline shows on desktop,
   Parliament to Tower Bridge, as a backdrop rather than a feature; narrower screens see
   its middle. The whole image is dimmed, the bottom a little more, so text over the
   brightest buildings stays readable.
   The image's navy sky would show a hard edge against the page colour, so fades sized
   to the image itself (same width, 40% of it tall, matching the 1983x793 art) start at
   the page colour on its top and side edges; the top one clears just above Big Ben and
   the Shard (about 47% down the art), whatever the screen height. --skyline-w is the
   image width. */
body::before {
  --skyline-w: max(75vw, 900px);
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--gp-bg) 0%, rgba(7, 11, 15, 0.9) 14%, rgba(7, 11, 15, 0.6) 28%, rgba(7, 11, 15, 0.2) 38%, rgba(7, 11, 15, 0) 46%)
      center bottom / var(--skyline-w) calc(var(--skyline-w) * 0.4) no-repeat,
    linear-gradient(90deg, var(--gp-bg) 0%, rgba(7, 11, 15, 0) 14%, rgba(7, 11, 15, 0) 86%, var(--gp-bg) 100%)
      center bottom / var(--skyline-w) calc(var(--skyline-w) * 0.4) no-repeat,
    linear-gradient(0deg, rgba(7, 11, 15, 0.35) 0%, transparent 30%),
    linear-gradient(rgba(7, 11, 15, 0.45), rgba(7, 11, 15, 0.45)),
    url('/img/london-skyline-pixel.webp') center bottom / var(--skyline-w) auto no-repeat,
    var(--gp-bg);
}

.wrap {
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; text-decoration: none; }

/* =========================================================
   Focus visibility (keyboard nav)
   ========================================================= */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gp-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================
   Logo (used in header + footer)
   ========================================================= */
.logo-link {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.15s ease;
}

.logo-link:hover { opacity: 0.85; }

.site-logo {
  height: 46px;
  width: auto;
  display: block;
}

.site-logo-small { height: 30px; }

.about-logo-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 40px;
}

.about-logo {
  height: 120px;
  width: auto;
  display: block;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  border-bottom: 1px solid var(--gp-border);
  padding: 20px 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}

.main-nav a {
  color: var(--gp-text);
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.main-nav a:hover {
  opacity: 1;
  color: var(--gp-yellow);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 72px 0 48px;
  text-align: left;
  overflow: hidden;
  background-color: var(--gp-bg);
}

/* Background texture, stronger on the left behind the text so the title art doesn't
   compete with it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(45, 27, 78, 0.88) 0%,
      rgba(45, 27, 78, 0.72) 42%,
      rgba(45, 27, 78, 0.22) 100%
    ),
    linear-gradient(
      180deg,
      rgba(45, 27, 78, 0.84) 0%,
      rgba(45, 27, 78, 0.92) 100%
    );
  z-index: 0;
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero-kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gp-yellow);
  margin: 0 0 14px;
}

.hero-title {
  margin: 0 0 20px;
  max-width: 920px;
}

/* Fades the title art's edges into the hero rather than a hard rectangle. */
.hero-title-img {
  display: block;
  width: 100%;
  height: auto;
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 28%, rgba(0, 0, 0, 0.5) 52%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 28%, rgba(0, 0, 0, 0.5) 52%, transparent 82%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-sub {
  font-size: 17px;
  color: var(--gp-muted);
  margin: 0 0 32px;
  max-width: 480px;
}

/* Homepage hero only; other pages reuse .hero-sub at the smaller size. */
.hero .hero-sub {
  font-size: 22px;
  font-weight: 500;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.search-input-icon {
  position: absolute;
  left: 16px;
  width: 17px;
  height: 17px;
  color: var(--gp-muted-2);
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--radius-md);
  padding: 14px 16px 14px 42px;
  color: var(--gp-text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input::placeholder { color: var(--gp-muted-2); }

.search-input:focus {
  outline: none;
  border-color: var(--gp-purple);
  box-shadow: 0 0 0 3px var(--gp-purple-glow);
}

.search-btn {
  background: var(--gp-purple);
  color: var(--gp-text);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.search-btn:hover {
  background: #D1008C;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--gp-purple-glow);
}

.search-btn:active { transform: translateY(0); }

.logo-link:focus-visible {
  outline: 2px solid var(--gp-yellow);
  outline-offset: 2px;
}

/* =========================================================
   Filters
   ========================================================= */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 24px;
}

.filter-pill {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  color: var(--gp-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.filter-pill:hover {
  border-color: var(--gp-purple);
  color: var(--gp-text);
}

.filter-pill:active { transform: scale(0.96); }

.filter-pill.is-active {
  background: var(--gp-purple);
  border-color: var(--gp-purple);
  color: var(--gp-text);
  box-shadow: 0 4px 14px var(--gp-purple-glow);
}

/* =========================================================
   Game grid + cards
   ========================================================= */
.game-section {
  margin-bottom: 40px;
}

.game-section:last-of-type {
  margin-bottom: 72px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.game-card {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  gap: 16px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.game-card:hover {
  border-color: var(--gp-purple);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px var(--gp-purple-glow), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* .game-card's display:flex overrides the browser's [hidden] rule, so hidden cards need this. */
.game-card[hidden] {
  display: none;
}

.game-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gp-bg);
}

.game-thumb.game-thumb-cover {
  object-fit: cover;
}

.game-info {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "top top" "meta meta" "footer footer";
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}

.game-card-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(245, 247, 248, 0.05);
}

.game-info-top {
  grid-area: top;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.game-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  margin: 0;
  color: var(--gp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discount-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--gp-pink);
  color: #123338;
  white-space: nowrap;
}

.preorder-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--gp-purple);
  color: var(--gp-text);
  white-space: nowrap;
}

.game-meta {
  grid-area: meta;
  font-size: 12px;
  color: var(--gp-muted);
  margin: 4px 0 0;
}

.platform-tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--gp-muted-2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gp-muted);
}

.dlc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gp-border);
  color: var(--gp-muted);
  margin-right: 6px;
  vertical-align: middle;
}

.format-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gp-border);
  color: var(--gp-muted);
  margin-left: 6px;
  vertical-align: middle;
}

.format-icon { width: 9px; height: 9px; flex-shrink: 0; }

/* Holds the coupon badge and prices together as one cell of .price-row's 3-column grid. */
.price-box-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The store's voucher code (e.g. GameBillet's "Extra11gb"; the price shown already has it
   applied). Pink rather than purple so "code applied" reads differently from "on sale".
   A <button>, since clicking copies the code (site.js). */
.coupon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: 700 11px var(--font-body);
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--gp-text);
  border: 1.5px solid var(--gp-text);
  color: var(--gp-bg);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.coupon-badge:hover { background: #e6e0d3; }
.coupon-badge:active { transform: scale(0.96); }

/* Shown briefly after copying. */
.coupon-badge.is-copied {
  background: var(--gp-pink);
  border-color: var(--gp-pink);
  color: var(--gp-bg);
}

.game-price-row {
  display: flex;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.price-now {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--gp-yellow);
}

.price-unavailable {
  font-size: 12px;
  line-height: 1.2;
  color: var(--gp-muted);
}

.store-name {
  font-size: 11px;
  color: var(--gp-muted);
  font-family: var(--font-body);
}

/* =========================================================
   Empty state
   ========================================================= */
.empty-state {
  text-align: center;
  color: var(--gp-muted);
  font-size: 14px;
  padding: 48px 0 72px;
}

.empty-state-icon {
  width: 64px;
  height: auto;
  color: var(--gp-border);
  margin-bottom: 16px;
}

.empty-state-text {
  margin: 0;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  border-top: 1px solid var(--gp-border);
  padding: 28px 0;
}

.footer-easter-egg {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: block;
  width: 14px;
  height: 14px;
  opacity: .35;
  transition: opacity .2s, transform .2s;
}

.footer-easter-egg:hover,
.footer-easter-egg:focus-visible {
  opacity: 1;
  transform: scale(1.3);
}

.footer-easter-egg img {
  display: block;
  width: 100%;
  height: 100%;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* Near-white, so it reads over the bright skyline behind the footer. */
.footer-note {
  font-size: 12px;
  color: #ece8f4;
  margin: 0;
}

.footer-note a {
  color: #fff;
  text-decoration: underline;
}

.footer-note a:hover { color: var(--gp-pink); }

/* =========================================================
   Motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================================================
   Game detail page
   ========================================================= */
.game-page {
  padding-top: 32px;
  padding-bottom: 72px;
}

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--gp-muted);
  margin-bottom: 24px;
  transition: color 0.15s ease;
}

.back-link:hover { color: var(--gp-text); }

.breadcrumb-trail { margin-bottom: 12px; }

.breadcrumb-trail ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--gp-muted);
}

.breadcrumb-trail li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--gp-muted);
}

.breadcrumb-trail a {
  color: var(--gp-muted);
  transition: color 0.15s ease;
}

.breadcrumb-trail a:hover { color: var(--gp-text); }

.breadcrumb-trail li[aria-current="page"] {
  color: var(--gp-text);
}

.breadcrumb-platform {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border: 1px solid var(--gp-muted-2);
  border-radius: 20px;
  color: var(--gp-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.game-hero {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--gp-border);
}

.game-hero-thumb {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--gp-bg);
}

.game-hero-thumb.game-hero-cover {
  width: 120px;
  height: 160px;
  object-fit: contain;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
}

.game-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.game-hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

/* Critic rating as five stars (_StarRating). --gp-purple is the hot pink. */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.star {
  width: 18px;
  height: 18px;
}

.star-full { fill: var(--gp-purple); }

.star-empty {
  fill: none;
  stroke: var(--gp-purple);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0.45;
}

.game-hero-meta {
  font-size: 14px;
  color: var(--gp-muted);
  margin: 0;
}

.game-hero-meta strong {
  color: var(--gp-text);
}

.genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.genre-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  color: var(--gp-muted);
}

.game-hero-summary {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-muted);
  margin: 12px 0 0;
  max-width: 640px;
}

.affiliate-note {
  font-size: 13px;
  color: var(--gp-muted-2);
  margin: 20px 0 0;
  max-width: 640px;
}

.section-heading {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-heading::before {
  content: "";
  width: 4px;
  height: 14px;
  flex-shrink: 0;
  background: var(--gp-purple);
  border-radius: 2px;
}

.expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--gp-muted);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.expand-toggle:hover {
  color: var(--gp-text);
  background: var(--gp-surface);
}

.expand-toggle:active { transform: scale(0.88); }

.expand-arrow {
  width: 12px;
  height: 8px;
  transition: transform 0.15s ease;
}

.expand-toggle.is-expanded .expand-arrow {
  transform: rotate(180deg);
}

.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: 16px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.price-row.is-best {
  border-color: var(--gp-purple);
  background: linear-gradient(90deg, rgba(255, 0, 160, 0.08), var(--gp-surface) 60%);
  box-shadow: 0 0 0 1px rgba(255, 0, 160, 0.15), 0 8px 24px -10px var(--gp-purple-glow);
}

.price-row.is-unavailable {
  opacity: 0.55;
}

.unavailable-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gp-border);
  color: var(--gp-muted);
  margin-left: 6px;
  vertical-align: middle;
}

/* The "best price" tab on the top row's corner. .price-row.is-best is its positioned parent. */
.best-price-tag {
  position: absolute;
  left: 14px;
  top: -13px;
  background: var(--gp-yellow);
  color: #071006;
  padding: 5px 13px;
  border-radius: 3px 3px 0 0;
  font: 800 10px var(--font-body);
  text-transform: uppercase;
}

.price-cta.is-disabled {
  background: var(--gp-border);
  color: var(--gp-muted);
  cursor: default;
}

.price-cta.is-disabled:hover {
  background: var(--gp-border);
  transform: none;
  box-shadow: none;
}

.price-store {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-store-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-text);
}

.price-store-name .format-badge,
.price-store-name .unavailable-badge { margin-left: 0; }

.price-checked {
  font-size: 11px;
  color: var(--gp-muted-2);
}

/* The "Trusted retailer" line, on the best row only. */
.price-checked-trusted { display: flex; align-items: center; gap: 4px; }
.price-checked-trusted img { width: 11px; height: 11px; flex-shrink: 0; }

.price-box-group {
  display: flex;
  align-items: stretch;
  height: 24px;
  box-sizing: border-box;
  line-height: 1;
  font-family: var(--font-mono);
}

.price-box-group > * {
  border-radius: 0;
}

.price-box-group > *:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.price-box-group > *:first-child {
  border-radius: 6px 0 0 6px;
}

.price-box-group > *:last-child {
  border-radius: 0 6px 6px 0;
}

.price-amount-was {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--gp-bg);
  border: 1.5px solid var(--gp-purple);
  color: var(--gp-muted-2);
}

/* Beats .price-box-group's divider so the pink outline is unbroken on the right. */
.price-box-group > .price-amount-was {
  border-right-color: var(--gp-purple);
}

  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--gp-purple);
  color: var(--gp-text);
}

.price-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  box-sizing: border-box;
  line-height: 1;
  background: var(--gp-purple);
  color: var(--gp-text);
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.price-cta:hover {
  background: #D1008C;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--gp-purple-glow);
}

.price-cta:active { transform: translateY(0); }

@media (max-width: 640px) {
  .price-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "store store"
      "pricebox cta";
    row-gap: 6px;
    column-gap: 12px;
  }
  .price-store { grid-area: store; }
  /* min-width:0 lets this grid cell shrink, so a wide price (or a coupon badge) doesn't push
     Get deal off the card. It's on .price-box-row because that's the grid item. */
  .price-box-row { grid-area: pricebox; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
  .price-box-group, .coupon-badge { min-width: 0; }
  .price-cta { grid-area: cta; justify-self: end; align-self: center; }
}

.report-price-link {
  margin: 10px 0 0;
  font-size: 13px;
}

.report-price-link a {
  color: var(--gp-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-price-link a:hover { color: var(--gp-text); }

.delivery-note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--gp-muted);
}

/* Game detail All / Digital / Physical switch — reuses .deals-sort-pill. */
.deals-sort-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.deals-sort-pill:disabled:hover { border-color: var(--gp-border); color: var(--gp-muted); }
.price-row[hidden] { display: none; }

.price-history-stats {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gp-muted);
  margin: -8px 0 16px;
}

.admin-summary {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--gp-text);
}

.admin-empty {
  font-size: 14px;
  color: var(--gp-muted);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 32px;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--gp-border);
}

.admin-table th {
  color: var(--gp-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.admin-table td:not(:first-child),
.admin-table th:not(:first-child) {
  text-align: right;
  font-family: var(--font-mono);
}

/* Text, so not right-aligned or monospace like the number cells. */
.admin-table .admin-cell-label {
  text-align: left;
  font-family: var(--font-body);
  color: var(--gp-muted);
}

.admin-approve-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--gp-bg);
  background: var(--gp-yellow);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.admin-approve-btn:hover {
  opacity: 0.85;
}

.admin-decline-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--gp-muted);
  background: transparent;
  border: 1px solid var(--gp-border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}

.admin-decline-btn:hover {
  color: var(--gp-text);
  border-color: var(--gp-muted);
}

/* Same small pill as .dlc-badge, for quick scanning. */
.admin-marker {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gp-border);
  color: var(--gp-muted);
  margin-left: 6px;
  vertical-align: middle;
}

/* Declined rows are dimmed, like unavailable prices. */
.admin-row-declined {
  opacity: 0.55;
}

.price-history-stats strong {
  font-weight: 700;
}

.price-history-stats strong.is-low { color: var(--gp-yellow); }
.price-history-stats strong.is-high { color: var(--gp-pink); }

.price-chart-heading {
  margin-top: 44px;
}

.price-chart-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "axis chart"
    "gap  dates";
  column-gap: 14px;
  background: linear-gradient(180deg, rgba(255, 0, 160, 0.05), transparent 40%);
  border: 1px solid rgba(255, 0, 160, 0.4);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.price-chart-axis {
  grid-area: axis;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.price-chart-axis-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--gp-text);
  white-space: nowrap;
}

.price-chart-scroll {
  grid-area: chart;
  overflow: visible;
}

.price-chart-wrap {
  position: relative;
  height: 120px;
}

.price-chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.price-chart-line {
  fill: none;
  stroke: var(--gp-purple);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.price-chart-fill {
  stroke: none;
  fill: var(--gp-purple);
  fill-opacity: 0.18;
}

/* A div, not an SVG circle: the chart is stretched non-uniformly, which would squash a
   circle into an ellipse. */
.price-chart-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gp-bg);
  border: 2px solid var(--gp-purple);
  transform: translate(-50%, -50%);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.price-chart-dot:hover {
  background: var(--gp-yellow);
  border-color: var(--gp-yellow);
}

.price-chart-dates {
  grid-area: dates;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gp-muted-2);
}

/* =========================================================
   Game not found state
   ========================================================= */
.empty-game-state {
  max-width: 480px;
  padding: 48px 0 32px;
}

.empty-game-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.empty-game-sub {
  font-size: 15px;
  color: var(--gp-muted);
  margin: 0 0 28px;
}

.empty-game-back {
  display: inline-block;
  font-size: 13px;
  color: var(--gp-muted);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.empty-game-back:hover { color: var(--gp-text); }

/* =========================================================
   Small screens
   ========================================================= */
@media (max-width: 560px) {
  .header-inner { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .search-bar { width: 100%; }
  .game-grid { grid-template-columns: 1fr; }

  .game-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .game-hero-thumb,
  .game-hero-thumb.game-hero-cover {
    width: 96px;
    height: 96px;
  }
}

/* The redesign's palette: the dark canvas, with the original brand accent, text and
   muted colours (overriding the :root above). --gp-yellow, the main accent for prices
   and buttons, is pink by request. */
:root {
  --gp-bg: #070b0f;
  --gp-surface: #0d1319;
  --gp-surface-2: #111820;
  --gp-border: #202a34;
  --gp-text: #fff8e7;
  --gp-muted: #b9a9d9;
  --gp-yellow: #ff00a0;
  --gp-purple: #ff00a0;
  --gp-pink: #00f0ff;
}

body {
  background-color: var(--gp-bg);
}

.wrap { max-width: 1180px; }
.site-header { background: var(--gp-bg); border-bottom: 1px solid var(--gp-border); position: sticky; top: 0; z-index: 20; }
/* Logo / search / badge, with equal side columns so the search stays centred. */
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 70px; gap: 34px; }
.header-inner .logo-link { justify-self: start; }

.social-links {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-link {
  display: flex;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.social-link:hover { opacity: 1; }

.social-link img {
  width: 40px;
  height: auto;
}
.site-logo { width: 154px; height: auto; }
.wordmark { color:var(--gp-yellow); font:900 23px/1 'Archivo Black',sans-serif; letter-spacing:-1.5px; font-style:italic; }
.wordmark span { color:#fff; }
.wordmark-small { font-size:18px; }
.main-nav { margin-right: auto; gap: 24px; font-size: 12px; }
.header-actions { display: flex; gap: 17px; font-size: 12px; color: var(--gp-muted); }
.header-actions a:hover { color: var(--gp-yellow); }

.hero { padding: 0; background: transparent; border-bottom: 1px solid var(--gp-border); }
.hero .wrap { min-height: 430px; display: grid; grid-template-columns: minmax(390px, 47%) 1fr; grid-template-rows: 1fr auto; position: relative; }
.hero::before { display: none; }
.hero-copy { align-self: center; padding: 36px 0 26px; position: relative; z-index: 2; }
.hero-kicker { color: var(--gp-purple); font-size: 11px; margin-bottom: 12px; }
.hero-title { display: flex; flex-direction: column; font-family: Impact,'Archivo Black',sans-serif; font-size: clamp(50px,5vw,70px); line-height: .86; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 20px; }
.hero-title span,.hero-title strong { display:block; }
.hero-title strong { color: var(--gp-yellow); font-weight: inherit; }
.hero .hero-sub { font-size: 16px; line-height: 1.55; max-width: 410px; margin-bottom: 24px; }
.hero-art { position: absolute; inset: 0 0 72px 34%; background: linear-gradient(90deg,var(--gp-bg) 0%,transparent 28%),linear-gradient(0deg,var(--gp-bg) 0%,transparent 22%),url('/img/hero-mascot-raccoon-v2.jpg') 57% center/cover no-repeat; opacity:.96; }
.search-bar { max-width: 560px; padding: 4px; border: 1px solid #2c3742; background: rgba(13,19,25,.96); border-radius: 6px; }
.search-input { border: 0; background: transparent; padding: 13px 15px; }
.search-input:focus { box-shadow:none; border:0; }
.search-btn { border-radius:4px; min-width:112px; background:linear-gradient(135deg,#ff3fb5,#d1008c); }
.search-btn:hover { background:#d1008c; }
.trust-strip { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:3; border-top:1px solid var(--gp-border); padding:14px 10px; }
.trust-strip span { display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; font-size:12px; font-weight:600; }
.trust-strip b { grid-row:1/3; color:var(--gp-purple); font-size:22px; }
.trust-strip small { color:var(--gp-muted-2); font-size:10px; font-weight:400; margin-top:2px; }

@media (max-width:760px){
  .header-actions{display:none}.main-nav{gap:14px}.main-nav a:nth-child(n+3){display:none}
  .hero .wrap{grid-template-columns:1fr;min-height:540px}.hero-art{inset:0 0 118px 12%;opacity:.45}.hero-copy{padding-top:56px}.hero-title{font-size:58px}.trust-strip{grid-template-columns:1fr 1fr;gap:18px}.search-bar{flex-direction:row}
}

.home-content-head { display:flex; justify-content:space-between; align-items:end; padding-top:34px; }
/* Same [hidden] fix as .game-card: display:flex would otherwise keep these headings visible. */
.home-content-head[hidden] { display:none; }
/* And for the PC deals sort toggle's grids: without it, the hidden grid stayed on screen
   under the one being shown. */
.game-grid[hidden] { display:none; }
.section-expand[hidden] { display:none; }
.home-content-head h2,.platform-panel h2 { margin:0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.02em; }
.home-content-head span { color:var(--gp-muted-2); font-size:12px; }
.filter-row { margin:18px 0 26px; padding-bottom:16px; border-bottom:1px solid var(--gp-border); }
.filter-pill { border-radius:4px; padding:8px 18px; background:transparent; }
.filter-pill.is-active { background:var(--gp-yellow); border-color:var(--gp-yellow); color:#071006; }
.section-heading { color:var(--gp-text); font-size:13px; margin-bottom:12px; }

.search-page { padding-top:32px; }
.search-results-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; }
.search-results-head .section-heading { margin:0; font-size:21px; text-transform:none; }
.search-result-count { color:var(--gp-muted-2); font-size:13px; }
.clear-search-link { margin-left:auto; color:var(--gp-purple); font-size:14px; font-weight:600; }
.clear-search-link:hover { color:var(--gp-text); }
.search-platform-row { margin:18px 0 26px; }

.did-you-mean { margin:12px 0 0; color:var(--gp-muted); font-size:14px; }
.did-you-mean a { color:var(--gp-purple); font-weight:600; }
.did-you-mean a:hover { color:var(--gp-text); }

.platform-logo-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 7px 10px;
  background: rgba(245, 247, 248, .05);
  border: 1px solid var(--gp-border);
  font: 700 11px/1 var(--font-body);
  color: var(--gp-text);
  letter-spacing: .01em;
  box-sizing: border-box;
}

.platform-logo-tag img { width: auto; height: 13px; max-width: 40px; object-fit: contain; filter: brightness(0) invert(1); }

.game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.game-card { display:block; padding:0; overflow:hidden; border-radius:6px; position:relative; }
.game-card:hover { border-color:var(--gp-yellow); transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.3); }
.game-info { padding:14px; }
.game-info-top { min-height:38px; }
.game-title { font-size:14px; white-space:normal; line-height:1.25; }
.discount-badge,.preorder-badge { position:absolute; top:0; border-radius:3px; padding:5px 8px; background:var(--gp-yellow); color:#071006; font-weight:800; }
.discount-badge { left:0; }
.preorder-badge { right:0; }
.game-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-card-footer { margin:10px -14px -14px; padding:10px 14px; border-radius:0; }
.price-now { color:var(--gp-yellow); }
.platform-panel { margin:56px 0 0; padding:34px; border:1px solid var(--gp-border); background:linear-gradient(120deg,#0d1319,#10151d); display:flex; justify-content:space-between; gap:30px; align-items:center; }
.eyebrow { color:var(--gp-purple); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:0 0 8px; }
.platform-tiles { display:flex; flex-wrap:wrap; gap:8px; }
.platform-tiles span { border:1px solid #303b46; border-radius:5px; padding:14px 20px; font:700 12px var(--font-mono); color:#dfe5e8; background:#0a0f14; }
.site-stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--gp-border); border-top:0; margin-bottom:60px; }
.site-stats span { padding:24px; display:flex; flex-direction:column; text-align:center; color:var(--gp-muted); font-size:11px; border-right:1px solid var(--gp-border); }
.site-stats span:last-child { border:0; }
.site-stats strong { color:var(--gp-text); font:700 28px var(--font-mono); }

.game-page { max-width:1080px; }
.back-link { display:none; }
.breadcrumb-trail { margin:4px 0 24px; }
.game-hero { display:grid; grid-template-columns:176px 1fr; gap:26px; padding:0 0 26px; align-items:start; }
.game-hero-thumb.game-hero-cover,.game-hero-thumb { width:176px; height:234px; border-radius:8px; object-fit:cover; border:1px solid var(--gp-border); box-shadow:0 16px 34px rgba(0,0,0,.45); }
.game-hero-title { font-family:var(--font-body); font-size:34px; letter-spacing:-1px; }
.game-hero-summary { max-width:580px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.compare-heading span { color:var(--gp-muted-2); font-size:10px; font-weight:500; }
/* overflow:visible so the best-price tab can sit above the first row; the first and last
   rows round their own corners instead of relying on clipping. */
.price-list { gap:0; border:1px solid var(--gp-border); border-radius:6px; overflow:visible; }
.price-row,.price-row.is-best { border:0; border-bottom:1px solid var(--gp-border); border-radius:0; background:var(--gp-surface); position:relative; }
.price-row:last-child { border-bottom:0; border-radius:0 0 5px 5px; }
/* The first row isn't always .is-best (not when it's unavailable or stale), so round its
   corners here. */
.price-row:first-child { border-radius: 5px 5px 0 0; }
/* Pink border and wash for the best row (a stronger wash than the old separate card, to
   show at row size). */
.price-row.is-best {
  border: 1px solid var(--gp-yellow);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(100deg, rgba(255, 0, 160, 0.18), var(--gp-surface) 60%);
  box-shadow: none;
}
.price-cta { background:transparent; border:1px solid var(--gp-border); }
.price-cta:hover { background:var(--gp-purple); }
.price-chart-card { border-color:var(--gp-border); background:var(--gp-surface); }
.price-chart-line { stroke:var(--gp-yellow); }.price-chart-fill{fill:var(--gp-yellow)}.price-chart-dot{border-color:var(--gp-yellow)}

@media(max-width:900px){.game-grid{grid-template-columns:repeat(2,1fr)}.game-hero{grid-template-columns:120px 1fr}.game-hero-thumb.game-hero-cover,.game-hero-thumb{width:120px;height:160px}.platform-panel{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.game-grid{grid-template-columns:1fr 1fr}.game-thumb,.game-thumb.game-thumb-cover{height:auto}.game-info{padding:10px}.store-name{display:none}.game-hero{grid-template-columns:90px 1fr;gap:14px}.game-hero-thumb.game-hero-cover,.game-hero-thumb{width:90px;height:120px}.game-hero-title{font-size:20px}.game-hero-summary{display:none}.platform-panel{padding:24px}.site-stats{grid-template-columns:1fr}.site-stats span{border-right:0;border-bottom:1px solid var(--gp-border)}.home-content-head h2,.platform-panel h2{font-size:17px}.search-results-head .section-heading{font-size:17px}.game-hero-meta{font-size:13px}.star{width:15px;height:15px}}

/* Reference-matched platform and retailer marks */
.price-store-name .store-logo { margin-top:0; }

.platform-tiles .platform-logo { min-width:128px; min-height:54px; border:1px solid #303b46; border-radius:5px; padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:10px; font:700 13px/1.05 var(--font-body); color:#f4f6f7; background:#0a0f14; text-align:left; }
.platform-logo b { font:700 18px/1 var(--font-body); color:#fff; white-space:nowrap; }
.ps-logo b { font-size:12px; letter-spacing:-2px; }
.xbox-logo b { display:grid; place-items:center; width:23px; height:23px; border:2px solid #fff; border-radius:50%; font-size:12px; }
.pc-logo b { width:26px; height:18px; border:2px solid #fff; border-bottom-width:3px; font-size:0; position:relative; }
.pc-logo b::after { content:''; position:absolute; left:7px; right:7px; bottom:-7px; border-top:2px solid #fff; }
.switch-logo,.switch2-logo { font-size:10px !important; }
.switch-logo b,.switch2-logo b { font-size:22px; }

/* Every store logo sits in the same chip with the store's name, whatever the source image. */
.store-logo { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; max-width:100%; min-height:26px; margin-top:8px; padding:4px 10px; border-radius:6px; background:rgba(245,247,248,.06); border:1px solid rgba(245,247,248,.1); color:var(--gp-text); font:700 11px/1 var(--font-body); letter-spacing:.01em; }
.game-card-footer .store-logo { min-width:0; flex-shrink:1; margin-top:0; }
/* Lets the logo image shrink with its chip on narrow cards; otherwise it overflowed the
   chip's right edge. object-fit:contain keeps it undistorted. */
.game-card-footer .store-logo img { flex-shrink:1; min-width:0; }
.store-logo img { display:block; width:auto; max-width:52px; height:16px; object-fit:contain; flex-shrink:0; }
.store-logo img[src*='.svg'] { filter:brightness(0) invert(1); }
.store-logo-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
/* Green Man Gaming's logo is dark and Joybuy's red on transparent, so they need a light chip. */
.store-logo:has(img[src*='green-man-gaming']),
.store-logo:has(img[src*='joybuy']) { background:#eef1f4; border-color:#eef1f4; color:#1c1f24; }
.price-store-name .store-logo { min-height:24px; font-size:10px; gap:5px; }
.price-store-name .store-logo img { max-width:42px; height:14px; }
.price-store-name .format-badge { min-height:24px; box-sizing:border-box; }
.store-logo-fallback { background:rgba(245,247,248,.04); color:var(--gp-muted); font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }

.platform-tiles .platform-logo { padding:11px 18px; }
.platform-logo img { display:block; width:auto; max-width:106px; height:28px; object-fit:contain; filter:brightness(0) invert(1); }
.platform-logo.switch2-logo img { max-width:90px; height:34px; }

.platform-panel .filter-row { margin:0; padding:0; border:0; }
.platform-panel .filter-pill.platform-logo { cursor:pointer; }
.platform-panel .filter-pill.platform-logo.is-active { background:var(--gp-yellow); border-color:var(--gp-yellow); }
.platform-panel .filter-pill.platform-logo.is-active img { filter:brightness(0); }

.platform-panel { margin-top:34px; margin-bottom:18px; }
.home-content-head { padding-top:18px; }

/* Static prototype homepage port */
/* On <html>, not <body>: overflow-x:hidden on body makes it a scroll container, which
   broke the sticky header partway down long pages. */
html { overflow-x:hidden; }
.hero .wrap { width:min(1440px,92%); max-width:1440px; min-height:420px; grid-template-columns:1fr; grid-template-rows:1fr auto; }
.hero-copy { align-self:start; padding-top:46px; }
.hero-title { font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(62px,6.4vw,92px); line-height:.79; letter-spacing:1px; text-shadow:2px 2px 0 #222; margin-bottom:20px; }
.hero .hero-sub { font-size:20px; line-height:1.45; color:#f7f8fa; margin-bottom:20px; }
/* A bottom darken so the trust strip's text stays readable over the art. */
.hero-art { inset:0 0 0 0; background:linear-gradient(90deg,rgba(2,7,10,.48),rgba(2,7,10,.04)),linear-gradient(180deg,transparent 55%,rgba(2,7,10,.6) 100%),url('/img/hero-mascot-raccoon-v2.jpg') center/cover no-repeat; }

/* Hidden while the visitor types a search (site.js). */
/* Sized for the header row. */
.search-bar { height:46px; width:520px; max-width:100%; margin-top:0; padding:0; border:1px solid var(--gp-purple); border-radius:8px; }
.search-icon { color:#fff; font-size:16px; margin:0 0 0 14px; transform:none; }
.search-input { height:100%; font-size:14px; }
.search-btn { align-self:stretch; min-width:88px; font-size:12px; padding:0 14px; border-radius:0 7px 7px 0; }
.trust-strip { width:min(1100px,100%); grid-column:1; align-self:end; border:0; padding:20px 0 25px; gap:35px; }
.trust-strip span { grid-template-columns:42px 1fr; font-size:13px; }
.trust-strip b { font-size:38px; }
.trust-strip img { grid-row:1/3; width:38px; height:38px; object-fit:contain; align-self:center; }
.trust-strip small { font-size:12px; margin-top:5px; }

body > main > .wrap { width:min(1440px,92%); max-width:1440px; }

/* Same 1440px width as the main content, so everything lines up. */
.header-inner, .footer-inner { width:min(1440px,92%); max-width:1440px; }
.home-content-head { padding-top:34px; align-items:center; }
.home-content-head h2 { font:800 21px/1 'Inter',sans-serif; letter-spacing:0; }
.home-content-head a { color:var(--gp-purple); font-weight:600; font-size:14px; }

/* PC deals sort toggle (see IndexModel.PopularPcDeals): smaller pills, right-aligned. */
.deals-sort-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.deals-sort-pill {
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  color: var(--gp-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.deals-sort-pill:hover {
  border-color: var(--gp-purple);
  color: var(--gp-text);
}

.deals-sort-pill.is-active {
  background: var(--gp-purple);
  border-color: var(--gp-purple);
  color: var(--gp-text);
}

/* The "View all" / "See all" button under each section. Keeps the .expand-toggle class,
   which site.js uses to wire up the game grids. */
.section-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  height: auto;
  margin: 20px auto 0;
  padding: 10px 22px;
  background: var(--gp-surface);
  border: 1px solid var(--gp-border);
  border-radius: 20px;
  color: var(--gp-purple);
  font: 600 14px var(--font-body);
  cursor: pointer;
}

.section-expand:hover {
  border-color: var(--gp-purple);
  color: var(--gp-text);
  background: var(--gp-surface);
}
.platform-group .game-section { margin:24px 0 0; }
.game-grid { grid-template-columns:repeat(5,1fr); gap:22px; }
.game-card { border-radius:9px; background:linear-gradient(145deg,#0b1319,#070c10); }
.game-thumb,.game-thumb.game-thumb-cover {
  width:100%;
  height:auto;
  /* IGDB covers are 3:4 (264x352) in practice, so they fill the tile without cropping. */
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:center top;
  background:#080d12;
}
.game-info { padding:16px; }
.game-title { font-size:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.game-card-footer { margin:6px -16px -16px; padding:10px 16px; border-radius:0; }
.price-now { font-size:21px; }
.discount-badge,.preorder-badge { padding:9px 16px; border-radius:0; }
.discount-badge { clip-path:polygon(0 0,100% 0,92% 100%,0 100%); }
.preorder-badge { clip-path:polygon(0 0,100% 0,100% 100%,8% 100%); }

.platform-panel { margin:48px 0 0; padding:10px 0 34px; border:0; background:none; display:block; }
.platform-panel h2 { font:800 21px/1 'Inter',sans-serif; margin:0 0 24px; }
.platform-panel .filter-row { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.platform-tiles .platform-logo { min-width:0; height:83px; border-radius:9px; background:linear-gradient(#0c141a,#080e13); }
.platform-panel .filter-pill.platform-logo.is-active { background:linear-gradient(#0c141a,#080e13); border-color:var(--gp-purple); }
.platform-panel .filter-pill.platform-logo.is-active img { filter:brightness(0) invert(1); }
.platform-logo img { max-width:118px; height:34px; }
.bestselling-head { padding-top:12px; }
.bestselling-platform-group .game-section { margin-bottom:42px; }
.site-stats { margin:0 calc(50% - 50vw); padding:30px max(8vw,40px); border-left:0; border-right:0; grid-template-columns:repeat(4,1fr); }
.site-stats span { display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 16px; position:static; }
.site-stats span::before { display:none; }
.site-stats img { position:static; width:44px; height:44px; object-fit:contain; margin-bottom:10px; }
.site-stats strong { font-size:27px; }

@media(max-width:900px){.hero .wrap{min-height:420px}.hero-art{background-position:64% center}.game-grid{grid-template-columns:repeat(2,1fr)}.platform-panel .filter-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.hero .wrap{min-height:220px}.hero-copy{padding-top:16px}.hero-title{font-size:34px;margin-bottom:10px}.hero .hero-sub{font-size:13px;margin-bottom:12px}.search-icon{display:none}.search-input{padding-left:15px;font-size:12px}.search-btn{min-width:95px;font-size:11px}.trust-strip{grid-template-columns:1fr 1fr;gap:8px;padding:6px 10px}.trust-strip span{font-size:11px}.trust-strip img{width:22px;height:22px}.trust-strip b{font-size:16px}.trust-strip small{font-size:9px}.game-grid{grid-template-columns:1fr}.game-thumb,.game-thumb.game-thumb-cover{height:auto}.platform-panel .filter-row{grid-template-columns:repeat(5,1fr);gap:6px}.site-stats{grid-template-columns:1fr 1fr;gap:24px}.site-stats strong{font-size:22px}.site-stats span{font-size:10px}
/* Overrides the grid rule above, which comes after the earlier mobile query and would
   otherwise keep the search beside the logo on phones. */
.header-inner{grid-template-columns:1fr;justify-items:start}
.search-bar{width:100%;max-width:100%}
.social-links{display:none}}

/* Phones use a row layout (thumbnail beside title and price) instead of poster cards. */
@media(max-width:560px){
  .game-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:10px}
  /* Fixed width with a 3:4 ratio. Stretching the height instead let flex size the image
     to its natural width and push the text off the card. 79px matches the row's height. */
  .game-thumb,.game-thumb.game-thumb-cover{width:79px;height:auto;aspect-ratio:3/4;border-radius:8px;flex-shrink:0;object-fit:cover;object-position:center top}
  .game-info{padding:0;flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "meta meta" "footer footer";column-gap:8px;row-gap:4px;align-items:center}
  .game-info-top{grid-area:top;min-height:0}
  .game-meta{grid-area:meta;margin-top:0}
  .discount-badge,.preorder-badge{position:static;padding:2px 9px;border-radius:20px;clip-path:none;flex-shrink:0}
  .game-badges{display:flex;gap:6px;flex-shrink:0}
  /* Two lines, as on desktop (one cut titles too short to tell apart), and brighter text,
     since the title is what shoppers scan first. */
  .game-title{font-size:13px;line-height:1.3;color:var(--gp-text);-webkit-line-clamp:2}
  /* A small inset chip instead of the desktop card's full-width footer, which looked bolted
     on at this size. Gets no rounding while the square-corners rule below is in place. */
  .game-card-footer{margin:8px 0 0;padding:6px 10px;background:var(--gp-surface-2);border:1px solid var(--gp-border)}
  .price-now{font-size:15px}
  .platform-logo img,.platform-logo.switch2-logo img{max-width:60px;height:20px}
  .platform-tiles .platform-logo{height:56px}
  .trust-strip img{width:22px;height:22px}
  /* Show the summary again, clamped to 3 lines as on desktop. */
  .game-hero-summary{display:-webkit-box}
}

/* =========================================================
   Square corners experiment — global override
   ========================================================= */
/* Makes every corner square, overriding the individual border-radius rules. Delete this
   block to bring the rounded corners back. */
* {
  border-radius: 0 !important;
}

/* =========================================================
   Links between game pages, and the platform pages (/pc, /xbox, ...)
   ========================================================= */
/* The same game on each platform, and its editions: boxed, with the one you're on highlighted */
.version-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 6px;
  border: 1px solid var(--gp-border);
  border-radius: 10px;
  background: var(--gp-surface);
}

.version-switcher-label {
  min-width: 72px; /* so stacked boxes' pills line up */
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gp-muted);
}

.version-switcher-item {
  padding: 4px 12px;
  border: 1px solid var(--gp-border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-text);
  text-decoration: none;
}

a.version-switcher-item:hover,
a.version-switcher-item:focus-visible {
  border-color: var(--gp-pink);
  color: var(--gp-pink);
}

.version-switcher-item.is-current {
  border-color: var(--gp-pink);
  background: var(--gp-pink);
  color: var(--gp-bg);
  font-weight: 700;
}

.related-games { margin-top: 40px; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 32px 0 8px;
}

.pagination-link {
  min-width: 36px;
  padding: 7px 11px;
  border: 1px solid var(--gp-border);
  border-radius: 6px;
  color: var(--gp-muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a.pagination-link:hover { color: var(--gp-text); border-color: var(--gp-muted); }

.pagination-link.is-current {
  color: var(--gp-text);
  border-color: var(--gp-purple);
}

.pagination-gap { color: var(--gp-muted); padding: 0 2px; }

/* =========================================================
   Header (JoyBuggy-style): logo, platform menus, then the search box and icons. Each menu
   drops down a panel of that platform's views; phones get the menus from the
   menu button (.is-menu-open). site.js drives both. Overrides the older header rules
   above.
   ========================================================= */
.site-header { padding: 0; }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 58px;
}

.site-logo { width: 112px; }
.logo-link { flex-shrink: 0; }

.main-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  flex: 0 1 auto;
  gap: 2px;
  max-width: 820px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  transition: max-width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), margin 0.3s ease, opacity 0.2s ease, visibility 0.2s;
}


.nav-item { position: relative; display: flex; }

.nav-trigger,
.main-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--gp-muted);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-chevron { width: 10px; height: 7px; transition: transform 0.2s ease; }

.nav-trigger:hover,
.main-nav .nav-link:hover,
.nav-trigger[aria-expanded="true"] { color: var(--gp-text); border-bottom-color: var(--gp-pink); }
.nav-trigger.is-current,
.main-nav .nav-link[aria-current="page"] { color: var(--gp-text); border-bottom-color: var(--gp-purple); }
.nav-trigger[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* The panel: the platform's every game on the left, its views on the right. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  display: none;
  gap: 18px;
  min-width: 520px;
  padding: 16px;
  border: 1px solid var(--gp-border);
  border-top: 2px solid var(--gp-purple);
  background: rgba(10, 14, 19, 0.98);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 0, 160, 0.08);
}

.nav-trigger[aria-expanded="true"] + .nav-panel { display: flex; flex-direction: column; }

/* Hover opens it too, on devices with a pointer. */
@media (hover: hover) and (min-width: 861px) {
  .nav-item:hover .nav-panel { display: flex; flex-direction: column; }
  .nav-item:hover .nav-trigger { color: var(--gp-text); border-bottom-color: var(--gp-pink); }
}

.nav-panel-group { display: grid; grid-template-columns: 170px 1fr; gap: 14px; }
.nav-panel-multi .nav-panel-group + .nav-panel-group { padding-top: 16px; border-top: 1px solid var(--gp-border); }

.nav-panel-all {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--gp-border);
  background: linear-gradient(160deg, rgba(255, 0, 160, 0.16), rgba(0, 240, 255, 0.06));
  color: var(--gp-text);
  transition: border-color 0.15s ease;
}

.nav-panel-all:hover { border-color: var(--gp-pink); }
.nav-panel-all img { height: 22px; width: auto; max-width: 90px; object-fit: contain; object-position: left; filter: brightness(0) invert(1); }
.nav-panel-all span { display: flex; flex-direction: column; gap: 3px; font-weight: 700; font-size: 14px; }
.nav-panel-all small,
.nav-panel-links small { color: var(--gp-muted); font-size: 12px; font-weight: 500; }

.nav-panel-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }

.nav-panel-links a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  color: var(--gp-text);
  font-size: 14px;
  font-weight: 700;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.nav-panel-links a:hover { border-color: var(--gp-border); background: rgba(255, 255, 255, 0.04); }
.nav-panel-links a:hover small { color: var(--gp-text); }

.header-actions { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; margin-left: auto; }

.header-icon-btn {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--gp-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.header-icon-btn:hover { border-color: var(--gp-border); color: var(--gp-pink); }
.header-icon-btn svg { width: 20px; height: 20px; }
.header-icon-btn img { width: 24px; }
.menu-toggle { display: none; }

/* The search box: in the top row, filling the space between the menus and the icons, with
   its Search button always showing. */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 520px;
  height: 40px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gp-border);
  background: rgba(13, 19, 25, 0.92);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-bar:hover { border-color: #3a4652; }

.search-bar:focus-within {
  border-color: var(--gp-purple);
  box-shadow: 0 0 0 3px var(--gp-purple-glow);
}

.search-bar-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--gp-muted);
  pointer-events: none;
}

.search-bar:focus-within .search-bar-icon { color: var(--gp-pink); }

.search-bar .search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 12px 0 42px;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 15px;
}

.search-bar .search-input:focus { box-shadow: none; }

.search-bar .search-btn {
  align-self: stretch;
  min-width: 96px;
  padding: 0 18px;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .search-bar, .main-nav, .nav-chevron { transition: none; }
}

@media (max-width: 860px) {
  .header-inner { gap: 12px; }
  .main-nav { display: none; }
  .menu-toggle { display: grid; }
  .social-link { display: none; }

  /* The menus drop down under the header as a list; a menu opens in place. */
  .is-menu-open .main-nav {
    position: absolute;
    top: 100%;
    right: -4vw;
    left: -4vw;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    max-height: calc(100vh - 70px);
    margin: 0;
    padding: 6px 4vw 14px;
    overflow-y: auto;
    border-bottom: 1px solid var(--gp-border);
    background: var(--gp-bg);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
  }

  .is-menu-open .nav-item { flex-direction: column; }
  .is-menu-open .nav-trigger,
  .is-menu-open .main-nav .nav-link { justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--gp-border); }
  /* An older phone rule hides all but the first two links. */
  .is-menu-open .main-nav .nav-link { display: flex; }
  .is-menu-open .nav-panel { position: static; min-width: 0; padding: 10px 0 14px; border: 0; background: none; box-shadow: none; }
  .nav-panel-group { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 560px) {
  .site-logo { width: 96px; }
  .header-inner { grid-template-columns: none; }
}


/* =========================================================
   Homepage: hero carousel, centred section heads
   ========================================================= */
/* Slides are ~82% wide with the neighbours peeking in at each side; site.js centres the
   active one by translating the track. */
.hero-carousel {
  position: relative;
  padding: 28px 0 22px;
  overflow: hidden;
}

.carousel-viewport { width: min(1440px, 100%); margin: 0 auto; }

.carousel-track {
  display: flex;
  gap: 22px;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 min(1060px, 76%);
  position: relative;
  min-height: 400px;
  border: 1px solid var(--gp-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--gp-surface);
  opacity: 0.4;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.carousel-slide.is-active {
  opacity: 1;
  transform: none;
}

/* Clicking a neighbour moves to it (site.js). */
.carousel-slide:not(.is-active) { cursor: pointer; }
.carousel-slide:not(.is-active) * { pointer-events: none; }

.slide-body { position: relative; z-index: 2; }

/* The branded slide: the mascot art, with the headline and trust strip over it. */
.slide-brand { display: flex; flex-direction: column; justify-content: space-between; }

.slide-brand-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 7, 10, 0.82) 0%, rgba(2, 7, 10, 0.35) 45%, rgba(2, 7, 10, 0) 70%),
    linear-gradient(180deg, transparent 55%, rgba(2, 7, 10, 0.85) 100%),
    url('/img/hero-mascot-raccoon-v2.jpg') 70% center / cover no-repeat;
}

.slide-brand .slide-body { padding: 48px 48px 0; }
.slide-brand .hero-title { margin-bottom: 18px; }
.slide-brand .hero-sub { font-size: 19px; line-height: 1.45; color: #f7f8fa; margin: 0 0 24px; }
.slide-brand .trust-strip { position: relative; z-index: 2; width: auto; margin: 0; padding: 18px 48px 22px; gap: 24px; }

/* Game slides: one link filling the slide, with platform, title and price at the bottom
   left (as JoyBuggy's). The backdrop is IGDB's wide art, or the cover blurred with the sharp
   cover beside the text. */
.slide-link {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  padding: 44px 56px 44px 48px;
  color: inherit;
}

.slide-backdrop {
  position: absolute;
  inset: -40px;
  background: var(--slide-art) center / cover no-repeat;
  filter: blur(34px) saturate(1.35) brightness(0.55);
  transform: scale(1.1);
  transition: transform 0.8s ease;
}

/* Wide art is shown as is, darkened at the bottom left for the text, and replaces the cover. */
.has-artwork .slide-link { grid-template-columns: 1fr; }
.has-artwork .slide-cover { display: none; }
.has-artwork .slide-backdrop { inset: 0; filter: none; transform: none; }
.has-artwork .slide-backdrop::after {
  background:
    linear-gradient(0deg, rgba(7, 11, 15, 0.92) 0%, rgba(7, 11, 15, 0.35) 42%, transparent 68%),
    linear-gradient(90deg, rgba(7, 11, 15, 0.6) 0%, transparent 55%);
}

.carousel-slide.is-active .slide-link:hover .slide-backdrop { transform: scale(1.025); }
.carousel-slide.is-active .slide-link:hover .slide-title { color: var(--gp-pink); }

.slide-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 11, 15, 0.92) 0%, rgba(7, 11, 15, 0.55) 55%, rgba(7, 11, 15, 0.2) 100%),
    radial-gradient(600px 300px at 85% 110%, rgba(255, 0, 160, 0.35), transparent 70%);
}

.slide-game .platform-logo-tag { margin-bottom: 14px; }

.slide-title {
  margin: 0 0 16px;
  max-width: 760px;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(42px, 4.8vw, 72px);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #222;
  transition: color 0.15s ease;
}

.slide-price { display: flex; align-items: center; gap: 14px; }
.slide-price .discount-badge { position: static; padding: 7px 12px; font-size: 18px; }
.slide-price-now { font: 700 38px/1 var(--font-mono); color: var(--gp-text); }
.slide-price-was { color: var(--gp-muted-2); font: 400 18px var(--font-mono); }

.slide-cover {
  position: relative;
  z-index: 2;
  display: block;
  align-self: center;
  width: 264px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: rotate(2deg);
  transition: transform 0.3s ease;
}

.slide-link:hover .slide-cover { transform: rotate(0) scale(1.02); }

.carousel-arrow {
  position: absolute;
  top: calc(50% - 6px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: 1px solid var(--gp-border);
  border-radius: 50%;
  background: rgba(7, 11, 15, 0.75);
  color: var(--gp-text);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.carousel-arrow:hover { border-color: var(--gp-purple); color: var(--gp-purple); }
.carousel-arrow svg { width: 10px; height: 14px; }
.carousel-prev { left: max(16px, calc(9% - 23px)); }
.carousel-next { right: max(16px, calc(9% - 23px)); }

.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }

.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--gp-border);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.carousel-dot.is-active { width: 28px; background: var(--gp-purple); }

/* The deals grid's full-width tile, on IGDB wide art (_FeatureDealTile). grid-row: 2
   makes it its own row after the first row of cards at any column count; auto-placement
   flows the rest of the cards on below it. */
.feature-tile {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--gp-border);
  background: var(--feature-art) center 30% / cover no-repeat var(--gp-surface);
  transition: border-color 0.15s ease, box-shadow 0.2s ease, background-position 1.2s ease;
}

/* A slow drift across the art on hover, answering the pointer. */
.feature-tile:hover { background-position: center 45%; }
@media (prefers-reduced-motion: reduce) { .feature-tile, .feature-tile:hover { background-position: center 30%; transition: none; } }

.feature-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 11, 15, 0.95) 0%, rgba(7, 11, 15, 0.2) 45%, transparent 70%);
  transition: opacity 0.2s ease;
}

.feature-tile:hover { border-color: var(--gp-purple); box-shadow: 0 0 34px var(--gp-purple-glow); }

.feature-tile > * { position: relative; }

.feature-tile-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 15, 0.55);
  backdrop-filter: blur(8px);
}

.feature-tile-title {
  margin: 0 0 8px;
  font: 800 clamp(28px, 3vw, 42px)/0.95 'Barlow Condensed', Impact, sans-serif;
  text-transform: uppercase;
}

.feature-tile-meta { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--gp-muted); font-size: 13px; }
.feature-tile-meta .store-logo { margin: 0; }

.feature-tile-price { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.feature-tile-discount {
  padding: 8px 14px;
  background: var(--gp-purple);
  color: #fff;
  font: 800 24px var(--font-body);
}

.feature-tile-prices { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); }
.feature-tile-prices s { color: var(--gp-muted-2); font-size: 15px; }
.feature-tile-prices strong { color: var(--gp-text); font-size: 34px; line-height: 1; }

@media (max-width: 640px) {
  .feature-tile { min-height: 300px; }
  .feature-tile-bar { flex-direction: column; align-items: flex-start; padding: 16px 18px; }
  .feature-tile-prices { align-items: flex-start; }
  .feature-tile-prices strong { font-size: 28px; }
}

/* Phones list cards one per row, so the tile goes after the third rather than the first. */
@media (max-width: 560px) { .feature-tile { grid-row: 4; } }

/* "New & trending": landscape cards on IGDB wide art (_TrendingCard), three across. Phones
   swipe through them in one row instead of stacking six tall cards. */
.trending-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.trending-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--gp-border);
  background: var(--gp-surface);
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.trending-card:hover { border-color: var(--gp-pink); box-shadow: 0 0 26px var(--gp-pink-glow); }

.trending-card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.trending-card:hover .trending-card-art { transform: scale(1.04); }

.trending-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 11, 15, 0.96) 0%, rgba(7, 11, 15, 0.55) 34%, transparent 62%);
}

.trending-card-release {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 10px;
  border: 1px solid var(--gp-pink);
  background: rgba(7, 11, 15, 0.75);
  color: var(--gp-pink);
  font-size: 12px;
  font-weight: 700;
}

.trending-card-release.is-out { border-color: var(--gp-purple); background: var(--gp-purple); color: #fff; }

.trending-card-info { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; padding: 14px 16px; }

.trending-card-title {
  margin: 0 0 8px;
  overflow: hidden;
  font: 800 24px/1 'Barlow Condensed', Impact, sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.trending-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.trending-card-price { display: flex; align-items: center; gap: 8px; font: 700 18px var(--font-mono); }
.trending-card-discount { padding: 2px 7px; background: var(--gp-purple); color: #fff; font: 800 13px var(--font-body); }

@media (max-width: 900px) { .trending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 560px) {
  .trending-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    margin: 14px calc(50% - 50vw) 0;
    padding: 0 4vw 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .trending-card { scroll-snap-align: center; }
}

/* JoyBuggy-style centred section headings. */
.home-sections .home-content-head { justify-content: center; padding-top: 48px; padding-bottom: 6px; }
.home-sections .home-content-head h2 { font: 800 30px/1 'Barlow Condensed', Impact, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.home-sections .platform-panel h2 { font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 26px; }

/* The coverage stats as JoyBuggy's feature strip: each icon in a glowing tile (square,
   like every corner on the site). */
.home-sections .site-stats { margin-top: 56px; }
.home-sections .site-stats img {
  width: 68px;
  height: 68px;
  padding: 16px;
  margin-bottom: 14px;
  border: 2px solid var(--gp-purple);
  background: rgba(255, 0, 160, 0.1);
  box-shadow: 0 0 26px var(--gp-purple-glow), inset 0 0 18px rgba(255, 0, 160, 0.18);
}

@media (max-width: 900px) {
  .carousel-slide { flex-basis: 88%; min-height: 0; }
  /* Slides take the branded slide's height; the game's details sit at the bottom. */
  .slide-link { grid-template-columns: 1fr; align-content: end; gap: 18px; padding: 24px; }
  .slide-cover { order: -1; align-self: start; width: 120px; transform: none; }
  /* Art across the top, text below it on a dark fade. */
  .has-artwork .slide-backdrop { background-size: auto 260px; background-position: center top; background-color: var(--gp-bg); }
  .has-artwork .slide-backdrop::after { background: linear-gradient(180deg, transparent 90px, rgba(7, 11, 15, 0.85) 200px, var(--gp-bg) 262px); }
  .slide-brand .slide-body { padding: 32px 28px 0; }
  .slide-brand .trust-strip { padding: 16px 28px 20px; grid-template-columns: repeat(2, 1fr); }
  .carousel-arrow { display: none; }
}

@media (max-width: 560px) {
  .hero-carousel { padding-top: 16px; }
  .carousel-track { gap: 10px; }
  .carousel-slide { flex-basis: 92%; border-radius: 14px; }
  .slide-price-now { font-size: 30px; }
  .slide-brand .hero-sub { font-size: 16px; }
  .home-sections .home-content-head h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track, .carousel-slide { transition: none; }
}

/* =========================================================
   Homepage polish: the hero stage, CRT headings, platform tiles
   ========================================================= */

/* Each slide casts a soft reflection on the floor below it, as on a glossy stage: the
   bottom of the slide mirrored and faded out within a short distance. box-reflect is
   Chromium and Safari only; Firefox simply shows no reflection. The extra bottom padding
   is room for it (the carousel clips its overflow). */
.hero-carousel { padding-bottom: 60px; }
/* Phone slides are shorter, so their reflection is too. */
@media (max-width: 560px) { .hero-carousel { padding-bottom: 30px; } }

.carousel-slide {
  -webkit-box-reflect: below 4px linear-gradient(transparent 0%, transparent 84%, rgba(255, 255, 255, 0.22) 100%);
}

/* The dots sit on the reflection, above it. */
.carousel-dots { position: relative; z-index: 1; }

/* The active dot fills over the autoplay interval (7s, site.js), so you can see when the
   next slide comes; it pauses with the carousel. */
.carousel-dot { position: relative; overflow: hidden; }
.carousel-dot.is-active { background: rgba(255, 0, 160, 0.35); }
.carousel-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gp-purple);
  transform-origin: left;
  animation: dot-fill 7s linear forwards;
}
.hero-carousel.is-paused .carousel-dot.is-active::after { animation-play-state: paused; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Headings are plain: no fringe, glow or drop shadow. */
.home-sections .home-content-head h2,
.home-sections .platform-panel h2,
.slide-title,
.slide-brand .hero-title { text-shadow: none; }

/* Platform tiles: logo and game count, lighting up in the platform's own colour on hover. */
.home-sections .platform-panel {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}

.home-sections .platform-panel h2 { margin-bottom: 20px; font-size: 30px; letter-spacing: 0.02em; }

.home-sections .platform-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.platform-tile {
  --tile-color: var(--gp-purple);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 112px;
  padding: 18px 12px;
  overflow: hidden;
  border: 1px solid var(--gp-border);
  background: linear-gradient(180deg, var(--gp-surface), #0a0f14);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.platform-tile[data-platform="pc"] { --tile-color: #00f0ff; }
.platform-tile[data-platform="playstation"] { --tile-color: #2f6bff; }
.platform-tile[data-platform="xbox"] { --tile-color: #2bd94b; }
.platform-tile[data-platform="switch"],
.platform-tile[data-platform="switch2"] { --tile-color: #ff3b3b; }

/* The colour rises from the bottom edge. */
.platform-tile::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 100%;
  background: radial-gradient(90% 70% at 50% 120%, var(--tile-color), transparent 70%);
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.platform-tile > * { position: relative; }
.platform-tile img { height: 26px; width: auto; max-width: 80%; object-fit: contain; filter: brightness(0) invert(1); }

.home-sections .platform-tiles .platform-tile-count {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gp-muted);
  font: 500 12px var(--font-body);
  transition: color 0.2s ease;
}

.platform-tile:hover,
.platform-tile:focus-visible {
  border-color: var(--tile-color);
  box-shadow: 0 0 28px color-mix(in srgb, var(--tile-color) 35%, transparent);
  transform: translateY(-2px);
}

.platform-tile:hover::before,
.platform-tile:focus-visible::before { opacity: 0.65; transform: none; }
.platform-tile:hover .platform-tile-count,
.platform-tile:focus-visible .platform-tile-count { color: var(--gp-text); }

/* The tiles are tabs: the selected one stays lit in its colour. */
button.platform-tile { width: 100%; color: var(--gp-text); font: inherit; cursor: pointer; }
.platform-tile.is-active { border-color: var(--tile-color); box-shadow: inset 0 -3px 0 var(--tile-color), 0 0 24px color-mix(in srgb, var(--tile-color) 30%, transparent); }
.platform-tile.is-active::before { opacity: 0.5; transform: none; }
.platform-tile.is-active .platform-tile-count { color: var(--gp-text); }
/* Specific enough to beat the older rule that boxes every span in the tiles. */
.home-sections .platform-tiles .platform-tile-all { padding: 0; border: 0; background: none; color: var(--gp-text); font: 800 26px/1 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 760px) {
  .home-sections .platform-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-tile { min-height: 92px; }
}

@media (max-width: 560px) {
  .home-sections .platform-panel h2 { font-size: 24px; }
  .home-sections .platform-tiles { gap: 8px; }
  .platform-tile img { height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-dot.is-active::after { animation: none; transform: scaleX(1); }
  .platform-tile, .platform-tile::before { transition: none; }
}

/* =========================================================
   Carousel comparison cue: the cheapest store, and how many were compared
   ========================================================= */
.slide-store { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; color: var(--gp-muted); font-size: 14px; }
.slide-store-best { display: inline-flex; align-items: center; gap: 8px; color: var(--gp-text); }
.slide-store .store-logo { margin: 0; }

/* Phones: the branded slide's text sits over the busiest part of the raccoon art, so the
   art is darkened behind it and pushed to the right. */
@media (max-width: 560px) {
  .slide-brand-art {
    background:
      linear-gradient(180deg, rgba(2, 7, 10, 0.88) 0%, rgba(2, 7, 10, 0.72) 55%, rgba(2, 7, 10, 0.9) 100%),
      url('/img/hero-mascot-raccoon-v2.jpg') 78% center / cover no-repeat;
  }
}

/* The search box shares the top row with the menus, so the row is tightened to give it room;
   below 1180px wide it drops its Search button (Enter still searches). */
.header-inner { gap: 24px; }
.nav-trigger,
.main-nav .nav-link { padding: 0 11px; }
.search-bar { min-width: 240px; }

@media (max-width: 1180px) {
  .search-bar .search-btn { display: none; }
}

@media (max-width: 860px) {
  .header-inner { gap: 12px; }
  .search-bar { min-width: 0; }
}

/* Focused, the search box takes the whole middle of the row: the menus fold away and it
   grows to meet the logo. They come back when focus leaves. */
.search-bar { transition: border-color 0.2s ease, box-shadow 0.2s ease, max-width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }

@media (min-width: 861px) {
  .main-nav { overflow: visible; }
  .header-inner:has(.search-bar:focus-within) .main-nav {
    max-width: 0;
    margin-right: -24px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
  }
  .header-inner:has(.search-bar:focus-within) .search-bar { max-width: 100%; }
  .header-inner:has(.search-bar:focus-within) .search-bar .search-btn { display: block; }
}

/* Game page offer rows: fixed columns (logo, facts, price, button) so the prices and
   buttons line up down the list whatever each store shows. */
.offer-row { display:grid; grid-template-columns:150px minmax(0,1fr) 220px 120px; align-items:center; gap:18px; padding:14px 18px; background:var(--gp-surface); border-bottom:1px solid var(--gp-border); position:relative; }
.offer-row:first-child { border-radius:5px 5px 0 0; }
.offer-row:last-child { border-bottom:0; border-radius:0 0 5px 5px; }
.offer-row:only-child { border-radius:5px; }
.offer-row.is-best { background:linear-gradient(100deg, rgba(255,0,160,.16), var(--gp-surface) 60%); box-shadow:inset 3px 0 0 var(--gp-yellow); }
.offer-row.is-unavailable { opacity:.55; }
.offer-row[hidden] { display:none; }
.offer-store .store-logo { margin:0; min-height:32px; padding:6px 12px; font-size:12px; }
.offer-store .store-logo img { height:18px; max-width:64px; }
.offer-facts { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:13px; color:var(--gp-text); min-width:0; }
.offer-fact { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.offer-fact .format-icon { width:12px; height:12px; }
.offer-fact-label { color:var(--gp-muted-2); }
.offer-checked { color:var(--gp-muted); }
.offer-checked svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }
.offer-facts .unavailable-badge { margin-left:0; }
.offer-price { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.offer-price-top { display:flex; align-items:center; gap:8px; }
.offer-was { color:var(--gp-muted-2); font-size:13px; }
.offer-discount { background:var(--gp-border); color:var(--gp-text); font:700 12px var(--font-body); padding:2px 6px; border-radius:4px; }
.offer-now { font:800 22px/1 var(--font-body); letter-spacing:-.5px; color:var(--gp-text); }
.offer-row.is-best .offer-discount { background:var(--gp-pink); color:#04161a; }
.offer-row.is-best .offer-now { color:var(--gp-pink); }
.offer-price-sub { display:flex; align-items:center; gap:6px; }
.delivery-tag { font:600 11px var(--font-body); color:var(--gp-muted); border:1px solid var(--gp-border); border-radius:4px; padding:2px 7px; white-space:nowrap; }
.delivery-tag.is-charged { color:var(--gp-text); }
.offer-row .best-price-tag { position:static; border-radius:4px; padding:3px 8px; }
.offer-row .coupon-badge { padding:2px 8px; font-size:11px; border-radius:4px; background:transparent; color:var(--gp-text); border:1px dashed var(--gp-muted-2); }
.offer-row .coupon-badge:hover { background:rgba(255,255,255,.06); }
.offer-row .coupon-badge.is-copied { background:var(--gp-pink); border-color:var(--gp-pink); color:var(--gp-bg); }
.offer-row .price-cta { justify-self:stretch; text-align:center; }
.offer-row.is-best .price-cta { background:var(--gp-purple); border-color:var(--gp-purple); }

@media (max-width: 760px) {
  /* Logo and price on top, facts under the logo, a full-width button below. */
  .offer-row { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"store price" "facts price" "cta cta"; gap:10px 14px; padding:14px; }
  .offer-store { grid-area:store; }
  .offer-facts { grid-area:facts; gap:4px 12px; font-size:12px; }
  .offer-price { grid-area:price; align-self:start; }
  .offer-row .price-cta { grid-area:cta; }
  .offer-now { font-size:20px; }
}

/* Stores page */
.stores-lede { font-size:16px; color:var(--gp-text); max-width:720px; }
.stores-rules { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:10px; max-width:820px; }
.stores-rules li { color:var(--gp-muted); font-size:14px; line-height:1.55; padding-left:18px; position:relative; }
.stores-rules li::before { content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:2px; background:var(--gp-pink); }
.stores-rules strong { color:var(--gp-text); }
.stores-group { margin-top:32px; }
.stores-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.store-card { background:var(--gp-surface); border:1px solid var(--gp-border); border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.store-card-blurb { margin:0; color:var(--gp-muted); font-size:14px; line-height:1.5; flex:1; }
.store-card-count { margin:0; color:var(--gp-muted-2); font-size:12px; }

/* Space between the games grid and the DLC section in search results. */
.search-dlc-heading { margin-top:36px; }

/* A short menu (About): one column of links, no "All" tile beside it. */
.nav-panel-compact { min-width:300px; }
.nav-panel-compact .nav-panel-group,
.nav-panel-compact .nav-panel-links { grid-template-columns:1fr; }

/* Stores page logo tiles: big and centred, like a publisher wall. */
.store-card { padding:0; overflow:hidden; }
.store-card-blurb, .store-card-count { padding:0 18px; }
.store-card-count { padding-bottom:16px; }
.store-card-logo { height:110px; display:flex; align-items:center; justify-content:center; gap:14px; padding:0 20px; background:#0a1016; border-bottom:1px solid var(--gp-border); }
.store-card-logo img { width:52px; height:52px; object-fit:contain; flex-shrink:0; }
.store-card-logo.is-wordmark img { width:auto; height:auto; max-width:190px; max-height:52px; }
.store-card-logo img[src$='.svg'] { filter:brightness(0) invert(1); }
.store-card-name { font:800 24px/1.05 var(--font-body); letter-spacing:-.5px; color:var(--gp-text); }
/* Dark logos that need a light tile, as their chips do. */
.store-card-logo:has(img[src*='joybuy']),
.store-card-logo:has(img[src*='green-man-gaming']) { background:#eef1f4; }
.store-card-logo:has(img[src*='green-man-gaming']) .store-card-name { color:#1c1f24; }

/* Game page offers, as the mockup: an "All offers" heading with the store count, the
   format pills on the right, square-edged rows, and a filled button only on the best row. */
.offers-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0 12px; }
.offers-head .deals-sort-toggle { margin-bottom:0; }
.offers-heading { margin:0; font:800 20px/1.2 var(--font-body); letter-spacing:-.3px; color:var(--gp-text); }
.offers-count { color:var(--gp-muted); font-size:15px; font-weight:500; letter-spacing:0; }
.offer-list { border-radius:0; }
.offer-row, .offer-row:first-child, .offer-row:last-child, .offer-row:only-child { border-radius:0; }
.offer-row { padding:16px 20px; }
.offer-row .price-cta { display:flex; align-items:center; justify-content:center; height:40px; border-radius:4px; font-size:14px; font-weight:700; background:transparent; border:1px solid var(--gp-purple); }
.offer-row .price-cta::after { content:"\2197"; margin-left:6px; font-size:13px; }
.offer-row .price-cta:hover { background:var(--gp-purple); }
.offer-row.is-best .price-cta { background:var(--gp-purple); }
.offer-row .price-cta.is-disabled { border-color:var(--gp-border); }
.offer-row .price-cta.is-disabled::after { content:none; }
@media (max-width: 760px) { .offers-heading { font-size:17px; } .offers-count { font-size:13px; } }

/* Offer rows as the reference: plain logos, a title line over the facts, green best price,
   and square corners on every control. */
.offer-row { --offer-best:var(--gp-pink); padding:18px 20px; }
.offer-store { display:flex; align-items:center; gap:10px; min-width:0; }
.offer-store img { width:28px; height:28px; object-fit:contain; flex-shrink:0; }
.offer-store.is-wordmark img { width:auto; height:auto; max-width:120px; max-height:30px; }
.offer-store img[src$='.svg'] { filter:brightness(0) invert(1); }
.offer-store img[src*='joybuy'], .offer-store img[src*='green-man-gaming'] { background:#eef1f4; padding:4px 6px; }
.offer-store-name { font:700 15px/1.15 var(--font-body); color:var(--gp-text); overflow:hidden; text-overflow:ellipsis; }
.offer-info { display:flex; flex-direction:column; gap:6px; min-width:0; }
.offer-title { font:600 15px/1.25 var(--font-body); color:var(--gp-text); }
.offer-facts { color:var(--gp-text); }
.offer-fact-label { color:var(--gp-muted); }
.offer-discount { border-radius:0; }
.offer-row.is-best .offer-discount { background:var(--offer-best); color:#04161a; }
.offer-row.is-best .offer-now { color:var(--offer-best); }
.offer-now { font-size:24px; }
.offer-row .best-price-tag { background:transparent; color:var(--offer-best); border:1px solid var(--offer-best); border-radius:0; font:600 12px var(--font-body); text-transform:none; padding:2px 8px; }
.offer-row .coupon-badge { border-radius:0; font-weight:500; }
.offer-row .price-cta { border-radius:0; height:42px; background:var(--gp-bg); }
.offer-row.is-best .price-cta { background:var(--gp-purple); }
@media (max-width: 760px) {
  .offer-row { grid-template-areas:"store price" "info price" "cta cta"; }
  .offer-info { grid-area:info; }
  .offer-title { display:none; }
}