/* ==========================================================================
   Tema del ecommerce (etapa 1 de la estética nueva, ver docs-claude/ecommerce.md)
   - Los colores de cada empresa van en tema-empresa.css (se carga después de este).
   - Todo lo nuevo usa el prefijo ec- para no chocar con Bootstrap 3 ni con main.css.
   - Medidas en px: Bootstrap 3 pone html { font-size: 10px } y los rem quedan chicos.
   ========================================================================== */

:root {
    /* Colores de la empresa (los pisa tema-empresa.css) */
    --ec-marca: #065C35;            /* color institucional tal cual (back-princ, color-princ) */
    --ec-secundario: #ecc21e;       /* back-sec */
    --ec-header: #065C35;           /* back-header */
    --ec-primario: #065C35;         /* botones con texto blanco: oscurecido si la marca es clara */
    --ec-primario-hover: #054A2B;
    --ec-primario-texto: #FFFFFF;
    --ec-primario-suave: #E6EFEB;   /* fondo tenue (~10 % del primario sobre blanco) */

    /* Ofertas */
    --ec-oferta: #FFD43B;
    --ec-oferta-texto: #1F2421;
    --ec-oferta-suave: #FFF7D6;
    --ec-precio-oferta: #B42318;

    /* Neutros */
    --ec-fondo: #F4F5F2;
    --ec-superficie: #FFFFFF;
    --ec-superficie-2: #F8F9F7;
    --ec-texto: #1F2421;
    --ec-texto-2: #5C635E;
    --ec-texto-3: #8A918C;
    --ec-borde: #E3E6E1;
    --ec-borde-fuerte: #D6DAD4;
    --ec-exito: #1E7A3E;
    --ec-error: #B42318;

    /* Forma */
    --ec-radio-s: 10px;
    --ec-radio-m: 16px;
    --ec-radio-l: 20px;
    --ec-radio-pildora: 999px;
    --ec-sombra-s: 0 1px 3px rgba(0, 0, 0, 0.12);
    --ec-sombra-m: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ec-sombra-l: 0 -10px 30px rgba(0, 0, 0, 0.15);

    --ec-fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Base ---------- */
.ec,
.ec * {
    box-sizing: border-box;
}

.ec {
    font-family: var(--ec-fuente);
    color: var(--ec-texto);
    font-size: 15px;
    line-height: 1.4;
}

.ec h1, .ec h2, .ec h3, .ec h4 {
    font-family: var(--ec-fuente);
    color: var(--ec-texto);
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
}

.ec-contenedor {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 32px;
}

.ec-solo-lector {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Botones ---------- */
.ec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid transparent;
    border-radius: var(--ec-radio-pildora);
    font-family: var(--ec-fuente);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    -webkit-user-select: none;
    user-select: none;
}

.ec-btn:focus-visible {
    outline: 3px solid var(--ec-primario-suave);
    outline-offset: 2px;
}

.ec-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.ec-btn-primario {
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
}

.ec-btn-primario:hover,
.ec-btn-primario:focus {
    background: var(--ec-primario-hover);
    color: var(--ec-primario-texto);
    text-decoration: none;
}

.ec-btn-borde {
    background: var(--ec-superficie);
    border-color: var(--ec-borde-fuerte);
    color: var(--ec-texto);
}

.ec-btn-borde:hover,
.ec-btn-borde:focus {
    border-color: var(--ec-texto-3);
    color: var(--ec-texto);
    text-decoration: none;
}

.ec-btn-link {
    background: transparent;
    color: var(--ec-primario);
    padding: 0;
    min-height: 0;
}

.ec-btn-link:hover,
.ec-btn-link:focus {
    color: var(--ec-primario-hover);
    text-decoration: underline;
}

.ec-btn-bloque {
    width: 100%;
}

.ec-btn-grande {
    min-height: 54px;
    font-size: 16px;
    font-weight: 800;
}

.ec-btn-icono {
    width: 44px;
    padding: 0;
    border-radius: 12px;
    background: var(--ec-fondo);
    color: var(--ec-texto);
}

/* ---------- Tarjetas ---------- */
.ec-card {
    background: var(--ec-superficie);
    border-radius: var(--ec-radio-l);
    padding: 20px;
}

/* ---------- Chips (rubros, familias, filtros activos, orden) ---------- */
.ec-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 0 0 auto;
    scrollbar-width: none;
}

.ec-chips::-webkit-scrollbar {
    display: none;
}

.ec-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--ec-borde);
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-superficie);
    color: var(--ec-texto);
    font-family: var(--ec-fuente);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.ec-chip.activo {
    background: var(--ec-primario);
    border-color: var(--ec-primario);
    color: var(--ec-primario-texto);
}

.ec-chip-suave {
    border-color: transparent;
    background: var(--ec-primario-suave);
    min-height: 34px;
    padding: 0 10px 0 14px;
    font-size: 13px;
}

/* ---------- Pestañas con subrayado (familias) ---------- */
.ec-tabs {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ec-tabs::-webkit-scrollbar {
    display: none;
}

.ec-tab {
    flex: 0 0 auto;
    padding: 10px 0 9px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--ec-texto-2);
    font-family: var(--ec-fuente);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.ec-tab.activo {
    border-bottom-color: var(--ec-primario);
    color: var(--ec-texto);
}

/* ---------- Campos ---------- */
.ec-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--ec-borde-fuerte);
    border-radius: 12px;
    background: var(--ec-superficie);
    color: var(--ec-texto);
    font-family: var(--ec-fuente);
    font-size: 15px;
}

.ec-input:focus {
    outline: none;
    border-color: var(--ec-primario);
}

.ec-buscador {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1.5px solid var(--ec-borde-fuerte);
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-superficie-2);
    color: var(--ec-texto-2);
}

.ec-buscador input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ec-texto);
    font-family: var(--ec-fuente);
    font-size: 15px;
    outline: none;
}

.ec-etiqueta {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-texto);
}

.ec-titulo-seccion {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ec-texto-2);
}

/* ---------- Stepper (− cantidad +) ---------- */
.ec-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 3px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-primario-suave);
}

.ec-stepper button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--ec-radio-pildora);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ec-stepper .ec-stepper-menos {
    background: var(--ec-superficie);
    color: var(--ec-primario);
}

.ec-stepper .ec-stepper-mas {
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
}

.ec-stepper input,
.ec-stepper .ec-stepper-valor {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: var(--ec-fuente);
    font-size: 14px;
    font-weight: 800;
    color: var(--ec-texto);
}

/* ---------- Ofertas y precios ---------- */
.ec-insignia-oferta {
    display: inline-block;
    padding: 4px 9px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-oferta);
    color: var(--ec-oferta-texto);
    font-size: 12px;
    font-weight: 800;
}

.ec-precio {
    font-size: 20px;
    font-weight: 800;
    color: var(--ec-texto);
}

.ec-precio.oferta {
    color: var(--ec-precio-oferta);
}

.ec-precio-antes {
    font-size: 13px;
    color: var(--ec-texto-2);
    text-decoration: line-through;
}

/* ---------- Contador (carrito, filtros) ---------- */
.ec-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
    font-size: 11px;
    font-weight: 800;
}

/* ---------- Panel que sube desde abajo (celular) y modal (escritorio) ---------- */
.ec-fondo-oscuro {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background: rgba(20, 24, 22, .45);
}

.ec-panel-abajo {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    background: var(--ec-superficie);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--ec-sombra-l);
}

.ec-panel-abajo::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-borde-fuerte);
}

.ec-panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 12px;
}

.ec-panel-cuerpo {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 16px;
}

.ec-panel-pie {
    padding: 12px 20px 20px;
    border-top: 1px solid var(--ec-borde);
}

@media (min-width: 1001px) {
    .ec-panel-abajo {
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: 560px;
        max-height: 85vh;
        transform: translate(-50%, -50%);
        border-radius: var(--ec-radio-l);
        box-shadow: var(--ec-sombra-m);
    }

    .ec-panel-abajo::before {
        display: none;
    }
}

/* ---------- Visibilidad por tamaño (reemplaza isMobile) ---------- */
@media (max-width: 1000px) {
    .ec-solo-escritorio {
        display: none !important;
    }
}

@media (min-width: 1001px) {
    .ec-solo-celular {
        display: none !important;
    }
}

/* ==========================================================================
   Tanda 1: encabezado, navegación, cuenta, pie y aviso de búsqueda
   ========================================================================== */

.ec button,
.ec input {
    font-family: inherit;
}

.ec a,
.ec a:hover,
.ec a:focus {
    text-decoration: none;
}

.ec-pagina {
    min-height: 100vh;
    background: var(--ec-fondo);
}

@media (max-width: 1000px) {
    .ec-pagina {
        padding-bottom: 76px; /* lugar para la barra fija */
    }
}

/* ---------- Franja superior ---------- */
.ec-franja {
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
    font-size: 13px;
}

.ec-franja-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    min-height: 38px;
}

.ec-franja-dato,
.ec-franja-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ec .ec-franja-link,
.ec .ec-franja-link:hover,
.ec .ec-franja-link:focus {
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: var(--ec-primario-texto);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ec-franja-espacio {
    flex: 1;
}

/* ---------- Encabezado ---------- */
.ec-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ec-superficie);
    border-bottom: 1px solid var(--ec-borde);
}

.ec-header-fila {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.ec-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ec-logo img {
    display: block;
    height: 52px;
    max-width: 180px;
    object-fit: contain;
}

.ec-header-buscador {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 4px;
    margin: 0;
}

.ec-header-buscar {
    min-height: 36px;
    padding: 0 18px;
    font-size: 14px;
}

.ec-header-aviso {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--ec-texto);
}

.ec-header-acciones {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ec .ec-header-carrito,
.ec .ec-header-carrito:hover,
.ec .ec-header-carrito:focus {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 18px 6px 8px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
}

.ec .ec-header-carrito:hover {
    background: var(--ec-primario-hover);
}

.ec-header-carrito-icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ec-radio-pildora);
    background: rgba(255, 255, 255, .18);
}

.ec-header-carrito-cantidad {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-oferta);
    color: var(--ec-oferta-texto);
    font-size: 11px;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
}

.ec-header-carrito-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ec-header-carrito-texto small {
    font-size: 11px;
    opacity: .9;
}

.ec-header-carrito-texto strong {
    font-size: 15px;
    font-weight: 800;
}

.ec-cuenta-boton {
    min-height: 48px;
}

.ec-rubros {
    border-top: 1px solid var(--ec-borde);
}

.ec-rubros .ec-chips {
    padding: 10px 0;
}

@media (max-width: 1000px) {
    .ec-header-fila {
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .ec-contenedor {
        padding: 0 16px;
    }

    .ec-logo img {
        height: 38px;
        max-width: 110px;
    }

    .ec-header-buscador {
        padding-right: 14px;
    }

    .ec-header-aviso {
        font-size: 13px;
    }
}

/* ---------- Banner 1 y título del rubro actual ---------- */
.ec-banner-principal {
    margin-top: 16px;
}

.ec-banner-principal img {
    display: block;
    width: 100%;
    aspect-ratio: 24 / 7;
    object-fit: cover;
    border-radius: var(--ec-radio-l);
    background: var(--ec-superficie);
}

.ec-titulo-actual {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 18px;
    padding-bottom: 8px;
}

.ec.ec-titulo-actual h1 {
    font-size: 20px;
}

.ec-titulo-familia {
    color: var(--ec-texto-2);
    font-weight: 700;
}

.ec-titulo-ruta {
    font-size: 13px;
    color: var(--ec-texto-2);
}

.ec .ec-titulo-cambiar {
    align-self: flex-start;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--ec-texto-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ec-titulo-cambiar strong {
    color: var(--ec-primario);
}

@media (max-width: 1000px) {
    .ec-banner-principal {
        margin-top: 12px;
    }

    .ec-banner-principal img {
        border-radius: var(--ec-radio-m);
    }

    .ec.ec-titulo-actual h1 {
        font-size: 18px;
    }
}

/* ---------- Barra fija del celular ---------- */
.ec-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    height: 68px;
    padding: 4px 6px;
    background: var(--ec-superficie);
    border-top: 1px solid var(--ec-borde);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

.ec-barra > .ec-barra-item,
.ec-barra > .ec-barra-celda {
    flex: 1 1 0;
    min-width: 0;
}

.ec-barra-celda {
    display: flex;
}

.ec .ec-barra-item,
.ec .ec-barra-item:hover,
.ec .ec-barra-item:focus {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ec-texto-2);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.ec .ec-barra-item.activo {
    color: var(--ec-primario);
}

.ec .ec-barra-carrito,
.ec .ec-barra-carrito:hover {
    color: var(--ec-texto);
    font-weight: 800;
}

.ec-barra-icono {
    position: relative;
    display: flex;
}

.ec-barra-icono .ec-contador {
    position: absolute;
    top: -7px;
    right: -12px;
}

/* ---------- Menú de categorías (celular) ---------- */
.ec-menu-categorias {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 68px;
    z-index: 39;
    display: flex;
    flex-direction: column;
    background: var(--ec-superficie);
}

.ec-menu-cabecera {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ec-borde);
}

.ec-menu-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ec .ec-menu-titulo h2 {
    font-size: 22px;
}

.ec-menu-buscador {
    margin: 0;
    border-radius: 12px;
    font-weight: 400;
}

.ec-menu-lista {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ec-menu-rubro {
    border-bottom: 1px solid var(--ec-borde);
}

.ec .ec-menu-rubro-boton {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    background: var(--ec-superficie);
    color: var(--ec-texto);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ec-menu-rubro-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ec-radio-s);
    background: var(--ec-primario-suave);
    color: var(--ec-primario);
}

.ec-menu-rubro-nombre {
    flex: 1;
}

.ec-menu-flecha {
    color: var(--ec-texto-2);
}

.ec-menu-familias {
    display: flex;
    flex-direction: column;
    padding: 0 16px 12px 64px;
}

.ec .ec-menu-ver-todo,
.ec .ec-menu-familia {
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--ec-texto);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.ec .ec-menu-ver-todo {
    color: var(--ec-primario);
    font-weight: 700;
}

.ec-menu-cargando,
.ec-menu-vacio {
    padding: 10px 0;
    color: var(--ec-texto-2);
    font-size: 14px;
}

.ec-menu-vacio {
    padding: 20px 16px;
}

/* ---------- Panel de cuenta ---------- */
.ec .ec-panel-titulo {
    font-size: 20px;
}

.ec-cuenta-menu {
    display: flex;
    flex-direction: column;
}

.ec-cuenta-hola {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
}

.ec .ec-cuenta-opcion,
.ec .ec-cuenta-opcion:hover,
.ec .ec-cuenta-opcion:focus {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ec-borde);
    background: transparent;
    color: var(--ec-texto);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.ec-cuenta-flecha {
    margin-left: auto;
    color: var(--ec-texto-2);
}

.ec .ec-cuenta-salir,
.ec .ec-cuenta-salir:hover {
    border-bottom: 0;
    color: var(--ec-error);
}

/* ---------- Ingresar (app-login) ---------- */
.ec .ec-login-titulo {
    font-size: 22px;
}

.ec-login-texto {
    margin: 6px 0 18px;
    color: var(--ec-texto-2);
    font-size: 14px;
}

.ec-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ec-login-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ec-login-recordar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ec-login-recordar input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.ec .ec-login-olvido {
    font-size: 13px;
}

.ec-login-error {
    color: var(--ec-error);
    font-size: 14px;
    font-weight: 600;
}

.ec-login-registro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--ec-borde);
    color: var(--ec-texto-2);
    font-size: 14px;
}

/* ---------- Pie ---------- */
.ec-pie {
    margin-top: 40px;
    background: #1F2421;
    color: #D9DDD8;
    font-size: 14px;
}

.ec-pie-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    padding-top: 36px;
    padding-bottom: 28px;
}

.ec-pie-columna {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ec .ec-pie-columna strong {
    color: #FFFFFF;
    font-size: 15px;
}

.ec .ec-pie-columna a {
    color: #D9DDD8;
}

.ec .ec-pie-columna a:hover,
.ec .ec-pie-columna a:focus {
    color: #FFFFFF;
}

.ec .ec-pie-columna .ec-pie-empresa {
    font-size: 17px;
}

.ec-pie-dato {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ec-pie-firma {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #A9B0AB;
    font-size: 12px;
}

/* ---------- "Ver más productos" ---------- */
.ec-cargar-mas {
    clear: both;
    display: flex;
    justify-content: center;
    padding: 28px 0 8px;
}

/* ---------- Aviso de búsqueda en curso ---------- */
.ec-cargando {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-primario);   /* con el color de la marca: blanco sobre las tarjetas blancas se perdía */
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    color: var(--ec-primario-texto);
    font-size: 15px;
    font-weight: 700;
    transform: translate(-50%, -50%);
}

.ec-cargando-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: var(--ec-primario-texto);
    border-radius: 50%;
    animation: ec-girar .8s linear infinite;
}

@keyframes ec-girar {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- WhatsApp ---------- */
.ec-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    transition: transform .2s;
}

.ec-whatsapp:hover {
    transform: scale(1.06);
}

@media (max-width: 1000px) {
    .ec-whatsapp {
        right: 16px;
        bottom: 84px;
        width: 52px;
        height: 52px;
    }
}

/* ==========================================================================
   Tanda 2: catálogo (banners, filtros, tarjetas de producto, detalle)
   ========================================================================== */

app-incrementador,
app-incrementadorpesable {
    display: block;
}

/* ---------- Banners (Gestión: 1 y 2 = 1200x350, 3 y 4 = 600x600) ----------
   Con flex 24 : 7 : 7 y las proporciones fijas, los tres quedan a la misma altura. */
.ec-banners {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.ec-banner {
    display: block;
    min-width: 0;
    object-fit: cover;
    border-radius: var(--ec-radio-l);
    background: var(--ec-superficie);
}

.ec-banner-ancho {
    flex: 24 1 0;
    width: 100%;
    aspect-ratio: 24 / 7;
}

.ec-banner-cuadrado {
    flex: 7 1 0;
    aspect-ratio: 1 / 1;
}

.ec-banners-sin1 .ec-banner-cuadrado {
    flex: 0 1 300px;
}

.ec-banner-2 {
    margin-bottom: 16px;
}

@media (max-width: 1000px) {
    .ec-banners {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ec-banner {
        border-radius: var(--ec-radio-m);
    }

    .ec-banner-ancho {
        flex: 1 1 100%;
    }

    .ec-banner-cuadrado,
    .ec-banners-sin1 .ec-banner-cuadrado {
        flex: 1 1 calc(50% - 5px);
    }
}

/* ---------- Estructura ---------- */
.ec-catalogo-cuerpo {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 16px;
}

.ec-resultados {
    flex: 1 1 auto;
    min-width: 0;
}

.ec-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

@media (max-width: 1000px) {
    .ec-catalogo-cuerpo {
        display: block;
        margin-top: 8px;
    }

    .ec-grilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ---------- Filtros (escritorio) ---------- */
.ec-filtros {
    position: -webkit-sticky;
    position: sticky;
    top: 196px;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: calc(100vh - 212px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ec-borde-fuerte) transparent;
    padding: 20px;
    border-radius: var(--ec-radio-l);
    background: var(--ec-superficie);
}

.ec-filtros-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ec .ec-filtros-cabecera h2 {
    font-size: 17px;
}

.ec-filtro-grupo {
    display: flex;
    flex-direction: column;
}

/* Aire entre el título ("Familia", "Marca") y sus opciones */
.ec .ec-filtro-grupo > .ec-titulo-seccion {
    margin-bottom: 10px;
}

.ec-filtro-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ec .ec-chip-chico {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
}

/* Nombres largos de familia/marca en el panel de filtros: no se salen del borde, bajan a una segunda línea */
.ec .ec-filtro-chips .ec-chip {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: left;
    line-height: 1.25;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow-wrap: anywhere;
}

.ec .ec-filtro-buscador {
    min-height: 40px;
    margin: 0 0 8px;
    border-radius: var(--ec-radio-s);
    font-weight: 400;
}

.ec-filtro-lista {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

.ec-filtro-lista-grande {
    max-height: none;
}

.ec .ec-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ec .ec-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ec-primario);
}

.ec-filtro-lista-grande .ec-check {
    min-height: 46px;
    border-bottom: 1px solid var(--ec-borde);
    font-size: 15px;
}

.ec-filtro-vacio {
    padding: 8px 0;
    color: var(--ec-texto-2);
    font-size: 13px;
}

.ec .ec-filtro-mas {
    align-self: flex-start;
    margin-top: 8px;
    font-size: 13px;
}

.ec-filtros-activos {
    margin-bottom: 12px;
}

/* ---------- Filtros (celular) ---------- */
.ec-filtros-celular {
    margin-top: 6px;
}

.ec-filtros-celular .ec-tabs {
    border-bottom: 1px solid var(--ec-borde);
}

.ec-filtros-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 4px;
}

.ec .ec-btn-filtros {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
}

.ec-filtros-fila .ec-chips {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------- Tarjeta de producto ---------- */
.ec-producto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1.5px solid transparent;
    border-radius: var(--ec-radio-l);
    background: var(--ec-superficie);
    transition: border-color .15s, box-shadow .15s;
}

.ec-producto:hover {
    box-shadow: var(--ec-sombra-m);
}

.ec-producto.en-carrito {
    border-color: var(--ec-primario);
}

/* Recuadro siempre cuadrado: la foto se achica adentro sea cual sea su tamaño
   (min-height: 0 + overflow evitan que una foto alta estire el recuadro) */
.ec .ec-producto-foto {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: var(--ec-superficie);
    cursor: zoom-in;
}

.ec-producto-foto img {
    position: absolute;
    top: 8px;
    left: 8px;
    display: block;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: contain;
}

.ec-producto-foto .ec-producto-insignia,
.ec-producto-foto .ec-producto-etiqueta,
.ec-producto-foto .ec-producto-check {
    z-index: 1;
}

.ec-producto-insignia {
    position: absolute;
    top: 6px;
    left: 6px;
}

.ec-producto-etiqueta {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 4px 8px;
    border: 1px solid var(--ec-borde);
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-superficie);
    color: var(--ec-texto);
    font-size: 11px;
    font-weight: 700;
}

.ec-producto-check {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
}

.ec-producto-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-producto-marca {
    color: var(--ec-texto-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ec .ec-producto-nombre {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 54px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.ec-producto-stock {
    color: var(--ec-exito);
    font-size: 12px;
    font-weight: 700;
}

.ec-producto-stock.sin-stock {
    color: var(--ec-error);
}

.ec-segmento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--ec-fondo);
}

.ec .ec-segmento button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ec-texto-2);
    cursor: pointer;
}

.ec .ec-segmento button.activo {
    background: var(--ec-superficie);
    color: var(--ec-texto);
    box-shadow: var(--ec-sombra-s);
}

.ec-segmento span {
    font-size: 12px;
    font-weight: 700;
}

.ec-segmento small {
    font-size: 11px;
}

.ec-producto-precio {
    display: flex;
    flex-direction: column;
}

.ec-producto-precio-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}

.ec-producto-precio-fila small {
    color: var(--ec-texto-2);
    font-size: 12px;
}

.ec-producto-detalle {
    color: var(--ec-texto-2);
    font-size: 11px;
}

.ec-producto-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
}

.ec .ec-btn.listo,
.ec .ec-btn.listo:hover {
    background: var(--ec-exito);
}

@media (max-width: 1000px) {
    .ec-producto {
        gap: 8px;
        padding: 10px;
        border-radius: var(--ec-radio-m);
    }

    .ec .ec-producto-nombre {
        font-size: 13px;
        min-height: 51px;
    }

    .ec .ec-precio {
        font-size: 18px;
    }
}

/* ---------- Stepper con campo editable (app-incrementador) ---------- */
.ec-stepper-campo input {
    -moz-appearance: textfield;
    padding: 0;
    height: 38px;
}

.ec-stepper-campo input::-webkit-outer-spin-button,
.ec-stepper-campo input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ec-stepper-campo input:focus {
    outline: none;
}

.ec-stepper-unidad {
    margin: 0 4px 0 -4px;
    color: var(--ec-texto-2);
    font-size: 12px;
    font-weight: 700;
}

/* ---------- Sin resultados ---------- */
.ec-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 20px;
    border-radius: var(--ec-radio-l);
    background: var(--ec-superficie);
    color: var(--ec-texto-2);
    text-align: center;
}

.ec .ec-vacio h2 {
    font-size: 18px;
}

.ec-vacio p {
    margin: 0 0 8px;
    font-size: 14px;
}

/* ---------- Detalle del producto ---------- */
.ec-detalle-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 24px;
}

.ec-detalle-foto {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
}

.ec-detalle-foto img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ec-detalle-foto .ec-producto-insignia {
    z-index: 1;
}

.ec-detalle-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ec .ec-detalle-nombre {
    font-size: 22px;
}

.ec-detalle-codigo {
    color: var(--ec-texto-2);
    font-size: 12px;
}

.ec .ec-detalle-precio {
    font-size: 28px;
}

.ec-detalle .ec-producto-acciones {
    margin-top: 8px;
}

@media (min-width: 1001px) {
    .ec-panel-abajo.ec-detalle {
        width: 820px;
    }
}

@media (max-width: 1000px) {
    .ec-detalle-cuerpo {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ec-detalle-foto {
        max-width: 240px;
        margin: 0 auto;
    }
}

/* ---------- Barra de rubros: flechas y "Todos los rubros" ---------- */
.ec-rubros-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-rubros-carril {
    position: relative; /* para que offsetLeft de los chips sea dentro de la barra */
    flex: 1 1 auto;
    min-width: 0;
}

.ec-rubros-carril.sombra-izq {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
    mask-image: linear-gradient(to right, transparent 0, #000 32px);
}

.ec-rubros-carril.sombra-der {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px);
    mask-image: linear-gradient(to left, transparent 0, #000 32px);
}

.ec-rubros-carril.sombra-izq.sombra-der {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.ec .ec-rubros-flecha {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--ec-borde);
    border-radius: 50%;
    background: var(--ec-superficie);
    color: var(--ec-texto);
    cursor: pointer;
}

.ec .ec-rubros-flecha:hover {
    border-color: var(--ec-texto-3);
}

.ec .ec-rubros-todos {
    flex: 0 0 auto;
    border-color: var(--ec-borde-fuerte);
    background: var(--ec-superficie-2);
}

.ec .ec-rubros-todos.activo {
    background: var(--ec-texto);
    border-color: var(--ec-texto);
    color: var(--ec-superficie);
}

.ec-fondo-suave {
    background: rgba(20, 24, 22, .25);
}

.ec-rubros-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px 0 24px;
    border-top: 1px solid var(--ec-borde);
    background: var(--ec-superficie);
    box-shadow: var(--ec-sombra-m);
}

.ec-rubros-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.ec .ec-rubros-opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 12px;
    border: 1.5px solid transparent;
    border-radius: var(--ec-radio-m);
    background: transparent;
    color: var(--ec-texto);
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ec .ec-rubros-opcion:hover {
    background: var(--ec-fondo);
}

.ec .ec-rubros-opcion.activo {
    border-color: var(--ec-primario);
    background: var(--ec-primario-suave);
}

/* ---------- Pantallas grandes: aprovechar el ancho ---------- */
@media (min-width: 1600px) {
    .ec-grilla {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 20px;
    }

    .ec-filtros {
        flex-basis: 280px;
    }
}

/* ---------- Banners del inicio (en el encabezado, arriba del título) ---------- */
.ec-banners-inicio {
    padding-top: 16px;
}

.ec-banners-inicio > .ec-banner-ancho {
    width: 100%;
}

.ec-banners-inicio .ec-banners {
    margin-top: 16px;
}

@media (max-width: 1000px) {
    .ec-banners-inicio {
        padding-top: 12px;
    }

    .ec-banners-inicio .ec-banners {
        margin-top: 10px;
    }
}

/* Barra de desplazamiento fina en el filtro lateral */
.ec-filtros::-webkit-scrollbar,
.ec-filtro-lista::-webkit-scrollbar {
    width: 6px;
}

.ec-filtros::-webkit-scrollbar-thumb,
.ec-filtro-lista::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--ec-borde-fuerte);
}

/* ---------- Encabezado del celular: logo arriba, buscador a lo ancho ---------- */
@media (max-width: 1000px) {
    .ec-header-fila {
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 12px;
    }

    .ec-logo {
        flex: 1 1 auto;
    }

    .ec-logo img {
        height: 36px;
        max-width: 150px;
    }

    .ec-header-buscador {
        order: 3;
        flex: 1 1 100%;
        min-height: 46px;
        padding: 0 16px;
        background: var(--ec-superficie);
        border-color: var(--ec-borde-fuerte);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    }

    .ec-header-buscador input {
        font-size: 16px; /* 16 px evita que el iPhone haga zoom al tocar */
    }

    .ec-header-acciones {
        margin-left: auto;
    }
}

/* Celular: logo centrado arriba del buscador */
@media (max-width: 1000px) {
    .ec-logo {
        justify-content: center;
    }

    .ec-header-acciones:empty {
        display: none;
    }
}

/* ==========================================================================
   Tanda 3: carrito y checkout
   ========================================================================== */

.ec-carrito-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 0 16px;
}

.ec-carrito-logo img {
    display: block;
    height: 44px;
    max-width: 160px;
    margin-bottom: 10px;
    object-fit: contain;
}

.ec .ec-carrito-cabecera h1 {
    font-size: 24px;
}

.ec-carrito-cabecera h1 span {
    color: var(--ec-texto-2);
    font-size: 16px;
    font-weight: 600;
}

.ec-carrito-cabecera-acciones {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ec .ec-carrito-vaciar {
    color: var(--ec-error);
    font-size: 14px;
}

.ec-carrito-vacio {
    margin: 12px 0 40px;
}

.ec-carrito-cuerpo {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.ec-carrito-principal {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ec-carrito-resumen {
    position: -webkit-sticky;
    position: sticky;
    top: 16px;
    flex: 0 0 380px;
}

.ec .ec-carrito-titulo {
    margin-bottom: 14px;
    font-size: 18px;
}

.ec .ec-carrito-subtitulo {
    margin-top: 18px;
}

/* ---------- Lista de productos ---------- */
.ec-carrito-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-carrito-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto 120px;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ec-borde);
}

.ec-carrito-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.ec-carrito-foto {
    width: 72px;
    height: 72px;
    padding: 4px;
    border: 1px solid var(--ec-borde);
    border-radius: 12px;
    background: var(--ec-superficie);
    object-fit: contain;
}

.ec-carrito-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.ec-carrito-nombre {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;   /* nombres sin espacios (ACOND.HIDRATACION+VIT.X400ML) se salían en el celular */
}

.ec-carrito-precios {
    color: var(--ec-texto-2);
    font-size: 13px;
}

.ec-carrito-oferta {
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
}

.ec-carrito-cantidades {
    display: flex;
    gap: 12px;
}

.ec-carrito-cantidad {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 150px;
}

.ec-carrito-cantidad-titulo {
    color: var(--ec-texto-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ec-carrito-subtotal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ec-carrito-subtotal strong {
    font-size: 17px;
    font-weight: 800;
}

.ec .ec-carrito-quitar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--ec-texto-2);
    font-size: 13px;
    cursor: pointer;
}

.ec .ec-carrito-quitar:hover {
    color: var(--ec-error);
}

/* ---------- Opciones (entrega, medio de pago) ---------- */
.ec-opciones {
    display: grid;
    gap: 10px;
}

.ec-opciones-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ec-opciones-medios {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.ec .ec-opcion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--ec-borde);
    border-radius: var(--ec-radio-m);
    background: var(--ec-superficie);
    color: var(--ec-texto);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ec .ec-opcion.activo {
    border-color: var(--ec-primario);
    background: var(--ec-primario-suave);
}

.ec .ec-opcion-chica {
    align-items: center;
    justify-content: center;
    min-height: 52px;
    text-align: center;
}

/* Día de entrega: próximos días como botones (carrito) */
.ec-opciones-dias {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
}

.ec .ec-opcion-dia {
    flex-direction: column;
    gap: 2px;
    min-height: 58px;
    padding: 8px 6px;
}

.ec .ec-opcion-dia small {
    color: var(--ec-texto-2);
    font-size: 12px;
    font-weight: 600;
}

.ec-input-fecha {
    margin-top: 10px;
    max-width: 260px;
}

.ec-opcion-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-opcion-texto strong {
    font-size: 15px;
}

.ec-opcion-texto small {
    color: var(--ec-texto-2);
    font-size: 13px;
    font-weight: 500;
}

.ec-radios {
    display: flex;
    flex-direction: column;
}

/* ---------- Campos ---------- */
.ec-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.ec-campo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ec-campo-ancho {
    grid-column: 1 / -1;
}

.ec-carrito-seccion > .ec-campo-ancho {
    margin-top: 16px;
}

.ec-input[readonly] {
    background: var(--ec-superficie-2);
    color: var(--ec-texto-2);
}

textarea.ec-input {
    resize: vertical;
}

.ec-campo-ayuda {
    margin-top: 4px;
    color: var(--ec-texto-2);
    font-size: 12px;
}

.ec-campo-error {
    margin-top: 4px;
    color: var(--ec-error);
    font-size: 12px;
    font-weight: 600;
}

.ec-carrito-aviso {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ec-oferta-suave);
    font-size: 14px;
}

/* ---------- Resumen ---------- */
.ec-resumen {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
}

.ec .ec-resumen .ec-carrito-titulo {
    margin-bottom: 4px;
}

.ec-resumen-fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
}

.ec-resumen-descuento {
    color: var(--ec-exito);
    font-weight: 700;
}

.ec-resumen-separador {
    height: 1px;
    background: var(--ec-borde);
}

.ec-resumen-total {
    align-items: baseline;
    font-size: 17px;
    font-weight: 700;
}

.ec-resumen-total strong {
    font-size: 28px;
    font-weight: 800;
}

.ec-resumen-nota {
    color: var(--ec-texto-2);
    font-size: 12px;
}

.ec-resumen-minimo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ec-superficie-2);
    font-size: 13px;
    font-weight: 600;
}

.ec-resumen-barra {
    height: 8px;
    overflow: hidden;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-borde);
}

.ec-resumen-barra div {
    height: 100%;
    background: var(--ec-primario);
}

/* ---------- Barra fija del celular ---------- */
.ec-carrito-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--ec-superficie);
    border-top: 1px solid var(--ec-borde);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}

.ec-carrito-barra-total {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.ec-carrito-barra-total small {
    color: var(--ec-texto-2);
    font-size: 12px;
}

.ec-carrito-barra-total strong {
    font-size: 20px;
    font-weight: 800;
}

.ec .ec-carrito-barra .ec-btn {
    min-height: 48px;
    padding: 0 22px;
}

@media (max-width: 1000px) {
    .ec-carrito .ec-contenedor {
        padding-bottom: 20px;
    }

    .ec-carrito-cabecera {
        align-items: flex-start;
        padding: 14px 0 12px;
    }

    .ec-carrito-logo img {
        height: 36px;
    }

    .ec .ec-carrito-cabecera h1 {
        font-size: 20px;
    }

    .ec-carrito-cabecera-acciones .ec-btn-borde {
        display: none;
    }

    .ec-carrito-cuerpo {
        display: block;
    }

    .ec-carrito-resumen {
        position: static;
        margin-top: 16px;
    }

    .ec-carrito-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px 12px;
    }

    .ec-carrito-foto {
        width: 64px;
        height: 64px;
    }

    .ec-carrito-cantidades {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .ec-carrito-cantidad {
        flex: 1 1 140px;
        width: auto;
    }

    .ec-carrito-subtotal {
        grid-column: 1 / -1;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }

    .ec-opciones-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ec-opciones-medios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ec-campos {
        grid-template-columns: minmax(0, 1fr);
    }

    /* lugar para la barra fija de confirmar */
    .ec-pagina.ec-carrito {
        padding-bottom: 80px;
    }
}

/* ---------- Encabezado del carrito (logo, pasos, seguir comprando) ---------- */
.ec-carrito-encabezado {
    background: var(--ec-superficie);
    border-bottom: 1px solid var(--ec-borde);
}

.ec-carrito-encabezado-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
}

.ec-pasos {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ec-texto-2);
    font-size: 14px;
    font-weight: 600;
}

.ec-pasos li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ec-paso-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ec-borde);
    color: var(--ec-texto);
    font-size: 13px;
    font-weight: 800;
}

.ec-pasos li.hecho,
.ec-pasos li.actual {
    color: var(--ec-texto);
}

.ec-pasos li.hecho .ec-paso-numero,
.ec-pasos li.actual .ec-paso-numero {
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
}

.ec-pasos li.actual {
    font-weight: 800;
}

.ec-pasos .ec-paso-linea {
    width: 36px;
    height: 2px;
    background: var(--ec-borde-fuerte);
}

.ec-pasos .ec-paso-linea.hecho {
    background: var(--ec-primario);
}

.ec-carrito-cabecera {
    align-items: center;
}

@media (max-width: 1000px) {
    .ec-carrito-encabezado-fila {
        justify-content: center;
        min-height: 60px;
    }

    .ec-carrito-encabezado .ec-logo {
        flex: 0 0 auto;
    }

    .ec-carrito-cabecera {
        align-items: center;
    }
}

/* Carrito en el celular: una sola barra blanca (volver · logo · cuenta), sin la franja verde */
@media (max-width: 1000px) {
    .ec-carrito .ec-franja-paginas {
        display: none;
    }

    .ec-carrito-encabezado-fila {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 8px;
        min-height: 64px;
        align-content: center;
    }

    /* el contenedor general le dejaba 20 px abajo y 0 arriba: los botones quedaban pegados al borde de arriba */
    .ec-carrito-encabezado .ec-carrito-encabezado-fila {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .ec-carrito-encabezado .ec-logo {
        justify-content: center;
    }

    .ec .ec-carrito-encabezado .ec-btn-icono {
        color: var(--ec-texto);
    }
}

/* ---------- Página: sin el margen de 110 px de blue.css (plantilla vieja) ---------- */
html body {
    margin-bottom: 0 !important;
    background: var(--ec-fondo);
}

/* ---------- Pie (versión final) ---------- */
.ec-pie {
    margin-top: 48px;
}

.ec-pie-grilla {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-top: 44px;
    padding-bottom: 36px;
}

.ec-pie-texto {
    max-width: 360px;
    color: #A9B0AB;
    line-height: 1.5;
}

.ec .ec-pie-columna .ec-pie-whatsapp {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 14px;
    border-radius: var(--ec-radio-pildora);
    background: #25D366;
    color: #FFFFFF;
    font-weight: 700;
}

.ec .ec-pie-columna a.ec-pie-dato {
    color: #D9DDD8;
}

.ec-pie-dato app-icono {
    color: #A9B0AB;
}

.ec-pie-pasos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-pie-pasos li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ec-pie-pasos span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
}

.ec-pie-firma-fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 20px;
}

@media (max-width: 1000px) {
    /* el lugar de la barra fija va dentro del pie (antes quedaba una franja gris debajo) */
    .ec-pagina:not(.ec-carrito) {
        padding-bottom: 0;
    }

    .ec-pie {
        margin-top: 32px;
    }

    .ec-pie-grilla {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px 16px;
        padding-top: 32px;
        padding-bottom: 24px;
    }

    .ec-pie-marca {
        grid-column: 1 / -1;
    }

    .ec-pie-firma {
        padding-bottom: 84px; /* barra fija del celular */
    }
}

/* Lista de marcas del filtro lateral: letra más chica y renglones compactos */
.ec .ec-filtros .ec-check {
    gap: 9px;
    min-height: 30px;
    color: var(--ec-texto);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
}

.ec .ec-filtros .ec-check input {
    width: 16px;
    height: 16px;
}

.ec .ec-filtros .ec-check:hover {
    color: var(--ec-primario);
}

/* Pie en el celular: una columna (los mails largos se pisaban con la columna de al lado) */
.ec-pie-dato {
    overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
    .ec-pie-grilla {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

/* ==========================================================================
   Tanda 4: pantallas secundarias (registro/perfil, mail, preguntas, términos)
   ========================================================================== */

.ec-angosto {
    max-width: 880px;
    padding-bottom: 48px;
}

.ec .ec-pagina-titulo {
    margin-top: 24px;
    font-size: 26px;
}

.ec-pagina-bajada {
    margin: 6px 0 20px;
    color: var(--ec-texto-2);
    font-size: 15px;
}

/* ---------- Formularios ---------- */
.ec-formulario {
    margin-bottom: 16px;
    padding: 24px;
}

.ec-formulario-angosto {
    max-width: 520px;
    margin: 24px auto;
}

.ec-formulario-angosto .ec-pagina-titulo {
    margin-top: 0;
}

.ec-campos-1 {
    grid-template-columns: minmax(0, 1fr);
}

.ec-formulario .ec-campos {
    margin-top: 0;
}

.ec-input:disabled {
    background: var(--ec-superficie-2);
    color: var(--ec-texto-2);
    cursor: not-allowed;
}

.ec-formulario-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* ---------- Avisos propios (no se usa .alert de Bootstrap) ---------- */
.ec-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
}

.ec-aviso-ok {
    background: #E8F5EC;
    color: #14532D;
}

.ec-aviso-error {
    background: #FDECEA;
    color: #8A1C12;
}

.ec-aviso-info {
    background: var(--ec-oferta-suave);
    color: #4A3A00;
}

/* ---------- Resultado (cuenta activada) ---------- */
.ec-resultado {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ec-resultado .ec-pagina-titulo {
    margin-top: 12px;
}

.ec-resultado-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.ec-resultado-icono.ok {
    background: #E8F5EC;
    color: var(--ec-exito);
}

.ec-resultado-icono.error {
    background: #FDECEA;
    color: var(--ec-error);
}

/* ---------- Preguntas frecuentes ---------- */
.ec-preguntas {
    padding: 8px 24px;
}

.ec-preguntas details {
    border-bottom: 1px solid var(--ec-borde);
}

.ec-preguntas details:last-child {
    border-bottom: 0;
}

.ec-preguntas summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    font-size: 16px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.ec-preguntas summary::-webkit-details-marker {
    display: none;
}

.ec-preguntas summary::after {
    content: '+';
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ec-primario-suave);
    color: var(--ec-primario);
    font-size: 18px;
    font-weight: 700;
}

.ec-preguntas details[open] summary::after {
    content: '−';
}

.ec-pregunta-texto {
    padding: 0 0 18px;
    color: var(--ec-texto-2);
    font-size: 15px;
    line-height: 1.6;
}

.ec-pregunta-texto p {
    margin: 0 0 8px;
}

.ec-pregunta-texto ul {
    margin: 0;
    padding-left: 20px;
}

.ec-ayuda-contacto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    font-size: 15px;
}

.ec .ec-ayuda-contacto a,
.ec .ec-pregunta-texto a,
.ec .ec-texto-legal a {
    color: var(--ec-primario);
    font-weight: 700;
}

/* ---------- Términos (texto legal tal cual, con tipografía legible) ---------- */
.ec-texto-legal {
    margin: 24px 0 0;
    padding: 28px 32px;
}

.ec-texto-legal .ec-pagina-titulo {
    margin-top: 0;
}

.ec-texto-legal .highlight {
    margin: 8px 0 20px;
    color: var(--ec-texto-2);
    font-size: 14px;
}

.ec .ec-texto-legal h3 {
    margin: 26px 0 8px;
    font-size: 17px;
    font-weight: 800;
}

.ec-texto-legal p {
    margin: 0 0 10px;
    color: #3A403C;
    font-size: 15px;
    line-height: 1.65;
}

/* ---------- Celular ---------- */
@media (max-width: 1000px) {
    .ec-pagina-simple .ec-franja-paginas {
        display: none;
    }

    .ec .ec-pagina-titulo {
        margin-top: 16px;
        font-size: 22px;
    }

    .ec-formulario,
    .ec-preguntas,
    .ec-texto-legal {
        padding: 18px;
    }

    .ec-formulario-angosto {
        margin: 16px auto;
    }

    .ec-formulario-acciones .ec-btn {
        flex: 1 1 100%;
    }
}

/* ---------- Alertas de sweetalert con el estilo del tema ---------- */
.swal-overlay {
    background-color: rgba(20, 24, 22, .45);
}

.swal-modal {
    width: 420px;
    max-width: calc(100% - 32px);
    border-radius: var(--ec-radio-l);
    font-family: var(--ec-fuente);
    box-shadow: var(--ec-sombra-m);
}

.swal-title {
    color: var(--ec-texto);
    font-family: var(--ec-fuente);
    font-size: 20px;
    font-weight: 800;
}

.swal-text {
    color: var(--ec-texto-2);
    font-family: var(--ec-fuente);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.swal-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px 22px;
    text-align: center;
}

.swal-button {
    min-height: 44px;
    padding: 0 26px;
    border-radius: var(--ec-radio-pildora);
    background-color: var(--ec-primario);
    color: var(--ec-primario-texto);
    font-family: var(--ec-fuente);
    font-size: 15px;
    font-weight: 700;
}

.swal-button:not([disabled]):hover {
    background-color: var(--ec-primario-hover);
}

.swal-button:focus {
    box-shadow: 0 0 0 3px var(--ec-primario-suave);
}

.swal-content__input {
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--ec-borde-fuerte);
    border-radius: 12px;
    font-family: var(--ec-fuente);
    font-size: 15px;
}

.swal-content__input:focus {
    border-color: var(--ec-primario);
    outline: none;
}

/* ---------- Avisos de ng2-toastr (la librería no trae hoja de estilos cargada) ---------- */
#toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100% - 32px);
}

#toast-container .toast {
    width: 340px;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--ec-texto);
    color: #FFFFFF;
    font-family: var(--ec-fuente);
    font-size: 14px;
    box-shadow: var(--ec-sombra-m);
    opacity: 1;
}

#toast-container .toast-success {
    background: var(--ec-exito);
}

#toast-container .toast-error {
    background: var(--ec-error);
}

#toast-container .toast-warning {
    background: #8A6A00;
}

#toast-container .toast-title {
    font-weight: 800;
}

/* Carrito: aire al final de la página (la última tarjeta quedaba pegada al borde) */
.ec-carrito > .ec-contenedor {
    padding-bottom: 56px;
}

/* ==========================================================================
   Tanda 5: base propia (ya no se cargan bootstrap.min.css, main.css ni blue.css)
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ec-fondo);
    color: var(--ec-texto);
    font-family: var(--ec-fuente);
    font-size: 15px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    border: 0;
}

button,
input,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin: 0 0 10px;
}

[hidden] {
    display: none !important;
}

/* Precio por cantidad mínima de la lista ("Llevando 75 u. o más..." / "Sumá 6 bultos y pagás...") */
.ec .ec-precio-cantidad {
    display: block;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: var(--ec-radio-s);
    background: var(--ec-primario-suave);
    color: var(--ec-primario);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- Banners genéricos: completan los lugares vacíos de la fila de abajo (colores de la empresa) ---------- */
.ec .ec-banner-generico {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    overflow: hidden;
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
    text-align: center;
}

.ec .ec-banner-generico strong {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
}

.ec .ec-banner-generico span {
    font-size: 14px;
    line-height: 1.3;
    opacity: .9;
}

.ec .ec-banner-generico-suave {
    background: var(--ec-primario-suave);
    color: var(--ec-primario);
}

.ec .ec-banner-generico-ancho {
    flex-direction: row;
    gap: 20px;
    padding: 24px 40px;
    text-align: left;
}

.ec .ec-banner-generico-ancho .ec-banner-generico-texto {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ec .ec-banner-generico-ancho strong {
    font-size: 28px;
}

@media (max-width: 1000px) {
    .ec .ec-banner-generico {
        padding: 12px;
        gap: 6px;
    }

    .ec .ec-banner-generico strong {
        font-size: 15px;
    }

    .ec .ec-banner-generico span {
        font-size: 12px;
    }

    .ec .ec-banner-generico-ancho {
        padding: 14px 18px;
        gap: 12px;
    }

    .ec .ec-banner-generico-ancho strong {
        font-size: 18px;
    }
}

/* ---------- Ofertas y promociones (E1): acceso, etiquetas y ahorro en el carrito ---------- */
.ec .ec-chip-ofertas {
    border-color: var(--ec-precio-oferta);
    background: var(--ec-precio-oferta);
    color: #FFFFFF;
}

.ec .ec-chip-ofertas.activo {
    border-color: var(--ec-precio-oferta);
    background: var(--ec-precio-oferta);
    color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.25);
}

.ec .ec-menu-ofertas {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-bottom: 1px solid var(--ec-borde);
    background: rgba(180, 35, 24, 0.07);
    color: var(--ec-precio-oferta);
    font-size: 15px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.ec .ec-menu-ofertas .ec-menu-rubro-nombre {
    flex: 1;
}

.ec .ec-ofertas-generales {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--ec-texto-2);
}

.ec .ec-ofertas-generales strong {
    padding: 3px 10px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-oferta-suave);
    color: var(--ec-oferta-texto);
    font-weight: 700;
}

.ec .ec-insignia-promo {
    display: inline-block;
    padding: 4px 9px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-precio-oferta);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
}

.ec .ec-promo-detalle {
    display: block;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: var(--ec-radio-s);
    background: var(--ec-oferta-suave);
    color: var(--ec-oferta-texto);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.ec .ec-carrito-promo {
    display: block;
    margin-top: 4px;
    color: var(--ec-exito);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

/* Oferta (precio fijo) en rojo y promo (condición de compra) en amarillo: se distinguen por color y rótulo */
.ec .ec-insignia-oferta {
    background: var(--ec-precio-oferta);
    color: #FFFFFF;
}

.ec .ec-insignia-promo {
    background: var(--ec-oferta);
    color: var(--ec-oferta-texto);
}

.ec .ec-insignia-oferta small,
.ec .ec-insignia-promo small {
    margin-right: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Acceso "Promociones" (amarillo, como la línea de la promo en la tarjeta) */
.ec .ec-chip-promociones {
    border-color: var(--ec-oferta);
    background: var(--ec-oferta);
    color: var(--ec-oferta-texto);
}

.ec .ec-chip-promociones.activo {
    box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.45);
}

.ec .ec-menu-promociones {
    background: var(--ec-oferta-suave);
    color: var(--ec-oferta-texto);
}

/* "Combiná con...": link en la línea de la promo y panel con los otros productos */
.ec .ec-promo-combinar {
    display: block;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.ec .ec-combinar-titulo {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
}

.ec .ec-combinar-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec .ec-combinar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ec-borde);
}

.ec .ec-combinar-item img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--ec-radio-s);
    background: var(--ec-superficie);
}

.ec .ec-combinar-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec .ec-combinar-nombre {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.ec .ec-combinar-item .ec-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ec .ec-combinar-vacio,
.ec .ec-combinar-nota {
    margin: 12px 0 0;
    color: var(--ec-texto-2);
    font-size: 13px;
}

.ec .ec-combinar-nombre {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 600px) {
    .ec .ec-combinar-item .ec-btn {
        min-height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }
}

/* Banners con destino (F2): el link ocupa el lugar del banner y la imagen lo llena */
.ec .ec-banner-link {
    overflow: hidden;
    cursor: default;
}

.ec .ec-banner-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec .ec-banner-link.con-destino {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ec .ec-banner-link.con-destino:hover {
    transform: translateY(-2px);
    box-shadow: var(--ec-sombra-m);
}

.ec .ec-banner-link.con-destino:focus-visible {
    outline: 3px solid var(--ec-primario);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ec .ec-banner-link.con-destino { transition: none; }
    .ec .ec-banner-link.con-destino:hover { transform: none; }
}

/* ---------- Carrito (E2): aviso de precios actualizados y pantalla "Pedido enviado" ---------- */
/* Aviso simple (lo usa "Mis pedidos") */
.ec .ec-aviso-precios {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--ec-radio-m);
    background: var(--ec-oferta-suave);
    color: var(--ec-oferta-texto);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.ec .ec-aviso-precios span { flex: 1; min-width: 0; }
.ec .ec-aviso-precios .ec-btn-icono { flex: 0 0 auto; width: 32px; height: 32px; min-height: 32px; }

/* Revisión del carrito al abrirlo: un aviso por tipo + marca en el renglón afectado.
   Colores por tipo: rojo = sin stock / ya no está a la venta, ámbar = cantidad ajustada o a revisar, azul = precio, neutro = info */
.ec {
    --ec-aviso-rojo: var(--ec-error);
    --ec-aviso-rojo-suave: #FDECEA;
    --ec-aviso-ambar: #8A5300;
    --ec-aviso-ambar-suave: #FFF3DC;
    --ec-aviso-azul: #1F5F9E;
    --ec-aviso-azul-suave: #E8F1FB;
}

.ec .ec-avisos-carrito {
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ec-borde);
    border-radius: var(--ec-radio-m);
    background: var(--ec-superficie);
    box-shadow: var(--ec-sombra-s);
}

.ec .ec-avisos-carrito-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 15px;
}

.ec .ec-avisos-carrito-cabecera .ec-btn-icono { flex: 0 0 auto; width: 32px; height: 32px; min-height: 32px; }

.ec .ec-avisos-carrito ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec .ec-aviso-carrito {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--ec-radio-s);
    background: var(--ec-superficie-2);
    color: var(--ec-texto);
    font-size: 14px;
    line-height: 1.35;
}

.ec .ec-aviso-carrito-icono {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ec-superficie);
}

.ec .ec-aviso-carrito-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec .ec-aviso-carrito-texto strong { font-weight: 700; }
.ec .ec-aviso-carrito-texto span { color: var(--ec-texto-2); font-size: 13px; overflow-wrap: anywhere; }

.ec .ec-aviso-carrito-stock,
.ec .ec-aviso-carrito-quitado { background: var(--ec-aviso-rojo-suave); }
.ec .ec-aviso-carrito-stock .ec-aviso-carrito-icono,
.ec .ec-aviso-carrito-quitado .ec-aviso-carrito-icono,
.ec .ec-aviso-carrito-stock strong,
.ec .ec-aviso-carrito-quitado strong { color: var(--ec-aviso-rojo); }

.ec .ec-aviso-carrito-ajuste,
.ec .ec-aviso-carrito-revisar { background: var(--ec-aviso-ambar-suave); }
.ec .ec-aviso-carrito-ajuste .ec-aviso-carrito-icono,
.ec .ec-aviso-carrito-revisar .ec-aviso-carrito-icono,
.ec .ec-aviso-carrito-ajuste strong,
.ec .ec-aviso-carrito-revisar strong { color: var(--ec-aviso-ambar); }

.ec .ec-aviso-carrito-precio { background: var(--ec-aviso-azul-suave); }
.ec .ec-aviso-carrito-precio .ec-aviso-carrito-icono,
.ec .ec-aviso-carrito-precio strong { color: var(--ec-aviso-azul); }

/* Renglón afectado: borde a la izquierda del color del aviso + marca debajo de la descripción */
.ec .ec-carrito-item-aviso {
    margin-left: -10px;
    padding-left: 10px;
    box-shadow: inset 3px 0 0 var(--ec-aviso-azul);
}
.ec .ec-carrito-item-aviso-ajuste,
.ec .ec-carrito-item-aviso-revisar { box-shadow: inset 3px 0 0 var(--ec-aviso-ambar); }

.ec .ec-carrito-marca {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 3px 9px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-aviso-azul-suave);
    color: var(--ec-aviso-azul);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}
.ec .ec-carrito-marca-ajuste,
.ec .ec-carrito-marca-revisar { background: var(--ec-aviso-ambar-suave); color: var(--ec-aviso-ambar); }

.ec .ec-pedido-enviado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 24px auto 40px;
    padding: 32px 24px;
    text-align: center;
}

.ec .ec-pedido-enviado h1 { margin: 0; font-size: 26px; font-weight: 800; }

.ec .ec-pedido-enviado-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--ec-primario-suave);
    color: var(--ec-primario);
}

.ec .ec-pedido-enviado-numero {
    margin: 0;
    padding: 6px 14px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-primario-suave);
    color: var(--ec-primario);
    font-weight: 800;
}

.ec .ec-pedido-enviado-texto { margin: 0; color: var(--ec-texto-2); line-height: 1.5; }

.ec .ec-pedido-enviado-datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    width: 100%;
    margin: 8px 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--ec-borde);
    border-radius: var(--ec-radio-m);
    text-align: left;
}

.ec .ec-pedido-enviado-datos dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-texto-3); }
.ec .ec-pedido-enviado-datos dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.ec .ec-pedido-enviado-ahorro { color: var(--ec-exito); }
.ec .ec-pedido-enviado-total { color: var(--ec-primario); font-size: 18px; }

/* Orden del catálogo (E3) */
.ec .ec-barra-orden {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--ec-texto-2);
}

.ec .ec-barra-orden label { margin: 0; font-weight: 600; }

.ec .ec-select-orden {
    min-height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--ec-borde);
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-superficie);
    color: var(--ec-texto);
    font-family: var(--ec-fuente);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* ---------- Mis pedidos (E4) ---------- */
.ec .ec-mispedidos-estado { color: var(--ec-texto-2); }

.ec .ec-mispedidos-vacio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
}

.ec .ec-mispedidos-vacio p { margin: 0; color: var(--ec-texto-2); }

.ec .ec-mispedidos-pedido {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding: 16px;
}

.ec .ec-mispedidos-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ec .ec-mispedidos-cabecera strong { display: block; font-size: 17px; font-weight: 800; }
.ec .ec-mispedidos-cabecera small { color: var(--ec-texto-2); }

.ec .ec-mispedidos-estado-pill {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-oferta-suave);
    color: var(--ec-oferta-texto);
    font-size: 12px;
    font-weight: 800;
}

.ec .ec-mispedidos-estado-pill.ok { background: var(--ec-primario-suave); color: var(--ec-primario); }
.ec .ec-mispedidos-estado-pill.anulado { background: var(--ec-superficie-2); color: var(--ec-texto-3); text-decoration: line-through; }

.ec .ec-mispedidos-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0;
}

.ec .ec-mispedidos-datos dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-texto-3); }
.ec .ec-mispedidos-datos dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.ec .ec-mispedidos-total { color: var(--ec-primario); font-weight: 800 !important; }
.ec .ec-mispedidos-ver { align-self: flex-start; padding: 0; }

.ec .ec-mispedidos-detalle {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ec-borde);
}

.ec .ec-mispedidos-detalle li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ec-borde);
    font-size: 14px;
}

.ec .ec-mispedidos-detalle li span { min-width: 0; overflow-wrap: anywhere; }
.ec .ec-mispedidos-detalle li small { flex: 0 0 auto; color: var(--ec-texto-2); }
.ec .ec-mispedidos-nota { color: var(--ec-texto-3); font-size: 13px; }

@media (max-width: 600px) {
    .ec .ec-mispedidos-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cantidad de artículos en los filtros de marca y familia */
.ec .ec-filtro-cantidad {
    margin-left: auto;
    padding-left: 6px;
    color: var(--ec-texto-3);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ec .ec-chip .ec-filtro-cantidad { margin-left: 6px; padding-left: 0; }
.ec .ec-chip.activo .ec-filtro-cantidad { color: inherit; opacity: .8; }

/* Orden (E3): en el panel "Filtrar" (escritorio) y en la fila de filtros (celular) */
.ec .ec-select-orden-panel { width: 100%; }
.ec .ec-filtro-grupo .ec-titulo-seccion label { margin: 0; font: inherit; color: inherit; cursor: default; }
.ec .ec-select-orden-celular { flex: 0 0 auto; min-height: 40px; max-width: 46%; font-size: 13px; }

/* ==========================================================================
   Carrito lateral, checkout por pasos y sugerencias al buscar (23-oct-2026)
   ========================================================================== */

/* El carrito del encabezado y de la barra del celular ahora son botones (abren el carrito lateral) */
.ec .ec-header-carrito { border: 0; font-family: var(--ec-fuente); cursor: pointer; text-align: left; }
.ec .ec-barra-carrito { border: 0; background: transparent; font-family: var(--ec-fuente); cursor: pointer; }

/* ---------- Carrito lateral (escritorio: a la derecha; celular: sube desde abajo) ---------- */
.ec-panel-carrito {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: 100%;
    background: var(--ec-superficie);
    box-shadow: -12px 0 32px rgba(0, 0, 0, .18);
}

.ec-panel-carrito-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--ec-borde);
}

.ec .ec-panel-carrito-titulo h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.ec-panel-carrito-titulo span {
    color: var(--ec-texto-2);
    font-size: 13px;
}

.ec .ec-panel-carrito-cerrar {
    width: 44px;
    height: 44px;
    border: 1px solid var(--ec-borde);
    border-radius: var(--ec-radio-pildora);
}

.ec-panel-carrito-agregado {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 20px 0;
    padding: 10px 14px;
    border-radius: var(--ec-radio-s);
    background: var(--ec-primario-suave);
    color: var(--ec-primario);
    font-size: 13px;
    font-weight: 700;
}

.ec-panel-carrito-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 20px;
}

.ec-panel-carrito-cuerpo .ec-avisos-carrito {
    margin-bottom: 12px;
}

.ec-panel-carrito-vacio {
    margin: 24px 0;
}

.ec-panel-carrito-pie {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--ec-borde);
    background: var(--ec-superficie-2);
}

.ec .ec-panel-carrito-pie .ec-resumen-total {
    margin-bottom: 4px;
}

.ec .ec-panel-carrito-seguir {
    align-self: center;
    font-size: 14px;
}

/* Renglones en el panel angosto: igual que en el celular */
.ec-panel-carrito .ec-carrito-item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px 12px;
}

.ec-panel-carrito .ec-carrito-foto {
    width: 56px;
    height: 56px;
}

.ec-panel-carrito .ec-carrito-cantidades {
    grid-column: 1 / -1;
    flex-wrap: wrap;
}

.ec-panel-carrito .ec-carrito-cantidad {
    flex: 1 1 140px;
    width: auto;
}

.ec-panel-carrito .ec-carrito-subtotal {
    grid-column: 1 / -1;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}

.ec-panel-carrito-tirador {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 44px;
    height: 5px;
    margin-left: -22px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-borde-fuerte);
}

@media (max-width: 1000px) {
    .ec-panel-carrito {
        top: 5vh;
        left: 0;
        width: auto;
        border-radius: 22px 22px 0 0;
        box-shadow: var(--ec-sombra-l);
    }

    .ec-panel-carrito-cabecera {
        position: relative;
        padding-top: 22px;
    }
}

/* ---------- Checkout por pasos ---------- */
.ec .ec-paso-boton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ec-pasos-celular {
    padding: 14px 0 4px;
}

.ec-pasos-celular-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ec-pasos-celular-fila strong {
    font-size: 18px;
    font-weight: 800;
}

.ec-pasos-celular-fila span {
    color: var(--ec-texto-2);
    font-size: 13px;
    font-weight: 700;
}

.ec-pasos-celular-barra {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.ec-pasos-celular-barra span {
    height: 5px;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-borde-fuerte);
}

.ec-pasos-celular-barra span.hecho {
    background: var(--ec-primario);
}

.ec-paso-resumen {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
}

.ec-paso-resumen-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ec-paso-resumen-texto small {
    color: var(--ec-texto-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ec-paso-resumen-texto strong {
    font-size: 15px;
    overflow-wrap: anywhere;
}

.ec-paso-resumen-texto span {
    color: var(--ec-texto-2);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ec-paso-siguiente {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    color: var(--ec-texto-3);
}

.ec-paso-siguiente strong {
    font-size: 17px;
}

.ec-paso-siguiente span {
    font-size: 13px;
}

.ec-paso-error {
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--ec-radio-s);
    background: #FDECEA;
    color: var(--ec-error);
    font-size: 14px;
    font-weight: 700;
}

.ec-paso-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.ec-resumen-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ec-resumen-productos {
    max-height: 260px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.ec-resumen-productos li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
}

.ec-resumen-producto-nombre {
    color: var(--ec-texto-2);
    overflow-wrap: anywhere;
}

.ec-resumen-producto-importe {
    font-weight: 700;
    white-space: nowrap;
}

.ec-resumen-producto-aviso .ec-resumen-producto-nombre {
    color: var(--ec-texto);
    font-weight: 700;
}

.ec .ec-carrito-barra-volver {
    min-width: 48px;
    padding: 0 12px;
}

.ec-carrito-barra .ec-carrito-barra-total {
    margin-right: auto;
}

/* ---------- Sugerencias al buscar ---------- */
.ec-header-buscador {
    position: relative;
    z-index: 2;
}

.ec-sugerencias-fondo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(20, 24, 22, .25);
}

.ec-sugerencias {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    border: 1px solid var(--ec-borde);
    border-radius: var(--ec-radio-m);
    background: var(--ec-superficie);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
    color: var(--ec-texto);
    cursor: default;
}

.ec-sugerencias-estado {
    margin: 0;
    padding: 16px 18px;
    color: var(--ec-texto-2);
    font-size: 14px;
}

.ec-sugerencias-titulo {
    padding: 12px 18px 4px;
    color: var(--ec-texto-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ec-sugerencias-productos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-sugerencias-actualizando {
    opacity: .55;
}

.ec-sugerencia {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 18px;
}

.ec-sugerencia:hover {
    background: var(--ec-superficie-2);
}

.ec-sugerencia-foto {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 2px;
    border: 1px solid var(--ec-borde);
    border-radius: var(--ec-radio-s);
    background: var(--ec-superficie);
    object-fit: contain;
}

.ec .ec-sugerencia-producto {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ec-texto);
    font-family: var(--ec-fuente);
    text-align: left;
    cursor: pointer;
}

.ec-sugerencia-nombre {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ec-sugerencia-detalle {
    color: var(--ec-texto-2);
    font-size: 12px;
}

.ec-sugerencia-precio {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    white-space: nowrap;
    font-size: 14px;
}

.ec-sugerencia-precio small {
    color: var(--ec-exito);
    font-size: 11px;
    font-weight: 700;
}

.ec-sugerencia-oferta {
    color: var(--ec-precio-oferta);
}

.ec .ec-sugerencia-agregar {
    flex: 0 0 auto;
    gap: 4px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.ec-sugerencia-en-carrito,
.ec-sugerencia-sin-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ec-sugerencia-en-carrito {
    color: var(--ec-exito);
}

.ec-sugerencia-sin-stock {
    color: var(--ec-texto-3);
}

.ec-sugerencias-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-top: 6px;
    padding: 4px 0 12px;
    border-top: 1px solid var(--ec-borde);
}

.ec-sugerencias-grupo {
    flex: 1 1 200px;
}

.ec-sugerencias-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 18px 0;
}

.ec .ec-chip-chico {
    min-height: 36px;
    padding: 0 12px;
    border-color: var(--ec-primario-suave);
    background: var(--ec-primario-suave);
    font-size: 13px;
}

.ec .ec-chip-borde {
    border-color: var(--ec-borde);
    background: var(--ec-superficie-2);
}

.ec .ec-sugerencias-todos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-top: 1px solid var(--ec-borde);
    background: var(--ec-superficie-2);
    color: var(--ec-primario);
    font-family: var(--ec-fuente);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.ec-sugerencias-todos small {
    color: var(--ec-texto-2);
    font-weight: 600;
}

@media (max-width: 1000px) {
    .ec-sugerencias {
        max-height: 62vh;
    }

    .ec-sugerencia {
        padding: 6px 14px;
    }

    .ec .ec-sugerencia-agregar {
        justify-content: center;
        width: 44px;
        min-height: 44px;
        padding: 0;
    }
}

/* En el celular el título del paso ya está arriba (barra de pasos) */
@media (max-width: 1000px) {
    .ec .ec-carrito-titulo-paso {
        display: none;
    }
}

/* Paso 1 del checkout: el carrito editable como estaba (título con la cantidad y "Vaciar carrito") */
.ec-carrito-seccion-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ec-carrito-seccion-cabecera h2 span {
    color: var(--ec-texto-2);
    font-size: 15px;
    font-weight: 600;
}

/* Escritorio angosto (con el resumen al costado la fila no entra): renglón apilado como en el carrito lateral */
@media (min-width: 1001px) and (max-width: 1240px) {
    .ec-carrito-principal .ec-carrito-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px 12px;
    }

    .ec-carrito-principal .ec-carrito-cantidades {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }

    .ec-carrito-principal .ec-carrito-subtotal {
        grid-column: 1 / -1;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------- Cartel "Instalá la app" (solo celular, app-instalar) ---------- */
.ec-instalar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 78px;                 /* arriba de la barra fija del celular */
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 12px 12px;
    border: 1px solid var(--ec-borde);
    border-radius: var(--ec-radio-m);
    background: var(--ec-superficie);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    animation: ec-instalar-subir .3s ease-out;
}

@keyframes ec-instalar-subir {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

.ec-instalar-icono {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ec-borde);
    border-radius: 11px;
    object-fit: cover;
}

.ec-instalar-texto {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ec-texto-2);
    font-size: 13px;
    line-height: 1.35;
}

.ec-instalar-texto strong {
    color: var(--ec-texto);
    font-size: 14px;
    font-weight: 800;
}

.ec-instalar-paso {
    display: inline-flex;
    vertical-align: -3px;
    padding: 1px 3px;
    border-radius: 5px;
    background: var(--ec-fondo, #F2F3F5);
    color: #0A84FF;               /* el azul del botón Compartir de Safari */
}

.ec .ec-instalar-boton,
.ec-instalar-boton {
    flex: 0 0 auto;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--ec-radio-pildora);
    background: var(--ec-primario);
    color: var(--ec-primario-texto);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ec-instalar-cerrar {
    flex: 0 0 auto;
    display: flex;
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--ec-texto-2);
    cursor: pointer;
}