/* =========================================
   TM24 PDP FIX — Nur Layout, kein Style
   Scope: body[data-page="2"] (Artikelseite)
   Datei: /templates/NOVAChild/tm24-pdp-fix.css
   Rollback: Einbindung aus header.tpl entfernen
   ========================================= */

/* ---- BASIS ---- */
body[data-page="2"] {
    font-size: 16px;
    line-height: 1.45;
}

/* ---- CONTAINER: nicht fullwidth ---- */
body[data-page="2"] .container,
body[data-page="2"] .container-lg,
body[data-page="2"] .container-xl,
body[data-page="2"] .container-fluid-xl {
    max-width: 1320px;
}

/* ---- GALERIE: kein 100vh / riesige Höhe ---- */
body[data-page="2"] .product-image,
body[data-page="2"] .product-image-wrapper,
body[data-page="2"] .product-gallery,
body[data-page="2"] .gallery,
body[data-page="2"] .slick-list,
body[data-page="2"] .slick-track {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

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

/* ---- THUMBNAILS: nicht überdimensioniert ---- */
body[data-page="2"] .product-thumbnails img,
body[data-page="2"] .gallery-thumbs img,
body[data-page="2"] .slick-thumb img,
body[data-page="2"] .thumbnail-container img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

/* ---- ÜBERSCHRIFT: nicht übergroß ---- */
body[data-page="2"] h1,
body[data-page="2"] .product-title {
    font-size: 26px;
    line-height: 1.2;
}

@media (max-width: 991px) {

    body[data-page="2"] h1,
    body[data-page="2"] .product-title {
        font-size: 20px;
    }
}

/* ---- BUYBOX / CTA: kein Überlappen ---- */
body[data-page="2"] .buybox,
body[data-page="2"] .product-buybox,
body[data-page="2"] .add-to-cart,
body[data-page="2"] .product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* ---- BUTTONS: normale Größe, kein Overflow ---- */
body[data-page="2"] .btn,
body[data-page="2"] button.btn,
body[data-page="2"] .btn-primary,
body[data-page="2"] .btn-add-to-cart {
    padding: 12px 20px;
    font-size: 15px;
    line-height: 1;
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- PAYPAL / EXPRESS CHECKOUT: kein scale/zoom ---- */
body[data-page="2"] .paypal-button,
body[data-page="2"] .payment-buttons,
body[data-page="2"] .express-checkout,
body[data-page="2"] [id*="paypal"],
body[data-page="2"] [class*="paypal"] {
    transform: none !important;
    zoom: 1 !important;
    max-width: 100%;
    overflow: hidden;
}

/* ---- CROSS-SELLING / SLIDER: Bilder begrenzt ---- */
body[data-page="2"] .product-slider img,
body[data-page="2"] .cross-selling img,
body[data-page="2"] .recommendations img,
body[data-page="2"] .also-bought img,
body[data-page="2"] .related-products img {
    max-height: 220px;
    object-fit: contain;
}

/* Slider-Karten: keine riesigen Abstände */
body[data-page="2"] .product-slider .productbox,
body[data-page="2"] .cross-selling .productbox,
body[data-page="2"] .recommendations .productbox {
    margin: 0;
}

/* ---- SLIDER-PFEILE: normal groß ---- */
body[data-page="2"] .slick-prev,
body[data-page="2"] .slick-next,
body[data-page="2"] .slider-prev,
body[data-page="2"] .slider-next {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
}

/* ---- MOBILE ---- */
@media (max-width: 991px) {

    body[data-page="2"] .btn,
    body[data-page="2"] .btn-primary,
    body[data-page="2"] .btn-add-to-cart {
        width: 100%;
        white-space: normal;
    }

    body[data-page="2"] .productdetail img,
    body[data-page="2"] .product-image img,
    body[data-page="2"] .gallery img,
    body[data-page="2"] #product-images img {
        max-height: 360px;
    }

    body[data-page="2"] h1,
    body[data-page="2"] .product-title {
        font-size: 20px;
    }
}