/* ===========================
   BASE
=========================== */

.schiefer-it-product-gallery {
    display: flex;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* ===========================
   LAYOUT
=========================== */

.position-bottom { flex-direction: column; }
.position-top { flex-direction: column-reverse; }

.position-right { flex-direction: row; }
.position-left  { flex-direction: row-reverse; }

/* ===========================
   MAIN SWIPER (STAGE)
=========================== */


.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}



.main-swiper {
    /*flex: 1;
    width: 100%;
    overflow: visible;*/ /* wichtig für shadows */
    width: 100%;
    height: 100%;
}

/* 🔥 FIX: feste Bühne → kein Springen */
.main-swiper .swiper-slide {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    visibility: hidden;
    /* height: 500px; */
}

.swiper-slide-active {
    visibility: visible !important;
}

/* ===========================
   IMAGE BOX (SHADOW SAFE)
=========================== */

.image-box {
    /*display: inline-block;*/
    padding: 12px; /* verhindert shadow clipping */
    /*box-sizing: border-box;*/
    width: 100%;
}

/* IMAGE */
.image-box img {
    display: block;

    /*max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;*/
    
    width: 100%;
    height: 100%;

    /*object-fit: contain;*/
    object-fit: cover;
    border-radius: inherit;
}

/* ===========================
   THUMBS
=========================== */

.thumb-swiper {
    /*width: 120px*/
    padding: 8px; /* verhindert shadow clipping */
    box-sizing: border-box;
    overflow: inherit !important;
}

/* horizontal thumbs */
.position-bottom .thumb-swiper,
.position-top .thumb-swiper {
    width: 100%;
}

/* spacing sauber lösen */
/*.thumb-swiper .swiper-wrapper {
    gap: 10px;
}*/

/*.thumb-swiper-wrapper {
    justify-content: center;
}*/

/* slide */
.thumb-swiper .swiper-slide {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* active */
.thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
}

/* image */
.thumb-swiper img {
    display: block;
    width: 100%;
    /*height: auto;*/
    border-radius: inherit;
}

/* ===========================
   VERTICAL THUMBS
=========================== */

.position-left .thumb-swiper,
.position-right .thumb-swiper {
    /*height: 500px;*/
    height: auto;
}

/* ===========================
   LIGHTBOX
=========================== */

.sg-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.sg-lightbox img {
    max-width: 90%;
    max-height: 90%;
}