/*
Theme Name: Distribuidora Los Cuatro
Theme URI: https://distribuidoraloscuatro.cl
Author: Distribuidora Los Cuatro
Description: Theme a medida para Distribuidora Los Cuatro, basado en el diseño aprobado. Requiere WooCommerce.
Version: 57.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: distribuidora-los4
*/

:root{
  --black:#151515;
  --white:#ffffff;
  --accent:#B90000;
  --accent-dark:#8C0000;
  --accent-soft:#FBE7E7;
  --gold:#FFDE00;
  --gold-soft:#FFF7D6;
  --green-soft:#EFF6DC;
  --peach-soft:#FFF1E8;
  --brand-green:#8DC63F;
  --brand-green-dark:#6FA82C;
  --gray-line:#EAEAEA;
  --gray-mid:#DADADA;
  --gray-text:#666666;
  --radius:16px;
  --radius-sm:10px;
  --shadow: 0 6px 24px rgba(17,17,17,0.08);
  --shadow-lg: 0 20px 60px rgba(17,17,17,0.18);
  --font-head:'Poppins','Segoe UI',sans-serif;
  --font-body:'Inter','Segoe UI',sans-serif;
  --font-display:'Poppins','Segoe UI',sans-serif;
  --footer-green:#6FA82C;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-y:visible; /* evita que el navegador convierta al body en un contenedor de scroll
    (ocurre automáticamente al fijar solo overflow-x), lo que puede romper position:sticky. */
}
img{max-width:100%;display:block;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- Promo strip ---------- */
.promo-strip{
  background:var(--brand-green-dark);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12.5px;
  font-weight:700;
  padding:9px 34px;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
}
.promo-strip span.sep{margin:0 10px;opacity:.5;}
.promo-strip-text{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  animation:los4BreatheGlow 3.6s ease-in-out infinite;
}
.logo-img{
  animation:los4Breathe 3.6s ease-in-out infinite;
}
@keyframes los4Breathe{
  0%, 100%{transform:scale(1);}
  50%{transform:scale(1.055);}
}
@keyframes los4BreatheGlow{
  0%, 100%{opacity:1;}
  50%{opacity:.7;}
}
@media (prefers-reduced-motion: reduce){
  .promo-strip-text, .logo-img{animation:none;}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:500;
  background:#fff;
  border-bottom:1px solid var(--gray-line);
  transition:box-shadow .25s ease;
}
.header-top{
  display:flex;align-items:center;justify-content:center;
  padding:12px 20px 10px;max-width:1200px;margin:0 auto;
}
.header-bottom{
  max-width:1200px;margin:0 auto;padding:6px 20px 8px;
  display:flex;align-items:center;gap:16px;
  border-top:1px solid var(--gray-line);
}
.hamburger{
  display:none;background:none;border:none;
  padding:8px;border-radius:8px;align-items:center;justify-content:center;
}
.hamburger:hover{background:var(--gray-line);}
.logo{
  display:flex;align-items:center;gap:24px;width:auto;
  transition:transform .3s ease;transform-origin:center;
}
.logo-img{
  width:84px;height:84px;padding:7px;border-radius:50%;box-shadow:var(--shadow-lg);flex-shrink:0;
  object-fit:contain;background:#fff;box-sizing:border-box;
}
/* Importante: NO usar display:flex aquí. .brand-name mezcla un nodo de texto ("Distribuidora ")
   con un <strong> ("Los Cuatro"); si este elemento se vuelve un contenedor flex, cada uno de esos
   dos fragmentos pasa a ser un "item" flex independiente, y el navegador recorta el espacio en
   blanco que queda pegado al borde de cada item — por eso el texto salió unido ("DISTRIBUIDORALOS
   CUATRO"). El alto ya se centra solo, porque .brand-name es un item dentro de .logo, que tiene
   align-items:center: eso centra la caja completa del título contra el logo sin tocar su interior. */
.brand-name{
  flex:none;text-align:left;font-family:var(--font-head);font-weight:800;font-size:23px;
  line-height:1.08;letter-spacing:.5px;text-transform:uppercase;
}
.brand-name strong{color:var(--accent);font-weight:800;}
/* El espaciador invisible ya no hace falta: antes servía para "balancear" el logo a la
   izquierda mientras el título quedaba centrado en toda la fila (por eso se veía tan
   separado del logo). Ahora el logo y el título forman un solo bloque compacto, y ese
   bloque completo es el que se centra en la fila (ver .header-top). */
.logo-spacer{display:none;}
/* Centrado óptico: en escritorio, la fila de categorías de abajo (.header-bottom) tiene el
   buscador y el carrito ocupando bastante espacio a la derecha, lo que hace que el bloque de
   categorías (donde está "Chocolates") quede visualmente cargado hacia la izquierda. Si el logo
   se centra matemáticamente en su propia fila, se ve descuadrado respecto a esa fila de abajo.
   Por eso, en pantallas anchas, se recorre el conjunto logo+título hacia la izquierda usando un
   margen (no un ancho fijo ni un texto de referencia), para que quede alineado visualmente con
   el bloque de categorías sin depender de cuántas categorías existan ni de sus nombres. */
@media (min-width:901px){
  .logo{margin-right:90px;}
}
.brand-tag{display:block;font-size:11.5px;color:var(--gray-text);font-weight:500;letter-spacing:.3px;margin-top:2px;}
.main-nav{
  display:flex;gap:6px;margin-left:0;flex:1;
  transition:transform .3s ease;transform-origin:center;
}
.nav-link{
  padding:8px 14px;border-radius:30px;font-weight:600;font-size:14.5px;
  color:var(--black);position:relative;transition:background .15s, color .15s;
  white-space:nowrap;
}

/* Header "achicado" al hacer scroll: el logo, el nombre y la barra de categorías se ven
   todavía más pequeños usando transform (efecto visual únicamente). El header-top y el
   header-bottom NUNCA cambian su alto real, por lo tanto el contenido de la página jamás
   se mueve ni salta, sin importar el dispositivo o la velocidad de scroll. */
.site-header.is-scrolled{box-shadow:var(--shadow);}
.site-header.is-scrolled .logo{transform:scale(.78);}
.site-header.is-scrolled .main-nav{transform:scale(.92);}

/* Tamaños para pantallas angostas, para que el logo y el nombre de la
   empresa nunca se corten ni se encimen en celulares y tablets. */
@media (max-width:900px){
  .logo{gap:16px;}
  .logo-img{width:68px;height:68px;padding:6px;}
  .logo-spacer{width:68px;}
  .brand-name{font-size:18px;min-height:68px;}
}
@media (max-width:480px){
  .header-top{padding:10px 16px 8px;}
  .logo{gap:12px;}
  .logo-img{width:56px;height:56px;padding:5px;}
  .logo-spacer{width:56px;}
  .brand-name{font-size:14px;letter-spacing:.2px;min-height:56px;}
}
.nav-link:hover{background:var(--green-soft);color:var(--brand-green-dark);}
.nav-link.active{background:var(--brand-green-dark);color:var(--white);}
.nav-item{position:relative;display:flex;}
.nav-item::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px;z-index:49;}
.nav-dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--gray-line);
  min-width:320px;padding:18px;opacity:0;visibility:hidden;transition:.18s ease;z-index:50;pointer-events:none;
}
.nav-item:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.nav-dropdown-desc{font-size:12.5px;color:var(--gray-text);line-height:1.5;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--gray-line);}
.nav-dropdown-photos{display:flex;gap:8px;margin-bottom:14px;}
.dd-photo{
  width:66px;height:66px;border-radius:10px;overflow:hidden;background:#FAFAFA;flex-shrink:0;
  transition:.15s;
}
.dd-photo:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.dd-photo img{width:100%;height:100%;object-fit:contain;}
.nav-dropdown-viewall{display:block;text-align:center;background:var(--accent);color:#fff;border-radius:30px;padding:9px;font-size:13px;font-weight:700;transition:.15s;}
.nav-dropdown-viewall:hover{background:var(--accent-dark);}
@media (max-width:960px){ .nav-dropdown{display:none;} }
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}
.search-box{
  display:flex;align-items:center;background:var(--gray-line);border-radius:30px;
  padding:6px 6px 6px 16px;gap:6px;width:220px;
}
.search-box input{
  border:none;background:none;outline:none;font-size:13.5px;width:100%;font-family:inherit;
}
.search-box button{background:var(--black);color:#fff;border:none;border-radius:50%;width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.cart-btn{
  position:relative;background:var(--black);color:var(--white);border:none;
  height:44px;padding:0 18px 0 16px;border-radius:30px;display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.cart-label{font-size:13.5px;font-weight:600;}
.cart-count{
  position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid #fff;
}
.mobile-search{display:none;padding:0 20px 12px;}
.mobile-search .search-box{width:100%;}

/* ---------- Mobile nav drawer ---------- */
.mobile-nav-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:900;
  opacity:0;visibility:hidden;transition:.25s;
}
.mobile-nav-overlay.active{opacity:1;visibility:visible;}
.mobile-nav-panel{
  position:fixed;top:0;left:0;bottom:0;width:78%;max-width:300px;background:#fff;z-index:901;
  transform:translateX(-100%);transition:.28s cubic-bezier(.4,0,.2,1);padding:22px 20px;
  box-shadow:var(--shadow-lg);overflow-y:auto;
}
.mobile-nav-overlay.active .mobile-nav-panel{transform:translateX(0);}
.mobile-nav-panel h4{font-size:12px;color:var(--gray-text);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 8px;}
.mobile-nav-panel .nav-link{display:block;padding:12px 14px;font-size:16px;}
.mobile-nav-close{background:var(--gray-line);border:none;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;}

/* ---------- Banner carousel ---------- */
.banner-carousel{position:relative;margin:0;padding:0;}
.banner-track-wrap{position:relative;overflow:hidden;}
.banner-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.banner-slide{
  min-width:100%;display:flex;align-items:center;justify-content:center;gap:48px;
  padding:52px 68px;min-height:460px;overflow:hidden;position:relative;
}
.banner-slide::before, .banner-slide::after{
  content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.14);z-index:0;pointer-events:none;
}
.banner-slide::before{width:420px;height:420px;top:-160px;right:-100px;}
.banner-slide::after{width:260px;height:260px;bottom:-120px;left:8%;background:rgba(255,222,0,.16);}
.banner-slide .b-text{flex:0 1 460px;z-index:2;opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.banner-slide.is-active .b-text{opacity:1;transform:translateY(0);transition-delay:.25s;}
.banner-slide .b-tag{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;padding:6px 13px;border-radius:20px;margin-bottom:16px;
}
.banner-slide .b-tag svg{flex-shrink:0;}
.banner-slide .b-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block;}
.banner-slide h2{font-family:var(--font-head);font-size:44px;font-weight:800;line-height:1.06;margin-bottom:14px;letter-spacing:-.7px;color:#fff;}
.banner-slide p{font-size:16.5px;font-weight:500;color:rgba(255,255,255,.92);margin:0 0 26px;max-width:380px;line-height:1.55;}
.banner-slide .b-cta{
  background:var(--gold);color:var(--black);border:none;padding:16px 30px;border-radius:30px;
  font-weight:800;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;transition:.18s;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.banner-slide .b-cta:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 30px rgba(0,0,0,.28);}
.banner-slide .b-img{width:auto;max-width:320px;flex-shrink:0;position:relative;z-index:1;}
.banner-slide .b-img::before{
  content:'';position:absolute;inset:-30px;background:radial-gradient(circle, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 68%);
  border-radius:50%;z-index:-1;
}
.banner-slide .b-img img{width:100%;border-radius:20px;filter:drop-shadow(0 24px 40px rgba(0,0,0,.35));animation:kenburns 9s ease-in-out infinite alternate;transform:rotate(-3deg);}
@keyframes kenburns{from{transform:rotate(-3deg) scale(1);}to{transform:rotate(-3deg) scale(1.06);}}
@media (max-width:768px){
  .banner-slide{padding:36px 24px;min-height:auto;flex-direction:column;text-align:center;gap:22px;}
  .banner-slide .b-text{flex:1;}
  .banner-slide h2{font-size:29px;}
  .banner-slide p{margin-left:auto;margin-right:auto;}
  .banner-slide .b-img{max-width:210px;}
}
.banner-dots{display:flex;justify-content:center;gap:8px;margin-top:14px;}
.banner-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-mid);border:none;padding:0;}
.banner-dot.active{background:var(--brand-green-dark);width:22px;border-radius:6px;transition:.25s;}
.banner-arrow{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.9);
  border:none;width:36px;height:36px;border-radius:50%;font-size:16px;box-shadow:var(--shadow);z-index:3;
}
.banner-arrow.prev{left:24px;}
.banner-arrow.next{right:24px;}

/* ---------- Contenedor con margen (banners ya no van pegados al borde) ---------- */
.banner-outer{max-width:1200px;margin:24px auto 0;padding:0 20px;}
.banner-outer .banner-track-wrap, .banner-outer .banner-slide, .banner-outer .promo-banner{border-radius:var(--radius);overflow:hidden;}
.promo-outer{margin-top:36px;}

/* ---------- Banners subidos como imagen completa (CPT Banners) ---------- */
/* Anula el layout del sistema anterior (texto+gradiente) para que sea una foto limpia.
   Cada banner que subas tiene su propio diseño (texto + fotos de producto) compuesto a
   una medida distinta — no hay forma de recortar automáticamente sin arriesgarse a cortar
   parte del diseño de alguno de ellos. Por eso el criterio aquí es el mismo que ya se usa
   en las fotos de producto de esta misma tienda: object-fit:contain + fondo neutro. Esto
   GARANTIZA que nunca se pierde ni un pixel del diseño de ningún banner, sin importar su
   forma. La caja mantiene LA MISMA proporción fija (8:3) en cualquier tamaño de pantalla
   — a propósito NO cambia por breakpoint, porque un banner que sube el cliente es UNA sola
   imagen (no hay una versión distinta para celular), y si la proporción de la caja
   cambiara entre escritorio y celular, la misma imagen que calza perfecto en una se vería
   con borde neutro en la otra. Con una sola proporción fija, una imagen hecha a la medida
   correcta se ve perfecta, sin bordes, en cualquier dispositivo.
   MEDIDA EXACTA RECOMENDADA PARA SUBIR BANNERS: 1600×600px (o cualquier tamaño con esa
   misma proporción, por ejemplo 1200×450 o 2000×750). Si el banner no viene exactamente
   en esa proporción, se ve completo y centrado sobre el fondo neutro en vez de recortarse
   o deformarse — eso no es un error, es la garantía de que nunca se corta el diseño. */
.banner-track{align-items:flex-start;}
.banner-slide-img{
  min-width:100%;position:relative;background:#FAFAFA;line-height:0;
  display:block;padding:0;align-items:unset;justify-content:unset;gap:0;
  aspect-ratio:8/3;
}
.banner-slide-img::before, .banner-slide-img::after{content:none;}
.banner-slide-link{display:block;position:relative;width:100%;height:100%;overflow:hidden;}
.banner-slide-bg{display:none;}
.banner-slide-link img.banner-slide-fg{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
}
.banner-overlay-text{
  position:absolute;left:0;bottom:0;right:0;padding:24px 32px;z-index:2;
  background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 70%);
  color:#fff;
}
.banner-overlay-text h2{font-family:var(--font-head);font-size:23px;font-weight:800;margin-bottom:8px;letter-spacing:-.4px;}
.banner-overlay-text .b-cta{
  display:inline-flex;background:var(--gold);color:var(--black);border:none;padding:10px 20px;border-radius:30px;
  font-weight:800;font-size:12.5px;
}
/* Mismo criterio que el carrusel hero: MISMA proporción (8:3) en cualquier pantalla,
   object-fit:contain para garantizar que nunca se pierde parte del diseño (usa las
   mismas clases .banner-slide-link / .banner-slide-fg de arriba). Medida recomendada
   para subir: 1600×600px (misma que el carrusel). */
.promo-banner{position:relative;line-height:0;background:#FAFAFA;aspect-ratio:8/3;overflow:hidden;}
@media (max-width:768px){
  .banner-overlay-text{padding:16px 18px;}
  .banner-overlay-text h2{font-size:18px;}
}

/* ---------- Home tint band ---------- */
.home-tint-band{background:linear-gradient(180deg, var(--gold-soft) 0%, #fff 100%);padding:20px 0 8px;margin-top:0;}

/* ---------- Category quick cards ---------- */
.section-head-cats{max-width:1200px;margin:88px auto 18px;padding:0 20px;}
.categories-quick{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.cat-card{
  display:block;text-align:center;transition:.22s cubic-bezier(.4,0,.2,1);
}
.cat-card:hover .cat-photo{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.cat-photo{
  aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--gray-line);
  display:flex;align-items:center;justify-content:center;transition:.22s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow);margin-bottom:10px;
}
.cat-photo img{width:100%;height:100%;object-fit:cover;}
.cat-photo-icon{color:var(--brand-green-dark);display:flex;align-items:center;justify-content:center;}
.cat-card .cat-name{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--black);}

/* ---------- Buscador: sugerencias en vivo ---------- */
.search-box-wrap{position:relative;width:220px;}
.mobile-search .search-box-wrap{width:100%;}
.search-box-wrap .search-box{width:100%;}
.search-suggest{
  display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;
  border:1px solid var(--gray-line);border-radius:14px;box-shadow:var(--shadow-lg);
  max-height:360px;overflow-y:auto;z-index:600;
}
.search-suggest.active{display:block;}
.search-suggest-heading{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--brand-green-dark);padding:12px 14px 4px;
}
.search-suggest-empty{padding:16px 14px;font-size:13px;color:var(--gray-text);}
.search-suggest-item{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--gray-line);
}
.search-suggest-item:first-child{border-top:none;}
.search-suggest-item:hover{background:var(--gray-line);}
.search-suggest-item .ss-img{width:40px;height:40px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#FAFAFA;display:flex;align-items:center;justify-content:center;}
.search-suggest-item .ss-img img{width:100%;height:100%;object-fit:contain;}
.search-suggest-item .ss-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.search-suggest-item .ss-name{font-size:13px;font-weight:600;color:var(--black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-suggest-item .ss-price{font-size:12px;color:var(--gray-text);}

/* ---------- Checkout: Boleta / Factura ---------- */
.los4-required-notice{
  background:var(--gold-soft, #FFF6D9);border-left:3px solid var(--gold, #FFC400);
  padding:10px 14px;border-radius:6px;font-size:13px;color:var(--gray-text,#555);
  margin:0 0 18px;line-height:1.5;
}
.los4-inline-error{display:block;color:#e2401c;font-size:12.5px;margin-top:6px;}
.los4-doc-type-field{margin:0 0 20px;}
.los4-doc-type-label{
  display:block;font-weight:600;font-size:14px;color:var(--black);margin-bottom:10px;
}
.los4-doc-type-label .required{color:#e2401c;text-decoration:none;margin-left:2px;}
.los4-doc-type-options{display:flex;flex-wrap:wrap;gap:24px;}
.los4-radio-option{
  display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--black);
  cursor:pointer;margin:0;
}
.los4-radio-option input[type="radio"]{
  width:17px;height:17px;margin:0;flex-shrink:0;accent-color:var(--brand-green-dark);cursor:pointer;
}
/* Oculto por defecto: "Boleta" es la opción inicial. El JS lo muestra solo si se elige Factura. */
.los4-factura-field{display:none;}
/* Asegura que el asterisco rojo de "obligatorio" se vea igual en TODO el formulario de
   checkout, incluyendo el que el JS agrega a mano en RUT/Razón Social/Giro cuando el
   cliente elige Factura (WooCommerce solo lo pinta rojo por defecto en su propio CSS
   base; este respaldo evita que dependa de que ese CSS esté cargado). */
.woocommerce form .form-row label abbr.required{color:#e2401c;border:0;text-decoration:none;margin-left:2px;}

/* ---------- Más Categorías (panel lateral) ---------- */
.more-categories-trigger-wrap{max-width:1200px;margin:16px auto 0;padding:0 20px;display:flex;justify-content:center;}
.more-categories-trigger{
  display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);border:1.5px solid var(--brand-green-dark);
  color:var(--brand-green-dark);font-weight:700;font-size:13.5px;padding:12px 24px;border-radius:30px;
  box-shadow:var(--shadow);transition:.18s;
}
.more-categories-trigger:hover{background:var(--brand-green-dark);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.more-categories-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:900;
  opacity:0;visibility:hidden;transition:.25s;
}
.more-categories-overlay.active{opacity:1;visibility:visible;}
.more-categories-panel{
  position:fixed;top:0;right:0;bottom:0;width:88%;max-width:420px;background:#fff;z-index:901;
  transform:translateX(100%);transition:.3s cubic-bezier(.4,0,.2,1);padding:22px 22px 30px;
  box-shadow:var(--shadow-lg);overflow-y:auto;
}
.more-categories-overlay.active .more-categories-panel{transform:translateX(0);}
.more-categories-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--gray-line);}
.more-categories-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:480px){
  .more-categories-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .more-categories-panel{padding:18px 16px 26px;}
}

/* ---------- Sections ---------- */
section.featured, section.recommended{max-width:1200px;margin:46px auto 0;padding:0 20px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;}
.section-head h2{font-size:22px;}
.section-head p{color:var(--gray-text);font-size:13.5px;margin:4px 0 0;}

/* ---------- Product grid & cards ---------- */
.product-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.product-grid.small{grid-template-columns:repeat(4,1fr);}
.los4-archive-wrap{max-width:1200px;margin:0 auto;padding:0 20px 40px;}
.product-grid-5{grid-template-columns:repeat(5,1fr);gap:14px;}
.product-grid-5 .product-title{font-size:13px;}
.product-grid-5 .product-desc{font-size:11.5px;}
.product-grid-5 .product-price{font-size:14.5px;}
.woocommerce-pagination-wrap{margin-top:24px;}
@media (max-width:1100px){
  .product-grid-5{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
  .product-grid-5{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Horizontal scroll row (Destacados / Recomendados) ---------- */
.h-scroll-row{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:8px;-webkit-overflow-scrolling:touch;
}
.h-scroll-row::-webkit-scrollbar{height:6px;}
.h-scroll-row::-webkit-scrollbar-thumb{background:var(--gray-mid);border-radius:10px;}
.h-scroll-row .product-card{min-width:230px;max-width:230px;flex-shrink:0;scroll-snap-align:start;}
.h-scroll-row.mini{gap:10px;}
.h-scroll-row.mini .mini-card{min-width:120px;max-width:120px;flex-shrink:0;scroll-snap-align:start;}

/* ---------- Carrusel automático (Destacados / Sugerencias) ---------- */
.marquee-row{display:flex;overflow:hidden;position:relative;}
.marquee-row:hover .marquee-track{animation-play-state:paused;}
.marquee-track{
  display:flex;gap:18px;flex-shrink:0;padding-right:18px;
  animation:los4MarqueeScroll 46s linear infinite;
}
.marquee-track .product-card{min-width:220px;max-width:220px;flex-shrink:0;}
@keyframes los4MarqueeScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (max-width:600px){
  .marquee-track .product-card{min-width:170px;max-width:170px;}
}
.product-card{
  border:1px solid var(--gray-line);border-radius:var(--radius);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.28s cubic-bezier(.4,0,.2,1);position:relative;
}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--gray-mid);}
.product-img-wrap{
  aspect-ratio:1/1;background:#FAFAFA;display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;overflow:hidden;padding:14px;
}
.product-img-wrap img{width:100%;height:100%;object-fit:contain;transition:.25s;}
.product-card:hover .product-img-wrap img{transform:scale(1.04);}
.badge{
  position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;
  padding:4px 9px;border-radius:20px;letter-spacing:.2px;z-index:2;
}
.product-info{padding:14px 14px 16px;display:flex;flex-direction:column;flex:1;gap:6px;}
.product-title{font-size:14.5px;font-weight:600;cursor:pointer;line-height:1.3;}
.product-title:hover{color:var(--accent-dark);}
.product-desc{
  font-size:12.5px;color:var(--gray-text);line-height:1.4;flex:1;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-brand{font-size:10.5px;color:var(--gray-text);text-transform:uppercase;letter-spacing:.5px;font-weight:700;display:block;margin-bottom:2px;}
.stock-indicator{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;margin:2px 0 0;}
.stock-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.stock-indicator.high{color:#1E9E5A;}
.stock-indicator.high .stock-dot{background:#1E9E5A;}
.stock-indicator.low{color:var(--accent);}
.stock-indicator.low .stock-dot{background:var(--accent);}
.product-footer{display:flex;align-items:center;justify-content:flex-start;margin-top:8px;gap:8px;}
.product-price{font-family:var(--font-head);font-weight:700;font-size:16px;}
.quick-add-slot{margin-top:4px;}
.quick-add-btn{
  width:100%;background:var(--accent);color:#fff;border:none;padding:11px 14px;border-radius:30px;
  font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:.15s ease;
}
.quick-add-btn:hover{background:var(--accent-dark);}
.quick-add-btn:disabled{background:var(--gray-mid);color:#fff;cursor:not-allowed;}
.quick-add-stepper{
  display:flex;align-items:center;justify-content:space-between;background:var(--accent);
  border-radius:30px;padding:5px 6px;box-shadow:var(--shadow);
}
.quick-add-stepper button{
  background:rgba(255,255,255,.14);border:none;color:#fff;width:30px;height:30px;border-radius:50%;
  font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;transition:.15s;
}
.quick-add-stepper button:hover{background:var(--accent);}
.quick-add-stepper button:disabled{opacity:.35;cursor:not-allowed;background:rgba(255,255,255,.14);}
.quick-add-stepper .qa-qty{color:#fff;font-weight:700;font-size:14px;min-width:20px;text-align:center;}

/* ---------- Trust strip (fija, no se mueve) ---------- */
.trust-strip{background:var(--brand-green-dark);color:#fff;padding:18px 0;margin-top:42px;}
.trust-row{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  row-gap:12px;column-gap:0;
}
.trust-item{
  display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;
  padding:0 30px;color:#fff;position:relative;
}
.trust-item:not(:last-child)::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(255,255,255,.28);
}
.trust-item .ti-icon{display:flex;color:var(--gold);flex-shrink:0;}
@media (max-width:900px){
  .trust-item{padding:0 16px;font-size:13px;}
}
@media (max-width:600px){
  .trust-row{row-gap:14px;}
  .trust-item{display:flex;width:100%;justify-content:center;text-align:center;padding:6px 20px;}
  .trust-item:not(:last-child)::after{content:none;}
}

/* ---------- Colecciones (sección estilo revista) ---------- */
.collections-mag{max-width:1200px;margin:52px auto 0;padding:0 20px;}
.collections-grid{display:grid;gap:16px;}
.collections-grid-1{grid-template-columns:1fr;}
.collections-grid-1 .collection-card{aspect-ratio:21/8;}
.collections-grid-2{grid-template-columns:1fr 1fr;}
.collections-grid-2 .collection-card{aspect-ratio:4/5;}
.collections-grid-3{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;}
.collections-grid-3 .collection-card:nth-child(1){grid-row:1 / 3;aspect-ratio:auto;}
.collections-grid-3 .collection-card:nth-child(2),
.collections-grid-3 .collection-card:nth-child(3){aspect-ratio:16/11;}
.collection-card{
  position:relative;display:block;overflow:hidden;border-radius:14px;
  background:#f2f2f2;box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.collection-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.collection-card:hover img{transform:scale(1.045);}
.collection-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 20px;
  background:linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
  color:#fff;
}
.collection-overlay h3{
  font-family:var(--font-head);font-size:21px;font-weight:800;margin-bottom:6px;
  letter-spacing:-.3px;
}
.collection-cta{
  font-size:12.5px;font-weight:700;letter-spacing:.3px;color:#fff;
  opacity:.92;display:inline-flex;align-items:center;gap:4px;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;
}
@media (max-width:900px){
  .collections-grid-3{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}
  .collections-grid-3 .collection-card:nth-child(1){grid-column:1 / 3;grid-row:1;aspect-ratio:21/9;}
  .collections-grid-3 .collection-card:nth-child(2),
  .collections-grid-3 .collection-card:nth-child(3){grid-row:2;aspect-ratio:1/1;}
}
@media (max-width:600px){
  .collections-grid-2,
  .collections-grid-3{grid-template-columns:1fr;grid-template-rows:none;}
  .collections-grid-3 .collection-card:nth-child(1),
  .collections-grid-3 .collection-card:nth-child(2),
  .collections-grid-3 .collection-card:nth-child(3){grid-column:1;grid-row:auto;aspect-ratio:4/3;}
  .collections-grid-2 .collection-card{aspect-ratio:4/3;}
}

/* ---------- Promo banner (secondary, static) ---------- */
.promo-banner{margin:0;}
.promo-banner-inner{
  background:linear-gradient(120deg, #C77B00 0%, var(--accent) 55%, var(--accent-dark) 100%);
  overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;gap:40px;padding:44px 60px;
}
.promo-banner-inner::before{
  content:'';position:absolute;width:360px;height:360px;border-radius:50%;
  background:rgba(255,255,255,.12);top:-140px;left:-80px;pointer-events:none;
}
.pb-text{flex:0 1 460px;position:relative;z-index:1;}
.pb-text .b-eyebrow{font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:block;}
.pb-text h2{font-family:var(--font-head);font-size:30px;font-weight:800;margin-bottom:10px;color:#fff;letter-spacing:-.4px;}
.pb-text p{font-size:15px;color:rgba(255,255,255,.92);margin:0 0 20px;max-width:420px;line-height:1.55;}
.pb-img{width:auto;max-width:220px;flex-shrink:0;position:relative;z-index:1;}
.pb-img::before{
  content:'';position:absolute;inset:-24px;background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 68%);
  border-radius:50%;z-index:-1;
}
.pb-img img{width:100%;border-radius:14px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));transform:rotate(3deg);}
@media (max-width:600px){
  .promo-banner-inner{flex-direction:column;text-align:center;padding:32px 24px;gap:24px;}
  .pb-text p{margin-left:auto;margin-right:auto;}
  .pb-img{width:44%;max-width:160px;}
}

/* ---------- Breadcrumb / archive header ---------- */
.breadcrumb{max-width:1200px;margin:22px auto 0;padding:0 20px;font-size:12.5px;color:var(--gray-text);}
.breadcrumb a{color:var(--gray-text);}
.breadcrumb a:hover{color:var(--black);}
.category-header{max-width:1200px;margin:0 auto;padding:14px 20px 26px;}
.category-header h1{font-size:28px;display:flex;align-items:center;gap:10px;}
.category-header p{color:var(--gray-text);font-size:14px;margin-top:6px;max-width:560px;}
.woocommerce-products-wrapper{max-width:1200px;margin:0 auto;padding:0 20px 10px;}

/* ---------- Search view ---------- */
.search-results-head{max-width:1200px;margin:30px auto 0;padding:0 20px;font-size:22px;}
.no-results{max-width:1200px;margin:20px auto;padding:0 20px;color:var(--gray-text);}

/* ---------- Footer ---------- */
/* ---------- Mapa de ubicación (antes del footer) ---------- */
.store-map{max-width:1200px;margin:60px auto 0;padding:0 20px;}
.store-map-inner{
  display:grid;grid-template-columns:1fr 1.3fr;gap:0;align-items:stretch;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--gray-line);min-height:280px;
}
.store-map-text{
  background:#fff;padding:36px 34px;display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.store-map-text h3{font-family:var(--font-head);font-size:21px;font-weight:800;color:var(--black);}
.store-map-text p{font-size:14px;color:var(--gray-text);line-height:1.6;max-width:320px;margin:0;}
.store-map-cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:8px;align-self:flex-start;
  background:var(--brand-green-dark);color:#fff;border:none;padding:12px 22px;border-radius:30px;
  font-weight:700;font-size:13px;transition:.18s;
}
.store-map-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.15);}
.store-map-embed{min-height:280px;background:var(--gray-line);}
.store-map-embed iframe{display:block;width:100%;height:100%;min-height:280px;}
@media (max-width:768px){
  .store-map-inner{grid-template-columns:1fr;}
  .store-map-text{padding:26px 22px;}
  .store-map-embed{height:260px;}
}

.site-footer{background:var(--footer-green);color:#fff;margin-top:60px;}
.footer-inner{max-width:1200px;margin:0 auto;padding:50px 20px 24px;display:grid;grid-template-columns:1.2fr 0.85fr 1fr 1fr 1fr;gap:28px;}
.footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px;color:var(--gold);position:relative;padding-bottom:10px;}
.footer-col h4::after{content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;background:rgba(255,255,255,.45);}
.footer-col p{font-size:13.5px;color:rgba(255,255,255,.92);line-height:1.7;margin:0 0 12px;}
.footer-info-row{display:flex;align-items:flex-start;gap:9px;margin:0 0 13px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.92);}
.footer-info-row:last-child{margin-bottom:0;}
.footer-info-row svg{flex-shrink:0;margin-top:2px;color:var(--gold);}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:-6px 0 14px;}
.footer-brand img{width:52px;height:52px;border-radius:50%;object-fit:contain;background:#fff;}
.footer-brand span{display:block;}
.footer-brand span{font-family:var(--font-head);font-weight:700;font-size:16px;}
.footer-desc{font-size:13px;color:rgba(255,255,255,.78);line-height:1.7;max-width:280px;margin:0 0 18px;}
.footer-links{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.footer-links a{font-size:13.5px;color:rgba(255,255,255,.92);cursor:pointer;}
.footer-links a:hover{color:#fff;text-decoration:underline;}
.social-row{display:flex;gap:10px;margin-top:4px;}
.social-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:16px;}
.social-btn:hover{background:var(--black);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.25);padding:18px 20px;text-align:center;font-size:12px;color:rgba(255,255,255,.78);}

/* ---------- Toast ---------- */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(14px) scale(.94);
  background:var(--brand-green-dark);color:#fff;padding:13px 22px;border-radius:30px;font-size:13.5px;font-weight:700;
  z-index:2000;opacity:0;visibility:hidden;transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), visibility .3s;
  display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-lg);max-width:min(88vw,420px);
}
#toast svg{flex-shrink:0;}
#toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);}
#toast.warning{background:var(--brand-green-dark);}

/* ================================================================
   WooCommerce — reskin de plantillas nativas con la identidad de marca
   ================================================================ */
.woocommerce ul.products li.product{
  border:1px solid var(--gray-line);border-radius:var(--radius);overflow:hidden;background:#fff;
  padding:0;transition:.28s cubic-bezier(.4,0,.2,1);position:relative;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:var(--gray-mid);}
.woocommerce ul.products li.product a img{aspect-ratio:1/1;object-fit:contain;background:#FAFAFA;padding:14px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14.5px;font-weight:600;padding:0 14px;margin-top:10px;}
.woocommerce ul.products li.product .price{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--black);padding:0 14px;display:block;}
.woocommerce ul.products li.product .button{
  margin:10px 14px 14px;width:calc(100% - 28px);background:var(--accent);color:#fff;border:none;padding:11px 14px;
  border-radius:30px;font-weight:600;font-size:12.5px;text-align:center;transition:.15s;
}
.woocommerce ul.products li.product .button:hover{background:var(--accent-dark);color:#fff;}
.woocommerce ul.products li.product .onsale{
  background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:20px;
  left:10px;top:10px;right:auto;min-height:0;min-width:0;line-height:1.4;
}
/* ---------- Paginación: números sueltos y bien separados, sin cuadros ni bordes.
   Página activa en verde suave de marca con número en blanco. Flechas "Anterior"/
   "Siguiente" con ícono y etiqueta de texto debajo, pensadas para que cualquier
   persona entienda de inmediato cómo avanzar o retroceder. ---------- */
.woocommerce nav.woocommerce-pagination{margin-top:8px;border:none !important;background:none !important;}
.woocommerce nav.woocommerce-pagination ul.page-numbers{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:10px;list-style:none;margin:0;padding:0;border:none !important;background:none !important;
}
.woocommerce nav.woocommerce-pagination ul li{margin:0;padding:0;border:none !important;background:none !important;}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 6px;
  border:none !important;background:none;border-radius:50%;
  font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--black);
  transition:.15s;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover{
  background:var(--green-soft);color:var(--brand-green-dark);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current{
  background:var(--brand-green-dark);color:#fff;
}
.woocommerce nav.woocommerce-pagination ul li a.next.page-numbers,
.woocommerce nav.woocommerce-pagination ul li a.prev.page-numbers{
  flex-direction:column;gap:3px;width:auto;min-width:64px;height:auto;padding:6px 10px;
  border-radius:14px;font-weight:600;
}
.woocommerce nav.woocommerce-pagination ul li a.next.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.prev.page-numbers:hover{
  background:var(--green-soft);
}
.los4-page-arrow-icon{display:flex;align-items:center;justify-content:center;color:var(--brand-green-dark);}
.los4-page-arrow-label{font-family:var(--font-body);font-size:10.5px;font-weight:700;color:var(--gray-text);text-transform:uppercase;letter-spacing:.3px;}
@media (max-width:480px){
  .woocommerce nav.woocommerce-pagination ul.page-numbers{gap:6px;}
  .los4-page-arrow-label{display:none;}
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--font-head);}
.woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--black);font-family:var(--font-head);}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--accent);color:#fff;border-radius:30px;font-weight:700;border:none;padding:13px 26px;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{background:var(--accent-dark);color:#fff;}
.woocommerce div.product form.cart .quantity{margin-right:10px;}
.woocommerce table.shop_table{border-radius:var(--radius);border-color:var(--gray-line);}
.woocommerce-checkout #payment ul.payment_methods{border-radius:var(--radius-sm);}
.woocommerce a.added_to_cart{border-radius:30px;background:var(--brand-green-dark);color:#fff;padding:8px 16px;margin-left:8px;}
.woocommerce span.onsale{box-shadow:none;}
.woocommerce-message, .woocommerce-info{border-top-color:var(--brand-green-dark);}
.woocommerce-message::before, .woocommerce-info::before{color:var(--brand-green-dark);}
.woocommerce-error{border-top-color:var(--accent);}
.woocommerce-error::before{color:var(--accent);}
/* El resumen de errores que WooCommerce agrega arriba del formulario de checkout
   (repite "Facturación Nombre... Facturación Apellidos..." por cada campo vacío) se
   oculta a pedido del cliente: cada campo ya se marca en rojo individualmente con su
   propio mensaje corto justo debajo, así que ese resumen es redundante y confuso. */
.woocommerce-checkout .woocommerce-NoticeGroup-checkout{display:none !important;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .main-nav{display:none;}
  .hamburger{display:block;}
  .search-box{display:none;}
  .header-actions{margin-left:auto;}
  .categories-quick{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .product-grid.small{grid-template-columns:repeat(2,1fr);}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr) !important;}
  .footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .banner-slide{flex-direction:column;text-align:center;padding:24px 20px;min-height:auto;}
  .banner-slide .b-text{order:2;}
  .banner-slide .b-img{order:1;width:44%;max-width:150px;margin:0 auto;}
  .banner-slide p{margin-left:auto;margin-right:auto;}
  .banner-slide h2{font-size:24px;}
  .banner-arrow{display:none;}
  .footer-inner{grid-template-columns:1fr;}
  .brand-name{font-size:19px;}
  .header-top{padding:16px 14px 10px;}
  .logo-spacer{display:none;}
  .brand-name{text-align:left;letter-spacing:.2px;}
  .header-bottom{gap:10px;padding:8px 14px 12px;}
  .cart-label{display:none;}
  .cart-btn{padding:0;width:44px;justify-content:center;}
  .cart-btn{width:40px;height:40px;font-size:17px;}
  .logo-img{width:64px;height:64px;padding:5px;}
}

/* ---------- Ficha de producto individual (single-product.php) ---------- */
.sp-wrap{max-width:1200px;margin:0 auto;padding:0 20px 60px;display:flex;gap:48px;}
.sp-gallery{flex:0 0 42%;background:#FAFAFA;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:30px;align-self:flex-start;}
.sp-gallery img{max-height:340px;object-fit:contain;}
.sp-info{flex:1;padding-top:6px;}
.sp-cat-tag{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-dark);background:var(--accent-soft);display:inline-block;padding:4px 10px;border-radius:20px;margin-bottom:12px;}
.sp-info h1{font-size:26px;margin-bottom:8px;line-height:1.25;}
.sp-info .product-price{font-size:23px;display:block;margin:10px 0 12px;}
.sp-desc{font-size:14px;color:#444;line-height:1.65;margin:14px 0 24px;max-width:520px;}
.sp-add-wrap{max-width:280px;margin-bottom:18px;}
.sp-note-row{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--gray-text);line-height:1.5;margin-bottom:8px;max-width:400px;}
.sp-note-row svg{flex-shrink:0;margin-top:1px;color:var(--brand-green-dark);}
.sp-suggestions{margin-top:56px;padding-bottom:20px;}
@media (max-width:900px){
  .sp-wrap{flex-direction:column;gap:24px;}
  .sp-gallery{width:100%;padding:20px;}
}

/* ================= PEDIDO RECIBIDO (confirmación de compra) ================= */
.los4-order-success{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--green-soft);border:1.5px solid var(--brand-green-dark);
  border-radius:16px;padding:32px 24px;margin:0 0 28px;
}
.los4-order-success__icon{
  width:64px;height:64px;border-radius:50%;background:var(--brand-green-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;
  margin-bottom:16px;flex-shrink:0;
}
.los4-order-success__title{
  font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--brand-green-dark);
  margin:0 0 10px;
}
.los4-order-success__text{
  font-size:15px;line-height:1.5;color:#3a3a3a;margin:0;max-width:520px;
}
@media (max-width:480px){
  .los4-order-success{padding:26px 18px;}
  .los4-order-success__icon{width:54px;height:54px;font-size:26px;}
  .los4-order-success__title{font-size:21px;}
  .los4-order-success__text{font-size:14px;}
}
.los4-order-pending{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:#FFF8E1;border:1.5px solid #E0A400;
  border-radius:16px;padding:32px 24px;margin:0 0 28px;
}
.los4-order-pending__icon{
  width:64px;height:64px;border-radius:50%;background:#E0A400;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  margin-bottom:16px;flex-shrink:0;
}
.los4-order-pending__title{
  font-family:var(--font-head);font-weight:800;font-size:26px;color:#8C6600;
  margin:0 0 10px;
}
.los4-order-pending__text{
  font-size:15px;line-height:1.5;color:#3a3a3a;margin:0;max-width:520px;
}
@media (max-width:480px){
  .los4-order-pending{padding:26px 18px;}
  .los4-order-pending__icon{width:54px;height:54px;font-size:24px;}
  .los4-order-pending__title{font-size:21px;}
  .los4-order-pending__text{font-size:14px;}
}