/**
* Zenth Toolkit — Mega Menú Lateral v3.0 (CR Red Editorial)
*
* Drawer lateral del hamburger menu: fondo rojo CR #E8001D con textura
* graffiti, niveles con transición horizontal tipo Coterie, búsqueda +
* sociales + cuenta + carrusel de destacados. Especificidad reforzada con
* .zenth-mm-root anidado para blindar contra estilos del tema activo.
*
* v3.0 cambios visuales:
* + Fondo rojo CR #E8001D con textura graffiti como pseudo-elemento
* + Texto blanco
* + Heading de subnivel con tipografía display gigante (Super Brigade del child theme)
* + Barra de búsqueda al final del nivel 0
* + Iconos sociales + botón CUENTA en el footer
* + Carrusel de productos destacados en subniveles (configurable por categoría)
*
* ─────────────────────────────────────────────────────────────────────────
* ÍNDICE
* §1 Root tokens → .zenth-mm-root (custom props: color/timing/z)
* §2 Drawer shell → root posición + overlay + drawer + textura
* §3 Header → barra superior + logo + botón cerrar
* §4 Body & niveles → body/nav + level root/nested + has-sub-open
* §5 Items & links → item + link + label + chevron + current
* §6 Back (legacy) → item--back + link--back + back-arrow
* §7 Headings → item--heading + heading + heading--link
* §8 Featured → featured + text + link
* §9 WhatsApp CTA → whatsapp + link + icon
* §10 Footer → footer + text
* §11 Trigger → hamburger trigger + barras + animación X
* §12 Body scroll lock → body.zenth-mm-body-lock
* §13 Tags → tag + --new/--hot/--sold_out
* §14 Footer links → footer-links + grid + item + link
* §15 Search → search + form + input + submit + fibo
* §16 Bottom row → bottom-row + social + account
* §17 Subcarousel → subcarousel + viewport/track/card/tag/nav/dots
* §18 Header back → header back button + ocultar back/footer en subnivel
* §19 Responsive → TODOS los @media de tamaño consolidados acá
* + subsección accesibilidad (prefers-reduced-motion)
* ─────────────────────────────────────────────────────────────────────────
* BREAKPOINTS usados acá (desktop es la base, sin media query):
* Mobile-small → max-width: 480px (único breakpoint de tamaño)
*
* No hay otros breakpoints de tamaño. Un único bloque @media consolida todos
* los ajustes mobile-small (link, heading, header, search, footer, etc.),
* ordenados por §componente.
* + 1 media de accesibilidad (prefers-reduced-motion), en subsección propia
* al final, SIN consolidar con el de tamaño.
* ─────────────────────────────────────────────────────────────────────────
*/
/* ═══════════════════════════════════════════════════════════════════════
§1 · ROOT TOKENS — variables del drawer (.zenth-mm-root)
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root {
--zenth-mm-width: 400px;
--zenth-mm-bg: #E8001D;
--zenth-mm-bg-deep: #B8001A;
--zenth-mm-text: #ffffff;
--zenth-mm-text-muted: rgba(255, 255, 255, 0.7);
--zenth-mm-accent: #ffffff;
--zenth-mm-overlay: rgba(0, 0, 0, 0.7);
/* Timings asimétricos: abrir con peso, cerrar decidido. */
--zenth-mm-speed-open: 420ms;
--zenth-mm-speed-close: 340ms;
--zenth-mm-ease-open: cubic-bezier(0.32, 0.72, 0, 1); /* Apple-style spring */
--zenth-mm-ease-close: cubic-bezier(0.4, 0, 0.2, 1); /* standard material */
/* Alias de compatibilidad. */
--zenth-mm-speed: var(--zenth-mm-speed-open);
--zenth-mm-ease: var(--zenth-mm-ease-open);
--zenth-mm-border: rgba(255, 255, 255, 0.18);
--zenth-mm-hover-bg: rgba(255, 255, 255, 0.08);
--zenth-mm-whatsapp: #25d366;
--zenth-mm-whatsapp-hover: #1fb954;
--zenth-mm-z: 999999;
}
/* ═══════════════════════════════════════════════════════════════════════
§2 · DRAWER SHELL — posición fija + overlay + panel + textura
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root {
position: fixed;
/* v1.23.3: top dinámico para que header+topbar queden visibles arriba.
--cr-header-total-height viene del child theme (global.css). */
top: var(--cr-header-real-h, var(--cr-header-total-height, var(--cr-header-height, 80px)));
right: 0;
bottom: 0;
left: 0;
z-index: var(--zenth-mm-z);
pointer-events: none;
visibility: hidden;
font-family: inherit;
transition: visibility 0s linear var(--zenth-mm-speed-close);
}
.zenth-mm-root.is-open {
pointer-events: auto;
visibility: visible;
transition: visibility 0s linear 0s;
}
.zenth-mm-root .zenth-mm-overlay {
position: absolute;
inset: 0;
background: var(--zenth-mm-overlay);
opacity: 0;
transition: opacity var(--zenth-mm-speed-close) var(--zenth-mm-ease-close);
cursor: pointer;
}
.zenth-mm-root.is-open .zenth-mm-overlay {
opacity: 1;
transition: opacity var(--zenth-mm-speed-open) var(--zenth-mm-ease-open);
}
.zenth-mm-root .zenth-mm-drawer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: var(--zenth-mm-width);
max-width: 100vw;
background: var(--zenth-mm-bg);
color: var(--zenth-mm-text);
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.32);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform var(--zenth-mm-speed-close) var(--zenth-mm-ease-close);
overflow: hidden;
isolation: isolate;
}
/* Textura sobre el fondo rojo: graffiti del child theme, sutil pero presente.
La URL se inyecta vía wp_add_inline_style desde class-megamenu.php
y el child theme la puede sobrescribir con el filter zenth_megamenu_texture_url. */
.zenth-mm-root .zenth-mm-drawer::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--zenth-mm-texture-url, none);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.18;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
/* Asegurar que todo el contenido del drawer queda por encima de la textura. */
.zenth-mm-root .zenth-mm-header,
.zenth-mm-root .zenth-mm-body,
.zenth-mm-root .zenth-mm-footer {
position: relative;
z-index: 1;
}
.zenth-mm-root.is-open .zenth-mm-drawer {
transform: translateX(0);
transition: transform var(--zenth-mm-speed-open) var(--zenth-mm-ease-open);
}
/* ═══════════════════════════════════════════════════════════════════════
§3 · HEADER — barra superior (logo + botón cerrar)
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--zenth-mm-border);
flex-shrink: 0;
min-height: 72px;
background: var(--zenth-mm-bg);
gap: 16px;
}
/* Logo dentro del header */
.zenth-mm-root .zenth-mm-header-logo {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
}
.zenth-mm-root .zenth-mm-logo-link {
display: inline-flex;
align-items: center;
line-height: 0;
text-decoration: none !important;
max-width: 200px;
}
.zenth-mm-root .zenth-mm-logo-img {
display: block;
max-height: 36px;
width: auto;
height: auto;
max-width: 100%;
}
/* Botón cerrar */
.zenth-mm-root .zenth-mm-close {
background: transparent !important;
border: none !important;
padding: 8px 10px !important;
margin: -8px -8px -8px 0 !important;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
color: var(--zenth-mm-text-muted) !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
transition: color 150ms ease !important;
box-shadow: none !important;
border-radius: 0 !important;
flex-shrink: 0;
}
.zenth-mm-root .zenth-mm-close:hover {
color: var(--zenth-mm-text) !important;
background: transparent !important;
}
.zenth-mm-root .zenth-mm-close-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
color: var(--zenth-mm-text);
flex-shrink: 0;
}
.zenth-mm-root .zenth-mm-close-icon svg {
display: block;
width: 14px;
height: 14px;
}
.zenth-mm-root .zenth-mm-close-label {
font-size: 12px;
}
/* ═══════════════════════════════════════════════════════════════════════
§4 · BODY & NIVELES — scroll container + nav + niveles root/nested
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
position: relative;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
}
.zenth-mm-root .zenth-mm-nav {
position: relative;
flex: 1 1 auto;
}
.zenth-mm-root .zenth-mm-level {
list-style: none !important;
margin: 0 !important;
padding: 12px 0 !important;
}
/* Nivel root: siempre visible */
.zenth-mm-root .zenth-mm-level--root {
position: relative;
transition: transform var(--zenth-mm-speed) var(--zenth-mm-ease);
}
/* Niveles anidados: ocultos por defecto, entran desde la derecha */
.zenth-mm-root .zenth-mm-level--nested {
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: 100%;
background: var(--zenth-mm-bg);
transform: translateX(100%);
visibility: hidden;
transition: transform var(--zenth-mm-speed) var(--zenth-mm-ease),
visibility 0s linear var(--zenth-mm-speed);
z-index: 2;
}
.zenth-mm-root .zenth-mm-level--nested.is-active {
transform: translateX(0);
visibility: visible;
transition: transform var(--zenth-mm-speed) var(--zenth-mm-ease),
visibility 0s linear 0s;
}
/* Cuando hay un subnivel abierto, el root se desliza un poco a la izquierda.
OJO: opacity moderada (no 0.3), el nivel superior queda "en reposo" no semi-invisible. */
/* v1.23.5: Ocultar solo los items directos del root, NO el ul completo
(porque el ul anidado activo está dentro de uno de esos items y se vería afectado).
El subnivel anidado activo se rescata más abajo con visibility: visible. */
.zenth-mm-root.has-sub-open .zenth-mm-level--root > .zenth-mm-item {
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity var(--zenth-mm-speed-close) ease, visibility 0s linear var(--zenth-mm-speed-close);
}
/* El subnivel anidado activo SÍ debe verse, aunque su padre esté hidden */
.zenth-mm-root.has-sub-open .zenth-mm-level--nested.is-active,
.zenth-mm-root.has-sub-open .zenth-mm-level--nested.is-active * {
visibility: visible !important;
}
/* Y el padre que CONTIENE el subnivel activo debe permitir clicks/eventos
dentro del subnivel anidado. */
.zenth-mm-root.has-sub-open .zenth-mm-item--has-children:has(.is-active) {
pointer-events: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Pero el botón directo de ese padre se queda oculto (no queremos ver "Tienda"
tachado o el chevron) */
.zenth-mm-root.has-sub-open .zenth-mm-item--has-children:has(.is-active) > .zenth-mm-link {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* ═══════════════════════════════════════════════════════════════════════
§5 · ITEMS & LINKS — item + link + label + chevron + current
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-item {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
border: none !important;
}
/* Reset agresivo de botones para matar estilos del tema */
.zenth-mm-root .zenth-mm-link,
.zenth-mm-root button.zenth-mm-link {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding: 14px 24px !important;
color: var(--zenth-mm-text) !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
text-align: left !important;
text-decoration: none !important;
font-family: inherit !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: -0.4px !important;
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
box-sizing: border-box;
text-transform: none !important;
}
.zenth-mm-root .zenth-mm-link:hover,
.zenth-mm-root .zenth-mm-link:focus-visible {
background: var(--zenth-mm-hover-bg) !important;
color: var(--zenth-mm-accent) !important;
outline: none !important;
}
.zenth-mm-root .zenth-mm-label {
flex: 1 1 auto;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 10px;
}
.zenth-mm-root .zenth-mm-chevron {
flex-shrink: 0;
font-size: 28px;
line-height: 1;
color: var(--zenth-mm-text-muted);
margin-left: 12px;
transition: color 200ms ease, transform 200ms ease;
}
.zenth-mm-root .zenth-mm-link--has-children:hover .zenth-mm-chevron,
.zenth-mm-root .zenth-mm-link--has-children:focus-visible .zenth-mm-chevron {
color: var(--zenth-mm-accent);
transform: translateX(3px);
}
/* Item actual */
.zenth-mm-root .zenth-mm-item--current > .zenth-mm-link {
color: var(--zenth-mm-accent) !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════════════════════════════════════
§6 · BACK (legacy) — item--back + link--back + back-arrow
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-item--back {
margin-bottom: 4px !important;
border-bottom: 1px solid var(--zenth-mm-border) !important;
}
.zenth-mm-root .zenth-mm-link--back,
.zenth-mm-root button.zenth-mm-link--back {
padding: 14px 24px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: var(--zenth-mm-text-muted) !important;
justify-content: flex-start !important;
gap: 6px;
}
.zenth-mm-root .zenth-mm-link--back:hover,
.zenth-mm-root .zenth-mm-link--back:focus-visible {
color: var(--zenth-mm-accent) !important;
background: transparent !important;
}
.zenth-mm-root .zenth-mm-back-arrow {
font-size: 22px;
line-height: 1;
font-weight: 400;
margin-right: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════
§7 · HEADINGS — item--heading + heading + heading--link
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-item--heading {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 32px 24px 16px !important;
margin: 0 !important;
list-style: none !important;
pointer-events: none;
background: transparent !important;
border: none !important;
}
.zenth-mm-root .zenth-mm-heading {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
/* v1.23.4: cascada robusta. Si Super Brigade falla, Bebas Neue Google Fonts
o las del child theme rescatan. Sans-serif final como red de seguridad. */
font-family: 'Super Brigade', 'Bebas Neue', 'Oswald', 'Arial Narrow Bold', 'Impact', var(--cr-font-display, sans-serif) !important;
font-size: 56px !important;
font-weight: 700 !important;
line-height: 0.95 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
color: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
/* Forzar rendering del texto explícitamente */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Variante clickable: anchor que mantiene el look del heading. */
.zenth-mm-root a.zenth-mm-heading--link {
text-decoration: none !important;
cursor: pointer;
transition: color 200ms ease;
}
.zenth-mm-root a.zenth-mm-heading--link:hover,
.zenth-mm-root a.zenth-mm-heading--link:focus-visible {
color: var(--cr-color-primary, #e8001d) !important;
}
/* El con la variante --heading-link no debería tener aria-hidden=true
porque ahora es tappable. Lo dejamos visible al lector de pantalla
reseteando aria-hidden vía atributo. */
.zenth-mm-root .zenth-mm-item--heading-link[aria-hidden="true"] {
/* CSS no puede modificar aria-hidden, pero podemos hacer que el contenido
sea focusable via tabindex en el anchor (lo hace el browser por default). */
}
/* ═══════════════════════════════════════════════════════════════════════
§8 · FEATURED — bloque destacado (featured + text + link)
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-featured {
margin: 16px 24px !important;
padding: 18px 20px !important;
background: var(--zenth-mm-hover-bg) !important;
border-radius: 10px !important;
border-left: 3px solid var(--zenth-mm-accent) !important;
list-style: none;
}
.zenth-mm-root .zenth-mm-featured__text {
margin: 0 0 8px !important;
font-size: 14px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
color: var(--zenth-mm-text) !important;
}
.zenth-mm-root .zenth-mm-featured__link {
display: inline-block;
color: var(--zenth-mm-accent) !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 600 !important;
transition: opacity 150ms ease;
}
.zenth-mm-root .zenth-mm-featured__link:hover {
opacity: 0.8;
text-decoration: underline !important;
}
/* ═══════════════════════════════════════════════════════════════════════
§9 · WHATSAPP CTA — whatsapp + link + icon
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-whatsapp {
margin: 24px 24px 16px !important;
padding: 0 !important;
flex-shrink: 0;
}
.zenth-mm-root .zenth-mm-whatsapp__link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
padding: 16px 24px !important;
background: var(--zenth-mm-whatsapp) !important;
color: #ffffff !important;
border: none !important;
border-radius: 100px !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
letter-spacing: 0.5px !important;
line-height: 1 !important;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
transition: all 200ms ease;
text-transform: none !important;
}
.zenth-mm-root .zenth-mm-whatsapp__link:hover,
.zenth-mm-root .zenth-mm-whatsapp__link:focus-visible {
background: var(--zenth-mm-whatsapp-hover) !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
outline: none !important;
}
.zenth-mm-root .zenth-mm-whatsapp__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
}
.zenth-mm-root .zenth-mm-whatsapp__icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
/* ═══════════════════════════════════════════════════════════════════════
§10 · FOOTER — footer + text
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-footer {
padding: 16px 24px !important;
border-top: 1px solid var(--zenth-mm-border) !important;
flex-shrink: 0;
background: var(--zenth-mm-bg);
}
.zenth-mm-root .zenth-mm-footer__text {
margin: 0 !important;
font-size: 12px !important;
color: var(--zenth-mm-text-muted) !important;
text-align: center !important;
letter-spacing: 0.5px;
}
/* ═══════════════════════════════════════════════════════════════════════
§11 · TRIGGER — botón hamburguesa + barras + animación a "X"
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-trigger {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: transparent !important;
border: none !important;
padding: 8px !important;
margin: 0 !important;
box-shadow: none !important;
cursor: pointer;
color: inherit;
font-family: inherit;
transition: transform 150ms ease;
border-radius: 0 !important;
}
.zenth-mm-trigger:hover {
transform: scale(1.05);
background: transparent !important;
}
.zenth-mm-trigger:focus-visible {
outline: 2px solid var(--zenth-mm-accent, #c00000);
outline-offset: 4px;
border-radius: 4px !important;
}
.zenth-mm-trigger__icon {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 20px;
height: 20px;
position: relative;
flex-shrink: 0;
}
.zenth-mm-trigger__bar {
display: block;
width: 100%;
height: 3px;
background: currentColor;
border-radius: 1.5px;
transition: all 300ms ease;
transform-origin: center;
}
.zenth-mm-trigger__label {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.zenth-mm-trigger--label-left {
flex-direction: row-reverse;
}
/* Animación a "X" cuando está abierto.
__icon 20x20 con 3 barras de 3px (alto) repartidas con space-between:
- barra 1 en top: 0
- barra 2 en centro vertical (top: 8.5px)
- barra 3 en bottom (top: 17px)
Para que barras 1 y 3 lleguen al centro: translateY ±8.5px. */
.zenth-mm-trigger.is-open .zenth-mm-trigger__bar:nth-child(1) {
transform: translateY(8.5px) rotate(45deg);
}
.zenth-mm-trigger.is-open .zenth-mm-trigger__bar:nth-child(2) {
opacity: 0;
}
.zenth-mm-trigger.is-open .zenth-mm-trigger__bar:nth-child(3) {
transform: translateY(-8.5px) rotate(-45deg);
}
/* ═══════════════════════════════════════════════════════════════════════
§12 · BODY SCROLL LOCK — body.zenth-mm-body-lock
═══════════════════════════════════════════════════════════════════════ */
body.zenth-mm-body-lock {
overflow: hidden;
position: fixed;
width: 100%;
top: var(--zenth-mm-scroll-top, 0);
}
/* ═══════════════════════════════════════════════════════════════════════
§13 · TAGS — pill NEW / HOT / SOLD OUT en los items
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-tag {
display: inline-block;
padding: 3px 8px;
margin-left: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
line-height: 1;
border-radius: 3px;
text-transform: uppercase;
vertical-align: middle;
position: relative;
top: -2px;
}
.zenth-mm-root .zenth-mm-tag--new {
background: #2563eb;
color: #ffffff;
}
.zenth-mm-root .zenth-mm-tag--hot {
background: var(--zenth-mm-accent);
color: #ffffff;
}
.zenth-mm-root .zenth-mm-tag--sold_out {
background: #999999;
color: #ffffff;
}
/* ═══════════════════════════════════════════════════════════════════════
§14 · FOOTER LINKS — grid de enlaces del footer
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-footer-links {
margin-top: auto;
padding: 20px 24px 24px;
border-top: 1px solid var(--zenth-mm-border);
}
.zenth-mm-root .zenth-mm-footer-links__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.zenth-mm-root .zenth-mm-footer-links__item {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.zenth-mm-root .zenth-mm-footer-links__link {
display: inline-block;
color: var(--zenth-mm-text-muted) !important;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
text-decoration: none !important;
transition: color 150ms ease;
}
.zenth-mm-root .zenth-mm-footer-links__link:hover,
.zenth-mm-root .zenth-mm-footer-links__link:focus-visible {
color: #ffffff !important;
outline: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
§15 · SEARCH — barra de búsqueda al final del nivel 0
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-search {
padding: 8px 24px 16px;
transition: opacity 200ms ease;
}
.zenth-mm-root.has-sub-open .zenth-mm-search {
opacity: 0;
pointer-events: none;
}
.zenth-mm-root .zenth-mm-search__form {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
padding: 0 18px;
height: 48px;
transition: background 150ms ease, border-color 150ms ease;
}
.zenth-mm-root .zenth-mm-search__form:focus-within {
background: rgba(0, 0, 0, 0.35);
border-color: rgba(255, 255, 255, 0.35);
}
.zenth-mm-root .zenth-mm-search__input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.4px;
text-transform: uppercase;
height: 100%;
padding: 0;
}
.zenth-mm-root .zenth-mm-search__input::placeholder {
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.zenth-mm-root .zenth-mm-search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 0;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
flex-shrink: 0;
transition: color 150ms ease;
padding: 0;
}
.zenth-mm-root .zenth-mm-search__submit:hover,
.zenth-mm-root .zenth-mm-search__submit:focus-visible {
color: #ffffff;
outline: 0;
}
/* Si Fibo Search está integrado, dejamos que su wrapper respire pero
forzamos blanco translúcido para que case con el theme. */
.zenth-mm-root .zenth-mm-search__fibo {
width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════
§16 · BOTTOM ROW — sociales + botón cuenta
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 24px 24px;
border-top: 1px solid var(--zenth-mm-border);
}
.zenth-mm-root .zenth-mm-social {
display: flex;
align-items: center;
gap: 4px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.zenth-mm-root .zenth-mm-social__item {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.zenth-mm-root .zenth-mm-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: #ffffff;
text-decoration: none !important;
transition: background 150ms ease, transform 150ms ease;
}
.zenth-mm-root .zenth-mm-social__link:hover,
.zenth-mm-root .zenth-mm-social__link:focus-visible {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
outline: 0;
}
.zenth-mm-root .zenth-mm-social__link svg {
display: block;
}
/* Botón Cuenta — texto + icono, derecha de la fila */
.zenth-mm-root .zenth-mm-account {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
color: #ffffff;
text-decoration: none !important;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
transition: opacity 150ms ease;
}
.zenth-mm-root .zenth-mm-account:hover,
.zenth-mm-root .zenth-mm-account:focus-visible {
opacity: 0.7;
outline: 0;
}
.zenth-mm-root .zenth-mm-account__icon {
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
§17 · SUBCAROUSEL — carrusel de productos destacados en subniveles
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-subcarousel {
padding: 20px 24px 24px;
position: relative;
}
.zenth-mm-root .zenth-mm-subcarousel__viewport {
overflow: hidden;
margin: 0 -8px;
}
.zenth-mm-root .zenth-mm-subcarousel__track {
display: flex;
gap: 12px;
padding: 0 8px;
scroll-snap-type: x mandatory;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.zenth-mm-root .zenth-mm-subcarousel__track::-webkit-scrollbar {
display: none;
}
.zenth-mm-root .zenth-mm-subcarousel__card {
flex: 0 0 calc(50% - 6px);
scroll-snap-align: start;
display: block;
text-decoration: none !important;
color: #ffffff !important;
border-radius: 4px;
overflow: hidden;
position: relative;
background: rgba(0, 0, 0, 0.25);
transition: transform 200ms ease;
}
.zenth-mm-root .zenth-mm-subcarousel__card:hover {
transform: translateY(-2px);
}
.zenth-mm-root .zenth-mm-subcarousel__thumb {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
}
.zenth-mm-root .zenth-mm-subcarousel__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder cuando un item del panel no tiene imagen asignada */
.zenth-mm-root .zenth-mm-subcarousel__thumb-placeholder {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.25));
}
/* Tag NEW/HOT/SOLD OUT en la card del carrusel
Esquina superior izquierda, pill compacto, encima del overlay. */
.zenth-mm-root .zenth-mm-subcarousel__tag {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-block;
padding: 3px 8px;
border-radius: 3px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #ffffff;
line-height: 1.2;
background: rgba(0, 0, 0, 0.85);
}
.zenth-mm-root .zenth-mm-subcarousel__tag--new {
background: #1e88e5;
}
.zenth-mm-root .zenth-mm-subcarousel__tag--hot {
background: var(--zenth-mm-accent, #c00000);
}
.zenth-mm-root .zenth-mm-subcarousel__tag--sold_out {
background: #666666;
}
.zenth-mm-root .zenth-mm-subcarousel__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
#000000 0%,
rgba(0, 0, 0, 0.4) 35%,
rgba(0, 0, 0, 0) 65%);
pointer-events: none;
}
.zenth-mm-root .zenth-mm-subcarousel__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 14px 14px;
z-index: 1;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
}
.zenth-mm-root .zenth-mm-subcarousel__name {
font-size: 14px;
font-weight: 700;
line-height: 1.2;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zenth-mm-root .zenth-mm-subcarousel__price {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* Flechas de navegación */
.zenth-mm-root .zenth-mm-subcarousel__nav {
position: absolute;
top: 20px;
right: 24px;
display: flex;
gap: 6px;
z-index: 2;
}
.zenth-mm-root .zenth-mm-subcarousel__arrow {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 150ms ease;
padding: 0;
}
.zenth-mm-root .zenth-mm-subcarousel__arrow:hover,
.zenth-mm-root .zenth-mm-subcarousel__arrow:focus-visible {
background: rgba(0, 0, 0, 0.7);
outline: 0;
}
.zenth-mm-root .zenth-mm-subcarousel__arrow[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
/* Dots indicador */
.zenth-mm-root .zenth-mm-subcarousel__dots {
display: flex;
gap: 6px;
justify-content: center;
margin-top: 14px;
}
.zenth-mm-root .zenth-mm-subcarousel__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: background 150ms ease;
}
.zenth-mm-root .zenth-mm-subcarousel__dot.is-active {
background: #ffffff;
}
/* ═══════════════════════════════════════════════════════════════════════
§18 · HEADER BACK — botón "atrás" del header + ocultar back/footer
───────────────────────────────────────────────────────────────────────
El header (definido en §3) recibe acá un override de justify-content y el
botón "atrás" que aparece al entrar a un subnivel. También oculta el back
legacy del body y los bloques de footer cuando hay subnivel abierto.
═══════════════════════════════════════════════════════════════════════ */
.zenth-mm-root .zenth-mm-header {
justify-content: space-between !important;
}
.zenth-mm-root .zenth-mm-header-back {
/* v1.23.6: visibility:hidden en lugar de display:none.
Esto reserva el espacio en el flex layout y mantiene el close
siempre a la derecha también en nivel 0 (header con justify-content: space-between
y dos hijos, donde uno está invisible pero ocupa lugar). */
visibility: hidden;
display: inline-flex !important;
align-items: center;
gap: 6px;
background: transparent !important;
border: 0 !important;
color: #ffffff !important;
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 0;
transition: opacity 150ms ease;
pointer-events: none;
}
.zenth-mm-root.has-sub-open .zenth-mm-header-back {
visibility: visible;
pointer-events: auto;
}
.zenth-mm-root .zenth-mm-header-back:hover,
.zenth-mm-root .zenth-mm-header-back:focus-visible {
opacity: 0.7;
outline: 0;
}
.zenth-mm-root .zenth-mm-header-back-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
flex-shrink: 0;
}
.zenth-mm-root .zenth-mm-header-back-arrow svg {
display: block;
width: 14px;
height: 14px;
}
/* Ocultar el botón "back" viejo dentro del body (Walker lo dejó de emitir
en v1.23.4 pero por compatibilidad lo escondemos por CSS también). */
.zenth-mm-root .zenth-mm-item--back {
display: none !important;
}
.zenth-mm-root.has-sub-open .zenth-mm-footer-links,
.zenth-mm-root.has-sub-open .zenth-mm-bottom-row {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
§19 · RESPONSIVE — todos los @media de tamaño + accesibilidad
───────────────────────────────────────────────────────────────────────
Único tier de tamaño: Mobile-small (≤480), en UN solo bloque @media con las
reglas ordenadas por §componente. La subsección de accesibilidad
(prefers-reduced-motion) va al final, SIN consolidar con los de tamaño
(no es un breakpoint de ancho).
═══════════════════════════════════════════════════════════════════════ */
/* ─────────────────────── MOBILE-SMALL · max-width: 480px ──────────────── */
@media (max-width: 480px) {
/* §2 · Drawer: full-width en pantallas chicas */
.zenth-mm-root {
--zenth-mm-width: 100vw;
}
/* §3 · Header: padding más compacto */
.zenth-mm-root .zenth-mm-header {
padding: 16px 20px;
}
/* §3/§18 · Close + back: tamaño natural, sin estirarse ni wrap
(v1.23.6 — Fix 2: flex 0 0 auto fuerza tamaño natural, white-space evita wrap). */
.zenth-mm-root .zenth-mm-close,
.zenth-mm-root .zenth-mm-header-back {
flex: 0 0 auto !important;
white-space: nowrap !important;
min-width: 0;
}
/* §5 · Items & links: tipografía reducida + chevron a juego */
.zenth-mm-root .zenth-mm-link,
.zenth-mm-root button.zenth-mm-link {
font-size: 24px !important;
padding: 12px 20px !important;
}
.zenth-mm-root .zenth-mm-chevron {
font-size: 24px;
}
/* §7 · Headings: display gigante reducido */
.zenth-mm-root .zenth-mm-heading {
font-size: 44px;
}
/* §8 · Featured: margen lateral compacto */
.zenth-mm-root .zenth-mm-featured {
margin: 12px 20px !important;
}
/* §9 · WhatsApp: margen lateral compacto */
.zenth-mm-root .zenth-mm-whatsapp {
margin: 16px 20px !important;
}
/* §14 · Footer links: padding + tipografía compacta */
.zenth-mm-root .zenth-mm-footer-links {
padding: 18px 20px 20px;
}
.zenth-mm-root .zenth-mm-footer-links__link {
font-size: 13px;
}
/* §15 · Search: padding compacto */
.zenth-mm-root .zenth-mm-search {
padding: 4px 20px 12px;
}
/* §16 · Bottom row: padding compacto */
.zenth-mm-root .zenth-mm-bottom-row {
padding: 14px 20px 20px;
}
/* §17 · Subcarousel: padding compacto */
.zenth-mm-root .zenth-mm-subcarousel {
padding: 16px 20px 20px;
}
}
/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
.zenth-mm-root .zenth-mm-drawer,
.zenth-mm-root .zenth-mm-overlay,
.zenth-mm-root .zenth-mm-level--nested,
.zenth-mm-root .zenth-mm-level--root,
.zenth-mm-trigger__bar {
transition-duration: 50ms !important;
}
}