/* ==========================================================================
   AB HEADER LAYOUT (DIVI) — ÚNICA FUENTE DE VERDAD DEL LAYOUT DEL HEADER
   Arquitectura obligatoria:
     [Logo] → [Tienda Express] → [Enlaces] → [Carrito] → [Buscador]
   Desktop: una sola fila con flex + order.
   Móvil  : grid de 2 filas con áreas nombradas.
   Los componentes (tienda, buscador) solo aportan su propio estilo interno;
   la posición, gaps y tamaños de contenedor se definen AQUÍ.
   ========================================================================== */

/* ---------- 0. Tokens ---------- */
:root {
    --ab-gap-xs: 6px;
    --ab-gap-sm: 10px;
    --ab-gap-md: 16px;
    --ab-header-max: 1680px;
    --ab-header-h: 72px;          /* altura normal (desktop) */
    --ab-header-h-shrunk: 52px;   /* altura al hacer scroll */
    --ab-logo-h: 44px;
    --ab-logo-h-shrunk: 32px;
    --ab-accent: #ff601c;
    --ab-pill-bg: rgba(255, 255, 255, 0.10);
    --ab-pill-border: rgba(255, 255, 255, 0.22);
}

/* ---------- 1. Comunes ---------- */
.et_pb_section_0_tb_header,
.et_pb_row_0_tb_header,
.et_pb_column_0_tb_header,
.et_pb_menu {
    overflow: visible !important;
}
.et_pb_menu .et_pb_menu__search-button { display: none !important; } /* evita duplicar la lupa nativa */

.et_pb_menu .et_pb_menu__logo-wrap {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.et_pb_menu .et_pb_menu__logo-wrap .et_pb_menu__logo,
.et_pb_menu .et_pb_menu__logo-wrap a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    line-height: 0 !important;
}
.et_pb_menu .et_pb_menu__logo-wrap img {
    display: block !important;
    width: auto !important;
    height: var(--ab-logo-h) !important;
    max-height: var(--ab-logo-h) !important;
    max-width: none !important;
    transition: height .25s ease, max-height .25s ease;
}

/* Carrito (cápsula) */
.et_pb_menu a.et_pb_menu__cart-button,
.et_pb_menu .et_pb_menu__icon.et_pb_menu__cart-button {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    background: var(--ab-pill-bg) !important;
    border: 1px solid var(--ab-pill-border) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
.et_pb_menu a.et_pb_menu__cart-button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--ab-accent) !important;
    color: var(--ab-accent) !important;
}

/* Animación "pop" del contador del carrito (la dispara ab-header-layout.js) */
@keyframes abCartPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    65%  { transform: scale(.94); }
    100% { transform: scale(1); }
}
.et_pb_menu a.et_pb_menu__cart-button.ab-cart-pop {
    animation: abCartPop .55s cubic-bezier(.2, .9, .3, 1.2);
    border-color: var(--ab-accent) !important;
    box-shadow: 0 0 0 4px rgba(255, 96, 28, .25);
}
@media (prefers-reduced-motion: reduce) {
    .et_pb_menu a.et_pb_menu__cart-button.ab-cart-pop { animation: none; }
}

/* ---------- 2. DESKTOP (>= 981px): una sola fila ---------- */
@media (min-width: 981px) {
    /* La fila del header usa casi todo el ancho */
    .et-l--header .et_pb_section .et_pb_row,
    .et_pb_row_0_tb_header {
        width: 96% !important;
        max-width: var(--ab-header-max) !important;
    }

    .et_pb_menu .et_pb_menu_inner_container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: var(--ab-gap-md) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: var(--ab-header-h);
        transition: min-height .25s ease;
    }

    /* Tienda junto al logo */
    .et_pb_menu .ab-express-store-selector-wrapper {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        z-index: 1000 !important;
    }

    /* Zona derecha: Enlaces → Carrito → Buscador */
    .et_pb_menu .et_pb_menu__wrap {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: var(--ab-gap-sm) !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .et_pb_menu .et_pb_menu__menu {
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    .et_pb_menu .et-menu-nav,
    .et_pb_menu ul.et-menu {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: var(--ab-gap-xs) !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }
    .et_pb_menu .et-menu > li {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 6px !important;
        white-space: nowrap !important;
    }
    .et_pb_menu .et-menu > li > a {
        padding: 0 !important;
        line-height: normal !important;
        white-space: nowrap !important;
    }
    .et_pb_menu a.et_pb_menu__cart-button { order: 2 !important; }

    /* El buscador crece con el espacio libre (210–340px) */
    .et_pb_menu .ab-header-search-wrapper {
        order: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 1 clamp(210px, 22vw, 340px) !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .et_pb_menu .ab-header-search-wrapper .ab-search-form,
    .et_pb_menu .ab-header-search-wrapper .ab-search-input-box,
    .et_pb_menu .ab-header-search-wrapper .ab-search-input-box:focus-within {
        width: 100% !important;
        max-width: none !important;
    }

    /* Niveles de compactación (los activa ab-header-layout.js si falta espacio) */
    .ab-header-compact .et_pb_menu .et-menu > li > a { font-size: 12.5px !important; }
    .ab-header-compact .et_pb_menu .et_pb_menu__wrap { gap: var(--ab-gap-xs) !important; }
    .ab-header-compact .et_pb_menu .ab-header-search-wrapper { flex-basis: 170px !important; }
    .ab-header-compact .et_pb_menu a.et_pb_menu__cart-button { padding: 5px 10px !important; }

    .ab-header-ultra .et_pb_menu .et-menu > li > a { font-size: 12px !important; }
    .ab-header-ultra .et_pb_menu .et-menu > li { padding: 0 4px !important; }
    .ab-header-ultra .et_pb_menu .et_pb_menu_inner_container { gap: var(--ab-gap-xs) !important; }
    .ab-header-ultra .et_pb_menu .ab-header-search-wrapper { flex-basis: 120px !important; }
    .ab-header-ultra .et_pb_menu .et_pb_menu__cart-count { display: none !important; }
    .ab-header-ultra .ab-express-store-pill .ab-express-store-prefix { display: none !important; }
    .ab-header-ultra .ab-express-store-pill .ab-express-current-name {
        max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* ---------- 3. MÓVIL / TABLET (<= 980px): grid de áreas ---------- */
@media (max-width: 980px) {
    /*  Fila 1:  [Logo] [ Buscador ........................ ]
        Fila 2:  [Tienda Express] <--- gap flexible ---> [Carrito] [gap] [☰ Menú]  */
    .et_pb_menu .et_pb_menu_inner_container {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "logo   search  search"
            "store  spacer  actions" !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 12px !important;
        box-sizing: border-box !important;
    }
    .et_pb_menu .et_pb_menu_inner_container > * {
        min-width: 0 !important;
        position: static !important;
    }

    /* FILA 1 · Logo */
    .et_pb_menu .et_pb_menu__logo-wrap {
        grid-area: logo !important;
        justify-self: start !important;
        display: flex !important;
        align-items: center !important;
    }
    .et_pb_menu .et_pb_menu__logo-wrap img {
        height: 36px !important;
        max-height: 36px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* FILA 1 · Buscador (ocupa todo el ancho restante) */
    .et_pb_menu .ab-header-search-wrapper {
        grid-area: search !important;
        display: block !important;
        width: 100% !important;
        flex: none !important;
        order: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .et_pb_menu .ab-header-search-wrapper .ab-search-form,
    .et_pb_menu .ab-header-search-wrapper .ab-search-input-box,
    .et_pb_menu .ab-header-search-wrapper .ab-search-input-box:focus-within {
        width: 100% !important;
        max-width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        box-sizing: border-box !important;
    }

    /* FILA 2 · Tienda Express (izquierda, columna 1 estrictamente) */
    .et_pb_menu .ab-express-store-selector-wrapper {
        grid-area: store !important;
        justify-self: start !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        z-index: 1000 !important;
        min-width: 0 !important;
    }

    /* Pastilla de tienda: altura consistente de 38px */
    .et_pb_menu .ab-express-store-pill {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12.5px !important;
        min-width: 0 !important;
    }
    .et_pb_menu .ab-express-store-pill .ab-express-store-label {
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .et_pb_menu .ab-express-store-pill .ab-express-current-name {
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }

    /* FILA 2 · Carrito + Hamburguesa (derecha, columna 3) */
    .et_pb_menu .et_pb_menu__wrap {
        grid-area: actions !important;
        justify-self: end !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .et_pb_menu .et_pb_menu__wrap > * {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    .et_pb_menu .et_pb_menu__menu { display: none !important; }

    /* Botón del Carrito en móvil: cápsula compacta y limpia */
    .et_pb_menu a.et_pb_menu__cart-button {
        order: 1 !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .et_pb_menu a.et_pb_menu__cart-button .ab-cart-num {
        font-weight: 700 !important;
        font-size: 12px !important;
    }

    /* Hamburguesa con área táctil accesible de 38px */
    .et_pb_menu .et_mobile_nav_menu,
    .et_pb_menu .et_mobile_nav_menu .mobile_nav {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        float: none !important;
        margin: 0 !important;
    }
    .et_pb_menu .mobile_menu_bar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 38px !important;
        min-height: 38px !important;
        width: 38px !important;
        height: 38px !important;
        line-height: 1 !important;
        position: static !important;
    }
    .et_pb_menu .mobile_menu_bar::before {
        position: static !important;
        line-height: 1 !important;
        font-size: 26px !important;
    }
}

/* Pantallas intermedias (<= 480px) */
@media (max-width: 480px) {
    .et_pb_menu .et_pb_menu_inner_container {
        column-gap: 10px !important;
        row-gap: 8px !important;
        padding: 6px 10px !important;
    }
    .et_pb_menu .ab-express-store-pill .ab-express-store-prefix {
        display: none !important;
    }
    .et_pb_menu .ab-express-store-pill .ab-express-current-name {
        max-width: 95px !important;
    }
    .et_pb_menu .et_pb_menu__wrap {
        gap: 8px !important;
    }
}

/* Pantallas angostas (<= 390px): asegura que nunca colisionen */
@media (max-width: 390px) {
    .et_pb_menu .et_pb_menu_inner_container {
        column-gap: 8px !important;
        padding: 6px 8px !important;
    }
    .et_pb_menu .ab-express-store-pill {
        padding: 0 8px !important;
        gap: 4px !important;
    }
    .et_pb_menu .ab-express-store-pill .ab-express-current-name {
        max-width: 85px !important;
    }
    .et_pb_menu a.et_pb_menu__cart-button {
        padding: 0 8px !important;
        gap: 4px !important;
        font-size: 11.5px !important;
    }
    .et_pb_menu .et_pb_menu__wrap {
        gap: 6px !important;
    }
}

/* Muy angostas (<= 350px): oculta el icono de pin si hace falta para el nombre */
@media (max-width: 350px) {
    .et_pb_menu .ab-express-store-pill .ab-express-pin-icon {
        display: none !important;
    }
    .et_pb_menu .ab-express-store-pill .ab-express-current-name {
        max-width: 80px !important;
    }
    .et_pb_menu a.et_pb_menu__cart-button {
        padding: 0 6px !important;
        font-size: 11px !important;
    }
}

/* ---------- 4. HEADER STICKY QUE SE REDUCE AL HACER SCROLL ----------
   Solo se activa si Divi no tiene su propio header fijo (lo decide el JS).
   Clases en <html>: ab-sticky-on (activo) y ab-header-scrolled (reducido). */
.ab-sticky-on .et-l--header {
    position: fixed !important;
    top: var(--ab-admin-bar-h, 0px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99990;
    transition: box-shadow .25s ease, background-color .25s ease;
}
.ab-sticky-on.ab-header-scrolled .et-l--header {
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.ab-header-spacer { display: none; width: 100%; pointer-events: none; }
.ab-sticky-on .ab-header-spacer { display: block; }

@media (min-width: 981px) {
    .ab-header-scrolled .et_pb_menu .et_pb_menu_inner_container { min-height: var(--ab-header-h-shrunk); }
    .ab-header-scrolled .et_pb_menu .et_pb_menu__logo-wrap img {
        height: var(--ab-logo-h-shrunk) !important;
        max-height: var(--ab-logo-h-shrunk) !important;
    }
    .ab-sticky-on .et-l--header .et_pb_section { padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (max-width: 980px) {
    /* Móvil: el header fijo se compacta (menos padding/gaps) sin ocultar controles */
    .ab-sticky-on .et_pb_menu .et_pb_menu_inner_container {
        transition: padding .25s ease, row-gap .25s ease;
    }
    .ab-sticky-on.ab-header-scrolled .et_pb_menu .et_pb_menu_inner_container {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        row-gap: 5px !important;
    }
    .ab-sticky-on.ab-header-scrolled .et_pb_menu .et_pb_menu__logo-wrap img {
        height: 28px !important;
        max-height: 28px !important;
    }
}

/* ---------- 5. LIMPIEZA DE CABECERAS Y MENÚS DUPLICADOS EN CARRITO ---------- */
body.woocommerce-cart .et-l--body .et_pb_menu,
body.woocommerce-cart #main-content .et_pb_menu,
body.woocommerce-cart .entry-content .et_pb_menu,
body.woocommerce-cart .et-l--body .et_pb_fullwidth_header,
body.woocommerce-cart #main-content .et_pb_fullwidth_header,
body.woocommerce-cart .et-l--body .wp-block-site-logo,
body.woocommerce-cart .et-l--body .wp-block-site-title,
body.woocommerce-cart .et-l--body .wp-block-site-tagline,
body.woocommerce-cart .et-l--body .wp-block-navigation,
body.woocommerce-cart #main-content .wp-block-site-logo,
body.woocommerce-cart #main-content .wp-block-site-title,
body.woocommerce-cart #main-content .wp-block-site-tagline,
body.woocommerce-cart #main-content .wp-block-navigation,
body.woocommerce-cart .entry-content .wp-block-site-logo,
body.woocommerce-cart .entry-content .wp-block-site-title,
body.woocommerce-cart .entry-content .wp-block-site-tagline,
body.woocommerce-cart .entry-content .wp-block-navigation,
body.woocommerce-cart #main-content .ab-express-store-selector-wrapper,
body.woocommerce-cart .et-l--body .ab-express-store-selector-wrapper,
body.woocommerce-cart .entry-content .ab-express-store-selector-wrapper,
body.woocommerce-cart .custom-car-container ~ .ab-express-store-selector-wrapper,
body.woocommerce-cart #custom-car-wrapper ~ .ab-express-store-selector-wrapper {
    display: none !important;
}