/* WattSaver staging-v1 — correcciones UI/UX, tipografía y contraste.
   Solo aplica en tienda.wattsaver.com/staging-v1. No producción. */

:root{
  --font-display:'Rajdhani','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ws-muted:#4B6152;
  --ws-dark-text:#B4BDC8;
  --focus:#00e676;
}

body{ font-family:var(--font-body); font-weight:300; line-height:1.7; }
h1,h2,h3,h4,h5,h6,.hero h1,.section-title,.card-title,.product-title,.combo-content h3{
  font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:normal;
}
h1,.hero h1,.section-title,#catalogTitle,#combosTitle,#configTitle,#checkTitle,#trustTitle{
  text-transform:none;
}
.btn,.btn-primary,.cta,button.add-to-cart,.btn-add,.search-submit,.action-btn{
  font-family:var(--font-display); font-weight:700; letter-spacing:1px; text-transform:uppercase;
}
.section-eyebrow,.hero-eyebrow{
  font-family:var(--font-body); font-weight:300; letter-spacing:4px; text-transform:uppercase;
}

/* Contraste AA */
.badge-emerald,.product-badge{ background:#065F46; color:#D1FAE5; border-color:#065F46; }
.badge-fire,.norm-badge{ background:#991B1B; color:#FEE2E2; border-color:#991B1B; }
.price-old{ color:#5B6B60; }
.on-dark .price-old,.price-old.on-dark{ color:#A7B3BF; }
.bcv-chip{ color:#F3F5F0; }

/* Piso tipográfico legible */
.hero-telemetry small,.trust-strip span,.btn-wa,.norm-badge,.dept-pill small,
.card-sku,.sku,.combo-sku,.b2b-note,.spec-pill{ font-size:11px; line-height:1.35; }

/* Buscador: contador y estado vacío */
#searchStatus{ display:block; margin-top:.5rem; font-size:13px; color:var(--ws-muted); }
#searchStatus:empty{ display:none; }
.search-empty{ padding:.75rem; }

/* Foco visible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}

/* Ajustes finos tras QA de contraste */
.product-card .price-old, .combo-card .price-old{ color:#4E5D53 !important; }
.combo-card .price-old, .on-dark .price-old{ color:#B4BDC8 !important; }
.product-badge{ font-size:11px !important; }
.btn-wa{ color:#0B6B36 !important; }
.dept-pill small{ background:rgba(0,0,0,.28) !important; color:#FFFFFF !important; }

/* Contraste: ejes, etiquetas técnicas y footer */
.range-scale span, .config-result small, .lab-config-dark small{ color:#B4BDC8 !important; font-size:11px !important; }
.trust-seal > span{ color:#6B4E12 !important; }
.footer-bottom p, .footer-bottom span, #year{ color:#9CA3AF !important; }

/* Sin kits: el configurador ocupa el ancho completo */
.volt-grid{ grid-template-columns:1fr !important; }

/* Fichas: título enlazado a la página de producto */
.product-title a{ color:inherit; text-decoration:none; }
.product-title a:hover{ text-decoration:underline; }

/* Topbar esbelta y angosta */
.topbar{ min-height:28px !important; padding:2px 0 !important; font-size:11px !important; }
.topbar-inner{ min-height:28px !important; gap:12px !important; }
.topbar-left{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; line-height:1.2 !important; font-size:11px !important; }
.topbar-right{ gap:10px !important; font-size:11px !important; }
.cur-btn{ font-size:10px !important; padding:2px 7px !important; min-height:20px !important; min-width:auto !important; height:auto !important; line-height:1.2 !important; }
.bcv-chip{ font-size:10.5px !important; }
@media (max-width:640px){
  .topbar{ min-height:26px !important; }
  .topbar-inner{ min-height:26px !important; }
  .cur-btn{ font-size:9px !important; padding:2px 5px !important; }
  .bcv-chip{ font-size:9.5px !important; }
}

@media (max-width:700px){
  body{ padding-bottom:64px; }
}

/* Optimización de renderizado para listas largas de productos (WPO) */
.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* Logos +10% en Header y Footer */
.brand-mark{ width:44px !important; height:44px !important; max-width:44px !important; max-height:44px !important; object-fit:contain; }
.brand-logo-img{ max-height:44px !important; }
.brand-text strong{ font-size:24px !important; }
.footer-logo{ max-height:53px !important; width:auto !important; margin-bottom:10px; }

/* Header responsivo optimizado para pantallas intermedias (1024px – 1380px) */
@media (max-width:1380px){
  .action-link[href="#catalogo"], .action-link[href="/#catalogo"]{ display:none !important; }
  .action-link small{ display:none !important; }
  .brand-text small{ display:none !important; }
  .header-actions .cart-label{ display:none !important; }
  .header-inner{ gap:12px !important; }
  .search-box{ min-width:260px !important; flex:1 !important; }
}

@media (max-width:1120px){
  .action-link{ display:none !important; }
  .hamburger{ display:flex !important; }
  .header-inner{ gap:14px !important; }
}

@media (max-width:860px){
  :root{ --header-h:auto; }
  .brand-text strong{ font-size:19px !important; }
  .brand-mark{ width:38px !important; height:38px !important; max-width:38px !important; max-height:38px !important; }
  .brand-logo-img{ max-width:145px !important; }
  .header-inner{ flex-wrap:wrap !important; padding-block:8px !important; gap:8px !important; }
  .search-box{ order:3 !important; flex-basis:100% !important; max-width:none !important; margin-top:4px !important; margin-bottom:6px !important; }
  .header-actions{ margin-left:auto !important; }
  .cart-btn{ padding:8px 10px !important; }
  .cart-total{ display:none !important; }
  .search-submit{ padding:9px 13px !important; font-size:12px !important; }
}

@media (max-width:480px){
  .brand-text strong{ font-size:17px !important; }
  .brand-mark{ width:34px !important; height:34px !important; max-width:34px !important; max-height:34px !important; }
  .brand-logo-img{ max-width:120px !important; }
  #searchInput{ font-size:13px !important; padding:9px 8px !important; }
  #searchInput::placeholder{ font-size:11.5px !important; }
  .search-submit{ padding:8px 10px !important; font-size:11.5px !important; }
}

/* Blindaje contra scroll horizontal no deseado */
html, body {
  overflow-x: clip;
}
