/* =========================================================
   MEGA MENU — columna "Destacados" en el dropdown
   ---------------------------------------------------------
   La columna se inyecta como un <li class="wd-col"> extra al
   final del grid de subcategorias (wd-sub-menu wd-grid-f-inline)
   del item padre full-width. Estos estilos solo le dan formato:
   titulo Oswald uppercase de marca + grilla de 2 productos, sin
   romper el layout de columnas de subcategorias.
   Dependen de los tokens de variables.css.
   ========================================================= */

/* =========================================================
   LAYOUT COMPACTO DEL DROPDOWN (solo donde hay columna Destacados)
   ---------------------------------------------------------
   Por defecto Woodmart pone cada subcategoria como una columna flex
   de 200px → con 19 subcats (ALMACEN) salen ~5 columnas dispersas a
   todo el ancho (1192px). Lo reorganizamos con CSS Grid: las
   subcategorias fluyen en 3 columnas y la columna "Destacados" queda
   fija a la derecha ocupando todo el alto. Solo aplica al dropdown que
   tiene Destacados (via :has), para no afectar las otras categorias.
   ========================================================= */
.menu-item:not(.wd-design-sized) .wd-sub-menu.wd-grid-f-inline:has(.naccato-mm-featured-col) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
    column-gap: var(--space-lg);
    row-gap: 2px;
    align-items: start;
}

/* Subcategorias: auto-place en las 3 primeras columnas (la 4a la ocupa
   Destacados con su grid-row span). Reset del flex-basis de Woodmart. */
.wd-sub-menu.wd-grid-f-inline:has(.naccato-mm-featured-col) > li.wd-col:not(.naccato-mm-featured-col):not(.naccato-mm-featured-eaten) {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
}

/* Links de subcategoria mas compactos (menos alto de fila). */
.wd-sub-menu.wd-grid-f-inline:has(.naccato-mm-featured-col) .woodmart-nav-link {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 13px;
    line-height: 1.25;
}

/* =========================================================
   VARIANTE C — SET-SIZE COMPACTO (GRANEL y similares)
   ---------------------------------------------------------
   El item padre lleva Design = 'sized' (WoodMart "Set-size") con un ancho
   acotado (meta _menu_item_width, ~720px), de modo que el dropdown NO ocupa
   todo el ancho de pantalla. Con pocas subcategorias (GRANEL tiene 6) un
   Full-width dejaria un gran vacio a la derecha; aca lo resolvemos con un
   grid de 2 columnas: las subcategorias en UNA columna y la columna
   "Destacados" en la otra. El theme padre marca el <li> con .wd-design-sized,
   asi que esto NO toca las categorias Full-width (Variante A).
   ========================================================= */
.wd-design-sized .wd-sub-menu.wd-grid-f-inline:has(.naccato-mm-featured-col) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: var(--space-lg);
    row-gap: 2px;
    align-items: start;
    width: var(--wd-dropdown-width, 720px);
    max-width: var(--wd-dropdown-width, 720px);
}

/* En Set-size, la columna Destacados es la 2a del grid (no la 4a). */
.wd-design-sized .wd-sub-menu .naccato-mm-featured-col {
    grid-column: 2;
}

/* =========================================================
   VARIANTE B — VIDRIERA (SHOWCASE con banner: SUSHI y similares)
   ---------------------------------------------------------
   El item padre lleva Design = 'sized' (igual que la Variante C) con
   _menu_item_width = 720 (meta del item de menu sushi-2). Su dropdown trae un
   BANNER inyectado por el hook PHP como PRIMERA columna (.naccato-mm-showcase-
   banner) y la columna Destacados (.naccato-mm-featured-col) appendeada al
   final por el mismo hook.

   DECISION FINAL (2026-06-05): la vidriera queda LIMPIA con SOLO DOS ZONAS:
     [ BANNER protagonista (foto, izquierda) | DESTACADOS (productos, derecha) ]
   Las subcategorias de texto (algas, jengibre, wasabi) se OCULTAN: son
   redundantes (ya estan representadas por los productos de Destacados) y eran
   las que descuadraban el grid (ALGAS se fusionaba con Destacados arriba,
   JENGIBRE/WASABI caian al fondo). Se ocultan 100% en CSS (reversible, sin
   tocar el PHP ni la estructura del menu en WP).

   Grid de 2 columnas: el banner toma todo el ancho sobrante (minmax 340px / 1fr)
   y Destacados queda fijo a la derecha (300px) -> sin huecos ni columna central
   vacia. Distinguimos esta variante de la C (granel, 2 col sin banner) via
   :has(.naccato-mm-showcase-banner), y como va DESPUES en la cascada pisa la
   regla de 2 columnas de la Variante C.

   CLAVE — el banner ya NO es un <img> lazy con srcset (quedaba en blanco en el
   dropdown on-hover y elegia una miniatura diminuta). El hook PHP ahora pinta
   la foto como background-image (cover) sobre el .naccato-mm-showcase-link.
   ========================================================= */
.wd-design-sized .wd-sub-menu.wd-grid-f-inline:has(.naccato-mm-showcase-banner) {
    display: grid !important;
    /* Banner protagonista (absorbe el sobrante) | Destacados 2x2 fijo. */
    grid-template-columns: minmax(340px, 1fr) 300px;
    min-height: 300px;
    column-gap: var(--space-lg);
    align-items: stretch;
    align-content: stretch;
    justify-content: stretch;
    /* El ancho del dropdown nace en 720 por DATO (_menu_item_width=720 del item
       de menu sushi-2). El Set-size lo aplica WoodMart via --wd-dropdown-width
       inline; solo acotamos como red de seguridad. */
    max-width: var(--wd-dropdown-width, 720px);
    padding: var(--space-md) !important;
}

/* OCULTAR las subcategorias de texto de la vidriera. Cualquier <li> directo del
   wd-sub-menu que NO sea el banner ni la columna Destacados (ni el dummy eaten)
   es una subcategoria real -> fuera. Scopeado a :has(.naccato-mm-showcase-banner)
   para NO afectar las otras 6 categorias (almacen, bebidas, etc.). */
.wd-design-sized .wd-sub-menu.wd-grid-f-inline:has(.naccato-mm-showcase-banner) > li:not(.naccato-mm-showcase-banner):not(.naccato-mm-featured-col):not(.naccato-mm-featured-eaten) {
    display: none !important;
}

/* Banner: 1a columna, se estira a la altura completa del dropdown (la fija el
   min-height:300px del grid). */
.wd-sub-menu .naccato-mm-showcase-banner {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    padding: 0;
    margin: 0;
}

/* El link ES el banner: la foto va como background-image (cover) — la setea el
   hook PHP inline. Robusto contra el lazy/srcset que dejaba el <img> en blanco.
   min-height generoso para que la vidriera luzca aunque haya pocas subcats. */
.naccato-mm-showcase-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    border-radius: var(--radius-card, 8px);
    overflow: hidden;
    background-color: var(--color-border, #e6e6e6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Caption sobre la imagen, abajo, con degradado para legibilidad. */
.naccato-mm-showcase-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 14px 12px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: capitalize;   /* demo Vegetables: titulos de producto capitalizados (#1) */
    letter-spacing: 0;
    font-size: 17px;
    line-height: 1.2;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
}

/* Vidriera: la columna Destacados es la 2a (y ultima) columna del grid, alineada
   arriba. Las subcategorias de texto estan ocultas (regla de arriba), asi que el
   layout queda con SOLO dos zonas: banner | Destacados. */
.wd-design-sized .wd-sub-menu:has(.naccato-mm-showcase-banner) .naccato-mm-featured-col {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

/* Columna destacados: fija en la 4a columna del grid, abarcando exactamente
   las filas que ocupan las subcategorias (--mm-rows = ceil(subcats/3), lo
   setea el hook PHP inline). Asi no se generan filas implicitas vacias que
   inflarian el alto del dropdown. Separador izquierdo para diferenciarla. */
.wd-sub-menu .naccato-mm-featured-col {
    grid-column: 4;
    grid-row: 1 / span var(--mm-rows, 8);
    align-self: start;
    width: 300px;
    padding-left: var(--space-lg);
    border-left: 1px solid var(--color-border);
}

/* Item fantasma que absorbe el cierre del walker base. */
.naccato-mm-featured-eaten {
    display: none !important;
}

/* Titulo "Destacados" — Manrope, color de marca (demo Vegetables, sin mayusculas). */
.naccato-mm-featured-title {
    display: block;
    margin-bottom: var(--space-md);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: none;   /* demo Vegetables: titulos sin mayusculas (#1) */
    letter-spacing: 0;
    font-size: 15px;
    line-height: 1.2;
    color: var(--color-brand-primary);
    cursor: default;
}

/* La grilla interna de productos. El shortcode [products] de Woodmart
   genera (markup real, verificado):
     div.naccato-mm-featured-products
       > div.wd-products-element
           > div.products.wd-products.wd-grid-g.grid-columns-N   (grid)
               > div.wd-product.product-grid-item.product (×N)    (tarjetas)
   No hay ul/li. En el ancho angosto del dropdown Woodmart colapsa el
   grid, asi que lo forzamos a 2 columnas. */
.naccato-mm-featured-grid .woocommerce,
.naccato-mm-featured-products .wd-products-element {
    margin: 0;
}

/* Grid 2 columnas contundente (pisa el grid-columns-N de Woodmart en
   este contenedor de ~300px). */
.naccato-mm-featured-products .wd-products {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-sm) !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Cada tarjeta ocupa su celda del grid (sin el width/float % que mete
   Woodmart en el loop normal). */
.naccato-mm-featured-products .product-grid-item {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Imagen compacta y UNIFORMIZADA. Los productos GBP tienen imagenes con
   proporciones muy dispares (cuadradas, botellas verticales, sachets,
   etiquetas), asi que un height:auto dejaba cada tarjeta con un alto de
   imagen distinto → titulo/precio/badge desalineados entre columnas. Fijamos
   un alto comun y usamos object-fit:contain para encajar la imagen sin
   recortarla (no perdemos info de la etiqueta). El wrapper del thumb tambien
   se fija con overflow:hidden para que el contenido de abajo arranque siempre
   a la misma altura. 120px es el valor base; ajustar si el diseno lo pide. */
.naccato-mm-featured-products .product-grid-item .product-image-link,
.naccato-mm-featured-products .product-grid-item .wd-product-thumb {
    height: 120px;
    overflow: hidden;
}

.naccato-mm-featured-products .product-grid-item .product-image-link img,
.naccato-mm-featured-products .product-grid-item .wd-product-thumb img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    display: block;
}

/* Tarjetas mas chicas dentro del dropdown: titulo/precio legibles
   pero sin el tamano de una pagina de catalogo. */
.naccato-mm-featured-products .product-grid-item .wd-entities-title {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.3;
    margin-top: 6px;
}

.naccato-mm-featured-products .product-grid-item .price {
    font-size: 12px;
}

/* Ocultamos lo que no aporta en el dropdown (categorias, rating, hover
   icons compare/quickview/wishlist, add-to-cart, cantidad) para mantenerlo
   limpio; el click en la tarjeta lleva al producto. */
.naccato-mm-featured-products .product-grid-item .wd-buttons,
.naccato-mm-featured-products .product-grid-item .wd-add-btn,
.naccato-mm-featured-products .product-grid-item .add-to-cart-loop,
.naccato-mm-featured-products .product-grid-item .product-rating,
.naccato-mm-featured-products .product-grid-item .wd-product-cats,
.naccato-mm-featured-products .product-grid-item .quantity,
.naccato-mm-featured-products .product-grid-item .wd-bottom-actions {
    display: none !important;
}

/* =========================================================
   BANNER PROMOCIONAL del flyout (Web Brain)
   ---------------------------------------------------------
   Card con imagen de fondo + titulo + boton CTA, inyectado por
   naccato_megamenu_inject_promo_banner() dentro del
   '.wd-entry-content' del dropdown del item padre (flyout
   "All Categories"). La asociacion categoria->banner sale de la
   option naccato_megamenu_banners (la pobla el plugin Web Brain).

   Diseno (skill ui-ux-pro-max + tokens de marca NACCATO):
     - Foto como background-image (cover) sobre el <a> (no <img>
       lazy/srcset: gotcha de miniatura diminuta en el dropdown).
     - Doble scrim de marca (gradiente azul institucional) para
       legibilidad del texto blanco >=4.5:1 sin depender de la foto.
     - Titulo Oswald uppercase + boton blanco (texto azul de marca)
       agrupados abajo. Hover: zoom sutil de la foto + boton invertido.
   ========================================================= */

/* ---------------------------------------------------------
   QUITAR el BANNER DEMO del flyout (reversible, CSS-only)
   ---------------------------------------------------------
   El dropdown de cada categoria es un HTML block (Elementor) del menu
   'all-categories-vegetables' que trae, de la demo Vegetables, un widget
   'wd_banner' (card verde landscape "Ofertas en ..." con foto de palta) entre
   las subcategorias y el carrusel de productos. Matias pidio quitarlo y poner
   AHI nuestro banner del Web Brain. El hook PHP inyecta nuestro
   .naccato-mm-promo-wrap JUSTO ANTES del widget del banner demo (mismo
   container), de modo que nuestro card ocupa su lugar; aca ocultamos el demo.

   Scope: solo dentro del dropdown del mega menu (.wd-dropdown-menu), para no
   afectar el wd_banner del home ni de otras paginas (ese vive fuera del
   dropdown). Ocultacion INCONDICIONAL: cubre las 7 categorias.

   NOTA (2026-07-07): antes esta regla dependia del hermano
   '.naccato-mm-promo-wrap ~' porque nuestro banner del Web Brain se inyectaba
   JUSTO ANTES del banner demo y lo tapaba "en tandem". Al desactivar ese banner
   del Web Brain (return '' en naccato_megamenu_promo_banner_html, commit 559b93f)
   el wrap desaparecio del DOM y el selector con '~' dejo de matchear, des-ocultando
   los 7 banners demo. Se quito la dependencia del hermano para ocultar el banner
   nativo de WoodMart directamente. Reversible: borrar esta regla restaura el
   banner demo (la data Elementor de los blocks 31881-31887 queda intacta). */
.wd-dropdown-menu .elementor-element.elementor-widget-wd_banner,
.wd-dropdown-menu .elementor-widget-wd_banner {
    display: none !important;
}

/* Wrapper del card dentro del dropdown. Ahora cae en el lugar del banner demo
   (entre subcategorias y carrusel), dentro de su container flex; le damos un
   respiro vertical para separarlo de la grilla de arriba y del carrusel de
   abajo. El flyout es angosto (_menu_item_width = 420px). */
.naccato-mm-promo-wrap {
    width: 100%;
    box-sizing: border-box;
    margin: var(--space-sm, .5rem) 0 var(--space-md, 1rem);
}

/* La card ES un <a> con la foto de fondo.
   FORMATO LANDSCAPE (skill ui-ux-pro-max): replicamos la proporcion del banner
   demo que reemplaza (imagen 730x320 = ratio 2.28:1) en vez del card alto/
   cuadrado anterior, para mantener la linea visual del theme en el dropdown
   angosto. aspect-ratio mantiene la proporcion de forma fluida ante cualquier
   ancho (sin layout shift); a ~380px de ancho util -> ~167px de alto. */
.naccato-mm-promo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 730 / 320;
    min-height: 150px;
    max-height: 190px;
    border-radius: var(--radius-card, 14px);
    overflow: hidden;
    background-color: var(--color-brand-dark, #24424f); /* fallback si la foto no carga */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .12));
    isolation: isolate;
    /* Microinteraccion de entrada: aparece con fade + leve subida. */
    animation: naccato-mm-promo-in 240ms ease-out both;
}

@keyframes naccato-mm-promo-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* La foto vive en un pseudo-elemento para poder hacerle zoom en hover
   sin mover el scrim ni el texto (solo transform -> performante). */
.naccato-mm-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 420ms ease;
}

/* Scrim de marca para formato LANDSCAPE bajo (~167px): el texto va anclado
   abajo-IZQUIERDA (como el banner demo, wd-justify-left). Combinamos un
   gradiente vertical (refuerza la franja inferior donde va el texto) + uno
   horizontal sutil hacia la izquierda, para garantizar contraste >=4.5:1 del
   texto blanco sin oscurecer toda la foto apaisada. Azul institucional, no
   negro, para integrarse a la identidad. */
.naccato-mm-promo-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to top,
            rgba(36, 66, 79, .90) 0%,      /* --color-brand-dark @ ~90% abajo */
            rgba(36, 66, 79, .45) 45%,
            rgba(36, 66, 79, 0) 85%
        ),
        linear-gradient(
            to right,
            rgba(36, 66, 79, .55) 0%,
            rgba(36, 66, 79, 0) 55%
        );
}

/* Bloque de contenido anclado abajo-IZQUIERDA (titulo + boton), compacto para
   el card landscape bajo. Replica el layout del banner demo (texto izquierda). */
.naccato-mm-promo-body {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm, .5rem);
    padding: var(--space-md, 1rem);
}

/* Titulo promocional — Manrope, blanco, con sombra de apoyo (demo: sin mayusculas).
   Escala reducida (~16px) acorde al card landscape bajo. */
.naccato-mm-promo-title {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-weight: 700;
    text-transform: none;   /* demo Vegetables: titulos sin mayusculas (#1) */
    letter-spacing: 0;
    font-size: 16px;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    margin: 0;
    /* Hasta 2 lineas; si excede, recorta para no inflar el card bajo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Boton CTA — relleno blanco, texto azul de marca (maximo destaque sobre
   cualquier foto). Roboto 600, pill suave. Compacto para el card landscape. */
.naccato-mm-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, .25rem);
    padding: 7px 14px;
    border-radius: var(--radius-md, 10px);
    background: #fff;
    color: var(--color-brand-primary, #38627A);
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1;
    letter-spacing: .01em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition:
        background var(--transition, 180ms ease),
        color var(--transition, 180ms ease),
        transform var(--transition, 180ms ease),
        box-shadow var(--transition, 180ms ease);
}

.naccato-mm-promo-cta-text {
    white-space: nowrap;
}

.naccato-mm-promo-cta-arrow {
    flex: none;
    width: 14px;
    height: 14px;
    transition: transform var(--transition, 180ms ease);
}

/* HOVER de la card: zoom sutil de la foto + boton invierte a azul de marca. */
.naccato-mm-promo:hover::before,
.naccato-mm-promo:focus-visible::before {
    transform: scale(1.06);
}

.naccato-mm-promo:hover .naccato-mm-promo-cta,
.naccato-mm-promo:focus-visible .naccato-mm-promo-cta {
    background: var(--color-brand-primary, #38627A);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}

.naccato-mm-promo:hover .naccato-mm-promo-cta-arrow,
.naccato-mm-promo:focus-visible .naccato-mm-promo-cta-arrow {
    transform: translateX(3px);
}

/* Foco accesible de teclado sobre toda la card. */
.naccato-mm-promo:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* Respeta prefers-reduced-motion: sin animacion de entrada ni zoom. */
@media (prefers-reduced-motion: reduce) {
    .naccato-mm-promo {
        animation: none;
    }
    .naccato-mm-promo::before,
    .naccato-mm-promo:hover::before,
    .naccato-mm-promo:focus-visible::before {
        transition: none;
        transform: none;
    }
    .naccato-mm-promo-cta,
    .naccato-mm-promo:hover .naccato-mm-promo-cta {
        transition: none;
    }
}

/* En pantallas chicas el dropdown full-width se reordena; ahi la
   columna destacados pasa a ancho completo sin borde lateral. */
@media (max-width: 1024px) {
    .wd-sub-menu .naccato-mm-featured-col {
        flex-basis: 100%;
        border-left: 0;
        padding-left: 0;
        margin-top: var(--space-md);
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-md);
    }

    /* Vidriera: en pantallas chicas achicamos el ancho del dropdown. Sigue siendo
       2 columnas (banner protagonista a la izquierda + Destacados a la derecha;
       las subcats de texto ya estan ocultas). */
    .wd-design-sized .wd-sub-menu.wd-grid-f-inline:has(.naccato-mm-showcase-banner) {
        grid-template-columns: 240px minmax(0, 1fr) !important;
        width: auto !important;
        max-width: 92vw !important;
    }

    .wd-design-sized .wd-sub-menu:has(.naccato-mm-showcase-banner) .naccato-mm-featured-col {
        grid-column: 2;
        grid-row: auto;
    }

    .wd-design-sized .wd-sub-menu:has(.naccato-mm-showcase-banner) .naccato-mm-featured-col {
        margin-top: 0;
        border-top: 0;
        padding-top: 0;
    }
}