/*
 * Gamestore.dk theme.
 * Colour tokens are taken straight from the design system (oklch),
 * then handed to Bootstrap through its own --bs-* variables so the
 * stock components inherit the look.
 */
:root,
[data-bs-theme='dark'] {
  --gs-background: oklch(0.145 0.005 260);
  --gs-foreground: oklch(0.94 0.003 260);
  --gs-card: oklch(0.19 0.006 260);
  --gs-primary: oklch(0.88 0.19 126);
  --gs-primary-foreground: oklch(0.16 0.02 126);
  --gs-secondary: oklch(0.23 0.007 260);
  --gs-muted-foreground: oklch(0.65 0.008 260);
  --gs-accent: oklch(0.245 0.025 126);
  --gs-destructive: oklch(0.65 0.2 25);
  --gs-border: oklch(0.3 0.007 260);
  --gs-radius: 0.25rem;

  --gs-font-sans: 'Barlow', system-ui, sans-serif;
  --gs-font-display: 'Barlow Condensed', system-ui, sans-serif;
  --gs-font-mono: 'IBM Plex Mono', monospace;

  --bs-body-bg: var(--gs-background);
  --bs-body-color: var(--gs-foreground);
  --bs-body-font-family: var(--gs-font-sans);
  --bs-emphasis-color: var(--gs-foreground);
  --bs-border-color: var(--gs-border);
  --bs-border-radius: var(--gs-radius);
  --bs-border-radius-sm: var(--gs-radius);
  --bs-border-radius-lg: var(--gs-radius);
  --bs-link-color: var(--gs-primary);
  --bs-link-hover-color: var(--gs-primary);
  --bs-secondary-color: var(--gs-muted-foreground);
  --bs-heading-color: var(--gs-foreground);
}

body {
  background-color: var(--gs-background);
  color: var(--gs-foreground);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}

/* Layout -------------------------------------------------------------- */
.store-container {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

.site-header {
  border-bottom: 1px solid var(--gs-border);
  background: var(--gs-card);
}

.site-footer {
  border-top: 1px solid var(--gs-border);
}

/* Type ---------------------------------------------------------------- */
.font-display {
  font-family: var(--gs-font-display);
}

.font-mono {
  font-family: var(--gs-font-mono);
}

.text-muted-fg {
  color: var(--gs-muted-foreground) !important;
}

.text-brand {
  color: var(--gs-primary) !important;
}

.eyebrow {
  font-family: var(--gs-font-mono);
  font-size: 0.75rem;
  color: var(--gs-primary);
}

.eyebrow .dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--gs-primary);
  margin-right: 0.5rem;
  vertical-align: middle;
}

.crumb {
  font-family: var(--gs-font-mono);
  font-size: 0.625rem;
  color: var(--gs-muted-foreground);
}

/* Brand --------------------------------------------------------------- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gs-primary);
  color: var(--gs-primary-foreground);
  clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 18% 100%, 0 82%);
  font-size: 1.25rem;
}

.brand-word {
  font-family: var(--gs-font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gs-foreground);
  text-decoration: none;
}

.brand-word .tld {
  color: var(--gs-primary);
}

/* Nav ----------------------------------------------------------------- */
.nav-item-gs {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0;
  color: var(--gs-muted-foreground);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.nav-item-gs:hover {
  color: var(--gs-foreground);
}

.nav-item-gs.active {
  color: var(--gs-primary);
  border-color: var(--gs-primary);
}

/* Forms --------------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--gs-background);
  border: 1px solid var(--gs-border);
  color: var(--gs-foreground);
  border-radius: var(--gs-radius);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--gs-background);
  color: var(--gs-foreground);
  border-color: var(--gs-primary);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--gs-muted-foreground);
}

.search-field {
  height: 3rem;
  padding-left: 3rem;
}

.search-wrap {
  position: relative;
}

.search-wrap .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gs-muted-foreground);
  pointer-events: none;
}

.form-check-input {
  background-color: var(--gs-background);
  border-color: var(--gs-border);
}

.form-check-input:checked {
  background-color: var(--gs-primary);
  border-color: var(--gs-primary);
}

.form-check-input:focus {
  border-color: var(--gs-primary);
  box-shadow: none;
}

/* Buttons ------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--gs-radius);
  font-weight: 600;
}

.btn-brand {
  --bs-btn-bg: var(--gs-primary);
  --bs-btn-border-color: var(--gs-primary);
  --bs-btn-color: var(--gs-primary-foreground);
  --bs-btn-hover-bg: var(--gs-primary);
  --bs-btn-hover-border-color: var(--gs-primary);
  --bs-btn-hover-color: var(--gs-primary-foreground);
  --bs-btn-active-bg: var(--gs-primary);
  --bs-btn-active-border-color: var(--gs-primary);
  --bs-btn-active-color: var(--gs-primary-foreground);
  --bs-btn-disabled-bg: var(--gs-secondary);
  --bs-btn-disabled-border-color: var(--gs-border);
  --bs-btn-disabled-color: var(--gs-muted-foreground);
}

.btn-brand:hover {
  filter: brightness(1.08);
}

.btn-outline-gs {
  --bs-btn-color: var(--gs-foreground);
  --bs-btn-border-color: var(--gs-border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--gs-secondary);
  --bs-btn-hover-border-color: var(--gs-primary);
  --bs-btn-hover-color: var(--gs-foreground);
  --bs-btn-active-bg: var(--gs-secondary);
  --bs-btn-active-border-color: var(--gs-primary);
  --bs-btn-active-color: var(--gs-foreground);
}

.btn-link-gs {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem; /* a fingertip, not a cursor tip */
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  white-space: nowrap;
  color: var(--gs-muted-foreground);
  background: none;
  border: 0;
}

.btn-link-gs:hover {
  color: var(--gs-foreground);
}

/* Language switch ----------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  font-family: var(--gs-font-mono);
  font-size: 0.75rem;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.375rem 0.625rem;
  color: var(--gs-muted-foreground);
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--gs-foreground);
}

.lang-switch a.active {
  background: var(--gs-primary);
  color: var(--gs-primary-foreground);
}

/* Catalog ------------------------------------------------------------- */
.catalog-layout {
  display: flex;
  align-items: stretch;
  gap: 28px;
}

.catalog-main {
  min-width: 0;
  flex: 1;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.game-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: var(--gs-card);
  transition: border-color 0.2s;
  height: 100%;
}

.game-card:hover {
  border-color: var(--gs-primary);
}

.game-card .cover-link {
  display: block;
  position: relative;
  overflow: hidden;
}

.game-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 0.3s;
}

.game-card:hover img {
  transform: scale(1.03);
}

.game-card .platform-chip {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--gs-radius);
  background: rgb(0 0 0 / 0.72);
  font-family: var(--gs-font-mono);
  font-size: 0.625rem;
  color: var(--gs-foreground);
}

.game-card .card-body-gs {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.75rem;
}

.game-card .game-title {
  display: block;
  min-height: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--gs-foreground);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card:hover .game-title {
  color: var(--gs-primary);
}

.game-card .game-genres {
  font-size: 0.6875rem;
  color: var(--gs-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card .price-block {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gs-border);
}

.game-card .price {
  font-family: var(--gs-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gs-primary);
  line-height: 1.1;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--gs-muted-foreground);
}

/* Sidebar filters ----------------------------------------------------- */
.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gs-border);
}

.genre-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: var(--gs-radius);
  font-size: 0.75rem;
  color: var(--gs-muted-foreground);
  cursor: pointer;
}

.genre-option:hover {
  background: var(--gs-secondary);
}

.genre-option:has(input:checked) {
  background: var(--gs-accent);
  color: var(--gs-primary);
}

.genre-option .count {
  font-family: var(--gs-font-mono);
  font-size: 0.625rem;
}

.sidebar-block {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gs-border);
}

/* Offers table (product page) ----------------------------------------- */
.offer-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: var(--gs-card);
}

.offer-row + .offer-row {
  margin-top: 0.5rem;
}

.offer-row.is-cheapest {
  border-color: var(--gs-primary);
}

.offer-row .btn {
  white-space: nowrap;
}

.offer-price {
  font-family: var(--gs-font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gs-primary);
  line-height: 1;
}

.badge-cheapest {
  background: var(--gs-primary);
  color: var(--gs-primary-foreground);
  font-family: var(--gs-font-mono);
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--gs-radius);
}

.panel {
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: var(--gs-card);
}

/* Screenshot gallery (product page) ----------------------------------- */
.gallery-main {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: var(--gs-card);
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.gallery-thumb {
  padding: 0;
  overflow: hidden;
  background: none;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  cursor: pointer;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.gallery-thumb:hover,
.gallery-thumb.is-active {
  border-color: var(--gs-primary);
}

.gallery-thumb:hover img,
.gallery-thumb.is-active img {
  opacity: 1;
}

.key-code {
  font-family: var(--gs-font-mono);
  color: var(--gs-primary);
  white-space: nowrap; /* a key broken over lines is easy to copy wrong */
}

/* Tables -------------------------------------------------------------- */
.table-gs {
  --bs-table-bg: transparent;
  --bs-table-color: var(--gs-foreground);
  --bs-table-border-color: var(--gs-border);
}

.table-gs thead th {
  font-family: var(--gs-font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  color: var(--gs-muted-foreground);
  font-weight: 500;
}

/* Pagination ---------------------------------------------------------- */
.pagination {
  --bs-pagination-bg: var(--gs-card);
  --bs-pagination-color: var(--gs-foreground);
  --bs-pagination-border-color: var(--gs-border);
  --bs-pagination-hover-bg: var(--gs-secondary);
  --bs-pagination-hover-color: var(--gs-foreground);
  --bs-pagination-hover-border-color: var(--gs-border);
  --bs-pagination-focus-bg: var(--gs-secondary);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--gs-primary);
  --bs-pagination-active-border-color: var(--gs-primary);
  --bs-pagination-active-color: var(--gs-primary-foreground);
  --bs-pagination-disabled-bg: var(--gs-card);
  --bs-pagination-disabled-color: var(--gs-muted-foreground);
  --bs-pagination-disabled-border-color: var(--gs-border);
}

/* Alerts -------------------------------------------------------------- */
.alert-gs {
  border: 1px solid var(--gs-primary);
  background: var(--gs-accent);
  color: var(--gs-foreground);
  border-radius: var(--gs-radius);
}

.invalid-feedback,
.text-danger {
  color: var(--gs-destructive) !important;
}

/* Popular shelf: one game on stage, the rest queued beside it ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}

.hero-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: var(--gs-card);
}

.hero-slide {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 27rem;
  padding: 2rem;
  overflow: hidden;
}

/* Backdrop: a screenshot of the game... */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg) center / cover no-repeat;
}

/* ...or, without one, the portrait cover blurred until it is only colour. */
.hero-slide.is-cover-bg::before {
  inset: -32px;
  filter: blur(28px) brightness(0.6);
}

/* Dark where the text sits, clear where the picture should show. */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, oklch(0.145 0.005 260 / 0.94) 0%, oklch(0.145 0.005 260 / 0.72) 42%, oklch(0.145 0.005 260 / 0.1) 100%),
    linear-gradient(0deg, oklch(0.145 0.005 260 / 0.85) 0%, transparent 45%);
}

.hero-copy {
  min-width: 0;
  max-width: 36rem;
}

.hero-title {
  margin: 0;
  font-family: var(--gs-font-display);
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hero-title a {
  color: var(--gs-foreground);
  text-decoration: none;
}

.hero-title a:hover {
  color: var(--gs-primary);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: rgb(0 0 0 / 0.55);
  font-size: 0.75rem;
  color: var(--gs-foreground);
  text-decoration: none;
}

a.chip:hover {
  border-color: var(--gs-primary);
  color: var(--gs-primary);
}

.hero-meta {
  margin: 0.875rem 0 0;
  font-family: var(--gs-font-mono);
  font-size: 0.6875rem;
  color: var(--gs-muted-foreground);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.hero-price {
  margin-right: 0.25rem;
  font-family: var(--gs-font-display);
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--gs-primary);
}

.hero-cover {
  flex-shrink: 0;
  width: 11.5rem;
}

.hero-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.6);
}

.hero-pause {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: rgb(0 0 0 / 0.65);
  color: var(--gs-foreground);
}

.hero-pause:hover {
  border-color: var(--gs-primary);
  color: var(--gs-primary);
}

/* The queue ---------------------------------------------------------- */
.hero-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: var(--gs-card);
}

.hero-list li {
  flex: 1;
  min-width: 0;
}

.hero-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.625rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--gs-radius);
  background: none;
  color: var(--gs-foreground);
  text-align: left;
}

.hero-pick:hover,
.hero-pick.is-active {
  background: var(--gs-secondary);
}

.hero-rank {
  font-family: var(--gs-font-mono);
  font-size: 0.625rem;
  color: var(--gs-muted-foreground);
}

.hero-pick.is-active .hero-rank {
  color: var(--gs-primary);
}

.hero-pick img {
  flex-shrink: 0;
  width: 2.75rem;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--gs-radius);
}

.hero-pick-title,
.hero-pick-price {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-pick-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.hero-pick-price {
  font-family: var(--gs-font-mono);
  font-size: 0.75rem;
  color: var(--gs-primary);
}

/* A bar under the game on stage shows how long until the next one. */
.hero-pick.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gs-primary);
  transform-origin: left;
  animation: hero-timer 6s linear;
}

.is-paused .hero-pick.is-active::after {
  animation: none;
}

@keyframes hero-timer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 991px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The queue becomes a swipeable strip under the stage. */
  .hero-list {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hero-list li {
    flex: 0 0 13rem;
  }
}

@media (max-width: 767px) {
  .hero-slide {
    min-height: 22rem;
    padding: 1.25rem;
  }

  .hero-cover {
    display: none;
  }

  .hero-price {
    font-size: 1.75rem;
  }
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .store-container {
    width: calc(100% - 32px);
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

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

/* Header actions (wishlist / cart / account) ------------------------- */
.header-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  text-decoration: none;
  color: var(--gs-muted-foreground);
}

.header-action:hover {
  color: var(--gs-foreground);
}

.header-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--gs-primary);
  color: var(--gs-primary-foreground);
  font-size: 0.625rem;
}

/* Sidebar filter search --------------------------------------------- */
.filter-search {
  position: relative;
}

.filter-search i {
  position: absolute;
  top: 50%;
  left: 0.625rem;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--gs-muted-foreground);
}

.filter-search input {
  padding-left: 2rem;
}

/* Wishlist heart on a product card ---------------------------------- */
.game-card {
  position: relative;
}

.wish-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: rgb(0 0 0 / 0.72);
  color: var(--gs-muted-foreground);
  font-size: 0.75rem;
}

.wish-btn:hover,
.wish-btn.is-wanted {
  color: var(--gs-primary);
}

/* Platform tiles: the top-of-page shortcut into each platform's own page ---- */
.platform-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.platform-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  background: var(--gs-card);
  color: var(--gs-foreground);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.platform-tile:hover,
.platform-tile.is-active {
  border-color: var(--gs-primary);
  color: var(--gs-primary);
}

.platform-tile i {
  font-size: 1.375rem;
}

/* A name too long for its tile ends in "…" instead of pushing the count out. */
.platform-tile .fw-semibold {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-tile .tile-count {
  margin-left: auto;
  font-family: var(--gs-font-mono);
  font-size: 0.625rem;
  color: var(--gs-muted-foreground);
}

@media (max-width: 639px) {
  .platform-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Smallest phones (320-399px): "PlayStation" and its count must still fit a half-width tile. */
@media (max-width: 399px) {
  .platform-tile {
    gap: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
  }

  .platform-tile i {
    font-size: 1.125rem;
  }

  /* Prices already show the currency; the label is what keeps the header on one row. */
  .header-currency {
    display: none;
  }
}

/* Under 360px a half-width tile holds the name and count, but not the icon too. */
@media (max-width: 359px) {
  .platform-tile i {
    display: none;
  }
}

/* Category bar: swipeable on narrow screens, without a scrollbar drawn under it. */
.nav-scroll {
  scrollbar-width: none;
}

.nav-scroll::-webkit-scrollbar {
  display: none;
}

/* Catalog filters: a docked sidebar from 992px, a slide-in drawer below it ---- */
.filter-inner {
  padding: 1rem;
  overflow-y: auto;
}

@media (min-width: 992px) {
  /* Runs the full height of the page, flush against the header and the footer. */
  .catalog-sidebar {
    width: 248px;
    flex-shrink: 0;
    margin-block: -1.5rem -3rem; /* cancels <main>'s own padding */
    border-right: 1px solid var(--gs-border);
  }

  /* On the front page the sidebar starts at the grid, under the banner and the popular shelf. */
  .is-landing .catalog-sidebar {
    margin-top: 0;
  }

  .is-landing .filter-inner {
    padding-top: 0;
  }

  /* The filters follow the shopper down a long grid. */
  .filter-inner {
    position: sticky;
    top: 0;
    max-height: 100vh;
    padding: 1.5rem 1.25rem 1.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gs-border) transparent;
  }
}

/* Catalog banner: generated artwork behind the page heading ------------- */
.catalog-banner {
  position: relative;
  min-height: 11rem;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  /* The fade keeps the heading readable whatever part of the picture sits behind it. */
  background:
    linear-gradient(90deg, var(--gs-background) 0%, oklch(0.145 0.005 260 / 0.7) 45%, transparent 100%),
    url('../images/hero-bg.jpg') right 55% / cover no-repeat,
    var(--gs-card);
}

/* Depth: cards lift on hover, covers fade into the card ----------------- */
.game-card {
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.45), 0 0 0 1px var(--gs-primary);
}

.game-card .cover-link::after {
  content: '';
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
  pointer-events: none;
}

.game-card .platform-chip {
  z-index: 1;
}

/* Product page ------------------------------------------------------- */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  grid-template-rows: auto 1fr; /* a tall cover adds space under the offers, not between */
  grid-template-areas:
    'cover info'
    'cover offers';
  gap: 1.5rem;
  align-items: start;
}

.product-cover {
  grid-area: cover;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--gs-border);
  border-radius: var(--gs-radius);
}

.product-info {
  grid-area: info;
  min-width: 0;
}

.product-offers {
  grid-area: offers;
  min-width: 0;
}

.product-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  overflow-wrap: anywhere;
}

@media (max-width: 991px) {
  .product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

@media (max-width: 767px) {
  .product-layout {
    grid-template-columns: 7rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      'cover info'
      'offers offers';
    gap: 1rem;
  }

  .product-title {
    font-size: clamp(1.375rem, 6vw, 2rem);
  }
}

/* Narrow screens: an offer or cart row puts its details on top, price and button below. */
@media (max-width: 575px) {
  .offer-row {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  .offer-row > .flex-grow-1 {
    flex-basis: 100%;
  }

  .offer-row .offer-price {
    margin-right: auto;
  }
}

/* Purchase history: a table on wide screens, one card per order on phones. */
@media (max-width: 639px) {
  .table-orders thead {
    display: none;
  }

  .table-orders,
  .table-orders tbody {
    display: block;
  }

  .table-orders tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'game paid'
      'seller date'
      'key key';
    column-gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gs-border);
  }

  .table-orders tr:last-child {
    border-bottom: 0;
  }

  .table-orders td {
    padding: 0.125rem 1rem;
    border: 0;
  }

  .table-orders .order-game { grid-area: game; }
  .table-orders .order-paid { grid-area: paid; }
  .table-orders .order-seller { grid-area: seller; }
  .table-orders .order-key { grid-area: key; padding-top: 0.5rem; }

  .table-orders .order-date {
    grid-area: date;
    text-align: right;
  }
}