/* ============================================================
   casper.css — Maestro de marca Casper
   ------------------------------------------------------------
   [2026-07-28] Fundación del sistema visual (Fase A0).
   Marca Casper: NEGRO #373739 + NARANJA #E96A16 + Poppins.
   (El navy #213080/#243182 y el verde #92c841 eran del template
   base "Zoro", NO son de Casper.)

   Reglas de este archivo:
   - Se carga DESPUÉS del theme (bootstrap, style, color-nineteen,
     nineteen) y ANTES de los feature CSS, para que sus reglas ganen
     sin !important.
   - Bloque 1 (:root): solo declara variables. Declarar una variable
     no repinta nada hasta que un var() la usa → riesgo cero.
   - Bloque 2 (componentes .c-*): clases opt-in reutilizables.
   - Bloque 3 (overrides puntuales): solo unos pocos selectores del
     theme, de bajo alcance y color, bien comentados.
   ============================================================ */

/* ============================================================
   1. TOKENS :root
   ============================================================ */
:root {
    /* Marca */
    --c-negro:   #373739;
    --c-naranja: #E96A16;
    --c-amarillo: #ffe71e;   /* secundario del template, disponible */
    --c-blanco:  #ffffff;

    /* Semánticos (los que consumen los componentes) */
    --c-primary:   var(--c-negro);
    --c-accent:    var(--c-naranja);
    --c-on-accent: var(--c-negro);   /* texto negro sobre naranja: patrón ya establecido */

    /* WhatsApp */
    --c-wa:       #25d366;
    --c-wa-hover: #1da851;

    /* Estados / feedback */
    --c-warn-fg:     #8a6d00;
    --c-warn-bg:     #fff6d9;
    --c-warn-border: #f0d97a;
    --c-muted-fg:     #5f5f5f;   /* gris AA */
    --c-muted-bg:     #f2f2f2;
    --c-muted-border: #dddddd;
    /* Éxito (badge "Pagado" de pedidos; la marca no tenía un verde de éxito). */
    --c-ok-fg:     #1b5e20;
    --c-ok-bg:     #e7f4e8;
    --c-ok-border: #bfe3c3;

    /* Neutros */
    --c-text:         #373739;
    --c-text-2:       #666666;
    --c-border:       #e2e2e2;
    --c-border-2:     #ececec;
    --c-input-border: #dcdcdc;
    --c-accent-tint:  #fff6ef;              /* naranja muy tenue (hover suave) */
    --c-accent-ring:  rgba(233, 106, 22, .18);

    /* Tipografía */
    --c-font: 'Poppins', sans-serif;

    /* Radios */
    --c-radius:      4px;
    --c-radius-pill: 999px;
    --c-radius-card: 14px;

    /* Sombras */
    --c-shadow-card:  0 2px 12px rgba(0, 0, 0, .06);
    --c-shadow-hover: 0 10px 26px rgba(0, 0, 0, .12);

    --c-transition: .15s ease;
}

/* ============================================================
   2. COMPONENTES .c-* (opt-in, se aplican por clase en el Blade)
   ============================================================ */

/* Botón de marca. Base geométrica autocontenida (no depende de .btn). */
.c-btn {
    display: inline-block;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.7vw, 14px);
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: clamp(9px, 2.2vw, 11px) clamp(20px, 5vw, 28px);
    border: 1px solid transparent;
    border-radius: var(--c-radius);
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}

/* Primario: negro → hover naranja (texto negro sobre naranja). */
.c-btn--primary {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.c-btn--primary:hover,
.c-btn--primary:focus {
    color: var(--c-on-accent);
    background: var(--c-accent);
    border-color: var(--c-accent);
    text-decoration: none;
}

/* Secundario / outline: contorno negro → hover relleno negro. */
.c-btn--outline {
    color: var(--c-primary);
    background: transparent;
    border-color: var(--c-primary);
}
.c-btn--outline:hover,
.c-btn--outline:focus {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
    text-decoration: none;
}
/* El theme (style.css:3005 + color-nineteen) fuerza el color del <a> en hover dentro
   de .widget_manufaturer (el botón "Reiniciar" del filtro) y quedaba texto negro sobre
   fondo negro. Se recupera el blanco con mayor especificidad, sin !important. */
.widget_manufaturer a.c-btn--outline:hover,
.widget_manufaturer a.c-btn--outline:focus {
    color: var(--c-blanco);
}

/* [2026-07-29] Iconos en botones/CTA — espaciado centralizado.
   Vocabulario de acción→icono aplicado en las vistas (fa 4.3.0); aquí SOLO el gap,
   con clases utilitarias para no meter reglas globales que afecten iconos ya existentes.
   .c-ico-l = icono a la izquierda del texto · .c-ico-r = icono a la derecha (progresión). */
.c-ico-l { margin-right: .5em; }
.c-ico-r { margin-left: .5em; }
/* Los iconos heredan color/tamaño del botón; se evita que el line-height los descuadre. */
.c-btn .c-ico-l,
.c-btn .c-ico-r { font-size: .95em; line-height: 1; }

/* [2026-07-29] Buscador del header: el submit pasó de <input> a <button> para poder llevar la
   lupa (un <input> no admite <i> dentro). Las reglas del theme que lo posicionaban usaban
   input.search-submit (position/border/radio) y NO aplican a un <button>, por eso quedaba
   descolocado. Se repone aquí la caja completa, a marca Casper (negro → naranja en hover) y con
   icono+texto en una sola línea. Scope alto para ganar por orden de carga, sin !important. */
.nineteen .flat-header .flat-widgets .widget_search button.search-submit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 96px;
    height: auto;
    margin: 0;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: 0;
    border-radius: 0 20px 20px 0;
    background: var(--c-negro);
    color: var(--c-blanco);
    font: 700 13px/1 var(--c-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--c-transition), color var(--c-transition);
}
.nineteen .flat-header .flat-widgets .widget_search button.search-submit:hover,
.nineteen .flat-header .flat-widgets .widget_search button.search-submit:focus {
    background: var(--c-naranja);
    color: var(--c-on-accent);
}

/* ============================================================
   3. OVERRIDES PUNTUALES del theme (bajo alcance, solo color/caja).
   ============================================================ */

/* --- Casper Card: borde + radio + sombra EN REPOSO ---------------
   Unifica las cards planas del catálogo, promociones y relacionados
   (todas usan .products-grid .item-inner) con el look de /locations.
   Antes: solo borde #eee y sombra únicamente en hover. */
.products-grid .item-inner {
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}
.products-grid .item-inner:hover {
    box-shadow: var(--c-shadow-hover);
    transform: translateY(-4px);
}

/* --- Badges NUEVO / PROMO de las cards ---------------------------
   Antes: PROMO verde #92c841 y NUEVO #faab5b (colores del template).
   Ahora: PROMO naranja de marca, NUEVO negro de marca.
   Se igualan las variantes más específicas del theme (base en style.css:1868,
   adyacente new+promo en :1838, y dentro de .product del detalle en :2296/:2305)
   para ganar por orden de carga, sin !important. */
.sale-top-right,
.new-top-right + .sale-top-right,
.product .sale-top-right,
.product .new-top-right + .sale-top-right { background-color: var(--c-naranja); }
.new-top-right2 { background-color: var(--c-negro); }

/* --- Carrito: botones +/- de cantidad ----------------------------
   Antes: rojo puro. El theme lo pinta con un selector con ID
   (nineteen.css:70 → .nineteen #cart-table .numbers-row .button_inc),
   así que se IGUALA esa especificidad para ganar sin !important.
   Ahora: negro de marca → hover naranja. */
.nineteen #cart-table .numbers-row .button_inc {
    background-color: var(--c-negro);
}
.nineteen #cart-table .numbers-row .button_inc:hover {
    background-color: var(--c-naranja);
    color: var(--c-on-accent);
}

/* --- Header: banda central (logo/buscador/carrito/usuario) --------
   [2026-07-29] REVERTIDO. El gris #575757 (nineteen.css:202) es una DECISIÓN DE PRODUCTO
   intencional: diferencia visualmente esa sección (buscador/carrito/usuario) del resto del
   header. El refactor NO debe pisar decisiones de producto; se conserva el gris del theme.
   Override anterior (a negro) desactivado a propósito (Regla 4):
.nineteen .flat-header {
    background-color: var(--c-negro);
}
*/

/* --- Footer: legibilidad sobre el fondo oscuro (#363636) ----------
   El theme (color-nineteen.css:36-49) pinta hovers de links e iconos ::before
   en #373739 → invisibles sobre #363636. Se llevan al naranja de marca.
   Misma especificidad que el theme; casper.css carga después → gana sin !important. */
.flat-footer-top .widget_services a:hover,
.flat-footer-top .widget_my_account a:hover,
.flat-footer-top .widget_about_us .flat-infomation a:hover {
    color: var(--c-naranja);
}
ul.flat-infomation li::before,
.widget_services ul li::before,
.widget.widget_my_account ul li::before {
    color: var(--c-naranja);
}

/* --- Medios de pago: tarjetas uniformes --------------------------
   Antes: imágenes sueltas con aspect ratios dispares → bordes desalineados.
   Ahora: tarjeta blanca de alto fijo con object-fit: contain. */
.payment-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(120px, 22vw, 160px);
    padding: 16px;
    margin-bottom: 24px;
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
}
.payment-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ============================================================
   A4 · Polish
   ============================================================ */

/* Hover de las cards: se retira el overlay oscuro sobre la imagen
   (opacity .55 en style.css:2011), gesto anticuado. Queda solo el
   lift + sombra de la Casper Card. Misma especificidad, carga después. */
.products-grid .item:hover:before {
    opacity: 0;
}
/* [2026-07-29] Se ELIMINA por completo ese overlay (.products-grid .item:before es
   position:absolute; width/height:100%; z-index:1 en style.css:1990). Aunque estaba en
   opacity:0 (sin efecto visual), seguía presente y CAPTURABA los clics; al usar la card en
   el home (col con clase .item) se expandía y tapaba el header (carrito/usuario no clicables).
   content:none quita el pseudo → sin overlay, sin bloqueo. Sin efecto visual (ya era invisible). */
.products-grid .item:before {
    content: none;
}

/* Toasts (toastr): tipografía Poppins + radio de marca; el tipo "info"
   (el más usado, ej. el aviso de sucursal de exhibición) pasa de azul
   default a negro Casper. Se prefija con body/#toast-container para ganar
   sin depender del orden de carga respecto del CSS de toastr. */
body #toast-container > div {
    font-family: var(--c-font);
    border-radius: var(--c-radius);
}
body #toast-container > .toast-info {
    background-color: var(--c-negro);
}

/* ============================================================
   Componentes de formulario de marca (register, cuenta)
   ============================================================ */

/* Card contenedora centrada. */
.c-form-card {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px);
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
}

/* Sección con encabezado (icono + título + línea separadora). */
.c-form-section {
    margin-bottom: clamp(20px, 4vw, 30px);
}
.c-form-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 2px solid var(--c-border-2);
}
.c-form-section__head .fa {
    color: var(--c-naranja);
    font-size: 1.1em;
}
.c-form-section__title {
    margin: 0;
    font-family: var(--c-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: clamp(14px, 2vw, 16px);
    color: var(--c-negro);
}

/* Campo: label visible + input de marca. */
.c-field {
    margin-bottom: 16px;
}
.c-field > label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 13px);
    font-weight: 600;
    color: var(--c-negro);
}
.c-field .c-req {
    color: var(--c-naranja);
}
.c-form-card .form-control {
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 15px);
    border: 1px solid var(--c-input-border);
    border-radius: var(--c-radius);
    padding: clamp(9px, 2vw, 12px) 14px;
}
.c-form-card .form-control:focus {
    border-color: var(--c-naranja);
    box-shadow: 0 0 0 .2rem var(--c-accent-ring);
}

/* Campo tipo checkbox (términos). */
.c-field--check > label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-weight: 500;
    text-transform: none;
}
.c-field--check input {
    width: auto;
    margin: 0;
}
.c-field--check a {
    color: var(--c-naranja);
    font-weight: 600;
}

/* Enlace alternativo bajo el form ("¿Ya tenés cuenta?"). */
.c-form-alt {
    margin-top: 16px;
    margin-bottom: 0;
    text-align: center;
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 14px);
    color: var(--c-text-2);
}
.c-form-alt a {
    color: var(--c-naranja);
    font-weight: 600;
}

/* Texto de ayuda de un campo/sección y nota de campos obligatorios. */
.c-field-hint {
    margin: -4px 0 12px;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 13px);
    color: var(--c-text-2);
}
.c-form-req-note {
    margin: 4px 0 16px;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 13px);
    color: var(--c-text-2);
}
.c-form-req-note .c-req { color: var(--c-naranja); }

/* ============================================================
   P23 · Acciones de la card (favorito + carrito)
   Antes: iconos sueltos a la izquierda, sin centrar, con hover
   amarillo del template. Ahora: centrados y como botones de marca
   (carrito = primaria rellena, favorito = secundaria outline).
   Se prefija con .producto-accion para ganar al theme (.m-container).
   ============================================================ */
.producto-accion ul.add-to-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.producto-accion ul.add-to-links li {
    margin: 0;
}
.producto-accion ul.add-to-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--c-negro);
    border-radius: 50%;
    color: var(--c-negro);
    background: transparent;
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}
.producto-accion ul.add-to-links a i {
    margin: 0;
    font-size: 16px;
    color: inherit;
}
/* Carrito = acción primaria: relleno negro → hover naranja (texto negro sobre naranja). */
.producto-accion ul.add-to-links a.add_to_cart_button {
    color: var(--c-blanco);
    background: var(--c-negro);
}
.producto-accion ul.add-to-links a.add_to_cart_button:hover {
    color: var(--c-on-accent);
    background: var(--c-naranja);
    border-color: var(--c-naranja);
}
/* Favorito = acción secundaria: outline → hover naranja. */
.producto-accion ul.add-to-links a.link-wishlist:hover {
    color: var(--c-on-accent);
    background: var(--c-naranja);
    border-color: var(--c-naranja);
}
/* Neutraliza el hover amarillo + scale que el template aplica al icono. */
.producto-accion ul.add-to-links li a i:hover {
    color: inherit;
    transform: none;
}

/* ============================================================
   P25 · Filtros del catálogo
   ============================================================ */

/* --- Card contenedora del filtro (línea visual clara). En desktop es una card sutil;
   en mobile el bottom-sheet ya es el contenedor y la card se aplana (ver media query). --- */
#secondary.has-filtros-sheet .sidebar_shop_sidebar {
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
    padding: clamp(14px, 2vw, 18px);
    overflow: hidden;
}

/* Título de la card + badge de total. */
#secondary.has-filtros-sheet .filtros-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border-2);
    font-family: var(--c-font);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: clamp(14px, 2vw, 16px);
    color: var(--c-negro);
}
#secondary.has-filtros-sheet .filtros-titulo__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--c-blanco);
    background: var(--c-naranja);
    border-radius: var(--c-radius-pill);
}

/* --- Filas de acordeón (antes botones negros): transparentes, separador, chevron. --- */
#secondary.has-filtros-sheet .filtro-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-border-2);
    font-family: var(--c-font);
    font-weight: 500;
    font-size: 14px;
    color: var(--c-negro);
    text-align: left;
    cursor: pointer;
    transition: color var(--c-transition);
}
#secondary.has-filtros-sheet .filtro-toggle__label {
    flex: 1;
}
#secondary.has-filtros-sheet .filtro-toggle__caret {
    margin-left: 8px;
    color: var(--c-text-2);
    transition: transform var(--c-transition), color var(--c-transition);
}
/* Hover: acento sutil (label naranja), distinto del estado abierto. */
#secondary.has-filtros-sheet .filtro-toggle:hover .filtro-toggle__label {
    color: var(--c-naranja);
}
/* Abierto/activo: label en negrita naranja + chevron rotado (acento fino, no relleno). */
#secondary.has-filtros-sheet .filtro-toggle[aria-expanded="true"] .filtro-toggle__label {
    color: var(--c-naranja);
    font-weight: 600;
}
#secondary.has-filtros-sheet .filtro-toggle[aria-expanded="true"] .filtro-toggle__caret {
    transform: rotate(180deg);
    color: var(--c-naranja);
}
/* Badge de filtros activos por sección. */
#secondary.has-filtros-sheet .filtro-toggle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 8px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-blanco);
    background: var(--c-naranja);
    border-radius: var(--c-radius-pill);
}

/* Opciones (checkbox) de cada dropdown: mejora sutil — spacing, fila clickeable
   con hover tenue y el check en naranja de marca (accent-color). Aplica desktop y mobile. */
#secondary.has-filtros-sheet .product-categories li {
    margin-bottom: 2px;
}
#secondary.has-filtros-sheet .container_check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px;
    font-family: var(--c-font);
    font-size: 14px;
    color: var(--c-text);
    cursor: pointer;
    border-radius: var(--c-radius);
    transition: background var(--c-transition);
}
#secondary.has-filtros-sheet .container_check:hover {
    background: var(--c-accent-tint);
}
#secondary.has-filtros-sheet .container_check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--c-naranja);
}

/* Panel colapsable: se aplana la .card-body del theme (sin borde/sombra); el listado
   de opciones va indentado bajo su fila de acordeón. */
#secondary.has-filtros-sheet .collapse .card-body {
    padding: 6px 0 10px 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Botonera Filtrar/Reiniciar: se quita la caja gris del theme (style.css:2995 + la línea
   decorativa :after) y se apilan en COLUMNA con espacio real. Antes eran inline-block
   sin margen → envolvían y quedaban pegadas. Scopeado (no afecta promos). */
#secondary.has-filtros-sheet .widget_manufaturer {
    background-color: transparent;
    padding-bottom: 0;
}
#secondary.has-filtros-sheet .widget_manufaturer::after {
    content: none;
}
#secondary.has-filtros-sheet .widget_manufaturer .buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#secondary.has-filtros-sheet .widget_manufaturer .buttons .c-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* Paneles de checkboxes: scroll solo si hace falta + scrollbar fino (antes nineteen.css
   forzaba overflow:scroll con ambas barras siempre visibles). */
#secondary.has-filtros-sheet .product-categories {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
#secondary.has-filtros-sheet .product-categories::-webkit-scrollbar {
    width: 6px;
}
#secondary.has-filtros-sheet .product-categories::-webkit-scrollbar-thumb {
    background: var(--c-border);
    border-radius: var(--c-radius-pill);
}
#secondary.has-filtros-sheet .product-categories::-webkit-scrollbar-track {
    background: transparent;
}

/* Elementos del bottom-sheet: ocultos en desktop (el sidebar queda como está). */
.filtros-trigger,
.filtros-backdrop,
.filtros-sheet__head {
    display: none;
}

/* --- Mobile (≤991px, igual que la hamburguesa): el sidebar de filtros
   se convierte en una hoja inferior deslizante --- */
@media (max-width: 991px) {
    /* Botón que abre el sheet. */
    .filtros-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-bottom: 16px;
        padding: 12px 20px;
        font-family: var(--c-font);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--c-blanco);
        background: var(--c-negro);
        border: 1px solid var(--c-negro);
        border-radius: var(--c-radius);
        cursor: pointer;
    }

    /* Fondo oscuro. */
    .filtros-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease;
    }
    body.filtros-abierto .filtros-backdrop {
        opacity: 1;
        visibility: visible;
    }
    body.filtros-abierto {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }
    /* El botón flotante de WhatsApp (z-index alto) no debe taparse con el sheet. */
    body.filtros-abierto .whatsapp-btn,
    body.filtros-abierto .whatsapp-float__tooltip {
        display: none;
    }

    /* El sidebar como hoja inferior deslizante. */
    #secondary.has-filtros-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        max-height: 85vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 16px;
        background: var(--c-blanco);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
        transform: translateY(100%);
        transition: transform .3s ease;
    }
    body.filtros-abierto #secondary.has-filtros-sheet {
        transform: translateY(0);
    }

    /* En el sheet, el título "Filtros" de la card es redundante con la cabecera → se oculta,
       y la card se APLANA (el sheet ya es el contenedor: sin borde/sombra/padding propios). */
    #secondary.has-filtros-sheet .filtros-titulo {
        display: none;
    }
    #secondary.has-filtros-sheet .sidebar_shop_sidebar {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }

    /* Cabecera del sheet: handle + título + cerrar, pegada arriba. */
    .filtros-sheet__head {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 22px 0 16px;
        margin-bottom: 22px;
        background: var(--c-blanco);
        border-bottom: 1px solid var(--c-border-2);
    }
    .filtros-sheet__handle {
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--c-border);
    }
    .filtros-sheet__title {
        font-family: var(--c-font);
        font-weight: 600;
        text-transform: uppercase;
        color: var(--c-negro);
    }
    .filtros-sheet__close {
        position: absolute;
        right: 0;
        top: 12px;
        width: 34px;
        height: 34px;
        font-size: 26px;
        line-height: 1;
        color: var(--c-negro);
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    /* Filtrar / Reiniciar fijos al fondo del sheet mientras la lista scrollea. */
    #secondary.has-filtros-sheet .widget_manufaturer {
        position: sticky;
        bottom: 0;
        padding: 12px 0;
        background: var(--c-blanco);
        border-top: 1px solid var(--c-border-2);
    }
}

/* ============================================================
   P20 · Dropdown de usuario (post-login) — popover branded
   Scope estricto: .nineteen-auth-header (NO afecta el mini-carrito,
   que comparte .widget_shopping/.flat-ordered). Sin !important.
   ============================================================ */

/* --- Trigger "Hola, [nombre]" en la barra negra del header --- */
.nineteen-auth-header .cuenta-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    background: transparent;
    border: 0;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 500;
    text-transform: none;            /* el theme pone uppercase a los <button> del header */
    color: var(--c-blanco);
    cursor: pointer;
    transition: color var(--c-transition);
}
.nineteen-auth-header .cuenta-trigger .fa-user { font-size: 15px; }
.nineteen-auth-header .cuenta-trigger__caret {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    transition: transform var(--c-transition), color var(--c-transition);
}
.nineteen-auth-header .cuenta-trigger:hover,
.nineteen-auth-header .cuenta-trigger:focus,
.nineteen-auth-header .cuenta-trigger[aria-expanded="true"] {
    color: var(--c-naranja);
}
.nineteen-auth-header .cuenta-trigger:hover .cuenta-trigger__caret,
.nineteen-auth-header .cuenta-trigger[aria-expanded="true"] .cuenta-trigger__caret {
    color: var(--c-naranja);
}
.nineteen-auth-header .cuenta-trigger[aria-expanded="true"] .cuenta-trigger__caret {
    transform: rotate(180deg);
}

/* --- Apertura por CLICK: se neutraliza el hover del theme SOLO acá (0,3,0 vence a
   .widget_shopping:hover .flat-ordered 0,2,0) y se muestra con .is-open. El carrito conserva su hover. --- */
.nineteen-auth-header:hover .flat-ordered { opacity: 0; visibility: hidden; }
.nineteen-auth-header.is-open .flat-ordered { opacity: 1; visibility: visible; }

/* --- Caja del popover (vence borde verde/navy del theme) --- */
.nineteen-auth-header .flat-ordered {
    width: 250px;
    padding: 0;
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-top: 3px solid var(--c-naranja);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-hover);
    overflow: hidden;
}
.nineteen-auth-header .flat-ordered ul { display: block; margin: 0; padding: 6px; }

/* --- Bloque de identidad (nombre + email) --- */
.nineteen-auth-header .cuenta-menu__id {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--c-border-2);
}
.nineteen-auth-header .cuenta-menu__id .fa-user { font-size: 26px; color: var(--c-naranja); }
.nineteen-auth-header .cuenta-menu__id-datos { display: flex; flex-direction: column; min-width: 0; }
.nineteen-auth-header .cuenta-menu__nombre {
    font-family: var(--c-font); font-weight: 600; font-size: 14px; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nineteen-auth-header .cuenta-menu__email {
    font-family: var(--c-font); font-size: 12px; color: var(--c-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Items (vence float + separador li:before del theme) --- */
.nineteen-auth-header .flat-ordered li { float: none; width: 100%; margin: 0; list-style: none; }
.nineteen-auth-header .flat-ordered li:before { content: none; display: none; }
.nineteen-auth-header .flat-ordered li a,
.nineteen-auth-header .cuenta-menu__logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--c-radius);
    font-family: var(--c-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;            /* el theme pone uppercase al <button> de logout */
    text-align: left;
    color: var(--c-text);
    cursor: pointer;
    transition: background var(--c-transition), color var(--c-transition);
}
.nineteen-auth-header .flat-ordered li a .fa,
.nineteen-auth-header .cuenta-menu__logout .fa {
    width: 18px; text-align: center; font-size: 15px; color: var(--c-text-2);
    transition: color var(--c-transition);
}
.nineteen-auth-header .flat-ordered li a:hover,
.nineteen-auth-header .flat-ordered li a:focus {
    background: var(--c-accent-tint); color: var(--c-naranja);
}
.nineteen-auth-header .flat-ordered li a:hover .fa,
.nineteen-auth-header .flat-ordered li a:focus .fa { color: var(--c-naranja); }

/* --- Cerrar sesión: acción secundaria, separada, en neutro (sin rojo, Regla 2). --- */
.nineteen-auth-header .cuenta-menu__logout-li {
    margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--c-border-2);
}
.nineteen-auth-header .cuenta-menu__logout { color: var(--c-muted-fg); }
.nineteen-auth-header .cuenta-menu__logout .fa { color: var(--c-muted-fg); }
.nineteen-auth-header .cuenta-menu__logout:hover,
.nineteen-auth-header .cuenta-menu__logout:focus { background: var(--c-muted-bg); color: var(--c-negro); }
.nineteen-auth-header .cuenta-menu__logout:hover .fa { color: var(--c-negro); }

/* --- Responsive: recentrar el popover (el theme lo posiciona para 360px) --- */
@media (max-width: 991px) {
    .nineteen-auth-header .flat-ordered { right: 50%; margin-right: -125px; width: 250px; }
}

/* --- Modal de confirmación de logout (mismo lenguaje que sign-in/sucursal) --- */
#logout-modal .modal-content { border: 0; border-radius: 6px; overflow: hidden; }
#logout-modal .modal-header { background: var(--c-negro); border-bottom: 3px solid var(--c-naranja); }
#logout-modal .modal-title {
    color: var(--c-blanco); font-family: var(--c-font); font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; font-size: clamp(15px, 2.2vw, 18px);
}
#logout-modal .modal-body { font-family: var(--c-font); font-size: clamp(13px, 1.7vw, 15px); color: var(--c-text); }
#logout-modal .modal-footer { gap: 8px; }
#logout-modal .modal-footer form { margin: 0; }

/* ============================================================
   P21 · Mis puntos / Billetera  (scope .billetera-page)
   ============================================================ */
/* Ficha: el número de puntos es el foco (grande, naranja). */
.billetera-page .billetera-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 4vw, 32px);
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-card);
}
.billetera-page .billetera-ficha__puntos { display: flex; flex-direction: column; }
.billetera-page .billetera-ficha__label {
    font-family: var(--c-font); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; color: var(--c-text-2);
}
.billetera-page .billetera-ficha__valor {
    font-family: var(--c-font); font-weight: 700; line-height: 1;
    font-size: clamp(40px, 9vw, 64px); color: var(--c-naranja);
}
.billetera-page .billetera-ficha__desde { font-family: var(--c-font); font-size: 12px; color: var(--c-text-2); margin-top: 4px; }
.billetera-page .billetera-ficha__canje h3 {
    font-family: var(--c-font); font-weight: 600; font-size: clamp(15px, 2.2vw, 18px);
    color: var(--c-negro); margin: 0 0 4px;
}
.billetera-page .billetera-ficha__canje p { font-family: var(--c-font); color: var(--c-text-2); margin: 0 0 12px; }

/* Tabs a marca (subrayado naranja en la activa). */
.billetera-page .nav-tabs { border-bottom: 1px solid var(--c-border-2); }
.billetera-page .nav-tabs .nav-link {
    font-family: var(--c-font); font-weight: 500; font-size: 14px;
    color: var(--c-text-2); background: transparent; border: 0;
    border-bottom: 3px solid transparent; border-radius: 0; padding: 12px 16px;
}
.billetera-page .nav-tabs .nav-link:hover { color: var(--c-negro); }
.billetera-page .nav-tabs .nav-link.active {
    color: var(--c-negro); font-weight: 600; background: transparent;
    border-bottom-color: var(--c-naranja);
}

/* Tablas de la billetera (header negro, sin colisionar con #cart-table del carrito). */
.billetera-page .billetera-tabla { margin-top: 16px; font-family: var(--c-font); font-size: 14px; }
.billetera-page .billetera-tabla thead th {
    background: var(--c-negro); color: var(--c-blanco); font-weight: 600;
    text-transform: uppercase; font-size: 12px; border: 0; white-space: nowrap;
}
.billetera-page .billetera-tabla td { border-color: var(--c-border-2); vertical-align: middle; }
.billetera-page .billetera-tabla__vacio { color: var(--c-text-2); font-style: italic; padding: 24px 0; }

/* Modal de canje (mismo lenguaje que sign-in/sucursal/logout). */
#myModal .modal-content { border: 0; border-radius: 6px; overflow: hidden; }
#myModal .modal-header { background: var(--c-negro); border-bottom: 3px solid var(--c-naranja); }
#myModal .modal-title {
    color: var(--c-blanco); font-family: var(--c-font); font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px; font-size: clamp(15px, 2.2vw, 18px);
}
#myModal .modal-body { font-family: var(--c-font); }
#myModal .modal-footer { gap: 8px; }

/* ============================================================
   P21/P5 · Badges de estado de pedido
   Color + texto siempre visible (colorblind-safe). Cancelado = negro
   de marca (cerrado); Pagado = verde de éxito (--c-ok-*); Pendiente =
   ámbar (--c-warn-*); Abierto = gris neutro (--c-muted-*).
   ============================================================ */
.estado-badge {
    display: inline-block;
    padding: .28em .7em;
    font-family: var(--c-font);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--c-radius-pill);
    white-space: nowrap;
}
.estado-badge--abierto { color: var(--c-muted-fg); background: var(--c-muted-bg); border-color: var(--c-muted-border); }
.estado-badge--pend    { color: var(--c-warn-fg);  background: var(--c-warn-bg);  border-color: var(--c-warn-border); }
.estado-badge--ok      { color: var(--c-ok-fg);    background: var(--c-ok-bg);    border-color: var(--c-ok-border); }
.estado-badge--cancel  { color: var(--c-blanco);   background: var(--c-negro);    border-color: var(--c-negro); }

/* --- Breadcrumb: el item ACTUAL (texto plano, sin <a>) heredaba un color claro y quedaba
   ilegible sobre la banda gris (ej. "Mis Pedidos"). Los <a> tienen su propio color oscuro. --- */
.breadcrumbs li { color: var(--c-text-2); }

/* ============================================================
   P22 · Mini-carrito del header — popover branded
   Scope estricto: .nineteen-cart-header (NO afecta el dropdown de
   usuario, que comparte .widget_shopping/.flat-ordered). Vence el
   borde navy/verde y el hover verde del theme por especificidad
   (.nineteen-cart-header ...) + orden de carga. Sin !important.
   ============================================================ */

/* [2026-07-29] P9 Fase 1 · El contenedor deja de ser popover flotante y pasa a DRAWER deslizante
   (panel fijo full-height que entra desde la derecha). Caja del popover anterior (no se borra — Regla 4):
.nineteen-cart-header .flat-ordered {
    width: 320px;
    max-width: calc(100vw - 30px);
    padding: 0;
    background: var(--c-blanco);
    border: 1px solid var(--c-border-2);
    border-top: 3px solid var(--c-naranja);
    border-bottom: 1px solid var(--c-border-2);
    border-radius: var(--c-radius-card);
    box-shadow: var(--c-shadow-hover);
    overflow: hidden;
}
*/

/* --- Panel deslizante (drawer) --- Vence position:absolute/top/right, borde y opacity del theme
   (.flat-ordered base es 0,1,0; esta regla 0,2,0 gana). Se controla la visibilidad con transform +
   visibility (ver hover/is-open más abajo), no con opacity. --- */
.nineteen-cart-header .flat-ordered {
    /* --cart-w: ancho del panel, tope 88vw en pantallas chicas. */
    --cart-w: 360px;
    position: fixed;
    top: 0;
    /* [2026-07-29] P9 Fase 1 · Se posiciona por 'left' (no 'right' ni 'transform'). En este theme, a
       anchos <= ~700px el 'right:0' de un fixed se ancla ~180px pasado el borde visual derecho (el layout
       desborda), dejando el panel medio fuera de pantalla. El 'left' sí se ancla al borde visual, así que
       abrimos/cerramos animando 'left': cerrado en 100vw (fuera de pantalla), abierto en 100vw - ancho. */
    left: 100vw;
    right: auto;
    bottom: 0;
    height: 100%;
    width: var(--cart-w);
    max-width: 88vw;
    padding: 0;
    background: var(--c-blanco);
    border: 0;
    border-left: 3px solid var(--c-naranja);
    border-radius: 0;
    box-shadow: -8px 0 30px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: hidden;
    transition: left .3s ease, visibility .3s ease;
    z-index: 1049;                    /* sobre el header (999–2000) y bajo el modal BS5 (1050/1055) */
    overflow: hidden;
}

/* Neutraliza el hover del theme SOLO en el carrito (.widget_shopping:hover .flat-ordered 0,3,0):
   la misma especificidad, cargada después, lo mantiene cerrado; .is-open (0,3,0, aún más abajo) lo abre. */
.nineteen-cart-header:hover .flat-ordered { left: 100vw; visibility: hidden; }
.nineteen-cart-header.is-open .flat-ordered { left: max(calc(100vw - var(--cart-w)), 12vw); visibility: visible; }

/* --- Cabecera del drawer: título + cerrar (X) --- */
.nineteen-cart-header .cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 16px 14px;
    background: var(--c-blanco);
    border-bottom: 1px solid var(--c-border-2);
}
.nineteen-cart-header .cart-drawer__title {
    font-family: var(--c-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--c-negro);
}
.nineteen-cart-header .cart-drawer__close {
    width: 34px;
    height: 34px;
    font-size: 26px;
    line-height: 1;
    color: var(--c-negro);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--c-transition);
}
.nineteen-cart-header .cart-drawer__close:hover,
.nineteen-cart-header .cart-drawer__close:focus { color: var(--c-naranja); }

/* [2026-07-29] P9 Fase 1 · La lista pasa a ocupar el alto disponible y scrollear (footer sticky abajo).
   Lista anterior (popover con max-height fijo) — no se borra (Regla 4):
.nineteen-cart-header .flat-ordered ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 14px;
    max-height: 320px;
    overflow-y: auto;
}
*/
/* Body scrolleable: contiene la lista + el subtotal (que cierra los productos). El footer
   de acciones queda fijo aparte. min-height:0 permite que el flex hijo scrollee de verdad. */
.nineteen-cart-header .cart-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.nineteen-cart-header .flat-ordered ul {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 4px 16px;
    max-height: none;
    overflow: visible;
}

/* Vence float + divider li:before del theme; item compacto en fila. */
.nineteen-cart-header .flat-ordered li {
    position: relative;
    float: none;
    display: flex;
    align-items: flex-start;      /* imagen/nombre/subtotal alineados arriba: jerarquía más clara */
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border-2);
}
.nineteen-cart-header .flat-ordered li:before { content: none; display: none; }
.nineteen-cart-header .flat-ordered li:last-child { border-bottom: 0; }

.nineteen-cart-header .flat-ordered li img {
    width: 54px;
    height: 54px;
    margin: 0;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--c-border-2);
    flex-shrink: 0;
}
.nineteen-cart-header .flat-ordered h3 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--c-font);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}
.nineteen-cart-header .flat-ordered h3 a {
    color: var(--c-text);
    transition: color var(--c-transition);
}
.nineteen-cart-header .flat-ordered h3 a:hover,
.nineteen-cart-header .flat-ordered h3 a:focus { color: var(--c-naranja); }

/* Precio + botón eliminar en línea (vence el color verde y el :before absoluto del theme). */
.nineteen-cart-header .flat-ordered li span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
}
.nineteen-cart-header .flat-ordered li .delete {
    position: static;
    display: inline-block;
    width: auto;
    line-height: 1;
}
.nineteen-cart-header .flat-ordered li .delete:before {
    content: '\f1f8';
    position: static;
    top: auto;
    right: auto;
    font-family: "FontAwesome";
    font-size: 14px;
    color: var(--c-text-2);
    transition: color var(--c-transition);
}
.nineteen-cart-header .flat-ordered li .delete:hover:before,
.nineteen-cart-header .flat-ordered li .delete:focus:before { color: var(--c-naranja); }

/* ============================================================
   [2026-07-29] P9 Fase 2 · Stepper de cantidad dentro de cada item del drawer.
   Reusa las clases del carrito (numbers-row / button_inc / cant-number-input)
   que el JS de nineteen.js ya maneja; acá solo se estila compacto y a marca.
   Scope estricto a .nineteen-cart-header: NO toca el stepper de la página del
   carrito (.nineteen #cart-table .numbers-row ...), que vive con sus propias reglas.
   ============================================================ */

/* Cuerpo del item en dos filas: (arriba) nombre + borrar; (abajo) stepper + subtotal.
   Separa los elementos interactivos (WCAG 2.5.8: targets grandes, ≥10px entre ellos). */
.nineteen-cart-header .cart-drawer-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nineteen-cart-header .cart-drawer-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;                        /* separación nombre ↔ borrar */
}
.nineteen-cart-header .cart-drawer-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;                        /* separación stepper ↔ subtotal */
}
.nineteen-cart-header .cart-drawer-cant-form { margin: 0; }

/* Botón BORRAR: área de toque ~40px, esquina superior derecha, separado del nombre y del stepper
   para no clicar por error (antes estaba pegado al texto). */
.nineteen-cart-header .cart-drawer-item-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: -10px -8px 0 0;           /* alinea al borde compensando el padding del li, sin agrandar la fila */
    color: var(--c-text-2);
    font-size: 15px;
    border-radius: var(--c-radius);
    transition: color var(--c-transition), background var(--c-transition);
}
.nineteen-cart-header .cart-drawer-item-remove:hover,
.nineteen-cart-header .cart-drawer-item-remove:focus {
    color: var(--c-naranja);
    background: var(--c-accent-tint);
}

/* Subtotal del item, a la derecha del stepper. */
.nineteen-cart-header .flat-ordered li .cart-drawer-item-subtotal {
    flex-shrink: 0;
    display: inline-block;
    font-family: var(--c-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-negro);
    white-space: nowrap;
}

/* Stepper compacto:  [-] [input] [+]  (el orden visual se fija con `order`;
   las clases se conservan tal cual para que el handler del JS las encuentre). */
/* Grupo cohesivo con borde único y esquinas redondeadas: [-] [input] [+]. */
.nineteen-cart-header .numbers-row {
    display: inline-flex;
    align-items: center;
    width: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    overflow: hidden;
}
.nineteen-cart-header .numbers-row .cant-number-input {
    order: 2;
    width: 42px;
    height: 30px;
    margin: 0;
    padding: 0 4px;
    text-align: center;
    background-color: var(--c-blanco);
    border: 0;
    border-left: 1px solid var(--c-border);
    border-right: 1px solid var(--c-border);
    border-radius: 0;
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    -moz-appearance: textfield;
}
.nineteen-cart-header .numbers-row .button_inc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: var(--c-blanco);
    color: var(--c-negro);
    border-radius: 0;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background var(--c-transition), color var(--c-transition);
}
.nineteen-cart-header .numbers-row .button_inc:hover,
.nineteen-cart-header .numbers-row .button_inc:focus {
    background-color: var(--c-negro);
    color: var(--c-blanco);
}
/* [-] a la izquierda, [+] a la derecha, input al centro (solo orden visual). */
.nineteen-cart-header .numbers-row .dec { order: 1; }
.nineteen-cart-header .numbers-row .inc { order: 3; }

/* [2026-07-29] .cart-drawer-item-end quedó obsoleta con el rediseño del item (el subtotal
   pasó a la fila inferior junto al stepper, y el borrar a la esquina superior). Regla como
   referencia (Regla 4):
.nineteen-cart-header .flat-ordered li span.cart-drawer-item-end {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
} */

/* --- Estado vacío --- */
.nineteen-cart-header .flat-ordered li.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 0;
    border-bottom: 0;
    color: var(--c-text-2);
    font-family: var(--c-font);
    font-size: 14px;
    text-align: center;
}
.nineteen-cart-header .flat-ordered li.cart-empty .fa { font-size: 24px; color: var(--c-muted-border); }

/* --- Subtotal: CIERRE del bloque de productos (body), no va con las acciones.
   Fondo blanco como la lista + borde superior que lo separa del listado. Fijo (siempre visible). --- */
.nineteen-cart-header .flat-ordered .total {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 16px;
    border-top: 1px solid var(--c-border);
    background: var(--c-blanco);
}

/* --- Footer del drawer: SOLO las acciones, separado del subtotal por un borde. --- */
.nineteen-cart-header .cart-drawer__foot {
    flex-shrink: 0;
    background: var(--c-blanco);
    border-top: 1px solid var(--c-border-2);
    padding-top: 14px;
}
.nineteen-cart-header .flat-ordered .total:before { content: none; }
.nineteen-cart-header .flat-ordered .total .flat-left,
.nineteen-cart-header .flat-ordered .total .flat-right { float: none; }
.nineteen-cart-header .flat-ordered .total strong {
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--c-text-2);
}
.nineteen-cart-header .flat-ordered .total .flat-right {
    font-family: var(--c-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-negro);
}

/* --- Botones VER CARRITO / FINALIZAR COMPRA: separados y a marca ---
   Vence .flat-ordered .event a (verde, ancho fijo 120px) del theme. */
.nineteen-cart-header .flat-ordered .event {
    display: flex;
    gap: 10px;
    margin-top: 0;
    padding: 0 16px 16px;
}
.nineteen-cart-header .flat-ordered .event a {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    padding: 10px 12px;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--c-radius);
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}
/* Secundario (outline negro → relleno negro en hover). */
.nineteen-cart-header .flat-ordered .event a.cart-event__ver {
    color: var(--c-primary);
    background: transparent;
    border-color: var(--c-primary);
}
.nineteen-cart-header .flat-ordered .event a.cart-event__ver:hover,
.nineteen-cart-header .flat-ordered .event a.cart-event__ver:focus {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
}
/* Primario (negro → naranja en hover, texto negro sobre naranja). */
.nineteen-cart-header .flat-ordered .event a.cart-event__checkout {
    color: var(--c-blanco);
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.nineteen-cart-header .flat-ordered .event a.cart-event__checkout:hover,
.nineteen-cart-header .flat-ordered .event a.cart-event__checkout:focus {
    color: var(--c-on-accent);
    background: var(--c-accent);
    border-color: var(--c-accent);
}

/* [2026-07-29] P9 Fase 1 · Como drawer ya no se recentra el popover; entra desde la derecha en todas
   las anchuras y el max-width:calc(100vw - 40px) evita que se salga en mobile. Responsive anterior
   (recentrado del popover) — no se borra (Regla 4):
@media (max-width: 991px) {
    .nineteen-cart-header .flat-ordered { right: 50%; margin-right: -160px; }
}
*/

/* ============================================================
   P9 Fase 1 · Drawer del mini-carrito — piezas del deslizante
   (footer sticky abajo, backdrop, scroll-lock del body y
   ocultar el botón flotante de WhatsApp mientras está abierto).
   ============================================================ */

/* El subtotal y los botones no encogen: quedan fijos al fondo mientras la lista (ul) scrollea. */
.nineteen-cart-header .flat-ordered .total,
.nineteen-cart-header .flat-ordered .event {
    flex-shrink: 0;
}

/* Fondo oscuro del drawer (mismo criterio que #filtros-backdrop de P25). */
.cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1048;                    /* justo bajo el panel (1049) y bajo el modal BS5 (1050) */
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}
body.carrito-abierto .cart-backdrop {
    opacity: 1;
    visibility: visible;
}
/* Scroll-lock del body mientras el drawer está abierto (la posición la fija/restaura el JS). */
body.carrito-abierto {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}
/* El botón flotante de WhatsApp (z-index alto) no debe quedar sobre el drawer. */
body.carrito-abierto .whatsapp-btn,
body.carrito-abierto .whatsapp-float__tooltip {
    display: none;
}

/* ============================================================
   [2026-07-29] Carrito (/cart): acotar el thumbnail del producto para que las filas
   no se expandan. El alto gigante venía de un style="width:200px" inline (removido del
   blade), que dejaba el alto natural del placeholder (~280px). Scope .nineteen #cart-table
   (convención del proyecto, ver nineteen.css:56-86); casper.css carga último → gana por
   orden, sin !important. No toca .numbers-row/.button_inc (stepper) ni .nineteen-cart-header.
   ============================================================ */
.nineteen #cart-table tbody td {
    vertical-align: middle;
}
.nineteen #cart-table tbody td img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--c-border-2);
    border-radius: var(--c-radius);
}

/* ============================================================
   [2026-07-29] Checkout · restyle de marca (patrón P18). Reusa .c-form-card /
   .c-form-section / .c-field / .c-btn. CSS propio SOLO para: mapa, opciones (radio) de
   pago/envío y el resumen de compra. Todo scopeado a .checkout-page.
   ============================================================ */
/* Neutraliza el azul del template en radios/checkbox → acento naranja. */
.checkout-page input[type="radio"],
.checkout-page input[type="checkbox"] {
    accent-color: var(--c-naranja);
}
/* Mapa de ubicación (antes en <style> inline de la vista). */
.checkout-page #checkout-map {
    height: 220px;
    width: 100%;
    border: 1px solid var(--c-input-border);
    border-radius: var(--c-radius);
}
/* Opción seleccionable (método de pago / tipo de envío). */
.checkout-page .checkout-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px 14px;
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 15px);
    color: var(--c-text);
    background: var(--c-blanco);
    border: 1px solid var(--c-input-border);
    border-radius: var(--c-radius);
    cursor: pointer;
    transition: border-color var(--c-transition), background var(--c-transition);
}
.checkout-page .checkout-option:hover {
    border-color: var(--c-naranja);
    background: var(--c-accent-tint);
}
.checkout-page .checkout-option input {
    margin: 0;
    flex: 0 0 auto;
}
.checkout-page .checkout-option__label {
    line-height: 1.3;
}
/* Resumen de la compra. */
.checkout-page .checkout-summary__items {
    margin-bottom: 14px;
}
.checkout-page .checkout-summary__item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-family: var(--c-font);
    font-size: clamp(12px, 1.6vw, 14px);
    color: var(--c-text-2);
    border-bottom: 1px solid var(--c-border-2);
}
.checkout-page .checkout-summary__item-name {
    padding-right: 8px;
}
.checkout-page .checkout-summary__item-price {
    white-space: nowrap;
    font-weight: 600;
    color: var(--c-text);
}
.checkout-page .checkout-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-family: var(--c-font);
    font-size: clamp(13px, 1.7vw, 15px);
    color: var(--c-text);
}
.checkout-page .checkout-summary__row--total {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 2px solid var(--c-border-2);
    font-weight: 700;
    font-size: clamp(15px, 2vw, 18px);
    color: var(--c-negro);
}
.checkout-page .checkout-summary__row--total .checkout-summary__amount {
    color: var(--c-naranja);
}
/* Botón de confirmación a ancho completo. */
.checkout-page .checkout-submit {
    display: block;
    width: 100%;
    margin-top: 6px;
}
@media (max-width: 767.98px) {
    .checkout-page .c-form-card {
        margin-bottom: 18px;
    }
}

/* ==========================================================================
   [2026-07-29] P24 · Paginación
   Markup REAL (Laravel 5.7 → vista pagination = bootstrap-4, NO BS3):
     <ul class="pagination"> <li class="page-item"><a class="page-link">1</a></li>
       <li class="page-item active"><span class="page-link">2</span></li>
       <li class="page-item disabled"><span class="page-link">…</span></li> ... </ul>
   El azul lo mete Bootstrap 5.1.3 (CDN): .page-link{color:#0d6efd} (0,1,0) y
   .page-item.active .page-link{background:#0d6efd} (0,3,0). Vencemos SIN !important
   prefijando con .pagination (suma una clase): base gana por especificidad (0,2,0>0,1,0);
   activo/disabled ganan (0,4,0>0,3,0); el reset de margen negativo y radios de primero/último
   de BS5 (0,3,0) se igualan a (0,3,0) y ganan por orden (casper.css carga después).
   Vistas: productos/index, productos/promotions, publicaciones/index,
   publicaciones/publicacion-categoria, orders/index.
   ========================================================================== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0 8px;
    padding: 0;
    list-style: none;
    font-family: var(--c-font);
}
/* Celda base: aplica a <a> navegable y al <span> de activo/disabled (0,2,0 > BS5 0,1,0) */
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--c-border);
    background: var(--c-blanco);
    color: var(--c-text);
    font-family: var(--c-font);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--c-transition), color var(--c-transition), border-color var(--c-transition);
}
/* Anula el margin-left:-1px y los radios de primero/último de BS5 (0,3,0); radio propio en todas. */
.pagination .page-item .page-link {
    margin: 0;
    border-radius: var(--c-radius);
}
/* Página actual: <li class="page-item active"><span> — negro de marca (0,4,0 > BS5 0,3,0) */
.pagination .page-item.active .page-link {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-blanco);
    cursor: default;
}
/* Prev/Next inactivo y separador "…": <li class="page-item disabled"><span> — atenuado (0,4,0 > BS5 0,3,0) */
.pagination .page-item.disabled .page-link {
    color: var(--c-muted-fg);
    background: var(--c-muted-bg);
    border-color: var(--c-border);
    cursor: not-allowed;
}
/* Hover/foco SOLO en celdas navegables (ni active ni disabled) — tinte naranja */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) .page-link:focus {
    background: var(--c-accent-tint);
    border-color: var(--c-accent);
    color: var(--c-text);
    text-decoration: none;
}
.pagination .page-item:not(.active):not(.disabled) .page-link:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

/* ============================================================
   [2026-07-29] Checkout · STEPPER de 3 pasos (Resumen · Pago · Envío).
   Un panel visible por vez; indicador arriba + botones Atrás/Siguiente.
   Reusa tokens y .c-btn / .c-btn--outline. Todo scopeado a .checkout-page.
   ============================================================ */
/* Panels: solo uno visible; el resto oculto por atributo [hidden]. */
.checkout-page .checkout-step-panel[hidden] {
    display: none;
}
/* --- Indicador de pasos (1 Resumen · 2 Pago · 3 Envío) --- */
.checkout-page .checkout-steps {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0 auto 22px;
    padding: 0;
    max-width: 560px;
}
.checkout-page .checkout-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    position: relative;
    font-family: var(--c-font);
    text-align: center;
}
/* Línea conectora entre pasos (a la izquierda de cada paso, menos el primero). */
.checkout-page .checkout-step::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--c-border);
}
.checkout-page .checkout-step:first-child::before {
    display: none;
}
.checkout-page .checkout-step.is-active::before,
.checkout-page .checkout-step.is-done::before {
    background: var(--c-naranja);
}
/* Círculo con el número del paso. */
.checkout-page .checkout-step__num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--c-radius-pill);
    background: var(--c-blanco);
    border: 2px solid var(--c-border);
    color: var(--c-text-2);
    font-weight: 600;
    font-size: 15px;
    transition: background var(--c-transition), border-color var(--c-transition), color var(--c-transition);
}
.checkout-page .checkout-step.is-active .checkout-step__num {
    background: var(--c-naranja);
    border-color: var(--c-naranja);
    color: var(--c-on-accent);
}
.checkout-page .checkout-step.is-done .checkout-step__num {
    background: var(--c-accent-tint);
    border-color: var(--c-naranja);
    color: var(--c-naranja);
}
/* Etiqueta del paso. */
.checkout-page .checkout-step__label {
    font-size: clamp(12px, 1.6vw, 14px);
    color: var(--c-text-2);
    line-height: 1.2;
}
.checkout-page .checkout-step.is-active .checkout-step__label {
    color: var(--c-text);
    font-weight: 600;
}
/* --- Botonera Atrás / Siguiente dentro de cada panel --- */
.checkout-page .checkout-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}
/* Paso 1: solo "Siguiente", alineado a la derecha. */
.checkout-page .checkout-nav--end {
    justify-content: flex-end;
}
/* En el stepper el confirmar convive con "Atrás"; deja el ancho completo (0,3,0 vence a .checkout-submit 0,2,0). */
.checkout-page .checkout-nav .checkout-submit {
    display: inline-block;
    width: auto;
    margin-top: 0;
}
/* Mobile: los botones se apilan y ocupan el ancho completo. */
@media (max-width: 575.98px) {
    .checkout-page .checkout-nav {
        flex-direction: column-reverse;
    }
    .checkout-page .checkout-nav .c-btn {
        width: 100%;
    }
    .checkout-page .checkout-step__label {
        font-size: 11px;
    }
}

/* [2026-07-29] Salida al catálogo fuera del card (pasos 2 y 3). En el paso 1 va como
   .c-btn--outline dentro del .checkout-nav (donde iría "Atrás"). */
.checkout-page .checkout-keep-shopping {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--c-font);
    font-size: 14px;
}
.checkout-page .checkout-keep-shopping a {
    color: var(--c-text-2);
    text-decoration: none;
    transition: color var(--c-transition);
}
.checkout-page .checkout-keep-shopping a:hover,
.checkout-page .checkout-keep-shopping a:focus {
    color: var(--c-naranja);
    text-decoration: underline;
}

/* [2026-07-29] Botón "ir arriba": a marca (era verde #92c841 del template) y APILADO sobre el
   WhatsApp flotante + su tooltip (que llega a ~bottom:142) para que no colisionen al scrollear. */
.go-top { background-color: var(--c-negro); border-radius: 50%; }
.go-top:hover { background-color: var(--c-naranja); }
/* right:40 = mismo centro vertical que el WhatsApp (que tiene right:30 + margin:5 → centro a 60px del borde). */
.go-top.show { bottom: 150px; right: 40px; }

/* ============================================================
   [2026-07-29] Footer · jerarquía título↔opciones, iconos y hover.
   Se PREFIJA con `.nineteen footer` (igual raíz que el theme) + clases extra para
   VENCER el círculo del ícono (nineteen.css:181 `.nineteen footer .widget ul li:before`,
   30px #373739) que solapaba el texto. Sin !important.
   ============================================================ */
.flat-footer-top { padding: 50px 0; }
/* Título del widget: destacado + acento naranja, claramente separado de los links. */
.flat-footer-top .widget > h2 {
    font-family: var(--c-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 18px;
    padding-bottom: 12px;
    position: relative;
}
.flat-footer-top .widget > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--c-naranja);
}
/* Spacing parejo de los items (el theme ponía padding-left:40px por el círculo). */
.nineteen footer .widget ul li { padding-left: 22px; margin-bottom: 2px; }
/* Reset del CÍRCULO del theme en todos los íconos del footer + acento naranja. */
.nineteen footer .widget.widget_services ul li::before,
.nineteen footer .widget.widget_my_account ul li::before,
.nineteen footer .widget_about_us .flat-infomation li::before {
    background: none;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border-radius: 0;
    left: 0;
    top: 9px;
    color: var(--c-naranja);
}
/* Links: chevron limpio (antes círculo-flecha \f0a9). */
.nineteen footer .widget.widget_services ul li::before,
.nineteen footer .widget.widget_my_account ul li::before {
    content: "\f105";
    font-family: FontAwesome;
    font-size: 14px;
    transition: transform var(--c-transition);
}
.nineteen footer .widget_services a,
.nineteen footer .widget.widget_my_account a {
    display: inline-block;
    transition: color var(--c-transition), transform var(--c-transition);
}
/* Hover: el link y su chevron se desplazan levemente + color de marca. */
.nineteen footer .widget.widget_services ul li:hover::before,
.nineteen footer .widget.widget_my_account ul li:hover::before { transform: translateX(3px); }
.nineteen footer .widget_services a:hover,
.nineteen footer .widget.widget_my_account a:hover { color: var(--c-naranja); transform: translateX(3px); }
/* CONTÁCTENOS: conserva el glifo de tipo (ubicación/email/teléfono); solo resetea el círculo
   (arriba) y ajusta spacing + hover. */
.nineteen footer .widget_about_us .flat-infomation li { padding-left: 24px; margin-bottom: 8px; }
.nineteen footer .widget_about_us .flat-infomation a { transition: color var(--c-transition); }
.nineteen footer .widget_about_us .flat-infomation a:hover { color: var(--c-naranja); }

/* [2026-07-29] Badge flotante PROMO/NUEVO sobre la card de producto (esquinas superiores de la imagen).
   Antes se renderizaban como bloque al fondo de la card; ahora flotan sobre la imagen como indicativo. */
.products-grid .item-inner .pimg { position: relative; }
.products-grid .item-inner .c-card-badge {
    position: absolute;
    top: 10px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: var(--c-radius);
    font-family: var(--c-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.products-grid .item-inner .c-card-badge--promo { left: 10px; background: var(--c-naranja); color: var(--c-blanco); }
.products-grid .item-inner .c-card-badge--new { right: 10px; background: var(--c-negro); color: var(--c-blanco); }

/* [2026-07-29] P14 · Empty-state de páginas legales/genéricas (generic-info) sin contenido. */
.generic-info-empty {
    padding: 3rem 1rem;
    color: var(--c-text-2);
    font-family: var(--c-font);
    font-size: 1.05rem;
}

/* ============================================================
   [2026-07-29] P7/Blog · Sistema visual del blog (marca Casper).
   Consolidado de las 3 vistas (index, categoría, detalle). Scope .blog-page.
   Componentes (card/sidebar/widget/cat-list/latest) canónicos y consistentes.
   El layout se scopea a cada wrapper para no chocar: index .blog-layout (grid),
   categoría .blog-page__layout (flex), detalle Bootstrap row/col.
   ============================================================ */
.blog-page {
    font-family: var(--c-font);
    color: var(--c-text);
    padding: 40px 0 60px;
}

/* --- Breadcrumb propio (categoría) --- */
.blog-page .blog-breadcrumb { font-size: 13px; color: var(--c-text-2); margin-bottom: 14px; }
.blog-page .blog-breadcrumb a { color: var(--c-text-2); }
.blog-page .blog-breadcrumb a:hover { color: var(--c-naranja); }
.blog-page .blog-breadcrumb__sep { margin: 0 8px; color: var(--c-border); }
.blog-page .blog-breadcrumb__current { color: var(--c-text); font-weight: 600; }

/* --- Encabezado de página (categoría) --- */
.blog-page .blog-page__header { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 2px solid var(--c-naranja); }
.blog-page .blog-page__title { font-family: var(--c-font); font-size: 26px; font-weight: 700; color: var(--c-negro); margin: 0; }

/* --- Layout index (grid: sidebar 280 | artículos) --- */
@media (min-width: 992px) {
    .blog-page .blog-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; }
    .blog-page .blog-layout .blog-sidebar { grid-column: 1; grid-row: 1; }
    .blog-page .blog-layout .blog-articles { grid-column: 2; grid-row: 1; }
}
/* --- Layout categoría (flex) --- */
.blog-page .blog-page__layout { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.blog-page .blog-page__main { flex: 1 1 0; min-width: 0; }
@media (min-width: 992px) {
    .blog-page .blog-page__layout .blog-sidebar { flex: 0 0 300px; max-width: 300px; }
}

/* --- Grid de cards --- */
.blog-page .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }

/* --- Card de publicación (canónica: index + categoría) --- */
.blog-page .blog-card { display: flex; flex-direction: column; background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); overflow: hidden; transition: box-shadow var(--c-transition), transform var(--c-transition); }
.blog-page .blog-card:hover { box-shadow: var(--c-shadow-hover); transform: translateY(-2px); }
.blog-page .blog-card__media { display: block; overflow: hidden; background: var(--c-muted-bg); aspect-ratio: 16 / 10; }
.blog-page .blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--c-transition); }
.blog-page .blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-page .blog-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; padding: 18px 20px 22px; text-align: center; }
.blog-page .blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--c-text-2); text-transform: uppercase; letter-spacing: .04em; }
.blog-page .blog-card__sep { color: var(--c-border); }
.blog-page .blog-card__cat { color: var(--c-naranja); font-weight: 600; }
.blog-page .blog-card__title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.blog-page .blog-card__title a { color: var(--c-negro); transition: color var(--c-transition); }
.blog-page .blog-card__title a:hover { color: var(--c-naranja); }
.blog-page .blog-card__excerpt { margin: 0; font-size: 14px; line-height: 1.6; color: var(--c-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-page .blog-card__cta, .blog-page .blog-card__body .c-btn { align-self: flex-start; }
/* Pie de la card: separa la acción del resto con una línea suave (jerarquía consistente con la card de producto). */
.blog-page .blog-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--c-border-2); text-align: center; }

/* --- Estado vacío --- */
.blog-page .blog-empty { padding: 48px 20px; text-align: center; color: var(--c-text-2); background: var(--c-muted-bg); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); font-size: 15px; }
.blog-page .blog-empty__title { font-family: var(--c-font); font-size: 18px; font-weight: 600; color: var(--c-negro); margin: 0 0 6px; }
.blog-page .blog-empty__text { font-size: 14px; color: var(--c-text-2); margin: 0 0 18px; }

/* --- Paginación (contenedor; .page-item/.page-link ya a marca en P24) --- */
.blog-page .blog-pagination { margin-top: 34px; display: flex; justify-content: center; }

/* --- Sidebar (común a las 3 vistas) --- */
.blog-page .blog-sidebar { margin-top: 40px; }
@media (min-width: 992px) { .blog-page .blog-sidebar { margin-top: 0; } }
.blog-page .blog-widget { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); padding: 20px 22px; margin-bottom: 24px; }
.blog-page .blog-widget__title { font-family: var(--c-font); font-size: 16px; font-weight: 600; color: var(--c-negro); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--c-naranja); }
/* Categorías: chevron naranja, sin celeste */
.blog-page .blog-cat-list { list-style: none; margin: 0; padding: 0; }
.blog-page .blog-cat-list li + li { border-top: 1px solid var(--c-border-2); }
.blog-page .blog-cat-list a { display: block; position: relative; padding: 9px 0 9px 16px; color: var(--c-text); font-size: 14px; transition: color var(--c-transition), padding var(--c-transition); }
.blog-page .blog-cat-list a::before { content: "\203A"; position: absolute; left: 0; color: var(--c-naranja); font-weight: 700; }
.blog-page .blog-cat-list a:hover { color: var(--c-naranja); padding-left: 20px; }
/* Últimas publicaciones: soporta .blog-latest__thumb y .blog-latest__item img */
.blog-page .blog-latest { list-style: none; margin: 0; padding: 0; }
.blog-page .blog-latest__item { padding: 12px 0; }
.blog-page .blog-latest__item + .blog-latest__item { border-top: 1px solid var(--c-border-2); }
.blog-page .blog-latest__item:first-child { padding-top: 0; }
.blog-page .blog-latest__item:last-child { padding-bottom: 0; }
.blog-page .blog-latest__item a { display: flex; align-items: center; gap: 12px; }
.blog-page .blog-latest__thumb, .blog-page .blog-latest__item img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; border-radius: var(--c-radius); background: var(--c-muted-bg); }
.blog-page .blog-latest__title { font-size: 13.5px; line-height: 1.4; color: var(--c-text); transition: color var(--c-transition); }
.blog-page .blog-latest__item a:hover .blog-latest__title { color: var(--c-naranja); }

/* ============================================================
   Detalle del artículo (única vista; sin conflicto con lo anterior)
   ============================================================ */
.blog-page .blog-article { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); overflow: hidden; margin-bottom: 32px; }
.blog-page .blog-article__header { padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 40px) 0; }
.blog-page .blog-article__title { font-family: var(--c-font); font-weight: 700; color: var(--c-negro); font-size: clamp(24px, 4vw, 36px); line-height: 1.2; margin: 0 0 16px; }
.blog-page .blog-article__meta { list-style: none; margin: 0; padding: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; border-bottom: 1px solid var(--c-border-2); }
.blog-page .blog-article__meta li { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(12px, 1.7vw, 13px); color: var(--c-text-2); }
.blog-page .blog-article__meta i { color: var(--c-naranja); }
.blog-page .blog-article__meta a { color: var(--c-text-2); transition: color var(--c-transition); }
.blog-page .blog-article__meta a:hover { color: var(--c-naranja); }
/* Imagen destacada: acepta cualquier proporción sin desbordar ni dominar.
   Ancho completo; alto natural pero capado a 480px (una foto muy alta se recorta
   por el centro con object-fit:cover, nunca se sale de su caja). */
.blog-page .blog-article__media { margin: 0; background: var(--c-muted-bg); overflow: hidden; }
.blog-page .blog-article__media img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; object-position: center; }
.blog-page .blog-article__body { max-width: 72ch; margin: 0 auto; padding: clamp(24px, 4vw, 40px); font-size: clamp(15px, 2vw, 17px); line-height: 1.75; color: var(--c-text); }
.blog-page .blog-article__body > *:first-child { margin-top: 0; }
.blog-page .blog-article__body > *:last-child { margin-bottom: 0; }
.blog-page .blog-article__body p { margin: 0 0 1.25em; }
.blog-page .blog-article__body h1, .blog-page .blog-article__body h2, .blog-page .blog-article__body h3, .blog-page .blog-article__body h4, .blog-page .blog-article__body h5, .blog-page .blog-article__body h6 { font-family: var(--c-font); font-weight: 600; color: var(--c-negro); line-height: 1.3; margin: 1.6em 0 .6em; }
.blog-page .blog-article__body h2 { font-size: clamp(20px, 3vw, 26px); }
.blog-page .blog-article__body h3 { font-size: clamp(18px, 2.6vw, 22px); }
.blog-page .blog-article__body h4 { font-size: clamp(16px, 2.2vw, 19px); }
.blog-page .blog-article__body a { color: var(--c-naranja); text-decoration: underline; word-break: break-word; }
.blog-page .blog-article__body a:hover { color: var(--c-negro); }
.blog-page .blog-article__body img { max-width: 100%; height: auto; border-radius: var(--c-radius); margin: 1em 0; }
.blog-page .blog-article__body ul, .blog-page .blog-article__body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.blog-page .blog-article__body li { margin-bottom: .4em; }
.blog-page .blog-article__body blockquote { margin: 1.5em 0; padding: 4px 20px; border-left: 4px solid var(--c-naranja); background: var(--c-accent-tint); color: var(--c-text-2); font-style: italic; border-radius: 0 var(--c-radius) var(--c-radius) 0; }
.blog-page .blog-article__body table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.blog-page .blog-article__body th, .blog-page .blog-article__body td { border: 1px solid var(--c-border); padding: 8px 12px; text-align: left; }
/* Comentarios */
.blog-page .blog-comments { background: var(--c-blanco); border: 1px solid var(--c-border-2); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); padding: clamp(20px, 4vw, 32px); }
.blog-page .blog-comments__title { font-family: var(--c-font); font-weight: 600; font-size: clamp(18px, 2.6vw, 22px); color: var(--c-negro); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--c-negro); }
.blog-page .blog-comments__list { list-style: none; margin: 0 0 28px; padding: 0; }
.blog-page .blog-comment { padding: 16px 0; border-bottom: 1px solid var(--c-border-2); }
.blog-page .blog-comment:last-child { border-bottom: 0; }
.blog-page .blog-comment__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.blog-page .blog-comment__author { font-style: normal; font-weight: 600; color: var(--c-negro); font-size: clamp(14px, 2vw, 15px); }
.blog-page .blog-comment__date { font-size: 12px; color: var(--c-text-2); }
.blog-page .blog-comment__text { margin: 0; font-size: clamp(14px, 2vw, 15px); line-height: 1.65; color: var(--c-text); }
.blog-page .blog-comments__empty { margin: 0 0 28px; padding: 24px; text-align: center; background: var(--c-muted-bg); border: 1px dashed var(--c-muted-border); border-radius: var(--c-radius-card); color: var(--c-muted-fg); font-size: clamp(14px, 2vw, 15px); }
/* Form de comentar (reusa .c-btn) */
.blog-page .blog-comment-form { padding-top: 8px; border-top: 1px solid var(--c-border-2); }
.blog-page .blog-comment-form__title { font-family: var(--c-font); font-weight: 600; font-size: clamp(18px, 2.6vw, 20px); color: var(--c-negro); margin: 20px 0 16px; }
.blog-page .blog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.blog-page .comment-form .form-control { font-family: var(--c-font); font-size: clamp(13px, 1.7vw, 15px); width: 100%; border: 1px solid var(--c-input-border); border-radius: var(--c-radius); padding: clamp(9px, 2vw, 12px) 14px; background: var(--c-blanco); margin-bottom: 16px; }
.blog-page .comment-form .form-control:focus { border-color: var(--c-naranja); box-shadow: 0 0 0 .2rem var(--c-accent-ring); outline: none; }
.blog-page .comment-form textarea.form-control { resize: vertical; min-height: 120px; }
/* Sidebar sticky solo en detalle (BS col) */
@media (min-width: 992px) { .blog-page .row .blog-sidebar { position: sticky; top: 20px; } }

/* --- Responsive blog --- */
@media (max-width: 575px) {
    .blog-page .blog-grid { grid-template-columns: 1fr; }
    .blog-page .blog-page__title { font-size: 22px; }
    .blog-page .blog-form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   [2026-07-29] Toolbar del listado (catálogo + promociones):
   contador a la izquierda, control de orden a la derecha.
   Scope .flat-top-bar-shop.c-toolbar (doble clase para ganar al theme).
   ============================================================ */
.flat-top-bar-shop.c-toolbar { margin-bottom: 24px; padding-bottom: 14px; }
.flat-top-bar-shop.c-toolbar:first-child:before { bottom: 0; background-color: var(--c-border); }
.flat-top-bar-shop.c-toolbar .flat-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; width: 100%; float: none; }
.flat-top-bar-shop.c-toolbar .flat-filter > div { display: block; float: none; margin: 0; }
.flat-top-bar-shop.c-toolbar .flat-showpost { font-family: var(--c-font); font-size: 14px; line-height: 1.4; color: var(--c-text-2); }
.flat-top-bar-shop.c-toolbar .flat-sortby { display: flex; align-items: center; gap: 10px; }
.flat-top-bar-shop.c-toolbar .flat-sortby .c-toolbar__sort-label { font-family: var(--c-font); font-size: 14px; font-weight: 500; color: var(--c-text-2); white-space: nowrap; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select { display: inline-block; position: relative; margin: 0; min-width: 150px; background: var(--c-blanco); border: 1px solid var(--c-border); border-radius: var(--c-radius); cursor: pointer; transition: border-color var(--c-transition); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:hover { border-color: var(--c-naranja); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:before { display: none; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select > li { padding: 9px 38px 9px 14px; font-family: var(--c-font); font-size: 14px; line-height: 1.2; color: var(--c-text); white-space: nowrap; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select > li > span { color: var(--c-text); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:after { content: '\f078'; font-family: "FontAwesome"; font-size: 10px; line-height: 1; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--c-text-2); pointer-events: none; transition: color var(--c-transition), transform var(--c-transition); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select:hover:after { color: var(--c-naranja); transform: translateY(-50%) rotate(180deg); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul { position: absolute; top: 100%; left: 0; right: 0; min-width: 100%; margin: 0; padding: 6px 0; background: var(--c-blanco); border: 1px solid var(--c-border); border-radius: var(--c-radius); box-shadow: var(--c-shadow-card); list-style: none; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity var(--c-transition), transform var(--c-transition), visibility var(--c-transition); z-index: 20; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select > li:hover ul { visibility: visible; opacity: 1; transform: translateY(0); width: auto; background: var(--c-blanco); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul li { padding: 0; }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul li a { display: block; padding: 9px 16px; font-family: var(--c-font); font-size: 14px; color: var(--c-text); text-decoration: none; white-space: nowrap; transition: background var(--c-transition), color var(--c-transition); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select ul li a:hover { background: var(--c-accent-tint); color: var(--c-naranja); }
.flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select li li:hover { background: var(--c-accent-tint); color: var(--c-naranja); }
@media (max-width: 575px) {
    .flat-top-bar-shop.c-toolbar .flat-filter { flex-direction: column; align-items: flex-start; }
    .flat-top-bar-shop.c-toolbar .flat-sortby { width: 100%; }
    .flat-top-bar-shop.c-toolbar .flat-sortby .flat-blog-select { flex: 1; min-width: 0; }
}

/* ============================================================
   [2026-07-29] Card de producto · Jerarquía visual (imagen → nombre → precio → acciones).
   Scope .products-grid .item-inner (item.blade.php). Sobrescribe el theme (título/precio verde).
   ============================================================ */
.products-grid .item-inner .info-inner { padding: 0 14px 16px; }
.products-grid .item-inner .c-card-title { margin: 0 0 10px; min-height: 2.7em; font-family: var(--c-font); font-size: 15px; font-weight: 600; line-height: 1.35; } /* [2026-07-30] nombre 14→15px: es el identificador primario del listado */
.products-grid .item-inner .c-card-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-negro); }
.products-grid .item-inner .c-card-title a:hover { color: var(--c-naranja); }
.products-grid .item-inner .item-price { margin: 0 0 14px; }
.products-grid .item-inner .price-box { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; min-height: 26px; }
.products-grid .item-inner .price-box ins { margin: 0; text-decoration: none; }
/* [2026-07-30] Precio regular en NEGRO: el naranja reprobaba WCAG AA (contraste 3.2:1 a 17px)
   y el acento de marca se reserva para señalar oferta. El nombre recupera su rol de identificador. */
.products-grid .item-inner .price-box .new_price { font-family: var(--c-font); font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--c-negro); } /* [2026-07-30] precio 17→14px (tamaño original del theme: .price-box ins en style.css). El nombre (15px) recupera el rol de identificador primario; el precio mantiene énfasis por peso 700, no por tamaño */
/* Precio de OFERTA (el theme lo envuelve en <ins>): conserva el naranja como señal de rebaja,
   coherente con el badge PROMO. Mayor especificidad (elemento ins) → gana sin !important. */
.products-grid .item-inner .price-box ins .new_price { color: var(--c-naranja); }
.products-grid .item-inner .price-box del { margin: 0; }
.products-grid .item-inner .price-box .old_price { font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--c-text-2); }
/* Acciones separadas del resto por una línea suave (jerarquía), sin espacio vacío reservado. */
.products-grid .item-inner .item-content > .m-container { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--c-border-2); font-size: inherit; line-height: normal; }
.products-grid .item-inner .producto-accion { min-height: 0; }