/**
 * bh_menu — estilos del menú de navegación (megamenú horizontal + vertical de
 * categorías + móvil). Todo scoped a `.bh-menu` para no interferir con el theme.
 *
 * Paleta: hereda del theme. El acento usa la variable global de Elementor del
 * theme (--e-global-color-primary) con fallback a un neutro oscuro; los textos
 * heredan el color del theme; esquinas rectas (radius 0) y fuente heredada
 * (Jost) para encajar con el theme minimalista ceramica_brivahome.
 *
 * Estructura del HTML (generado por Bh_Menu::compileMenu):
 *   nav.bh-menu.bh-menu--header | .bh-menu--vertical
 *     ul.bh-menu__list > li.bh-menu__item[.bh-menu__item--has-sub]
 *       a|span.bh-menu__link (+ span.bh-menu__badge)
 *       div.bh-menu__dropdown > div.bh-menu__cols > div.bh-menu__col.bh-menu__col--wN
 *         div.bh-menu__col-title + ul.bh-menu__sublist > li.bh-menu__subitem > a
 *       div.bh-menu__banner > a > img
 */

.bh-menu {
    /* Acento de marca: usa el global color del theme si existe, si no neutro oscuro. */
    --bh-accent: var(--e-global-color-primary, #1a1a1a);
    /* Color por defecto del texto de los items: el principal de la paleta del theme.
       Cada item puede sobrescribirlo con un color propio (style inline). */
    --bh-item-color: var(--e-global-color-primary, #1a1a1a);
    /* Color por defecto del borde superior del desplegable: el verde de la
       plantilla (#50624c). Cada desplegable puede sobrescribirlo (style inline). */
    --bh-border-accent: #50624c;
    --bh-border: #ececec;
    --bh-panel-bg: #ffffff;
    --bh-muted: #777;
    font-size: 14px;
}
.bh-menu, .bh-menu * { box-sizing: border-box; }
.bh-menu__list { list-style: none; margin: 0; padding: 0; }
.bh-menu a { text-decoration: none; color: inherit; }
/* Items-label con desplegable se renderizan como <button> (fiabilidad táctil);
   reseteamos el estilo de botón para que se vean igual que el resto de links. */
button.bh-menu__link { background: none; border: 0; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }

/* ----- Badges (semánticos, conservan color para destacar campañas) ----- */
.bh-menu__badge {
    display: inline-block; font-size: 10px; font-weight: 700; line-height: 1;
    padding: 2px 6px; margin-left: 6px; vertical-align: middle;
    text-transform: uppercase; letter-spacing: .03em;
    background: #f0f0f0; color: #333;
}
.bh-menu__badge--new  { background: #e6f4ea; color: #1e7e44; }
.bh-menu__badge--sale { background: #fbe9e9; color: #c0392b; }
.bh-menu__badge--hot  { background: #fdecdd; color: #c2410c; }
.bh-menu__badge--info { background: #e7eefb; color: #2456c7; }

/* ====================================================================
 *  MEGAMENÚ HORIZONTAL (location = header)
 * ==================================================================== */
.bh-menu--header { position: relative; }
.bh-menu--header > .bh-menu__list {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
}
.bh-menu--header > .bh-menu__list > .bh-menu__item { position: static; }
.bh-menu--header > .bh-menu__list > .bh-menu__item > .bh-menu__link {
    display: flex; align-items: center; gap: 5px;
    padding: 16px 18px; font-weight: 500; color: var(--bh-item-color);
    letter-spacing: .02em; cursor: pointer;
    border-bottom: 2px solid transparent; transition: opacity .15s, border-color .15s;
}
/* :hover SOLO con ratón (@media hover:hover). En táctil, los estilos :hover hacen
   que iOS exija DOBLE toque (1º aplica hover, 2º dispara click) → el acordeón no
   se abría al primer toque. Sin :hover en táctil, el primer toque ya dispara click. */
@media (hover: hover) {
.bh-menu--header > .bh-menu__list > .bh-menu__item:hover > .bh-menu__link {
    border-bottom-color: currentColor; opacity: .72;
}
}

/* Dropdown (megapanel): ancho según contenido para que las columnas vayan en
   FILA (no apiladas). Se ancla a la izquierda del nav y crece a la derecha. */
.bh-menu--header .bh-menu__dropdown {
    /* Centrado respecto a la barra del menú (que es el contenedor relativo). */
    position: absolute; left: 50%; top: 100%; z-index: 60;
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 32px;
    width: max-content; max-width: min(94vw, 1100px);
    /* Panel blanco SIN borde (antes tenía border-top verde + borde gris). La
       sombra suave lo separa del fondo sin necesidad de borde. */
    background: var(--bh-panel-bg); border: 0;
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
    padding: 24px 28px; border-radius: 0;
    opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
@media (hover: hover) {
.bh-menu--header > .bh-menu__list > .bh-menu__item--has-sub:hover > .bh-menu__dropdown {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
}

.bh-menu__cols { display: flex; flex-wrap: nowrap; gap: 32px; }
.bh-menu__col { flex: 0 0 auto; min-width: 170px; }
.bh-menu__col--w1 { width: 170px; } .bh-menu__col--w2 { width: 210px; }
.bh-menu__col--w3 { width: 260px; } .bh-menu__col--w4 { width: 310px; }
.bh-menu__col-title {
    font-weight: 600; font-size: 13px; color: inherit; text-transform: uppercase;
    letter-spacing: .04em; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--bh-border);
}
.bh-menu__sublist { list-style: none; margin: 0; padding: 0; }
.bh-menu__subitem > a, .bh-menu__subitem > .bh-menu__sublabel {
    display: block; padding: 7px 0; color: var(--bh-muted); font-size: 14px; transition: color .12s, padding-left .12s;
}
@media (hover: hover) { .bh-menu__subitem > a:hover { color: var(--bh-accent); padding-left: 4px; } }
.bh-menu__sublist--nested { margin: 2px 0 6px 12px; border-left: 1px solid var(--bh-border); padding-left: 10px; }
.bh-menu__sublist--nested .bh-menu__subitem > a { font-size: 13px; }

/* Banner promocional */
.bh-menu__banner { flex: 0 0 240px; max-width: 280px; align-self: stretch; }
.bh-menu__banner-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }

/* ====================================================================
 *  MENÚ VERTICAL (location = vertical)
 * ==================================================================== */
.bh-menu--vertical { position: relative; }
.bh-menu--vertical > .bh-menu__list { display: flex; flex-direction: column; background: var(--bh-panel-bg); border: 1px solid var(--bh-border); }
.bh-menu--vertical > .bh-menu__list > .bh-menu__item { position: relative; border-bottom: 1px solid var(--bh-border); }
.bh-menu--vertical > .bh-menu__list > .bh-menu__item:last-child { border-bottom: 0; }
.bh-menu--vertical > .bh-menu__list > .bh-menu__item > .bh-menu__link {
    display: flex; align-items: center; gap: 6px; padding: 12px 16px; font-weight: 500; color: var(--bh-item-color); cursor: pointer;
}
@media (hover: hover) { .bh-menu--vertical > .bh-menu__list > .bh-menu__item:hover > .bh-menu__link { opacity: .72; } }
.bh-menu--vertical .bh-menu__item--has-sub > .bh-menu__link::after { content: "›"; margin-left: auto; color: var(--bh-muted); font-size: 18px; }
.bh-menu--vertical .bh-menu__dropdown {
    position: absolute; left: 100%; top: -1px; z-index: 60;
    display: flex; flex-wrap: nowrap; gap: 32px; width: max-content; max-width: min(70vw, 760px);
    /* Panel blanco SIN borde (igual que el desplegable de cabecera). */
    background: var(--bh-panel-bg); border: 0;
    box-shadow: 0 14px 32px rgba(0,0,0,.10); padding: 24px 28px; border-radius: 0;
    opacity: 0; visibility: hidden; transform: translateX(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
@media (hover: hover) {
.bh-menu--vertical > .bh-menu__list > .bh-menu__item--has-sub:hover > .bh-menu__dropdown {
    opacity: 1; visibility: visible; transform: translateX(0);
}
}

/* ====================================================================
 *  RESPONSIVE / MÓVIL — drawer off-canvas (entra desde la izquierda, 75%)
 *  Estilo tipo árbol de categorías de PrestaShop: lista vertical compacta,
 *  acordeón de categorías/subcategorías, overlay oscuro y botón cerrar (×).
 * ==================================================================== */
.bh-menu-toggle { display: none; }
.bh-menu-mobile-panel { display: none; }
.bh-menu-mobile-overlay { display: none; }

@media (max-width: 991px) {
    /* ocultar menús desktop */
    .header-bottom .bh-menu--header,
    .header-bottom .bh-menu--vertical { display: none; }

    /* botón hamburguesa (solo icono) */
    .bh-menu-toggle {
        display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
        padding: 8px 10px; color: inherit; background: none; border: 0;
    }
    .bh-menu-toggle__bars { display: inline-block; width: 22px; height: 2px; background: currentColor; position: relative; }
    .bh-menu-toggle__bars::before, .bh-menu-toggle__bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
    .bh-menu-toggle__bars::before { top: -7px; } .bh-menu-toggle__bars::after { top: 7px; }

    /* overlay oscuro sobre el resto de la pantalla */
    .bh-menu-mobile-overlay {
        display: block; position: fixed; inset: 0; z-index: 99998;
        background: rgba(0,0,0,.45);
        opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
    }
    /* panel: cajón fijo a la izquierda, 75% del ancho.
       height:100% explícito (iOS no siempre deriva la altura de top+bottom en
       fixed). -webkit-transform por iOS antiguo. NO ponemos overflow:hidden en
       <html> al abrir: en iOS rompe los position:fixed con transform (el panel
       desaparecía y solo se veía el overlay). */
    .bh-menu-mobile-panel {
        display: block; position: fixed; top: 0; z-index: 99999;
        /* Deslizamos con `left` (NO transform): los position:fixed con transform se
           rompen en iOS Safari (el panel desaparecía y solo se veía el overlay). */
        left: -100%;
        width: 75%; max-width: 360px;
        /* Altura = viewport VISIBLE. 100dvh tiene en cuenta la barra de Safari en iOS
           (100vh/100% incluían la zona bajo la barra → el final no era alcanzable).
           Con altura fija + overflow-y:auto, el menú largo hace scroll interno. */
        height: 100vh; height: 100dvh; max-height: 100dvh;
        background: #fff; box-shadow: 2px 0 24px rgba(0,0,0,.18);
        transition: left .3s ease;
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        font-size: 14px; padding-bottom: 48px;
    }
    /* abierto: clase en <html> (la pone el onclick del toggle) */
    html.bh-menu-open .bh-menu-mobile-panel { left: 0; }
    html.bh-menu-open .bh-menu-mobile-overlay { opacity: 1; visibility: visible; }

    /* cabecera del drawer: logo a la izquierda + × a la derecha */
    .bh-menu-mobile-head {
        display: flex; justify-content: space-between; align-items: center;
        position: sticky; top: 0; z-index: 2;
        background: #fff; border-bottom: 1px solid var(--bh-border); min-height: 56px;
        padding-left: 16px;
    }
    .bh-menu-mobile-logo { display: flex; align-items: center; line-height: 0; }
    .bh-menu-mobile-logo img {
        width: auto !important; max-width: 150px !important; height: 28px !important;
        aspect-ratio: auto !important; object-fit: contain; display: block;
    }
    .bh-menu-mobile-close {
        display: flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; background: none; border: 0;
        font-size: 28px; line-height: 1; color: #333; cursor: pointer;
    }

    /* listas verticales (cabecera + vertical apiladas) */
    .bh-menu-mobile-panel nav.bh-menu { border: 0; font-size: 14px; }
    .bh-menu-mobile-panel .bh-menu--header > .bh-menu__list,
    .bh-menu-mobile-panel .bh-menu--vertical > .bh-menu__list { display: block; }
    .bh-menu-mobile-panel .bh-menu__item { position: static; border-bottom: 1px solid #f0f0f0; }
    .bh-menu-mobile-panel .bh-menu__item::after { display: none; }
    .bh-menu-mobile-panel .bh-menu__link {
        display: flex; align-items: center; gap: 8px;
        padding: 12px 16px; font-size: 14px; font-weight: 500;
        color: var(--bh-item-color); text-transform: none; letter-spacing: 0;
        border: 0 !important; opacity: 1 !important;
    }
    .bh-menu-mobile-panel .bh-menu__item--has-sub > .bh-menu__link { cursor: pointer; }
    /* caret (flecha) que rota al abrir */
    .bh-menu-mobile-panel .bh-menu__item--has-sub > .bh-menu__link::after {
        content: ""; margin-left: auto; width: 8px; height: 8px; flex: 0 0 auto;
        border-right: 2px solid var(--bh-muted); border-bottom: 2px solid var(--bh-muted);
        transform: rotate(45deg); transition: transform .2s;
    }
    .bh-menu-mobile-panel .bh-menu__item--has-sub.is-open > .bh-menu__link::after { transform: rotate(-135deg); }
    .bh-menu-mobile-panel .bh-menu--vertical .bh-menu__item--has-sub > .bh-menu__link::after { content: ""; }

    /* desplegable como acordeón (oculto hasta .is-open).
       !important para GANAR a las reglas del megamenú desktop: position:absolute +
       left:50% + transform:translateX(-50%) + width:max-content dejaban el contenido
       desplazado/fuera de la vista dentro del drawer (se veía solo el fondo gris). */
    .bh-menu-mobile-panel .bh-menu__dropdown {
        position: static !important; left: auto !important; top: auto !important; right: auto !important;
        transform: none !important; opacity: 1 !important; visibility: visible !important;
        width: auto !important; max-width: none !important; box-shadow: none !important; border: 0 !important;
        background: #fafafa; display: none; padding: 2px 0 6px;
    }
    .bh-menu-mobile-panel .bh-menu__item--has-sub.is-open > .bh-menu__dropdown { display: block !important; }
    .bh-menu-mobile-panel .bh-menu__cols { display: block !important; gap: 0 !important; flex-wrap: nowrap; }
    .bh-menu-mobile-panel .bh-menu__col { width: auto !important; min-width: 0 !important; flex: none !important; }
    .bh-menu-mobile-panel .bh-menu__col-title {
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
        color: var(--bh-muted); padding: 8px 16px 2px 28px; margin: 0; border: 0;
    }
    .bh-menu-mobile-panel .bh-menu__sublist { margin: 0; padding: 0; }
    .bh-menu-mobile-panel .bh-menu__subitem > a,
    .bh-menu-mobile-panel .bh-menu__subitem > .bh-menu__sublabel {
        display: block; padding: 9px 16px 9px 28px; font-size: 13px; color: #555;
    }
    .bh-menu-mobile-panel .bh-menu__subitem > a:active { color: var(--bh-accent); }
    .bh-menu-mobile-panel .bh-menu__sublist--nested { margin: 0; border: 0; padding-left: 14px; }
    .bh-menu-mobile-panel .bh-menu__banner { display: none; }
    .bh-menu-mobile-panel .bh-menu__badge { font-size: 9px; padding: 1px 5px; margin-left: 6px; }

    /* Logo SVG en iOS Safari: el <img src=logo-briva.svg> no tiene width/height, así
       que iOS lo dimensiona por su tamaño intrínseco (808px) y recortaba la "B".
       Forzamos tamaño + aspect-ratio. (También en child-custom.css; aquí se sirve con
       ?v= cache-bust para asegurar que Safari coge la regla nueva.) */
    img[src*="logo-briva.svg"] {
        width: 130px !important; max-width: 130px !important;
        height: auto !important; aspect-ratio: 808 / 130;
    }
}