/* ─── COMPRA EN CONJUNTO — Frontend CSS v1.9.0 ────────────────────────────── */

/* === Design tokens v1.9.0 === */
.cec-wrapper, .cec-product-modal, .cec-bottom-sheet-backdrop, .cec-success-screen, .cec-sticky-cta {
    --cec-space-1: 4px;
    --cec-space-2: 8px;
    --cec-space-3: 12px;
    --cec-space-4: 16px;
    --cec-space-5: 20px;
    --cec-space-6: 24px;
    --cec-space-8: 32px;
    --cec-space-10: 40px;

    --cec-radius-sm: 6px;
    --cec-radius-md: 10px;
    --cec-radius-lg: 16px;
    --cec-radius-pill: 999px;

    --cec-shadow-1: 0 1px 3px rgba(0,0,0,0.06);
    --cec-shadow-2: 0 4px 12px rgba(0,0,0,0.08);
    --cec-shadow-3: 0 12px 28px rgba(0,0,0,0.15);

    --cec-fs-xs: 12px;
    --cec-fs-sm: 14px;
    --cec-fs-base: 15px;
    --cec-fs-lg: 18px;
    --cec-fs-xl: 22px;
    --cec-fs-2xl: 28px;

    --cec-c-bg: #ffffff;
    --cec-c-bg-soft: #f9fafb;
    --cec-c-border: #e5e7eb;
    --cec-c-text: #1f2937;
    --cec-c-text-soft: #6b7280;
    --cec-c-success: #16a34a;
    --cec-c-warn: #f59e0b;
    --cec-c-error: #dc2626;

    --cec-z-sticky: 50;
    --cec-z-backdrop: 90;
    --cec-z-sheet: 100;
    --cec-z-success: 110;
}


/* ─── RESET DE BOTONES (anti-theme override) ───────────────────────────────── */
/* Muchos themes (Astra, GeneratePress, OceanWP, Hello, Twenty Twenty-*, FSE
 * blocks) aplican width:100%, padding grande, background del theme, color:
 * white, border-radius, text-transform, etc. a TODOS los <button> con
 * `!important`. Para ganarles necesitamos `!important` también, y especificidad
 * mayor o igual.
 *
 *   Reset: `.cec-wrapper button` (0,1,1) con !important.
 *   Específicos: `.cec-wrapper .cec-X` (0,2,0) con !important en las
 *   propiedades que típicamente pisa el theme (width, height, background,
 *   padding, border-radius, color, font-size, text-transform).
 *
 *   Como ambos llevan !important, la especificidad decide y los específicos
 *   (0,2,0) ganan al reset (0,1,1) y al theme genérico (0,1,1). */
.cec-wrapper button,
.cec-product-modal button {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    font-family: inherit !important;
    height: auto !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: inherit !important;
    text-transform: none !important;
    width: auto !important;
    text-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
}
.cec-wrapper button:hover,
.cec-wrapper button:focus,
.cec-product-modal button:hover,
.cec-product-modal button:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none;
}
.cec-wrapper input[type=radio],
.cec-wrapper input[type=checkbox] {
    margin: 0;
    accent-color: var(--cec-brand);
}
.cec-wrapper img,
.cec-product-modal img {
    max-width: 100%;
    height: auto;
}


:root {
    --cec-brand:      #178f9f;
    --cec-brand-dark: #0f6976;
    --cec-primary:    #19324d;
    --cec-secondary:  #2f6f68;
    --cec-accent:     #e0a126;
    --cec-success:    #16a34a;
    --cec-success-bg: #f0fdf4;
    --cec-danger:     #dc2626;
    --cec-danger-bg:  #fef2f2;
    --cec-warning:    #d97706;
    --cec-warning-bg: #fffbeb;
    --cec-light:      #f8fafc;
    --cec-border:     #e2e8f0;
    --cec-border-md:  #cbd5e1;
    --cec-text:       #0f172a;
    --cec-text-mid:   #475569;
    --cec-text-light: #94a3b8;
    --cec-white:      #ffffff;
    --cec-radius-sm:  6px;
    --cec-radius:     8px;
    --cec-radius-lg:  8px;
    --cec-shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --cec-shadow:     0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    --cec-shadow-lg:  0 12px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    --cec-pallet-disponible: #f0fdf4;
    --cec-pallet-disponible-border: #86efac;
    --cec-pallet-ocupado: #fef2f2;
    --cec-pallet-ocupado-border: #fca5a5;
    --cec-pallet-propio: #ccfbf1;
    --cec-pallet-propio-border: #5eead4;
    --cec-pallet-pendiente: #fffbeb;
    --cec-pallet-pendiente-border: #fcd34d;
    --cec-pallet-base: #ecfeff;
    --cec-pallet-base-border: var(--cec-brand);
}

/* ─── WRAPPER ──────────────────────────────────────────────────────────────── */
.cec-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--cec-text);
    margin: 2rem 0 0 0; /* sin margin-bottom: el wrapper cierra contra lo que sigue */
    border-radius: var(--cec-radius-lg);
    box-shadow: var(--cec-shadow);
    background: var(--cec-white);
    overflow: hidden;
    border: 1px solid var(--cec-border);
    /* Container query: el layout adentro se adapta al ancho del WRAPPER,
     * no del viewport. Resuelve casos donde el theme tiene un content area
     * que no llega a 1200px de viewport efectivo. */
    container-type: inline-size;
    container-name: cec;
}
@media (min-width: 780px) {
    .cec-wrapper {
        width: min(1120px, calc(100vw - 32px));
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}
.cec-wrapper *, .cec-wrapper *::before, .cec-wrapper *::after { box-sizing: border-box; }
.cec-wrapper h1, .cec-wrapper h2, .cec-wrapper h3, .cec-wrapper h4,
.cec-product-modal h1, .cec-product-modal h2, .cec-product-modal h3, .cec-product-modal h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    color: inherit !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    border: 0 !important;
    background: none !important;
}
.cec-wrapper p, .cec-product-modal p {
    margin: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}
.cec-wrapper label, .cec-product-modal label {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-transform: none;
}
.cec-wrapper ul, .cec-wrapper ol,
.cec-product-modal ul, .cec-product-modal ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cec-wrapper a, .cec-product-modal a {
    box-shadow: none;
    text-decoration: none;
}
.cec-no-camiones {
    text-align: center;
    padding: 3rem;
    color: var(--cec-text-light);
    font-size: 1.05rem;
}

/* ─── HEADER ───────────────────────────────────────────────────────────────── */
.cec-header {
    background: linear-gradient(135deg, var(--cec-primary) 0%, #265f5a 58%, var(--cec-secondary) 100%);
    color: var(--cec-white);
    padding: 1.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
.cec-header-info { flex: 1; min-width: 0; }
.cec-titulo {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #ffffff !important;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.cec-icon-truck { font-size: 1.4rem; margin-right: 0.45rem; }
.cec-destino-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.cec-pin { margin-right: 0.3rem; }

.cec-deadline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
}
.cec-deadline-label strong { color: #ffffff; }
.cec-countdown {
    display: inline-flex;
    gap: 0.4rem;
    background: rgba(0,0,0,0.25);
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
}
.cec-cd-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 28px;
}
.cec-cd-num { font-weight: 700; font-size: 0.95rem; color: #ffffff; line-height: 1; }
.cec-cd-label { font-size: 0.6rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.cec-cd-expired { color: var(--cec-warning); font-weight: 700; }

.cec-header-progress { text-align: right; min-width: 180px; }
.cec-progress-label { font-size: 0.82rem; margin-bottom: 0.5rem; opacity: 0.85; }
.cec-pallets-num { font-size: 1.5rem; font-weight: 700; color: #ffffff; }
.cec-progress-track {
    background: rgba(255,255,255,0.18);
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.4rem;
    position: relative;
}
.cec-progress-fill {
    background: linear-gradient(90deg, #6ee7b7 0%, #22c55e 100%);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: width 0.4s ease;
}
.cec-progress-fill-soft {
    background: rgba(255,255,255,0.28);
}
.cec-progress-sub { font-size: 0.78rem; opacity: 0.75; }

/* ─── STATS BAR ─────────────────────────────────────────────────────────────── */
.cec-stats-bar {
    background: var(--cec-white);
    border-bottom: 1px solid var(--cec-border);
    padding: 0.85rem 1.5rem;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) repeat(3, auto);
    gap: 0.75rem;
    align-items: center;
}
.cec-stat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-size: 0.9rem;
}
.cec-stat-label { color: var(--cec-text-mid); }
.cec-stat-val { font-weight: 700; color: var(--cec-text); }
/* === v2.0.1 — Badge "50% menos" destacado === */
/* La propuesta de valor del plugin: ahorro real para PYMEs y particulares.
   Tiene que GRITAR. Verde brillante, mayor tamaño, peso fuerte y leve pulse. */
.cec-stat-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.30);
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: none;
}
.cec-stat-tag::before {
    content: '💰';
    font-size: 0.9rem;
}
.cec-stat-compact {
    justify-content: center;
    gap: 0.35rem;
    background: #f8fafc;
    border: 1px solid var(--cec-border);
    border-radius: var(--cec-radius-sm);
    padding: 0.45rem 0.65rem;
}
.cec-stat-compact .cec-stat-label { font-size: 0.74rem; }
@media (max-width: 720px) {
    .cec-stats-bar {
        grid-template-columns: 1fr 1fr;
        padding: 0.85rem 1rem;
    }
    .cec-stats-bar .cec-stat:first-child {
        grid-column: 1 / -1;
    }
    .cec-stat-compact {
        justify-content: space-between;
    }
}

/* ─── BANNERS ────────────────────────────────────────────────────────────────── */
.cec-incentivo-banner {
    display: flex;
    gap: 0.65rem;
    padding: 0.8rem 1.5rem;
    background: rgba(58,180,197,0.07);
    border-bottom: 1px solid rgba(58,180,197,0.18);
    font-size: 0.88rem;
    color: var(--cec-brand-dark);
}
.cec-incentivo-banner p { margin: 0; line-height: 1.45; }
.cec-incentivo-icon { font-size: 1.05rem; }

.cec-completo-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.5rem;
    background: var(--cec-brand-dark);
    color: #ffffff;
}
.cec-completo-icon { font-size: 1.65rem; }
.cec-completo-title { margin: 0; font-weight: 800; font-size: 1.05rem; }
.cec-completo-sub { margin: 0.15rem 0 0; font-size: 0.82rem; opacity: 0.9; }

.cec-mi-reserva-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1.5rem;
    background: var(--cec-success-bg);
    border-bottom: 1px solid #86efac;
    color: var(--cec-success);
    font-weight: 600;
    font-size: 0.88rem;
}
.cec-mi-reserva-icon {
    background: var(--cec-success);
    color: #ffffff;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.cec-mi-reserva-id { color: var(--cec-text-mid); font-weight: 500; margin-left: 0.4rem; }

/* ─── LAYOUT PRINCIPAL ──────────────────────────────────────────────────────── */
/* Single column por default. En escritorio se fuerza flex horizontal para evitar
 * que themes o container queries de terceros manden el panel debajo del camión. */
.cec-main-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
}
@media (min-width: 780px) {
    .cec-main-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: start;
        justify-content: center;
        gap: clamp(1rem, 3vw, 2rem);
    }
    .cec-truck-visual {
        flex: 1 1 58%;
        min-width: 0;
        max-width: 600px;
    }
    .cec-panel {
        flex: 0 1 420px;
        width: min(420px, 42%);
        min-width: 320px;
        max-width: 420px;
    }
}
@container cec (max-width: 540px) {
    .cec-main-layout { gap: 1rem; padding: 1rem; }
}

/* ─── CAMIÓN VISUAL ─────────────────────────────────────────────────────────── */
.cec-truck-visual { display: flex; flex-direction: column; align-items: center; }
.cec-truck-topview { width: 100%; max-width: 460px; display: flex; justify-content: center; }
.cec-truck-body {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cec-tcab-img, .cec-trear-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.cec-tcargo {
    width: 100%;
    border-left: 10px solid #4a5568;
    border-right: 10px solid #4a5568;
}
.cec-pallets-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.cec-pallets-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--cec-text-mid);
}

.cec-pallet {
    border: 1px solid;
    padding: 0.6rem 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    text-align: center;
    min-height: 60px;
    user-select: none;
    position: relative;
}
@media (min-width: 640px) {
    .cec-pallet { padding: 0.85rem 0.4rem; min-height: 72px; }
}
.cec-pallet-num {
    font-size: 0.65rem; font-weight: 700; opacity: 0.45; line-height: 1;
    position: absolute; top: 4px; left: 5px;
}
.cec-pallet-icon { font-size: 1.05rem; font-weight: 700; line-height: 1; }
.cec-pallet-label { font-size: 0.62rem; line-height: 1.1; font-weight: 600; }
@media (min-width: 640px) {
    .cec-pallet-icon { font-size: 1.2rem; }
    .cec-pallet-label { font-size: 0.7rem; }
}

.cec-pallet-disponible {
    background: var(--cec-pallet-disponible);
    border-color: var(--cec-pallet-disponible-border);
    color: var(--cec-success);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.cec-pallet-disponible:hover { background: #dcfce7; transform: scale(1.02); }
.cec-pallet-ocupado {
    background: var(--cec-pallet-ocupado);
    border-color: var(--cec-pallet-ocupado-border);
    color: #c93f3f;
}
.cec-pallet-propio, .cec-pallet-propio_base {
    background: var(--cec-brand);
    border-color: var(--cec-brand-dark);
    color: #ffffff;
    font-weight: 700;
}
.cec-pallet-base {
    background: var(--cec-pallet-base);
    border-color: var(--cec-pallet-base-border);
    color: var(--cec-brand-dark);
}
.cec-pallet-pendiente {
    background: var(--cec-pallet-pendiente);
    border-color: var(--cec-pallet-pendiente-border);
    color: var(--cec-warning);
}

.cec-leyenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1rem;
    font-size: 0.78rem;
    color: var(--cec-text-mid);
}
.cec-ley-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.cec-ley-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1px solid;
}
.cec-dot-disponible { background: var(--cec-pallet-disponible); border-color: var(--cec-pallet-disponible-border); }
.cec-dot-ocupado    { background: var(--cec-pallet-ocupado); border-color: var(--cec-pallet-ocupado-border); }
.cec-dot-propio     { background: var(--cec-brand); border-color: var(--cec-brand-dark); }
.cec-dot-pendiente  { background: var(--cec-pallet-pendiente); border-color: var(--cec-pallet-pendiente-border); }

/* ─── PANEL ─────────────────────────────────────────────────────────────────── */
.cec-panel {
    background: var(--cec-light);
    border: 1px solid var(--cec-border);
    border-radius: var(--cec-radius);
    padding: 1.25rem;
}
.cec-panel-inner { display: flex; flex-direction: column; gap: 1rem; }
.cec-panel-header h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--cec-text); }
.cec-min-note { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--cec-text-mid); }
.cec-section-label {
    display: block;
    font-size: 0.78rem;
    color: var(--cec-text-mid);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    margin-bottom: 1.15rem;
}
.cec-field { display: flex; flex-direction: column; }
.cec-field > .cec-section-label + .cec-producto-lista,
.cec-field > .cec-section-label + .cec-entrega-options {
    margin-top: 0.55rem !important;
}

.cec-loading-productos { padding: 1rem; color: var(--cec-text-mid); text-align: center; }
.cec-error-inline { padding: 0.75rem; color: var(--cec-danger); }
.cec-empty-inline { padding: 0.75rem; color: var(--cec-text-mid); text-align: center; }

.cec-product-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    margin: 0.55rem 0 0.75rem;
}
.cec-wrapper .cec-product-search {
    width: 100% !important;
    min-height: 38px !important;
    padding: 0.55rem 0.7rem !important;
    border: 1px solid var(--cec-border-md) !important;
    border-radius: var(--cec-radius-sm) !important;
    background: var(--cec-white) !important;
    color: var(--cec-text) !important;
    font: inherit !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-product-search:focus {
    border-color: var(--cec-brand) !important;
    box-shadow: 0 0 0 3px rgba(23,143,159,0.14) !important;
    outline: none !important;
}
.cec-product-count {
    color: var(--cec-text-light);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* ─── ACORDEÓN POR CATEGORÍA ───────────────────────────────────────────────── */
.cec-producto-lista {
    background: var(--cec-white);
    border: 1px solid var(--cec-border);
    border-radius: var(--cec-radius-sm);
    overflow: hidden;
}
.cec-cat + .cec-cat { border-top: 1px solid var(--cec-border); }
.cec-wrapper .cec-cat-header {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem !important;
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    border: none !important;
    cursor: pointer;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--cec-text-mid) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    text-align: left;
    transition: background 0.15s;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-cat-header:hover {
    background: #f1f5f9 !important;
    background-color: #f1f5f9 !important;
    color: var(--cec-text-mid) !important;
}
.cec-cat-name { flex: 1; }
.cec-cat-badge {
    background: var(--cec-brand);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
}
.cec-cat-arrow { transition: transform 0.2s; color: var(--cec-text-light); }
.cec-cat-arrow.cec-open { transform: rotate(180deg); }
.cec-cat-body > .cec-producto-item:not(:last-child) { border-bottom: 1px solid var(--cec-border); }

.cec-wrapper .cec-producto-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.6rem 0.7rem !important;
    background: var(--cec-white) !important;
    background-color: var(--cec-white) !important;
    transition: background 0.15s;
    width: 100% !important;
    margin: 0 !important;
    flex-wrap: nowrap;
    cursor: pointer;
}
.cec-wrapper .cec-producto-item:hover {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
}
.cec-wrapper .cec-prod-en-carrito {
    background: var(--cec-warning-bg) !important;
    background-color: var(--cec-warning-bg) !important;
}
.cec-wrapper .cec-prod-en-carrito:hover {
    background: #fff7ed !important;
    background-color: #fff7ed !important;
}

.cec-wrapper .cec-prod-img-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
    border-radius: 4px !important;
    overflow: hidden;
    background: var(--cec-light) !important;
    background-color: var(--cec-light) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-prod-img-btn:hover {
    box-shadow: 0 0 0 2px var(--cec-brand) !important;
    background: var(--cec-light) !important;
    background-color: var(--cec-light) !important;
}
.cec-prod-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cec-prod-img-placeholder { font-size: 1.3rem; }

.cec-wrapper .cec-prod-info-btn {
    flex: 1;
    min-width: 0;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    cursor: pointer;
    color: inherit !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    font-size: inherit !important;
}
.cec-wrapper .cec-prod-name {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--cec-text) !important;
    line-height: 1.25 !important;
    /* truncate a 2 líneas con ellipsis. Es <span> (no <div>) por validez HTML
     * dentro de <button>, pero se muestra como bloque con -webkit-box. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.cec-wrapper .cec-prod-info-btn:hover .cec-prod-name { text-decoration: underline !important; }
.cec-wrapper .cec-prod-cat {
    display: block !important;
    font-size: 0.68rem !important;
    color: var(--cec-text-light) !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cec-wrapper .cec-prod-ver {
    color: var(--cec-brand) !important;
    text-decoration: underline !important;
}

.cec-wrapper .cec-prod-price-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
    min-width: 90px;
}
.cec-wrapper .cec-prod-price {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--cec-brand-dark) !important;
    white-space: nowrap;
    line-height: 1.1 !important;
}

.cec-wrapper .cec-prod-add-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    box-shadow: none !important;
    transition: opacity 0.15s;
}
.cec-wrapper .cec-prod-add-btn:hover {
    opacity: 0.9;
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
}

.cec-prod-qty-ctrls { display: inline-flex; align-items: center; gap: 0.25rem; }
.cec-wrapper .cec-prod-qty-minus,
.cec-wrapper .cec-prod-qty-plus {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--cec-light) !important;
    background-color: var(--cec-light) !important;
    cursor: pointer;
    font-weight: 700 !important;
    color: var(--cec-text-mid) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-prod-qty-plus {
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
}
.cec-prod-qty-num { min-width: 18px; text-align: center; font-weight: 700; font-size: 0.85rem; }

/* ─── CARRITO DE PALLETS ────────────────────────────────────────────────────── */
.cec-pallet-cart-section {
    background: var(--cec-white);
    border: 1px solid var(--cec-border);
    border-radius: var(--cec-radius-sm);
    padding: 0.85rem;
}
.cec-cart-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cec-border);
}
.cec-cart-section-title { font-weight: 700; font-size: 0.88rem; color: var(--cec-text); }
.cec-cart-total-pallets { font-size: 0.78rem; color: var(--cec-text-mid); }

.cec-cart-item { padding: 0.4rem 0; border-bottom: 1px dashed var(--cec-border); }
.cec-cart-item:last-child { border-bottom: none; }
.cec-cart-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.cec-cart-item-name { font-size: 0.82rem; font-weight: 500; color: var(--cec-text); flex: 1; line-height: 1.3; }
.cec-wrapper .cec-cart-item-remove {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--cec-text-light) !important;
    cursor: pointer;
    font-size: 0.95rem !important;
    padding: 0 0.3rem !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.cec-wrapper .cec-cart-item-remove:hover {
    color: var(--cec-danger) !important;
    background: none !important;
    background-color: transparent !important;
}
.cec-cart-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.3rem;
}
.cec-cart-item-controls { display: inline-flex; align-items: center; gap: 0.3rem; }
.cec-wrapper .cec-qty-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: none !important;
    background: var(--cec-light) !important;
    background-color: var(--cec-light) !important;
    cursor: pointer;
    font-weight: 700 !important;
    color: var(--cec-text-mid) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-cart-qty-plus {
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
}
.cec-cart-qty-num { min-width: 18px; text-align: center; font-weight: 700; font-size: 0.85rem; }
.cec-cart-item-price { font-weight: 700; font-size: 0.88rem; color: var(--cec-brand-dark); }

/* ─── ENTREGA ───────────────────────────────────────────────────────────────── */
.cec-wrapper .cec-entrega-field { margin-top: 0.65rem; }
.cec-wrapper .cec-entrega-field .cec-section-label { margin-bottom: 1.2rem; }
.cec-wrapper .cec-entrega-options {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.8rem !important;
    width: 100% !important;
}
.cec-wrapper .cec-entrega-options > .cec-entrega-option {
    grid-column: 1 / -1 !important;
    max-width: none !important;
}
.cec-wrapper .cec-entrega-option {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 0.7rem !important;
    padding: 0.9rem 1rem !important;
    border: 1px solid var(--cec-border) !important;
    border-radius: var(--cec-radius-sm) !important;
    cursor: pointer;
    background: var(--cec-white) !important;
    background-color: var(--cec-white) !important;
    transition: border 0.15s, background 0.15s;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--cec-text) !important;
}
.cec-wrapper .cec-entrega-option:hover { border-color: var(--cec-border-md) !important; }
.cec-wrapper .cec-entrega-option input[type=radio] {
    margin-top: 0.16rem !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: start !important;
}
.cec-wrapper .cec-entrega-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    grid-column: 2 !important;
    min-width: 0 !important;
    gap: 0.22rem !important;
}
.cec-wrapper .cec-entrega-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--cec-text) !important;
    line-height: 1.3 !important;
}
.cec-wrapper .cec-entrega-desc {
    display: block !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    color: var(--cec-text-mid) !important;
    line-height: 1.35 !important;
}
.cec-wrapper .cec-entrega-tag {
    display: inline-block;
    margin-left: 0;
    background: rgba(37,99,235,0.12) !important;
    color: var(--cec-secondary) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 999px !important;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.cec-wrapper .cec-entrega-option[data-tipo=retiro].cec-entrega-active {
    border-color: var(--cec-brand) !important;
    background: rgba(58,180,197,0.06) !important;
    background-color: rgba(58,180,197,0.06) !important;
}
.cec-wrapper .cec-entrega-option[data-tipo=puerta].cec-entrega-active {
    border-color: var(--cec-secondary) !important;
    background: rgba(37,99,235,0.06) !important;
    background-color: rgba(37,99,235,0.06) !important;
}

.cec-delivery-address {
    background: #f8fafc;
    border: 1px solid var(--cec-border);
    border-radius: var(--cec-radius-sm);
    display: grid;
    gap: 0.75rem;
    margin-top: 0.8rem;
    padding: 0.85rem;
}
.cec-form-label {
    color: var(--cec-text);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.35rem;
}
.cec-wrapper .cec-input {
    background: var(--cec-white) !important;
    border: 1px solid var(--cec-border-md) !important;
    border-radius: var(--cec-radius-sm) !important;
    box-shadow: none !important;
    color: var(--cec-text) !important;
    font: inherit !important;
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    min-height: 42px !important;
    padding: 0.6rem 0.75rem !important;
    width: 100% !important;
}
.cec-wrapper .cec-input:focus {
    border-color: var(--cec-brand) !important;
    box-shadow: 0 0 0 3px rgba(23,143,159,0.14) !important;
    outline: none !important;
}
.cec-contact-section {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.9rem;
}
.cec-contact-title {
    color: var(--cec-text) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

/* ─── PRECIO DETALLE ────────────────────────────────────────────────────────── */
.cec-precio-detalle {
    background: var(--cec-white);
    border: 1px solid var(--cec-border);
    border-radius: var(--cec-radius-sm);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.cec-precio-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.cec-precio-row > span:first-child { color: var(--cec-text-mid); }
.cec-precio-row > span:last-child, .cec-precio-row strong:last-child { color: var(--cec-text); font-weight: 700; }
/* Fila propia del badge "50% menos" — debajo de la línea del precio.
   Antes estaba inline al lado del label de "Envío compartido", lo empujaba
   en mobile y descolocaba el precio. Ahora vive en su propia fila. */
.cec-precio-badge-row {
    display: flex;
    justify-content: flex-start;
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}
.cec-ahorro-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff !important;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}
.cec-ahorro-tag::before {
    content: '💰';
    font-size: 0.85rem;
}
.cec-precio-total-row {
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--cec-border);
    font-size: 1.05rem;
}
.cec-precio-total-val { color: var(--cec-brand-dark) !important; font-size: 1.1rem; }

.cec-min-alert {
    background: var(--cec-warning-bg);
    border: 1px solid #fcd34d;
    color: var(--cec-warning);
    padding: 0.5rem 0.75rem;
    border-radius: var(--cec-radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
}

.cec-wrapper .cec-btn-confirmar {
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--cec-radius-sm) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    transition: opacity 0.15s;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-btn-confirmar:hover:not(:disabled) {
    opacity: 0.92;
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
}
.cec-wrapper .cec-btn-confirmar:disabled {
    background: #cbd5e1 !important;
    background-color: #cbd5e1 !important;
    cursor: not-allowed;
    color: #ffffff !important;
}

.cec-panel-error {
    background: var(--cec-danger-bg);
    color: var(--cec-danger);
    padding: 0.6rem 0.75rem;
    border-radius: var(--cec-radius-sm);
    font-size: 0.85rem;
    border: 1px solid #fca5a5;
}
.cec-panel-success {
    background: var(--cec-success-bg);
    color: var(--cec-success);
    padding: 0.75rem 1rem;
    border-radius: var(--cec-radius-sm);
    font-size: 0.88rem;
    border: 1px solid #86efac;
}
.cec-success-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}
.cec-wrapper .cec-btn-checkout {
    background: var(--cec-success);
    color: #ffffff !important;
    padding: 0.55rem 0.85rem;
    border-radius: var(--cec-radius-sm);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
}
.cec-wrapper .cec-btn-checkout:hover {
    background: var(--cec-success);
    color: #ffffff !important;
    opacity: 0.92;
}
.cec-wrapper .cec-btn-seguir {
    background: var(--cec-white) !important;
    background-color: var(--cec-white) !important;
    color: var(--cec-success) !important;
    padding: 0.55rem 0.85rem !important;
    border-radius: var(--cec-radius-sm) !important;
    border: 1px solid var(--cec-success) !important;
    cursor: pointer;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    width: auto !important;
    height: auto !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-btn-seguir:hover {
    background: var(--cec-success-bg) !important;
    background-color: var(--cec-success-bg) !important;
    color: var(--cec-success) !important;
}

/* ─── MODAL DE DETALLE DE PRODUCTO ─────────────────────────────────────────── */
/* IMPORTANTE: el modal se mueve por JS a document.body al abrir (portal pattern).
 * Además JS le asigna top/left/width/height con scrollY para neutralizar themes
 * o barras fijas que rompen position:fixed al abrir después de scrollear. */
html.cec-modal-open, body.cec-modal-open { overflow: hidden !important; }

/* CRÍTICO: algunos plugins (WP Customize, Elementor, etc.) inyectan
   transform: matrix(1,0,0,1,0,0) en el <body>. Es identity transform
   (visualmente no hace nada) PERO crea un containing block que rompe
   position: fixed de TODOS sus descendientes — los convierte en
   position: absolute relativos al body. Cuando el cliente scrollea
   y abre el modal, queda offscreen arriba.
   Neutralizamos solo cuando nuestro modal/success está abierto. */
body.cec-modal-open,
body.cec-success-open {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    contain: none !important;
}
.cec-product-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    margin: 0 !important;
    transform: none !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: var(--cec-text);
}
/* Si la admin bar de WP está visible, dejar espacio arriba para que no
   tape la X de cerrar del modal. */
.admin-bar .cec-product-modal { padding-top: calc(12px + 32px); }
@media (max-width: 782px) {
    .admin-bar .cec-product-modal { padding-top: calc(12px + 46px); }
}
.cec-product-modal.cec-modal-visible {
    display: flex !important;
}
@media (min-width: 640px) {
    .cec-product-modal { padding: 16px; }
}
.cec-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    cursor: pointer;
}
.cec-modal-card {
    position: relative;
    background: var(--cec-white);
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* permite que los hijos se contraigan en flex column */
    box-shadow: var(--cec-shadow-lg);
    border-radius: var(--cec-radius-lg);
}
@media (min-width: 640px) {
    .cec-modal-card {
        max-width: 720px;
        height: auto;
        max-height: calc(100dvh - 32px);
    }
}
.cec-product-modal .cec-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.95) !important;
    background-color: rgba(255,255,255,0.95) !important;
    border: 1px solid var(--cec-border) !important;
    cursor: pointer;
    font-size: 1rem !important;
    color: var(--cec-text-mid) !important;
    z-index: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    padding: 0 !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}
.cec-product-modal .cec-modal-close:hover {
    background: var(--cec-light) !important;
    background-color: var(--cec-light) !important;
    color: var(--cec-text-mid) !important;
}

/* El cuerpo scrolleable se expande y se contrae; el footer y header
   (close button) NO se contraen, siempre visibles. */
.cec-modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cec-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 640px) {
    .cec-modal-grid { grid-template-columns: 1fr 1fr; }
}

.cec-modal-image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(58,180,197,0.10) 0%, rgba(58,180,197,0.02) 100%);
    padding: 1rem 1.25rem;
    min-height: 0;
}
.cec-modal-image-box img { max-height: 180px; width: auto; object-fit: contain; }
@media (min-width: 640px) {
    .cec-modal-image-box { padding: 2rem 2.5rem; min-height: 200px; }
    .cec-modal-image-box img { max-height: none; }
}
.cec-modal-image {
    width: 100%; height: auto;
    max-height: 280px;
    object-fit: contain;
    display: block;
}
.cec-modal-no-image .cec-modal-image { display: none; }
.cec-modal-no-image::before {
    content: 'Producto sin imagen';
    color: var(--cec-text-light);
    font-size: 0.9rem;
    font-weight: 700;
}

.cec-modal-info { padding: 1.25rem 1.5rem; }
.cec-modal-sku {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cec-text-light);
    letter-spacing: 2px;
    margin: 0 0 4px;
}
.cec-product-modal .cec-modal-name {
    font-size: clamp(1.35rem, 1.8vw, 1.95rem) !important;
    font-weight: 800 !important;
    margin: 0 0 0.8rem !important;
    line-height: 1.12 !important;
    color: var(--cec-text) !important;
}
.cec-modal-desc { display: none !important; }
.cec-modal-price-box {
    background: rgba(58,180,197,0.06);
    border-radius: var(--cec-radius);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.cec-modal-price-row { display: flex; justify-content: space-between; align-items: baseline; }
.cec-modal-price-row > span:first-child { font-size: 0.78rem; color: var(--cec-text-mid); }
.cec-modal-price-pallet { font-size: 1.6rem; font-weight: 800; color: var(--cec-brand); }
.cec-modal-price-row-unit { font-size: 0.78rem; color: var(--cec-text-mid); }
.cec-modal-price-unit { font-weight: 700; color: var(--cec-text-mid); }

.cec-modal-section { padding: 0.8rem 1.5rem 1rem; }
.cec-modal-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cec-text);
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 0.75rem;
}
.cec-modal-specs {
    display: block;
    width: 100%;
}
.cec-modal-spec {
    border: 1px solid rgba(58,180,197,0.28);
    border-left: 5px solid var(--cec-brand);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    width: 100%;
    background: linear-gradient(135deg, rgba(58,180,197,0.09), rgba(255,255,255,0.92));
    box-shadow: var(--cec-shadow-sm);
}
.cec-modal-spec-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--cec-text-light);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 2px;
}
.cec-modal-spec-value {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--cec-text);
    margin: 0;
    line-height: 1.2;
}
.cec-modal-spec-highlight {
    border-color: var(--cec-brand);
    background: rgba(58,180,197,0.06);
}
.cec-modal-spec-highlight .cec-modal-spec-value { color: var(--cec-brand-dark); }

.cec-modal-footer {
    border-top: 1px solid var(--cec-border);
    padding: 0.85rem 1.5rem;
    background: var(--cec-white);
    flex-shrink: 0; /* siempre visible — no se aplasta */
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
}
.cec-modal-qty-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.cec-modal-qty-label { font-size: 0.85rem; color: var(--cec-text-mid); }
.cec-modal-qty-controls {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cec-border);
    border-radius: 8px;
    overflow: hidden;
}
.cec-product-modal .cec-modal-qty-minus,
.cec-product-modal .cec-modal-qty-plus {
    background: var(--cec-white) !important;
    background-color: var(--cec-white) !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
    cursor: pointer;
    color: var(--cec-text) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    box-shadow: none !important;
}
.cec-product-modal .cec-modal-qty-minus:hover,
.cec-product-modal .cec-modal-qty-plus:hover {
    background: var(--cec-light) !important;
    background-color: var(--cec-light) !important;
    color: var(--cec-text) !important;
}
.cec-modal-qty-num { min-width: 40px; text-align: center; font-weight: 700; }
.cec-modal-total-wrap { margin-left: auto; font-size: 0.88rem; color: var(--cec-text-mid); }
.cec-modal-total { color: var(--cec-brand-dark); font-weight: 800; }

.cec-product-modal .cec-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
@media (min-width: 520px) {
    .cec-product-modal .cec-modal-actions {
        grid-template-columns: 1fr 1fr;
    }
}
.cec-product-modal .cec-modal-add-btn {
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--cec-radius-sm) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    transition: opacity 0.15s;
    line-height: 1.25 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cec-product-modal .cec-modal-add-btn:hover {
    opacity: 0.92;
    background: var(--cec-brand) !important;
    background-color: var(--cec-brand) !important;
    color: #ffffff !important;
}

.cec-product-modal .cec-modal-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    background: var(--cec-white) !important;
    border: 1px solid #25d366 !important;
    color: #128c7e !important;
    border-radius: var(--cec-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: background 0.15s;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: normal;
}
.cec-product-modal .cec-modal-wa-btn:hover {
    background: #f0fdf4 !important;
    color: #128c7e !important;
    text-decoration: none !important;
}
.cec-product-modal .cec-modal-wa-icon { font-size: 1.05rem; line-height: 1; }

/* ─── ITEM EN WC CART / ORDER ───────────────────────────────────────────────── */
.cec-cart-meta {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--cec-text-mid);
}
.cec-order-meta { margin: 0.25rem 0; font-size: 0.88rem; }

/* ─── SPINNER ───────────────────────────────────────────────────────────────── */
.cec-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid var(--cec-border);
    border-top-color: var(--cec-brand);
    border-radius: 50%;
    animation: cec-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.4rem;
}
@keyframes cec-spin { to { transform: rotate(360deg); } }

.cec-wrapper .cec-link-btn {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--cec-secondary) !important;
    cursor: pointer;
    text-decoration: underline !important;
    padding: 0 !important;
    font: inherit !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}
.cec-wrapper .cec-link-btn:hover {
    background: none !important;
    background-color: transparent !important;
    color: var(--cec-secondary) !important;
}

/* === v1.9.0 — Provincia chip (sobre header oscuro) === */
.cec-provincia-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cec-space-2);
    background: rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.22);
    padding: 4px 12px;
    border-radius: var(--cec-radius-pill);
    font-size: var(--cec-fs-sm);
    margin-top: var(--cec-space-2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.cec-provincia-chip strong {
    color: #fff;
    font-weight: 600;
}

/* === v1.9.0 — Dirección puerta a puerta === */
.cec-provincia-locked {
    display: flex;
    align-items: center;
    gap: var(--cec-space-2);
    background: #eef7f8;
    border: 1px dashed var(--cec-brand);
    border-radius: var(--cec-radius-md);
    padding: 10px 12px;
    color: var(--cec-c-text);
}
.cec-provincia-locked .cec-provincia-icon { font-size: 18px; }
.cec-provincia-locked .cec-provincia-value {
    font-weight: 600;
    flex: 1;
    color: var(--cec-brand);
}
.cec-provincia-locked .cec-provincia-hint {
    font-size: var(--cec-fs-xs);
    color: var(--cec-c-text-soft);
    background: #fff;
    border-radius: var(--cec-radius-pill);
    padding: 2px 8px;
}

/* Form fields polish */
.cec-wrapper .cec-input {
    width: 100%;
    height: 48px;
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid var(--cec-c-border);
    border-radius: var(--cec-radius-md);
    background: #fff;
    color: var(--cec-c-text);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.cec-wrapper .cec-input:focus {
    outline: none;
    border-color: var(--cec-brand);
    box-shadow: 0 0 0 3px rgba(23,143,159,.15);
}
.cec-wrapper .cec-form-label {
    display: block;
    font-size: var(--cec-fs-sm);
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--cec-c-text-soft);
}

/* === v1.9.0 — Sticky CTA mobile === */
.cec-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--cec-z-sticky);
    background: #fff;
    border-top: 1px solid var(--cec-c-border);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
/* El sticky CTA es SOLO mobile. En desktop nunca se muestra (incluso con
   .is-visible, que el JS aplica cuando hay pallets seleccionados). */
@media (max-width: 768px) {
    .cec-sticky-cta.is-visible { display: flex; }
    /* Cuando el bottom-sheet está abierto, ocultar el CTA: el botón "Reservar"
       adentro del sheet es el que importa. */
    body.cec-sheet-open .cec-sticky-cta.is-visible { display: none; }
}
@media (min-width: 769px) {
    .cec-sticky-cta,
    .cec-sticky-cta.is-visible { display: none !important; }
}
.cec-sticky-cta-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.cec-sticky-pallets {
    font-size: var(--cec-fs-xs);
    color: var(--cec-c-text-soft);
}
.cec-sticky-total {
    font-size: var(--cec-fs-lg);
    color: var(--cec-brand);
    font-weight: 700;
}
.cec-sticky-cta-btn {
    background: var(--cec-brand) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 22px !important;
    border-radius: var(--cec-radius-md) !important;
    font-size: var(--cec-fs-base) !important;
    font-weight: 600 !important;
    cursor: pointer;
    min-height: 44px !important;
    width: auto !important;
}
.cec-sticky-cta-btn:hover { filter: brightness(1.05); }
.cec-sticky-cta-btn:active { transform: scale(.98); }

/* === v1.9.0 — Bottom sheet (mobile) === */
.cec-bottom-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.5);
    z-index: var(--cec-z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.cec-bottom-sheet-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile-only handle/close: forzar oculto en desktop (algunos themes meten
   display: inline-block en buttons globales y nuestra regla simple se pisaba). */
.cec-wrapper .cec-panel-mobile-handle,
.cec-wrapper .cec-panel-mobile-close { display: none !important; }

/* === v1.9.6 — Success screen como modal real (fuera del wrapper) === */
/* IMPORTANTE: el JS mueve este elemento al <body> al mostrarlo, para
   escapar del wrapper que tiene transform/container-type (eso rompe
   position:fixed convirtiéndolo en absolute). */
.cec-success-screen {
    display: none;
}
.cec-success-screen.is-visible {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow-y: auto;
}
/* Espacio para la admin bar de WP cuando está visible */
.admin-bar .cec-success-screen.is-visible { padding-top: calc(24px + 32px); }
@media (max-width: 782px) {
    .admin-bar .cec-success-screen.is-visible { padding-top: calc(24px + 46px); }
}
/* Bloquear scroll del body cuando el modal está abierto */
body.cec-success-open { overflow: hidden; }
.cec-success-content {
    max-width: 440px;
    width: 100%;
    background: #fff;
    border-radius: var(--cec-radius-lg);
    box-shadow: var(--cec-shadow-3);
    padding: 36px 28px 28px;
    text-align: center;
    box-sizing: border-box;
}
.cec-success-check {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: var(--cec-c-success);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(22,163,74,.25);
}
.cec-success-title {
    font-size: var(--cec-fs-xl);
    margin: 0 0 8px;
    color: var(--cec-c-text);
}
.cec-success-id {
    color: var(--cec-c-text-soft);
    margin: 0 0 18px;
}
.cec-success-id strong {
    color: var(--cec-brand);
    font-size: var(--cec-fs-lg);
}
.cec-success-message p {
    color: var(--cec-c-text);
    margin: 0 0 16px;
    line-height: 1.5;
}
.cec-success-aviso {
    background: #fef3c7;
    border-left: 4px solid var(--cec-c-warn);
    border-radius: var(--cec-radius-md);
    padding: 12px 16px;
    font-size: var(--cec-fs-sm);
    color: #92400e;
    text-align: left;
    margin: 16px 0 20px;
}
.cec-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cec-success-screen .cec-success-back,
.cec-success-screen .cec-success-wa {
    display: inline-block !important;
    padding: 14px 20px !important;
    border-radius: var(--cec-radius-md) !important;
    font-size: var(--cec-fs-base) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box;
    min-height: 48px;
}
.cec-success-screen .cec-success-back {
    background: #f3f4f6 !important;
    color: var(--cec-c-text) !important;
}
.cec-success-screen .cec-success-wa {
    background: #25d366 !important;
    color: #fff !important;
}

/* Banner "ya tenés reserva" — refresh visual */
.cec-mi-reserva-banner {
    background: #ecfeff !important;
    border: 1px solid #67e8f9 !important;
    color: #155e75 !important;
    border-radius: var(--cec-radius-md);
    padding: 10px 14px;
    margin: 0 0 var(--cec-space-3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cec-mi-reserva-icon {
    background: var(--cec-c-success);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

/* Accesibilidad keyboard */
.cec-btn-confirmar:focus-visible,
.cec-sticky-cta-btn:focus-visible,
.cec-success-back:focus-visible,
.cec-success-wa:focus-visible {
    outline: 3px solid rgba(23,143,159,.4);
    outline-offset: 2px;
}

/* === v1.9.4 — Mobile breakpoint principal === */
@media (max-width: 768px) {
    /* Panel inline (NO bottom-sheet): el usuario scrollea naturalmente para
       llegar al selector de productos. El bottom-sheet generaba bloqueos:
       el panel arrancaba oculto y el sticky CTA solo aparecía con pallets
       seleccionados, dejando al usuario sin forma de acceder al form. */
    .cec-panel {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Handle, close button y sticky CTA: solo existen para el patrón
       bottom-sheet, en panel inline no aplican. */
    .cec-panel-mobile-handle,
    .cec-panel-mobile-close { display: none !important; }
    .cec-sticky-cta,
    .cec-sticky-cta.is-visible { display: none !important; }
    .cec-bottom-sheet-backdrop { display: none !important; }

    /* Pallets más grandes en mobile (44px touch target) */
    .cec-pallet {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Header del camión: stack vertical */
    .cec-header {
        flex-direction: column !important;
        gap: var(--cec-space-3);
        align-items: stretch !important;
    }
    .cec-header-progress { width: 100%; }
    .cec-titulo { font-size: var(--cec-fs-xl); }

    /* Stats bar: grid 2 columnas en mobile */
    .cec-stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    /* Countdown compacto */
    .cec-countdown { font-size: var(--cec-fs-sm); }
    .cec-cd-block { padding: 2px 6px !important; }

    /* Form spacing reducido */
    .cec-field { margin-bottom: var(--cec-space-3); }
}