/* =========================================================
Iconos de categoria para el menu lateral mobile (sidebar)
----------------------------------------------------------
Matias entrego 8 iconos SVG (uno por categoria) para el
panel de Categorias del menu lateral mobile de WoodMart
(menu 585 "Mobile - Categorias", #menu-mobile-category-menu).
Metodo: cada item del menu lleva la clase .wd-cat-icon +
.cat-icon-{slug} (campo _menu_item_classes, nativo WP). El
icono se pinta como mask-image sobre un ::before y se rellena
con currentColor, por lo que toma el color de marca del link
y reacciona en hover/activo SIN duplicar colores.
Los SVG son monocromos (fill/stroke currentColor). Al usarse
como mask solo cuenta su canal alpha (la silueta), asi que el
color lo da background-color: currentColor.
Archivos SVG: assets/img/category-icons/{slug}.svg
========================================================= */
/* Layout del link: deja espacio para el icono a la izquierda.
Fijamos el color del texto del link al azul de marca para que el
icono (currentColor) tome el Azul Legado por defecto. El hover/activo
de WoodMart sigue funcionando y el icono lo acompana (ver mas abajo).
DOS scopes de menu de categorias usan estos iconos:
- .mobile-categories-menu -> menu 585 (panel lateral mobile, sesion 23b)
- .wd-nav-vertical -> menu 591 (dropdown "Categorias" desktop, flyout)
Ambos comparten el link .woodmart-nav-link y la clase del item
.wd-cat-icon cat-icon-{slug}, asi que reusamos el mismo mask-image. */
.mobile-categories-menu li.wd-cat-icon > a.woodmart-nav-link,
.wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link {
display: flex;
align-items: center;
gap: 12px;
color: var(--color-brand-primary, #38627A);
}
/* Cuadro del icono. Hereda el color del link (currentColor) => Azul Legado,
y cualquier cambio de color en hover/activo se refleja en el icono. */
.mobile-categories-menu li.wd-cat-icon > a.woodmart-nav-link::before,
.wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link::before {
content: "";
flex: 0 0 auto;
width: 26px;
height: 26px;
background-color: currentColor; /* = color de marca / hover / activo */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: transform 0.15s ease;
}
/* En el dropdown desktop el item ya trae el ![]()
demo.
Al limpiar _menu_item_image ese ![]()
desaparece; por si algun item
conservara uno, lo ocultamos dentro del scope con icono propio. */
.wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link img.wd-nav-img {
display: none;
}
/* Tamano del icono SOLO en el dropdown desktop (menu 591): 1.4x del base
(26px -> 36px). El SVG es vectorial => escala nitido. El 585 mobile NO se
afecta (mantiene 26px del bloque compartido de arriba). Subimos un poco el
gap para que el texto no quede pegado al icono mas grande. */
.wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link {
gap: 14px;
}
.wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link::before {
width: 36px;
height: 36px;
}
/* Centrado horizontal del icono SOLO en el riel sticky COLAPSADO (icon-only) del
menu 591. CLAVE: WoodMart expande el riel con `.wd-sticky-nav:is(:hover, .wd-opened)`
— o sea por HOVER (desktop) O por la clase .wd-opened (cuando se abre por CLICK/tap,
ej. desde el boton "Categorias"). La clase .wd-dis-act esta en AMBOS estados y NO
sirve para discriminar. Por eso el colapsado real es :not(:hover):not(.wd-opened):
ahi posicionamos el ::before absoluto y centrado en la celda (29.5px de 59px). En
cuanto el riel se expande (hover O .wd-opened) la regla deja de aplicar y el ::before
vuelve al flujo normal (inline, junto al texto, a la izquierda). El span de texto no
se toca. Acotado al riel sticky; el 585 mobile y el dropdown del header no se afectan. */
.wd-sticky-nav:not(:hover):not(.wd-opened) .wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link {
position: relative;
}
.wd-sticky-nav:not(:hover):not(.wd-opened) .wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link::before {
position: absolute;
/* left FIJO en 30px (no 50%): al COLAPSAR el riel anima su ancho 274->59px; si
usaramos left:50% el icono seguiria ese 50% (137->29.5) y se deslizaba de forma
incomoda. Con left:30px el icono queda clavado en el centro (30px = hamburguesa)
durante toda la animacion de ancho. top:50% es estable (la altura de fila no
se anima). margin -18px centra el icono de 36px sin usar transform (que tiene
transition y causaba el salto vertical). */
left: 30px;
top: 50%;
margin: -18px 0 0 -18px;
}
/* Sin SALTO HORIZONTAL colapsado<->expandido: el icono colapsado se centra en la
celda (~30px, alineado con el hamburguesa). El icono inline del expandido caia en
38px (padding-left 20 + mitad del icono 18) -> saltaba 8px al expandir. Bajamos el
padding-left del link a 12px: 12 + 18 = 30 = mismo centro que el colapsado, asi el
icono no se mueve horizontalmente entre estados. Acotado al riel sticky vertical. */
.wd-sticky-nav .wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link {
padding-left: 12px;
}
/* Pequeno feedback al pasar el dedo/mouse. */
.mobile-categories-menu li.wd-cat-icon > a.woodmart-nav-link:hover::before,
.wd-nav-vertical li.wd-cat-icon > a.woodmart-nav-link:hover::before {
transform: scale(1.08);
}
/* --- Mapeo icono <-> categoria (mask-image por slug) ---
Selectores sin prefijo de scope: aplican a cualquier li.cat-icon-{slug}
que tenga el ::before definido arriba (mobile o vertical). */
li.cat-icon-almacen > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/almacen.svg");
mask-image: url("../img/category-icons/almacen.svg");
}
li.cat-icon-frescos-y-congelados > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/frescos-y-congelados.svg");
mask-image: url("../img/category-icons/frescos-y-congelados.svg");
}
li.cat-icon-sushi > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/sushi.svg");
mask-image: url("../img/category-icons/sushi.svg");
}
li.cat-icon-bebidas > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/bebidas.svg");
mask-image: url("../img/category-icons/bebidas.svg");
}
li.cat-icon-granel > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/granel.svg");
mask-image: url("../img/category-icons/granel.svg");
}
li.cat-icon-granel-combos > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/granel-combos.svg");
mask-image: url("../img/category-icons/granel-combos.svg");
}
li.cat-icon-descartables > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/descartables.svg");
mask-image: url("../img/category-icons/descartables.svg");
}
li.cat-icon-bazar > a.woodmart-nav-link::before {
-webkit-mask-image: url("../img/category-icons/bazar.svg");
mask-image: url("../img/category-icons/bazar.svg");
}
/* =========================================================
Iconos de categoria a la IZQUIERDA del titulo de cada
seccion de carrusel del HOME (post 31931).
----------------------------------------------------------
Cada seccion del home titula con el NOMBRE de una categoria
(Almacen, Bebidas, Granel, Sushi...) + un link "Ver Todos" a
la derecha. Queremos: "[icono] Almacen ......... Ver Todos".
Reuso EXACTO de los iconos del mega menu: el wd_title de cada
seccion lleva la clase .cat-icon-{slug} (campo "CSS Classes"
del widget Elementor) + el marcador .naccato-cat-title. El SVG
se pinta como mask-image sobre el ::before del interno
(h4.woodmart-title-container), mismo metodo monocromo
(mask + currentColor / brand) que el menu => mismo icono,
color de marca consistente, una sola fuente de SVG.
DECISION DE DISENO (skill ui-ux-pro-max):
- Tamano 30px (icon-md): ~1.1x la cap-height del heading
wd-fontsize-l, lo lee como elemento lider sin competir.
- Alineacion: inline-flex + align-items:center sobre el
(centrado robusto, no baseline-tricks). El icono flex:0 0 auto.
- Gap 12px (ritmo 8pt, mismo gap que el menu).
- Color: AZUL DE MARCA (--color-brand-primary #38627A), el
MISMO azul que pinta los iconos del riel del menu, para que
home<->menu queden sincronizados. El texto del heading mantiene
su color oscuro default de WoodMart => patron "[icono azul]
Titulo oscuro", limpio y de marca.
- Microinteraccion: scale(1.06) sutil al hover de la seccion,
con respeto a prefers-reduced-motion. El icono es decorativo
(pseudo-elemento => invisible para lectores de pantalla); el
texto del sigue siendo la etiqueta accesible.
Markup real del wd_title (verificado en el render del home):
.elementor-widget-wd_title.cat-icon-{slug}.naccato-cat-title
.title-wrapper > .liner-continer
> h4.woodmart-title-container.title <- aca va el ::before
========================================================= */
.elementor-widget-wd_title.naccato-cat-title h4.woodmart-title-container {
display: inline-flex;
align-items: center;
/* Gap subido 12 -> 16px (ritmo 8pt): a 60px el icono lider necesita mas
aire respecto del titulo para no quedar pegado (skill ui-ux-pro-max:
whitespace-balance / touch-spacing). */
gap: 16px;
}
.elementor-widget-wd_title.naccato-cat-title h4.woodmart-title-container::before {
content: "";
flex: 0 0 auto;
/* DOBLE del tamano anterior: 30 -> 60px (icon-xl), SOLO en el home. El SVG
es vectorial => escala nitido. El menu (scopes .mobile-categories-menu /
.wd-nav-vertical) NO se afecta: mantiene su 26/36px. */
width: 60px;
height: 60px;
/* Azul de marca = mismo color que los iconos del menu. */
background-color: var(--color-brand-primary, #38627A);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
transition: transform 0.15s ease;
}
/* Microinteraccion sutil al pasar por la seccion (escala el icono). */
.elementor-widget-wd_title.naccato-cat-title:hover h4.woodmart-title-container::before {
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
.elementor-widget-wd_title.naccato-cat-title h4.woodmart-title-container::before {
transition: none;
}
.elementor-widget-wd_title.naccato-cat-title:hover h4.woodmart-title-container::before {
transform: none;
}
}
/* Mapeo icono <-> categoria para los titulos del home.
Reusa los MISMOS archivos SVG que el menu (assets/img/category-icons).
NOTA: en el VPS la categoria Sushi tiene slug 'sushi-2', pero la clase
del widget la pongo yo => uso .cat-icon-sushi para reusar sushi.svg. */
.elementor-widget-wd_title.cat-icon-almacen h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/almacen.svg");
mask-image: url("../img/category-icons/almacen.svg");
}
.elementor-widget-wd_title.cat-icon-bebidas h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/bebidas.svg");
mask-image: url("../img/category-icons/bebidas.svg");
}
.elementor-widget-wd_title.cat-icon-granel h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/granel.svg");
mask-image: url("../img/category-icons/granel.svg");
}
.elementor-widget-wd_title.cat-icon-sushi h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/sushi.svg");
mask-image: url("../img/category-icons/sushi.svg");
}
.elementor-widget-wd_title.cat-icon-frescos-y-congelados h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/frescos-y-congelados.svg");
mask-image: url("../img/category-icons/frescos-y-congelados.svg");
}
.elementor-widget-wd_title.cat-icon-descartables h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/descartables.svg");
mask-image: url("../img/category-icons/descartables.svg");
}
.elementor-widget-wd_title.cat-icon-bazar h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/bazar.svg");
mask-image: url("../img/category-icons/bazar.svg");
}
/* =========================================================
GROSOR DE LINEA del HOME (variantes -bold, SOLO el home)
----------------------------------------------------------
Pedido: los iconos de categoria del HOME deben tener el MISMO
grosor visual de linea que el icono "Productos destacados"
(vg-primary-discount-1.svg, el ticket con %), que es notablemente
mas grueso que los iconos finos de Matias.
El icono de "destacados" tiene un trazo efectivo de ~5.86% del lado
de su viewBox (medido sobre el grosor de la pared del ticket en su
box 34x34). Los iconos de categoria son finos: 6 son fill-based
(shapes rellenas) y 1 es stroke-based (frescos, stroke-width 5 sobre
viewBox 209.73 ~= 2.38%). Para igualar el grosor SIN tocar el menu:
- NO se editan los SVG originales (los comparte el mega menu via
mask-image y debe quedar fino). Se crearon variantes -bold.svg:
* fill-based -> se les agrega un stroke currentColor (sw 6.0-6.5)
encima del fill => dilata la silueta (engrosa la linea efectiva).
* frescos (stroke) -> stroke-width 5 -> 12.3 (~5.86% del box, el
grosor objetivo del icono de destacados).
- Estas reglas SOLO repintan la mask del scope del HOME
(.naccato-cat-title), con la misma especificidad que el mapeo de
arriba pero declaradas DESPUES => ganan por orden de fuente. El menu
(.mobile-categories-menu / .wd-nav-vertical) sigue usando los SVG
finos originales: NO se ve afectado.
========================================================= */
.elementor-widget-wd_title.naccato-cat-title.cat-icon-almacen h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/almacen-bold.svg");
mask-image: url("../img/category-icons/almacen-bold.svg");
}
.elementor-widget-wd_title.naccato-cat-title.cat-icon-bebidas h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/bebidas-bold.svg");
mask-image: url("../img/category-icons/bebidas-bold.svg");
}
.elementor-widget-wd_title.naccato-cat-title.cat-icon-granel h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/granel-bold.svg");
mask-image: url("../img/category-icons/granel-bold.svg");
}
.elementor-widget-wd_title.naccato-cat-title.cat-icon-sushi h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/sushi-bold.svg");
mask-image: url("../img/category-icons/sushi-bold.svg");
}
.elementor-widget-wd_title.naccato-cat-title.cat-icon-frescos-y-congelados h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/frescos-y-congelados-bold.svg");
mask-image: url("../img/category-icons/frescos-y-congelados-bold.svg");
}
.elementor-widget-wd_title.naccato-cat-title.cat-icon-descartables h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/descartables-bold.svg");
mask-image: url("../img/category-icons/descartables-bold.svg");
}
.elementor-widget-wd_title.naccato-cat-title.cat-icon-bazar h4.woodmart-title-container::before {
-webkit-mask-image: url("../img/category-icons/bazar-bold.svg");
mask-image: url("../img/category-icons/bazar-bold.svg");
}