/* G�ller endast f�r sk�rmar 768px och st�rre */
@media (min-width: 768px) {
    .swipererbjudandePar1,
    .swipererbjudandeSol,
    .swipererbjudandeTillval {
        min-height: 500px; /* eller den h�jd du vill matcha med tillvals-swipern */
        display: flex;
        align-items: center;
    }

    .swiper-slide img {
        aspect-ratio: 1 / 1; /* Samma proportioner f�r alla bilder */
        object-fit: contain;
    }
}

@media (max-width: 768px) {
    .offer-steps {
        flex-direction: column;
        align-items: center;
    }

    .price-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .col.glasses,
    .col.price-info {
        align-items: center;
        text-align: center;
    }

        .col.price-info ul {
            text-align: left;
        }


    /* Fix container overflow on mobile - Bootstrap kolumner */
    .container {
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    .col, .col-md-4, .col-12 {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
    }

    /* Dölj HELA erbjudande-sektionen på mobil - inklusive alla rubriker och texter */
    .container.my-5:has(.swipererbjudandePar1) {
        display: none !important;
    }
    
    /* Fallback för äldre browsers */
    .swipererbjudandePar1,
    .swipererbjudandeSol,
    .swipererbjudandeTillval,
    .price-card,
    .offer-steps {
        display: none !important;
    }
    
    /* Dölj rubriker specifikt */
    h2:contains("Så fungerar vårt erbjudande"),
    h5:contains("Välj ditt första par"),
    h5:contains("Solglasögon på köpet"), 
    h5:contains("Uppgradera") {
        display: none !important;
    }
}