/* ============================================================
   NasusRP Account Cards - Styles
   Todo scopeado bajo .nasus-acc para no romper el tema
   ============================================================ */

/* ROMPER LOS FLOATS DEL .PRODUCT
   WooCommerce default (woocommerce-layout.css) hace:
     .woocommerce div.product div.images { width: 48%; float: left }
     .woocommerce div.product div.summary { width: 48%; float: right }
   Mi tarjeta queda como hermano DESPUÉS del summary (también atrapada por los floats).
   Necesitamos clear:both + width 100% + alta especificidad para anular el float. */

/* MÁXIMA ESPECIFICIDAD: 4 niveles + body + clase + ID donde sea posible */
body.single-product .woocommerce div.product .nasus-acc-wrap,
body.single-product .woocommerce div.product .nasus-acc-break,
body.single-product div.product > .nasus-acc-wrap,
body.single-product div.product > .nasus-acc-break,
body.single-product #nx-content .nasus-acc-wrap,
body.single-product #nx-content .nasus-acc-break,
.woocommerce div.product .nasus-acc-wrap,
.woocommerce div.product .nasus-acc-break,
.nasus-acc-wrap,
.nasus-acc-break{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  clear:both !important;
  display:block !important;
  position:static !important;
  margin:30px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-sizing:border-box !important;
  /* Para flex containers */
  flex:1 0 100% !important;
  flex-basis:100% !important;
  /* Para grid containers */
  grid-column:1 / -1 !important;
  /* NO usar order:99 — eso la mandaría DESPUÉS de related products.
     order:0 mantiene el orden natural del DOM: imagen → summary → tarjeta → relacionados */
  order:0 !important;
}

/* Cuando .nasus-acc-break está dentro de .nasus-acc-wrap, no duplicar margen */
.nasus-acc-wrap .nasus-acc-break{
  margin:0 !important;
}

/* Hack adicional: si el padre es flex/grid, forzar wrap para que la tarjeta vaya a nueva fila */
.woocommerce div.product{
  flex-wrap:wrap !important; /* solo aplica si el tema usó flex */
}

/* La tarjeta interna ocupa el ancho del wrapper (que ya rompió los floats) */
.nasus-acc{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
  clear:both !important;
  float:none !important;
  box-sizing:border-box !important;
  position:relative;
  margin:0 !important;
}

/* ============================================================
   ESTADO VENDIDA / AGOTADA
   Cuando el producto tiene stock 0 / outofstock, mostrar banner
   "VENDIDA" prominente arriba y atenuar el resto de la tarjeta.
   ============================================================ */
.nasus-acc.is-sold-out{
  position:relative;
}

/* Atenuar todo el contenido bajo el banner para que se note al toque */
.nasus-acc.is-sold-out > *:not(.nasus-acc__sold-banner){
  filter:grayscale(.7) brightness(.55);
  opacity:.55;
  pointer-events:none;        /* desactiva hover/click en items de la tarjeta */
  user-select:none;
  transition:filter .2s ease, opacity .2s ease;
}

/* El banner SIEMPRE arriba del todo */
.nasus-acc__sold-banner{
  position:relative;
  margin:-18px -18px 18px;     /* compensa el padding 18px del card */
  padding:24px 20px;
  background:linear-gradient(135deg,
    rgba(255,51,102,.12) 0%,
    rgba(15,15,25,.95) 50%,
    rgba(255,51,102,.12) 100%);
  border:2px solid var(--na-pink);
  border-left:none;
  border-right:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  overflow:hidden;
  z-index:5;
}
/* Líneas diagonales tipo "police tape" en el fondo */
.nasus-acc__sold-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 18px,
    rgba(255,51,102,.06) 18px,
    rgba(255,51,102,.06) 36px
  );
  pointer-events:none;
  z-index:0;
}
.nasus-acc__sold-stamp,
.nasus-acc__sold-cta{
  position:relative;
  z-index:1;
}
.nasus-acc__sold-stamp{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.nasus-acc__sold-icon{
  font-size:24px;
  line-height:1;
  margin-bottom:4px;
  filter:drop-shadow(0 0 8px rgba(255,51,102,.6));
}
.nasus-acc__sold-text{
  font-family:var(--na-fh);
  font-size:42px;
  line-height:1;
  letter-spacing:6px;
  color:var(--na-pink);
  text-shadow:
    0 0 20px rgba(255,51,102,.7),
    0 2px 0 rgba(0,0,0,.4);
  /* Pequeña rotación tipo stamp */
  display:inline-block;
  transform:rotate(-2deg);
  margin:2px 0;
  /* Borde tipo sello con líneas */
  border:3px solid var(--na-pink);
  padding:4px 18px;
  background:rgba(7,7,12,.6);
}
.nasus-acc__sold-sub{
  font-family:var(--na-fm);
  font-size:11px;
  color:var(--na-txt-dim);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-top:8px;
}
.nasus-acc__sold-cta{
  display:flex;
  align-items:center;
}
.nasus-acc__sold-link{
  display:inline-block;
  padding:12px 20px;
  background:var(--na-cyan);
  color:var(--na-bg) !important;
  font-family:var(--na-fm);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-decoration:none !important;
  border:2px solid var(--na-cyan);
  transition:all .2s ease;
  white-space:nowrap;
  box-shadow:0 4px 16px -4px rgba(0,240,255,.4);
}
.nasus-acc__sold-link:hover{
  background:transparent;
  color:var(--na-cyan) !important;
  box-shadow:0 6px 20px -4px rgba(0,240,255,.6);
  transform:translateY(-2px);
}

/* Mobile: banner apilado en columna */
@media (max-width: 600px){
  .nasus-acc__sold-banner{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    padding:20px 16px;
  }
  .nasus-acc__sold-stamp{
    align-items:center;
  }
  .nasus-acc__sold-text{
    font-size:34px;
    letter-spacing:4px;
  }
  .nasus-acc__sold-link{
    text-align:center;
  }
}

/* ===== ESTADO RESERVADA (alguien está pagando, no es definitivo) ===== */
/* Override: amarillo/dorado en lugar de rojo, con animación de "tic-tac" */
.nasus-acc.is-reserved .nasus-acc__sold-banner{
  background:linear-gradient(135deg,
    rgba(255,200,87,.15) 0%,
    rgba(15,15,25,.95) 50%,
    rgba(255,200,87,.15) 100%);
  border-color:var(--na-gold);
}
.nasus-acc.is-reserved .nasus-acc__sold-banner::before{
  background-image:repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 18px,
    rgba(255,200,87,.08) 18px,
    rgba(255,200,87,.08) 36px
  );
}
.nasus-acc.is-reserved .nasus-acc__sold-icon{
  filter:drop-shadow(0 0 8px rgba(255,200,87,.7));
  animation:nasusReservedPulse 1.5s ease-in-out infinite;
}
@keyframes nasusReservedPulse{
  0%, 100%{ transform:scale(1);   opacity:1 }
  50%     { transform:scale(1.15); opacity:.7 }
}
.nasus-acc.is-reserved .nasus-acc__sold-text{
  color:var(--na-gold);
  border-color:var(--na-gold);
  text-shadow:
    0 0 20px rgba(255,200,87,.7),
    0 2px 0 rgba(0,0,0,.4);
}
.nasus-acc.is-reserved .nasus-acc__sold-sub{
  color:var(--na-gold);
  opacity:.85;
}

/* Atenuación más suave en reservada (porque podría volver a estar disponible) */
.nasus-acc.is-reserved > *:not(.nasus-acc__sold-banner){
  filter:grayscale(.4) brightness(.7);
  opacity:.65;
}

/* Si fue reubicada por JS (data-relocated="1"), agregar separación visual */
.nasus-acc[data-relocated="1"]{
  margin-top:20px !important;
  animation:nasusFadeIn .4s ease both;
}
@keyframes nasusFadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* Limitar altura de las secciones de items para que no se vean gigantes.
   Si hay muchos items, scroll interno en lugar de estirar el card hacia abajo. */
.nasus-acc__section .nasus-acc__grid-champs,
.nasus-acc__section .nasus-acc__grid-skins,
.nasus-acc__section .nasus-acc__grid-icons,
.nasus-acc__section .nasus-acc__grid-wards,
.nasus-acc__section .nasus-acc__grid-emotes,
.nasus-acc__section .nasus-acc__grid-misc{
  max-height:480px;
  overflow-y:auto;
  padding-right:6px;
}
/* Scrollbar minimalista */
.nasus-acc__section [class^="nasus-acc__grid-"]::-webkit-scrollbar{width:6px}
.nasus-acc__section [class^="nasus-acc__grid-"]::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
.nasus-acc__section [class^="nasus-acc__grid-"]::-webkit-scrollbar-thumb{background:rgba(0,240,255,.3);border-radius:3px}
.nasus-acc__section [class^="nasus-acc__grid-"]::-webkit-scrollbar-thumb:hover{background:rgba(0,240,255,.6)}

.nasus-acc{
  --na-bg:#07070c;
  --na-bg-2:#0d0d16;
  --na-surf:#11111c;
  --na-surf-2:#171724;
  --na-line:#1f1f2e;
  --na-line-2:#2a2a3e;
  --na-cyan:#00f0ff;
  --na-purple:#b983ff;
  --na-pink:#ff3366;
  --na-gold:#ffc857;
  --na-txt:#e8e8f0;
  --na-txt-dim:#a8a8bc;
  --na-mute:#6a6a82;
  --na-fh:'Anton',sans-serif;
  --na-fb:'Space Grotesk',sans-serif;
  --na-fm:'JetBrains Mono',ui-monospace,monospace;

  background:var(--na-bg);
  color:var(--na-txt);
  font-family:var(--na-fb);
  font-size:13px;
  line-height:1.5;
  padding:18px;
  border:1px solid var(--na-line);
  position:relative;
  overflow:hidden;
  margin:16px auto;
  background-image:
    radial-gradient(600px 300px at 80% -10%,rgba(0,240,255,.06),transparent 60%),
    radial-gradient(500px 280px at -10% 100%,rgba(185,131,255,.05),transparent 60%);
}
.nasus-acc *,
.nasus-acc *::before,
.nasus-acc *::after{box-sizing:border-box}

/* ===== HERO ===== */
.nasus-acc__hero{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:14px;
  margin-bottom:18px;
}
.nasus-acc__hero-main{
  background:linear-gradient(135deg,var(--na-surf),var(--na-surf-2));
  border:1px solid var(--na-line);
  padding:18px 20px;
  position:relative;
  overflow:hidden;
}
.nasus-acc__hero-main::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--na-cyan),var(--na-purple),var(--na-pink));
}
.nasus-acc__hero-main::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:180px; height:180px;
  background:radial-gradient(circle,rgba(0,240,255,.08),transparent 70%);
  pointer-events:none;
}
.nasus-acc__kicker{
  font-family:var(--na-fm);
  font-size:10px;
  color:var(--na-cyan);
  letter-spacing:2.5px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.nasus-acc__title{
  font-family:var(--na-fh) !important;
  font-size:30px !important;
  line-height:1 !important;
  letter-spacing:1.5px !important;
  margin:0 0 10px !important;
  text-transform:uppercase;
  background:linear-gradient(135deg,#fff 30%,var(--na-cyan) 70%,var(--na-purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
}
.nasus-acc__sub{
  color:var(--na-txt-dim) !important;
  margin:0 0 18px !important;
  max-width:520px;
  font-size:14px;
  line-height:1.6;
}
.nasus-acc__sub b{color:var(--na-cyan)}
.nasus-acc__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.nasus-acc__tag{
  font-family:var(--na-fm);
  font-size:10px;
  padding:5px 10px;
  background:var(--na-bg);
  border:1px solid var(--na-line-2);
  color:var(--na-txt-dim);
  letter-spacing:1px;
  text-transform:uppercase;
}
.nasus-acc__tag--cyan{
  border-color:var(--na-cyan);
  color:var(--na-cyan);
  background:rgba(0,240,255,.06);
}
.nasus-acc__tag--purple{
  border-color:var(--na-purple);
  color:var(--na-purple);
  background:rgba(185,131,255,.06);
}
.nasus-acc__tag--pink{
  border-color:var(--na-pink);
  color:var(--na-pink);
  background:rgba(255,51,102,.06);
}
.nasus-acc__tag--gold{
  border-color:var(--na-gold);
  color:var(--na-gold);
  background:rgba(255,200,87,.08);
  /* Destacar el badge de garantía con un sutil glow */
  box-shadow:0 0 0 0 rgba(255,200,87,.3);
  animation:nasusGoldPulse 2.5s ease-in-out infinite;
}
@keyframes nasusGoldPulse{
  0%, 100%{box-shadow:0 0 0 0 rgba(255,200,87,.3)}
  50%{box-shadow:0 0 0 4px rgba(255,200,87,0)}
}

.nasus-acc__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--na-line);
  border:1px solid var(--na-line);
}
.nasus-acc__stat{
  background:var(--na-surf);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nasus-acc__stat-lbl{
  font-family:var(--na-fm);
  font-size:10px;
  color:var(--na-mute);
  letter-spacing:2px;
  text-transform:uppercase;
}
.nasus-acc__stat-val{
  font-family:var(--na-fh);
  font-size:32px;
  line-height:1;
  color:var(--na-cyan);
}
.nasus-acc__stat--rp .nasus-acc__stat-val{color:var(--na-gold)}
.nasus-acc__stat--be .nasus-acc__stat-val{color:var(--na-purple)}
.nasus-acc__stat--full{grid-column:1/-1}
.nasus-acc__stat-sub{
  font-family:var(--na-fm);
  font-size:10px;
  color:var(--na-mute);
  letter-spacing:1px;
}

/* ===== TABS ===== */
.nasus-acc__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin-bottom:22px;
  padding:4px;
  border:1px solid var(--na-line);
  background:rgba(17,17,28,.6);
}
.nasus-acc__tab{
  background:transparent;
  color:var(--na-txt-dim);
  border:1px solid transparent;
  padding:10px 16px;
  cursor:pointer;
  font:600 11px/1 var(--na-fb);
  letter-spacing:1.4px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:all .18s ease;
  font-family:var(--na-fb);
}
.nasus-acc__tab:hover{
  color:var(--na-txt);
  background:var(--na-surf-2);
}
.nasus-acc__tab--active{
  color:var(--na-bg) !important;
  background:var(--na-cyan) !important;
  border-color:var(--na-cyan);
  box-shadow:3px 3px 0 var(--na-pink);
}
.nasus-acc__pill{
  background:rgba(255,255,255,.12);
  color:inherit;
  font-family:var(--na-fm);
  font-size:10px;
  padding:2px 6px;
  border-radius:10px;
  font-weight:500;
}
.nasus-acc__tab--active .nasus-acc__pill{
  background:rgba(7,7,12,.2);
  color:var(--na-bg);
}

/* ===== SECTIONS ===== */
.nasus-acc__section{display:none}
.nasus-acc__section--active{
  display:block;
  animation:nasusFadeUp .3s ease both;
}
@keyframes nasusFadeUp{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}

.nasus-acc__sec-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--na-line);
  flex-wrap:wrap;
}
.nasus-acc__sec-head h3{
  font-family:var(--na-fh) !important;
  font-size:24px !important;
  letter-spacing:2px !important;
  text-transform:uppercase;
  margin:0 !important;
  color:var(--na-txt) !important;
}
.nasus-acc__count{
  font-family:var(--na-fm);
  font-size:11px;
  color:var(--na-cyan);
  letter-spacing:1.5px;
}
.nasus-acc__legend{
  margin-left:auto;
  display:flex;
  gap:12px;
  font-family:var(--na-fm);
  font-size:10px;
  color:var(--na-mute);
  letter-spacing:1px;
  text-transform:uppercase;
}
.nasus-acc__legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.nasus-acc__legend i{
  display:inline-block;
  width:8px; height:8px;
}

/* ===== GRID CHAMPIONS ===== */
.nasus-acc__grid-champs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(85px,1fr));
  gap:6px;
}
.nasus-acc__champ{
  background:var(--na-surf);
  border:1px solid var(--na-line);
  padding:5px;
  text-align:center;
  transition:all .18s ease;
  position:relative;
  overflow:hidden;
}
.nasus-acc__champ:hover{
  transform:translateY(-2px);
  border-color:var(--na-cyan);
  box-shadow:0 6px 16px -6px rgba(0,240,255,.5);
}
.nasus-acc__img{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--na-bg-2);
  margin-bottom:5px;
  border:1px solid var(--na-line-2);
}
.nasus-acc__img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.nasus-acc__champ:hover .nasus-acc__img img{transform:scale(1.08)}
.nasus-acc__champ-name{
  font-size:10px;
  font-weight:600;
  color:var(--na-txt);
  letter-spacing:.3px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== GRID SKINS ===== */
.nasus-acc__grid-skins{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px;
}
.nasus-acc__skin{
  background:var(--na-surf);
  border:1px solid var(--na-line);
  overflow:hidden;
  position:relative;
  transition:all .2s ease;
}
.nasus-acc__skin:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
}
.nasus-acc__skin-img{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--na-bg-2);
}
.nasus-acc__skin-img img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.nasus-acc__skin:hover .nasus-acc__skin-img img{transform:scale(1.06)}
.nasus-acc__skin-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(7,7,12,.95) 0%,rgba(7,7,12,.3) 50%,transparent 100%);
  pointer-events:none;
}
.nasus-acc__skin-info{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:10px 12px;
  z-index:2;
}
.nasus-acc__skin-name{
  font-weight:700;
  font-size:13px;
  color:#fff;
  line-height:1.2;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  letter-spacing:.3px;
}
.nasus-acc__skin-champ{
  font-family:var(--na-fm);
  font-size:9px;
  color:var(--na-txt-dim);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:3px;
}
.nasus-acc__skin-rarity{
  position:absolute;
  top:8px; right:8px;
  z-index:3;
  font-family:var(--na-fm);
  font-size:9px;
  padding:3px 7px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:var(--na-bg);
  border:1px solid var(--na-line-2);
  color:var(--na-txt-dim);
  font-weight:700;
}
.nasus-acc__skin--legendary{border-color:var(--na-pink)}
.nasus-acc__skin--legendary .nasus-acc__skin-rarity{
  background:var(--na-pink);
  color:var(--na-bg);
  border-color:var(--na-pink);
  box-shadow:0 0 12px rgba(255,51,102,.5);
}
.nasus-acc__skin--epic{border-color:var(--na-cyan)}
.nasus-acc__skin--epic .nasus-acc__skin-rarity{
  background:var(--na-cyan);
  color:var(--na-bg);
  border-color:var(--na-cyan);
}
.nasus-acc__skin--ultimate{border-color:var(--na-purple)}
.nasus-acc__skin--ultimate .nasus-acc__skin-rarity{
  background:var(--na-purple);
  color:var(--na-bg);
  border-color:var(--na-purple);
}

/* ===== GRID ICONS / WARDS / EMOTES ===== */
.nasus-acc__grid-icons,
.nasus-acc__grid-wards,
.nasus-acc__grid-emotes{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:6px;
}
.nasus-acc__icon{
  background:var(--na-surf);
  border:1px solid var(--na-line);
  padding:5px;
  text-align:center;
  transition:all .15s ease;
}
.nasus-acc__icon:hover{
  border-color:var(--na-purple);
  transform:translateY(-2px);
  box-shadow:0 6px 16px -8px rgba(185,131,255,.5);
}
.nasus-acc__icon .nasus-acc__img{
  margin-bottom:4px;
}
.nasus-acc__icon-name{
  font-size:10px;
  color:var(--na-txt-dim);
  line-height:1.25;
  font-family:var(--na-fm);
  letter-spacing:.2px;
}
.nasus-acc__icon--legendary{border-color:var(--na-pink)}
.nasus-acc__icon--legendary .nasus-acc__icon-name{color:var(--na-pink)}
.nasus-acc__icon--epic{border-color:var(--na-cyan)}
.nasus-acc__icon--epic .nasus-acc__icon-name{color:var(--na-cyan)}
.nasus-acc__icon--ultimate{border-color:var(--na-purple)}
.nasus-acc__icon--ultimate .nasus-acc__icon-name{color:var(--na-purple)}

/* ===== GRID MISC (chromas/TFT) ===== */
.nasus-acc__grid-misc{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px;
}
.nasus-acc__misc{
  background:var(--na-surf);
  border:1px solid var(--na-line);
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:all .15s ease;
}
.nasus-acc__misc:hover{
  border-color:var(--na-cyan);
  transform:translateX(3px);
  box-shadow:-3px 3px 0 var(--na-pink);
}
.nasus-acc__misc--legendary{
  border-color:var(--na-pink) !important;
}
.nasus-acc__misc--legendary .nasus-acc__misc-ico{
  color:var(--na-pink);
}
.nasus-acc__misc-ico{
  width:38px; height:38px;
  flex-shrink:0;
  background:var(--na-bg-2);
  border:1px solid var(--na-line-2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--na-cyan);
  font-size:18px;
}
.nasus-acc__misc-label{
  font-size:13px;
  font-weight:500;
  color:var(--na-txt);
  line-height:1.3;
}

/* ===== TFT BLOCK ===== */
.nasus-acc__tft-block{
  padding:20px;
  border:1px solid var(--na-purple);
  background:linear-gradient(135deg,rgba(185,131,255,.06),transparent);
  position:relative;
}
.nasus-acc__tft-block::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0; width:3px;
  background:var(--na-purple);
}
.nasus-acc__tft-block h4{
  font-family:var(--na-fh) !important;
  font-size:16px !important;
  letter-spacing:2px !important;
  color:var(--na-purple) !important;
  margin:0 0 12px !important;
  text-transform:uppercase;
}
.nasus-acc__tft-block h4:not(:first-child){margin-top:20px !important}
.nasus-acc__tft-note{
  font-family:var(--na-fm);
  font-size:12px;
  color:var(--na-mute);
  margin:0;
  letter-spacing:.5px;
}

/* ===== IMG LOADING / FALLBACK ===== */
.nasus-acc__img--loading{
  background:linear-gradient(90deg,var(--na-bg-2) 0%,var(--na-surf-2) 50%,var(--na-bg-2) 100%);
  background-size:200% 100%;
  animation:nasusShimmer 1.5s infinite;
}
@keyframes nasusShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.nasus-acc__img-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%; height:100%;
  font-family:var(--na-fh);
  color:var(--na-mute);
  letter-spacing:2px;
  font-size:18px;
}

/* ===== BUSCADOR INTERNO ===== */
.nasus-acc__search-bar{
  position:relative;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.nasus-acc__search-input{
  flex:1;
  background:#11111d;
  border:1px solid #1f1f2e;
  color:#e8e8f0;
  padding:11px 14px 11px 14px;
  font-size:14px;
  font-family:'Space Grotesk',sans-serif;
  border-radius:4px;
  outline:none;
  transition:all .15s ease;
  width:100%;
}
.nasus-acc__search-input:focus{
  border-color:#00f0ff;
  background:#0a0a14;
  box-shadow:0 0 0 1px #00f0ff;
}
.nasus-acc__search-input::placeholder{color:#5a5a70}
.nasus-acc__search-info{
  font-size:12px;
  color:#7a7a90;
  font-family:'JetBrains Mono',monospace;
  white-space:nowrap;
}
.nasus-acc__search-clear{
  background:rgba(255,51,102,.15);
  border:1px solid #ff3366;
  color:#ff3366;
  width:32px;
  height:32px;
  border-radius:3px;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.nasus-acc__search-clear:hover{
  background:#ff3366;
  color:#fff;
}
.nasus-acc__no-results{
  text-align:center;
  padding:30px 20px;
  color:#7a7a90;
  font-size:14px;
  font-style:italic;
}

/* ===== MOBILE ===== */
@media (max-width:768px){
  .nasus-acc{padding:16px}
  .nasus-acc__hero{grid-template-columns:1fr; gap:14px}
  .nasus-acc__title{font-size:30px !important}
  .nasus-acc__hero-main{padding:18px}
  .nasus-acc__stat-val{font-size:24px}
  .nasus-acc__sec-head h3{font-size:18px !important}
  .nasus-acc__tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .nasus-acc__tab{flex:0 0 auto}
  .nasus-acc__grid-champs{grid-template-columns:repeat(auto-fill,minmax(75px,1fr))}
  .nasus-acc__grid-icons,
  .nasus-acc__grid-wards,
  .nasus-acc__grid-emotes{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
  .nasus-acc__grid-skins{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .nasus-acc__grid-misc{grid-template-columns:1fr}
  .nasus-acc__legend{margin-left:0; flex-basis:100%}
}

/* ===== RESET para no heredar estilos del tema ===== */
.nasus-acc h2,
.nasus-acc h3,
.nasus-acc h4,
.nasus-acc p,
.nasus-acc span,
.nasus-acc div{
  font-family:inherit;
}
.nasus-acc button{
  font-family:inherit;
}