/* HS Soluciones — identidad visual de la tienda, adaptada a un layout
   estándar de e-commerce (fondo claro = mejor contraste de fotos y
   conversión; el negro total quedó solo en header/footer como marca). */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Helvetica+Neue:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Bebas+Neue&display=swap');

:root {
  --hs-negro: #0a0a0a;
  --hs-gris-oscuro: #2d2d2d;
  --hs-blanco: #ffffff;
  --hs-gris-fondo: #f4f5f7;
  --hs-gris-borde: #e5e7eb;
  --hs-texto: #222831;
  --hs-rosa: #e91e63;
  --hs-rosa-hover: #c2185b;
  --hs-azul: #007bff;
  --hs-verde: #28a745;
  --hs-indigo: #4338ca;
  /* Precio: color y fuente (cambiar acá; antes era --hs-indigo, azul). Alternativas: rosa #e91e63, verde #1e7e34 */
  --hs-precio-color: #0a0a0a;
  --hs-precio-fuente: 'Bebas Neue', 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* 2026-09-22: Bebas (condensada) para que los precios largos entren en la tarjeta en celular; antes Montserrat */
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--hs-gris-fondo);
  color: var(--hs-texto);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Roboto', sans-serif;
  color: var(--hs-texto);
}

a { color: var(--hs-rosa); }
a:hover, a:focus { color: var(--hs-rosa-hover); }

/* Header / nav: se mantiene oscuro (identidad de marca) */
#header .header-nav,
#header .header-top,
.js-top-navigation,
header#header {
  background: rgba(20, 20, 20, 0.98) !important;
  backdrop-filter: blur(10px);
}

#header .header-nav a,
#header .header-top a,
.header-nav .link,
.header-block__action-btn {
  color: var(--hs-blanco) !important;
}

#header .header-nav a:hover,
.header-block__action-btn:hover {
  color: var(--hs-rosa) !important;
}

#_desktop_logo img,
.logo img {
  max-height: 56px;
  width: auto;
}

/* Contenido principal: fondo claro */
#wrapper,
#content-wrapper,
.page-content,
#category,
#index,
#product {
  background: var(--hs-gris-fondo);
}

/* Bloque de texto institucional y secciones destacadas: tarjeta blanca */
.info-block,
#index .container > section,
.featured-products,
.products-section {
  background: var(--hs-blanco);
}

/* Botones primarios */
.btn-primary,
button[type="submit"].btn-primary,
.add-to-cart {
  background-color: var(--hs-rosa) !important;
  border-color: var(--hs-rosa) !important;
  color: var(--hs-blanco) !important;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--hs-rosa-hover) !important;
  border-color: var(--hs-rosa-hover) !important;
}

.btn-secondary {
  background-color: var(--hs-azul) !important;
  border-color: var(--hs-azul) !important;
  color: var(--hs-blanco) !important;
}

/* Precio y badges */
.current-price,
.product-price,
.product-miniature__price,
.price {
  color: var(--hs-precio-color) !important;
  font-family: var(--hs-precio-fuente) !important;
  font-weight: 800 !important;
  font-size: 1.35em;
}

.product__price {
  color: var(--hs-precio-color) !important;
  font-family: var(--hs-precio-fuente) !important;
  font-weight: 800 !important;
  font-size: 1.8em !important;
}

.product-flag.new,
.product-flag.online-only {
  background-color: var(--hs-azul) !important;
}

.product-flag.discount,
.on-sale,
span.discount-percentage,
.discount-product {
  background-color: var(--hs-verde) !important;
  color: var(--hs-blanco) !important;
}

.in-stock, .product-available {
  color: var(--hs-verde) !important;
  font-weight: 600;
}

.out-of-stock, .product-unavailable {
  color: #c0392b !important;
}

/* Tarjetas de producto: blancas con sombra suave sobre fondo gris claro */
.card,
.product-miniature,
.js-product-miniature,
#products .product,
.category-products .product {
  background: var(--hs-blanco) !important;
  color: var(--hs-texto) !important;
  border: 1px solid var(--hs-gris-borde) !important;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow .25s ease, transform .25s ease;
}

.product-miniature .product-title a,
.product-miniature h2,
.product-miniature h3 {
  color: var(--hs-texto) !important;
}

.product-miniature:hover {
  box-shadow: 0 12px 28px rgba(233, 30, 99, 0.18) !important;
  transform: translateY(-4px);
}

/* Banner y bloque de texto institucional: tarjeta prolija */
.ps_banner img,
.banner img {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Footer: se mantiene oscuro */
#footer,
.footer-container,
footer#footer {
  background: var(--hs-negro) !important;
  color: #d0d0d0 !important;
  border-top: 3px solid var(--hs-rosa);
}

#footer a,
.footer-container a {
  color: #d0d0d0 !important;
}

#footer a:hover {
  color: var(--hs-rosa) !important;
}

/* Breadcrumb */
.breadcrumb {
  background: transparent;
}
.breadcrumb a,
.breadcrumb .current {
  color: var(--hs-texto) !important;
}

/* Inputs */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  background-color: var(--hs-blanco) !important;
  color: #222 !important;
  border: 1.5px solid var(--hs-gris-borde) !important;
  border-radius: 10px;
}

.category-name,
.block-category h1 {
  color: var(--hs-texto) !important;
}

/* Carrusel (ps_imageslider): los h1-h6 globales de arriba pintaban los títulos de la
   leyenda con --hs-texto (casi negro) sobre imágenes oscuras -> ilegibles. Todo el
   texto de la leyenda va en blanco. */
.ps-imageslider__figcaption,
.ps-imageslider__figcaption h1,
.ps-imageslider__figcaption h2,
.ps-imageslider__figcaption h3,
.ps-imageslider__figcaption .h1,
.ps-imageslider__figcaption p,
.ps-imageslider__figcaption div {
  color: var(--hs-blanco) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* Contador del carrito: el número era blanco sobre fondo casi blanco (invisible) */
.header-block__badge {
  background-color: var(--hs-rosa) !important;
  color: var(--hs-blanco) !important;
}

/* Selector de idioma: hay dos variantes de español (es / ag) casi idénticas, solo
   agregaba ruido. Para volver a mostrarlo, borrar esta regla. */
.ps-languageselector {
  display: none !important;
}

/* Etiqueta "Fuera de stock": gris oscuro de marca (antes azul, igual que "Nuevo").
   El tema pinta las etiquetas con !important DENTRO de una @layer (bs-base); un !important de capa le gana a cualquier
   !important fuera de capa, así que no se puede pisar de frente: se redefinen las variables de color que esa regla usa
   (--bs-primary / --bs-primary-rgb), solo para esta etiqueta. */
.product-flags .badge.out_of_stock {
  --bs-primary: var(--hs-gris-oscuro);
  --bs-primary-rgb: 45, 45, 45;
}

/* ── Submenú desktop: repartir los subrubros en columnas ────────────────
   El menú del tema Hummingbird muestra los subrubros en una columna izquierda
   (25 % del ancho) y en el panel derecho los rubros de 3.er nivel. Como la tienda
   tiene solo 2 niveles, ese panel quedaba vacío y la lista salía apilada.
   Solo actúa si NINGÚN subrubro tiene hijos: si se crea un 3.er nivel, el menú
   vuelve a su diseño original. */
.submenu__row:not(:has([data-ps-has-child="true"])) .submenu__left {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .25rem 1.5rem;
  align-content: start;
  border-right: 0;
}
.submenu__row:not(:has([data-ps-has-child="true"])) .submenu__right { display: none; }
.submenu__row:not(:has([data-ps-has-child="true"])) .submenu__left-item.active:not(:hover):not(:focus) { background-color: transparent; }

/* Código de artículo bajo el nombre del producto (ficha) */
.product__reference-hs { font-size: .875rem; color: var(--bs-secondary-color, #6c757d); margin: -.25rem 0 .75rem; }
.product__reference-hs span { font-weight: 500; color: var(--bs-body-color); }

/* ══ Encabezado (2026-09-22) ═════════════════════════════════════════════
   El buscador se movió a la barra superior (hook displayNav1, junto a
   "Contacte con nosotros"); así el menú tiene todo el ancho de abajo. */
@media (min-width: 768px) {
  #header .header-top { padding: .6rem 0; }
  #header .header-top .row { flex-wrap: nowrap; align-items: center; }
  #header .header-top__left { flex: 1 1 auto; width: auto; max-width: none; flex-wrap: nowrap; gap: 2rem; }
  #header .header-top__right { flex: 0 0 auto; width: auto; max-width: none; }
  #header #_desktop_ps_searchbar { flex: 1 1 auto; max-width: 640px; margin: 0 auto; order: 0; }
  #header #_desktop_ps_searchbar .ps-searchbar { width: 100%; }
}
/* Buscador más visible */
#header .ps-searchbar__input {
  height: 46px; border-radius: 999px; border: 2px solid transparent;
  background: var(--hs-blanco); color: var(--hs-texto); font-size: 1rem;
  padding-inline: 3rem 1.25rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
#header .ps-searchbar__input::placeholder { color: #8a8f98; }
#header .ps-searchbar__input:focus { border-color: var(--hs-rosa); box-shadow: 0 0 0 4px rgba(233, 30, 99, .25); outline: 0; }
#header .ps-searchbar__magnifier { left: 1rem; color: var(--hs-rosa); font-size: 26px; }

/* Menú: flecha clara sobre fondo oscuro */
#header .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle { color: rgba(255, 255, 255, .7); padding-right: .5rem; }
/* Menú: al pasar el mouse (o con el submenú abierto) botón rosa y letras blancas */
#header .ps-mainmenu__tree > li .ps-mainmenu__tree-item-wrapper { border-radius: 6px; transition: background-color .15s ease; }
#header .ps-mainmenu__tree > li:hover .ps-mainmenu__tree-item-wrapper,
#header .ps-mainmenu__tree > li:focus-within .ps-mainmenu__tree-item-wrapper { background-color: var(--hs-rosa); }
#header .ps-mainmenu__tree > li:hover .ps-mainmenu__tree-link,
#header .ps-mainmenu__tree > li:hover .ps-mainmenu__tree-dropdown-toggle,
#header .ps-mainmenu__tree > li:focus-within .ps-mainmenu__tree-link,
#header .ps-mainmenu__tree > li:focus-within .ps-mainmenu__tree-dropdown-toggle { color: var(--hs-blanco); }

/* Submenú en la misma línea visual que el menú (oscuro, hover rosa) */
#header .submenu { background-color: #1c1c1e; border-top: 3px solid var(--hs-rosa); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
#header .submenu__left { border-right-color: rgba(255, 255, 255, .08); }
#header .submenu a, #header .submenu__left-item { color: #e9e9ec; }
#header .submenu__left-item:hover, #header .submenu__left-item:focus,
#header .submenu__left-item.active:hover { background-color: var(--hs-rosa); color: var(--hs-blanco); }
#header .submenu__left-item.active { background-color: rgba(255, 255, 255, .06); color: var(--hs-blanco); }
#header .submenu a:hover { color: var(--hs-blanco); }

/* Ajuste 2: buscador centrado en la fila y menú en una sola línea */
@media (min-width: 768px) {
  #header .header-top .row { display: grid; grid-template-columns: 1fr minmax(0, 640px) 1fr; align-items: center; column-gap: 2rem; }
  #header .header-top__left { display: contents; }
  #header .header-top .row > *, #header .header-top__left > * { width: auto; max-width: none; }
  #header #_desktop_ps_searchbar { grid-column: 2; margin: 0; max-width: none; justify-self: stretch; }
  #header .header-top__right { grid-column: 3; justify-self: end; }
}
@media (min-width: 1200px) {
  #header .header-bottom__row { align-items: center; flex-wrap: nowrap; }
  #header .ps-mainmenu__tree { flex-wrap: nowrap; gap: .25rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-item-wrapper { margin-block: .75rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-link { padding: .5rem .15rem .5rem .6rem; font-size: .95rem; white-space: nowrap; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle { padding: .5rem .45rem .5rem .1rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-item-wrapper:not(:has(.ps-mainmenu__tree-dropdown-toggle)) .ps-mainmenu__tree-link { padding-right: .6rem; }
}

/* Ajuste 3: el backdrop-filter del encabezado recortaba el menú móvil (offcanvas fijo) a la altura del header */
#header .header-nav, #header .header-top, .js-top-navigation, header#header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* el tema pone ms-auto (margen automático !important) al buscador y lo corría a la derecha */
@media (min-width: 768px) { #header #_desktop_ps_searchbar { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } }
/* Ajuste 4: barra superior siempre en UNA fila (a 1280 px la columna derecha partía "Iniciar sesión / Carrito") */
@media (min-width: 768px) {
  #header .header-top .row { grid-template-columns: minmax(max-content, 1fr) minmax(280px, 640px) minmax(max-content, 1fr); grid-template-rows: auto; }
  #header .header-top .row > *, #header .header-top__left > * { grid-row: 1; }
  #header #_desktop_ps_contactinfo { grid-column: 1; white-space: nowrap; }
  #header .header-top__right { flex-wrap: nowrap; white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1399.98px) { #header .header-top .row { grid-template-columns: minmax(max-content, 1fr) minmax(260px, 540px) minmax(max-content, 1fr); } }
/* Ajuste 5: ícono ≡ claro; lupa del buscador de vuelta en celular; menú más compacto (entra "Kits" a 1280 px) */
#header .menu-toggle, #header .menu-toggle .material-icons { color: var(--hs-blanco) !important; }
@media (max-width: 767.98px) {
  header#header { position: relative; }
  #header .header-top.d-none { display: block !important; height: 0; padding: 0; border: 0; overflow: visible; }
  #header .header-top__right, #header #_desktop_ps_contactinfo { display: none !important; }
  #header .header-top, #header .header-top .container-md, #header .header-top .row, #header .header-top__left { position: static; }
  #header .ps-searchbar--mobile { position: absolute; top: 4px; right: 88px; height: 48px; align-items: center; z-index: 1030; }
  #header .ps-searchbar--mobile, #header .ps-searchbar--mobile .material-icons, #header .ps-searchbar--mobile button { color: var(--hs-blanco) !important; }
}
@media (min-width: 1200px) {
  #header .ps-mainmenu__tree { gap: .1rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-link { font-size: .9rem; padding: .45rem .1rem .45rem .5rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle { padding: .45rem .35rem .45rem 0; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-item-wrapper:not(:has(.ps-mainmenu__tree-dropdown-toggle)) .ps-mainmenu__tree-link { padding-right: .5rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) { #header .ps-mainmenu__tree > li .ps-mainmenu__tree-link { font-size: .84rem; padding-left: .4rem; } #header .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle { padding-right: .2rem; } }
/* Las utilidades de Bootstrap (d-none…) viven en @layer utilities con !important y le ganan a cualquier regla sin capa:
   para mostrar la barra superior (solo la lupa) en celular hay que declararlo dentro de esa misma capa. */
@layer utilities {
  @media (max-width: 767.98px) { #header .header-top.d-none { display: block !important; } }
}

/* ══ Celular (2026-09-22) ══════════════════════════════════════════════ */
/* Precios en Bebas Neue: tiene un solo grosor (400); con 800 el navegador la "engorda" y se ve mal */
.current-price, .product-price, .product-miniature__price, .price, .product__price {
  font-weight: 400 !important; letter-spacing: .02em; line-height: 1.1;
}
.current-price, .product-price, .product-miniature__price, .price { font-size: 1.7em; }
.product__price { font-size: 2.6em !important; }
/* resguardo: en las tarjetas del listado el precio nunca se sale del recuadro */
.product-miniature [class*="price"] { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .product-miniature .product-miniature__price, .product-miniature .price { font-size: clamp(1.25rem, 6.2vw, 1.7rem); }
}

/* Buscador desplegable del celular: mismo fondo oscuro que la barra de desktop + línea rosa */
#searchCanvas.offcanvas, #header #searchCanvas {
  background: rgba(20, 20, 20, .98) !important; border-bottom: 3px solid var(--hs-rosa) !important; color: var(--hs-blanco);
}
#searchCanvas .offcanvas-header { padding: .75rem 1rem; gap: .5rem; }
#searchCanvas .btn-close, #searchCanvas .btn-link, #searchCanvas .material-icons { color: var(--hs-blanco) !important; filter: none; }
#searchCanvas .btn-close { filter: invert(1) grayscale(1) brightness(2) !important; opacity: .85; }

/* Menú móvil: el panel de categorías tiene que poder desplazarse (submenús largos) */
#mobileMenu.offcanvas { display: flex; flex-direction: column; }
#mobileMenu .ps-mainmenu__mobile { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 1.5rem; }
/* Precios más grandes (pedido del usuario tras pasar a Bebas) */
.current-price, .product-price, .product-miniature__price, .price { font-size: 2em; }
.product__price { font-size: 3.1em !important; }
@media (max-width: 575.98px) {
  .product-miniature .product-miniature__price, .product-miniature .price { font-size: clamp(1.4rem, 7.4vw, 2rem); }
}
/* Fondo oscuro del buscador del celular: el tema lo fija dentro de una @layer */
#searchCanvas { --bs-offcanvas-bg: #141414; --bs-offcanvas-color: #fff; }
@layer utilities { #header #searchCanvas.offcanvas { background-color: #141414 !important; } }
@layer utilities { #header #searchCanvas .offcanvas-header { background-color: transparent !important; } }
#header #searchCanvas .offcanvas-header { background-color: transparent !important; }
.product__reference-hs a { font-weight: 600; color: var(--hs-rosa); text-decoration: none; }
.product__reference-hs a:hover { text-decoration: underline; }
.product__reference-sep { color: var(--hs-gris-borde); margin: 0 .35rem; font-weight: 400 !important; }
.product__right .product__manufacturer { display: none; } /* la marca ya se muestra junto al código */

/* Slider con banners diseñados (el texto va dentro de la imagen): sin título superpuesto y sin recorte en celular */
@layer utilities { .ps-imageslider__figcaption { display: none !important; } }
.ps-imageslider img, .ps-imageslider__figure img { width: 100%; height: auto !important; aspect-ratio: 1920 / 600; object-fit: contain !important; }
.ps-imageslider .carousel-item, .ps-imageslider__figure, .ps-imageslider__link { height: auto !important; min-height: 0 !important; }
@media (max-width: 767.98px) { .ps-imageslider img, .ps-imageslider__figure img { aspect-ratio: 1 / 1; } }
/* controles del slider: flechas al borde y sin puntitos (pisaban el diseño) */
.ps-imageslider .carousel-indicators { display: none; }
.ps-imageslider .carousel-control-prev, .ps-imageslider .carousel-control-next { width: 44px; opacity: .55; }
.ps-imageslider .carousel-control-prev { left: 0; } .ps-imageslider .carousel-control-next { right: 0; }
.ps-imageslider .carousel-control-prev:hover, .ps-imageslider .carousel-control-next:hover { opacity: .95; }

/* Botón de arrepentimiento en la barra superior (Res. 424/2020) */
#header .ps-contactinfo { display: flex; flex-direction: column; gap: .15rem; line-height: 1.25; }
#header .ps-contactinfo__arrepentimiento { font-size: .78rem; color: #ffd60a !important; text-decoration: underline; text-underline-offset: 2px; }
#header .ps-contactinfo__arrepentimiento:hover { color: #fff !important; }
/* Ajuste 6 (2026-09-23): 11 rubros en el menú (se sumaron Automatismos e Incendio). Menú compacto en PC y, entre 1200 y 1399 px,
   encabezado a todo el ancho (barra superior y menú alineados) para que entre en UNA línea. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  #header .header-top > .container-md, #header .header-bottom__container { max-width: none; padding-inline: 24px; }
}
@media (min-width: 1200px) {
  #header .ps-mainmenu__tree { gap: 0; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-link { font-size: .82rem; padding-left: .35rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle { padding-right: .15rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-item-wrapper:not(:has(.ps-mainmenu__tree-dropdown-toggle)) .ps-mainmenu__tree-link { padding-right: .35rem; }
}
@media (min-width: 1200px) and (max-width: 1299.98px) {
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-link { font-size: .76rem; padding-left: .25rem; }
  #header .ps-mainmenu__tree > li .ps-mainmenu__tree-dropdown-toggle { padding-right: .05rem; }
}

/* 2026-10-07: árbol de categorías plegable en celular (< 768 px) — botón "Ver categorías" (ps_categorytree.tpl) */
.hs-cattree-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .7rem 1rem; margin-bottom: .75rem;
  background: #fff; border: 1px solid #d0d0d0; border-radius: .5rem;
  color: #e91e63; font-weight: 600; font-size: 1rem; text-align: left;
}
.hs-cattree-toggle__txt { flex: 1; }
.hs-cattree-toggle__chevron { transition: transform .2s; }
.hs-cattree-toggle:not(.collapsed) .hs-cattree-toggle__chevron { transform: rotate(180deg); }

/* 2026-10-07: tablet 768–959 px — las 3 columnas del encabezado no entraban y "Carrito" quedaba afuera (scroll horizontal).
   En ese rango: usuario y carrito solo con ícono, menos separación y buscador más angosto. Arriba de 960 px no cambia. */
@media (min-width: 768px) and (max-width: 959.98px) {
  #header .header-top .row { grid-template-columns: max-content minmax(180px, 1fr) max-content; column-gap: 1rem; }
  #header .header-top__right { gap: .25rem; }
}
@layer utilities {
  @media (min-width: 768px) and (max-width: 959.98px) { #header .header-top__right .header-block__title { display: none !important; } }
}