/* =========================================================
   Woo Product Blaster — style.css
   Modo compacto REAL: reduce el tamaño físico de toda la carta
   (caja + contenido), manteniendo proporciones y estética.
   =========================================================*/

/* Retro font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --arcade-magenta:#ff00ff;
  --arcade-cyan:#00e4ff;
  --arcade-lime:#aaff00;
  --arcade-blue:#0070d1;
  --arcade-purple:#6b00ff;
  --dark-bg:#0d0d0d;
  --light-bg:#212121;
  --panel-bg:#1a1a1a;
  --text-light:#f2f2f2;
  --text-shadow:rgba(0,0,0,0.8);
  --font-main:'Press Start 2P',monospace;
  --font-ui:'Segoe UI', Tahoma, sans-serif;

  /* Escala global de la tarjeta: 0.70–1.00 */
  --card-scale: 0.85;

  /* Tamaños base (se multiplican por --card-scale) */
  --gap-base: 2rem;
  --grid-pad-base: 2rem;
  --vendor-pad-base: 0.8rem;
  --img-pad-base: 0.75rem;
  --radius-base: 12px;
  --title-size-base: 1.25rem;
  --desc-size-base: 0.95rem;
  --price-size-base: 1.35rem;
  --btn-size-base: 0.8rem;
  --qty-size-base: 0.9rem;
  --control-pad-base: 0.8rem;
  --filters-pad-y-base: 1rem;
  --filters-pad-x-base: 2rem;

  /* Sombras (se suavizan en compacto) */
  --shadow-s: 0 0 8px;
  --shadow-l: 0 6px 18px;
}

/* Wrapper con fondo animado */
.wpblaster-wrapper{
  position:relative;
  padding:calc(var(--grid-pad-base) * var(--card-scale));
  border-radius:calc(var(--radius-base) * var(--card-scale));
  overflow:visible;
  z-index:0;
  background:linear-gradient(45deg,#0098db 0%,#0070D1 25%,#e60012 50%,#00aaff 75%,#ff00ff 100%);
  background-size:500% 500%;
  animation:bgGradientShift 12s ease infinite;
}

@keyframes bgGradientShift{
  0%{background-position:0% 50%}
  25%{background-position:50% 100%}
  50%{background-position:100% 50%}
  75%{background-position:50% 0%}
  100%{background-position:0% 50%}
}

/* Grid: gap y padding también se comprimen */
.wpblaster-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(var(--gap-base) * var(--card-scale));
  padding:calc(var(--grid-pad-base) * var(--card-scale));
  align-items:start;
}

/* Tarjeta producto: caja física más pequeña */
.wpblaster-item{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:calc(var(--radius-base) * var(--card-scale));
  overflow:hidden;
  background: linear-gradient(135deg,var(--arcade-blue),var(--arcade-magenta)),
              repeating-linear-gradient(0deg,rgba(255,255,255,0.03) 0px,rgba(255,255,255,0.03) 1px,transparent 1px,transparent 4px);
  background-blend-mode:overlay;
  box-shadow:0 0 calc(10px * var(--card-scale)) var(--arcade-cyan),
             0 calc(6px * var(--card-scale)) calc(20px * var(--card-scale)) rgba(0,0,0,0.7);
  transition:transform .3s ease,box-shadow .3s ease;
}

.wpblaster-item:hover{
  transform:translateY(calc(-8px * var(--card-scale)));
  box-shadow:0 0 calc(20px * var(--card-scale)) var(--arcade-cyan),
             0 calc(10px * var(--card-scale)) calc(30px * var(--card-scale)) rgba(0,0,0,0.8);
}

/* Vendor: barra superior (no absoluta) */
.wpblaster-vendor{
  order:1;
  width:100%;
  padding:calc(var(--vendor-pad-base) * var(--card-scale)) 0;
  background:var(--panel-bg);
  color:var(--arcade-magenta);
  font-family:var(--font-main);
  font-size:calc(1.05rem * var(--card-scale));
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-shadow:0 0 calc(5px * var(--card-scale)) var(--arcade-magenta),
               0 0 calc(10px * var(--card-scale)) var(--arcade-magenta),
               0 0 calc(20px * var(--card-scale)) var(--arcade-magenta);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

/* Imagen dinámica sin min/max-height: la imagen decide la altura */
.wpblaster-img-wrap {
  order:2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--light-bg);
  overflow:hidden;
  padding:calc(var(--img-pad-base) * var(--card-scale));
  width:100%;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.wpblaster-img {
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
  border-radius:calc(8px * var(--card-scale));
  transition:transform .35s ease;
  margin:auto;
}

.wpblaster-item:hover .wpblaster-img {
  transform:scale(1.03);
}

/* Placeholder si no hay imagen */
.wpblaster-img--placeholder{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.25);
  font-size:calc(.95rem * var(--card-scale));
  background:linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.22));
  border-radius:calc(8px * var(--card-scale));
  aspect-ratio: 4 / 3;
}

/* Texto y controles: todo escala su tamaño físico */
.wpblaster-title{
  order:3;
  padding:calc(.8rem * var(--card-scale)) calc(1rem * var(--card-scale)) calc(.4rem * var(--card-scale));
  font-family:var(--font-main);
  font-size:calc(var(--title-size-base) * var(--card-scale));
  color:var(--arcade-cyan);
  text-shadow:0 0 calc(5px * var(--card-scale)) var(--arcade-cyan),
              0 0 calc(10px * var(--card-scale)) var(--arcade-cyan);
}

.wpblaster-desc{
  order:4;
  padding:0 calc(1rem * var(--card-scale)) calc(.6rem * var(--card-scale));
  font-size:calc(var(--desc-size-base) * var(--card-scale));
  color:var(--text-light);
  opacity:.9;
  line-height:1.3;
}

.wpblaster-price{
  order:5;
  padding:0 calc(1rem * var(--card-scale)) calc(.6rem * var(--card-scale));
  font-size:calc(var(--price-size-base) * var(--card-scale));
  font-family:var(--font-main);
  color:var(--arcade-lime);
  text-shadow:0 0 calc(5px * var(--card-scale)) var(--arcade-lime),
              0 0 calc(15px * var(--card-scale)) var(--arcade-lime);
  animation:neon-pulse 1.5s infinite alternate;
}

@keyframes neon-pulse{
  from{text-shadow:0 0 5px var(--arcade-lime),0 0 10px var(--arcade-lime)}
  to{text-shadow:0 0 15px var(--arcade-lime),0 0 25px var(--arcade-lime)}
}

.wpblaster-controls{
  order:6;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:calc(8px * var(--card-scale));
  padding:calc(var(--control-pad-base) * var(--card-scale)) calc(1rem * var(--card-scale));
  background:var(--panel-bg);
  border-top:2px solid rgba(255,255,255,0.06);
}

.wpblaster-qty{
  min-width:calc(56px * var(--card-scale));
  max-width:calc(120px * var(--card-scale));
  width:auto;
  padding:calc(.25rem * var(--card-scale)) calc(.4rem * var(--card-scale));
  font-size:calc(var(--qty-size-base) * var(--card-scale));
  font-family:var(--font-main);
  text-align:center;
  border:2px solid var(--arcade-cyan);
  border-radius:calc(6px * var(--card-scale));
  background:rgba(0,0,0,0.45);
  color:var(--text-light);
  box-sizing:border-box;
  appearance:textfield;
}

.wpblaster-add-to-cart{
  background:var(--arcade-magenta);
  color:var(--text-light);
  font-family:var(--font-main);
  font-size:calc(var(--btn-size-base) * var(--card-scale));
  padding:calc(.5rem * var(--card-scale)) calc(.8rem * var(--card-scale));
  border:2px solid var(--arcade-cyan);
  border-radius:calc(6px * var(--card-scale));
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
}

.wpblaster-add-to-cart:hover{
  transform:translateY(calc(-3px * var(--card-scale)));
  box-shadow:0 0 calc(8px * var(--card-scale)) var(--arcade-magenta),
             0 calc(4px * var(--card-scale)) calc(12px * var(--card-scale)) rgba(0,0,0,0.6);
}

/* Carrito flotante (sin cambios de comportamiento, leve ajuste visual) */
#wpblaster-floating-cart{
  position:fixed;
  bottom:20px;
  right:20px;
  width:calc(80px * var(--card-scale));
  height:calc(80px * var(--card-scale));
  background:var(--panel-bg);
  border:3px solid var(--arcade-lime);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--arcade-cyan);
  box-shadow:0 0 calc(10px * var(--card-scale)) var(--arcade-cyan),
             0 calc(6px * var(--card-scale)) calc(20px * var(--card-scale)) rgba(0,0,0,0.7);
  animation:bounce-in .8s ease;
  cursor:pointer;
  z-index:9999;
}
#wpblaster-floating-cart:hover{transform:scale(1.2);}
.wpblaster-cart-icon{width:calc(36px * var(--card-scale));height:calc(36px * var(--card-scale));fill:currentColor;}
#wpblaster-cart-count{
  position:absolute;
  top:calc(-6px * var(--card-scale));
  right:calc(-6px * var(--card-scale));
  width:calc(28px * var(--card-scale));
  height:calc(28px * var(--card-scale));
  background:var(--arcade-lime);
  color:var(--dark-bg);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(.8rem * var(--card-scale));
  font-family:var(--font-main);
  box-shadow:0 2px calc(6px * var(--card-scale)) rgba(0,0,0,0.5);
}

/* Animaciones */
@keyframes bounce-in{
  0%{transform:scale(0.4);opacity:0}
  60%{transform:scale(1.2);opacity:1}
  100%{transform:scale(1)}
}

/* Filtros (también compactos) */
.wpblaster-filters{
  display:flex;
  justify-content:center;
  padding:calc(var(--filters-pad-y-base) * var(--card-scale)) calc(var(--filters-pad-x-base) * var(--card-scale));
  align-items:center;
  background:linear-gradient(90deg,rgba(0,0,0,0.35),rgba(0,0,0,0.15));
  border-radius:calc(10px * var(--card-scale));
  margin:calc(.8rem * var(--card-scale)) auto calc(1.2rem * var(--card-scale));
  max-width:calc(1100px * var(--card-scale));
  box-shadow:var(--shadow-l) rgba(0,0,0,0.6);
}

.wpblaster-filters-form{
  display:flex;
  gap:calc(12px * var(--card-scale));
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  width:100%;
}

.wpblaster-filters-form label{
  color:var(--text-light);
  font-family:var(--font-ui);
  font-size:calc(13px * var(--card-scale));
  margin-right:calc(6px * var(--card-scale));
}

/* Inputs */
.wpblaster-filters-form select,
.wpblaster-filters-form input[type="text"],
.wpblaster-filters-form input[type="number"]{
  height:calc(34px * var(--card-scale));
  padding:calc(6px * var(--card-scale)) calc(8px * var(--card-scale));
  font-size:calc(13px * var(--card-scale));
  border-radius:calc(6px * var(--card-scale));
  border:1px solid rgba(0,0,0,0.12);
  background:#ffffff;
  color:#000000;
  min-width:calc(120px * var(--card-scale));
  max-width:calc(220px * var(--card-scale));
  box-sizing:border-box;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}

/* Botón aplicar */
.wpblaster-filter-btn{
  height:calc(34px * var(--card-scale));
  padding:calc(6px * var(--card-scale)) calc(12px * var(--card-scale));
  font-size:calc(13px * var(--card-scale));
  min-width:calc(100px * var(--card-scale));
  border-radius:calc(6px * var(--card-scale));
  background:linear-gradient(180deg,var(--arcade-magenta),#c000c0);
  color:#fff;
  border:2px solid rgba(255,255,255,0.06);
  font-family:var(--font-main);
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}

.wpblaster-filter-btn:hover{
  transform:translateY(calc(-3px * var(--card-scale)));
  box-shadow:0 10px calc(30px * var(--card-scale)) rgba(107,0,255,0.12);
}

/* Responsive */
@media (max-width:1024px){
  .wpblaster-grid{
    grid-template-columns:repeat(2,1fr);
    gap:calc(1.5rem * var(--card-scale));
    padding:calc(1.5rem * var(--card-scale));
  }
}

@media (max-width:768px){
  .wpblaster-grid{grid-template-columns:1fr;padding:calc(1rem * var(--card-scale))}
  .wpblaster-vendor{font-size:calc(1rem * var(--card-scale));padding:calc(.6rem * var(--card-scale)) 0}
  .wpblaster-title{font-size:calc(1.2rem * var(--card-scale));padding:calc(.6rem * var(--card-scale)) calc(.8rem * var(--card-scale)) calc(.3rem * var(--card-scale))}
  .wpblaster-desc{font-size:calc(.88rem * var(--card-scale));padding:0 calc(.8rem * var(--card-scale)) calc(.5rem * var(--card-scale))}
  .wpblaster-price{font-size:calc(1.3rem * var(--card-scale));padding:0 calc(.8rem * var(--card-scale)) calc(.5rem * var(--card-scale))}
  .wpblaster-controls{padding:calc(.6rem * var(--card-scale)) calc(.8rem * var(--card-scale));gap:calc(6px * var(--card-scale))}
  .wpblaster-qty{min-width:calc(48px * var(--card-scale));font-size:calc(.85rem * var(--card-scale))}
  .wpblaster-add-to-cart{padding:calc(.4rem * var(--card-scale)) calc(.7rem * var(--card-scale));font-size:calc(.85rem * var(--card-scale))}
}

@media (max-width:480px){
  .wpblaster-wrapper{padding:calc(1rem * var(--card-scale));border-radius:calc(8px * var(--card-scale))}
  .wpblaster-grid{gap:calc(1rem * var(--card-scale));padding:calc(.8rem * var(--card-scale))}
  .wpblaster-item{border-radius:calc(8px * var(--card-scale));margin-bottom:calc(1.5rem * var(--card-scale))}
  .wpblaster-title{font-size:calc(1rem * var(--card-scale));padding:calc(.5rem * var(--card-scale)) calc(.6rem * var(--card-scale)) calc(.2rem * var(--card-scale))}
  .wpblaster-desc{font-size:calc(.78rem * var(--card-scale));padding:0 calc(.6rem * var(--card-scale)) calc(.4rem * var(--card-scale))}
  .wpblaster-price{font-size:calc(1.1rem * var(--card-scale));padding:0 calc(.6rem * var(--card-scale)) calc(.4rem * var(--card-scale))}
  .wpblaster-controls{flex-direction:column;align-items:stretch;padding:calc(.5rem * var(--card-scale)) calc(.6rem * var(--card-scale));gap:calc(6px * var(--card-scale))}
  .wpblaster-qty{width:100%;margin-bottom:calc(.5rem * var(--card-scale))}
  .wpblaster-add-to-cart{width:100%;text-align:center}
}