/* ==========================================================
   SINGLE PRODUCT – Mobile Layout
   Volgorde mobiel:
   1. Merk + Titel + Reviews  (sp-mobile-meta-top)
   2. Swipeable galerij        (sp-mobile-swiper)
   3. Prijs                    (product-price)
   4. Voorraad indicator       (stock-indicator-block)
   5. Qty + In winkelwagen     (add-to-cart-section)
   6. Betaalbadges             (product-payment-logos)
   7. USPs                     (delivery-guarantee-list)
   8. Omschrijving / Accordions(product-accordions)
   ========================================================== */

/* ----- DESKTOP defaults: verberg mobiel-only blokken ----- */
.sp-mobile-meta-top {
    display: none;
}

.sp-mobile-swiper {
    display: none;
}

/* ----- MOBIEL (< 768px) ----- */
@media (max-width: 768px) {

    /* --- Layout: flex column --- */
    .sp-layout {
        display: flex !important;
        flex-direction: column;
        gap: 0;
    }

    /* 1) Mobile meta (merk + titel + reviews) boven de foto */
    .sp-mobile-meta-top {
        display: block;
        order: 1;
        padding: 0 0 8px;
    }

    /* Ga Terug knop verbergen op mobiel */
    .product-breadcrumb-mobile {
        display: none !important;
    }

    /* Titel: meer ruimte eronder richting sterren */
    .sp-mobile-meta-top .product_title.entry-title {
        margin-bottom: 12px !important;
    }

    /* Reviews iets meer ruimte boven */
    .sp-mobile-meta-top .woocommerce-product-rating {
        margin-top: 5px !important;
    }

    /* 2) Afbeeldingskolom */
    .product-image-column {
        order: 2;
        margin-bottom: 12px !important;
    }

    /* Desktop galerij + thumbnails verbergen op mobiel */
    .sp-desktop-gallery {
        display: none !important;
    }

    .sp-desktop-thumbs {
        display: none !important;
    }

    /* Mobile swiper tonen */
    .sp-mobile-swiper {
        display: block;
    }

    /* 3) Rechter kolom */
    .product-right-column {
        order: 3;
        display: flex !important;
        flex-direction: column;
    }

    /* Desktop meta (merk+titel+reviews in rechterkolom) verbergen */
    .sp-desktop-meta {
        display: none !important;
    }

    /* Korte beschrijving verbergen op mobiel (zit in accordion) */
    .product-right-column .woocommerce-product-details__short-description {
        display: none !important;
    }

    /* --- Volgorde binnen product-right-column --- */
    .product-right-column .product-price          { order: 1; }
    .product-right-column .stock-indicator-block   { order: 2; margin-top: 8px; }
    .product-right-column .add-to-cart-section     { order: 3; }
    .product-right-column .delivery-guarantee-list { order: 5; }
    .product-right-column .product-accordions      { order: 6; }
}

/* ==========================================================
   MOBILE SWIPER – Touch-swipeable galerij met dots
   ========================================================== */

.sp-mobile-swiper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
}

.sp-swiper-track {
    display: flex;
    transition: transform 0.3s ease;
    will-change: transform;
    /* JS stelt transform in */
}

.sp-swiper-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.sp-swiper-img {
    display: block;
    width: 85%;
    max-width: 85%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Dots */
.sp-swiper-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
}

.sp-swiper-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #d1d5db;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.sp-swiper-dot.is-active {
    background: #be185d; /* pink-700 */
    transform: scale(1.25);
}