/* =========================================================================
   ecommbase — Cabecera
   -------------------------------------------------------------------------
   Ámbito: todas las páginas (all)
   theme.css sigue siendo la base global; aquí van SOLO las customizaciones
   específicas de esta página/sección (sobrescribe la base por especificidad
   y orden de carga definidos en config/theme.yml).
   ========================================================================= */

/* ===== Extraido automaticamente de theme.css (reglas 100% de esta pagina) ===== */

.header-top .search-widgets form input[type="text"] {
    width: 100%;
    min-width: inherit;
    color: #9b9b9b;
    background: #f6f6f6;
}
.header-top .search-widgets form input[type="text"]:focus {
    background: #fff;
}
.header-top .search-widgets form button[type="submit"] {
    top: 50%;
    bottom: inherit;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.header-top #search_widget input {
    padding-right: 1rem;
}
#header {
    position: relative;
    z-index: 999;
    color: #7a7a7a;
    background: #fdfdfd;
    border-bottom: 1px solid #f1f1f2;
}
.header-top + .container {
    border-top: 1px solid #f1f1f2;
}
#header .logo {
    height: auto;
    /* Tamano de logo fijado por Alfonso (el heredado eran 190px). */
    max-width: 130px;
}
#header a:hover {
    color: #24b9d7;
    text-decoration: none;
}
#header .menu,
#header .menu > ul > li {
    display: inline-block;
}
#header .header-nav {
    max-height: 55px;
    border-bottom: #f6f6f6 2px solid;
}
#header .header-nav #menu-icon {
    margin: 0 1rem;
    vertical-align: middle;
    cursor: pointer;
}
#header .header-nav #menu-icon .material-icons {
    line-height: 50px;
}
#header .header-nav .right-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
#header .header-nav .currency-selector {
    margin-top: 0.9375rem;
    margin-left: 0.9375rem;
    white-space: nowrap;
}
#header .header-nav .user-info {
    margin-left: 2.5rem;
    text-align: right;
}
#header .header-nav .user-info .account {
    margin-left: 0.625rem;
}
#header .header-nav .language-selector,
#header .header-nav .user-info {
    margin-top: 0.9375rem;
    white-space: nowrap;
}
#header .header-nav .cart-preview.active {
    background: #24b9d7;
}
#header .header-nav .blockcart.active a:hover,
#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i {
    color: #fff;
}
#header .header-nav .cart-preview .shopping-cart {
    color: #7a7a7a;
    vertical-align: middle;
}
#header .header-nav .cart-preview .body {
    display: none;
}
#header .header-nav .blockcart {
    height: 3rem;
    padding: 0.75rem;
    margin-left: 0.9375rem;
    text-align: center;
    white-space: nowrap;
    background: #f6f6f6;
}
#header .header-nav .blockcart a:hover {
    color: #24b9d7;
}
#header .header-nav .blockcart .header {
    margin-top: 0.125rem;
}
#header .header-nav #_desktop_contact_link {
    display: inline-block;
}
#header .header-nav .search-widget {
    margin-top: 0.2rem;
}
#header .header-nav .material-icons {
    line-height: inherit;
}
#header .header-nav .material-icons.expand-more {
    margin-left: -0.375rem;
}
#header .header-top {
    padding: 5px 0;
}
#header .header-top > .container {
    position: relative;
}
#header .header-top > .container > .row:first-of-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#header .header-top .menu {
    padding-left: 15px;
}
#header .header-top .position-static {
    position: static;
}
#header .header-top a[data-depth="0"] {
    color: #7a7a7a;
    text-transform: uppercase;
}
#header .header-top .search-widget {
    float: right;
}
#header .top-menu-link {
    margin-left: 1.25rem;
}

/* === Herdasa: cuenta y carrito como botones circulares con iconos lucide (preview) === */
#header .header-top-right {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
}
#header .header-top-right #_desktop_user_info,
#header .header-top-right #_desktop_cart,
#header .header-top-right .user-info,
#header .header-top-right .blockcart {
    margin: 0;
    padding: 0;
}
/* Boton circular comun (cuenta + carrito) */
#header #_desktop_user_info .user-info a,
#header #_desktop_cart .blockcart .header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color3);
    border-radius: 999px;
    background-color: var(--color3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 17px 17px;
    cursor: pointer;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#header #_desktop_user_info .user-info a:hover,
#header #_desktop_cart .blockcart .header:hover {
    border-color: var(--color3);
    box-shadow: 0 4px 12px rgba(159, 187, 212, .12);
}
/* Ocultar iconos material y textos originales */
#header #_desktop_user_info .user-info a i,
#header #_desktop_user_info .user-info a span,
#header #_desktop_cart .blockcart .header i,
#header #_desktop_cart .blockcart .header span {
    display: none !important;
}
/* Iconos lucide de fondo (mismos que el preview) */
#header #_desktop_user_info .user-info a {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E");
}
#header #_desktop_cart .blockcart .header {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'%2F%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M16%2010a4%204%200%200%201-8%200'%2F%3E%3C%2Fsvg%3E");
}

/* === Herdasa: wishlist circular (como cuenta/carrito) + badge del carrito === */

/* Wishlist (megawishlist): mismo boton circular, icono corazon en #5d4f43 */
#header .header-top-right .mwl-header,
#header .header-top-right .header-block {
    margin: 0;
}
#header .header-top-right .mwl-header__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--color3);
    border-radius: 999px;
    background: var(--color3);
    color: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#header .header-top-right .mwl-header__link:hover {
    border-color: var(--color3);
    box-shadow: 0 4px 12px rgba(159, 187, 212, .12);
}
#header .header-top-right .mwl-header__icon {
    display: inline-flex;
}
#header .header-top-right .mwl-header__icon svg {
    width: 17px;
    height: 17px;
    display: block;
}
#header .header-top-right .mwl-header__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: var(--color3);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;

    border-radius: 999px;
}

/* Carrito: mostrar el contador como badge navy (no ocultarlo) */
#header #_desktop_cart .blockcart .header {
    position: relative;
}
#header #_desktop_cart .blockcart .header span.cart-products-count {
    display: flex !important;
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    background: var(--color3);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
}
/* Ocultar el badge cuando el carrito esta vacio */
#header #_desktop_cart .blockcart.inactive .header span.cart-products-count,
#header #_desktop_cart .blockcart .header span.cart-products-count:empty {
    display: none !important;
}

/* === Ajuste iconos cabecera para igualar el preview (hover + corazon outline) === */
/* Transicion y sombra base sutil en los 3 botones */
#header #_desktop_user_info .user-info a,
#header #_desktop_cart .blockcart .header,
#header .header-top-right .mwl-header__link {
    box-shadow: 0 3px 10px rgba(37, 31, 26, .05);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Hover como el preview: borde tostado + leve elevacion (sin cambiar fondo/sombra) */
#header #_desktop_user_info .user-info a:hover,
#header #_desktop_cart .blockcart .header:hover,
#header .header-top-right .mwl-header__link:hover {
    box-shadow: 0 3px 10px rgba(37, 31, 26, .05);
    transform: translateY(-1px);
}
/* Corazon (wishlist): SOLO contorno, nunca relleno */
#header .header-top-right .mwl-header__icon svg,
#header .header-top-right .mwl-header__icon svg path {
    fill: none !important;
    stroke: #ffffff !important;
}

/* === Menu principal (megamenu) como el preview === */
/* Solo nivel superior (no tocar submenus/desplegables) */
.megamenu--horizontal > .megamenu__list {
    display: flex;
    align-items: center;
    gap: 8px;
}
.megamenu--horizontal > .megamenu__list > .megamenu__item > .megamenu__link {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: none;
    border-radius: 999px;
    box-shadow: none;
    color: #5d4f43;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s ease;
}
.megamenu--horizontal > .megamenu__list > .megamenu__item:hover > .megamenu__link,
.megamenu--horizontal > .megamenu__list > .megamenu__item > .megamenu__link:hover {
    background-color: #f4efe8;
    color: var(--color3);
}

/* Badge "B2B" */
.megamenu--horizontal .megamenu__label {
    display: inline-block;
    background: var(--color3);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 6px;
    margin-right: 6px;
    vertical-align: middle;
    text-transform: none;
}
#product #wrapper > .container + .container {
    width: 100%;
}
/* Item con B2B ("Área profesional") -> pildora tostada (como el preview) */
.megamenu--horizontal > .megamenu__list > .megamenu__item:has(.megamenu__label) > .megamenu__link {
    border: 1px solid #d0b99c;
    border-radius: 999px;
    font-weight: 800;
    color: var(--color3);
}
.megamenu--horizontal > .megamenu__list > .megamenu__item:has(.megamenu__label) > .megamenu__link:hover {
    background-color: #f0e6d6;
    color: var(--color3);
}

/* === Ajuste Área profesional (B2B): pildora con gradiente tostado, a la derecha del todo === */
.megamenu--horizontal > .megamenu__list > .contract {
    margin-left: auto;
}
.megamenu--horizontal > .megamenu__list > .contract > .megamenu__link {
    color: #fff !important;
    background: linear-gradient(135deg, var(--color3), #28446f) !important;
    border-color: var(--color3) !important;
    box-shadow: 0 10px 22px rgba(159, 187, 212, 0.22) !important;
}
.megamenu--horizontal > .megamenu__list > .ofertas > .megamenu__link{
    color: #fff!important;
    background: linear-gradient(135deg, #d83a34, #b91d27)!important;
    border-color: #be2a2a!important;
    box-shadow: 0 10px 22px #b91d273d!important;
}
.megamenu--horizontal > .megamenu__list > .megamenu__item:has(.megamenu__label) > .megamenu__link {
    background: linear-gradient(135deg, #d0b99c, #f0d7ae);
    border: 1px solid #d0b99c;
    border-radius: 999px;
    color: var(--color3);
    font-weight: 800;
}
.megamenu--horizontal > .megamenu__list > .megamenu__item:has(.megamenu__label) > .megamenu__link:hover {
    background: linear-gradient(135deg, #c9ad8a, #eccea0);
    color: var(--color3);
}
/* Badge B2B (fondo casi negro/navy) */
.megamenu--horizontal .megamenu__label {
    display: inline-block;
    background: var(--color3);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: middle;
    text-transform: none;
}

/* Forzar relleno tostado del Área profesional sobre el CSS del modulo (usa !important) */
.megamenu--horizontal > .megamenu__list > .megamenu__item:has(.megamenu__label) > .megamenu__link {
    background: linear-gradient(135deg, #d0b99c, #f0d7ae) !important;
    border: 1px solid #d0b99c !important;
    border-radius: 999px !important;
    color: var(--color3) !important;
}
.megamenu--horizontal > .megamenu__list > .megamenu__item:has(.megamenu__label) > .megamenu__link:hover {
    background: linear-gradient(135deg, #c9ad8a, #eccea0) !important;
    color: var(--color3) !important;
}
.megamenu--horizontal .megamenu__label {
    border-radius: 999px !important;
}

/* === MOVIL: un solo hamburguesa (megamenu), quitar el del tema y la fila suelta === */
@media (max-width: 991px) {
    #header {
        /* sticky (no relative): mismo comportamiento de offsetParent para los
           iconos de abajo, pero permite fijar el header al hacer scroll
           (ver bloque "Header fijo" al final del fichero) */
        position: sticky;
    }
    /* ocultar hamburguesa del tema (abre menu vacio) */
    #header #menu-icon {
        display: none !important;
    }
    /* trigger del megamenu: sacarlo de su fila y ponerlo como circulo navy arriba-izq */
    #header .megamenu-mobile-wrapper.mm-show-mobile {
        position: absolute;
        top: 40px;
        left: 10px;
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        z-index: 40;
    }
    #header .megamenu-mobile-trigger {
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: var(--color3);
        color: #ffffff;
        border: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    #header .megamenu-mobile-trigger svg {
        stroke: #ffffff;
        width: 20px;
        height: 20px;
    }
    #header .megamenu-mobile-trigger i,
    #header .megamenu-mobile-trigger .material-icons {
        color: #ffffff;
    }
}

/* Reubicar hamburguesa movil en el hueco entre logo e iconos (sin solapar el logo) */
@media (max-width: 991px) {
    #header .megamenu-mobile-wrapper.mm-show-mobile {
        left: auto !important;
        right: 128px !important;
        top: 40px !important;
    }
}

/* === MOVIL: menu como fila de pildoras scrollable (como el preview) === */
@media (max-width: 991px) {
    #header nav.megamenu.megamenu--horizontal {
        display: block !important;
        width: 100%;
        background: #ffffff;
        border-top: 1px solid #f0ece5;
    }
    #header .megamenu--horizontal > .megamenu__list {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 12px;
        margin: 0;
        list-style: none;
    }
    #header .megamenu--horizontal > .megamenu__list::-webkit-scrollbar {
        display: none;
    }
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item {
        flex: 0 0 auto;
        margin: 0;
    }
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item > .megamenu__link {
        white-space: nowrap;
        border-radius: 999px;
        padding: 9px 16px;
        background: #ffffff;
        color: #5d4f43;
        font-weight: 700;
        font-size: 14px;
        border: none;
        box-shadow: none;
    }
    /* la pildora "Area profesional" fluye inline en el scroller (sin empujar a la derecha) */
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item:has(.megamenu__label) {
        margin-left: 0 !important;
    }
}

/* Forzar fila horizontal (el modulo pone flex-direction:column en movil) */
@media (max-width: 991px) {
    #header .megamenu--horizontal > .megamenu__list {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    #header .megamenu--horizontal > .megamenu__list > .megamenu__item {
        width: auto !important;
        flex: 0 0 auto !important;
    }
}

/* === MOVIL: buscador desplegado al 100% del ancho === */
@media (max-width: 991px) {
    #header .header-top .header-center {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        order: 5;
    }
    #header .header-top .header-center #approsearch-trigger,
    #header .header-top .header-center .search-widgets,
    #header .header-top .header-center form {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Buscador 100% en su propia fila + corazon subido a la fila de iconos */
@media (max-width: 991px) {
    #header .header-top .header-center {
        order: 0 !important;
    }
    /* wishlist junto a la hamburguesa/cuenta/carrito (fila superior derecha) */
    #header .header-block.mwl-header {
        position: absolute !important;
        top: 40px !important;
        right: 175px !important;
        left: auto !important;
        margin: 0 !important;
        z-index: 41 !important;
    }
}

/* Subir el corazon a la fila de iconos (su offsetParent es .container que empieza mas abajo) */
@media (max-width: 991px) {
    #header .header-block.mwl-header {
        top: -62px !important;
        right: 175px !important;
    }
}

/* === MOVIL: sin menu de pildoras (usamos hamburguesa) + iconos agrupados a la derecha === */
@media (max-width: 991px) {
    /* QUITAR el menu horizontal de pildoras */
    #header nav.megamenu.megamenu--horizontal {
        display: none !important;
    }
    /* mantener la hamburguesa (izquierda del cluster de iconos) */
    #header .megamenu-mobile-wrapper.mm-show-mobile {
        display: inline-block !important;
        position: absolute !important;
        top: 40px !important;
        right: 175px !important;
        left: auto !important;
        margin: 0 !important;
        z-index: 41 !important;
    }
    /* corazon junto a cuenta/carrito (los tres a la derecha) */
    #header .header-block.mwl-header {
        position: absolute !important;
        top: -60px !important;
        right: 130px !important;
        left: auto !important;
        margin: 0 !important;
        z-index: 41 !important;
    }
    /* logo un poco mas pequeno para que quepa todo (solo el img del logo del nav) */
    #header .header-nav img {
        max-width: 150px !important;
        height: auto !important;
    }
}

/* === MOVIL: orden hamburguesa · logo · corazon · usuario · carrito; iconos estilo preview === */
@media (max-width: 991px) {
    /* hamburguesa a la IZQUIERDA */
    #header .megamenu-mobile-wrapper.mm-show-mobile {
        left: 10px !important;
        right: auto !important;
        top: 40px !important;
    }
    /* logo desplazado a la derecha de la hamburguesa */
    #header .header-nav img {
        margin-left: 59px !important;
        width: 100%;
    }
    /* cluster corazon + usuario + carrito, pegados a la derecha (mismo anclaje que el corazon) */
    #header .header-block.mwl-header {
        top: -58px !important;
        right: 108px !important;
    }
    #header #_mobile_user_info,
    #header #_mobile_cart {
        position: absolute !important;
        top: -58px !important;
        margin: 0 !important;
        width: auto !important;
        z-index: 41 !important;
    }
    #header #_mobile_user_info { right: 60px !important; }
    #header #_mobile_cart { right: 12px !important; }

    /* Cuenta -> circulo con icono lucide (como el preview / escritorio) */
    #header #_mobile_user_info .user-info a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--color3);
        border-radius: 999px;
        background-color: #ffffff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 17px 17px;
        color: transparent;
        font-size: 0;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E");
    }
    #header #_mobile_user_info .user-info a i,
    #header #_mobile_user_info .user-info a span {
        display: none !important;
    }
    /* Carrito -> circulo con icono lucide bag */
    #header #_mobile_cart .blockcart .header {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--color3);
        border-radius: 999px;
        background-color: #ffffff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 17px 17px;
        color: transparent;
        font-size: 0;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'%2F%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M16%2010a4%204%200%200%201-8%200'%2F%3E%3C%2Fsvg%3E");
    }
    #header #_mobile_cart .blockcart .header i,
    #header #_mobile_cart .blockcart .header span:not(.cart-products-count) {
        display: none !important;
    }
}

/* Fix anclaje/tamano del cluster de iconos moviles (cuenta/carrito se anclan a #header) */
@media (max-width: 991px) {
    #header #_mobile_user_info,
    #header #_mobile_cart {
        top: 40px !important;
        width: 44px !important;
    }
    #header #_mobile_cart { right: 12px !important; }
    #header #_mobile_user_info { right: 62px !important; }
    #header .header-block.mwl-header { right: 112px !important; }
}

/* Centrar los circulos en su caja (reset wrappers) y reajustar cluster */
@media (max-width: 991px) {
    #header #_mobile_user_info,
    #header #_mobile_cart {
        width: 40px !important;
        overflow: visible !important;
    }
    #header #_mobile_user_info .user-info,
    #header #_mobile_cart .blockcart {
        width: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        margin-top: -1px!important;
    }
    #header #_mobile_cart { right: 12px !important; }
    #header #_mobile_user_info { right: 60px !important; }
    #header .header-block.mwl-header { right: 108px !important; }
}

/* === Items del menu como pildoras blancas (.cat-pill del preview) === */
.megamenu--horizontal > .megamenu__list > .megamenu__item > .megamenu__link {
    display: inline-flex;
    align-items: center;
    background: transparent;
    /* border: 1px solid #ece2d7; */
    border-radius: 999px;
    /* box-shadow: 0 6px 16px rgba(37, 31, 26, .05); */
    color: var(--color3);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s ease;
}
.megamenu--horizontal > .megamenu__list > .megamenu__item > .megamenu__link:hover {
    /* background: #ffffff; */
    /* border-color: #9a744f; */
    /* box-shadow: 0 6px 16px rgba(37, 31, 26, .10); */
    /* transform: translateY(-1px); */
    /* color: #5d4f43; */
}
#header li:not(.contract,.ofertas) a:hover {
    /* background: #f2ede6 !important; */
    /* border-color: #f2ede6 !important; */
    color: black;
    box-shadow: none;
    background: transparent;
}
.sub-form-group.form-control-optional {
    display: none;
}
nav.megamenu.megamenu--horizontal.megamenu--content {
    padding: 2px 0px;
}
/* Fix iconos movil: quitar fondo gris del carrito + alinear los tres (40px) */
@media (max-width: 991px) {
    #header #_mobile_cart .blockcart {
        background: transparent !important;
        box-shadow: none !important;
    }
    #header .header-block.mwl-header .mwl-header__link {
        width: 40px !important;
        height: 40px !important;
    }
    #header .header-block.mwl-header {top: -61px !important;}
    #header #_mobile_user_info { top: 42px !important; }
}

/* Header fijo al hacer scroll (desktop y movil), pero la franja
   .header-banner (megaheadertop) NO debe quedar fija: en vez de mover el
   banner de sitio (que rompería los offsets absolutos de arriba, calculados
   contra #header), usamos un top negativo == altura del banner. Asi el
   banner se desplaza con la pagina de forma normal y, en cuanto sale de la
   vista (scroll > altura del banner), el resto de #header queda fijo en
   y:0. #header ya es el offsetParent de todo lo de arriba y sigue siendolo
   (sticky se comporta como relative para ese calculo), asi que ningun
   offset de los iconos necesita tocarse.
   Alturas del banner (megaheadertop.css): 40px normal, 34px en <=575px. */
@media (min-width: 992px) {
    #header {
        position: sticky;
    }
}
#header {
    top: -40px;
}
@media (max-width: 575px) {
    #header {
        top: -34px;
    }
}
.has-discount .page-content.page-cms ul, .has-discount p, .has-discount.product-price, .page-content.page-cms .has-discount ul {
    color: var(--color3);
}
.has-discount .discount {

    background: #ca2e35;
    border-radius: 12px;
}
div#_desktop_user_info, div#_desktop_cart {
    top: 2px;
}
.card {
    border-radius: 12px;
}
.product-flags li.product-flag.on-sale {
    width: initial;
    display: inline-block;
    background: white;
    color: #d13331;
}
#cookiesplus-modal .cookiesplus-btn, div#cookiesplus-modal {

    border-radius: 12px;
}
#header .contract a:hover, #header .ofertas a:hover {
    color: white !important;
}
#amazzing_filter .compact-toggle.sticky {
    border-radius: 12px 12px 0px 0px;
}
.megamenu__col-title {
    display: none;
}

/* --- Carrito desplegable (megacart): miniaturas ligeramente redondeadas ---
   megacart.css las deja en 8 px y se carga antes que este parcial en todas las
   paginas, asi que aqui se igualan a las del carrito (assets/css/cart.css). */
.megacart-product-image img {
    border-radius: 3px;
}
.mega2is-add-to-cart form {
    margin-bottom: 0px;
}

/* Iconos de cuenta y carrito en movil: mismo boton circular relleno que en
   escritorio. En movil el marcado usa #_mobile_* (los #_desktop_* van vacios),
   por eso las reglas de arriba no llegaban y salian circulos sin glifo. */
@media (max-width: 991px) {
    #header #_mobile_user_info .user-info a,
    #header #_mobile_cart .blockcart .header {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 0;
        border: 1px solid var(--color3);
        border-radius: 999px;
        background-color: var(--color3);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 17px 17px;
        color: transparent;
        font-size: 0;
        line-height: 0;
    }
    #header #_mobile_user_info .user-info a i,
    #header #_mobile_user_info .user-info a span,
    #header #_mobile_cart .blockcart .header i,
    #header #_mobile_cart .blockcart .header span {
        display: none !important;
    }
    #header #_mobile_user_info .user-info a { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'7'%20r%3D'4'%2F%3E%3C%2Fsvg%3E"); }
    #header #_mobile_cart .blockcart .header { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z'%2F%3E%3Cpath%20d%3D'M3%206h18'%2F%3E%3Cpath%20d%3D'M16%2010a4%204%200%200%201-8%200'%2F%3E%3C%2Fsvg%3E"); }
}


/* El logo NUNCA se deforma: la regla de theme.css (#header .top-logo img) le
   fija max-height y, al moverlo el JS al contenedor movil, acababa con ancho y
   alto impuestos a la vez (350x226 pintado a 109x32). Con height:auto se
   respeta la proporcion, y object-fit:contain es el seguro por si algo vuelve a
   imponer las dos medidas. */
#header .logo,
#header .top-logo img,
#header #_mobile_logo img,
#header #_desktop_logo img {
    width: auto !important;
    height: auto !important;
    max-width: 130px;
    max-height: 90px;
    object-fit: contain;
}
#header #_desktop_logo {
    text-align: center;
}
#header #_desktop_logo .header-brand__desc {
    margin: 2px 0 0;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: inherit;
    text-align: center;
}
@media (max-width: 767px) {
    #header .logo,
    #header .top-logo img,
    #header #_mobile_logo img {
        /* La fila de la cabecera movil mide 55px: el logo tiene que caber dentro,
           por eso manda la altura y no el ancho. */
        max-width: 110px;
        max-height: 46px;
    }
}
header .megamenu {
    background: transparent;

}
/* ==========================================================================
   Cabecera en móvil y tablet: los cuatro botones redondos alineados (rev2, 24-sep-2026)
   --------------------------------------------------------------------------
   Antes cada botón iba colocado a mano con un `top`/`right` distinto y el
   corazón además se anclaba a otro contenedor (.header-top .container), así que
   quedaba 10px más alto que la persona y el carrito, y en horizontal (768-991px)
   se subía a la barra de aviso mientras los otros dos se salían por la derecha.
   Ahora los cuatro se anclan a #header con la misma línea `top`, que es la
   altura de la barra de aviso (megaheadertop: 34px hasta 575px, 40px por encima)
   más 6px.
   ========================================================================== */
@media (max-width: 991px) {
    /* el corazón deja de anclarse al .container de .header-top y pasa a #header */
    #header .header-top,
    #header .header-top > .container,
    #header .header-top > .container > .row {
        position: static !important;
    }
    #header {
        --hdr-icons-top: 46px;
    }
}
@media (max-width: 575px) {
    #header {
        --hdr-icons-top: 40px;
    }
}

/* --- Teléfono en vertical (<768px): hamburguesa · logo ··· corazón · cuenta · carrito --- */
@media (max-width: 767px) {
    #header .megamenu-mobile-wrapper.mm-show-mobile,
    #header .header-block.mwl-header,
    #header #_mobile_user_info,
    #header #_mobile_cart {
        position: absolute !important;
        top: var(--hdr-icons-top) !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        z-index: 41 !important;
    }
    #header .megamenu-mobile-wrapper.mm-show-mobile { left: 10px !important; right: auto !important; }
    #header #_mobile_cart { right: 10px !important; }
    #header #_mobile_user_info { right: 58px !important; }
    #header .header-block.mwl-header { right: 106px !important; }
    #header #_mobile_user_info .user-info,
    #header #_mobile_cart .blockcart {
        margin: 0 !important;
    }
}

/* --- Tablet / teléfono en horizontal (768-991px): logo · buscador · iconos en UNA fila --- */
@media (min-width: 768px) and (max-width: 991px) {
    #header .header-top > .container > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding-left: 56px;           /* hueco para la hamburguesa */
        margin: 0 !important;
    }
    #header .header-top #_desktop_logo {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    #header .header-top .header-center {
        order: 0 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
    }
    #header .header-top .header-top-right {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        gap: 8px;
    }
    #header .header-top-right .header-block.mwl-header {
        position: static !important;
        margin: 0 !important;
    }
    #header .megamenu-mobile-wrapper.mm-show-mobile {
        position: absolute !important;
        top: calc(var(--hdr-icons-top) + 30px) !important;
        left: 12px !important;
        right: auto !important;
    }
}

/* Logo móvil con "Desde 1966" DEBAJO (antes quedaba al lado y chocaba con los iconos) */
@media (max-width: 767px) {
    #header #_mobile_logo {
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        margin-left: 58px !important;
        width: auto !important;
        padding-top: 3px;
    }
    #header #_mobile_logo h1 { margin: 0; line-height: 0; }
    #header #_mobile_logo img {
        margin-left: 0 !important;
        width: auto !important;
        max-height: 38px !important;
        max-width: 90px !important;
    }
    #header #_mobile_logo .header-brand__desc {
        margin: 1px 0 0 !important;
        font-size: 10px !important;
        line-height: 1.1;
        letter-spacing: .03em;
        color: #6b6b6b;
        white-space: nowrap;
    }
}
/* Horizontal: los tres botones a la misma altura y del mismo tamaño */
@media (min-width: 768px) and (max-width: 991px) {
    #header .header-top-right > * {
        display: flex !important;
        align-items: center !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }
    #header .header-top-right .user-info,
    #header .header-top-right .blockcart {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
    }
    #header .header-top-right .header-block.mwl-header .mwl-header__link {
        width: 42px !important;
        height: 42px !important;
    }
}