/**
 * Cabecera de la tienda (15-oct-2026): la de siempre (Mi lista, cuenta y
 * carrito como estaban; el menu en su barra negra) con el buscador mas
 * limpio, y que se achica al bajar.
 *
 * Al bajar se achica (logo, buscador, iconos, sin los textos) y el menu se
 * esconde; al subir vuelve a su tamano (header-sticky.js pone
 * .eureka-header--compacto). Solo en escritorio, desde 1025 px como Elementor:
 * por debajo (tableta, con el boton "Menu") y en el movil queda la cabecera
 * de siempre (diseno.css, "Cabecera en el movil").
 *
 * No usa los identificadores de Elementor (cambian por tienda y al reeditar).
 * La barra del logo se reconoce por tener el buscador
 * (.elementor-top-section:has(.elementor-widget-axps-search)) y no por la
 * clase .ek-barra-con-buscador que le pone header-sticky.js: esa llega al
 * terminar de cargar la pagina y, mientras tanto, la cabecera se veia con
 * las medidas viejas (22-oct-2026). .eureka-header-plegable, .ek-nav-* y
 * .ek-cabecera-fija si son del script (solo cambian al bajar, o no se ven).
 */
@media (min-width: 1025px) {
    :root {
        --ek-cab-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
        --ek-cab-tiempo: 0.38s;
    }

    /* Fija sobre la pagina: al achicarse no cambia el alto de nada (el
       hueco lo reserva .ek-hueco-menu con el alto entero). Con sticky, el
       cambio de alto movia la pagina, el navegador corregia el scroll y eso
       contaba como "subir": la cabecera crecia y se achicaba en bucle. */
    #header.ek-cabecera-fija {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    html.ek-cabecera-fija .ek-hueco-menu {
        height: calc(var(--ek-alto-principal, 0px) + var(--ek-alto-menu, 0px));
    }
    /* El tema le da 40 px de margen abajo; ya fija no cuentan, pero mientras
       carga la pagina (antes de header-sticky.js) si: el contenido salia 40 px
       mas abajo, con un hueco en blanco bajo el menu, y luego saltaba arriba */
    #header:has(.elementor-widget-axps-search) {
        margin-bottom: 0 !important;
    }

    /* ---- Barra del logo -------------------------------------------- */

    /* Mas baja que la del constructor (14 px arriba y abajo, logo de 216 px,
       iconos de 42): la cabecera entera pasa de 130 a ~114 px (22-oct-2026,
       "se ve muy grande" al lado de la de la Home) */
    #header .elementor-top-section:has(.elementor-widget-axps-search) {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        transition: padding var(--ek-cab-tiempo) var(--ek-cab-curva);
    }

    /* Con width y no con transform: un transform no le quita alto a la barra.
       Pegado a la izquierda: Elementor lo centra y se corria al achicarse */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image .elementor-image,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image .elementor-widget-container {
        text-align: left;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image img {
        width: 180px;
        max-width: 100%;
        transition: width var(--ek-cab-tiempo) var(--ek-cab-curva);
    }

    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search input.query {
        height: 42px !important;
        padding-left: 22px !important;
        border: 1px solid #e3e5e8 !important;
        border-radius: 999px !important;
        background: #f5f6f7 !important;
        font-size: 14px !important;
        transition: height var(--ek-cab-tiempo) var(--ek-cab-curva), border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search input.query:focus {
        border-color: #16181d !important;
        background: #fff !important;
        box-shadow: 0 0 0 4px rgba(231, 43, 55, 0.12) !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search button.search-submit {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: #e72b37 !important;
        transition: width var(--ek-cab-tiempo) var(--ek-cab-curva), height var(--ek-cab-tiempo) var(--ek-cab-curva), background-color 0.15s;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search button.search-submit:hover {
        background: #c4202b !important;
    }

    /* Mi lista, la cuenta y el carrito: como siempre (icono en circulo y el
       texto debajo). Al bajar se achican y el texto se pliega. */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account i,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart .canvas-gr-icon {
        transition: transform var(--ek-cab-tiempo) var(--ek-cab-curva);
    }
    /* Mi lista, la cuenta y el carrito: tres widgets distintos del constructor,
       cada uno con su fuente, tamano, color y circulo (22-oct-2026: "Mi
       lista" mas grande y en negrita, a otra altura). Iguales: circulo de 38
       px, el texto debajo a 12 px, y al pasar el raton el circulo en rojo
       claro con el icono rojo. */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-column:has(.elementor-widget-axps-my-cart) .elementor-widget-wrap {
        align-items: flex-start !important;
        gap: 4px;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-my-account,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-my-cart {
        margin: 0 !important;
        padding: 0 6px;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-wrapper,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-decoration: none !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-icon {
        margin: 0 !important;
        line-height: 0;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account i,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart .canvas-gr-icon {
        display: grid !important;
        place-items: center;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #f2f4f7 !important;
        color: #16181d !important;
        font-size: 20px !important;
        line-height: 1 !important;
        transition: background-color 0.2s ease, color 0.2s ease, transform var(--ek-cab-tiempo) var(--ek-cab-curva) !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon i,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart .canvas-gr-icon > i {
        font-size: 20px !important;
        color: inherit !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box:hover .elementor-icon,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account:hover i,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart:hover .canvas-gr-icon {
        background: #fde8ea !important;
        color: #e72b37 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-content,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-title,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-title a,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-text {
        margin: 0 !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 15px !important;
        color: #16181d !important;
        white-space: nowrap;
    }
    /* Achicada, sin los textos: sin el hueco entre icono y texto */
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-wrapper,
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account,
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart {
        gap: 0;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box:hover .elementor-icon-box-title a,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account:hover .btn-canvas-text,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart:hover .btn-canvas-text {
        color: #e72b37 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-content,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account .btn-canvas-text,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart .btn-canvas-text {
        max-height: 24px;
        overflow: hidden;
        transition: opacity 0.2s ease, max-height var(--ek-cab-tiempo) var(--ek-cab-curva), margin var(--ek-cab-tiempo) var(--ek-cab-curva);
    }

    /* ---- Al bajar: todo un poco mas chico, sin los textos ------------ */

    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image img {
        width: 140px;
    }
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search input.query {
        height: 38px !important;
    }
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search button.search-submit {
        width: 30px !important;
        height: 30px !important;
    }
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon,
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account i,
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart .canvas-gr-icon {
        transform: scale(0.86);
    }
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon-box-content,
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account .btn-canvas-text,
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart .btn-canvas-text {
        max-height: 0;
        margin: 0 !important;
        opacity: 0;
    }

    /* El menu (Categorias, Nuestras marcas...) se queda con su barra negra
       de siempre (decision del 15-oct-2026); solo se esconde al bajar */
}

/* El titulo de las paginas (categoria, marca, Mi cuenta...) trae del tema
   margin-top: -40px: se metia bajo la cabecera y tapaba las migas de pan
   (Inicio / Aceites...) con la barra del menu */
#wrapper > .page-title:first-child {
    margin-top: 0 !important;
}
/* Las paginas sin ese titulo (producto...) empezaban pegadas a la barra del
   menu. La portada no: su banner va pegado a proposito */
body:not(#index) #wrapper:not(:has(.page-title)) {
    padding-top: 28px;
}
/* Paginas de contenido que empiezan con un banner (Productos nuevos, Super
   ofertas): el constructor lo sube 149 px para tapar la franja del titulo
   del tema, que era asi de alta. Con la franja mas baja (diseno.css y la
   vista compacta) subia de mas y la cabecera le cortaba la parte de arriba.
   Sin la franja, que el banner ya dice lo mismo, y el banner en su sitio.
   Se reconocen por el primer bloque: una sola imagen. */
body#cms #wrapper:has(#content.page-cms .elementor-section-wrap > .elementor-top-section:first-child .elementor-widget-image:only-child) > .page-title {
    display: none;
}
body#cms #content.page-cms .elementor-section-wrap > .elementor-top-section:first-child:has(.elementor-widget-image:only-child) {
    margin-top: 16px !important;
}
/* Portada: el primer bloque (el banner) trae del constructor margin-top
   -40px y quedaban 40 px del banner tapados por la barra del menu */
body#index #main-content .elementor-section-wrap > .elementor-top-section:first-child {
    margin-top: 0 !important;
}
/* ...y ese -40px compensaba los 40 px de margen que el tema le da a la
   cabecera: en la portada, la cabecera sin margen, y el banner (o el video de
   la Home) justo debajo, sin franja blanca */
body#index #header {
    margin-bottom: 0 !important;
}

/* En cualquier ancho: un nombre largo bajo el icono de la cuenta empujaba el
   carrito a otra linea (y en tableta el boton "Menu" quedaba encima de la
   lupa). Se corta con "..." (el completo, en el title). */
#header .btn-canvas-account .btn-canvas-text {
    display: block;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 1024.98px) {
    #header .btn-canvas-account .btn-canvas-text {
        max-width: 90px;
    }
}

/* Tableta y laptops chicas (768-1024 px, cabecera de tableta): Menu, Mi
   lista, cuenta y carrito en una sola fila a la derecha, y el buscador con
   lo que quede. Antes, segun el nombre, se partian en una cuadricula de 2x2
   o se desbordaban hacia la izquierda y el boton Menu tapaba el buscador */
@media (min-width: 768px) and (max-width: 1024.98px) {
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-column:has(.elementor-widget-axps-my-cart) {
        flex: 0 0 auto;
        width: auto !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-column:has(.elementor-widget-axps-my-cart) .elementor-widget-wrap {
        flex-wrap: nowrap !important;
        justify-content: flex-end;
        align-items: flex-start;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-column:has(.elementor-widget-axps-search) {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 200px;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-column:not(:has(.elementor-widget)) {
        display: none;
    }
}

/* Tableta (768-1024 px): el campo del buscador se salia de su columna (unos
   38 px) y el boton "Menu" quedaba encima de la lupa */
@media (min-width: 768px) and (max-width: 1024.98px) {
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search {
        width: auto !important;
        max-width: 100% !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search input.query {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* El constructor le pone a esa columna margen 39 px a la izquierda y -38
       a la derecha: el buscador se corre y se sale de ella */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-column:has(.elementor-widget-axps-search) > .elementor-column-wrap {
        margin-right: 12px !important;
    }
}

/* ---- Cabecera de la Home (la de presentacion: logo, enlaces y botones) ----
   22-oct-2026. Ocupaba todo el ancho sin margen (el logo y "Ir a tienda"
   tocaban los bordes y en algunas pantallas el ultimo se cortaba); los
   botones con tres estilos distintos. Se reconoce por la lista de enlaces
   (icon-list) en la barra principal; la de la Clasica y la Express tiene el
   buscador. Sin las clases que pone header-sticky.js (al terminar de cargar):
   con ellas, la cabecera salia un momento con el estilo viejo. Solo
   escritorio: en tableta y movil Elementor pinta otra. */
/* En todas sus paginas, sin los 40 px de margen del tema: dejaban una franja
   blanca bajo la cabecera (la portada ya lo tenia, body#index, arriba) */
#header:has(.elementor-widget-icon-list) {
    margin-bottom: 0 !important;
}
@media (min-width: 1025px) {
    #header .elementor-top-section:has(.elementor-widget-icon-list) {
        position: relative;
        z-index: 2;
        background: rgb(255 255 255 / 96%) !important;
        -webkit-backdrop-filter: saturate(1.4) blur(8px);
        backdrop-filter: saturate(1.4) blur(8px);
        box-shadow: 0 1px 0 #eceef0;
        transition: box-shadow 0.25s ease;
    }
    #header.eureka-header--compacto .elementor-top-section:has(.elementor-widget-icon-list) {
        box-shadow: 0 8px 24px rgb(16 24 32 / 8%);
    }
    /* Fija arriba al bajar: no cambia de alto, asi que sticky no salta */
    #header:has(.elementor-top-section .elementor-widget-icon-list) {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container {
        padding: 0 32px;
        min-height: 76px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 20px;
    }
    /* Las tres columnas a su contenido; los enlaces se quedan el centro */
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-row > .elementor-column {
        width: auto !important;
        flex: 0 0 auto;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-row > .elementor-column:has(.elementor-widget-icon-list) {
        flex: 1 1 auto;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-column > .elementor-column-wrap,
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-wrap {
        padding: 0 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-image img {
        width: 180px;
        max-width: none;
        height: auto;
    }

    /* Enlaces: sin separadores, con una raya roja que crece al pasar */
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-items {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
        /* Elementor les pone margen negativo a los lados (inline-items) */
        margin: 0 !important;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item {
        margin: 0 !important;
        padding: 0 !important;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item::after {
        display: none !important;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item > a {
        position: relative;
        padding: 10px 14px;
        border-radius: 999px;
        white-space: nowrap;
        transition: background-color 0.15s ease;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-text {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #16181d !important;
        transition: color 0.15s ease;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item > a::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 4px;
        height: 2px;
        border-radius: 2px;
        background: #e72b37;
        transform: scaleX(0);
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item > a:hover .elementor-icon-list-text {
        color: #e72b37 !important;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item > a:hover::after {
        transform: scaleX(1);
    }

    /* Botones: misma altura y forma. Iniciar sesion con borde y Registrate
       rojo (Ir a tienda se quito, abajo) */
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-column:has(.elementor-widget-button) .elementor-widget-wrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button {
        margin: 0 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button .elementor-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 42px;
        padding: 0 20px !important;
        border: 1.5px solid #16181d !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: none !important;
        color: #16181d !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap;
        transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button .elementor-button * {
        color: inherit !important;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button .elementor-button:hover {
        background: #16181d !important;
        color: #fff !important;
    }
    /* Registrate: el segundo (Mi cuenta, si hay sesion, ocupa su sitio) */
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button:nth-child(2) .elementor-button {
        border-color: #e72b37 !important;
        background: #e72b37 !important;
        color: #fff !important;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button:nth-child(2) .elementor-button:hover {
        border-color: #c41f2a !important;
        background: #c41f2a !important;
    }
}
/* "Ir a tienda" sobraba (pedido del 22-oct-2026): "Iniciar sesion" ya lleva a
   la tienda (header-sticky.js le cambia el back=my-account). En todas las
   versiones de la cabecera de la Home: escritorio, tableta y movil */
#header:has(.elementor-widget-icon-list) .elementor-widget-button:has(a.elementor-button[href$="/clasica/"]) {
    display: none !important;
}

/* Pantallas medianas (1025-1499): todo un poco mas compacto para que quepa
   (logo + 4 enlaces + 3 botones necesitan ~1330 px a tamano completo) */
@media (min-width: 1025px) and (max-width: 1499.98px) {
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container {
        padding: 0 20px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-row {
        gap: 12px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-image img {
        width: 150px;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item > a {
        padding: 10px 8px;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-text {
        font-size: 13.5px !important;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button .elementor-button {
        height: 38px;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
}
/* Y en las mas chicas (1025-1279), mas todavia */
@media (min-width: 1025px) and (max-width: 1279.98px) {
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container {
        padding: 0 14px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-row {
        gap: 8px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-image img {
        width: 130px;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item > a {
        padding: 10px 6px;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-text {
        font-size: 12.5px !important;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-column:has(.elementor-widget-button) .elementor-widget-wrap {
        gap: 6px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button .elementor-button {
        padding: 0 11px !important;
        font-size: 12.5px !important;
    }
}
@media (min-width: 1025px) and (max-width: 1139.98px) {
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container {
        padding: 0 10px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) > .elementor-container > .elementor-row {
        gap: 6px;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-items {
        gap: 0;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-text {
        font-size: 12px !important;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-image img {
        width: 115px;
    }
    #header .elementor-top-section .elementor-widget-icon-list .elementor-icon-list-item > a {
        padding: 10px 4px;
    }
    #header .elementor-top-section:has(.elementor-widget-icon-list) .elementor-widget-button .elementor-button {
        padding: 0 9px !important;
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    #header .elementor-top-section:has(.elementor-widget-axps-search),
    #header .elementor-top-section:has(.elementor-widget-axps-search) * {
        transition: none !important;
    }
}

/* Tableta y laptops chicas (768-1024 px): el boton "Menu" salia con el
   icono de la fuente, sin circulo y con el texto corrido, al lado de Mi
   lista, la cuenta y el carrito (27-oct-2026). Igual que ellos: circulo gris
   de 42 px con el dibujo de diseno.css y el texto centrado debajo */
@media (min-width: 768px) and (max-width: 1024.98px) {
    #header .btn-canvas-menu {
        display: inline-grid !important;
        justify-items: center;
        row-gap: 4px;
        color: var(--color-title);
        text-align: center;
        text-decoration: none !important;
    }
    #header .btn-canvas-menu i.la-list-ul {
        --ek-ico: var(--ek-ico-menu);
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin: 0;
        border-radius: 50%;
        background: #f2f4f7;
        color: var(--color-title);
        font-size: 0;
        line-height: 0;
        transition: background-color 0.15s, color 0.15s;
    }
    #header .btn-canvas-menu i.la-list-ul::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background-color: currentColor;
        -webkit-mask: var(--ek-ico) center / contain no-repeat;
        mask: var(--ek-ico) center / contain no-repeat;
    }
    #header .btn-canvas-menu:hover i.la-list-ul {
        background: #fff1f2;
        color: var(--color-primary);
    }
    #header .btn-canvas-menu .btn-canvas-text {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
    }
    /* Quedaba pegado a Mi lista: los demas llevan 14 px a cada lado
       (diseno.css) y este nada */
    #header .elementor-widget-axps-megamenu > .elementor-widget-container {
        padding: 0 14px;
    }
}