/* ==============================================
   TM24 NOVAChild – PDP Galerie: Thumbnails
   Modul: modules/product/gallery/gallery-thumbs.css
   Scope: body[data-page="2"] .product-gallery .js-gallery-thumbs
   Quelle: tm24-pdp-fix.css (Thumbnail-Bereich)
   UTF-8 ohne BOM
   ============================================== */

/* ---- Thumbnail-Container ---- */
body[data-page="2"] .js-gallery-thumbs,
body[data-page="2"] .gallery-thumbs,
body[data-page="2"] #gallery_preview,
body[data-page="2"] .product-thumbs {
    margin-top: 12px;
    padding: 0;
    overflow: hidden;
}

/* ---- Einzelne Thumbnails ---- */
body[data-page="2"] .js-gallery-thumbs .slick-slide,
body[data-page="2"] .gallery-thumbs .thumb-item,
body[data-page="2"] #gallery_preview li {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    opacity: .65;
    transition: opacity var(--speed), box-shadow var(--speed), transform var(--speed);
    margin: 0 4px;
    background: transparent !important;
    border: 2px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

body[data-page="2"] .js-gallery-thumbs .slick-slide:hover,
body[data-page="2"] .gallery-thumbs .thumb-item:hover,
body[data-page="2"] #gallery_preview li:hover {
    opacity: 1;
    transform: scale(1.04);
}

body[data-page="2"] .js-gallery-thumbs .slick-current,
body[data-page="2"] .gallery-thumbs .thumb-item.is-active,
body[data-page="2"] #gallery_preview li.slick-current {
    opacity: 1;
    border-color: var(--p, #2E2BCB) !important;
    box-shadow: 0 0 0 1px var(--p, #2E2BCB) !important;
}

/* ---- Thumbnail-Bilder ---- */
body[data-page="2"] .js-gallery-thumbs img,
body[data-page="2"] .gallery-thumbs img,
body[data-page="2"] #gallery_preview img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}