/* Für das Snippet: BD Variations - manueller Slider */

/*.sliderVariationsSmall  { margin-top:5px; display:flex; gap:3px }
.sliderVariationsSmall div { width:9%; height:0; padding-bottom:9%; overflow:hidden; font-size: 10px; color:#3e3e3d }

*/
.product_thumbnail.with_second_image {
        position: relative;
        width: 100%; /* Passt sich der Umgebung an */
        max-width: 100%; /* Verhindert, dass es zu groß wird */
        aspect-ratio: 350 / 375; /* Behält das Seitenverhältnis bei */
        overflow: hidden;
}
.product_thumbnail.with_second_image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block;
}


.product_thumbnail_background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
}

/* Der Wrapper, der das Produktbild enthält */
.product .product_thumbnail,
.product .woocommerce-LoopProduct-link {
    display:block;
    aspect-ratio:350 / 375;      /* Wunschformat: Quadrat; ggf. 4/3, 3/2 etc. */
    overflow:hidden;          /* Überschuss abschneiden */
}

/* Das eigentliche Bild soll die Fläche füllen */
.product .product_thumbnail img,
.product .woocommerce-LoopProduct-link img,
.product img.wp-post-image {
    width:100%;
    height:100%;
    object-fit: cover;        /* füllt die Box ohne Verzerrung */
    display:block;
}

/* Grundlayout der Leiste */
.sliderVariationsSmall{
    display:flex; align-items:center; gap:.4rem; margin-top:.5rem;
}
.sliderVariationsSmall.is-static .svs-arrow{ display:none; } /* bei =8 Varianten Pfeile ausblenden */

.svs-arrow{
    border:0; background:#f3f3f3; width:28px; height:28px; line-height:28px;
    border-radius:6px; cursor:pointer; user-select:none;
}
.svs-arrow:disabled{ opacity:.4; cursor:default; }
.svs-viewport{ flex:1 1 auto; overflow:hidden; }
.svs-track{
    display:flex; gap:.35rem; overflow-x:auto; scroll-behavior:smooth;
    -ms-overflow-style:none; scrollbar-width:none;
}
.svs-track::-webkit-scrollbar{ display:none; }
.svs-track.is-dragging{ cursor:grabbing; }

.svs-item{ flex:0 0 auto; width:30px; aspect-ratio:1/1; overflow:hidden; border-radius:0px; }
.svs-item img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Dein vorhandenes Hauptbild-Wrapper-Setup */
.product_thumbnail.with_second_image{
    position:relative; width:100%; max-width:100%; aspect-ratio:350/375; overflow:hidden;
}
.product_thumbnail.with_second_image img{
    width:100%; height:100%; object-fit:cover; display:block;
}
.product_thumbnail_background{ position:absolute; inset:0; background-size:cover; background-position:center; }

/* Optional: bessere Hitbox der Pfeile auf Touch */
@media (pointer: coarse){
    .svs-arrow{ width:36px; height:36px; line-height:36px; }
    .svs-item{ width:48px; }
}