/* =========================================================================
   Tienda NOVAX
   Este archivo solo lo carga tienda.php, asi que los ajustes de fondo global
   de abajo (grid, scan-line) afectan unicamente a la tienda.

   Criterio de color: base negra/carbon, texto blanco/gris, y el rojo NOVAX
   solo como acento (botones, estado activo, lineas finas, nodos, agotado).
   Nada de bloques ni halos rojos grandes: hay UNA luz roja suave en el hero
   y otra casi imperceptible en el catalogo.
   ========================================================================= */

:root{
  --st-line:#25252b;        /* borde de cards y cajas */
  --st-line-soft:#1d1d22;   /* divisores discretos */
  --st-dim:#7c7c86;         /* texto de apoyo (eyebrows, etiquetas) */
  --st-red-line:rgba(237,28,36,.55);
}

/* ---- Fondo global (solo en la tienda) ---------------------------------- */
/* El header compartido pinta un grid, una franja que barre la pantalla y
   nodos en rojo. Aca se pasan a neutro/tenue para que el rojo no bañe todo. */
.grid-bg{
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
}
.scan-line{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.012) 45%,rgba(255,255,255,.028) 50%,rgba(255,255,255,.012) 55%,transparent);
}
.circuit-edge{opacity:.28}

/* ---- Hero -------------------------------------------------------------- */
.store-hero{
  position:relative;overflow:hidden;text-align:center;padding:100px 0 52px;
  /* una sola luz roja, chica y arriba al centro */
  background:radial-gradient(ellipse 55% 75% at 50% 0,rgba(237,28,36,.10),transparent 68%),
             linear-gradient(180deg,#0f0f13,#09090b);
  border-bottom:1px solid var(--st-line-soft);
}
.store-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent);
}
.store-hero .wrap{position:relative}
.store-hero .eyebrow,.store-heading .eyebrow,.store-detail .eyebrow{color:var(--st-dim)}
.store-hero h1{font-size:clamp(2.4rem,7vw,5.4rem);line-height:1;margin-bottom:18px}
.store-hero h1 span{color:var(--red);text-shadow:0 0 28px rgba(237,28,36,.2)}
.store-hero p{max-width:720px;margin:auto;color:var(--muted);font-size:1.05rem}
.store-secure{display:block;margin-top:20px;color:#6b6b75;font-size:.65rem;letter-spacing:.12em}
.store-node{position:absolute;width:7px;height:7px;background:var(--red);opacity:.85;box-shadow:0 0 10px rgba(237,28,36,.45);transform:rotate(45deg)}
.store-node-a{left:7%;top:28%}
.store-node-b{right:9%;bottom:24%}

/* ---- Catalogo ---------------------------------------------------------- */
.store-section{
  padding:44px 0 96px;
  background:radial-gradient(ellipse 45% 40% at 92% 12%,rgba(237,28,36,.045),transparent 70%),#0a0a0c;
}
.store-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.store-heading>div{max-width:680px}
.store-heading h2{font-size:clamp(1.8rem,4vw,2.7rem)}
.store-heading p{margin-top:8px;color:var(--muted);max-width:560px}

/* ---- Buscador y filtros ------------------------------------------------ */
/* La caja ocupa el mismo ancho que el grid de productos (bordes alineados) y
   la barra de busqueda se estira para llenarla: ya no queda un hueco a la
   derecha. Los filtros van debajo, separados por una linea fina. */
.store-tools{
  margin-bottom:34px;padding:26px 28px 24px;
  border:1px solid var(--st-line);border-radius:8px;
  background:rgba(17,17,21,.72);backdrop-filter:blur(8px);
}
.store-search{display:grid;grid-template-columns:minmax(0,1fr) 50px;gap:10px;width:100%}
.store-search input{
  width:100%;min-width:0;height:50px;margin:0;padding:0 18px;
  background:#0b0b0e;border:1px solid #2f2f37;border-radius:6px;
  color:#fff;font:500 .95rem 'Inter',sans-serif;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.store-search input::placeholder{color:#8a8a94}
.store-search input:focus{border-color:rgba(237,28,36,.75);box-shadow:0 0 0 3px rgba(237,28,36,.1)}
.store-search button{
  width:50px;height:50px;display:grid;place-items:center;cursor:pointer;
  background:var(--red);border:1px solid var(--red);border-radius:6px;color:#fff;
  transition:transform .2s,filter .2s,box-shadow .2s;
}
.store-search button:hover,.store-search button:focus-visible{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 6px 18px rgba(237,28,36,.25)}
.store-search svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.store-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--st-line-soft)}
.store-filters span{
  display:inline-flex;align-items:center;min-height:36px;padding:7px 16px;
  border:1px solid #2a2a31;border-radius:999px;background:#101014;
  color:var(--muted);font-size:.74rem;white-space:nowrap;
}
/* estado activo: relleno rojo muy suave y borde rojo, sin sombra de brillo */
.store-filters .active{color:#fff;background:rgba(237,28,36,.14);border-color:rgba(237,28,36,.6)}

.store-divider{display:flex;align-items:center;gap:14px;margin:0 0 22px;color:#6a6a74;font-size:.62rem;letter-spacing:.1em}
.store-divider:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--st-red-line),rgba(255,255,255,.07) 35%,transparent)}

/* ---- Cards ------------------------------------------------------------- */
.store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.store-card{
  position:relative;display:flex;flex-direction:column;min-height:100%;padding:20px;
  background:linear-gradient(180deg,#141418,#0f0f12);border:1px solid var(--st-line);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.store-card.hud-frame:before,.store-card.hud-frame:after{opacity:.38}
.store-card:hover{transform:translateY(-4px);border-color:rgba(237,28,36,.45);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 22px rgba(237,28,36,.06)}
.store-card[hidden]{display:none}

.store-media{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:22px;
  background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.045),transparent 70%),#0d0d10;
  border:1px solid var(--st-line);
}
.store-media img{width:100%;height:100%;object-fit:cover}
.store-placeholder{color:#6a6a74;letter-spacing:.13em;font-size:.72rem}

.store-type{display:inline-flex;align-items:center;gap:8px;color:var(--st-dim);font-size:.7rem;letter-spacing:.08em}
.store-type:before{content:"";flex:none;width:6px;height:6px;background:var(--red)}
.store-card h3{font-size:1.3rem;line-height:1.18;margin:10px 0}
.store-card p{flex:1;color:var(--muted);font-size:.9rem}
.store-meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.store-meta span{padding:5px 8px;border:1px solid var(--st-line);color:var(--muted);font-size:.72rem}
.store-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--st-line)}
.store-price{font-family:'Chakra Petch',sans-serif;font-size:1.45rem}

.store-badges{position:absolute;z-index:2;top:23px;left:23px;display:flex;gap:5px}
.store-badges b{font:600 .62rem 'JetBrains Mono',monospace;padding:4px 7px;color:#fff;background:rgba(10,10,12,.92);border:1px solid #3a3a43}
.store-badges .danger{background:var(--red);border-color:var(--red)}

.stock-badge{margin:14px 0 16px;color:#ddd;font:600 .78rem 'JetBrains Mono',monospace}
.stock-badge:before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;vertical-align:1px;background:currentColor;box-shadow:0 0 8px currentColor}
.stock-badge.infinite,.stock-badge.available{width:max-content;padding:8px 11px;border:1px solid rgba(70,220,120,.25);border-radius:999px;color:#46dc78}
.stock-badge.infinite{font-size:.86rem}
.stock-badge.infinite:first-letter{font-size:1.05rem}
.stock-badge.low{width:max-content;padding:8px 11px;border:1px solid rgba(255,184,77,.25);border-radius:999px;color:#ffb84d}
.stock-badge.sold-out{width:max-content;padding:7px 11px;border-radius:999px;color:#fff;background:var(--red)}

/* Panel final: neutro, con una linea roja fina como unico acento. */
.store-future{margin-top:30px;padding:18px 20px;border:1px solid var(--st-line-soft);border-left:2px solid rgba(237,28,36,.7);background:rgba(255,255,255,.022);color:var(--muted)}
.store-future strong{color:#fff}
.store-empty{text-align:center;border:1px solid var(--border);padding:48px;color:var(--muted)}

/* ---- Detalle de producto ---------------------------------------------- */
.store-detail{padding:76px 0;background:radial-gradient(ellipse 50% 45% at 85% 10%,rgba(237,28,36,.05),transparent 70%)}
.store-detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.store-detail h1{font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.02;margin:12px 0 18px}
.store-detail-copy>p{color:var(--muted);font-size:1.05rem}
.store-detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.store-description{margin-top:34px;padding-top:26px;border-top:1px solid var(--border);color:var(--muted)}

/* ---- Utilidades -------------------------------------------------------- */
.btn-disabled{opacity:.45;pointer-events:none}
.discount-form{padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:18px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Responsive -------------------------------------------------------- */
@media(max-width:900px){
  .store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .store-detail-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .store-tools{padding:18px}
  .store-filters{gap:8px;margin-top:18px;padding-top:16px}
  .store-node{display:none}
}
@media(max-width:620px){
  .store-grid{grid-template-columns:1fr}
  .store-heading{align-items:start;flex-direction:column}
  .store-bottom{align-items:flex-start;flex-direction:column}
}