:root {
  --bg: #f7f8fa;
  --fg: #0a0a0a;
  --muted: #6b6b6b;
  --border: #e5e5e5;
  --card-bg: #ffffff;
  --accent: #ffcb05;
  --accent-fg: #0a0a0a;
  --navy: #2b5a8c;
  /* Los 3 tonos de estado de abajo (available/invitation/unavailable) se
     oscurecieron respecto al original (#1a9e4a/#a9720a/#8a8a8a) — el
     original no llegaba a 4.5:1 de contraste (mínimo WCAG AA para texto
     pequeño) contra su propio fondo de badge ni contra el fondo de
     tarjeta donde también se usan como texto (precio, nota de stock).
     Ver commit que introduce este comentario para las cifras exactas. */
  --available: #15803c;
  --available-bg: #e7f7ee;
  --invitation: #966509;
  --invitation-bg: #fdf3e0;
  --unavailable: #6d6d6d;
  --unavailable-bg: #f0f0f0;
  --preventa: #7c3aed;
  --preventa-bg: #f1e9fe;
  --live-dot: #1a9e4a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e;
    --fg: #f5f5f5;
    --muted: #a3a3a3;
    --border: #262626;
    --card-bg: #171717;
    --navy: #6ea8d8;
    /* Mismo ajuste de contraste que arriba, pero en la otra dirección
       (más claros, no más oscuros) porque aquí el fondo es oscuro. */
    --available: #1ca94f;
    --available-bg: #10321f;
    --invitation: #bf810b;
    --invitation-bg: #33240a;
    --unavailable: #8a8a8a;
    --unavailable-bg: #232323;
    --preventa: #a171f2;
    --preventa-bg: #2c1a4d;
  }
}
:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --fg: #f5f5f5;
  --muted: #a3a3a3;
  --border: #262626;
  --card-bg: #171717;
  --navy: #6ea8d8;
  --available: #1ca94f;
  --available-bg: #10321f;
  --invitation: #bf810b;
  --invitation-bg: #33240a;
  --unavailable: #8a8a8a;
  --unavailable-bg: #232323;
  --preventa: #a171f2;
  --preventa-bg: #2c1a4d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--navy) 7%, var(--bg));
  transition: transform 0.25s ease;
}
header.header-hidden { transform: translateY(-100%); }

.topbar-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 14px clamp(20px, 3vw, 60px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  padding-bottom: 14px;
}
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border);
  flex: none;
}
.brand-text { line-height: 1.2; }
.brand-name {
  font-family: 'Luckiest Guy', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: var(--navy);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
  margin: 0;
}
.brand-name .accent { color: var(--accent); -webkit-text-stroke: 0.6px var(--navy); }
.brand-tag { color: var(--muted); font-weight: 700; font-size: 0.72rem; }

.topnav {
  display: flex;
  align-self: flex-end;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  /* "visible" aquí se recomputa como "auto" por spec (overflow-x no es
     "visible"), así que un desajuste de subpíxel se vuelve arrastrable en
     móvil. "hidden" sí se respeta tal cual. */
  overflow-y: hidden;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 9px 18px;
  border-radius: 10px 10px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
}
.topnav-link:hover { color: var(--fg); }
.topnav-link.active {
  color: var(--navy);
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--navy) 18%, transparent);
  border-bottom: 1px solid var(--bg);
}
.nav-icon { flex: none; }

/* Desplegable "TCG" del topnav: agrupa los juegos + Accesorios, ya que
   esa lista va a crecer (más TCG en camino) y un enlace plano por
   juego no escala. El resto del topnav (Ofertas/Noticias/Calendario)
   se queda suelto, son pocos y no hace falta esconderlos.
   Al abrirlo, las opciones cuelgan hacia abajo pegadas al botón, como
   una continuación suya — mismo truco visual que .topnav-link.active
   (borde color navy, fondo var(--bg) en vez de var(--card-bg)) — en vez
   de una tarjeta flotante con sombra separada. fixed (no absolute)
   porque .topnav tiene overflow-y:hidden (a propósito, bug de arrastre
   en móvil) que si no recortaría el menú; top/left los calcula
   header-scroll.js a partir de la posición real del botón al abrirlo. */
.topnav-dropdown { position: relative; display: inline-flex; }
.topnav-dropdown-trigger {
  font-family: inherit;
  background: none;
  appearance: none;
  margin: 0;
  cursor: pointer;
}
.dropdown-caret { transition: transform 0.15s ease; }
.topnav-dropdown-trigger[aria-expanded="true"] .dropdown-caret { transform: rotate(180deg); }
.topnav-dropdown-trigger[aria-expanded="true"] { border-bottom-color: var(--bg); }
.topnav-dropdown-menu {
  position: fixed;
  z-index: 60;
  min-width: 190px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--navy) 18%, transparent);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 6px;
  flex-direction: column;
  gap: 2px;
}
.topnav-dropdown-menu:not([hidden]) { display: flex; }
.topnav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  white-space: nowrap;
}
.topnav-dropdown-item:hover { background: color-mix(in srgb, var(--navy) 10%, transparent); }
.topnav-dropdown-item.active { color: var(--navy); background: color-mix(in srgb, var(--navy) 12%, transparent); font-weight: 800; }

.status-bar {
  border-top: 1px solid var(--border);
  padding: 8px clamp(20px, 3vw, 60px);
}
.status-bar-inner {
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.social-links { display: flex; align-items: center; gap: 14px; }
.social-link { color: var(--muted); display: flex; }
.social-link:hover { color: var(--navy); }
.social-link svg { width: 18px; height: 18px; }

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-dot);
  box-shadow: 0 0 0 0 rgba(26,158,74,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(26,158,74,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(26,158,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,158,74,0); }
}

.layout {
  width: 100%;
  max-width: 2300px;
  margin: 0 auto;
  padding: 24px clamp(20px, 3vw, 60px) 60px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.filters-col {
  flex: 0 0 260px;
  position: sticky;
  top: 75px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: flex-start;
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: color-mix(in srgb, var(--navy) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--navy) 18%, transparent);
  border-radius: 16px;
  padding: 20px;
}
.content { flex: 1; min-width: 0; }

.sidebar-section { display: flex; flex-direction: column; gap: 10px; }
.sidebar-section:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 20%, transparent);
}
.sidebar-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.search-box { position: relative; }
.search-box input,
.sidebar select {
  width: 100%;
  padding: 13px 16px 13px 40px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
}
.sidebar select { padding-left: 14px; cursor: pointer; }
.search-box input:focus, .sidebar select:focus { outline: 2px solid var(--navy); outline-offset: -1px; }
.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.sidebar input[type="range"] {
  width: 100%;
  accent-color: var(--navy);
}
.range-value { font-size: 0.82rem; font-weight: 700; color: var(--muted); }

.range-value-row { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.range-value-row input[type="number"] {
  width: 72px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
}
.range-value-row input[type="number"]:focus { outline: 2px solid var(--navy); outline-offset: -1px; }

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
  cursor: pointer;
}
.filter-option input { width: 16px; height: 16px; accent-color: var(--navy); cursor: pointer; flex: none; }

.category-intro { max-width: 900px; margin: 0 0 14px; }
.intro-logo { display: block; height: 64px; width: auto; margin-bottom: 12px; }
/* A propósito, discreto: el h1/intro existen por SEO (título real de la
   página, texto descriptivo para buscadores), no como titular visual — se
   reduce el tamaño para que no compita con la marca del header ni con la
   barra de herramientas de debajo. */
.category-intro h1 { font-size: 1rem; font-weight: 700; margin: 0 0 3px; color: var(--fg); }
.category-intro p { color: var(--muted); margin: 0; line-height: 1.4; font-size: 0.8rem; }

.category-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0; }
.category-links-label { font-size: 0.85rem; color: var(--muted); margin-right: 2px; }
.category-links a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--navy) 25%, transparent);
  background: color-mix(in srgb, var(--navy) 6%, var(--bg));
}
.category-links a:hover { background: color-mix(in srgb, var(--navy) 14%, var(--bg)); }
.category-links a.current { background: var(--navy); color: var(--bg); border-color: var(--navy); }

.toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.toolbar-left { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.toolbar-left .search-box { width: 100%; max-width: 260px; flex: none; }
.count-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.count { color: var(--muted); font-weight: 700; font-size: 0.85rem; flex: none; }

.active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--navy) 35%, transparent);
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
}
.filter-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.filter-chip button:hover { background: color-mix(in srgb, var(--navy) 25%, transparent); }

.filter-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--fg);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}
.filter-toggle-btn:hover { border-color: var(--navy); color: var(--navy); }

.layout.sidebar-hidden .sidebar { display: none; }
html[data-sidebar="hidden"] .layout .sidebar { display: none; }
/* Keep content below the catalogue outside the first viewport while it loads. */
.layout .content { min-height: 100vh; }
.layout #grid:empty:not([hidden]) { min-height: 70vh; }
.layout #grid[hidden] { display: none; }
.layout #count { min-width: 85px; min-height: 1.5em; }
.layout .count-group { min-height: 40px; }
.observation-note { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

/* Control segmentado tipo iOS/macOS: una sola "pastilla" con fondo
   discreto (el "carril") y el botón activo flotando dentro en
   card-bg + sombra suave, en vez de 3 cajas sueltas con borde — más
   coherente con el resto de píldoras del sitio (category-links,
   badges) que 3 recuadros independientes. */
.view-toggle {
  display: flex;
  gap: 2px;
  flex: none;
  background: var(--border);
  padding: 3px;
  border-radius: 11px;
}
.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.view-btn:hover { background: color-mix(in srgb, var(--card-bg) 55%, transparent); }
.view-btn[aria-pressed="true"] {
  background: var(--card-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.view-icon { display: flex; align-items: center; gap: 2px; height: 16px; }
.view-icon span { display: block; width: 3px; height: 100%; background: var(--muted); border-radius: 1px; transition: background 0.15s ease; }
.view-btn[aria-pressed="true"] .view-icon span { background: var(--navy); }
.view-icon.list-icon { flex-direction: column; justify-content: space-between; width: 16px; height: 13px; gap: 0; }
.view-icon.list-icon span { width: 100%; height: 2px; }

.grid {
  display: grid;
  gap: 16px;
}
.grid.view-3 { grid-template-columns: repeat(3, 1fr); }
.grid.view-5 { grid-template-columns: repeat(5, 1fr); }
.grid.view-list { grid-template-columns: 1fr; }

.grid.view-list .card { flex-direction: row; }
.grid.view-list .card-img { width: 160px; flex: none; }
.grid.view-list .card-body { justify-content: center; }
.grid.view-list .card-name { -webkit-line-clamp: 2; }

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .filters-col { position: static; flex: none; width: 100%; }
  .grid.view-3, .grid.view-5 { grid-template-columns: repeat(2, 1fr); }
  .view-toggle { display: none; }
}
@media (max-width: 520px) {
  .grid.view-3, .grid.view-5 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid.view-list .card { flex-direction: column; }
  .grid.view-list .card-img { width: 100%; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  border-color: color-mix(in srgb, var(--navy) 35%, var(--border));
}
.card-img {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
}
.card-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 14px;
  box-sizing: border-box;
  object-fit: contain;
}

.card-corner {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.corner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.corner-icon img { height: 100%; width: auto; max-width: 64px; object-fit: contain; }
.card-corner .badge { box-shadow: 0 1px 4px rgba(0,0,0,0.2); }

.card-corner-right {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}
.badge.discount { background: #dc2626; color: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.card-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: flex-end; }
.card-name {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.card-name:hover { text-decoration: underline; }
.badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.status.available { background: var(--available-bg); color: var(--available); }
.badge.status.invitation { background: var(--invitation-bg); color: var(--invitation); }
.badge.status.unavailable { background: var(--unavailable-bg); color: var(--unavailable); }
.badge.status.preventa { background: var(--preventa-bg); color: var(--preventa); }

.price-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; }

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }
.set-link { float: right; color: var(--game-color, var(--navy)); }
@media (max-width: 520px) { .set-link { float: none; display: block; margin-top: -8px; } }

.product-detail { display: flex; gap: 32px; max-width: 900px; }
.product-detail-img {
  flex: none;
  width: 320px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.product-detail-img img { width: 100%; height: 100%; object-fit: contain; padding: 20px; box-sizing: border-box; }
.product-detail-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.product-detail-store { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.product-detail-store img { height: 20px; width: auto; }
.product-detail-body h1 { font-size: 1.4rem; margin: 0; line-height: 1.3; }
.product-detail-body .price-row { justify-content: flex-start; }
.product-detail-body .buy-btn { display: inline-block; padding: 10px 28px; margin-top: 8px; border-radius: 10px; }
@media (max-width: 700px) {
  .product-detail { flex-direction: column; }
  .product-detail-img { width: 100%; }
}
.price { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--available); }
.price-original { color: var(--muted); text-decoration: line-through; font-size: 0.82rem; font-weight: 700; }
.stock-note { font-size: 0.72rem; font-weight: 800; color: var(--invitation); }
.restock-note { font-size: 0.78rem; font-weight: 700; color: var(--navy); }

.buy-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--navy);
  color: var(--bg);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 10px;
  border-radius: 10px;
  margin-top: 4px;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.buy-btn:hover {
  background: color-mix(in srgb, var(--navy) 82%, black);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}
.buy-btn.disabled {
  background: var(--unavailable-bg);
  color: var(--muted);
  pointer-events: none;
}

.empty {
  text-align: center;
  color: var(--muted);
  font-weight: 700;
  padding: 60px 20px;
}

.faq-section { margin-bottom: 8px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--card-bg);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+ "; color: var(--navy); font-weight: 800; }
.faq-item[open] summary::before { content: "− "; }
.faq-item p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.faq-item p a { color: var(--navy); }

.news-list { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.news-empty { color: var(--muted); font-size: 0.92rem; }
/* Variante en rejilla de 2 columnas, solo para las tarjetas-teaser de la
   home (news-card) — la propia página de noticias reutiliza .news-list
   para los artículos completos (news-article) y necesita ancho completo,
   así que esta variante no toca la regla base de arriba. */
.news-list.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: none; }
.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--fg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  border-color: color-mix(in srgb, var(--navy) 35%, var(--border));
}
.news-card-img { width: 100%; height: 180px; object-fit: cover; background: #fff; }
.news-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.news-date {
  font-size: 0.76rem;
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.news-card h2, .news-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.news-card p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.news-card-cta {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.18s ease;
}
.news-card:hover .news-card-cta { gap: 8px; }
@media (max-width: 520px) {
  .news-list.news-grid { grid-template-columns: 1fr; }
}

.news-article {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  background: var(--card-bg);
}
.news-article h1, .news-article h2 { margin: 4px 0 16px; font-size: 1.3rem; line-height: 1.3; }
.news-article p { color: var(--fg); font-size: 0.95rem; line-height: 1.6; margin: 0 0 14px; }
.news-article p a { color: var(--navy); }
.news-article-img { width: 100%; height: auto; border-radius: 10px; margin: 4px 0 16px; display: block; }
.news-article-list { margin: 0 0 16px; padding-left: 20px; color: var(--fg); font-size: 0.95rem; line-height: 1.7; }
.news-source { color: var(--muted); font-size: 0.82rem; margin: 0; }
.news-source a { color: var(--navy); }

.release-list { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: 24px; }
.release-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-left-color: var(--game-color, var(--border));
  border-radius: 12px;
  padding: 16px 20px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--fg);
}
a.release-item:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--border)); border-left-color: var(--game-color, var(--navy)); }
.release-item.release-pending { opacity: 0.7; }
.release-date { flex: none; width: 160px; font-weight: 700; color: var(--navy); font-size: 0.9rem; }
.release-game { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.release-game-icon { width: 13px; height: 13px; flex: none; color: var(--game-color, var(--muted)); }
.release-divider { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border); }
.release-divider:first-child { padding-top: 0; margin-top: 0; border-top: none; }
.release-stock { display: inline-block; margin-top: 8px; font-size: 0.78rem; font-weight: 600; color: var(--game-color, var(--muted)); }
.release-body h2 { margin: 4px 0 6px; font-size: 1.05rem; }
.release-body p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 520px) {
  .release-item { flex-direction: column; gap: 6px; }
  .release-date { width: auto; }
}

.article { max-width: 760px; margin: 0 auto; padding: 32px clamp(20px, 3vw, 60px) 60px; }
.article-date { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.article h1 { margin: 8px 0 20px; font-size: 1.7rem; }
.article p { color: var(--fg); line-height: 1.65; margin: 0 0 16px; }
.article a { color: var(--navy); }
.article-back { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--navy); text-decoration: none; }
.article-back:hover { text-decoration: underline; }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 30px 20px;
}
footer a { color: inherit; }
footer a:hover { color: var(--navy); }
.footer-social { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; }
.footer-social .social-link svg { width: 20px; height: 20px; }

.hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 96px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero-logo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero h1 .accent { color: var(--accent); -webkit-text-stroke: 0.6px var(--navy); }
.hero p {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.95rem;
}
.hero-btn.primary { background: var(--fg); color: var(--bg); }
.hero-btn.secondary {
  background: color-mix(in srgb, var(--navy) 12%, transparent);
  color: var(--navy);
  border: 1.5px solid color-mix(in srgb, var(--navy) 35%, transparent);
}

.home-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px clamp(20px, 3vw, 60px) 60px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 300px;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  text-decoration: none;
  color: var(--fg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  border-color: color-mix(in srgb, var(--navy) 35%, var(--border));
}
.category-img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 4px;
  background: var(--card-bg);
  transition: transform 0.18s ease;
}
.category-card:hover .category-img { transform: scale(1.04); }
.category-card h2 { margin: 0; font-size: 1.1rem; font-weight: 800; transition: color 0.18s ease; }
.category-card:hover h2 { color: var(--navy); }
.category-card p { margin: 0; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.category-card.disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.category-placeholder-icon {
  color: var(--muted);
  margin: 12px 0 4px;
}
.category-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  background: var(--unavailable-bg);
  padding: 2px 8px;
  border-radius: 999px;
}

.area-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 40px; }
.area-entry { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); color: var(--fg); text-decoration: none; }
.area-entry:hover { border-color: var(--navy); }
.area-entry-icon { color: var(--navy); width: 44px; height: 44px; }
.area-entry h2 { margin: 0; font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 650; letter-spacing: -.035em; }
.area-entry p { margin: 0; color: var(--muted); line-height: 1.65; font-size: .88rem; max-width: 48ch; }
.area-entry .area-entry-link { margin-top: auto; padding-top: 8px; font-size: .85rem; font-weight: 650; color: var(--navy); }
.area-selector { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.area-selector button { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; padding: 12px 18px; min-height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--muted); }
.area-selector button[aria-pressed="true"] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.area-back { display: inline-block; color: var(--muted); font-size: .82rem; margin-bottom: 18px; text-underline-offset: 3px; }
.area-catalog .category-card { min-height: 180px; }
.platform-mark { display: flex; align-items: center; min-height: 68px; font-size: 1.5rem; font-weight: 650; letter-spacing: -.04em; color: var(--navy); }
.area-note { padding: 20px 0; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.area-note a { color: var(--fg); }
@media (max-width: 620px) { .area-entries { grid-template-columns: 1fr; gap: 12px; } .area-entry { gap: 10px; } .area-entry-icon { width: 32px; height: 32px; } .area-catalog .category-card { min-height: 160px; } .area-selector button { padding: 12px; } }

.home-section { margin-bottom: 56px; }
.home-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.home-section-header h2 { margin: 0; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.01em; }
.home-section-header a { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 0.88rem; white-space: nowrap; }
.home-section-header a:hover { text-decoration: underline; }

.activity-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--fg);
}
a.activity-item:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--border)); }
.activity-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
  flex: none;
}
.activity-body { min-width: 0; }
.activity-text { font-size: 0.88rem; line-height: 1.4; }
.activity-meta { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 1100px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .category-grid { grid-template-columns: 1fr; }
}



.card-game { display: block; font-size: .75rem; opacity: .8; margin-bottom: 5px; }

/* Diseño común: superficies neutras, jerarquía tipográfica y color medido. */
:root { --bg: #f8f9fb; --fg: #18202b; --muted: #606a78; --border: #e1e5eb; --navy: #244f78; --card-bg: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #101419; --fg: #edf0f5; --muted: #a5afbd; --border: #303945; --navy: #a7c7e8; --card-bg: #191f27; }
}
:root[data-theme="dark"] { --bg: #101419; --fg: #edf0f5; --muted: #a5afbd; --border: #303945; --navy: #a7c7e8; --card-bg: #191f27; }
html { scroll-padding-top: 130px; }
body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
header { background: var(--card-bg); }
.topbar-inner { max-width: 1440px; padding: 18px 32px; flex-wrap: nowrap; gap: 24px; }
.brand { padding-bottom: 0; gap: 12px; }
.brand-logo { width: 38px; height: 38px; border: none; }
.brand-name { font-family: inherit; font-weight: 750; font-size: 1.12rem; letter-spacing: -.045em; color: var(--fg); text-shadow: none; }
.brand-name .accent { color: inherit; -webkit-text-stroke: 0; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.brand-tag { font-size: .68rem; font-weight: 400; margin-top: 6px; }
.live .dot { width: 5px; height: 5px; animation: none; }
.topnav { align-self: center; gap: 4px; }
.topnav-link { font-weight: 500; font-size: .82rem; padding: 11px 13px; border: 0; border-radius: 8px; margin: 0; }
.topnav-link.active { border: 0; color: var(--fg); background: var(--bg); }
.topnav-dropdown-menu { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 12px 32px #00000014; }
.topnav-dropdown-item { font-size: .85rem; font-weight: 500; padding: 11px 12px; }
.topnav-dropdown-item.active { font-weight: 600; }
.layout, .home-content { max-width: 1440px; padding: 36px 32px 72px; }
.layout { gap: 32px; }
.content { width: 100%; }
.filters-col { flex-basis: 220px; top: 108px; gap: 12px; }
.sidebar { background: transparent; border: 0; border-radius: 0; padding: 8px 0; gap: 20px; }
.sidebar-section:not(:last-child) { padding-bottom: 20px; border-color: var(--border); }
.sidebar-label { font-size: .68rem; letter-spacing: .09em; font-weight: 600; }
.filter-option { font-weight: 400; font-size: .82rem; padding: 5px 0; }
.filter-toggle-btn { border: 1px solid var(--border); border-radius: 8px; min-height: 42px; font-weight: 500; }
.search-box input, .sidebar select { border-width: 1px; border-radius: 8px; font-weight: 400; font-size: .85rem; }
.category-intro { margin-bottom: 28px; max-width: 760px; }
.category-intro h1 { font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 650; letter-spacing: -.04em; margin-bottom: 10px; line-height: 1.2; }
.category-intro p { font-size: .84rem; line-height: 1.7; }
.category-links a { border-color: var(--border); background: transparent; border-radius: 6px; font-weight: 500; padding: 7px 11px; }
.category-links a.current { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.toolbar { align-items: flex-start; margin-bottom: 22px; }
.toolbar-left .search-box { max-width: 420px; }
.count { font-size: .76rem; font-weight: 400; }
.view-toggle { background: transparent; border: 1px solid var(--border); border-radius: 8px; }
.view-btn { width: 34px; height: 32px; border-radius: 5px; }
.view-btn[aria-pressed="true"] { background: var(--card-bg); box-shadow: 0 1px 3px #00000012; }
.grid { gap: 18px; }
.card { border-radius: 12px; box-shadow: none; }
.card:hover { transform: translateY(-2px); box-shadow: 0 5px 18px #00000008; border-color: color-mix(in srgb, var(--fg) 24%, var(--border)); }
.card-img > img { padding: 22px; }
.card-body { padding: 16px; gap: 9px; justify-content: flex-start; }
.card-name { font-weight: 500; font-size: .84rem; line-height: 1.55; flex: 1; }
.card-game { color: var(--muted); opacity: 1; font-size: .65rem; letter-spacing: .035em; margin: 0; }
.corner-icon { border-radius: 5px; box-shadow: none; border: 1px solid #e5e7eb; height: 21px; padding: 3px 5px; }
.card-corner { top: 9px; left: 9px; gap: 4px; }
.card-corner-right { top: 9px; right: 9px; }
.badge { font-size: .65rem; font-weight: 600; padding: 4px 7px; border-radius: 5px; }
.badge.discount { background: #fff1f2; color: #a31536; box-shadow: none; }
.card-corner .badge { box-shadow: none; }
.price-row { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.price { color: var(--fg); font-weight: 650; font-size: 1.1rem; }
.price-original { font-size: .74rem; font-weight: 400; }
.stock-note { font-weight: 500; }
.buy-btn { background: var(--fg); color: var(--bg); border-radius: 7px; font-weight: 550; font-size: .78rem; padding: 11px 8px; min-height: 40px; }
.buy-btn:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); transform: none; box-shadow: none; }
.welcome { padding: 32px 0 36px; max-width: 800px; }
.eyebrow { color: var(--muted); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; font-weight: 600; }
.welcome h1 { font-size: clamp(2.2rem, 4.2vw, 3.75rem); letter-spacing: -.055em; line-height: 1.08; font-weight: 650; margin: 0 0 20px; max-width: 700px; }
.welcome > p:last-child { color: var(--muted); font-size: .95rem; line-height: 1.7; margin: 0; }
.category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-bottom: 40px; margin-bottom: 44px; }
.category-card { min-height: 176px; padding: 20px 14px; gap: 14px; align-items: center; justify-content: center; border-width: 1px; border-radius: 10px; box-shadow: none; text-align: center; }
.category-card:hover { transform: translateY(-2px); box-shadow: none; }
.category-img { height: 92px; max-width: 200px; border-radius: 6px; margin: 0; background: #fff; padding: 6px; }
.category-card h2 { font-size: .74rem; font-weight: 550; letter-spacing: -.015em; }
.category-card p { display: none; }
.category-placeholder-icon { margin: 0; }
.home-section { margin-bottom: 56px; }
.home-section-header { margin-bottom: 22px; gap: 16px; }
.home-section-header h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.035em; }
.home-section-header a { font-size: .78rem; font-weight: 500; }
.activity-list { max-width: none; gap: 0; }
.activity-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 0; background: transparent; }
.activity-text { font-size: .85rem; }
.activity-text strong { font-weight: 550; }
.news-card { border-radius: 12px; box-shadow: none; }
.news-card:hover { transform: translateY(-2px); box-shadow: none; }
.news-card-body { padding: 22px; gap: 10px; }
.news-card h2, .news-card h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.45; }
.news-card p { font-size: .84rem; }
.news-date, .news-card-cta { font-size: .73rem; font-weight: 500; }
.faq-list, .news-list, .release-list { max-width: 900px; }
.faq-item { border-radius: 0; border: 0; border-bottom: 1px solid var(--border); padding: 20px 0; background: transparent; }
.faq-item summary { font-size: .88rem; font-weight: 500; }
.faq-item p { max-width: 740px; line-height: 1.7; }
.news-article { padding: 32px; border-radius: 12px; }
.release-item { padding: 24px; border-radius: 10px; }
.release-game { font-weight: 500; }
.release-body h2 { font-weight: 600; }
.article { max-width: 820px; padding-top: 48px; }
.article h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.045em; line-height: 1.2; }
.product-detail { max-width: 1100px; gap: 48px; align-items: center; }
.product-detail-img { width: min(42vw, 420px); border-radius: 12px; }
.product-detail-body { gap: 18px; min-width: 0; }
.product-detail-body h1 { font-size: clamp(1.35rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -.035em; }
.product-detail-store { flex-wrap: wrap; font-size: .78rem; font-weight: 400; }
.product-detail-body .price { font-size: 1.7rem; }
.product-detail-body .buy-btn { padding: 14px 32px; border-radius: 8px; }
.back-link { font-size: .78rem; font-weight: 400; margin-bottom: 28px; }
footer { border-top: 1px solid var(--border); font-weight: 400; padding: 36px 24px; font-size: .73rem; }
@media (min-width: 861px) and (max-width: 1180px) {
  .grid.view-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .topbar-inner { padding: 16px 20px 10px; flex-wrap: wrap; gap: 14px; }
  .topnav { width: 100%; gap: 2px; }
  .topnav-link { padding: 11px 12px; font-size: .78rem; }
  .layout, .home-content { padding: 24px 20px 48px; }
  .layout { gap: 22px; }
  .filters-col { flex-basis: auto; }
  .sidebar { padding: 18px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; }
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-card { min-height: 138px; }
  .welcome { padding: 14px 0 28px; }
  .welcome h1 { max-width: 540px; }
  .product-detail { gap: 24px; }
}
@media (max-width: 700px) {
  .product-detail-img { width: 100%; max-width: 420px; align-self: center; }
}
@media (max-width: 520px) {
  .brand-name { font-size: 1.05rem; }
  .brand-tag { font-size: .64rem; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 28px; margin-bottom: 32px; }
  .category-card { min-height: 136px; padding: 16px 12px; }
  .category-img { height: 68px; }
  .home-section-header { align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .home-section-header h2 { font-size: 1.2rem; }
  .card-body { padding: 12px; gap: 8px; }
  .card-name, .grid.view-list .card-name { display: block; overflow: visible; -webkit-line-clamp: unset; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
  .card-img > img { padding: 14px; }
  .price { font-size: 1rem; }
  .card-corner { top: 6px; left: 6px; max-width: calc(100% - 45px); }
  .corner-icon { padding: 2px 3px; height: 18px; min-width: 18px; }
  .badge { font-size: .6rem; padding: 3px 5px; }
  .news-article, .release-item { padding: 20px; }
  .article { padding: 28px 20px 48px; }
  .home-section { margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.card-save-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -7px -7px -4px 0; }
.favorite-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.favorite-button:hover { background: var(--bg); color: var(--fg); }
.favorite-button[aria-pressed="true"] { color: #b72f52; }
.favorite-button[aria-pressed="true"] svg { fill: currentColor; }
.detail-actions { display: flex; align-items: center; gap: 12px; }
.detail-actions .favorite-button { border-color: var(--border); }
.product-detail-body .detail-actions .buy-btn { margin-top: 0; }
.product-context { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.product-context a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.product-static-image > img { width: 100%; height: 100%; object-fit: contain; padding: 22px; box-sizing: border-box; }
.product-history, .related-products { max-width: 1100px; margin-top: 48px; }
.product-history h2, .related-products h2 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; }
.product-history ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--border); }
.product-history li { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.product-history time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.related-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.related-product-card { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding: 12px; color: var(--fg); border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.related-product-card:hover { border-color: var(--fg); transform: translateY(-2px); }
.related-product-card img, .related-product-placeholder { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 7px; background: #fff; }
.related-product-placeholder { display: grid; place-items: center; color: #687383; font-size: .72rem; }
.related-product-name { display: -webkit-box; overflow: hidden; min-height: 2.7em; font-size: .78rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.related-product-price { color: var(--available); font-size: .84rem; font-weight: 700; }
@media (max-width: 760px) { .related-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .related-products-grid { grid-template-columns: 1fr; } }
#favorite-notice { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: min(90vw, 440px); background: var(--fg); color: var(--bg); padding: 14px 20px; border-radius: 10px; font-size: .82rem; box-shadow: 0 4px 18px #0002; }
.favorites-empty { padding: 64px 20px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.favorites-empty h2 { font-size: 1.25rem; font-weight: 600; }
.favorites-empty p { color: var(--muted); font-size: .9rem; margin-bottom: 24px; }
.favorites-content .search-box { width: min(100%, 400px); }
.favorites-content .search-box input { padding-left: 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .favorite-button[aria-pressed="true"] { color: #f397ae; } }
:root[data-theme="dark"] .favorite-button[aria-pressed="true"] { color: #f397ae; }

.product-detail-img { position: relative; }
.product-image-frame { position: absolute; inset: 0; display: block; background: #fff; }
.product-image-frame .product-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 22px; opacity: 0; transition: opacity .2s ease; }
.product-image-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #687383; background: #f5f6f8; padding: 16px; opacity: 1; transition: opacity .2s ease; }
.product-image-placeholder span { font-size: .68rem; text-align: center; line-height: 1.5; }
.product-image-frame[data-image-state="ready"] .product-image { opacity: 1; }
.product-image-frame[data-image-state="ready"] .product-image-placeholder { opacity: 0; visibility: hidden; }
.product-image-frame .product-image[hidden] { display: none; }
@media (max-width: 520px) { .product-image-frame .product-image { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .product-image-frame .product-image, .product-image-placeholder { transition: none; } }

/* Approved identity: Manrope uppercase, monochrome name and question-card symbol with a Poké Ball illustration. */
@font-face {
  font-family: "WTS Manrope";
  src: url("/assets/brand/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
.brand-name { font-family: "WTS Manrope", Inter, sans-serif; font-size: 1.18rem; font-weight: 500; letter-spacing: .005em; text-transform: uppercase; line-height: 1.2; }
.brand-name .accent { font-weight: 800; color: inherit; text-decoration: none; -webkit-text-stroke: 0; }
.brand-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; padding: 0; background: #fff; }
@media (max-width: 520px) {
  .brand { gap: 9px; }
  .brand-name { font-size: clamp(.85rem, 3.7vw, 1.1rem); }
  .brand-logo { width: 42px; height: 42px; }
}

.utility-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, var(--bg)); color: var(--fg); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: none; }
.utility-button:hover { border-color: var(--muted); }
.utility-button:disabled { opacity: .5; cursor: default; }
[aria-invalid="true"] { outline: 2px solid #b72f52; }
.detail-actions { flex-wrap: wrap; }

#share-link { width: 100%; padding: 10px; margin-top: 6px; }
.share-status { font-size: .8rem; color: var(--muted); }

.favorite-transfer { margin: 20px 0 28px; }
.favorite-transfer p { font-size: .8rem; color: var(--muted); margin: 10px 0; }
#import-preview { padding: 16px; border: 1px solid var(--border); border-radius: 10px; }

/* Product groups: one canonical product with offers from several stores. */
.group-kicker { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.group-product-detail { align-items: center; }
.group-product-detail, .group-product-detail .product-detail-body { width: 100%; min-width: 0; }
.group-product-detail h1, .group-offer-product a { overflow-wrap: anywhere; }
.group-availability-summary { margin: -4px 0 0; color: var(--muted); font-size: .9rem; }
.group-best-price { display: flex; flex-direction: column; gap: 2px; }
.group-best-price span { color: var(--muted); font-size: .75rem; }
.group-best-price strong { color: var(--available); font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.035em; }
.group-store-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.group-store-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 82px; height: 44px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
.group-store-logo > img:not(.group-store-flag) { width: 100%; height: 100%; object-fit: contain; }
.group-store-logo.is-unavailable > img:not(.group-store-flag), .group-store-logo.is-unavailable .group-store-fallback { filter: grayscale(1); opacity: .34; }
.group-store-logo.is-compact { width: 48px; height: 30px; padding: 5px 7px; border-radius: 7px; }
.group-store-flag { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 12px; border: 1px solid #fff; border-radius: 2px; object-fit: cover; }
.group-store-fallback { overflow: hidden; color: #3f4855; font-size: .64rem; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.group-offers { max-width: 1100px; margin-top: 54px; scroll-margin-top: 28px; }
.group-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.group-section-heading h2 { margin: 3px 0 0; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.03em; }
.group-section-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.group-offer-row { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(230px, 1.5fr) minmax(120px, .55fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--border); }
.group-offer-row:last-child { border-bottom: 1px solid var(--border); }
.group-offer-row.is-unavailable { background: color-mix(in srgb, var(--muted) 4%, transparent); }
.group-offer-store { display: flex; align-items: center; gap: 12px; min-width: 0; }
.group-offer-store > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; }
.group-offer-store strong { overflow: hidden; max-width: 100%; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.group-offer-product { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.group-offer-product a { display: -webkit-box; overflow: hidden; color: var(--fg); font-size: .82rem; font-weight: 600; line-height: 1.4; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.group-offer-product a:hover { text-decoration: underline; text-underline-offset: 3px; }
.group-offer-product span, .group-offer-price span { color: var(--muted); font-size: .75rem; }
.group-offer-price { display: flex; flex-direction: column; gap: 2px; }
.group-offer-price .observation-note { font-size: .75rem; line-height: 1.5; }
.group-offer-price strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.group-offer-row.is-unavailable .group-offer-price strong { color: var(--muted); }
.group-offer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.group-offer-actions .buy-btn, .group-offer-actions .utility-button { min-height: 40px; margin: 0; padding: 9px 14px; font-size: .75rem; white-space: nowrap; }
.group-disclaimer { max-width: 800px; margin-top: 36px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); }
.group-disclaimer h2 { margin: 0 0 6px; font-size: .95rem; }
.group-disclaimer p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.product-group-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; max-width: 1100px; margin-top: 40px; padding: 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.product-group-callout h2 { margin: 2px 0 4px; font-size: 1.15rem; }
.product-group-callout p { margin: 0; color: var(--muted); font-size: .8rem; }
.product-group-callout > .buy-btn { margin: 0; white-space: nowrap; }
.product-group-chips { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }
.group-offer-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 9px; color: var(--fg); background: var(--bg); font-size: .72rem; text-decoration: none; }
.group-offer-chip:hover { border-color: var(--fg); }
.group-offer-chip.is-current { color: var(--muted); }
@media (max-width: 900px) {
  .group-offer-row { grid-template-columns: minmax(150px, .8fr) minmax(200px, 1.4fr) minmax(100px, .5fr); }
  .group-offer-actions { grid-column: 1 / -1; justify-content: flex-start; padding-left: 94px; }
}
@media (max-width: 650px) {
  #product-detail:has(.group-product-detail),
  .group-product-detail,
  .group-product-detail .product-detail-img,
  .group-product-detail .product-detail-body,
  .group-offers,
  .group-disclaimer { width: 100%; max-width: calc(100vw - 40px); min-width: 0; }
  .group-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .group-offer-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-width: 0; padding: 16px 0; overflow: hidden; }
  .group-offer-store { grid-column: 1 / -1; }
  .group-offer-store > div { min-width: 0; }
  .group-offer-store .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .group-offer-product { grid-column: 1 / -1; grid-row: 2; }
  .group-offer-product a { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .group-offer-price { align-items: flex-start; grid-column: 1 / -1; grid-row: 3; max-width: none; text-align: left; }
  .group-offer-price strong { font-size: 1.25rem; }
  .group-offer-actions { grid-column: 1 / -1; grid-row: 4; padding-left: 0; flex-wrap: wrap; }
  .product-group-callout { grid-template-columns: 1fr; }
  .product-group-callout > .buy-btn, .product-group-chips { grid-column: 1; }
  .product-group-chips { flex-direction: column; }
  .group-offer-chip { width: 100%; }
}

/* Readable controls and local network feedback, shared by every page. */
.load-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.load-notice[hidden], .load-notice button[hidden] { display: none; }
.load-notice p { margin: 0; flex: 1 1 220px; }
.load-notice [aria-disabled="true"] { cursor: wait; }
.field-error { margin: 0; color: var(--fg); font-size: .8rem; line-height: 1.5; }
.search-box input, .sidebar select, .range-value-row input[type="number"] { border-color: var(--muted); }
.range-value-row input[type="number"] { min-height: 44px; width: 96px; }
.sidebar input[type="range"] { min-height: 28px; }
.filter-option { min-height: 36px; }
.filter-chip button { width: 32px; height: 32px; flex: none; }
.social-link { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.view-btn { width: 44px; height: 44px; }
.utility-button, .buy-btn, .group-offer-actions .buy-btn, .group-offer-actions .utility-button { min-height: 44px; }
.release-item.release-pending { opacity: 1; }
.group-store-logo.is-unavailable .group-store-fallback { opacity: 1; }
/* October catalogue: a quieter shell, useful density and one comparison language. */
:root { --surface-soft: color-mix(in srgb, var(--navy) 4%, var(--card-bg)); --radius-panel: 18px; }
body { font-family: 'WTS Manrope', Inter, system-ui, sans-serif; }
header { border-bottom: 1px solid var(--border); box-shadow: 0 4px 22px #00000005; }
.topbar-inner { display: grid; grid-template-columns: auto minmax(280px, 1fr); padding: 16px 32px 12px; gap: 14px 36px; }
.topnav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin: 0; gap: 8px; }
.global-search { grid-column: 2; grid-row: 1; display: flex; align-items: stretch; justify-self: end; width: min(100%, 570px); min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); overflow: hidden; }
.global-search input, .global-search select { min-width: 0; color: var(--fg); background: transparent; border: 0; font: inherit; font-size: .78rem; min-height: 44px; padding: 10px 12px; }
.global-search input { flex: 1; width: 100%; }
.global-search select { max-width: 155px; border-right: 1px solid var(--border); }
.global-search button { display: grid; place-items: center; width: 48px; flex-shrink: 0; border: 0; background: var(--accent); color: #18202b; cursor: pointer; }
.global-search :focus-visible { outline-offset: -4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.topnav-link { min-height: 44px; display: inline-flex; align-items: center; }
.topnav-link.active { background: var(--surface-soft); box-shadow: inset 0 -2px var(--navy); }
.layout, .home-content { padding-top: 32px; }
.welcome { padding: 8px 0 26px; max-width: 940px; }
.welcome h1 { font-size: clamp(1.8rem, 3.5vw, 3rem); max-width: 900px; margin-bottom: 14px; }
.welcome .eyebrow { margin-bottom: 12px; }
.area-entries { gap: 20px; margin-bottom: 32px; }
.area-entry { position: relative; overflow: hidden; padding: 28px; gap: 12px; background: var(--card-bg); border-radius: var(--radius-panel); border-top: 3px solid var(--navy); }
.area-entry:first-child { border-top-color: #d6ac12; }
.area-entry h2 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.area-entry-link { display: inline-flex; align-items: center; min-height: 44px; }
.area-selector, .history-periods { width: fit-content; padding: 4px; gap: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.area-selector button { border: 0; background: transparent; border-radius: 8px; }
.filters-col { top: 156px; }
.sidebar { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); }
.sidebar-section:not(:last-child) { padding-bottom: 16px; }
.sidebar-label { color: var(--fg); letter-spacing: .05em; }
.filter-option { min-height: 34px; }
.toolbar { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); gap: 16px; }
.toolbar-left { min-width: 0; flex: 1; }
.search-box input { min-height: 44px; background: var(--bg); }
.grid { gap: 16px; }
.card { border-radius: 14px; }
.card-img { background: #fff; border-bottom: 1px solid var(--border); }
.card-body { padding: 16px; gap: 10px; }
.card-name { font-size: .9rem; font-weight: 650; line-height: 1.5; }
.price { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.buy-btn { border-radius: 9px; min-height: 44px; font-size: .8rem; font-weight: 700; }
.home-section-header { padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.home-section-header h2 { font-size: 1.35rem; font-weight: 750; }
.category-card { border-radius: 14px; background: var(--card-bg); }
.activity-list { padding: 0 20px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; }
.activity-item:last-child { border-bottom: 0; }
.news-card, .news-article, .release-item { border-radius: 16px; background: var(--card-bg); }
.faq-item { padding: 20px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; background: var(--card-bg); }
.faq-item summary { min-height: 24px; font-weight: 650; }
.product-detail { padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--card-bg); align-items: start; gap: 36px; max-width: 1160px; }
.product-detail-img { flex-shrink: 0; width: min(35vw, 370px); border: 1px solid var(--border); }
.product-detail-body h1 { font-weight: 750; line-height: 1.35; }
.product-detail-body .price { font-size: 2.1rem; }
.group-best-price { padding: 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-soft); }
.group-best-price strong { color: var(--fg); font-weight: 800; }
.group-offers { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--card-bg); max-width: 1160px; margin-top: 28px; }
.group-offer-row { padding: 20px 0; }
.group-offer-price strong { font-size: 1.3rem; font-weight: 800; }
.group-disclaimer, .product-group-callout, .product-history, .related-products { max-width: 1160px; }
.group-section-heading { align-items: start; }
.price-history { max-width: 1160px; margin-top: 28px; padding: 26px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--card-bg); scroll-margin-top: 160px; }
.history-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.history-heading .eyebrow { margin-bottom: 6px; }
.history-heading h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.035em; }
.history-anchor { color: var(--muted); font-size: .78rem; }
.history-controls, .history-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.history-controls { justify-content: space-between; }
.history-periods { display: inline-flex; }
.history-periods button { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); font: inherit; font-size: .8rem; cursor: pointer; }
.history-periods button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.history-currency, .history-controls label { font-size: .8rem; color: var(--muted); }
.history-controls select { font: inherit; padding: 10px; border-radius: 8px; color: var(--fg); background: var(--card-bg); border: 1px solid var(--border); min-height: 44px; }
.history-legend label { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 9px; font-size: .8rem; cursor: pointer; }
.history-dot { background: var(--series-color); width: 9px; height: 9px; border-radius: 50%; }
.history-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); margin-top: 22px; }
.history-summary > div { display: flex; flex-direction: column; gap: 7px; padding: 18px; }
.history-summary span, .history-note { font-size: .76rem; color: var(--muted); line-height: 1.65; }
.history-summary strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.history-summary .history-date { font-size: .9rem; }
.history-chart { display: block; width: 100%; height: auto; margin-top: 20px; overflow: visible; }
.history-chart text { font: 12px system-ui, sans-serif; fill: var(--muted); }
.history-gridline { stroke: var(--border); stroke-dasharray: 4 4; }
.history-table { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.history-table summary { cursor: pointer; min-height: 44px; font-size: .85rem; }
.history-table > div { max-height: 360px; overflow: auto; }
.history-table table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.history-table caption { padding: 10px; color: var(--muted); text-align: left; }
.history-table th, .history-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.history-table th { position: sticky; top: 0; background: var(--card-bg); }
.history-empty { padding: 24px 0; color: var(--muted); line-height: 1.7; }
footer { border-top: 1px solid var(--border); background: var(--card-bg); margin-top: 0; }
@media (max-width: 900px) {
  .topbar-inner { padding: 14px 20px 8px; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .global-search { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; }
  .topnav { grid-row: 3; width: 100%; }
  .filters-col { top: 215px; }
  .history-anchor { display: none; }
}
@media (max-width: 650px) {
  .topbar-inner { padding: 12px 16px 6px; }
  .global-search select { max-width: 116px; font-size: .7rem; padding: 8px; }
  .global-search input { font-size: .78rem; padding: 8px; }
  .layout, .home-content { padding: 24px 16px 48px; }
  .welcome h1 { font-size: 1.85rem; }
  .area-entry { padding: 20px; }
  .area-entries { gap: 12px; }
  .toolbar { padding: 12px; }
  .sidebar { padding: 16px; }
  .card-body { padding: 12px; }
  .product-detail { padding: 16px; gap: 22px; }
  .product-detail-img { width: 100%; max-width: 100%; }
  .product-detail-body { width: 100%; }
  .group-offers, .price-history { padding: 18px 14px; width: 100%; box-sizing: border-box; }
  .group-section-heading { flex-direction: column; gap: 8px; }
  .history-summary { grid-template-columns: 1fr 1fr; }
  .history-summary > div { padding: 12px; }
  .history-summary > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--border); }
  .history-summary strong { font-size: 1.25rem; }
  .history-chart { min-height: 170px; }
  .history-table table { font-size: .68rem; table-layout: fixed; }
  .history-table td, .history-table th { padding: 10px 4px; }
  .activity-list { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }
@media (max-width: 520px) {
  .card .observation-note { font-size: .75rem; }
  .card .buy-btn { margin-top: auto; }
}

.account-content { max-width: 760px; }
.account-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: clamp(24px, 5vw, 42px); box-shadow: 0 12px 36px #0000000d; }
.account-card h1 { margin: 0 0 10px; }
.account-card > p { max-width: 620px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 12px; }
.account-provider { min-height: 46px; border-radius: 9px; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.account-provider.google { background: #fff; color: #202124; border: 1px solid #dadce0; }
.account-provider.apple { background: #101010; color: #fff; border: 1px solid #101010; }
.account-provider:disabled { opacity: .55; cursor: wait; }
.account-note, #account-status { font-size: .88rem; color: var(--muted); }
.account-user { font-weight: 650; }
@media (max-width: 520px) { .account-actions { flex-direction: column; } .account-actions > * { width: 100%; } }

/* Cuenta: icono compacto en la navegación y menú de sesión. */
.account-menu { display: inline-flex; flex: none; position: relative; align-items: center; }
.account-menu-trigger {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  margin: 0 0 0 4px;
  padding: 0;
  width: 38px;
}
.account-menu-trigger:hover,
.account-menu-trigger[aria-expanded="true"] { background: var(--bg); border-color: color-mix(in srgb, var(--fg) 28%, var(--border)); }
.account-menu-trigger.is-signed-in { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.account-menu-trigger svg { height: 20px; width: 20px; }
.account-menu-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px #00000014;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 210px;
  padding: 6px;
  position: fixed;
  z-index: 70;
}
.account-menu-panel[hidden] { display: none; }
.account-menu-email {
  color: var(--muted);
  font-size: .72rem;
  margin: 5px 7px 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-menu-item {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--fg);
  cursor: pointer;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 500;
  padding: 10px 11px;
  text-align: left;
  text-decoration: none;
}
.account-menu-item:hover { background: var(--bg); }
.account-menu-sign-out { color: var(--muted); }
.account-menu-item:disabled { cursor: wait; opacity: .6; }
.account-menu-message { color: #a31536; font-size: .72rem; line-height: 1.35; margin: 4px 7px; }
@media (max-width: 860px) {
  .account-menu-trigger { height: 36px; margin-left: 2px; width: 36px; }
}

/* El acceso de cuenta ocupa la esquina superior derecha de la cabecera. */
.topbar-inner { grid-template-columns: auto minmax(280px, 1fr) auto; }
.topnav { grid-row: 2; grid-column: 1 / -1; }
.global-search { grid-area: 1 / 2; }
.topbar-inner > .account-menu {
  grid-area: 1 / 3;
  align-self: center;
  justify-self: end;
}
@media (max-width: 900px) {
  .topbar-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .topbar-inner > .brand { grid-area: 1 / 1; }
  .topbar-inner > .account-menu { grid-area: 1 / 2; }
  .global-search { grid-area: 2 / 1 / 3 / -1; }
  .topnav { grid-area: 3 / 1 / 4 / -1; }
}

/* Búsqueda: acción sobria, con el amarillo reservado para detalles de marca. */
.global-search button {
  background: var(--fg);
  color: var(--bg);
  transition: background .16s ease, color .16s ease;
}
.global-search button:hover { background: var(--navy); }
.global-search button:focus-visible { outline-color: var(--accent); }
/* Botón de Google con marca y contraste reconocibles. */
.account-provider.google-signin { align-items:center; background:#fff; border:1px solid #747775; border-radius:8px; color:#1f1f1f; display:inline-flex; font-family:Roboto,Inter,Arial,sans-serif; font-size:14px; font-weight:500; gap:12px; justify-content:center; min-height:44px; padding:10px 16px; }
.account-provider.google-signin:hover { background:#f8faff; border-color:#5f6368; }
.account-provider.google-signin .google-signin-mark { flex:none; height:20px; width:20px; }
.account-provider.google-signin:focus-visible { outline:2px solid #1a73e8; outline-offset:2px; }
/* Avatar del usuario autenticado en la cabecera. */
.account-avatar { border-radius:50%; height:26px; object-fit:cover; width:26px; }

/* Una foto de perfil ocupa el control completo, sin el fondo del icono genérico. */
.account-menu-trigger.is-signed-in:has(.account-avatar:not([hidden])) {
  background: transparent;
  border-color: transparent;
  overflow: hidden;
  padding: 0;
}
.account-menu-trigger.is-signed-in .account-avatar { height: 100%; width: 100%; }

/* El avatar conserva un contorno discreto, como el resto de controles. */
.account-menu-trigger.is-signed-in:has(.account-avatar:not([hidden])) {
  background: var(--card-bg);
  border-color: var(--border);
}
/* Saludo y acciones del menú de cuenta. */
.account-menu-panel { gap: 4px; min-width: 224px; padding: 8px; }
.account-menu-email {
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
  margin: 2px 4px 5px;
  padding: 6px 5px 11px;
}
.account-menu-email strong { color: var(--fg); font-size: .84rem; font-weight: 650; }
.account-menu-item { font-size: .85rem; padding: 11px 12px; }
.account-menu-sign-out { margin-top: 2px; }
/* Cuenta: perfil y próximas funciones. */
.account-profile { align-items:center; display:flex; gap:12px; margin:20px 0 18px; }
#account-avatar-page { border:1px solid var(--border); border-radius:50%; height:48px; object-fit:cover; width:48px; }
.account-user { color:var(--fg); font-size:.88rem; font-weight:600; margin:0 0 3px; }
.account-email { color:var(--muted); font-size:.78rem; margin:0; }
.account-actions { align-items:center; display:flex; flex-wrap:wrap; gap:10px; }
.account-primary-action { background:var(--fg); border-color:var(--fg); color:var(--bg); }
.account-primary-action:hover { background:var(--navy); border-color:var(--navy); }
.account-signout-action { background:transparent; color:var(--muted); }
.account-upcoming { border-top:1px solid var(--border); margin-top:26px; padding-top:22px; }
.account-upcoming .eyebrow { margin-bottom:8px; }
.account-upcoming h2 { font-size:1rem; letter-spacing:-.02em; margin:0 0 7px; }
.account-upcoming p { color:var(--muted); font-size:.84rem; line-height:1.55; margin:0 0 12px; max-width:520px; }
.account-upcoming span { background:var(--bg); border:1px solid var(--border); border-radius:999px; color:var(--muted); display:inline-block; font-size:.7rem; font-weight:600; padding:5px 9px; }
/* Búsqueda global: una única entrada, sin selector previo. */
.global-search { border-radius:9px; width:min(100%, 520px); }
.global-search input { font-size:.82rem; padding:10px 14px; }
.global-search button { background:transparent; color:var(--muted); width:44px; }
.global-search button:hover { background:transparent; color:var(--fg); }
.global-search button:focus-visible { outline-color:var(--navy); }

.account-alerts { display:grid; gap:10px; margin-top:16px; }
.account-alert-row { align-items:center; border:1px solid var(--border); border-radius:12px; display:flex; gap:16px; justify-content:space-between; padding:14px 15px; }
.account-alert-row a { color:var(--ink); font-size:.86rem; font-weight:700; text-decoration:none; }
.account-alert-row a:hover { text-decoration:underline; }
.account-alert-row p,.account-empty { color:var(--muted); font-size:.78rem; line-height:1.45; margin:5px 0 0; }
.account-alert-actions { display:flex; flex-wrap:wrap; gap:7px; }
.account-alert-actions button,.product-alert-button { background:var(--card-bg); border:1px solid var(--border); border-radius:9px; color:var(--ink); cursor:pointer; font:inherit; font-size:.76rem; padding:8px 10px; }
.account-alert-actions button:hover,.product-alert-button:hover { border-color:var(--ink); }
.product-alert-button { align-items:center; display:inline-flex; gap:6px; }
.product-alert-status { color:var(--muted); font-size:.78rem; margin:9px 0 0; }
@media (max-width:600px) { .account-alert-row { align-items:flex-start; flex-direction:column; gap:10px; } }

.price-record-badges { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px; }
.price-record-badge { align-items:center; border-radius:999px; display:inline-flex; font-size:.72rem; font-weight:750; line-height:1; padding:7px 9px; }
.price-record-badge.historical { background:#edf8f0; color:#176b3a; }
.price-record-badge.recent { background:#eef4fb; color:#245b93; }

.search-page { padding-bottom:58px; }
.search-page h1 { margin:4px 0 8px; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.05em; }
.search-summary { color:var(--muted); margin:0 0 26px; }

.global-search { position:relative; }
.global-search-suggestions { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 14px 34px rgba(15,31,48,.16); left:0; max-height:360px; overflow:auto; padding:6px; position:absolute; right:0; top:calc(100% + 8px); z-index:50; }
.global-suggestion { background:transparent; border:0; border-radius:8px; color:var(--ink); cursor:pointer; display:block; font:inherit; padding:10px 11px; text-align:left; width:100%; }
.global-suggestion:hover,.global-suggestion:focus-visible { background:var(--surface-soft); outline:0; }
.global-suggestion-name { display:block; font-size:.8rem; font-weight:700; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-suggestion small { color:var(--muted); display:block; font-size:.72rem; margin-top:3px; }
.global-suggestion-shortcut { color:var(--muted); font-size:.78rem; font-weight:650; }


.account-stats { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:16px 0 18px; }
.account-stat { align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:12px; color:var(--fg); display:flex; gap:9px; min-height:56px; padding:10px 13px; text-decoration:none; transition:border-color .16s ease,transform .16s ease; }
.account-stat:hover { border-color:var(--fg); transform:translateY(-1px); }
.account-stat strong { font-size:1.35rem; letter-spacing:-.05em; }
.account-stat span { background:transparent !important; border:0 !important; color:var(--muted); font-size:.75rem !important; font-weight:500 !important; line-height:1.25; padding:0 !important; }
@media (max-width:420px) { .account-stats { grid-template-columns:1fr; } }

.account-alert-editor { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin-top:12px; }
.account-alert-editor label { display:grid; gap:5px; font-size:.8rem; }
.account-alert-editor input { width:140px; min-height:44px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; font:inherit; background:var(--card-bg); color:var(--fg); }
.account-alert-editor button { min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; background:var(--bg); color:var(--fg); cursor:pointer; }


.search-more { display:block; margin:24px auto 0; min-height:44px; }
.search-more[hidden] { display:none; }
.product-alert-form { flex-basis:100%; display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--card-bg); }
.product-alert-form label { display:grid; gap:7px; font-size:.85rem; }
.product-alert-form input { width:180px; max-width:100%; min-height:44px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; padding:8px 10px; }
.product-alert-form button { min-height:44px; }
@media(max-width:620px) {
 .area-entry { padding:20px; }
 .area-entries { margin-bottom:26px; }
 .area-catalog .category-card { min-height:140px; }
 .product-alert-form { flex-direction:column; align-items:stretch; }
 .product-alert-form input { width:100%; box-sizing:border-box; }
}


/* Shared catalogue filters: same shell, controls and spacing in every listing. */
.filters-col[hidden] { display:none; }
.sidebar { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:16px; gap:18px; }
.sidebar-section { gap:8px; min-width:0; }
.sidebar-section:not(:last-child) { padding-bottom:16px; }
.sidebar-label { font-size:.72rem; font-weight:600; letter-spacing:.04em; }
.sidebar select, .sidebar input[type="number"] { min-height:44px; width:100%; min-width:0; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; font-size:.83rem; padding:10px 12px; }
.sidebar .range-value-row input[type="number"] { width:96px; }
.sidebar input[type="number"]:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.filter-toggle-btn { min-height:44px; border-radius:10px; }
.filter-option { min-height:44px; padding:6px 0; }
.search-layout { padding:0; margin:24px 0 0; }
.search-layout .content { min-height:0; }
.search-layout .search-summary { margin:0; font-size:.8rem; }
.search-layout .count-group { margin-bottom:12px; }
.search-layout .active-filters:not(:empty) { margin-bottom:20px; }
.search-layout .grid.view-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (min-width:1200px) { .search-layout .grid.view-5 { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:860px) {
  .search-layout .grid.view-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filters-col { flex-basis:auto; }
  .sidebar { padding:16px; }
}

/* Platform identity in the gaming hub, with a legible surface in dark mode. */
.area-catalog .platform-logo { width:180px; max-width:100%; height:100px; padding:14px; background:#fff; border-radius:12px; object-fit:contain; margin:0; flex:none; }
.area-catalog .accessory-logo { color:var(--fg); background:transparent; }
.gaming-catalog .category-card h2 { font-size:.92rem; font-weight:600; line-height:1.4; }
@media (max-width:520px) { .area-catalog .platform-logo { height:80px; padding:10px; } }

.gaming-catalog { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:860px) { .gaming-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } }


.account-menu-item[hidden] { display:none; }
.account-menu-sign-out { border-top:1px solid var(--border); border-radius:0 0 8px 8px; margin-top:6px; }

.stock-history-list{margin:16px 0;padding:0;list-style:none;display:grid;gap:12px}
.stock-history-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border,#dfe5ec)}
.stock-history-list time{font-size:.85rem;color:var(--muted,#65758a);text-align:right}
@media(max-width:420px){.stock-history-list li{flex-direction:column;gap:4px}.stock-history-list time{text-align:left}}

/* Account actions share a quiet icon column and comfortable touch targets. */
.account-menu-item { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.account-menu-icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.account-menu-sign-out { color: #9d4646; }
.account-menu-sign-out .account-menu-icon { color: inherit; }
.account-menu-sign-out:hover { background: rgba(157, 70, 70, .07); }
@media (prefers-color-scheme: dark) {
  .account-menu-sign-out { color: #e5a3a3; }
  .account-menu-sign-out:hover { background: rgba(229, 163, 163, .08); }
}

/* Area hubs give games and platforms the same balanced category layout. */
.area-catalog { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding-bottom: 0; margin-bottom: 14px; border-bottom: 0; }
.area-catalog .category-card { grid-column: span 2; min-height: 156px; padding: 22px; }
.tcg-catalog .category-card:nth-child(4) { grid-column: 2 / span 2; }
.tcg-catalog .category-card:nth-child(5) { grid-column: 4 / span 2; }
.catalog-secondary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .82rem; line-height: 1.5; }
.catalog-secondary a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--navy); text-decoration: none; font-weight: 550; }
.catalog-secondary a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .area-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .area-catalog .category-card { grid-column: span 2; min-height: 132px; padding: 16px 12px; }
  .tcg-catalog .category-card:nth-child(4), .tcg-catalog .category-card:nth-child(5) { grid-column: span 2; }
  .area-catalog .category-card:last-child:nth-child(odd) { grid-column: 2 / span 2; }
  .area-catalog .category-img { max-width: 100%; }
  .catalog-secondary { display: block; padding-bottom: 16px; margin-bottom: 26px; }
  .catalog-secondary > span { display: block; }
}

.editorial-area-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); }
.editorial-area-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .85rem; font-weight: 550; }
.editorial-area-tabs a[aria-current="page"] { color: var(--card-bg); background: var(--fg); }
.editorial-area-tabs a:hover:not([aria-current]) { color: var(--fg); background: var(--bg); }
.editorial-cross-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--navy); font-size: .85rem; }
.news-card-img.editorial-logo { object-fit: contain; padding: 24px; box-sizing: border-box; }
.editorial-platforms { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.editorial-date-status { display: block; margin-top: 6px; color: var(--muted); font-size: .75rem; font-weight: 450; }
.editorial-event-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.editorial-event-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-size: .8rem; }
.editorial-window-section > h2 { font-size: 1rem; margin-bottom: 16px; }
.gaming-calendar-link { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 20px; margin: 0 0 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); font-size: .9rem; }
.gaming-calendar-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); }


/* Featured collections: compact art, explicit links and pause controls. */
.featured-carousel { margin: -6px 0 24px; }
.featured-viewport { overflow: hidden; border-radius: 18px; border: 1px solid var(--border); touch-action: pan-y; }
.featured-slide[hidden] { display: none; }
.featured-slide { background: #edf3fb; color: #182330; animation: featured-appear .25s ease-out; }
.featured-link { display: grid; grid-template-columns: 1fr 1fr; min-height: 232px; color: inherit; text-decoration: none; }
.featured-copy { align-self: center; padding: 24px 32px; }
.featured-kicker { font-size: .68rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.featured-copy h2 { margin: 10px 0; max-width: 22ch; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 650; letter-spacing: -.04em; line-height: 1.12; }
.featured-copy p { margin: 0 0 14px; max-width: 44ch; color: #536477; font-size: .84rem; line-height: 1.5; }
.featured-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 16px; border-radius: 8px; background: #182330; color: #fff; font-size: .8rem; font-weight: 600; }
.featured-link:hover .featured-cta { background: #284765; }
.featured-art { height: 232px; overflow: hidden; background: #fff; }
.featured-art img { width: 100%; height: 100%; object-fit: contain; }
.featured-anniversary { background: #fff5d8; }
.featured-anniversary .featured-art img, .featured-onepiece .featured-art img { object-fit: cover; }
.featured-onepiece { background: #ecf2f2; }
.featured-onepiece .featured-art img { object-position: right center; }
.featured-switch { background: #fdf0ec; }
.featured-deals { background: #e9edfa; }
.featured-etb .featured-art img, .featured-switch .featured-art img, .featured-deals .featured-art img { padding: 12px; }
.featured-controls { display: grid; grid-template-columns: 44px 1fr 44px 100px; align-items: center; gap: 4px; max-width: 420px; margin: 6px auto 0; }
.featured-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; background: transparent; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer; font: inherit; font-size: .75rem; }
.featured-control:hover { background: var(--card-bg); color: var(--fg); }
.featured-next svg { transform: rotate(180deg); }
.featured-indicators { display: flex; align-items: center; }
.featured-indicators button { display: flex; justify-content: center; align-items: center; flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.featured-indicators span { display: block; width: 7px; height: 7px; border-radius: 10px; background: var(--border); }
.featured-indicators button[aria-pressed="true"] span { width: 20px; background: var(--fg); }
.featured-pause [data-featured-pause-icon] { font-size: 1rem; }
@keyframes featured-appear { from { opacity: .7; } to { opacity: 1; } }
@media (max-width: 620px) {
  .featured-link { grid-template-columns: 62% 38%; min-height: 220px; }
  .featured-copy { padding: 18px 14px; }
  .featured-kicker { font-size: .58rem; letter-spacing: .065em; }
  .featured-copy h2 { margin: 8px 0; font-size: 1.25rem; }
  .featured-copy p { font-size: .72rem; margin-bottom: 10px; }
  .featured-cta { font-size: .7rem; padding: 0 10px; gap: 6px; }
  .featured-art { height: 100%; min-height: 220px; }
  .featured-anniversary .featured-art img { object-position: 75% center; }
  .featured-etb .featured-art img, .featured-switch .featured-art img, .featured-deals .featured-art img { padding: 6px; }
  .featured-controls { grid-template-columns: 44px 1fr 44px 44px; gap: 2px; }
  [data-featured-pause-text] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .featured-slide { animation: none; } }

/* Calendario TCG: imágenes y fechas editoriales, sin equipararlas a stock. */
.tcg-calendar-reviewed,.tcg-calendar-disclaimer { color:var(--muted); font-size:.82rem; line-height:1.6; }
.tcg-calendar-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0 10px; }
.tcg-calendar-toolbar label { font-size:.9rem; font-weight:600; }
.tcg-calendar-toolbar select { min-height:44px; max-width:100%; padding:8px 36px 8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg); color:var(--fg); font:inherit; }
#tcg-calendar-count { color:var(--muted); font-size:.82rem; }
.tcg-calendar-section { margin:24px 0; }
.tcg-calendar-section > h2 { font-size:1.2rem; margin:0 0 16px; }
.tcg-calendar-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.tcg-release { display:grid; grid-template-columns:120px minmax(0,1fr); gap:18px; padding:20px; border:1px solid var(--border); border-top:3px solid var(--game-color); border-radius:14px; background:var(--card-bg); }
.tcg-release[hidden],.tcg-calendar-past[hidden] { display:none; }
.tcg-calendar-figure { margin:0; min-width:0; text-align:center; }
.tcg-calendar-figure img { display:block; width:100%; height:128px; object-fit:contain; background:#fff; border-radius:8px; padding:5px; box-sizing:border-box; }
.tcg-calendar-figure img[hidden] { display:none; }
.tcg-calendar-caption { display:block; color:var(--muted); font-size:.7rem; line-height:1.4; margin-top:7px; }
.tcg-calendar-body { min-width:0; }
.tcg-calendar-body time { display:block; font-size:.95rem; font-weight:750; line-height:1.45; }
.tcg-calendar-game { display:block; color:var(--muted); font-size:.75rem; margin:5px 0 10px; }
.tcg-calendar-body h3 { font-size:1.05rem; line-height:1.4; margin:0 0 9px; overflow-wrap:anywhere; }
.tcg-calendar-body p { font-size:.82rem; line-height:1.6; margin:0 0 8px; }
.tcg-calendar-body .tcg-calendar-note { font-size:.75rem; color:var(--muted); }
.tcg-calendar-links { display:flex; flex-wrap:wrap; gap:5px 16px; margin-top:10px; }
.tcg-calendar-links a { display:inline-flex; align-items:center; min-height:44px; font-size:.8rem; }
.tcg-calendar-past { margin:28px 0; border-top:1px solid var(--border); padding-top:16px; }
.tcg-calendar-past summary { font-size:1rem; font-weight:650; cursor:pointer; padding:12px 0; }
.tcg-calendar-past summary:focus-visible,.tcg-calendar-toolbar select:focus-visible { outline:2px solid var(--fg); outline-offset:4px; border-radius:6px; }
.tcg-calendar-bottom { margin:28px 0; font-size:.88rem; line-height:1.7; }
@media(max-width:900px) { .tcg-calendar-grid { grid-template-columns:1fr; } }
@media(max-width:480px) {
 .tcg-release { grid-template-columns:80px minmax(0,1fr); padding:14px; gap:12px; }
 .tcg-calendar-figure img { height:100px; }
 .tcg-calendar-body h3 { font-size:.98rem; }
 .tcg-calendar-body time { font-size:.88rem; }
 .tcg-calendar-toolbar { gap:8px; }
 #tcg-calendar-count { flex-basis:100%; }
}

.tcg-calendar-links a,.tcg-calendar-bottom a { color:var(--navy); text-decoration:none; }
.tcg-calendar-links a:hover,.tcg-calendar-bottom a:hover { text-decoration:underline; }

/* Secondary navigation: bordered destination buttons and icon-only returns. */
.wts-action-link {
 display:inline-flex; align-items:center; justify-content:center; gap:9px;
 min-height:44px; max-width:100%; padding:10px 14px;
 border:1px solid var(--border); border-radius:11px; background:var(--card-bg);
 color:var(--fg); font-size:.82rem; font-weight:550; line-height:1.4;
 text-decoration:none; vertical-align:middle; transition:background .15s,border-color .15s;
}
.wts-action-link::before {
 content:""; display:block; flex:none; width:18px; height:18px; background:currentColor;
 mask:var(--wts-action-icon) center/contain no-repeat;
 --wts-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
}
.wts-action-link:hover { border-color:var(--muted); background:color-mix(in srgb,var(--fg) 5%,var(--card-bg)); text-decoration:none; }
.wts-action-link:focus-visible { outline:2px solid var(--navy); outline-offset:3px; }
.wts-back-button { width:44px; height:44px; min-width:44px; padding:0; gap:0; font-size:0!important; line-height:0; overflow:hidden; }
.wts-back-button::before {
 width:20px; height:20px;
 --wts-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6'/%3E%3C/svg%3E");
}
.wts-action-calendar::before {
 --wts-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4m8-4v4M8 14h2m4 0h2m-8 3h2'/%3E%3C/svg%3E");
}
.wts-action-news::before {
 --wts-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h8m-8 4h8m-8 4h8m-8 3h4'/%3E%3C/svg%3E");
}
.wts-action-external::before {
 --wts-action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7m0-7L10 14m0-11H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E");
}
.tcg-calendar-links .wts-action-link,.tcg-calendar-bottom .wts-action-link { color:var(--fg); text-decoration:none; }
.tcg-calendar-links { gap:8px; }
@media(prefers-reduced-motion:reduce) { .wts-action-link { transition:none; } }
@media(max-width:600px) { .home-section-header:has(.wts-action-link) { flex-wrap:wrap; gap:12px; } }

.price-from{font-size:.65em;font-weight:500;color:var(--muted);}
.quick-alert-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--navy);font:inherit;font-size:12px;cursor:pointer;margin-top:8px;width:100%;}
.quick-alert-button span{width:17px;height:17px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v5l-2 4v1h16v-1l-2-4V8a6 6 0 0 0-6-6zm0 2a4 4 0 0 1 4 4v6l1 2H7l1-2V8a4 4 0 0 1 4-4zm-2 16a2 2 0 0 0 4 0z'/%3E%3C/svg%3E") center/contain no-repeat;}
.quick-alert-button:hover{border-color:var(--navy);}
.quick-alert-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--card-bg);color:var(--fg);}
.quick-alert-dialog::backdrop{background:rgb(0 0 0 / .4);}
.quick-alert-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.quick-alert-heading h2{margin:0;font-size:22px;}
.quick-alert-dialog label{display:block;margin:16px 0 6px;font-size:13px;}
.quick-alert-dialog input,.quick-alert-dialog select{width:100%;min-height:44px;padding:8px 10px;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;font:inherit;background:var(--bg);color:var(--fg);}
.quick-alert-dialog p{line-height:1.5;overflow-wrap:anywhere;}
.quick-alert-dialog [data-alert-message]{font-size:14px;}
.quick-alert-dialog .utility-button{min-height:44px;}
.tcg-calendar-toolbar,.gaming-calendar-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;}
.gaming-calendar-toolbar select{min-height:44px;max-width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--fg);font:inherit;}
@media(max-width:480px){.tcg-calendar-toolbar select,.gaming-calendar-toolbar select{flex:1;min-width:150px;max-width:100%;}.quick-alert-dialog{padding:18px;}}

.gaming-release-list [hidden],.editorial-window-section[hidden],.release-item[hidden],.quick-alert-dialog [hidden]{display:none!important;}

.utility-button[hidden],.account-provider[hidden]{display:none!important;}

/* Compact store filter with the existing multi-selection behaviour. */
.store-dropdown { width:100%; min-width:0; }
.store-dropdown summary { position:relative; display:flex; flex-direction:column; gap:4px; min-height:44px; padding:10px 34px 10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--fg); cursor:pointer; list-style:none; box-sizing:border-box; }
.store-dropdown summary::-webkit-details-marker { display:none; }
.store-dropdown summary::after { content:''; position:absolute; right:14px; top:24px; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.store-dropdown[open] summary::after { transform:rotate(225deg); top:28px; }
.store-dropdown summary:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.store-dropdown-title { font-size:.72rem; font-weight:600; letter-spacing:.04em; }
.store-dropdown-value { font-size:.83rem; overflow-wrap:anywhere; }
.store-dropdown-options { display:flex; flex-direction:column; gap:2px; margin-top:8px; padding:6px; border:1px solid var(--border); border-radius:8px; background:var(--card-bg); max-height:320px; overflow-y:auto; }
.store-dropdown-options label { display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 6px; box-sizing:border-box; font-size:.83rem; cursor:pointer; }
.store-dropdown-options input { flex:none; accent-color:var(--navy); }

/* Comparison and account controls share a stable, compact layout. */
.filter-selection-actions,.alert-price-presets,.account-alert-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.filter-selection-actions .utility-button,.alert-price-presets .utility-button { min-height:44px; padding:8px 10px; font-size:.76rem; }
.card-comparison-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 10px; margin:0; font-size:.75rem; color:var(--muted); min-height:22px; }
.card-availability { color:var(--fg); font-weight:600; }
.card .card-name { min-height:4.5em; flex:1; }
.card .card-specs { min-height:2.9em; font-size:.74rem; }
.card .product-details-note { margin:0; font-size:.74rem; }
.card .price-row { min-height:32px; align-items:baseline; }
.card .buy-btn,.card .quick-alert-button { min-height:44px; }
.search-recovery { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:20px auto 0; max-width:650px; }
.search-recovery p { flex-basis:100%; margin:8px 0; }
.search-recovery-link { display:block; width:100%; color:var(--navy); border:1px solid var(--border); background:var(--card-bg); padding:12px; border-radius:8px; text-decoration:none; overflow-wrap:anywhere; }
.account-favorites-section { margin:22px 0; }
.account-favorite-link { display:block; border-bottom:1px solid var(--border); padding:12px 0; color:var(--fg); text-decoration:none; font-size:.85rem; overflow-wrap:anywhere; }
.account-favorites-section .utility-button { margin-top:12px; display:inline-flex; }
.account-alert-tabs [aria-pressed="true"] { background:var(--surface-soft); box-shadow:inset 0 -2px var(--navy); }
.account-alert-actions button { min-height:44px; }
.alert-price-presets { margin-top:10px; }
.grid.view-list .card .card-name { min-height:0; }
@media(max-width:520px) { .card-comparison-meta { flex-direction:column; } .account-alert-actions { width:100%; } }

/* Long filter panels remain reachable while the desktop column is sticky. */
@media(min-width:861px) {
  .filters-col { max-height:calc(100dvh - 172px); overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; padding:2px 4px 2px 2px; }
  .filters-col .sidebar { flex-shrink:0; }
}
@media(min-width:861px) and (max-width:900px) { .filters-col { max-height:calc(100dvh - 231px); } }

/* Shared offer columns keep every store, price and action aligned. */
.group-offer-store .group-store-logo { flex-shrink: 0; }
.group-offer-store .badge { white-space: normal; line-height: 1.4; }
.group-offer-actions .buy-btn { white-space: normal; text-align: center; }
@media (min-width: 651px) {
  .group-offers { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(0, 1.6fr) minmax(140px, .65fr); column-gap: 20px; }
  .group-section-heading { grid-column: 1 / -1; }
  .group-offer-row { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; }
  .group-offer-actions { grid-column: 2 / -1; justify-content: flex-start; padding-left: 0; }
  .group-offer-store, .group-offer-product, .group-offer-price, .group-offer-actions { min-width: 0; }
}
@media (min-width: 1100px) {
  .group-offers { grid-template-columns: minmax(180px, .85fr) minmax(0, 1.6fr) minmax(140px, .65fr) 260px; }
  .group-offer-actions { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .group-offer-actions .buy-btn { width: 100%; }
}

/* One canonical product page: offer titles describe the store variant. */
.group-offer-product > strong { display: -webkit-box; overflow: hidden; color: var(--fg); font-size: .82rem; font-weight: 600; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (min-width: 1100px) {
  .group-offer-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .group-offer-product > strong { display: block; overflow: visible; -webkit-line-clamp: unset; }
}

/* Sold-out offers remain visitable without implying available stock. */
.group-offer-row.is-unavailable .group-offer-actions a.buy-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
}
.group-offer-row.is-unavailable .group-offer-actions a.buy-btn:hover {
  border-color: var(--fg);
}

/* Prominent offer availability: words and symbols supplement colour. */
.group-offer-store { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.group-offer-store .group-store-logo { width: 74px; grid-column: 1; grid-row: 1; }
.group-offer-store > div { display: contents; }
.group-offer-store strong { grid-column: 2; grid-row: 1; }
.group-offer-store .badge.status {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
.offer-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; font-size: 1rem; font-weight: 750; }
.group-offer-store .badge.status.unavailable { color: #a32638; background: #fff0f2; }
.group-offer-store .badge.status.unknown { color: var(--muted); background: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .group-offer-store .badge.status.unavailable { color: #ffb2bd; background: #3e2028; }
}
:root[data-theme="dark"] .group-offer-store .badge.status.unavailable { color: #ffb2bd; background: #3e2028; }

/* Large catalogues show manageable batches while filters retain every product. */
.catalog-pagination { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 28px 0; }
.catalog-pagination[hidden] { display: none; }
.catalog-pagination p { margin: 0; color: var(--muted); font-size: .8rem; }
.catalog-pagination button { min-height: 44px; padding: 10px 20px; }

/* Gaming release cards share the TCG calendar density and image treatment. */
.gaming-release-list, .gaming-window-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 16px; }
.gaming-release-list .release-divider { grid-column: 1 / -1; margin: 8px 0 0; }
.gaming-release-list .release-item, .gaming-window-list .release-item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 20px; }
.gaming-release-image { width: 88px; height: 88px; object-fit: contain; grid-column: 1; grid-row: 1 / 3; align-self: center; padding: 8px; background: #fff; border-radius: 8px; }
.gaming-release-list .release-date, .gaming-window-list .release-date { grid-column: 2; min-width: 0; width: auto; }
.gaming-release-list .release-body, .gaming-window-list .release-body { grid-column: 2; min-width: 0; }
@media (max-width: 700px) {
  .gaming-release-list, .gaming-window-list { grid-template-columns: minmax(0, 1fr); }
  .gaming-release-list .release-item, .gaming-window-list .release-item { grid-template-columns: 64px minmax(0, 1fr); padding: 16px; gap: 8px 12px; }
  .gaming-release-image { width: 64px; height: 64px; }
}


.catalog-page-size { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.85rem; }
.catalog-page-size select { min-height:44px; padding:8px 30px 8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--card-bg); color:var(--fg); font:inherit; }
.catalog-page-links { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; max-width:100%; }
.catalog-page-links a.utility-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:8px; text-decoration:none; font-variant-numeric:tabular-nums; }
.catalog-page-links [aria-current="page"] { background:var(--fg); color:var(--card-bg); border-color:var(--fg); font-weight:700; }
#grid, #search-grid { scroll-margin-top:24px; }

.collection-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:.8rem; margin-bottom:24px; }
.collection-intro { max-width:850px; color:var(--muted); line-height:1.7; }
.collection-guide { margin:20px 0 28px; padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--card-bg); max-width:100%; }
.collection-guide p { margin:0; font-size:.9rem; line-height:1.7; }
.collection-guide p + p { margin-top:12px; color:var(--muted); }
.collection-related { margin:32px 0; }
.collection-related h2 { font-size:1.15rem; margin-bottom:16px; }
.collection-related > div { display:flex; flex-wrap:wrap; gap:10px; }
.collection-related a { white-space:normal; }
.collection-product-image { display:flex; align-items:center; justify-content:center; min-height:220px; }
.collection-product-image img { max-width:100%; object-fit:contain; }

.history-summary { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:700px) { .history-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .history-summary > div:last-child { grid-column:auto; border-top:0; } }
.history-availability { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Compact carousel navigation, with a separate playback button. */
.featured-controls { display:flex; justify-content:center; gap:12px; max-width:none; margin:14px auto 0; }
.featured-navigation { display:flex; align-items:center; gap:4px; padding:4px 6px; background:var(--card-bg); border:1px solid var(--border); border-radius:999px; box-shadow:0 2px 8px rgb(0 0 0 / .035); }
.featured-control { width:44px; height:44px; padding:0; border-radius:50%; flex:none; color:var(--fg); transition:background .18s,transform .18s; }
.featured-control:hover { background:var(--border); }
.featured-control:active { transform:scale(.94); }
.featured-control:focus-visible,.featured-indicators button:focus-visible { outline:2px solid var(--fg); outline-offset:3px; }
.featured-pause { width:52px; height:52px; border:1px solid var(--border); background:var(--card-bg); box-shadow:0 2px 8px rgb(0 0 0 / .035); }
.featured-pause svg { display:block; width:18px; height:18px; }
.featured-indicators { gap:0; }
.featured-indicators button { flex:none; width:32px; height:44px; border-radius:50%; }
.featured-indicators span { width:6px; height:6px; background:var(--muted); opacity:.4; transition:width .2s,opacity .2s; }
.featured-indicators button:hover span { opacity:.8; }
.featured-indicators button[aria-pressed="true"] span { width:24px; height:8px; background:var(--fg); opacity:1; }
.featured-position { padding:0 8px; color:var(--muted); font-size:.7rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
@media(max-width:620px) {
 .featured-controls { gap:8px; margin-top:12px; }
 .featured-navigation { gap:0; padding:3px; }
 .featured-indicators button { width:26px; }
 .featured-control { width:40px; }
 .featured-pause { width:52px; }
 .featured-position { display:none; }
}
@media(prefers-reduced-motion:reduce) { .featured-control,.featured-indicators span { transition:none; } }

/* Edge arrows with centred indicators and playback alongside. */
.featured-viewport { position:relative; }
.featured-viewport > .featured-control { position:absolute; top:50%; left:12px; z-index:2; transform:translateY(-50%); background:var(--card-bg); border:1px solid var(--border); box-shadow:0 2px 8px rgb(0 0 0 / .08); }
.featured-viewport > .featured-next { left:auto; right:12px; }
.featured-viewport > .featured-control:hover { background:var(--border); }
.featured-viewport > .featured-control:active { transform:translateY(-50%) scale(.94); }
.featured-copy { padding-left:72px; }
.featured-art { padding-right:0; }
.featured-controls { position:relative; width:max-content; max-width:calc(100% - 116px); }
.featured-navigation { padding:4px 10px; }
.featured-pause { position:absolute; left:calc(100% + 10px); top:0; }
@media(max-width:620px) {
 .featured-viewport > .featured-control { left:6px; width:36px; height:44px; }
 .featured-viewport > .featured-next { left:auto; right:6px; }
 .featured-copy { padding-left:50px; padding-right:8px; }
 .featured-art { padding-right:0; }
 .featured-link { grid-template-columns:68% 32%; }
 .featured-navigation { padding:3px 8px; }
 .featured-pause { height:52px; }
}

/* Focus belongs to the whole search field rather than an inner rectangle. */
.global-search { transition:border-color .18s,box-shadow .18s; }
.global-search:focus-within { border-color:color-mix(in srgb,var(--navy) 40%,var(--border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 9%,transparent); }
.global-search input:focus,.global-search input:focus-visible { outline:none; }
.global-search:has(input:focus-visible) { outline:none; border-color:var(--navy); box-shadow:0 0 0 3px color-mix(in srgb,var(--navy) 12%,transparent); }
@media(prefers-reduced-motion:reduce) { .global-search { transition:none; } }

.accessory-menu-icon { display:inline-flex; align-items:center; justify-content:center; width:15px; flex:none; font-size:15px; line-height:1; }

/* Show each store represented by a grouped product, with no repeated logos. */
.card-store-logos { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; max-width:100%; }
.card-corner { flex-wrap:wrap; max-width:calc(100% - 54px); }
.card-store-label { background:var(--card-bg); color:var(--fg); border:1px solid var(--border); border-radius:5px; padding:3px 5px; font-size:.65rem; }



/* Official G2A logo keeps its proportions and contrast. */
img[src="/assets/g2a-logo.svg"] { background:#18212c; border-radius:4px; padding:4px; box-sizing:border-box; object-fit:contain; }
.card-store-logos .corner-icon:has(> img[src="/assets/g2a-logo.svg"]) { width:48px; }
.card-store-logos img[src="/assets/g2a-logo.svg"] { width:48px; height:24px; }
.product-detail-store > img[src="/assets/g2a-logo.svg"] { width:56px; height:26px; }

/* Shared category icon system: preserve neutral text and colour the symbols. */
.wts-nav-icon{--wts-surface:var(--card-bg);width:18px;height:18px;flex-shrink:0;vertical-align:middle;fill:none}
.wts-nav-icon *{vector-effect:non-scaling-stroke;stroke-width:1.5}
.wts-nav-icon[data-nav-icon="tcg"],.wts-nav-icon[data-nav-icon="pokemon"]{color:#be3d50}
.wts-nav-icon[data-nav-icon="gaming"],.wts-nav-icon[data-nav-icon="playstation"]{color:#2464c6}
.wts-nav-icon[data-nav-icon="nintendo"]{color:#d52d35}
.wts-nav-icon[data-nav-icon="xbox"]{color:#248236}
.wts-nav-icon[data-nav-icon="accessories"],.wts-nav-icon[data-nav-icon="lorcana"]{color:#8250b9}
.wts-nav-icon[data-nav-icon="onepiece"],.wts-nav-icon[data-nav-icon="magic"],.wts-nav-icon[data-nav-icon="offers"]{color:#b77911}
.wts-nav-icon[data-nav-icon="yugioh"]{color:#b58a22}
.wts-nav-icon[data-nav-icon="news"]{color:#168176}
.wts-nav-icon[data-nav-icon="calendar"]{color:#6558ba}
@media(prefers-color-scheme:dark){
  .wts-nav-icon[data-nav-icon="tcg"],.wts-nav-icon[data-nav-icon="pokemon"]{color:#ff8494}
  .wts-nav-icon[data-nav-icon="gaming"],.wts-nav-icon[data-nav-icon="playstation"]{color:#73a7ff}
  .wts-nav-icon[data-nav-icon="nintendo"]{color:#ff6a73}
  .wts-nav-icon[data-nav-icon="xbox"]{color:#74ce83}
  .wts-nav-icon[data-nav-icon="accessories"],.wts-nav-icon[data-nav-icon="lorcana"]{color:#bd90f0}
  .wts-nav-icon[data-nav-icon="onepiece"],.wts-nav-icon[data-nav-icon="magic"],.wts-nav-icon[data-nav-icon="offers"]{color:#eabd68}
  .wts-nav-icon[data-nav-icon="yugioh"]{color:#eac76b}
  .wts-nav-icon[data-nav-icon="news"]{color:#66cec2}
  .wts-nav-icon[data-nav-icon="calendar"]{color:#a99aee}
}

.home-category-cards{margin:20px 0 24px}
.home-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.home-category-grid[hidden]{display:none}
.home-category-gaming{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-category-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:112px;padding:14px 12px;border:1px solid var(--border);border-radius:14px;background:var(--card-bg);color:var(--fg);text-decoration:none;text-align:center;font-size:13px;font-weight:500;transition:border-color .16s,box-shadow .16s}
.home-category-card:hover{border-color:var(--navy);box-shadow:0 3px 12px rgb(0 0 0 / .06)}
.home-category-logo{display:grid;place-items:center;width:min(150px,100%);height:56px;background:#fff;border-radius:7px}
.home-category-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:4px}
@media(max-width:640px){.home-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-category-gaming{grid-template-columns:repeat(3,minmax(0,1fr))}.home-category-card{min-height:100px;padding:12px 8px;font-size:12px}.home-category-logo{height:48px}}
@media(prefers-reduced-motion:reduce){.home-category-card{transition:none}}

/* Constrain logos with intrinsic aspect ratios inside their reserved space. */
.home-category-logo{display:flex;align-items:center;justify-content:center;overflow:hidden}
.home-category-logo img{height:56px;max-height:56px;max-width:100%;flex-shrink:1}
@media(max-width:640px){.home-category-logo img{height:48px;max-height:48px}}

/* Logo-only category shortcuts, with a reserved box and no visible caption. */
.home-category-card{height:112px;min-height:112px;gap:0;padding:14px;background:#fff}
.home-category-logo{display:flex;align-items:center;justify-content:center;width:min(180px,100%);height:80px;overflow:hidden;background:#fff}
.home-category-logo img{width:100%;height:80px;max-height:80px;max-width:100%;object-fit:contain;padding:0}
@media(max-width:640px){.home-category-card{height:96px;min-height:96px;padding:12px}.home-category-logo,.home-category-logo img{height:68px;max-height:68px}.home-category-gaming .home-category-card{height:88px;min-height:88px;padding:10px}.home-category-gaming .home-category-logo,.home-category-gaming .home-category-logo img{height:64px;max-height:64px}}

/* This square asset has ample whitespace around its central wordmark. */
.home-category-logo img[src="/assets/yugioh.webp"]{object-fit:cover;object-position:center}

/* Give the restored category logos a little more vertical breathing room. */
.home-category-card{height:140px;min-height:140px;padding:18px}
.home-category-logo,.home-category-logo img{height:100px;max-height:100px}
@media(max-width:640px){.home-category-card{height:118px;min-height:118px;padding:14px}.home-category-logo,.home-category-logo img{height:88px;max-height:88px}.home-category-gaming .home-category-card{height:106px;min-height:106px;padding:12px}.home-category-gaming .home-category-logo,.home-category-gaming .home-category-logo img{height:80px;max-height:80px}}

.topnav-dropdown-menu .wts-editorial-icon{width:20px;height:20px}
.wts-nav-icon[data-nav-icon^="offers-"]{color:#b77911}
.wts-nav-icon[data-nav-icon^="news-"]{color:#168176}
.wts-nav-icon[data-nav-icon^="calendar-"]{color:#6558ba}
@media(prefers-color-scheme:dark){.wts-nav-icon[data-nav-icon^="offers-"]{color:#eabd68}.wts-nav-icon[data-nav-icon^="news-"]{color:#66cec2}.wts-nav-icon[data-nav-icon^="calendar-"]{color:#a99aee}}

/* The root is a shared discovery page; area routes retain their own home. */
body:not([data-catalog-area]) .area-selector,
body:not([data-catalog-area]) .home-category-cards,
body:not([data-catalog-area]) #newest-section,
body:not([data-catalog-area]) #deals-section,
body:not([data-catalog-area]) #activity-section,
body:not([data-catalog-area]) #home-news-section{display:none!important}
body[data-catalog-area] #mixed-home{display:none}
.home-area-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 32px}
.home-area-card{display:flex;align-items:center;gap:18px;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--card-bg);color:var(--fg);text-decoration:none;min-width:0;transition:border-color .2s,box-shadow .2s}
.home-area-card:hover{border-color:var(--accent);box-shadow:0 3px 12px #1723320a}
.home-area-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.home-area-card strong{display:block;font-size:22px;margin-bottom:5px}
.home-area-card strong+span{display:block;font-size:14px;color:var(--muted)}
.home-area-symbol{display:flex;align-items:center;justify-content:center;flex:0 0 58px;height:58px;border-radius:14px}
.home-area-symbol-tcg{color:#db2948;background:#fff0f3}.home-area-symbol-gaming{color:#2464c6;background:#eef4ff}
.home-area-arrow{margin-left:auto;font-size:22px}
#mixed-home .home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){#mixed-home .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.home-area-cards{grid-template-columns:1fr;gap:12px;margin:20px 0 28px}.home-area-card{padding:18px;gap:14px}.home-area-card strong{font-size:20px}.home-area-card strong+span{font-size:13px}.home-area-symbol{flex-basis:48px;height:48px}}

/* Official game artwork keeps its full composition in calendar thumbnails. */
.gaming-release-image.gaming-release-art{padding:0;object-fit:contain;border:1px solid var(--border)}


/* Confirmed sold-out cards retain readable text and working detail/alert links. */
.card.is-sold-out {
  background: color-mix(in srgb, var(--card-bg) 90%, var(--fg));
  border-color: color-mix(in srgb, var(--border) 70%, var(--fg));
}
.card.is-sold-out .card-img { background: inherit; }
.card.is-sold-out .product-image-frame,
.card.is-sold-out .product-image-placeholder { background: inherit; }
.card.is-sold-out .product-image { filter: grayscale(1); }
.card.is-sold-out .product-image-frame[data-image-state="ready"] .product-image { opacity: .55; }
.card.is-sold-out .card-availability { font-weight: 800; }
.card.is-sold-out .badge.status.unavailable {
  background: var(--fg);
  color: var(--card-bg);
  font-weight: 800;
}
.card.is-sold-out .buy-btn:not(.disabled),
.card.is-sold-out .quick-alert-button {
  background: transparent;
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--fg));
}
.card.is-sold-out .buy-btn:not(.disabled):hover,
.card.is-sold-out .quick-alert-button:hover { background: var(--card-bg); }


/* Home news stay in a compact, two-card row, scoped away from article lists. */
[data-mixed-news], #home-news-section .news-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: none;
}
[data-mixed-news] .news-card, #home-news-section .news-card { min-width: 0; }
[data-mixed-news] .news-card-img, #home-news-section .news-card-img { height: 150px; }
.search-results-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.search-results-tools .search-refine { width:min(100%,420px); max-width:420px; min-width:0; flex:1 1 260px; }
.search-results-tools .count-group { margin:0; }
.search-refine input { width:100%; padding-left:16px; }
@media(max-width:520px) {
  [data-mixed-news], #home-news-section .news-list { gap:10px; }
  [data-mixed-news] .news-card-img, #home-news-section .news-card-img { height:96px; }
  [data-mixed-news] .news-card-body, #home-news-section .news-card-body { padding:10px; gap:6px; }
  [data-mixed-news] .news-card h2, [data-mixed-news] .news-card h3,
  #home-news-section .news-card h2, #home-news-section .news-card h3 { font-size:.82rem; }
  [data-mixed-news] .news-date, #home-news-section .news-date { font-size:.62rem; }
  [data-mixed-news] .news-card p, #home-news-section .news-card p { display:none; }
  [data-mixed-news] .news-card-cta, #home-news-section .news-card-cta { font-size:.72rem; }
}

/* Explicit condition labels for comparable videogame offers. */
.group-offer-product .offer-condition { align-self:flex-start; width:fit-content; margin:6px 0; padding:5px 9px; border:1px solid var(--border); font-size:.78rem; font-weight:800; line-height:1.35; background:var(--surface-soft); color:var(--text); }
.group-offer-product .condition-new { background:var(--available-bg); color:var(--available); }
.group-offer-product .condition-used,.group-offer-product .condition-refurbished { background:var(--invitation-bg); color:var(--invitation); }

/* Six compact products per desktop row on the general homepage. */
#mixed-home .home-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
#mixed-home .home-grid .card { min-width:0; }
#mixed-home .home-grid .card-img { aspect-ratio:auto; height:144px; flex:none; }
#mixed-home .home-grid .card-img > img { padding:12px; }
#mixed-home .home-grid .card-body { padding:10px; gap:6px; }
#mixed-home .home-grid .card-save-row { margin:-6px -4px -6px 0; }
#mixed-home .home-grid .card-name { flex:none; min-height:4.05em; font-size:.8rem; line-height:1.35; overflow-wrap:anywhere; }
#mixed-home .home-grid .card-comparison-meta { min-height:0; font-size:.68rem; gap:3px 6px; }
#mixed-home .home-grid .card-specs { min-height:0; font-size:.68rem; }
#mixed-home .home-grid .product-details-note { font-size:inherit; }
#mixed-home .home-grid .card-specs:empty { display:none; }
#mixed-home .home-grid .price-row { margin-top:auto; min-height:28px; }
#mixed-home .home-grid .price { font-size:1.15rem; }
#mixed-home .home-grid .buy-btn { font-size:.73rem; padding:9px 5px; }
#mixed-home .home-grid .quick-alert-button { margin-top:0; font-size:.7rem; }
#mixed-home .home-grid .stock-note { font-size:.65rem; }
#mixed-home .home-grid .card-corner { left:6px; top:6px; gap:3px; max-width:calc(100% - 12px); }
#mixed-home .home-grid .card-corner-right { right:6px; top:35px; }
@media(max-width:1099px) { #mixed-home .home-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  #mixed-home .home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #mixed-home .home-grid .card-img { height:128px; }
  #mixed-home .home-grid .card-body { padding:9px; }
  #mixed-home .home-grid .card-comparison-meta { flex-direction:row; }
}