/* =====================================================
   Dateiname: style.css
   Beschreibung: CSS-Stile für WooCommerce HighVari.
   Enthält grundlegende Hilfsklassen, Layoutdefinitionen für
   Variantenartikel, Zustände wie "disabled" und "active"
   sowie responsive Anpassungen.
   KORRIGIERT: Kurzbeschreibung wird nur bei HighVari-Produkten ausgeblendet
   NEU: WooCommerce Block-Checkout Bereinigung
   ===================================================== */

/* Hilfsklasse zum vollständigen Ausblenden von Elementen */
.dspnon {
    display: none !important;
}

/* Container für Variantenartikel, der Flexbox verwendet, 
   um Items in mehreren Zeilen und mit gleichmäßigen Abständen anzuordnen */
.vari_item__wrapper {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Einzelner Variantenartikel mit Rahmen, Padding, und flexibler Spaltenausrichtung */
.vari_item {
    border: 1px solid black;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
    max-width: 120px;
    transition: all 0.3s;
    border-radius: 8px;
}

.vari_item p {
    font-size: 14px;
    text-align: center;
    width:95px;
}

/* Einzelner Variantenartikel mit Rahmen, Padding, und flexibler Spaltenausrichtung */
.vari_item:hover {
    border-color: #0073aa !important;
    box-shadow: 0 0 5px rgba(0,115,170,0.3);
}

/* Stil für die Warenkorb-Meldung (cart__message).
   Zeigt Erfolgsmeldungen an, z. B. beim Hinzufügen eines Artikels in den Warenkorb. */
.cart__message {
    color: #55a640;
    font-weight: 700;
    font-size: 18px;
    margin: auto;
    text-align: left;
    padding-top: 25px;
    padding-left: 15px;
    width: 1344px;
}

/* Responsives Layout: Auf Bildschirmen mit maximal 1000px Breite wird 
   die Warenkorb-Meldung über die volle Breite angezeigt */
@media(max-width: 1000px) {
    .cart__message {
        width: 100%;
    }
}

/* Pseudo-Element vor der Warenkorb-Meldung: Zeigt ein Häkchen als Bestätigung */
.cart__message::before {
    content: "✔️ ";
}

/* Bilder in Variantenartikeln: Definierte Breiten- und Höhenwerte, 
   Objekt-Anpassung und Übergangseffekte beim Wechsel */
.vari_item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    transition: all 0.3s;
    border-radius: 8px;
}

/* Zeigt den Cursor als Pointer an, wenn die Variante auswählbar ist */
.vari_item:not(.vari_item.disabled) {
    cursor: pointer;
}

/* Hover-Effekt für nicht deaktivierte und nicht aktive Varianten:
   - Vergrößert das Bild beim Überfahren */
.vari_item:not(.vari_item.disabled):not(.vari_item.active):hover img {
    width: 120px;
    height: 120px;
}

/* Entfernt beim Hover das Padding, um den Effekt zu verstärken */
.vari_item:not(.vari_item.disabled):not(.vari_item.active):hover {
    padding: 0;
}

/* Deaktivierte Varianten: Zeigt reduzierte Opazität an, um anzuzeigen, dass sie nicht auswählbar sind */
.vari_item.disabled {
    opacity: 0.3;
}

/* Aktive (ausgewählte) Varianten: Hebt den Hintergrund hervor */
.vari_item.active {
    background: #ffa1c8;
}

/* Wrapper für benutzerdefinierte Warenkorb-Elemente (z. B. Mengenangaben, Zusatzfelder) */
.cart__custom_wrapper {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

/* Anpassung des Abstands für den In-den-Warenkorb Button */
.custom__add_to_cart {
    margin: 0 !important;
}

/* Wrapper für benutzerdefinierte Produktabschnitte */
.custom__product__wrapper {
    margin-bottom: 10px;
}

/* Globale Einstellung: Sanftes Scroll-Verhalten */
* {
    scroll-behavior: smooth;
}

/* Responsive Anpassungen auf kleinen Bildschirmen für die Produktseite.
   - Reihenfolge der Spalten wird umgestellt
   - Maximale Breite der Spalten auf 100% gesetzt */
@media(max-width: 600px) {
    .custom-product-page > .row {
        flex-direction: column !important;
    }

    .custom-product-page > .row > div {
        max-width: 100% !important;
    }
}

/* =====================================================
   HighVari Sale Badge Styling (Standard WooCommerce)
   ===================================================== */

/* Styling für HighVari Sale Badge */
.onsale {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    padding: 2px !important;
    height: 2.8em !important;
    width: 2.8em !important;
}

/* =====================================================
   HighVari Produkt-spezifische Anpassungen (KORRIGIERT)
   Versteckt die Kurzbeschreibung nur bei HighVari-Produkten
   ===================================================== */

/* Verstecke product-short-description nur bei HighVari Produkten 
   (wenn der HighVari Container vorhanden ist) */
.custom__product__wrapper ~ .product-short-description,
.custom__product__wrapper ~ .woocommerce-product-details__short-description {
    display: none !important;
}

/* Alternative Selektoren für verschiedene Themes und Positionen der Kurzbeschreibung */
.custom__product__wrapper ~ .entry-summary .product-short-description,
.custom__product__wrapper ~ .product_meta + .product-short-description,
.custom__product__wrapper ~ .summary .product-short-description,
.custom__product__wrapper ~ .woocommerce-product-details .product-short-description {
    display: none !important;
}

/* Fallback: Verstecke auch direkt nachfolgende Geschwisterelemente */
.single-product .entry-summary .custom__product__wrapper + .product-short-description,
.single-product .entry-summary .custom__product__wrapper + .woocommerce-product-details__short-description {
    display: none !important;
}

/* Zusätzlicher Fallback für Themes die andere HTML-Strukturen verwenden */
.single-product .entry-summary:has(.custom__product__wrapper) .product-short-description,
.single-product .entry-summary:has(.custom__product__wrapper) .woocommerce-product-details__short-description {
    display: none !important;
}

/* Browser-Kompatibilität: Für ältere Browser ohne :has() Support */
@supports not (selector(:has())) {
    .single-product .entry-summary .product-short-description {
        display: block !important; /* Zeige standardmäßig an */
    }
    
    /* JavaScript wird diese Klasse setzen wenn HighVari aktiv ist */
    .highvari-active .product-short-description,
    .highvari-active .woocommerce-product-details__short-description {
        display: none !important;
    }
}

/* =====================================================
   NEU: WooCommerce Block-Checkout Bereinigung für HighVari
   Versteckt nur problematische Elemente, nicht alle Produktdetails
   ===================================================== */

/* Verstecke NUR die Kurzbeschreibung in WooCommerce Blocks */
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Verstecke nur das doppelte "Siehe Variantenauswahl" Lieferzeit-Element */
.wc-block-components-product-details li.wc-block-components-product-details__lieferzeit:has(.wc-block-components-product-details__value:contains("Siehe Variantenauswahl")) {
    display: none !important;
}

/* Fallback für Browser ohne :has() Support - verstecke das 8. li-Element */
@supports not (selector(:has())) {
    .wc-block-components-product-details li:nth-child(8) {
        display: none !important;
    }
}

/* WICHTIG: Zeige alle anderen HighVari-Meta-Daten normal an */
.wc-block-components-product-details li:not(.wc-block-components-product-details__lieferzeit:last-child),
.wc-item-meta dt,
.wc-item-meta dd,
.woocommerce-order-details .wc-item-meta,
.order-details .wc-item-meta {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}