/* ═══════════════════════════════════════════════════════════════════════
   Highsupply · Iconos de subcategoría en el mega menú (2026-10-20)

   Un SVG inline (Lucide, 24x24 en viewBox) delante de cada enlace de
   categoría del mega menú de escritorio. Lo imprime la función Smarty
   {hs_cat_icon} (templates/_partials/hs-cat-icons.tpl) desde el override
   modules/iqitmegamenu/views/templates/hook/_partials/submenu_content.tpl.

   Se carga DESPUÉS de highsupply.css (ver head.tpl, todas las páginas).
   Contexto heredado de highsupply.css (~2875-2889): los enlaces de las listas
   son display:inline-flex !important; align-items:center; font-size 15px;
   line-height 1.4 (caja de línea de 21px); padding 4px 0; color var(--hs-text)
   y hover var(--hs-accent-text). Aquí solo se añade el icono.
   ═══════════════════════════════════════════════════════════════════════ */

/* El icono: 18px, trazo currentColor (1.6px viene en el SVG), gris mute,
   separado 10px del texto. align-self:flex-start + margin-top centra el
   icono en la PRIMERA línea ((21px - 18px) / 2 = 1,5px): en etiquetas de una
   línea equivale a centrarlo; si la etiqueta parte en dos, el icono se queda
   arriba en vez de flotar entre las dos líneas. */
.hs-mainmenu .cbp-hrsub .hs-cat-ico {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-self: flex-start;
  margin: 1.5px 10px 0 0;
  color: var(--hs-text-mute);
  stroke: currentColor;
  fill: none;
  pointer-events: none;
  transition: color var(--hs-transition);
}

/* Enlaces que llevan icono (clase puesta por el override): garantizamos la
   caja flex también en el título-enlace directo del layout treep (p. ej.
   "Recambios y accesorios"), que en highsupply.css es display:block !important
   con especificidad (0,4,0) -> aquí (0,4,1) y cargado después. */
.hs-mainmenu .cbp-hrsub .cbp-category-link-w > a.hs-has-ico,
.hs-mainmenu .cbp-hrsub a.cbp-category-title.hs-has-ico {
  display: inline-flex !important;
  align-items: center;
}

/* Layout treep de VAPORIZADORES (tab 3): la rejilla auto-fit solo tiene sitio
   para 3 columnas (uso · tipo · 1 más). Con dos enlaces directos (37 Recambios
   y accesorios, 81 Accesorios Proxy Puffco) el 4º saltaba a una 2ª fila, solo,
   abajo a la izquierda. Aquí la rejilla se fija a 3 columnas y los enlaces
   directos se apilan en la 3ª como una lista (sin medidas a mano: si una
   etiqueta parte en dos líneas o entra un 3º enlace, el flujo lo absorbe).
   Solo vale para esta pestaña; si Manuel prefiere otra cosa, basta con
   borrar este bloque. */
.hs-mainmenu .cbp-hrmenu-tab-3 .cbp-hrsub .cbp-categories-row {
  grid-template-columns: repeat(3, minmax(160px, 1fr)) !important;
  row-gap: 10px !important;
}
.hs-mainmenu .cbp-hrmenu-tab-3 .cbp-hrsub .cbp-categories-row > div:not(:has(ul)) {
  grid-column: 3;
  align-self: start;
}
.hs-mainmenu .cbp-hrmenu-tab-3 .cbp-hrsub .cbp-categories-row > div:has(ul) {
  grid-row: 1 / span 10;
}

/* Hover/foco del enlace: el icono toma el mismo magenta que el texto
   (--hs-accent-text, el que ya usa el hover de estos enlaces en
   highsupply.css) para que icono y palabra se lean como una sola pieza. */
.hs-mainmenu .cbp-hrsub a.hs-has-ico:hover .hs-cat-ico,
.hs-mainmenu .cbp-hrsub a.hs-has-ico:focus-visible .hs-cat-ico {
  color: var(--hs-accent-text);
}

@media (prefers-reduced-motion: reduce) {
  .hs-mainmenu .cbp-hrsub .hs-cat-ico { transition: none; }
}