/* =========================================================
   TM24 Shop Design – Artikelseite (PDP)
   v8.0.0 | 2026-02-22 | UTF-8
   ALLE SELEKTOREN 1:1 GEGEN ECHTES HTML GEPRUEFT

   Ladereihenfolge (Stand 22.02.):
     1. tm24-ui.css         (Design-Tokens)
     2. custom.css          (NOVAChild, 220K, hat PDP-Buttons mit !important)
     3. tm24-shop-design.css  ← DIESE DATEI
     4. tm24-ankauf-styles.css
     5. clear.css           (NOVA kompiliert, 518K, KEIN !important)
     6. NOVA custom.css     (leer)

   Da (5) und (6) NACH uns laden und KEIN !important nutzen,
   gewinnen unsere !important Regeln IMMER.
   custom.css (2) laedt VOR uns, hat aber passende Deklarationen.

   HTML (gemessen 22.02.):
   div.row.basket-form-inline
     div.col.col-sm-6.col-12   (Menge)
     div.col.col-sm-6.col-12   (Button)
       button.btn.js-cfg-validate.btn-primary.btn-block[name=inWarenkorb]
   ========================================================= */


/* ==========================================================
   0. GLOBALER GLOW / SHADOW KILLER
   ========================================================== */

body,
body.is-nova,
body[data-page],
html,
#wrapper,
#main-wrapper,
#content,
main,
.container,
.container-fluid,
.product-detail,
.product-detail.row,
#product-offer,
.product-info,
.product-gallery,
.product-buy,
#add-to-cart,
.product-info-inner,
footer,
#footer {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Focus-States */
body:focus-within,
body:focus,
*:focus-visible {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* Pseudo-elements die Glow erzeugen koennten */
body::before,
body::after,
html::before,
html::after,
#wrapper::before,
#wrapper::after,
#content::before,
#content::after,
#main-wrapper::before,
#main-wrapper::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   1. GALERIE
   ========================================================== */

.gallery-with-action,
.gallery-with-action-main,
.product-images,
.product-images .slick-list,
.product-images .slick-track {
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

.product-images .product-image,
.gallery-with-action img.product-image {
    max-height: 520px !important;
    width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.product-images .square.square-image {
    padding-bottom: 0 !important;
    height: auto !important;
}

.product-images .square.square-image .inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ==========================================================
   2. THUMBNAILS
   ========================================================== */

.product-detail-image-preview-bar .slick-slide {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 4px !important;
    cursor: pointer !important;
}

.product-detail-image-preview-bar .slick-slide:hover,
.product-detail-image-preview-bar .slick-current {
    border-color: #2E2BCB !important;
}


/* ==========================================================
   3. PRODUKTTITEL
   ========================================================== */

h1.product-title,
.product-headline h1,
#product-offer h1 {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    color: #111827 !important;
}


/* ==========================================================
   4. HERSTELLER
   ========================================================== */

#product-offer .product-manufacturer {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
}

#product-offer .product-manufacturer a {
    color: #6b7280 !important;
    text-decoration: none !important;
}


/* ==========================================================
   5. CLUTTER WEG
   ========================================================== */

/* Herstelleradresse + Verantwortliche Person */
.product-manufacturer-manufacturer,
.product-manufacturer-responsibleperson {
    display: none !important;
}

/* Container die die Herstellerinfos enthalten */
#product-offer .row:has(.product-manufacturer-manufacturer),
.tab-pane .row:has(.product-manufacturer-manufacturer) {
    display: none !important;
}

/* Artikelnr, GTIN, HAN */
#product-offer .product-sku,
#product-offer .product-ean,
#product-offer .product-han,
.product-info .product-sku,
.product-info .product-ean,
.product-info .product-han {
    display: none !important;
}

/* Kategorie dezenter */
.product-category {
    font-size: 12px !important;
    color: #6b7280 !important;
}

.product-category a {
    color: #2E2BCB !important;
    text-decoration: none !important;
}

/* SHORTDESC im product-info AUSBLENDEN */
#product-offer .shortdesc,
.product-info .shortdesc,
.product-info-inner>.shortdesc,
div.shortdesc[itemprop="description"] {
    display: none !important;
}


/* ==========================================================
   6. PREIS
   ========================================================== */

#product-offer .price_wrapper,
.product-info .price_wrapper {
    margin: 16px 0 !important;
    padding: 20px 0 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

#product-offer .price_wrapper .price,
#product-offer .price.h1,
.product-info .price.h1,
div.price.h1 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #2E2BCB !important;
}

#product-offer .price-note,
.product-info .price-note {
    font-size: 12px !important;
    color: #9ca3af !important;
}


/* ==========================================================
   7. WARENKORB-BUTTON LAYOUT
   
   ECHTES HTML:
   <div class="row basket-form-inline">
     <div class="col  col-sm-6 col-12">  Menge
     <div class="col  col-sm-6 col-12">  Button
       <button class="btn ... btn-primary btn-block" name="inWarenkorb">

   Bootstrap 4 cols nutzen flex: 0 0 50%, max-width: 50%
   Wir muessen BEIDES ueberschreiben.
   ========================================================== */

/* Container: Flexbox statt Bootstrap Grid */
.basket-form-inline.row,
.row.basket-form-inline,
#add-to-cart .basket-form-inline,
#add-to-cart .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ALLE cols innerhalb basket-form-inline: auto-width
   Wichtig: Sowohl flex ALS AUCH width UND max-width ueberschreiben! */
.basket-form-inline .col,
.basket-form-inline .col-12,
.basket-form-inline .col-sm-6,
.basket-form-inline [class*="col-"],
.basket-form-inline>div,
#add-to-cart .col,
#add-to-cart .col-sm-6,
#add-to-cart [class*="col-"] {
    flex: 0 0 auto !important;
    -webkit-flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mengen-Input kompakt */
#quantity-grp,
.product-buy .form-counter,
.product-buy .choose_quantity {
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

#quantity-grp input {
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border: none !important;
    width: 50px !important;
    box-shadow: none !important;
    outline: none !important;
}

#quantity-grp .btn,
#quantity-grp button {
    background: #f3f4f6 !important;
    border: none !important;
    color: #374151 !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
}

/* ------- BUTTON SELBST (KEIN all:unset mehr!) ------- */

/* Maximale Spezifizitaet: ID + Klasse + Attribut */
#add-to-cart button.btn-primary.btn-block[name="inWarenkorb"],
#product-offer button.btn-primary.btn-block[name="inWarenkorb"],
.product-buy button.btn-primary[name="inWarenkorb"],
button.btn.btn-primary.btn-block[name="inWarenkorb"],
button.btn.js-cfg-validate.btn-primary.btn-block,
.basket-form-inline .btn-primary,
#add-to-cart .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #2E2BCB !important;
    background-color: #2E2BCB !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    font-family: 'Figtree', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-shadow: 0 6px 20px rgba(46, 43, 203, 0.28) !important;
    -webkit-box-shadow: 0 6px 20px rgba(46, 43, 203, 0.28) !important;
    outline: none !important;
    text-decoration: none !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    overflow: visible !important;
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    float: none !important;
}

/* Hover */
#add-to-cart button.btn-primary.btn-block[name="inWarenkorb"]:hover,
#product-offer button.btn-primary[name="inWarenkorb"]:hover,
.product-buy button.btn-primary:hover,
button.btn.btn-primary.btn-block[name="inWarenkorb"]:hover,
.basket-form-inline .btn-primary:hover,
#add-to-cart .btn-primary:hover {
    background: #2321a8 !important;
    background-color: #2321a8 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 36px rgba(46, 43, 203, 0.38) !important;
    -webkit-box-shadow: 0 10px 36px rgba(46, 43, 203, 0.38) !important;
    transform: translateY(-1px) !important;
}

/* Focus */
#add-to-cart button.btn-primary:focus,
button.btn.btn-primary.btn-block[name="inWarenkorb"]:focus,
.basket-form-inline .btn-primary:focus {
    background: #2E2BCB !important;
    box-shadow: 0 0 0 3px rgba(46, 43, 203, 0.2) !important;
    outline: none !important;
}

/* Button-innere Elemente */
button[name="inWarenkorb"] i,
button[name="inWarenkorb"] .fas,
button[name="inWarenkorb"] .btn-basket-check,
button[name="inWarenkorb"] span {
    color: #ffffff !important;
}

/* btn-block Override: Erzwinge IMMER auto-width */
.btn-block[name="inWarenkorb"],
#add-to-cart .btn-block,
.product-buy .btn-block,
.basket-form-inline .btn-block {
    display: inline-flex !important;
    width: auto !important;
}

/* ::before auf btn-primary (NOVA Animation) entfernen */
.basket-form-inline .btn-primary::before,
#add-to-cart .btn-primary::before,
button[name="inWarenkorb"]::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   8. PAYPAL – Kompakt, kein Overflow
   ========================================================== */

#product-offer [id*="paypal"],
.product-buy [id*="paypal"] {
    transform: none !important;
    zoom: 1 !important;
    max-width: 180px !important;
}

.product-buy iframe {
    max-width: 100% !important;
}

#product-offer [data-pp-message],
.product-buy [data-pp-message] {
    max-width: 100% !important;
    margin-top: 12px !important;
}


/* ==========================================================
   9. LIEFERSTATUS
   ========================================================== */

.delivery-status .status-1 {
    color: #059669 !important;
    font-weight: 600 !important;
}


/* ==========================================================
   10. VARIANTEN
   ========================================================== */

.variation-wrapper .custom-select,
.variation-wrapper select {
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

.switch-variations .btn {
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.switch-variations .btn:hover {
    border-color: #2E2BCB !important;
    color: #2E2BCB !important;
}

.switch-variations .btn.active {
    border-color: #2E2BCB !important;
    background: #eeeeff !important;
    color: #2E2BCB !important;
}


/* ==========================================================
   11. TABS
   ========================================================== */

#product-tabs .nav-link {
    font-weight: 600 !important;
    color: #6b7280 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

#product-tabs .nav-link:hover {
    color: #2E2BCB !important;
}

#product-tabs .nav-link.active {
    color: #2E2BCB !important;
    border-bottom-color: #2E2BCB !important;
}


/* ==========================================================
   12. FRAGE ZUM ARTIKEL
   ========================================================== */

.question-on-item {
    font-size: 13px !important;
    color: #6b7280 !important;
}


/* ==========================================================
   13. RESPONSIVE
   ========================================================== */

@media (max-width: 991px) {

    h1.product-title,
    #product-offer h1 {
        font-size: 22px !important;
    }

    #product-offer .price.h1,
    div.price.h1 {
        font-size: 28px !important;
    }

    .basket-form-inline.row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .basket-form-inline .col,
    .basket-form-inline .col-sm-6,
    .basket-form-inline [class*="col-"],
    .basket-form-inline>div {
        width: 100% !important;
    }

    #add-to-cart button.btn-primary.btn-block[name="inWarenkorb"],
    .basket-form-inline .btn-primary {
        width: 100% !important;
    }
}

@media (max-width: 575px) {

    h1.product-title,
    #product-offer h1 {
        font-size: 20px !important;
    }

    #product-offer .price.h1,
    div.price.h1 {
        font-size: 24px !important;
    }
}