/**
 * Aspecto general de la tienda: esquinas redondeadas, bordes suaves y sombras
 * ligeras en lugar de cajas rectas.
 *
 * OJO: afecta a TODA la tienda y a las tres tiendas (Clasica, Express, Home),
 * que comparten el tema akira. No toca ningun fichero del tema: se carga
 * despues de el (prioridad 1100 en hookHeader) y lo sobrescribe. Para volver
 * al aspecto anterior basta con quitar esa linea de hookHeader.
 *
 * Los radios son los mismos que ya usan el registro, Mi cuenta y los avisos
 * (registro.css, mi-cuenta.css, avisos.css), para que todo se vea igual.
 */

:root {
    --ek-radio-s: 8px;     /* etiquetas, casillas, miniaturas pequenas */
    --ek-radio: 10px;      /* campos y botones */
    --ek-radio-m: 14px;    /* tarjetas de producto, imagenes */
    --ek-radio-l: 16px;    /* cajas grandes: formularios, carrito, modales */
    --ek-borde: #e9ecf0;
    --ek-sombra: 0 1px 2px rgb(16 24 40 / 4%), 0 1px 3px rgb(16 24 40 / 6%);
    --ek-sombra-alta: 0 14px 32px rgb(16 24 40 / 10%), 0 2px 6px rgb(16 24 40 / 6%);
    --ek-sombra-menu: 0 16px 40px rgb(16 24 40 / 14%), 0 2px 8px rgb(16 24 40 / 6%);
    --ek-radio-tarjeta: 20px; /* tarjetas de producto */

    /* Iconos de la cabecera: un solo juego de trazo fino (antes cada uno era
       de una familia distinta: Line Awesome, Font Awesome regular y solid).
       Se pintan con mask, asi toman el color del texto y cambian al pasar. */
    --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%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%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='8' 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%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E");
    --ek-ico-categorias: 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%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
    --ek-ico-marcas: 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='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
    --ek-ico-limpieza: 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='M11 3l1.9 5.1L18 10l-5.1 1.9L11 17l-1.9-5.1L4 10l5.1-1.9z'/%3E%3Cpath d='M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8z'/%3E%3C/svg%3E");
    --ek-ico-nuevos: 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='M12 2.8l2.8 5.8 6.4.9-4.6 4.5 1.1 6.3L12 17.3l-5.7 3 1.1-6.3-4.6-4.5 6.4-.9z'/%3E%3C/svg%3E");
    --ek-ico-ofertas: 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='M19 5L5 19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
    --ek-ico-direcciones: 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='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --ek-ico-pedidos: 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='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
    --ek-ico-facturas: 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='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
    --ek-ico-credito: 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%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E");
    --ek-ico-devoluciones: 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='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10h-1'/%3E%3C/svg%3E");
    --ek-ico-salir: 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='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
    --ek-ico-flecha: 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='M9 6l6 6-6 6'/%3E%3C/svg%3E");

    /* Flecha de los selectores (el color va dentro del SVG: un background no
       puede tomar currentColor) */
    --ek-ico-candado: 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%3Crect x='4' y='11' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3Cpath d='M12 15.5v2'/%3E%3C/svg%3E");
    --ek-ico-usuarios: 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='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.2a6.5 6.5 0 0 1 3.5 5.8'/%3E%3C/svg%3E");
    --ek-ico-aprobar: 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%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");
    --ek-ico-subir: 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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M12 18v-6M9 15l3-3 3 3'/%3E%3C/svg%3E");
    --ek-ico-pdf-listo: 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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E");
    --ek-ico-alerta: 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='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
    --ek-ico-menu: 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='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    --ek-ico-buscar: 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='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    /* El de usuario ya en rojo, para usarlo de fondo (sin mask) */
    --ek-ico-direcciones-rojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e72b37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --ek-ico-usuario-rojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e72b37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
    --ek-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5763' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --ek-flecha-activa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e72b37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --ek-flecha-abierta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e72b37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");

    /* Ficha de producto: ancho de la cantidad y de los botones */
    --ek-ficha-cantidad: 104px;
    --ek-ficha-boton: 330px;

    /* Las variables del propio tema para campos y botones (hoy en 5px) */
    --ax-form-bi-rd: var(--ek-radio);
    --ax-form-btn-rd: var(--ek-radio);
}

/* ------------------------------------------------------------------------
 * Cabecera
 *
 * La monta el editor (axoncreator) con reglas por elemento del tipo
 * .elementor-70 .elementor-element-xxxx, distintas en cada tienda. Aqui se
 * sobrescribe con selectores bajo #header, que valen para las tres y ganan
 * por especificidad sin !important.
 * --------------------------------------------------------------------- */

/* Barra del logo: blanca en vez de gris, con una linea fina debajo */
#header-normal .elementor-section-wrap > section.elementor-top-section:first-child {
    /* El alto de la barra lo daba el margen de 20px de Mi lista, que se le
       quito para alinear los iconos: ahora lo da este relleno */
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ek-borde);
    background-color: #fff;
}

/* Buscador: relleno gris claro sin el borde negro, y la lupa en un circulo rojo */
#header .search-widget .query {
    height: 46px;
    padding: 0 56px 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: #f2f4f7;
    color: var(--color-title);
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#header .search-widget .query::placeholder {
    color: #8a96a3;
}
#header .search-widget .query:hover {
    background-color: #eceff3;
}
#header .search-widget .query:focus {
    border-color: var(--color-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgb(231 43 55 / 10%);
    outline: 0;
}
#header .search-widget .search-submit {
    top: 5px;
    right: 5px;
    bottom: 5px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
}
#header .search-widget .search-submit:hover {
    color: #fff;
    box-shadow: 0 4px 12px rgb(231 43 55 / 35%);
    transform: scale(1.05);
}
#header .search-widget .search-submit::before {
    font-size: 18px;
}

/* Mi lista, Mi cuenta y el carrito: se ponen en rojo al pasar el raton */
#header .elementor-icon-box-wrapper .elementor-icon,
#header .elementor-icon-box-title a,
#header .btn-canvas {
    color: var(--color-title);
    transition: color 0.15s;
}
#header .elementor-icon-box-wrapper:hover .elementor-icon,
#header .elementor-icon-box-wrapper:hover .elementor-icon-box-title a,
#header .btn-canvas:hover {
    color: var(--color-primary);
}
#header .elementor-icon-box-title,
#header .btn-canvas .btn-canvas-text {
    font-weight: 600;
    letter-spacing: 0.2px;
}
/* El numero del carrito, con un aro blanco para despegarlo del icono */
#header .btn-canvas .cart-nbr {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    box-shadow: 0 2px 6px rgb(231 43 55 / 30%);
}

/* Barra roja: cada opcion es una pastilla que se oscurece al pasar el raton
   (antes un bloque rojo mas oscuro de canto recto) y todas con la misma
   letra (unas iban en Trebuchet) */
#header .axps-dropdown-toggle,
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) .elementor-button {
    padding: 8px 16px;
    border-radius: 999px;
    background-color: transparent;
    font-family: var(--font-family-title);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1.2;
    transition: background-color 0.2s;
}
#header .axps-dropdown-wrapper:hover .axps-dropdown-toggle,
#header .axps-dropdown-wrapper.open .axps-dropdown-toggle,
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) .elementor-button:hover {
    background-color: rgb(231 43 55 / 22%);
}

/*
 * Solo en las cabeceras con buscador (Clasica y Express): en la de la Home la
 * barra del movil tambien es una seccion "que no es la primera" (la primera
 * es solo de escritorio) y se quedaba negra, con el menu y el logo invisibles.
 *
 * Barra del menu en negro con los iconos en rojo (variante "B", 28-sep-2026).
 * El rojo de la marca queda de acento en los iconos y en la pastilla al pasar
 * el raton. Para volver a la barra roja: quitar este bloque y dejar arriba el
 * resaltado en rgb(0 0 0 / 14%).
 */
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) {
    background-color: #111418;
}
#header .axps-dropdown-toggle,
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) .elementor-button {
    color: #fff;
}
#header .axps-dropdown-toggle > i,
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) .elementor-button-icon i {
    color: var(--color-primary);
}
/* La flecha de Categorias y Marcas: hacia arriba en reposo y hacia abajo
   al pasar el raton o abrir el menu (pedido de Eureka, 02-oct-2026) */
#header .axps-dropdown-toggle .icon-toggle {
    transform: rotate(180deg);
    transition: transform 0.2s;
}
#header .axps-dropdown-wrapper:hover .axps-dropdown-toggle .icon-toggle,
#header .axps-dropdown-wrapper.open .axps-dropdown-toggle .icon-toggle {
    transform: none;
}
/* Los desplegables de la barra: la opcion en rosa suave, no en rojo oscuro.
   Sin margen encima: se abren al pasar el raton y un hueco los cerraria. */
#header .axps-dropdown-menu > a {
    color: var(--color-title);
    transition: background-color 0.15s, color 0.15s;
}
#header .axps-dropdown-menu > a:hover {
    background-color: #fff1f2;
    color: var(--color-primary);
}

/* --- Iconos: se sustituye el glifo de la fuente por el SVG de :root --- */

/* Mi lista, Mi cuenta y el carrito: el icono dentro de un circulo gris */
#header i.la-clipboard-list,
#header .btn-canvas-account i.la-user,
#header .btn-canvas-cart i.la-shopping-cart {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f2f4f7;
    color: var(--color-title);
    font-size: 0;
    line-height: 0;
    transition: background-color 0.15s, color 0.15s;
}
#header i.la-clipboard-list { --ek-ico: var(--ek-ico-lista); }
#header .btn-canvas-account i.la-user { --ek-ico: var(--ek-ico-usuario); }
#header .btn-canvas-cart i.la-shopping-cart { --ek-ico: var(--ek-ico-carrito); }

#header .elementor-icon-box-wrapper:hover i.la-clipboard-list,
#header .btn-canvas:hover i.la-user,
#header .btn-canvas:hover i.la-shopping-cart {
    background: #fff1f2;
    color: var(--color-primary);
}

/* En la barra roja: blancos y sin circulo */
#header .axps-dropdown-toggle > i.fa-list-alt { --ek-ico: var(--ek-ico-categorias); }
#header .axps-dropdown-toggle > i.fa-bell { --ek-ico: var(--ek-ico-marcas); }
#header .elementor-button-icon i.fa-broom { --ek-ico: var(--ek-ico-limpieza); }
#header .elementor-button-icon i.fa-bookmark { --ek-ico: var(--ek-ico-nuevos); }
#header .elementor-button-icon i.fa-bomb { --ek-ico: var(--ek-ico-ofertas); }

#header .axps-dropdown-toggle > i.fa-list-alt,
#header .axps-dropdown-toggle > i.fa-bell,
#header .elementor-button-icon i.fa-broom,
#header .elementor-button-icon i.fa-bookmark,
#header .elementor-button-icon i.fa-bomb {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    font-size: 0;
    line-height: 0;
}

/* El dibujo, comun a todos */
#header i.la-clipboard-list::before,
#header .btn-canvas-account i.la-user::before,
#header .btn-canvas-cart i.la-shopping-cart::before,
#header .axps-dropdown-toggle > i.fa-list-alt::before,
#header .axps-dropdown-toggle > i.fa-bell::before,
#header .elementor-button-icon i.fa-broom::before,
#header .elementor-button-icon i.fa-bookmark::before,
#header .elementor-button-icon i.fa-bomb::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 .axps-dropdown-toggle > i::before,
#header .elementor-button-icon i::before {
    width: 18px;
    height: 18px;
}

/*
 * Icono arriba y texto debajo, los tres con las mismas medidas (circulo de
 * 42px, 4px de separacion y una linea de 16px) para que queden alineados.
 * Mi lista es otro tipo de widget (icon-box) y el editor le ponia 20px de
 * margen encima y la altura de linea de un icono de 25px; el carrito mete
 * el icono en un <span> que sumaba su propia linea.
 */
#header .elementor-widget-icon-box > .elementor-widget-container {
    margin: 0;
    padding: 0 14px;
}
#header .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
#header .elementor-icon-box-wrapper .elementor-icon-box-icon {
    margin: 0;
}
#header .elementor-icon-box-wrapper .elementor-icon,
#header .btn-canvas .canvas-gr-icon {
    display: block;
    font-size: 0;
    line-height: 0;
}
#header .btn-canvas {
    row-gap: 4px;
    justify-items: center;
    text-align: center;
}
#header .btn-canvas .btn-canvas-text,
#header .elementor-icon-box-title,
#header .elementor-icon-box-title a,
#header .btn-canvas .amount {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}
#header .btn-canvas .cart-nbr {
    top: -4px;
    right: -6px;
}

/* --- Barra roja: las opciones centradas y cada una en una sola linea ---
   El editor reparte la barra en 8 columnas iguales (dos vacias) y
   "Limpieza y sanitizacion" no cabia en la suya. */
@media (min-width: 1025px) {
    #header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) > .elementor-container > .elementor-row {
        justify-content: center;
        gap: 6px;
    }
    #header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) > .elementor-container > .elementor-row > .elementor-column {
        flex: 0 0 auto;
        width: auto;
    }
    #header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) > .elementor-container > .elementor-row > .elementor-column:not(:has(.elementor-widget)) {
        display: none;
    }
}
#header .axps-dropdown-toggle,
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) .elementor-button {
    white-space: nowrap;
}
#header .axps-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#header .axps-dropdown-toggle .axps-dropdown-toggle-text {
    margin: 0;
}
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) .elementor-button .elementor-align-icon-left {
    margin-right: 8px;
}
#header-normal .elementor-section-wrap:has(.elementor-widget-axps-search) > section.elementor-top-section:not(:first-child) .elementor-button-content-wrapper {
    display: inline-flex;
    align-items: center;
}

@media (prefers-reduced-motion: reduce) {
    #header .search-widget .search-submit,
    #header .axps-dropdown-toggle .icon-toggle {
        transition: none;
    }
    #header .search-widget .search-submit:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------------
 * Franja del titulo de cada pagina (Crear una cuenta, Carrito, Checkout,
 * categorias...): centrada como antes, pero sin la textura gris, mas baja,
 * con la ruta pequena encima del titulo y el titulo escrito como va (el
 * tema lo pasaba a "Crear Una Cuenta" con text-transform: capitalize).
 * --------------------------------------------------------------------- */

#wrapper .page-title.page-title-layout-2 {
    padding: 26px 0 30px;
    border-bottom: 1px solid var(--ek-borde);
    background-color: #fff;
    /* La textura (bg_breadcrumb.png) va en linea en la plantilla */
    background-image: linear-gradient(180deg, #f5f6f8 0%, #fff 100%) !important;
}
#wrapper .page-title.page-title-layout-2 > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#wrapper .page-title .h1 {
    color: var(--color-title);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-transform: none;
}
#wrapper .page-title .axps-breadcrumb {
    order: -1;
    margin: 0;
    color: #8a96a3;
    font-size: 1.25rem;
}
#wrapper .page-title .axps-breadcrumb a {
    margin-right: 8px;
    color: #6c7a86;
    transition: color 0.15s;
}
#wrapper .page-title .axps-breadcrumb a:hover {
    color: var(--color-primary);
    opacity: 1;
}
#wrapper .page-title .axps-breadcrumb a:not(:last-child)::after {
    content: "\203A";
    margin-left: 8px;
    color: #b8c0c8;
    font-size: 1.5rem;
    line-height: 1;
}
#wrapper .page-title .axps-breadcrumb > span {
    color: var(--color-title);
    font-weight: 600;
}
@media (max-width: 767.98px) {
    #wrapper .page-title.page-title-layout-2 {
        padding: 18px 0 20px;
    }
    #wrapper .page-title .h1 {
        font-size: 2.3rem;
    }
}

/* ------------------------------------------------------------------------
 * Botones
 * --------------------------------------------------------------------- */

.btn {
    border-radius: var(--ek-radio);
    letter-spacing: 0.3px;
}
.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 6px 16px rgb(231 43 55 / 25%);
}

/* ------------------------------------------------------------------------
 * Campos
 * --------------------------------------------------------------------- */

.form-control,
select.form-control,
textarea.form-control,
.custom-select {
    border-radius: var(--ek-radio);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(231 43 55 / 12%);
    outline: 0;
}

/* ------------------------------------------------------------------------
 * Selectores (<select>)
 *
 * 1. El selector cerrado, en todos los navegadores: como los demas campos,
 *    con esquinas redondeadas y una flecha propia que se pone roja al
 *    enfocarlo. Sustituye a la del tema (select.png, solo en escritorio; en
 *    el movil dejaba la del sistema).
 * 2. La lista desplegada, solo donde el navegador deja estilizarla (Chrome y
 *    Edge recientes, appearance: base-select): redondeada, con sombra, la
 *    opcion senalada en rosa y un visto en la elegida. En Safari y Firefox
 *    se sigue viendo la lista del sistema; nada deja de funcionar.
 *    Los selectores se siguen llenando y leyendo igual desde registro.js,
 *    direcciones.js y el modulo de envios: sigue siendo un <select> normal.
 * --------------------------------------------------------------------- */

select.form-control:not([multiple]):not([size]),
select.custom-select {
    padding-right: 44px !important;
    border-radius: var(--ek-radio);
    background-image: var(--ek-flecha);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select.form-control:not([multiple]):not([size]):focus,
select.custom-select:focus {
    background-image: var(--ek-flecha-activa);
}
select.form-control:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

@supports (appearance: base-select) {
    select.form-control:not([multiple]):not([size]),
    select.form-control:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    /* Con base-select el selector se pinta como una caja normal y su texto
       se quedaba arriba (el alto lo dan los min-height de 46-48px de cada
       formulario): se centra en vertical */
    select.form-control:not([multiple]):not([size]) {
        display: flex;
        align-items: center;
    }

    /* La flecha es la del fondo: fuera la que anade el navegador */
    select.form-control:not([multiple]):not([size])::picker-icon {
        display: none;
    }
    select.form-control:not([multiple]):not([size]):open {
        background-image: var(--ek-flecha-abierta);
    }

    select.form-control:not([multiple]):not([size])::picker(select) {
        /* Chrome la abre por defecto hacia donde haya MAS sitio
           (position-try-order: most-block-size), y a media pagina eso solia
           ser hacia arriba. Asi siempre prueba primero hacia abajo y solo sube
           si abajo no cabe. */
        position-try-order: normal;
        max-height: min(320px, 45vh);
        /* Al llegar al final de la lista, la rueda seguia moviendo la pagina */
        overscroll-behavior: contain;
        margin-top: 6px;
        padding: 6px;
        border: 1px solid var(--ek-borde);
        border-radius: var(--ek-radio-m);
        background: #fff;
        box-shadow: var(--ek-sombra-menu);
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.15s, transform 0.15s, overlay 0.15s allow-discrete, display 0.15s allow-discrete;
    }
    @starting-style {
        select.form-control:not([multiple]):not([size]):open::picker(select) {
            opacity: 0;
            transform: translateY(-6px);
        }
    }

    select.form-control:not([multiple]):not([size]) option {
        padding: 9px 12px;
        border-radius: var(--ek-radio-s);
        color: var(--color-title);
        font-size: 1.4rem;
        cursor: pointer;
        transition: background-color 0.12s, color 0.12s;
    }
    select.form-control:not([multiple]):not([size]) option:hover,
    select.form-control:not([multiple]):not([size]) option:focus-visible {
        outline: 0;
        background: #fff1f2;
        color: var(--color-primary);
    }
    select.form-control:not([multiple]):not([size]) option:checked {
        font-weight: 600;
    }
    select.form-control:not([multiple]):not([size]) option::checkmark {
        color: var(--color-primary);
    }
    /* La opcion de "-- Selecciona..." (value vacio) en gris */
    select.form-control:not([multiple]):not([size]) option[value=""] {
        color: #8a96a3;
    }
    select.form-control:not([multiple]):not([size]) option:disabled {
        color: #b8c0c8;
        cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
        select.form-control:not([multiple]):not([size])::picker(select) {
            transition: none;
        }
    }
}

/* Cantidad (producto y carrito): los botones + y - van dentro del campo */
.product-quantity #quantity_wanted,
.bootstrap-touchspin input.form-control {
    border-radius: var(--ek-radio);
}
.product-quantity .input-group-btn-vertical .btn.bootstrap-touchspin-up {
    border-radius: 0 var(--ek-radio) var(--ek-radio) 0;
}
.product-quantity .input-group-btn-vertical .btn.bootstrap-touchspin-down {
    border-radius: var(--ek-radio) 0 0 var(--ek-radio);
}

/* Casillas de los filtros */
.custom-checkbox input[type="checkbox"] + span {
    border-radius: 5px;
}

/* ------------------------------------------------------------------------
 * Tarjetas de producto (listados, portada, relacionados)
 * --------------------------------------------------------------------- */

.products .item-inner {
    padding: 10px 10px 18px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
    background: #fff;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.products .item-inner:hover {
    border-color: transparent;
    box-shadow: var(--ek-sombra-alta);
}
.products .item-inner .element-top,
.products .item-inner .wrapper-imgs {
    border-radius: calc(var(--ek-radio-tarjeta) - 6px);
    overflow: hidden;
}
.products .item-inner .element-top img {
    transition: transform 0.4s ease;
}
.products .item-inner:hover .element-top img {
    transform: scale(1.04);
}

/* "Ver producto" / "Agregar" */
.products .item-inner .btn-action.add-to-cart {
    border-radius: 999px;
}
/* El personalizador del tema los deja en un 70 % fijo (90 % en pantallas
   pequenas) y sin saltos de linea: "Agregar" cabe, pero "Ver Producto" con
   su icono se cortaba. Miden lo que su texto, al menos ese 70 %. */
.product-type-7 .item-inner .btn-action.add-to-cart {
    width: fit-content;
    min-width: 70%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 14px;
    overflow: visible;
}

/* Cantidad de la tarjeta (con sesion iniciada): una sola pieza redondeada */
.products .input-group-add-cart.bootstrap-touchspin {
    width: 96px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.products .input-group-add-cart.bootstrap-touchspin input.form-control {
    height: 34px;
    border: 0;
    border-radius: 0;
    font-weight: 600;
}
.products .input-group-add-cart.bootstrap-touchspin.input-group .input-group-btn button {
    width: 30px;
    border: 0;
    transition: background-color 0.15s;
}
.products .input-group-add-cart.bootstrap-touchspin.input-group .input-group-btn button:hover {
    background-color: #f1f3f5;
}
.products .input-group-add-cart.bootstrap-touchspin.input-group .input-group-btn button:hover::before,
.products .input-group-add-cart.bootstrap-touchspin.input-group .input-group-btn button:hover::after {
    border-color: var(--color-primary);
}

/* Vista rapida, la cajita que aparece sobre la foto */
.products .item-inner .buttons-action {
    border-radius: var(--ek-radio);
    overflow: hidden;
    box-shadow: var(--ek-sombra);
}

/* Nombre y categoria recortados con "..." (el completo sale al pasar el raton,
   en el title del enlace). El bloque de texto tenia alto fijo (140px en
   front1.0.8.css, 80px el nombre): un nombre de cuatro lineas y una categoria
   de tres empujaban el precio debajo de la cantidad. Ahora siempre ocupan lo
   mismo (2 lineas el nombre, 1 la categoria) y el bloque mide lo que su
   contenido, asi las tarjetas de una fila siguen alineadas. */
.product-type-7 .item-inner .product_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    height: calc(2 * 1.3em) !important;
    min-height: 0;
    max-height: none;
    line-height: 1.3;
    margin-bottom: 4px;
}
.product-type-7 .item-inner .ax-product-cats {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 0;
    max-height: none;
    margin-bottom: 6px;
}
.product-type-7 .item-inner .ax-product-cats a {
    display: inline;
}
.product-type-7 .js-product-miniature .product-description {
    height: auto !important;
    min-height: 0;
    max-height: none;
    overflow: visible;
}
.product-type-7 .item-inner .input-group-add-cart.bootstrap-touchspin {
    margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .products .item-inner .element-top img,
    .products .item-inner:hover .element-top img {
        transition: none;
        transform: none;
    }
}

/* Stock disponible (eureka_functions, etiquetaDeStock): una etiqueta sobre la
   imagen de la tarjeta, abajo a la izquierda (arriba van las de nuevo y
   oferta), para no descuadrar su alto fijo. Verde con stock, ambar con 10 o
   menos, gris sin stock. En la ficha no: alli ya va la del inventario
   (product-prices.tpl, .ek-stock-etiqueta). */
.ek-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #cfe9d9;
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    color: #1f6b3f;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ek-stock::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1f8a4c;
}
.ek-stock--pocas {
    border-color: #f1dca8;
    background: rgb(255 248 230 / 95%);
    color: #8a5a00;
}
.ek-stock--pocas::before {
    background: #d98e04;
}
.ek-stock--agotado {
    border-color: #e3e7ec;
    background: rgb(241 243 245 / 95%);
    color: #6c7a86;
}
.ek-stock--agotado::before {
    background: #b8c0c8;
}
.products .item-inner .element-top .ek-stock {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1;
    pointer-events: none;
}
/* Selector y Agregar / Ver producto de la tarjeta: los alterna stock-en-vivo.js
   con hidden, y las reglas del tema (display: block/table) lo pisarian */
.products .item-inner .ek-comprar[hidden],
.products .item-inner .ek-ver-producto[hidden] {
    display: none !important;
}
/* Agotado: la foto un poco apagada */
.products .item-inner:has(.ek-stock--agotado) .wrapper-imgs img {
    opacity: 0.55;
    filter: grayscale(0.4);
}

/* Etiquetas (nuevo, oferta...) */
.label-flags li,
.product-flags li {
    border-radius: 999px;
}

/* ------------------------------------------------------------------------
 * Ficha de producto
 * --------------------------------------------------------------------- */

.product-images-cover .wrapper-imgs,
.product-images-cover img {
    border-radius: var(--ek-radio-l);
}
.product-images-thumb .item-image,
.product-images-thumb img {
    border-radius: var(--ek-radio-s);
    overflow: hidden;
}
.gallery-swiper-arrow {
    border-radius: 50%;
}

/*
 * Cantidad y Agregar en una rejilla de anchos fijos (los mismos que usa
 * "Agregar a mi lista", mas abajo). Lo demas que cuelgue de aqui
 * (disponibilidad, peso aproximado...) ocupa la fila entera.
 */
.product-add-to-cart .product-quantity {
    display: grid;
    grid-template-columns: var(--ek-ficha-cantidad) minmax(0, var(--ek-ficha-boton));
    gap: 10px;
    align-items: center;
    justify-content: start;
}
.product-add-to-cart .product-quantity > * {
    grid-column: 1 / -1;
    order: 2;
}
.product-add-to-cart .product-quantity > #product-availability {
    order: 0;
}
.product-add-to-cart .product-quantity > .qty {
    grid-column: 1;
    order: 1;
}
.product-add-to-cart .product-quantity > .add {
    grid-column: 2;
    order: 1;
}
.product-add-to-cart .product-quantity .qty .input-group.bootstrap-touchspin,
.product-quantity #quantity_wanted {
    width: 100%;
}
.product-add-to-cart .product-quantity .qty .input-group.bootstrap-touchspin,
.product-add-to-cart .product-quantity .add .btn {
    margin: 0;
}
.product-add-to-cart .product-quantity .add .btn {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    font-weight: 600;
}
.product-add-to-cart .product-quantity .add .btn + .btn {
    margin-top: 10px;
}
.product-quantity #quantity_wanted {
    height: 48px;
    border-radius: 999px;
    font-weight: 600;
}
.product-quantity .input-group-btn-vertical .btn.bootstrap-touchspin-up {
    border-radius: 0 999px 999px 0;
}
.product-quantity .input-group-btn-vertical .btn.bootstrap-touchspin-down {
    border-radius: 999px 0 0 999px;
}
#product-availability .label {
    color: #6c7a86;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/*
 * "Agregar a mi lista" (modulo shoppinglist) no sale junto a Agregar sino en
 * el bloque de debajo (.product-additional-info), y la personalizacion del
 * tema lo subia con margin-top: -40px, margin-left: 89px y width: 125%. Aqui
 * se coloca con los mismos anchos que la rejilla de arriba: justo debajo de
 * Agregar y igual de ancho.
 */
.product-additional-info .shopping-list {
    display: block;
    width: var(--ek-ficha-boton);
    max-width: calc(100% - var(--ek-ficha-cantidad) - 10px);
    margin: 10px 0 0 calc(var(--ek-ficha-cantidad) + 10px);
}
.product-additional-info .shopping-list .btn-primary {
    width: 100%;
    height: 48px;
    margin: 0;
    border: 1.5px solid var(--color-primary);
    border-radius: 999px;
    background-color: #fff;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: none;
}
.product-additional-info .shopping-list .btn-primary:hover,
.product-additional-info .shopping-list .btn-primary:focus {
    border-color: var(--color-primary);
    background-color: #fff1f2;
    color: var(--color-primary);
    box-shadow: none;
}
.product-additional-info .shopping-list .btn-primary i {
    font-size: 18px;
}
/* La lista de listas: se abre y cierra con un clic (lista-compras.js); el
   efecto de hover del modulo (slideDown/slideUp en linea) queda anulado */
.product-additional-info .shopping-list ul {
    display: none !important;
}
.product-additional-info .shopping-list.ek-abierta ul {
    display: block !important;
    height: auto !important;
}
.product-additional-info .shopping-list ul {
    max-width: none;
    width: 100%;
    margin: 6px 0 0;
    padding: 6px;
    border-radius: var(--ek-radio-m);
    background: #fff;
    box-shadow: var(--ek-sombra-menu);
}
.product-additional-info .shopping-list ul li a {
    padding: 8px 12px;
    border-radius: var(--ek-radio-s);
}
.product-additional-info .shopping-list ul li a:hover {
    background: #f6f7f9;
}
.product-additional-info .shopping-list .ek-lista-nueva {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--ek-borde);
}
.product-additional-info .shopping-list .ek-lista-nueva a {
    color: var(--color-primary);
    font-weight: 600;
}
/* El resultado de agregar, debajo del boton (antes era un alert): una
   pastilla verde con un check que se dibuja y "Ver lista" */
.product-additional-info .ek-lista-aviso {
    margin: 10px 0 0;
    font-size: 1.3rem;
    color: #5f6b76;
}
.product-additional-info .ek-lista-aviso--bien {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 10px;
    border: 1px solid #bfe5cd;
    border-radius: 14px;
    background: #ecf8f1;
    color: #1f6b3f;
    font-weight: 600;
}
.product-additional-info .ek-lista-aviso--bien span {
    flex: 1 1 auto;
}
.ek-lista-aviso__check {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
}
.ek-lista-aviso__check circle {
    fill: #1f8a4c;
}
.ek-lista-aviso__check path {
    fill: none;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16;
    stroke-dashoffset: 0;
}
.product-additional-info .ek-lista-aviso__ver {
    flex: 0 0 auto;
    color: #1f6b3f !important;
    font-weight: 700;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.ek-lista-aviso--entra {
    animation: ek-lista-aviso-entra 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
.ek-lista-aviso--entra .ek-lista-aviso__check {
    animation: ek-lista-check-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.1s both;
}
.ek-lista-aviso--entra .ek-lista-aviso__check path {
    animation: ek-lista-check-traza 0.35s ease-out 0.35s both;
}
@keyframes ek-lista-aviso-entra {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
}
@keyframes ek-lista-check-pop {
    from { transform: scale(0) rotate(-45deg); }
}
@keyframes ek-lista-check-traza {
    from { stroke-dashoffset: 16; }
}

/* La foto que vuela hasta "Mi lista" de la cabecera, y su saltito */
.ek-lista-vuela {
    position: fixed;
    z-index: 2147482000;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgb(16 24 32 / 25%);
    object-fit: contain;
    pointer-events: none;
}
#header .ek-lista-salta {
    position: relative;
    animation: ek-lista-salta 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.ek-lista-mas {
    position: absolute;
    top: -6px;
    right: -10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #1f8a4c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    animation: ek-lista-mas 1s ease-out both;
    pointer-events: none;
}
@keyframes ek-lista-salta {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.25) rotate(-8deg); }
    65%  { transform: scale(0.95) rotate(4deg); }
    100% { transform: scale(1); }
}
@keyframes ek-lista-mas {
    0%   { opacity: 0; transform: translateY(6px) scale(0.6); }
    25%  { opacity: 1; transform: translateY(0) scale(1.1); }
    75%  { opacity: 1; transform: translateY(-4px) scale(1); }
    100% { opacity: 0; transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
    .ek-lista-aviso--entra,
    .ek-lista-aviso--entra .ek-lista-aviso__check,
    .ek-lista-aviso--entra .ek-lista-aviso__check path,
    #header .ek-lista-salta,
    .ek-lista-mas {
        animation: none;
    }
}

/*
 * Detalles del producto (el desplegable bajo la ficha): una tarjeta con su
 * titulo; marca y referencia como etiquetas, y la ficha tecnica en fichas
 * pequenas (nombre en gris arriba, valor debajo) en vez de una tabla.
 */
.wc-tabs-wrapper.tab-type-accordion {
    margin-top: 30px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
    background: #fff;
    box-shadow: var(--ek-sombra);
    overflow: hidden;
}
.wc-tabs-wrapper.tab-type-accordion .accordion-title {
    padding: 18px 56px 18px 22px;
    border-top: 1px solid var(--ek-borde);
    color: var(--color-title);
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: none;
    transition: background-color 0.15s;
}
.wc-tabs-wrapper.tab-type-accordion .accordion-title:first-of-type {
    border-top: 0;
}
.wc-tabs-wrapper.tab-type-accordion .accordion-title:hover {
    background: #f8f9fb;
}
.wc-tabs-wrapper.tab-type-accordion .accordion-title.active_accordion {
    color: var(--color-title);
}
.wc-tabs-wrapper.tab-type-accordion .accordion-title::after {
    right: 22px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    border-radius: 50%;
    background: #f2f4f7;
    line-height: 28px;
}
.wc-tabs-wrapper.tab-type-accordion .accordion-title.active_accordion::after {
    background: #fff1f2;
    color: var(--color-primary);
}
.wc-tabs-wrapper.tab-type-accordion .wc-tab {
    padding: 4px 22px 22px;
}

#product-details .product-info-catalog {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 8px 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f4f6f8;
    font-size: 1.3rem;
}
#product-details .product-info-catalog label {
    margin: 0;
    color: #6c7a86;
}
#product-details .product-info-catalog a,
#product-details .product-info-catalog span {
    color: var(--color-title);
    font-weight: 600;
    text-decoration: none;
}
#product-details .product-info-catalog a:hover {
    color: var(--color-primary);
}

.product-features > .h6 {
    margin: 18px 0 12px;
    color: var(--color-title);
    font-size: 1.5rem;
    font-weight: 600;
}
table.axps_shop_attributes,
table.axps_shop_attributes tbody,
table.axps_shop_attributes tr,
table.axps_shop_attributes th,
table.axps_shop_attributes td {
    display: block;
}
table.axps_shop_attributes {
    border: 0;
}
table.axps_shop_attributes tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
table.axps_shop_attributes tr,
table.axps_shop_attributes tr:nth-of-type(2n+1) {
    padding: 12px 14px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    background: #f8f9fb;
}
table.axps_shop_attributes tbody th {
    width: auto;
    padding: 0 0 4px;
    border: 0;
    color: #8a96a3;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
table.axps_shop_attributes td {
    padding: 0;
    border: 0;
    color: var(--color-title);
    font-size: 1.4rem;
    font-weight: 600;
    word-break: break-word;
}

/* Menos hueco antes de "Te pueden interesar": sumaba el margen de 40px de la
   columna y los 60px que el editor le pone encima a la seccion */
body#product #main-content,
body#product #right-content {
    margin-bottom: 20px;
}
#product-footer .elementor-section-wrap > .elementor-top-section:first-child {
    margin-top: 24px;
}

/* Productos que se venden por peso (eureka_functions, hookDisplayProductRangoPeso):
   bajo el titulo, el peso promedio de cada unidad y, debajo, el peso
   aproximado del pedido, que se actualiza al cambiar la cantidad */
.ek-peso {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 12px;
}
.ek-peso-promedio,
.ek-peso-aprox {
    display: inline-block;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f6f8;
    color: #4a5763;
    font-size: 1.3rem;
}
.ek-peso-promedio strong,
.ek-peso-aprox strong {
    color: var(--color-title);
}
.ek-peso-aprox {
    background: #eef6f1;
}
/* La nota de "factura segun el peso" iba pegada dentro de la etiqueta del SKU:
   con ella, el SKU deja de ser pastilla y la nota baja a su propia linea */
.summary-container .product_meta .sku_wrapper:has(.ek-peso-nota) {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    border-radius: 0;
    background: none;
}
.ek-peso-nota {
    flex-basis: 100%;
    margin: 10px 0 0;
    padding: 10px 14px;
    border: 1px solid #f1e2b8;
    border-radius: var(--ek-radio);
    background: #fffaf0;
    color: #6b5410;
    font-size: 1.25rem;
    line-height: 1.5;
}

/* El resto de la ficha: precio, foto y referencia */
.summary-container .product_title {
    letter-spacing: -0.3px;
}
.summary-container .product-prices .price,
.summary-container .current-price .price {
    font-size: 2.8rem;
    font-weight: 700;
}
.product-images-cover {
    padding: 24px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
    background: #fff;
}
.summary-container hr,
.summary-container .product-actions + hr {
    border-color: var(--ek-borde);
}
.summary-container .product_meta .sku_wrapper {
    display: inline-flex;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f6f8;
    font-size: 1.25rem;
}

@media (max-width: 575.98px) {
    .product-add-to-cart .product-quantity {
        grid-template-columns: var(--ek-ficha-cantidad) minmax(0, 1fr);
    }
    .product-additional-info .shopping-list {
        width: auto;
    }
}

/* ------------------------------------------------------------------------
 * Cajas: formularios de acceso, tarjetas, carrito y checkout
 * --------------------------------------------------------------------- */

/* Iniciar sesion, recuperar contrasena */
.page-authentication #content,
.page-password #content {
    border-radius: var(--ek-radio-l);
    border-color: var(--ek-borde);
    box-shadow: var(--ek-sombra);
    overflow: hidden;
}

/*
 * Pagina de iniciar sesion: la misma tarjeta que el panel lateral de Mi
 * cuenta. Avatar arriba (dibujado aqui, la plantilla no lo tiene), campos
 * de 48px con fondo suave, boton en pastilla y "Crear cuenta" como boton de
 * borde rojo bajo una linea. Solo cuando #content lleva el formulario de
 * entrar: a iniciar-sesion?create_account=1 se llega tambien al registro.
 */
.page-authentication #content:has(> .login-form),
.page-password #content {
    max-width: 460px;
    padding: 32px 32px 26px;
    border-radius: var(--ek-radio-tarjeta);
}
/* Arriba, el carrito del logo (antes la silueta de una persona; pedido del
   22-oct-2026) junto a "Iniciar sesion", en una sola linea, con una pequena
   entrada. El titulo grande de la pagina se esconde (queda para lectores de
   pantalla): con el, en una pantalla normal habia que bajar para llegar al
   boton. Ahora el formulario entero se ve al cargar (~630 px de alto). */
.page-authentication #content > .login-form::before {
    content: "Iniciar sesión";
    display: block;
    width: max-content;
    max-width: 100%;
    height: 44px;
    margin: 0 auto 18px;
    padding-left: 56px;
    background: url("../img/eureka-carrito.png") left center / 44px 44px no-repeat;
    font-size: 22px;
    font-weight: 800;
    line-height: 44px;
    color: #16181d;
    animation: ek-login-carrito 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
body.page-authentication:has(#login-form) .page-title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: 0 !important;
    padding: 0 !important;
}
body.page-authentication:has(#login-form) #wrapper {
    padding-top: 22px !important;
    padding-bottom: 24px !important;
}
body.page-authentication:has(#login-form) #content {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
}
body.page-authentication:has(#login-form) #login-form .form-group.row {
    margin-bottom: 12px !important;
}
body.page-authentication:has(#login-form) #login-form .form-control {
    height: 44px !important;
}
body.page-authentication:has(#login-form) #login-form .form-footer {
    margin-top: 2px !important;
    margin-bottom: 6px !important;
}
body.page-authentication:has(#login-form) .forgot-password {
    margin-top: 10px !important;
}
body.page-authentication:has(#login-form) .no-account {
    margin-top: 14px !important;
    padding-top: 14px !important;
}
@keyframes ek-login-carrito {
    from { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .page-authentication #content > .login-form::before {
        animation: none;
    }
}
.page-authentication #login-form .form-group.row {
    display: block;
    margin: 0 0 16px;
}
.page-authentication #login-form .form-group.row > [class*="col-md"] {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}
.page-authentication #login-form .form-control-comment:empty {
    display: none;
}
.page-authentication #login-form .form-control-label {
    margin-bottom: 6px;
    color: var(--color-title);
    font-size: 1.3rem;
    font-weight: 600;
    text-align: left;
}
.page-authentication #login-form .form-control {
    height: 48px;
    padding: 0 16px;
    border: 1px solid #e3e7ec;
    border-radius: var(--ek-radio-m);
    background: #f8f9fb;
}
.page-authentication #login-form .form-control:focus {
    border-color: var(--color-primary);
    background: #fff;
}
.page-authentication #login-form .input-group .form-control {
    padding-right: 52px;
}
.page-authentication #login-form .form-footer {
    margin-top: 6px;
}
.page-authentication #login-form #submit-login {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    font-weight: 600;
}
.page-authentication #login-form .forgot-password {
    margin: 16px 0 0;
}
.page-authentication #login-form .forgot-password a {
    font-size: 1.3rem;
    transition: color 0.15s;
}
.page-authentication #login-form .forgot-password a:hover {
    color: var(--color-primary);
}
.page-authentication #content > .no-account {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ek-borde);
    background: none;
    color: #6c7a86;
    font-size: 1.3rem;
    text-transform: none;
}
.page-authentication #content > .no-account a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 1.5px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.15s;
}
.page-authentication #content > .no-account a:hover {
    background: #fff1f2;
}
.page-authentication #content > .text-center:empty {
    display: none;
}
@media (max-width: 575.98px) {
    .page-authentication #content:has(> .login-form),
    .page-password #content {
        padding: 24px 18px 20px;
    }
}

.card {
    border-color: var(--ek-borde);
    border-radius: var(--ek-radio-l);
}
.card-block {
    border-radius: inherit;
}

/* Carrito */
.ax-cart-summary {
    border: 1px solid var(--ek-borde);
    box-shadow: var(--ek-sombra);
}
.cart-grid-body .card,
.cart-grid-right .card,
.ax-cart-summary,
.block-promo {
    border-radius: var(--ek-radio-l);
}
.shop_table_responsive .product-thumbnail img,
.cart-item .product-image img,
.product-line-grid-left img {
    border-radius: var(--ek-radio-s);
}

/* ------------------------------------------------------------------------
 * Checkout
 *
 * Cada paso es una tarjeta: el titulo con su numero en un circulo (verde con
 * el visto cuando esta hecho, rojo el actual) y el contenido debajo. Las
 * direcciones, los transportistas y las formas de pago son tarjetas que se
 * eligen con un clic y se marcan en rojo al elegirlas.
 * --------------------------------------------------------------------- */

body#checkout section.checkout-step {
    margin-bottom: 16px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-l);
    background: #fff;
    box-shadow: var(--ek-sombra);
    transition: box-shadow 0.25s, border-color 0.25s;
}
body#checkout section.checkout-step.-current {
    border-color: #f1d4d6;
    box-shadow: var(--ek-sombra-alta);
}
body#checkout section.checkout-step.-unreachable {
    opacity: 0.6;
    box-shadow: none;
}

body#checkout section.checkout-step .step-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 18px 22px;
    border: 0;
    font-size: 1.7rem;
    font-weight: 600;
}
body#checkout section.checkout-step.-unreachable .step-title {
    opacity: 1;
}
body#checkout section.checkout-step .step-number,
body#checkout section.checkout-step .step-title i.done {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: #eef0f3;
    color: #6c7a86;
    font-size: 1.4rem;
    line-height: 32px;
    text-align: center;
}
body#checkout section.checkout-step.-current .step-number {
    background: var(--color-primary);
    color: #fff;
}
body#checkout section.checkout-step .step-title i.done {
    background: #1f8a4c;
    color: #fff;
    font-size: 1.6rem;
}
/* "Editar" en los pasos ya hechos: una pastilla a la derecha */
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit {
    float: none;
    margin: 0 0 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f4f6f8;
    color: #4a5763;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: none;
    transition: background-color 0.15s, color 0.15s;
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit:hover {
    background: #fff1f2;
    color: var(--color-primary);
}
body#checkout section.checkout-step.-reachable.-complete h1 .step-edit i {
    margin-right: 4px;
    font-size: 16px;
    vertical-align: -2px;
}

body#checkout section.checkout-step .content {
    padding: 22px;
    border: 0;
    border-top: 1px solid var(--ek-borde);
    border-radius: 0 0 var(--ek-radio-l) var(--ek-radio-l);
}

/* Botones Continuar y Realizar pedido: en pastilla y en negrita, como los
   del resumen (Ver carro y editarlo) y del carrito (Finalizar compra) */
body#checkout section.checkout-step .continue {
    min-width: 220px;
    height: 48px;
    border-radius: 999px;
    font-weight: 600;
}
body#checkout #payment-confirmation .btn {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Radios de todo el checkout (y de la tienda): mas grandes y en rojo */
.custom-radio input + span {
    width: 18px;
    height: 18px;
    border: 1.5px solid #c9d0d7;
    transition: border-color 0.15s, background-color 0.15s;
}
.custom-radio input:checked + span {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

/* --- Direcciones --- */

body#checkout .ek-direccion-unica {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--ek-radio);
    background: #f6f8fb;
    color: #4a5763;
}
body#checkout .address-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
body#checkout .address-selector > :not(.address-item) {
    grid-column: 1 / -1;
    margin: 0;
}
body#checkout section.checkout-step .address-item {
    margin: 0;
    padding: 16px 18px;
    border: 1.5px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
body#checkout section.checkout-step .address-item:hover {
    border-color: #cfd5dc;
}
body#checkout section.checkout-step .address-item.selected,
body#checkout section.checkout-step .address-item:has(input:checked) {
    border-color: var(--color-primary);
    background: #fff8f8;
    box-shadow: 0 0 0 3px rgb(231 43 55 / 8%);
}
body#checkout section.checkout-step .address-item .radio-block {
    display: block;
    margin: 0;
    cursor: pointer;
}
body#checkout section.checkout-step .address-alias {
    font-size: 1.6rem;
    font-weight: 600;
}
body#checkout section.checkout-step .address {
    margin-top: 8px;
    color: #4a5763;
    font-size: 1.35rem;
    line-height: 1.65;
}
body#checkout section.checkout-step .address-item hr {
    margin: 12px 0 10px;
    border-color: var(--ek-borde);
}
body#checkout section.checkout-step .address-item .address-footer:empty,
body#checkout section.checkout-step .address-item hr:has(+ .address-footer:empty) {
    display: none;
}

/* "Anadir nueva direccion" */
body#checkout .add-address a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1.5px dashed #cfd5dc;
    border-radius: var(--ek-radio);
    color: #4a5763;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s;
}
body#checkout .add-address a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --- Envio: transportista, fecha de entrega y comentarios ---
 *
 * El transportista elegido y su fecha de entrega (eureka_shipping, que va en
 * un bloque aparte justo debajo) se ven como una sola tarjeta con borde rojo:
 * arriba nombre, plazo y precio; abajo la fecha y el boton de confirmarla.
 */

body#checkout section.checkout-step .delivery-option {
    margin: 0 0 12px;
    padding: 16px 18px;
    border: 1.5px solid var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
    background: #fff;
    transition: border-color 0.15s, background-color 0.15s;
}
body#checkout section.checkout-step .delivery-option:hover {
    border-color: #cfd5dc;
}
body#checkout section.checkout-step .delivery-option:has(input:checked) {
    border-color: var(--color-primary);
    background: #fff8f8;
}
body#checkout section.checkout-step .delivery-option:has(input:checked) + .carrier-extra-content:not([style*="none"]) {
    margin-top: -12px;
}
body#checkout section.checkout-step .delivery-option:has(input:checked):has(+ .carrier-extra-content:not([style*="none"])) {
    border-bottom-color: #f3d3d6;
    border-radius: var(--ek-radio-tarjeta) var(--ek-radio-tarjeta) 0 0;
}
body#checkout section.checkout-step .delivery-option label {
    margin: 0;
    padding: 0;
    cursor: pointer;
}
body#checkout section.checkout-step .carrier-name {
    color: var(--color-title);
    font-size: 1.5rem;
    font-weight: 600;
}
body#checkout section.checkout-step .carrier-delay {
    color: #6c7a86;
    font-size: 1.3rem;
}
body#checkout section.checkout-step .carrier-price {
    display: block;
    color: var(--color-primary);
    font-weight: 700;
    text-align: right;
}

/* La fecha de entrega */
body#checkout .carrier-extra-content {
    margin: 0 0 12px;
    padding: 18px;
    border: 1.5px solid var(--color-primary);
    border-top: 0;
    border-radius: 0 0 var(--ek-radio-tarjeta) var(--ek-radio-tarjeta);
    background: #fff;
}
body#checkout #time-delivery {
    width: 100%;
    max-width: none;
    padding: 0;
}
body#checkout #time-delivery #conten-horarys {
    margin: 0 !important;
}
body#checkout #time-delivery .col-sm-12 {
    padding: 0;
}
body#checkout #time-delivery .input-group {
    display: block;
    width: 100%;
}
body#checkout #time-delivery label {
    display: block;
    margin-bottom: 6px;
    color: #6c7a86;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
/* El modulo pone alto y radio en linea en el select, el boton y el aviso */
body#checkout #time-delivery select.form-control {
    width: 100%;
    height: 48px !important;
    padding: 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: var(--ek-radio) !important;
    font-size: 1.4rem;
    cursor: pointer;
}
body#checkout #time-delivery select.form-control:focus {
    border-color: var(--color-primary);
}
body#checkout #time-delivery #confirmarFecha {
    height: 46px;
    padding: 0 20px !important;
    border-radius: 999px;
    font-weight: 600;
}
body#checkout #time-delivery #confirmarFecha:disabled {
    border-color: #e9ecf0;
    background: #e9ecf0;
    color: #8a96a3;
    box-shadow: none;
    opacity: 1;
}
/* Ya confirmada: front.1.7.js le pone background-color en linea al guardarla
   (y se lo quita si se cambia de fecha) */
body#checkout #time-delivery #confirmarFecha:disabled[style*="background-color"] {
    border-color: #1f8a4c !important;
    background-color: #1f8a4c !important;
    color: #fff;
    cursor: default;
}
body#checkout #time-delivery #confirmarFecha:disabled[style*="background-color"]::before {
    content: "\2713";
    margin-right: 8px;
    font-weight: 700;
}
/* La hora no se elige (va oculta con visibility), pero seguia ocupando sitio */
body#checkout #time-delivery [style*="visibility: hidden"] {
    height: 0;
    overflow: hidden;
}
body#checkout #time-delivery .alert {
    margin: 0 !important;
    border-radius: var(--ek-radio) !important;
}
/* Los mensajes de estado que pinta el JS del modulo (fecha confirmada...) */
body#checkout #eureka-status .eureka-status {
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: var(--ek-radio);
    font-size: 1.3rem;
}

/* La raya roja de 2px entre el transportista y los comentarios */
body#checkout .delivery-options-list .form-fields > div[style*="e72b37"],
body#checkout .delivery-options-list .form-fields > div[style*="e72b37"] + br {
    display: none;
}
body#checkout #delivery {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ek-borde);
}
body#checkout #delivery h5 {
    margin-bottom: 8px;
    font-size: 1.5rem;
    font-weight: 600;
}
body#checkout #delivery textarea {
    min-height: 100px;
    border: 1px solid #dfe3e8;
    border-radius: var(--ek-radio-m);
}

/* --- Pago --- */

body#checkout section.checkout-step .payment-option {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    transition: border-color 0.15s, background-color 0.15s;
}
body#checkout section.checkout-step .payment-option:has(input:checked) {
    border-color: var(--color-primary);
    background: #fff8f8;
}
body#checkout section.checkout-step .payment-option label {
    flex: 1;
    margin: 0;
    font-weight: 600;
    cursor: pointer;
}
body#checkout .additional-information {
    margin: -2px 0 12px;
    padding: 14px 16px;
    border-radius: var(--ek-radio-m);
    background: #f8f9fb;
}
body#checkout #conditions-to-approve ul {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

/* ------------------------------------------------------------------------
 * Confirmacion del pedido (themes/akira/templates/checkout/order-confirmation.tpl)
 *
 * Aviso con la referencia y los botones; debajo, la entrega y el pago lado a
 * lado, y luego los productos con el resumen a la derecha (en movil, todo
 * uno debajo de otro y el resumen antes que los productos). El recibo de PagoPlux (.ek-plux-recibo) tiene sus estilos en el
 * modulo pagoplux.
 * --------------------------------------------------------------------- */
.ek-confirmacion {
    --ek-conf-verde: #1f9d55;
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
    color: #1f2a37;
}
.ek-confirmacion__aviso,
.ek-confirmacion__caja {
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-l);
    background: #fff;
    box-shadow: var(--ek-sombra);
}
.ek-confirmacion__aviso {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    border-color: #cdebd6;
    background: linear-gradient(120deg, #f2fbf5 0%, #fff 60%);
}
.ek-confirmacion__aviso--espera {
    --ek-conf-verde: #c27c0e;
    border-color: #f3dfb8;
    background: linear-gradient(120deg, #fff8ec 0%, #fff 60%);
}
.ek-confirmacion__sello {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ek-conf-verde);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--ek-conf-verde) 14%, transparent);
}
.ek-confirmacion__sello::before {
    content: "";
    width: 30px;
    height: 30px;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ek-confirmacion__aviso--espera .ek-confirmacion__sello::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}
.ek-confirmacion .ek-confirmacion__titulo {
    margin: 0 0 6px;
    color: var(--color-title);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}
.ek-confirmacion__saludo p {
    margin: 0;
    color: #5b6773;
    font-size: 1.4rem;
    line-height: 1.5;
}
.ek-confirmacion .ek-confirmacion__referencia {
    margin-bottom: 2px;
    font-size: 1.5rem;
}
.ek-confirmacion__referencia strong {
    color: var(--color-title);
    letter-spacing: .04em;
}
.ek-confirmacion__correo strong {
    color: #1f2a37;
    font-weight: 600;
    word-break: break-all;
}
.ek-confirmacion__correo a {
    margin-left: 4px;
    color: var(--color-primary);
    font-weight: 600;
}
.ek-confirmacion__acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ek-confirmacion__acciones .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: none;
}
.ek-confirmacion__acciones .ek-confirmacion__seguir {
    border: 1px solid #d6dbe1;
    background: #fff;
    color: #1f2a37;
}
.ek-confirmacion__acciones .ek-confirmacion__seguir:hover {
    border-color: #1f2a37;
    background: #fff;
    color: #1f2a37;
}
/* Lo que dejan otros modulos en displayOrderConfirmation (casi siempre solo
   scripts de analitica): sin caja propia, para que no sume un hueco */
.ek-confirmacion__modulos {
    display: contents;
}

.ek-confirmacion__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 20px;
}
.ek-confirmacion__caja {
    padding: 22px 24px;
}
/* El tema da a #order-items y #order-details anchos y margenes de columna */
.ek-confirmacion #order-items,
.ek-confirmacion #order-details {
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
.ek-confirmacion .ek-confirmacion__subtitulo {
    margin: 0 0 14px;
    color: var(--color-title);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: none;
}
.ek-confirmacion__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ek-borde);
}
.ek-confirmacion__cabecera .ek-confirmacion__subtitulo {
    margin: 0;
}
.ek-confirmacion__cuenta {
    padding: 3px 10px;
    border-radius: 999px;
    background: #f1f3f6;
    color: #5b6773;
    font-size: 1.25rem;
    font-weight: 600;
}

.ek-confirmacion__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ek-confirmacion__linea {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ek-borde);
}
.ek-confirmacion__linea:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.ek-confirmacion__foto {
    display: grid;
    place-items: center;
    overflow: hidden;
    box-sizing: border-box;
    width: 76px;
    height: 76px;
    padding: 2px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio);
    background: #fff;
}
.ek-confirmacion__foto img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}
.ek-confirmacion__producto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ek-confirmacion__nombre {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #1f2a37;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.35;
}
.ek-confirmacion__cantidad {
    color: #6c7a86;
    font-size: 1.3rem;
}
.ek-confirmacion__importe {
    color: var(--color-title);
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.ek-confirmacion__lado {
    display: grid;
    gap: 20px;
}
@media (min-width: 992px) {
    .ek-confirmacion__lado {
        position: sticky;
        top: calc(var(--ek-bajo-cabecera, 0px) + 16px);
    }
}
.ek-confirmacion__totales {
    margin: 0;
}
.ek-confirmacion__totales > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 1.4rem;
}
.ek-confirmacion__totales dt {
    color: #5b6773;
    font-weight: 400;
}
.ek-confirmacion__totales dd {
    margin: 0;
    color: #1f2a37;
    font-weight: 600;
    text-align: right;
}
.ek-confirmacion__totales .ek-confirmacion__total {
    align-items: baseline;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed #d6dbe1;
}
.ek-confirmacion__total dt {
    color: var(--color-title);
    font-size: 1.5rem;
    font-weight: 700;
}
.ek-confirmacion__total dd {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 800;
}

.ek-confirmacion__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    gap: 20px;
}
.ek-confirmacion .ek-confirmacion__dato {
    position: relative;
    padding-left: 60px;
}
.ek-confirmacion__dato::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 24px;
    width: 22px;
    height: 22px;
    background-color: var(--color-primary);
    -webkit-mask: var(--ek-conf-icono) center / contain no-repeat;
    mask: var(--ek-conf-icono) center / contain no-repeat;
}
.ek-confirmacion__dato--entrega {
    --ek-conf-icono: 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='M1 4h14v12H1z'/%3E%3Cpath d='M15 9h4l3 3v4h-7'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='18.5' cy='18.5' r='2'/%3E%3C/svg%3E");
}
.ek-confirmacion__dato--pago {
    --ek-conf-icono: 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%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E");
}
.ek-confirmacion__dato .ek-confirmacion__subtitulo {
    margin-bottom: 8px;
    line-height: 22px;
}
.ek-confirmacion__dato p {
    margin: 0 0 4px;
    font-size: 1.4rem;
    line-height: 1.45;
}
.ek-confirmacion .ek-confirmacion__fecha {
    color: #1f2a37;
    font-size: 1.5rem;
    font-weight: 700;
}
.ek-confirmacion__fecha::first-letter {
    text-transform: uppercase;
}
.ek-confirmacion__nota {
    color: #5b6773;
}
.ek-confirmacion__direccion {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: var(--ek-radio);
    background: #f6f7f9;
    color: #5b6773;
    font-size: 1.3rem;
    font-style: normal;
    line-height: 1.5;
    word-break: break-word;
}
.ek-confirmacion .ek-confirmacion__metodo {
    color: #1f2a37;
    font-weight: 600;
}
.ek-confirmacion .ek-confirmacion__estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ek-estado, #6c7a86) 12%, #fff);
    color: color-mix(in srgb, var(--ek-estado, #6c7a86) 70%, #1f2a37);
    font-size: 1.25rem;
    font-weight: 600;
}
.ek-confirmacion__estado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ek-estado, #6c7a86);
}

@media (max-width: 991.98px) {
    .ek-confirmacion__cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }
    /* En movil el total antes que la lista de productos */
    .ek-confirmacion__lado {
        order: -1;
    }
}
@media (max-width: 767.98px) {
    .ek-confirmacion {
        gap: 14px;
    }
    .ek-confirmacion__aviso {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
        padding: 22px 18px;
        text-align: center;
    }
    .ek-confirmacion__sello {
        width: 52px;
        height: 52px;
    }
    .ek-confirmacion .ek-confirmacion__titulo {
        font-size: 1.9rem;
    }
    .ek-confirmacion__acciones {
        width: 100%;
    }
    .ek-confirmacion__acciones .btn {
        width: 100%;
    }
    .ek-confirmacion__cuerpo,
    .ek-confirmacion__lado,
    .ek-confirmacion__datos {
        gap: 14px;
    }
    .ek-confirmacion__caja {
        padding: 18px 16px;
    }
    .ek-confirmacion .ek-confirmacion__dato {
        padding-left: 50px;
    }
    .ek-confirmacion__dato::before {
        top: 18px;
        left: 16px;
    }
    .ek-confirmacion__linea {
        grid-template-columns: 60px minmax(0, 1fr) auto;
        gap: 12px;
    }
    .ek-confirmacion__foto {
        width: 60px;
        height: 60px;
    }
}

/* ------------------------------------------------------------------------
 * Categorias sin filtros: los productos usan todo el ancho
 *
 * La columna de la izquierda es la de los filtros. En las categorias que no
 * tienen ninguno llega vacia y dejaba un hueco blanco de 300px.
 * --------------------------------------------------------------------- */

/* :has() no se puede anidar dentro de otro :has(): "sin filtros" se dice
   como "la fila tiene columna izquierda, pero no con algo dentro" */
@media (min-width: 1025px) {
    .row:has(> #left-column):not(:has(> #left-column > #left-content > *)) > #left-column {
        display: none;
    }
    .row:has(> #left-column):not(:has(> #left-column > #left-content > *)) > #content-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .row:has(> #left-column):not(:has(> #left-column > #left-content > *)) #box-product-grid .archive-wrapper-items > .item {
        flex: 0 0 calc(100% / 6);
        max-width: calc(100% / 6);
    }
}

/* ------------------------------------------------------------------------
 * Pagina del carrito
 *
 * Cada producto es una fila-tarjeta blanca con esquinas redondeadas; la
 * cabecera de la tabla, en pequeno y gris. En el movil el tema ya apila las
 * celdas; alli solo se redondea la tarjeta entera.
 * --------------------------------------------------------------------- */

.cart-overview .shop_table_responsive th {
    padding: 0 12px 6px;
    border: 0;
    color: #8a96a3;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}
@media (min-width: 768px) {
    .cart-overview .shop_table_responsive {
        border-collapse: separate;
        border-spacing: 0 12px;
        margin-top: -12px;
    }
    .cart-overview .shop_table_responsive td {
        padding: 16px 12px;
        border-top: 1px solid var(--ek-borde);
        border-bottom: 1px solid var(--ek-borde);
        background: #fff;
        vertical-align: middle;
        transition: box-shadow 0.2s;
    }
    .cart-overview .shop_table_responsive td:first-child {
        padding-left: 18px;
        border-left: 1px solid var(--ek-borde);
        border-radius: var(--ek-radio-tarjeta) 0 0 var(--ek-radio-tarjeta);
    }
    .cart-overview .shop_table_responsive td:last-child {
        padding-right: 22px;
        border-right: 1px solid var(--ek-borde);
        border-radius: 0 var(--ek-radio-tarjeta) var(--ek-radio-tarjeta) 0;
    }
    .cart-overview .shop_table_responsive tr.cart-item:hover td {
        box-shadow: 0 6px 16px -8px rgb(16 24 40 / 12%);
    }
}
@media (max-width: 767.98px) {
    .cart-overview .shop_table_responsive tr {
        padding: 16px;
        border: 1px solid var(--ek-borde);
        border-radius: var(--ek-radio-tarjeta);
    }
    .cart-overview .shop_table_responsive tr:last-child {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--ek-borde);
    }
}

/* Quitar: circulo gris que se pone rojo */
.cart-overview .product-remove .remove-from-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f4f6f8;
    color: #6c7a86;
    transition: background-color 0.15s, color 0.15s;
}
.cart-overview .product-remove .remove-from-cart:hover,
.cart-overview .product-remove .remove-from-cart:focus-visible {
    background: var(--color-primary);
    color: #fff;
}

.cart-overview td.product-thumbnail .wrapper-imgs {
    border-radius: var(--ek-radio-m);
}
.cart-overview td.product-name .product-title {
    color: var(--color-title);
    font-weight: 600;
    line-height: 1.4;
}
.cart-overview td.product-c-price {
    color: #6c7a86;
}
.cart-overview td.product-IVA .gift {
    display: inline-block;
    min-width: 42px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f4f6f8;
    color: #4a5763;
    font-size: 1.2rem;
    text-align: center;
}
.cart-overview td.product-IVA .gift::after {
    content: "%";
}
.cart-overview td.product-subtotal .product-price {
    color: var(--color-primary);
    font-size: 1.6rem;
}

/* Cantidad: una pastilla con - y + dentro */
.cart-overview .shop_table .bootstrap-touchspin {
    width: 112px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.cart-overview .shop_table .bootstrap-touchspin input.form-control {
    height: 40px;
    padding: 0 32px;
    border: 0;
    border-radius: 0;
    font-weight: 600;
}
.cart-overview .shop_table .bootstrap-touchspin.input-group .input-group-btn .btn {
    width: 34px;
    border: 0;
    transition: background-color 0.15s;
}
.cart-overview .shop_table .bootstrap-touchspin.input-group .input-group-btn .btn:hover {
    border-color: transparent;
    background-color: #f1f3f5;
}
.cart-overview .shop_table .bootstrap-touchspin.input-group .input-group-btn .btn:hover::before,
.cart-overview .shop_table .bootstrap-touchspin.input-group .input-group-btn .btn:hover::after {
    border-color: var(--color-primary);
}

/* Seguir comprando / Vaciar mi carro */
.cart-overview > .btn-secondary {
    height: 44px;
    padding: 0 20px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    background: #fff;
    color: #4a5763;
}
.cart-overview > .btn-secondary:hover {
    border-color: var(--color-primary);
    background: #fff;
    color: var(--color-primary);
}

/* El resumen de la derecha, con el mismo radio que las filas */
.cart-grid-right .ax-cart-summary,
body#checkout .ax-cart-summary {
    border-radius: var(--ek-radio-tarjeta);
}

/* El resumen (Desglose del pedido) se queda en su sitio al bajar: antes iba
   fijo bajo la cabecera (sticky) y se movia con el scroll; se quito el
   27-oct-2026 a pedido ("que se quede en su sitio"). */
.ax-cart-summary .btn-primary {
    height: 48px;
    border-radius: 999px;
    font-weight: 600;
}

/* ------------------------------------------------------------------------
 * Carrito lateral (el que se abre desde el icono del carrito)
 * --------------------------------------------------------------------- */

#canvas-mini-cart .block-shopping-cart {
    padding: 16px;
}
#canvas-mini-cart .cart-item-product.row {
    position: relative;
    margin: 0 0 12px !important;
    padding: 12px 6px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    background: #fff;
    transition: box-shadow 0.2s;
}
#canvas-mini-cart .cart-item-product.row:hover {
    box-shadow: var(--ek-sombra);
}
#canvas-mini-cart .cart-item-product-left .wrapper-imgs {
    border-radius: var(--ek-radio);
}

/* Quitar: un circulo pequeno sobre la esquina de la foto */
#canvas-mini-cart .remove-from-cart {
    top: -6px;
    left: 2px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--ek-borde);
    border-radius: 50%;
    background-color: #fff;
    color: #6c7a86;
    box-shadow: var(--ek-sombra);
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
#canvas-mini-cart .remove-from-cart:hover,
#canvas-mini-cart .remove-from-cart:focus-visible {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}
#canvas-mini-cart .remove-from-cart i {
    font-size: 12px;
}

/* Nombre arriba; precio y cantidad debajo, en la misma fila */
#canvas-mini-cart .cart-item-product-right > .row {
    flex-direction: column;
}
#canvas-mini-cart .cart-item-product-right .product-info,
#canvas-mini-cart .cart-item-product-right .price-qty {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}
#canvas-mini-cart .product-name a {
    font-weight: 600;
}
#canvas-mini-cart .price-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
#canvas-mini-cart .price-qty .price {
    color: var(--color-primary);
    font-size: 15px;
    text-align: left;
}
#canvas-mini-cart .qty {
    display: flex;
    align-items: center;
    gap: 6px;
}
#canvas-mini-cart .price-qty span {
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}
#canvas-mini-cart .price-qty input {
    width: 52px;
    height: 32px;
    border: 1px solid #dfe3e8;
    border-radius: var(--ek-radio-s);
    font-size: 1.3rem;
    font-weight: 600;
}
#canvas-mini-cart .price-qty input:focus {
    border-color: var(--color-primary);
    outline: 0;
}
/* El icono de "actualizar" junto a la cantidad parecia de reciclaje. No
   hace falta: PrestaShop guarda la cantidad al pulsar Intro o al salir del
   campo (js-cart-line-product-quantity). */
#canvas-mini-cart .price-qty .la-sync {
    display: none;
}

/* Ver detalle: el mismo boton que Agregar a mi lista en la ficha */
#canvas-mini-cart .card-block-btn .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border: 1.5px solid var(--color-primary);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.15s, border-color 0.15s;
}
#canvas-mini-cart .card-block-btn .btn-primary::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico-carrito) center / contain no-repeat;
    mask: var(--ek-ico-carrito) center / contain no-repeat;
}
#canvas-mini-cart .card-block-btn .btn-primary:hover,
#canvas-mini-cart .card-block-btn .btn-primary:focus {
    border-color: var(--color-primary);
    background: #fff1f2;
    color: var(--color-primary);
    box-shadow: none;
}

#canvas-mini-cart .card-block-bottom {
    border-top: 1px solid var(--ek-borde);
    background: #fff;
    box-shadow: 0 -8px 24px rgb(16 24 40 / 5%);
}

/* ------------------------------------------------------------------------
 * Panel lateral de Mi cuenta (el que se abre desde el icono de la cuenta)
 *
 * Arriba el cliente (avatar y nombre), luego sus opciones como filas con el
 * icono en un cuadrado suave y una flecha, y al final Cerrar sesion como
 * boton. La plantilla es del tema (_partials/canvas/account.tpl) y no se
 * toca: "display: contents" en el bloque del nombre deja que su segundo
 * parrafo (Cerrar sesion) baje al final con order. Mis facturas y Credito
 * Eureka los anade el modulo (hook displayMyAccountCanVas).
 * --------------------------------------------------------------------- */

#canvas-my-account .canvas-my-account-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 16px;
}
#canvas-my-account .sb-account-info {
    display: contents;
}
#canvas-my-account .sb-account-info p {
    margin: 0;
}

/* El cliente */
#canvas-my-account .sb-account-info p:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 20px 16px;
    border-radius: var(--ek-radio-tarjeta);
    background: #f8f9fb;
    text-align: center;
}
#canvas-my-account .sb-account-info p:first-child a {
    display: block;
    margin: 0;
    color: var(--color-title);
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: none;
}
#canvas-my-account .sb-account-info p:first-child a i.la-user-circle {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 50%;
    background: #fff1f2;
    color: var(--color-primary);
    font-size: 0;
    line-height: 0;
}
#canvas-my-account .sb-account-info p:first-child a i.la-user-circle::before {
    content: "";
    width: 30px;
    height: 30px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico-usuario) center / contain no-repeat;
    mask: var(--ek-ico-usuario) center / contain no-repeat;
}

/* Las opciones */
#canvas-my-account .sb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--ek-radio-m);
    color: var(--color-title);
    transition: background-color 0.15s, color 0.15s;
    order: 1;
}
#canvas-my-account .ek-sb-item {
    order: 2;
}
#canvas-my-account .dropdown {
    order: 3;
}
#canvas-my-account .sb-item:hover,
#canvas-my-account .sb-item:focus-visible {
    background: #f6f7f9;
    color: var(--color-primary);
}
#canvas-my-account .sb-item > span {
    flex: 1;
    font-size: 1.4rem;
    font-weight: 500;
}
/* Flecha a la derecha (no en los selectores de idioma o moneda, que ya
   llevan la suya) */
#canvas-my-account a.sb-item::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-color: #b8c0c8;
    -webkit-mask: var(--ek-ico-flecha) center / contain no-repeat;
    mask: var(--ek-ico-flecha) center / contain no-repeat;
    transition: background-color 0.15s, transform 0.15s;
}
#canvas-my-account a.sb-item:hover::after {
    background-color: var(--color-primary);
    transform: translateX(2px);
}

/* El icono de cada opcion, en un cuadrado redondeado */
#canvas-my-account a.sb-item > i {
    display: inline-grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 12px;
    background: #f2f4f7;
    color: #4a5763;
    font-size: 0;
    line-height: 0;
    transition: background-color 0.15s, color 0.15s;
}
#canvas-my-account a.sb-item:hover > i {
    background: #fff1f2;
    color: var(--color-primary);
}
#canvas-my-account a.sb-item > i::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico) center / contain no-repeat;
    mask: var(--ek-ico) center / contain no-repeat;
}
#canvas-my-account a.sb-item > i.la-user { --ek-ico: var(--ek-ico-usuario); }
#canvas-my-account a.sb-item > i.la-map-signs { --ek-ico: var(--ek-ico-direcciones); }
#canvas-my-account a.sb-item > i.la-calendar { --ek-ico: var(--ek-ico-pedidos); }
#canvas-my-account a.sb-item > i.la-reply { --ek-ico: var(--ek-ico-devoluciones); }
#canvas-my-account a.sb-item > i.ek-sb-ico--facturas { --ek-ico: var(--ek-ico-facturas); }
#canvas-my-account a.sb-item > i.ek-sb-ico--credito { --ek-ico: var(--ek-ico-credito); }

/* Cerrar sesion: al final, como boton */
#canvas-my-account .sb-account-info p:last-child {
    order: 9;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ek-borde);
}
#canvas-my-account .sb-account-info p:last-child a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    margin: 0;
    border: 1.5px solid #f1d4d6;
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: none;
    transition: background-color 0.15s, border-color 0.15s;
}
#canvas-my-account .sb-account-info p:last-child a::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico-salir) center / contain no-repeat;
    mask: var(--ek-ico-salir) center / contain no-repeat;
}
#canvas-my-account .sb-account-info p:last-child a:hover {
    border-color: var(--color-primary);
    background: #fff1f2;
}

/* --- Sin sesion: el formulario de entrar del mismo panel ---
 * Arriba la bienvenida (la pinta el modulo en displayMyAccountCanVas, que
 * el tema pone debajo del formulario: se sube con order), luego el
 * formulario, y al final "Crear cuenta" en su propia tarjeta. */

#canvas-my-account .ek-panel-bienvenida {
    display: flex;
    flex-direction: column;
    align-items: center;
    order: -1;
    margin-bottom: 18px;
    padding: 22px 16px;
    border-radius: var(--ek-radio-tarjeta);
    background: #f8f9fb;
    text-align: center;
}
#canvas-my-account .ek-panel-bienvenida__avatar {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #fff1f2;
    color: var(--color-primary);
}
#canvas-my-account .ek-panel-bienvenida__avatar::before {
    content: "";
    width: 28px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico-usuario) center / contain no-repeat;
    mask: var(--ek-ico-usuario) center / contain no-repeat;
}
#canvas-my-account .ek-panel-bienvenida__titulo {
    margin: 0 0 4px;
    color: var(--color-title);
    font-size: 1.7rem;
    font-weight: 700;
}
#canvas-my-account .ek-panel-bienvenida__texto {
    margin: 0;
    color: #6c7a86;
    font-size: 1.3rem;
    line-height: 1.5;
}

#canvas-my-account .canvas-my-account-wrapper > form .form-group {
    margin-bottom: 14px;
}
#canvas-my-account .canvas-my-account-wrapper > form label {
    margin-bottom: 6px;
    color: var(--color-title);
    font-size: 1.3rem;
    font-weight: 600;
}
#canvas-my-account .canvas-my-account-wrapper > form .form-control {
    height: 48px;
    padding: 0 16px;
    border: 1px solid #e3e7ec;
    border-radius: var(--ek-radio-m);
    background: #f8f9fb;
}
#canvas-my-account .canvas-my-account-wrapper > form .form-control:focus {
    border-color: var(--color-primary);
    background: #fff;
}
#canvas-my-account .canvas-my-account-wrapper > form .input-group .form-control {
    padding-right: 52px;
}
#canvas-my-account .canvas-my-account-wrapper > form .btn {
    height: 48px;
    margin-top: 6px;
    border-radius: 999px;
    font-weight: 600;
}
#canvas-my-account .canvas-my-account-wrapper > form .forgot-password {
    margin: 14px 0 0;
}
#canvas-my-account .canvas-my-account-wrapper > form .forgot-password a {
    font-size: 1.3rem;
    transition: color 0.15s;
}
#canvas-my-account .canvas-my-account-wrapper > form .forgot-password a:hover {
    color: var(--color-primary);
}

/* ¿No tiene cuenta?: texto y un boton como Agregar a mi lista */
#canvas-my-account .canvas-my-account-wrapper > .no-account {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 0;
    padding: 18px 16px 16px;
    border-top: 1px solid var(--ek-borde);
    background: none;
    color: #6c7a86;
    font-size: 1.3rem;
    text-transform: none;
}
#canvas-my-account .canvas-my-account-wrapper > .no-account a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 1.5px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.15s;
}
#canvas-my-account .canvas-my-account-wrapper > .no-account a:hover {
    background: #fff1f2;
}

/* ------------------------------------------------------------------------
 * Menu de Mi cuenta (la columna de la izquierda en Mi perfil, Direcciones,
 * Pedidos, Mis facturas...) y la caja del contenido
 *
 * El mismo estilo que el panel lateral: filas con el icono en un cuadrado
 * redondeado, del mismo juego de iconos (antes mezclaba Line Awesome, Font
 * Awesome en negrita y Material Icons), y la pagina en la que se esta,
 * marcada en rosa. Cerrar sesion va al final, separada por una linea.
 * --------------------------------------------------------------------- */

.my-account-links {
    align-self: flex-start;
    padding: 8px !important;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
    background: #fff;
    box-shadow: var(--ek-sombra);
}
.my-account-links > a {
    float: none;
    display: block;
    flex: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
    border: 0;
    background: none;
}
.my-account-links > a .link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--ek-radio-m);
    color: var(--color-title);
    font-size: 1.4rem;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
}
.my-account-links > a:hover .link-item,
.my-account-links > a:focus-visible .link-item {
    background: #f6f7f9;
    color: var(--color-primary);
}
.my-account-links > a .link-item > i {
    display: inline-grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 11px;
    background: #f2f4f7;
    color: #4a5763;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    transition: background-color 0.15s, color 0.15s;
}
.my-account-links > a:hover .link-item > i {
    background: #fff1f2;
    color: var(--color-primary);
}
.my-account-links > a .link-item > i::before {
    content: "";
    width: 19px;
    height: 19px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico, var(--ek-ico-flecha)) center / contain no-repeat;
    mask: var(--ek-ico, var(--ek-ico-flecha)) center / contain no-repeat;
}
.my-account-links i.la-user-circle { --ek-ico: var(--ek-ico-usuario); }
.my-account-links i.la-map-signs { --ek-ico: var(--ek-ico-direcciones); }
.my-account-links i.la-calendar { --ek-ico: var(--ek-ico-pedidos); }
.my-account-links i.la-reply { --ek-ico: var(--ek-ico-devoluciones); }
.my-account-links i.la-file-invoice-dollar { --ek-ico: var(--ek-ico-facturas); }
.my-account-links i.la-hand-holding-usd { --ek-ico: var(--ek-ico-credito); }
.my-account-links i.fa-group { --ek-ico: var(--ek-ico-usuarios); }
.my-account-links i.fa-credit-card { --ek-ico: var(--ek-ico-aprobar); }
.my-account-links #shoppinglist-link i { --ek-ico: var(--ek-ico-lista); }
.my-account-links i.la-sign-out-alt { --ek-ico: var(--ek-ico-salir); }

/* La pagina en la que se esta (por el id del body de cada pagina) */
body#identity .my-account-links #identity-link .link-item,
body#addresses .my-account-links #addresses-link .link-item,
body#address .my-account-links #addresses-link .link-item,
body#address .my-account-links #address-link .link-item,
body#history .my-account-links #history-link .link-item,
body#order-detail .my-account-links #history-link .link-item,
body#order-follow .my-account-links #returns-link .link-item,
body#module-eureka_functions-facturas .my-account-links #facturas-eureka-link .link-item,
body#module-eureka_functions-credito .my-account-links #credito-eureka-link .link-item,
body#module-shoppinglist-accountshoppinglist .my-account-links #shoppinglist-link .link-item {
    background: #fff1f2;
    color: var(--color-primary);
    font-weight: 600;
}
body#identity .my-account-links #identity-link .link-item > i,
body#addresses .my-account-links #addresses-link .link-item > i,
body#address .my-account-links #addresses-link .link-item > i,
body#address .my-account-links #address-link .link-item > i,
body#history .my-account-links #history-link .link-item > i,
body#order-detail .my-account-links #history-link .link-item > i,
body#order-follow .my-account-links #returns-link .link-item > i,
body#module-eureka_functions-facturas .my-account-links #facturas-eureka-link .link-item > i,
body#module-eureka_functions-credito .my-account-links #credito-eureka-link .link-item > i,
body#module-shoppinglist-accountshoppinglist .my-account-links #shoppinglist-link .link-item > i {
    background: #fff;
    color: var(--color-primary);
}

/* Cerrar sesion: el ultimo enlace, separado y en gris */
.my-account-links > a:last-child {
    margin-top: 6px;
    padding-top: 6px !important;
    border-top: 1px solid var(--ek-borde);
}
.my-account-links > a:last-child .link-item {
    color: #6c7a86;
}

/* La caja del contenido, a juego y separada del menu */
.my-account-content {
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
    background: #fff;
    box-shadow: var(--ek-sombra);
}
/* Menu de ancho fijo y el contenido con el resto, separados 20px (con los
   25% / 75% de col-lg-3 y col-lg-9 mas el hueco no cabrian) */
@media (min-width: 992px) {
    .my-account-page-content {
        flex-wrap: nowrap;
        gap: 20px;
    }
    .my-account-page-content > .my-account-links {
        flex: 0 0 280px;
        max-width: 280px;
    }
    .my-account-page-content > .my-account-content {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        margin: 0 !important;
    }
}
@media (max-width: 991.98px) {
    .my-account-links {
        margin-bottom: 16px;
    }
}

/* ------------------------------------------------------------------------
 * Paginas de Mi cuenta: lo que va dentro de la caja del contenido
 * (Direcciones, Historial, Detalle del pedido, Mis facturas, Credito,
 * Usuarios, Pedidos por aprobar, Mi lista...). Solo CSS y todo colgado de
 * .my-account-content: varias plantillas son de otros modulos o del tema sin
 * versionar, y asi no se toca su HTML ni su logica.
 * --------------------------------------------------------------------- */

.my-account-content > h4 {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ek-borde);
    color: var(--color-title);
    font-size: 2.2rem;
    font-weight: 700;
}
.my-account-content > h6 {
    margin-bottom: 16px;
    color: #6c7a86;
    font-size: 1.4rem;
    font-weight: 400;
}

/* Tablas (historial, pedidos por aprobar, usuarios, mi lista...) */
.my-account-content table.table,
.my-account-content table.table_custom {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid var(--ek-borde);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--ek-radio-m);
    background: #fff;
    overflow: hidden;
}
.my-account-content table.table thead th,
.my-account-content table.table_custom thead th {
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--ek-borde);
    background: #f8f9fb;
    color: #6c7a86;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    vertical-align: middle;
}
.my-account-content table.table tbody > tr > *,
.my-account-content table.table_custom tbody > tr > * {
    padding: 14px;
    border: 0;
    border-bottom: 1px solid #eef1f3;
    background: #fff;
    vertical-align: middle;
    transition: background-color 0.15s;
}
.my-account-content table.table tbody > tr:last-child > *,
.my-account-content table.table_custom tbody > tr:last-child > * {
    border-bottom: 0;
}
.my-account-content table.table tbody > tr:hover > *,
.my-account-content table.table_custom tbody > tr:hover > * {
    background: #fafbfc;
}
@media (max-width: 767.98px) {
    /* En el movil se desplazan de lado en vez de salirse de la pantalla */
    .my-account-content table.table,
    .my-account-content table.table_custom {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Estados de los pedidos */
.my-account-content .label-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Detalles / Volver a pedir, en el historial */
#history .order-actions a {
    display: inline-flex;
    align-items: center;
    height: 34px;
    margin: 3px;
    padding: 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    color: var(--color-title);
    font-size: 1.3rem;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
#history .order-actions a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Historial en pantallas medianas y el movil: el tema pinta tarjetas */
#history .orders .order {
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    background: #fff;
}
#history .orders .order a h3 {
    font-size: 1.6rem;
    font-weight: 700;
}
#history .orders .order a i {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #f4f6f8;
    color: var(--color-title);
    font-size: 18px;
}

/* Historial: Entregado / Pendiente de entrega (EurekaEntrega) */
.ek-entrega {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}
.ek-entrega::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.ek-entrega--entregado {
    background: #e3f4ea;
    color: #1f6b3f;
}
.ek-entrega--pendiente {
    background: #fdf3dc;
    color: #8a6100;
}
.ek-entrega__detalle {
    display: block;
    margin-top: 4px;
    font-size: 1.15rem;
    color: #6c7a86;
}

/* Historial: buscar por rango de fechas (historial.js) */
.ek-historial-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    background: #fff;
}
.ek-historial-filtro[hidden],
#history [data-ek-fecha][hidden],
.ek-historial-filtro__vacio[hidden] {
    display: none !important;
}
.ek-historial-filtro__campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #5f6b76;
}
.ek-historial-filtro__campo .form-control {
    width: 170px;
    max-width: 100%;
    height: 40px;
}
.ek-historial-filtro__limpiar,
.ek-historial-filtro__limpiar:focus {
    height: 40px;
    padding: 0 18px;
    border: 1px solid #16181d !important;
    border-radius: 999px;
    background: #fff !important;
    color: #16181d !important;
    font-weight: 600;
}
.ek-historial-filtro__limpiar:hover {
    background: #16181d !important;
    color: #fff !important;
}
.ek-historial-filtro__resumen {
    flex: 1 1 220px;
    margin: 0;
    align-self: center;
    font-size: 1.3rem;
    color: #5f6b76;
}
.ek-historial-filtro__vacio {
    padding: 24px;
    text-align: center;
    color: #5f6b76;
}
@media (max-width: 575.98px) {
    .ek-historial-filtro__campo {
        flex: 1 1 130px;
    }
    .ek-historial-filtro__campo .form-control {
        width: 100%;
    }
}

/* Historial sin pedidos (customer/history.tpl) */
.ek-vacio-pedidos {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 36px;
    border: 1.5px dashed #d6dbe1;
    border-radius: var(--ek-radio-tarjeta);
    background: #fafbfc;
    text-align: center;
}
.ek-vacio-pedidos__icono {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #fff1f2;
    color: var(--color-primary);
}
.ek-vacio-pedidos__icono::before {
    content: "";
    width: 34px;
    height: 34px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico-pedidos) center / contain no-repeat;
    mask: var(--ek-ico-pedidos) center / contain no-repeat;
}
.ek-vacio-pedidos__titulo {
    margin: 0 0 6px;
    color: var(--color-title);
    font-size: 1.8rem;
    font-weight: 700;
}
.ek-vacio-pedidos__texto {
    max-width: 380px;
    margin: 0 0 20px;
    color: #6c7a86;
    font-size: 1.4rem;
    line-height: 1.5;
}
.ek-vacio-pedidos__boton {
    height: 46px;
    padding: 0 28px;
    border-radius: 999px;
    font-weight: 600;
}

/* Detalle del pedido: cada bloque en su tarjeta */
.page-order-detail .my-account-content .box {
    margin-bottom: 16px;
    padding: 20px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    background: #fff;
}

/* Direcciones: tarjetas en rejilla */
body#addresses .my-account-content > .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}
body#addresses .my-account-content > .row::before,
body#addresses .my-account-content > .row::after {
    content: none;
}
body#addresses .my-account-content > .row > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}
.page-addresses .my-account-content .address {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
    background: #fff;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.page-addresses .my-account-content .address:hover {
    border-color: transparent;
    box-shadow: var(--ek-sombra-alta);
}
.page-addresses .my-account-content .address .address-body {
    flex: 1;
}
.page-addresses .my-account-content .address h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--color-title);
    font-size: 1.6rem;
    font-weight: 700;
}
.page-addresses .my-account-content .address h4::before {
    content: "";
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff1f2 var(--ek-ico-direcciones-rojo) center / 18px 18px no-repeat;
}
.page-addresses .my-account-content .address address {
    margin: 0;
    color: #4a5763;
    font-size: 1.35rem;
    line-height: 1.6;
}
.page-addresses .my-account-content .address .address-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef1f3;
}
.page-addresses .my-account-content .address .address-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    color: #4a5763;
    font-size: 1.3rem;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.page-addresses .my-account-content .address .address-footer a i {
    font-size: 16px;
}
.page-addresses .my-account-content .address .address-footer a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.page-addresses .my-account-content .address .address-footer a[data-link-action="delete-address"]:hover {
    border-color: #f2d3cf;
    background: #fdf3f2;
    color: #c0392b;
}
/* Crear nueva direccion: una tarjeta vacia con borde discontinuo */
.page-addresses .my-account-content .addresses-footer a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    border: 1.5px dashed #cfd5dc;
    border-radius: var(--ek-radio-m);
    color: #4a5763;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.page-addresses .my-account-content .addresses-footer a::before {
    content: "+";
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}
.page-addresses .my-account-content .addresses-footer a:hover {
    border-color: var(--color-primary);
    background: #fff8f8;
    color: var(--color-primary);
}

/* Tarjetas de los modulos (Usuarios, Pedidos por aprobar, Mis facturas...) */
.my-account-content .custom-card,
.my-account-content .card.card-register {
    padding: 20px;
    border: 1px solid var(--ek-borde);
    border-radius: var(--ek-radio-m);
    background: #fff;
    box-shadow: none;
}
.my-account-content .ek-tarjeta {
    border-color: var(--ek-borde);
    border-radius: var(--ek-radio-tarjeta);
}

/* Mi cuenta (la portada de la cuenta): el saludo, mas presente */
body#my-account .my-account-content > p:first-of-type {
    margin-bottom: 6px;
    color: var(--color-title);
    font-size: 2rem;
}
body#my-account .my-account-content > p {
    color: #4a5763;
}

/* --- Movil y tableta: el menu de la cuenta, una barra de pastillas que se
   desliza de lado, en vez de una lista larga antes del contenido --- */
@media (max-width: 991.98px) {
    .my-account-links {
        display: flex;
        gap: 6px;
        margin-bottom: 14px;
        padding: 8px !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .my-account-links::-webkit-scrollbar {
        display: none;
    }
    .my-account-links > a {
        flex: 0 0 auto;
        width: auto;
        scroll-snap-align: start;
    }
    .my-account-links > a .link-item {
        gap: 8px;
        padding: 5px 14px 5px 5px;
        border-radius: 999px;
        background: #f6f7f9;
        font-size: 1.3rem;
        white-space: nowrap;
    }
    .my-account-links > a .link-item > i {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fff;
    }
    .my-account-links > a:last-child {
        margin-top: 0;
        padding-top: 0 !important;
        border-top: 0;
    }
    .my-account-content {
        padding: 18px !important;
    }
}

/* ------------------------------------------------------------------------
 * Adjuntos en PDF (views/js/adjuntos.js): registro y Credito Eureka
 * Una zona con borde discontinuo en vez de "Seleccionar archivo". El input
 * de verdad va encima, invisible: pulsar o soltar un archivo en cualquier
 * punto de la zona lo recoge el propio navegador.
 * --------------------------------------------------------------------- */

.ek-adjunto {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 10px 14px;
    border: 1.5px dashed #c9d0d7;
    border-radius: var(--ek-radio-m);
    background: #fafbfc;
    transition: border-color 0.15s, background-color 0.15s;
}
.ek-adjunto > input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}
.ek-adjunto:hover,
.ek-adjunto.ek-adjunto--encima,
.ek-adjunto:focus-within {
    border-color: var(--color-primary);
    background: #fff8f8;
}
.ek-adjunto:focus-within {
    box-shadow: 0 0 0 3px rgb(231 43 55 / 12%);
}

.ek-adjunto__icono {
    display: inline-grid;
    flex: 0 0 40px;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff1f2;
    color: var(--color-primary);
    --ek-ico: var(--ek-ico-subir);
}
.ek-adjunto__icono::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--ek-ico) center / contain no-repeat;
    mask: var(--ek-ico) center / contain no-repeat;
}
.ek-adjunto__texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ek-adjunto__titulo {
    overflow: hidden;
    color: var(--color-title);
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ek-adjunto__ayuda {
    color: #6c7a86;
    font-size: 1.25rem;
}
.ek-adjunto__quitar {
    position: relative;
    z-index: 2; /* por encima del input, que cubre la zona */
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    background: #fff;
    color: #4a5763;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.ek-adjunto__quitar:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Con un PDF elegido: borde continuo verde y el icono con visto */
.ek-adjunto[data-estado="listo"] {
    border-style: solid;
    border-color: #bfe3cc;
    background: #f3fbf6;
}
.ek-adjunto[data-estado="listo"] .ek-adjunto__icono {
    background: #e2f5e9;
    color: #1f8a4c;
    --ek-ico: var(--ek-ico-pdf-listo);
}
.ek-adjunto[data-estado="listo"] .ek-adjunto__ayuda {
    color: #1f8a4c;
}
/* No es un PDF o pesa demasiado */
.ek-adjunto[data-estado="error"] {
    border-style: solid;
    border-color: #f2c4bf;
    background: #fdf3f2;
}
.ek-adjunto[data-estado="error"] .ek-adjunto__icono {
    background: #fbe1de;
    color: #c0392b;
    --ek-ico: var(--ek-ico-alerta);
}
.ek-adjunto[data-estado="error"] .ek-adjunto__ayuda {
    color: #c0392b;
    font-weight: 600;
}

/* ------------------------------------------------------------------------
 * Menus desplegables, buscador y ventanas
 * --------------------------------------------------------------------- */

.dropdown-menu,
.axps-dropdown-menu {
    padding: 6px;
    border-radius: var(--ek-radio-m);
    box-shadow: var(--ek-sombra-menu);
}
.axps-dropdown-menu > a,
.dropdown-menu > a,
.dropdown-menu > li > a {
    border-radius: var(--ek-radio-s);
}

/* Resultados del buscador de la cabecera */
.search-widget .search-results-wrapper .wrapper-scroll {
    margin-top: 6px;
    border-radius: var(--ek-radio-m);
    box-shadow: var(--ek-sombra-menu);
    overflow: hidden;
}

/* Ventanas (anadido al carrito, vista rapida...) */
.modal-content {
    border: 0;
    border-radius: var(--ek-radio-l);
    box-shadow: var(--ek-sombra-menu);
    overflow: hidden;
}

/* ------------------------------------------------------------------------
 * Filtros, paginacion e imagenes de contenido
 * --------------------------------------------------------------------- */

.page-numbers {
    border-radius: var(--ek-radio-s);
}

/* Banners y fotos de las paginas hechas con el editor (portada, marcas...) */
.elementor-widget-image .elementor-image img {
    border-radius: var(--ek-radio-m);
}

/* Subir arriba */
#back-to-top,
.back-to-top {
    border-radius: 50%;
}

/* ------------------------------------------------------------------------
 * Pie de pagina
 *
 * El pie es del constructor (axoncreator, "Footer general"): aqui solo se le
 * cambia el aspecto, sin depender de los ids de sus elementos. La franja de
 * derechos con "Powered by Velox" se oculta: la sustituye .ek-pie-creditos
 * (themes/akira/templates/_partials/footer.tpl), con el ano al dia.
 * --------------------------------------------------------------------- */

#footer {
    margin-top: 48px;
    background: #0d0e10;
    color: rgb(255 255 255 / 72%);
    border-radius: 28px 28px 0 0;
    overflow: hidden;
}
#footer .elementor-top-section {
    background: transparent !important;
    margin: 0 !important;
}
#footer .elementor-top-section:has(a[href*="velox.ec"]) {
    display: none;
}
#footer .elementor-top-section:first-child {
    padding: 64px 0 44px !important;
}
#footer .elementor-top-column > .elementor-element-populated {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 24px !important;
}

/* Marca: logo, redes y "Escribenos" */
#footer .elementor-top-column:first-child .elementor-widget {
    text-align: left !important;
}
#footer .elementor-widget-image > .elementor-widget-container {
    margin: 0 0 22px !important;
}
#footer .elementor-widget-image img {
    width: auto !important;
    max-width: 180px;
}
#footer .elementor-social-icons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#footer .elementor-social-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    border-radius: 50% !important;
    background: rgb(255 255 255 / 8%) !important;
    transition: background-color .2s, transform .2s;
}
#footer .elementor-social-icon i {
    color: #fff;
}
#footer .elementor-social-icon:hover {
    background: #e72b37 !important;
    transform: translateY(-2px);
}
#footer .elementor-widget-heading > .elementor-widget-container {
    margin: 30px 0 0 !important;
}
#footer .elementor-widget-heading .elementor-heading-title {
    font-size: 15px !important;
    font-weight: 600;
    color: #fff !important;
}
#footer .elementor-widget-button > .elementor-widget-container {
    margin: 12px 0 0 !important;
}
#footer .elementor-widget-button .elementor-button {
    padding: 11px 22px;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-weight: 600;
    transition: background-color .2s, border-color .2s;
}
#footer .elementor-widget-button .elementor-button:hover {
    border-color: #e72b37;
    background: #e72b37;
}

/* Columnas de enlaces */
#footer .linklist-toggle {
    margin-bottom: 16px;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 50%) !important;
}
#footer .linklist-toggle .icon-toggle {
    display: none;
}
#footer .linklist-menu > a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 6px 0;
    font-size: 14px;
    color: rgb(255 255 255 / 82%) !important;
    transition: color .15s, transform .15s;
}
#footer .linklist-menu > a:hover {
    color: #fff !important;
    transform: translateX(3px);
}
/* Contacto: el icono en un circulo */
#footer .linklist-menu > a > i {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 8%);
    font-size: 16px;
    color: #e72b37;
}

/* Derechos y creditos */
#footer .ek-pie-creditos {
    border-top: 1px solid rgb(255 255 255 / 10%);
}
#footer .ek-pie-creditos .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    padding-top: 20px;
    padding-bottom: 22px;
}
#footer .ek-pie-creditos p {
    margin: 0;
    font-size: 13px;
    color: rgb(255 255 255 / 55%);
}
#footer .ek-pie-creditos a {
    color: rgb(255 255 255 / 85%);
    text-decoration: underline;
    text-decoration-color: rgb(255 255 255 / 30%);
    text-underline-offset: 3px;
}
#footer .ek-pie-creditos a:hover {
    color: #fff;
    text-decoration-color: #e72b37;
}
/* La recomendacion de navegador, en su propia linea y mas discreta */
#footer .ek-pie-creditos p.ek-pie-creditos__navegador {
    flex-basis: 100%;
    font-size: 12px;
    color: rgb(255 255 255 / 45%);
}

@media (min-width: 1025px) {
    #footer .elementor-top-section:first-child .elementor-top-column:first-child {
        width: 31% !important;
    }
    #footer .elementor-top-section:first-child .elementor-top-column:not(:first-child) {
        width: 23% !important;
    }
}
/* Tableta: la marca arriba y los enlaces en tres columnas */
@media (min-width: 768px) and (max-width: 1024.98px) {
    #footer .elementor-top-section:first-child .elementor-row {
        flex-wrap: wrap;
    }
    #footer .elementor-top-section:first-child .elementor-top-column {
        width: 33.333% !important;
    }
    #footer .elementor-top-section:first-child .elementor-top-column:first-child {
        width: 100% !important;
        margin-bottom: 36px;
    }
}
/* Movil: la marca centrada; debajo Informacion y Compra online a dos
   columnas (asi viene del constructor) y Contactanos entero */
@media (max-width: 767.98px) {
    #footer {
        margin-top: 32px;
        border-radius: 22px 22px 0 0;
    }
    #footer .elementor-top-section:first-child {
        padding: 44px 8px 28px !important;
    }
    #footer .elementor-top-column > .elementor-element-populated {
        padding: 0 12px !important;
    }
    #footer .elementor-top-column:first-child {
        margin-bottom: 36px;
    }
    #footer .elementor-top-column:first-child .elementor-widget {
        text-align: center !important;
    }
    #footer .elementor-social-icons-wrapper {
        justify-content: center;
    }
    #footer .elementor-top-column:last-child {
        margin-top: 28px;
    }
    #footer .ek-pie-creditos .container {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}

/* ------------------------------------------------------------------------
 * Cabecera en el movil (Clasica y Express): una barra compacta, como la de
 * apple.com. A la izquierda el carrito rojo del logo (sin las letras) y a la
 * derecha solo iconos: buscar, Mi lista, cuenta, carrito y menu. El buscador
 * se abre debajo con la lupa (header-sticky.js, .ek-lupa-movil).
 *
 * Por estructura y no por ids del constructor: la barra es la seccion que
 * tiene el buscador (.ek-barra-con-buscador la pone header-sticky.js).
 * --------------------------------------------------------------------- */

.ek-lupa-movil {
    display: none;
}

@media (max-width: 767.98px) {
    /* Translucida, como la de Apple */
    #header {
        background-color: rgb(255 255 255 / 88%);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
    }

    #header .elementor-top-section:has(.elementor-widget-axps-search) {
        padding: 0 !important;
        margin: 0 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) > .elementor-container > .elementor-row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        min-height: 58px;
        padding: 6px 10px 6px 14px;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-top-column {
        width: auto !important;
        flex: none;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-top-column > .elementor-element-populated {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Logo: solo el carrito */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image {
        width: auto !important;
        margin: 0 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image > .elementor-widget-container {
        margin: 0 !important;
        padding: 0 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image a {
        display: block;
        width: 40px;
        height: 36px;
        background: url("../img/eureka-carrito.png") left center / contain no-repeat;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-image img {
        display: none;
    }

    /* Iconos a la derecha, sin texto */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-top-column:has(.elementor-widget-axps-my-account) {
        flex: 1;
        margin-left: auto;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-top-column:has(.elementor-widget-axps-my-account) .elementor-widget-wrap {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-wrap > .elementor-widget {
        width: auto !important;
        margin: 0 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-wrap > .elementor-widget > .elementor-widget-container {
        margin: 0 !important;
        padding: 0 !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .ek-lupa-movil { order: 1; }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-icon-box { order: 2; }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-my-account { order: 3; }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-my-cart { order: 4; }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-megamenu { order: 5; }

    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-text,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas .amount,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-icon-box-content {
        display: none !important;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-icon-box-wrapper,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas {
        display: grid;
        place-items: center;
        gap: 0;
    }

    /* Todos los iconos iguales: 40px para el dedo, sin el circulo gris */
    #header .elementor-top-section:has(.elementor-widget-axps-search) i.la-clipboard-list,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-account i.la-user,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-cart i.la-shopping-cart,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-menu i.la-list-ul,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .ek-lupa-movil {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--color-title);
        font-size: 0;
        line-height: 0;
        transition: background-color 0.15s, color 0.15s;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-menu i.la-list-ul { --ek-ico: var(--ek-ico-menu); }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .ek-lupa-movil { --ek-ico: var(--ek-ico-buscar); }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas-menu i.la-list-ul::before,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .ek-lupa-movil::before {
        content: "";
        display: block;
        width: 21px;
        height: 21px;
        background-color: currentColor;
        -webkit-mask: var(--ek-ico) center / contain no-repeat;
        mask: var(--ek-ico) center / contain no-repeat;
    }
    #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: 21px;
        height: 21px;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .ek-lupa-movil:active,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas:active i,
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-icon:active i {
        background: #f2f4f7;
    }
    #header.ek-buscando .elementor-top-section:has(.elementor-widget-axps-search) .ek-lupa-movil {
        color: var(--color-primary);
    }
    /* El numero del carrito, pegado al icono */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .btn-canvas .cart-nbr {
        top: 2px;
        right: 0;
    }

    /* El buscador: escondido; con la lupa baja desde la barra */
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-top-column:has(.elementor-widget-axps-search) {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 3;
        padding: 10px 14px 14px;
        background: #fff;
        box-shadow: 0 12px 24px rgb(16 24 40 / 10%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }
    #header.ek-buscando .elementor-top-section:has(.elementor-widget-axps-search) .elementor-top-column:has(.elementor-widget-axps-search) {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-widget-axps-search {
        width: 100% !important;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    #header .elementor-top-section:has(.elementor-widget-axps-search) .elementor-top-column:has(.elementor-widget-axps-search) {
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------------------
 * Movil: la pagina no puede quedar mas ancha que la pantalla
 *
 * Las secciones "estiradas" del constructor (elementor-section-stretched,
 * p. ej. "Te pueden interesar") calculan su ancho con JS a partir del de la
 * ventana, y en el iPhone al hacer zoom la ventana informa otro ancho: la
 * seccion se ensanchaba, la pagina entera quedaba mas ancha que la pantalla
 * y la cabecera y el pie se veian angostos. En movil y tableta no hace falta
 * estirarlas (el contenedor ya ocupa todo el ancho). Y por si algo mas se
 * sale, el sobrante horizontal se recorta (clip no rompe la cabecera fija,
 * a diferencia de overflow: hidden).
 * --------------------------------------------------------------------- */
@media (max-width: 1024.98px) {
    .elementor-section.elementor-section-stretched {
        width: 100% !important;
        left: 0 !important;
    }
}
html,
body {
    overflow-x: clip;
}

/* ------------------------------------------------------------------------
 * Avisos del carrito, del checkout y de la confirmacion (los .alert de
 * PrestaShop, del tema y de eureka_b2b): fondo suave, borde con el color del
 * tipo, icono en un circulo y una entrada corta. El display no se toca: los
 * que el tema esconde con style="display: none" siguen escondidos.
 * --------------------------------------------------------------------- */
body#cart .alert,
body#checkout .alert,
body#order-confirmation .alert,
body#module-eureka_b2b-redirect .alert {
    --ek-aviso-color: #1c5aa6;
    --ek-aviso-fondo: #f2f7fd;
    --ek-aviso-borde: #cfe0f5;
    --ek-aviso-texto: #17406f;
    --ek-aviso-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E");
    position: relative;
    margin: 0 0 14px;
    padding: 14px 16px 14px 54px;
    border: 1px solid var(--ek-aviso-borde);
    border-radius: var(--ek-radio-m, 14px);
    background: var(--ek-aviso-fondo);
    color: var(--ek-aviso-texto);
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
    animation: ek-aviso-entra .4s cubic-bezier(.2, .8, .2, 1) both;
}
/* El icono: un circulo del color del tipo con el simbolo en blanco */
body#cart .alert::before,
body#checkout .alert::before,
body#order-confirmation .alert::before,
body#module-eureka_b2b-redirect .alert::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ek-aviso-color);
    animation: ek-aviso-icono .5s cubic-bezier(.3, 1.6, .5, 1) .1s both;
}
body#cart .alert::after,
body#checkout .alert::after,
body#order-confirmation .alert::after,
body#module-eureka_b2b-redirect .alert::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 21px;
    width: 16px;
    height: 16px;
    background: #fff;
    -webkit-mask: var(--ek-aviso-icono) center / contain no-repeat;
    mask: var(--ek-aviso-icono) center / contain no-repeat;
    animation: ek-aviso-icono .5s cubic-bezier(.3, 1.6, .5, 1) .1s both;
}
body#cart .alert-danger, body#checkout .alert-danger,
body#order-confirmation .alert-danger, body#module-eureka_b2b-redirect .alert-danger {
    --ek-aviso-color: #d92d20;
    --ek-aviso-fondo: #fef4f3;
    --ek-aviso-borde: #f8cfcb;
    --ek-aviso-texto: #7a271a;
    --ek-aviso-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E");
}
body#cart .alert-warning, body#checkout .alert-warning,
body#order-confirmation .alert-warning, body#module-eureka_b2b-redirect .alert-warning {
    --ek-aviso-color: #dc8a00;
    --ek-aviso-fondo: #fffaeb;
    --ek-aviso-borde: #fbe2a8;
    --ek-aviso-texto: #6b4300;
    --ek-aviso-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E");
}
body#cart .alert-success, body#checkout .alert-success,
body#order-confirmation .alert-success, body#module-eureka_b2b-redirect .alert-success {
    --ek-aviso-color: #1f8a4c;
    --ek-aviso-fondo: #f0faf4;
    --ek-aviso-borde: #c3e6d0;
    --ek-aviso-texto: #165c34;
    --ek-aviso-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
}
/* El credito disponible de "Eureka Credito Inmediato": con el carrito de
   Eureka (el icono del logo) en lugar del visto */
body#checkout .alert.ek-aviso--eureka::before {
    border-radius: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196 196'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='196' height='196' rx='34'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='196' height='196' fill='%23e72b37'/%3E%3Cpath fill='%23fff' d='M3 16 L3 90 C4 110 9 130 20 148 C30 160 45 168 62 168 C88 167 128 148 196 124 L196 92 C160 108 120 126 82 138 C68 142 56 140 48 130 C40 118 36 98 31 76 C26 54 18 32 3 16 Z'/%3E%3Ccircle fill='%23fff' cx='172' cy='161' r='18'/%3E%3Ccircle fill='%23fff' cx='76' cy='200' r='20'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
    box-shadow: 0 2px 6px rgb(231 43 55 / 25%);
}
body#checkout .alert.ek-aviso--eureka::after {
    display: none;
}

/* Titulo y textos dentro del aviso (los de eureka_b2b traian h4 y hr) */
body#cart .alert .ek-aviso__titulo, body#checkout .alert .ek-aviso__titulo,
body#checkout .alert h4, body#checkout .alert .alert-heading,
body#order-confirmation .alert h4, body#module-eureka_b2b-redirect .alert h4 {
    display: block;
    margin: 2px 0 2px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: inherit;
}
body#cart .alert p, body#checkout .alert p,
body#order-confirmation .alert p, body#module-eureka_b2b-redirect .alert p {
    margin: 4px 0 0;
    color: inherit;
}
body#cart .alert a, body#checkout .alert a,
body#order-confirmation .alert a, body#module-eureka_b2b-redirect .alert a:not(.btn) {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body#checkout .alert hr { display: none; }
body#checkout .alert .ek-aviso__enlace { margin-top: 8px; }
/* El aviso como parrafo suelto (<p class="alert">): sin margen extra abajo */
body#cart p.alert, body#checkout p.alert { margin-bottom: 14px; }

@keyframes ek-aviso-entra {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@keyframes ek-aviso-icono {
    from { transform: scale(.4); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* ------------------------------------------------------------------------
 * Desglose del pedido (carrito y checkout): importes en negro, etiquetas en
 * gris, el envio gratis como pastilla verde y el total destacado.
 * --------------------------------------------------------------------- */
.ek-desglose {
    display: grid;
    gap: 2px;
}
.ek-desglose .cart-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 7px 0;
}
.ek-desglose .cart-summary-line .label {
    color: #4a5763;
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: none;
}
.ek-desglose .cart-summary-line .value {
    color: #16202b;
    font-size: 1.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ek-desglose .ek-total-iva .label,
.ek-desglose .ek-total-iva .value {
    color: #6b7785;
    font-weight: 500;
}
.ek-desglose .ek-total-descuento .value { color: #1f8a4c; }
.ek-desglose .ek-total-gratis .value {
    padding: 2px 10px;
    border-radius: 999px;
    background: #e3f4ea;
    color: #1f6b3f;
    font-size: 1.2rem;
    font-weight: 700;
}
.ek-desglose .ek-total-final {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 2px solid #16202b;
}
.ek-desglose .ek-total-final .label {
    color: #16202b;
    font-size: 1.6rem;
    font-weight: 700;
}
.ek-desglose .ek-total-final .value {
    color: var(--color-primary, #e72b37);
    font-size: 2.2rem;
    font-weight: 800;
    /* Al cambiar una cantidad el tema repinta el resumen: el total aparece con
       un pequeno destello en lugar de saltar */
    animation: ek-total-aparece .45s ease-out both;
}
.ek-desglose__nota {
    margin: 2px 0 0;
    color: #8a94a0;
    font-size: 1.2rem;
    text-align: right;
}
@keyframes ek-total-aparece {
    from { opacity: .35; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body#cart .alert, body#checkout .alert, body#order-confirmation .alert,
    body#module-eureka_b2b-redirect .alert,
    body#cart .alert::before, body#checkout .alert::before,
    body#cart .alert::after, body#checkout .alert::after,
    .ek-desglose .ek-total-final .value {
        animation: none;
    }
}