/* ==============================================
   TM24 NOVAChild – Produkt-Card: NUR das Bild
   Modul: modules/listing/product-card/product-card-image.css
   Scope: .productbox .square-image
   Quelle: custom.css Zeilen 430-484
   UTF-8 ohne BOM

   ZWECK DIESER DATEI:
   Wenn das Bild in der Produktkarte falsch aussieht
   → diese Datei prüfen. Nur diese.
   ============================================== */

/* ---- Bild-Container ---- */
.productbox .productbox-images.list-gallery {
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.productbox .productbox-image[role=button] {
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.productbox .productbox-image.square.square-image {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
}

/* ---- Inner-Wrapper ---- */
.productbox .square-image .inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: static !important;
}

/* ---- Das Bild selbst ---- */
.productbox .square-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: contain !important;
    display: block !important;
    margin: auto !important;
    transition: transform .4s cubic-bezier(.25, .46, .45, .94) !important;
}

/* ---- Hover: Bild leicht zoomen ---- */
.productbox:hover .square-image img {
    transform: scale(1.05) !important;
}

/* ---- Hover: Bildwechsel (first/second wrapper) ---- */
.productbox:hover .first-wrapper  { display: flex !important; opacity: 1 !important; visibility: visible !important; }
.productbox:hover .second-wrapper { display: none !important; }

/* ---- Mobil: Bilder kleiner ---- */
@media (max-width: 768px) {
    .productbox .square-image img {
        max-height: 220px !important;
    }
}