/*
  SAEN IMPORT — Diseño visual principal aprobado.
  Todo el sitio usa el primer estilo; solo la distribución de productos
  conserva la cuadrícula del segundo concepto.
*/

:root {
  --brand-ink:#010918;
  --brand-navy:#03152f;
  --brand-panel:#072a54;
  --brand-panel-soft:#0b376a;
  --brand-blue:#087df0;
  --brand-cyan:#36b8ff;
  --brand-red:#f21f3a;
  --brand-yellow:#f6c915;
  --brand-white:#f7fbff;
  --brand-muted:#9bbfe1;
  --brand-border:rgba(72,173,255,.24);
}

body.storefront-preview {
  background:radial-gradient(ellipse at 50% -10%,rgba(13,112,233,.34),transparent 38%),radial-gradient(circle at 100% 42%,rgba(242,31,58,.09),transparent 25%),linear-gradient(180deg,#03152f 0%,#020d20 45%,#010817 100%);
  background-attachment:fixed;
}

body.storefront-preview::before {
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 75%);
}

body.storefront-preview .topbar{background:linear-gradient(90deg,#063579,#064aa7 50%,#063579)}
body.storefront-preview .header{border-bottom:1px solid rgba(65,174,255,.28)}
body.storefront-preview .header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent 5%,var(--brand-blue) 32%,var(--brand-red) 50%,var(--brand-blue) 68%,transparent 95%);opacity:.55;
}
body.storefront-preview .header-inner{height:78px}
body.storefront-preview .logo-icon,body.storefront-preview .logo-icon img{width:62px;height:62px}
body.storefront-preview .logo-icon img{filter:drop-shadow(0 6px 12px rgba(0,0,0,.32))}

body.storefront-preview .search-form{border:2px solid rgba(64,164,255,.28)}
body.storefront-preview .search-form:focus-within{border-color:var(--brand-cyan);box-shadow:0 0 0 4px rgba(54,184,255,.13),0 10px 28px rgba(0,0,0,.25)}

body.storefront-preview .main-nav-wrap,body.storefront-preview .main-nav{
  background:linear-gradient(90deg,#03142e,#06418c 50%,#03142e);box-shadow:0 8px 24px rgba(0,0,0,.3);
}
body.storefront-preview .nav-link{font-size:.73rem;padding-block:13px}
body.storefront-preview .nav-link.active-nav{
  color:#fff;border-bottom-color:var(--brand-yellow);background:linear-gradient(180deg,rgba(8,125,240,.46),rgba(8,125,240,.13));
}
body.storefront-preview .breadcrumb-bar{background:rgba(3,21,47,.82);backdrop-filter:blur(14px)}

body.storefront-preview #catSection.products-section{padding:42px 18px 76px!important}
body.storefront-preview #catSection .sec-inner{padding:0}
body.storefront-preview #catSection .sec-hdr{
  max-width:1120px;margin:0 auto 28px;padding:36px 28px 32px;position:relative;overflow:hidden;
  border:1px solid var(--brand-border);border-radius:24px;
  background:linear-gradient(115deg,rgba(10,52,104,.92),rgba(3,22,49,.94) 55%,rgba(93,10,30,.5)),var(--brand-panel);
  box-shadow:0 22px 56px rgba(0,0,0,.28);
}
body.storefront-preview #catSection .sec-hdr::before{
  content:'';position:absolute;width:270px;height:270px;right:-100px;top:-140px;border:42px solid rgba(54,184,255,.09);border-radius:50%;
}
body.storefront-preview #catSection .sec-hdr::after{
  content:'';position:absolute;left:50%;bottom:0;width:160px;height:3px;transform:translateX(-50%);border-radius:3px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-red));
}
body.storefront-preview #catSection .sec-cat-icon{width:58px;height:58px;margin-bottom:12px;border-radius:16px;font-size:1.45rem}
body.storefront-preview #catSection .sec-title{margin-bottom:8px;font-size:clamp(1.8rem,3.2vw,2.65rem);letter-spacing:-.5px}
body.storefront-preview #catSection .sec-desc{max-width:760px}

body.storefront-preview .quick-filters{
  max-width:1120px;margin:0 auto 28px;padding:10px;gap:9px;border:1px solid var(--brand-border);border-radius:18px;
  background:rgba(4,25,53,.82);box-shadow:0 12px 32px rgba(0,0,0,.2);
}
body.storefront-preview .qf-btn{box-shadow:none}

/* Único elemento conservado del segundo concepto: distribución de tarjetas. */
body.storefront-preview #catSection .products-grid,
body.storefront-preview .featured-products-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));align-items:stretch;gap:22px;
}
body.storefront-preview #catSection .products-grid{max-width:1380px;margin:0 auto}

body.storefront-preview #catSection .product-card{
  width:auto!important;height:100%;display:flex;flex-direction:column;border-radius:18px;border:1px solid rgba(73,169,255,.22);
  background:linear-gradient(155deg,#0a3261,#051c3a 70%);box-shadow:0 14px 32px rgba(0,0,0,.25);
}
body.storefront-preview #catSection .product-card:hover{
  transform:translateY(-6px);border-color:rgba(54,184,255,.78);box-shadow:0 24px 48px rgba(0,0,0,.38),0 0 0 1px rgba(54,184,255,.14);
}
body.storefront-preview #catSection .p-img-wrap{height:205px}
body.storefront-preview #catSection .p-img-ph{background:#f7f9fc}
body.storefront-preview #catSection .p-img-ph img{object-fit:contain}
body.storefront-preview #catSection .p-info{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
body.storefront-preview #catSection .p-name{min-height:2.55em;margin-bottom:7px;font-family:'Josefin Sans',sans-serif;font-size:.91rem;line-height:1.32;letter-spacing:.1px}
body.storefront-preview #catSection .p-cat{color:var(--brand-cyan);font-size:.61rem}
body.storefront-preview #catSection .p-desc{display:none}
body.storefront-preview #catSection .p-stars{margin-bottom:11px}
body.storefront-preview #catSection .p-prices-auto{margin-top:auto}
body.storefront-preview #catSection .price-row{min-height:44px;border:1px solid #d9e6f3;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.11)}
body.storefront-preview #catSection .price-row+.price-row{margin-top:7px}
body.storefront-preview #catSection .btn-add-tipo{background:linear-gradient(135deg,#0759bc,#078cf5);box-shadow:0 5px 13px rgba(0,74,175,.24)}
body.storefront-preview #catSection .p-footer{padding-top:9px;border-top:1px solid rgba(255,255,255,.1)}
body.storefront-preview .p-badge.oferta,body.storefront-preview .p-discount{background:linear-gradient(135deg,#d80f29,var(--brand-red))}
body.storefront-preview .card-mayor-badge{color:var(--brand-yellow);background:rgba(3,48,112,.94);border:1px solid rgba(246,201,21,.42)}

/* Productos destacados: mismo estilo visual, nueva distribución. */
body.storefront-preview .featured-products-grid .product-card{width:auto!important;height:100%}
body.storefront-preview .featured-products-grid .p-img-wrap{height:205px}

body.storefront-preview .promo-banner{position:relative;background:linear-gradient(120deg,#020d20,#07418c 56%,#a20b23)}
body.storefront-preview .promo-banner::before{
  content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 65%,rgba(255,255,255,.07) 65.2%,transparent 66%);pointer-events:none;
}
body.storefront-preview .footer{border-top:1px solid rgba(54,184,255,.18)}
body.storefront-preview .preview-ribbon{border-color:rgba(246,201,21,.35);box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 22px rgba(8,125,240,.13)}

@media(max-width:900px){
  body.storefront-preview #catSection .products-grid,
  body.storefront-preview .featured-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  body.storefront-preview .header-inner{height:68px;padding:0 10px;gap:6px}
  body.storefront-preview .logo{gap:6px;min-width:0}
  body.storefront-preview .logo-icon,
  body.storefront-preview .logo-icon img{width:42px;height:42px}
  body.storefront-preview .logo-main{font-size:1rem;letter-spacing:1px}
  body.storefront-preview .logo-sub{font-size:.48rem;letter-spacing:2.2px}
  body.storefront-preview .logo-slogan{display:none}
  body.storefront-preview .header-actions{gap:4px;margin-left:auto;flex-shrink:0}
  body.storefront-preview .header-actions .action-btn,
  body.storefront-preview .menu-toggle{width:38px;height:38px;min-width:38px;padding:0;justify-content:center}
  body.storefront-preview .header-actions .wa-btn,
  body.storefront-preview .header-actions .account-btn{border-radius:50%}
  body.storefront-preview #catSection.products-section{padding-inline:10px!important}
  body.storefront-preview #catSection .sec-hdr{padding:28px 16px;border-radius:18px}
  body.storefront-preview #catSection .products-grid,body.storefront-preview .featured-products-grid{gap:11px}
  body.storefront-preview #catSection .p-img-wrap,body.storefront-preview .featured-products-grid .p-img-wrap{height:165px}
  body.storefront-preview #catSection .p-info{padding:12px}
  body.storefront-preview #catSection .price-row-left{max-width:calc(100% - 58px)}
}
@media(max-width:420px){
  body.storefront-preview #catSection .products-grid,
  body.storefront-preview .featured-products-grid{grid-template-columns:1fr}
  body.storefront-preview #catSection .p-img-wrap,body.storefront-preview .featured-products-grid .p-img-wrap{height:225px}
}