/* ==========================================================================
   1. PRODUKTKATALOG / SHOP-SEITE (Bild & Hover)
   ========================================================================== */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce ul.products li.product .wp-block-woocommerce-product-image {
    border-radius: 16px !important;
    overflow: hidden !important;
    backface-visibility: hidden;
}

.woocommerce ul.products li.product a img,
.astra-shop-thumbnail-wrap img {
    border-radius: 16px !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
}

.woocommerce ul.products li.product a:hover img,
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   2. EINZELPRODUKTSEITE – HAUPTBILD
   ========================================================================== */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image {
    border-radius: 16px !important;
    overflow: hidden !important;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__wrapper .wp-post-image,
.zoomImg {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* ==========================================================================
   3. ASTRA FIRST IMAGE LARGE – MINIATURBILDER (RASTER)
   ========================================================================== */

/* Passt die Listenelemente und Bild-Wrapper an das spezifische Galerieraster von Astra an */
.woocommerce-product-gallery .flex-control-thumbs li,
.ast-product-gallery-layout-first-image-large .flex-control-thumbs li,
.ast-product-gallery-item,
.ast-qv-image-slide {
    border-radius: 12px !important;
    overflow: hidden !important;
    height: 140px !important; /* Legt die Höhe aller Bilder im Raster fest */
    display: block !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Erzwingt, dass die Bilder selbst die gesamte festgelegte Höhe ausfüllen, ohne gestreckt oder gestaucht zu werden */
.woocommerce-product-gallery .flex-control-thumbs li img,
.ast-product-gallery-layout-first-image-large .flex-control-thumbs li img,
.ast-product-gallery-item img,
.ast-qv-image-slide img,
.flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Schneidet die Bilder nahtlos auf die gleiche Höhe zu */
    object-position: center center !important; /* Zentriert das Bildmotiv */
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
}

/* Zoom-Effekt auf den Miniaturansichten beim Hover */
.woocommerce-product-gallery .flex-control-thumbs li:hover img,
.ast-product-gallery-item:hover img,
.ast-qv-image-slide:hover img {
    transform: scale(1.06) !important;
}

/* Markierung um das aktive/ausgewählte Bild */
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.ast-product-gallery-layout-first-image-large .flex-control-thumbs li img.flex-active,
.ast-product-gallery-item.active-thumb img {
    border: 2px solid var(--ast-global-color-0, #222222) !important;
    box-sizing: border-box !important;
}