/* =========================================================================
   JUEGOS DIGITALES COLOMBIA — Shared site styles
   ========================================================================= */

:root {
  --bg: #0e1014;
  --surface: #16181d;
  --surface-2: #1c1f25;
  --surface-3: #22252c;
  --border: #24272e;
  --border-2: #2f333c;
  --text: #ffffff;
  --text-2: #9aa0aa;
  --text-3: #6a6e78;
  --text-4: #4a4d56;
  --accent: #FFD700;
  --accent-hover: #ffe450;
  --accent-soft: rgba(255,215,0,0.12);
  --accent-line: rgba(255,215,0,0.25);
  --sale: #22c55e;
  --sale-text: #06140a;
  --urgent: #ef4444;
  --info: #3b82f6;
  --container: 1320px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  /* `overflow-x: clip` clips horizontal overflow WITHOUT establishing a
     scrolling container. Critical for `position: sticky` inside the page
     to actually stick to the viewport — `overflow-x: hidden` (the old
     value) makes body the scroll container and breaks sticky elements
     like the product page trailer column. The hidden fallback covers
     pre-Chrome 90 / pre-Safari 15.4 where clip isn't supported. */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-2); }
::-webkit-scrollbar-thumb:hover { background: #3a3f4a; }

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

main { flex: 1 0 auto; }

/* =========================================================================
   TOP BAR
   ========================================================================= */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-2);
}
.topbar-inner {
  max-width: 1480px; margin: 0 auto;
  padding: 8px 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
.topbar-info { display: inline-flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.02em; }
.topbar-info i { color: var(--accent); font-size: 11px; }
.topbar-right { display: inline-flex; gap: 14px; align-items: center; }
.topbar-social { display: inline-flex; gap: 6px; }
.topbar-social a {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: color .15s;
}
.topbar-social a:hover { color: var(--accent); }
.topbar-divider { width: 1px; height: 14px; background: var(--border-2); }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,16,20,0.95);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  max-width: 1480px; margin: 0 auto;
}
/* When desktop nav is hidden (≤1100px), push everything after the logo
   to the right so logo sits at left edge, actions+hamburger at right edge */
.header-inner > .header-actions { margin-left: auto; }
.header-inner > .hamburger { margin-left: 8px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #FFD700 0%, #FF8800 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px;
  color: #0a0a0a;
  letter-spacing: -0.04em;
  font-style: italic;
  border-radius: 4px;
}
.logo-text { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
.logo-name { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.logo-region { font-size: 9px; font-weight: 700; color: var(--accent); letter-spacing: 0.18em; }

.primary-nav { display: flex; gap: 2px; flex: 1; justify-content: center; }
.primary-nav a {
  color: var(--text-2);
  font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

.header-search { flex: 0 1 340px; position: relative; }
.header-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 14px 10px 38px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, background-color .15s;
}
.header-search input::placeholder { color: var(--text-3); }
.header-search input:focus { border-color: var(--accent); background: var(--surface-2); }
.header-search > i {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3); font-size: 13px;
}

.header-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.icon-btn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  font-size: 15px;
  transition: color .15s, border-color .15s, background-color .15s;
}
.icon-btn:hover { color: var(--text); background: var(--surface); border-color: var(--border); }

/* =========================================================================
   MOBILE HAMBURGER + DRAWER
   ========================================================================= */
.hamburger {
  display: none;       /* desktop: hidden */
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.hamburger:hover { background: var(--surface); }
.hamburger:active { background: var(--accent); color: #0a0a0a; }

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
  display: none;          /* truly removed from layout when closed */
}
.mobile-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  display: block;
}
.mobile-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity .25s ease;
}
.mobile-drawer.is-open .mobile-drawer-overlay { opacity: 1; }

.mobile-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer-panel { transform: translateX(0); }

.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mobile-drawer-close {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.mobile-drawer-close:hover { background: var(--surface); }

.mobile-drawer-search {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 11px 14px;
  color: #fff;
  font-size: 13px;
  outline: none;
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.mobile-drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background-color .15s, color .15s;
}
.mobile-drawer-nav a i { color: var(--text-3); font-size: 12px; }
.mobile-drawer-nav a:hover,
.mobile-drawer-nav a.is-active {
  background: var(--surface);
  color: var(--accent);
}
.mobile-drawer-nav a.is-active i { color: var(--accent); }

.mobile-drawer-foot {
  margin-top: auto;
  padding: 18px 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-drawer-foot a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  color: #fff;
  transition: border-color .15s, background-color .15s;
}
.mobile-drawer-foot a:hover { border-color: var(--accent); }
.mobile-drawer-foot a.is-wa { background: #25D366; border-color: #25D366; }
.mobile-drawer-foot a.is-wa:hover { background: #1fb558; }
.mobile-drawer-foot .drawer-socials {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.mobile-drawer-foot .drawer-socials a {
  width: 38px; height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* show hamburger / hide desktop nav on mobile */
@media (max-width: 1024px) {
  .hamburger { display: inline-flex; }
}
/* lock body scroll when drawer is open */
body.drawer-open { overflow: hidden; }
.cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.04em;
  border: none;
  text-transform: uppercase;
  transition: background-color .15s;
}
.cart-btn:hover { background: var(--accent-hover); }
.cart-btn .cart-count {
  background: #0a0a0a; color: var(--accent);
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11px; font-weight: 800;
}

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #0a0a0a;
  padding: 13px 22px;
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em;
  border: none;
  transition: background-color .15s, transform .1s;
  white-space: nowrap;
  text-transform: uppercase;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary.btn-block { width: 100%; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--text);
  padding: 13px 20px;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-2);
  transition: border-color .15s, color .15s, background-color .15s;
  white-space: nowrap;
  text-transform: uppercase;
}
.btn-secondary:hover { border-color: var(--text); background: var(--surface); }

.btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #25D366; color: #0a0a0a;
  padding: 13px 20px;
  font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em;
  border: none;
  text-transform: uppercase;
  transition: background-color .15s;
}
.btn-whatsapp:hover { background: #2fea73; }

.btn-large { padding: 16px 30px; font-size: 14px; }
.btn-small { padding: 8px 14px; font-size: 11px; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { width: 100%; }
.hero-swiper { height: 540px; position: relative; }
.hero-slide {
  position: relative;
  background-size: cover;
  background-position: center right;
  background-color: var(--surface);
  display: flex; align-items: center;
}
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,16,20,0.97) 0%, rgba(14,16,20,0.7) 45%, rgba(14,16,20,0.05) 80%),
    linear-gradient(0deg, rgba(14,16,20,0.7) 0%, rgba(14,16,20,0) 35%);
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 1;
  max-width: var(--container); width: 100%;
  margin: 0 auto;
  padding: 0 48px;
}
.hero-card { max-width: 580px; display: flex; flex-direction: column; gap: 16px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  background: var(--accent); color: #0a0a0a;
  padding: 5px 10px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-title {
  font-size: 56px; font-weight: 900;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  color: #fff;
}
.hero-tagline {
  font-size: 16px; color: var(--text-2);
  margin: 0; max-width: 480px;
  line-height: 1.55;
}
.hero-pricing { display: flex; flex-direction: column; gap: 6px; }
.hero-price-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero-price-discount {
  background: var(--sale); color: var(--sale-text);
  padding: 4px 8px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.02em;
}
.hero-price-from {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.hero-price-value {
  color: var(--accent);
  font-size: 36px; font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero-price-old {
  color: var(--text-3);
  text-decoration: line-through;
  font-size: 16px; font-weight: 600;
}
.hero-price-pri { font-size: 12px; color: var(--text-2); }
.hero-price-pri strong { color: #fff; font-weight: 700; }
.hero-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }

.hero-swiper .swiper-pagination {
  position: absolute;
  bottom: 24px !important;
  left: 0; right: 0;
  text-align: left;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}
.hero-swiper .swiper-pagination-bullet {
  background: rgba(255,255,255,0.25);
  opacity: 1;
  width: 32px; height: 3px;
  border-radius: 0;
  margin: 0 4px 0 0 !important;
  transition: background-color .2s, width .2s;
}
.hero-swiper .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 48px;
}
.hero-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.7);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background-color .15s, border-color .15s, color .15s;
}
.hero-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-prev { left: 16px; }
.hero-next { right: 16px; }

/* =========================================================================
   CATEGORY PILLS — REDESIGNED v3 (rounded with circular icon backgrounds)
   ========================================================================= */
.cats-strip {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  background: var(--bg);
}
.cats-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cats-row::-webkit-scrollbar { display: none; }
.cat-pill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  transition: all .2s;
  user-select: none;
}
.cat-pill .pill-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
  transition: background-color .2s, color .2s;
}
.cat-pill .pill-name { white-space: nowrap; }
.cat-pill .pill-count {
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  margin-left: 2px;
}
.cat-pill:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.cat-pill:hover .pill-icon { background: var(--surface-3); }
.cat-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}
.cat-pill.is-active .pill-icon {
  background: rgba(0,0,0,0.18);
  color: #0a0a0a;
}
.cat-pill.is-active .pill-count { color: rgba(0,0,0,0.55); }

/* =========================================================================
   SECTION
   ========================================================================= */
.section { padding: 56px 0 16px; }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 22px;
  gap: 16px; flex-wrap: wrap;
}
.section-title-wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.section-title {
  font-size: 22px; font-weight: 900;
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-title i { color: var(--accent); font-size: 18px; }
.section-subtitle {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.see-all {
  color: var(--text-2);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s, gap .15s;
}
.see-all:hover { color: var(--accent); gap: 10px; }

/* =========================================================================
   FLASH BANNER + COUNTDOWN
   ========================================================================= */
.flash-banner {
  background: linear-gradient(90deg, rgba(239,68,68,0.10) 0%, rgba(239,68,68,0.02) 100%);
  border: 1px solid rgba(239,68,68,0.25);
  padding: 14px 20px;
  margin-bottom: 22px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
}
/* v0.3.126 — `.flash-banner-centered` variant: 3-col grid puts the
   countdown DEAD CENTER and the title on the RIGHT. Empty placeholder
   fills the left column to keep the timer truly centered regardless
   of how wide the title text is. */
.flash-banner.flash-banner-centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.flash-banner-centered .flash-banner-spacer { display: block; min-width: 0; }
.flash-banner-centered .countdown { justify-self: center; }
.flash-banner-centered .flash-text { justify-self: end; text-align: right; }
@media (max-width: 900px) {
  .flash-banner.flash-banner-centered {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .flash-banner-centered .flash-banner-spacer { display: none; }
  .flash-banner-centered .flash-text { justify-self: center; text-align: center; }
}
.flash-text { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flash-text-icon {
  width: 36px; height: 36px;
  background: var(--urgent);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  flex-shrink: 0;
}
.flash-text-main {
  font-size: 14px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.flash-text-sub { font-size: 12px; color: var(--text-2); }
.countdown { display: inline-flex; align-items: center; gap: 6px; }
/* v0.3.126 — slightly bigger cells in the centered flash banner so
   the timer reads as the focal point of the section. */
.flash-banner-centered .countdown { gap: 8px; }
.countdown-cell {
  background: rgba(14,16,20,0.6);
  border: 1px solid rgba(239,68,68,0.4);
  padding: 7px 9px;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  min-width: 48px;
}
.flash-banner-centered .countdown-cell {
  padding: 10px 14px;
  min-width: 60px;
  gap: 4px;
}
.countdown-cell strong {
  font-size: 16px; font-weight: 900;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.flash-banner-centered .countdown-cell strong { font-size: 22px; }
.countdown-cell span {
  font-size: 9px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.flash-banner-centered .countdown-cell span { font-size: 10px; }
.countdown-sep { color: var(--urgent); font-weight: 900; font-size: 14px; }
.flash-banner-centered .countdown-sep { font-size: 18px; }

/* =========================================================================
   CAROUSEL
   ========================================================================= */
.carousel-wrap { position: relative; }
.carousel-arrow {
  position: absolute;
  /* v0.3.120 — was hardcoded `top: 100px` (assumed a fixed card height
     from a much earlier layout). With the current responsive cards
     using `aspect-ratio: 600/900`, that position landed near the top
     of the cover instead of centered. Anchor to the cover area: 35%
     from the top of `.carousel-wrap` puts the arrow at the visual
     center of the card image, ignoring the title/price block below.
     `transform: translateY(-50%)` centers the arrow itself on that
     point so the calculation is independent of the arrow's height. */
  top: 35%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px; height: 40px;
  background: rgba(14,16,20,0.94);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.carousel-arrow:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.carousel-arrow.swiper-button-disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.carousel-prev { left: -20px; }
.carousel-next { right: -20px; }

/* =========================================================================
   PRODUCT CARD — REDESIGNED v3 (single hero price + small Pri subtext)
   ========================================================================= */
.product-card { display: block; cursor: pointer; position: relative; text-decoration: none; color: inherit; }

/* Whole-card click overlay — sits absolute over `.cover` to make the
   entire card clickable. Must be a SIBLING of the interactive elements
   (wishlist button, quick-add link) inside .cover, NOT a parent of them.
   z-index 1 lets it cover the image but stay below the wishlist heart
   (z-index 4) and the cover-actions hover overlay (z-index 5). */
.product-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  text-decoration: none;
  /* No visual treatment — pure click target. */
}
.product-card-link:hover,
.product-card-link:focus { outline: none; }

/* Title is now a real <a> for accessibility (separate click target +
   landmark for screen readers). Inherits color, no underline. */
.product-card .title-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.product-card .title-link:hover { color: var(--accent); }
.cover {
  position: relative;
  aspect-ratio: 600 / 900;
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: border-color .2s, transform .25s ease;
}
.cover.loading {
  background: linear-gradient(90deg, #16181d 0%, #1c1f25 50%, #16181d 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.product-card:hover .cover { border-color: var(--accent); transform: translateY(-4px); }
/* Image fit policy — CHANGED v0.3.99 per client request: never crop any
   image. Was `object-fit: cover` with `object-position: top` (which
   matched the grid visually but cropped tall game covers). Now uses
   `object-fit: contain` so the FULL image renders inside the card —
   any image whose aspect ratio differs from 600/900 gets letterboxed
   against the card's surface background, but no content is ever cut
   off (PS4/PS5 ribbon, WhatsApp number, rating logos all stay visible).

   Bulletproof rules below: WC's `wp_get_attachment_image()` injects
   inline `width=""` / `height=""` HTML attributes from the source image
   (e.g. 600×900). On some browsers/themes these win over our 100%/100%
   sizing inside Swiper slides, causing the image to render at its
   intrinsic size which may be wider than the .cover container. Force
   `width:100%! / height:100%!` to defeat the inline attrs.  */
.cover img,
.product-card .cover img,
.swiper-slide.product-card .cover img,
.swiper-slide .cover img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transition: transform .4s ease;
  background: var(--surface);
}
/* Defensive: if a parent theme/WP CSS reset sets `img { aspect-ratio: auto }`,
   our `.cover { aspect-ratio: 600/900 }` is what holds the layout. Make
   sure nothing overrides it. */
.product-card .cover,
.swiper-slide.product-card .cover {
  aspect-ratio: 600 / 900 !important;
  min-height: 0 !important;
  display: block !important;
}
.product-card:hover .cover img { transform: scale(1.05); }

.discount-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--sale); color: var(--sale-text);
  padding: 4px 7px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.02em;
  z-index: 3;
  /* v0.3.135 — accommodate the 2-line "En oferta / -45%" layout via
     inner spans. Falls back gracefully for legacy single-line badges
     (`.discount-badge.new-badge` etc.) which don't have inner spans
     and inherit their original look. */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}
.discount-badge .discount-badge-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.92;
}
.discount-badge .discount-badge-pct {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.discount-badge.new-badge { background: var(--accent); color: #0a0a0a; }
.discount-badge.hot-badge { background: var(--urgent); color: #fff; }

.wishlist-btn {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s, color .15s, background-color .15s;
}
.product-card:hover .wishlist-btn { opacity: 1; transform: translateY(0); }
.wishlist-btn:hover { color: var(--accent); background: rgba(14,16,20,0.95); }
.wishlist-btn.is-active { color: var(--accent); }

.platform-tag {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 3px 7px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}

.cover-actions {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px;
  background: linear-gradient(0deg, rgba(14,16,20,0.95) 0%, rgba(14,16,20,0) 100%);
  transform: translateY(100%);
  transition: transform .25s ease;
  z-index: 4;     /* always above countdown bar + platform tag */
}
.product-card:hover .cover-actions { transform: translateY(0); }
/* Quick-view button on product-card hover. Icon-only (eye) — opens the
   full product page on click. Used to be a "Agregar" CTA but client
   wanted a cleaner hover overlay; an eye icon reads as "view details"
   universally and avoids the hover-add UX which collides with the
   variation-required Sec/Pri tier flow. */
.quick-add {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 10px;
  background: var(--accent); color: #0a0a0a;
  border: none;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s, transform .1s;
  cursor: pointer;
}
.quick-add:hover { background: var(--accent-hover); }
.quick-add:active { transform: translateY(1px); }
.quick-add i { font-size: 16px; }

.info { padding: 6px 0 4px; }     /* LEFT-aligned by default */
.title {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 1.3em;
}

/* NEW PRICE LAYOUT — main hero price + small Pri subline */
.prices {
  display: flex; flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.price-main {
  display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
}
.price-discount-pill {
  background: var(--sale);
  color: var(--sale-text);
  font-size: 10px; font-weight: 800;
  padding: 2px 6px;
  letter-spacing: 0.02em;
}
.price-current {
  color: var(--accent);
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.price-original {
  /* v0.3.134 — lighter gray + bigger so the old price is actually
     readable on cards (Andres reported it was too dark to scan).
     Same treatment applied to every other "old price" selector
     across the site for consistency. */
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.price-pri-line {
  display: flex; justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.price-pri-line .pri-label { font-weight: 600; }
.price-pri-line .pri-value {
  color: var(--text-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-pri-line .pri-value s { color: var(--text-4); font-weight: 500; margin-right: 4px; }

/* Single tier (streaming, accessories) — visual order: amount → was → /mes
   while DOM stays semantic (was first, amount, period). */
.price-single {
  display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);     /* divider line between title and price */
}
.price-single .single-amount {
  order: 1;          /* visually FIRST (current price big yellow) */
  color: var(--accent);
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.price-single .single-was {
  order: 2;          /* visually SECOND (struck old to the right of current) */
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
  font-size: 13px;
}
.price-single .single-period {
  order: 3;          /* visually LAST (/ mes) */
  font-size: 10px; color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: auto;
}

/* =========================================================================
   GENRE GRID
   ========================================================================= */
.genre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.genre-card {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .2s, transform .25s ease;
}
.genre-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.genre-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease, filter .25s ease;
  filter: saturate(0.85);
}
.genre-card:hover img { transform: scale(1.06); filter: saturate(1); }
.genre-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14,16,20,0.95) 0%, rgba(14,16,20,0.5) 35%, rgba(14,16,20,0.05) 70%);
  pointer-events: none;
}
.genre-info {
  position: absolute;
  bottom: 16px; left: 18px; right: 18px;
  z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
}
.genre-name {
  font-size: 22px; font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: uppercase;
}
.genre-count {
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.genre-arrow {
  position: absolute;
  bottom: 18px; right: 18px;
  z-index: 2;
  width: 32px; height: 32px;
  background: rgba(255,215,0,0.15);
  border: 1px solid var(--accent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background-color .2s, color .2s;
}
.genre-card:hover .genre-arrow { background: var(--accent); color: #0a0a0a; }

/* =========================================================================
   STREAMING CARD
   ========================================================================= */
.stream-cover {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: 24px 18px;
}
.stream-cover::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.18) 0%, transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.stream-logo-img {
  position: relative; z-index: 1;
  width: 75%;
  max-width: 200px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
.stream-fallback {
  position: relative; z-index: 1;
  font-size: 26px; font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1;
}
.stream-netflix { background: linear-gradient(135deg, #e50914 0%, #5a060c 100%); }
.stream-disney  { background: linear-gradient(135deg, #1a3c8a 0%, #0a1530 100%); }
.stream-spotify { background: linear-gradient(135deg, #1db954 0%, #0a4a25 100%); }
.stream-max     { background: linear-gradient(135deg, #002be7 0%, #0a0a45 100%); }
.stream-prime   { background: linear-gradient(135deg, #00a8e1 0%, #003a55 100%); }
.stream-star    { background: linear-gradient(135deg, #2A1F58 0%, #0a0a30 100%); }

/* =========================================================================
   ACCESORIO CARD
   ========================================================================= */
.accesorio-card .cover { aspect-ratio: 1 / 1; background: var(--surface-2); }
.accesorio-cover {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 60%, var(--bg) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.accesorio-cover::before {
  content: "";
  position: absolute; inset: 30%;
  background: radial-gradient(circle, rgba(255,215,0,0.05) 0%, transparent 70%);
}
.accesorio-icon {
  position: relative;
  font-size: 84px;
  color: var(--text-3);
  opacity: 0.7;
  transition: color .3s, opacity .3s, transform .4s;
}
.product-card:hover .accesorio-icon { color: var(--accent); opacity: 0.85; transform: scale(1.1); }

/* =========================================================================
   WHY US — 5 value props
   ========================================================================= */
.why-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 56px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.why-card {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 24px 18px;
  text-align: center;
  transition: border-color .2s, transform .2s;
}
.why-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.why-icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 22px;
}
.why-title {
  font-size: 12px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.why-text { font-size: 12px; color: var(--text-2); margin: 0; line-height: 1.5; }

/* =========================================================================
   TESTIMONIOS
   ========================================================================= */
.testimonios { padding: 56px 0 16px; }
.testimonios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 940px;
  margin: 0 auto;
}
.testimonio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px 26px;
  position: relative;
}
.testimonio-quote {
  font-size: 15px; color: var(--text);
  line-height: 1.65;
  margin: 0 0 18px;
}
.testimonio-quote::before {
  content: "“";
  display: block;
  font-size: 48px;
  color: var(--accent);
  font-family: Georgia, serif;
  line-height: 0.5;
  height: 24px;
  opacity: 0.5;
}
.testimonio-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.testimonio-avatar {
  width: 42px; height: 42px;
  background: var(--surface-3);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-weight: 900; font-size: 14px;
  border: 1px solid var(--border-2);
}
.testimonio-meta { display: flex; flex-direction: column; gap: 2px; }
.testimonio-name { font-size: 14px; font-weight: 700; color: #fff; }
.testimonio-handle {
  font-size: 11px; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.testimonio-handle i { color: #E1306C; }

/* =========================================================================
   TRUSTPILOT STRIP
   ========================================================================= */
.review-strip {
  margin-top: 56px;
  padding: 28px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.review-strip-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
  text-align: center;
}
.review-block { display: flex; align-items: center; gap: 12px; }
.review-label { font-size: 14px; font-weight: 700; color: #fff; }
.review-stars { display: inline-flex; gap: 2px; }
.review-star {
  width: 24px; height: 24px;
  background: var(--sale);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
}
.review-score { font-size: 13px; color: var(--text-2); font-weight: 500; }
.review-score strong { color: #fff; font-weight: 700; }
.review-divider { width: 1px; height: 32px; background: var(--border-2); }
.review-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2);
  font-size: 13px; font-weight: 600;
  transition: color .15s, gap .15s;
}
.review-link:hover { color: var(--accent); gap: 10px; }
.review-trustpilot-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.review-trustpilot-mark .tp-star { color: var(--sale); font-size: 14px; }
.review-trustpilot-mark strong { color: #fff; font-weight: 700; letter-spacing: -0.01em; }

/* =========================================================================
   WHATSAPP FLOATING
   ========================================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  background: #25D366; color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 24px rgba(37,211,102,0.35);
  z-index: 50;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37,211,102,0.5); }
.whatsapp-float::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0.6;
  animation: ws-pulse 2s ease-in-out infinite;
}
@keyframes ws-pulse {
  0% { transform: scale(0.95); opacity: 0.6; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  flex-shrink: 0;
  padding: 56px 0 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer-col h4 {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 10px;
}
.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--accent);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 13px; color: var(--text-2); transition: color .15s; }
.footer-col a:hover { color: var(--accent); }
.footer-about p {
  font-size: 13px; color: var(--text-2);
  margin: 0 0 18px;
  max-width: 380px;
  line-height: 1.65;
}
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-2);
}
.footer-contact a:hover { color: var(--accent); }
.footer-contact i { color: var(--accent); width: 16px; text-align: center; font-size: 13px; }
.footer-social { display: flex; gap: 8px; margin-top: 6px; }
.footer-social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  transition: color .15s, border-color .15s, background-color .15s;
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  flex-wrap: wrap;
  gap: 16px;
}
.payment-methods { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.payment-methods .pm {
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--text-2);
}

/* =========================================================================
   PAGE SHELLS — breadcrumbs, page header
   ========================================================================= */
.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}
.breadcrumbs {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 10px;
  display: flex; gap: 6px; align-items: center;
}
.breadcrumbs a { color: var(--text-2); transition: color .15s; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs i { font-size: 9px; }
.page-title {
  font-size: 32px; font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
  color: #fff;
}
.page-title .count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-3);
  margin-left: 12px;
  letter-spacing: 0;
}

/* =========================================================================
   SHOP PAGE — sidebar layout
   ========================================================================= */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  margin-top: 32px;
}
.shop-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
}
.filter-block {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px;
  margin-bottom: 16px;
}
.filter-block h4 {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.filter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.filter-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.filter-list a:hover { background: var(--surface-2); color: var(--text); }
.filter-list a.is-active { background: var(--accent-soft); color: var(--accent); }
.filter-list .filter-count {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
}
.filter-list a.is-active .filter-count { color: var(--accent); }

.checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  padding: 6px 0;
}
.checkbox-row input { accent-color: var(--accent); width: 14px; height: 14px; }
.checkbox-row:hover { color: var(--text); }

.price-range {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.price-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 10px;
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.shop-toolbar .results-count { font-size: 13px; color: var(--text-2); }
.shop-toolbar .results-count strong { color: #fff; }
.shop-sort {
  display: flex; align-items: center; gap: 8px;
}
.shop-sort label { font-size: 12px; color: var(--text-3); }
.shop-sort select {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 10px;
  color: var(--text);
  font-size: 12px;
}

.products-grid {
  display: grid;
  /* 5 columns on desktop per client request (v0.3.99 — was 4). The
     responsive overrides further down clamp this to 4/3/2 as the
     viewport narrows so cards never look microscopic. */
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1280px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 4px;
  margin-top: 32px;
}
.pagination a, .pagination span {
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  transition: all .15s;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}
.pagination .dots { border: none; }

/* =========================================================================
   PRODUCT DETAIL PAGE
   ========================================================================= */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 32px;
}
.detail-gallery {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-cover {
  /* CHANGED v0.3.99: image uses `object-fit: contain` so the full game
     cover (PS4/PS5 ribbon, WhatsApp #, ratings) shows without crop.
     Aspect ratio relaxed to 4/5 with no fixed max-height — the card
     adapts to whatever the image is, eliminating the big black gap
     between the cover and the right-column info that the client reported.
     `min-height: 420px` keeps a sensible floor for square/landscape art. */
  aspect-ratio: 4 / 5;
  min-height: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.detail-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: var(--surface);
  transition: transform .35s cubic-bezier(.18,.6,.25,1);
  transform-origin: var(--lyx-zoom-x, 50%) var(--lyx-zoom-y, 50%);
}
/* Hover zoom — pure CSS scale; the `--lyx-zoom-x/y` custom props are
   updated on mousemove by lyx-app.js so the zoom focal point follows
   the cursor. Falls back to centered zoom if JS hasn't run. */
.detail-cover:hover img,
.detail-cover.is-zoomed img {
  transform: scale(1.6);
}
.detail-cover .discount-badge {
  font-size: 14px; padding: 6px 10px;
}

.detail-info { display: flex; flex-direction: column; gap: 20px; }
.detail-platform {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  width: fit-content;
}
.detail-title {
  font-size: 36px; font-weight: 900;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.detail-rating {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
}
.detail-rating .stars { color: #fbbf24; display: inline-flex; gap: 1px; font-size: 14px; }
.detail-rating strong { color: #fff; }

/* Tier selector — like radio buttons */
.tier-selector { display: flex; flex-direction: column; gap: 10px; }
.tier-selector h3 {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.tier-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tier-option {
  background: var(--surface);
  border: 2px solid var(--border);
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  position: relative;
}
.tier-option:hover { border-color: var(--border-2); }
.tier-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tier-option.is-selected::before {
  content: "✓";
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  background: var(--accent);
  color: #0a0a0a;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.tier-option .tier-name {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
.tier-option.is-selected .tier-name { color: var(--accent); }
.tier-option .tier-price {
  font-size: 22px; font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tier-option .tier-old-price {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  text-decoration: line-through;
  margin-top: 2px;
}
.tier-option .tier-desc {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.4;
}

.detail-price-summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.detail-price-summary .label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.detail-price-summary .price {
  font-size: 32px; font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.detail-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qty-selector {
  display: inline-flex; align-items: center;
  width: fit-content;        /* never stretch to fill its parent grid cell */
  max-width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
}
.qty-selector button {
  width: 40px; height: 44px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  transition: color .15s;
}
.qty-selector button:hover { color: var(--accent); }
.qty-selector input {
  width: 50px; height: 44px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.qty-selector input::-webkit-outer-spin-button,
.qty-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.detail-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.detail-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-2);
}
.detail-feature i { color: var(--accent); font-size: 14px; }

/* Tabs */
.detail-tabs {
  margin-top: 56px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 4px;
  overflow-x: auto;       /* horizontal scroll on tiny screens */
  scrollbar-width: none;
}
.detail-tabs::-webkit-scrollbar { display: none; }
.detail-tab { white-space: nowrap; }
.detail-tab {
  padding: 12px 20px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.detail-tab:hover { color: var(--text); }
.detail-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.detail-panel { padding: 32px 0; display: none; }
.detail-panel.is-active { display: block; }
.detail-panel h3 {
  font-size: 18px; font-weight: 800;
  margin: 0 0 14px;
  color: #fff;
}
.detail-panel p {
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 0 14px;
}
.detail-panel ul { color: var(--text-2); line-height: 1.7; padding-left: 22px; }

/* =========================================================================
   CART PAGE
   ========================================================================= */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  margin-top: 32px;
}
.cart-items {
  display: flex; flex-direction: column;
  gap: 12px;
}
.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  align-items: center;
}
.cart-item-image {
  width: 100px; aspect-ratio: 600/900;
  background: var(--surface-2);
  overflow: hidden;
  border: 1px solid var(--border);
}
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { display: flex; flex-direction: column; gap: 6px; }
.cart-item-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.cart-item-meta {
  display: flex; gap: 10px;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cart-item-tier {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 6px;
  border: 1px solid var(--accent-line);
}
.cart-item-price {
  font-size: 18px; font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cart-item-remove {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: color .15s, border-color .15s;
}
.cart-item-remove:hover { color: var(--urgent); border-color: var(--urgent); }
.cart-item .qty-selector { transform: scale(0.85); transform-origin: left; }

.cart-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}
.cart-summary h3 {
  font-size: 14px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.summary-row {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: var(--text-2);
  padding: 8px 0;
}
.summary-row.summary-total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 16px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}
.summary-row.summary-total .amount {
  color: var(--accent);
  font-size: 24px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.coupon-input {
  display: flex; gap: 6px;
  margin: 16px 0;
}
.coupon-input input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
}
.coupon-input button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: border-color .15s, color .15s;
}
.coupon-input button:hover { border-color: var(--accent); color: var(--accent); }

/* Bulletproof coupon "APLICAR" button — WC's `.woocommerce form .button`
   (0,0,3,0) was beating our `.coupon-input button` (0,0,1,1) and
   rendering it light gray. Override with matching specificity + the
   button[type="submit"] class combo. */
body .coupon-input button,
body .lyx-cart-coupon button,
body .lyx-cart-coupon button.button,
body .lyx-cart-coupon button[type="submit"],
.woocommerce-page .coupon-input button,
.woocommerce-page .lyx-cart-coupon button,
.woocommerce form .lyx-cart-coupon button.button,
.woocommerce form .coupon-input button {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #0a0a0a !important;
  padding: 0 22px !important;
  /* Lock height + line-height so the button stays exactly the same
     vertical size as the coupon input (44px). Was `height: auto`
     which let the button grow taller than the input on some browsers
     once font-rendering / line-box was computed. */
  height: 44px !important;
  min-height: 44px !important;
  line-height: 44px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  text-shadow: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .15s, transform .1s !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
body .coupon-input button:hover,
body .lyx-cart-coupon button:hover,
.woocommerce-page .lyx-cart-coupon button:hover,
.woocommerce form .lyx-cart-coupon button.button:hover {
  background: var(--accent-hover) !important;
  background-color: var(--accent-hover) !important;
  color: #0a0a0a !important;
  border: 0 !important;
}
body .coupon-input button:active,
body .lyx-cart-coupon button:active { transform: translateY(1px); }

/* Bulletproof Update / Continue shopping buttons — same WC `.button`
   selector tries to gray these out. Force them to our btn-secondary look. */
body .lyx-cart-actions-row button.btn-secondary,
body .lyx-cart-actions-row a.btn-secondary,
.woocommerce-page .lyx-cart-actions-row button.btn-secondary,
.woocommerce form .lyx-cart-actions-row button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  padding: 0 18px !important;
  min-height: 42px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
body .lyx-cart-actions-row button.btn-secondary:hover,
body .lyx-cart-actions-row a.btn-secondary:hover,
.woocommerce-page .lyx-cart-actions-row button.btn-secondary:hover,
.woocommerce form .lyx-cart-actions-row button:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--surface-2) !important;
  background-color: var(--surface-2) !important;
}

/* Coupon input field too — WC's woocommerce.css can leak input styling.
   Height locked to 44px to match the APLICAR button exactly. */
body .coupon-input input,
body .lyx-cart-coupon input,
.woocommerce-page .lyx-cart-coupon input,
.woocommerce form .lyx-cart-coupon input[type="text"] {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-right: 0 !important;
  color: var(--text) !important;
  padding: 0 14px !important;
  height: 44px !important;
  min-height: 44px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30) !important;
}
body .coupon-input input:focus,
body .lyx-cart-coupon input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}

/* =========================================================================
   CART (WC overrides) — empty state, summary additions, action row
   ========================================================================= */

/* Empty cart — brand-led state with icon, headline, dual CTAs, trust strip. */
.lyx-cart-empty {
  text-align: center;
  padding: 64px 24px 56px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  margin: 32px 0 60px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02);
}
.lyx-cart-empty-icon {
  width: 88px; height: 88px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(255,215,0,0.10);
  border: 1px solid rgba(255,215,0,0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 34px;
}
.lyx-cart-empty-title {
  margin: 0 0 12px;
  font-size: 28px; font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}
.lyx-cart-empty-sub {
  max-width: 460px;
  margin: 0 auto 28px;
  font-size: 14px; line-height: 1.65;
  color: var(--text-2);
}
.lyx-cart-empty-actions {
  display: inline-flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}
.lyx-cart-empty-actions .btn-primary,
.lyx-cart-empty-actions .btn-whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
}
.lyx-cart-empty-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  max-width: 560px; margin: 0 auto;
}
.lyx-cart-empty-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.lyx-cart-empty-trust-item i { color: var(--accent); font-size: 14px; }
@media (max-width: 600px) {
  .lyx-cart-empty { padding: 44px 18px; margin: 20px 0 40px; }
  .lyx-cart-empty-title { font-size: 22px; }
  .lyx-cart-empty-actions { flex-direction: column; width: 100%; }
  .lyx-cart-empty-actions .btn-primary,
  .lyx-cart-empty-actions .btn-whatsapp { width: 100%; justify-content: center; }
  .lyx-cart-empty-trust { gap: 14px 22px; padding-top: 20px; }
}

/* Cart actions row — inline coupon + update + continue shopping */
.lyx-cart-actions-row {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: 8px; margin-top: 18px;
}
.lyx-cart-actions-row .coupon-input { margin: 0; flex: 1 1 280px; min-width: 240px; }
.lyx-cart-actions-row .btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
}
@media (max-width: 600px) {
  .lyx-cart-actions-row { flex-direction: column; }
  .lyx-cart-actions-row .btn-secondary { justify-content: center; }
}

/* Cart summary additions — coupon row, CTA stack, payment block, trust */
.lyx-cart-summary { box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02); }
.lyx-cart-coupon-row .lyx-cart-coupon-remove {
  color: var(--text-3);
  margin-left: 4px;
  transition: color .15s;
  font-size: 11px;
}
.lyx-cart-coupon-row .lyx-cart-coupon-remove:hover { color: var(--urgent); }
.lyx-cart-cta-stack {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.lyx-cart-cta-stack .btn-primary,
.lyx-cart-cta-stack .btn-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
}
.lyx-cart-checkout-cta {
  padding: 14px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.lyx-cart-pm-block {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.lyx-cart-pm-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.lyx-cart-trust {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12px; color: var(--text-2);
}
.lyx-cart-trust-row { display: flex; align-items: center; gap: 8px; }
.lyx-cart-trust-row i { color: var(--accent); width: 16px; text-align: center; }

/* WC's quantity input in our cart — narrow it visually */
.lyx-cart-qty input.qty,
.lyx-cart-qty input[type="number"] {
  width: 56px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: #fff;
  padding: 6px 8px;
  font-size: 13px;
  text-align: center;
}
.lyx-cart-qty input.qty:focus,
.lyx-cart-qty input[type="number"]:focus {
  border-color: var(--accent);
  outline: none;
}

/* WC may add `.woocommerce` wrapper; strip its bg */
.woocommerce-cart-form,
.woocommerce-cart-form .cart_item { background: transparent !important; }

/* =========================================================================
   CHECKOUT (WC overrides) — billing fields, totals, payment, place order
   The mockup's `.checkout-layout`, `.checkout-block`, `.payment-option`
   classes already exist above. The overrides below force WC's default
   markup (form-row, input-text, payment_methods, etc.) into our look.
   ========================================================================= */

/* Layout */
body .lyx-checkout-form { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; max-width: none !important; }
body .lyx-checkout-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  gap: 32px !important;
  margin: 8px 0 60px !important;
}
@media (max-width: 1080px) {
  body .lyx-checkout-layout { grid-template-columns: minmax(0, 1fr) 340px !important; gap: 24px !important; }
}
@media (max-width: 920px) {
  body .lyx-checkout-layout { grid-template-columns: 1fr !important; gap: 18px !important; }
}
@media (max-width: 600px) {
  body .lyx-checkout-layout { margin: 4px 0 40px !important; }
  body .lyx-checkout-block { padding: 18px 16px 22px !important; }
  body .lyx-checkout-summary-col { padding: 18px 16px 20px !important; }
}

body .lyx-checkout-form-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
body .lyx-checkout-block {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  padding: 22px 24px 26px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.02);
}
body .lyx-checkout-block h3 {
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #fff; margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
body .lyx-step-optional {
  margin-left: auto;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--text-3);
}

/* WC's billing/customer details — convert tableless WC `.form-row` to grid */
body .lyx-checkout-customer-details .col2-set { display: contents; }
body .lyx-checkout-customer-details .col-1,
body .lyx-checkout-customer-details .col-2 { width: 100% !important; max-width: none !important; float: none !important; }
body .lyx-checkout-customer-details h3 { display: none !important; } /* "Billing details" / "Additional information" — replaced by our step heading */

body .lyx-checkout-customer-details .woocommerce-billing-fields__field-wrapper,
body .lyx-checkout-customer-details .woocommerce-additional-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
@media (max-width: 600px) {
  body .lyx-checkout-customer-details .woocommerce-billing-fields__field-wrapper,
  body .lyx-checkout-customer-details .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* Each WC `.form-row` becomes a vertical label+input cell */
body .lyx-checkout-customer-details p.form-row,
body .lyx-checkout-customer-details .form-row,
body .lyx-checkout-additional p.form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
  background: transparent !important;
}
body .lyx-checkout-customer-details .form-row-wide,
body .lyx-checkout-customer-details .notes,
body .lyx-checkout-customer-details #billing_email_field,
body .lyx-checkout-additional #order_comments_field {
  grid-column: 1 / -1 !important;
}

/* v0.3.100 — bulletproof hide for address fields on digital-only carts.
   Belt-and-braces: the PHP filter unsets these fields entirely, but if
   LiteSpeed serves a cached HTML snapshot from before the upgrade these
   selectors still kill the visible rows. The `:has()` guard scopes the
   rule to checkout pages where the cart needs no shipping (we tag the
   checkout body via `.lyx-cart-digital` from class-checkout.php). */
body.lyx-cart-digital #billing_company_field,
body.lyx-cart-digital #billing_country_field,
body.lyx-cart-digital #billing_state_field,
body.lyx-cart-digital #billing_address_1_field,
body.lyx-cart-digital #billing_address_2_field,
body.lyx-cart-digital #billing_city_field,
body.lyx-cart-digital #billing_postcode_field,
body.lyx-cart-digital #billing_phone_field {
  display: none !important;
}

/* Labels — small uppercase tracked, like the mockup */
body .lyx-checkout-customer-details .form-row > label,
body .lyx-checkout-additional .form-row > label,
body .lyx-checkout-form .form-row > label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  float: none !important;
}
body .lyx-checkout-customer-details .required,
body .lyx-checkout-additional .required {
  color: var(--urgent) !important;
  text-decoration: none !important;
  border: 0 !important;
}
body .lyx-checkout-customer-details .optional,
body .lyx-checkout-additional .optional {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: lowercase !important;
  color: var(--text-3) !important;
  font-style: italic !important;
}

/* Inputs / textareas / selects */
body .lyx-checkout-customer-details .input-text,
body .lyx-checkout-customer-details select,
body .lyx-checkout-customer-details textarea,
body .lyx-checkout-additional .input-text,
body .lyx-checkout-additional textarea,
body .lyx-checkout-payment input[type="text"],
body .lyx-checkout-payment input[type="email"],
body .lyx-checkout-payment input[type="tel"],
body .lyx-checkout-payment input[type="number"],
body .lyx-checkout-payment select,
body .lyx-checkout-payment textarea {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30) !important;
  transition: border-color .15s, background-color .15s !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 44px !important;
}
body .lyx-checkout-customer-details textarea,
body .lyx-checkout-additional textarea { min-height: 90px !important; resize: vertical !important; }

body .lyx-checkout-customer-details .input-text:focus,
body .lyx-checkout-customer-details select:focus,
body .lyx-checkout-customer-details textarea:focus,
body .lyx-checkout-additional .input-text:focus,
body .lyx-checkout-additional textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.12), inset 0 1px 2px rgba(0,0,0,0.30) !important;
}

body .lyx-checkout-customer-details .input-text::placeholder,
body .lyx-checkout-customer-details textarea::placeholder,
body .lyx-checkout-additional .input-text::placeholder,
body .lyx-checkout-additional textarea::placeholder {
  color: var(--text-4) !important;
  opacity: 1 !important;
}

/* Select2 (country / state) — make it match our dark inputs */
body .lyx-checkout-customer-details .select2-container,
body .lyx-checkout-payment .select2-container { width: 100% !important; }
body .lyx-checkout-customer-details .select2-container .select2-selection,
body .lyx-checkout-payment .select2-container .select2-selection {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30) !important;
}
body .lyx-checkout-customer-details .select2-container .select2-selection__rendered,
body .lyx-checkout-payment .select2-container .select2-selection__rendered {
  color: #fff !important;
  line-height: 44px !important;
  padding: 0 !important;
  font-size: 13px !important;
}
body .lyx-checkout-customer-details .select2-container .select2-selection__placeholder,
body .lyx-checkout-payment .select2-container .select2-selection__placeholder { color: var(--text-4) !important; }
body .lyx-checkout-customer-details .select2-container .select2-selection__arrow,
body .lyx-checkout-payment .select2-container .select2-selection__arrow {
  height: 44px !important;
  top: 0 !important;
  right: 8px !important;
}
body .lyx-checkout-customer-details .select2-container--default .select2-selection__arrow b,
body .lyx-checkout-payment .select2-container--default .select2-selection__arrow b {
  border-color: var(--text-2) transparent transparent transparent !important;
}
body .lyx-checkout-customer-details .select2-container--open .select2-selection,
body .lyx-checkout-payment .select2-container--open .select2-selection {
  border-color: var(--accent) !important;
}
/* select2 dropdown popover (rendered at body root) */
.select2-container--default .select2-dropdown {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: #fff !important;
  padding: 8px 10px !important;
}
.select2-container--default .select2-results__option {
  color: var(--text) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--accent) !important;
  color: #0a0a0a !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--surface-3) !important;
  color: #fff !important;
}

/* Coupon toggle banner at top — already styled via .lyx-notice but tighten margins */
body .lyx-coupon-toggle { margin: 0 0 18px !important; }
body .lyx-checkout-coupon { margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; }
body .lyx-checkout-coupon::before, body .lyx-checkout-coupon::after { display: none !important; }

/* RIGHT COLUMN — order summary card */
body .lyx-checkout-summary-col {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  padding: 22px 24px 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02);
  display: flex; flex-direction: column;
}
@media (max-width: 920px) {
  body .lyx-checkout-summary-col { position: static; }
}
body .lyx-checkout-summary-title {
  margin: 0 0 16px;
  font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #fff;
}

/* Line items list */
.lyx-checkout-items {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.lyx-checkout-item { display: flex; gap: 12px; }
.lyx-checkout-item-thumb {
  width: 54px; aspect-ratio: 600/900;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.lyx-checkout-item-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.lyx-checkout-item-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 0; }
.lyx-checkout-item-title { color: #fff; font-weight: 700; font-size: 13px; line-height: 1.3; }
.lyx-checkout-item-tier { color: var(--text-3); font-size: 11px; }
.lyx-checkout-item-price { color: var(--accent); font-weight: 800; font-size: 13px; }
.lyx-checkout-item-price .woocommerce-Price-amount { color: var(--accent); }

/* Totals */
.lyx-checkout-totals { display: flex; flex-direction: column; gap: 0; }
.lyx-checkout-totals .summary-row { padding: 6px 0; font-size: 13px; }
.lyx-checkout-coupon-row { color: var(--text-2); }

/* Fineprint container — privacy text + terms checkbox above PAGAR AHORA. */
body .lyx-checkout-fineprint {
  margin: 16px 0 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border) !important;
  font-size: 11.5px !important;
  color: var(--text-3) !important;
  line-height: 1.55 !important;
}
body .lyx-checkout-fineprint p { margin: 0 0 8px !important; }
body .lyx-checkout-fineprint p:last-child { margin: 0 !important; }
body .lyx-checkout-fineprint a { color: var(--accent) !important; }
body .lyx-checkout-fineprint .form-row { padding: 0 !important; margin: 6px 0 0 !important; }
body .lyx-checkout-fineprint label { color: var(--text-2) !important; font-size: 12px !important; }

/* Show total inline on the CTA button — "PAGAR AHORA — $39.900" */
body .lyx-checkout-cta-total {
  font-weight: 900 !important;
  margin-left: 4px !important;
}
body .lyx-checkout-cta-total .woocommerce-Price-amount,
body .lyx-checkout-cta-total bdi { color: #0a0a0a !important; }

/* =========================================================================
   Step 4 — Notas adicionales (separate container, full-width textarea)
   ========================================================================= */
body .lyx-checkout-additional-fields,
body .lyx-checkout-additional {
  display: block !important;
  width: 100% !important;
}
body .lyx-checkout-additional-fields p.form-row,
body .lyx-checkout-additional p.form-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
  background: transparent !important;
}
body .lyx-checkout-additional-fields p.form-row > label,
body .lyx-checkout-additional p.form-row > label,
body .lyx-checkout-additional-fields .form-row label,
body .lyx-checkout-additional .form-row label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  float: none !important;
  text-align: left !important;
}
body .lyx-checkout-additional-fields .woocommerce-input-wrapper,
body .lyx-checkout-additional .woocommerce-input-wrapper {
  display: block !important;
  width: 100% !important;
}
body .lyx-checkout-additional-fields textarea,
body .lyx-checkout-additional textarea,
body .lyx-checkout-additional-fields .input-text,
body .lyx-checkout-additional .input-text {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-family: inherit !important;
  line-height: 1.55 !important;
  min-height: 100px !important;
  resize: vertical !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30) !important;
  transition: border-color .15s, background-color .15s, box-shadow .15s !important;
}
body .lyx-checkout-additional-fields textarea::placeholder,
body .lyx-checkout-additional textarea::placeholder,
body .lyx-checkout-additional-fields .input-text::placeholder,
body .lyx-checkout-additional .input-text::placeholder {
  color: var(--text-4) !important;
  opacity: 1 !important;
}
body .lyx-checkout-additional-fields textarea:focus,
body .lyx-checkout-additional textarea:focus,
body .lyx-checkout-additional-fields .input-text:focus,
body .lyx-checkout-additional .input-text:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  background: var(--surface-2) !important;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.12), inset 0 1px 2px rgba(0,0,0,0.30) !important;
}

/* =========================================================================
   FIELD VALIDATION — branded error + valid states
   WC adds `.woocommerce-invalid` to fields that fail validation and
   `.woocommerce-validated` to fields that pass. WC's defaults paint a
   thin colored bottom-border which barely shows on dark backgrounds.
   Force a full red border + red glow + inline icon for errors, green
   border + green check for validated fields.
   ========================================================================= */

/* Error state — red left border + red glow + small ! icon overlay */
body .form-row.woocommerce-invalid .input-text,
body .form-row.woocommerce-invalid select,
body .form-row.woocommerce-invalid textarea,
body .form-row.woocommerce-invalid-required-field .input-text,
body .form-row.woocommerce-invalid-required-field select,
body .form-row.woocommerce-invalid-required-field textarea,
body .form-row.woocommerce-invalid-email .input-text,
body .form-row.woocommerce-invalid-phone .input-text,
body .form-row.woocommerce-invalid-postcode .input-text {
  border-color: var(--urgent) !important;
  border-left-width: 3px !important;
  background: rgba(239,68,68,0.06) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10), inset 0 1px 2px rgba(0,0,0,0.30) !important;
}
body .form-row.woocommerce-invalid .select2-container .select2-selection,
body .form-row.woocommerce-invalid-required-field .select2-container .select2-selection {
  border-color: var(--urgent) !important;
  border-left-width: 3px !important;
  background: rgba(239,68,68,0.06) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.10), inset 0 1px 2px rgba(0,0,0,0.30) !important;
}
body .form-row.woocommerce-invalid > label,
body .form-row.woocommerce-invalid-required-field > label {
  color: var(--urgent) !important;
}
/* Inline error message under the field */
body .form-row.woocommerce-invalid::after,
body .form-row.woocommerce-invalid-required-field::after {
  content: '\f06a  Este campo es obligatorio.';
  display: block;
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  font-size: 11px;
  color: var(--urgent);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
body .form-row.woocommerce-invalid-email::after { content: '\f06a  Por favor ingresa un correo v\00e1lido.'; }
body .form-row.woocommerce-invalid-phone::after { content: '\f06a  Por favor ingresa un tel\00e9fono v\00e1lido.'; }
body .form-row.woocommerce-invalid-postcode::after { content: '\f06a  Por favor ingresa un c\00f3digo postal v\00e1lido.'; }

/* Valid state — green left border, no message */
body .form-row.woocommerce-validated .input-text,
body .form-row.woocommerce-validated select,
body .form-row.woocommerce-validated textarea {
  border-color: var(--sale) !important;
  border-left-width: 3px !important;
}
body .form-row.woocommerce-validated .select2-container .select2-selection {
  border-color: var(--sale) !important;
  border-left-width: 3px !important;
}

/* Generic HTML5 invalid state (when user submits with empty required and
   browser validation kicks in before WC AJAX) */
body .form-row .input-text:invalid:not(:placeholder-shown):not(:focus),
body .lyx-checkout-customer-details .input-text:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--urgent) !important;
}

/* Top-of-form error summary banner — WC's `.woocommerce-NoticeGroup-checkout`
   contains the consolidated error notice. Force our `.lyx-notice-error` look. */
body .woocommerce-NoticeGroup-checkout,
body .woocommerce-NoticeGroup-updateOrderReview {
  margin: 0 0 16px !important;
}
body .woocommerce-NoticeGroup-checkout .woocommerce-error,
body .woocommerce-NoticeGroup-updateOrderReview .woocommerce-error {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  background: linear-gradient(180deg, rgba(239,68,68,0.10) 0%, var(--surface) 60%) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--urgent) !important;
  list-style: none !important;
  color: var(--text) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  margin: 0 0 12px !important;
}
body .woocommerce-NoticeGroup-checkout .woocommerce-error li,
body .woocommerce-NoticeGroup-updateOrderReview .woocommerce-error li {
  list-style: none !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
body .woocommerce-NoticeGroup-checkout .woocommerce-error li::before,
body .woocommerce-NoticeGroup-updateOrderReview .woocommerce-error li::before {
  content: '\f071';
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  color: var(--urgent);
  margin-right: 8px;
  font-size: 12px;
}

/* Kill WC's default `#payment` panel background — woocommerce.css ships
   `.woocommerce-checkout #payment { background: #ebe9eb }` which shows
   through as a light yellowish wash over our dark payment block.
   Same with `.woocommerce-checkout #payment ul.payment_methods` borders
   and the `::before` triangle indicator on payment_box. */
body #payment,
body .woocommerce-checkout #payment,
body .lyx-checkout-payment {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
body #payment ul.payment_methods,
body .woocommerce-checkout #payment ul.payment_methods {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* v0.3.144 — `:not(.lyx-pm-li)` excludes our custom payment cards
   from the WC-default LI killer. Without this exclusion, the rule
   was wiping border + padding off our cards even when an option was
   selected, breaking the gold border AND interacting weirdly with
   the flex-wrap width calculation. WC's other UL-payment LIs (any
   third-party gateway that injects a non-Lynxwell `<li>`) still get
   the cleanup since they don't carry `.lyx-pm-li`. */
body #payment ul.payment_methods li:not(.lyx-pm-li),
body .woocommerce-checkout #payment ul.payment_methods li:not(.lyx-pm-li) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
body #payment .payment_box::before,
body #payment .payment_box::after,
body .woocommerce-checkout #payment .payment_box::before,
body .woocommerce-checkout #payment .payment_box::after { display: none !important; content: none !important; }
body #payment div.form-row,
body .woocommerce-checkout #payment div.form-row {
  padding: 0 !important;
  background: transparent !important;
}

/* Payment options list — unstyle WC's UL.
 * v0.3.145 — BULLETPROOF approach: CSS Grid with explicit
 * `:nth-child` column assignment. Items cannot escape their forced
 * column regardless of content width, height, active state, or any
 * other rule. Odd children → col 1, even children → col 2.
 *
 * Why earlier attempts failed:
 *   - flex-wrap with `max-width: calc(50% - 4px)` should have
 *     constrained item width, but the active LI kept rendering at
 *     full width — likely some interaction between the WC-default
 *     `border: 0` killer + box-sizing math + the `:has()` rule. */
body .lyx-checkout-payment-options {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  align-items: start !important;
  align-content: start !important;
  /* `flex-direction: column` from `.payment-options` (also on this UL)
     becomes a no-op once display switches to grid. */
}
/* Force each LI to its specific column based on DOM order. With
   `nth-child`, the active item cannot grab an extra column or push
   row-mates out of position. */
body #payment ul.lyx-checkout-payment-options > li.lyx-pm-li,
body ul.lyx-checkout-payment-options > li.lyx-pm-li {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
body #payment ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(odd),
body ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(odd) {
  grid-column: 1 !important;
}
body #payment ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(even),
body ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(even) {
  grid-column: 2 !important;
}
@media (max-width: 600px) {
  body .lyx-checkout-payment-options { grid-template-columns: 1fr !important; }
  body #payment ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(odd),
  body ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(odd),
  body #payment ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(even),
  body ul.lyx-checkout-payment-options > li.lyx-pm-li:nth-child(even) {
    grid-column: 1 !important;
  }
}
body .lyx-pm-li {
  list-style: none !important;
  background: transparent !important;
  border: 2px solid transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: border-color .15s, background-color .15s !important;
}
/* v0.3.143 — gold border around the WHOLE <li> when its option is
   selected. CRITICAL: selectors include `#payment` (ID, specificity
   1-x-x) so they outrank the WC-default-killer rule above
   (`body #payment ul.payment_methods li { border: 0 !important; }`)
   which was preventing the active border from EVER painting.
   Three triggers cover every code path:
     1. `.is-selected` class on LI (server-rendered + JS-synced)
     2. `:has(.lyx-pm-option.is-selected)` — fallback via label's class
     3. `:has(input[type="radio"]:checked)` — fallback via radio state
*/
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li.is-selected,
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li:has(.lyx-pm-option.is-selected),
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li:has(input[type="radio"]:checked) {
  border: 2px solid var(--accent) !important;
  background: var(--accent-soft) !important;
}
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li.is-selected .lyx-pm-option,
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li:has(.lyx-pm-option.is-selected) .lyx-pm-option,
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li:has(input[type="radio"]:checked) .lyx-pm-option {
  border-color: transparent !important;
  background: transparent !important;
}
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li.is-selected .payment_box,
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li:has(.lyx-pm-option.is-selected) .payment_box,
body #payment ul.lyx-checkout-payment-options li.lyx-pm-li:has(input[type="radio"]:checked) .payment_box {
  border-top: 1px solid rgba(255, 215, 0, 0.25) !important;
  background: transparent !important;
  margin: 0 !important;
}
body .lyx-pm-option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: var(--bg) !important;
  border: 2px solid var(--border) !important;
  cursor: pointer !important;
  transition: border-color .15s, background-color .15s, transform .1s !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body .lyx-pm-option:hover { border-color: var(--border-2) !important; }
body .lyx-pm-option.is-selected {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
body .lyx-pm-option input[type="radio"] {
  accent-color: var(--accent) !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
body .lyx-pm-icon { flex-shrink: 0; width: 22px; text-align: center; }
body .lyx-pm-text { flex: 1; min-width: 0; }
body .lyx-pm-text .pm-name {
  font-size: 13px !important; font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.005em !important;
}
body .lyx-pm-desc {
  font-size: 11px; color: var(--text-3);
  margin-top: 2px; line-height: 1.4;
}
body .lyx-pm-logo {
  font-size: 9px !important; font-weight: 900 !important;
  padding: 4px 8px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  letter-spacing: 0.10em !important;
  color: var(--text-2) !important;
  flex-shrink: 0 !important;
}
body .lyx-pm-option.is-selected .lyx-pm-logo {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #0a0a0a !important;
}

/* Payment box (gateway-specific fields/description shown when chosen) */
body .lyx-pm-box {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-top: 0 !important;
  padding: 14px 16px !important;
  margin: -2px 0 0 !important;
  font-size: 12.5px !important;
  color: var(--text-2) !important;
  line-height: 1.6 !important;
}
body .lyx-pm-box::before,
body .lyx-pm-box::after { display: none !important; content: none !important; }
body .lyx-pm-box fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
body .lyx-pm-box img { max-height: 26px !important; vertical-align: middle !important; }

/* Place Order button */
body .lyx-checkout-place-order {
  margin-top: 14px !important;
  padding: 0 !important;
  background: transparent !important;
}
body .lyx-checkout-place-order-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: var(--accent) !important;
  color: #0a0a0a !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  text-shadow: none !important;
  box-shadow: 0 4px 12px rgba(255,215,0,0.20) !important;
  transition: background-color .15s, transform .1s !important;
}
body .lyx-checkout-place-order-btn:hover {
  background: var(--accent-hover) !important;
  background-color: var(--accent-hover) !important;
}
body .lyx-checkout-place-order-btn:active { transform: translateY(1px); }

/* Privacy text below place-order */
body .woocommerce-terms-and-conditions-wrapper,
body .lyx-checkout-place-order .woocommerce-privacy-policy-text {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  color: var(--text-3) !important;
  line-height: 1.55 !important;
}
body .lyx-checkout-place-order .woocommerce-privacy-policy-text p { margin: 0 !important; }
body .lyx-checkout-place-order .woocommerce-privacy-policy-text a { color: var(--accent) !important; }

/* Trust strip */
.lyx-checkout-trust {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
}
.lyx-checkout-trust strong { color: #fff; font-weight: 700; }
.lyx-checkout-trust i { font-size: 14px; padding-top: 2px; flex-shrink: 0; }

/* Hide WC's "shop_table" — we render line items via our own markup */
body #order_review .shop_table.woocommerce-checkout-review-order-table { display: none !important; }
/* Hide the original "Your order" h3 inserted by WC outside our wrapper */
body .woocommerce-checkout > h3#order_review_heading { display: none !important; }
/* Hide MercadoPago's bulky checkout-benefits/payment-methods card chrome inside payment box */
body .lyx-pm-box .mp-checkout-pro-checkout-benefits,
body .lyx-pm-box .mp-checkout-pro-payment-methods { display: none !important; }
body .lyx-pm-box .mp-checkout-pro-redirect { padding: 0 !important; }
body .lyx-pm-box .mp-checkout-redirect-v2-container { padding: 0 !important; gap: 12px !important; align-items: flex-start !important; }
body .lyx-pm-box .mp-checkout-redirect-v2-text { color: var(--text-2) !important; font-size: 12.5px !important; }
body .lyx-pm-box .mp-checkout-pro-terms-and-conditions { padding: 8px 0 0 !important; }
body .lyx-pm-box .mp-terms-and-conditions-text,
body .lyx-pm-box .mp-terms-and-conditions-link { color: var(--text-3) !important; font-size: 11px !important; }

/* Customized payment icons (Daviplata/Bancolombia/Nequi PNGs from WC custom gateway) — hide them since we already have our own pm-logo */
body .lyx-pm-option .customized_payment_icon { display: none !important; }

/* =========================================================================
   NOTICES — branded error / info / success banners
   Replaces WC's default `<ul class="woocommerce-error">` light banners.
   Neutralizers below override WC's stylesheet on every page (cart, checkout,
   product, my-account) so we never see white-on-yellow notice boxes again.
   ========================================================================= */

/* Universal neutralizer — strips WC's default backgrounds, borders, margins,
   padding and the ::before icon WC injects via CSS so OUR template-rendered
   icon is the only one shown.
   `body` prefix lifts specificity to (0,0,1,1) so we beat WC's
   `.woocommerce-page .woocommerce-message` (0,0,2,0) AND its own
   `.woocommerce-message` (0,0,1,0) without relying on source order. */
body ul.woocommerce-error,
body .woocommerce-error,
body .woocommerce-info,
body .woocommerce-message,
body .woocommerce-NoticeGroup ul,
body .wc-block-components-notice-banner,
.woocommerce-page ul.woocommerce-error,
.woocommerce-page .woocommerce-error,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body .woocommerce-error::before,
body .woocommerce-info::before,
body .woocommerce-message::before,
body .wc-block-components-notice-banner::before,
.woocommerce-page .woocommerce-error::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before { content: none !important; display: none !important; }

/* When WC outputs the bare list (no template override path, e.g. some
   ajax responses), still give it a basic dark tile so it doesn't look
   like a yellow flash. Hidden by .lyx-notice override below. */
ul.woocommerce-error:not(.lyx-notice) > li,
.woocommerce-info:not(.lyx-notice),
.woocommerce-message:not(.lyx-notice) {
  display: block;
  padding: 14px 18px !important;
  background: var(--surface-2) !important;
  border-left: 3px solid var(--accent) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Branded notice — used for our overridden templates.
   `body` prefix takes us to (0,0,1,1) which beats WC's
   `.woocommerce-page .woocommerce-message` (0,0,2,0). */
body .lyx-notice,
.woocommerce-page .lyx-notice,
.lyx-notice.woocommerce-message,
.lyx-notice.woocommerce-info,
.lyx-notice.woocommerce-error {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 20px !important;
  margin: 0 0 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left-width: 3px !important;
  color: var(--text) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02) !important;
  list-style: none !important;
  text-shadow: none !important;
}
.lyx-notice .lyx-notice-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-top: 1px;
}
.lyx-notice .lyx-notice-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.lyx-notice .lyx-notice-msg {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.lyx-notice .lyx-notice-msg a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}
.lyx-notice .lyx-notice-msg a:hover { color: var(--accent-hover); }
/* WC inserts a "Restore" / "View cart" button inside `.woocommerce-message` —
   normalize it as a small inline link, not a pushed button.
   3-class selectors lift specificity to (0,0,3,1) so we beat WC's
   `.woocommerce-page a.button` (0,0,2,1) AND its own `a.button.wc-forward`
   variants (0,0,2,1). `!important` is layered on top for cache-edge cases. */
body .lyx-notice a.button,
body .lyx-notice a.wc-forward,
body .lyx-notice a.restore-item,
body .lyx-notice button.button,
.woocommerce-page .lyx-notice a.button,
.woocommerce-page .lyx-notice a.wc-forward,
.woocommerce .lyx-notice a.button.wc-forward,
.lyx-notice .lyx-notice-msg a.button,
.lyx-notice .lyx-notice-msg a.wc-forward {
  display: inline-block !important;
  float: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 8px !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  font-family: inherit !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-shadow: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: inherit !important;
  cursor: pointer !important;
}
body .lyx-notice a.button:hover,
body .lyx-notice a.wc-forward:hover,
body .lyx-notice a.restore-item:hover,
body .lyx-notice button.button:hover,
.woocommerce-page .lyx-notice a.button:hover,
.woocommerce-page .lyx-notice a.wc-forward:hover { color: var(--accent-hover) !important; background: transparent !important; }

/* Variants — each gets a distinct left-border accent + icon color.
   2-class selectors (0,0,2,0) beat any single-class WC default. */
body .lyx-notice.lyx-notice-error,
.woocommerce-page .lyx-notice.lyx-notice-error,
.lyx-notice-error.woocommerce-error,
.lyx-notice-error.woocommerce-message {
  border-left-color: var(--urgent) !important;
  background: linear-gradient(180deg, rgba(239,68,68,0.10) 0%, var(--surface) 60%) !important;
}
body .lyx-notice.lyx-notice-error .lyx-notice-icon,
.woocommerce-page .lyx-notice.lyx-notice-error .lyx-notice-icon { color: var(--urgent) !important; }

body .lyx-notice.lyx-notice-info,
.woocommerce-page .lyx-notice.lyx-notice-info,
.lyx-notice-info.woocommerce-info,
.lyx-notice-info.woocommerce-message {
  border-left-color: var(--info) !important;
  background: linear-gradient(180deg, rgba(59,130,246,0.10) 0%, var(--surface) 60%) !important;
}
body .lyx-notice.lyx-notice-info .lyx-notice-icon,
.woocommerce-page .lyx-notice.lyx-notice-info .lyx-notice-icon { color: var(--info) !important; }

body .lyx-notice.lyx-notice-success,
.woocommerce-page .lyx-notice.lyx-notice-success,
.lyx-notice-success.woocommerce-message {
  border-left-color: var(--sale) !important;
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, var(--surface) 60%) !important;
}
body .lyx-notice.lyx-notice-success .lyx-notice-icon,
.woocommerce-page .lyx-notice.lyx-notice-success .lyx-notice-icon { color: var(--sale) !important; }

/* Force notice text color — WC's `.woocommerce-message { color: #515151 }`
   was bleeding through our msg children. */
body .lyx-notice .lyx-notice-msg,
body .lyx-notice .lyx-notice-msg *,
.woocommerce-page .lyx-notice .lyx-notice-msg,
.woocommerce-page .lyx-notice .lyx-notice-msg * { color: var(--text) !important; }
body .lyx-notice .lyx-notice-msg a,
.woocommerce-page .lyx-notice .lyx-notice-msg a { color: var(--accent) !important; }

/* WC sometimes wraps notices in `.woocommerce-NoticeGroup` — strip its
   default styling so our notices are the only visual layer. */
.woocommerce-NoticeGroup,
.woocommerce-notices-wrapper {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 0 16px !important;
}
.woocommerce-NoticeGroup .lyx-notice:last-child,
.woocommerce-notices-wrapper .lyx-notice:last-child { margin-bottom: 0 !important; }

/* Mobile — let the icon stay on the left but tighten paddings */
@media (max-width: 600px) {
  .lyx-notice { padding: 14px 16px !important; gap: 12px !important; }
  .lyx-notice .lyx-notice-icon { font-size: 16px; width: 20px; height: 20px; }
  .lyx-notice .lyx-notice-msg { font-size: 12.5px; }
}

/* Hide WC's default tablecell labels on mobile */
.woocommerce-cart-form .product-remove,
.woocommerce-cart-form .product-thumbnail { display: none; }

/* =========================================================================
   CHECKOUT PAGE
   ========================================================================= */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  margin-top: 32px;
}
.checkout-form { display: flex; flex-direction: column; gap: 24px; }
.checkout-block {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
}
.checkout-block h3 {
  font-size: 14px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 10px;
}
.checkout-block h3 .step-num {
  width: 28px; height: 28px;
  background: var(--accent);
  color: #0a0a0a;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.form-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-row.full { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 11px 14px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, background-color .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--accent); background: var(--surface-2);
}

/* v0.3.141 — delivery methods back to single column per Andres
   ("they were good in one lines just pay neht needed that setup").
   Only the PAYMENT methods get the 2-up flex-wrap layout; delivery
   stays one-per-line so the email/WhatsApp/Telegram options each
   read clearly with full description space. */
.payment-options { display: flex; flex-direction: column; gap: 10px; }
.payment-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.payment-option:hover { border-color: var(--border-2); }
.payment-option.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.payment-option input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
.payment-option .pm-name { font-size: 13px; font-weight: 700; flex: 1; }
.payment-option .pm-logo {
  font-size: 10px; font-weight: 900; padding: 4px 8px;
  background: var(--surface-2);
  letter-spacing: 0.1em;
  color: var(--text-2);
}

/* =========================================================================
   FAQ PAGE
   ========================================================================= */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 880px; margin: 32px auto; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .15s;
}
.faq-item:hover { border-color: var(--border-2); }
.faq-item.is-open { border-color: var(--accent); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent;
  border: none;
  padding: 18px 22px;
  text-align: left;
  font-size: 14px; font-weight: 700;
  color: #fff;
  gap: 12px;
}
.faq-q i {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform .25s;
}
.faq-item.is-open .faq-q i { transform: rotate(180deg); }
.faq-a {
  padding: 0 22px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}
.faq-item.is-open .faq-a {
  padding: 0 22px 22px;
  max-height: 600px;
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  margin-top: 40px;
}
.contact-form { background: var(--surface); border: 1px solid var(--border); padding: 32px; }
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
  display: flex; align-items: center; gap: 18px;
}
.contact-card-icon {
  width: 48px; height: 48px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 20px;
  flex-shrink: 0;
}
.contact-card-info h4 {
  font-size: 13px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 4px;
  color: #fff;
}
.contact-card-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.contact-card-info a { color: var(--accent); }

/* =========================================================================
   INSTALACION PAGE
   ========================================================================= */
.install-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 32px 0;
}
.install-step {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 26px;
  position: relative;
}
.install-step .step-number {
  width: 36px; height: 36px;
  background: var(--accent);
  color: #0a0a0a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900;
  margin-bottom: 16px;
}
.install-step h3 {
  font-size: 16px; font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}
.install-step p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
.install-tiers {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 32px 0;
}
.tier-card {
  background: var(--surface);
  border: 2px solid var(--border);
  padding: 26px;
}
.tier-card.tier-card-pri { border-color: var(--info); }
.tier-card.tier-card-sec { border-color: var(--sale); }
.tier-card h3 {
  font-size: 18px; font-weight: 900;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tier-card .tier-card-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.tier-card ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tier-card li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.tier-card li i {
  color: var(--accent);
  margin-top: 3px;
  font-size: 11px;
}

/* =========================================================================
   BLOG PAGE
   ========================================================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}
.blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .25s;
}
.blog-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.blog-thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--surface-2);
}
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-body { padding: 20px; }
.blog-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.blog-meta .blog-cat { color: var(--accent); }
.blog-card h3 {
  font-size: 16px; font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;
  color: #fff;
}
.blog-card p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}

/* =========================================================================
   ACCOUNT PAGE
   ========================================================================= */
.auth-card {
  max-width: 440px;
  margin: 56px auto;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.auth-card h2 {
  font-size: 22px; font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  color: #fff;
}
.auth-card .auth-sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 24px;
}
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.auth-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .header-search { display: none; }      /* search moves into the mobile drawer */
  .hero-title { font-size: 44px; }
  .hero-swiper { height: 500px; }
  .genre-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .why-card:nth-child(4) { grid-column: 1 / 2; }
  .why-card:nth-child(5) { grid-column: 2 / 4; }
  .shop-layout { grid-template-columns: 220px 1fr; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .product-detail { grid-template-columns: 1fr; }
  .detail-gallery { position: static; max-width: 460px; margin: 0 auto; }
  .checkout-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .carousel-arrow { display: none; }
  .review-divider { display: none; }
  .testimonios-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-card:nth-child(5) { grid-column: 1 / 3; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; max-height: none; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .install-steps { grid-template-columns: 1fr; }
  .install-tiers { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 80px 1fr auto; gap: 14px; }
  .cart-item .qty-selector { grid-column: 2 / 3; transform: none; }
  .cart-item-remove { grid-row: 1; grid-column: 3; align-self: start; }
}
@media (max-width: 767px) {
  .container { padding: 0 16px; }
  .topbar-inner { padding: 7px 16px; gap: 10px; font-size: 10px; }
  .topbar-info { gap: 10px; }
  .topbar-hide-sm { display: none; }
  .header-inner { padding: 12px 16px; gap: 12px; }
  .logo-text { display: none; }
  .header-search { display: none; }
  .icon-btn { display: none; }
  .cart-btn { padding: 8px 12px; }
  .hero-swiper { height: 480px; }
  .hero-content { padding: 0 24px; }
  .hero-title { font-size: 32px; }
  .hero-tagline { font-size: 13px; }
  .hero-price-value { font-size: 28px; }
  .btn-primary, .btn-whatsapp { padding: 11px 16px; font-size: 12px; }
  .hero-nav { width: 36px; height: 36px; font-size: 12px; }
  .hero-prev { left: 8px; }
  .hero-next { right: 8px; }
  .hero-swiper .swiper-pagination { padding: 0 24px; }
  .section { padding: 40px 0 8px; }
  .section-title { font-size: 16px; }
  .flash-banner { padding: 12px 14px; gap: 12px; }
  .flash-text-icon { width: 32px; height: 32px; font-size: 14px; }
  .flash-text-main { font-size: 12px; }
  .flash-text-sub { font-size: 10px; }
  .countdown-cell { padding: 5px 7px; min-width: 40px; }
  .countdown-cell strong { font-size: 13px; }
  .genre-grid { grid-template-columns: 1fr; }
  .genre-name { font-size: 18px; }
  .why-section { padding: 40px 0; }
  .why-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .why-card:nth-child(5) { grid-column: 1 / 3; }
  .why-card { padding: 18px 12px; }
  .why-icon { width: 44px; height: 44px; font-size: 18px; margin-bottom: 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .review-strip-inner { gap: 12px; flex-direction: column; }
  .testimonio-quote { font-size: 14px; }
  .title { font-size: 14px; min-height: 1.3em; }
  .price-current { font-size: 16px; }
  .whatsapp-float { width: 50px; height: 50px; font-size: 22px; bottom: 16px; right: 16px; }
  .page-title { font-size: 24px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tier-options { grid-template-columns: 1fr; }
  .detail-title { font-size: 26px; }
  .form-row { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 70px 1fr; }
  .cart-item-image { width: 70px; }
  .cart-item-price { grid-column: 1 / 3; text-align: left; }
  .auth-card { margin: 24px 16px; padding: 24px; }
}
@media (max-width: 420px) {
  .hero-title { font-size: 26px; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions > * { width: 100%; }
  .countdown { flex-wrap: wrap; }
}

/* hide-sm utility */
@media (max-width: 767px) {
  .hide-sm { display: none !important; }
}

/* =========================================================================
   ADDITIONAL STYLES — Promociones, video embeds, improved filters & contact
   ========================================================================= */

/* PROMOCIONES BANNER HERO */
.promo-hero {
  background: linear-gradient(135deg, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.04) 60%, transparent 100%), var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}
.promo-hero::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.promo-hero-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  position: relative;
}
.promo-hero-content { display: flex; flex-direction: column; gap: 14px; }
.promo-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content;
  background: var(--urgent); color: #fff;
  padding: 6px 12px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.promo-hero h1 {
  font-size: 48px; font-weight: 900;
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 0; color: #fff;
}
.promo-hero h1 .accent { color: var(--accent); }
.promo-hero p {
  font-size: 16px; color: var(--text-2);
  max-width: 540px; line-height: 1.55; margin: 0;
}
.promo-hero-stats { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.promo-hero-stats .stat {
  display: flex; flex-direction: column;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  min-width: 110px;
}
.promo-hero-stats .stat-num {
  font-size: 22px; font-weight: 900;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.promo-hero-stats .stat-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.1em; margin-top: 6px;
}

.promo-countdown-card {
  background: var(--bg);
  border: 1px solid rgba(239,68,68,0.4);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.promo-countdown-card .label {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--urgent);
  display: inline-flex; align-items: center; gap: 8px;
}
.promo-countdown-card .label i {
  font-size: 12px;
  animation: pulse-promo 1.5s ease-in-out infinite;
}
@keyframes pulse-promo { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.promo-countdown-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.promo-countdown-grid .cell {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 8px; text-align: center;
}
.promo-countdown-grid .cell strong {
  font-size: 28px; font-weight: 900;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  line-height: 1; display: block; margin-bottom: 6px;
}
.promo-countdown-grid .cell span {
  font-size: 9px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* PROMO DISCOUNT FILTER CHIPS */
.promo-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.promo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--text-2);
  text-transform: uppercase;
  transition: all .15s; cursor: pointer;
}
.promo-chip:hover { border-color: var(--accent); color: var(--text); }
.promo-chip.is-active {
  background: var(--urgent); border-color: var(--urgent); color: #fff;
}

/* VIDEO EMBED */
.video-embed {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.video-embed iframe, .video-embed video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.video-card {
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color .2s;
}
.video-card:hover { border-color: var(--accent); }
.video-card-info { padding: 18px 20px; }
.video-card-info h4 {
  font-size: 15px; font-weight: 800;
  margin: 0 0 6px; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.video-card-info h4 .video-num {
  background: var(--accent); color: #0a0a0a;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.video-card-info p {
  font-size: 13px; color: var(--text-2);
  margin: 0; line-height: 1.5;
}
.video-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin: 24px 0;
}

/* IMPROVED CONTACT LAYOUT v2 */
.contact-layout-v2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  margin-top: 32px;
  align-items: start;
}
.contact-form-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 32px;
}
.contact-form-v2 h2 {
  font-size: 18px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px;
}
.contact-form-v2 h2 i { color: var(--accent); }
.contact-form-v2 .sub {
  font-size: 13px; color: var(--text-3); margin: 0 0 24px;
}
.contact-info-v2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.contact-info-v2 .full { grid-column: 1 / 3; }
.contact-card-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
}
.contact-card-v2:hover { border-color: var(--accent); transform: translateY(-3px); }
.contact-card-v2 .icon-circle {
  width: 40px; height: 40px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 16px;
  margin-bottom: 4px;
}
.contact-card-v2 .icon-circle.green {
  background: rgba(37,211,102,0.15);
  border-color: #25D366; color: #25D366;
}
.contact-card-v2 h4 {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 0; color: var(--text-3);
}
.contact-card-v2 .main {
  font-size: 15px; font-weight: 700;
  color: #fff; margin: 0; line-height: 1.3;
}
.contact-card-v2 .main a { color: inherit; }
.contact-card-v2 .main a:hover { color: var(--accent); }
.contact-card-v2 .desc {
  font-size: 11px; color: var(--text-3);
  margin: 0; line-height: 1.45;
}
.contact-cta-whatsapp {
  background: linear-gradient(135deg, rgba(37,211,102,0.18) 0%, rgba(37,211,102,0.04) 100%);
  border: 1px solid rgba(37,211,102,0.3);
  padding: 24px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.contact-cta-whatsapp .ws-icon {
  width: 56px; height: 56px;
  background: #25D366; color: #0a0a0a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
}
.contact-cta-whatsapp .ws-info { flex: 1; min-width: 200px; }
.contact-cta-whatsapp .ws-info strong {
  display: block; font-size: 16px; color: #fff; margin-bottom: 4px;
}
.contact-cta-whatsapp .ws-info span { font-size: 12px; color: var(--text-2); }

/* SHOP — active filters bar + chips */
.shop-toolbar-active {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 18px;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  margin-bottom: 16px;
  font-size: 12px;
}
.active-label {
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-3);
}
.active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 11px; font-weight: 700;
}
.active-chip button {
  background: transparent; border: none;
  color: inherit; font-size: 10px;
  padding: 0; margin-left: 2px; cursor: pointer;
}
.active-clear {
  margin-left: auto;
  background: transparent; border: none;
  color: var(--text-3);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer; transition: color .15s;
}
.active-clear:hover { color: var(--urgent); }

/* Collapsible filter blocks */
.filter-block .filter-block-head {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; user-select: none;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.filter-block .filter-block-head h4 {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; margin: 0; padding: 0; border: none;
}
.filter-block .filter-block-head i {
  color: var(--text-3); font-size: 11px;
  transition: transform .2s;
}
.filter-block.is-collapsed .filter-block-head i { transform: rotate(-90deg); }
.filter-block.is-collapsed .filter-block-body { display: none; }

/* Better radio rows */
.radio-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 4px;
  transition: background-color .15s, color .15s;
}
.radio-row:hover { background: var(--surface-2); color: var(--text); }
.radio-row input[type="radio"] { accent-color: var(--accent); width: 14px; height: 14px; }
.radio-row .badge {
  margin-left: auto;
  background: var(--surface-3);
  padding: 2px 7px;
  font-size: 10px; font-weight: 700;
  color: var(--text-3); border-radius: 999px;
}

/* Mobile filter drawer toggle */
.mobile-filter-toggle {
  display: none;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px;
  font-size: 13px; font-weight: 700;
  color: var(--text);
  text-transform: uppercase; letter-spacing: 0.06em;
  align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 16px;
}
.mobile-filter-toggle i { color: var(--accent); }

/* Filter sidebar improvements */
.filter-block-body { display: flex; flex-direction: column; gap: 4px; }
.filter-block-body .checkbox-row { padding: 7px 8px; border-radius: 4px; transition: background-color .15s; }
.filter-block-body .checkbox-row:hover { background: var(--surface-2); }
.filter-block-body .checkbox-row .badge {
  margin-left: auto; background: var(--surface-3);
  padding: 2px 7px; font-size: 10px; font-weight: 700;
  color: var(--text-3); border-radius: 999px;
}
.filter-block-body .price-range { display: flex; gap: 6px; align-items: center; margin: 6px 0 12px; }
.filter-block-body .price-input { min-width: 0; }

@media (max-width: 1100px) {
  .promo-hero-inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .promo-hero h1 { font-size: 36px; }
  .promo-countdown-grid .cell strong { font-size: 22px; }
  .video-grid { grid-template-columns: 1fr; }
  .contact-layout-v2 { grid-template-columns: 1fr; }
  .mobile-filter-toggle { display: inline-flex; }
  .shop-sidebar { display: none; }
  .shop-sidebar.is-open { display: block; }
}
@media (max-width: 767px) {
  .promo-hero { padding: 32px 0; }
  .promo-hero h1 { font-size: 28px; }
  .promo-hero-stats { gap: 8px; }
  .promo-hero-stats .stat { min-width: 90px; padding: 10px 12px; }
  .contact-info-v2 { grid-template-columns: 1fr; }
  .contact-info-v2 .full { grid-column: 1; }
  .contact-form-v2 { padding: 22px; }
  .promo-countdown-card { padding: 18px; }
  .promo-countdown-grid .cell { padding: 10px 4px; }
  .promo-countdown-grid .cell strong { font-size: 18px; }
}

/* =========================================================================
   ITERATION 2 — Recomendados, Juego del Mes, Platform Toggle, Big Countdown
   ========================================================================= */

/* JUEGOS RECOMENDADOS — 60/40 split */
.recomendados-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}
.recomendado-feature {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .25s, transform .25s;
}
.recomendado-feature:hover { border-color: var(--accent); transform: translateY(-3px); }
.recomendado-feature img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease, filter .25s ease;
  filter: saturate(0.9);
}
.recomendado-feature:hover img { transform: scale(1.04); filter: saturate(1); }
.recomendado-feature::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14,16,20,0.96) 0%, rgba(14,16,20,0.5) 40%, rgba(14,16,20,0.05) 70%);
  pointer-events: none;
}
.recomendado-feature-info {
  position: absolute;
  bottom: 24px; left: 28px; right: 28px;
  z-index: 2;
  display: flex; flex-direction: column;
  gap: 8px;
}
.recomendado-feature-tag {
  width: fit-content;
  background: var(--accent); color: #0a0a0a;
  padding: 5px 10px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.recomendado-feature-title {
  font-size: 32px; font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.05;
  color: #fff; margin: 0;
}
.recomendado-feature-meta {
  display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}
.recomendado-feature-price {
  font-size: 22px; font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.recomendado-feature-old {
  font-size: 14px; color: var(--text-3);
  text-decoration: line-through;
}
.recomendado-feature-discount {
  background: var(--sale); color: var(--sale-text);
  padding: 3px 8px;
  font-size: 12px; font-weight: 800;
}
.recomendado-feature-cta {
  display: inline-flex; align-items: center;
  gap: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 8px;
  transition: gap .15s;
}
.recomendado-feature:hover .recomendado-feature-cta { gap: 10px; }

.recomendado-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.recomendado-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  overflow: hidden;
}
.recomendado-mini:hover { border-color: var(--accent); transform: translateY(-2px); }
.recomendado-mini-cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}
.recomendado-mini-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.recomendado-mini:hover .recomendado-mini-cover img { transform: scale(1.06); }
.recomendado-mini-info {
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.recomendado-mini-title {
  font-size: 12px; font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recomendado-mini-price {
  font-size: 13px; font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.recomendado-mini-price s {
  color: var(--text-3);
  font-weight: 500;
  font-size: 11px;
  margin-left: 4px;
}

/* JUEGO DEL MES + PROMOCIONES — 50/50 banner row */
.banner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.feature-banner {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: border-color .25s, transform .25s;
  isolation: isolate;
}
.feature-banner:hover { border-color: var(--accent); transform: translateY(-3px); }
.feature-banner::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(14,16,20,0.85) 0%, rgba(14,16,20,0.3) 50%, rgba(14,16,20,0) 100%);
  z-index: 1;
}
.feature-banner.banner-promo::before {
  background:
    linear-gradient(135deg, rgba(230,57,70,0.92) 0%, rgba(230,57,70,0.35) 60%, rgba(230,57,70,0.05) 100%);
}
.feature-banner-content {
  position: relative;
  z-index: 2;
  padding: 32px;
  display: flex; flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 75%;
}
.feature-banner-tag {
  display: inline-flex; align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 10px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent);
  color: #0a0a0a;
}
.banner-promo .feature-banner-tag {
  background: #fff; color: var(--urgent);
}
.feature-banner-title {
  font-size: 30px; font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.feature-banner-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0;
  max-width: 380px;
}
.feature-banner-cta {
  display: inline-flex; align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  padding: 11px 20px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
  transition: background-color .15s;
}
.feature-banner-cta:hover { background: var(--accent-hover); }
.banner-promo .feature-banner-cta {
  background: #fff; color: var(--urgent);
}
.banner-promo .feature-banner-cta:hover { background: #f0f0f0; }

/* NUEVOS LANZAMIENTOS — visual showcase (no prices, bigger cards) */
.showcase-card {
  display: block;
  cursor: pointer;
  position: relative;
}
.showcase-cover {
  position: relative;
  aspect-ratio: 600 / 900;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .25s, transform .25s;
}
.showcase-card:hover .showcase-cover {
  border-color: var(--accent);
  transform: translateY(-6px);
}
.showcase-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.showcase-card:hover .showcase-cover img { transform: scale(1.05); }
.showcase-cover::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14,16,20,0.9) 0%, rgba(14,16,20,0) 50%);
  pointer-events: none;
}
.showcase-info {
  position: absolute;
  bottom: 16px; left: 18px; right: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.showcase-platform {
  font-family: var(--font-mono, 'Inter');
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.showcase-title {
  font-size: 18px; font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}
.showcase-new-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 4px 8px;
  font-size: 10px; font-weight: 900;
  letter-spacing: 0.12em;
  z-index: 3;
}

/* PLATFORM TOGGLE at top of shop */
.platform-toggle {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.platform-toggle-btn {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.platform-toggle-btn:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.platform-toggle-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}
.platform-toggle-btn .pt-icon {
  font-size: 22px;
}
.platform-toggle-btn .pt-name { font-weight: 900; }
.platform-toggle-btn .pt-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  margin-left: 4px;
}
.platform-toggle-btn.is-active .pt-count { color: rgba(0,0,0,0.55); }

/* PROMOCIONES huge countdown */
.huge-countdown {
  background: var(--bg);
  border: 1px solid rgba(239,68,68,0.45);
  padding: 32px;
  margin: 24px 0 32px;
  text-align: center;
}
.huge-countdown-label {
  font-size: 13px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--urgent);
  margin: 0 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
}
.huge-countdown-label i {
  font-size: 13px;
  animation: pulse-promo 1.5s ease-in-out infinite;
}
.huge-countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}
.huge-countdown-cell {
  background: var(--surface);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 28px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.huge-countdown-cell strong {
  font-size: 64px;
  font-weight: 900;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}
.huge-countdown-cell span {
  font-size: 11px; font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.huge-countdown-sub {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-2);
  max-width: 540px;
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* PROMO IMAGE CAROUSEL — wide promotional banners */
.promo-carousel {
  position: relative;
  margin: 24px 0;
}
.promo-carousel .swiper { overflow: hidden; }
.promo-carousel-slide {
  aspect-ratio: 16 / 6.4;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.promo-carousel-slide::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,16,20,0.85) 0%, rgba(14,16,20,0.4) 50%, rgba(14,16,20,0.05) 100%);
  pointer-events: none;
}
.promo-carousel-content {
  position: relative;
  z-index: 1;
  padding: 0 48px;
  max-width: 50%;
  color: #fff;
}
.promo-carousel-title {
  font-size: 36px; font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.promo-carousel-sub {
  font-size: 14px; color: rgba(255,255,255,0.85);
  margin: 0 0 14px;
}
.promo-carousel-discount {
  background: var(--urgent);
  color: #fff;
  padding: 5px 12px;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.04em;
  display: inline-block;
  margin-bottom: 10px;
}
/* Cloned from the working .hero-v13-pagination pattern (home banner).
   Flex parent with `gap` + bullets with `margin: 0 !important` bypasses
   the whole margin-vs-Swiper specificity fight cleanly. Selector covers
   BOTH the new namespaced class AND the legacy `.promo-carousel
   .swiper-pagination` path so pre-v0.3.33 cached HTML still picks up
   the right styling. !important on `bottom` defeats Swiper's own absolute
   positioning rule which sits at the same specificity. */
/* Pagination — DESKTOP: absolutely positioned overlay inside the banner
   (just like the original mockup, sits at bottom: 36px above the slide's
   lower edge). MOBILE: drops to a static block beneath the banner so it
   doesn't overlap the slide content on small screens. The element lives
   OUTSIDE .swiper in the DOM either way; the absolute positioning
   anchors to the .promo-carousel parent which is position: relative.
   Mobile rules live further down in the (max-width: 768px) block. */
.promo-carousel { position: relative; }
.promo-carousel-pagination,
.promo-carousel > .swiper-pagination {
  position: absolute !important;
  bottom: 36px !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4;
}
.promo-carousel-pagination .swiper-pagination-bullet,
.promo-carousel .swiper-pagination-bullet {
  background: rgba(255,255,255,0.3);
  opacity: 1;
  width: 32px; height: 3px;
  border-radius: 0;
  margin: 0 !important;
  transition: background-color .2s, width .2s;
}
.promo-carousel-pagination .swiper-pagination-bullet-active,
.promo-carousel .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 48px;
}
.promo-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.7);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.promo-carousel-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.promo-carousel-prev { left: 16px; }
.promo-carousel-next { right: 16px; }

/* PRODUCT PAGE — variant selector */
.detail-variants {
  display: flex; flex-direction: column; gap: 14px;
}
.detail-variants-group { display: flex; flex-direction: column; gap: 8px; }
.detail-variants-label {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.detail-variants-label strong { color: #fff; }
.detail-variants-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.detail-variant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--text);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
  text-transform: uppercase;
}
.detail-variant:hover { border-color: var(--border-2); }
.detail-variant.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.detail-variant.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* PRODUCT page sale countdown — compact urgent box */
.detail-sale-countdown {
  background: linear-gradient(90deg, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.04) 100%);
  border: 1px solid rgba(239,68,68,0.35);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.detail-sale-countdown-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-sale-countdown-label strong {
  font-size: 12px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--urgent);
}
.detail-sale-countdown-label span {
  font-size: 10px; color: var(--text-3);
}
.detail-sale-countdown-cells {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.detail-sale-countdown-cells .cell {
  background: var(--bg);
  border: 1px solid rgba(239,68,68,0.4);
  padding: 6px 8px;
  min-width: 40px;
  text-align: center;
}
.detail-sale-countdown-cells .cell strong {
  display: block;
  font-size: 14px;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
}
.detail-sale-countdown-cells .cell span {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* PRODUCT — image gallery (multiple thumbnails).
   v0.3.100: thumbs sit BELOW the main cover (`.detail-thumbs-bottom`),
   sized small enough not to dominate, and constrained to PORTRAIT
   aspect (3:4) so they match the main cover's silhouette. */
.detail-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 12px;
}
.detail-thumbs-top {
  margin-top: 0;
  margin-bottom: 4px;
}
.detail-thumbs-bottom {
  margin-top: 12px;
  margin-bottom: 0;
}
.detail-thumb {
  width: 64px;
  flex: 0 0 64px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  padding: 0;
  font: inherit;
  color: inherit;
}
.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.detail-thumb:hover { border-color: var(--border-2); transform: translateY(-1px); }
.detail-thumb.is-active { border-color: var(--accent); }
.detail-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .detail-thumb { width: 56px; flex-basis: 56px; }
}

/* PRODUCT HERO — title + sale badge + timer combined block (v0.3.99) */
.detail-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.detail-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.detail-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--urgent, #dc2626);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(220,38,38,0.30);
}
.detail-title-badge i { font-size: 11px; }
.detail-hero .detail-title { margin: 0; flex: 1 1 auto; min-width: 0; }
.detail-hero .detail-sale-timer { margin-top: 0; }

/* PRODUCT — clean discount + price block */
.detail-price-block {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.detail-price-current {
  font-size: 38px; font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.detail-price-old {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
  font-weight: 600;
}
.detail-price-discount {
  background: var(--sale);
  color: var(--sale-text);
  padding: 5px 10px;
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.04em;
}
.detail-price-save {
  font-size: 13px; font-weight: 700;
  color: var(--sale);
  margin-top: 4px;
  width: 100%;
}

/* INSTALACION — section dividers */
.install-section-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.install-section-title .install-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.install-section-title h2 {
  font-size: 18px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  color: #fff;
}
.install-section-title .count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* RESPONSIVE for new sections */
@media (max-width: 1100px) {
  .recomendados-layout { grid-template-columns: 1fr; }
  .recomendado-feature { aspect-ratio: 16 / 9; }
  .banner-row { grid-template-columns: 1fr; }
  .feature-banner { aspect-ratio: 16 / 9; }
  .feature-banner-title { font-size: 26px; }
  .promo-carousel-title { font-size: 28px; }
  .promo-carousel-content { max-width: 65%; padding: 0 32px; }
}
@media (max-width: 900px) {
  .recomendado-feature-title { font-size: 24px; }
  .feature-banner-content { padding: 24px; max-width: 90%; }
  .platform-toggle-btn { padding: 14px 18px; font-size: 12px; min-width: 110px; }
  .platform-toggle-btn .pt-icon { font-size: 18px; }
  .huge-countdown { padding: 24px; }
  .huge-countdown-cell strong { font-size: 48px; }
  .huge-countdown-cell { padding: 20px 8px; }
  .promo-carousel-slide { aspect-ratio: 16 / 8; }
  .promo-carousel-content { padding: 0 24px; max-width: 80%; }
  .promo-carousel-title { font-size: 22px; }
  .detail-price-current { font-size: 32px; }
}
/* =========================================================================
   ITERATION 3 — Split-panel hero, polished recomendados, refined tienda
   ========================================================================= */

/* SPLIT HERO V2 — full-bleed art, premium feel */
.hero-split {
  padding: 24px 0 0;
  background: var(--bg);
}
.hero-split-wrap {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.hero-split-swiper {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.hero-split-slide {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 12px;
  height: 520px;
}
.hero-panel {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform .35s ease, border-color .3s, box-shadow .3s;
  text-decoration: none;
  isolation: isolate;
}
.hero-panel:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* LEFT PANEL — full-bleed key art with strong gradient overlay */
.hero-panel-featured {
  background-color: var(--feat-1, #0a1a3a);
  background-size: cover;
  background-position: center right;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.hero-panel-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.7) 30%,
      rgba(0,0,0,0.35) 55%,
      rgba(0,0,0,0.1) 80%);
  z-index: 1;
}
.hero-panel-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 50%,
    var(--feat-2, rgba(0,0,0,0.6)) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
  opacity: 0.5;
}
.hero-panel-featured-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 48px;
  width: 100%;
  max-width: 580px;
}
.hero-panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: fit-content;
  box-shadow: 0 4px 16px rgba(255,215,0,0.3);
}
.hero-panel-title {
  font-size: 76px;
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: #fff;
  text-transform: uppercase;
  font-style: italic;
  margin: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.hero-panel-tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0;
  max-width: 460px;
}
.hero-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 16px 30px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  transition: background-color .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 6px 24px rgba(255,215,0,0.25);
}
.hero-panel-cta:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,215,0,0.4); }
.hero-panel-cta i { font-size: 14px; }

/* RIGHT PANEL — "oferta del día" — bigger image, urgent feel */
.hero-panel-deal {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(239,68,68,0.32) 0%, transparent 65%),
    linear-gradient(135deg, #2a0707 0%, #1a0404 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 24px 22px;
  position: relative;
  gap: 14px;
}
.hero-panel-deal::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-panel-deal > * { position: relative; z-index: 1; }
.hero-panel-deal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-panel-deal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 6px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-panel-deal-tag i { font-size: 10px; }
.hero-panel-deal-discount {
  background: var(--urgent);
  color: #fff;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 12px rgba(239,68,68,0.4);
}

/* Big game image — fills more space, no border box */
.hero-panel-deal-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.hero-panel-deal-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.7)) drop-shadow(0 4px 16px rgba(239,68,68,0.3));
  transition: transform .4s ease;
}
.hero-panel-deal:hover .hero-panel-deal-image img { transform: scale(1.04); }

/* Bottom block with title, prices, countdown */
.hero-panel-deal-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-panel-deal-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-panel-deal-prices {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.hero-panel-deal-old {
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-panel-deal-current {
  color: var(--accent);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-panel-deal-countdown {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px;
}
.hero-panel-deal-countdown .cell {
  background: var(--urgent);
  color: #fff;
  padding: 11px 0 9px;
  font-weight: 900;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 12px rgba(239,68,68,0.3);
}
.hero-panel-deal-countdown .cell::after {
  content: attr(data-label);
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hero-split-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.hero-split-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.2);
  opacity: 1;
  width: 32px;
  height: 3px;
  border-radius: 0;
  transition: background-color .2s, width .2s;
  margin: 0 !important;
}
.hero-split-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 56px;
}

.hero-split-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.hero-split-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-split-prev { left: -16px; }
.hero-split-next { right: -16px; }

/* IMPROVED JUEGOS RECOMENDADOS */
.recomendado-feature-improved {
  position: relative;
  aspect-ratio: 16 / 12;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .25s, transform .25s;
}
.recomendado-feature-improved:hover { border-color: var(--accent); transform: translateY(-3px); }
.recomendado-feature-improved img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.recomendado-feature-improved:hover img { transform: scale(1.04); }
.recomendado-feature-improved::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(14,16,20,0.97) 0%, rgba(14,16,20,0.7) 30%, rgba(14,16,20,0.05) 60%);
  pointer-events: none;
}
.recomendado-feature-improved .recomendado-feature-info {
  position: absolute;
  bottom: 28px;
  left: 32px;
  right: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recomendado-feature-improved .recomendado-feature-title {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* MINI CARDS V3 — image-dominant Steam-capsule style */
.recomendado-mini-improved {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  text-decoration: none;
  isolation: isolate;
}
.recomendado-mini-improved:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.recomendado-mini-improved-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.recomendado-mini-improved-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease, filter .25s ease;
  filter: saturate(0.95);
}
.recomendado-mini-improved:hover .recomendado-mini-improved-img img {
  transform: scale(1.06);
  filter: saturate(1);
}
.recomendado-mini-improved::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14,16,20,0.95) 0%, rgba(14,16,20,0.55) 28%, rgba(14,16,20,0) 55%);
  z-index: 1;
  pointer-events: none;
}
.recomendado-mini-improved-discount {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--sale);
  color: var(--sale-text);
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  z-index: 2;
}
.recomendado-mini-improved-platform {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: #fff;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
.recomendado-mini-improved-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recomendado-mini-improved-info h4 {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.recomendado-mini-improved-info .mini-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.recomendado-mini-improved-info .mini-price {
  color: var(--accent);
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.recomendado-mini-improved-info .mini-old {
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* old horizontal-style classes kept as no-op fallback */
.recomendado-mini-improved-old {
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  cursor: pointer;
  transition: border-color .2s, transform .2s, background-color .2s;
  overflow: hidden;
  text-decoration: none;
}
.recomendado-mini-improved-old:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateX(2px);
}
.recomendado-mini-cover-portrait {
  width: 100%;
  aspect-ratio: 110 / 140;
  overflow: hidden;
  background: var(--surface-2);
  position: relative;
}
.recomendado-mini-cover-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.recomendado-mini-improved:hover .recomendado-mini-cover-portrait img { transform: scale(1.06); }
.recomendado-mini-cover-portrait .platform-mini {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(14,16,20,0.9);
  border: 1px solid var(--border-2);
  color: #fff;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.recomendado-mini-info-improved {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.recomendado-mini-info-improved .mini-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-3);
  text-transform: uppercase;
}
.recomendado-mini-info-improved h4 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recomendado-mini-info-improved .mini-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
.recomendado-mini-info-improved .mini-discount {
  background: var(--sale);
  color: var(--sale-text);
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 800;
}
.recomendado-mini-info-improved .mini-price {
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.recomendado-mini-info-improved .mini-old {
  color: var(--text-3);
  text-decoration: line-through;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* TIENDA — top promo strip */
.shop-promo-strip {
  background: linear-gradient(90deg, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.04) 60%, rgba(255,215,0,0.08) 100%);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 18px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.shop-promo-strip-text {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}
.shop-promo-strip-icon {
  width: 44px; height: 44px;
  background: var(--urgent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.shop-promo-strip-content { display: flex; flex-direction: column; gap: 3px; }
.shop-promo-strip-title {
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}
.shop-promo-strip-sub {
  font-size: 12px;
  color: var(--text-2);
}

/* IMPROVED PLATFORM TOGGLE — bigger, more visual */
.platform-toggle-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
.platform-toggle-v2 .platform-toggle-btn {
  flex: none;
  padding: 22px 20px;
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.platform-toggle-v2 .platform-toggle-btn .pt-icon { font-size: 26px; }
.platform-toggle-v2 .platform-toggle-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .2s;
}
.platform-toggle-v2 .platform-toggle-btn:hover::before { opacity: 1; }
.platform-toggle-v2 .platform-toggle-btn.is-active::before { opacity: 0; }

/* TIENDA filter list — tighter, more polished */
.filter-list-v2 a {
  padding: 9px 12px;
  font-size: 12.5px;
}
.filter-list-v2 a span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.filter-list-v2 a span:first-child i {
  width: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0.7;
}
.filter-list-v2 a:hover span:first-child i { opacity: 1; color: var(--accent); }
.filter-list-v2 a.is-active span:first-child i { opacity: 1; color: var(--accent); }

/* RESPONSIVE for split hero */
@media (max-width: 1100px) {
  .hero-split-slide { grid-template-columns: 1fr; height: auto; }
  .hero-panel-featured { min-height: 360px; }
  .hero-panel-deal { min-height: 480px; }
  .hero-panel-title { font-size: 56px; }
  .platform-toggle-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .hero-split { padding: 12px 0 0; }
  .hero-split-wrap { padding: 0 12px; }
  .hero-split-slide { gap: 10px; }
  .hero-panel-featured { min-height: 280px; }
  .hero-panel-featured-content { padding: 24px; max-width: 100%; gap: 14px; }
  .hero-panel-deal { min-height: 440px; padding: 18px; }
  .hero-panel-title { font-size: 38px; }
  .hero-panel-cta { padding: 12px 22px; font-size: 12px; }
  .hero-panel-deal-current { font-size: 26px; }
  .hero-panel-deal-countdown .cell { padding: 9px 0 7px; font-size: 14px; }
  .hero-panel-deal-countdown .cell::after { font-size: 7px; }
  .hero-split-prev, .hero-split-next { display: none; }
  .recomendado-feature-improved { aspect-ratio: 16/10; }
  .recomendado-feature-improved .recomendado-feature-title { font-size: 24px; }
  .recomendado-feature-improved .recomendado-feature-info { left: 18px; right: 18px; bottom: 18px; }
  .recomendado-mini-improved { aspect-ratio: 3/4; }
  .recomendado-mini-improved-info { padding: 10px 12px; }
  .recomendado-mini-improved-info h4 { font-size: 11px; }
  .recomendado-mini-improved-info .mini-price { font-size: 14px; }
  .platform-toggle-v2 { grid-template-columns: 1fr 1fr; }
  .platform-toggle-v2 .platform-toggle-btn { padding: 14px 12px; font-size: 11px; }
  .platform-toggle-v2 .platform-toggle-btn .pt-icon { font-size: 18px; }
}

/* =========================================================================
   ITERATION 4 — Premium hero V8 + Recomendados V5 (research-backed redesign)
   Following: clamp typography, negative tracking, asymmetric layout,
   image-dominant cards, drop-shadow not box-shadow, premium easing
   ========================================================================= */

/* HERO V8 — premium asymmetric */
.hero-v8 { padding: 24px 0 0; background: var(--bg); }
.hero-v8-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; }
.hero-v8-swiper { position: relative; overflow: hidden; border: 1px solid var(--border); }
.hero-v8-slide {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  height: 480px;
}

/* LEFT — full-bleed cinematic + content bottom-left */
.hero-v8-featured {
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center right;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v8-featured:hover { transform: scale(1.005); }
.hero-v8-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(8,10,20,0.95) 0%,
    rgba(8,10,20,0.65) 35%,
    rgba(8,10,20,0.15) 65%,
    rgba(8,10,20,0) 80%);
  z-index: 1;
}
.hero-v8-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}
.hero-v8-featured-content {
  position: absolute;
  bottom: 48px;
  left: 48px;
  right: 48px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 540px;
}
.hero-v8-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: fit-content;
}
.hero-v8-title {
  font-size: clamp(2.5rem, 1rem + 4.5vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 32px rgba(0,0,0,0.7);
}
.hero-v8-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-v8-discount {
  background: var(--sale);
  color: var(--sale-text);
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.hero-v8-price-cur {
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-v8-price-old {
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-v8-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 16px 30px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  margin-top: 4px;
  transition: background-color .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 8px 24px rgba(255,215,0,0.25);
}
.hero-v8-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,215,0,0.4);
}

/* RIGHT — deal panel */
.hero-v8-deal {
  position: relative;
  background: linear-gradient(135deg, #1a0606 0%, #380a0a 50%, #1a0303 100%);
  padding: 28px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  border-left: 1px solid var(--border);
}
.hero-v8-deal:hover { transform: scale(1.005); }
.hero-v8-deal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 30%, rgba(239,68,68,0.32), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-v8-deal > * { position: relative; z-index: 1; }
.hero-v8-deal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-v8-deal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 6px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-v8-deal-disc {
  background: var(--urgent);
  color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(239,68,68,0.4);
}
.hero-v8-deal-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
}
.hero-v8-deal-image img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.7));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.hero-v8-deal:hover .hero-v8-deal-image img { transform: scale(1.04); }
.hero-v8-deal-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-v8-deal-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-v8-deal-prices {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.hero-v8-deal-old {
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-v8-deal-cur {
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-v8-deal-cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.hero-v8-deal-cd .cell {
  background: var(--urgent);
  color: #fff;
  padding: 10px 0 8px;
  text-align: center;
  font-weight: 900;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 12px rgba(239,68,68,0.3);
}
.hero-v8-deal-cd .cell::after {
  content: attr(data-l);
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.85;
  text-transform: uppercase;
}

.hero-v8-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.hero-v8-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.2);
  opacity: 1;
  width: 32px;
  height: 3px;
  border-radius: 0;
  transition: background-color .2s, width .2s;
  margin: 0 !important;
}
.hero-v8-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 56px;
}
.hero-v8-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.2,.8,.2,1);
}
.hero-v8-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-v8-prev { left: -16px; }
.hero-v8-next { right: -16px; }


/* RECOMENDADOS V5 — cinematic featured + 2x3 portrait minis */
.recomendados-v5 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  align-items: stretch;
}

/* Feature — full-bleed art with magazine-style content overlay bottom-left */
.rec-feat {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  transition: border-color .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.rec-feat:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.rec-feat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.rec-feat-img img {
  width: 100%;
  height: 100%;
  /* v0.3.101 — reverted to `cover` per client: only the small right
     cards (`.rec-mini`) needed the no-crop fix. The big Editor's-pick
     looks better full-bleed with the bottom dark scrim, since the title
     + price overlay reads cleanly over a covered image. */
  object-fit: cover;
  object-position: center;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.rec-feat:hover .rec-feat-img img { transform: scale(1.04); }
.rec-feat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.4) 60%,
    rgba(0,0,0,0.95) 100%);
  pointer-events: none;
  z-index: 1;
}
.rec-feat-info {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rec-feat-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: fit-content;
}
.rec-feat-title {
  font-size: clamp(1.75rem, 0.5rem + 2vw, 2.875rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 16px rgba(0,0,0,0.6);
  font-style: italic;
}
.rec-feat-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.rec-feat-disc {
  background: var(--sale);
  color: var(--sale-text);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  /* v0.3.135 — 2-line "En oferta / -45%" layout */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}
.rec-feat-disc .rec-feat-disc-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.92;
}
.rec-feat-disc .rec-feat-disc-pct {
  font-size: 13px;
  font-weight: 900;
}
.rec-feat-cur {
  color: var(--accent);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rec-feat-old {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Mini grid 2 columns x 3 rows */
.rec-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
}

/* Mini card — image-dominant, bottom scrim, minimal info.
   v0.3.102: aspect-ratio + min-height REMOVED — they were fighting
   the parent grid's `align-items: stretch` and causing cards to
   overlap when the row math collapsed. The mini grid's `1fr 1fr`
   row tracks naturally stretch to match the big rec-feat card's
   height, so each mini gets a proper auto-sized cell. */
.rec-mini {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  background: var(--surface);
  min-width: 0;
  min-height: 0;
  transition: border-color .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
.rec-mini:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.rec-mini img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* v0.3.102 — `contain` per client request: never crop the artwork.
     The card's surface bg fills any letterboxed area; the bottom
     scrim still keeps title + price legible over the image. */
  object-fit: contain;
  object-position: center;
  background: var(--surface);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
.rec-mini:hover img { transform: scale(1.06); }
.rec-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 65%);
  z-index: 1;
}
.rec-mini-disc {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--sale);
  color: var(--sale-text);
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  z-index: 2;
}
.rec-mini-platform {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
.rec-mini-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rec-mini-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-mini-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rec-mini-cur {
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.rec-mini-old {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Responsive V8/V5 */
@media (max-width: 1100px) {
  .hero-v8-slide { grid-template-columns: 1fr; height: auto; }
  .hero-v8-featured { min-height: 380px; }
  .hero-v8-deal { min-height: 480px; border-left: none; border-top: 1px solid var(--border); }
  .recomendados-v5 { grid-template-columns: 1fr; }
  .rec-mini-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
}
@media (max-width: 767px) {
  .hero-v8-featured-content { bottom: 24px; left: 24px; right: 24px; gap: 16px; }
  .hero-v8-deal { padding: 20px; }
  .hero-v8-deal-cur { font-size: 24px; }
  .hero-v8-prev, .hero-v8-next { display: none; }
  .rec-mini-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
  .rec-feat-info { left: 18px; right: 18px; bottom: 18px; }
}

/* =========================================================================
   ITERATION 5 — Hero V9 — clean text-driven left + product card right
   Matches reference image: NO game art on left panel, big italic title,
   solid color gradients, clean modern design
   ========================================================================= */

.hero-v9 { padding: 28px 0 0; background: var(--bg); }
.hero-v9-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; }
.hero-v9-swiper { position: relative; overflow: hidden; }
.hero-v9-slide {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  height: 480px;
}

/* LEFT PANEL — clean solid gradient + HUGE italic title — no game art */
.hero-v9-featured {
  position: relative;
  background: linear-gradient(135deg, var(--bg-1, #08243f) 0%, var(--bg-2, #04121f) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v9-featured:hover { transform: translateY(-3px); }

/* Subtle radial highlight top-right for depth */
.hero-v9-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 30%, rgba(255,255,255,0.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Yellow accent glow bottom-right */
.hero-v9-featured::after {
  content: "";
  position: absolute;
  bottom: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,215,0,0.10) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.hero-v9-featured > * { position: relative; z-index: 1; }

.hero-v9-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 26px;
  box-shadow: 0 4px 16px rgba(255,215,0,0.25);
}

.hero-v9-title {
  font-size: clamp(3.25rem, 1rem + 6vw, 7.5rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 32px;
  max-width: 100%;
  text-shadow: 0 4px 32px rgba(0,0,0,0.5);
}

.hero-v9-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  transition: background-color .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 8px 24px rgba(255,215,0,0.3);
}
.hero-v9-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,215,0,0.45);
}

/* RIGHT PANEL — deal product card */
.hero-v9-deal {
  background: linear-gradient(135deg, #2a0a0a 0%, #4d1313 50%, #1a0606 100%);
  padding: 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v9-deal:hover { transform: translateY(-3px); }
.hero-v9-deal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(239,68,68,0.4) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
/* Subtle yellow top haze */
.hero-v9-deal::after {
  content: "";
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(255,215,0,0.06) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.hero-v9-deal > * { position: relative; z-index: 1; }

.hero-v9-deal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-v9-deal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 6px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-v9-deal-disc {
  background: var(--urgent);
  color: #fff;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(239,68,68,0.4);
}
.hero-v9-deal-image {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
}
.hero-v9-deal-image img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.7));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.hero-v9-deal:hover .hero-v9-deal-image img { transform: scale(1.04); }
.hero-v9-deal-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-v9-deal-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-v9-deal-prices {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.hero-v9-deal-old {
  color: rgba(255,255,255,0.45);
  text-decoration: line-through;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-v9-deal-cur {
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-v9-deal-cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.hero-v9-deal-cd .cell {
  background: var(--urgent);
  color: #fff;
  padding: 10px 0 8px;
  text-align: center;
  font-weight: 900;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}
.hero-v9-deal-cd .cell::after {
  content: attr(data-l);
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.85;
  text-transform: uppercase;
}

.hero-v9-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.hero-v9-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.2);
  opacity: 1;
  width: 32px;
  height: 3px;
  border-radius: 0;
  transition: background-color .2s, width .2s;
  margin: 0 !important;
}
.hero-v9-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 56px;
}
.hero-v9-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.2,.8,.2,1);
}
.hero-v9-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-v9-prev { left: -16px; }
.hero-v9-next { right: -16px; }

@media (max-width: 1100px) {
  .hero-v9-slide { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .hero-v9-featured { padding: 48px 36px; min-height: 360px; }
  .hero-v9-deal { min-height: 480px; }
}
@media (max-width: 767px) {
  .hero-v9-featured { padding: 40px 28px; min-height: 320px; }
  .hero-v9-deal { padding: 20px; }
  .hero-v9-deal-cur { font-size: 24px; }
  .hero-v9-prev, .hero-v9-next { display: none; }
}

/* =========================================================================
   ITERATION 6 — Hero V10 — TWO equally premium cinematic panels
   Research-backed: full-bleed key art on both, strong typography hierarchy,
   asymmetric 60/40, content positioned bottom-left, premium easing
   ========================================================================= */

.hero-v10 { padding: 28px 0 0; background: var(--bg); }
.hero-v10-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; }
.hero-v10-swiper { position: relative; overflow: hidden; }
.hero-v10-slide {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 14px;
  height: 480px;
}

/* Both panels share the same cinematic base */
.hero-v10-panel {
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v10-panel:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 18px 48px rgba(0,0,0,0.5);
}

/* Background image scales subtly on hover */
.hero-v10-panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hero-v10-panel:hover .hero-v10-panel-bg { transform: scale(1.04); }

/* Diagonal gradient scrim — keeps text readable, art breathes top-right */
.hero-v10-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.65) 30%,
    rgba(0,0,0,0.2) 55%,
    rgba(0,0,0,0) 75%
  );
  z-index: 1;
}
/* Subtle bottom darken for foot legibility */
.hero-v10-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 35%);
  z-index: 1;
  pointer-events: none;
}

/* Subtle accent variant for the deal panel (red urgent tint) */
.hero-v10-panel.is-deal::before {
  background: linear-gradient(
    105deg,
    rgba(20,3,3,0.94) 0%,
    rgba(72,8,8,0.55) 35%,
    rgba(0,0,0,0.18) 60%,
    rgba(0,0,0,0) 78%
  );
}
.hero-v10-panel.is-deal::after {
  background: linear-gradient(0deg, rgba(40,5,5,0.7) 0%, rgba(0,0,0,0) 40%);
}

/* Content sits in bottom-left, absolute positioned for true overlay */
.hero-v10-content {
  position: relative;
  z-index: 2;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.hero-v10-tag-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hero-v10-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-v10-tag-disc {
  background: var(--urgent);
  color: #fff;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(239,68,68,0.4);
}

/* HUGE italic title — premium typography */
.hero-v10-title {
  font-size: clamp(2.5rem, 1rem + 4.5vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 28px rgba(0,0,0,0.7);
}
/* Smaller title on the right (deal) panel */
.hero-v10-panel.is-deal .hero-v10-title {
  font-size: clamp(2rem, 1rem + 2.5vw, 3.5rem);
}

.hero-v10-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hero-v10-cur {
  color: var(--accent);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-v10-old {
  color: rgba(255,255,255,0.55);
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Smaller numbers on deal panel */
.hero-v10-panel.is-deal .hero-v10-cur { font-size: 24px; }
.hero-v10-panel.is-deal .hero-v10-old { font-size: 14px; }

.hero-v10-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.hero-v10-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 14px 26px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  transition:
    background-color .2s cubic-bezier(.2,.8,.2,1),
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 8px 24px rgba(255,215,0,0.3);
}
.hero-v10-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,215,0,0.45);
}

/* Inline mini countdown for deal panel */
.hero-v10-mini-cd {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-family: var(--font-mono, 'Inter');
}
.hero-v10-mini-cd .cell {
  background: var(--urgent);
  color: #fff;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  min-width: 32px;
  text-align: center;
}
.hero-v10-mini-cd .sep {
  color: var(--urgent);
  font-weight: 900;
  font-size: 14px;
}

.hero-v10-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.hero-v10-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.2);
  opacity: 1;
  width: 32px;
  height: 3px;
  border-radius: 0;
  transition: background-color .2s, width .2s;
  margin: 0 !important;
}
.hero-v10-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 56px;
}
.hero-v10-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.2,.8,.2,1);
}
.hero-v10-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-v10-prev { left: -16px; }
.hero-v10-next { right: -16px; }

@media (max-width: 1100px) {
  .hero-v10-slide { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .hero-v10-panel { min-height: 380px; }
  .hero-v10-panel.is-deal { min-height: 340px; }
}
@media (max-width: 767px) {
  .hero-v10-content { padding: 28px; gap: 12px; }
  .hero-v10-cur { font-size: 22px; }
  .hero-v10-cta { padding: 12px 22px; font-size: 12px; }
  .hero-v10-mini-cd .cell { padding: 6px 7px; font-size: 12px; min-width: 28px; }
  .hero-v10-prev, .hero-v10-next { display: none; }
  .hero-v10-panel { min-height: 340px; }
}

/* =========================================================================
   ITERATION 7 — Hero V11 — modern e-commerce aesthetic
   Solid gradient bg + FLOATING game cover with drop-shadow + content on side
   Inspired by: Apple product pages, Spotify cards, modern SaaS landing
   No more muddy full-bleed image-with-text-overlay
   ========================================================================= */

.hero-v11 { padding: 28px 0 0; background: var(--bg); }
.hero-v11-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; }
.hero-v11-swiper { position: relative; overflow: hidden; }
.hero-v11-slide {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 16px;
  height: 480px;
}

/* ===== LEFT PANEL — Featured (horizontal: content + floating cover) ===== */
.hero-v11-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 28px;
  padding: 48px 56px;
  background:
    linear-gradient(135deg, var(--c1, #0a3266) 0%, var(--c2, #04162e) 100%);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid var(--border);
  isolation: isolate;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v11-featured:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 20px 56px rgba(0,0,0,0.5);
}
/* Subtle radial highlight top-right */
.hero-v11-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 80% 30%, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Yellow accent glow bottom-left */
.hero-v11-featured::after {
  content: "";
  position: absolute;
  bottom: -150px; left: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(255,215,0,0.10) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.hero-v11-featured > * { position: relative; z-index: 1; }

/* ===== RIGHT PANEL — Deal (vertical stack: tags / cover / info) ===== */
.hero-v11-deal {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 28px 30px;
  background:
    linear-gradient(135deg, #2a0a0a 0%, #4d1313 50%, #1a0606 100%);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid var(--border);
  isolation: isolate;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v11-deal:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 20px 56px rgba(0,0,0,0.5);
}
.hero-v11-deal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(239,68,68,0.32) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-v11-deal::after {
  content: "";
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 200px;
  background: radial-gradient(ellipse, rgba(255,215,0,0.08) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.hero-v11-deal > * { position: relative; z-index: 1; }

/* ===== Content blocks ===== */
.hero-v11-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.hero-v11-tag-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-v11-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 6px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-v11-tag-disc {
  background: var(--urgent);
  color: #fff;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(239,68,68,0.4);
}

.hero-v11-title {
  font-size: clamp(2.25rem, 1rem + 3.2vw, 4.5rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.hero-v11-deal .hero-v11-title {
  font-size: clamp(1.5rem, 0.5rem + 2vw, 2.75rem);
}

.hero-v11-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-v11-cur {
  color: var(--accent);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-v11-deal .hero-v11-cur { font-size: 26px; }
.hero-v11-old {
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-v11-deal .hero-v11-old { font-size: 14px; }

.hero-v11-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 14px 26px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
  margin-top: 8px;
  transition:
    background-color .2s cubic-bezier(.2,.8,.2,1),
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 8px 24px rgba(255,215,0,0.3);
}
.hero-v11-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,215,0,0.45);
}

/* Mini countdown for deal panel */
.hero-v11-cd {
  display: inline-flex;
  gap: 4px;
  margin-top: 4px;
  align-items: center;
}
.hero-v11-cd .cell {
  background: var(--urgent);
  color: #fff;
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}
.hero-v11-cd .sep {
  color: var(--urgent);
  font-weight: 900;
  font-size: 16px;
}

/* ===== Floating product image with drop-shadow + glow ===== */
.hero-v11-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  isolation: isolate;
}
.hero-v11-art img {
  width: auto;
  max-width: 100%;
  max-height: 110%;
  height: 105%;
  object-fit: contain;
  filter:
    drop-shadow(0 32px 56px rgba(0,0,0,0.65))
    drop-shadow(0 8px 16px rgba(0,0,0,0.4));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.hero-v11-featured:hover .hero-v11-art img,
.hero-v11-deal:hover .hero-v11-art img {
  transform: translateY(-8px) scale(1.02);
}

/* Deal panel image is centered in its row */
.hero-v11-deal .hero-v11-art {
  height: auto;
  min-height: 0;
}
.hero-v11-deal .hero-v11-art img {
  height: 100%;
  max-height: 100%;
}

/* Glow halo behind floating image */
.hero-v11-art::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  background: radial-gradient(ellipse, rgba(255,215,0,0.18) 0%, transparent 70%);
  filter: blur(40px);
  z-index: -1;
}
.hero-v11-deal .hero-v11-art::before {
  background: radial-gradient(ellipse, rgba(239,68,68,0.28) 0%, transparent 70%);
}

/* ===== Carousel controls ===== */
.hero-v11-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.hero-v11-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.2);
  opacity: 1;
  width: 32px; height: 3px;
  border-radius: 0;
  transition: background-color .2s, width .2s;
  margin: 0 !important;
}
.hero-v11-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 56px;
}
.hero-v11-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.2,.8,.2,1);
}
.hero-v11-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-v11-prev { left: -16px; }
.hero-v11-next { right: -16px; }

@media (max-width: 1100px) {
  .hero-v11-slide { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .hero-v11-featured { padding: 40px 36px; min-height: 360px; }
  .hero-v11-deal { min-height: 420px; }
}
@media (max-width: 767px) {
  .hero-v11-featured {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    min-height: 380px;
    text-align: left;
  }
  .hero-v11-featured .hero-v11-art { height: 220px; order: -1; }
  .hero-v11-deal { padding: 22px 20px; }
  .hero-v11-cur { font-size: 24px; }
  .hero-v11-cd .cell { padding: 7px 9px; font-size: 12px; min-width: 32px; }
  .hero-v11-prev, .hero-v11-next { display: none; }
}

/* =========================================================================
   ITERATION 8 — Hero V12 — Restrained, Steam/Eneba style
   NO italic. NO uppercase titles. NO 96px display type. NO drop-shadow halos.
   Title case + weight 700 + 36-44px + cinematic art + minimal overlay.
   The artwork does the work, typography stays out of the way.
   ========================================================================= */

.hero-v12 { padding: 28px 0 0; background: var(--bg); }
.hero-v12-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; }
.hero-v12-swiper { position: relative; overflow: hidden; }
.hero-v12-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 460px;
}

.hero-v12-panel {
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  border: 1px solid var(--border);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v12-panel:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

/* Subtle bg image scale on hover */
.hero-v12-panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.hero-v12-panel:hover .hero-v12-panel-bg { transform: scale(1.04); }

/* ONE clean gradient at bottom — no overlapping layers */
.hero-v12-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,0.92) 0%,
    rgba(0,0,0,0.55) 28%,
    rgba(0,0,0,0) 60%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-v12-content {
  position: relative;
  z-index: 2;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Tag — small, restrained, dot indicator */
.hero-v12-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.hero-v12-tag .dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.hero-v12-tag.urgent { color: var(--urgent); }
.hero-v12-tag.urgent .dot { background: var(--urgent); }

/* Title — TITLE CASE, weight 700, 36-44px, NO italic, modest tracking */
.hero-v12-title {
  font-size: clamp(1.75rem, 0.5rem + 2vw, 2.75rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  /* NOTE: no text-transform, no italic */
}

/* Meta — discount + prices inline */
.hero-v12-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hero-v12-disc {
  background: var(--sale);
  color: var(--sale-text);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hero-v12-cur {
  color: var(--accent);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-v12-old {
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* CTA — modest, refined, with arrow */
.hero-v12-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #0a0a0a;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: fit-content;
  margin-top: 8px;
  transition:
    background-color .2s cubic-bezier(.2,.8,.2,1),
    transform .2s cubic-bezier(.2,.8,.2,1),
    gap .2s cubic-bezier(.2,.8,.2,1);
}
.hero-v12-cta:hover {
  background: var(--accent-hover);
  gap: 12px;
}

/* Carousel controls */
.hero-v12-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.hero-v12-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.2);
  opacity: 1;
  width: 32px;
  height: 3px;
  border-radius: 0;
  transition: background-color .2s, width .2s;
  margin: 0 !important;
}
.hero-v12-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 56px;
}
.hero-v12-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.2,.8,.2,1);
}
.hero-v12-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-v12-prev { left: -16px; }
.hero-v12-next { right: -16px; }

@media (max-width: 1100px) {
  .hero-v12-slide { grid-template-columns: 1fr; height: auto; gap: 12px; }
  .hero-v12-panel { min-height: 320px; }
}
@media (max-width: 767px) {
  .hero-v12-content { padding: 28px 24px; }
  .hero-v12-cur { font-size: 20px; }
  .hero-v12-prev, .hero-v12-next { display: none; }
  .hero-v12-panel { min-height: 280px; }
}

/* =========================================================================
   PRODUCT DETAIL — REAL JDC SEC/PRI tier system (matches actual site)
   ========================================================================= */

/* Top dual-tier price summary — both prices visible at once */
.detail-tier-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.detail-tier-summary .tier-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 16px;
}
.detail-tier-summary .tier-label {
  color: var(--accent);
  font-weight: 800;
  font-size: 16px;
  min-width: 92px;
}
.detail-tier-summary .tier-current {
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.detail-tier-summary .tier-old {
  color: var(--text-3);
  text-decoration: line-through;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Sec/Pri toggle — two buttons */
.detail-tier-toggle {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.detail-tier-btn {
  padding: 12px 28px;
  background: transparent;
  border: 2px solid var(--border-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s cubic-bezier(.2,.8,.2,1);
  text-align: center;
  min-width: 130px;
}
.detail-tier-btn:hover:not(.is-active) {
  border-color: var(--text);
}
.detail-tier-btn.is-active {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  font-weight: 700;
}
.detail-tier-clear {
  display: inline-block;
  margin-top: 4px;
  color: var(--urgent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  width: fit-content;
}
.detail-tier-clear:hover { text-decoration: underline; }

/* Selected variant disclaimer */
.detail-tier-disclaimer {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0 0;
}

/* Selected price display (after toggle) */
.detail-tier-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 18px;
}
.detail-tier-price .selected-old {
  color: var(--text-3);
  text-decoration: line-through;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.detail-tier-price .selected-current {
  color: var(--accent);
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
.detail-tier-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--sale);
  font-size: 13px;
  font-weight: 600;
}
.detail-tier-stock i { font-size: 11px; }

/* =========================================================================
   PROMOCIONES PAGE — Big banner hero + trust messaging section
   ========================================================================= */

/* HERO V2 — full-bleed banner with big headline + giant countdown */
.promo-banner {
  position: relative;
  padding: 80px 0 64px;
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(239,68,68,0.18) 0%, transparent 70%),
    linear-gradient(135deg, var(--surface) 0%, var(--bg) 60%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.promo-banner::before {
  content: "";
  position: absolute;
  bottom: -200px;
  right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,215,0,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.promo-banner-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  text-align: center;
}
.promo-banner-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  color: var(--urgent);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.promo-banner-pill i { font-size: 11px; }
.promo-banner-headline {
  font-size: clamp(2rem, 1rem + 3vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 14px;
}
.promo-banner-headline .accent { color: var(--urgent); }
.promo-banner-headline .yellow { color: var(--accent); }
.promo-banner-sub {
  font-size: 16px;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.promo-banner-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.promo-banner-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 28px;
  border-right: 1px solid var(--border);
}
.promo-banner-stat:last-child { border-right: none; }
.promo-banner-stat strong {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.promo-banner-stat span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Big countdown styled to match this hero */
.promo-banner-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 28px;
  padding: 18px 24px;
  background: var(--bg);
  border: 1px solid rgba(239,68,68,0.4);
}
.promo-banner-countdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--urgent);
  padding-right: 14px;
  border-right: 1px solid var(--border);
}
.promo-banner-countdown-label i {
  animation: pulse-promo 1.5s ease-in-out infinite;
}
.promo-banner-countdown .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 12px 14px;
  min-width: 64px;
}
.promo-banner-countdown .cell strong {
  font-size: 30px;
  font-weight: 900;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.promo-banner-countdown .cell span {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.promo-banner-countdown .sep {
  color: var(--urgent);
  font-weight: 900;
  font-size: 22px;
}

.promo-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* TRUST/MARKETING COPY SECTION (bottom of promociones) */
.promo-trust {
  padding: 64px 0 48px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border);
}
.promo-trust-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.promo-trust h2 {
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  font-weight: 800;
  margin: 0 0 18px;
  letter-spacing: -0.015em;
  color: #fff;
}
.promo-trust h2 .yellow { color: var(--accent); }
.promo-trust p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.promo-trust p strong { color: #fff; font-weight: 700; }
.promo-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px 0 32px;
}
.promo-trust-card {
  padding: 28px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-align: left;
  transition: border-color .2s, transform .2s;
}
.promo-trust-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.promo-trust-card-icon {
  width: 44px; height: 44px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 18px;
  margin-bottom: 14px;
}
.promo-trust-card h3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 8px;
}
.promo-trust-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  text-align: left;
}
.promo-trust-cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 900px) {
  .promo-banner { padding: 60px 0 48px; }
  .promo-banner-stats { gap: 16px; }
  .promo-banner-stat { padding: 0 16px; }
  .promo-banner-stat strong { font-size: 22px; }
  .promo-banner-countdown { padding: 14px 18px; }
  .promo-banner-countdown .cell { padding: 9px 11px; min-width: 52px; }
  .promo-banner-countdown .cell strong { font-size: 24px; }
  .promo-trust-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 767px) {
  .promo-banner { padding: 44px 0 36px; }
  .promo-banner-headline { font-size: 28px; }
  .promo-banner-sub { font-size: 13px; }
  .promo-banner-stats { display: none; }
  .promo-banner-countdown { gap: 4px; padding: 12px 14px; flex-wrap: wrap; }
  .promo-banner-countdown-label { width: 100%; padding: 0 0 10px; margin: 0 0 8px; border-right: none; border-bottom: 1px solid var(--border); justify-content: center; }
  .promo-banner-countdown .cell { padding: 8px 10px; min-width: 48px; }
  .promo-banner-countdown .cell strong { font-size: 20px; }
  .promo-banner-countdown .sep { display: none; }
  .promo-trust { padding: 40px 0 32px; }
}

/* =========================================================================
   PROMOCIONES — compact urgency banner (replaces giant centered hero)
   Matches site page-header consistency — breadcrumbs stay at top
   ========================================================================= */

.promo-urgency {
  background:
    linear-gradient(90deg, rgba(239,68,68,0.16) 0%, rgba(239,68,68,0.04) 55%, rgba(255,215,0,0.08) 100%);
  border: 1px solid rgba(239,68,68,0.32);
  padding: 22px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: 28px;
  align-items: center;
  margin: 24px 0 28px;
}
.promo-urgency-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.promo-urgency-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  background: rgba(239,68,68,0.2);
  border: 1px solid rgba(239,68,68,0.4);
  color: var(--urgent);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.promo-urgency-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.promo-urgency-title .yellow { color: var(--accent); }
.promo-urgency-title .urgent { color: var(--urgent); }
.promo-urgency-sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
}

.promo-urgency-cd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 28px;
  border-left: 1px solid rgba(239,68,68,0.25);
}
.promo-urgency-cd-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.promo-urgency-cd-label strong {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--urgent);
}
.promo-urgency-cd-label span {
  font-size: 10px;
  color: var(--text-3);
}
.promo-urgency-cd-cells {
  display: flex;
  gap: 4px;
}
.promo-urgency-cd-cells .cell {
  background: var(--bg);
  border: 1px solid rgba(239,68,68,0.4);
  padding: 9px 10px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 52px;
}
.promo-urgency-cd-cells .cell strong {
  font-size: 22px;
  font-weight: 900;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.promo-urgency-cd-cells .cell span {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.promo-urgency-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-left: 24px;
  border-left: 1px solid rgba(239,68,68,0.25);
}

/* page-header count chip in red for promociones */
.page-header .count.is-urgent { color: var(--urgent); }

@media (max-width: 1100px) {
  .promo-urgency {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .promo-urgency-cd { padding-left: 0; border-left: none; padding-top: 18px; border-top: 1px solid rgba(239,68,68,0.25); justify-content: space-between; }
  .promo-urgency-actions { padding-left: 0; border-left: none; padding-top: 4px; }
}
@media (max-width: 600px) {
  .promo-urgency { padding: 18px; }
  .promo-urgency-title { font-size: 18px; }
  .promo-urgency-cd { gap: 10px; flex-wrap: wrap; }
  .promo-urgency-cd-label { text-align: left; }
  .promo-urgency-cd-cells .cell { padding: 7px 8px 5px; min-width: 44px; }
  .promo-urgency-cd-cells .cell strong { font-size: 18px; }
  .promo-urgency-actions { flex-direction: column; align-items: stretch; }
  .promo-urgency-actions > * { justify-content: center; }
}

/* =========================================================================
   ITERATION 9 — Client (Andres) feedback fixes
   - Hero V13: bigger left banner + smaller right product card
   - Recomendados: 3 cols × 2 rows mini grid (not 2 × 3)
   - Section titles: centered with see-all on right
   - Per-product countdown overlay on cards with active sales
   - Promociones: huge centered countdown, no "Ver ofertas" button
   - Promociones: price range filter alongside discount chips
   ========================================================================= */

/* ---- Hero V13 — asymmetric: BIG banner left + SMALL product card right ---- */
.hero-v13 { padding: 24px 0 0; background: var(--bg); }
@media (max-width: 767px) { .hero-v13 { padding: 8px 0 0; } }
/* Hero is now a 2-column container at the WRAP level (banner-col +
   static flash card). The slider lives inside the LEFT column only —
   the small red card is OUTSIDE the swiper so it stays put while the
   left rotates. */
.hero-v13-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 14px;
  height: 460px;
}
.hero-v13-banner-col {
  position: relative;
  min-width: 0;
  height: 100%;
}
.hero-v13-swiper { position: relative; overflow: hidden; height: 100%; }
.hero-v13-swiper .swiper-wrapper { height: 100%; }
.hero-v13-slide {
  display: block;
  height: 100%;
  width: 100%;
}

/* LEFT — big banner panel: just an uploaded image with title overlay.
   `width:100%; height:100%` are explicit because the parent
   `.hero-v13-slide` is now a simple block (since the v0.3.95 hero
   restructure split banner + flash card into independent components).
   Without these, the banner collapsed to text-content height and the
   `.hero-v13-banner-bg` (absolute inset:0) shrank with it — image
   appeared "missing" with just the title overlay visible. */
.hero-v13-banner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-decoration: none;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--border);
  box-sizing: border-box;
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s cubic-bezier(.2,.8,.2,1);
}
.hero-v13-banner:hover { transform: translateY(-3px); border-color: var(--accent); }
.hero-v13-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.hero-v13-banner:hover .hero-v13-banner-bg { transform: scale(1.04); }
.hero-v13-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.35) 30%,
    rgba(0,0,0,0) 60%
  );
  z-index: 1;
  pointer-events: none;
}
.hero-v13-banner-content {
  position: relative;
  z-index: 2;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.hero-v13-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  background: var(--accent);
  color: #0a0a0a;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-v13-banner-title {
  font-size: clamp(2rem, 1rem + 2.8vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
}

/* RIGHT — small compact product card with Oferta Flash + countdown */
.hero-v13-flash {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 22px;
  background: linear-gradient(135deg, #2a0a0a 0%, #4d1313 50%, #1a0606 100%);
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid rgba(239,68,68,0.3);
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s;
}
.hero-v13-flash:hover { transform: translateY(-3px); border-color: var(--accent); }
.hero-v13-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(239,68,68,0.32) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-v13-flash > * { position: relative; z-index: 1; }
.hero-v13-flash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.hero-v13-flash-tag {
  background: var(--accent);
  color: #0a0a0a;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-v13-flash-disc {
  background: var(--urgent);
  color: #fff;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(239,68,68,0.4);
  /* v0.3.135 — 2-line "En oferta / -45%" layout */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 1px;
}
.hero-v13-flash-disc .hero-v13-flash-disc-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.92;
}
.hero-v13-flash-disc .hero-v13-flash-disc-pct {
  font-size: 12px;
  font-weight: 900;
}
.hero-v13-flash-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;     /* take all the vertical space the parent grants */
  padding: 4px 0;
}
.hero-v13-flash-img img {
  /* Bigger product cover — was constrained to height:100% only, which
     left a lot of empty space top + bottom. Now we let it fill more of
     the small banner while keeping the full image visible (object-fit
     contain, never crops the inner PS4 ribbon / ratings).  */
  height: auto;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.7));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.hero-v13-flash:hover .hero-v13-flash-img img { transform: scale(1.04); }
.hero-v13-flash-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-v13-flash-name {
  font-size: 15px;
  font-weight: 700;
  text-align: center;     /* Andres: center title */
  color: #fff;
  margin: 0;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-v13-flash-prices {
  display: flex;
  align-items: baseline;
  justify-content: center;       /* current LEFT, cut struck RIGHT (DOM order) */
  gap: 10px;
}
.hero-v13-flash-old {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-v13-flash-cur {
  color: var(--accent);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-v13-flash-cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.hero-v13-flash-cd .cell {
  background: var(--urgent);
  color: #fff;
  padding: 8px 0 6px;
  text-align: center;
  font-weight: 900;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-v13-flash-cd .cell::after {
  content: attr(data-l);
  display: block;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.85;
  text-transform: uppercase;
}

/* =========================================================================
   NUEVOS LANZAMIENTOS — image-banner carousel
   Lives between LOS MÁS VENDIDOS and PANTALLAS STREAMING. Cards are
   image-only (no titles/prices) per client spec — admin uploads each
   image + target link via wp-options `lyx_lanzamiento_{N}_*`. Auto-rotates,
   pauses on hover.
   ========================================================================= */
.lanzamientos-wrap {
  position: relative;
  margin-top: 26px;
}
.lanzamientos-swiper { overflow: hidden; }
.lanzamiento-slide { display: flex; align-items: stretch; }
.lanzamiento-card {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  transition: border-color .2s, transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.lanzamiento-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,215,0,0.12);
}
.lanzamiento-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.lanzamiento-card:hover img { transform: scale(1.05); }
.lanzamientos-wrap .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.lanzamientos-wrap .lanzamientos-prev { left: -18px; }
.lanzamientos-wrap .lanzamientos-next { right: -18px; }
@media (max-width: 720px) {
  .lanzamientos-wrap .lanzamientos-prev { left: 4px; }
  .lanzamientos-wrap .lanzamientos-next { right: 4px; }
}

.hero-v13-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.hero-v13-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,0.2);
  opacity: 1;
  width: 32px; height: 3px;
  border-radius: 0;
  margin: 0 !important;
  transition: background-color .2s, width .2s;
}
.hero-v13-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  width: 56px;
}
.hero-v13-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.2,.8,.2,1);
}
.hero-v13-nav:hover { background: var(--accent); border-color: var(--accent); color: #0a0a0a; }
.hero-v13-prev { left: -16px; }
.hero-v13-next { right: -16px; }

/* ---- CENTERED SECTION TITLES (Andres requested) ---- */
.section-head.section-head-centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
}
.section-head.section-head-centered .section-title-wrap {
  grid-column: 2;
  flex-direction: column;
  align-items: center;     /* center children horizontally */
  gap: 6px;
  text-align: center;      /* covers any inline text inside */
}
.section-head.section-head-centered .see-all {
  grid-column: 3;
  justify-self: end;
}
.section-head.section-head-centered .section-title,
.section-head.section-head-centered .section-subtitle {
  justify-content: center;
  text-align: center;
  width: 100%;
}

@media (max-width: 767px) {
  .section-head.section-head-centered { grid-template-columns: 1fr; }
  .section-head.section-head-centered .section-title-wrap,
  .section-head.section-head-centered .see-all {
    grid-column: 1;
    justify-self: center;
  }
}

/* ---- RECOMENDADOS V6 — 3 cols × 2 rows minis ----
   Client wants the big featured banner LESS wide so the 6-card right
   grid (3 × 2) gets more room and the small cards aren't cramped.
   Was 1.45fr / 1fr (big = 59% of width). Now 1fr / 1.1fr (big ≈ 48%,
   minis ≈ 52%). Mini cards become noticeably bigger as a result. */
.recomendados-v6 {
  display: grid;
  /* v0.3.124 — Andres asked for the right-side cards to be larger,
     even at the cost of the big editor's-pick on the left. Flipped
     the ratio so the mini grid takes ~58% of the width. Combined
     with the taller row min-height below, each mini becomes square-
     ish (~big enough to read the full game cover without cropping). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: stretch;
  min-height: 640px;
  /* v0.3.119 — clip any child that tries to escape the section
     bounds (defensive against the big-card-overlap bug Andres
     reported on phone). */
  overflow: hidden;
}
.recomendados-v6 > .rec-feat {
  aspect-ratio: auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.rec-mini-grid-v6 {
  display: grid;
  /* v0.3.124 — same 3 cols × 2 rows = 6 minis, but each row floor
     bumped from 220px → 290px so the visible game art is noticeably
     bigger. With `object-fit: contain` (no cropping), the cell needs
     enough vertical room for the portrait cover to render at a
     readable size. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(290px, 1fr) minmax(290px, 1fr);
  gap: 14px;
}

/* ---- PER-PRODUCT COUNTDOWN OVERLAY (active expiring sales) ---- */
/* Red strip pinned to the TOP edge of the cover — unmissable, doesn't
   blend with the artwork, doesn't fight the bottom platform tag, and
   doesn't compete with the slide-up cart bar.
   Discount badge + wishlist button auto-shift down via :has() below. */
.cover-countdown {
  position: absolute;
  /* v0.3.133 — moved from top → bottom of the cover per Andres.
     Anchors the strip to the BOTTOM edge so the discount badge +
     wishlist button at the top get their normal positions back
     (no longer need to shift down 36px to clear the timer strip). */
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #DC2626 0%, #B91C1C 100%);
  color: #fff;
  padding: 7px 10px;
  z-index: 5;            /* above all other cover overlays except cart slide-up */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;  /* never block the card click */
  /* Soft shadow on the TOP edge of the strip now that it sits at
     the bottom of the cover — separates it from the artwork above. */
  box-shadow: 0 -1px 0 rgba(0,0,0,0.18);
}
.cover-countdown-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: none;
  letter-spacing: 0;
}
.cover-countdown-label i {
  font-size: 10px;
  color: #fff;
}
.cover-countdown-time {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

/* When a card has the countdown, push the top-corner controls down so
   nothing overlaps. Also keeps the badge readable against the red strip. */
/* v0.3.133 — countdown strip moved to the bottom of the cover, so
   the discount badge + wishlist button no longer need to shift down
   to clear it. Rules left here as no-ops for backwards-compat with
   any inline overrides. */
.cover:has(.cover-countdown) .discount-badge { top: 8px; }
.cover:has(.cover-countdown) .wishlist-btn   { top: 8px; }

/* ---- PROMOCIONES — HUGE centered countdown (most important element) ---- */
.promo-hero-countdown {
  background:
    linear-gradient(135deg, rgba(239,68,68,0.22) 0%, rgba(239,68,68,0.05) 50%, rgba(255,215,0,0.06) 100%);
  border: 1px solid rgba(239,68,68,0.4);
  padding: 36px 28px;
  margin: 28px 0;
  text-align: center;
}
.promo-hero-countdown-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--urgent);
}
.promo-hero-countdown-label i {
  font-size: 12px;
  animation: pulse-promo 1.5s ease-in-out infinite;
}
.promo-hero-countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.promo-hero-countdown-cell {
  background: var(--bg);
  border: 1px solid rgba(239,68,68,0.4);
  padding: 22px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.promo-hero-countdown-cell strong {
  font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  font-weight: 900;
  color: var(--urgent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
}
.promo-hero-countdown-cell span {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.promo-hero-countdown-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ---- Price range filter (promociones page) ---- */
.promo-price-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* Dual-handle range slider — two stacked <input type="range">.
   Wrapper height EQUALS thumb height (20px) so the thumb's natural center
   on the input lands on the same y-coordinate as the visual track centered
   via `top: 50%; translateY(-50%)`. No magic margin-top math needed —
   geometry just works out. */
.promo-price-slider {
  position: relative;
  flex: 1 1 280px;
  min-width: 240px;
  height: 20px;
  box-sizing: border-box;
}
.promo-price-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;            /* perfect 50% centering at any zoom */
  background: var(--border);
  border-radius: 2px;
}
.promo-price-slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  right: 0%;
  background: var(--accent);
  border-radius: 2px;
}
.promo-price-slider-handle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;                /* matches thumb height — thumb auto-centers */
  background: transparent;
  pointer-events: none;        /* only thumb receives events */
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
.promo-price-slider-handle::-webkit-slider-runnable-track {
  height: 20px;
  background: transparent;
  border: none;
}
.promo-price-slider-handle::-moz-range-track {
  height: 20px;
  background: transparent;
  border: none;
}
.promo-price-slider-handle::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(0,0,0,0.4);
  cursor: grab;
  transition: transform .12s;
  box-sizing: border-box;
}
.promo-price-slider-handle::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.promo-price-slider-handle::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent), 0 2px 6px rgba(0,0,0,0.4);
  cursor: grab;
  box-sizing: border-box;
}
.promo-price-slider-handle[data-slider-role="max"] { z-index: 2; }
.promo-price-slider-handle[data-slider-role="min"] { z-index: 1; }
/* On mobile the price filter row stacks: slider on its own line, then
   inputs/button below. Slider wrapper MUST keep its 20px height (matches
   thumb size) — overriding to a different basis breaks the thumb/track
   centering geometry from the base rule. Use margin instead for breathing
   room around the slider in the column. */
@media (max-width: 720px) {
  .promo-price-filter { flex-direction: column; align-items: stretch; gap: 14px; }
  .promo-price-slider { width: 100%; flex: 0 0 20px; height: 20px; margin: 6px 0; }
  .promo-price-filter-inputs { flex-wrap: wrap; gap: 10px; }
  .promo-price-filter-inputs input { flex: 1 1 110px; }
  .promo-price-filter-inputs button { flex: 1 1 100%; padding: 12px; }
  .promo-price-filter-presets { margin-left: 0; }
}
.promo-price-filter-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.promo-price-filter-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.promo-price-filter-inputs input {
  width: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 10px;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.promo-price-filter-inputs span {
  color: var(--text-3);
  font-size: 13px;
}
.promo-price-filter button {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.promo-price-filter button:hover { border-color: var(--accent); color: var(--accent); }
.promo-price-filter-presets {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.promo-price-preset {
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
  font-variant-numeric: tabular-nums;
}
.promo-price-preset:hover { border-color: var(--border-2); color: var(--text); }
.promo-price-preset.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

@media (max-width: 1100px) {
  /* Hero stacks vertically on tablet/phone: banner slider on top,
     static red flash card below. Remove fixed 460px height — grid
     items size to their own content. */
  .hero-v13-wrap {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 14px !important;
  }
  /* v0.3.110 — explicit aspect-ratio on the banner-col + swiper so they
     always size to the visible slide on mobile. Was producing a huge
     empty gap below the banner image because Swiper's wrapper was
     stretching to a stale calculated height while the active slide
     used the shorter mobile aspect-ratio. */
  .hero-v13-banner-col {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    max-height: 60vh;
  }
  .hero-v13-swiper {
    height: 100% !important;
    min-height: 0 !important;
  }
  .hero-v13-swiper .swiper-wrapper {
    height: 100% !important;
  }
  .hero-v13-slide { grid-template-columns: 1fr; height: 100%; gap: 12px; }
  .hero-v13-banner { min-height: 0; height: 100%; }
  .hero-v13-flash { min-height: 340px; }
  .recomendados-v6 { grid-template-columns: 1fr; min-height: 0; }
  /* v0.3.124 — bumped row min-height to match desktop sizing bump */
  .rec-mini-grid-v6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: minmax(240px, 1fr) minmax(240px, 1fr); }
}
@media (max-width: 767px) {
  .hero-v13-banner-content { padding: 24px 22px; }
  .hero-v13-flash { padding: 18px; }
  .hero-v13-flash-cur { font-size: 20px; }
  .hero-v13-prev, .hero-v13-next { display: none; }
  /* v0.3.124 — phone breakpoint: bigger 2-col rows so cards stay legible */
  .rec-mini-grid-v6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(220px, 1fr)); }
  .promo-hero-countdown { padding: 24px 16px; }
  .promo-hero-countdown-grid { gap: 8px; }
  .promo-hero-countdown-cell { padding: 16px 8px 12px; }
  .promo-hero-countdown-cell span { font-size: 9px; }
  .cover-countdown { padding: 6px 8px; gap: 6px; }
  .cover-countdown-label { font-size: 9px; }
  .cover-countdown-time { font-size: 11px; }
  /* v0.3.133 — strip moved to bottom; reset to default top offset */
  .cover:has(.cover-countdown) .discount-badge { top: 8px; }
  .cover:has(.cover-countdown) .wishlist-btn   { top: 8px; }
}

/* =========================================================================
   ITERATION 10 — Andres feedback: Sec/Pri tier comparison cards on product
   ========================================================================= */

.detail-tier-cards-wrap {
  position: relative;
  margin-top: 6px;
}
.tier-no-sure {
  position: absolute;
  top: -6px;
  right: 0;
  color: var(--info);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 2px;
  border-bottom: 1px solid transparent;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.tier-no-sure:hover { border-bottom-color: var(--info); color: #8AB4FF; }
.tier-no-sure i { font-size: 10px; }

/* =========================================================================
   GENERIC MODAL — used by ¿No sé cuál comprar? Comparativa popup
   Triggered via `data-lyx-modal-open="<id>"` button → JS toggles `[hidden]`
   on the matching `<div class="lyx-modal" id="<id>">`. Click overlay or
   any `[data-lyx-modal-close]` to close. Esc key also closes.
   ========================================================================= */
/* Body scroll-lock when a modal is open. Using `position: fixed`
   instead of `overflow: hidden` because the latter:
   (a) shifts the layout when the scrollbar disappears, and
   (b) doesn't actually prevent scroll on iOS Safari.
   The JS sets `body.style.top = '-Npx'` matching the saved scroll
   position so the visual layout stays exactly where the user was. */
body.lyx-modal-open {
  position: fixed;
  inset: 0;
  width: 100%;
}
.lyx-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lyx-modal[hidden] { display: none !important; }
.lyx-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lyx-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 22px 18px;
  border-radius: 8px;
  animation: lyx-modal-pop .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes lyx-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lyx-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lyx-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.lyx-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color .15s;
}
.lyx-modal-close:hover { color: #fff; }
.lyx-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lyx-modal-row {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* v0.3.125 — rounded corners + slightly larger padding to match
     Andres's reference Comparativa modal screenshot. */
  border-radius: 10px;
}
.lyx-modal-row strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-2);
}
.lyx-modal-row.is-pri strong { color: var(--accent); }
.lyx-modal-row span {
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.5;
}
.lyx-modal-foot {
  display: flex;
  justify-content: stretch;
  margin-top: 8px;
}
.lyx-modal-cta {
  flex: 1;
  background: #fff;
  color: #0a0a0a;
  border: 0;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s;
  /* v0.3.125 — rounded button to match reference screenshot. */
  border-radius: 999px;
}
.lyx-modal-cta:hover { background: #f0f0f0; }
@media (max-width: 480px) {
  .lyx-modal { padding: 16px; }
  .lyx-modal-panel { padding: 20px 18px 16px; }
}

/* =========================================================================
   SMART CHECKOUT — hide address fields when cart is digital-only
   The Checkout module's `simplify_billing_fields_when_digital` filter
   adds `lyx-hidden-digital` class to address-related rows when no
   physical shipping is needed. This rule hides them visually + via
   accessibility (display:none = removed from a11y tree).
   ========================================================================= */
body .lyx-hidden-digital,
.woocommerce form .lyx-hidden-digital,
.woocommerce-page form .lyx-hidden-digital,
.lyx-checkout-customer-details .lyx-hidden-digital {
  display: none !important;
}

.detail-tier-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}
.tier-card-v2 {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .2s cubic-bezier(.2,.8,.2,1),
              background-color .2s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s cubic-bezier(.2,.8,.2,1),
              transform .15s;
  isolation: isolate;
}
.tier-card-v2:hover {
  border-color: var(--text-3);
  transform: translateY(-2px);
}

/* "RECOMENDADO" chip badge — visual cue for the recommended tier
   without claiming the selected state */
.tier-card-v2-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: var(--accent);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px 5px;
  z-index: 2;
  line-height: 1;
}

/* Checkmark only visible when selected */
.tier-card-v2-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 3;
}
/* If a card has both badge and checkmark, hide badge while selected
   (the checkmark is the stronger signal) */
.tier-card-v2.is-selected .tier-card-v2-badge { opacity: 0; }
.tier-card-v2.is-selected .tier-card-v2-check {
  opacity: 1;
  transform: scale(1);
}

/* SELECTED state — strong, unambiguous */
.tier-card-v2.is-selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(255,215,0,0.07) 0%, rgba(255,215,0,0.015) 55%, transparent 100%);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 14px 36px -8px rgba(255,215,0,0.18);
}
.tier-card-v2.is-selected .tier-card-v2-label { color: var(--accent); }

.tier-card-v2-label {
  /* v0.3.132 — bigger SECUNDARIA / PRIMARIA label per Andres. Bumped
     from 11px → 15px and tightened tracking slightly so the larger
     uppercase still reads as a tier badge, not body text. */
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease;
}

.tier-card-v2-prices {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
/* v0.3.132 — universal price size inside tier-card-v2-prices.
   Targets WC's `.amount` markup (`<span class="woocommerce-Price-amount
   amount">$19.900</span>`) so this works for BOTH the sale price
   (`<ins>` parent) AND the standalone no-discount price (no parent).
   Andres asked for the new price to be bigger; this is the single
   source-of-truth size for the prominent number. */
.tier-card-v2-prices .amount,
.tier-card-v2-prices .woocommerce-Price-amount {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* The OLD price (strikethrough) — kept smaller than the new price
   so the discount reads clearly, but lighter gray + bigger than the
   default WC styling so customers can actually scan the original
   number. v0.3.134 — color/size aligned with the rest of the site. */
.tier-card-v2-prices del .amount,
.tier-card-v2-prices del .woocommerce-Price-amount {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}
/* Reset browser defaults on `<del>` and `<ins>` so they don't add
   their own underline/strikethrough on top of the .amount span. */
.tier-card-v2-prices del { text-decoration: line-through; opacity: 0.85; }
.tier-card-v2-prices ins { text-decoration: none; background: transparent; }
/* Legacy class names — kept so hand-rolled markup using
   `.tier-card-v2-cur / -old` (e.g. our older home-page price block)
   still renders correctly. Sizes match the new defaults. */
.tier-card-v2-cur {
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier-card-v2-old {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tier-card-v2-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tier-card-v2-features li {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  position: relative;
  padding-left: 16px;
}
.tier-card-v2-features li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .detail-tier-cards { grid-template-columns: 1fr; }
  .tier-no-sure { position: static; display: block; margin-bottom: 12px; text-align: right; }
}

/* keep old fallback rules below */
@media (max-width: 767px) {
  .recomendado-mini-grid { grid-template-columns: 1fr 1fr; }
  .recomendado-feature-title { font-size: 20px; }
  .recomendado-feature-info { left: 18px; right: 18px; bottom: 18px; }
  .feature-banner-title { font-size: 22px; }
  .feature-banner-content { padding: 20px; }
  .platform-toggle { gap: 8px; }
  .platform-toggle-btn { min-width: 90px; padding: 12px 14px; font-size: 11px; flex-direction: column; gap: 6px; }
  .platform-toggle-btn .pt-icon { font-size: 16px; }
  .huge-countdown { padding: 18px 14px; }
  .huge-countdown-grid { gap: 6px; }
  .huge-countdown-cell { padding: 14px 4px; }
  .huge-countdown-cell strong { font-size: 32px; }
  .huge-countdown-cell span { font-size: 9px; }
  .promo-carousel-slide { aspect-ratio: 16 / 13; }
  .promo-carousel-content { padding: 0 16px; max-width: 95%; }
  .promo-carousel-title { font-size: 18px; }
  /* Mobile: hide nav arrows (the pagination handles slide changes; arrows
     overlap the slide content and are awkward to tap on small screens) */
  .promo-carousel-nav { display: none !important; }
  /* Mobile: pagination drops out of the absolute overlay onto a static
     block below the banner, narrower than full width so it reads as a
     compact dot row instead of spanning the screen edge to edge. */
  .promo-carousel-pagination,
  .promo-carousel > .swiper-pagination {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: max-content !important;
    max-width: 70% !important;
    margin: 14px auto 0 !important;
    gap: 5px !important;
  }
  .promo-carousel-pagination .swiper-pagination-bullet,
  .promo-carousel > .swiper-pagination .swiper-pagination-bullet {
    width: 22px !important;
    height: 3px !important;
  }
  .promo-carousel-pagination .swiper-pagination-bullet-active,
  .promo-carousel > .swiper-pagination .swiper-pagination-bullet-active {
    width: 32px !important;
  }
  .detail-price-current { font-size: 28px; }
  .detail-sale-countdown { padding: 12px; }
  .detail-sale-countdown-cells { margin-left: 0; width: 100%; justify-content: space-between; }
  .install-section-title { flex-wrap: wrap; }
  .detail-features { grid-template-columns: 1fr; }
}

/* =========================================================================
   FAVORITOS PAGE — wishlist of saved games
   ========================================================================= */
.favs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.favs-toolbar-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.favs-toolbar-info i { color: var(--accent); font-size: 16px; }
.favs-toolbar-info strong { color: #fff; font-weight: 800; font-size: 16px; }
.favs-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.favs-toolbar-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  text-decoration: none;
}
.favs-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.favs-clear:hover { border-color: var(--urgent); color: var(--urgent); }

.favs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.fav-card {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .2s, transform .2s;
}
.fav-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.fav-card.fav-out-of-stock { opacity: 0.85; }

.fav-remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all .15s;
  z-index: 3;
}
.fav-remove:hover { color: var(--urgent); border-color: var(--urgent); background: rgba(220,38,38,0.12); }

.fav-cover {
  position: relative;
  aspect-ratio: 600 / 900;
  background: var(--surface-2);
  overflow: hidden;
  display: block;
}
.fav-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.fav-cover:hover img { transform: scale(1.04); }
.fav-cover .discount-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--sale); color: var(--sale-text);
  padding: 4px 7px;
  font-size: 11px; font-weight: 800;
  z-index: 2;
}
.fav-cover .platform-tag {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(14,16,20,0.85);
  border: 1px solid var(--border-2);
  padding: 3px 7px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--text);
  z-index: 2;
}

.fav-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.fav-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.01em;
}
.fav-title a { color: inherit; }
.fav-title a:hover { color: var(--accent); }
.fav-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
}
.fav-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #4ade80;
  text-transform: uppercase;
}
.fav-stock i { font-size: 7px; }
.fav-stock.is-out { color: var(--urgent); }
.fav-added { color: var(--text-3); font-weight: 500; }

.fav-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.fav-cur {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fav-old {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fav-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.fav-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 12px;
  text-decoration: none;
}
.fav-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: not-allowed;
  opacity: 0.7;
}
.fav-link {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s;
}
.fav-link:hover { color: var(--accent); }

.favs-empty {
  text-align: center;
  padding: 80px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.favs-empty-icon {
  width: 80px; height: 80px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--text-3);
}
.favs-empty h2 {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}
.favs-empty p {
  font-size: 14px;
  color: var(--text-2);
  max-width: 420px;
  margin: 0 auto 22px;
  line-height: 1.55;
}
.favs-empty .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 13px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .favs-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .favs-toolbar { flex-direction: column; align-items: stretch; padding: 14px; }
  .favs-toolbar-actions { flex-direction: column; align-items: stretch; }
  .favs-toolbar-actions .btn-primary,
  .favs-clear { justify-content: center; width: 100%; }
  .fav-card { grid-template-columns: 110px 1fr; padding: 12px; gap: 12px; }
  .fav-title { font-size: 14px; }
  .fav-cur { font-size: 18px; }
  .fav-old { font-size: 14px; }
  .fav-actions { gap: 8px; flex-direction: column; align-items: stretch; }
  .fav-actions .btn-primary,
  .fav-actions .btn-secondary { justify-content: center; }
  .fav-link { text-align: center; justify-content: center; }
  .favs-empty { padding: 56px 18px; }
}

/* =========================================================================
   LIVE SEARCH DROPDOWN — AJAX-style results as user types.
   v0.3.109 — selectors now scoped to `.header-search` / `.mobile-drawer-search`
   parents. Was matching plain `.search-results`, which collided with the
   class WordPress automatically adds to `<body>` on `is_search()` pages
   (`<body class="search search-results …">`) — making the body itself
   `position: absolute; top: calc(100% + 6px); max-height: 420px;` and
   producing the giant empty area + weird scrollbar on the search page.
   ========================================================================= */
.header-search .search-results,
.mobile-drawer-search .search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  max-height: 420px;
  overflow-y: auto;
  z-index: 150;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.6);
}
.header-search .search-results[hidden],
.mobile-drawer-search .search-results[hidden] { display: none; }
.search-result {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background-color .12s;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover,
.search-result.is-highlight {
  background: var(--surface-2);
}
.search-result img {
  width: 44px; height: 44px;
  object-fit: cover;
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.search-result-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-result-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-meta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
}
.search-result-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.search-empty,
.search-hint {
  padding: 18px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
.search-empty strong { color: #fff; display: block; margin-bottom: 4px; font-size: 13px; }
.search-foot {
  padding: 10px 14px;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.search-foot a {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* In the mobile drawer the search dropdown is sized differently */
.mobile-drawer-search {
  position: relative;
}
.mobile-drawer-search .search-results {
  position: relative;
  top: 8px;
  max-height: 320px;
  box-shadow: none;
}

/* =========================================================================
   STICKY HEADER — already position:sticky; explicit reaffirmation +
   mobile drawer scroll fix
   ========================================================================= */
.site-header { position: sticky; top: 0; z-index: 100; }
/* Drawer panel scrolls internally if content is taller than viewport */
.mobile-drawer-panel {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Show profile + heart in header on mobile (smaller, in compact form) */
@media (max-width: 1100px) {
  .header-actions { gap: 4px; }
  .header-actions .icon-btn {
    display: inline-flex;
    width: 38px; height: 38px;
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  /* Tightest screens: hide profile/heart in header (drawer has them) */
  .header-actions .icon-btn { display: none; }
}

/* =========================================================================
   PAGE-HEADER + MAIN VERTICAL RHYTHM (round 7 — proper breathing room)
   ========================================================================= */
/* Page-header (Catálogo, Carrito, Checkout, Contacto, etc.) needs space
   above and below so it doesn't feel cramped against the site header. */
.page-header { padding: 40px 0 32px; }
@media (max-width: 767px) {
  .page-header { padding: 28px 0 22px; }
  .page-title { font-size: 24px; }
}
/* Every main has consistent top + bottom breathing room */
main { padding: 28px 0 56px; }
@media (max-width: 767px) {
  main { padding: 14px 0 40px; }
}
/* Pages whose first child is a hero (no page-header) need almost no top padding */
main:has(> .hero-v13:first-child),
main > .hero-v13:first-child { margin-top: 0; }
@media (max-width: 767px) {
  /* Force minimal top gap when hero is the first thing in main */
  main:has(> .hero-v13:first-child) { padding-top: 8px; }
}

/* Pages WITH a .page-header above main get a bit less main top-padding
   because page-header already has 32px / 22px bottom padding. */
.page-header + main { padding-top: 24px; }
@media (max-width: 767px) {
  .page-header + main { padding-top: 18px; }
}

/* Producto pages: breadcrumbs inline margin-top:24px is now redundant
   since main has padding-top. Force-zero it for consistency. */
main > .container > .breadcrumbs[style*="margin-top"] { margin-top: 0 !important; }

/* Breadcrumbs on mobile: horizontal scroll instead of wrapping (avoids
   awkward "Acción y / aventura" line breaks while keeping path readable) */
.breadcrumbs {
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs > a,
.breadcrumbs > span { flex-shrink: 0; }

/* Consistent gap below breadcrumbs before the next block */
main > .container > .breadcrumbs { margin-bottom: 14px; }
@media (max-width: 767px) {
  main > .container > .breadcrumbs { margin-bottom: 12px; }
}

/* =========================================================================
   CATEGORY PILLS — horizontal scroll with a visible thin scrollbar
   so users see the affordance and can scroll through all categories.
   ========================================================================= */
.cats-strip { padding: 18px 0 6px; }
.cats-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 10px;          /* room for scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,215,0,0.5) var(--surface);
  -webkit-overflow-scrolling: touch;
}
.cats-row::-webkit-scrollbar { height: 5px; display: block; }
.cats-row::-webkit-scrollbar-track {
  background: var(--surface);
  border-radius: 3px;
}
.cats-row::-webkit-scrollbar-thumb {
  background: rgba(255,215,0,0.45);
  border-radius: 3px;
  transition: background-color .15s;
}
.cats-row::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.cat-pill { flex: 0 0 auto; }

@media (max-width: 600px) {
  .cats-row { gap: 6px; padding-bottom: 8px; }
  .cat-pill {
    padding: 6px 11px 6px 6px;
    font-size: 12px;
    gap: 8px;
  }
  .cat-pill .pill-icon { width: 24px; height: 24px; font-size: 11px; }
  .cat-pill .pill-count { font-size: 10px; }
}

/* =========================================================================
   SLIDER PAGINATION — visible dots on mobile so users know they can swipe
   ========================================================================= */
.products-swiper,
.recomendados-swiper {
  position: relative;
  padding-bottom: 30px;       /* room for the dots */
}
.products-swiper .swiper-pagination,
.recomendados-swiper .swiper-pagination {
  position: absolute;
  bottom: 6px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;       /* dots are visual only */
}
.products-swiper .swiper-pagination-bullet,
.recomendados-swiper .swiper-pagination-bullet {
  width: 6px; height: 6px;
  background: var(--text-3);
  opacity: 0.4;
  border-radius: 50%;
  transition: opacity .2s, background-color .2s, width .2s;
}
.products-swiper .swiper-pagination-bullet-active,
.recomendados-swiper .swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
  width: 18px;
  border-radius: 3px;
}
/* DESLIZA hint removed — pagination dots already signal swipeability,
   and the floating hint was overlapping the countdown banner above the carousel. */

/* =========================================================================
   CHECKBOX ROW — fix awkward wrap on narrow viewports
   ========================================================================= */
.checkbox-row {
  align-items: flex-start;
  line-height: 1.4;
}
.checkbox-row input { margin-top: 2px; flex-shrink: 0; }
.checkbox-row a { color: var(--accent); }
.checkbox-row a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .checkbox-row { font-size: 12px; }
}

/* =========================================================================
   CART PAGE — kill the empty gap below summary on mobile
   ========================================================================= */
@media (max-width: 1024px) {
  .cart-layout { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .cart-summary { position: static; }
}

/* =========================================================================
   MOBILE FIXES (round 5+6 — Andres feedback on phone)
   ========================================================================= */

/* CRITICAL: rec-mini cards collapsed to 0 height when stacked vertically
   on mobile because grid-template-rows: 1fr has nothing to stretch against.
   Give them an intrinsic aspect-ratio so they always have height. */
@media (max-width: 1100px) {
  .rec-mini { aspect-ratio: 16 / 11; }
  .rec-mini-grid-v6 { grid-auto-rows: minmax(0, 1fr); }

  /* Banner row — full width single column, no overflow possible */
  .banner-row { grid-template-columns: 1fr; max-width: 100%; }
  .feature-banner { width: 100%; max-width: 100%; }

  /* Header alignment on tablet+phone — logo left, actions+hamburger right */
  .header-inner { gap: 12px; }
}

@media (max-width: 600px) {
  /* Hero on phone — TRULY compact. Big banner stays visual but doesn't
     dominate the fold; flash card is tight with a horizontal layout. */
  .hero-v13-wrap { padding: 0 16px; }   /* gutter on phone, no extra vertical pad */
  .hero-v13-slide { gap: 10px; }

  .hero-v13-banner { min-height: 180px; }
  .hero-v13-banner-content { padding: 18px 18px 20px; gap: 8px; }
  .hero-v13-banner-tag { font-size: 9px; padding: 4px 8px; letter-spacing: 0.14em; }
  .hero-v13-banner-title { font-size: 1.5rem; line-height: 1.05; }

  /* Flash card: image on the LEFT, content on the RIGHT — compact horizontal
     layout so it fits without scrolling on phone */
  .hero-v13-flash {
    min-height: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    align-items: start;
  }
  .hero-v13-flash-row {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hero-v13-flash-img {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
    aspect-ratio: 2 / 3;
    max-height: none;
    height: 100%;
  }
  .hero-v13-flash-foot {
    grid-column: 2;
    grid-row: 2;
    gap: 6px;
    margin: 0;
    text-align: center;       /* center title + prices in content column */
  }
  .hero-v13-flash-name { font-size: 13px; line-height: 1.2; text-align: center; }
  .hero-v13-flash-prices {
    justify-content: center;
    gap: 8px;
  }
  .hero-v13-flash-cur { font-size: 18px; }
  .hero-v13-flash-old { font-size: 13px; }
  .hero-v13-flash-cd { gap: 4px; }
  .hero-v13-flash-cd .cell {
    font-size: 12px;
    padding: 4px 6px;
    min-width: 32px;
  }
  .hero-v13-flash-tag { font-size: 9px; padding: 3px 7px; }
  .hero-v13-flash-disc { font-size: 11px; padding: 3px 7px; }

  /* "Por qué comprar con nosotros" — single clean column, no orphan card */
  .why-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .why-card:nth-child(5) { grid-column: auto !important; }
  .why-card { padding: 22px 18px; }
  .why-text { max-width: 320px; margin: 0 auto; }

  /* Recomendados featured card — shorter aspect on phone, content tighter */
  .rec-feat { aspect-ratio: 3 / 2; }
  .rec-feat-info { bottom: 16px; left: 16px; right: 16px; gap: 8px; }
  .rec-feat-title { font-size: 22px !important; line-height: 1; }
  .rec-feat-tag { font-size: 10px !important; padding: 6px 10px !important; }
  .rec-feat-meta { gap: 10px !important; flex-wrap: wrap; }
  .rec-feat-cur { font-size: 22px !important; }
  .rec-feat-old { font-size: 15px !important; }
  .rec-feat-disc { font-size: 11px !important; padding: 4px 8px !important; }

  /* Mini cards — 2x3 grid on phone, slightly taller poster aspect */
  .rec-mini { aspect-ratio: 3 / 4; }

  /* Feature banner row — proper padding, content not crushed against edges */
  .feature-banner { aspect-ratio: 4 / 3; min-height: 240px; }
  .feature-banner-content { padding: 22px 20px !important; max-width: 100% !important; }
  .feature-banner-title { font-size: 22px !important; line-height: 1.1; }
  .feature-banner-subtitle { font-size: 13px !important; max-width: 100% !important; }
  .feature-banner-cta {
    margin-top: 6px;
    padding: 11px 18px !important;
    font-size: 12px !important;
  }
  .banner-row { gap: 14px; }

  /* Topbar full-bleed — kill any centering padding mismatch */
  .topbar-inner { padding: 7px 14px; }
  .topbar-right { margin-left: auto; }
}

/* =========================================================================
   PAGE LOADER (overlay + spinner that fades on document load)
   ========================================================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--bg);
  transition: opacity .45s ease, visibility .45s ease;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader-mark {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #FFD700 0%, #FF8800 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 22px;
  color: #0a0a0a;
  letter-spacing: -0.04em;
  font-style: italic;
  border-radius: 6px;
  animation: loader-pulse 1.4s ease-in-out infinite;
}
.page-loader-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.page-loader-bar {
  width: 180px;
  height: 3px;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.page-loader-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  animation: loader-slide 1.2s linear infinite;
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,215,0,0.5); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(255,215,0,0); }
}
@keyframes loader-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}

/* =========================================================================
   SMOOTH SCROLL
   ========================================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =========================================================================
   CUSTOM CURSOR (desktop only — disabled on touch via JS)
   ========================================================================= */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  will-change: transform;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transition: opacity .15s ease;
  opacity: 0;                                /* hidden until first mousemove */
  transform: translate3d(-100px, -100px, 0); /* parked offscreen safely */
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(255,215,0,0.45);
  border-radius: 50%;
  transition: width .25s cubic-bezier(.2,.8,.2,1),
              height .25s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease,
              background-color .25s ease,
              opacity .15s ease;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-dot.is-active,
.cursor-ring.is-active { opacity: 1; }
.cursor-ring.is-hover {
  width: 48px; height: 48px;
  border-color: var(--accent);
  background: rgba(255,215,0,0.06);
  margin-left: -8px; margin-top: -8px;   /* compensate growth from center */
}
@media (hover: none), (max-width: 1023px) {
  .cursor-dot, .cursor-ring { display: none !important; }
}


/* =========================================================================
   VARIANTS DEMO BAR — preview-only nav for the 3 product page versions
   ========================================================================= */
.variants-demo {
  margin-top: 14px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(255,215,0,0.05) 0%, transparent 100%);
  border: 1px dashed rgba(255,215,0,0.30);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.variants-demo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}
.variants-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: all .15s;
}
.variants-demo-link:hover { color: #fff; border-color: var(--text-3); }
.variants-demo-link.is-active {
  background: var(--accent);
  color: #0a0a0a;
  border-color: var(--accent);
  font-weight: 800;
}

/* =========================================================================
   PRODUCT DESCRIPTION — 2-column layout with YouTube trailer (Andres feedback)
   Mirrors what client does on his current site — text left, video right.
   ========================================================================= */
.desc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.desc-text { min-width: 0; }
/* Trailer column wrapper — `position: sticky` keeps the trailer (label
   + iframe) pinned while the user scrolls the long description on the
   left. The sticky element CONTAINS both the "TRÁILER OFICIAL" label
   AND the iframe so they pin together (the label was scrolling away
   when sticky was on the iframe alone).
   Top offset accounts for our sticky header (--header-h, default 64px).
   `align-self: start` is set on .desc-layout so the sticky context works
   correctly inside the grid. */
.desc-trailer-col {
  position: -webkit-sticky;
  position: sticky;
  /* Sticky offset = header height + comfortable breathing room. The
     header is ~64px tall + the topbar above it is ~32px, plus we want
     the trailer to clearly NOT touch the header — 40px of gap looks
     good on desktop and tablet. */
  top: calc(var(--header-h, 64px) + 40px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  /* No internal max-height — we want the entire block to stay visible
     in the viewport while sticky. If the trailer + label is taller than
     the viewport on small laptops, the bottom edge will scroll out, but
     the user can still scroll the description above it. */
}
@media (max-width: 1100px) {
  .desc-trailer-col { top: calc(var(--header-h, 64px) + 24px); }
}
.desc-video {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Make sure no ancestor of .desc-trailer-col has overflow that would
   defeat sticky. .detail-panel + main are the candidates. */
.detail-panel { overflow: visible !important; }
main { overflow: visible !important; }
.desc-video-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.desc-video-label i { color: #ff0000; font-size: 14px; }
.desc-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  overflow: hidden;
}
.desc-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .desc-layout { grid-template-columns: 1fr; gap: 24px; }
  .desc-trailer-col { position: static; order: -1; }   /* video on top on mobile */
  .desc-video { position: static; order: -1; }
}

/* =========================================================================
   PRODUCT PAGE — REVIEWS TAB
   YouTube embed + external review sites grid + customer reviews
   ========================================================================= */
.detail-tab-count {
  font-weight: 600;
  color: var(--text-3);
  margin-left: 4px;
}
.detail-tab.is-active .detail-tab-count { color: var(--accent); }

.reviews-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.reviews-section-head h3 {
  margin: 0;
  font-size: 16px; font-weight: 800;
  color: #fff;
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 10px;
}
.reviews-section-head h3 i { font-size: 16px; }
.reviews-section-link {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.reviews-section-link:hover { color: var(--accent-hover); text-decoration: underline; }
.reviews-section-link i { font-size: 9px; }

/* YouTube iframe */
.reviews-yt-wrap { margin-bottom: 36px; }
.reviews-yt-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  overflow: hidden;
}
.reviews-yt-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* External review sites grid */
.reviews-ext-wrap { margin-bottom: 36px; }
.reviews-ext-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.reviews-ext-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.02);
}
.reviews-ext-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,215,0,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
}
.reviews-ext-card > i:first-child {
  font-size: 22px;
  width: 32px; text-align: center;
  flex-shrink: 0;
}
.reviews-ext-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reviews-ext-text strong {
  display: block;
  color: #fff;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.005em;
}
.reviews-ext-text span {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
}
.reviews-ext-arrow {
  color: var(--text-3);
  font-size: 12px;
  transition: color .15s, transform .15s;
  flex-shrink: 0;
}
.reviews-ext-card:hover .reviews-ext-arrow { color: var(--accent); transform: translateX(3px); }

/* Customer reviews block */
.reviews-customer-wrap { padding-top: 8px; }
.reviews-customer-count {
  font-weight: 600; color: var(--text-3);
  margin-left: 4px;
}
.reviews-customer-empty {
  text-align: center;
  padding: 40px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.reviews-customer-empty i {
  font-size: 32px;
  color: var(--text-4);
  margin-bottom: 12px;
}
.reviews-customer-empty p {
  margin: 0 0 6px;
  color: #fff;
  font-size: 14px;
}

/* Style WC's comment_form fields inside the reviews tab */
.reviews-customer-wrap #respond {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 24px;
  margin-top: 16px;
}
.reviews-customer-wrap #reply-title {
  margin: 0 0 14px;
  color: #fff; font-size: 15px; font-weight: 800;
}
.reviews-customer-wrap .comment-form-rating label,
.reviews-customer-wrap .comment-form label {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 6px;
}
.reviews-customer-wrap .comment-form input[type="text"],
.reviews-customer-wrap .comment-form input[type="email"],
.reviews-customer-wrap .comment-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: #fff;
  padding: 11px 14px;
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 12px;
}
.reviews-customer-wrap .comment-form input:focus,
.reviews-customer-wrap .comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.reviews-customer-wrap .form-submit input[type="submit"] {
  background: var(--accent);
  color: #0a0a0a;
  border: 0;
  padding: 12px 22px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.reviews-customer-wrap .form-submit input[type="submit"]:hover { background: var(--accent-hover); }

@media (max-width: 600px) {
  .reviews-section-head h3 { font-size: 14px; }
  .reviews-ext-grid { grid-template-columns: 1fr; }
  .reviews-ext-card { padding: 14px 16px; }
  .reviews-yt-wrap, .reviews-ext-wrap { margin-bottom: 28px; }
}

/* =========================================================================
   STEAM REVIEWS — text excerpts pulled from Steam's appreviews API
   ========================================================================= */
.reviews-steam-wrap { margin-bottom: 36px; }
.reviews-steam-score {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 10px;
  background: rgba(102,192,244,0.12);
  border: 1px solid rgba(102,192,244,0.30);
  color: #66c0f4;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Steam aggregate stats bar */
.reviews-steam-stats {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(102,192,244,0.06) 0%, var(--surface-2) 70%);
  border: 1px solid var(--border);
  border-left: 3px solid #66c0f4;
}
.reviews-steam-stat-pct {
  display: flex; align-items: baseline; gap: 6px;
}
.reviews-steam-stat-pct strong {
  font-size: 28px; font-weight: 900;
  color: #fff; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.reviews-steam-stat-pct span {
  font-size: 12px; font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.reviews-steam-stat-bar {
  height: 8px;
  background: rgba(102,192,244,0.08);
  position: relative;
  overflow: hidden;
}
.reviews-steam-stat-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #66c0f4 0%, #4fa8d4 100%);
}
.reviews-steam-stat-total {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.reviews-steam-stat-total strong { color: #fff; font-weight: 800; }

/* Individual review card */
.reviews-steam-list {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.reviews-steam-card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.reviews-steam-card-head {
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}
.reviews-steam-thumb {
  display: inline-flex; align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.reviews-steam-thumb.is-up   { background: rgba(34,197,94,0.12); color: var(--sale); border: 1px solid rgba(34,197,94,0.25); }
.reviews-steam-thumb.is-down { background: rgba(239,68,68,0.12); color: var(--urgent); border: 1px solid rgba(239,68,68,0.25); }
.reviews-steam-thumb i { font-size: 11px; }
.reviews-steam-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.reviews-steam-meta i { font-size: 10px; color: var(--text-4); }
.reviews-steam-meta-date { margin-left: auto; }
.reviews-steam-card-body {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.reviews-steam-card-foot {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-3);
}
.reviews-steam-card-foot i { color: var(--accent); margin-right: 6px; }

/* "Leer todas las reseñas en Steam" CTA */
.reviews-steam-more {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #1b2838;
  border: 1px solid #2a475e;
  color: #66c0f4;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s, color .15s, transform .15s;
}
.reviews-steam-more:hover {
  background: #2a475e;
  color: #fff;
  transform: translateX(2px);
}
.reviews-steam-more i { font-size: 11px; }

@media (max-width: 600px) {
  .reviews-steam-stats { grid-template-columns: auto 1fr; gap: 12px 18px; }
  .reviews-steam-stat-total { grid-column: 1 / -1; }
  .reviews-steam-meta-date { margin-left: 0; }
  .reviews-steam-card { padding: 14px 16px; }
}

/* YouTube fallback link card (when no saved review video URL is set
   on the product, or when the URL can't produce a valid embed ID).
   Renders as a clickable banner that opens YouTube search externally,
   so we never get the "This video is unavailable" embed error. */
.reviews-yt-card {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(255,0,0,0.10) 0%, var(--surface-2) 60%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-left: 3px solid #ff0000;
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02);
}
.reviews-yt-card:hover {
  transform: translateY(-2px);
  border-color: #ff0000;
  box-shadow: 0 14px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,0,0,0.20);
}
.reviews-yt-card-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: #ff0000; color: #fff;
  font-size: 24px;
  border-radius: 4px;
}
.reviews-yt-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.reviews-yt-card-text strong {
  display: block;
  color: #fff;
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.005em;
}
.reviews-yt-card-text span {
  font-size: 12.5px; color: var(--text-3);
  line-height: 1.5;
}
.reviews-yt-card-arrow {
  color: var(--text-3); font-size: 14px;
  transition: color .15s, transform .15s;
  flex-shrink: 0;
}
.reviews-yt-card:hover .reviews-yt-card-arrow { color: #fff; transform: translateX(3px); }

/* Display-only customer reviews — hide WC's submission form entirely.
   The user wanted "show reviews, not add" so we kill the comment form. */
.reviews-readonly #respond,
.reviews-readonly .comment-form,
.reviews-readonly .comment-respond,
.reviews-readonly #review_form_wrapper,
.reviews-readonly #reply-title,
.reviews-readonly .comment-reply-title,
.reviews-readonly .must-log-in {
  display: none !important;
}
/* Existing review LIST styling — make it match our dark theme. */
.reviews-readonly .commentlist,
.reviews-readonly ol.commentlist,
.reviews-readonly .woocommerce-Reviews-title { list-style: none; padding: 0; margin: 0; }
.reviews-readonly .woocommerce-Reviews-title { display: none; } /* duplicates our heading */
.reviews-readonly .commentlist li.review,
.reviews-readonly .commentlist li.comment {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin: 0 0 12px;
  list-style: none;
}
.reviews-readonly .comment_container { display: flex; gap: 14px; align-items: flex-start; }
.reviews-readonly .commentlist .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.reviews-readonly .comment-text { flex: 1; min-width: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.reviews-readonly .comment-text .meta strong { color: #fff; font-weight: 700; }
.reviews-readonly .comment-text .meta time { color: var(--text-3); font-size: 11.5px; margin-left: 6px; }
.reviews-readonly .comment-text .star-rating { display: inline-block; margin-bottom: 4px; }
.reviews-readonly .comment-text p:last-child { margin-bottom: 0; }

/* =========================================================================
   TOAST NOTIFICATIONS — added to body root via JS (lyxToast.show)
   ========================================================================= */
.lyx-toasts {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
@media (max-width: 600px) {
  .lyx-toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}
.lyx-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 12px;
  min-width: 280px; max-width: 420px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 12px 30px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.lyx-toast.is-visible { opacity: 1; transform: translateY(0); }
.lyx-toast-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  margin-top: 1px;
}
.lyx-toast-body { flex: 1; min-width: 0; word-wrap: break-word; }
.lyx-toast-body a { color: var(--accent); font-weight: 700; }
.lyx-toast-body a:hover { text-decoration: underline; }
.lyx-toast-close {
  flex-shrink: 0;
  background: transparent; border: 0;
  color: var(--text-3);
  font-size: 18px; line-height: 1;
  padding: 0 0 0 6px; margin: -2px -2px 0 4px;
  cursor: pointer;
  transition: color .15s;
}
.lyx-toast-close:hover { color: #fff; }

.lyx-toast-success { border-left-color: var(--sale); background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, var(--surface) 60%); }
.lyx-toast-success .lyx-toast-icon { color: var(--sale); }
.lyx-toast-success .lyx-toast-body a { color: var(--accent); }
.lyx-toast-error   { border-left-color: var(--urgent); background: linear-gradient(180deg, rgba(239,68,68,0.10) 0%, var(--surface) 60%); }
.lyx-toast-error .lyx-toast-icon { color: var(--urgent); }
.lyx-toast-info    { border-left-color: var(--info); background: linear-gradient(180deg, rgba(59,130,246,0.08) 0%, var(--surface) 60%); }
.lyx-toast-info .lyx-toast-icon { color: var(--info); }

/* Add-to-cart button — loading state */
.lyx-add-to-cart-btn.is-loading { opacity: 0.7; cursor: wait; pointer-events: none; }
.lyx-add-to-cart-btn.is-loading::after {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: lyx-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes lyx-spin { to { transform: rotate(360deg); } }

/* Cart qty selector — match the product-page `.qty-selector` design
   exactly (44px tall, 40px buttons, 50px input, accent hover on +/−). The
   `.lyx-cart-qty` class is the same `.qty-selector` underneath so the
   base rules at line ~1515 apply; we only add cart-specific tweaks here. */
.lyx-cart-qty.is-individual {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 60px; height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.lyx-cart-qty-static {
  font-weight: 800; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
/* Override the old cart-item shrink — we want full size */
.cart-item .qty-selector,
.cart-item .lyx-cart-qty { transform: none !important; transform-origin: left; }
@media (max-width: 720px) {
  .cart-item .qty-selector,
  .cart-item .lyx-cart-qty { transform: none !important; }
}

/* Subtle "updating" pulse on qty input while AJAX update is in-flight */
.lyx-cart-qty.is-updating {
  pointer-events: none;
  opacity: 0.65;
}
.lyx-cart-qty.is-updating input { color: var(--accent) !important; }

/* =========================================================================
   CART ACTIONS ROW (coupon + continue shopping) — beefed up
   The `.lyx-cart-actions-row` was too plain. Now it sits in its own
   bordered card with a subtle accent on the coupon and a polished
   continue-shopping link. Auto-update is silent — there's no
   "Actualizar" button (we removed it), the qty change writes through
   automatically. */
.lyx-cart-actions-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: 22px !important;
  padding: 18px 20px !important;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.02) !important;
  flex-wrap: wrap !important;
}

/* Coupon input pill — flex 1 with input + Aplicar button */
body .lyx-cart-actions-row .coupon-input,
body .lyx-cart-actions-row .lyx-cart-coupon {
  flex: 1 1 320px !important;
  min-width: 260px !important;
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  position: relative;
}
body .lyx-cart-actions-row .lyx-cart-coupon::before {
  content: '\f02b'; /* fa-tag */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
  font-weight: 900;
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 13px;
  pointer-events: none;
  z-index: 2;
}
body .lyx-cart-actions-row .lyx-cart-coupon input[type="text"] {
  padding-left: 40px !important;
  height: 44px !important;
}

/* Continue shopping CTA — outlined, full-height, hover accent. */
.lyx-cart-actions-row .lyx-cart-continue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 22px !important;
  min-height: 44px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-2) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: border-color .15s, color .15s, background-color .15s, transform .1s !important;
  white-space: nowrap;
}
.lyx-cart-actions-row .lyx-cart-continue:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--surface-2) !important;
  transform: translateX(-2px);
}
.lyx-cart-actions-row .lyx-cart-continue i { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────────────
   CART PAGE — phone overflow + button height bulletproofing
   Earlier passes tried `max-width: 100%` + `flex-wrap` but the page
   still pushed wide on phones AND the APLICAR button still rendered
   taller than the input. The rules below are explicit, multi-layered,
   and use `max-height` to truly clamp the button.
   ───────────────────────────────────────────────────────────────────── */

/* Universal page-level guard for cart + checkout pages — defeats any
   absolute/fixed-width child or rogue WC stylesheet pushing the layout
   wider than the viewport. */
.woocommerce-cart,
.woocommerce-checkout {
  overflow-x: clip !important;
  overflow-x: hidden;     /* Safari < 15.4 fallback */
}
.woocommerce-cart > main,
.woocommerce-checkout > main,
.woocommerce-cart .container,
.woocommerce-checkout .container {
  max-width: 100% !important;
  overflow-x: clip !important;
  overflow-x: hidden;
  box-sizing: border-box !important;
}

/* Mobile-specific guards (≤ 720px). */
@media (max-width: 720px) {
  .cart-summary,
  .lyx-cart-summary,
  .cart-items,
  .cart-item,
  .lyx-cart-actions-row,
  .lyx-cart-cta-stack,
  .lyx-cart-pm-block,
  .lyx-cart-trust,
  .woocommerce-cart-form {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .cart-item > *,
  .cart-item-info,
  .cart-item-title,
  .cart-item-info > *,
  .cart-item-meta,
  .cart-item-meta > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  .cart-item-meta { flex-wrap: wrap !important; }
  .lyx-cart-cta-stack .btn-whatsapp,
  .lyx-cart-cta-stack .btn-primary,
  .lyx-cart-cta-stack a {
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
  }
  .lyx-cart-summary .payment-methods,
  .payment-methods { flex-wrap: wrap !important; }
  .payment-methods .pm { max-width: 100% !important; }
}

/* APLICAR / Aplicar coupon BUTTON — ironclad height clamp.
   Earlier the button rendered ~46-50px tall on some browsers despite
   `height: 44px` because (a) WC's stock `.button` adds vertical
   padding via cascade, and (b) `display: inline-flex` reads the
   line-height as the line-box minimum, growing the box if it exceeds
   44px. The rules below clamp from all four sides AND zero out any
   inherited vertical padding/border. */
body .coupon-input button,
body .lyx-cart-coupon button,
body .lyx-cart-coupon button.button,
body .lyx-cart-coupon button[type="submit"],
body .lyx-cart-actions-row .coupon-input button,
body .lyx-cart-actions-row .lyx-cart-coupon button,
.woocommerce-page .coupon-input button,
.woocommerce-page .lyx-cart-coupon button,
.woocommerce form .lyx-cart-coupon button.button,
.woocommerce form .coupon-input button,
.woocommerce form .lyx-cart-actions-row .lyx-cart-coupon button {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  line-height: 1 !important;     /* don't let line-height push height */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}
/* Same clamp on the coupon input so visual heights line up exactly. */
body .coupon-input input,
body .lyx-cart-coupon input,
body .lyx-cart-actions-row .coupon-input input,
body .lyx-cart-actions-row .lyx-cart-coupon input,
.woocommerce-page .lyx-cart-coupon input,
.woocommerce form .lyx-cart-coupon input[type="text"] {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  vertical-align: middle !important;
}

@media (max-width: 600px) {
  /* Stack the actions row vertically on phones. The coupon-input is
     itself a flex row (input + button) which can blow up on narrow
     screens — pin the button to a sensible width and force input to
     flex shrink. The huge yellow "APLICAR" rectangle bug was caused by
     the button having no width cap while the parent had `min-width:0`,
     which let it absorb all available column width. */
  .lyx-cart-actions-row { flex-direction: column !important; padding: 14px !important; gap: 10px !important; }
  body .lyx-cart-actions-row .coupon-input,
  body .lyx-cart-actions-row .lyx-cart-coupon {
    min-width: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* Coupon input — flex-grow, shrink to 0 if needed */
  body .lyx-cart-actions-row .lyx-cart-coupon input[type="text"],
  body .lyx-cart-actions-row .coupon-input input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 14px 0 38px !important;   /* 38px keeps room for the absolute tag icon */
  }
  /* APLICAR button — fixed compact width */
  body .lyx-cart-actions-row .lyx-cart-coupon button,
  body .lyx-cart-actions-row .coupon-input button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
    max-width: 120px !important;
    padding: 0 14px !important;
    height: 44px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }
  .lyx-cart-actions-row .lyx-cart-continue { width: 100% !important; }
}

/* =========================================================================
   STOCK PROGRESS BAR — replaces "X unidades disponibles" text on producto page
   Better for ecommerce conversion (Andres feedback). Shows scarcity visually.
   ========================================================================= */
.stock-bar {
  margin-top: 6px;
  padding: 0;
}
.stock-bar-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.stock-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--urgent);
  text-transform: uppercase;
}
.stock-bar-label i { font-size: 11px; }
.stock-bar-count {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.stock-bar-count strong {
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stock-bar-track {
  width: 100%;
  height: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.stock-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--urgent) 0%, #ff6b3d 100%);
  transition: width .4s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.stock-bar-fill::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 100%);
}

/* When plenty in stock (>50%), use the calmer accent green/yellow */
.stock-bar.is-healthy .stock-bar-label {
  color: #4ade80;
}
.stock-bar.is-healthy .stock-bar-fill {
  background: linear-gradient(90deg, #4ade80 0%, #86efac 100%);
}

/* =========================================================================
   "OFERTA TERMINA EN" timer block on product page (V3) — Andres asked
   for this to be bigger / more prominent. Larger padding + cells.
   ========================================================================= */
.detail-sale-timer {
  margin-top: 14px;
  padding: 18px 22px;
  background: linear-gradient(90deg, rgba(220,38,38,0.14) 0%, rgba(220,38,38,0.04) 100%);
  border: 1px solid rgba(220,38,38,0.40);
  border-left: 4px solid var(--urgent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.detail-sale-timer-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  text-transform: uppercase;
}
.detail-sale-timer-label i { color: var(--urgent); font-size: 16px; }
.detail-sale-timer-clock {
  display: inline-flex;
  gap: 8px;
}
.detail-sale-timer-cell {
  background: rgba(0,0,0,0.40);
  border: 1px solid var(--border);
  padding: 10px 14px 8px;
  text-align: center;
  min-width: 54px;
}
.detail-sale-timer-cell strong {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.detail-sale-timer-cell span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 5px;
}
@media (max-width: 600px) {
  .detail-sale-timer { padding: 14px 14px; gap: 12px; }
  .detail-sale-timer-clock { gap: 6px; }
  .detail-sale-timer-cell { padding: 8px 10px 6px; min-width: 46px; }
  .detail-sale-timer-cell strong { font-size: 18px; }
}

/* =========================================================================
   THANK-YOU PAGES (gracias-pedido.html / gracias-contacto.html)
   Two distinct success layouts — one for orders, one for contact form.
   ========================================================================= */

/* Shared success hero — large icon, headline, supporting text */
.ty-hero {
  text-align: center;
  padding: 56px 24px 40px;
  background:
    radial-gradient(ellipse 600px 300px at 50% 0%, rgba(255,215,0,0.08) 0%, transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.ty-icon {
  width: 84px; height: 84px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  box-shadow: 0 0 0 8px rgba(255,215,0,0.08), 0 16px 40px -8px rgba(255,215,0,0.25);
}
.ty-icon.is-info {
  background: var(--info);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(80,140,255,0.10), 0 16px 40px -8px rgba(80,140,255,0.30);
}
.ty-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.ty-eyebrow.is-info { color: var(--info); }
.ty-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ty-sub {
  font-size: 16px;
  color: var(--text-2);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.55;
}

/* Body container shared by both pages */
.ty-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Order summary card (gracias-pedido) */
.ty-order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
  margin-bottom: 24px;
}
.ty-order-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.ty-order-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ty-order-num strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.ty-order-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(74,222,128,0.12);
  border: 1px solid rgba(74,222,128,0.30);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ty-order-status i { font-size: 9px; }

/* Order items list */
.ty-order-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.ty-order-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
}
.ty-order-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--bg);
}
.ty-order-item-info strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.ty-order-item-info span {
  font-size: 12px;
  color: var(--text-3);
}
.ty-order-item-price {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Order total row */
.ty-order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ty-order-total-label {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
}
.ty-order-total-amount {
  font-size: 24px;
  font-weight: 900;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* "What happens next" steps block */
.ty-next-steps {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 28px;
  margin-bottom: 24px;
}
.ty-next-steps h3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ty-next-steps h3 i { color: var(--accent); font-size: 14px; }

.ty-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: tystep;
}
.ty-steps-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: flex-start;
  counter-increment: tystep;
}
.ty-steps-list li::before {
  content: counter(tystep);
  width: 32px; height: 32px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 800;
  border-radius: 50%;
}
.ty-steps-list strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.ty-steps-list span {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}

/* Two-up CTA grid (Open WhatsApp + Continue shopping) */
.ty-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}
.ty-cta-grid > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all .15s;
  text-align: center;
}
.ty-cta-grid .ty-btn-primary {
  background: var(--accent);
  color: #0a0a0a;
}
.ty-cta-grid .ty-btn-primary:hover { background: var(--accent-hover); }
.ty-cta-grid .ty-btn-ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: #fff;
}
.ty-cta-grid .ty-btn-ghost:hover { border-color: var(--text-3); }

/* Support strip — small subdued footer block on the thank-you page */
.ty-support {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ty-support-text strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.ty-support-text span {
  font-size: 12px;
  color: var(--text-3);
}
.ty-support-links {
  display: inline-flex;
  gap: 8px;
}
.ty-support-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  color: #fff;
  transition: border-color .15s, background .15s;
}
.ty-support-links a:hover { border-color: var(--accent); }
.ty-support-links a.is-wa { background: #25D366; border-color: #25D366; color: #fff; }
.ty-support-links a.is-wa:hover { background: #1fb558; }

/* CONTACT thank-you specific bits */
.ty-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.ty-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 18px;
  text-align: center;
}
.ty-info-card i {
  font-size: 22px;
  color: var(--info);
  margin-bottom: 10px;
}
.ty-info-card strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.ty-info-card span {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .ty-hero { padding: 40px 16px 32px; }
  .ty-icon { width: 68px; height: 68px; font-size: 28px; }
  .ty-body { padding: 28px 16px 60px; }
  .ty-order-card,
  .ty-next-steps { padding: 22px 18px; }
  .ty-cta-grid { grid-template-columns: 1fr; }
  .ty-info-grid { grid-template-columns: 1fr; }
  .ty-support { flex-direction: column; align-items: stretch; text-align: center; }
  .ty-support-links { justify-content: center; }
}

/* =========================================================================
   ENTRANCE ANIMATIONS — site-wide subtle fade+slide-up on page load
   Replaces the page loader with a more elegant first-paint experience.
   ========================================================================= */
@keyframes jdc-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes jdc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Apply staggered entrance to top-of-page structural elements */
.topbar,
.site-header { animation: jdc-fade .35s ease both; }
.site-header { animation-delay: .05s; }

main > section,
main > .container,
main > div:not(.mobile-drawer):not(.page-loader),
.page-header {
  animation: jdc-fade-up .55s cubic-bezier(.2,.8,.2,1) both;
}
.page-header { animation-delay: .08s; }
main > *:nth-child(1) { animation-delay: .15s; }
main > *:nth-child(2) { animation-delay: .22s; }
main > *:nth-child(3) { animation-delay: .29s; }

/* Cards in carousels/grids stagger in too — subtle but adds polish */
.products-grid > *,
.swiper-slide,
.recomendados-v6 > *,
.fav-card {
  animation: jdc-fade-up .45s cubic-bezier(.2,.8,.2,1) both;
}
.products-grid > *:nth-child(1) { animation-delay: .25s; }
.products-grid > *:nth-child(2) { animation-delay: .30s; }
.products-grid > *:nth-child(3) { animation-delay: .35s; }
.products-grid > *:nth-child(4) { animation-delay: .40s; }
.products-grid > *:nth-child(n+5) { animation-delay: .45s; }
.fav-card:nth-child(1) { animation-delay: .15s; }
.fav-card:nth-child(2) { animation-delay: .22s; }
.fav-card:nth-child(3) { animation-delay: .29s; }
.fav-card:nth-child(4) { animation-delay: .36s; }

/* Reduced-motion users get nothing animated */
@media (prefers-reduced-motion: reduce) {
  .topbar, .site-header,
  main > section, main > .container, main > div, .page-header,
  .products-grid > *, .swiper-slide, .recomendados-v6 > *, .fav-card {
    animation: none !important;
  }
}

/* =========================================================================
   DRAWER POLISH — refine spacing, transitions, active state
   ========================================================================= */
.mobile-drawer-panel {
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
}
.mobile-drawer-head {
  padding: 16px 18px;
  background: rgba(255,215,0,0.04);
}
.mobile-drawer-search { padding: 12px 16px 14px; }
.mobile-drawer-search input { font-size: 14px; padding: 12px 14px; }
.mobile-drawer-nav { padding: 6px 0; }
.mobile-drawer-nav a {
  padding: 13px 18px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: relative;
}
.mobile-drawer-nav a > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mobile-drawer-nav a > span > i:first-child {
  width: 20px;
  font-size: 14px;
  color: var(--text-3);
  text-align: center;
  transition: color .15s;
}
.mobile-drawer-nav a:hover > span > i:first-child,
.mobile-drawer-nav a.is-active > span > i:first-child {
  color: var(--accent);
}
.mobile-drawer-nav a.is-active {
  background: linear-gradient(90deg, rgba(255,215,0,0.14) 0%, transparent 100%);
  border-left: 3px solid var(--accent);
  padding-left: 15px;
}
.mobile-drawer-foot { padding: 16px 18px 22px; gap: 8px; }

/* =========================================================================
   HERO BANNER tiny tweak — reduce empty padding above the swiper on phone
   ========================================================================= */
@media (max-width: 600px) {
  .hero-v13 { padding-top: 6px; }
  .hero-v13-banner { aspect-ratio: 16/10; min-height: 0; }
}

/* ============================================================
   v0.2.6 — WORDPRESS INTEGRATION ONLY
   Hello Elementor's stylesheet is DEQUEUED in PHP (see
   includes/public/class-assets.php → dequeue_theme_styles).
   The mockup CSS above is fully authoritative — no overrides
   needed. This block contains ONLY items WordPress itself
   injects: admin bar offset, ::selection brand colour, legacy
   custom-cursor cleanup, Hero V13 grid lock (Swiper would
   otherwise inject display:flex), and the cat-pills drag cursor.
   ============================================================ */

::selection { background: #FFD700; color: #0a0a0a; text-shadow: none; }
::-moz-selection { background: #FFD700; color: #0a0a0a; text-shadow: none; }

.cursor-dot, .cursor-ring { display: none !important; }

/* Force the brand dark background on the document root + every theme
   wrapper. The mockup only sets `body { background }`; without this
   block, `html`, `#page`, and elastic-scroll edges fall back to white. */
html, body { background: #0e1014 !important; min-height: 100vh; }
#page, #wrapper, #content, #primary, #main,
.site, .site-content, .site-main,
.entry-content, article.page, article.post,
.elementor, .elementor-section-wrap,
.wp-site-blocks, .is-layout-flow {
	background: transparent !important;
	background-color: transparent !important;
}

body.theme-hello-elementor > #masthead:not(.site-header),
body.theme-hello-elementor > #colophon:not(.site-footer),
body.theme-hello-elementor > #page > header,
body.theme-hello-elementor > #page > footer { display: none; }
#page, #content, #primary, .site, .site-content, .site-main,
.entry-content, article.page, article.post {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
}

@media (max-width: 1100px) {
  .site-header .primary-nav,
  .site-header .header-search { display: none; }
}

/* Each slide now contains JUST the banner (the static flash card lives
   outside the swiper). So the slide is a simple block, not a grid. */
.hero-v13-swiper .hero-v13-slide,
.swiper-slide.hero-v13-slide {
  display: block;
  height: 100%;
  width: 100%;
}

.cats-row { cursor: grab; user-select: none; -webkit-user-select: none; }
.cats-row.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.cats-row.is-dragging a { pointer-events: none; }

/* ---------------------------------------------------------------
   MOBILE FIXES — issues reported in v0.2.7 testing
   --------------------------------------------------------------- */

/* Drawer animation: the mockup uses display:none/block which kills CSS
   transitions. Swap to opacity/visibility so transform actually animates. */
.mobile-drawer { display: block !important; opacity: 0; transition: opacity .25s ease; }
.mobile-drawer.is-open { opacity: 1; }
.mobile-drawer:not(.is-open) { pointer-events: none; }
.mobile-drawer:not(.is-open) .mobile-drawer-overlay { opacity: 0; }
.mobile-drawer:not(.is-open) .mobile-drawer-panel { transform: translateX(100%); }

/* Drawer email chip: long email like ventas@juegosdigitalescolombia.com.co
   was overflowing the chip. Allow break + ellipsis. */
.mobile-drawer-foot a {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mobile-drawer-foot a > i { flex-shrink: 0; }
.mobile-drawer-foot a > span,
.mobile-drawer-foot a:not(:has(span)) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero V13 mobile: keep the OFERTA FLASH card from overflowing viewport.
   Force the swiper + slide + flash content to share the available width. */
@media (max-width: 1100px) {
  .hero-v13-swiper { overflow: hidden; }
  .hero-v13-swiper, .hero-v13-swiper .swiper-wrapper { width: 100%; max-width: 100%; }
  .hero-v13-swiper .swiper-slide,
  .hero-v13-swiper .swiper-slide.hero-v13-slide { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  .hero-v13-flash, .hero-v13-banner { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .hero-v13-flash { padding: 14px; gap: 10px; }
  .hero-v13-flash-row { flex-wrap: wrap; }
  .hero-v13-flash-name {
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
    line-height: 1.25;
    text-align: center;
  }
  .hero-v13-flash-cur { font-size: 20px; }
  .hero-v13-flash-cd { gap: 3px; }
  .hero-v13-flash-cd .cell { padding: 6px 0 5px; font-size: 12px; min-width: 0; }
  .hero-v13-flash-cd .cell::after { font-size: 6px; letter-spacing: 0.08em; }
  /* Banner title on mobile shouldn't bleed off-screen either */
  .hero-v13-banner-content { padding: 16px; }
  .hero-v13-banner-title { font-size: clamp(20px, 5vw, 32px); line-height: 1.1; word-break: break-word; }
  .hero-v13-banner-tag { font-size: 9px; padding: 4px 8px; }
}

/* Header on mobile: cap custom-uploaded logo so 220px image doesn't push
   carrito + hamburger off the right edge. Restore right gutter. */
@media (max-width: 767px) {
  .site-header .logo img { max-width: 140px !important; height: 32px !important; }
  .header-inner { padding: 12px 14px !important; gap: 10px; }
  .cart-btn { padding: 8px 10px; font-size: 12px; }
  /* Cart count badge — force a perfect circle with the digit dead-centered.
     The desktop rule uses asymmetric padding (2px 7px) to make a pill on
     wide screens; on mobile we want a fixed-size circle, so reset padding
     and use inline-flex centering instead. */
  .cart-btn .cart-count {
    width: 20px;
    height: 20px;
    padding: 0 !important;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 50%;
  }
  .hamburger { width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; }
}

/* Juego del mes / Promociones banner on mobile: ALL content (badge, title,
   description, CTA) grouped together at the BOTTOM of the box, with the
   cover art visible above. Matches desktop layout, just stacked. */
@media (max-width: 767px) {
  .banner-row { grid-template-columns: 1fr; gap: 14px; }
  .feature-banner {
    aspect-ratio: auto;
    min-height: 300px;
    align-items: flex-end;          /* mockup default — content sits at bottom */
  }
  .feature-banner-content {
    padding: 18px 18px 20px;
    gap: 10px;
    max-width: 100%;
    width: 100%;
  }
  /* Mobile gradient: keep cover art visible above the content block,
     darken the bottom strongly so the whole text group stays legible. */
  .feature-banner::before {
    background:
      linear-gradient(180deg,
        rgba(14,16,20,0.0) 0%,
        rgba(14,16,20,0.15) 30%,
        rgba(14,16,20,0.6) 60%,
        rgba(14,16,20,0.95) 100%);
  }
  .feature-banner.banner-promo::before {
    background:
      linear-gradient(180deg,
        rgba(230,57,70,0.4) 0%,
        rgba(230,57,70,0.55) 30%,
        rgba(180,40,55,0.8) 60%,
        rgba(140,30,40,0.97) 100%);
  }
  .feature-banner-title { font-size: 22px; line-height: 1.1; }
  .feature-banner-subtitle { font-size: 13px; max-width: 100%; }
  .feature-banner-cta { padding: 11px 16px; font-size: 11px; }
}

/* Slider pagination dots — Swiper.js applies its own margin on bullets
   that compounds with our flex gap, producing huge spacing on mobile.
   Zero out swiper's bullet margin so only our gap controls spacing. */
.swiper-pagination .swiper-pagination-bullet,
.swiper-pagination-bullet { margin: 0 !important; }

.carousel-wrap { position: relative; }
.carousel-wrap > .swiper-pagination.products-swiper-pagination {
  position: static;
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  pointer-events: auto;
}
.carousel-wrap > .swiper-pagination.products-swiper-pagination .swiper-pagination-bullet {
  width: 6px; height: 6px;
  background: var(--text-3);
  opacity: 0.4;
  border-radius: 50%;
  transition: opacity .2s, background-color .2s, width .2s;
  cursor: pointer;
}
.carousel-wrap > .swiper-pagination.products-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
  opacity: 1;
  width: 18px;
  border-radius: 3px;
}
@media (max-width: 1024px) {
  .carousel-wrap > .swiper-pagination.products-swiper-pagination { display: flex; }
}
.products-swiper > .swiper-pagination,
.recomendados-swiper > .swiper-pagination { display: none !important; }

body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* v0.3.108 — defensive flex `order` lock so the topbar always sits
   at the visual top of the body, regardless of what got injected
   before it (LiteSpeed lazy-load placeholder, customizer preview
   wrappers, third-party tracking pixels, etc.). The body is
   `display: flex; flex-direction: column;`, so `order: -2` on the
   topbar forces it above ANY default-order siblings. Same trick
   for `.site-header` at order: -1 and `<footer>` at order: 9999
   to keep the footer pinned to the bottom of the flex chain. */
body > .topbar    { order: -2; }
body > .site-header { order: -1; }
body > .site-footer { order: 9999; }
/* Prevent injected wrappers (e.g. preview iframes, third-party
   placeholder DIVs that have no visible content) from claiming
   layout space ahead of the real chrome. */
body > div:empty:not(.lyx-modal):not(.mobile-drawer) { display: none !important; }

/* ============================================================
   v0.3.21 — Smart hero-image fallback (portrait → blurred bg + sharp fg)
   ============================================================ */

/* When Hero_Image resolves to Steam library_hero / header / capsule, the
   slide renders normally with cover sizing. When it falls back to a
   portrait WC cover, we compose: blurred portrait fills the bg with low
   opacity, sharp portrait sits on the right pinned to the slide height. */

/* WIDE — straightforward cover. Already handled by .promo-carousel-slide rules. */
.lyx-hero-wide,
.feature-banner.lyx-hero-wide,
.hero-v13-banner.lyx-hero-wide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* PORTRAIT FALLBACK — split-composition. Container becomes a flex row,
   blurred bg fills the whole slide, sharp portrait clipped to right side
   keeps proper aspect. Drives a Steam-Store-like banner from a poster-art
   image when no wide hero exists for that product.
*/
.lyx-hero-portrait {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
}
.lyx-hero-portrait::before {
  /* Blurred fill — same image as bg but heavily blurred + slightly desaturated. */
  content: "";
  position: absolute;
  inset: -40px;        /* blur extends past edges to avoid blurry-edge artifact */
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(24px) saturate(0.85) brightness(0.55);
  z-index: 0;
}
.lyx-hero-portrait::after {
  /* Sharp portrait pinned to the right — uses the data-lyx-hero-portrait URL. */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 38%;
  max-width: 360px;
  background-image: var(--hero-portrait-url, none);
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .lyx-hero-portrait::after { width: 50%; max-width: 220px; }
}

/* When the data-attribute exists, the JS hook (below) sets --hero-portrait-url
   on the element so ::after picks it up. Until JS runs, ::after is invisible. */

/* Promo carousel cells inherit smart hero behavior. */
.promo-carousel-slide.lyx-hero-portrait { padding: 0; }
.promo-carousel-slide .promo-carousel-content { z-index: 2; }      /* text above ::before/::after */

/* Empty hero — no image at all. Render a soft brand gradient so the slide
   isn't a black void. */
.lyx-hero-empty,
.lyx-hero-gradient {
  background: linear-gradient(135deg, #1a1d24 0%, #0e1014 50%, #16181d 100%);
  position: relative;
}
.lyx-hero-empty::before,
.lyx-hero-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 25% 50%, rgba(255,215,0,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(239,68,68,0.08) 0%, transparent 70%);
  pointer-events: none;
}
/* Subtle vignette so the inner content isn't competing with edge brightness */
.lyx-hero-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14,16,20,0.8) 0%, rgba(14,16,20,0) 50%, rgba(14,16,20,0.8) 100%);
  pointer-events: none;
  z-index: 0;
}
.lyx-hero-gradient .promo-carousel-content,
.lyx-hero-gradient .hero-v13-banner-content,
.lyx-hero-gradient .feature-banner-content {
  position: relative;
  z-index: 2;
}

/* ============================================================
   v0.3.20 — Promociones page polish + AJAX swap loading state
   ============================================================ */

/* AJAX swap region: while a fetch is in flight, the shell visibly dims
   so users know something is happening. JS sets opacity:0.5 +
   pointer-events:none on [data-lyx-promo-shell] during the fetch. */
[data-lyx-promo-shell] {
  transition: opacity .2s ease;
}

/* Promo carousel — make sure background images always cover, never
   tile or letterbox. Inline `style="background-image: url(...)"` only
   sets the image, these rules pin the sizing. */
.promo-carousel-slide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Force flex centering on the promo carousel slides — Swiper.js or
   competing CSS rules can override `align-items: center` from the mockup
   styling, causing the content (badge + title + subtitle + button) to
   render at top-left instead of center-left. These !important rules
   guarantee the mockup layout regardless of stacking-context fights. */
.promo-carousel .promo-carousel-slide,
.promo-carousel-slide.swiper-slide {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.promo-carousel-slide .promo-carousel-content {
  align-self: center !important;
}
@media (max-width: 600px) {
  .promo-carousel-slide .promo-carousel-content {
    max-width: 95%;
  }
}

/* Mobile: stack price filter inputs + presets vertically so the
   "Aplicar" button fits without overflowing. */
@media (max-width: 600px) {
  .promo-price-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .promo-price-filter-inputs {
    flex-wrap: wrap;
  }
  .promo-price-filter-inputs input {
    flex: 1 1 0;
    min-width: 0;
  }
  .promo-price-filter-inputs button {
    flex: 1 1 100%;
  }
  .promo-price-filter-presets {
    flex-wrap: wrap;
    gap: 6px;
  }
  .promo-price-preset {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    text-align: center;
    font-size: 11px;
    padding: 8px 10px;
  }
  /* Discount chips wrap on phone too */
  .promo-chips {
    flex-wrap: wrap;
    gap: 6px;
  }
  .promo-chip {
    font-size: 11px;
    padding: 8px 12px;
  }
  /* Trust section breathes on mobile */
  .promo-trust {
    padding: 32px 16px;
  }
  .promo-trust h2 {
    font-size: 22px;
    line-height: 1.25;
  }
  .promo-trust-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .promo-trust-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .promo-trust-cta .btn-whatsapp,
  .promo-trust-cta .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  /* Hero countdown grid: tighter cells */
  .promo-hero-countdown {
    padding: 24px 16px;
  }
  .promo-hero-countdown-grid {
    gap: 6px;
  }
  .promo-hero-countdown-cell {
    padding: 12px 4px;
  }
  .promo-hero-countdown-cell strong {
    font-size: 28px;
  }
  .promo-hero-countdown-cell span {
    font-size: 9px;
  }
}

/* ============================================================
   v0.3.17 — Toast notifications + improved fav-card remove animation
   ============================================================ */

/* Stack — fixed to bottom-right, stacks vertically with gap. */
.lyx-toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}

/* (Older `.lyx-toast` definition removed — was overriding the newer
   v0.3.83 design at line ~9538 due to source order. Specifically its
   `white-space: nowrap` clipped long "X se agregó al carrito" messages
   and `display: inline-flex` collided with the multi-line body layout.
   The simpler wishlist-toast usage is also covered by the newer rules. */

/* "Ver carrito →" link inside a toast — explicit class so we don't rely
   on inline styles. Yellow accent on the success-toast green bg, slight
   underline so it's clearly clickable. Used by the AJAX add-to-cart
   handler in lyx-app.js. */
.lyx-toast-link {
  color: var(--accent) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  margin-left: 4px;
  white-space: nowrap;
}
.lyx-toast-link:hover { color: var(--accent-hover) !important; }

/* fav-card removing state — guards against the card's hover transform
   re-triggering during the slide-out. */
.fav-card.is-removing,
.fav-card.is-removing:hover {
  pointer-events: none;
  transform: translateX(-24px) scale(0.96) !important;
}

/* ============================================================
   v0.3.16 — Wishlist count badge on header heart icon
   ============================================================ */
.header-actions .icon-btn { position: relative; }
.header-actions .icon-btn .fav-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg);
}
.header-actions .icon-btn .fav-count-badge[hidden] { display: none; }
/* Heart fills yellow when there's at least one favorite, stays bordered when empty. */
.header-actions .icon-btn .fas.fa-heart { color: var(--accent); }

/* ============================================================
   v0.3.15 — Dual-handle price range slider
   ============================================================ */

.price-range-slider {
  position: relative;
  height: 28px;
  margin: 0;
}
.price-range-slider .slider-track {
  position: absolute;
  top: 12px;
  left: 0; right: 0;
  height: 4px;
  background: var(--surface-2);
}
.price-range-slider .slider-fill {
  position: absolute;
  top: 12px;
  height: 4px;
  background: var(--accent);
}
.price-range-slider .slider-input {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  z-index: 2;
}
.price-range-slider .slider-input:focus { outline: none; }
.price-range-slider .slider-input::-webkit-slider-runnable-track {
  background: transparent; height: 28px; border: 0;
}
.price-range-slider .slider-input::-moz-range-track {
  background: transparent; height: 28px; border: 0;
}
.price-range-slider .slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  background: var(--accent);
  border: 3px solid #0a0a0a;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  transition: transform .15s;
}
.price-range-slider .slider-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border: 3px solid #0a0a0a;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.price-range-slider .slider-input::-webkit-slider-thumb:hover,
.price-range-slider .slider-input::-webkit-slider-thumb:active {
  transform: scale(1.15);
}
/* Stack the thumbs so both stay grabbable when they overlap. */
.price-range-slider .slider-min { z-index: 3; }
.price-range-slider .slider-max { z-index: 4; }

/* ============================================================
   v0.3.13 — Tienda sidebar natural-flow + pagination pills + chips
   ============================================================ */

/* Sidebar: NO sticky positioning, NO internal scroll, NO max-height.
   Just flows naturally and stretches as tall as its filter content
   actually needs. Page scrolls together with the products grid. */
.shop-sidebar {
  position: static;
  max-height: none;
  overflow: visible;
}
.shop-sidebar::-webkit-scrollbar { width: 0; }    /* belt + suspenders */

/* Filter blocks size to content. */
.filter-block { height: auto; min-height: 0; }
.filter-block .filter-block-body { max-height: none; overflow: visible; }

/* Pill-style pagination matching the HTML mockup (output/tienda.html). */
.lyx-pagination {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lyx-pagination a,
.lyx-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
  border-radius: 0;        /* sharp corners — matches mockup */
}
.lyx-pagination a:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text);
}
.lyx-pagination .current,
.lyx-pagination span.current,
.lyx-pagination a.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}
.lyx-pagination .dots {
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: default;
}
.lyx-pagination .prev,
.lyx-pagination .next { font-size: 11px; }

/* Active-filter chips — span-based pills matching output/tienda.html.
   Each chip = label text + small × link inside a single pill. */
.shop-toolbar-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.shop-toolbar-active .active-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-right: 4px;
}
.shop-toolbar-active .active-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
}
.shop-toolbar-active .active-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(0, 0, 0, 0.18);
  color: #0a0a0a;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  transition: background-color .15s;
}
.shop-toolbar-active .active-chip-x:hover {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
.shop-toolbar-active .active-clear {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-decoration: none;
}
.shop-toolbar-active .active-clear:hover { color: var(--accent); }

/* AJAX swap fade-in transition on the result container. */
#lyx-shop-results { transition: opacity .15s ease; }
#lyx-shop-results[aria-busy="true"] { pointer-events: none; }

/* =========================================================================
   AUTH PAGE (login / signup) — page-iniciar-sesion.php
   Two-column dark layout: brand hero on left, form card on right.
   ========================================================================= */
.lyx-auth-main { padding: 48px 0 80px; }
.lyx-auth-shell {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 48px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 920px) {
  .lyx-auth-shell { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Hero (left) ---- */
.lyx-auth-hero {
  position: relative;
  background:
    radial-gradient(ellipse 600px 400px at 0% 0%, rgba(255,215,0,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 100% 100%, rgba(255,215,0,0.05) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  padding: 48px 44px;
  overflow: hidden;
}
.lyx-auth-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Decorative gradient orb (subtle, behind content) */
.lyx-auth-orb {
  position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,215,0,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.lyx-auth-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.lyx-auth-eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,215,0,0.18);
  animation: lyx-auth-pulse 1.8s ease-in-out infinite;
}
@keyframes lyx-auth-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,215,0,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255,215,0,0.04); }
}

.lyx-auth-hero-title {
  margin: 0;
  font-size: 38px; font-weight: 900; line-height: 1.1;
  color: #fff; letter-spacing: -0.025em;
}
.lyx-auth-hero-accent { color: var(--accent); }
.lyx-auth-hero-underline {
  width: 56px; height: 3px;
  background: var(--accent);
}
.lyx-auth-hero-sub {
  margin: 0;
  font-size: 15px; line-height: 1.65;
  color: var(--text-2);
  max-width: 440px;
}
.lyx-auth-hero-bullets {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 14px;
}
.lyx-auth-hero-bullets li {
  display: flex; align-items: flex-start; gap: 14px;
}
.lyx-auth-hero-bullets li > div {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.lyx-auth-hero-bullets li strong {
  font-size: 14px; color: #fff; font-weight: 800;
  letter-spacing: -0.005em;
}
.lyx-auth-hero-bullets li span {
  font-size: 12px; color: var(--text-3); line-height: 1.5;
}
.lyx-auth-bullet-icon {
  width: 36px; height: 36px;
  background: rgba(255,215,0,0.10);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.lyx-auth-hero-trust {
  display: flex; align-items: stretch; gap: 0;
  margin-top: 8px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lyx-auth-trust-item {
  flex: 1; text-align: center;
  padding: 0 8px;
}
.lyx-auth-trust-num {
  font-size: 26px; font-weight: 900; color: var(--accent);
  letter-spacing: -0.025em; line-height: 1;
  margin-bottom: 8px;
}
.lyx-auth-trust-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-2);
}
.lyx-auth-trust-divider {
  width: 1px; background: var(--border);
}

/* Payment strip */
.lyx-auth-payments {
  margin-top: 4px;
}
.lyx-auth-payments-label {
  display: block;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.lyx-auth-payments-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lyx-auth-pm {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2);
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}

/* ---- Form card (right) ---- */
.lyx-auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 36px 36px 30px;
}
@media (max-width: 600px) {
  .lyx-auth-hero { padding: 32px 24px; }
  .lyx-auth-card { padding: 28px 24px; }
  .lyx-auth-hero-title { font-size: 26px; }
}

/* Tabs */
.lyx-auth-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 0 0 26px;
}
.lyx-auth-tab {
  flex: 1; text-align: center;
  padding: 14px 0;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.lyx-auth-tab:hover { color: #fff; }
.lyx-auth-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Errors stack */
.lyx-auth-errors { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.lyx-auth-error {
  background: rgba(239,68,68,0.1);
  border-left: 3px solid var(--urgent);
  padding: 10px 14px;
  font-size: 13px; color: #fca5a5;
}

/* Form */
.lyx-auth-form { display: flex; flex-direction: column; gap: 16px; }
.lyx-auth-field { display: flex; flex-direction: column; gap: 6px; }
.lyx-auth-field-row {
  display: flex; align-items: baseline; justify-content: space-between;
}
.lyx-auth-field label {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2);
}
.lyx-auth-forgot {
  font-size: 11px; color: var(--accent);
  text-decoration: none; font-weight: 700;
  letter-spacing: 0.04em;
}
.lyx-auth-forgot:hover { text-decoration: underline; }
.lyx-auth-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s;
}
.lyx-auth-field input:focus {
  border-color: var(--accent);
  outline: none;
}
/* Helper text under signup fields (e.g. password explainer) */
.lyx-auth-field-hint {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-top: 2px;
  display: block;
}
.lyx-auth-checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  cursor: pointer;
  margin-top: 4px;
}
.lyx-auth-checkbox input { margin-top: 2px; }
.lyx-auth-checkbox a { color: var(--accent); text-decoration: none; font-weight: 600; }
.lyx-auth-checkbox a:hover { text-decoration: underline; }
.lyx-auth-submit {
  display: block; width: 100%;
  background: var(--accent); color: #0a0a0a;
  border: none;
  padding: 14px 20px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  margin-top: 8px;
  transition: background-color .15s;
}
.lyx-auth-submit:hover { background: var(--accent-hover); }

/* Switch tab CTA */
.lyx-auth-switch {
  text-align: center;
  margin-top: 22px;
  font-size: 13px; color: var(--text-2);
}
.lyx-auth-switch a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
.lyx-auth-switch a:hover { text-decoration: underline; }

/* WhatsApp help */
.lyx-auth-help {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px; color: var(--text-3);
}
.lyx-auth-help a {
  color: #25D366; font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
.lyx-auth-help a:hover { text-decoration: underline; }

/* =========================================================================
   ACCOUNT DASHBOARD — page-mi-cuenta.php
   Industry-standard customer panel (Amazon/Shopify-style). Clean, no
   gimmicky gaming elements.
   ========================================================================= */

/* ---- Stats — 3 cards ---- */
.lyx-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 32px 0 40px;
}
@media (max-width: 720px) {
  .lyx-account-stats { grid-template-columns: 1fr; gap: 10px; }
}
/* "Tall card" stats pattern (2026 trend) — vertical layout, generous
   whitespace, icon as subtle accent, label tracked-out top, big number
   focal, optional context line below. */
.lyx-account-stat {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  padding: 28px 28px 30px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .2s, background-color .2s, box-shadow .2s;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 178px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.02);
}
.lyx-account-stat:hover {
  border-color: rgba(255,215,0,0.45);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,215,0,0.06) 0%, var(--surface) 70%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,215,0,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}
.lyx-account-stat-icon {
  position: absolute;
  top: 24px; right: 26px;
  width: 42px; height: 42px;
  background: rgba(255,215,0,0.10);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background-color .2s, color .2s;
}
.lyx-account-stat:hover .lyx-account-stat-icon {
  background: var(--accent);
  color: #0a0a0a;
}
.lyx-account-stat-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: auto;
  padding-right: 56px; /* space for absolute icon top-right */
}
.lyx-account-stat-num {
  font-size: 40px; font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em; line-height: 1;
  margin-top: 28px;
}
.lyx-account-stat-money { font-size: 30px; }
.lyx-account-stat-money .woocommerce-Price-amount { color: #fff; }
.lyx-account-stat-context {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
  letter-spacing: 0.01em;
}
.lyx-account-stat-context .lyx-account-stat-trend-up { color: var(--sale); font-weight: 700; }
.lyx-account-stat-context .lyx-account-stat-trend-down { color: var(--urgent); font-weight: 700; }

/* Section heading pattern (eyebrow + H2 + yellow underline) */
.lyx-account-section { margin-bottom: 48px; }
.lyx-account-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.lyx-account-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.lyx-account-section-title {
  margin: 0;
  font-size: 26px; font-weight: 900;
  letter-spacing: -0.02em; color: #fff;
  line-height: 1.15;
}
.lyx-account-section-line {
  width: 56px; height: 3px;
  background: var(--accent);
  margin-top: 12px;
}
.lyx-account-see-all {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
}
.lyx-account-see-all:hover { color: var(--accent); }

/* Pagination */
.lyx-account-pagination {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 24px;
}
.lyx-account-pagination a {
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0 8px;
  transition: border-color .15s, color .15s;
}
.lyx-account-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.lyx-account-pagination a.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

/* Member-since footer note */
.lyx-account-member-since {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  margin: 32px 0 0;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lyx-account-member-since i { color: var(--accent); }

/* Orders list */
.lyx-account-orders { display: flex; flex-direction: column; gap: 8px; }
.lyx-account-order {
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .15s;
}
.lyx-account-order:hover { border-color: var(--accent); }
@media (max-width: 720px) {
  .lyx-account-order { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
}
.lyx-account-order-id {
  font-size: 14px; font-weight: 800; color: #fff;
  letter-spacing: 0.02em;
}
.lyx-account-order-date {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
  letter-spacing: 0.04em;
}
.lyx-account-order-info {
  display: flex; flex-direction: column; gap: 2px;
}
.lyx-account-order-items { font-size: 13px; color: var(--text-2); }
.lyx-account-order-total { font-size: 15px; font-weight: 800; color: #fff; }
.lyx-account-order-status {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .lyx-account-order-status { justify-content: flex-start; }
}
.lyx-account-status {
  display: inline-block;
  padding: 5px 10px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lyx-account-status.is-completed { background: rgba(34,197,94,0.15); color: var(--sale); }
.lyx-account-status.is-processing { background: rgba(59,130,246,0.15); color: var(--info); }
.lyx-account-status.is-pending,
.lyx-account-status.is-on-hold { background: rgba(255,215,0,0.15); color: var(--accent); }
.lyx-account-status.is-cancelled,
.lyx-account-status.is-failed,
.lyx-account-status.is-refunded { background: rgba(239,68,68,0.15); color: var(--urgent); }

/* Empty state */
.lyx-account-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.lyx-account-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 28px;
}
.lyx-account-empty h3 {
  margin: 0 0 6px; font-size: 18px; font-weight: 800;
  color: #fff; letter-spacing: -0.005em;
}
.lyx-account-empty p {
  margin: 0 0 22px; font-size: 14px; color: var(--text-2);
}

/* Bento grid for action cards (2026 trend) — first card spans 2 cols
   to anchor the layout with the primary action. Asymmetric proportions
   replace uniform 3-up grids. */
.lyx-account-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.lyx-account-grid > .lyx-account-card-featured {
  grid-column: span 2;
}
@media (max-width: 920px) {
  .lyx-account-grid { grid-template-columns: repeat(2, 1fr); }
  .lyx-account-grid > .lyx-account-card-featured { grid-column: span 2; }
}
@media (max-width: 560px) {
  .lyx-account-grid { grid-template-columns: 1fr; }
  .lyx-account-grid > .lyx-account-card-featured { grid-column: span 1; }
}
.lyx-account-card-featured {
  background: linear-gradient(135deg, rgba(255,215,0,0.10) 0%, var(--surface) 60%);
  border-color: rgba(255,215,0,0.30);
}
.lyx-account-card-featured .lyx-account-card-icon {
  background: var(--accent);
  color: #0a0a0a;
}
.lyx-account-card-featured .lyx-account-card-title {
  font-size: 18px;
}

.lyx-account-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 24px 28px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .15s, transform .15s, background-color .15s, box-shadow .15s;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.02);
}
.lyx-account-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255,215,0,0.06) 0%, var(--surface) 60%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,215,0,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
}
.lyx-account-card-icon {
  width: 44px; height: 44px;
  background: rgba(255,215,0,0.10);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 10px;
  transition: background-color .15s, color .15s;
}
.lyx-account-card:hover .lyx-account-card-icon {
  background: var(--accent);
  color: #0a0a0a;
}
.lyx-account-card-title {
  font-size: 15px; font-weight: 800; color: #fff;
  letter-spacing: -0.005em;
}
.lyx-account-card-desc {
  font-size: 12px; color: var(--text-2); line-height: 1.5;
}
.lyx-account-card-arrow {
  position: absolute; right: 18px; bottom: 18px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  font-size: 12px;
  transition: color .15s, transform .15s;
}
.lyx-account-card:hover .lyx-account-card-arrow {
  color: var(--accent);
  transform: translateX(3px);
}
.lyx-account-card-danger:hover { border-color: var(--urgent); background: linear-gradient(180deg, rgba(239,68,68,0.04) 0%, var(--surface) 60%); }
.lyx-account-card-danger:hover .lyx-account-card-icon { background: var(--urgent); color: #fff; }
.lyx-account-card-danger:hover .lyx-account-card-arrow { color: var(--urgent); }
.lyx-account-card-danger .lyx-account-card-icon {
  background: rgba(239,68,68,0.1); color: var(--urgent);
}

/* ---- Back link (above page heading on edit-address form) ---- */
.lyx-account-back-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.20);
}
.lyx-account-back-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
  transform: translateX(-2px);
}
.lyx-account-back-link i { font-size: 9px; }

/* ---- Profile avatar header (Stripe / Linear / Notion pattern) ---- */
.lyx-account-profile-header {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 26px;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02);
}
.lyx-account-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.lyx-account-profile-meta { flex: 1; min-width: 0; }
.lyx-account-profile-name {
  font-size: 18px; font-weight: 800; color: #fff;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.lyx-account-profile-email {
  font-size: 13px; color: var(--text-2);
  margin-bottom: 8px;
  word-break: break-all;
}
.lyx-account-profile-link {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.lyx-account-profile-link:hover { color: var(--accent-hover); }
@media (max-width: 600px) {
  .lyx-account-profile-header { flex-direction: column; align-items: flex-start; padding: 22px; gap: 14px; text-align: left; }
}

/* ---- Account form (edit-account override) ----
   `!important` here defeats WC's woocommerce.css + Hello Elementor's
   form rules which are more specific (e.g. `.woocommerce form .form-row
   label`). Without them, our inputs render white-on-light because WC's
   default theming wins. */
.lyx-account-form {
  display: flex !important; flex-direction: column !important;
  gap: 18px !important;
  max-width: 720px !important;
  padding: 26px 28px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}
.lyx-account-form > p,
.lyx-account-form > .form-row,
.lyx-account-form .form-row { all: revert; padding: 0 !important; margin: 0 !important; }

/* Password change group — subtle bordered subsection inside the main form
   card. Less heavy than full section dividers w/ headings + descriptions. */
.lyx-account-form-pwgroup {
  margin-top: 8px;
  padding: 18px 18px 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  display: flex; flex-direction: column; gap: 14px;
}
.lyx-account-form-pwgroup-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 4px;
}
.lyx-account-form-pwgroup-head i {
  color: var(--accent);
  font-size: 12px;
}
.lyx-account-form-pwgroup-head span {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: #fff;
}
.lyx-account-form-pwgroup-head small {
  font-size: 11px; color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0.01em; text-transform: none;
}
.lyx-account-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 600px) { .lyx-account-form-row { grid-template-columns: 1fr; } }
.lyx-account-form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}
.lyx-account-form-field.is-wide { grid-column: 1 / -1; }
.lyx-account-form-field label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}
.lyx-account-form-field label .required { color: var(--urgent); }
.lyx-account-form-optional {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--text-3);
  font-style: italic;
}
.lyx-account-form-field input,
.lyx-account-form-field select,
.lyx-account-form-field textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  padding: 13px 14px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-family: inherit !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  transition: border-color .15s, box-shadow .15s, background-color .15s !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30) !important;
}
.lyx-account-form-field input:hover,
.lyx-account-form-field select:hover,
.lyx-account-form-field textarea:hover {
  border-color: var(--border-2) !important;
  background: var(--surface-2) !important;
}
.lyx-account-form-field input:focus,
.lyx-account-form-field select:focus,
.lyx-account-form-field textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.12), inset 0 1px 2px rgba(0,0,0,0.30) !important;
  outline: none !important;
  background: var(--surface-2) !important;
}
.lyx-account-form-field input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(239,68,68,0.50);
}
.lyx-account-form-field small {
  font-size: 11px; color: var(--text-3); line-height: 1.5;
  margin-top: 2px;
}

/* Form actions / save bar */
.lyx-account-form-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.lyx-account-form-actions .btn-primary { border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.lyx-account-form-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 13px 22px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; align-items: center;
  transition: border-color .15s, color .15s;
}
.lyx-account-form-cancel:hover {
  border-color: var(--text-3);
  color: #fff;
}

/* ---- Address grid (my-address override) — Shopify/Amazon pattern ---- */
.lyx-account-address-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 720px) { .lyx-account-address-grid { grid-template-columns: 1fr; } }

.lyx-account-address-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  padding: 24px 26px 22px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.02);
}
.lyx-account-address-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,215,0,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
}
.lyx-account-address-card.is-empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--border-2);
}
.lyx-account-address-card.is-empty:hover {
  border-color: var(--accent);
  background: rgba(255,215,0,0.03);
}

.lyx-account-address-pin {
  position: absolute;
  top: 24px; right: 26px;
  width: 36px; height: 36px;
  background: rgba(255,215,0,0.10);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}

.lyx-account-address-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  padding-right: 50px; /* space for absolute pin top-right */
  flex-wrap: wrap;
}
.lyx-account-address-head h3 {
  margin: 0; font-size: 13px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff;
}
.lyx-account-address-default {
  display: inline-block;
  background: rgba(255,215,0,0.15);
  color: var(--accent);
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 8px;
}

.lyx-account-address-body {
  font-style: normal;
  font-size: 14px; line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 16px;
}

.lyx-account-address-edit {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
  width: 100%;
  padding-top: 14px;
  transition: color .15s;
}
.lyx-account-address-edit:hover { color: var(--accent-hover); }

.lyx-account-address-empty {
  text-align: left;
  padding: 14px 0 0;
}
.lyx-account-address-empty p {
  margin: 0 0 16px;
  font-size: 13px; color: var(--text-3); line-height: 1.6;
}
.lyx-account-address-empty .btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
}

/* WhatsApp support card */
.lyx-account-support {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px;
  background: linear-gradient(180deg, rgba(37,211,102,0.08) 0%, var(--surface) 100%);
  border: 1px solid rgba(37,211,102,0.30);
  flex-wrap: wrap;
  margin-top: 32px;
}
.lyx-account-support-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.lyx-account-support-text { flex: 1; min-width: 200px; }
.lyx-account-support-text strong {
  display: block; color: #fff; font-size: 15px; font-weight: 800;
  margin-bottom: 4px;
}
.lyx-account-support-text span {
  font-size: 13px; color: var(--text-2); line-height: 1.5;
}

/* =========================================================================
   404 PAGE (page-404.php) — branded "page not found" with search box
   + quick-action tiles + best-seller fallback grid. v0.3.106.
   ========================================================================= */
.lyx-404-hero {
  text-align: center;
  padding: 56px 20px 40px;
  background: linear-gradient(180deg, var(--surface) 0%, transparent 100%);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.lyx-404-code {
  font-size: clamp(96px, 18vw, 200px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--accent) 0%, #8a6e00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0 0 12px;
  text-shadow: 0 4px 30px rgba(255,215,0,0.15);
}
/* v0.3.112 — admin-uploaded 404 hero image (replaces .lyx-404-code) */
.lyx-404-image {
  margin: 0 auto 18px;
  max-width: min(640px, 90%);
}
.lyx-404-image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.lyx-404-title {
  color: #fff;
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.lyx-404-sub {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 28px;
}
.lyx-404-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto 28px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  padding: 4px 4px 4px 14px;
}
.lyx-404-search > i {
  color: var(--text-3);
  font-size: 14px;
  flex-shrink: 0;
}
.lyx-404-search input[type="search"] {
  flex: 1;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 12px 6px;
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.lyx-404-search input[type="search"]::placeholder { color: var(--text-3); }
.lyx-404-search button { flex-shrink: 0; padding: 12px 18px; }
.lyx-404-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}
.lyx-404-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color .15s, color .15s, transform .15s;
}
.lyx-404-action i { font-size: 22px; color: var(--accent); }
.lyx-404-action:hover {
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .lyx-404-actions { grid-template-columns: 1fr 1fr; }
  .lyx-404-search { flex-wrap: wrap; padding: 8px; }
  .lyx-404-search input[type="search"] { width: 100%; }
  .lyx-404-search button { width: 100%; }
}

/* =========================================================================
   INSTALL-PAGE GUIDE TABS — Primaria / Secundaria switcher (v0.3.118)
   Two tabs above the .install-steps grid; each panel holds an
   independently-editable copy of the written instructions.
   ========================================================================= */
.install-guide-tabs {
  margin: 0 0 32px;
}
.install-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.install-tabs-nav::-webkit-scrollbar { display: none; }
.install-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  cursor: pointer;
  position: relative;
  transition: color .15s;
}
.install-tab i { font-size: 14px; }
.install-tab:hover { color: var(--text); }
/* v0.3.121 — gold underline via absolute pseudo-element. The earlier
   `border-bottom + negative margin` trick wasn't rendering reliably
   inside the `display: flex` nav (flex doesn't honor negative
   margin-bottom against the parent's border consistently across
   browsers). The pseudo sits at the bottom of the tab, slightly
   below the nav's gray border, so it visually overrides it. */
.install-tab.is-active {
  color: var(--accent);
}
.install-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--accent);
}
.install-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* v0.3.119 — bulletproof panel toggle. The `:not(.is-active)` rule
   with `!important` outranks any inherited `display` on parents (e.g.
   from `.install-steps` which is a grid). Without `!important` the
   inactive panel could leak through if any rule later set
   `display: grid/flex` on `.install-tab-panel` descendants. */
.install-tab-panel { display: block; }
.install-tab-panel:not(.is-active) { display: none !important; }
@media (max-width: 600px) {
  .install-tab { padding: 12px 14px; font-size: 12px; gap: 6px; }
}
}