.outlet-dos-opciones {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        margin-top: 14px !important;
    }

    .outlet-dos-opciones .outlet-reserva-whatsapp {
        margin: 0 !important;
    }

    .outlet-reserva-whatsapp span {
        font-size: 13px !important;
    }

    .outlet-btn-ver-nuevo {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        align-self: flex-start !important;
        gap: 4px !important;
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 2px 0 !important;
        background: transparent !important;
        border: none !important;
        color: #0562a7 !important;
        font-family: inherit !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        text-align: left !important;
        text-decoration: none !important;
        transition: color 0.25s ease !important;
    }

    .outlet-btn-ver-nuevo:hover,
    .outlet-btn-ver-nuevo:focus {
        color: #033f75 !important;
        text-decoration: underline !important;
    }

    .outlet-text-mobile {
        display: none !important;
    }

    @media (max-width: 767px) {
        .outlet-text-desktop {
            display: none !important;
        }

        .outlet-text-mobile {
            display: inline !important;
        }
    }

    .outlet-bloque-precio {
        margin-top: 5px !important;
    }

    .outlet-con-tarjeta {
        font-family: 'Roboto', sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #E00321 !important;
        margin-top: 12px !important;
    }

    .outlet-con-tarjeta .outlet-con-tarjeta-precio {
        font-weight: 400 !important;
    }

    .outlet-cuotas-gris {
        font-family: 'Roboto', sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #888 !important;
        margin-top: -2px !important;
    }

    /* En mobile la columna de texto es angosta (la imagen ocupa ~50%), y "Con tarjeta xx% OFF
       $xxx.xxx" o las cuotas pueden llegar a pasar a una segunda línea, lo que corre el resto
       del contenido y termina desbordando la card. Achicamos un poco la fuente para que entren
       en una sola línea. */
    @media screen and (max-width: 767px) {
        .outlet-con-tarjeta {
            font-size: 12px !important;
        }

        .outlet-cuotas-gris {
            font-size: 11px !important;
        }

        .outlet-dos-opciones {
            margin-top: 4px !important;
        }
    }

    .outlet-cuotas-gris .outlet-cuotas-gris-cant {
        font-weight: 700 !important;
    }

    .outlet-b20-productData-nombre h3:last-child {
        font-size: 12px !important;
        margin-top: 5px !important;
    }

    /* Bloque de precio efectivo: mismas clases summer-sale-* que usa listador-box.php
       (ya definidas en stylesListadores.css), para que sea una réplica del listador normal. */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

    .summer-sale-container,
    .summer-sale-container *,
    .shipping-container,
    .shipping-container * {
        font-family: 'Roboto', sans-serif !important;
    }

    .mp-logo-img {
        width: 45px !important;
        height: auto !important;
    }

    @media screen and (min-width: 1281px) {
        .summer-sale-off-text { font-size: 16px !important; padding: 4px !important; }
        .summer-sale-efectivo { font-size: 11px !important; }
        .mp-logo-img { width: 70px !important; margin-right: 2px; }
        .summer-sale-precio { font-size: 28px !important; }
    }

    @media screen and (min-width: 1024px) and (max-width: 1280px) {
        .summer-sale-off-text { font-size: 13px !important; padding: 3px !important; }
        .summer-sale-efectivo { font-size: 9px !important; }
        .mp-logo-img { width: 55px !important; }
        .summer-sale-precio { font-size: 18px !important; }
    }

    @media screen and (max-width: 1023px) {
        .summer-sale-off-text { font-size: 11px !important; padding: 2px !important; }
        .summer-sale-efectivo { font-size: 7px !important; }
        .mp-logo-img { width: 40px !important; }
        .summer-sale-precio { font-size: 16px !important; }
    }

    @media screen and (max-width: 767px) {
        .summer-sale-date { font-size: 14px !important; padding: 2px 6px !important; }
        .summer-sale-off-text { font-size: 16px !important; padding: 4px !important; }
        .summer-sale-efectivo { font-size: 11px !important; }
        .mp-logo-img { width: 45px !important; }
        .summer-sale-precio { font-size: 22px !important; }
    }

    @media screen and (max-width: 480px) {
        .summer-sale-date { font-size: 12px !important; padding: 2px 4px !important; }
        .summer-sale-off-text { font-size: 14px !important; padding: 3px !important; }
        .summer-sale-efectivo { font-size: 9px !important; }
        .mp-logo-img { width: 50px !important; }
        .summer-sale-precio { font-size: 20px !important; }
    }

    @media screen and (max-width: 360px) {
        .summer-sale-date { font-size: 10px !important; padding: 1px 3px !important; }
        .summer-sale-off-text { font-size: 12px !important; padding: 2px !important; }
        .summer-sale-efectivo { font-size: 8px !important; }
        .mp-logo-img { width: 40px !important; }
        .summer-sale-precio { font-size: 17px !important; }
    }

    /* Overlay de "reservado": cubre toda la card (no solo la imagen), atenuándola. Al no cortar
       la propagación del click, tocar la card sigue abriendo WhatsApp (para consultar por el
       equipo reservado), pero tapa los links/botones de abajo para que no se puedan clickear. */
    .outlet-reservado-overlay {
        position: absolute;
        inset: 0;
        z-index: 20;
        background: rgba(255, 255, 255, 0.65);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .outlet-reservado-overlay span {
        background-color: #E00321;
        color: #fff;
        font-weight: 700;
        font-size: 20px;
        padding: 8px 24px;
        border-radius: 6px;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: box-shadow 0.2s ease;
    }

    /* El shadow de hover pasa del box entero al botón "RESERVADO": el box mantiene siempre su
       shadow normal (ni se saca ni cambia al hacer hover), y el que sí reacciona al hover es
       el cartel de RESERVADO, para que quede claro que eso es lo clickeable. */
    .outlet-nl-box.reservado:hover {
        box-shadow: 0 0 8px 0px #e7e7e7 !important;
    }

    .outlet-nl-box.reservado:hover .outlet-reservado-overlay span {
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.35) !important;
    }

    /* stylesListadores.css le pone a .outlet-nl-box un height:250px fijo (línea ~1610), y con
       dos tiers de precio el contenido ya no entra ahí. Por default usamos alto automático
       (siempre se ajusta al contenido, sin depender del stretch de la fila) para que en mobile
       -donde hay 1 sola card por fila- no se rompa ni se mezcle con la siguiente. */
    .outlet-nl-box {
        height: auto !important;
        align-items: stretch !important;
    }

    /* En desktop/tablet (más de 1 columna por fila) sí conviene igualar alturas entre cards:
       #contenedor_box ya tiene align-items:stretch, así que acá usamos 100% para que cada card
       ocupe el alto de la más alta de su fila. */
    @media screen and (min-width: 768px) {
        .outlet-nl-box {
            height: 100% !important;
        }
    }


    .outlet-b20-boxDatos {
        overflow: visible !important;
        height: auto !important;
    }