/* MOBILE-SPECIFIC REFINEMENTS */
@media (max-width: 900px) {

    /* 1. Al Costo Banner - More Compact */
    #alCostoBanner {
        padding: 15px 20px !important;
        margin-bottom: 15px !important;
    }

    #alCostoBanner h1 {
        font-size: 22px !important;
        margin-bottom: 5px !important;
    }

    #alCostoBanner p {
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* 2. Tighten Payment Section Spacing */
    .product-card .payment-section,
    [style*="MEDIOS DE PAGO"] {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Reduce gap between payment icons */
    [style*="Mercado Pago"] {
        margin: 0 5px 0 0 !important;
    }

    /* 3. Reduce margin between banner and title */
    #productosDestacadosTitle {
        margin-top: 5px !important;
    }

    /* Thin banner spacing */
    .thin-banner {
        margin-bottom: 8px !important;
    }
}