/* ==============================================
   TM24 NOVAChild – PDP: Galerie-Karte
   Modul: modules/product/gallery/gallery.css
   Scope: body[data-page="2"] .product-gallery
   Quelle: tm24-pdp-fix.css Zeilen 29-671
   UTF-8 ohne BOM

   EINZIGE ANLAUFSTELLE bei PDP-Galerie-Problemen.
   ============================================== */

/* ---- Galerie-Karte: hellblauer Hintergrund ---- */
body[data-page="2"] .product-gallery {
    background: #eef1ff !important;
    border: none !important;
    border-radius: 28px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 20px !important;
    overflow: hidden !important;
}

/* ---- Hauptbild ---- */
body[data-page="2"] .product-gallery .product-image,
body[data-page="2"] .product-gallery img.product-image {
    max-height: 520px;
    width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ---- Galerie-Wrapper / Slider-Container ---- */
body[data-page="2"] #gallery_wrapper,
body[data-page="2"] #gallery,
body[data-page="2"] .product-images,
body[data-page="2"] .product-images .slick-list,
body[data-page="2"] .product-images .slick-track {
    height: auto !important;
    min-height: 0 !important;
}

/* ---- Square-Container Fix ---- */
body[data-page="2"] #gallery .square.square-image,
body[data-page="2"] .product-images .square.square-image {
    padding-bottom: 0 !important;
    height: auto !important;
}

body[data-page="2"] #gallery .square.square-image .inner {
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Kein Rahmen / Kasten um das Bild ---- */
body[data-page="2"] .product-gallery .square,
body[data-page="2"] .product-gallery .square-image,
body[data-page="2"] .product-gallery .inner,
body[data-page="2"] .product-gallery .gallery-with-action,
body[data-page="2"] .product-gallery #image_wrapper,
body[data-page="2"] .product-gallery .gallery-with-action-main,
body[data-page="2"] .product-gallery .js-gallery-images,
body[data-page="2"] .product-gallery .product-image,
body[data-page="2"] .product-gallery .slick-slide,
body[data-page="2"] .product-gallery .slick-track,
body[data-page="2"] .product-gallery .slick-list {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body[data-page="2"] .product-gallery .product-detail-image-topbar,
body[data-page="2"] .product-gallery > .row,
body[data-page="2"] .product-gallery > div {
    background: transparent !important;
    border: none !important;
}

/* ---- Bilder immer sichtbar (Slick asynchron) ---- */
body[data-page="2"] #gallery,
body[data-page="2"] #gallery_wrapper,
body[data-page="2"] .product-images,
body[data-page="2"] .product-gallery {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body[data-page="2"] .product-images .slick-slide,
body[data-page="2"] .product-images .slick-track,
body[data-page="2"] .product-images .slick-list {
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
}

body[data-page="2"] .product-images .gallery-item,
body[data-page="2"] .product-images li,
body[data-page="2"] .product-images .item,
body[data-page="2"] #gallery li,
body[data-page="2"] #gallery .gallery-item {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

body[data-page="2"] #gallery img,
body[data-page="2"] .product-images img,
body[data-page="2"] .product-gallery img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    max-width: 100% !important;
    min-height: 40px !important;
}

/* ---- Square-Image Inner: nicht auf 0 hauteng ---- */
body[data-page="2"] .square.square-image .inner,
body[data-page="2"] .square .inner {
    position: relative !important;
    height: auto !important;
    min-height: 180px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

/* ---- Galerie-Bilder: kein Filter ---- */
body[data-page="2"] #gallery img,
body[data-page="2"] .product-images img,
body[data-page="2"] #gallery_wrapper img {
    -webkit-filter: none !important;
    filter: none !important;
    image-rendering: auto;
    object-fit: contain;
}

body[data-page="2"] #gallery .square img,
body[data-page="2"] #gallery .square-image img,
body[data-page="2"] .product-images .square img,
body[data-page="2"] .product-images .square-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 480px !important;
    object-fit: contain !important;
    transform: none !important;
    filter: none !important;
}

/* ---- Slick-Slide kein overflow clip ---- */
body[data-page="2"] .product-images .slick-slide {
    overflow: visible !important;
}

/* ---- Lightbox Zoom deaktivieren ---- */
body[data-page="2"] .product-gallery a.gallery-zoom img,
body[data-page="2"] .product-gallery .zoom img {
    transform: none !important;
    transition: none !important;
}

/* ---- Image Topbar (Wishlist) ---- */
body[data-page="2"] .product-detail-image-topbar { z-index: 6; }

/* ---- MOBIL ---- */
@media (max-width: 991px) {
    body[data-page="2"] .product-gallery {
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 16px;
    }
    body[data-page="2"] .product-gallery .product-image,
    body[data-page="2"] .product-gallery img.product-image {
        max-height: 340px;
    }
}

@media (max-width: 575px) {
    body[data-page="2"] .product-gallery {
        border-radius: 10px;
        padding: 10px;
    }
}