/* =========================================================================
       [1] BOTTOM NAV MÓVIL — sensación de "app instalada"
       ========================================================================= */
    .modern-bottom-bar {
        display: none; /* desktop oculto, mobile flex */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #ffffff;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
        z-index: 9990;
        align-items: stretch;
        justify-content: space-around;
        padding: 0;
    }
    @media (max-width: 768px) {
        .modern-bottom-bar { display: flex; }
        /* dejá lugar para que el contenido no quede tapado */
        body { padding-bottom: 60px; }
        /* el WhatsApp existente molesta sobre el bottom-bar; el scroll-top va arriba */
        .ws-flotante { bottom: 80px !important; }
        #scroll-top { bottom: 202px !important; }
    }
    .modern-bottom-bar a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: #64748b;
        font-size: 10px;
        font-weight: 500;
        line-height: 1;
        position: relative;
        padding: 6px 4px 4px;
        transition: color 0.2s ease;
    }
    .modern-bottom-bar a i {
        font-size: 22px;
        line-height: 1;
        margin-bottom: 1px;
    }
    .modern-bottom-bar a:hover,
    .modern-bottom-bar a:active,
    .modern-bottom-bar a.is-active {
        color: #ef4444;
    }
    .modern-bottom-bar a.is-active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 25%;
        right: 25%;
        height: 3px;
        background: #ef4444;
        border-radius: 0 0 3px 3px;
    }
    /* badge del carrito */
    .modern-bottom-bar .mb-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 18px);
        background: #ef4444;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 1;
        padding: 2px 5px;
        border-radius: 10px;
        min-width: 16px;
        text-align: center;
        display: none;
    }
    .modern-bottom-bar .mb-badge.has-items { display: inline-block; }

    /* =========================================================================
       [2] FABs FLOTANTES — desktop, esquina inferior derecha, stack vertical
       ========================================================================= */
    @media (min-width: 769px) {
        /* Reposiciona y restila el WhatsApp existente */
        .ws-flotante {
            position: fixed !important;
            bottom: 24px !important;
            right: 24px !important;
            width: 56px !important;
            height: 56px !important;
            background-color: #25d366 !important;
            background-size: 32px !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            border-radius: 50% !important;
            box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4) !important;
            display: block !important;
            z-index: 9985 !important;
            transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        }
        .ws-flotante:hover {
            transform: scale(1.08) !important;
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.55) !important;
        }
        /* pulso sutil para llamar la atención */
        .ws-flotante::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid rgba(37, 211, 102, 0.4);
            animation: modern-fab-pulse 2.4s ease-out infinite;
        }
        @keyframes modern-fab-pulse {
            0%   { transform: scale(0.95); opacity: 0.7; }
            70%  { transform: scale(1.25); opacity: 0;   }
            100% { transform: scale(1.25); opacity: 0;   }
        }

        /* FAB extra: teléfono (sólo si tenemos el dato) */
        .modern-fab-phone {
            position: fixed;
            bottom: 92px; /* arriba del WhatsApp */
            right: 24px;
            width: 56px;
            height: 56px;
            background: #ef4444;
            color: #fff !important;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
            z-index: 9985;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .modern-fab-phone:hover {
            transform: scale(1.08);
            color: #fff !important;
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.55);
        }
        /* Si NO hay WhatsApp, el teléfono pasa al lugar del WhatsApp */
        .no-ws .modern-fab-phone { bottom: 24px; }

        /* Restila el #scroll-top para que sea coherente */
        #scroll-top {
            background: #ffffff !important;
            color: #475569 !important;
            border: 1px solid transparent !important;
            border-radius: 50% !important;
            width: 48px !important;
            height: 48px !important;
            line-height: 46px !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
            right: 28px !important;
            bottom: 160px !important; /* arriba de los FABs */
            transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
        }
        #scroll-top:hover {
            color: #ef4444 !important;
            border-color: #ef4444 !important;
            transform: translateY(-2px) !important;
        }
    }
    @media (max-width: 768px) {
        /* En móvil ocultamos el teléfono FAB porque el bottom-nav ya tiene contacto */
        .modern-fab-phone { display: none !important; }
    }

    /* =========================================================================
       [3] HOVER DE TARJETA DE PRODUCTO — Puca style:
           · El card se levanta y la imagen escala
           · Aparece overlay blanco sobre la imagen
           · El botón "ADD TO CART" se transforma en pill rojo grande con icono
           · El "Vista Rápida" se vuelve un círculo ícono arriba del cart
           · El span "Agregar a Carrito" (oculto por acorn) se vuelve a mostrar
       ========================================================================= */
    .product.product-style {
        position: relative;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        will-change: transform;
    }
    .product.product-style:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .product.product-style .product-image-container {
        overflow: hidden;
        position: relative;
        background: #ffffff;              /* antes #f8fafc — el plomo cuadrado venía de aquí */
        width: 100% !important;          /* llena horizontalmente el card (antes 180px en card de 212px) */
        max-width: 100% !important;
        margin: 0 !important;
        aspect-ratio: 1 / 1;              /* mantiene cuadrado, alto = ancho del card */
        min-height: 0 !important;         /* permite que el aspect-ratio mande el alto */
    }
    .product.product-style figure.product-image-container {
        margin: 0 !important;             /* override del margin default de <figure> */
    }
    .product.product-style .product-image-container .image,
    .product.product-style .product-image-container img {
        transition: transform 0.5s ease-out;
        background-color: #ffffff !important; /* override del #f1f5f9 plomo de theme_overrides */
    }
    .product.product-style:hover .product-image-container .image,
    .product.product-style:hover .product-image-container img {
        transform: scale(1.06);
    }

    /* Velo blanco sutil sobre la imagen al hover */
    .product.product-style .product-image-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.0);
        transition: background 0.3s ease;
        pointer-events: none;
        z-index: 1;
    }
    .product.product-style:hover .product-image-container::after {
        background: rgba(255, 255, 255, 0.35);
    }

    /* Botón Vista Rápida: círculo ícono que aparece centrado-superior en hover.
       Para que el click sobre el ojo realmente dispare el handler de Porto
       (`a.btn-quickview` registra `o.preventDefault()` y abre modal AJAX),
       hay que sacarlo del stacking context del .product-image-container y
       montarlo en uno propio con z-index alto. */
    .product.product-style .product-image-container { z-index: 4; } /* eleva su contexto */
    .product.product-style .btn-quickview {
        position: absolute !important;
        left: 50% !important;
        top: 38% !important;
        transform: translate(-50%, -50%) scale(0.8) !important;
        background: #ffffff !important;
        color: #1e293b !important;
        border: none !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important; /* oculta el texto "Vista Rápida" */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease, color 0.2s ease, background 0.2s ease;
        z-index: 10;
        pointer-events: none; /* sólo escucha en hover */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .product.product-style .btn-quickview::before {
        content: '\F341'; /* bi-eye */
        font-family: bootstrap-icons !important;
        font-size: 18px !important;
        line-height: 1;
    }
    .product.product-style:hover .btn-quickview {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1;
        pointer-events: auto; /* ahora sí captura el click → abre modal Vista Rápida */
    }
    .product.product-style .btn-quickview:hover {
        background: #ef4444 !important;
        color: #fff !important;
    }

    /* === Acción "AGREGAR AL CARRITO" como overlay grande Puca-style ===
       En desktop la sacamos del flujo y la apilamos sobre la imagen.
       En mobile queda inline (sin hover) como circulito. */
    @media (min-width: 769px) {
        .product.product-style .product-action {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 35% !important; /* cubre la zona de imagen, deja zona de texto */
            display: flex !important;
            align-items: flex-end !important;
            justify-content: center !important;
            padding-bottom: 14px !important;
            background: linear-gradient(to top,
                rgba(255, 255, 255, 0.95) 0%,
                rgba(255, 255, 255, 0.5) 60%,
                rgba(255, 255, 255, 0) 100%) !important;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;
            z-index: 5;
        }
        .product.product-style:hover .product-action {
            opacity: 1;
            transform: translateY(0);
            /* IMPORTANTE: NO ponemos pointer-events: auto aquí. El gradiente
               sigue transparente al click — solo el botón .add-cart captura
               eventos (regla específica más abajo). Así el `.btn-quickview`
               (z-index 6) que vive en otro stacking context queda accesible
               cuando el usuario clickea el ojo. */
        }
        /* El botón rojo grande dentro del overlay */
        html body .product.product-style .product-action .paction.add-cart {
            background: #ef4444 !important;
            color: #ffffff !important;
            width: auto !important;
            height: auto !important;
            min-height: 38px !important;
            padding: 9px 22px !important;
            border-radius: 999px !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            text-transform: none !important;
            letter-spacing: 0.5px !important;
            box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px;
            transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
            pointer-events: auto !important; /* el gradiente no captura clicks, sólo este botón */
        }
        html body .product.product-style .product-action .paction.add-cart::before {
            content: '\F32A'; /* bi-bag-plus */
            font-family: bootstrap-icons !important;
            font-size: 14px !important;
            line-height: 1;
        }
        html body .product.product-style .product-action .paction.add-cart:hover {
            background: #dc2626 !important;
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(239, 68, 68, 0.5) !important;
        }
        /* Volver a mostrar el span "Agregar a Carrito" (acorn lo ocultaba) */
        html body .product.product-style .product-action .paction.add-cart span {
            display: inline !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            color: #fff !important;
        }
    }

    /* Labels (New, Hot, Agotado) con look más moderno */
    .product.product-style .product-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        padding: 4px 10px !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        z-index: 7; /* arriba del overlay */
    }
    .product.product-style .label-hot { background: #ef4444 !important; }
    .product.product-style .label-sale { background: #10b981 !important; }
    .product.product-style .product-danger { background: #6b7280 !important; }

    /* =========================================================================
       [4] MODAL "PRODUCTO AGREGADO" — estilo Puca:
           Modal centrado, blanco, ancho cómodo (~620px). Header con texto verde
           "Producto agregado". Body con imagen + nombre a la izquierda y
           botones grandes rojos a la derecha (mobile: apilados).
       ========================================================================= */
    /* Tamaño y centrado */
    #moda-succes-add-product .modal-dialog, #modal-already-product .modal-dialog {
        max-width: 620px !important;
        margin: 1.75rem auto !important;
    }
    #moda-succes-add-product .modal-content, #modal-already-product .modal-content {
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18) !important;
        overflow: hidden;
    }
    /* Animación de entrada: fade + scale (más Puca, menos drawer) */
    #moda-succes-add-product.fade .modal-dialog , #modal-already-product.fade .modal-dialog {
        transform: scale(0.92) translateY(-12px) !important;
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
    }
    #moda-succes-add-product.fade.show .modal-dialog , #modal-already-product.fade.show .modal-dialog {
        transform: scale(1) translateY(0) !important;
        opacity: 1;
    }
    /* Header verde estilo Puca: "Producto agregado" */
    #moda-succes-add-product .modal-body, #modal-already-product .modal-body {
        padding: 28px 28px 12px !important;
    }
    #moda-succes-add-product .alert-success, #modal-already-product .alert-success {
        background: transparent !important;
        color: #10b981 !important;
        border: none !important;
        padding: 0 0 18px 0 !important;
        margin: 0 0 18px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        letter-spacing: -0.2px;
    }
    #moda-succes-add-product .alert-success .bi-check-circle::before,
    #moda-succes-add-product .alert-success .bi-check-circle {
        content: '\F26A'; /* bi-check-circle-fill */
        font-family: bootstrap-icons !important;
        margin-right: 8px;
        color: #10b981;
        vertical-align: -2px;
    }
    /* Variante "ya está agregado" — naranja en lugar de verde */
    #modal-already-product .alert-warning {
        background: transparent !important;
        color: #f59e0b !important;
        border: none !important;
        padding: 0 0 18px 0 !important;
        margin: 0 0 18px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: -0.2px;
    }
    #modal-already-product .alert-warning i {
        color: #f59e0b !important;
        margin-right: 8px;
        font-size: 20px;
        vertical-align: -3px;
    }
    /* La imagen del producto agregado */
    #moda-succes-add-product #product_added_image, #modal-already-product #product_added_image {
        flex: 0 0 auto;
        max-width: 110px;
    }
    #moda-succes-add-product #product_added_image, #modal-already-product #product_added_image img {
        border-radius: 8px;
        width: 100% !important;
        height: auto !important;
        max-height: 110px !important;
        object-fit: contain !important;
        border: 1px solid #f1f5f9;
    }
    #moda-succes-add-product #product_added, #modal-already-product #product_added {
        padding-left: 16px;
    }
    #moda-succes-add-product #product_added, #modal-already-product #product_added .product-title,
    #moda-succes-add-product #product_added, #modal-already-product #product_added h2,
    #moda-succes-add-product #product_added, #modal-already-product #product_added h3 {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin: 0 0 8px 0 !important;
    }
    /* Footer: 2 CTAs rojos grandes (Puca style), apilados en móvil */
    #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer {
        background: #ffffff !important;
        border-top: 1px solid #f1f5f9 !important;
        padding: 18px 28px !important;
        gap: 12px !important;
        justify-content: flex-end !important;
    }
    #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer .btn {
        flex: 0 1 auto !important;
        margin: 0 !important;
        min-width: 200px !important;
        border-radius: 999px !important;
        padding: 12px 28px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border: none !important;
    }
    /* "Ir a Carrito" → CTA principal rojo Puca */
    #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer .btn-primary {
        background: #ef4444 !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3) !important;
    }
    #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer .btn-primary:hover {
        background: #dc2626 !important;
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.45) !important;
    }
    #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer .btn-primary::before {
        content: '\F35E'; /* bi-bag-fill */
        font-family: bootstrap-icons !important;
        font-size: 14px;
    }
    /* "Seguir Comprando" → secundario outlined */
    #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer .btn-warning {
        background: #ffffff !important;
        color: #475569 !important;
        border: 1px solid transparent !important;
    }
    #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer .btn-warning:hover {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        color: #1e293b !important;
    }
    /* Móvil: apilar buttons */
    @media (max-width: 540px) {
        #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer { flex-direction: column-reverse; }
        #moda-succes-add-product .modal-footer, #modal-already-product .modal-footer .btn { width: 100% !important; }
        #moda-succes-add-product .modal-body, #modal-already-product .modal-body { padding: 24px 20px 8px !important; }
    }

    /* =========================================================================
       [5] CATEGORÍAS CON OVERLAY — cards de imagen + título sobre gradiente
       ========================================================================= */
    /* Aplica a `.product-category` y a las cards del menu lateral cuando
       tienen imagen de fondo. Suave y no invasivo. */
    .product-category,
    .category-card,
    .ec-category-card {
        position: relative;
        display: block;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .product-category:hover,
    .category-card:hover,
    .ec-category-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }
    .product-category img,
    .category-card img,
    .ec-category-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease-out;
    }
    .product-category:hover img,
    .category-card:hover img,
    .ec-category-card:hover img {
        transform: scale(1.08);
    }
    .product-category::after,
    .category-card::after,
    .ec-category-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.55) 100%);
        opacity: 0.7;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    .product-category:hover::after,
    .category-card:hover::after,
    .ec-category-card:hover::after {
        opacity: 0.85;
    }
    /* Título sobre la imagen */
    .product-category .category-name,
    .category-card .category-name,
    .ec-category-card .category-name {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 14px;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        z-index: 2;
        line-height: 1.2;
    }

    /* =========================================================================
       [6] SIDEBAR DE CATEGORÍAS — estilo "All Departments" Puca
           El layout existente (sidemenu.blade.php) usa `.side-nav .menu`,
           con cada item como `<li><a href><i class="icon-..."></i> NOMBRE</a></li>`.
           No tocamos markup; solo estilo + chevron en hover.
       ========================================================================= */
    /* Aplica solo dentro del módulo ecommerce (no toca el dashboard) */
    .side-nav .menu.menu-vertical {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .side-nav .menu.menu-vertical > li {
        position: relative;
        margin: 0 !important;
        border-top: 1px solid #f1f5f9;
        background: transparent !important; /* mata el cyan #0088CC heredado de Porto */
    }
    .side-nav .menu.menu-vertical > li:first-child {
        border-top: none;
    }
    /* Algunos themes ponen ::after en el li para "tab" indicator del lado
       derecho — lo neutralizamos. El ::before del activo queda libre para
       que lo usemos como barra roja izquierda (ver más abajo). */
    .side-nav .menu.menu-vertical > li.active::after,
    .side-nav .menu.menu-vertical > li:hover::after {
        display: none !important;
        content: none !important;
        background: transparent !important;
    }
    /* (la barra roja del hover se define más abajo con ::before — esto
       sólo neutraliza el ::after del lado derecho que algunos themes ponen) */
    .side-nav .menu.menu-vertical > li > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 11px 16px !important;
        color: #475569 !important;
        font-weight: 500 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        background: transparent !important;
        border-left: 3px solid transparent;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
    }
    /* El icono (Porto/Acorn lo pone con `i.icon-...` o `i.bi-*`) */
    .side-nav .menu.menu-vertical > li > a > i {
        font-size: 16px !important;
        width: 20px;
        text-align: center;
        color: #94a3b8;
        transition: color 0.2s ease;
        flex-shrink: 0;
    }
    /* Chevron al hover (Puca-style) */
    .side-nav .menu.menu-vertical > li > a::after {
        content: '\F285'; /* bi-chevron-right */
        font-family: bootstrap-icons !important;
        font-size: 12px;
        color: #cbd5e1;
        margin-left: auto;
        opacity: 0;
        transform: translateX(-6px);
        transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
    }
    /* Hover (item NO activo) — barra roja izquierda al mismo nivel que el activo
       (vía ::before en el li, NO via border en el anchor). Sin bordes
       laterales/derechos del anchor — sólo cambio sutil de fondo + color texto. */
    .side-nav .menu.menu-vertical > li:not(.active) > a:hover {
        background: transparent !important;     /* sin fondo plomo */
        color: #ef4444 !important;
        padding-left: 20px !important;
        border-left: 3px solid transparent !important; /* mantiene espacio, no color */
    }
    .side-nav .menu.menu-vertical > li:not(.active):hover::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #ef4444;
        z-index: 1;
        display: block !important;
    }
    .side-nav .menu.menu-vertical > li:not(.active) > a:hover > i {
        color: #ef4444;
    }
    .side-nav .menu.menu-vertical > li > a:hover::after {
        opacity: 1;
        transform: translateX(0);
        color: #ef4444;
    }
    /* Active item — destacado limpio (texto rojo + barra al borde, SIN fill) */
    .side-nav .menu.menu-vertical > li.active > a {
        background: #ffffff !important; /* fondo blanco neutro */
        color: #ef4444 !important;
        font-weight: 600 !important;
        border-left: none !important; /* la barra ahora es ::before, pegada al borde del card */
        padding-left: 20px !important;
    }
    /* Barra roja del item activo: pseudo-elemento absoluto adherido al
       borde-izquierdo del card de categorías (no al `<a>`), de modo que
       toque exactamente el edge del card aunque el `<a>` tenga padding. */
    .side-nav .menu.menu-vertical > li.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #ef4444;
        border-radius: 0; /* el card tiene overflow:hidden con border-radius — la barra queda contenida igual */
        z-index: 1;
    }
    /* Asegurar que el li.active no oculte la barra (overflow visible) */
    .side-nav .menu.menu-vertical > li.active {
        overflow: visible !important;
    }
    .side-nav .menu.menu-vertical > li.active > a > i {
        color: #ef4444 !important;
    }
    .side-nav .menu.menu-vertical > li.active > a::after {
        opacity: 1;
        transform: translateX(0);
        color: #ef4444;
    }

    /* Header "CATEGORIAS" arriba del sidebar — más Puca-ish */
    .sidebar-product-right h2,
    .sidebar-product-right .widget-title,
    .sidebar h2.widget-title,
    .sidebar h3.widget-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 1px !important;
        color: #0f172a !important;
        padding: 14px 18px !important;
        margin: 0 0 0 0 !important;
        background: #ffffff !important;
        border-radius: 10px 10px 0 0 !important;
        border-bottom: 2px solid #ef4444;
        position: relative;
    }
    .sidebar-product-right h2::before,
    .sidebar-product-right .widget-title::before {
        content: '\F478'; /* bi-list */
        font-family: bootstrap-icons !important;
        margin-right: 8px;
        font-size: 16px;
        font-weight: normal;
        vertical-align: -2px;
        color: #ef4444;
    }

    /* =========================================================================
       [7] HEADER PUCA EXACTO — search + RED button + cart con label + user con saludo
           El JS al final del archivo envuelve el input en un wrapper flex con
           el botón rojo SEARCH a la derecha (joined pill), y agrega los labels
           "Mi Carrito · S/ X" y "Hola, [nombre]" junto a los íconos.
       ========================================================================= */
    /* Wrapper que el JS crea alrededor del input.
       Se le pasó la sombra del exterior `.header-dropdown.minWSize`
       (antes generaba un DOBLE rayado detrás del botón "BUSCAR"
       junto con este wrap). Acá la centralizamos para que el pill
       blanco quede con UNA sola línea visual flotando sobre el
       header. */
    .modern-search-wrapper {
        display: flex;
        align-items: stretch;
        background: #ffffff;
        border: 1px solid #f1f5f9;
        border-radius: 999px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
        width: 100%;
        max-width: 580px;
        min-height: 50px;
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .modern-search-wrapper:focus-within {
        border-color: #ef4444 !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12) !important;
    }
    .modern-search-wrapper .search_input,
    .modern-search-wrapper input[type="search"],
    .modern-search-wrapper input {
        flex: 1 !important;
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;       /* mata el inset 1px plomo (recuadro interior) */
        -webkit-box-shadow: none !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
        outline: none !important;
        height: auto !important;
        min-height: 50px !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding-right: 16px !important;
    }
    .modern-search-wrapper .search_input:focus,
    .modern-search-wrapper input:focus {
        box-shadow: none !important;
        border: none !important;
        outline: none !important;
    }
    /* Botón SEARCH rojo Puca */
    .modern-search-btn {
        background: #ef4444 !important;
        color: #ffffff !important;
        border: none !important;
        padding: 0 28px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: none !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        min-width: 140px !important;
        transition: background 0.2s ease;
    }
    .modern-search-btn:hover {
        background: #dc2626 !important;
    }
    .modern-search-btn i {
        font-size: 16px !important;
    }
    /* Quito el ::after de búsqueda viejo (ya no aplica con el wrapper) */
    .search-form::after,
    .header-search::after {
        display: none !important;
        content: none !important;
    }

    /* Cart con dos líneas "Mi Carrito" + total — el JS agrega los span */
    .header-right .cart-dropdown > .dropdown-toggle .modern-cart-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.15;
        margin-left: 4px;
        white-space: nowrap; /* "Mi Carrito" en una sola línea */
        min-width: max-content;
    }
    .header-right .cart-dropdown > .dropdown-toggle .modern-cart-label .label-top {
        font-size: 10px !important;
        color: #94a3b8 !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px;
    }
    .header-right .cart-dropdown > .dropdown-toggle .modern-cart-label .label-amount {
        font-size: 14px !important;
        color: #1e293b !important;
        font-weight: 700 !important;
    }
    /* Saludo "Hola," junto al user icon — el JS lo inyecta */
    .header-right .modern-user-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.15;
        margin-left: 4px;
        white-space: nowrap;
        min-width: max-content;
    }
    .header-right .modern-user-label .label-top {
        font-size: 10px !important;
        color: #94a3b8 !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px;
    }
    .header-right .modern-user-label .label-amount {
        font-size: 13px !important;
        color: #ef4444 !important;
        font-weight: 700 !important;
    }
    /* Ajusto el dropdown-toggle del cart para alinear el icono + labels */
    .header-right .cart-dropdown > .dropdown-toggle {
        gap: 10px !important;
        padding: 6px 14px 6px 12px !important;
        height: 50px !important;
    }

    /* Estilos viejos del header anterior (los desactivamos) */
    .search_input,
    input[type="search"],
    input[name="search"],
    input[placeholder*="uscar" i] {
        /* Si NO está dentro del wrapper, se mantiene el pill viejo */
    }

    /* ===== ALIAS para selectores genéricos del header — antes del refactor ===== */
    /* Buscador grande, redondeado, con sombrita */
    .search_input,
    input[type="search"],
    input[name="search"],
    input[placeholder*="uscar" i] {
        border-radius: 999px !important;
        padding: 11px 22px !important;
        padding-right: 56px !important; /* lugar para el icono lupa */
        font-size: 14px !important;
        border: 1px solid #e5e7eb !important;
        background: #ffffff !important;
        height: auto !important;
        min-height: 42px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        width: 100% !important;
    }
    .search_input:focus,
    input[type="search"]:focus,
    input[name="search"]:focus,
    input[placeholder*="uscar" i]:focus {
        border-color: #ef4444 !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12) !important;
        outline: none !important;
    }
    /* Wrapper del input para colocar el ícono lupa al final */
    .search-form,
    .header-search {
        position: relative;
    }
    .search-form::after,
    .header-search::after {
        content: '\F52A'; /* bi-search */
        font-family: bootstrap-icons !important;
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #94a3b8;
        pointer-events: none;
    }

    /* Cart + User como pills modernas */
    .header-right .cart-dropdown {
        margin-left: 8px;
    }
    .header-right .cart-dropdown > .dropdown-toggle {
        background: #ffffff !important;          /* fondo blanco */
        border: none !important;                  /* sin borde plomo */
        border-radius: 999px !important;
        padding: 6px 14px 6px 8px !important;
        height: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-decoration: none !important;
        color: #1e293b !important;
        position: relative;
        transition: background 0.2s ease, transform 0.15s ease;
    }
    .header-right .cart-dropdown > .dropdown-toggle:hover {
        background: #fef2f2 !important;
        transform: translateY(-1px);
    }
    .header-right .cart-dropdown > .dropdown-toggle i {
        color: #1e293b !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }
    /* Badge rojo "n" — más a la mano */
    .header-right .cart-dropdown > .dropdown-toggle .cart-count {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        background: #ef4444 !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        min-width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
        padding: 0 6px !important;
        text-align: center !important;
        border: 2px solid #ffffff !important;
    }
    /* Login link (cuando el usuario NO está logueado) — estilizado como pill */
    .header-right .header-contact .login-link {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 999px !important;
        padding: 9px 18px !important;
        color: #1e293b !important;
        text-decoration: none !important;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .header-right .header-contact .login-link::before {
        content: '\F4DA'; /* bi-person */
        font-family: bootstrap-icons !important;
        font-size: 18px;
        color: #475569;
    }
    .header-right .header-contact .login-link:hover {
        border-color: #ef4444 !important;
        color: #ef4444 !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
    }
    .header-right .header-contact .login-link strong {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* =========================================================================
       [8] WIDGET "VENTAS RECIENTES" — estilo Flash Sale Puca
           Le pone título con underline rojo, card limpia, label rojo pill,
           hover lift y mejor tipografía.
       ========================================================================= */
    /* Card contenedora */
    .box-carousel {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        padding: 18px 16px 14px;
        position: relative;
        margin-top: 16px;
    }
    /* Header "Flash Sale style" — título + underline rojo */
    .box-carousel::before {
        content: 'Oferta flash';
        display: block;
        font-size: 14px;
        font-weight: 800;
        color: #1e293b;
        text-transform: none;
        letter-spacing: 1.2px;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 2px solid #ef4444;
        position: relative;
    }
    /* Mini countdown decorativo Puca-style — números en cajitas rojas */
    .box-carousel::after {
        content: '00 : 12 : 47 : 21';
        display: block;
        font-size: 11px;
        font-weight: 800;
        color: #ffffff;
        text-align: center;
        margin-top: 10px;
        letter-spacing: 4px;
        background: linear-gradient(90deg, #ef4444, #dc2626);
        padding: 6px 12px;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
    }

    /* Cada card del carousel */
    .widget-banners-slider .boxing {
        position: relative;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        margin: 0;
        padding: 12px 12px 14px;
        border: 1px solid #f1f5f9;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
    }
    .widget-banners-slider .boxing:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        border-color: transparent;
    }
    .widget-banners-slider .boxing .product-image {
        display: block;
        background: #ffffff;
        border-radius: 6px;
        overflow: hidden;
    }
    .widget-banners-slider .boxing .product-image img {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: contain !important;
        max-height: 200px !important;
    }
    /* Label "Ventas Recientes" → pill rojo Puca top-left sobre la imagen */
    .widget-banners-slider .boxing .label-hot {
        position: absolute !important;
        top: 18px !important;
        left: 18px !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        padding: 4px 9px !important;
        border-radius: 999px !important;
        line-height: 1 !important;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
        z-index: 2;
    }
    /* Descripción del producto bajo la imagen */
    .widget-banners-slider .boxing .product-label:not(.label-hot) {
        display: block;
        text-align: center;
        color: #1e293b !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        background: transparent !important;
        padding: 10px 0 4px !important;
        line-height: 1.3 !important;
        position: static !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        max-height: 2.6em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    /* Estrellitas decorativas simuladas (Puca tiene rating 0/5 también) */
    .widget-banners-slider .boxing::after {
        content: '☆ ☆ ☆ ☆ ☆';
        display: block;
        text-align: center;
        color: #fbbf24;
        font-size: 10px;
        letter-spacing: 2px;
        margin-top: 4px;
        opacity: 0.7;
    }
    /* Vista rápida en este card — circulito ojo arriba a la derecha */
    .widget-banners-slider .boxing .btn-quickview {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        left: auto !important;
        bottom: auto !important;
        transform: scale(0.8) !important;
        background: #ffffff !important;
        color: #1e293b !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s ease;
        z-index: 3;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none;
    }
    .widget-banners-slider .boxing .btn-quickview::before {
        content: '\F341'; /* bi-eye */
        font-family: bootstrap-icons !important;
        font-size: 14px !important;
    }
    .widget-banners-slider .boxing:hover .btn-quickview {
        transform: scale(1) !important;
        opacity: 1;
        pointer-events: auto;
    }
    .widget-banners-slider .boxing .btn-quickview:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }
    /* Dots del carousel */
    .widget-banners-slider .owl-dots {
        text-align: center;
        margin-top: 10px;
    }
    .widget-banners-slider .owl-dots .owl-dot span {
        background: #cbd5e1 !important;
        width: 6px !important;
        height: 6px !important;
        border-radius: 999px !important;
        transition: all 0.2s ease;
    }
    .widget-banners-slider .owl-dots .owl-dot.active span {
        background: #ef4444 !important;
        width: 18px !important;
    }

    /* =========================================================================
       [9] FOOTER — "Contáctanos" con el mismo heading que "Categorías".
       ========================================================================= */
    .footer-ribbon {
        background: transparent !important;
        color: #1e293b !important;
        font-size: 28.8px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        margin: 0 0 24px !important;
        padding: 0 0 10px !important;
        position: relative !important;
        text-transform: none !important;
        display: inline-block !important;
        box-shadow: none !important;
    }
    .footer-ribbon::before {
        content: none !important;
        display: none !important;
    }
    .footer-ribbon::after {
        background: #ef4444 !important;
        border: 0 !important;
        border-radius: 2px !important;
        bottom: 0 !important;
        content: '' !important;
        height: 3px !important;
        left: 0 !important;
        position: absolute !important;
        width: 50px !important;
    }

    /* Títulos de las columnas del footer (UBICACIÓN, ENLACES DE INTERÉS, REDES SOCIALES) */
    footer .widget-title,
    .footer .widget-title {
        color: #1e293b !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 1px !important;
        padding-bottom: 10px !important;
        margin-bottom: 16px !important;
        border-bottom: 2px solid #ef4444 !important;
        position: relative !important;
    }
    /* Quito el border anterior si tenía otro color */
    footer .widget-title::after,
    .footer .widget-title::after {
        display: none !important;
        content: none !important;
    }

    /* Background del footer container — más limpio */
    footer.footer,
    .footer {
        background: #ffffff !important;
        border-top: 1px solid #f1f5f9 !important;
        padding-top: 36px !important;
    }
    /* Las "cards" de columnas — borde más sutil */
    .footer .widget {
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 8px !important;
        padding: 18px 20px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }
    /* Links del footer — hover rojo en lugar del azul */
    .footer a,
    .footer ul li a {
        color: #475569 !important;
        text-decoration: none !important;
        transition: color 0.2s ease;
    }
    .footer a:hover,
    .footer ul li a:hover {
        color: #ef4444 !important;
    }
    /* Bottom bar (Mi Tienda + logos) */
    .footer-bottom {
        border-top: 1px solid #f1f5f9 !important;
        padding-top: 16px !important;
        margin-top: 24px !important;
        color: #94a3b8 !important;
        font-size: 12px !important;
    }
    .footer .modern-empty-social-footer {
        display: none !important;
    }

    /* =========================================================================
       [10] VISTA RÁPIDA / QUICK VIEW MODAL — Puca style exacto
            Selectores: `.product-single-container.product-quick-view`
            (renderizado por items/partial.blade.php vía AJAX al click del ojo)
       ========================================================================= */
    /* Contenedor general — más aire, fondo limpio */
    .product-quick-view.product-single-container {
        padding: 28px !important;
        background: #ffffff;
        border-radius: 12px;
    }
    /* Galería (columna izquierda) — imagen grande con fondo suave */
    .product-quick-view .product-single-gallery {
        background: #ffffff;
        border-radius: 8px;
        padding: 12px;
    }
    .product-quick-view .product-slider-container {
        max-width: 100% !important;
    }
    .product-quick-view .product-single-image {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1/1 !important;
        object-fit: contain !important;
    }
    .product-quick-view .prod-thumbnail.owl-dots {
        margin-top: 12px !important;
        gap: 6px;
        display: flex !important;
        justify-content: flex-start !important;
    }
    .product-quick-view .prod-thumbnail .owl-dot {
        flex: 0 0 auto !important;
        max-width: 60px !important;
        padding: 0 !important;
        border: 2px solid transparent !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        cursor: pointer;
        transition: border-color 0.2s ease;
    }
    .product-quick-view .prod-thumbnail .owl-dot.active {
        border-color: #ef4444 !important;
    }
    .product-quick-view .prod-thumbnail .owl-dot img {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain !important;
        background: #ffffff;
    }

    /* Detalles (columna derecha) */
    .product-quick-view .product-single-details {
        padding-left: 20px !important;
    }
    .product-quick-view .product-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin: 0 0 12px 0 !important;
    }
    /* Stars + "X reviews" */
    .product-quick-view .ratings-container {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .product-quick-view .product-ratings {
        display: inline-block;
        font-size: 14px;
        color: #fbbf24;
        position: relative;
    }
    .product-quick-view .rating-link {
        font-size: 12px;
        color: #94a3b8 !important;
        text-decoration: none !important;
    }
    .product-quick-view .rating-link::before {
        content: '· ';
        margin-right: 4px;
    }
    /* Precio: grande actual + tachado + badge descuento */
    .product-quick-view .price-box {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 8px 0 18px 0 !important;
        padding-bottom: 18px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .product-quick-view .price-box .old-price {
        font-size: 14px !important;
        color: #94a3b8 !important;
        text-decoration: line-through !important;
        order: 2;
    }
    .product-quick-view .price-box .product-price {
        font-size: 26px !important;
        font-weight: 800 !important;
        color: #ef4444 !important;
        order: 1;
    }
    /* Badge -20% calculado vía pseudo (el partial ya muestra precio*1.2 como old-price) */
    .product-quick-view .price-box::after {
        content: '-17%';
        order: 3;
        background: #ef4444;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 4px;
        letter-spacing: 0.5px;
    }
    /* Cantidad: + - cuadraditos cuando estén — circulares Puca-style */
    .product-quick-view .product-single-qty {
        margin-bottom: 16px !important;
    }
    .product-quick-view input[type="number"],
    .product-quick-view .horizontal-quantity {
        text-align: center !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        height: 40px !important;
    }
    /* Botón "Agregar a Carrito" — antes verde, ahora rojo Puca + más grande */
    html body .product-quick-view .product-single-details .paction.add-cart {
        background: #ef4444 !important;
        color: #ffffff !important;
        max-width: none !important;
        width: 100% !important;
        padding: 14px 28px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.8px !important;
        border-radius: 999px !important;
        min-height: 50px !important;
        border: none !important;
        box-shadow: 0 8px 18px rgba(239, 68, 68, 0.3) !important;
        transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px;
    }
    html body .product-quick-view .product-single-details .paction.add-cart::before {
        content: '\F32A'; /* bi-bag-plus */
        font-family: bootstrap-icons !important;
        font-size: 18px !important;
    }
    html body .product-quick-view .product-single-details .paction.add-cart:hover {
        background: #dc2626 !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(239, 68, 68, 0.45) !important;
    }
    /* Botones flotantes de teléfono/WhatsApp en el modal — más limpios */
    .product-quick-view a[href^="tel:"],
    .product-quick-view a[href^="https://wa.me"],
    .product-quick-view a[href*="whatsapp"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        margin: 4px !important;
    }

    /* =========================================================================
       [11] CART DROPDOWN POPOVER — Puca style
            Selectores: `.cart-dropdown .dropdown-menu`
            Items renderizados por JS en `.dropdown-cart-products`
       ========================================================================= */
    .header-right .cart-dropdown .dropdown-menu {
        min-width: 360px !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
        padding: 0 !important;
        margin-top: 12px !important;
        right: 0 !important;
        left: auto !important;
    }
    .header-right .cart-dropdown .dropdownmenu-wrapper {
        padding: 16px !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products {
        max-height: 340px;
        overflow-y: auto;
        margin-bottom: 12px;
    }
    /* Scrollbar fino estilo Puca */
    .header-right .cart-dropdown .dropdown-cart-products::-webkit-scrollbar {
        width: 4px;
    }
    .header-right .cart-dropdown .dropdown-cart-products::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }

    /* Cada producto en el cart popover */
    .header-right .cart-dropdown .dropdown-cart-products .product {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 12px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: transparent !important;
        position: relative;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product:last-child {
        border-bottom: none !important;
    }
    /* Imagen del producto en el popover — más grande, con placeholder de fondo
       (si la imagen real falla, el SVG queda visible como background del container) */
    .header-right .cart-dropdown .dropdown-cart-products .product-image-container {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background-color: #ffffff !important;
        background-image: url('/logo/imagen-no-disponible.svg') !important;
        background-size: 70% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        order: 1 !important;
        position: relative;
        border: 1px solid #f1f5f9;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product-image-container img {
        width: 64px !important;
        height: 64px !important;
        object-fit: contain !important;
        background: transparent;
        display: block;
    }
    /* Detalles a la derecha de la imagen */
    .header-right .cart-dropdown .dropdown-cart-products .product-details {
        flex: 1 !important;
        order: 2 !important;
        min-width: 0;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
        max-height: 2.6em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product-title a {
        color: inherit !important;
        text-decoration: none !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product-title a:hover {
        color: #ef4444 !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .cart-product-info {
        font-size: 12px !important;
        color: #ef4444 !important;
        font-weight: 600 !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .cart-product-qty {
        color: #475569 !important;
        font-weight: 500 !important;
    }
    /* Botón remover (X) — pequeño top-right del item */
    .header-right .cart-dropdown .dropdown-cart-products .btn-remove {
        position: absolute !important;
        top: 12px !important;
        right: 0 !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: #f1f5f9 !important;
        color: #64748b !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }
    .header-right .cart-dropdown .dropdown-cart-products .btn-remove:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }
    /* Subtotal */
    .header-right .cart-dropdown .dropdown-cart-total {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 0 !important;
        border-top: 1px solid #e2e8f0 !important;
        margin-top: 4px !important;
        font-weight: 700 !important;
    }
    .header-right .cart-dropdown .dropdown-cart-total > span:first-child {
        font-size: 13px !important;
        color: #64748b !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
    }
    .header-right .cart-dropdown .dropdown-cart-total .cart-total-price {
        font-size: 18px !important;
        color: #ef4444 !important;
        font-weight: 800 !important;
    }
    /* Botones de acción "Ver Carrito" + "Checkout" */
    .header-right .cart-dropdown .dropdown-cart-action {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding-top: 4px !important;
    }
    .header-right .cart-dropdown .dropdown-cart-action .btn {
        width: 100% !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        border: none !important;
        padding: 12px 18px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        transition: background 0.2s ease, transform 0.15s ease;
    }
    .header-right .cart-dropdown .dropdown-cart-action .btn:hover {
        background: #dc2626 !important;
        transform: translateY(-1px);
    }
    .header-right .cart-dropdown .dropdown-cart-action .btn::before {
        content: '\F35E'; /* bi-bag-fill */
        font-family: bootstrap-icons !important;
        font-size: 14px;
    }
    /* Cuando el carrito está vacío */
    .header-right .cart-dropdown .dropdown-cart-products:empty::before {
        content: '\F32A\A Tu carrito está vacío';
        white-space: pre-wrap;
        font-family: bootstrap-icons, system-ui, sans-serif;
        font-size: 28px;
        color: #cbd5e1;
        text-align: center;
        display: block;
        padding: 32px 0 12px;
        line-height: 1.6;
    }

    /* =========================================================================
       [12] PÁGINA DETALLE DEL CARRITO — Puca-style
            URL: /ecommerce/detail_cart  (markup: cart/detail.blade.php)
            Selectores: .cart-table-container, .table.table-cart, .product-row,
                        .custom-quantity-field, .btn-outline-danger
       ========================================================================= */
    /* Card contenedora — más limpia */
    .cart-table-container {
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }
    /* Tabla del carrito */
    .table.table-cart {
        margin: 0 !important;
        border: none !important;
    }
    /* Header de la tabla — estilo Puca con tipografía clean */
    /* Underline rojo a nivel <thead> para que abarque TODA la tabla
       (incluyendo la columna de la X que no tiene <th>) */
    .table.table-cart > thead {
        border-bottom: 2px solid #ef4444 !important;
    }
    .table.table-cart > thead > tr {
        border-bottom: none !important;
    }
    .table.table-cart > thead > tr > th {
        background: #ffffff !important;
        color: #475569 !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 1px !important;
        padding: 14px 18px !important;
        border-bottom: none !important;       /* el line está en <thead>, no aquí */
        border-top: none !important;
        text-align: left !important;
    }
    .table.table-cart > thead > tr > th:not(:first-child) {
        text-align: center !important;
    }

    /* Filas de productos — REDUCIDO el espacio entre filas */
    .table.table-cart > tbody > tr.product-row {
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .table.table-cart > tbody > tr.product-row:last-child {
        border-bottom: none !important;
    }
    .table.table-cart > tbody > tr.product-row > td {
        padding: 12px 18px !important;        /* antes ~30px, ahora compacto */
        vertical-align: middle !important;
        border-top: none !important;
        font-size: 14px !important;
        color: #1e293b !important;
    }
    .table.table-cart > tbody > tr.product-row > td:not(.product-col) {
        text-align: center !important;
    }

    /* Columna producto: imagen pequeña + nombre inline */
    .table.table-cart > tbody > tr.product-row > td.product-col {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 12px 18px !important;
    }
    .table.table-cart .product-row .product-image-container {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
        margin: 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background-color: #ffffff !important;
        background-image: url('/logo/imagen-no-disponible.svg') !important;
        background-size: 70% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border: 1px solid #f1f5f9 !important;
        aspect-ratio: 1/1 !important;
        min-height: 0 !important;
        max-width: 64px !important;
    }
    .table.table-cart .product-row .product-image-container img {
        width: 64px !important;
        height: 64px !important;
        object-fit: contain !important;
        background: transparent !important;
    }
    .table.table-cart .product-row .product-image-container .product-image {
        display: block;
        width: 100% !important;
        height: 100% !important;
    }
    .table.table-cart .product-row .product-title {
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        line-height: 1.35 !important;
    }
    .table.table-cart .product-row .product-title a {
        color: inherit !important;
        text-decoration: none !important;
    }
    .table.table-cart .product-row .product-title a:hover {
        color: #ef4444 !important;
    }

    /* Selector de cantidad — circles puca-style */
    .table.table-cart .custom-quantity-field {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0 !important;
        border: 1px solid transparent !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        background: #ffffff;
    }
    .table.table-cart .custom-quantity-btn {
        background: #ffffff !important;
        color: #475569 !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .table.table-cart .custom-quantity-btn:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
    }
    .table.table-cart .custom-quantity-input {
        width: 36px !important;
        height: 32px !important;
        border: none !important;
        background: transparent !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        color: #1e293b !important;
        outline: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Botón X de eliminar — circle PERFECTO (override min-width: 90px heredado) */
    .table.table-cart .product-row .btn-outline-danger,
    .table.table-cart .product-row .btn-outline-danger[class] {
        background: #ffffff !important;
        color: #94a3b8 !important;
        border: 1px solid transparent !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        flex: 0 0 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        line-height: 1 !important;
        aspect-ratio: 1 / 1 !important;
        transition: all 0.2s ease;
    }
    /* Color del icono X — por default plomo, en hover BLANCO */
    .table.table-cart .product-row .btn-outline-danger i,
    .table.table-cart .product-row .btn-outline-danger .bi-trash {
        color: #94a3b8 !important;
        transition: color 0.2s ease;
    }
    .table.table-cart .product-row .btn-outline-danger:hover i,
    .table.table-cart .product-row .btn-outline-danger:hover .bi-trash {
        color: #ffffff !important;
    }
    .table.table-cart .product-row .btn-outline-danger:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
        border-color: #ef4444 !important;
    }

    /* Footer de la tabla (Continuar / Limpiar) — botones outline limpios */
    .table.table-cart > tfoot > tr > td {
        background: #ffffff !important;
        padding: 14px 18px !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    .table.table-cart > tfoot .btn-outline-secondary {
        background: #ffffff !important;
        color: #475569 !important;
        border: 1px solid transparent !important;
        padding: 8px 18px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.2s ease;
    }
    .table.table-cart > tfoot .btn-outline-secondary:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
        border-color: #ef4444 !important;
    }

    /* Panel "Resumen" lateral — estilo Puca */
    .col-lg-4 .resumen-card,
    .col-lg-4 > .card,
    body[class] .col-lg-4 .card,
    .col-lg-4 .panel-summary,
    aside.cart-summary,
    .cart-summary {
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }
    /* Botones "Pagar con VISA / YAPE / PLIN / EFECTIVO" — pasarlos a rojo Puca */
    a[href*="culqi"], a[href*="yape"], a[href*="plin"], a[href*="efectivo"],
    button:where([class*="pagar"], [class*="visa"], [class*="yape"], [class*="plin"]),
    .btn-pagar, .btn-pagar-visa, .btn-pagar-yape, .btn-pagar-plin, .btn-pagar-efectivo {
        /* placeholder — los selectores reales se inferirán por JS si no matchean */
    }
    /* Container de botones de pago: grid 2x2 prolijo */
    .checkout-methods {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }
    .checkout-methods .btn,
    .checkout-methods button {
        margin: 0 !important;
    }

    /* Botones del panel resumen (PAGAR CON VISA / YAPE / PLIN / EFECTIVO)
       — todos rojos Puca con fuente 15px. Markup real:
         · btn culqi               (VISA)
         · btn btn-payment-yape    (YAPE — tiene su propio CSS background blanco)
         · btn btn-primary         (PLIN)
         · btn btn-payment-cash    (EFECTIVO — bg blanco también)
       Los selectores explícitos pegan más fuerte que cualquier CSS heredado. */
    .checkout-methods .btn,
    .checkout-methods button,
    .checkout-methods .btn-primary,
    .checkout-methods .btn.culqi,
    .checkout-methods .btn-payment-yape,
    .checkout-methods .btn-payment-cash,
    html body .btn.culqi,
    html body .btn-payment-yape,
    html body .btn-payment-cash {
        appearance: none !important;             /* SIN esto, el browser ignora bg en <button> */
        -webkit-appearance: none !important;
        background: #ef4444 !important;
        background-color: #ef4444 !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 999px !important;
        padding: 14px 22px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
        transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    }
    .checkout-methods .btn:hover,
    .checkout-methods button:hover,
    html body .btn.culqi:hover,
    html body .btn-payment-yape:hover,
    html body .btn-payment-cash:hover {
        background: #dc2626 !important;
        background-color: #dc2626 !important;
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4) !important;
    }
    /* "Orden Total" — número grande en rojo */
    .col-lg-4 h1, .col-lg-4 h2, .col-lg-4 h3, .col-lg-4 h4 {
        color: #0f172a !important;
        font-weight: 700 !important;
    }

    /* Inputs del form (Nombre, Correo, Dirección, etc.) más compactos */
    .col-lg-8 .form-control,
    .col-lg-8 input.form-control,
    .col-lg-8 select.form-control,
    .col-lg-8 textarea.form-control,
    .col-lg-4 .form-control,
    .col-lg-4 input.form-control,
    .col-lg-4 select.form-control {
        height: 36px !important;
        min-height: 36px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
        border: 1px solid transparent !important;
        line-height: 1.4 !important;
    }
    .col-lg-8 textarea.form-control {
        height: auto !important;
        min-height: 70px !important;
    }
    .col-lg-8 .form-control:focus,
    .col-lg-4 .form-control:focus {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
        outline: none !important;
    }
    /* Labels más cerca del input */
    .col-lg-8 label,
    .col-lg-4 label {
        margin-bottom: 4px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #475569 !important;
    }
    /* Form groups más juntos */
    .col-lg-8 .form-group,
    .col-lg-4 .form-group {
        margin-bottom: 10px !important;
    }

    /* =========================================================================
       [13] PILLS DE CATEGORÍAS DEL TOP NAV (cart/checkout layouts) — VERANO,
            DESCANSO Y CONFORT, MASCOTAS, etc. Antes tenían bg #eaeef7 (plomo).
            Ahora bg blanco + recuadro plomo (border 1px gray).
       ========================================================================= */
    .header-bottom .menu > li > a,
    .header-bottom .main-nav .menu > li > a,
    .menu-categories > li > a,
    .header-categories a,
    nav.main-nav .menu > li > a {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: 1px solid transparent !important;
        color: #475569 !important;
        border-radius: 6px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        transition: all 0.2s ease !important;
    }
    .header-bottom .menu > li > a:hover,
    nav.main-nav .menu > li > a:hover {
        background: #ef4444 !important;
        background-color: #ef4444 !important;
        color: #ffffff !important;
        border-color: #ef4444 !important;
    }

    /* Cart + User pills — fuerza fondo blanco puro. El parent
       `.dropdown.cart-dropdown` tenía `bg: #f4f6fa` (plomo) que dibujaba
       un doble recuadro detrás del pill blanco. Forzamos transparente. */
    .header-right .dropdown.cart-dropdown,
    .header-right .cart-dropdown {
        background: transparent !important;
        background-color: transparent !important;
    }
    .header-right .cart-dropdown > .dropdown-toggle,
    .header-right .cart-dropdown > .dropdown-toggle[class] {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
    }
    /* Y el icono dentro del pill: sin fondo, solo el icono color oscuro */
    .header-right .cart-dropdown > .dropdown-toggle > i {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* =========================================================================
       [14] BOTÓN "ENVIAR POR WHATSAPP" en tabla Historial — círculo rojo
            Markup: <button class="btn btn-default btn-sm text-success">
                       <i class="bi bi-whatsapp fs-2"></i>
                    </button>
            Antes: oval cyan 90x21.5 con icono verde apretado a la derecha.
            Ahora: círculo rojo 36x36 con icono whatsapp blanco centrado.
       ========================================================================= */
    .table tbody tr td button.btn.text-success,
    .table tbody tr td button.btn-default.btn-sm,
    table button.btn.text-success {
        background: #ef4444 !important;
        background-color: #ef4444 !important;
        color: #ffffff !important;
        border: none !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        flex: 0 0 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
        transition: all 0.2s ease !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }
    .table tbody tr td button.btn.text-success:hover,
    .table tbody tr td button.btn-default.btn-sm:hover {
        background: #dc2626 !important;
        background-color: #dc2626 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4) !important;
    }
    /* Icono WhatsApp blanco — overrides .text-success que lo pintaba verde. */
    .table tbody tr td button.btn.text-success i,
    .table tbody tr td button.btn-default.btn-sm i,
    .table tbody tr td button.btn i.bi-whatsapp {
        color: #ffffff !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
    /* Centrar la celda donde vive el botón */
    .table tbody tr td > div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* =========================================================================
       [15] HEADER ZONES — fondo blanco puro (sin plomo debajo del header)
            .header-bottom y .sticky-header tenían bg #f9fafc (plomo light)
            que se notaba debajo del cart pill/user pill y de las categorías.
            .header tenía border-bottom #f1f2f4 (línea plomo).
       ========================================================================= */
    header.header,
    .header,
    .header-middle,
    .header-bottom,
    .header-bottom.sticky-header,
    .sticky-header,
    .header-top {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: none !important;
        border-top: none !important;
        box-shadow: none !important;
    }

    /* =========================================================================
       [16] DROPDOWN AUTOCOMPLETE BUSCADOR — mismo ancho que el wrapper +
            badges de precio rojos en lugar de verdes.
            Markup del item: <a><img/><span>NOMBRE</span><span class="search_price">S/ 40</span></a>
       ========================================================================= */
    .header-dropdown.minWSize {
        max-width: 580px !important;     /* mismo ancho que el modern-search-wrapper */
        min-width: 580px !important;
        width: 580px !important;
        /* OJO: el wrap interno (.modern-search-wrapper) ya tiene su
           propio fondo blanco + radius 999px (pill). Si acá repetimos
           bg+radius+shadow se ve un DOBLE rayado detrás del botón rojo
           "BUSCAR". Lo dejamos transparente: solo el wrapper interno
           manda visualmente. La sombra del dropdown va en su panel
           desplegable, no en el contenedor del campo. */
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        margin-top: 6px !important;
    }
    /* Precio en cada item — rojo Puca */
    .search_price,
    .header-dropdown .search_price,
    span.search_price {
        background: #ef4444 !important;
        background-color: #ef4444 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        padding: 4px 10px !important;
        border-radius: 999px !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
    }

    /* =========================================================================
       Ventanas móviles: menú, modal y búsqueda no deben pelear con la barra fija
       ========================================================================= */
    .modal-backdrop { z-index: 10030; }
    .modal { z-index: 10040; }
    .modern-bottom-bar {
        z-index: 9990;
        transition: transform 0.18s ease, opacity 0.18s ease;
        will-change: transform;
    }
    body.mmenu-active .modern-bottom-bar,
    body.modal-open .modern-bottom-bar,
    body:has(.mfp-wrap.mfp-ready) .modern-bottom-bar {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(110%) !important;
    }
    body.mmenu-active .mobile-menu-overlay {
        z-index: 10010 !important;
    }
    body.mmenu-active .mobile-menu-container {
        z-index: 10020 !important;
    }
    .mobile-menu-container {
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
    .mobile-menu-wrapper {
        min-height: 100% !important;
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    }

    /* Resultados de búsqueda: ventana compacta debajo del buscador. */
    .header-dropdown.minWSize {
        position: relative !important;
        overflow: visible !important;
    }
    #header_bar .header-dropdown.minWSize .header-menu,
    #header_bar .header-dropdown.minWSize .modern-search-results-panel {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16) !important;
        left: 0 !important;
        margin-top: 0 !important;
        max-height: min(56vh, 340px) !important;
        opacity: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 6px !important;
        pointer-events: none !important;
        position: absolute !important;
        right: 0 !important;
        top: calc(100% + 8px) !important;
        transform: translateY(6px) !important;
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease !important;
        visibility: hidden !important;
        width: 100% !important;
        z-index: 10060 !important;
    }
    #header_bar .header-dropdown.minWSize.modern-search-open .header-menu,
    #header_bar .header-dropdown.minWSize.modern-search-open .modern-search-results-panel {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
        visibility: visible !important;
    }
    #header_bar .header-menu .modern-search-results,
    #header_bar .modern-search-results-panel .modern-search-results {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #header_bar .header-menu .modern-search-results li + li,
    #header_bar .modern-search-results-panel .modern-search-results li + li {
        border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    }
    #header_bar .header-menu .modern-search-results a.d-flex,
    #header_bar .modern-search-results-panel .modern-search-results a.d-flex {
        align-items: center !important;
        border-radius: 10px !important;
        gap: 10px !important;
        min-height: 64px !important;
        padding: 9px 10px !important;
        text-decoration: none !important;
    }
    #header_bar .header-menu .modern-search-results a.d-flex:hover,
    #header_bar .header-menu .modern-search-results a.d-flex:focus,
    #header_bar .modern-search-results-panel .modern-search-results a.d-flex:hover,
    #header_bar .modern-search-results-panel .modern-search-results a.d-flex:focus {
        background: #f8fafc !important;
        color: inherit !important;
    }
    #header_bar .header-menu .modern-search-results img,
    #header_bar .modern-search-results-panel .modern-search-results img {
        background: #f8fafc !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        flex: 0 0 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        object-fit: contain !important;
        padding: 3px !important;
        width: 48px !important;
    }
    #header_bar .header-menu .modern-search-results .search_title,
    #header_bar .modern-search-results-panel .modern-search-results .search_title {
        color: #0f172a !important;
        display: -webkit-box !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
    }
    #header_bar .header-menu .modern-search-results .search_code,
    #header_bar .modern-search-results-panel .modern-search-results .search_code {
        color: #94a3b8 !important;
        display: block !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
    }
    #header_bar .header-menu .modern-search-empty,
    #header_bar .modern-search-results-panel .modern-search-empty {
        color: #64748b !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        padding: 14px 12px !important;
        text-align: center !important;
    }
    /* Fila final "Ver todos los resultados de ..." — misma idea en los 6
       temas: manda a la grilla filtrada por el servidor. */
    #header_bar .modern-search-results-panel .modern-search-all,
    #header_bar .header-menu .modern-search-all {
        align-items: center !important;
        border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
        color: #ef4444 !important;
        display: flex !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        gap: 8px !important;
        justify-content: space-between !important;
        margin-top: 4px !important;
        padding: 11px 12px !important;
        text-decoration: none !important;
    }
    #header_bar .modern-search-results-panel .modern-search-all:hover,
    #header_bar .modern-search-results-panel .modern-search-all:focus,
    #header_bar .header-menu .modern-search-all:hover,
    #header_bar .header-menu .modern-search-all:focus {
        background: #f8fafc !important;
        color: #dc2626 !important;
    }

    /* Carrito rápido: nombres y precio siempre legibles en móvil. */
    .header-right .cart-dropdown .dropdown-cart-products .product {
        align-items: flex-start !important;
        display: grid !important;
        gap: 12px !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        padding: 12px 28px 12px 0 !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product-image-container {
        grid-column: 1 !important;
        margin: 0 !important;
        max-width: 72px !important;
        width: 72px !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product-details {
        grid-column: 2 !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-top: 2px !important;
        text-align: left !important;
        width: 100% !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .product-title,
    .header-right .cart-dropdown .dropdown-cart-products .product-title a {
        display: block !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        max-height: none !important;
        max-width: none !important;
        overflow-wrap: anywhere !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
        width: 100% !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .cart-product-info {
        display: block !important;
        margin-top: 4px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }
    .header-right .cart-dropdown .dropdown-cart-products .btn-remove {
        right: 2px !important;
    }

    /* Modal de cuenta: más legible, con cierre visible y sin barra inferior encima. */
    #login_register_modal .modal-dialog {
        margin: 12px auto !important;
        max-width: min(720px, calc(100vw - 24px)) !important;
    }
    #login_register_modal .modal-content {
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.26) !important;
        overflow: hidden !important;
        position: relative !important;
    }
    #login_register_modal .modal-body {
        max-height: calc(100dvh - 28px) !important;
        overflow-y: auto !important;
        padding: 28px 30px !important;
    }
    #login_register_modal .container-fluid {
        padding: 0 !important;
    }
    #login_register_modal .row {
        align-items: stretch !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    #login_register_modal .col-md-5 {
        padding: 0 10px !important;
    }
    #login_register_modal .col-md-1 {
        flex: 0 0 4% !important;
        max-width: 4% !important;
    }
    #login_register_modal .title {
        color: #0f172a !important;
        font-size: 19px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        margin-bottom: 18px !important;
        text-transform: none !important;
    }
    #login_register_modal label {
        color: #475569 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-bottom: 7px !important;
    }
    #login_register_modal .form-group {
        margin-bottom: 14px !important;
    }
    #login_register_modal input.form-control {
        border: 1px solid #dbe3ef !important;
        border-radius: 9px !important;
        color: #0f172a !important;
        font-size: 14px !important;
        height: auto !important;
        min-height: 48px !important;
        padding: 11px 13px !important;
    }
    #login_register_modal input.form-control::placeholder {
        color: #9ca3af !important;
        opacity: 1 !important;
    }
    #login_register_modal input.form-control:focus {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
        outline: none !important;
    }
    #login_register_modal .btn,
    #login_register_modal button.btn.btn-primary {
        align-items: center !important;
        border-radius: 9px !important;
        display: inline-flex !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        justify-content: center !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        min-height: 44px !important;
        padding: 11px 14px !important;
        text-transform: none !important;
        white-space: normal !important;
        width: 100% !important;
    }
    #login_register_modal button.btn.btn-primary {
        background: #ef4444 !important;
        border-color: #ef4444 !important;
        color: #ffffff !important;
        box-shadow: 0 8px 18px rgba(239, 68, 68, 0.22) !important;
    }
    #login_register_modal .btn-light {
        background: #f8fafc !important;
        border: 1px solid #dbe3ef !important;
        color: #334155 !important;
        gap: 8px !important;
        margin-top: 8px !important;
        box-shadow: none !important;
    }
    #login_register_modal .btn-light span {
        color: inherit !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }
    #login_register_modal .btn-light img {
        flex: 0 0 24px !important;
        margin-right: 0 !important;
    }
    .modern-login-close {
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 999px !important;
        color: #475569 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        height: 34px !important;
        justify-content: center !important;
        padding: 0 !important;
        position: absolute !important;
        right: 12px !important;
        top: 12px !important;
        width: 34px !important;
        z-index: 4 !important;
    }
    .modern-login-close:hover {
        background: #f8fafc !important;
        color: #ef4444 !important;
    }
    @media (max-width: 767.98px) {
        #login_register_modal .modal-dialog {
            margin: 10px auto !important;
            max-width: calc(100vw - 12px) !important;
        }
        #login_register_modal .modal-body {
            max-height: calc(100dvh - 20px) !important;
            padding: 24px 24px 30px !important;
        }
        #login_register_modal .row {
            display: block !important;
            margin: 0 !important;
        }
        #login_register_modal .col-md-5 {
            max-width: 100% !important;
            padding: 0 !important;
            width: 100% !important;
        }
        #login_register_modal .col-md-1 {
            display: none !important;
        }
        #login_register_modal #form_register {
            border-top: 1px solid #e5e7eb !important;
            margin-top: 22px !important;
            padding-top: 22px !important;
        }
    }

    /* Botones de los modales de carrito: corregir selector y tamaños. */
    #moda-succes-add-product .modal-footer .btn,
    #modal-already-product .modal-footer .btn {
        align-items: center !important;
        border: none !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        flex: 1 1 0 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        gap: 8px !important;
        justify-content: center !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        min-height: 44px !important;
        min-width: 0 !important;
        padding: 12px 18px !important;
        text-transform: none !important;
        white-space: normal !important;
    }
    #moda-succes-add-product .modal-footer .btn-primary,
    #modal-already-product .modal-footer .btn-primary {
        background: #ef4444 !important;
        color: #ffffff !important;
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.28) !important;
    }
    #moda-succes-add-product .modal-footer .btn-warning,
    #modal-already-product .modal-footer .btn-warning {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        color: #475569 !important;
        box-shadow: none !important;
    }

    /* UX audit fixes: avoid clipped modern storefront widgets and mobile
       header overflow without changing the desktop identity. */
    .box-carousel {
        display: none !important;
    }

    @media (min-width: 992px) {
        .main .row.row-sm {
            display: grid !important;
            gap: 18px !important;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .main .row.row-sm > .ecommerce-product-col,
        .main .row.row-sm > [class*="ecommerce-product-col"] {
            flex: none !important;
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            width: 100% !important;
        }
    }

    @media (max-width: 767.98px) {
        html,
        body {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
        .header-middle .container {
            align-items: center !important;
            display: grid !important;
            gap: 8px !important;
            grid-template-columns: auto 1fr auto !important;
            max-width: 100vw !important;
            padding: 10px 12px !important;
            width: 100% !important;
        }
        .header-middle .header-left {
            grid-column: 1 !important;
            max-width: 112px !important;
            min-width: 0 !important;
        }
        .header-middle .logo img,
        .header .logo img {
            height: auto !important;
            max-width: 108px !important;
        }
        .header-middle .header-center,
        #header_bar {
            grid-column: 1 / -1 !important;
            max-width: 100% !important;
            min-width: 0 !important;
            order: 3 !important;
            width: 100% !important;
        }
        .header-middle .header-center .header-dropdown,
        #header_bar .header-dropdown,
        #header_bar .header-dropdown.minWSize,
        .header-dropdown.minWSize {
            max-width: 100% !important;
            min-width: 0 !important;
            width: 100% !important;
        }
        .modern-search-wrapper {
            max-width: 100% !important;
            min-height: 44px !important;
            width: 100% !important;
        }
        .modern-search-wrapper .search_input,
        .modern-search-wrapper input {
            min-height: 44px !important;
            padding: 10px 14px !important;
        }
        .modern-search-btn {
            font-size: 0 !important;
            min-width: 44px !important;
            padding: 0 !important;
            width: 44px !important;
        }
        .modern-search-btn i {
            font-size: 16px !important;
        }
        .header-middle .header-right {
            align-items: center !important;
            display: flex !important;
            gap: 6px !important;
            grid-column: 3 !important;
            justify-content: flex-end !important;
            margin-left: auto !important;
            max-width: none !important;
            min-width: 0 !important;
            overflow: visible !important;
        }
        .header-right .modern-cart-label,
        .header-right .modern-user-label,
        .header-right .header-contact .login-link strong {
            display: none !important;
        }
        .header-right .header-contact .login-link,
        .header-right .cart-dropdown > .dropdown-toggle {
            height: 40px !important;
            min-width: 40px !important;
            padding: 0 !important;
            width: 40px !important;
        }
        .header-right .header-contact {
            flex: 0 0 40px !important;
            max-width: 40px !important;
            min-width: 40px !important;
            overflow: visible !important;
            width: 40px !important;
        }
        .header-right .cart-dropdown > .dropdown-toggle .cart-count {
            right: -6px !important;
            top: -6px !important;
        }
        .main .row.row-sm {
            display: grid !important;
            gap: 12px !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .main .row.row-sm > .ecommerce-product-col,
        .main .row.row-sm > [class*="ecommerce-product-col"] {
            flex: none !important;
            max-width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            width: 100% !important;
        }
        .modern-bottom-bar {
            padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        }
        body:has(.product-single-container) .breadcrumb-nav,
        body:has(.product-single-container) .sidebar-toggle,
        .main > .container > .row > .sidebar-toggle {
            display: none !important;
        }
        body:has(.product-single-container.product-single-default) .product-single-gallery .product-single-image {
            object-fit: contain !important;
            object-position: center center !important;
        }
        body:has(.main > .container .col-lg-9 > .product-single-container .product-single-gallery) .main {
            padding-top: 132px !important;
        }
        footer.footer,
        .footer {
            padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
        }
        .footer .footer-middle {
            padding-bottom: 12px !important;
        }
        .footer .footer-middle .row {
            gap: 14px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
        .footer .footer-middle [class*="col-"] {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .footer .footer-middle .col-md-4:has(.social-icons:not(:has(a)):not(:has(i)):not(:has(svg))) {
            display: none !important;
        }
        .footer .widget {
            margin-bottom: 0 !important;
            padding: 16px !important;
        }
        .footer-bottom {
            align-items: center !important;
            flex-direction: column !important;
            gap: 12px !important;
            justify-content: center !important;
            padding: 16px 0 calc(90px + env(safe-area-inset-bottom)) !important;
            text-align: center !important;
        }
        .footer-bottom .footer-copyright {
            margin: 0 !important;
            max-width: 100% !important;
            text-align: center !important;
            width: 100% !important;
        }
        .footer-bottom > .d-flex,
        .footer-bottom .d-flex.text-end {
            align-items: center !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 10px !important;
            justify-content: center !important;
            max-width: 100% !important;
            text-align: center !important;
            width: 100% !important;
        }
        .footer-bottom .footer-payments {
            display: block !important;
            height: auto !important;
            margin: 0 auto !important;
            object-fit: contain !important;
            width: auto !important;
        }
        .footer-bottom a .footer-payments {
            max-height: 54px !important;
            max-width: 156px !important;
        }
        .footer-bottom .d-flex.text-end > .footer-payments {
            max-height: 48px !important;
            max-width: min(100%, 320px) !important;
        }

        .header-middle .header-right .cart-dropdown .dropdown-menu .dropdown-cart-products > .product {
            display: flex !important;
            flex-direction: row !important;
            gap: 12px !important;
            padding-right: 28px !important;
        }
        .header-middle .header-right .cart-dropdown .dropdown-menu .dropdown-cart-products > .product .product-image-container {
            flex: 0 0 72px !important;
            max-width: 72px !important;
            order: 1 !important;
            width: 72px !important;
        }
        .header-middle .header-right .cart-dropdown .dropdown-menu .dropdown-cart-products > .product .product-details {
            flex: 1 1 calc(100% - 112px) !important;
            max-width: calc(100% - 112px) !important;
            min-width: 0 !important;
            order: 2 !important;
            width: calc(100% - 112px) !important;
        }
        .header-middle .header-right .cart-dropdown .dropdown-menu .dropdown-cart-products > .product .product-title,
        .header-middle .header-right .cart-dropdown .dropdown-menu .dropdown-cart-products > .product .product-title a,
        .header-middle .header-right .cart-dropdown .dropdown-menu .dropdown-cart-products > .product .cart-product-info {
            max-width: 100% !important;
            width: 100% !important;
        }
    }

    /* Logo del header — si la imagen no carga (404, src vacío o
       naturalWidth=0), evitamos mostrar el ícono "imagen rota" + el
       texto alt "Logo". El JS al final aplica .ecommerce-logo-hidden
       cuando detecta error. */
    .header .logo,
    .header a.logo {
        line-height: 0 !important;
    }
    .header .logo img {
        color: transparent !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        background: transparent !important;
    }
    .header .logo img.ecommerce-logo-hidden {
        display: none !important;
        visibility: hidden !important;
    }


/* ════════════════════════════════════════════════════════════════
       AJUSTES UX (2026-06-07) — tema Modern.
       Pedido del usuario:
       (1) Mini-cart del header: el nombre del producto queda muy
           lejos de la imagen (mucho espacio en blanco). Acercarlo.
       (2) Inputs del checkout (Nombre, Celular, Correo, Dirección,
           etc.) con el MISMO estilo de borde que el botón
           "Solicitar cotización" (borde 1px gris suave, radius
           generoso, fondo blanco).
       ════════════════════════════════════════════════════════════════ */

    /* (1) Mini-cart — pegar el texto del producto a la imagen.
       Reescribo el grid del producto en el dropdown a `64px 1fr`
       para que la IMAGEN (orden DOM 2 → la pongo con order: 1)
       quede pegada a la izquierda con su tamaño fijo, y el TEXTO
       (DOM 1 → order: 2) ocupe el resto a la derecha con el
       nombre legible. Selector con specificity por encima del
       global de theme_overrides (que define 1fr/64px). */
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product {
        align-items: center !important;
        column-gap: 10px !important;
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        padding: 10px 0 !important;
        row-gap: 0 !important;
    }
    /* Imagen → primera columna (64px) */
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product > .product-image-container,
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product > figure.product-image-container {
        grid-column: 1 / 2 !important;
        height: 64px !important;
        margin: 0 !important;
        max-width: 64px !important;
        min-width: 64px !important;
        order: 1 !important;
        width: 64px !important;
    }
    /* Texto → segunda columna (1fr) ocupando todo el espacio */
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product > .product-details {
        grid-column: 2 / 3 !important;
        margin: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        order: 2 !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product .product-title,
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product .product-title a {
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product .cart-product-info {
        display: block !important;
        margin: 0 !important;
        text-align: left !important;
    }
    /* Botón eliminar (X rojo) → arriba a la derecha del card */
    html body .header-right > .cart-dropdown:has(.dropdown-cart-products) .dropdown-cart-products .product .btn-remove {
        right: 0 !important;
        top: 4px !important;
    }

    /* (2) Inputs del checkout — replicar el estilo de los recuadros
       de la columna derecha (Solicitar cotización, Elige un método
       de pago): borde plomo MUY delgado y suave, esquinas OVALADAS
       (pill), fondo blanco. textareas mantienen radius menor para
       no deformarse cuando crecen verticalmente. Solo afecta al
       tema Modern (este archivo se incluye únicamente cuando el
       tema activo es 'modern').

       Specificity boost: `#app` agregado para ganarle a la rule
       global `html body:has(#app .cart-mobile-sticky) .form-control
       { border-radius: 10px !important }` de theme_overrides (que
       tiene un ID dentro de `:has`, sumando a=1 al cálculo). */
    html body #app .col-lg-8 .form-control,
    html body #app .col-lg-8 input.form-control,
    html body #app .col-lg-8 select.form-control,
    html body #app .col-lg-4 .form-control,
    html body #app .col-lg-4 input.form-control,
    html body #app .col-lg-4 select.form-control {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 999px !important;
        color: #0f172a !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    html body #app .col-lg-8 textarea.form-control,
    html body #app .col-lg-4 textarea.form-control {
        border-radius: 18px !important;
    }
    html body #app .col-lg-8 .form-control:hover,
    html body #app .col-lg-4 .form-control:hover {
        border-color: #cbd5e1 !important;
    }
    html body #app .col-lg-8 .form-control:focus,
    html body #app .col-lg-4 .form-control:focus {
        background: #ffffff !important;
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
        outline: none !important;
    }

    /* Mi cuenta — replica el mismo pill ovalado a TODOS los inputs y
       selects de la página de "Mi cuenta" (Nombre, Correo, Teléfono,
       Tipo de doc., Dirección, etc.). OJO: en mi-cuenta el #app
       MISMO lleva la clase .mi-cuenta-page (es el mismo elemento),
       por eso usamos `#app.mi-cuenta-page` (concatenado, sin espacio)
       en vez de `#app .mi-cuenta-page` (descendiente).

       Altura mínima 48px + padding interno generoso (vertical y
       horizontal) para que el texto respire dentro de la pill. */
    html body #app.mi-cuenta-page .form-control,
    html body #app.mi-cuenta-page input.form-control,
    html body #app.mi-cuenta-page select.form-control,
    html body #app.mi-cuenta-page .mi-cuenta-form-section .form-control,
    html body #app.mi-cuenta-page .mi-cuenta-form-section input.form-control,
    html body #app.mi-cuenta-page .mi-cuenta-form-section select.form-control {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 999px !important;
        color: #0f172a !important;
        font-size: 14px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 12px 22px !important;
    }
    html body #app.mi-cuenta-page textarea.form-control,
    html body #app.mi-cuenta-page .mi-cuenta-form-section textarea.form-control {
        border-radius: 18px !important;
        height: auto !important;
        min-height: 90px !important;
        padding: 14px 22px !important;
    }
    html body #app.mi-cuenta-page .form-control:hover,
    html body #app.mi-cuenta-page .form-control:focus {
        background: #ffffff !important;
    }
    html body #app.mi-cuenta-page .form-control:hover {
        border-color: #cbd5e1 !important;
    }
    html body #app.mi-cuenta-page .form-control:focus {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
        outline: none !important;
    }

    /* Botón "SUNAT" (al lado de "Número de documento") — pedido:
       mismo estándar visual que los inputs (pill ovalado, mismo alto,
       padding interno generoso). Mantiene el color azul Bluish de
       acción para que se distinga como botón, no como input. */
    html body #app.mi-cuenta-page .mi-cuenta-search-btn,
    html body #app.mi-cuenta-page button.mi-cuenta-search-btn {
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 999px !important;
        color: #1a56db !important;
        display: inline-flex !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        gap: 6px !important;
        height: 48px !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 12px 22px !important;
    }
    html body #app.mi-cuenta-page .mi-cuenta-search-btn:hover,
    html body #app.mi-cuenta-page button.mi-cuenta-search-btn:hover {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

    /* Botón "Guardar cambios" — mismo estándar pill ovalado de la
       columna, pero pintado en rojo Modern (el color de acción del
       tema) para distinguirse como CTA. Antes traía un gradient
       azul + borde verde heredados que rompían la armonía. */
    html body #app.mi-cuenta-page .mi-cuenta-save,
    html body #app.mi-cuenta-page button.mi-cuenta-save,
    html body #app.mi-cuenta-page .btn.mi-cuenta-save {
        align-items: center !important;
        background: #ef4444 !important;
        background-image: none !important;
        border: 1px solid #ef4444 !important;
        border-radius: 999px !important;
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.18) !important;
        color: #ffffff !important;
        display: inline-flex !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        height: 48px !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 12px 32px !important;
    }
    html body #app.mi-cuenta-page .mi-cuenta-save:hover,
    html body #app.mi-cuenta-page button.mi-cuenta-save:hover,
    html body #app.mi-cuenta-page .btn.mi-cuenta-save:hover {
        background: #dc2626 !important;
        background-image: none !important;
        border-color: #dc2626 !important;
        box-shadow: 0 10px 22px rgba(239, 68, 68, 0.24) !important;
        color: #ffffff !important;
    }

    /* (3) Símbolo de moneda "S/" del Método de pago — antes en una
       caja gris separada del monto (dos pills visualmente distintos).
       Ahora el wrap entero es UNA pill con borde fino plomo y fondo
       blanco; el "S/" queda transparente integrado a la izquierda
       del monto. */
    html body #app .cart-payment-amount {
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 999px !important;
        padding: 6px 18px !important;
    }
    html body #app .cart-payment-amount .input-group-prepend {
        background: transparent !important;
    }
    html body #app .cart-payment-amount .input-group-text {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        padding: 0 8px 0 0 !important;
    }
    html body #app .cart-payment-amount input.form-control,
    html body #app .cart-payment-amount .form-control[type="text"] {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-weight: 600 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 4px 0 !important;
        text-align: left !important;
    }
    html body #app .cart-payment-amount input.form-control:focus,
    html body #app .cart-payment-amount input.form-control:hover,
    html body #app .cart-payment-amount .form-control[type="text"]:focus,
    html body #app .cart-payment-amount .form-control[type="text"]:hover {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


/* =========================================================================
       PRESENTACIONES + FILTROS — Tema MODERN (App móvil)
       -------------------------------------------------------------------------
       Repinta la base neutral azul (#2563eb) con la firma del tema MODERN:
         · Acento principal ROJO   #ef4444  (hover #dc2626)
         · Tinta                   #1e293b / #0f172a
         · Grises                  #475569 / #64748b / #94a3b8
         · Líneas                  #e5e7eb / #f1f5f9
         · Anillo de foco rojo     rgba(239,68,68,.15)
         · Chip elegido            fondo rgba(239,68,68,.08) + borde #ef4444
         · Radius 8px (estética app limpia); botón Aplicar pill rojo
       Convención del archivo: prefijo "html body " + !important para GANARLE
       a la capa acorn_overrides (azul) que este mismo tema carga primero.
       ========================================================================= */

    /* -------------------------------------------------------------------------
       (1) SELECTOR DE PRESENTACIONES
       ------------------------------------------------------------------------- */
    /* Etiqueta "Presentación" — tinta del tema */
    html body .ec-presentations__label {
        color: #1e293b !important;
        font-weight: 700 !important;
    }

    /* --- Detalle: chips con radio --- */
    html body .ec-presentations--detail .ec-presentation-option {
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
    }
    html body .ec-presentations--detail .ec-presentation-option:hover {
        border-color: #ef4444 !important;
        background: #fef2f2 !important;
    }
    /* Chip elegido: borde + fondo rojo suave (firma del tema) */
    html body .ec-presentations--detail .ec-presentation-option.is-selected {
        border-color: #ef4444 !important;
        background: rgba(239, 68, 68, 0.08) !important;
        box-shadow: inset 0 0 0 1px #ef4444 !important;
    }
    /* El radio nativo toma el color del tema (rojo) */
    html body .ec-presentations--detail .ec-presentation-option input[type="radio"] {
        accent-color: #ef4444 !important;
    }
    html body .ec-presentations--detail .ec-presentation-option__name {
        color: #1e293b !important;
        font-weight: 600 !important;
    }
    /* Precio destacado en el rojo del tema */
    html body .ec-presentations--detail .ec-presentation-option__price {
        color: #ef4444 !important;
        font-weight: 800 !important;
    }
    html body .ec-presentations--detail .ec-presentation-option.is-selected .ec-presentation-option__name {
        color: #0f172a !important;
    }

    /* --- Tarjeta / vista rápida: dropdown compacto --- */
    /* Mismo look que los inputs del tema: blanco, radius 8px, línea #e5e7eb */
    html body .ec-presentation-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #1e293b !important;
        font-weight: 500 !important;
        transition: border-color .15s ease, box-shadow .15s ease !important;
    }
    html body .ec-presentation-select:hover {
        border-color: #cbd5e1 !important;
    }
    /* Foco con anillo rojo suave del tema */
    html body .ec-presentation-select:focus {
        outline: none !important;
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    }

    /* -------------------------------------------------------------------------
       (2) PANEL DE FILTROS (sidebar) — tarjeta coherente con el tema
       ------------------------------------------------------------------------- */
    /* Cabecera de la tarjeta de filtros */
    html body .ecommerce-sidebar-filters {
        border-top: 1px solid #f1f5f9 !important;
    }
    html body .ecommerce-sidebar-filters__title {
        color: #0f172a !important;
        font-weight: 700 !important;
    }
    html body .ecommerce-sidebar-filters__title i.bi {
        color: #ef4444 !important;
    }

    /* Labels de cada grupo (Ordenar / Precio / Marca) */
    html body .ecommerce-filters-bar__label {
        color: #475569 !important;
        font-weight: 600 !important;
    }
    html body .ecommerce-filters-bar__label i.bi {
        color: #ef4444 !important;
    }

    /* Selects e inputs de precio: mismo lenguaje que los inputs del tema */
    html body .ecommerce-filters-bar__select,
    html body .ecommerce-filters-bar__price {
        color: #1e293b !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        transition: border-color .15s ease, box-shadow .15s ease !important;
    }
    html body .ecommerce-filters-bar__select:hover,
    html body .ecommerce-filters-bar__price:hover {
        border-color: #cbd5e1 !important;
    }
    /* Foco con anillo rojo del tema (pisa el azul rgba(37,99,235,.12) de la base) */
    html body .ecommerce-filters-bar__select:focus,
    html body .ecommerce-filters-bar__price:focus {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
        outline: none !important;
    }
    /* Placeholder "Desde / Hasta" en gris del tema */
    html body .ecommerce-filters-bar__price::placeholder {
        color: #94a3b8 !important;
    }
    /* Separador "—" entre los precios */
    html body .ecommerce-filters-bar__dash {
        color: #94a3b8 !important;
    }

    /* Botón Aplicar — pill rojo, color primario del tema con sombra de color */
    html body .ecommerce-filters-bar__apply {
        color: #ffffff !important;
        background: #ef4444 !important;
        border: 1px solid #ef4444 !important;
        border-radius: 999px !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
        transition: background .18s ease, box-shadow .18s ease, transform .12s ease !important;
    }
    html body .ecommerce-filters-bar__apply:hover {
        background: #dc2626 !important;
        border-color: #dc2626 !important;
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.5) !important;
        transform: translateY(-1px) !important;
    }

    /* Enlace Limpiar — secundario, outlined, hover rojo del tema */
    html body .ecommerce-filters-bar__clear {
        color: #64748b !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 999px !important;
        transition: color .15s ease, border-color .15s ease, background .15s ease !important;
    }
    html body .ecommerce-filters-bar__clear:hover {
        color: #ef4444 !important;
        border-color: #ef4444 !important;
        background: #fef2f2 !important;
    }