/* ==========================================================================
   HIGHS — Estilos de componentes
   Traducción del mockup (css/mockup.css) a las clases reales de Theme Base.
   Todo referencia los tokens de highs-tokens.css. No hay colores sueltos acá.

   Orden de trabajo: componentes compartidos primero (header, footer, card).
   ========================================================================== */

/* ==========================================================================
   PRUEBA: fondo del sitio = mismo BLANCO que el fondo de las imágenes.
   (override del token crema #FAFAF6 → #FFFFFF). Para revertir: borrar este bloque.
   ========================================================================== */
:root{ --highs-bg: #FFFFFF; }

/* ==========================================================================
   BASE / TIPOGRAFÍA GLOBAL
   ========================================================================== */
body{
  font-family: var(--highs-sans);
  background: var(--highs-bg);
  color: var(--highs-ink);
  letter-spacing: var(--highs-track-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5{ font-family: var(--highs-sans); letter-spacing: var(--highs-track-title); font-weight: 500; }

/* Utilidad mono compartida (además de .highs-mono de tokens) */
.highs-u-mono{
  font-family: var(--highs-mono);
  text-transform: uppercase;
  letter-spacing: var(--highs-track-mono);
}

/* Botones comerciales: esquina viva (--highs-radius-btn: 0) */
.highs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--highs-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  padding:16px 34px; border-radius: var(--highs-radius-btn);
  border:1px solid var(--highs-ink); background:var(--highs-ink); color:var(--highs-bg);
  text-decoration:none; cursor:pointer; transition:.18s;
}
.highs-btn:hover{ background:var(--highs-ink-hover); border-color:var(--highs-ink-hover); }
.highs-btn.is-ghost{ background:transparent; color:var(--highs-ink); }
.highs-btn.is-ghost:hover{ background:var(--highs-ink); color:var(--highs-bg); }
.highs-btn.is-light{ background:transparent; border-color:rgba(255,255,255,.85); color:#fff; }
.highs-btn.is-light:hover{ background:#fff; color:var(--highs-ink); }
.highs-btn.is-wide{ width:100%; }


/* ==========================================================================
   HEADER
   - Barra de anuncios (.section-advertising) → barra oscura mono
   - Nav inline en desktop (8 entradas), hamburguesa en mobile
   - Carrito como pastilla (única forma con radius-pill)
   - Transparente sobre el hero en home; sólido con borde inferior en el resto
   ========================================================================== */

.section-advertising{
  background: var(--highs-ink-2);
  color: var(--highs-bg);
}
.section-advertising .col{
  font-family: var(--highs-mono);
  text-transform: uppercase;
  letter-spacing: var(--highs-track-mono);
  font-size: 10px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.section-advertising a.link-contrast{ color: var(--highs-bg); text-decoration:none; }

/* Contenedor del header */
.highs-head{
  background: var(--highs-bg);
  border-bottom: 1px solid var(--highs-line);
  position: relative;
}
.highs-head > .container{ padding-top:18px; padding-bottom:18px; }

/* Logo (imagen): el diseño lo mantiene chico. Los íconos son <svg>, no <img>,
   así que este selector afecta solo al logo. */
.highs-head .logo-image img,
.highs-head img.logo,
.head-main .logo-img{ max-height:40px !important; width:auto; }

/* Nav inline desktop */
.highs-nav{ gap:20px; flex-wrap:wrap; align-items:center; }
.highs-nav-link{
  font-family: var(--highs-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10.5px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.highs-nav-link:hover{ border-bottom-color: currentColor; }

/* Utilidades (buscador + carrito) */
.highs-head .utilities-container{
  display:flex; align-items:center; gap:16px; justify-content:flex-end;
}
.highs-head .utilities-link{ color: inherit; }
.highs-head .utilities-link svg *{ fill: currentColor; }

/* Carrito = pastilla (radius-pill) */
.highs-head #ajax-cart a{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--highs-ink); color: var(--highs-bg);
  border-radius: var(--highs-radius-pill);
  padding: 6px 12px;
  font-family: var(--highs-mono); text-transform:uppercase; letter-spacing:.08em; font-size:9.5px;
  text-decoration:none; line-height:1;
}
.highs-head #ajax-cart a svg{ width:15px; height:15px; }
.highs-head #ajax-cart a svg *{ fill: currentColor; }
.highs-head .cart-widget-amount{ font-family: var(--highs-mono); }

/* Estado transparente sobre el hero (home) */
.highs-head.head-transparent{
  background: transparent;
  border-bottom-color: transparent;
  color: var(--highs-bg);
}
.highs-head.head-transparent .highs-nav-link,
.highs-head.head-transparent .utilities-link{ color: var(--highs-bg); }
.highs-head.head-transparent #ajax-cart a{
  background: var(--highs-bg); color: var(--highs-ink);
}
/* Logo: subís la versión NEGRA en el panel; sobre el hero se invierte a blanco */
.highs-head.head-transparent .logo-image img{ filter: brightness(0) invert(1); }


/* ==========================================================================
   CARD DE PRODUCTO (grid/item.tpl)
   - Foto 3/4 sobre --highs-tile
   - Nombre en mayúsculas
   - TRES precios: comparación tachado, precio actual, y transferencia (accent)
   - Sin botón "agregar" en la grilla (la card lleva al detalle: evita pedidos
     con el color equivocado)
   - Swatches de color
   ========================================================================== */

.highs-card{ min-width:0; }
.highs-card .item-image{
  aspect-ratio: 2/3;          /* iguala la proporción de las fotos (2:3) → sin gris a los costados */
  background: #ececec;        /* fondo GRIS claro: el producto flota sobre gris (el multiply funde el blanco de la foto) */
  overflow: hidden;
}
/* La foto va CENTRADA y más CHICA dentro del cuadro gris (el padding deja aire
   gris alrededor; object-fit:contain la reduce dentro del área con padding). */
.highs-card .item-image img{
  object-fit: contain !important;
  padding: 6% 9%;             /* aire gris alrededor → producto centrado (menos aire = producto un poco más grande) */
  box-sizing: border-box;     /* el padding come hacia adentro, no agranda la foto */
  mix-blend-mode: multiply;   /* integra el fondo blanco de la foto con el tile */
}
/* HIGHS: en las páginas con grilla NubeSDK (Productos/categorías/shop) la card usa
   un slider (swiper) cuyo transform crea un CONTEXTO AISLADO → el multiply de la
   foto se mezclaba contra BLANCO y quedaba un rectángulo blanco dentro del gris.
   Dándole fondo gris a las capas del slider, la foto multiplica contra gris y el
   blanco desaparece (queda igual que las tarjetas del home). */
.highs-card .js-product-item-slider-container-private,
.highs-card .product-item-slider-wrapper,
.highs-card .js-product-item-slider-slide-private,
.highs-card .item-image-slide{ background:#ececec !important; }
/* HIGHS: cuadros más GRANDES y MENOS separación entre tarjetas → se reduce el
   "gutter" (espacio entre columnas) de la grilla de secciones del home.
   Sirve para Bootstrap 5 (--bs-gutter-x) y para grid con padding fijo (fallback). */
.section-featured-home .col-12 > .row{
  --bs-gutter-x: 16px;
  margin-left:-8px !important;
  margin-right:-8px !important;
}
.section-featured-home .col-12 > .row > [class*="col"],
.section-featured-home .col-12 > .row > .highs-card{
  padding-left:8px !important;
  padding-right:8px !important;
}

/* TEXTOS de la tarjeta: alineados a la IZQUIERDA (menos las cuotas) y más legibles */
.highs-card,
.highs-card .item-description,
.highs-card .item-link,
.highs-card .item-name,
.highs-card .text-accent{ text-align: left !important; }

.highs-card .item-name{
  font-weight:600; font-size:16px; letter-spacing:-.01em; text-transform:uppercase;
  margin-top:14px; line-height:1.2;
}

/* Precios */
.highs-card .item-price-container{
  font-family: var(--highs-mono); font-size:18px;   /* precio más grande y legible */
  display:flex; align-items:baseline; gap:10px; margin-top:6px; justify-content:flex-start;
}
.highs-card .item-price{ color: var(--highs-ink); font-weight:500; }
.highs-card .price-compare{
  order:2;                      /* el tachado va a la derecha del precio actual, como en el mockup */
  font-size:13px; color: var(--highs-mute);
  text-decoration: line-through; text-decoration-thickness:1px;
}
/* Tercer precio: transferencia (componente payment-discount-price → .text-accent) */
.highs-card .text-accent{
  font-family: var(--highs-mono); font-size:13.5px; letter-spacing:.02em;
  color: var(--highs-accent); margin-top:7px;
}

/* Etiqueta ("new in", oferta, etc.) — flota arriba a la izquierda de la foto */
.highs-card .item-image{ position:relative; }
.highs-card .js-labels-floating-group{
  position:absolute; top:12px; left:12px; z-index:2; display:flex; flex-direction:column; gap:6px;
}
.highs-card .label{
  display:inline-block;
  font-family: var(--highs-mono); font-size:9.5px; letter-spacing:.06em;
  background: var(--highs-bg); color: var(--highs-ink);
  border:1px solid rgba(17,17,17,.3); padding:5px 9px; text-transform:none;
}
.highs-card .label-accent{ color: var(--highs-accent); border-color: var(--highs-accent); }

/* Swatches de color = PUNTITOS delicados DEBAJO de la foto.
   El theme base los pone como barra oscura absoluta SOBRE la imagen: lo anulamos.
   (en item.tpl se movió el include fuera de la capa flotante, a .item-description) */
.highs-card .item-colors{
  position: static !important;            /* saca la barra de encima de la imagen */
  background: transparent !important;     /* elimina la barra gris/oscura */
  width: auto !important; height: auto !important;
  padding: 0 !important; margin: 10px 0 0 !important;
  display: flex !important; align-items: center; gap: 7px; flex-wrap: wrap;
  border-radius: 0 !important;
}
/* el bloque de puntitos del theme está oculto en mobile (d-none): lo mostramos siempre */
.highs-card .item-colors .d-none.d-md-block{ display: flex !important; align-items: center; gap: 7px; }
.highs-card .item-colors-bullet{
  width: 13px !important; height: 13px !important;
  min-width: 13px !important; min-height: 13px !important;   /* el theme base fuerza min-width:18px */
  display: inline-block; padding: 0 !important; margin: 0 !important;
  border: 1px solid rgba(17,17,17,.20); border-radius: 50% !important;   /* círculo perfecto */
  box-shadow: none; cursor: pointer; transition: transform .15s;
}
.highs-card .item-colors-bullet:hover{ transform: scale(1.18); }
/* ocultar el link de texto "N colores": mostramos SIEMPRE los puntitos de color */
.highs-card .item-colors-bullet-text{ display: none !important; }
.highs-card .item-colors-bullet.selected,
.highs-card .js-color-variant.selected{ outline: 1px solid var(--highs-ink); outline-offset: 2px; }

/* Cuotas: mono, alineado a la IZQUIERDA como el resto */
.highs-card .item-installments{
  font-family: var(--highs-mono); font-size:13.5px; letter-spacing:.02em; color:var(--highs-mute);
  margin-top:8px; text-align:left !important;
}
/* "6" (número de cuotas) y la palabra "cuotas" en ROJO */
.highs-card .item-installments .product-installment-amount,
.highs-card .item-installments .highs-cuotas-red{
  color: #CE1B1B !important; font-weight: 600;
}


/* ==========================================================================
   FOOTER (footer.tpl)
   - Fondo oscuro (--highs-ink-2), texto claro
   - Claim + columnas de enlaces + barra inferior
   - Se conservan intactas las piezas legales de Tienda Nube:
     powered_by, copyright, claim-info (Defensa del Consumidor / arrepentimiento)
   ========================================================================== */

.highs-ftr{
  background: var(--highs-ink-2);
  color: var(--highs-bg);
  padding: 38px var(--highs-pad) 20px;   /* más compacto */
}

/* Fila ÚNICA: marca+claim | contacto | redes */
.highs-fcols{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:48px; padding:6px 0 22px; border-bottom:1px solid var(--highs-line-dark);
}
.highs-fcol-brand{
  flex:1 1 300px; min-width:220px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;   /* logo + frase en el MISMO renglón */
}
.highs-fcol-brand .highs-ftr-logo{ margin:0 !important; flex:0 0 auto; }
.highs-fcol-brand .highs-ftr-claim{ margin:0 !important; max-width:none; }
.highs-fcol-contact, .highs-fcol-social{ flex:0 0 auto; }
.highs-fcols h5{
  font-family: var(--highs-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:400; margin-bottom:12px; color: var(--highs-bg);
}
/* Marca + frase (ahora dentro de la fila, más chica) */
.highs-fcol-brand .highs-ftr-word{
  display:block; font-size:16px; letter-spacing:.14em; color:var(--highs-bg); margin-bottom:10px;
}
/* Logo (mismo del encabezado) en el footer: blanco sobre fondo oscuro */
.highs-ftr-logo{ margin-bottom:14px; line-height:0; }
.highs-ftr-logo img,
.highs-ftr-logo svg{ height:30px; width:auto; filter: brightness(0) invert(1); }
.highs-ftr-logo a{ display:inline-block; line-height:0; }
.highs-ftr-claim{
  font-weight:500; font-size:19px; letter-spacing:var(--highs-track-title);
  max-width:360px; margin:0; line-height:1.15;
}

/* Contacto: ÍCONO + texto en la MISMA línea, y los 3 datos en UN renglón horizontal */
.highs-fcol-contact ul,
.highs-fcol-contact li{ list-style:none; margin:0; padding:0; text-align:left; }
.highs-fcol-contact .contact-info{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
}
.highs-fcol-contact .contact-item{
  display:flex; align-items:center; gap:8px;
  margin-bottom:0; color:rgba(250,250,246,.62); font-size:13px; white-space:nowrap;
}
.highs-fcol-contact .contact-item svg{ margin:0 !important; flex:0 0 auto; }
.highs-fcol-contact .contact-link{ display:inline; color:rgba(250,250,246,.62); text-decoration:none; }
.highs-fcol-contact .contact-link:hover{ color:var(--highs-bg); }
.highs-fcol-contact svg *{ fill: rgba(250,250,246,.62); }

/* Redes: íconos claros */
.highs-fcol-social .highs-social{ display:flex; gap:14px; align-items:center; }
.highs-fcol-social .social-icon{ color:rgba(250,250,246,.72); }
.highs-fcol-social .social-icon:hover{ color: var(--highs-bg); }
.highs-fcol-social .social-icon svg{ width:20px; height:20px; }
.highs-fcol-social .social-icon svg *{ fill: currentColor; }

/* Logos de pago/envío y sellos: aire arriba */
.highs-ftr-logos,
.highs-ftr-seals{ padding-top:20px; }

/* TODOS los logos (pagos + envíos) en UN renglón, repartidos a lo ancho */
.highs-logos-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 6px;
}
.highs-logos-row .icon-logo{
  height:30px !important; width:auto !important; margin:0 !important; flex:0 0 auto;
}

/* Barra inferior: copyright + Defensa del Consumidor TODO en un renglón */
.highs-fbot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px;
  padding-top:16px;
  font-family: var(--highs-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(250,250,246,.72);
}
.highs-fbot a{ color:rgba(250,250,246,.7); text-decoration:none; }
.highs-fbot a:hover{ color: var(--highs-bg); }
.highs-fbot .powered-by{ display:inline-block; }
/* copyright y defensa del consumidor en la MISMA línea */
.highs-fbot .copyright{ display:inline; }
.highs-fbot .copyright .highs-claim,
.highs-fbot .copyright .highs-claim *{ display:inline !important; margin-top:0 !important; }
.highs-fbot .copyright .highs-claim{ margin-left:8px; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px){
  .highs-ftr{ padding:30px var(--highs-pad-mob) 22px; }
  .highs-fcols{ gap:24px; }
  .highs-fcol-brand{ flex:1 1 100%; }
  .highs-fbot{ justify-content:flex-start; }
  .highs-card .item-name{ font-size:14px; }
  .highs-card .item-price-container{ font-size:16px; }
}

/* En desktop: nav inline visible, hamburguesa oculta (se apoya en las
   utilidades d-none/d-md-* del propio Theme Base para el resto). */
@media (min-width: 768px){
  .highs-nav{ display:flex; }
}


/* ==========================================================================
   BOTONES Y FORMULARIOS GLOBALES (Theme Base .btn / inputs)
   Botones comerciales: esquina viva + mono. Coherente en toda la tienda.
   ========================================================================== */
.btn,
.btn-primary,
input[type="submit"].btn,
.js-addtocart{
  font-family: var(--highs-mono);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 11px;
  border-radius: var(--highs-radius-btn) !important;
  background: var(--highs-ink);
  border: 1px solid var(--highs-ink);
  color: var(--highs-bg);
  padding: 15px 30px;
  transition: .18s;
}
.btn:hover,
.btn-primary:hover,
.js-addtocart:hover{ background:var(--highs-ink-hover); border-color:var(--highs-ink-hover); color:var(--highs-bg); }
.btn-secondary,
.btn-default,
.btn.btn-outline{
  background: transparent; color: var(--highs-ink); border:1px solid var(--highs-ink);
}
.btn-small{ padding:11px 20px; font-size:10px; }
.btn-block{ width:100%; }

/* Inputs / selects */
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], select, textarea{
  border-radius: 0;
  border: 1px solid var(--highs-line);
  font-family: var(--highs-sans);
}

/* Encabezados de página (page-header.tpl) */
.page-header, .category-header{ margin-bottom: 8px; }
.page-header h1, .page-header h2, .category-header h1, .category-header h2{
  font-weight:500; font-size:40px; letter-spacing:var(--highs-track-title);
}
@media (max-width:767px){
  .page-header h1, .category-header h1{ font-size:27px; }
}


/* ==========================================================================
   HOME
   ========================================================================== */

/* Hero / slider a sangre con CTA.
   TODA la cadena del banner con la MISMA altura (si no, el contenedor 100vh del
   theme base deja crema por debajo de la imagen). La imagen llena el 100%. */
.section-slider,
.section-slider .swiper-container,
.section-slider .swiper-wrapper,
.section-slider .slider-slide{ height:calc(min(78vh,620px) + 75px) !important; }  /* +2cm */
.section-slider{ margin-bottom:28px !important; }   /* menos aire hasta los productos */
.section-slider .slider-slide{ position:relative; }
.section-slider .slider-image{ width:100%; height:100% !important; object-fit:cover; }
.section-slider .swiper-text{
  position:absolute; left:0; right:0; bottom:74px; text-align:center; color:#fff; padding:0 var(--highs-pad);
}
.section-slider .swiper-title{ font-weight:500; font-size:clamp(34px,6vw,72px); letter-spacing:var(--highs-track-title); line-height:1; }
.section-slider .swiper-description{ font-size:15px; letter-spacing:var(--highs-track-body); }
.section-slider .swiper-btn{
  display:inline-flex; margin-top:20px; background:transparent; border:1px solid rgba(255,255,255,.85); color:#fff;
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.13em; font-size:11px; padding:15px 30px; border-radius:0;
}
/* Banner con botones (1 o 2 links). Van FUERA de .swiper-text (que tiene el
   transform de parallax de Swiper) → se anclan directo al slide, abajo-izquierda. */
.section-slider .slider-slide > .highs-banner-btns{
  position:absolute; left:clamp(20px, 4vw, 56px); bottom:44px; z-index:3;
  display:flex; flex-wrap:wrap; gap:14px; max-width:calc(100% - 40px);
}
.section-slider .highs-banner-btn{
  margin-top:0 !important;
  background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.92) !important;
  border-radius:10px !important;                 /* outline con esquinas redondeadas (ref SHOP NOW) */
  transition: transform .14s var(--highs-ease-out), background .2s ease, border-color .2s ease, color .2s ease;
}
.section-slider .highs-banner-btn:hover{ background:#fff !important; border-color:#fff !important; color:var(--highs-ink) !important; }
.section-slider .highs-banner-btn:active{ transform:scale(.97); }
/* Mobile: botón compacto (sin el min-height:48 que lo agrandaba) y bien pegado a la esquina */
@media (max-width:767px){
  .section-slider .slider-slide > .highs-banner-btns{ left:18px; bottom:26px; gap:10px; }
  .section-slider .highs-banner-btn{
    min-height:0 !important; height:auto !important;
    padding:12px 20px !important; font-size:11px !important; line-height:1 !important;
  }
}
@media (max-width:767px){
  .section-slider,
  .section-slider .swiper-container,
  .section-slider .swiper-wrapper,
  .section-slider .slider-slide{ height:calc(66vh + 75px) !important; }  /* +2cm */
}

/* Sección de productos destacados */
.section-featured-home{ padding:var(--highs-sec) var(--highs-pad); }
.section-featured-home h3{
  font-weight:500; font-size:38px; letter-spacing:var(--highs-track-title); text-align:left; margin-bottom:30px;
}
@media (max-width:767px){
  .section-featured-home{ padding:var(--highs-sec-mob) var(--highs-pad-mob); }
  .section-featured-home h3{ font-size:26px; }
}

/* Barra informativa / trust */
.section-informative-banners{
  border-top:1px solid var(--highs-line); border-bottom:1px solid var(--highs-line);
}
.section-informative-banners .banner-service,
.section-informative-banners [data-store] .swiper-slide{
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.1em; font-size:9.5px; text-align:center; padding:22px 12px;
}

/* Welcome message */
.section-welcome, .welcome-message{ text-align:center; padding:var(--highs-sec) var(--highs-pad); }

/* Newsletter (compacto: ocupa menos alto) */
.newsletter{ text-align:center; padding:30px 0 34px; }
.newsletter h3{ font-weight:500; font-size:26px; letter-spacing:var(--highs-track-title); margin-bottom:8px; }
.newsletter p{ color:rgba(250,250,246,.6); font-size:13.5px; margin-bottom:16px; }
.newsletter .input-append{ display:flex; max-width:440px; margin:0 auto; }
.newsletter input[type="email"], .newsletter .form-control{
  flex:1; border:1px solid var(--highs-line); border-right:none; padding:15px; font-family:var(--highs-mono); font-size:11px;
}
.newsletter .newsletter-btn{ border-radius:0; }


/* ==========================================================================
   FICHA DE PRODUCTO (product.tpl)
   ========================================================================== */
.section-single-product{ padding-top:24px; }
.section-single-product > .col{ position:sticky; top:22px; }   /* panel de compra fijo mientras scrollea la galería */
@media (max-width:767px){ .section-single-product > .col{ position:static; } }

#single-product h1,
.section-single-product h1,
.js-product-name{
  font-weight:500; font-size:32px; letter-spacing:var(--highs-track-title); text-transform:uppercase; line-height:1.06;
}
/* Precios en la ficha */
#single-product .js-price-display, .section-single-product .js-price-display{
  font-family:var(--highs-mono); font-size:27px;
}
#single-product .js-compare-price-display, .section-single-product .price-compare{
  font-family:var(--highs-mono); font-size:14px; color:var(--highs-mute); text-decoration:line-through;
}
#single-product .text-accent{ font-family:var(--highs-mono); color:var(--highs-accent); letter-spacing:.05em; }
/* Selectores de variantes / labels mono */
#single-product .form-label, #single-product .variation-label{
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.12em; font-size:9.5px; color:var(--highs-mute);
}


/* ==========================================================================
   LISTADO / CATEGORÍAS (category.tpl)
   ========================================================================== */
.category-body{ padding-bottom:70px; }
.category-controls{
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.1em; font-size:10px;
  padding:18px 0; border-bottom:1px solid var(--highs-line); margin-bottom:24px;
}
.category-controls .filter-link{ color:var(--highs-ink); text-decoration:none; }
.category-controls select, .category-controls .form-control{
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.1em; font-size:10px; border:1px solid var(--highs-line);
}
/* la grilla usa .highs-card (item.tpl) → ya está estilada */


/* ==========================================================================
   CARRITO (cart.tpl)
   ========================================================================== */
.cart-body{ padding-bottom:60px; }
.cart-body .cart-item, .js-ajax-cart-list .cart-item{
  border-bottom:1px solid var(--highs-line); padding:20px 0;
}
.cart-body .item-name, .cart-item .item-name{
  font-weight:500; text-transform:uppercase; letter-spacing:-.02em; font-size:14px;
}
.cart-totals, .cart-totals-container{
  border:1px solid var(--highs-line); padding:26px;
}
.cart-totals .cart-total-line, .cart-totals .row{
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px;
}
.cart-body .btn, .cart-totals .btn{ width:100%; }


/* ==========================================================================
   INSTITUCIONAL (page.tpl)
   ========================================================================== */
.user-content{ padding:20px var(--highs-pad) 70px; }
.user-content p{ font-size:15.5px; line-height:1.8; margin-bottom:18px; }
.user-content h2, .user-content h3{ letter-spacing:var(--highs-track-title); margin:24px 0 12px; }


/* ==========================================================================
   PUNTO 4 — DETALLES
   ========================================================================== */

/* --- Ficha: galería --- */
.js-swiper-product .slider-slide,
.product-image-container .slider-slide{ background:var(--highs-tile); }
/* Galería apilada (settings.scroll_product_images → .product-detail-slider) */
.product-detail-slider .swiper-wrapper{ display:block; }
.product-detail-slider .js-product-slide{ margin-bottom:12px; }
.js-swiper-product-pagination.swiper-pagination{ margin-top:10px; }

/* --- Ficha: descripción, specs (tablas), reseñas --- */
.product-description{ border-top:1px solid var(--highs-line); padding-top:24px; margin-top:24px; }
.product-description h5{ font-weight:500; font-size:16px; letter-spacing:-.03em; }
.product-description table{ width:100%; border-collapse:collapse; background:var(--highs-tile); margin:14px 0; }
.product-description td, .product-description th{ padding:9px 12px; border-bottom:1px solid rgba(17,17,17,.13); font-size:13.5px; text-align:left; }
.product-description td:first-child{ font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.06em; font-size:10px; color:var(--highs-mute); width:46%; }
#reviewsapp:not(:empty){ border-top:1px solid var(--highs-line); margin-top:28px; padding-top:24px; }
.divider{ border-top:1px solid var(--highs-line); margin:22px 0; height:0; }
.free-shipping-message{ font-family:var(--highs-mono); font-size:10px; letter-spacing:.05em; }
.free-shipping-message .text-accent{ color:var(--highs-accent); }
/* Aviso "Entrega en el día en CABA/GBA" (ficha) */
.highs-sameday{ margin-top:-8px; }
.highs-sameday-in{ display:inline-flex; align-items:center; gap:8px;
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.05em; font-size:11px; line-height:1.3;
  color:var(--highs-mute); }
.highs-sameday-in .text-accent{ color:var(--highs-accent); }
.highs-sameday-ico{ color:var(--highs-accent); flex:0 0 auto; }
.product-detail-installments,
.js-product-payments-container{ font-family:var(--highs-mono); font-size:11px; letter-spacing:.04em; color:var(--highs-mute); }

/* --- Ficha: barra de compra fija en mobile --- */
.highs-buybar{ display:none; }
@media (max-width:767px){
  .highs-buybar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    /* vidrio translúcido oscuro (igual que el menú/carrito) */
    background:rgba(18,18,20,.86);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,.12);
    padding:10px 14px; gap:12px; align-items:center;
    box-shadow:0 -6px 20px rgba(0,0,0,.25);
  }
  .highs-buybar .p{ font-family:var(--highs-mono); font-size:15px; flex:1; color:#fff; }
  /* botón "Comprar" translúcido (no negro sólido) */
  .highs-buybar .btn{
    flex:0 0 auto; padding:14px 24px;
    background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.38) !important;
    color:#fff !important;
  }
  .highs-buybar .btn *{ color:#fff !important; }
  body.template-product{ padding-bottom:78px; }
  /* Que el WhatsApp flotante no quede tapado por la barra de compra en la ficha */
  body.template-product .btn-whatsapp,
  body.template-product .js-btn-fixed-bottom{ bottom: 84px; }
  .highs-buybar{ z-index: 60; }
}

/* --- Listado: filtros como barra lateral fija en desktop --- */
@media (min-width:768px){
  .highs-cat-layout{ display:grid; grid-template-columns:212px 1fr; gap:40px; align-items:start; }
}
.highs-filters-aside .filters-container{ margin-bottom:26px; padding-top:20px; border-top:1px solid var(--highs-line); }
.highs-filters-aside .filters-container h6{
  font-family:var(--highs-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--highs-mute); margin-bottom:13px;
}
.highs-filters-aside a{ color:var(--highs-ink); text-decoration:none; font-size:13.5px; }
.highs-filters-aside a:hover{ color:var(--highs-accent); }
/* En desktop el link "Filtrar" (modal) sobra: la barra lateral ya está */
@media (min-width:768px){ .category-controls .filter-link{ display:none; } }

/* --- Estados: 404 --- */
#404{ padding:20px var(--highs-pad) 70px; text-align:center; }
#404 p{ color:var(--highs-mute); font-size:15px; }
#404 .row.mt-3{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; }
@media (max-width:767px){ #404 .row.mt-3{ grid-template-columns:1fr 1fr; } }

/* --- Contacto / cuenta / blog: contenedores legibles --- */
.contact-form, .js-contact-form{ max-width:560px; }
.contact-form .btn, .js-contact-form .btn{ width:auto; }
.account-header, .blog-header{ margin-bottom:20px; }
.blog-article-item{ border-bottom:1px solid var(--highs-line); padding:24px 0; }
.blog-article-item h2, .blog-article-item h3{ letter-spacing:var(--highs-track-title); }


/* ==========================================================================
   AJUSTES DE AUDITORÍA (bajo riesgo)
   ========================================================================== */

/* A11y: foco visible en todos los interactivos (navegación por teclado) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.js-addtocart:focus-visible{
  outline: 2px solid var(--highs-accent);
  outline-offset: 2px;
}
/* Sobre el hero (header transparente) el foco tiene que verse en claro */
.highs-head.head-transparent a:focus-visible,
.highs-head.head-transparent button:focus-visible{
  outline-color: var(--highs-bg);
}

/* Robustez: nombre de producto largo no rompe la grilla (máx 2 líneas) */
.highs-card .item-name{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;   /* alinea las cards aunque el nombre sea de 1 línea */
}

/* Robustez: botón deshabilitado (sin stock) claramente distinto del activo */
.btn[disabled],
.btn:disabled,
.js-addtocart[disabled],
.js-addtocart.nostock{
  background: var(--highs-tile) !important;
  border-color: var(--highs-tile) !important;
  color: var(--highs-mute) !important;
  cursor: not-allowed;
}

/* Estados vacíos / avisos: marco limpio del sistema (usa los .alert de base-theme) */
.alert{
  border: 1px solid var(--highs-line);
  border-radius: 0;
  background: var(--highs-bg);
  color: var(--highs-ink);
  padding: 18px 20px;
  font-size: 14px;
}
.alert-warning, .alert-danger{ border-left: 2px solid var(--highs-accent); }
.alert-success{ border-left: 2px solid var(--highs-accent); }
/* Categoría vacía / “Próximamente” y textos de estado centrados */
.category-body .text-center,
.search-results .text-center{
  padding: 48px 20px; color: var(--highs-mute); font-size: 15px;
}


/* ==========================================================================
   ADAPTACIÓN A BRASILIA (tienda real de HIGHS)
   Mapea el diseño HIGHS a las clases reales del theme Brasilia, para aplicarlo
   por CSS sin tocar plantillas. Selectores verificados en www.highs.com.ar.
   ========================================================================== */

/* --- Cinta de anuncios: de roja a oscura mono --- */
.adbar{
  background: var(--highs-ink-2) !important;
  color: var(--highs-bg) !important;
  border: none !important;
}
.adbar a, .adbar-message, .adbar-message a{
  color: var(--highs-bg) !important;
  font-family: var(--highs-mono);
  text-transform: uppercase;
  letter-spacing: var(--highs-track-mono);
  font-size: 10px;
}

/* --- Header --- */
/* Se mantiene el header oscuro de Brasilia (combina con la cinta oscura y el
   sistema ink). NO forzamos fondo claro para no dejar el texto blanco invisible. */
/* Nav horizontal desktop en mono */
.nav-list-link{
  font-family: var(--highs-mono) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
}

/* --- Card de producto (Brasilia: .product-item) --- */
.product-item-image-container,
.product-item-image-wrapper{ background: var(--highs-tile); }
.product-item-image{
  object-fit: contain !important;
  mix-blend-mode: multiply;
  padding: 12px;
}
.product-item-name{
  font-family: var(--highs-sans);
  font-weight: 500; text-transform: uppercase; letter-spacing: -.02em; font-size: 14px;
}
.product-item-price-container{ font-family: var(--highs-mono); }
.product-item-price{ font-family: var(--highs-mono); color: var(--highs-ink); font-size: 14px; }
.product-item-price-compare{
  font-family: var(--highs-mono); color: var(--highs-mute);
  text-decoration: line-through; font-size: 11.5px;
}
.product-item-discount,
.product-item-discount.text-accent{
  font-family: var(--highs-mono); color: var(--highs-accent) !important;
  font-size: 10px; letter-spacing: .04em;
}

/* --- Footer: oscuro con texto claro --- */
.js-footer{
  background: var(--highs-ink-2) !important;
  color: var(--highs-bg);
}
.js-footer a{ color: rgba(250,250,246,.72); }
.js-footer a:hover{ color: var(--highs-bg); }
.footer-menu-title,
.js-footer-news-title{
  font-family: var(--highs-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
  color: var(--highs-bg);
}
.footer-secondary-info{
  font-family: var(--highs-mono); font-size: 10px; letter-spacing: .06em;
  color: rgba(250,250,246,.72);
}
.footer-secondary-info a{ color: rgba(250,250,246,.8); }


/* ==========================================================================
   ARREGLOS DE HEADER (feedback Facu): color de marca, logo blanco, nav 1 fila
   ========================================================================== */

/* Header SÓLIDO oscuro (color de marca), en toda la tienda incl. home */
.head-main,
.js-head-main.head-main,
.head-main.head-colors,
.head-main.head-transparent,
.head-main.head-transparent-fixed,
.head-main.head-transparent-absolute{
  background: var(--highs-ink-2) !important;
  border-bottom: none !important;
}
/* Textos e íconos del header en claro */
.head-main,
.head-main a,
.head-main .nav-list-link,
.head-main .utilities-container,
.head-main .utilities-container a,
.head-main .js-logo-container a{
  color: var(--highs-bg) !important;
}
.head-main svg *{ fill: var(--highs-bg) !important; }
/* Logo del header en blanco (sea imagen clara u oscura) */
.head-main .logo-image img,
.head-main .js-logo-container img{
  filter: brightness(0) invert(1);
}

/* Nav en UNA sola fila (no dos pisos) */
.nav-desktop-list,
.nav-desktop-main,
.nav-desktop-secondary,
.js-nav-desktop-container,
ul.nav-list,
.nav-list{
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow: visible;
}
.nav-list-link{
  font-size: 10px !important;
  letter-spacing: .08em !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
  white-space: nowrap;
}

/* Buscador del header más discreto (ícono, no barra grande) para dar aire al nav */
.head-main .search-container .js-search-input,
.head-main .search-form input[type="text"]{
  max-width: 220px;
}


/* ==========================================================================
   FIX logo (clase real .logo-img) + nav una fila (feedback)
   ========================================================================== */
.head-main .logo-img,
.head-main .logo-container img,
.head-main .js-logo-container img{
  filter: brightness(0) invert(1) !important;   /* logo negro -> blanco sobre header oscuro */
}
/* Nav: intentar una sola fila (todo el ancho, sin wrap, centrado) */
.js-nav-desktop-container,
.nav-desktop-container,
.nav-desktop-color-container{ width:100% !important; }
.nav-desktop-list,
.nav-desktop-main,
ul.nav-list{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center;
  gap: 6px;
}
.nav-list-link{ font-size:10px !important; letter-spacing:.06em !important; padding:0 8px !important; white-space:nowrap; }


/* ==========================================================================
   NAV EN UNA SOLA FILA (ancho completo, centrado) — feedback Facu
   El nav real es .highs-nav (lo agregamos en header.tpl). Estaba en una col
   de 1/3 con flex-wrap:wrap → 2 pisos. Lo pasamos a fila propia full-width.
   ========================================================================== */
@media (min-width: 768px){
  .highs-head .row.no-gutters{ flex-wrap: wrap !important; }
  .highs-head .row.no-gutters > .col.d-flex.align-items-center{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: 5;                 /* debajo del logo/utilidades */
    margin-top: 10px;
    justify-content: center !important;
  }
  .highs-nav{
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 22px !important;
    width: 100%;
  }
  .highs-nav-link{ white-space: nowrap; font-size: 11px !important; }
}


/* ==========================================================================
   ANCHO COMPLETO (feedback Facu): sacar el encajonado, usar todo el ancho
   con el padding lateral del diseño (--highs-pad). Secciones a sangre.
   ========================================================================== */
.container{
  max-width: 100% !important;
  padding-left: var(--highs-pad) !important;
  padding-right: var(--highs-pad) !important;
}
@media (max-width: 767px){
  .container{
    padding-left: var(--highs-pad-mob) !important;
    padding-right: var(--highs-pad-mob) !important;
  }
}


/* ==========================================================================
   HEADER FINAL (referencia Facu): transparente total, logo centro, nav IZQ 1 fila
   Este bloque va último → gana en cascada sobre los anteriores.
   ========================================================================== */
/* Transparente sobre el hero (home) — más específico que el .head-main oscuro */
.head-main.head-transparent,
.head-main.head-transparent-fixed,
.head-main.head-transparent-absolute{
  background: transparent !important;
  border-bottom: none !important;
}
@media (min-width: 768px){
  /* Fila del header en una línea, nav a la izquierda (deshacer el full-width-abajo) */
  .highs-head .row.no-gutters{ flex-wrap: nowrap !important; align-items: center; }
  .highs-head .row.no-gutters > .col.d-flex.align-items-center{
    flex: 1 1 auto !important;
    max-width: none !important;
    order: 0 !important;
    margin-top: 0 !important;
    justify-content: flex-start !important;
  }
  .highs-nav{
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    width: auto;
  }
  .highs-nav-link{
    font-size: 10px !important;
    letter-spacing: .06em !important;
    padding: 0 !important;
    white-space: nowrap;
  }
}


/* ==========================================================================
   CORRECCIÓN header: restaurar 3 columnas (logo centrado) + nav izq chico
   ========================================================================== */
@media (min-width: 768px){
  .highs-head .row.no-gutters{ flex-wrap: nowrap !important; }
  .highs-head .row.no-gutters > .col{
    flex: 1 1 0 !important;
    max-width: none !important;
    order: 0 !important;
    margin-top: 0 !important;
  }
  .highs-head .row.no-gutters > .col.d-flex.align-items-center{ justify-content: flex-start !important; }
  .highs-head .row.no-gutters > .col.text-center{ text-align: center !important; }
  .highs-nav{ flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 11px !important; }
  .highs-nav-link{ font-size: 9px !important; letter-spacing: .03em !important; padding: 0 !important; }
}


/* ==========================================================================
   HEADER: 3 columnas IGUALES (logo centrado) — override específico y final
   ========================================================================== */
@media (min-width: 768px){
  .highs-head .row.no-gutters > .col.d-flex.align-items-center,
  .highs-head .row.no-gutters > .col.text-center,
  .highs-head .row.no-gutters > .col.text-right{
    flex: 1 1 0 !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
  }
  .highs-nav{ flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 9px !important; }
  .highs-nav-link{ font-size: 9px !important; letter-spacing: .02em !important; padding: 0 !important; }
}


/* ==========================================================================
   HEADER transparente legible: degradé oscuro sutil detrás (para que el
   logo + nav blancos se lean sobre cualquier foto de hero)
   ========================================================================== */
.head-main.head-transparent{ position: relative; }
.head-main.head-transparent::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17,17,17,.55) 0%, rgba(17,17,17,.15) 70%, rgba(17,17,17,0) 100%);
  pointer-events: none;
}
@media (min-width: 768px){
  .highs-nav-link{ font-size: 10px !important; letter-spacing: .05em !important; }
}


/* ==========================================================================
   HEADER SUPERPUESTO sobre el hero (feedback Facu): absoluto, la foto sube atrás
   ========================================================================== */
.head-main.head-transparent,
.head-main.head-transparent-absolute,
.head-main.head-transparent-fixed{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
}
/* El hero arranca desde arriba (detrás del header) */
.head-main.head-transparent + *,
.js-home-sections-container{ margin-top: 0 !important; }


/* ==========================================================================
   CARRITO: ícono + número en NEGRO dentro de la pastilla (feedback Facu)
   (el fix general del header ponía todos los íconos en blanco → invisible)
   ========================================================================== */
.highs-head #ajax-cart a,
.highs-head #ajax-cart a *,
.highs-head #ajax-cart .cart-widget-amount,
.highs-head .cart-summary a,
.highs-head .cart-summary a *{
  color: var(--highs-ink) !important;
}
.highs-head #ajax-cart a svg,
.highs-head #ajax-cart a svg *,
.highs-head .cart-summary svg *{
  fill: var(--highs-ink) !important;
}


/* ==========================================================================
   BUSCADOR minimalista (feedback Facu): ventana compacta semi-translúcida
   en vez de panel a pantalla completa
   ========================================================================== */
/* Overlay translúcido con blur (fondo) */
#nav-search.modal{
  background: rgba(17,17,17,.45) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; max-width: 100% !important;
}
#nav-search .modal-header{ background: transparent !important; border: none !important; }
#nav-search .js-modal-close, #nav-search .modal-close{ color: #fff !important; }
#nav-search .modal-close svg *{ fill:#fff !important; }
/* Caja del buscador: compacta, centrada arriba, oscura translúcida */
#nav-search .modal-body{
  background: transparent !important;
  max-width: 680px !important;
  margin: 84px auto 0 !important;
  padding: 0 20px !important;
}
#nav-search .form-group{
  background: rgba(26,26,28,.78) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(250,250,246,.22) !important;
  border-radius: 0 !important;
  display: flex !important; align-items: center; margin: 0 !important;
}
#nav-search .search-input{
  background: transparent !important; border: none !important; color: #fff !important;
  font-family: var(--highs-mono); letter-spacing: .06em; font-size: 13px; padding: 18px 20px !important;
  flex: 1;
}
#nav-search .search-input::placeholder{ color: rgba(250,250,246,.5) !important; text-transform: uppercase; letter-spacing: .1em; }
#nav-search .search-input-submit{ background: transparent !important; border: none !important; padding: 0 18px !important; }
#nav-search .search-input-submit svg *{ fill: #fff !important; }


/* ==========================================================================
   RESULTADOS DE BÚSQUEDA (feedback Facu): texto blanco + thumbnails con marco
   ========================================================================== */
#nav-search .search-suggest,
#nav-search .js-search-suggest{
  background: rgba(26,26,28,.92) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  max-width: 680px !important; margin: 0 auto !important;
}
/* Texto en BLANCO */
#nav-search .search-suggest-link,
#nav-search .search-suggest-link *,
#nav-search .search-suggest-name,
#nav-search .search-suggest-name *,
#nav-search .search-suggest-text,
#nav-search .search-suggest-text *,
#nav-search .search-suggest p,
#nav-search .search-suggest strong{
  color: #fff !important;
}
#nav-search .search-suggest-link{ border-bottom: 1px solid rgba(250,250,246,.12) !important; }
#nav-search .search-suggest-link svg *{ fill:#fff !important; }
/* Thumbnail con MARCO tile (estilo card: fondo gris + foto contain + multiply) */
#nav-search .search-suggest-image-container{
  background: var(--highs-tile) !important;
  padding: 6px !important;
  display: flex; align-items: center; justify-content: center;
}
#nav-search .search-suggest-image{
  object-fit: contain !important;
  mix-blend-mode: multiply;
  background: transparent !important;
}


/* ==========================================================================
   BUSCADOR v2 (feedback Facu): panel translúcido (como antes) + fotos sin fondo
   ========================================================================== */
/* Panel de resultados translúcido (que se vea el fondo difuminado detrás) */
#nav-search .search-suggest,
#nav-search .js-search-suggest{
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* Thumbnails SIN marco: quitar el fondo blanco fundiéndolo (solo el objeto) */
#nav-search .search-suggest-image-container{
  background: transparent !important;
  padding: 0 !important;
}
#nav-search .search-suggest-image{
  mix-blend-mode: multiply !important;   /* el blanco se funde con el fondo → se ve solo el objeto */
  object-fit: contain !important;
  background: transparent !important;
}


/* ==========================================================================
   MEJORAS UX (auditoría con skill UI/UX Pro Max) — bajo riesgo, solo CSS
   ========================================================================== */

/* --- Touch targets adecuados en mobile (WCAG/iOS/Android) --- */
@media (max-width: 767px){
  /* Enlaces de menú/utilidades/pie: mínimo 44px de alto táctil */
  .nav-list-link, .highs-nav-link, .utilities-link,
  .footer-menu-link, .highs-fcols a, .js-nav-list-link{
    min-height: 44px;
    display: flex; align-items: center;
  }
  /* Botones comerciales: 48px mínimo */
  .btn, .btn-primary, .js-addtocart{ min-height: 48px; }
  /* Íconos del header (buscador/carrito): área táctil mayor */
  .highs-head .utilities-item a, .highs-head #ajax-cart a{ min-height: 44px; display: inline-flex; align-items: center; }
  /* Separación entre swatches para no tocar el equivocado */
  .highs-card .item-colors{ gap: 10px !important; }
  /* Inputs a 16px → evita el zoom automático de iOS al enfocar */
  input, select, textarea,
  .search-input, .newsletter input[type="email"]{ font-size: 16px !important; }
  /* Evitar refresh accidental por overscroll */
  html, body{ overscroll-behavior-y: contain; }
}

/* --- Estado ACTIVO en la navegación (categoría actual) --- */
.nav-list-link.selected, .nav-list-link.active,
.highs-nav-link.is-current, .highs-nav-link.selected,
li.active > .nav-list-link{
  border-bottom: 1px solid currentColor !important;
  opacity: 1 !important;
}

/* --- CLS: reservar alto del logo (evita salto al cargar) --- */
.head-main .logo-img{ min-height: 20px; }

/* --- Foco visible reforzado (WCAG 2.2): 2px + offset, alto contraste --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, .btn:focus-visible, .nav-list-link:focus-visible{
  outline: 2px solid var(--highs-accent) !important;
  outline-offset: 2px !important;
}


/* ==========================================================================
   MEJORAS DE PLANTILLA (skill UX): confianza en ficha + estados vacíos
   ========================================================================== */
/* Bloque de confianza en la ficha (Envío · Cuotas · Cambios) */
.highs-trust{
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--highs-line); margin: 24px 0;
}
.highs-trust > div{ padding: 16px 10px; text-align: center; border-right: 1px solid var(--highs-line); }
.highs-trust > div:last-child{ border-right: none; }
.highs-trust .k{ display:block; font-family: var(--highs-mono); text-transform:uppercase; letter-spacing:.1em; font-size:9px; color: var(--highs-mute); margin-bottom:5px; }
.highs-trust .v{ display:block; font-weight:500; font-size:13.5px; }

/* Estados vacíos (carrito, búsqueda) con mensaje + acción */
.highs-empty{ text-align:center; padding: 64px 20px; border:1px dashed var(--highs-line); margin: 24px auto; max-width: 560px; }
.highs-empty h3{ font-weight:500; font-size:22px; letter-spacing:var(--highs-track-title); margin-bottom:8px; }
.highs-empty p{ color: var(--highs-mute); font-size:14.5px; margin-bottom:22px; }

/* ============================================================
   HIGHS — Slider de fotos en la tarjeta (cambiar fotos sin entrar)
   SOLO puntitos (sin flechas), en celular y en compu. El JS del theme
   (layout.tpl) convierte el contador "1/9" en puntitos dinámicos.
   ============================================================ */
.highs-card .item-image .swiper-container{ height:100%; width:100%; }
.highs-card .item-image .item-image-slide{ display:flex; align-items:center; justify-content:center; }

/* Ocultar SIEMPRE las flechas: el control son los puntitos */
.highs-card .swiper-button-prev,
.highs-card .swiper-button-next{ display:none !important; }

/* Puntitos visibles también en compu (el theme los ocultaba con d-md-none) */
.highs-card .item-slider-pagination{
  display:block !important;
  bottom:10px; z-index:3; pointer-events:auto;
}
.highs-card .item-slider-pagination .swiper-pagination-bullet{
  width:6px; height:6px; background:var(--highs-ink); opacity:.28;
  margin:0 3px !important; transition:opacity .2s, transform .2s;
}
.highs-card .item-slider-pagination .swiper-pagination-bullet-active{
  opacity:.9; transform:scale(1.2);
}

/* ============================================================
   FICHA DE PRODUCTO (Tanda 1): botón "COMPRA SEGURA" + cuotas en acento
   ============================================================ */
/* Cuotas del detalle en el color de acento del brandbook (3er color) */
#single-product .product-detail-installments,
#single-product .product-detail-installments *{
  color: var(--highs-accent) !important;
}
/* Botón de compra: pastilla negra, mayúsculas, a lo ancho (como la referencia) */
#product_form .js-addtocart,
#single-product .js-addtocart{
  border-radius: 999px !important;
  background: var(--highs-ink) !important;
  border-color: var(--highs-ink) !important;
  color: #fff !important;
  text-transform: uppercase; letter-spacing:.12em; font-weight:600;
  padding: 20px 30px !important; font-size: 13px;
}
#product_form .js-addtocart:hover,
#single-product .js-addtocart:hover{
  background: var(--highs-ink-hover) !important; border-color: var(--highs-ink-hover) !important;
}

/* ============================================================
   FICHA DE PRODUCTO: agrandar tipografías (estaban muy chicas)
   ============================================================ */
#single-product h1{ font-size: 34px !important; }
#single-product #price_display,
#single-product .js-price-display{ font-size: 30px !important; }
#single-product #compare_price_display,
#single-product .price-container .price-compare{ font-size: 18px !important; }
#single-product .text-accent{ font-size: 16.5px !important; }
#single-product .product-detail-installments,
#single-product .product-detail-installments *{ font-size: 16px !important; }
#single-product .js-product-discount-container,
#single-product .js-product-discount-container *{ font-size: 15px !important; }
#single-product .free-shipping-message,
#single-product .free-shipping-message *{ font-size: 15px !important; }
#single-product #btn-installments{ font-size: 14px !important; }
#single-product .product-description,
#single-product .product-description p,
#single-product .product-description li,
#single-product .product-description span{ font-size: 16px !important; line-height: 1.6; }
#single-product .product-description h5{ font-size: 18px !important; }
/* Cantidad y selector de variantes un poco más grandes */
#single-product .js-quantity-input,
#single-product .product-variant-name,
#single-product .form-label{ font-size: 15px !important; }

/* ============================================================
   FICHA Tanda 2: nombre IZQ + precio DER, y stock bajo
   ============================================================ */
#single-product .highs-prod-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
#single-product .highs-prod-head .page-header{ margin:0 !important; flex:1 1 auto; }
#single-product .highs-price-top{
  flex:0 0 auto; display:flex; flex-direction:column-reverse; align-items:flex-end;
  text-align:right; margin:0;
}
#single-product .highs-price-top .price-compare{ font-size:18px !important; }
#single-product .highs-prod-subprice{ margin-top:8px; }
/* Indicador de stock bajo ("Solo queda uno") con puntito rojo */
.highs-lowstock{
  display:flex; align-items:center; gap:8px; font-family:var(--highs-mono);
  font-size:13px; letter-spacing:.03em; color:var(--highs-ink); margin-bottom:14px;
}
.highs-lowstock-dot{ width:9px; height:9px; border-radius:50%; background:#CE1B1B; display:inline-block; flex:0 0 auto; }
@media (max-width:767px){
  #single-product .highs-prod-head{ align-items:flex-start; }
  #single-product .highs-price-top{ align-items:flex-start; text-align:left; }
}

/* ============================================================
   FICHA Tanda 2 (ajustes): swatches de color redondos + minimalistas
   ============================================================ */
/* Contenedor de colores: separación cómoda */
#single-product .js-color-variants-container .text-center,
#single-product .js-color-variants-container .text-md-left{ display:flex; flex-wrap:wrap; gap:12px; }
/* Swatch redondo */
#single-product .btn-variant-color{
  width:30px !important; height:30px !important; min-width:30px !important;
  padding:0 !important; margin:0 !important; border:none !important;
  border-radius:50% !important; overflow:hidden; box-shadow:none !important;
}
#single-product .btn-variant-color .btn-variant-content{
  display:block !important; width:30px !important; height:30px !important;
  border:1px solid rgba(0,0,0,.14) !important; border-radius:50% !important; margin:0 !important;
}
/* Seleccionado: aro fino alrededor */
#single-product .btn-variant-color.selected{
  outline:1.5px solid var(--highs-ink) !important; outline-offset:3px;
}

/* ============================================================
   FICHA Tanda 3: GALERÍA
   - Imagen principal sin gris (blanco + multiply, como las tarjetas)
   - Miniaturas de a 2 con puntitos (carrusel), la elegida se ve grande
   ============================================================ */
/* Principal: fondo GRIS (igual que las tarjetas del home / grilla) */
#single-product .js-swiper-product .slider-slide,
#single-product .product-image-container .slider-slide,
#single-product .product-image-container{ background:#ececec !important; }
#single-product .product-slider-image{
  mix-blend-mode: multiply;
  object-fit: contain !important;
}
/* Ocultar los puntitos del slider principal (el control pasan a ser las miniaturas) */
#single-product .js-swiper-product-pagination{ display:none !important; }

/* Miniaturas */
.highs-thumbs-wrap{ margin-top:14px; }
.highs-thumbs.swiper-container{ width:100%; }
.highs-thumbs .highs-thumb{
  aspect-ratio: 3/4; background:#ececec; cursor:pointer; overflow:hidden;
  border:1px solid rgba(0,0,0,.08); box-sizing:border-box;
}
.highs-thumbs .highs-thumb img{
  width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; display:block;
}
.highs-thumbs .highs-thumb.is-active{ border-color: var(--highs-ink); }
.highs-thumbs-pagination{ position:static; margin-top:12px; text-align:center; }
.highs-thumbs-pagination .swiper-pagination-bullet{
  width:7px; height:7px; background:var(--highs-ink); opacity:.28; margin:0 4px !important;
}
.highs-thumbs-pagination .swiper-pagination-bullet-active{ opacity:.9; }

/* ============================================================
   FICHA Tanda 3 (ajuste): galería más chica/contenida (como la referencia)
   ============================================================ */
#single-product .product-image-container,
#single-product .highs-thumbs-wrap{
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Marco principal con proporción FIJA 3/4 (evita imágenes gigantes tipo infografía) */
#single-product .js-swiper-product .slider-slide{
  aspect-ratio: 3/4 !important; height:auto !important;
}
#single-product .js-swiper-product .js-product-slide-link{
  padding-bottom:0 !important; position:absolute !important;
  top:0; left:0; right:0; bottom:0; height:100% !important;
}

/* ============================================================
   FICHA: usar todo el ancho + flechas en miniaturas
   ============================================================ */
/* Imagen a la IZQUIERDA (fija ~480) e info usando el resto del ancho */
@media (min-width:768px){
  #single-product .section-single-product{ flex-wrap:nowrap !important; align-items:flex-start; gap:48px; }
  #single-product .section-single-product > .col-md-7{ flex:0 0 480px !important; max-width:480px !important; }
  #single-product .section-single-product > .col{ flex:1 1 auto !important; max-width:760px !important; }
}
/* Galería pegada a la izquierda de su columna (no centrada) */
#single-product .product-image-container,
#single-product .highs-thumbs-wrap{ margin-left:0 !important; margin-right:0 !important; }

/* Flechas del carrusel de miniaturas (reemplazan a los puntitos) */
.highs-thumbs-pagination{ display:none !important; }
.highs-thumbs .highs-thumbs-arrow{
  position:absolute !important; top:50% !important; z-index:10;
  color: var(--highs-ink) !important;
  width:36px; height:36px; margin-top:-18px;
  display:flex !important; align-items:center; justify-content:center;
  background: rgba(255,255,255,.94); border-radius:50%;
  box-shadow: 0 1px 8px rgba(0,0,0,.16); cursor:pointer;
}
.highs-thumbs .highs-thumbs-prev{ left:6px !important; right:auto !important; }
.highs-thumbs .highs-thumbs-next{ right:6px !important; left:auto !important; }
/* el theme no carga el CSS de flechas de swiper → ponemos el chevron nosotros */
.highs-thumbs .highs-thumbs-prev::after{ content:"\276E" !important; }
.highs-thumbs .highs-thumbs-next::after{ content:"\276F" !important; }
.highs-thumbs .highs-thumbs-arrow::after{
  font-size:15px; font-weight:700; line-height:1; font-family: inherit !important; color: var(--highs-ink);
}
.highs-thumbs .swiper-button-disabled{ opacity:.25; pointer-events:none; }

/* ============================================================
   FICHA ajuste final: proporción más centrada y contenida (no tan ancha)
   ============================================================ */
@media (min-width:768px){
  #single-product .section-single-product{ justify-content:center !important; gap:56px !important; }
  #single-product .section-single-product > .col-md-7{ flex:0 1 520px !important; max-width:520px !important; }
  #single-product .section-single-product > .col{ flex:0 1 540px !important; max-width:540px !important; }
}
/* la galería llena su columna (ya no cap 460) */
#single-product .product-image-container,
#single-product .highs-thumbs-wrap{ max-width:100% !important; margin-left:0 !important; margin-right:0 !important; }
/* marco un poco menos alto (4/5) */
#single-product .js-swiper-product .slider-slide{ aspect-ratio: 4/5 !important; }
#single-product .highs-thumbs .highs-thumb{ aspect-ratio: 4/5 !important; }

/* ============================================================
   RESEÑAS (Wigy) en CARRUSEL horizontal: una fila, compacto
   ============================================================ */
#wigy-reviews .wigy-reviews-reviews-grid{
  display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important;
  height:auto !important; gap:16px !important; padding-bottom:12px !important;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
}
#wigy-reviews .wigy-reviews-review-card{
  position:static !important; top:auto !important; left:auto !important; transform:none !important;
  flex:0 0 300px !important; width:300px !important; max-width:300px !important;
  height:340px !important; overflow:hidden !important; scroll-snap-align:start;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);
          mask-image:linear-gradient(180deg,#000 86%,transparent);
}
/* scrollbar fino */
#wigy-reviews .wigy-reviews-reviews-grid::-webkit-scrollbar{ height:6px; }
#wigy-reviews .wigy-reviews-reviews-grid::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
#wigy-reviews .wigy-reviews-reviews-grid::-webkit-scrollbar-track{ background:transparent; }
/* wrapper + flechas */
#wigy-reviews .highs-rev-wrap{ position:relative; }
#wigy-reviews .highs-rev-arrow{
  position:absolute; top:170px; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; box-shadow:0 1px 10px rgba(0,0,0,.16); color:var(--highs-ink);
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center;
}
#wigy-reviews .highs-rev-prev{ left:-6px; }
#wigy-reviews .highs-rev-next{ right:-6px; }
@media (max-width:767px){
  #wigy-reviews .wigy-reviews-review-card{ flex-basis:82vw !important; width:82vw !important; max-width:82vw !important; }
  #wigy-reviews .highs-rev-arrow{ display:none; }
}

/* ============================================================
   FICHA: galería STICKY — acompaña al scrollear la descripción
   (elimina el hueco blanco a la izquierda en descripciones largas)
   ============================================================ */
@media (min-width:768px){
  #single-product .section-single-product > .col-md-7{
    position: sticky !important;
    top: 24px;
    align-self: flex-start;
  }
}

/* ============================================================
   FICHA: descripción acortada con botón VER MÁS
   ============================================================ */
#single-product .product-description.highs-collapsible{ position:relative; overflow:hidden; }
#single-product .product-description.highs-collapsible:not(.is-open){ max-height:260px; }
#single-product .product-description.highs-collapsible:not(.is-open)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff); pointer-events:none;
}
#single-product .highs-desc-toggle{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.1em; font-size:11px;
  background:transparent; border:1px solid var(--highs-ink); color:var(--highs-ink);
  padding:11px 24px; border-radius:999px; cursor:pointer; transition:.15s;
}
#single-product .highs-desc-toggle:hover{ background:var(--highs-ink); color:#fff; }

/* ============================================================
   DETALLE FINO: esquinas suavemente redondeadas
   (botones, cajas, inputs, modales, cards) — todo lo cuadrado con punta viva
   ============================================================ */
.btn, .btn-primary, .btn-secondary, .btn-default, button.btn,
input[type="submit"], input[type="button"],
.newsletter .newsletter-btn,
.box, .card, .modal-content, .js-modal-content,
.js-cross-selling-modal-body, .js-cross-selling-container, .js-quickshop-container,
.wigy-reviews-review-card, .wigy-reviews-btn-sort,
.highs-trust, .highs-empty, .label, .btn-variant,
.product-slider-image, .item-image{
  border-radius: 10px !important;
}
/* inputs/selects: un toque menos */
.form-control, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"], select, textarea,
.js-quantity-input, .js-quantity, #nav-search .form-group{
  border-radius: 8px !important;
}
/* MANTENER pastillas: CTA principal, botón de compra y carrito */
#product_form .js-addtocart, #single-product .js-addtocart,
.highs-head #ajax-cart a, .highs-thumbs .highs-thumbs-arrow,
#wigy-reviews .highs-rev-arrow, #single-product .highs-desc-toggle{
  border-radius: 999px !important;
}
/* MANTENER círculos: swatches de color y "+" del cross-sell */
#single-product .btn-variant-color,
#single-product .btn-variant-color .btn-variant-content{ border-radius: 50% !important; }

/* ============================================================
   CARRITO: cantidad sin fondo (solo signo), tacho negro sin fondo, checkout redondeado
   ============================================================ */
.cart-item-quantity .cart-item-btn,
.cart-item-quantity .js-cart-quantity-btn{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important; padding:4px 10px !important; min-height:auto !important;
}
.cart-item-quantity .cart-item-btn svg *,
.cart-item-quantity .js-cart-quantity-btn svg *{ fill:var(--highs-ink) !important; }
/* Tacho de borrar: solo ícono negro */
.cart-item-delete .btn{ background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; }
.cart-item-delete .btn svg *{ fill:var(--highs-ink) !important; }
/* Botón Iniciar Compra: esquinas redondeadas */
#go-to-checkout,
.js-ajax-cart-submit input[type="submit"],
.js-ajax-cart-submit .btn{ border-radius:10px !important; }

/* Descripción "Ver más": centrado y más cerca */
#single-product .product-description.highs-collapsible:not(.is-open){ max-height:220px !important; }
#single-product .highs-desc-toggle{ display:block !important; margin:6px auto 0 !important; }

/* Cross-selling / pop-up de descuento (nativo): redondear modal y su botón */
.js-cross-selling-modal-body,
#js-cross-selling-modal .modal-content,
#js-cross-selling-modal .js-modal-content,
.js-cross-selling-modal-body .btn,
#js-cross-selling-modal .btn,
.js-cross-selling-modal-body input[type="submit"]{ border-radius:12px !important; }

/* Carrito del HEADER visible sobre fondo oscuro/transparente (pastilla blanca) */
.highs-head.head-transparent #ajax-cart a{ background:#fff !important; }
.highs-head.head-transparent #ajax-cart a,
.highs-head.head-transparent #ajax-cart a *{ color:var(--highs-ink) !important; }
.highs-head.head-transparent #ajax-cart a svg *{ fill:var(--highs-ink) !important; }

/* Carrito del header sobre header OSCURO (head-dark): pastilla blanca invertida */
.highs-head.head-dark #ajax-cart a{ background:#fff !important; }
.highs-head.head-dark #ajax-cart a,
.highs-head.head-dark #ajax-cart a *{ color:var(--highs-ink) !important; }
.highs-head.head-dark #ajax-cart a svg *{ fill:var(--highs-ink) !important; }

/* ============================================================
   CARRITO: "Iniciar Compra" + "Ver más productos" lado a lado (sin superponerse)
   ============================================================ */
.highs-cart-cta{ display:flex; gap:14px; align-items:stretch; }
.highs-cart-cta #go-to-checkout,
.highs-cart-cta .highs-cart-continue{ flex:1 1 0; margin:0 !important; width:auto !important; }
.highs-cart-cta .highs-cart-continue{
  background:transparent !important; border:1px solid var(--highs-ink) !important;
  color:var(--highs-ink) !important; display:flex; align-items:center; justify-content:center;
  border-radius:10px !important; text-decoration:none;
}
.highs-cart-cta .highs-cart-continue:hover{ background:var(--highs-ink) !important; color:#fff !important; }
@media (max-width:600px){ .highs-cart-cta{ flex-direction:column; } }

/* ============================================================
   MOBILE: evitar scroll/margen horizontal (elementos que se desbordan,
   ej. badge de reCAPTCHA). Solo en celular para no romper el sticky de desktop.
   ============================================================ */
@media (max-width:767px){
  /* overflow-x:clip solo en body: recorta el desborde SIN romper el scroll
     vertical (overflow-x:hidden en <html> congelaba el scroll en iPhone/Safari) */
  body{ overflow-x:clip; }
  .grecaptcha-badge{ right:0 !important; }
}

/* ============================================================
   MOBILE — ajustes (feedback Facu): carrusel home, footer, menú, ficha
   ============================================================ */
@media (max-width:767px){

  /* 1) HOME: SOLO la fila que contiene las tarjetas pasa a carrusel horizontal.
     (Antes afectaba la fila externa [título|productos] y empujaba todo a la derecha) */
  .section-featured-home .row:has(> .highs-card){
    display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important;
    gap:18px !important; padding-bottom:12px !important; margin:0 !important;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  /* 2 productos COMPLETOS por pantalla, con aire entre ellos y sin que el contenido
     se cruce con la card de al lado */
  .section-featured-home .row:has(> .highs-card) > .highs-card{
    flex:0 0 calc(50% - 9px) !important; max-width:calc(50% - 9px) !important; width:calc(50% - 9px) !important;
    scroll-snap-align:start; overflow:hidden;
  }
  /* datos de la card un poco más chicos para que entren cómodos en 2 columnas */
  .section-featured-home .highs-card .item-name{ font-size:12.5px !important; line-height:1.35 !important; }
  .section-featured-home .highs-card .item-price,
  .section-featured-home .highs-card .js-price-display{ font-size:14px !important; }
  .section-featured-home .highs-card .price-compare{ font-size:11px !important; }
  .section-featured-home .highs-card .item-price-container{ display:flex; flex-wrap:wrap; gap:2px 6px; }
  .section-featured-home .highs-card .item-installments,
  .section-featured-home .highs-card [class*="payment-discount"],
  .section-featured-home .highs-card .item-colors{ font-size:11px !important; }
  .section-featured-home .highs-card .item-description{ overflow:hidden; }
  .section-featured-home .row:has(> .highs-card)::-webkit-scrollbar{ height:5px; }
  .section-featured-home .row:has(> .highs-card)::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:3px; }
  /* Título "Los más vendidos": más arriba y más chico, producto justo debajo */
  .section-featured-home{ padding-top:22px !important; padding-bottom:22px !important; }
  .section-featured-home h2,
  .section-featured-home h3,
  .section-featured-home .col-12.text-center{ font-size:20px !important; margin-bottom:14px !important; text-align:left !important; }
  .section-featured-home .col-12.text-center{ padding-left:0 !important; }

  /* 2) MENÚ HAMBURGUESA vertical (una debajo de otra), no en fila */
  #nav-hamburger .nav-list,
  #nav-hamburger ul.nav-list{
    display:block !important; flex-wrap:wrap !important;
    justify-content:flex-start !important; gap:0 !important;
    text-align:left !important; width:100%; white-space:normal !important;
  }
  #nav-hamburger .nav-list > li{ display:block !important; width:100% !important; border-bottom:1px solid var(--highs-line); }
  #nav-hamburger .nav-list-link,
  #nav-hamburger .js-toggle-page-accordion{
    display:flex !important; align-items:center; justify-content:space-between;
    text-align:left !important; padding:15px 20px !important;
    font-size:14px !important; letter-spacing:.06em !important; white-space:normal !important;
  }
  #nav-hamburger .list-subitems .nav-list-link{ padding-left:34px !important; font-size:13px !important; }

  /* 3) FOOTER: contacto ordenado (ícono + texto en línea, uno por renglón) + menos gap */
  .newsletter{ padding:24px 0 20px !important; }
  .highs-ftr{ padding:22px var(--highs-pad-mob) 20px !important; }
  .highs-fcols{ gap:22px !important; padding-top:0 !important; }
  .highs-fcol-contact .contact-info{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:10px !important; }
  .highs-fcol-contact .contact-item{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:10px !important; white-space:nowrap; margin:0 !important; }
  .highs-fcol-contact .contact-item svg{ margin:0 !important; flex:0 0 auto; width:18px; height:18px; }
  .highs-fcol-contact .contact-item .contact-link{ display:inline !important; }

  /* 4) FICHA: textos a la IZQUIERDA (no centrados sin sentido) */
  #single-product .page-header,
  #single-product h1,
  #single-product .price-container,
  #single-product .highs-prod-subprice,
  #single-product .js-product-discount-container,
  #single-product .product-detail-installments,
  #single-product .free-shipping-message,
  #single-product .text-center{
    text-align:left !important;
  }
  #single-product .highs-prod-head{ flex-direction:column !important; align-items:flex-start !important; }
  #single-product .highs-price-top{ align-items:flex-start !important; text-align:left !important; }
  #single-product .free-shipping-message{ display:block; }

  /* 5) DESCRIPCIÓN: ancho completo, alineada a la izquierda, legible */
  #single-product .product-description,
  #single-product .product-description *{ text-align:left !important; }
  #single-product .product-description,
  #single-product .product-description p,
  #single-product .product-description li,
  #single-product .product-description span{ font-size:15px !important; line-height:1.6; }
}

/* ============================================================
   MENÚ DESKTOP: submenú desplegable al pasar el mouse (hover)
   ============================================================ */
/* El ítem queda "estático" para que el desplegable NO se ancle al ítem (burbuja).
   Y en desktop hacemos que el ancla sea el CONTENEDOR de ancho completo (no la
   columna angosta del nav, que era el offsetParent real y cortaba la barra). */
.highs-nav-item{ position:static; display:flex; align-items:center; }
@media (min-width:768px){
  .highs-head > .container{ position:relative; }
  .highs-head .row.no-gutters > .col.d-flex.align-items-center{ position:static; }
}
.highs-subnav{
  /* Barra a ANCHO COMPLETO (punta a punta): left/right:0 respecto del contenedor
     full-width. Las letras se alinean al contenido con el padding interno --highs-pad.
     Margen chico bajo el logo (top negativo compensa el padding del header). */
  position:absolute; top:calc(100% - 35px); left:0; right:0; z-index:70;
  padding:16px var(--highs-pad) 18px;
  /* Panel translúcido OSCURO (vidrio ahumado). Desenfoque MODERADO para que el
     hover sea fluido (blur a lo ancho es caro de repintar). */
  background:rgba(18,18,20,.90);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:0;                    /* sin redondeo (puntas rectas) */
  box-shadow:0 16px 36px rgba(0,0,0,.30);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  opacity:0; visibility:hidden;
  transition:opacity .12s ease, visibility .12s;   /* rápido, sin animación de movimiento */
  will-change:opacity;
}
/* Puente invisible bajo CADA ítem del nav (ancho del propio ítem), para poder bajar
   el mouse hasta el panel sin perder el hover. Clave: es angosto y va DEBAJO de los
   links (no encima), así mover de una opción a otra cambia el submenú al instante.
   Sólo captura eventos mientras el ítem está en hover (no molesta al resto del tiempo). */
.highs-nav-item.has-sub .highs-nav-link{ position:relative; }
.highs-nav-item.has-sub .highs-nav-link::after{
  content:""; position:absolute; left:-10px; right:-10px; top:100%; height:96px;
  pointer-events:none;
}
.highs-nav-item.has-sub:hover .highs-nav-link::after{ pointer-events:auto; }
.highs-nav-item.has-sub:hover > .highs-subnav,
.highs-nav-item.has-sub:focus-within > .highs-subnav{
  opacity:1; visibility:visible;
}
/* Panel oscuro → letras claras. Especificidad alta para el header transparente. */
.head-main .highs-subnav .highs-subnav-link,
.highs-subnav-link{
  display:inline-block; padding:9px 16px; white-space:nowrap;
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.06em; font-size:11px;
  color:rgba(255,255,255,.86) !important; text-decoration:none; line-height:1.2; border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.head-main .highs-subnav .highs-subnav-link:hover,
.highs-subnav-link:hover{ background:rgba(255,255,255,.12); color:#fff !important; }
.highs-subnav-all{ font-weight:600; margin-right:6px; border-right:1px solid rgba(255,255,255,.22); border-radius:8px 0 0 8px; }

/* ============================================================
   BUSCADOR: burbuja CENTRADA (no panel a pantalla completa)
   El theme lo abría acoplado a la derecha y a toda la altura. Lo forzamos a
   una tarjeta centrada, con ancho/alto acotados. El contenido interno queda igual.
   ============================================================ */
#nav-search.modal{
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%) scale(.97) !important;
  width:min(560px, 92vw) !important; height:auto !important; max-height:82vh !important;
  padding:20px !important; overflow-y:auto;
  background:rgba(18,18,20,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;                 /* puntas redondeadas */
  opacity:0; box-shadow:0 24px 60px rgba(0,0,0,.40);
  transition:opacity .18s ease, transform .18s ease !important;
}
#nav-search.modal.modal-show{
  transform:translate(-50%,-50%) scale(1) !important;
  opacity:1;
}
/* Sin "X": queda solo la barra (se cierra clickeando afuera o con Escape). */
#nav-search .modal-header{ display:none !important; }
#nav-search .modal-body{ margin:0 !important; padding:0 !important; }
/* Barra de búsqueda: arriba, ancho completo, con la lupa centrada a la derecha. */
#nav-search .form-group{ position:relative; margin:0 !important; }
#nav-search .search-input{
  width:100%; height:48px; box-sizing:border-box;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius:12px !important; color:#fff !important;
  padding:0 48px 0 16px !important;
  font-family:var(--highs-mono); letter-spacing:.04em; font-size:13px; text-transform:uppercase;
}
#nav-search .search-input::placeholder{ color:rgba(255,255,255,.55) !important; letter-spacing:.08em; }
#nav-search .search-input-submit{
  position:absolute !important; right:8px; top:50%; transform:translateY(-50%);
  margin:0 !important; padding:8px !important; height:auto !important; min-height:0 !important;
  background:none !important; border:none !important;
  display:flex; align-items:center; justify-content:center;
}
#nav-search .search-input-submit svg{ width:18px; height:18px; }
#nav-search .search-input-submit svg *{ fill:#fff; }
#nav-search .search-suggest{ margin-top:10px; }

/* ============================================================
   CATEGORÍAS: subcategorías como botones flotantes redondeados
   (reemplazan la foto de categoría). Estilo referencia (Matador).
   ============================================================ */
.highs-subcats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  max-width:1160px; margin:28px auto 4px; padding:0 var(--highs-pad);
}
.highs-subcat{
  flex:0 1 auto; text-align:center;
  padding:17px 30px; border:1px solid var(--highs-ink); border-radius:12px;
  font-family:var(--highs-mono); text-transform:uppercase; letter-spacing:.06em; font-size:12px;
  color:var(--highs-ink); text-decoration:none; line-height:1;
  transition:background .16s ease, color .16s ease;
}
.highs-subcat:hover{ background:var(--highs-ink); color:var(--highs-bg); }
@media (max-width:767px){
  .highs-subcats{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    gap:10px; margin:18px 0 4px; padding:0 var(--highs-pad-mob); -webkit-overflow-scrolling:touch; }
  .highs-subcat{ flex:0 0 auto; padding:13px 20px; font-size:11px; }
  .highs-subcats::-webkit-scrollbar{ display:none; }
}

/* (A) Sacar la descripción/subtítulo de la categoría */
.category-header .page-header-text{ display:none !important; }

/* Notificación "¡Agregado al carrito!" (#related-products-notification): vidrio
   translúcido oscuro como el submenú, en TODAS las pantallas (desktop + mobile). */
#related-products-notification.modal{
  background:rgba(18,18,20,.92) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
#related-products-notification, #related-products-notification *{ color:#fff !important; }
#related-products-notification svg, #related-products-notification svg *{ fill:#fff !important; }
#related-products-notification [class*="border"], #related-products-notification hr{ border-color:rgba(255,255,255,.14) !important; }
#related-products-notification a.js-modal-open, #related-products-notification .btn{
  background:#fff !important; border-color:#fff !important;
}
#related-products-notification a.js-modal-open, #related-products-notification a.js-modal-open *,
#related-products-notification .btn, #related-products-notification .btn *{ color:var(--highs-ink) !important; }

/* Botón "Ver carrito" (notificaciones de agregado al carrito): más chico y compacto */
#related-products-notification a.js-modal-open,
#related-products-notification .btn,
a.js-cart-notification-close.js-modal-open{
  display:inline-block !important; width:auto !important; max-width:max-content;
  padding:10px 24px !important; font-size:10px !important; margin:6px auto 0 !important;
}

/* ============================================================
   CARD: al pasar el mouse, la 1ª imagen SALE hacia el costado y ENTRA la 2ª,
   con distinta velocidad (efecto Matador). Se respeta el centrado nativo
   (.img-absolute-centered = left:50% + translateX(-50%)); solo se le suma el
   desplazamiento lateral, para no descuadrar ni cortar la imagen.
   ============================================================ */
.highs-card .item-image-featured{
  opacity:1;
  transition:opacity .3s var(--highs-ease-out), transform .34s var(--highs-ease-out) !important;  /* sale */
}
.highs-card .item-image-secondary{
  display:block !important; opacity:0 !important;
  transform:translateX(calc(-50% + 34px)) !important;            /* empieza corrida a la derecha */
  transition:opacity .34s var(--highs-ease-out), transform .38s var(--highs-ease-out) !important; /* entra apenas más lento */
}
/* Solo en punteros finos (mouse): en touch el "sticky hover" no debe disparar el swap */
@media (hover: hover) and (pointer: fine){
  .highs-card:hover .item-image-featured{
    opacity:0 !important;
    transform:translateX(calc(-50% - 34px)) !important;          /* sale hacia la izquierda */
  }
  .highs-card:hover .item-image-secondary{
    opacity:1 !important;
    transform:translateX(-50%) !important;                       /* entra y se centra */
  }
}

/* ============================================================
   TIPOGRAFÍA DE MARCA (fix brandbook): todos los títulos display en
   la fuente de marca (Archivo, no la Montserrat del customizer) y los
   números del carrito siempre en mono. Se usa !important porque el
   customizer inyecta Montserrat en los h1..h5 sin override.
   ============================================================ */
h1, h2, h3, h4, h5,
#single-product h1, .section-single-product h1,
.section-featured-home h1, .section-featured-home h2, .section-featured-home h3,
.newsletter h1, .newsletter h2, .newsletter h3,
.page-header h1, .page-header h2, .category-header h1, .category-header h2,
.section-welcome h1, .section-welcome h2, .welcome-message h1,
.modal .page-header, .modal h1, .modal h2, .modal h3{
  font-family: var(--highs-sans) !important;
}
/* Carrito: nombres en la fuente de marca; números (precio/subtotal/total) en mono */
.cart-item-name, #modal-cart .cart-item-name,
.js-cart-item-name, #modal-cart .js-cart-item-name{
  font-family: var(--highs-sans) !important;
}
.cart-item-price, .cart-item-subtotal, .js-cart-item-subtotal,
.cart-total, .cart-subtotal, .js-subtotal-price, .subtotal-price,
#modal-cart .cart-item-price, #modal-cart .cart-item-subtotal,
#modal-cart [class*="price"], #modal-cart [class*="total"],
#modal-cart [class*="subtotal"]{
  font-family: var(--highs-mono) !important;
}

/* ============================================================
   MOTION: tokens de easing, feedback de presión, reveal al scroll,
   bump del carrito y guarda de prefers-reduced-motion.
   Regla: solo se anima transform/opacity.
   ============================================================ */
:root{
  --highs-ease-out: cubic-bezier(.23,1,.32,1);
  --highs-ease-drawer: cubic-bezier(.32,.72,0,1);
}

/* (2) Feedback de presión en CTAs y pills — 140ms, sutil */
.js-addtocart, .highs-buybar .btn, #go-to-checkout, .js-checkout,
.highs-subcat, .highs-btn, .highs-cart-continue{
  transition: transform .14s var(--highs-ease-out), background .18s ease, color .18s ease, border-color .18s ease;
}
.js-addtocart:active, .highs-buybar .btn:active, #go-to-checkout:active, .js-checkout:active,
.highs-subcat:active, .highs-btn:active, .highs-cart-continue:active{ transform: scale(.97); }
/* CTA de la ficha: mayor especificidad para ganarle al `transition:.18s` del theme base */
#product_form .js-addtocart, #single-product .js-addtocart{
  transition: transform .14s var(--highs-ease-out), background .18s ease, color .18s ease, border-color .18s ease !important;
}
#product_form .js-addtocart:active, #single-product .js-addtocart:active{ transform: scale(.97) !important; }

/* (3) Bump de la pastilla del carrito al actualizarse la cantidad */
@keyframes highs-cart-bump{ 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }
.highs-head #ajax-cart a.highs-bump{ animation:highs-cart-bump .24s var(--highs-ease-out); }

/* (1) prefers-reduced-motion: se conserva la opacidad, se quita el movimiento */
@media (prefers-reduced-motion: reduce){
  .highs-card .item-image-featured, .highs-card .item-image-secondary,
  .highs-card:hover .item-image-featured, .highs-card:hover .item-image-secondary{ transform:none !important; }
  #nav-search.modal, #nav-search.modal.modal-show{ transform:translate(-50%,-50%) !important; }
  .js-addtocart:active, .highs-buybar .btn:active, #go-to-checkout:active, .js-checkout:active,
  .highs-subcat:active, .highs-btn:active, .highs-cart-continue:active,
  #product_form .js-addtocart:active, #single-product .js-addtocart:active,
  .section-slider .highs-banner-btn:active{ transform:none !important; }
  .highs-head #ajax-cart a.highs-bump{ animation:none !important; }
  html{ scroll-behavior:auto !important; }
}

/* Menú principal (HOME/SHOP/MÁS) un poco más grande */
.highs-head .highs-nav .highs-nav-link{ font-size:13px !important; letter-spacing:.06em !important; }

/* (D) Título de categoría: fuente de marca (Archivo, fallback de PP Neue Montreal),
   no Montserrat. Peso y tracking fieles a un grotesque de marca. */
.category-header h1,
.category-header .page-header h1{
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif !important;
  font-weight:600 !important; letter-spacing:-.02em !important;
}

/* (C) Control de orden "Más vendidos": caja alineada, texto y flecha centrados */
.js-category-controls .col-md-3{ display:flex; justify-content:flex-end; align-items:center; }
.js-category-controls .form-group{ position:relative; display:inline-block; margin:0 !important; }
.js-category-controls select.form-select,
.js-category-controls .js-sort-by{
  height:46px !important; line-height:1 !important;
  padding:0 44px 0 18px !important; text-align:left;
}
.js-category-controls .form-select-icon{
  top:50% !important; transform:translateY(-50%) !important; right:16px !important; margin:0 !important;
}

/* ============================================================
   MOBILE — pop-up de entrada (newsletter) + menú translúcido
   (solo teléfono; en desktop quedan como estaban)
   ============================================================ */
@media (max-width:767px){
  /* POP-UP HOME (#home-modal): tarjeta prolija, form apilado, X chica arriba-der. */
  #home-modal.modal{
    width:min(400px, 92vw) !important; max-width:92vw !important; left:50% !important;
    height:auto !important; padding:30px 20px 24px !important;
    border-radius:14px; box-shadow:0 22px 55px rgba(0,0,0,.32);
  }
  #home-modal .js-modal-close.modal-header{
    position:absolute !important; top:6px; right:8px; left:auto !important;
    width:auto !important; margin:0 !important; padding:6px !important; text-align:right; z-index:2;
  }
  #home-modal .modal-close{ margin:0 !important; }
  #home-modal .modal-close svg{ width:15px; height:15px; }
  #home-modal h3{ font-size:18px !important; line-height:1.35; margin:6px 0 18px !important; }
  /* Email + botón: apilados y a ancho completo (no apretados al lado) */
  #home-modal .input-append{ display:flex !important; flex-direction:column; gap:10px; }
  #home-modal .input-append > *{ width:100% !important; }
  #home-modal .input-append .form-control,
  #home-modal input#email,
  #home-modal input[type="email"]{ width:100% !important; padding-right:16px !important; }
  /* el botón venía position:absolute (encimado al input) → estático y a ancho completo */
  #home-modal .newsletter-btn{
    position:static !important; width:100% !important; margin:0 !important;
    top:auto !important; right:auto !important; height:48px;
  }

  /* MENÚ HAMBURGUESA (#nav-hamburger): vidrio translúcido oscuro como el submenú desktop */
  #nav-hamburger.modal{
    background:rgba(18,18,20,.84) !important;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  }
  #nav-hamburger, #nav-hamburger a, #nav-hamburger .nav-list-link,
  #nav-hamburger .nav-list-link *, #nav-hamburger .modal-close,
  #nav-hamburger button, #nav-hamburger span, #nav-hamburger label{ color:#fff !important; }
  #nav-hamburger svg, #nav-hamburger svg *{ fill:#fff !important; }
  #nav-hamburger .nav-list-item, #nav-hamburger .nav-list-link,
  #nav-hamburger hr, #nav-hamburger [class*="border"]{ border-color:rgba(255,255,255,.14) !important; }
  /* footer del menú (Crear cuenta / Iniciar sesión): sacar la barra blanca */
  #nav-hamburger .nav-account,
  #nav-hamburger .modal-footer,
  #nav-hamburger [class*="footer"]{ background:transparent !important; border-color:rgba(255,255,255,.14) !important; }

  /* CARRITO (#modal-cart): mismo vidrio translúcido oscuro que el menú, todo legible en claro */
  #modal-cart.modal{
    background:rgba(18,18,20,.86) !important;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  }
  #modal-cart, #modal-cart a, #modal-cart span, #modal-cart p, #modal-cart div,
  #modal-cart h1, #modal-cart h2, #modal-cart h3, #modal-cart h4,
  #modal-cart .cart-item-name, #modal-cart [class*="price"], #modal-cart [class*="total"],
  #modal-cart label, #modal-cart .modal-close, #modal-cart strong{ color:#fff !important; }
  #modal-cart svg, #modal-cart svg *{ fill:#fff !important; }
  #modal-cart input, #modal-cart .js-cart-item-quantity, #modal-cart .cart-item-quantity input{
    color:#fff !important; background:transparent !important; border-color:rgba(255,255,255,.30) !important;
  }
  #modal-cart .cart-item, #modal-cart [class*="border"], #modal-cart hr,
  #modal-cart .modal-header, #modal-cart .modal-footer{ border-color:rgba(255,255,255,.14) !important; background:transparent !important; }
  /* CTA "Iniciar compra": blanco para resaltar sobre el panel oscuro */
  #modal-cart #go-to-checkout, #modal-cart .js-checkout, #modal-cart .highs-cart-cta > a:first-child{
    background:#fff !important; border-color:#fff !important;
  }
  #modal-cart #go-to-checkout, #modal-cart #go-to-checkout *,
  #modal-cart .highs-cart-cta > a:first-child, #modal-cart .highs-cart-cta > a:first-child *{ color:var(--highs-ink) !important; }
  /* "Ver más productos": contorno claro */
  #modal-cart .highs-cart-continue{ background:transparent !important; border:1px solid rgba(255,255,255,.5) !important; }
  #modal-cart .highs-cart-continue, #modal-cart .highs-cart-continue *{ color:#fff !important; }
  /* Carrito AJAX (fullscreen mobile): botones reales.
     "Iniciar Compra" (.btn-primary) → blanco sólido con texto oscuro (resalta). */
  #modal-cart .btn-primary, #modal-cart input.btn-primary, #modal-cart .js-cart-checkout{
    background:#fff !important; border-color:#fff !important; color:var(--highs-ink) !important;
  }
  #modal-cart .btn-primary *{ color:var(--highs-ink) !important; }
  /* "Ver más productos" (a.js-fullscreen-modal-close, botón oscuro) → contorno claro */
  #modal-cart a.js-fullscreen-modal-close{
    background:transparent !important; border:1px solid rgba(255,255,255,.5) !important; color:#fff !important;
  }
  #modal-cart a.js-fullscreen-modal-close *{ color:#fff !important; }

}

/* HOME (desktop + mobile): que el banner (hero) se vea de FONDO por detrás de la
   barra de anuncios corrediza. Solo en home (header transparente): la barra pasa
   de negra sólida a un degradado translúcido (mantiene legible el texto). */
.highs-head.head-transparent .section-advertising,
.head-main.head-transparent .section-advertising,
.highs-head.head-transparent .adbar,
.head-main.head-transparent .adbar{
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.05)) !important;
  border:none !important;
}

/* ============================================================
   BANNER EDITORIAL (sección "Banners de categorías") — 1 solo banner
   a lo ANCHO COMPLETO y BAJITO (franja editorial), no cuadrado 3-up.
   Se activa solo cuando hay UN banner cargado (:only-child).
   ============================================================ */
.section-banners-home:has(.row > .col-md:only-child){
  margin:0 0 var(--highs-gap, 40px);
}
/* full-bleed aunque no esté tildado "ancho completo" en el customizer */
.section-banners-home:has(.row > .col-md:only-child) > .container,
.section-banners-home:has(.row > .col-md:only-child) > .container-fluid{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.section-banners-home:has(.row > .col-md:only-child) .row{
  margin-left:0 !important;
  margin-right:0 !important;
}
.section-banners-home:has(.row > .col-md:only-child) .col-md:only-child{
  padding-left:0 !important;
  padding-right:0 !important;
  flex:0 0 100% !important;
  max-width:100% !important;
}
/* franja bajita: fijamos la altura en .textbanner (contenedor) con overflow hidden,
   y hacemos que la imagen (que el theme fuerza a cuadrado) llene esa franja de forma
   ABSOLUTA. Fijarle height directo a .textbanner-image no gana contra el theme; en
   cambio position:absolute + inset:0 la obliga a tomar el alto del padre (380px). */
.section-banners-home:has(.row > .col-md:only-child) .textbanner{
  height:clamp(220px, 30vw, 400px) !important;
  overflow:hidden !important;
  position:relative !important;
  border-radius:0 !important;
}
.section-banners-home:has(.row > .col-md:only-child) .textbanner-image{
  position:absolute !important;
  inset:0 !important;
  height:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}
.section-banners-home:has(.row > .col-md:only-child) .textbanner-image img,
.section-banners-home:has(.row > .col-md:only-child) .textbanner-image-background{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
}
@media (max-width:767px){
  .section-banners-home:has(.row > .col-md:only-child) .textbanner{
    height:clamp(150px, 42vw, 240px) !important;
  }
}

/* ============================================================
   HOME: carruseles de productos (Día a día / IN-FLIGHTS) — 4 por
   pantalla, deslizamiento lateral premium (Swiper init en layout.tpl).
   ============================================================ */
.highs-home-carousel{ position:relative; overflow:hidden; padding:4px 0; }
/* deslizamiento premium: curva fuerte de salida (no el 'ease' default de Swiper) */
.highs-home-carousel .swiper-wrapper{
  transition-timing-function: var(--highs-ease-out) !important;
}
.highs-home-carousel .swiper-slide{ height:auto; }
/* Flechas: pastilla de vidrio, centradas sobre la foto */
.highs-hc-arrow{
  position:absolute; top:38%; transform:translateY(-50%);
  z-index:5; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transition:transform .16s var(--highs-ease-out), opacity .25s ease, background .2s ease;
}
.highs-hc-arrow svg{ color:var(--highs-ink); }
.highs-hc-arrow:hover{ background:#fff; }
.highs-hc-arrow:active{ transform:translateY(-50%) scale(.93); }
.highs-hc-prev{ left:8px; }
.highs-hc-next{ right:8px; }
/* Swiper agrega .swiper-button-disabled en los extremos → ocultamos la flecha */
.highs-hc-arrow.swiper-button-disabled{ opacity:0; pointer-events:none; }
@media (max-width:767px){
  .highs-hc-arrow{ width:38px; height:38px; }
}
@media (prefers-reduced-motion: reduce){
  .highs-home-carousel .swiper-wrapper{ transition-timing-function: ease !important; }
  .highs-hc-arrow{ transition:none !important; }
  .highs-hc-arrow:active{ transform:translateY(-50%) !important; }
}

/* HIGHS: menos aire vertical entre las secciones de productos del home y el banner
   editorial (antes 78px padding + 70px margin → mucho blanco). */
.section-featured-home{
  padding-top:40px !important;
  padding-bottom:40px !important;
  margin-bottom:18px !important;
}
.section-banners-home{
  margin-top:0 !important;
  margin-bottom:18px !important;
}