/**
 * Vista compacta (27-oct-2026): mas cosas a primera vista en escritorio, sin
 * tocar el movil. "Todo se ve muy grande al lado de BC": en una laptop de
 * 768 px de alto, la cabecera, el menu y la franja del titulo se llevaban
 * casi el 40 % de la pantalla antes del contenido.
 *
 * Es un interruptor: se carga solo con EUREKA_VISTA_COMPACTA encendida (o
 * ?vista=compacta en la URL, que se recuerda en la sesion; ?vista=normal la
 * quita). Para volver atras basta apagarla; no cambia ninguna otra hoja.
 * Va despues de diseno.css (prioridad 1200) para poder pisarla.
 */
@media (min-width: 1025px) {

    /* ---- 1. Escala ------------------------------------------------------
       El tema mide en rem sobre 10 px (html 62.5 %). A 9 px, todo lo que
       mide en rem (textos, titulos, botones del tema y de diseno.css) queda
       al 90 %. El texto normal, a 13 px y no a 12,6. */
    html {
        font-size: 56.25%;
        /* Y todo al 90 %, como el zoom del navegador: lo que mide en px
           (cabecera, tarjetas, Mi cuenta) tambien, y con margen a los lados.
           Asi se veia mejor (pedido del 27-oct-2026: "me gusta mas como se
           ve en 90 %"). */
        zoom: 0.9;
    }
    /* Con el zoom, 100vh mide el 90 % de la pantalla: el fondo oscuro del
       carrito lateral (y el de las ventanas y el "cargando") dejaba una
       franja clara abajo. Pegados arriba y abajo ocupan la pantalla entera */
    .canvas-widget-backdrop,
    .modal-backdrop,
    #axps_loading {
        bottom: 0;
        height: auto !important;
    }
    .dialog-prevent-scroll {
        max-height: calc(100vh / 0.9);
    }

    :root {
        --font-size-body: 1.45rem;
        /* La cabecera no se achica ni esconde el menu al bajar
           (header-sticky.js lee esta variable) */
        --ek-cabecera-fija-entera: 1;
    }

    /* ---- 2. Cabecera: la barra del logo -----------------------------------
       Al bajar sigue achicandose como antes (sus reglas de cabecera.css,
       con .eureka-header--compacto, son mas especificas y ganan). */
    #header .elementor-top-section:has(.elementor-widget-axps-search) {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image img {
        width: 165px;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search input.query {
        height: 42px !important;
        font-size: 13.5px !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search button.search-submit {
        width: 34px !important;
        height: 34px !important;
    }
    /* El circulo y el icono de dentro (diseno.css le da 42 px al de Mi
       lista: con el circulo a 34 se montaba sobre su texto) */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box .elementor-icon,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box i.la-clipboard-list,
    #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,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart i.la-shopping-cart {
        width: 38px !important;
        height: 38px !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) i.la-clipboard-list::before,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account i.la-user::before,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart i.la-shopping-cart::before {
        width: 20px;
        height: 20px;
    }
    #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 {
        font-size: 12px !important;
        line-height: 15px !important;
    }

    /* ---- 3. Franja del titulo (Su cuenta, Carrito, categorias...) -------
       De ~125 px a ~70: la ruta y el titulo mas pegados y mas chicos */
    #wrapper .page-title.page-title-layout-2 {
        margin-bottom: 18px;
        padding: 12px 0 14px;
    }
    #wrapper .page-title.page-title-layout-2 > .container {
        gap: 2px;
    }
    #wrapper .page-title .h1 {
        font-size: 2.4rem;
    }
    #wrapper .page-title .axps-breadcrumb {
        font-size: 12px;
    }
    /* Las paginas sin franja (producto...) */
    body:not(#index) #wrapper:not(:has(.page-title)) {
        padding-top: 16px;
    }

    /* ---- 4. Mi cuenta ---------------------------------------------------- */
    .my-account-page-content {
        gap: 16px;
    }
    .my-account-page-content > .my-account-links {
        flex-basis: 240px;
        max-width: 240px;
    }
    .my-account-links > a .link-item {
        gap: 10px;
        padding: 5px 8px;
    }
    .my-account-links > a .link-item > i {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }
    .my-account-content > h4 {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    /* Tarjetas, cifras y tablas de Mis facturas, Credito, Usuarios... */
    .ek-tarjeta {
        padding: 20px;
    }
    .ek-tarjeta__titulo {
        margin-bottom: 8px;
        font-size: 19px;
    }
    .ek-cifras > div {
        padding: 10px 14px;
    }
    .ek-cifras__valor {
        margin-top: 2px;
        font-size: 19px;
    }
    .ek-cifras__nota {
        font-size: 12px;
    }
    .ek-tabla {
        font-size: 13px;
    }
    .ek-tabla th {
        padding: 8px 10px;
    }
    .ek-tabla td {
        padding: 8px 10px;
    }
    .ek-aviso {
        margin-bottom: 14px;
        padding: 10px 14px;
        font-size: 13px;
    }

    /* ---- 5. Tarjetas de producto -----------------------------------------
       Medidas en px (tarjetas.css y diseno.css): la escala no las tocaba y
       en una laptop solo cabia una fila. De ~370 px de alto a ~280: foto de
       140 px. */
    .js-product-miniature .element-top,
    .js-product-miniature .element-top > a,
    .js-product-miniature .wrapper-imgs {
        height: 140px !important;
    }
    .js-product-miniature .wrapper-imgs img {
        height: 140px !important;
    }
    .products .item-inner {
        padding: 8px 8px 10px;
    }
    .product-type-7 .item-inner .product_name,
    .product-type-7 .item-inner .product_name a {
        font-size: 12.5px;
    }
    .product-type-7 .item-inner .ax-product-cats {
        margin-bottom: 2px;
        font-size: 11.5px;
    }
    .js-product-miniature .product-price-and-shipping .price {
        font-size: 15px;
    }
    .js-product-miniature .product-price-and-shipping .product-unit-price {
        font-size: 11px;
    }
    /* La cantidad centrada y "Agregar" debajo, a todo el ancho, en todas
       las listas (antes, sin filtros a la izquierda, iban lado a lado y con
       filtros uno encima del otro: se pidio siempre asi, 27-oct-2026) */
    .js-product-miniature form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding-top: 8px;
    }
    .js-product-miniature form .input-group-add-cart,
    .js-product-miniature form .ek-comprar {
        margin: 0 !important;
    }
    /* En columna, flex-basis seria el alto (salia un circulo de 84 px):
       el ancho, con width */
    .products .js-product-miniature form .input-group-add-cart.bootstrap-touchspin {
        flex: 0 0 auto;
        width: 84px;
        height: auto;
    }
    .products .js-product-miniature form .input-group-add-cart.bootstrap-touchspin input.form-control {
        height: 32px;
        padding: 0;
    }
    .products .js-product-miniature form .input-group-add-cart.bootstrap-touchspin.input-group .input-group-btn button {
        width: 24px;
        height: 32px;
    }
    .product-type-7 .item-inner form .btn-action.add-to-cart {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        height: 34px;
        margin: 0 !important;
        padding: 0 8px;
        font-size: 12px;
        line-height: 34px;
    }

    /* ---- 6. Checkout: los pasos mas bajos -------------------------------- */
    body#checkout section.checkout-step {
        margin-bottom: 12px;
    }
    body#checkout section.checkout-step .step-title {
        gap: 12px;
        padding: 12px 18px;
    }
    body#checkout section.checkout-step .step-number,
    body#checkout section.checkout-step .step-title i.done {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        line-height: 28px;
    }
}

/* ---- Iconos de Mi lista, la cuenta y el carrito (27-oct-2026) ------------
   De linea, mas modernos que los del tema, y en cuadrados redondeados,
   como el menu de Mi cuenta. Desde tableta: en el movil van sin recuadro
   (diseno.css). */
@media (min-width: 768px) {
    #header {
        /* Sin relleno (se probaron rellenos y no convencieron) */
        --ek-ico-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 4H7a2.5 2.5 0 0 0-2.5 2.5v13A2.5 2.5 0 0 0 7 22h10a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 17 4h-1.5'/%3E%3Crect x='8.5' y='2' width='7' height='4' rx='1.3'/%3E%3Cpath d='M8.5 10.5h7M8.5 14.5h7M8.5 18.5h4'/%3E%3C/svg%3E");
        --ek-ico-usuario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
        --ek-ico-carrito: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2l2.6 11.6a1.6 1.6 0 0 0 1.6 1.3h8.6'/%3E%3Cpath d='M6.2 6.5h13.6a1 1 0 0 1 1 1.2l-1.1 5.3a1.6 1.6 0 0 1-1.6 1.3H8'/%3E%3Ccircle cx='9.5' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E");
    }

    /* Cuadrados redondeados en vez de circulos (el recuadro y el icono) */
    #header i.la-clipboard-list,
    #header .btn-canvas-account i.la-user,
    #header .btn-canvas-cart i.la-shopping-cart,
    #header .btn-canvas-menu i.la-list-ul,
    #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 {
        border-radius: 11px !important;
    }
}

/* Escritorio: los tres mas juntos (cada uno traia 14 px de relleno a los
   lados, mas el margen del constructor); a 18 px entre si. La columna se
   busca por Mi cuenta, que siempre esta: sin sesion no hay carrito y Mi
   lista y Mi cuenta quedaban pegados */
@media (min-width: 1025px) {
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-column:has(.elementor-widget-axps-my-account) .elementor-widget-wrap {
        justify-content: flex-end;
        gap: 18px !important;
    }
    #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 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box > .elementor-widget-container,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-my-account > .elementor-widget-container,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-my-cart > .elementor-widget-container {
        margin: 0 !important;
        padding: 0 !important;
    }
}