/*
Theme Name:   Grosconnection Child
Description:  GrosConnection Helau Shop Child Theme for WordPress 
Author:       Markus Steffen
Author URI:   https://grosconnection.de/
Template:     th-shop-mania
Version:      1.0.0
*/

.woocommerce table.shop_table td {
    padding: 0.8em 0px;
    vertical-align: middle;
    text-transform: none;
    border-color: #eaeaea;
    font-size: 16px;
    line-height: 23px;
    font-weight: 500;
}


.out-of-stock {
    color: #999;
    text-decoration: line-through;
}

/* Positioniert den Ausverkauft-Badge auf dem Produktbild */
.badge-out-of-stock {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #b30000;
    color: #fff;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 3px;
    z-index: 10;
    pointer-events: none;
}

/* Stellt sicher, dass das Produktbild relativ positioniert ist */
.woocommerce ul.products li.product {
    position: relative;
}

/* =========================================================
   Fix für .thunk-product-content: Titel-Umbruch & Preis-Abstand
   ========================================================= */

/* 1. Flexbox Container für automatischen vertikalen Fluss */
.thunk-product-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* 2. Produkttitel: Abschneiden (...) entfernen & mehrzeilig erlauben */
.thunk-product-content .woocommerce-loop-product__title,
.thunk-product-content h2 {
    white-space: normal !important;        /* Verhindert "..." und erlaubt Umbruch */
    text-overflow: clip !important;       /* Reines Abschneiden deaktivieren */
    overflow: visible !important;          /* Verhindert Überlappung/Clipping */
    height: auto !important;               /* Höhe flexibel je nach Textlänge */
    max-height: none !important;
    line-height: 1.3 !important;           /* Angenehmer Zeilenabstand */
    margin-bottom: 8px !important;         /* Dynamischer Abstand zum Preis */
    word-break: break-word !important;     /* Verhindert Überlauf bei langen Wörtern */
}

/* 3. Preis-Positionierung dynamisch nach unten verschieben */
.thunk-product-content .price {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
    display: block !important;
    clear: both !important;
}

/* Definitiver Fix gegen den -webkit-box Line-Clamp */
.thunk-woo-product-list .woocommerce-loop-product__title,
.thunk-product-content .woocommerce-loop-product__title {
    display: block !important;                   /* Hebelt -webkit-box / -webkit--webkit-box komplett aus */
    -webkit-line-clamp: unset !important;        /* Entfernt die Zeilenbegrenzung */
    -webkit-box-orient: unset !important;
    white-space: normal !important;              /* Zeilenumbruch erlauben */
    text-overflow: clip !important;             /* Keine Drei Punkte (...) */
    overflow: visible !important;                /* Inhalt vollständig anzeigen */
    height: auto !important;                     /* Höhe flexibel machen */
    max-height: none !important;
}

/* Preis automatisch nach unten schieben */
.thunk-woo-product-list .price,
.thunk-product-content .price {
    position: relative !important;
    display: block !important;
    clear: both !important;
    margin-top: 8px !important;
}

/* ---------------------------------------------------------
   Media Queries für feine Abstimmungen (Desktop, Tablet, Mobil)
   --------------------------------------------------------- */

/* Desktop & Laptops (ab 1025px) */
@media screen and (min-width: 1025px) {
    .thunk-product-content .woocommerce-loop-product__title,
    .thunk-product-content h2 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    .thunk-product-content .price {
        margin-top: 6px !important;
    }
}

/* Tablets (768px bis 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .thunk-product-content .woocommerce-loop-product__title,
    .thunk-product-content h2 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }
    
    .thunk-product-content .price {
        margin-top: 4px !important;
    }
}

/* Mobilgeräte (unter 768px) */
@media screen and (max-width: 767px) {
    .thunk-product-content .woocommerce-loop-product__title,
    .thunk-product-content h2 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    .thunk-product-content .price {
        margin-top: 4px !important;
        font-size: 14px !important;
    }
}