/* block 1 from verde_pulse_overrides */
/* CSS variables — el tenant puede sobreescribir vía las columnas vp_*. */
    :root {
        --vp-primary: #83BF2C;
        --vp-secondary: #0071CD;
        --vp-bg: #f8fafc;
        --vp-text: #1f2937;
        --vp-text-muted: #6b7280;
        --vp-border: #e5e7eb;
        --vp-card-bg: #ffffff;
        --vp-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.10);
        --vp-card-radius: 12px;
        --vp-pill-radius: 50px;
    }

    /* === Tipografía Poppins en TODA la tienda (override de Porto) ===
       :not(.bi):not([class^="bi-"]) excluye los iconos Bootstrap Icons,
       que necesitan font-family "bootstrap-icons" para renderizar. */
    html, body, *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]) {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }
    /* Reforzar font-family para Bootstrap Icons (defensa contra overrides) */
    .bi, [class^="bi-"], [class*=" bi-"] {
        font-family: "bootstrap-icons" !important;
    }
    body {
        background-color: var(--vp-bg) !important;
        color: var(--vp-text) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
    .breadcrumb-nav .breadcrumb,
    .breadcrumb-nav .breadcrumb-item,
    .breadcrumb-nav .breadcrumb a {
        text-transform: none !important;
    }

    /* === Header / navbar — fondo blanco, logo grande, items grandes === */
    header, .header, .header-middle, #header, .header-bottom {
        background: #ffffff !important;
        border-bottom: 1px solid var(--vp-border) !important;
        box-shadow: none !important;
    }
    header a, .header a {
        color: var(--vp-text) !important;
    }
    header .logo, .header .logo {
        font-weight: 700;
    }

    /* Items del menú de navegación: pill verde cuando activo */
    .menu > li > a, .main-nav .menu > li > a, nav .menu > li > a {
        font-weight: 500 !important;
        color: var(--vp-text) !important;
        padding: 8px 14px !important;
        border-radius: var(--vp-pill-radius) !important;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .menu > li > a:hover, .menu > li > a.active,
    .menu > li.active > a, .menu > li:hover > a {
        background: var(--vp-primary) !important;
        color: #ffffff !important;
    }

    /* === FIX banner tapado por header fixed ===
       header.header es position:fixed (z=13). Sin padding-top en main, el
       contenido (banner + container) queda atrás del header. Agregamos
       padding-top suficiente para que el banner aparezca completo.
       Header height medido = 66px → 80px da 14px de respiro. */
    main.main {
        padding-top: 80px !important;
    }
    /* En mobile el header se hace más alto (logo + search en filas) */
    @media (max-width: 991.98px) {
        main.main { padding-top: 130px !important; }
    }

    /* === Search bar — réplica EXACTA de ETSA ===
       Medido en Chrome:
         · Input: bg white, border 1px solid #e5e7eb, br 50px (pill),
                  padding 6px 45px 6px 20px (45 right para icono), font 16px,
                  height 38px, placeholder "Buscar productos..."
         · Icono lupa absoluto a la derecha, color #1f2937, 16px
       Estructura demo Porto: input.search_input.form-control.form-control-lg
       dentro de .header-dropdown.minWSize. Porto usa form-control-lg con
       specificity alta + sus propias reglas, así que apuntamos al class
       .search_input directo (más específico que .header-center input). */
    .header-center .header-dropdown,
    .header-center .header-dropdown.minWSize {
        position: relative !important;
        width: 100% !important;
    }
    /* Selectores muy específicos para ganarle a Porto (que usa
       `header input.form-control` con tag-name selector) */
    header.header input.search_input,
    header.header input.search_input.form-control,
    header.header input.search_input.form-control-lg,
    header.header .header-center input.search_input,
    .header-middle input.search_input,
    #header_bar input.search_input {
        background: #ffffff !important;
        border: 1px solid rgb(229, 231, 235) !important;
        border-radius: 50px !important;
        padding: 8px 50px 8px 22px !important;
        font-size: 16px !important;
        height: 44px !important;
        line-height: 1.5 !important;
        color: var(--vp-text) !important;
        box-shadow: none !important;
        width: 100% !important;
    }
    input.search_input::placeholder {
        color: rgb(156, 163, 175) !important;
        font-size: 16px !important;
        opacity: 1;
    }
    input.search_input:focus {
        border-color: var(--vp-primary) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.15) !important;
    }
    /* Icono lupa — inyectado via JS como <i class="bi bi-search vp-search-icon"> */
    .vp-search-icon {
        position: absolute !important;
        top: 50% !important;
        right: 18px !important;
        transform: translateY(-50%) !important;
        color: var(--vp-text) !important;
        font-size: 16px !important;
        pointer-events: none !important;
        z-index: 2 !important;
        line-height: 1 !important;
    }

    /* Container del header — limitar a 1320px (igual que main, matchea ETSA) */
    .header-middle .container {
        max-width: 1320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Header-center (search box wrapper) — alineado a la derecha y más ancho.
       Tiene ID #header_bar (mayor especificidad que .header-center). */
    .header-middle .header-center,
    .header-middle #header_bar,
    #header_bar {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 460px !important;
        margin-left: auto !important;  /* empuja a la derecha */
        padding-right: 12px !important;
    }
    .header-middle .header-center .header-search,
    .header-middle .header-center input.form-control,
    .header-middle .header-center .header-dropdown,
    #header_bar .header-dropdown,
    #header_bar .header-dropdown.minWSize,
    .header-dropdown.minWSize {
        width: 100% !important;
        max-width: 440px !important;
        min-width: 0 !important; /* Porto pone min-width: 800px en .minWSize */
    }

    /* === Search bar — pill blanca con borde === */
    .header-search input.form-control,
    input[type="search"],
    input[name="search"],
    .search-form input {
        background: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: var(--vp-pill-radius) !important;
        padding: 9px 18px !important;
        font-size: 14px !important;
        height: auto !important;
        box-shadow: none !important;
    }
    .header-search input.form-control:focus,
    input[type="search"]:focus {
        border-color: var(--vp-primary) !important;
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.15) !important;
    }

    /* Carrito badge: rojo redondito esquina del icono */
    .cart-count, .header-icon .cart-count, .badge-cart {
        background: #ef4444 !important;
        color: #ffffff !important;
        border-radius: 9999px !important;
        font-size: 11px !important;
        min-width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    /* === Banner gradient (Encuentra productos cerca de ti) === */
    /* Banner — réplica EXACTA de ETSA (.sucursal-section-compact)
       Medido: h=66px, padding=12px, br=12px, max-width 1320px (igual al
       container Bootstrap xxl). El banner se inyecta directamente en <main>
       fuera del .container, así que necesita su propio max-width + auto
       margin para no quedar edge-to-edge. */
    .vp-banner {
        background: linear-gradient(90deg, var(--vp-primary) 0%, var(--vp-secondary) 100%);
        color: #ffffff;
        border-radius: var(--vp-card-radius);
        padding: 12px 20px;
        margin: 12px auto !important;
        max-width: 1320px !important;
        width: calc(100% - 30px); /* respeta el padding 15px de los lados */
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        box-shadow: 0 6px 18px rgba(131, 191, 44, 0.15);
        min-height: 66px;
        box-sizing: border-box;
    }
    .vp-banner__title { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.2; }
    .vp-banner__sub { font-size: 12px; margin: 2px 0 0; opacity: 0.95; line-height: 1.3; }
    .vp-banner__sucursal {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: #ffffff;
        padding: 10px 18px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.3px;
    }
    .vp-banner__branch {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.35);
        color: #ffffff;
        padding: 8px 10px 8px 14px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 13px;
        min-width: min(360px, 100%);
    }
    .vp-banner__branch span {
        white-space: nowrap;
    }
    .vp-banner__branch-select {
        width: 100%;
        min-width: 180px;
        height: 38px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 7px;
        background: #ffffff;
        color: var(--vp-text);
        font-weight: 600;
        padding: 0 34px 0 12px;
        outline: none;
    }
    .product-stock-store {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        margin: 8px 0 14px;
        font-size: 13px;
        line-height: 1.3;
    }
    .product-stock-store small {
        color: var(--vp-text-muted);
        font-size: 12px;
    }

    /* === Heading "Categorías" con border-left verde === */
    .vp-section-title, h1.section-title, h2.section-title {
        font-weight: 700;
        font-size: 22px;
        color: var(--vp-text);
        padding-left: 14px;
        border-left: 4px solid var(--vp-primary);
        margin: 24px 0 16px;
    }
    .vp-section-title::after,
    h2.section-title::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: var(--vp-primary);
        margin-top: 6px;
        border-radius: 2px;
    }

    /* === Carrusel de categorías — cards icon + label === */
    .vp-category-card {
        background: var(--vp-card-bg);
        border: 1px solid var(--vp-border);
        border-radius: var(--vp-card-radius);
        padding: 16px 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.18s ease;
        min-height: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .vp-category-card:hover {
        border-color: var(--vp-primary);
        box-shadow: 0 6px 18px rgba(131, 191, 44, 0.18);
        transform: translateY(-2px);
    }
    .vp-category-card.active {
        border: 2px solid var(--vp-primary);
        box-shadow: 0 6px 18px rgba(131, 191, 44, 0.20);
    }
    .vp-category-card__icon {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: var(--vp-primary);
    }
    .vp-category-card__icon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .vp-category-card__label {
        font-size: 12px;
        font-weight: 600;
        color: var(--vp-text);
        text-transform: none;
        letter-spacing: 0.3px;
    }

    /* === Card de producto: blanco, radius 12px, shadow suave === */
    .product, .product-style, .product-default,
    .product-card-custom {
        background: var(--vp-card-bg) !important;
        border: 0 !important;
        border-radius: var(--vp-card-radius) !important;
        box-shadow: var(--vp-card-shadow) !important;
        overflow: hidden;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        position: relative;
    }
    .product:hover, .product-style:hover,
    .product-default:hover, .product-card-custom:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
    }

    .product-image-container, .product .product-image {
        background: #ffffff !important;
        aspect-ratio: 1 / 1 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 12px;
    }
    .product-image-container img, .product .product-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain !important;
    }

    /* Badge "Oferta" verde pill, esquina superior izquierda */
    .product .badge-oferta, .product .label-oferta, .product .product-label.label-sale,
    .product-card-custom .product-label,
    span.label-sale, span.product-label-new {
        background: var(--vp-primary) !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        letter-spacing: 0.2px;
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
    }

    /* Badge stock circular rojo (esquina superior derecha) */
    .product .stock-badge, .product .badge-stock,
    .product-card-custom .stock-badge {
        background: #ef4444 !important;
        color: #ffffff !important;
        border-radius: 9999px !important;
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        font-weight: 700;
        text-align: center;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    /* COD del producto: chip oscuro con texto claro */
    .product .product-code, .product-card-custom .product-code {
        position: absolute;
        bottom: 8px;
        left: 12px;
        background: rgba(31, 41, 55, 0.85);
        color: #ffffff;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 4px;
        letter-spacing: 0.3px;
    }

    /* Título del producto */
    .product .product-title, .product .name, .product-card-custom .product-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--vp-text) !important;
        margin: 12px 14px 6px !important;
        line-height: 1.35 !important;
        min-height: 38px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        visibility: visible !important;
    }
    /* Bug Porto: el <a> dentro de .product-title hereda visibility:hidden,
       lo que rompe el extract de innerText y deja el título invisible. */
    .product .product-title a, .product .product-title > a {
        visibility: visible !important;
        color: inherit !important;
    }

    /* Precio: verde, peso 700 */
    .product-price, .product .price, .product-card-custom .product-price {
        color: var(--vp-primary) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        white-space: nowrap;
        margin: 0 14px 12px !important;
    }
    .old-price {
        color: var(--vp-text-muted) !important;
        font-size: 12px !important;
        text-decoration: line-through;
        margin-right: 6px;
    }

    /* === Botones primarios === */
    .btn-primary, .button.btn-primary,
    button.btn-add-cart, .btn.btn-add-cart {
        background: var(--vp-primary) !important;
        border-color: var(--vp-primary) !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        padding: 8px 18px !important;
        transition: background 0.15s ease, transform 0.10s ease;
    }
    .btn-primary:hover, .button.btn-primary:hover,
    button.btn-add-cart:hover, .btn.btn-add-cart:hover {
        background: #6da625 !important;
        border-color: #6da625 !important;
        transform: translateY(-1px);
    }

    /* WhatsApp floating button */
    .vp-whatsapp-fab, .whatsapp-floating, .floating-whatsapp {
        background: #25d366 !important;
        color: #ffffff !important;
        border-radius: 9999px !important;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        position: fixed !important;
        bottom: 24px;
        right: 24px;
        z-index: 999;
        box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
    }
    .vp-whatsapp-fab:hover { transform: scale(1.05); }

    /* === Brand selector / "Todas las marcas" === */
    .vp-brand-select, select.brand-select {
        background: #ffffff;
        border: 1px solid var(--vp-border);
        border-radius: 8px;
        padding: 9px 14px;
        font-size: 13px;
        color: var(--vp-text);
        cursor: pointer;
    }
    .vp-brand-select:hover { border-color: var(--vp-primary); }

    /* === Quick View modal (Vista Rápida del producto) — estilo ETSA ===
       Porto carga el modal via Magnific Popup AJAX al endpoint
       /ecommerce/item_partial/{id}. Estructura:
         .mfp-wrap.mfp-ajax-product
           .mfp-content
             .product-single-container.product-quick-view
               .col-lg-6 .product-single-gallery (carousel + imágenes)
               .product-single-details (h1 + ratings + price + desc + action)

       Restilamos para matchear ETSA: header "Detalles del Producto" arriba,
       título uppercase bold, precio verde + strikethrough + descuento rojo,
       sección "Descripción:", layout limpio. */
    .mfp-wrap.mfp-ajax-product .mfp-content {
        max-width: 1100px !important;
    }
    .mfp-wrap.mfp-ajax-product .product-single-container {
        background: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
        padding: 28px !important;
        position: relative !important;
        overflow: hidden;
        margin: 0 auto;
    }
    /* Header "Detalles del Producto" inyectado via JS arriba del container.
       (Lo agregamos como un h2 antes del .product-single-container) */
    .mfp-wrap.mfp-ajax-product .vp-quickview-header {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
        margin: 0 0 14px !important;
        padding-bottom: 0;
        border-bottom: none;
    }
    /* Título del producto: uppercase grande */
    .mfp-wrap.mfp-ajax-product .product-single-details .product-title {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
        text-transform: none !important;
        line-height: 1.25 !important;
        margin: 0 0 12px !important;
        letter-spacing: 0;
    }
    /* Ratings: ocultos (demo no usa ese sistema; ETSA no los muestra) */
    .mfp-wrap.mfp-ajax-product .product-single-details .ratings-container {
        display: none !important;
    }
    /* Price box: precio grande verde + old-price strikethrough + descuento rojo */
    .mfp-wrap.mfp-ajax-product .product-single-details .price-box {
        margin: 14px 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    .mfp-wrap.mfp-ajax-product .product-single-details .product-price {
        font-size: 26px !important;
        font-weight: 700 !important;
        color: var(--vp-primary) !important;
        line-height: 1 !important;
    }
    .mfp-wrap.mfp-ajax-product .product-single-details .old-price {
        font-size: 16px !important;
        color: var(--vp-text-muted) !important;
        text-decoration: line-through !important;
        font-weight: 400 !important;
    }
    .mfp-wrap.mfp-ajax-product .product-single-details .price-discount {
        background: rgb(220, 53, 69) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
    }
    /* Descripción: con header "Descripción:" antes (vp-quickview-desc-header
       lo inyectamos via JS antes de .product-desc). */
    .mfp-wrap.mfp-ajax-product .vp-quickview-desc-header {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
        margin: 18px 0 6px !important;
    }
    .mfp-wrap.mfp-ajax-product .product-single-details .product-desc {
        font-size: 14px !important;
        color: var(--vp-text-muted) !important;
        line-height: 1.6 !important;
        margin: 0 0 16px !important;
    }
    /* Action area (qty + agregar) — en línea: [- 1 +] [Agregar a carrito] */
    .mfp-wrap.mfp-ajax-product .product-single-details .product-action {
        margin-top: 18px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 12px !important;
    }
    /* Botón "Agregar a Carrito" del quickview en verde primary, compacto */
    .mfp-wrap.mfp-ajax-product .product-single-details .add-cart,
    .mfp-wrap.mfp-ajax-product .product-single-details .paction.add-cart {
        background: var(--vp-primary) !important;
        background-color: var(--vp-primary) !important;
        color: #ffffff !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(131, 191, 44, 0.25) !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    .mfp-wrap.mfp-ajax-product .product-single-details .add-cart i,
    .mfp-wrap.mfp-ajax-product .product-single-details .add-cart svg {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }
    .mfp-wrap.mfp-ajax-product .product-single-details .add-cart:hover {
        background: #6da625 !important;
    }
    /* Quantity control buttons en verde, redondos */
    .mfp-wrap.mfp-ajax-product .quantity-input,
    .mfp-wrap.mfp-ajax-product .product-single-details .quantity-input {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
    }
    .mfp-wrap.mfp-ajax-product .btn-minus,
    .mfp-wrap.mfp-ajax-product .btn-plus {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 1px solid rgb(108, 117, 125) !important;
        background: transparent !important;
        color: rgb(108, 117, 125) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        cursor: pointer !important;
    }
    .mfp-wrap.mfp-ajax-product .btn-minus:hover,
    .mfp-wrap.mfp-ajax-product .btn-plus:hover {
        background: rgb(108, 117, 125) !important;
        color: #ffffff !important;
    }
    /* Mfp close button (X) más visible y con estilo */
    .mfp-wrap.mfp-ajax-product .mfp-close {
        color: var(--vp-text-muted) !important;
        font-size: 28px !important;
        opacity: 1 !important;
    }

    /* === Botones sociales (WhatsApp + Compartir + Llamar) ===
       3 pills horizontales debajo del AGREGAR A CARRITO. Estilo ETSA:
       - WhatsApp: verde sólido con icono
       - Compartir: blanco con borde gris
       - Llamar: convertimos el botón circular azul existente en pill azul */
    .mfp-wrap.mfp-ajax-product .social-action-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 14px !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    .mfp-wrap.mfp-ajax-product .vp-social-btn {
        flex: 1 1 0 !important;
        min-width: 110px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 16px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        cursor: pointer !important;
        text-transform: none !important;
        line-height: 1.2 !important;
        border: 1px solid transparent !important;
        transition: background 0.15s ease, transform 0.15s ease !important;
        height: auto !important;
        width: auto !important; /* sobrescribe width fija del .action-btn original */
        background-color: transparent !important;
    }
    .mfp-wrap.mfp-ajax-product .vp-social-btn:hover {
        transform: translateY(-1px);
    }
    .mfp-wrap.mfp-ajax-product .vp-social-btn i.bi {
        font-size: 16px !important;
        line-height: 1 !important;
    }
    /* WhatsApp: verde sólido */
    .mfp-wrap.mfp-ajax-product .vp-social-btn-whatsapp,
    .mfp-wrap.mfp-ajax-product .vp-social-btn-whatsapp:link,
    .mfp-wrap.mfp-ajax-product .vp-social-btn-whatsapp:visited {
        background: #25D366 !important;
        background-color: #25D366 !important;
        color: #ffffff !important;
        border-color: #25D366 !important;
    }
    .mfp-wrap.mfp-ajax-product .vp-social-btn-whatsapp:hover {
        background: #1faa54 !important;
        background-color: #1faa54 !important;
        color: #ffffff !important;
    }
    /* Compartir: blanco con borde */
    .mfp-wrap.mfp-ajax-product .vp-social-btn-share {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: var(--vp-text) !important;
        border: 1px solid var(--vp-border) !important;
    }
    .mfp-wrap.mfp-ajax-product .vp-social-btn-share:hover {
        background: #f3f4f6 !important;
        background-color: #f3f4f6 !important;
        color: var(--vp-text) !important;
    }
    /* Llamar (.action-btn.call-btn original): pill azul, no más circular */
    .mfp-wrap.mfp-ajax-product .vp-social-btn-call,
    .mfp-wrap.mfp-ajax-product a.action-btn.call-btn.vp-social-btn-call {
        background: var(--vp-secondary) !important;
        background-color: var(--vp-secondary) !important;
        color: #ffffff !important;
        border-color: var(--vp-secondary) !important;
        border-radius: 8px !important; /* sobrescribe 50% del original */
        height: auto !important;
        width: auto !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
    }
    .mfp-wrap.mfp-ajax-product .vp-social-btn-call:hover {
        background: #005ba8 !important;
        background-color: #005ba8 !important;
        color: #ffffff !important;
    }

    /* Ocultar el WhatsApp CIRCULAR original del quickview: verde_pulse ya
       inyecta un botón "WhatsApp" con texto (.vp-social-btn-whatsapp), así que
       el .action-btn.whatsapp-btn heredado del tema base queda repetitivo.
       El selector apunta solo al círculo original (action-btn whatsapp-btn);
       el botón con texto tiene otras clases, por eso no se ve afectado. */
    .mfp-wrap.mfp-ajax-product .action-btn.whatsapp-btn {
        display: none !important;
    }

    /* === Cart "added" feedback — toast solamente (el botón mantiene verde) ===
       Antes cambiábamos el icono a check + bg gris (.is-added) — el user
       prefirió que el botón se mantenga VERDE siempre + solo el toast como
       feedback. Eliminada esa lógica; .is-added queda como no-op por si
       alguna card vieja en cache aún la tiene. */
    .vp-card__btn-cart.is-added {
        /* No-op: mantenemos el verde original. */
    }
    /* Toast container — fixed abajo a la derecha, items stackeados */
    .vp-toast-host {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: none;
    }
    .vp-toast {
        background: #16a34a;
        color: #ffffff;
        padding: 12px 22px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 8px 22px rgba(22, 163, 74, 0.30);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transform: translateY(20px);
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
        pointer-events: auto;
    }
    .vp-toast.show { transform: translateY(0); opacity: 1; }
    .vp-toast i.bi { font-size: 16px; }

    /* === Cart dropdown — réplica del look ETSA ===
       Estructura del dropdown Porto:
         .cart-dropdown .dropdown-menu
           .dropdownmenu-wrapper
             .dropdown-cart-products
               .product
                 .product-details
                   h4.product-title > a
                   span.cart-product-info > span.cart-product-qty + " x 22.00"
                 figure.product-image-container
                   a.product-image > img
                   a.btn-remove > i.bi-trash
             .dropdown-cart-total > span "Total" + span.cart-total-price
             .dropdown-cart-action > a.btn

       ETSA-style: contenedor 430px, items con flex (image left, info center,
       delete top-right red), total con línea arriba, botón VERDE big con
       icono cart y texto "Proceder al detalle". */
    .cart-dropdown .dropdown-menu {
        width: 460px !important; /* +30px para que el título 3 líneas no apriete */
        max-width: 95vw !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
        background: #ffffff !important;
        overflow: hidden;
    }
    /* Móvil: el desplegable del carrito ocupa (casi) todo el ancho de la
       pantalla (pedido del cliente "que ocupe todo el ancho"), pegado a los
       bordes con un pequeño margen. Está posicionado fixed, así que con
       left+right+width:auto toma el ancho completo del viewport menos los
       márgenes; max-height + scroll evita que el total/botón queden cortados. */
    @media (max-width: 575.98px) {
        html body .cart-dropdown .dropdown-menu {
            left: 8px !important;
            right: 8px !important;
            width: auto !important;
            max-width: none !important;
            max-height: calc(100vh - 96px) !important;
            overflow-y: auto !important;
        }
    }
    .cart-dropdown .dropdownmenu-wrapper {
        padding: 12px 16px 16px !important;
    }
    .cart-dropdown .dropdown-cart-products {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 12px;
        max-height: 60vh;
        overflow-y: auto;
        /* Padding-right para que el scrollbar no tape los botones trash */
        padding-right: 12px !important;
    }
    /* Scrollbar más sutil */
    .cart-dropdown .dropdown-cart-products::-webkit-scrollbar {
        width: 6px;
    }
    .cart-dropdown .dropdown-cart-products::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.20);
        border-radius: 3px;
    }
    .cart-dropdown .dropdown-cart-products::-webkit-scrollbar-track {
        background: transparent;
    }
    /* Cada item: flex con image LEFT (order -1) + details RIGHT, delete absolute top-right */
    .cart-dropdown .dropdown-cart-products .product {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 40px 8px 0 !important; /* 40px right para el delete */
        border-bottom: 1px solid #f3f4f6 !important;
        position: relative !important;
        margin: 0 !important;
    }
    .cart-dropdown .dropdown-cart-products .product:last-child {
        border-bottom: none !important;
    }
    /* Image: forzar orden -1 y tamaño fijo */
    .cart-dropdown .product .product-image-container {
        order: -1 !important;
        flex: 0 0 70px !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 70px !important;
        height: 70px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    .cart-dropdown .product .product-image-container .product-image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .cart-dropdown .product .product-image-container .product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
    /* Details: ocupa el resto */
    .cart-dropdown .product .product-details {
        order: 0 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }
    .cart-dropdown .product .product-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--vp-text) !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.3 !important;
        text-transform: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .cart-dropdown .product .product-title a {
        color: var(--vp-text) !important;
        text-decoration: none !important;
    }
    .cart-dropdown .product .cart-product-info {
        font-size: 13px !important;
        color: var(--vp-text-muted) !important;
        font-weight: 500 !important;
    }
    .cart-dropdown .product .cart-product-qty {
        color: var(--vp-text) !important;
        font-weight: 700 !important;
    }
    /* Delete button: top-right del row, REMOVER del figure y posicionar */
    .cart-dropdown .product .btn-remove {
        position: absolute !important;
        top: 8px !important;
        right: 0 !important;
        order: 3;
        width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(220, 53, 69, 0.08) !important;
        border: 1px solid rgba(220, 53, 69, 0.20) !important;
        border-radius: 6px !important;
        color: rgb(220, 53, 69) !important;
        text-decoration: none !important;
        transition: background 0.15s ease;
        z-index: 2;
    }
    .cart-dropdown .product .btn-remove:hover {
        background: rgb(220, 53, 69) !important;
        color: #ffffff !important;
    }
    .cart-dropdown .product .btn-remove i.bi-trash {
        font-size: 16px !important;
        line-height: 1 !important;
        color: inherit !important;
    }
    /* Total: con línea arriba */
    .cart-dropdown .dropdown-cart-total {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        padding: 12px 0 !important;
        border-top: 1px solid var(--vp-border) !important;
        margin: 0 0 12px 0 !important;
    }
    .cart-dropdown .dropdown-cart-total > span:first-child {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--vp-text) !important;
        text-transform: capitalize;
    }
    .cart-dropdown .dropdown-cart-total > span:first-child::after {
        content: ":";
    }
    .cart-dropdown .cart-total-price {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
    }
    /* Botón "Proceder al detalle" — verde grande con cart icon (inyectado via JS).
       Usamos clase custom .vp-cart-detail-btn (agregada por JS) para tener
       especificidad exclusiva y ganarle al `.btn` de Porto. */
    .cart-dropdown .dropdown-cart-action {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Specificity alta: combinamos múltiples selectores ancestros para
       sobrepasar `.cart-dropdown .dropdown-cart-action .btn` de Porto */
    .cart-dropdown .dropdownmenu-wrapper .dropdown-cart-action a.vp-cart-detail-btn,
    header .cart-dropdown .dropdown-cart-action a.vp-cart-detail-btn,
    a.vp-cart-detail-btn.btn,
    .vp-cart-detail-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
        background: rgb(34, 139, 34) !important;
        background-color: rgb(34, 139, 34) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        text-decoration: none !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
        box-shadow: 0 2px 8px rgba(34, 139, 34, 0.20) !important;
        transition: background 0.15s ease;
    }
    .cart-dropdown a.vp-cart-detail-btn:hover,
    a.vp-cart-detail-btn:hover,
    .vp-cart-detail-btn:hover {
        background: rgb(28, 119, 28) !important;
        background-color: rgb(28, 119, 28) !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
    .vp-cart-detail-btn span {
        text-transform: none !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    .vp-cart-detail-btn i.bi-cart3 {
        font-size: 16px !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }
    /* Empty state */
    .cart-dropdown .dropdown-cart-products:empty + .dropdown-cart-total {
        display: none !important;
    }

    /* === Cart item rewrite (ETSA-style) === */
    /* Cuando el item fue rewritten por JS, usamos esta estructura nueva.
       Padding generoso para que el título largo (hasta 3 líneas) y el qty
       selector debajo respiren. Min-height asegura altura mínima consistente. */
    .cart-dropdown .product[data-vp-cart-item] {
        display: block !important;
        padding: 22px 0 !important;
        position: relative !important;
        border-bottom: 1px solid #f3f4f6 !important;
        min-height: 110px !important;
    }
    .cart-dropdown .product[data-vp-cart-item]:last-of-type {
        border-bottom: none !important;
    }
    /* Espacio entre items con gap también */
    .cart-dropdown .dropdown-cart-products {
        gap: 0 !important;
    }

    /* === FIX carrito móvil "sale incompleto" ===
       El bundle Acorn/externo aplica `display:grid` a `.product` (es la grilla
       del catálogo) y esa regla se FILTRA, con !important, a los items del
       mini-carrito. Eso colapsa cada item del carrito a ~64px de ancho: el
       título desaparece, el precio se desborda y el selector de Cantidad
       (- 1 + x precio) se apila en vertical. Forzamos el layout flex correcto
       con specificity alta (html body + clases/atributos repetidos) para
       ganarle a la grilla externa, y reseteamos cualquier grid heredado.
       Aplica en todos los anchos. */
    html body .cart-dropdown.cart-dropdown .dropdownmenu-wrapper .dropdown-cart-products .product[data-vp-cart-item][data-vp-cart-item] {
        display: block !important;
        grid-template: none !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    html body .cart-dropdown.cart-dropdown .dropdownmenu-wrapper .dropdown-cart-products .product[data-vp-cart-item][data-vp-cart-item] > .vp-cart-item {
        display: flex !important;
        width: 100% !important;
        grid-template-columns: none !important;
    }
    html body .cart-dropdown.cart-dropdown .dropdownmenu-wrapper .dropdown-cart-products .product[data-vp-cart-item][data-vp-cart-item] .vp-cart-item__body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
    html body .cart-dropdown.cart-dropdown .dropdownmenu-wrapper .dropdown-cart-products .product[data-vp-cart-item][data-vp-cart-item] .vp-cart-item__qtyrow {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .vp-cart-item {
        display: flex !important;
        gap: 12px !important;
        align-items: flex-start !important;
    }
    .vp-cart-item__image {
        flex: 0 0 70px !important;
        width: 70px !important;
        height: 70px !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        background: #f9fafb;
    }
    .vp-cart-item__image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }
    .vp-cart-item__body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .vp-cart-item__head {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        justify-content: space-between !important;
    }
    .vp-cart-item__title {
        flex: 1 1 auto !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
        text-transform: none !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        text-decoration: none !important;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* permite hasta 3 líneas (antes 2) */
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }
    .vp-cart-item__title:hover { color: var(--vp-primary) !important; }
    .vp-cart-item__price {
        flex: 0 0 auto !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
        white-space: nowrap !important;
        margin-right: 4px !important;
    }
    .vp-cart-item__remove {
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 1px solid rgba(220, 53, 69, 0.30) !important;
        border-radius: 6px !important;
        color: rgb(220, 53, 69) !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.15s ease;
    }
    .vp-cart-item__remove:hover {
        background: rgb(220, 53, 69) !important;
        color: #ffffff !important;
    }
    .vp-cart-item__remove i.bi-trash {
        font-size: 14px !important;
        color: inherit !important;
    }
    .vp-cart-item__qtyrow {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }
    .vp-cart-item__qty-label {
        color: var(--vp-text-muted) !important;
        margin-right: 2px !important;
    }
    .vp-cart-item__qty-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 1px solid rgb(108, 117, 125) !important;
        border-radius: 50% !important;
        color: rgb(108, 117, 125) !important;
        cursor: pointer !important;
        font-size: 14px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .vp-cart-item__qty-btn:hover {
        background: rgb(108, 117, 125) !important;
        color: #ffffff !important;
    }
    .vp-cart-item__qty-input {
        width: 36px !important;
        height: 26px !important;
        text-align: center !important;
        border: 1px solid rgb(222, 226, 230) !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        color: rgb(33, 37, 41) !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .vp-cart-item__qty-mult {
        color: var(--vp-text-muted) !important;
        margin-left: 4px !important;
    }
    .vp-cart-item__qty-mult strong {
        color: var(--vp-text) !important;
        font-weight: 700 !important;
    }

    /* === Login / Register modal — réplica EXACTA de ETSA ===
       Estructura Bootstrap demo: #login_register_modal > .modal-dialog.modal-lg
       > .modal-content > .row > [.col-md-5 (login) + .col-md-5 (register)]

       ETSA tiene: 2 columnas (welcome left + form right con TABS Ingresar/Registrarse).
       Estrategia:
         - Modal más chico (620px en vez de 900)
         - Side LEFT: tarjeta verde con "Bienvenido a ..." (vp-login-welcome)
         - Side RIGHT: form con TABS arriba (Ingresar | Registrarse)
         - JS toggla vp-tab-active entre los dos forms
         - Inputs y botones restilados al verde theme */
    #login_register_modal .modal-dialog {
        max-width: 760px !important;
    }
    #login_register_modal .modal-content {
        border: none !important;
        border-radius: 16px !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
        overflow: hidden;
        background: #ffffff !important;
    }
    /* Reset modal padding inner */
    #login_register_modal .modal-body,
    #login_register_modal .modal-content > .container-fluid,
    #login_register_modal .modal-content > div {
        padding: 0 !important;
    }
    /* Layout 2-col: welcome (40%) + form (60%) */
    #login_register_modal .row {
        display: flex !important;
        margin: 0 !important;
        min-height: 480px;
    }
    /* Botón cerrar custom (X) en la esquina sup. derecha */
    .vp-login-close {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: none !important;
        background: transparent !important;
        color: var(--vp-text-muted) !important;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        z-index: 10 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .vp-login-close:hover { background: #f3f4f6 !important; color: var(--vp-text) !important; }

    /* Welcome side — tarjeta blanca con texto destacado */
    #login_register_modal .vp-login-welcome {
        flex: 0 0 40%;
        max-width: 40%;
        padding: 40px 28px !important;
        background: #ffffff;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;
    }
    .vp-login-welcome__title {
        font-size: 24px;
        font-weight: 700;
        color: var(--vp-text);
        margin: 0 0 10px 0;
        line-height: 1.25;
    }
    .vp-login-welcome__title strong {
        color: var(--vp-primary);
        font-weight: 700;
    }
    .vp-login-welcome__sub {
        font-size: 14px;
        color: var(--vp-text-muted);
        margin: 0;
        line-height: 1.5;
    }

    /* Form side — wrapper de los dos col-md-5 originales */
    #login_register_modal .vp-login-formside {
        flex: 1 1 auto;
        padding: 36px 32px 28px !important;
        background: #ffffff;
        position: relative;
    }
    .vp-login-formside__header {
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: var(--vp-text);
        text-transform: none;
        letter-spacing: 0.5px;
        margin: 0 0 18px 0;
    }
    /* TABS Ingresar / Registrarse */
    .vp-login-tabs {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin: 0 0 22px 0;
    }
    .vp-login-tab {
        padding: 8px 22px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        color: var(--vp-text-muted);
        cursor: pointer;
        background: transparent;
        border: none;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .vp-login-tab.active {
        background: var(--vp-primary);
        color: #ffffff;
    }
    /* Mostrar/ocultar forms según tab activo (data-vp-form se setea en JS).
       data-vp-form="login" → primer col-md-5 (Ingresar a tu cuenta)
       data-vp-form="register" → segundo col-md-5 (Nuevo Registro) */
    #login_register_modal [data-vp-form] {
        display: block !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    #login_register_modal.vp-tab-login [data-vp-form="register"] {
        display: none !important;
    }
    #login_register_modal.vp-tab-register [data-vp-form="login"] {
        display: none !important;
    }
    /* Ocultar separador vertical (la línea entre las 2 cols) */
    #login_register_modal .col-md-2,
    #login_register_modal .col-md-1,
    #login_register_modal hr,
    #login_register_modal .vertical-divider,
    #login_register_modal [class*="divider"] {
        display: none !important;
    }
    /* Ocultar los H4 originales ("INGRESAR A TU CUENTA" / "Nuevo Registro")
       — los reemplazamos por header centrado + tabs */
    #login_register_modal .vp-login-formside h4 {
        display: none !important;
    }
    /* Las dos col-md ocupan 100% del formside */
    #login_register_modal .vp-login-formside > .col-md-5,
    #login_register_modal .vp-login-formside > .col-md-6,
    #login_register_modal .vp-login-formside > [class*="col-md"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* Estilo de inputs */
    #login_register_modal label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--vp-text) !important;
        margin-bottom: 6px !important;
        display: block !important;
    }
    #login_register_modal input.form-control,
    #login_register_modal input[type="text"],
    #login_register_modal input[type="email"],
    #login_register_modal input[type="password"] {
        background: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        height: 42px !important;
        font-size: 14px !important;
        color: var(--vp-text) !important;
        margin-bottom: 14px !important;
        box-shadow: none !important;
        width: 100% !important;
    }
    #login_register_modal input:focus {
        border-color: var(--vp-primary) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.15) !important;
    }
    /* Botones submit verdes grandes */
    #login_register_modal button[type="submit"],
    #login_register_modal button.btn,
    #login_register_modal a.btn {
        width: 100% !important;
        padding: 11px 20px !important;
        background: var(--vp-primary) !important;
        background-color: var(--vp-primary) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        margin-top: 6px !important;
        box-shadow: 0 4px 12px rgba(131, 191, 44, 0.25) !important;
        transition: background 0.15s ease;
    }
    #login_register_modal button[type="submit"]:hover {
        background: #6ba023 !important;
    }
    /* Backdrop más oscuro */
    .modal-backdrop.show { opacity: 0.55 !important; }

    @media (max-width: 767.98px) {
        #login_register_modal .vp-login-welcome {
            display: none !important;
        }
        #login_register_modal .row { flex-direction: column; min-height: auto; }
        #login_register_modal .vp-login-formside { flex: 0 0 100%; max-width: 100%; }
    }

    /* === Banner publicitario "Inicio" — destacado superior con CTA ===
       Aparece SOLO al click en "Inicio" del nav (no por default). Ocupa
       arriba de las categorías, gradiente más vibrante con un mensaje
       promocional + CTA "Ver tienda". */
    .vp-home-banner {
        background: linear-gradient(135deg, var(--vp-primary) 0%, var(--vp-secondary) 100%);
        border-radius: 16px;
        padding: 32px 36px;
        margin: 0 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        box-shadow: 0 10px 30px rgba(131, 191, 44, 0.20);
        position: relative;
        overflow: hidden;
    }
    .vp-home-banner::before {
        content: '';
        position: absolute;
        right: -40px; top: -40px;
        width: 220px; height: 220px;
        background: rgba(255,255,255,0.10);
        border-radius: 50%;
    }
    .vp-home-banner__body { color: #ffffff; flex: 1 1 auto; min-width: 240px; position: relative; z-index: 1; }
    .vp-home-banner__pretitle {
        font-size: 12px; font-weight: 600;
        text-transform: none;
        letter-spacing: 1px;
        opacity: 0.92;
        margin: 0 0 6px;
    }
    .vp-home-banner__title {
        font-size: 28px; font-weight: 700;
        line-height: 1.15;
        margin: 0 0 8px;
        color: #ffffff;
    }
    .vp-home-banner__sub {
        font-size: 14px; opacity: 0.92;
        margin: 0;
        max-width: 540px;
        line-height: 1.5;
    }
    .vp-home-banner__cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        color: var(--vp-secondary) !important;
        padding: 12px 28px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        position: relative;
        z-index: 1;
        white-space: nowrap;
    }
    .vp-home-banner__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0,0,0,0.20);
        color: var(--vp-secondary) !important;
    }
    @media (max-width: 575.98px) {
        .vp-home-banner { padding: 22px 20px; }
        .vp-home-banner__title { font-size: 22px; }
    }

    /* === Modal Contáctanos — réplica del look ETSA ===
       Activa al click en el nav "Contactos". Muestra info de contacto del
       ConfigurationEcommerce (nombre, email, teléfono, dirección) + WhatsApp. */
    .vp-contact-modal {
        position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1080;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: vp-fade-in 0.18s ease;
    }
    .vp-contact-modal.show { display: flex !important; }
    @keyframes vp-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    .vp-contact-modal__dialog {
        background: #ffffff;
        border-radius: 16px;
        max-width: 760px;
        width: 100%;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .vp-contact-modal__header {
        padding: 24px 28px 16px;
        position: relative;
        text-align: center;
    }
    .vp-contact-modal__title {
        font-size: 24px;
        font-weight: 700;
        color: var(--vp-text);
        margin: 0 0 6px 0;
    }
    .vp-contact-modal__title::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: var(--vp-primary);
        border-radius: 2px;
        margin: 8px auto 0;
    }
    .vp-contact-modal__sub {
        font-size: 14px;
        color: var(--vp-text-muted);
        margin: 12px 0 0;
        line-height: 1.5;
    }
    .vp-contact-modal__close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: transparent;
        color: var(--vp-text-muted);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
    }
    .vp-contact-modal__close:hover {
        background: #f3f4f6;
        color: var(--vp-text);
    }
    .vp-contact-modal__body {
        padding: 8px 28px 24px;
        overflow-y: auto;
        flex: 1 1 auto;
    }
    .vp-contact-info {
        background: #1f2937;
        border-radius: 12px;
        padding: 24px;
        color: #ffffff;
        position: relative;
    }
    .vp-contact-info__title {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 4px 0;
        color: #ffffff;
    }
    .vp-contact-info__title::after {
        content: '';
        display: block;
        width: 40px;
        height: 2px;
        background: var(--vp-primary);
        border-radius: 2px;
        margin: 8px 0 16px;
    }
    .vp-contact-info__intro {
        font-size: 13px;
        color: rgba(255,255,255,0.75);
        margin: 0 0 18px;
        line-height: 1.5;
    }
    .vp-contact-info__rows {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .vp-contact-info__row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    .vp-contact-info__icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(131, 191, 44, 0.18);
        color: var(--vp-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }
    .vp-contact-info__row-body {
        flex: 1 1 auto;
        min-width: 0;
    }
    .vp-contact-info__row-label {
        font-size: 13px;
        font-weight: 600;
        color: #ffffff;
        margin: 0 0 2px;
    }
    .vp-contact-info__row-value {
        font-size: 13px;
        color: rgba(255,255,255,0.85);
        margin: 0;
        word-break: break-word;
    }
    .vp-contact-info__row-value a {
        color: rgba(255,255,255,0.85);
        text-decoration: none;
    }
    .vp-contact-info__row-value a:hover {
        color: var(--vp-primary);
    }
    @media (max-width: 575.98px) {
        .vp-contact-modal__dialog { border-radius: 12px; }
        .vp-contact-modal__header { padding: 18px 18px 12px; }
        .vp-contact-modal__body { padding: 6px 18px 18px; }
        .vp-contact-info { padding: 18px; }
    }

    /* === Modal Marcas — buscador + lista filtrable (pedido del cliente) === */
    .vp-brands-modal {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 10050;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 16px 16px;
        overflow-y: auto;
    }
    .vp-brands-modal.show { display: flex; }
    .vp-brands-modal__dialog {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 16px 48px rgba(15, 23, 42, 0.28);
        width: 100%;
        max-width: 560px;
        position: relative;
        overflow: hidden;
        animation: vp-brands-modal-in 0.22s ease-out;
    }
    @keyframes vp-brands-modal-in {
        from { opacity: 0; transform: translateY(-8px) scale(0.985); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .vp-brands-modal__close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        border: none;
        background: rgba(15, 23, 42, 0.06);
        color: var(--vp-text);
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }
    .vp-brands-modal__close:hover { background: rgba(15, 23, 42, 0.12); }
    .vp-brands-modal__header {
        padding: 24px 24px 12px;
        border-bottom: 1px solid var(--vp-border);
    }
    .vp-brands-modal__title {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: var(--vp-text);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .vp-brands-modal__title i.bi { color: var(--vp-primary); }
    .vp-brands-modal__sub {
        margin: 4px 0 0;
        font-size: 13px;
        color: var(--vp-text-muted, #6b7280);
    }
    .vp-brands-modal__searchbox {
        position: relative;
        padding: 14px 24px 8px;
        background: #ffffff;
    }
    .vp-brands-modal__searchbox i.bi {
        position: absolute;
        top: 50%;
        left: 38px;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 16px;
    }
    .vp-brands-modal__searchbox input {
        width: 100%;
        padding: 10px 12px 10px 38px;
        border: 1px solid var(--vp-border);
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        background: #f9fafb;
    }
    .vp-brands-modal__searchbox input:focus {
        border-color: var(--vp-primary);
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.18);
        background: #ffffff;
    }
    .vp-brands-modal__body {
        padding: 8px 12px 18px;
        max-height: 60vh;
        overflow-y: auto;
    }
    .vp-brands-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .vp-brands-empty {
        text-align: center;
        color: #6b7280;
        padding: 32px 12px;
        margin: 0;
        font-size: 14px;
    }
    .vp-brands-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 8px;
        color: var(--vp-text);
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .vp-brands-item:hover {
        background: rgba(131, 191, 44, 0.10);
        color: var(--vp-text);
    }
    .vp-brands-item.active {
        background: rgba(131, 191, 44, 0.18);
        color: var(--vp-primary);
        font-weight: 700;
    }
    .vp-brands-item i.bi {
        color: #9ca3af;
        font-size: 14px;
    }
    .vp-brands-item.active i.bi {
        color: var(--vp-primary);
    }
    @media (max-width: 575.98px) {
        .vp-brands-modal { padding: 20px 12px; }
        .vp-brands-modal__dialog { border-radius: 12px; }
        .vp-brands-modal__header { padding: 18px 18px 10px; }
        .vp-brands-modal__searchbox { padding: 12px 18px 6px; }
        .vp-brands-modal__searchbox i.bi { left: 32px; }
        .vp-brands-modal__body { padding: 6px 8px 14px; }
    }

    /* === Cuenta dropdown — ocultar fila "App móvil" completa ===
       Estructura del Cuenta dropdown:
         .dropdown-cart-total
           > .vp-myaccount-link (inyectado por JS, link "Mi cuenta")
           > .d-flex (correo + logout link con bi-power)
           > .d-flex (label "App móvil" + link con bi-phone)
       Ocultamos el segundo .d-flex (el que contiene bi-phone).
       Selectores específicos ÷ .dropdown-cart-total para no impactar
       al padre .dropdown-cart-total (que también tiene .d-flex). */
    .header-middle .dropdown-cart-total > .d-flex:has(.bi-phone) {
        display: none !important;
    }
    /* Link "Mi cuenta" inyectado por JS en el dropdown de Cuenta logueado. */
    .header-middle .dropdown-cart-total .vp-myaccount-link {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 6px !important;
        background: #f3f4f6 !important;
        color: var(--vp-text) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: background 0.15s ease;
    }
    .header-middle .dropdown-cart-total .vp-myaccount-link:hover {
        background: rgba(131, 191, 44, 0.12) !important;
        color: var(--vp-primary) !important;
        text-decoration: none !important;
    }
    .header-middle .dropdown-cart-total .vp-myaccount-link i.bi {
        font-size: 18px !important;
    }

    /* === Detail cart page (/ecommerce/detail_cart) ===
       Estilamos la tabla de productos del carrito + form Tipo comprobante.
       Antes: filas 190px de alto (imagen 150px gigante), inputs muy chicos.
       Ahora: filas ~96px, imagen 80x80, inputs cómodos. */

    /* Imágenes de productos en el detail_cart — máx 80px */
    body main .cart-row img, body main .cart-table img,
    body main .cart-product img,
    body main [class*="cart"] img.product-image,
    body main table.cart-table img,
    body main table tbody tr td img[src*="/storage/uploads/items/"] {
        max-width: 80px !important;
        max-height: 80px !important;
        width: 80px !important;
        height: 80px !important;
        object-fit: contain !important;
    }
    /* Limitar también la <figure> contenedora (Porto le pone min-height:180px
       lo que ignora nuestro height:80px). Reseteamos min-height a 0. */
    body main table tbody tr td figure,
    body main table tbody tr td .product-image-container,
    body main table tbody tr td > .product-thumbnail {
        max-height: 80px !important;
        height: 80px !important;
        min-height: 0 !important;
        width: 80px !important;
        max-width: 80px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 1 / 1 !important;
    }
    /* Filas de la tabla del carrito más compactas (vs 204px → ~104px) */
    body main table tbody tr td {
        padding: 12px 16px !important;
        vertical-align: middle !important;
        height: auto !important;
    }
    body main table tbody tr {
        height: auto !important;
        max-height: 110px;
    }
    /* Form "Tipo de comprobante" — inputs cómodos con buen tamaño */
    body main .voucher-form label,
    body main .checkout-form label,
    body main .form-group label,
    body main label {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--vp-text) !important;
        margin-bottom: 6px !important;
    }
    body main .voucher-form input,
    body main .voucher-form select,
    body main .voucher-form textarea,
    body main .checkout-form input,
    body main .checkout-form select,
    body main .form-group input.form-control,
    body main .form-group select.form-control,
    body main #form-checkout input,
    body main #form-checkout select,
    body main main input.form-control,
    body main main select.form-control {
        font-size: 14px !important;
        padding: 10px 14px !important;
        height: 42px !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        box-shadow: none !important;
        line-height: 1.4 !important;
        color: var(--vp-text) !important;
    }
    body main input:focus:not(.ec-cat-body-search__input),
    body main select:focus,
    body main textarea:focus {
        border-color: var(--vp-primary) !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.15) !important;
    }
    /* Separar la nav de categorías (CAMARAS GRABADORES…) del header sticky */
    body main + .container .vp-cats-section,
    body main .container.first-element,
    body main > .container:first-of-type {
        margin-top: 18px;
    }

    /* === Footer en armonía con el tema verde_pulse ===
       Porto deja el footer con colores azules viejos (Contáctanos blue tag,
       widget titles oscuros). Lo realineamos al verde_pulse: bg sutil, font
       Poppins, títulos en var(--vp-text), sección Contáctanos en verde. */
    footer, .footer, .site-footer {
        background: #ffffff !important;
        border-top: 1px solid var(--vp-border) !important;
        padding: 32px 0 16px !important;
        color: var(--vp-text-muted) !important;
        font-family: 'Poppins', -apple-system, sans-serif !important;
    }
    footer *, .footer * {
        font-family: 'Poppins', -apple-system, sans-serif !important;
    }
    /* Títulos de secciones del footer */
    footer h4.widget-title, footer h3.widget-title, footer .widget-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
        text-transform: none !important;
        letter-spacing: 0.4px !important;
        margin-bottom: 14px !important;
        position: relative;
        padding-bottom: 8px;
        border-bottom: none !important;
    }
    footer h4.widget-title::after, footer .widget-title::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 36px;
        height: 2px;
        background: var(--vp-primary);
        border-radius: 2px;
    }
    /* "Contáctanos" en el footer: en Porto es un tag azul (.footer-ribbon
       absolute). En Verde Pulse lo restilamos como el h2 "Categorías" — texto
       bold con underline verde. Scopeamos al selector específico que aplica
       el h2 ("ecommerce-footer-contact-heading") en vez de "footer h2"
       genérico para no estropear futuros h2 que se agreguen al footer. */
    .footer .ecommerce-footer-contact-heading {
        background: transparent !important;
        color: var(--vp-text) !important;
        padding: 0 0 10px 0 !important;
        border-radius: 0 !important;
        font-weight: 700 !important;
        font-size: 28px !important;
        text-transform: none !important;
        display: inline-block !important;
        position: relative !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
        top: auto !important;
        left: auto !important;
        min-width: 0 !important;
        font-family: 'Poppins', -apple-system, sans-serif !important;
    }
    .footer .ecommerce-footer-contact-heading::before {
        content: none !important;
        display: none !important;
    }
    .footer .ecommerce-footer-contact-heading::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 50px !important;
        height: 3px !important;
        background: var(--vp-primary) !important;
        border-radius: 2px !important;
    }
    footer a, .footer a, footer p, footer li {
        color: var(--vp-text-muted) !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
    footer a:hover {
        color: var(--vp-primary) !important;
        text-decoration: none !important;
    }
    /* === Iconos de redes sociales del footer (verde_pulse) ===
       Porto los pinta como cuadrados oscuros. Los alineamos al tema:
       círculos verdes, glifo blanco, hover un tono más oscuro. */
    .footer .social-icons {
        display: flex !important;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
    }
    .footer .social-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: var(--vp-primary) !important;
        color: #ffffff !important;
        font-size: 1.2rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        border: 0 !important;
        text-decoration: none !important;
        transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .footer .social-icon + .social-icon {
        margin-left: 0 !important;
    }
    .footer .social-icon i,
    .footer .social-icon i.bi {
        color: #ffffff !important;
    }
    .footer .social-icon:hover,
    .footer .social-icon:focus {
        background: var(--vp-primary) !important;
        filter: brightness(0.9);
        color: #ffffff !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    }
    .footer .social-icon:hover i,
    .footer .social-icon:focus i {
        color: #ffffff !important;
    }
    footer ul {
        list-style: none !important;
        padding-left: 0 !important;
    }
    footer ul li {
        padding: 3px 0;
    }
    /* Línea final de copyright más sutil */
    footer .footer-bottom, footer hr, footer .copyright {
        border-top: 1px solid var(--vp-border) !important;
        padding-top: 12px !important;
        margin-top: 18px !important;
        font-size: 12px !important;
        color: var(--vp-text-muted) !important;
    }

    /* === Layout: ocultar sidebar izquierda + grilla full-width 6 columnas ===
       master.blade.php arma el home con .col-lg-9 (productos) + .sidebar-home.col-lg-3
       (CATEGORIAS / banner). En este tenant el sidemenu queda vacío (no hay
       categorías), así que el .col-lg-3 deja un hueco blanco a la izquierda
       que rompe la simetría con la referencia ETSA.

       Solución: ocultamos .sidebar-home y expandimos .col-lg-9 a 100%,
       además forzamos la grilla a 6 columnas iguales sobreescribiendo el
       inline style="width:..." que pone list_products.blade.php (que respeta
       configuration_ecommerce.columns_virtual_store, pero el ancho del padre
       cambió, así que necesitamos !important).

       Scope: usamos selectores específicos (.row > .sidebar-home, .row-sm > div)
       para no afectar carrito/checkout u otras pantallas que usan col-lg-9. */
    .row > .sidebar-home,
    aside.sidebar-home.col-lg-3 {
        display: none !important;
    }
    .row > .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* === Detalle de producto: "Productos destacados" como banda inferior FIJA ===
       El widget "Productos destacados" venía en el sidebar derecho
       (sidebar_product_right → aside.sidebar-product). Con la regla global
       .row>.col-lg-9→100% se quedaba sin espacio y se SOLAPABA con el producto
       al hacer scroll. Solución (pedido del cliente): que quede fijo abajo,
       EXACTAMENTE como "Productos Relacionados" (.featured-section). Un script
       de este mismo tema (al final del archivo) saca el widget de la fila y lo
       re-inserta en .vp-destacados-strip, justo antes de .featured-section, y
       oculta "Productos Relacionados" si no hay ninguno. Aquí solo el estilo de
       esa banda + ocultar el sidebar/off-canvas ya vacío. Scope acotado a la
       página de producto (aside.sidebar-product / .vp-destacados-strip solo
       existen ahí). */
    aside.sidebar-product { display: none !important; }
    .sidebar-toggle, .sidebar-overlay { display: none !important; }
    .vp-destacados-strip { margin-top: 6px !important; margin-bottom: 12px !important; }
    /* La caja del widget deja de verse como tarjeta de sidebar: banda limpia */
    .vp-destacados-strip .ecommerce-featured-widget {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 10px 0 0 !important;
    }
    /* Título = encabezado de sección del tema (mismo acento verde que "Categorías") */
    .vp-destacados-strip .ecommerce-featured-widget .widget-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        color: var(--vp-text) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        border: none !important;
        border-left: 4px solid var(--vp-primary) !important;
        padding: 0 0 0 14px !important;
        margin: 6px 0 18px !important;
        line-height: 1.2 !important;
    }
    /* Lista: de columna vertical (sidebar) → grilla HORIZONTAL de 6 cards */
    .vp-destacados-strip .ecommerce-featured-list {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 16px !important;
        flex-direction: initial !important;
    }
    .vp-destacados-strip .ecommerce-featured-item { list-style: none !important; }
    /* Cada item → card vertical (imagen arriba, nombre, precio) estilo .vp-card */
    .vp-destacados-strip .ecommerce-featured-link {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        background: var(--vp-card-bg, #fff) !important;
        border: 1px solid var(--vp-border, #eef0f2) !important;
        border-radius: var(--vp-card-radius, 12px) !important;
        overflow: hidden !important;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
    }
    .vp-destacados-strip .ecommerce-featured-link:hover {
        background: var(--vp-card-bg, #fff) !important;
        border-color: var(--vp-primary) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .10) !important;
        transform: translateY(-3px) !important;
    }
    /* Imagen arriba, cuadrada, contenida */
    .vp-destacados-strip .ecommerce-featured-thumb {
        flex: none !important;
        width: 100% !important;
        height: 160px !important;
        background: #fff !important;
        border-radius: 0 !important;
        padding: 10px !important;
    }
    .vp-destacados-strip .ecommerce-featured-thumb img,
    .vp-destacados-strip .ecommerce-featured-thumb picture,
    .vp-destacados-strip .ecommerce-featured-thumb picture img {
        object-fit: contain !important;
    }
    /* Cuerpo: nombre + precio */
    .vp-destacados-strip .ecommerce-featured-body {
        padding: 10px 12px 14px !important;
        gap: 6px !important;
    }
    .vp-destacados-strip .ecommerce-featured-name {
        font-size: 13px !important;
        min-height: 34px !important;
        color: var(--vp-text, #1f2937) !important;
    }
    .vp-destacados-strip .ecommerce-featured-price {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #5e8a1e !important;
    }
    @media (max-width: 1199.98px) {
        .vp-destacados-strip .ecommerce-featured-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    }
    @media (max-width: 767.98px) {
        .vp-destacados-strip .ecommerce-featured-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
        .vp-destacados-strip .ecommerce-featured-thumb { height: 130px !important; }
        .vp-destacados-strip .ecommerce-featured-widget .widget-title { font-size: 19px !important; }
    }

    /* Container max-width — matchear EXACTO a ETSA (referencia visual).
       ETSA usa Bootstrap default container que capea en 1320px (xxl breakpoint).
       Medido en Chrome @ viewport 1512px: container=1320px, margen=96px c/lado.
       Porto sobreescribe con .container { max-width: 100% } y rompe esa proporción.
       Restauramos el valor estándar para que el demo se vea idéntico a ETSA en
       todos los viewports >= 1320px.

       Header/menu de Porto NO usa .container (usa .header-middle full-width),
       así que el header no se afecta. */
    main .container,
    main > .container,
    .main .container {
        max-width: 1320px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Grilla de productos del listado (.row.row-sm contiene list_products).
       NO forzamos un número fijo de columnas — el blade list_products.blade.php
       respeta configuration_ecommerce.columns_virtual_store y aplica
       width:20%, 25%, 33.33%, etc. via inline style. Solo agregamos padding
       horizontal entre items (8px). En mobile reducimos a 2 cols. */
    .row.row-sm {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    .row.row-sm > div[style*="width"] {
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    /* Mobile: 2 columnas siempre (legibilidad) */
    @media (max-width: 767.98px) {
        .row.row-sm > div[style*="width"] {
            width: 50% !important;
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }
    }

    /* === Nav principal del header (Inicio / Tienda / Ofertas / Contactos) ===
       Réplica EXACTA de ETSA. Medido en Chrome:
         · Link normal: padding 8px, br 4px, font 16px / 500, color #1f2937
         · Link active: bg rgba(26, 86, 219, 0.10) (azul translúcido), color black
         · Icono i.bi a la izquierda del label, gap 4-6px */
    .vp-mainnav {
        display: flex !important;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        /* flex 0 0 auto: usar ancho intrínseco, no shrinkear (sino header-center
           greedy nos squeeza a 0). Margin separa visualmente del logo. */
        flex: 0 0 auto !important;
        margin-left: 16px;
    }
    /* En tablet/mobile: ocultar el nav (Porto ya tiene su own mobile menu) */
    @media (max-width: 1199.98px) {
        .vp-mainnav { display: none !important; }
    }
    .vp-mainnav__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        color: var(--vp-text) !important;
        text-decoration: none !important;
        background: transparent;
        line-height: 1.2;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .vp-mainnav__link:hover {
        background: rgba(26, 86, 219, 0.06);
        color: var(--vp-text) !important;
        text-decoration: none !important;
    }
    .vp-mainnav__link.active {
        background: rgba(26, 86, 219, 0.10);
        color: #000000 !important;
    }
    .vp-mainnav__link i.bi {
        font-size: 17px;
        line-height: 1;
    }
    .vp-mainnav__link .vp-mainnav__icon-fire { color: #f97316; } /* Ofertas: llama naranja */
    .vp-mainnav__link.active .vp-mainnav__icon-fire { color: #f97316; }

    /* Cuenta / Carrito — botón pill con icono + label + badge.
       En el demo Porto el header-right ya tiene los iconos pero sin texto;
       agregamos un label "Cuenta" y "Carrito" + estilo ETSA via JS rewrap. */
    /* Selectores incluyen .login-link.vp-acct-link para sobrepasar el
       styling original de la clase login-link de Porto (uppercase, bg, etc.) */
    .vp-acct-link,
    .vp-cart-link,
    a.login-link.vp-acct-link,
    .header-middle a.login-link.vp-acct-link {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 12px !important;
        border-radius: 4px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        color: var(--vp-text) !important;
        text-decoration: none !important;
        background: transparent !important;
        background-color: transparent !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        transition: background 0.15s ease;
    }
    .vp-acct-link:hover,
    .vp-cart-link:hover,
    a.login-link.vp-acct-link:hover {
        background: rgba(26, 86, 219, 0.06) !important;
        background-color: rgba(26, 86, 219, 0.06) !important;
        text-decoration: none !important;
        color: var(--vp-text) !important;
    }
    .vp-acct-link i.bi, .vp-cart-link i.bi {
        font-size: 18px !important;
        line-height: 1 !important;
        color: inherit !important;
    }
    /* Pedido del cliente: alinear el acceso "Cuenta" del header con el menú y el
       carrito. Cuando el visitante NO tiene sesión, ese acceso es un enlace
       .login-link envuelto en .header-contact que traía fondo verde, padding
       vertical y un margin-top:5px; eso dejaba la cajita más alta y más abajo
       que las otras dos. La normalizamos para que las 3 queden a la misma altura
       (el recuadro gris lo aporta el .dropdown contenedor). */
    .header-middle .header-right .header-contact {
        background: transparent !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        height: 44px !important;
    }
    .header-middle .header-right .header-contact > a.login-link.vp-acct-link {
        margin-top: 0 !important;
    }
    .vp-acct-link span, .vp-cart-link span {
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-weight: 500 !important;
        color: inherit !important;
    }
    /* Badge rojo del carrito — réplica de Bootstrap rounded-pill bg-danger
       posicionada arriba a la derecha del icono. !important porque Porto
       resetea position de badges en .dropdown-toggle. */
    /* Badge: posicionado fuera del link top-right. `html body` para vencer
       la regla `.vp-cart-link span { color: inherit !important }` (línea ~2003)
       que hereda el color oscuro del padre al badge. */
    html body .vp-cart-badge,
    html body .vp-cart-link .vp-cart-badge,
    html body .vp-cart-link span.vp-cart-badge {
        position: absolute !important;
        top: -8px !important;
        right: -10px !important;
        background: rgb(220, 53, 69) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 0 0 2px #ffffff !important;
        pointer-events: none;
    }
    /* Orden visual: Cuenta primero, Carrito después (matchear ETSA).
       Los .vp-acct-link / .vp-cart-link están dentro de .dropdown (que es el
       flex item de .header-right). Usamos :has() para aplicar order al padre
       correcto. */
    .header-right { display: flex !important; align-items: center; gap: 4px; }
    .header-right > .dropdown:has(.vp-acct-link) { order: 1; }
    .header-right > .dropdown:has(.vp-cart-link) { order: 2; }

    /* === Botones del carrito (página /ecommerce/detail_cart) ===
       Aumentamos tamaño de los botones de pago y de las acciones del carrito.
       Usamos `html body` para ganar especificidad (los <button> tag necesitan
       appearance:none + alta especificidad porque Porto/Bootstrap pintan
       defaults muy fuerte). */

    /* Continuar Comprando + Limpiar Carrito.
       Los <a> están en .cart-table-container > table.cart-table > tfoot > tr >
       td > div.float-left|.float-right > a.btn.btn-outline-secondary[.btn-clear-cart].
       Cubrimos todas las variantes posibles y forzamos con `html body` + extra
       background/border para que el cambio sea evidente. */
    html body .cart-table-container a.btn,
    html body .cart-table-container a.btn-outline-secondary,
    html body .cart-table-container .btn.btn-outline-secondary,
    html body .cart-table-container a.btn-clear-cart,
    html body .cart-table-container .btn-clear-cart,
    html body .cart-table-container tfoot a.btn,
    html body .cart-table-container tfoot .btn,
    html body .cart-table-container .float-left a.btn,
    html body .cart-table-container .float-right a.btn,
    html body table.cart-table tfoot a.btn,
    html body table.cart-table tfoot a.btn-outline-secondary {
        padding: 10px 20px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        line-height: 1.3 !important;
        min-height: 40px !important;
        height: auto !important;
        min-width: 160px !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        color: var(--vp-text) !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    html body .cart-table-container a.btn:hover,
    html body .cart-table-container a.btn-outline-secondary:hover,
    html body .cart-table-container a.btn-clear-cart:hover {
        background-color: #f3f4f6 !important;
        border-color: #cbd5e1 !important;
        color: var(--vp-text) !important;
    }
    /* tfoot td tiene clearfix con float-left/float-right: padding vertical
       moderado para que los botones respiren sin verse desproporcionados. */
    html body .cart-table-container table.cart-table tfoot td {
        padding: 10px 8px !important;
    }

    /* Carrito escritorio: alinear columnas y evitar que nombre/stock se pisen.
       Scopeado al tema activo y a la primera tabla del checkout. */
    @media (min-width: 992px) {
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child {
            overflow: hidden !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart thead,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot {
            display: block !important;
            table-layout: auto !important;
            width: 100% !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart {
            margin-bottom: 0 !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart thead tr,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row {
            align-items: center !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) 95px 140px 95px 60px !important;
            width: 100% !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart thead tr::after {
            content: "" !important;
            display: block !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart th,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart td {
            box-sizing: border-box !important;
            display: block !important;
            min-width: 0 !important;
            vertical-align: middle !important;
            width: auto !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart thead th {
            padding: 12px 16px !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart th.price-col,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(2) {
            white-space: nowrap !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart th.qty-col,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(3) {
            text-align: center !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart thead th:nth-child(4),
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(4) {
            white-space: nowrap !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(5) {
            align-items: center !important;
            display: flex !important;
            justify-content: center !important;
            overflow: visible !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
            text-align: center !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(5) .btn.btn-outline-danger.btn-sm {
            align-items: center !important;
            appearance: none !important;
            background: #fef2f2 !important;
            border: 1px solid #fecaca !important;
            border-radius: 999px !important;
            box-shadow: 0 8px 18px rgba(220, 38, 38, 0.10) !important;
            color: #dc2626 !important;
            display: inline-flex !important;
            flex: 0 0 34px !important;
            font-size: 0 !important;
            height: 34px !important;
            justify-content: center !important;
            line-height: 1 !important;
            margin: 0 auto !important;
            max-width: 34px !important;
            min-height: 34px !important;
            min-width: 34px !important;
            overflow: hidden !important;
            padding: 0 !important;
            width: 34px !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(5) .btn.btn-outline-danger.btn-sm i {
            color: inherit !important;
            display: block !important;
            font-size: 13px !important;
            line-height: 1 !important;
            margin: 0 !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(5) .btn.btn-outline-danger.btn-sm:hover {
            background: #fee2e2 !important;
            border-color: #fca5a5 !important;
            color: #b91c1c !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col {
            align-items: center !important;
            column-gap: 12px !important;
            display: grid !important;
            grid-template-columns: 80px minmax(0, 1fr) !important;
            grid-template-rows: auto !important;
            justify-content: start !important;
            min-width: 0 !important;
            row-gap: 0 !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col .product-image-container,
        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col figure {
            grid-column: 1 !important;
            grid-row: 1 / span 2 !important;
            height: 80px !important;
            margin: 0 !important;
            max-height: 80px !important;
            max-width: 80px !important;
            width: 80px !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col img {
            height: 80px !important;
            max-height: 80px !important;
            max-width: 80px !important;
            width: 80px !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col .product-title {
            align-self: end !important;
            display: block !important;
            grid-column: 2 !important;
            grid-row: 1 !important;
            line-height: 1.28 !important;
            margin: 0 !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow: visible !important;
            width: 100% !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col .product-title a {
            display: block !important;
            max-width: 100% !important;
            overflow-wrap: anywhere !important;
            white-space: normal !important;
        }

        html body:has(#app .cart-mobile-sticky) #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row .cart-item-stock-info {
            align-self: start !important;
            display: block !important;
            grid-column: 2 !important;
            grid-row: 2 !important;
            margin-top: 2px !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow-wrap: anywhere !important;
            text-align: left !important;
            white-space: normal !important;
            width: 100% !important;
        }
    }

    /* Botones de pago dentro del summary (Pagar con VISA / EFECTIVO / YAPE / PLIN).
       Selector con html body + appearance reset para vencer styles user-agent
       de <button> y la especificidad de Bootstrap btn-sm. */
    html body .cart-summary .checkout-methods .btn,
    html body .cart-summary .checkout-methods button.btn,
    html body .cart-summary .checkout-methods .btn-block,
    html body .cart-summary .checkout-methods .btn-sm,
    html body .cart-summary .checkout-methods .btn.culqi,
    html body .cart-summary .checkout-methods .btn-payment-cash,
    html body .cart-summary .checkout-methods .btn-payment-yape,
    html body .checkout-methods .btn-payment-cash,
    html body .checkout-methods .btn-payment-yape,
    html body .checkout-methods .btn.culqi {
        appearance: none !important;
        -webkit-appearance: none !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        line-height: 1.3 !important;
        min-height: 42px !important;
        height: auto !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Pagar con VISA — verde primary del tema */
    html body .cart-summary .checkout-methods .btn.culqi,
    html body .checkout-methods .btn.culqi {
        background-color: var(--vp-primary) !important;
        border: 1px solid var(--vp-primary) !important;
        color: #ffffff !important;
    }
    html body .cart-summary .checkout-methods .btn.culqi:hover,
    html body .checkout-methods .btn.culqi:hover {
        background-color: #6da625 !important;
        border-color: #6da625 !important;
        color: #ffffff !important;
    }
    /* Pagar con EFECTIVO — blanco con borde, hover gris claro */
    html body .cart-summary .checkout-methods .btn-payment-cash,
    html body .checkout-methods .btn-payment-cash {
        background-color: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        color: var(--vp-text) !important;
    }
    html body .cart-summary .checkout-methods .btn-payment-cash:hover,
    html body .checkout-methods .btn-payment-cash:hover {
        background-color: #f3f4f6 !important;
        color: var(--vp-text) !important;
    }
    /* Pagar con YAPE — morado YAPE */
    html body .cart-summary .checkout-methods .btn-payment-yape,
    html body .checkout-methods .btn-payment-yape {
        background-color: #742F8B !important;
        border: 1px solid #742F8B !important;
        color: #ffffff !important;
    }
    html body .cart-summary .checkout-methods .btn-payment-yape:hover,
    html body .checkout-methods .btn-payment-yape:hover {
        background-color: #5b246e !important;
        border-color: #5b246e !important;
        color: #ffffff !important;
    }
    html body .cart-proof-upload {
        align-items: stretch !important;
        display: flex !important;
        gap: 8px !important;
        margin: 8px 0 0 !important;
        width: 100% !important;
    }
    html body .cart-proof-upload__button,
    html body .cart-proof-upload__name {
        align-items: center !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        min-height: 42px !important;
        padding: 9px 12px !important;
        line-height: 1.25 !important;
    }
    html body .cart-proof-upload__button {
        background: #ffffff !important;
        border: 1px solid var(--vp-primary) !important;
        color: var(--vp-text) !important;
        cursor: pointer !important;
        flex: 0 0 auto !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    html body .cart-proof-upload__name {
        background: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        color: var(--vp-text-muted) !important;
        flex: 1 1 auto !important;
        font-size: 12px !important;
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
    html body .checkout-section-eyebrow {
        color: var(--vp-secondary) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        text-transform: none !important;
    }
    html body .checkout-progress {
        background: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        margin: 16px 0 18px !important;
        padding: 8px !important;
    }
    html body .checkout-progress__step {
        align-items: center !important;
        appearance: none !important;
        background: #f8fafc !important;
        border: 1px solid transparent !important;
        border-radius: 9px !important;
        color: var(--vp-text-muted) !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        justify-content: center !important;
        min-height: 58px !important;
        padding: 8px 6px !important;
        text-align: center !important;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
        width: 100% !important;
    }
    html body .checkout-progress__step span {
        align-items: center !important;
        background: #e5e7eb !important;
        border-radius: 999px !important;
        color: var(--vp-text-muted) !important;
        display: inline-flex !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        height: 22px !important;
        justify-content: center !important;
        width: 22px !important;
    }
    html body .checkout-progress__step strong {
        color: inherit !important;
        font-size: 11.5px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        word-break: break-word !important;
    }
    html body .checkout-progress__step.is-active,
    html body .checkout-progress__step.is-complete {
        background: rgba(131, 191, 44, 0.08) !important;
        border-color: rgba(131, 191, 44, 0.35) !important;
        color: var(--vp-text) !important;
    }
    html body .checkout-progress__step.is-active span,
    html body .checkout-progress__step.is-complete span {
        background: var(--vp-primary) !important;
        color: #ffffff !important;
    }
    html body .checkout-document-card,
    html body .checkout-payment-card,
    html body .cart-history-card {
        margin-top: 18px !important;
    }
    html body .checkout-methods {
        text-align: left !important;
    }
    html body .checkout-methods__title {
        color: var(--vp-text) !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        margin: 14px 0 10px !important;
        text-transform: none !important;
    }
    html body .cart-payment-options {
        display: grid !important;
        gap: 10px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    html body .cart-payment-option {
        align-items: flex-start !important;
        appearance: none !important;
        background: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 10px !important;
        color: var(--vp-text) !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        justify-content: center !important;
        min-height: 78px !important;
        padding: 11px 12px !important;
        position: relative !important;
        text-align: left !important;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
        width: 100% !important;
    }
    html body .cart-payment-option i {
        color: var(--vp-secondary) !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }
    html body .cart-payment-option--yape i {
        color: #742F8B !important;
    }
    html body .cart-payment-option span {
        color: var(--vp-text) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }
    html body .cart-payment-option small {
        color: var(--vp-text-muted) !important;
        display: block !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }
    html body .cart-payment-option:hover,
    html body .cart-payment-option.is-selected {
        background: rgba(131, 191, 44, 0.08) !important;
        border-color: var(--vp-primary) !important;
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.14) !important;
        transform: translateY(-1px) !important;
    }
    html body .cart-payment-option__check {
        color: var(--vp-primary) !important;
        font-size: 16px !important;
        opacity: 0 !important;
        position: absolute !important;
        right: 10px !important;
        top: 10px !important;
        transform: scale(0.8) !important;
        transition: opacity 0.15s ease, transform 0.15s ease !important;
    }
    html body .cart-payment-option.is-selected .cart-payment-option__check {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    html body .checkout-methods.has-error .cart-payment-options {
        border: 1px solid rgba(220, 38, 38, 0.32) !important;
        border-radius: 12px !important;
        padding: 8px !important;
    }
    html body .checkout-methods.has-error .cart-payment-option:not(.is-selected) {
        border-color: rgba(220, 38, 38, 0.28) !important;
    }
    html body .cart-payment-error {
        color: #dc2626 !important;
        display: block !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        margin: -2px 0 10px !important;
    }
    html body .cart-payment-detail {
        background: #f8fafc !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 10px !important;
        margin: 10px 0 12px !important;
        padding: 12px !important;
    }
    html body .cart-payment-amount {
        flex-wrap: nowrap !important;
    }
    html body .cart-coupon {
        border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
        margin-top: 8px !important;
        padding-top: 10px !important;
    }
    html body .cart-coupon__toggle {
        align-items: center !important;
        appearance: none !important;
        background: #ffffff !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 10px !important;
        color: var(--vp-text) !important;
        cursor: pointer !important;
        display: flex !important;
        gap: 8px !important;
        justify-content: space-between !important;
        min-height: 42px !important;
        padding: 9px 11px !important;
        text-align: left !important;
        width: 100% !important;
    }
    html body .cart-coupon__toggle > span {
        align-items: center !important;
        display: inline-flex !important;
        gap: 7px !important;
        min-width: 0 !important;
    }
    html body .cart-coupon__toggle strong {
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }
    html body .cart-coupon__toggle small {
        color: #16a34a !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        margin-left: auto !important;
        white-space: nowrap !important;
    }
    html body .cart-coupon__chevron {
        color: var(--vp-text-muted) !important;
        flex: 0 0 auto !important;
        font-size: 13px !important;
        transition: transform 0.15s ease !important;
    }
    html body .cart-coupon__toggle.is-open .cart-coupon__chevron {
        transform: rotate(180deg) !important;
    }
    html body .cart-coupon__panel {
        padding-top: 10px !important;
    }
    html body .cart-coupon .btn {
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    html body .cart-confirm-payment {
        background: var(--vp-primary) !important;
        border-color: var(--vp-primary) !important;
        color: #ffffff !important;
        gap: 8px !important;
    }
    html body .cart-confirm-payment:disabled {
        background: #cbd5e1 !important;
        border-color: #cbd5e1 !important;
        color: #ffffff !important;
        cursor: not-allowed !important;
        transform: none !important;
    }
    html body .cart-quotation-separator {
        align-items: center !important;
        color: var(--vp-text-muted) !important;
        display: flex !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        gap: 10px !important;
        margin: 18px 0 10px !important;
        text-align: center !important;
    }
    html body .cart-quotation-separator::before,
    html body .cart-quotation-separator::after {
        background: var(--vp-border) !important;
        content: "" !important;
        flex: 1 1 auto !important;
        height: 1px !important;
    }
    html body .cart-history-card--below {
        margin-top: 22px !important;
    }
    html body .cart-history-whatsapp {
        align-items: center !important;
        border: 1px solid rgba(34, 197, 94, 0.35) !important;
        border-radius: 999px !important;
        color: #15803d !important;
        display: inline-flex !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        gap: 6px !important;
        justify-content: center !important;
        min-height: 34px !important;
        padding: 7px 12px !important;
        text-transform: none !important;
        white-space: nowrap !important;
    }
    html body .cart-history-whatsapp i {
        font-size: 14px !important;
        line-height: 1 !important;
    }
    html body .cart-mobile-sticky {
        display: none !important;
    }
    html body .swal-text,
    html body .swal2-content,
    html body .swal2-html-container {
        line-height: 1.45 !important;
        text-align: left !important;
        white-space: pre-line !important;
    }

    /* === Categorías horizontal carousel — réplica EXACTA de ETSA ===
       Medido en Chrome en etsaelectroshop.com:
         · Section title h2: 28.8px / 700 / #1f2937, con underline verde 50x3px
         · Slider: display:flex; gap:12px; overflow-x:auto; padding:8px 4px
         · Card normal: white bg, br 12px, padding 20px 16px,
                        shadow 0 3px 6px rgba(0,0,0,0.05), w~157px h~138px
         · Card active : bg #f0f8ff, border 2px solid #0071CD (azul secondary),
                        shadow 0 4px 12px rgba(0,0,0,0.15)
         · Icon: 40x40 img dentro de circle de 60x60
         · Nombre: H4 13px / 600 / uppercase / dark */
    .vp-cats-section {
        margin: 0 0 24px 0;
    }
    .vp-cats-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .vp-cats-title {
        font-size: 28.8px;
        font-weight: 700;
        color: var(--vp-text);
        margin: 0;
        position: relative;
        padding-bottom: 10px;
        line-height: 1.2;
    }
    .vp-cats-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background: var(--vp-primary);
        border-radius: 2px;
    }
    .vp-cats-slider {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        padding: 8px 4px;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.20) transparent;
    }
    .vp-cats-slider::-webkit-scrollbar { height: 6px; }
    .vp-cats-slider::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 3px;
    }
    .vp-cat-card {
        flex: 0 0 auto;
        min-width: 140px;
        max-width: 160px;
        background: #ffffff;
        border: 2px solid transparent;
        border-radius: 12px;
        padding: 20px 16px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.05);
        text-align: center;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
        text-decoration: none !important;
        color: var(--vp-text) !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        position: relative; /* para anclar el .vp-cat-subbadge */
    }
    /* Card de categoría con subcategorías: en lugar de un badge "+N",
       agregamos un caret-fold sutil en la esquina superior derecha que
       comunica "hay más adentro" con un símbolo limpio.
       data-has-sub="1" lo pone el JS cuando childCount > 0. */
    .vp-cat-card[data-has-sub="1"]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 22px;
        height: 22px;
        background:
            linear-gradient(135deg, transparent 50%, var(--vp-primary) 50%);
        border-top-right-radius: 12px;
        opacity: 0.85;
        transition: opacity 0.18s ease;
    }
    .vp-cat-card[data-has-sub="1"]::before {
        content: '\F285'; /* bi-chevron-right de Bootstrap Icons */
        font-family: "bootstrap-icons";
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 10px;
        font-weight: 700;
        color: #ffffff;
        line-height: 1;
        z-index: 2;
        pointer-events: none;
    }
    .vp-cat-card[data-has-sub="1"]:hover::after {
        opacity: 1;
    }
    .vp-cat-card.active[data-has-sub="1"]::after {
        background:
            linear-gradient(135deg, transparent 50%, var(--vp-secondary) 50%);
    }
    .vp-cat-card:hover {
        box-shadow: 0 6px 14px rgba(0,0,0,0.10);
        transform: translateY(-2px);
        text-decoration: none !important;
    }
    .vp-cat-card.active {
        background: #f0f8ff !important;
        border-color: var(--vp-secondary) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    .vp-cat-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: transparent;
        transition: background 0.18s ease;
    }
    .vp-cat-card.active .vp-cat-icon {
        background: rgba(0, 113, 205, 0.10);
    }
    .vp-cat-icon img {
        width: 40px !important;
        height: 40px !important;
        object-fit: contain !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    .vp-cat-icon i {
        font-size: 28px;
        color: var(--vp-text-muted);
    }
    .vp-cat-card.active .vp-cat-icon i {
        color: var(--vp-secondary);
    }
    .vp-cat-name {
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--vp-text) !important;
        text-transform: none;
        letter-spacing: 0.3px;
        line-height: 1.2;
        word-break: break-word;
    }

    /* Flechas del carrusel de categorías — solo aparecen cuando los chips
       desbordan el ancho visible (el JS pone .is-scrollable en el wrap) y
       se deshabilitan al llegar a cada extremo. */
    .vp-cats-sliderwrap {
        position: relative;
    }
    .vp-cats-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--vp-border);
        border-radius: 50%;
        background: #ffffff;
        color: var(--vp-text);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    }
    .vp-cats-sliderwrap.is-scrollable .vp-cats-arrow {
        display: inline-flex;
    }
    .vp-cats-arrow:hover {
        background: var(--vp-primary);
        border-color: var(--vp-primary);
        color: #ffffff;
    }
    .vp-cats-arrow:disabled {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
    }
    .vp-cats-arrow--left { left: -10px; }
    .vp-cats-arrow--right { right: -10px; }
    /* En móvil el dedo ya desliza los chips (snap táctil) — las flechas
       solo estorban, igual que el scrollbar que también va oculto ahí. */
    @media (max-width: 767.98px) {
        .vp-cats-sliderwrap .vp-cats-arrow {
            display: none !important;
        }
    }

    /* === Responsive: < 768px === */
    @media (max-width: 767.98px) {
        .vp-banner { flex-direction: column; align-items: flex-start; }
        .vp-banner__sucursal,
        .vp-banner__branch { width: 100%; text-align: center; }
        .vp-banner__branch { align-items: flex-start; flex-direction: column; }
        .vp-banner__branch-select { min-width: 0; }
        .vp-section-title, h1.section-title, h2.section-title { font-size: 18px; }
        .vp-cats-title { font-size: 22px; }
        .vp-cat-card { min-width: 120px; max-width: 130px; padding: 14px 10px; }
        .vp-cat-icon { width: 48px; height: 48px; }
        .vp-cat-icon img { width: 32px !important; height: 32px !important; }
        .vp-cat-name { font-size: 11px !important; }
        .product .product-title, .product-card-custom .product-name { font-size: 13px !important; }
        .product-price { font-size: 15px !important; }
    }

    /* === Card enriquecida (vp-card) — estilo ETSA exacto: imagen grande,
       badges flotantes, COD chip, título mayúsculas, stock pill, precio
       grande con tachado + descuento, selector cantidad, botones cart+eye === */
    .vp-card {
        background: #ffffff;
        border-radius: var(--vp-card-radius);
        box-shadow: var(--vp-card-shadow);
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
        height: 100%;
    }
    .vp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); }

    .vp-card__media {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #f3f4f6;
        overflow: hidden;
    }
    .vp-card__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Oferta badge — réplica del brillo de inventariobo/ofertas.php.
       Regla fuente: .product-badge-custom.badge-sale. Mantener este
       efecto solo dentro del tema Verde Pulse. */
    .vp-card__oferta {
        position: absolute; top: 10px; left: 10px; z-index: 3;
        background: linear-gradient(45deg, #ff4e50, #f9d423) !important;
        color: #ffffff !important;
        font-weight: bold !important;
        font-size: 10px !important;
        padding: 6px 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 0 8px rgba(255, 78, 80, 0.8);
        animation: vp-oferta-glow 1.5s infinite alternate, vp-oferta-shine 3s linear infinite;
        overflow: hidden;
    }
    @keyframes vp-oferta-glow {
        from {
            box-shadow: 0 0 5px rgba(255, 78, 80, 0.7), 0 0 10px rgba(249, 212, 35, 0.5);
            transform: scale(1);
        }

        to {
            box-shadow: 0 0 20px rgba(255, 78, 80, 1), 0 0 30px rgba(249, 212, 35, 1);
            transform: scale(1.1);
        }
    }
    @keyframes vp-oferta-shine {
        0% { background-position: -200px 0; }
        100% { background-position: 200px 0; }
    }

    .vp-card__stock {
        position: absolute; top: 12px; right: 12px; z-index: 3;
        background: #ef4444; color: #fff;
        border-radius: 9999px;
        width: 30px; height: 30px;
        display: flex; align-items: center; justify-content: center;
        font-weight: 700; font-size: 12px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    }
    .vp-card__stock.is-available { background: var(--vp-primary); }

    /* COD chip — réplica EXACTA de ETSA (.product-code-labelP).
       Medido en Chrome: bg #e9ecef (plomo claro), color #333333 (negro suave),
       padding 3px 8px, br 6px, font 12px / 500. */
    .vp-card__cod {
        position: absolute; bottom: 10px; left: 12px; z-index: 3;
        background: rgb(233, 236, 239) !important;
        color: rgb(51, 51, 51) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        letter-spacing: 0;
    }

    .vp-card__body { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

    .vp-card__title {
        font-size: 14px; font-weight: 600;
        color: var(--vp-text);
        text-transform: none;
        line-height: 1.3;
        margin: 0;
        min-height: 36px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .vp-card__stockline {
        display: flex; align-items: center; justify-content: space-between;
        font-size: 12px; color: var(--vp-text-muted);
    }
    .vp-card__stockline strong { color: var(--vp-text); font-weight: 600; }
    .vp-card__pill-disp {
        background: var(--vp-primary); color: #fff;
        padding: 3px 12px; border-radius: 6px;
        font-size: 11px; font-weight: 600;
        letter-spacing: 0.2px;
    }
    .vp-card__pill-disp.is-out {
        background: #f3f4f6; color: var(--vp-text-muted);
    }

    .vp-card__priceline {
        display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    }
    .vp-card__price {
        font-size: 18px; font-weight: 700;
        color: var(--vp-text);
        white-space: nowrap;
    }
    .vp-card__price-old {
        color: var(--vp-text-muted);
        font-size: 12px; text-decoration: line-through;
    }
    .vp-card__price-discount {
        background: var(--vp-primary); color: #fff;
        font-size: 11px; font-weight: 600;
        padding: 3px 8px; border-radius: 6px;
    }

    /* Quantity selector — réplica EXACTA de ETSA (.quantity-control-custom).
       Medido en Chrome:
         · Wrapper: d-flex / justify-content-center / gap 4.8px
         · Buttons (.btn-outline-secondary.btn-qty):
              w/h 32x32, br 50% (CIRCLES), border 1px solid #6c757d,
              color #6c757d, bg transparent, font 16px
         · Input  (.form-control-sm.text-center):
              w 45px, h 30px, centered text, white bg, color #212529 */
    .vp-card__qty {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        margin-top: 4px;
    }
    .vp-card__qty button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        border: 1px solid rgb(108, 117, 125) !important;
        background: transparent !important;
        border-radius: 50% !important;
        cursor: pointer;
        font-size: 16px !important;
        line-height: 1 !important;
        color: rgb(108, 117, 125) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
        flex: 0 0 auto;
    }
    .vp-card__qty button:hover {
        background: rgb(108, 117, 125) !important;
        color: #ffffff !important;
    }
    .vp-card__qty input {
        width: 45px !important;
        height: 30px !important;
        text-align: center !important;
        border: 1px solid rgb(222, 226, 230) !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        color: rgb(33, 37, 41) !important;
        background: #ffffff !important;
        padding: 0 !important;
        flex: 0 0 auto;
    }
    /* Esconder spinners nativos del number input para no romper el centrado */
    .vp-card__qty input::-webkit-outer-spin-button,
    .vp-card__qty input::-webkit-inner-spin-button {
        -webkit-appearance: none; margin: 0;
    }
    .vp-card__qty input[type="number"] { -moz-appearance: textfield; }

    .vp-card__actions {
        display: flex; gap: 8px; margin-top: auto;
    }
    .vp-card__btn-cart, .vp-card__btn-eye {
        flex: 1;
        height: 40px;
        border-radius: 8px;
        border: 0;
        cursor: pointer;
        font-size: 16px;
        display: inline-flex; align-items: center; justify-content: center;
        transition: background 0.15s ease, transform 0.10s ease;
    }
    .vp-card__btn-cart {
        background: var(--vp-primary); color: #fff;
    }
    .vp-card__btn-cart:hover { background: #6da625; transform: translateY(-1px); }
    .vp-card__btn-eye {
        background: #f3f4f6; color: var(--vp-text);
    }
    .vp-card__btn-eye:hover { background: #e5e7eb; }

    /* UX audit fixes: compact the fixed header spacing, keep mobile header
       controls inside the viewport and make horizontal category rails clean. */
    main.main {
        padding-top: 72px !important;
    }
    @media (max-width: 991.98px) {
        main.main {
            padding-top: 112px !important;
        }
    }
    .vp-banner {
        margin-bottom: 28px !important;
        margin-top: 14px !important;
    }
    .vp-banner + br {
        display: none !important;
    }
    main .row > .col-lg-9.mt-5,
    .main .row > .col-lg-9.mt-5 {
        margin-top: 16px !important;
    }
    .vp-cats-section {
        margin-bottom: 18px !important;
        margin-top: 20px !important;
    }
    .vp-cats-slider {
        -ms-overflow-style: none !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity;
    }
    .vp-cats-slider::-webkit-scrollbar {
        display: none !important;
    }
    .vp-cat-card {
        scroll-snap-align: start;
    }

    @media (max-width: 767.98px) {
        html,
        body {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
        main.main {
            padding-top: 116px !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-height: 44px !important;
            max-width: 108px !important;
        }
        .header-middle .header-center,
        .header-middle #header_bar,
        #header_bar {
            grid-column: 1 / -1 !important;
            margin: 0 !important;
            max-width: 100% !important;
            min-width: 0 !important;
            order: 3 !important;
            padding-right: 0 !important;
            width: 100% !important;
        }
        body:has(#app .cart-mobile-sticky) main.main {
            padding-top: 72px !important;
        }
        body:has(#app .cart-mobile-sticky) .header-middle .header-center,
        body:has(#app .cart-mobile-sticky) .header-middle #header_bar,
        body:has(#app .cart-mobile-sticky) #header_bar {
            display: none !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;
        }
        header.header input.search_input,
        header.header input.search_input.form-control,
        .header-middle input.search_input {
            height: 42px !important;
            max-width: 100% !important;
            min-width: 0 !important;
            width: 100% !important;
        }
        #header_bar .header-dropdown {
            position: relative !important;
        }
        #header_bar .header-dropdown .header-menu {
            background: #ffffff !important;
            border: 1px solid var(--vp-border) !important;
            border-radius: 10px !important;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14) !important;
            left: 0 !important;
            max-height: min(52vh, 300px) !important;
            max-width: 100% !important;
            min-width: 0 !important;
            opacity: 0 !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            pointer-events: none !important;
            position: absolute !important;
            right: 0 !important;
            top: calc(100% + 6px) !important;
            transform: translateY(4px) !important;
            transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease !important;
            visibility: hidden !important;
            width: auto !important;
            z-index: 1055 !important;
        }
        #header_bar .header-dropdown.vp-search-open .header-menu {
            opacity: 1 !important;
            pointer-events: auto !important;
            transform: translateY(0) !important;
            visibility: visible !important;
        }
        #header_bar .header-menu ul {
            list-style: none !important;
            margin: 0 !important;
            padding: 4px 0 !important;
        }
        #header_bar .header-menu li {
            border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
        }
        #header_bar .header-menu li:last-child {
            border-bottom: 0 !important;
        }
        #header_bar .header-menu a.d-flex {
            align-items: center !important;
            gap: 10px !important;
            padding: 10px 12px !important;
            text-decoration: none !important;
        }
        #header_bar .header-menu a.d-flex > .flex-grow-1 {
            align-items: center !important;
            display: flex !important;
            gap: 10px !important;
            min-width: 0 !important;
        }
        #header_bar .header-menu a.d-flex img {
            flex: 0 0 46px !important;
            height: 46px !important;
            max-width: 46px !important;
            object-fit: contain !important;
            width: 46px !important;
        }
        #header_bar .header-menu .search_title {
            color: var(--vp-text) !important;
            display: -webkit-box !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            line-height: 1.25 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 2 !important;
        }
        #header_bar .header-menu .search_price {
            color: var(--vp-secondary) !important;
            flex: 0 0 auto !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            white-space: nowrap !important;
        }
        /* Última fila del desplegable: "Ver todos los resultados de ..." */
        #header_bar .header-menu .ecommerce-search-all-item a.ecommerce-search-all {
            color: #5e8a1e !important;
            font-size: 12.5px !important;
            font-weight: 700 !important;
            padding: 11px 12px !important;
        }
        #header_bar .header-menu .ecommerce-search-all-item a.ecommerce-search-all:hover,
        #header_bar .header-menu .ecommerce-search-all-item a.ecommerce-search-all:focus {
            background: rgba(131, 191, 44, 0.12) !important;
            color: #4a6e16 !important;
        }
        #header_bar .header-menu .ecommerce-search-empty {
            color: var(--vp-muted, #6b7280) !important;
            font-size: 12.5px !important;
            padding: 11px 12px !important;
        }
        .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;
        }
        .mobile-menu-toggler {
            align-items: center !important;
            display: inline-flex !important;
            flex: 0 0 44px !important;
            height: 44px !important;
            justify-content: center !important;
            min-width: 44px !important;
            padding: 0 !important;
            width: 44px !important;
        }
        .vp-acct-link,
        .vp-cart-link,
        a.login-link.vp-acct-link,
        .header-middle a.login-link.vp-acct-link {
            height: 44px !important;
            justify-content: center !important;
            min-width: 44px !important;
            padding: 0 !important;
            width: 44px !important;
        }
        .vp-acct-link span:not(.vp-cart-badge),
        .vp-cart-link span:not(.vp-cart-badge) {
            display: none !important;
        }
        .vp-acct-link::before,
        a.login-link.vp-acct-link::before,
        .header-middle a.login-link.vp-acct-link::before {
            content: none !important;
            display: none !important;
        }
        .header-right > .dropdown:has(.vp-acct-link),
        .header-right > .dropdown:has(.vp-cart-link) {
            flex: 0 0 44px !important;
            max-width: 44px !important;
            min-width: 44px !important;
            overflow: visible !important;
            width: 44px !important;
        }
        html body .vp-cart-badge,
        html body .vp-cart-link .vp-cart-badge,
        html body .vp-cart-link span.vp-cart-badge {
            right: -6px !important;
            top: -6px !important;
        }
        .vp-banner {
            margin-bottom: 22px !important;
            margin-top: 12px !important;
            padding: 18px 16px !important;
        }
        .vp-cats-section {
            margin-bottom: 14px !important;
            margin-top: 14px !important;
        }
        .vp-cats-slider {
            -webkit-overflow-scrolling: touch !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 8px !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            padding: 6px 0 !important;
            scroll-snap-type: x mandatory !important;
        }
        main .row > .col-lg-9.mt-5,
        .main .row > .col-lg-9.mt-5 {
            margin-top: 12px !important;
        }
        body main + .container .vp-cats-section,
        body main .container.first-element,
        body main > .container:first-of-type {
            margin-top: 8px !important;
        }
        .vp-cat-card {
            flex: 0 0 calc((100% - 16px) / 3) !important;
            max-width: calc((100% - 16px) / 3) !important;
            min-height: 112px !important;
            min-width: calc((100% - 16px) / 3) !important;
            padding: 12px 6px !important;
            scroll-snap-align: start !important;
            width: calc((100% - 16px) / 3) !important;
        }
        .ecommerce-filters-bar__actions {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            justify-content: stretch !important;
        }
        .ecommerce-filters-bar__apply,
        .ecommerce-filters-bar__clear {
            justify-content: center !important;
            min-height: 40px !important;
            width: 100% !important;
        }
        .vp-card__title {
            -webkit-line-clamp: 3 !important;
            font-size: 12px !important;
            min-height: 50px !important;
        }
        .vp-card__body {
            padding: 12px 10px 10px !important;
        }
        .cart-table-container {
            max-width: 100% !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            overflow: visible !important;
            padding: 0 !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart,
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody,
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot {
            display: block !important;
            width: 100% !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart thead {
            display: none !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row {
            background: #ffffff !important;
            border: 1px solid var(--vp-border) !important;
            border-radius: 14px !important;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;
            display: grid !important;
            gap: 10px !important;
            grid-template-columns: 1fr !important;
            height: auto !important;
            margin: 0 0 14px !important;
            max-height: none !important;
            overflow: hidden !important;
            padding: 14px !important;
            position: relative !important;
            width: 100% !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td {
            border: 0 !important;
            display: flex !important;
            font-size: 13px !important;
            height: auto !important;
            justify-content: space-between !important;
            line-height: 1.35 !important;
            padding: 0 !important;
            text-align: left !important;
            vertical-align: middle !important;
            width: 100% !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col {
            align-items: center !important;
            display: grid !important;
            gap: 10px 12px !important;
            grid-template-columns: 82px minmax(0, 1fr) !important;
            justify-content: start !important;
            min-width: 0 !important;
            padding-right: 42px !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col .product-image-container,
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col figure {
            grid-column: 1 !important;
            grid-row: 1 / span 2 !important;
            height: 82px !important;
            max-height: 82px !important;
            max-width: 82px !important;
            width: 82px !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col img {
            height: 82px !important;
            max-height: 82px !important;
            max-width: 82px !important;
            width: 82px !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col .product-title {
            color: var(--vp-text) !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            grid-column: 2 !important;
            line-height: 1.25 !important;
            margin: 0 !important;
            max-width: 100% !important;
            min-height: 0 !important;
            text-align: left !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td.product-col .product-title a {
            color: inherit !important;
            display: -webkit-box !important;
            overflow: hidden !important;
            text-decoration: none !important;
            -webkit-box-orient: vertical !important;
            -webkit-line-clamp: 2 !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row .cart-item-stock-info {
            font-size: 12px !important;
            grid-column: 2 !important;
            margin: 0 !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(2),
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(3),
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(4) {
            align-items: center !important;
            border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
            color: var(--vp-text) !important;
            padding-top: 10px !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(2)::before {
            color: var(--vp-text-muted) !important;
            content: "Precio";
            font-weight: 600 !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(3)::before {
            color: var(--vp-text-muted) !important;
            content: "Cantidad";
            font-weight: 600 !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(4)::before {
            color: var(--vp-text-muted) !important;
            content: "Subtotal";
            font-weight: 600 !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child .custom-quantity-field {
            display: inline-flex !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(5) {
            position: absolute !important;
            right: 12px !important;
            top: 12px !important;
            width: auto !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tbody tr.product-row td:nth-child(5) .btn {
            align-items: center !important;
            border-radius: 999px !important;
            display: inline-flex !important;
            height: 34px !important;
            justify-content: center !important;
            min-width: 34px !important;
            padding: 0 !important;
            width: 34px !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot,
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot tr,
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot td {
            border: 0 !important;
            display: block !important;
            padding: 0 !important;
            width: 100% !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot td.clearfix {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot .float-left,
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot .float-right {
            display: block !important;
            float: none !important;
            margin: 0 !important;
            width: 100% !important;
        }
        html body .cart-proof-upload {
            flex-direction: column !important;
        }
        html body .cart-proof-upload__button,
        html body .cart-proof-upload__name {
            width: 100% !important;
        }
        #app > .col-lg-8 > .cart-table-container:first-child table.table-cart tfoot a.btn {
            margin: 0 !important;
            min-width: 0 !important;
            width: 100% !important;
        }
        .cart-table-container:has(.delivery-options),
        .cart-summary {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }
        .delivery-options {
            padding: 0 !important;
        }
        .delivery-options > .d-flex {
            align-items: stretch !important;
            flex-direction: column !important;
            gap: 10px !important;
            justify-content: flex-start !important;
        }
        .delivery-options .form-check {
            align-items: center !important;
            border: 1px solid var(--vp-border) !important;
            border-radius: 10px !important;
            display: flex !important;
            gap: 8px !important;
            margin: 0 !important;
            min-width: 0 !important;
            padding: 11px 12px !important;
            width: 100% !important;
        }
        .delivery-options .form-check-input {
            flex: 0 0 auto !important;
            margin: 0 !important;
            position: static !important;
        }
        .delivery-options .form-check-label {
            align-items: center !important;
            display: inline-flex !important;
            gap: 6px !important;
            line-height: 1.25 !important;
            margin: 0 !important;
            min-width: 0 !important;
            white-space: normal !important;
        }
        html body:has(#app .cart-mobile-sticky) #app#app {
            padding-bottom: 132px !important;
        }
        /* Respaldo para navegadores de celular SIN soporte de :has (Android/iOS
           viejos): el colchon de #app de arriba no aplica ahi, asi que reservamos
           el espacio con un margen en el bloque de pago (la ultima tarjeta del
           carrito en movil) para que la barra fija inferior NUNCA tape "Confirmar
           pago" ni "Solicitar cotizacion". En navegadores modernos no hace nada
           (ya tienen el colchon de #app), por eso va dentro de @supports not. */
        @supports not selector(:has(*)) {
            html body .checkout-payment-card {
                margin-bottom: 148px !important;
            }
        }
        html body .checkout-document-card,
        html body .checkout-payment-card,
        html body .cart-history-card {
            margin-top: 14px !important;
            padding: 22px 18px !important;
        }
        html body .checkout-progress {
            margin: 12px 0 14px !important;
            padding: 7px !important;
        }
        html body .checkout-progress__step {
            min-height: 54px !important;
            padding: 7px 4px !important;
        }
        html body .checkout-progress__step strong {
            font-size: 10.5px !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .checkout-methods .cart-payment-options,
        html body #app .checkout-payment-card .checkout-methods .cart-payment-options {
            gap: 8px !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            margin-bottom: 8px !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .checkout-methods .cart-payment-option,
        html body #app .checkout-payment-card .checkout-methods .cart-payment-option {
            align-items: center !important;
            display: grid !important;
            gap: 2px 7px !important;
            grid-template-columns: 26px minmax(0, 1fr) !important;
            grid-template-rows: auto auto !important;
            min-height: 68px !important;
            padding: 9px 7px !important;
            text-align: left !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .checkout-methods .cart-payment-option i:not(.cart-payment-option__check),
        html body #app .checkout-payment-card .checkout-methods .cart-payment-option i:not(.cart-payment-option__check) {
            align-items: center !important;
            display: inline-flex !important;
            font-size: 17px !important;
            grid-column: 1 !important;
            grid-row: 1 / span 2 !important;
            height: 26px !important;
            justify-content: center !important;
            width: 26px !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .checkout-methods .cart-payment-option span,
        html body #app .checkout-payment-card .checkout-methods .cart-payment-option span {
            font-size: 12.5px !important;
            grid-column: 2 !important;
            grid-row: 1 !important;
            line-height: 1.05 !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .checkout-methods .cart-payment-option small,
        html body #app .checkout-payment-card .checkout-methods .cart-payment-option small {
            font-size: 9.5px !important;
            grid-column: 2 !important;
            grid-row: 2 !important;
            line-height: 1.1 !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .checkout-methods .cart-payment-option__check,
        html body #app .checkout-payment-card .checkout-methods .cart-payment-option__check {
            position: absolute !important;
            right: 7px !important;
            top: 7px !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .cart-confirm-payment,
        html body #app .checkout-payment-card .cart-confirm-payment {
            margin-top: 10px !important;
            min-height: 46px !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .cart-confirm-payment:disabled,
        html body #app .checkout-payment-card .cart-confirm-payment:disabled {
            display: none !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .cart-quotation-separator,
        html body #app .checkout-payment-card .cart-quotation-separator {
            margin: 6px 0 !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .cart-quotation-separator span,
        html body #app .checkout-payment-card .cart-quotation-separator span {
            font-size: 11.5px !important;
        }
        html body:has(#app .cart-mobile-sticky) #app .checkout-payment-card .btn-quotation,
        html body #app .checkout-payment-card .btn-quotation {
            margin-top: 0 !important;
            min-height: 44px !important;
        }
        html body .cart-mobile-sticky {
            align-items: center !important;
            background: rgba(255, 255, 255, 0.98) !important;
            border-top: 1px solid var(--vp-border) !important;
            bottom: 0 !important;
            box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.14) !important;
            display: grid !important;
            gap: 12px !important;
            grid-template-columns: minmax(92px, auto) minmax(0, 1fr) !important;
            left: 0 !important;
            padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
            position: fixed !important;
            right: 0 !important;
            z-index: 1025 !important;
        }
        html body .cart-mobile-sticky__total {
            display: flex !important;
            flex-direction: column !important;
            gap: 1px !important;
            min-width: 0 !important;
        }
        html body .cart-mobile-sticky__total span {
            color: var(--vp-text-muted) !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
        }
        html body .cart-mobile-sticky__total strong {
            color: var(--vp-text) !important;
            font-size: 18px !important;
            font-weight: 800 !important;
            line-height: 1.2 !important;
            white-space: nowrap !important;
        }
        html body .cart-mobile-sticky button {
            align-items: center !important;
            background: var(--vp-primary) !important;
            border: 0 !important;
            border-radius: 10px !important;
            color: #ffffff !important;
            display: inline-flex !important;
            font-size: 14px !important;
            font-weight: 800 !important;
            justify-content: center !important;
            line-height: 1.15 !important;
            min-height: 46px !important;
            min-width: 0 !important;
            padding: 10px 18px !important;
            text-align: center !important;
            white-space: normal !important;
            width: 100% !important;
        }
        html body .cart-mobile-sticky.is-ready button {
            background: #0071CD !important;
        }
        body:has(#app .cart-mobile-sticky) .ws-flotante,
        body:has(#app .cart-mobile-sticky) #scroll-top {
            display: none !important;
        }
        .ws-flotante {
            background-size: 56px !important;
            bottom: 18px !important;
            height: 56px !important;
            right: 14px !important;
            width: 56px !important;
        }
        body:has(.cart-mobile-sticky) .ws-flotante {
            bottom: 92px !important;
        }
        #scroll-top {
            bottom: 214px !important;
        }
        html body .cart-summary .checkout-methods a[style],
        html body .cart-summary .checkout-methods .login-link {
            margin-left: 0 !important;
            max-width: 100% !important;
        }
        html body .cart-summary .checkout-methods img {
            height: auto !important;
            max-width: 100% !important;
        }
        footer .footer-bottom {
            align-items: center !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
            text-align: center !important;
        }
        footer .footer-bottom .d-flex.text-end {
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 10px !important;
            justify-content: center !important;
            margin-left: 0 !important;
            max-width: 100% !important;
            overflow: hidden !important;
            text-align: center !important;
            width: 100% !important;
        }
        footer .footer-bottom .d-flex.text-end a,
        footer .footer-bottom .footer-payments {
            max-width: 100% !important;
        }
        footer .footer-bottom .d-flex.text-end img {
            height: auto !important;
            max-height: 74px !important;
            max-width: min(100%, 330px) !important;
        }
    }

    /* === Hero / Home slider (Black Friday) ===
       Verde Pulse solamente. En PC se oculta por pedido del cliente; en
       mobile conserva el comportamiento original. No afecta .vp-banner
       (sucursal) ni otros owl-carousel del layout. */
    .home-slider.owl-carousel {
        width: 100vw !important;
        max-width: 100vw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
    }
    .home-slider.owl-carousel .home-slide {
        border-radius: 0 !important;
    }
    .home-slider.owl-carousel .slide-bg {
        min-height: 280px;
    }
    .home-slider.owl-carousel .home-slide-content .btn {
        align-items: center !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        min-height: 40px !important;
        min-width: 132px !important;
        padding: 0 16px !important;
        text-transform: none !important;
    }
    @media (min-width: 992px) {
        .home-slider.owl-carousel {
            display: none !important;
        }
        .home-slider.owl-carousel .slide-bg {
            min-height: 360px;
        }
    }

    /* Banner sucursal: que también respire al ancho del viewport pero con
       padding 32px lateral en desktop (no edge-to-edge total para mantener
       legibilidad del "SUCURSAL PRINCIPAL"). */
    .vp-banner {
        max-width: none !important;
        width: calc(100vw - 64px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    @media (max-width: 767.98px) {
        .vp-banner {
            width: calc(100vw - 24px) !important;
            margin-left: 12px !important;
            margin-right: 12px !important;
        }
    }

    /* === Grilla de productos en PC ===
       En este tema, desktop debe respetar la configuración "Columnas de
       productos" (configuration_ecommerce.columns_virtual_store). El partial
       list_products.blade.php ya escribe el ancho inline correcto para 2-6
       columnas y expone la clase ecommerce-product-col--N. Fijamos flex-basis
       para neutralizar reglas globales que convierten el ancho en auto. */
    @media (min-width: 1200px) {
        body .main .row.row-sm {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 0 !important;
            grid-template-columns: none !important;
        }
        body .main .row.row-sm > .ecommerce-product-col.ecommerce-product-col--2 {
            width: 50% !important;
            flex: 0 0 50% !important;
            max-width: 50% !important;
        }
        body .main .row.row-sm > .ecommerce-product-col.ecommerce-product-col--3 {
            width: 33.3333% !important;
            flex: 0 0 33.3333% !important;
            max-width: 33.3333% !important;
        }
        body .main .row.row-sm > .ecommerce-product-col.ecommerce-product-col--4 {
            width: 25% !important;
            flex: 0 0 25% !important;
            max-width: 25% !important;
        }
        body .main .row.row-sm > .ecommerce-product-col.ecommerce-product-col--5 {
            width: 20% !important;
            flex: 0 0 20% !important;
            max-width: 20% !important;
        }
        body .main .row.row-sm > .ecommerce-product-col.ecommerce-product-col--6 {
            width: 16.6667% !important;
            flex: 0 0 16.6667% !important;
            max-width: 16.6667% !important;
        }
    }
    @media (min-width: 768px) and (max-width: 1199.98px) {
        .row.row-sm > .ecommerce-product-col {
            width: 25% !important;
            flex: 0 0 25% !important;
            max-width: 25% !important;
        }
    }

    /* === Animación de cards de producto al entrar en viewport ===
       Pedido del cliente: que las ofertas/productos "salgan con animación".
       Aplicamos fade-in + slide-up cuando la card aparece, con stagger por
       :nth-child para que no entren todas a la vez. Solo en desktop para no
       molestar en mobile con scroll rápido. */
    @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
        .row.row-sm > .ecommerce-product-col {
            animation: vp-card-enter 0.5s ease-out both;
        }
        .row.row-sm > .ecommerce-product-col:nth-child(1)  { animation-delay: 0.00s; }
        .row.row-sm > .ecommerce-product-col:nth-child(2)  { animation-delay: 0.04s; }
        .row.row-sm > .ecommerce-product-col:nth-child(3)  { animation-delay: 0.08s; }
        .row.row-sm > .ecommerce-product-col:nth-child(4)  { animation-delay: 0.12s; }
        .row.row-sm > .ecommerce-product-col:nth-child(5)  { animation-delay: 0.16s; }
        .row.row-sm > .ecommerce-product-col:nth-child(6)  { animation-delay: 0.20s; }
        .row.row-sm > .ecommerce-product-col:nth-child(n+7) { animation-delay: 0.24s; }
    }
    @keyframes vp-card-enter {
        from {
            opacity: 0;
            transform: translateY(14px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hover suave sobre la card: pequeño lift + sombra (refuerza la
       sensación de interactividad de la sección Ofertas). */
    .row.row-sm > .ecommerce-product-col .product.product-style {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .row.row-sm > .ecommerce-product-col:hover .product.product-style {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(131, 191, 44, 0.18);
    }

    /* PC Verde Pulse: la card reescrita vive dentro del contenedor legacy
       .product.product-style. Visualmente debe existir una sola tarjeta, como
       en inventariobo: el host queda transparente y solo .vp-card mantiene
       fondo, radio y sombra. */
    @media (min-width: 992px) {
        body .main .row.row-sm > .ecommerce-product-col {
            padding: 8px !important;
            box-sizing: border-box !important;
        }
        body .main .row.row-sm > .ecommerce-product-col > .product.product-style.vp-rewritten-host {
            background: transparent !important;
            border: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            height: 100% !important;
            margin: 0 !important;
            overflow: visible !important;
            padding: 0 !important;
            transform: none !important;
            transition: none !important;
        }
        body .main .row.row-sm > .ecommerce-product-col:hover > .product.product-style.vp-rewritten-host {
            box-shadow: none !important;
            transform: none !important;
        }
        body .main .row.row-sm > .ecommerce-product-col > .product.product-style.vp-rewritten-host > .vp-card {
            background: #ffffff !important;
            border: 0 !important;
            border-radius: var(--vp-card-radius) !important;
            box-shadow: var(--vp-card-shadow) !important;
            height: 100% !important;
            margin: 0 !important;
        }
        body .main .row.row-sm > .ecommerce-product-col > .product.product-style.vp-rewritten-host > .vp-card .vp-card__media {
            background: #ffffff !important;
        }
    }

    /* PC Verde Pulse moderno: cuando el navegador soporta :has(), usamos
       una grilla real con gap de 16px como la referencia. El fallback flex
       de arriba queda para navegadores antiguos. */
    @media (min-width: 1200px) {
        @supports selector(.row:has(> .ecommerce-product-col)) {
            body .main .row.row-sm:has(> .ecommerce-product-col--2) {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 16px !important;
            }
            body .main .row.row-sm:has(> .ecommerce-product-col--3) {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 16px !important;
            }
            body .main .row.row-sm:has(> .ecommerce-product-col--4) {
                display: grid !important;
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                gap: 16px !important;
            }
            body .main .row.row-sm:has(> .ecommerce-product-col--5) {
                display: grid !important;
                grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
                gap: 16px !important;
            }
            body .main .row.row-sm:has(> .ecommerce-product-col--6) {
                display: grid !important;
                grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
                gap: 16px !important;
            }
            body .main .row.row-sm:has(> .ecommerce-product-col) > .ecommerce-product-col {
                flex: none !important;
                max-width: 100% !important;
                padding: 0 !important;
                width: 100% !important;
            }
        }
    }

    /* Banda de "Ofertas" — cuando el JS marca la sección con .vp-ofertas
       (ver markOfertasWrappers en este mismo blade), pulsa el heading. */
    .vp-section-title.vp-ofertas-active {
        animation: vp-section-pulse 1.4s ease-in-out 1;
    }
    @keyframes vp-section-pulse {
        0%   { color: var(--vp-text); }
        50%  { color: var(--vp-primary); }
        100% { color: var(--vp-text); }
    }

    /* === Pills de subcategorías en /ecommerce/category/<slug-padre> ===
       Aparece arriba de la grilla de productos cuando el tag activo tiene
       subcategorías. Permite al cliente filtrar a una sub específica con
       un click o ver el catálogo completo del padre con "Todo X". */
    .vp-subcat-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding: 14px 16px;
        margin: 12px 0 18px;
        background: linear-gradient(90deg, rgba(131, 191, 44, 0.06), rgba(0, 113, 205, 0.04));
        border: 1px solid var(--vp-border);
        border-radius: var(--vp-card-radius);
    }
    .vp-subcat-pills__label {
        font-size: 13px;
        color: var(--vp-text-muted, #6b7280);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 4px;
    }
    .vp-subcat-pills__label i.bi { color: var(--vp-primary); font-size: 15px; }
    .vp-subcat-pills__label strong { color: var(--vp-text); font-weight: 700; }
    .vp-subcat-pills__list {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .vp-subcat-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: #ffffff;
        border: 1px solid var(--vp-border);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 500;
        color: var(--vp-text);
        text-decoration: none !important;
        transition: all 0.16s ease;
        white-space: nowrap;
    }
    .vp-subcat-pill i.bi {
        font-size: 13px;
        color: #9ca3af;
    }
    .vp-subcat-pill:hover {
        background: rgba(131, 191, 44, 0.10);
        border-color: var(--vp-primary);
        color: var(--vp-text);
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(131, 191, 44, 0.18);
    }
    .vp-subcat-pill:hover i.bi { color: var(--vp-primary); }
    .vp-subcat-pill--active {
        background: var(--vp-primary);
        border-color: var(--vp-primary);
        color: #ffffff;
    }
    .vp-subcat-pill--active i.bi { color: #ffffff; }
    .vp-subcat-pill--active:hover {
        background: var(--vp-primary);
        color: #ffffff;
        transform: none;
    }
    @media (max-width: 575.98px) {
        .vp-subcat-pills { padding: 10px 12px; }
        .vp-subcat-pills__label { width: 100%; margin-bottom: 4px; }
    }

/* block 2 from verde_pulse_overrides */
/* ════════════════════════════════════════════════════════════════════
       Presentaciones + Filtros — Tema Verde Pulse
       ─────────────────────────────────────────────────────────────────
       El CSS base neutral (theme_overrides.blade.php para presentaciones,
       filters_bar.blade.php @@once para filtros) pinta todo en azul genérico
       #2563eb. Aquí lo repintamos con la paleta del tema (verde --vp-primary
       #83BF2C, secundario azul --vp-secondary, Poppins, radios y sombras del
       tema) y revivimos el hook body.theme-verde-pulse del partial base.

       Convención del tema: !important casi universal + selectores largos.
       Este archivo SOLO carga con tema verde → scope con body.theme-verde-pulse
       y/o selectores planos sin riesgo de colisión con otros temas.
       ════════════════════════════════════════════════════════════════════ */

    /* ─── (1) SELECTOR DE PRESENTACIONES ─────────────────────────────────
       Chips de detalle (.ec-presentation-option) y dropdown compacto
       (.ec-presentation-select). Deben combinar con los inputs/botones del
       tema: borde --vp-border, foco con anillo verde rgba(131,191,44,.18),
       chip elegido (is-selected) con borde+fondo verde suave. */

    body.theme-verde-pulse .ec-presentations,
    .ec-presentations {
        margin: 12px 0 16px !important;
    }
    body.theme-verde-pulse .ec-presentations__label,
    .ec-presentations__label {
        display: block !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        color: var(--vp-text) !important;
        margin-bottom: 8px !important;
        letter-spacing: 0.2px !important;
        text-transform: none !important;
    }

    /* Chips de detalle — radio pills tipo tarjeta del tema */
    body.theme-verde-pulse .ec-presentations--detail .ec-presentations__options,
    .ec-presentations--detail .ec-presentations__options {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    body.theme-verde-pulse .ec-presentations--detail .ec-presentation-option,
    .ec-presentations--detail .ec-presentation-option {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 10px !important;
        background: var(--vp-card-bg) !important;
        color: var(--vp-text) !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
    }
    body.theme-verde-pulse .ec-presentations--detail .ec-presentation-option:hover,
    .ec-presentations--detail .ec-presentation-option:hover {
        border-color: var(--vp-primary) !important;
        box-shadow: 0 4px 12px rgba(131, 191, 44, 0.12) !important;
    }
    /* Chip ELEGIDO — borde verde + fondo verde suave rgba(131,191,44,.10) */
    body.theme-verde-pulse .ec-presentations--detail .ec-presentation-option.is-selected,
    .ec-presentations--detail .ec-presentation-option.is-selected {
        border-color: var(--vp-primary) !important;
        background: rgba(131, 191, 44, 0.10) !important;
        box-shadow: inset 0 0 0 1px var(--vp-primary) !important;
    }
    /* El radio nativo acompaña el verde del tema (accent-color) */
    body.theme-verde-pulse .ec-presentations--detail .ec-presentation-option input[type="radio"],
    .ec-presentations--detail .ec-presentation-option input[type="radio"] {
        margin: 0 !important;
        vertical-align: middle !important;
        accent-color: var(--vp-primary) !important;
    }
    body.theme-verde-pulse .ec-presentations--detail .ec-presentation-option__name,
    .ec-presentations--detail .ec-presentation-option__name {
        font-weight: 600 !important;
        color: var(--vp-text) !important;
    }
    /* El precio resalta en verde primary, peso 700 (consistente con la card) */
    body.theme-verde-pulse .ec-presentations--detail .ec-presentation-option__price,
    .ec-presentations--detail .ec-presentation-option__price {
        font-weight: 700 !important;
        color: var(--vp-primary) !important;
        margin-left: auto !important;
        white-space: nowrap !important;
    }

    /* Dropdown compacto (tarjeta de listado + vista rápida) — ocupa el 100%
       del ancho de la card, mismo look que los inputs del tema */
    body.theme-verde-pulse .ec-presentations--card,
    .ec-presentations--card {
        margin: 8px 0 10px !important;
    }
    body.theme-verde-pulse .ec-presentation-select,
    .ec-presentation-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 9px 12px !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 8px !important;
        background: var(--vp-card-bg) !important;
        color: var(--vp-text) !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        appearance: auto !important;
    }
    body.theme-verde-pulse .ec-presentation-select:hover,
    .ec-presentation-select:hover {
        border-color: var(--vp-primary) !important;
    }
    body.theme-verde-pulse .ec-presentation-select:focus,
    .ec-presentation-select:focus {
        outline: none !important;
        border-color: var(--vp-primary) !important;
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.18) !important;
    }

    /* ─── (2) PANEL DE FILTROS (sidebar) ─────────────────────────────────
       El base lo deja azul #2563eb y nadie lo repinta en desktop. Lo
       convertimos en una tarjeta coherente con el tema: contenedor con
       --vp-card-radius (12px) + --vp-card-shadow, título e iconos en verde,
       selects/inputs con foco verde, botón Aplicar verde --vp-primary
       (hover #6da625) y enlace Limpiar acorde. */

    /* Tarjeta contenedora del sidebar de filtros */
    body.theme-verde-pulse .ecommerce-sidebar-filters,
    .ecommerce-sidebar-filters {
        background: var(--vp-card-bg) !important;
        border: 1px solid var(--vp-border) !important;
        border-top: 1px solid var(--vp-border) !important;
        border-radius: var(--vp-card-radius) !important;
        box-shadow: var(--vp-card-shadow) !important;
        padding: 16px 16px 18px !important;
        margin-top: 16px !important;
    }
    /* Título "Filtros" — peso fuerte, icono embudo verde */
    body.theme-verde-pulse .ecommerce-sidebar-filters__title,
    .ecommerce-sidebar-filters__title {
        color: var(--vp-text) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        margin: 0 0 14px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--vp-border) !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-transform: none !important;
    }
    body.theme-verde-pulse .ecommerce-sidebar-filters__title i.bi,
    .ecommerce-sidebar-filters__title i.bi {
        color: var(--vp-primary) !important;
    }

    /* Labels de cada grupo (Ordenar / Precio / Marca) */
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__label,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__label {
        color: var(--vp-text) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__label i.bi,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__label i.bi {
        color: var(--vp-primary) !important;
    }

    /* Selects e inputs de precio — look de input del tema + foco verde */
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__select,
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__price,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__select,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__price {
        background: var(--vp-card-bg) !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 8px !important;
        color: var(--vp-text) !important;
        height: 40px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        transition: border-color .15s ease, box-shadow .15s ease !important;
    }
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__select:hover,
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__price:hover,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__select:hover,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__price:hover {
        border-color: var(--vp-primary) !important;
    }
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__select:focus,
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__price:focus,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__select:focus,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__price:focus {
        outline: none !important;
        border-color: var(--vp-primary) !important;
        box-shadow: 0 0 0 3px rgba(131, 191, 44, 0.18) !important;
    }
    /* Separador "—" del rango de precio */
    body.theme-verde-pulse .ecommerce-filters-bar__dash,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__dash {
        color: var(--vp-text-muted) !important;
    }

    /* Botón Aplicar — verde primary, radio 8px de botón del tema, sombra
       verde rgba(131,191,44,.25); hover #6da625. Combina las reglas del
       hook revivido del base con las nuestras para ganarle en specificity. */
    body.theme-verde-pulse .ecommerce-filters-bar__apply,
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__apply,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__apply {
        background: var(--vp-primary) !important;
        border: 1px solid var(--vp-primary) !important;
        color: #ffffff !important;
        height: 42px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 12px rgba(131, 191, 44, 0.25) !important;
        transition: background .15s ease, border-color .15s ease, transform .10s ease !important;
    }
    body.theme-verde-pulse .ecommerce-filters-bar__apply:hover,
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__apply:hover,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__apply:hover {
        background: #6da625 !important;
        border-color: #6da625 !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
    }
    body.theme-verde-pulse .ecommerce-filters-bar__apply i.bi,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__apply i.bi {
        color: #ffffff !important;
    }

    /* Enlace Limpiar — outline neutral del tema, hover suave verde */
    body.theme-verde-pulse .ecommerce-filters-bar__clear,
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__clear,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__clear {
        background: var(--vp-card-bg) !important;
        border: 1px solid var(--vp-border) !important;
        border-radius: 8px !important;
        color: var(--vp-text-muted) !important;
        height: 42px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: background .15s ease, color .15s ease, border-color .15s ease !important;
    }
    body.theme-verde-pulse .ecommerce-filters-bar__clear:hover,
    body.theme-verde-pulse .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__clear:hover,
    .ecommerce-filters-bar--sidebar .ecommerce-filters-bar__clear:hover {
        background: rgba(131, 191, 44, 0.08) !important;
        border-color: var(--vp-primary) !important;
        color: var(--vp-text) !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;
    }