/* ============================================================
   NAVBAR ESTILO LUSIVE — botones pill Carrito + Dashboard
   (clases reales del tema: premium-nav__cart / premium-nav__login)
   ============================================================ */
.premium-nav__cart,
.premium-nav__login {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: .92rem;
  font-weight: 700;
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, background .25s, border-color .25s;
}
/* Carrito: círculo azul con el ícono PERFECTAMENTE centrado.
   (custom.css fija width:38px; con padding 20px por lado el ícono se cortaba) */
.premium-nav__cart {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  justify-content: center;
  gap: 0;
  font-size: 1.02rem;
  border: 1.5px solid rgba(var(--cl-accent), .75) !important;
  background: rgba(6, 12, 22, .4) !important;
  color: #eaf3fd !important;
}
.premium-nav__cart > i {
  margin: 0;
  line-height: 1;
}
/* Contador montado en el borde del círculo, sin tapar el ícono */
.premium-nav__cart .premium-nav__cart-count {
  top: -5px !important;
  right: -5px !important;
  z-index: 2;
}
.premium-nav__cart:hover {
  transform: translateY(-2px);
  background: rgba(var(--cl-accent), .12) !important;
  box-shadow: 0 10px 28px rgba(var(--cl-accent), .25);
}
/* Iniciar sesión / Dashboard: pill azul sólido (como Lusive) */
.premium-nav__login {
  border: 0 !important;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(29, 78, 216, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.premium-nav__login:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 42px rgba(29, 78, 216, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.premium-nav__login:active,
.premium-nav__cart:active { transform: translateY(1px) scale(.98); transition-duration: .07s; }
/* El contador del carrito dentro del pill */
.premium-nav__cart span[class*=badge],
.premium-nav__cart [class*=count] {
  background: var(--premium-blue) !important;
  color: #fff !important;
}

/* ============================================================
   NAVBAR 100% TRANSPARENTE — sin recuadro, SIEMPRE
   (gana a header.premium-nav de custom.css por especificidad)
   ============================================================ */
header.component,
header.component.premium-nav,
header.premium-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
header.component:hover,
header.component.premium-nav:hover {
  background: transparent !important;
}
/* EN LA PORTADA: el navbar flota sobre el hero (el arte sube hasta arriba,
   sin banda oscura detrás del navbar) */
body:has(.lusive-hero-full) header.component {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300 !important;
}
body:has(.lusive-hero-full) .lusive-hero-full {
  padding-top: 96px;
}
/* Logo más grande y limpio como Lusive */
.premium-nav__brand { gap: 12px; }
.premium-nav__brand img,
.fx-logo3d img { border-radius: 10px; }
/* Buscador integrado, sin caja pesada */
.premium-header-search {
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .05) !important;
}
/* Arreglo: el carrito no debe cortarse ni desbordar en pantallas medias */
.premium-nav > div,
header.component nav > div { flex-wrap: nowrap; }
.premium-nav__cart { flex: none; overflow: visible; }
@media (max-width: 900px) {
  .premium-nav__cart span[class*=badge],
  .premium-nav__cart [class*=count] { display: none; }
  .premium-nav__login { padding: 0 14px !important; }
  /* El carrito mantiene padding 0: es un círculo, el ícono debe quedar centrado */
  .premium-nav__cart { padding: 0 !important; }
}

/* ============================================================
   PRODUCTO = NIVEX (bloque final, última palabra en cascada)
   ============================================================ */

/* Título grande (gana a .product-experience h1) */
.product-experience .product-buybox__title,
.product-experience .sa-page-product-title,
.product-buybox .product-buybox__title{
  font-size: clamp(1.9rem, 2.8vw, 2.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: 1.08 !important;
  color: #fff !important;
  margin: 0 0 18px !important;
}

/* Tile de variante Nivex (104px, borde azul suave, precio azul 24px) */
.checkout-form__body .checkout-variants .variant-pill{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-height: 104px !important;
  padding: 16px 18px !important;
  border: 1.5px solid rgba(96, 149, 255, .85) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, .10), rgba(37, 99, 235, .035)) !important;
  box-shadow: none !important;
}
.checkout-form__body .checkout-variants .variant-pill .flex-1{ width: 100% !important; }
.checkout-form__body .checkout-variants .variant-pill p.text-base{ font-size: 1.02rem !important; font-weight: 600 !important; color: #fff !important; margin: 0 !important; }
.checkout-form__body .checkout-variants .variant-pill p.text-t-primary\/75{
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  margin: 0 !important;
  font-size: .68rem !important;
  color: #7e90a6 !important;
}
.checkout-form__body .checkout-variants .variant-pill .bg-white\/\[0\.025\]{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--premium-blue-2) !important;
  line-height: 1.1 !important;
  border-radius: 0 !important;
}

/* Comprar Ahora: SÓLIDO azul (gana a :not(.bg-accent-500)) */
.checkout-form__body button[type="submit"].border-accent-500,
.checkout-card button[type="submit"].border-accent-500{
  background: linear-gradient(135deg, var(--premium-blue), var(--premium-blue-2)) !important;
  border: 0 !important;
  color: #fff !important;
  height: 48px !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 28px rgba(var(--cl-accent), .35) !important;
}
.checkout-form__body button[type="submit"].border-accent-500::before{ display: none !important; }

/* Añadir al Carrito: ghost (gana a cualquier bg-accent-500 sólido) */
.checkout-form__body button[type="button"].bg-accent-500,
.checkout-card button[type="button"].bg-accent-500{
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, .22) !important;
  color: #d7e4f5 !important;
  height: 48px !important;
  border-radius: 12px !important;
  animation: none !important;
  box-shadow: none !important;
}
.checkout-form__body button[type="button"].bg-accent-500:hover{
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .38) !important;
}

/* Nivex: sin fila de precio duplicada sobre el tile, sin barra sobre la imagen */
.product-buybox div[data-dsr]:has(.sa-page-product-price){ display: none !important; }
.product-gallery-card .bg-background\/35{ display: none !important; }

/* Nivex: sin fila precio+c/u+stock dentro del form, sin countdown */
.checkout-form__body > .flex.justify-between.items-center,
.checkout-form__body .text-3xl{ display: none !important; }
.checkout-form__body .conversion-countdown{ display: none !important; }

/* La fila precio/c-u/stock es hermana del form (hija de checkout-card__body) */
.checkout-card .checkout-card__body > div.flex.justify-between.items-center,
.checkout-card div.flex.justify-between.items-center:has(.text-3xl){ display: none !important; }

/* Body del checkout sin banda clara (Nivex: todo el card uniforme) */
.checkout-card .checkout-card__body{ background: transparent !important; }

/* Barra de compra móvil: sin saltos de línea, CTA en una línea */
@media (max-width:640px){
  .mobile-purchase-bar{ gap: 7px !important; padding: 8px 10px !important; }
  .mobile-purchase-bar__price{ min-width: 58px !important; }
  .mobile-purchase-bar__quantity{ display: none !important; }
  .mobile-purchase-bar__cta{
    height: 42px !important;
    white-space: nowrap !important;
    font-size: .8rem !important;
    border-radius: 11px !important;
  }
}

/* CTA de la barra móvil llena el ancho restante */
@media (max-width:640px){
  .mobile-purchase-bar{ grid-template-columns: auto 1fr !important; }
  .mobile-purchase-bar__cta{ width: 100% !important; }
}

/* Tile variante: el nombre deja sitio al sello "En Stock" (evita montarse) */
.checkout-form__body .checkout-variants .variant-pill .flex-1 > p.text-base{ padding-right: 80px !important; }

/* Variante NO seleccionada: apagada; SELECCIONADA: azul con barra lateral (Nivex) */
.checkout-form__body .checkout-variants .variant-pill.border-transparent{
  border: 1.5px solid rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
}
.checkout-form__body .checkout-variants .variant-pill[class*="border-accent-500"]{
  border-color: #6095ff !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, .16), rgba(37, 99, 235, .05)) !important;
  box-shadow: inset 3px 0 0 var(--premium-blue), 0 10px 28px rgba(37, 99, 235, .2) !important;
}

/* ============================================================
   TILES DE PRODUCTO REALES en "Explora nuestros productos"
   (nombre + precio, grid 3x3 desktop como Nivex)
   ============================================================ */
.lusive-cats__grid{ grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }
@media (max-width: 1024px){ .lusive-cats__grid{ grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px){ .lusive-cats__grid{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; } }

.lusive-cat{
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 12px !important;
  min-height: 118px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 14px !important;
  background: rgb(10, 16, 31) !important;
  text-align: left !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
}
.lusive-cat > i{
  font-size: 1.25rem !important;
  color: var(--premium-blue-2) !important;
  margin: 0 !important;
}
.lusive-cat > span{
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.lusive-cat > small{
  font-size: .78rem;
  font-weight: 800;
  color: var(--premium-blue-2);
  letter-spacing: .01em;
}
.lusive-cat:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--cl-accent), .5) !important;
  box-shadow: 0 14px 34px rgba(var(--cl-accent), .18);
}

/* ============================================================
   PRODUCTO = NIVEX (pulido final tras comparación lado a lado)
   ============================================================ */

/* Nudges de volumen: solo si hay descuento real (0% oculto, como Nivex) */
.volume-discount-nudge{ display: none !important; }
.volume-discount-nudge:has([class*="0%"]){ display: none !important; }
.checkout-form__body:has(.quantity-deal-card) .volume-discount-nudge{ display: block !important; }

/* Botones 50px exactos, radius 14, borde 2px (Nivex) */
.checkout-form__body button.bg-accent-500,
.checkout-form__body button[type="submit"].border-accent-500{
  min-height: 50px !important;
  border-radius: 14px !important;
  font-size: .92rem !important;
}
.checkout-form__body button[type="button"].bg-accent-500{
  border: 2px solid rgba(96, 149, 255, .55) !important;
  background: rgba(37, 99, 235, .08) !important;
  color: #cfe1ff !important;
}

/* Cantidad: estilo Nivex (46px, bordes suaves, botones azules al hover) */
.checkout-form__body .premium-quantity{
  height: 46px !important;
  border: 1.5px solid rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .02) !important;
}
.checkout-form__body .premium-quantity button{
  background: transparent !important;
  color: #8fa2b8 !important;
  font-size: 1.05rem !important;
}
.checkout-form__body .premium-quantity button:hover:not(:disabled){
  background: rgba(37, 99, 235, .18) !important;
  color: #fff !important;
}
.checkout-form__body .premium-quantity input{
  background: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Añadir al Carrito: radius 14 también (regla previa 12px lo pisaba) */
.checkout-form__body button[type="button"].bg-accent-500{ border-radius: 14px !important; }

/* ============================================================
   TILES DE JUEGO — GTA V / FORTNITE (estilo Nivex, 2 en grande)
   ============================================================ */
.lusive-cats__grid--games{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
}
.lusive-game{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: 22px;
  border: 1px solid rgba(var(--cl-accent), .22);
  border-bottom: 3px solid var(--game-color, var(--premium-blue-2));
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  background: #070b12;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  transition: border-color .35s, box-shadow .35s;
}
/* Arte del juego: capa propia que se hunde al inclinar (parallax) */
.lusive-game__art{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--game-img) center / cover no-repeat, #0a1018;
  transform: translateZ(0) scale(1.02);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.lusive-game.is-tilting .lusive-game__art{ transform: translateZ(-18px) scale(1.14); transition: transform .18s ease-out; }
/* Watermark outline del nombre (estilo Nivex) */
.lusive-game__watermark{
  position: absolute;
  left: 14px;
  bottom: 96px;
  z-index: 1;
  pointer-events: none;
  font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16);
  text-shadow: none;
  transition: -webkit-text-stroke-color .35s;
}
.lusive-game:hover .lusive-game__watermark{ -webkit-text-stroke-color: rgba(255, 255, 255, .3); }
/* Tile "Próximamente": grupo visible pero sin productos aún — sin hover 3D, sin link */
.lusive-game.is-soon-tile{ cursor: default; }
.lusive-game.is-soon-tile .lusive-game__art{ filter: saturate(.55) brightness(.8); }
.lusive-game.is-soon-tile .lusive-game__cta{ opacity: .75; }

/* Destello que sigue al cursor */
.lusive-game::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(440px circle at var(--fx-mx, 50%) var(--fx-my, 40%), rgba(255, 255, 255, .13), transparent 56%);
  opacity: 0;
  transition: opacity .3s;
}
.lusive-game.is-tilting::after{ opacity: 1; }
/* Capas que saltan hacia el espectador al inclinar */
.lusive-game.is-tilting .lusive-game__tag,
.lusive-game.is-tilting .lusive-game__stock{ transform: translateZ(24px); }
.lusive-game.is-tilting .lusive-game__cta{ transform: translateZ(30px); }
.lusive-game.is-tilting .lusive-game__name{ transform: translateZ(40px); }
.lusive-game::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 7, 12, .18) 0%, rgba(4, 7, 12, .55) 55%, rgba(4, 7, 12, .92) 100%),
    linear-gradient(100deg, rgba(var(--cl-accent), .18), transparent 55%);
  transition: background .35s;
}
.lusive-game:hover{
  border-color: rgba(var(--cl-accent), .55);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .45), 0 0 40px color-mix(in srgb, var(--game-color, var(--premium-blue-2)) 30%, transparent);
}
.lusive-game__tag{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(var(--cl-accent), .35);
  border-radius: 999px;
  background: rgba(4, 8, 14, .72);
  color: var(--premium-blue-2);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lusive-game__tag i{ font-size: .8rem; }
.lusive-game__name{
  position: relative;
  z-index: 3;
  margin-top: 26px;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  color: #fff;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .6);
}
.lusive-game__name em{
  display: block;
  font-style: normal;
  background: linear-gradient(100deg, #eef7ff 10%, var(--premium-blue-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: .92em;
}
.lusive-game__cta{
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--game-color, var(--premium-blue-2));
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  transition: color .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.lusive-game__cta i{ font-size: .7rem; transition: transform .25s; }
.lusive-game:hover .lusive-game__cta{ color: #fff; transform: translateX(3px); }
.lusive-game:hover .lusive-game__cta i{ transform: translateX(3px); }

/* Móvil: apilados verticalmente */
@media (max-width: 760px){
  .lusive-cats__grid--games{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .lusive-game{ min-height: 190px; }
}

/* ---------- Stock en vivo por tile ---------- */
.lusive-game__stock{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  padding: 6px 12px;
  border: 1px solid rgba(78, 222, 137, .28);
  border-radius: 999px;
  background: rgba(6, 20, 12, .66);
  color: #7ee2a0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.lusive-game__stock b{ color: #b7f5cd; font-weight: 900; font-variant-numeric: tabular-nums; }
.lusive-game__dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ede89;
  box-shadow: 0 0 8px #4ede89;
  animation: lusive-pulse 2.2s ease-in-out infinite;
}
@keyframes lusive-pulse{
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.78); }
}
.lusive-game__stock.is-out{ border-color: rgba(239, 100, 114, .3); color: #f0969e; background: rgba(24, 8, 10, .66); }
.lusive-game__stock.is-out .lusive-game__dot{ background: #ef6472; box-shadow: 0 0 8px #ef6472; animation: none; }
.lusive-game__stock.is-soon{ border-color: rgba(148, 163, 184, .3); color: #a9b8ca; background: rgba(10, 14, 20, .66); }
.lusive-game__stock.is-soon .lusive-game__dot{ background: #94a3b8; box-shadow: 0 0 8px #94a3b8; animation: none; }
@media (pointer: coarse){ .lusive-game__dot{ animation: none; } }

/* ============================================================
   CARRITO — pulido estilo Nivex (título página + panel pedido)
   ============================================================ */
.lusive-cart-title{
  margin: 12px 2px 26px;
  color: #fff;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.045em;
}
.lusive-order-title{
  color: var(--premium-blue-2) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
}
.lusive-subtotal{ font-size: 1.25rem !important; }

/* ============================================================
   FOOTER — clon exacto de Nivex: full-width pegado abajo, sin
   borde/radio, watermark outline gigante, midrow Discord+métodos
   en la MISMA fila, bottom copyright + volver arriba.
   ============================================================ */
footer.premium-footer{
  position: relative;
  overflow: hidden;
  margin: 72px 0 0 !important;
  max-width: none !important;
  width: auto !important;
  padding: 60px 0 0 !important;
  background: rgba(0, 10, 28, .44) !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.premium-footer__glow{ display: none; }
.premium-footer__inner{ position: relative; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.premium-footer::before{
  content: "CHETEOS";
  position: absolute;
  right: 0;
  bottom: 9px;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(7rem, 14vw, 195px);
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  color: rgba(47, 143, 255, .05);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
.premium-footer__grid,
.premium-footer__midrow,
.premium-footer__bottom{ position: relative; z-index: 1; }

/* Top: brand + columnas (flex como Nivex, brand 360px, links 14.4px) */
footer.premium-footer .premium-footer__grid{ display: flex; align-items: flex-start; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
footer.premium-footer .premium-footer__brand{ max-width: 360px; }
footer.premium-footer .premium-footer__logo{ color: rgb(110, 168, 254); }
footer.premium-footer .premium-footer__logo strong{ font-size: 1rem; font-weight: 800; color: rgb(110, 168, 254); letter-spacing: .01em; }
footer.premium-footer .premium-footer__tagline{ margin-top: 14px; color: rgba(255, 255, 255, .5); font-size: .88rem; line-height: 1.5; max-width: 320px; }
footer.premium-footer .premium-footer__socials{ display: flex; gap: 10px; margin-top: 18px; }
footer.premium-footer .premium-footer__socials a{
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(88, 101, 242, .12); border: 1px solid rgba(88, 101, 242, .35);
  border-radius: 10px; color: rgb(88, 101, 242);
}
footer.premium-footer .premium-footer__socials a:hover{ background: rgba(88, 101, 242, .22); color: #fff; }
footer.premium-footer .premium-footer__socials svg{ width: 18px; height: 18px; }
footer.premium-footer .premium-footer__col h4{ color: rgba(255, 255, 255, .4); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
footer.premium-footer .premium-footer__col ul{ display: flex; flex-direction: column; gap: 14px; }
footer.premium-footer .premium-footer__col a{ color: rgba(255, 255, 255, .7); font-size: .9rem; font-weight: 500; }
footer.premium-footer .premium-footer__col a:hover{ color: #fff; }

/* Badges de confianza: Entrega al instante · Pago seguro */
.premium-footer__trust-badges{ display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin-top: 16px; padding-top: 0; border-top: 0; flex-wrap: wrap; }
.premium-footer__trust-badges span{ display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .45); font-size: .75rem; font-weight: 600; }
.premium-footer__trust-badges span i{ color: var(--premium-blue-2); font-size: .8rem; }

/* Midrow: ayuda Discord (izq) + métodos de pago (der) en LA MISMA fila */
.premium-footer__midrow{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .08); flex-wrap: wrap; }
footer.premium-footer .premium-footer__help{ margin: 0; padding: 0; border: 0; }
footer.premium-footer .premium-footer__help-link{ display: flex; align-items: center; gap: 14px; }
footer.premium-footer .premium-footer__help-icon{
  width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: rgba(88, 101, 242, .14); color: rgb(88, 101, 242);
}
footer.premium-footer .premium-footer__help-icon svg{ width: 18px; height: 18px; }
footer.premium-footer .premium-footer__help-link small{ display: block; color: rgba(255, 255, 255, .55); font-size: .8rem; font-weight: 500; }
footer.premium-footer .premium-footer__help-link strong{ display: flex; align-items: center; gap: 7px; color: #fff; font-size: 1rem; font-weight: 600; }
footer.premium-footer .premium-footer__help-link strong i{ font-size: .75em; color: rgba(255, 255, 255, .5); }

footer.premium-footer .premium-footer__methods{ display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; }
footer.premium-footer .premium-footer__methods-label{ color: rgba(255, 255, 255, .35); font-size: .7rem; font-weight: 500; letter-spacing: .056em; white-space: nowrap; }
.premium-footer__methods .sa-payment-icon-list{ display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.premium-footer__methods .sa-payment-icon{ display: inline-flex; width: auto; height: 24px; }
.premium-footer__methods .sa-payment-icon img{ height: 24px; width: auto; max-width: 44px; object-fit: contain; display: block; }

/* Bottom: copyright + volver arriba (como Nivex) */
footer.premium-footer .premium-footer__bottom{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0; padding: 20px 0 26px; border-top: 1px solid rgba(255, 255, 255, .08); }
footer.premium-footer .premium-footer__copy{ color: rgba(255, 255, 255, .4); font-size: .82rem; }
footer.premium-footer .premium-footer__trust{ display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .4); font-size: .78rem; font-weight: 600; }
footer.premium-footer .premium-footer__trust i{ color: var(--premium-blue-2); }
footer.premium-footer .premium-footer__top{ display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .5); font-size: .82rem; font-weight: 600; }
footer.premium-footer .premium-footer__top:hover{ color: #fff; transform: none; }

/* Sin "Powered by SellAuth" (como Nivex) */
body > .sa-powered-by{ display: none !important; }

/* ============================================================
   HEADER — PÍLDORA FLOTANTE ESTILO NIVEX
   Pill navy 1180px radius 999 con borde azul y sombra suave,
   links azules, link activo en píldora azul, botones pill.
   ============================================================ */
header.component.premium-nav{
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  padding: 12px 16px !important;
}
.premium-nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, 100%) !important;
  height: 60px;
  margin: 0 auto;
  padding: 0 10px 0 18px !important;
  border: 1px solid rgba(21, 97, 213, .28) !important;
  border-radius: 999px !important;
  background: rgb(10, 23, 48) !important;
  box-shadow: 0 8px 30px rgba(4, 10, 26, .45);
}
.premium-nav__brand{ gap: 12px; }
.premium-nav__brand strong{
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
}
.premium-nav__links{ gap: 2px; }
.premium-nav__links a{
  padding: 9px 13px !important;
  border-radius: 999px !important;
  color: #6ea8fe !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
}
.premium-nav__links a:hover{
  color: #fff !important;
  background: rgba(255, 255, 255, .06) !important;
}
.premium-nav__links a.is-active{
  color: #fff !important;
  background: linear-gradient(135deg, #3b8bff, #1f6dff) !important;
  box-shadow: 0 4px 14px rgba(47, 126, 247, .35);
}
.premium-nav__links a > span{ display: none; }
.premium-nav__login{
  height: 38px;
  white-space: nowrap;
  border: 1px solid rgba(21, 97, 213, .35) !important;
  border-radius: 999px !important;
  background: rgba(21, 97, 213, .14) !important;
  color: #eaf2ff !important;
  font-size: .8rem !important;
}
.premium-nav__login:hover{
  background: rgba(21, 97, 213, .28) !important;
  color: #fff !important;
}
.premium-nav__cart{
  white-space: nowrap;
  border: 1px solid rgba(21, 97, 213, .35);
  border-radius: 999px;
  background: rgba(21, 97, 213, .14) !important;
  color: #eaf2ff;
}
.premium-nav__mobile{
  top: calc(100% + 6px);
  left: 16px;
  right: 16px;
  border: 1px solid rgba(21, 97, 213, .28);
  border-radius: 18px;
  background: rgb(10, 23, 48) !important;
  box-shadow: 0 18px 45px rgba(4, 10, 26, .6);
}
@media (max-width: 1024px){
  .premium-nav__inner{ padding: 0 8px 0 14px !important; }
}
/* Móvil: conservar el nombre de marca junto al logo (como Nivex).
   El login pasa al menú hamburguesa para liberar espacio. */
@media (max-width: 700px){
  .premium-nav__brand strong{ display: inline-block !important; font-size: .82rem !important; max-width: none !important; }
  .premium-nav__login{ display: none !important; }
}
@media (max-width: 820px){
  .premium-nav__brand strong{ display: inline-block !important; }
}

/* Grid del modal: permitir que los nombres con ellipsis recorten bien */
.product-group-modal__grid > *{ min-width: 0; }

/* EN LA PORTADA: el navbar flota sobre el hero (el arte sube hasta arriba,
   sin banda oscura detrás del navbar) */
  footer.premium-footer .premium-footer__grid{ flex-wrap: wrap; gap: 36px; }
  footer.premium-footer .premium-footer__brand{ max-width: none; flex: 1 1 100%; }
}
@media (max-width: 560px){
  footer.premium-footer .premium-footer__grid{ flex-direction: column; }
  .premium-footer__midrow{ flex-direction: column; align-items: flex-start; }
  footer.premium-footer .premium-footer__bottom{ justify-content: center; text-align: center; }
  .premium-footer::before{ font-size: 22vw; }
}

/* ============================================================
   ORDEN DEL CATÁLOGO (La API ignora sort_priority): CSS `order` —
   Fortnite primero, GTA V, Roblox, Minecraft. Cero JS: no pelea
   con la hidratación de Alpine y sobrevive a cualquier re-render.
   ============================================================ */
.flex.flex-wrap.gap-4 > [data-name*="fortnite" i]{ order: 1; }
.flex.flex-wrap.gap-4 > [data-name*="gta v" i]{ order: 2; }
.flex.flex-wrap.gap-4 > [data-name*="roblox" i]{ order: 3; }
.flex.flex-wrap.gap-4 > [data-name*="minecraft" i]{ order: 4; }
.flex.flex-wrap.gap-4 > :not([data-name]){ order: 9; }

/* Imágenes de cards: banners completos sin recorte (fit contain)
   con fondo degradado para que los bordes no se vean huecos */
.premium-product-card img{
  background: linear-gradient(160deg, rgba(16, 28, 52, .55), rgba(8, 14, 26, .9));
}

/* ============================================================
   MODAL DE GRUPO — CLON EXACTO NIVEX
   Título compacto, ✕ simple, tarjetas sin marco: el banner lleva
   borde azul brillante + glow (hover lo intensifica), nombre en
   una línea, precio azul y stock gris a la derecha.
   ============================================================ */
.product-group-modal__header::before{ content: none !important; }
.product-group-modal__header h3{
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  letter-spacing: -.015em !important;
  color: #fff !important;
}
.product-group-modal__close{
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: #93a1b4 !important;
  transition: color .2s, background .2s;
}
.product-group-modal__close:hover{
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}
.product-group-modal__surface{
  padding: 16px 18px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #0c1322, #080e19) !important;
}
.product-group-modal__grid .premium-product-card{
  overflow: visible;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.product-group-modal__grid .premium-product-card:before{ content: none !important; }
.product-group-modal__grid .premium-product-card:hover{
  transform: none !important;
  box-shadow: none !important;
}
.product-group-modal__grid .premium-product-card img{
  border: 2px solid rgba(64, 140, 255, .85) !important;
  border-radius: 9px !important;
  box-shadow: 0 0 16px rgba(45, 110, 255, .4), inset 0 0 22px rgba(45, 110, 255, .1) !important;
  transition: border-color .25s, box-shadow .25s;
}
.product-group-modal__grid .premium-product-card:hover img{
  border-color: rgba(130, 185, 255, 1) !important;
  box-shadow: 0 0 26px rgba(70, 140, 255, .6), inset 0 0 26px rgba(70, 140, 255, .16) !important;
}
.product-group-modal__grid .premium-product-card .text-left{ padding: 12px 2px 2px !important; }
.product-group-modal__grid .premium-product-card h3{
  max-width: 100%;
  overflow: hidden;
  font-weight: 750 !important;
  font-size: .93rem !important;
  letter-spacing: -.01em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-group-modal__grid .premium-product-card .lusive-card-row{ margin-top: 6px; }
.product-group-modal__grid .lusive-price strong{
  color: #4da3ff !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}
.product-group-modal__grid .lusive-stock{
  font-size: .68rem;
  font-weight: 600;
  color: #7e8ca0 !important;
}