/* =========================================================================
   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: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 25%, transparent);
  --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;
  /* v0.4.0-alpha.7 — was hardcoded yellow→orange gradient. Now uses
     CSS vars so the Brand editor's accent-color change actually
     reflects on the JD letter mark. `--accent-hover` is auto-derived
     by Brand_Renderer as a lighter shade of the picked accent. */
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px;
  color: var(--bg);
  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 {
  /* v0.3.167 — Andres May 8: pills row centered horizontally on the
     page. `justify-content: center` lays them out from the middle
     when they fit; on narrower viewports where the row overflows,
     `flex-wrap: nowrap` + `overflow-x: auto` lets the user scroll
     horizontally — and the centering naturally falls back to a left
     starting position when content is wider than the container. */
  display: flex; gap: 8px;
  justify-content: center;
  flex-wrap: nowrap;
  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.155 — `.flash-banner-3col` simplified to match site language.
   Previous version felt over-designed (animations, glows, gradient
   accent line, drop-shadows) compared to the rest of the home page,
   which uses simple `.section-title` + `.section-subtitle` + `.see-all`
   typography with no decorative effects. This version keeps the base
   `.flash-banner` red-tinted strip the site already had, lays out the
   three blocks in a clean grid, and uses the EXISTING site classes
   for the title/subtitle/link instead of bespoke styling — so this
   banner now reads as the same family as every other section. */
.flash-banner.flash-banner-3col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px 22px;
}

/* v0.3.167 — Andres May 8: 14 promotional banners on /promociones/
   now displayed 2-per-row on desktop instead of one-per-line.
   Single column on phones (≤640px) so each banner stays readable. */
.lyx-promo-banners {
  margin-top: 32px !important;
  margin-bottom: 8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 640px) {
  .lyx-promo-banners { grid-template-columns: 1fr !important; }
}
.lyx-promo-banners img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  /* v0.3.166 — Andres May 7: sharper banner rendering. The originals
     are ~1200-2000px wide JPGs from the legacy site; browsers default
     to bilinear smoothing which can look mushy at intermediate sizes.
     `image-rendering` hints request the best perceptual quality the
     browser can give, with vendor-specific fallbacks layered. */
  image-rendering: auto;                 /* baseline */
  image-rendering: high-quality;         /* Chrome/Edge — slow & sharp */
  image-rendering: -webkit-optimize-contrast; /* Safari sharpening */
  image-rendering: crisp-edges;          /* Firefox sharper edges */
  /* Avoid sub-pixel rendering shifts by anchoring the image to its
     own GPU layer — prevents blurry interpolation on transforms. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* LEFT — urgency note. Inline icon + two-line label. No card, no
   animation; just the existing site treatment of `text + accent icon`. */
.flash-note {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
}
.flash-note-icon {
  width: 36px; height: 36px;
  background: var(--urgent);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
  flex-shrink: 0;
}
.flash-note-main {
  font-size: 15px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.flash-note-sub {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 3px;
}

/* CENTER — countdown. Inherits the site's existing `.countdown-cell`
   box styling (background, border, padding, min-width) so the cell
   dimensions stay consistent with the rest of the site. The only
   overrides scale up the DIGIT and separator/label inside the cell —
   per Andres's note "keep the box size, increase the timer size".
   The cell will only grow vertically by a few pixels because of the
   larger line-height; horizontally it stays anchored at min-width 48. */
.flash-banner-3col .countdown { justify-self: center; }
.flash-banner-3col .countdown-cell strong { font-size: 26px; }
.flash-banner-3col .countdown-cell span   { font-size: 10px; }
.flash-banner-3col .countdown-sep         { font-size: 20px; }

/* RIGHT — section title block. Uses the same `.section-title-wrap` /
   `.section-title` / `.section-subtitle` / `.see-all` classes that
   every other section on the home page uses. Just right-aligned and
   stacked above the see-all link. */
.flash-head {
  justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.flash-head .section-title-wrap {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.flash-head .section-title { line-height: 1; }
.flash-head .section-subtitle { font-size: 12px; }

/* Mobile — collapse to a single column, all three blocks centered. */
@media (max-width: 900px) {
  .flash-banner.flash-banner-3col {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 16px;
    text-align: center;
  }
  .flash-note { justify-self: center; }
  .flash-banner-3col .countdown { justify-self: center; }
  .flash-head { justify-self: center; align-items: center; text-align: center; }
  .flash-head .section-title-wrap { align-items: 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); }

/* v0.3.148 — restyle the right-side title in the centered flash
   banner. The default `.flash-text` (small square icon + plain text
   stack) looked thin next to the bigger timer cells in the middle.
   Inside `.flash-banner-centered` we wrap the title in a pill-style
   red-tinted card with a glowing icon, tighter typography, and
   proper vertical rhythm so it visually balances the timer. */
.flash-banner-centered .flash-text {
  background: linear-gradient(135deg, rgba(220,38,38,0.18) 0%, rgba(220,38,38,0.06) 100%);
  border: 1px solid rgba(220,38,38,0.45);
  border-radius: 10px;
  padding: 12px 18px 12px 14px;
  gap: 14px;
  flex-wrap: nowrap;
  box-shadow: 0 4px 18px rgba(220,38,38,0.18);
  align-items: center;
}
.flash-banner-centered .flash-text-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border-radius: 10px;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(220,38,38,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.flash-banner-centered .flash-text-main {
  font-size: 13px;
  letter-spacing: 0.10em;
  line-height: 1.2;
  margin-bottom: 3px;
}
.flash-banner-centered .flash-text-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  line-height: 1.3;
  font-weight: 500;
}
@media (max-width: 900px) {
  .flash-banner-centered .flash-text {
    padding: 10px 14px;
    flex-wrap: wrap;
    text-align: left;
  }
}
.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;
  /* v0.4.0-alpha.56 — strip thinned to 8px (was 14px in alpha.47).
   * Andres wants the artwork tighter to the top of the card and the
   * "EN OFERTA" badge sitting ON the image's first row, not floating
   * over a wide strip above it. With padding-top:8px + badge top:8px
   * (height ~17px), the badge's bottom edge crosses ~17px into the
   * image area — sits on the top edge of the PS4 ribbon. The ribbon's
   * actual logo sits mid-banner (~18-22px in) so it stays uncovered. */
  padding-top: 8px;
  box-sizing: border-box;
}
.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 {
  /* v0.4.0-alpha.56 — top:8px paired with .cover padding-top:8px.
   * Badge sits ON the image's top row (PS4 ribbon edge), not floating
   * over empty top space. Andres asked for the badge to be "even on
   * the same line as the product image" — this gets it as close as
   * possible without covering the PS4 logo (which is centered in the
   * blue banner, well below the badge's bottom edge). */
  position: absolute; top: 8px; left: 8px;
  background: var(--sale); color: var(--sale-text);
  padding: 3px 8px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em;
  z-index: 3;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  line-height: 1.1;
  gap: 6px;
  white-space: nowrap;
}
.discount-badge .discount-badge-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.92;
}
.discount-badge .discount-badge-pct {
  /* v0.4.0-alpha.44 — sized to match the label so both read on a
   * single line. Slightly heavier weight keeps the discount as the
   * visual focal point of the badge. */
  font-size: 11px;
  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 {
  /* v0.4.0-alpha.56 — aligned with the badge's new top:8px so the
   * heart and the "EN OFERTA" pill share the same baseline. */
  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;
}

/* v0.3.162 — "Ahorras $X" savings line. Shows the absolute peso amount
   saved, which is far more convincing than a percentage. Per Andres
   May 2026 — green color flags it as a positive/win for the customer
   without screaming. Used across all card types (standard product
   card, streaming variant, rec-feat, rec-mini). The `.bdi`/`.amount`
   spans inside come from `wc_price()` and inherit the parent color. */
.price-savings {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* v0.3.165 — Andres May 7: tighten the gap so "Ahorras $X" sits
     right under the price instead of floating below it. */
  margin-top: 0;
  font-size: 12px; font-weight: 700;
  color: #22c55e;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.price-savings i {
  font-size: 10px;
  opacity: 0.85;
}
.price-savings .amount,
.price-savings .woocommerce-Price-amount,
.price-savings bdi {
  color: inherit;
  font-weight: inherit;
}
/* Smaller variant for mini cards on the home page where vertical
   space is tight inside `.rec-mini-info`. */
.price-savings.price-savings-sm {
  font-size: 11px;
  margin-top: 0;
}
/* When the savings line lives inside the rec-feat magazine overlay,
   bump font slightly to match the larger rec-feat-cur typography. */
.rec-feat-info .price-savings {
  font-size: 13px;
  margin-top: 2px;
}
.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: color-mix(in srgb, var(--accent) 15%, transparent);
  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, color-mix(in srgb, var(--accent) 5%, transparent) 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 {
  /* v0.3.157 — equal-width 50/50 columns per Andres May 2026.
     Was `1fr 360px` (products dominate, summary tiny in the corner).
     Now both halves carry the same visual weight, which feels more
     balanced especially on larger displays. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  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: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  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 color-mix(in srgb, var(--accent) 12%, transparent), 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 color-mix(in srgb, var(--accent) 12%, transparent), 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.149 — REVERTED to single column. Client clarified the 2-col
 * intent: he wants STEP 2 (Método de pago) and STEP 3 (Método de
 * entrega) side-by-side as columns, NOT the methods inside each
 * step. So the payment-method LIs now stack vertically (one per
 * row) within the step's column. */
body .lyx-checkout-payment-options {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}
body #payment ul.lyx-checkout-payment-options > li.lyx-pm-li,
body ul.lyx-checkout-payment-options > li.lyx-pm-li {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* v0.3.149 — STEP 2 + STEP 3 wrapper. Side-by-side on desktop,
   single column on phones so each step's heading + list stays
   readable. */
.lyx-checkout-pay-deliver-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .lyx-checkout-pay-deliver-row { grid-template-columns: 1fr; }
}
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 color-mix(in srgb, var(--accent) 20%, transparent) !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 color-mix(in srgb, var(--accent) 30%, transparent);
}
.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 color-mix(in srgb, var(--accent) 25%, transparent);
}
.hero-panel-cta:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 40%, transparent); }
.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%, color-mix(in srgb, var(--accent) 6%, transparent) 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%, color-mix(in srgb, var(--accent) 8%, transparent) 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, color-mix(in srgb, var(--accent) 8%, transparent) 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 color-mix(in srgb, var(--accent) 25%, transparent);
}
.hero-v8-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* 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.4.0-alpha.33 — `object-position: center top` so portrait box-
     art (Spider-Man, etc.) shows the artwork/title at the top of the
     card and gets cropped at the BOTTOM (under the dark gradient
     scrim + overlaid title/price), instead of cropping the middle of
     the artwork where the character's face usually sits.
     Was `center center` which cut into the middle of vertical art. */
  object-fit: cover;
  object-position: center top;
  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, color-mix(in srgb, var(--accent) 10%, transparent) 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 color-mix(in srgb, var(--accent) 25%, transparent);
}

.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 color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero-v9-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* 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, color-mix(in srgb, var(--accent) 6%, transparent) 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 color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero-v10-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* 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, color-mix(in srgb, var(--accent) 10%, transparent) 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, color-mix(in srgb, var(--accent) 8%, transparent) 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 color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero-v11-cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* 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, color-mix(in srgb, var(--accent) 18%, transparent) 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, color-mix(in srgb, var(--accent) 6%, transparent) 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%, color-mix(in srgb, var(--accent) 8%, transparent) 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 ---- */
/* v0.4.0-alpha.31 — added horizontal padding on the hero so the
 *   2-col content (slider + flash card) never sits flush against the
 *   viewport edge. Without this the right-arrow nav button got
 *   clipped on large screens; the cards also looked uncomfortably
 *   close to the edges on tablet sizes. */
.hero-v13 { padding: 24px 20px 0; background: var(--bg); }
@media (max-width: 767px) { .hero-v13 { padding: 8px 12px 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 {
  /* v0.3.167 — Andres May 8: full-width hero (NOT boxed) + red flash
     card RESTORED at right + height bumped 460→520px for more visual
     impact. The earlier flip-flop history:
       v0.3.165 first: full-bleed (no constraint)
       v0.3.165 mid:   constrained to container, single column
       v0.3.166:       same, with !important
       v0.3.167 NOW:   full-bleed restored + 2-col grid back + taller
     `!important` retained so cached/theme rules can't override. */
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  display: grid !important;
  grid-template-columns: 2.1fr 1fr !important;
  gap: 14px !important;
  height: 520px !important;
  width: 100% !important;
}
.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 color-mix(in srgb, var(--accent) 12%, transparent);
}
.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; }
/* v0.4.0-alpha.32 — arrows hug the swiper edge: -6px sits them
 *   slightly outside the slider (so they "frame" it visually) while
 *   the hero's 20px container padding (alpha.31) keeps them well
 *   inside the viewport. Previous values: -16px (clipped on screen
 *   edge), 12px (too far inside the slide). -6px is the middle. */
.hero-v13-prev { left: -6px; }
.hero-v13-next { right: -6px; }

/* ---- 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;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #DC2626 0%, #B91C1C 100%);
  color: #fff;
  padding: 7px 12px;
  z-index: 5;
  /* v0.4.0-alpha.61 — small-card default: stacked + CENTERED.
   * Label on top line, clock on line below, both centered with the
   * icon. Big-card override (`.rec-feat .cover-countdown`) further
   * down flips this to a single-row layout. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.18);
}

/* v0.4.0-alpha.61 — big featured card (rec-feat) override: timer
 * fits on ONE row with label inline + clock right next to it. The
 * featured card is wide enough that stacking wastes space; inline
 * keeps the strip tight against the artwork. */
.rec-feat .cover-countdown {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: left;
}
.rec-feat .cover-countdown .cover-countdown-label {
  display: inline;
  width: auto;
}
.rec-feat .cover-countdown .cover-countdown-time {
  display: inline-block;
}
/* v0.3.165 — Andres May 7: promo countdown pinned to the BOTTOM of
   `.rec-feat` and `.rec-mini` cards (was at the top in v0.3.162). The
   info overlay (title/price/savings) is pulled UP by the timer-strip
   height so both stay visible: timer hugs the very bottom edge, info
   stacks just above it. The platform chip returns to its original
   top-left position since the bottom is now claimed by the timer. */
.rec-card-timer-wrap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  pointer-events: none;
}
.rec-card-timer-wrap .cover-countdown {
  position: relative;
  bottom: auto;
  top: auto;
  pointer-events: auto;
}
/* When a rec-mini / rec-feat has a countdown at the bottom, push the
   info overlay UP by the countdown strip's effective height (~46px
   desktop / 40px mobile) so the title + price + savings stay visible
   above the timer instead of being covered. */
.rec-mini:has(.rec-card-timer-wrap .cover-countdown) .rec-mini-info,
.rec-feat:has(.rec-card-timer-wrap .cover-countdown) .rec-feat-info {
  bottom: 46px;
}
@media (max-width: 600px) {
  .rec-mini:has(.rec-card-timer-wrap .cover-countdown) .rec-mini-info,
  .rec-feat:has(.rec-card-timer-wrap .cover-countdown) .rec-feat-info {
    bottom: 40px;
  }
}

.cover-countdown-label {
  /* v0.4.0-alpha.60 — top row of the stacked layout. Inline text flow
   * keeps icon + label + days span as one continuous string that wraps
   * cleanly to 1-2 lines, never fragments. */
  display: block;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  line-height: 1.2;
}
.cover-countdown-label i {
  font-size: 11px;
  color: #fff;
  margin-right: 4px;
  vertical-align: -1px;
}
.cover-countdown-label [data-l="days-label"] {
  /* Keep "12 días" / "1 día" / "hoy" together — never wrap mid-token. */
  white-space: nowrap;
  font-weight: 800; /* slightly stronger to anchor the magnitude */
}
.cover-countdown-time {
  /* v0.4.0-alpha.60 — bottom row of the stacked layout, flush left
   * under the label. Slightly larger than the label so the clock is
   * the visual focal point of the strip. */
  display: block;
  font-size: 15px;
  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);
  white-space: nowrap;
}
/* v0.4.0-alpha.59 — small "h m s" unit letters after each digit pair.
 * Sized at 0.7em (~10px on 14px digits), slightly faded so the digits
 * remain the focal point and the units read as helpful suffixes
 * instead of competing typography. */
.cover-countdown-unit {
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.85;
  margin-left: 1px;
  margin-right: 3px;
  text-transform: lowercase;
  letter-spacing: 0;
}

/* 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%, color-mix(in srgb, var(--accent) 6%, transparent) 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; }
  /* v0.3.162 — proportionally bumped for mobile to match desktop's
     larger 13px/15px sizes (was 9px/11px). */
  .cover-countdown-label { font-size: 11px; }
  .cover-countdown-time { font-size: 13px; }
  /* 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;
  /* v0.3.147 — both PRIMARIO and SECUNDARIO titles now in gold (was
     only PRIMARIA in accent + SECUNDARIA in muted gray). */
  color: var(--accent);
}
.lyx-modal-row span {
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.5;
}
/* v0.3.147 — "Recomendado si…" tagline at the bottom of each row.
   Slightly emphasized so it stands out as the "use this when…" advice
   versus the longer descriptive paragraph above. */
.lyx-modal-row .lyx-modal-row-rec {
  margin-top: 4px;
  font-style: normal;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}
.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, color-mix(in srgb, var(--accent) 7%, transparent) 0%, color-mix(in srgb, var(--accent) 1.5%, transparent) 55%, transparent 100%);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 14px 36px -8px color-mix(in srgb, var(--accent) 18%, transparent);
}
.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.
   v0.3.150 — also target `<s>` because `class-tier-cards.php::format_price()`
   wraps the regular price in `<s>` rather than WC's `<del>`; without
   this, the old price was rendering at 34px white-bold (same as new
   price) with only the browser-default thin strikethrough — confusing
   per Andres's screenshot. */
.tier-card-v2-prices del .amount,
.tier-card-v2-prices del .woocommerce-Price-amount,
.tier-card-v2-prices s .amount,
.tier-card-v2-prices s .woocommerce-Price-amount {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
/* Strikethrough on the wrapper. `text-decoration-color` + thickness
   make the line clearly visible against the muted text (the browser
   default uses currentColor at 1px which gets lost). */
.tier-card-v2-prices del,
.tier-card-v2-prices s {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  text-decoration-thickness: 2px;
  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 {
  /* v0.4.0-alpha.18 — refined responsive layout.
     - Scrollbar hidden on every browser (touch/wheel still scrolls)
     - `justify-content: center` on desktop, switches to `flex-start`
       on mobile so pills don't squeeze when scrolling
     - Side padding on mobile so first/last pills aren't flush against
       the screen edge
     - `align-items: stretch` lets pills inherit container height
       cleanly without vertical alignment quirks */
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  min-height: 72px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.cats-row::-webkit-scrollbar { display: none; }

/* Mobile: pills can overflow the viewport. Switch from
   center-justify (which clips the leftmost pills when there's overflow)
   to flex-start, plus add side padding for finger-friendly scrolling. */
@media (max-width: 720px) {
  .cats-row {
    justify-content: flex-start;
    padding: 8px 16px;
    gap: 6px;
    min-height: 64px;
  }
  .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; }
}
.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: color-mix(in srgb, var(--accent) 45%, transparent);
  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;
  /* v0.4.0-alpha.7 — same fix as .logo-mark. Page loader letter
     mark now reflects the Brand editor's accent color. */
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 22px;
  color: var(--bg);
  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 color-mix(in srgb, var(--accent) 50%, transparent); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@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 color-mix(in srgb, var(--accent) 45%, transparent);
  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: color-mix(in srgb, var(--accent) 6%, transparent);
  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, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 100%);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  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 color-mix(in srgb, var(--accent) 10%, transparent), 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;
  /* v0.4.0-alpha.56 — bumped 13 → 18px per Andres. The label text
   * "OFERTA TERMINA EN" was visually weak against the large countdown
   * digits next to it. Bigger text only — banner padding unchanged so
   * the timer block keeps its existing height. */
  font-size: 18px;
  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%, color-mix(in srgb, var(--accent) 8%, transparent) 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 color-mix(in srgb, var(--accent) 8%, transparent), 0 16px 40px -8px color-mix(in srgb, var(--accent) 25%, transparent);
}
.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: color-mix(in srgb, var(--accent) 4%, transparent);
}
.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, color-mix(in srgb, var(--accent) 14%, transparent) 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.
   ============================================================ */

/* v0.4.0-alpha.7 — selection bg uses --accent so highlighted text
   matches the Brand editor's accent. Foreground uses --bg (the page
   background) for contrast — works whether accent is light or dark. */
::selection      { background: var(--accent); color: var(--bg); text-shadow: none; }
::-moz-selection { background: var(--accent); color: var(--bg); 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%;
}

/* v0.3.166 — pills click bulletproofing.
   Andres reported pills still showing the drag cursor + not registering
   clicks. Three layers of defense to defeat cached/legacy CSS:
     1. `cursor: pointer !important` on `.cat-pill` itself — wins over
        any `cursor: grab` inherited from the parent `.cats-row`.
     2. No `pointer-events: none` rule on `.cats-row.is-dragging a` —
        even if a cached `lyx-app.js` adds `is-dragging` on mousedown,
        clicks still fire on the link.
     3. `cursor: default` on `.cats-row` (instead of grab) so the
        cursor only shows the pointer once it lands on a pill. */
.cats-row { cursor: default !important; user-select: none; -webkit-user-select: none; }
.cats-row.is-dragging { cursor: grabbing !important; scroll-behavior: auto; }
.cat-pill { cursor: pointer !important; }

/* ---------------------------------------------------------------
   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%, color-mix(in srgb, var(--accent) 10%, transparent) 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%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 100% 100%, color-mix(in srgb, var(--accent) 5%, transparent) 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, color-mix(in srgb, var(--accent) 18%, transparent) 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 color-mix(in srgb, var(--accent) 18%, transparent);
  animation: lyx-auth-pulse 1.8s ease-in-out infinite;
}
@keyframes lyx-auth-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 4%, transparent); }
}

.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: color-mix(in srgb, var(--accent) 10%, transparent);
  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: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-3px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, var(--surface) 70%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 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: color-mix(in srgb, var(--accent) 10%, transparent);
  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: color-mix(in srgb, var(--accent) 15%, transparent); 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, color-mix(in srgb, var(--accent) 10%, transparent) 0%, var(--surface) 60%);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.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, color-mix(in srgb, var(--accent) 6%, transparent) 0%, var(--surface) 60%);
  box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 rgba(255,255,255,0.04);
}
.lyx-account-card-icon {
  width: 44px; height: 44px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  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 color-mix(in srgb, var(--accent) 12%, transparent), 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 color-mix(in srgb, var(--accent) 10%, transparent), 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: color-mix(in srgb, var(--accent) 3%, transparent);
}

.lyx-account-address-pin {
  position: absolute;
  top: 24px; right: 26px;
  width: 36px; height: 36px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  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: color-mix(in srgb, var(--accent) 15%, transparent);
  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 color-mix(in srgb, var(--accent) 15%, transparent);
}
/* 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; }
}

/* =========================================================================
   v0.3.164 — CUSTOM SINGLE-POST TEMPLATES (migrated legacy blog posts)
   Each post slug routes to a unique layout via parts/shell-page.php.
   Shared building blocks live here so all 3 templates feel like family.
   ========================================================================= */

/* ---- SHARED: hero block (used by all 3 templates with modifier) ---- */
.lyx-blog-hero {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(20,20,28,0.6) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  margin-bottom: 32px;
}
.lyx-blog-hero-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---- SHARED: page subtitle under page-title in breadcrumb header ---- */
.page-subtitle {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 720px;
}

/* ---- SHARED: blog CTA strip ---- */
.lyx-blog-cta {
  background: linear-gradient(90deg, rgba(37,211,102,0.10) 0%, rgba(37,211,102,0.02) 100%);
  border: 1px solid rgba(37,211,102,0.30);
  border-radius: 14px;
  padding: 22px 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.lyx-blog-cta-text { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.lyx-blog-cta-text strong {
  color: #fff; font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.lyx-blog-cta-text span { color: var(--text-2); font-size: 14px; }

/* ---- SHARED: related posts cards ---- */
.lyx-related-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
  text-decoration: none;
}
.lyx-related-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.lyx-related-card-img { aspect-ratio: 16/9; overflow: hidden; }
.lyx-related-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lyx-related-card-body { padding: 14px 16px 16px; }
.lyx-related-card-body h4 { margin: 0 0 6px; font-size: 14px; color: #fff; line-height: 1.3; font-weight: 700; }
.lyx-related-card-body span { font-size: 12px; color: var(--text-3); }

/* ============================================================
   TEMPLATE 1 — DUDAS CON TUS JUEGOS (FAQ help-center style)
   ============================================================ */
.lyx-blog-hero-faq {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.lyx-blog-hero-faq .lyx-blog-hero-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--accent) 0%, #d4a017 100%);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #000;
  font-size: 36px;
  flex-shrink: 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}
.lyx-blog-hero-faq .lyx-blog-hero-text h2 {
  margin: 0 0 10px;
  font-size: 28px; font-weight: 900;
  color: #fff;
  line-height: 1.15;
}
.lyx-blog-hero-faq .lyx-blog-hero-text p {
  margin: 0 0 4px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
}

/* Platform cards (PS4 / PS5 side-by-side with collapsible items) */
.lyx-blog-platforms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.lyx-platform-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.lyx-platform-card:hover { border-color: var(--accent-line); }
.lyx-platform-card-head {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 100%);
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
}
.lyx-platform-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent);
  color: #000;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lyx-platform-card-head h3 {
  margin: 0;
  font-size: 18px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lyx-platform-card-body { padding: 8px 22px 18px; }

/* Collapsible <details>/<summary> faq items inside platform cards */
.lyx-blog-faq {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.lyx-blog-faq:last-child { border-bottom: 0; }
.lyx-blog-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
  color: #fff;
  padding: 4px 0;
  transition: color .15s;
}
.lyx-blog-faq summary:hover { color: var(--accent); }
.lyx-blog-faq summary::-webkit-details-marker { display: none; }
.lyx-blog-faq summary::after {
  content: '\f078'; /* fa-chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
  transition: transform .2s;
}
.lyx-blog-faq[open] summary::after { transform: rotate(180deg); }
.lyx-blog-faq summary i:first-child { color: var(--accent); font-size: 14px; }
.lyx-blog-faq p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
  margin: 8px 0 0 24px;
}

/* v0.3.166 — YouTube embed wrapper inside FAQ details. 16:9 responsive
   iframe per the standard CSS aspect-ratio pattern, with rounded
   corners + subtle border so it visually matches the platform card. */
.lyx-blog-video {
  margin: 12px 0 4px 24px;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.lyx-blog-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   TEMPLATE 2 — COMPRAR IPTV CON IPTV SMARTERS PRO
   (Product-landing style)
   ============================================================ */
.lyx-blog-hero-iptv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
  padding: 40px 36px;
}
.lyx-blog-hero-img {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
}
.lyx-blog-hero-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.lyx-blog-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.lyx-blog-hero-iptv h2 {
  margin: 0 0 14px;
  font-size: 30px; font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.lyx-blog-hero-iptv p {
  margin: 0 0 12px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.7;
}

/* Features grid */
.lyx-blog-features { margin-top: 48px; }
.lyx-blog-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.lyx-blog-feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  transition: border-color .2s, transform .2s;
}
.lyx-blog-feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.lyx-blog-feature-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 20px;
  margin-bottom: 14px;
}
.lyx-blog-feature h4 {
  margin: 0 0 6px;
  font-size: 15px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lyx-blog-feature p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* How-to numbered steps */
.lyx-blog-howto { margin-top: 48px; }
.lyx-blog-howto-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.lyx-blog-howto-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  position: relative;
}
.lyx-blog-howto-num {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
}
.lyx-blog-howto-step h4 {
  margin: 0 0 8px;
  font-size: 16px; font-weight: 800;
  color: #fff;
  padding-right: 44px;
}
.lyx-blog-howto-step p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* Download CTA box */
.lyx-blog-download {
  margin-top: 48px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 0%, color-mix(in srgb, var(--accent) 2%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 14px;
  padding: 26px 32px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.lyx-blog-download-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--accent) 0%, #d4a017 100%);
  color: #000;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 20%, transparent);
}
.lyx-blog-download-text { flex: 1; min-width: 240px; }
.lyx-blog-download-text h3 {
  margin: 0 0 4px;
  font-size: 18px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lyx-blog-download-text p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* Support strip (post 2) */
.lyx-blog-support {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 28px;
  text-align: center;
}
.lyx-blog-support h3 {
  margin: 0 0 4px;
  font-size: 16px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lyx-blog-support p { margin: 0 0 14px; color: var(--text-2); font-size: 14px; }
.lyx-blog-support-links {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.lyx-blog-support-links a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color .15s, border-color .15s;
}
.lyx-blog-support-links a:hover { color: var(--accent); border-color: var(--accent); }
.lyx-blog-support-links a .fa-whatsapp { color: #25D366; }

/* v0.3.167 — "Síguenos en redes" social icon row (used by IPTV blog
   post template, can be reused by future blog templates). Round
   icon buttons with brand-colored hover states. */
.lyx-blog-socials {
  margin-top: 32px;
  text-align: center;
  padding: 22px 28px;
}
.lyx-blog-socials h3 {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lyx-blog-socials-icons {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lyx-blog-socials-icons a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 18px;
  text-decoration: none;
  transition: all .2s ease;
}
.lyx-blog-socials-icons a:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  color: #fff;
}
.lyx-blog-socials-icons a:hover .fa-facebook   { color: #1877f2; }
.lyx-blog-socials-icons a:hover .fa-instagram  { color: #e1306c; }
.lyx-blog-socials-icons a:hover .fa-tiktok     { color: #000; background: #fff; }
.lyx-blog-socials-icons a:hover .fa-youtube    { color: #ff0000; }

/* v0.3.167 — Blog search bar (page-default.php blog index branch).
   Pill-shaped input with leading magnifier icon button on the right.
   Centered above the post grid, max-width capped so it doesn't
   stretch awkwardly on ultrawide screens. */
.lyx-blog-search {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 560px;
  margin: 0 auto 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s;
}
.lyx-blog-search:focus-within { border-color: var(--accent); }
.lyx-blog-search input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 18px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lyx-blog-search input[type="search"]::placeholder { color: var(--text-3); }
.lyx-blog-search button {
  background: var(--accent);
  color: #000;
  border: 0;
  padding: 0 22px;
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: background-color .2s;
}
.lyx-blog-search button:hover { background: var(--accent-2, var(--accent)); filter: brightness(1.08); }

/* ============================================================
   TEMPLATE 3 — NÚMERO OFICIAL (Anti-scam / trust authority)
   ============================================================ */

/* Big number hero */
.lyx-blog-numhero {
  background: radial-gradient(ellipse at 50% 0%, rgba(37,211,102,0.16) 0%, transparent 60%),
              linear-gradient(180deg, var(--surface) 0%, rgba(20,20,28,0.95) 100%);
  border: 1px solid rgba(37,211,102,0.32);
  border-radius: 16px;
  padding: 52px 32px;
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.lyx-blog-numhero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(37,211,102,0.7), transparent);
}
.lyx-blog-numhero-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 40px;
  box-shadow: 0 0 32px rgba(37,211,102,0.45);
  margin-bottom: 18px;
}
.lyx-blog-numhero-eyebrow {
  display: block;
  font-size: 12px; font-weight: 800;
  color: #25D366;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  margin-bottom: 8px;
}
.lyx-blog-numhero-num {
  display: block;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 16px;
  text-shadow: 0 0 24px rgba(37,211,102,0.35);
  transition: color .15s, text-shadow .15s;
}
.lyx-blog-numhero-num:hover { color: #25D366; text-shadow: 0 0 32px rgba(37,211,102,0.6); }
.lyx-blog-numhero-sub {
  margin: 0 auto 22px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 600px;
}

/* Red warning callout */
.lyx-blog-warning {
  background: linear-gradient(180deg, rgba(220,38,38,0.10) 0%, rgba(220,38,38,0.02) 100%);
  border: 1px solid rgba(220,38,38,0.36);
  border-left: 4px solid var(--urgent);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 32px;
}
.lyx-blog-warning-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.lyx-blog-warning-head i {
  font-size: 24px;
  color: var(--urgent);
}
.lyx-blog-warning-head h2 {
  margin: 0;
  font-size: 18px; font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lyx-blog-warning-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lyx-blog-warning-list li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.lyx-blog-warning-list li i {
  color: var(--urgent);
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Trust grid (sites + socials) */
.lyx-blog-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 18px;
}
.lyx-blog-trust-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 26px;
}
.lyx-blog-trust-col h3 {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 8px;
}
.lyx-blog-trust-col h3 i { color: var(--accent); font-size: 12px; }
.lyx-blog-trust-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lyx-blog-trust-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--text-2);
}
.lyx-blog-trust-list li i { color: #25D366; font-size: 13px; flex-shrink: 0; }
.lyx-blog-trust-list li i.fa-facebook { color: #1877f2; }
.lyx-blog-trust-list li i.fa-instagram { color: #e1306c; }
.lyx-blog-trust-list li i.fa-tiktok { color: #fff; }
.lyx-blog-trust-list li i.fa-location-dot { color: #ea4335; }
.lyx-blog-trust-list li a {
  color: var(--text-2);
  text-decoration: none;
  transition: color .15s;
}
.lyx-blog-trust-list li a:hover { color: var(--accent); }
.lyx-blog-trust-note {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
  margin: 0 0 32px;
}

/* Image showcase */
.lyx-blog-imageshow { margin-bottom: 40px; }
.lyx-blog-imageshow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.lyx-blog-imageshow figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 14px;
}
.lyx-blog-imageshow figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.lyx-blog-imageshow-tall {
  grid-row: span 1;
}

/* Scam warning section */
.lyx-blog-scam {
  background: linear-gradient(180deg, rgba(220,38,38,0.10) 0%, rgba(220,38,38,0.03) 100%);
  border: 1px solid rgba(220,38,38,0.40);
  border-radius: 14px;
  padding: 32px;
  margin-bottom: 40px;
}
.lyx-blog-scam-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(220,38,38,0.28);
}
.lyx-blog-scam-head i { font-size: 28px; color: var(--urgent); }
.lyx-blog-scam-head h2 {
  margin: 0;
  font-size: 22px; font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lyx-blog-scam h3 {
  margin: 0 0 10px;
  font-size: 14px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lyx-blog-scam h4 {
  margin: 18px 0 10px;
  font-size: 13px; font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lyx-blog-scam p {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
}
.lyx-blog-scam p strong { color: #fff; }
.lyx-blog-scam-numbers { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(220,38,38,0.20); }
.lyx-blog-scam-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lyx-blog-scam-list li {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex; align-items: baseline; gap: 14px;
  flex-wrap: wrap;
}
.lyx-blog-scam-list li strong {
  color: #fff;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lyx-blog-scam-list li a strong { color: var(--accent); }
.lyx-blog-scam-list li span {
  color: var(--text-3);
  font-size: 13px;
  flex: 1;
}

.lyx-blog-scam-tips ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lyx-blog-scam-tips ul li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.lyx-blog-scam-tips ul li i {
  color: var(--urgent);
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}
.lyx-blog-scam-final {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: rgba(220,38,38,0.12);
  border-left: 3px solid var(--urgent);
  border-radius: 6px;
  text-align: center;
  color: #fff !important;
}

/* Logos section */
.lyx-blog-logos { margin-bottom: 40px; }
.lyx-blog-logos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 600px;
  margin: 0 auto;
}
.lyx-blog-logos-grid figure {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
}
.lyx-blog-logos-grid figure img {
  max-width: 100%;
  height: auto;
  max-height: 120px;
}
.lyx-blog-logos-note {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
  margin: 18px 0 0;
}

/* Why us panel */
.lyx-blog-whyus {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, color-mix(in srgb, var(--accent) 1%, transparent) 100%);
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  padding: 32px;
}
.lyx-blog-whyus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-bottom: 26px;
}
.lyx-blog-whyus-item {
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.lyx-blog-whyus-emoji {
  font-size: 36px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent));
}
.lyx-blog-whyus-item h4 {
  margin: 0 0 8px;
  font-size: 15px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lyx-blog-whyus-item p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.lyx-blog-whyus-cta {
  text-align: center;
  padding-top: 18px;
  border-top: 1px solid var(--accent-line);
}

/* ---- RESPONSIVE — collapse 2-cols to 1 on tablet+phone ---- */
@media (max-width: 900px) {
  .lyx-blog-hero { padding: 28px 22px; }
  .lyx-blog-hero-faq { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .lyx-blog-hero-faq .lyx-blog-hero-icon { margin: 0 auto; }
  .lyx-blog-hero-faq .lyx-blog-hero-chips { justify-content: center; }
  .lyx-blog-platforms-grid { grid-template-columns: 1fr; gap: 18px; }
  .lyx-blog-hero-iptv { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
  .lyx-blog-trust-grid { grid-template-columns: 1fr; }
  .lyx-blog-imageshow-grid { grid-template-columns: 1fr 1fr; }
  .lyx-blog-imageshow-tall { grid-column: span 2; }
  .lyx-blog-logos-grid { grid-template-columns: 1fr; }
  .lyx-blog-numhero { padding: 36px 22px; }
  .lyx-blog-scam { padding: 24px; }
  .lyx-blog-whyus { padding: 24px; }
}
@media (max-width: 600px) {
  .lyx-blog-hero-iptv h2 { font-size: 24px; }
  .lyx-blog-imageshow-grid { grid-template-columns: 1fr; }
  .lyx-blog-imageshow-tall { grid-column: auto; }
  .lyx-blog-numhero-num { font-size: 44px; }
  .lyx-blog-cta { flex-direction: column; align-items: stretch; text-align: center; }
}
}