/* Globale Content-Konsistenz: Blog-Artikel-Überschriften + Beschreibungs-Icons. */

/* ===================== Blog-Artikel-Überschriften =====================
   Alte Elementor-Inhalte hatten je Artikel andere Tags/Größen/Farben
   (mal H2 32px gold, mal H3 44px dunkel). Hier global vereinheitlicht:
   immer Lustria, Content-Überschriften gold, einheitliche Größen. */
body.single-post .entry-title,
body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6 {
    font-family: 'Lustria', Georgia, 'Times New Roman', serif !important;
}

body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6 {
    color: #c49944 !important;
    font-weight: 400 !important;
    line-height: 1.3;
}

/* Haupt-Sektionsüberschriften (Artikel nutzen mal H2, mal H3) gleich groß. */
body.single-post .entry-content h2,
body.single-post .entry-content h3 {
    font-size: 30px !important;
    margin: 36px 0 14px !important;
}
body.single-post .entry-content h4 {
    font-size: 22px !important;
    margin: 28px 0 10px !important;
}
body.single-post .entry-content h5,
body.single-post .entry-content h6 {
    font-size: 18px !important;
    margin: 22px 0 8px !important;
}

/* ===================== Beschreibungs-Icons (global) =====================
   Inline-Breiten variieren je Produkt (165/250 bzw. 120/144) -> per Bildname
   vereinheitlichen. Siegel ("Unsere Produkte sind") max 165px, Stoffklassen-
   Icons (*_icon.png) max 120px. height:auto haelt das Seitenverhaeltnis. */
img.properties-icons {
    height: auto !important;
    vertical-align: middle;
}
img.properties-icons[src*="siegel"] {
    max-width: 165px !important;
}
img.properties-icons[src*="_icon"] {
    max-width: 115px !important;
}

/* Icon-Reihen kompakter: Bootstrap-.row/.col verteilt die Icons über die volle
   Breite (große Lücken). Stattdessen zentriert mit kleinem Gap. Trifft die Reihe
   mit den Beschreibungs-Icons (Siegel + Stoffklassen). */
.entry-content .row:has(img.properties-icons) {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: flex-start;
    gap: 6px 10px;
    margin: 22px 0 38px !important;
}
.entry-content .row:has(img.properties-icons) > * {
    width: 118px !important;
    max-width: 118px !important;
    flex: 0 0 118px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Siegel-Spalte ("Unsere Produkte sind") steht OHNE .row direkt im Content und
   klebte an der folgenden Headline – Abstand nach oben/unten. */
.entry-content [class~=".col-1"]:has(> img.properties-icons[src*="siegel"]) {
    display: block;
    margin: 16px 0 40px !important;
}

/* WooCommerce-Produktgalerie sofort sichtbar.
   Woo versteckt die Galerie per opacity:0, bis ihr JS sie initialisiert
   (.woocommerce-product-gallery--initialized). Mit FlyingPress js_delay läuft
   dieses JS erst bei Idle/Interaktion -> Produktbild blieb 3-4s unsichtbar
   (erst nach Mausbewegung). Das Bild ist eager geladen -> einfach sichtbar
   lassen; die Galerie-Funktionen (Zoom/Thumbs) initialisieren weiterhin nach. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce-page div.product .woocommerce-product-gallery {
    opacity: 1 !important;
}

/* WooCommerce-Produkt-Tabs: als zwei klar erkennbare Tab-Buttons darstellen.
   Parent-Theme zentriert sie als Textblock (text-align:center) -> auf Mobil wirken
   "Beschreibung" / "Zusätzliche Informationen" wie ein Fließtext, nicht wie 2 Links,
   und brechen mit Bindestrich um. */
.woocommerce-tabs ul.tabs.wc-tabs {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch !important;       /* beide Tabs gleich hoch */
    gap: 8px;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 28px !important;
    border: 0 !important;
    list-style: none;
}
.woocommerce-tabs ul.tabs.wc-tabs li {
    flex: 1 1 0 !important;                  /* nebeneinander, gleiche Breite (50/50) */
    min-width: 0;
    display: flex !important;               /* damit der Link die volle Höhe füllt */
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    list-style: none;
}
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after {
    display: none !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 16px;                     /* größer -> besser mobil tappbar */
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: none !important;
    border: 1px solid #c49944 !important;   /* Gold-Rand */
    border-radius: 8px;
    background: #faf7f2 !important;          /* heller Outline-Look */
    line-height: 1.25;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
    transition: background .2s ease;
}
/* Parent-Theme setzt im aktiven Zustand einen Gold-Unterstrich via a::after -> weg. */
.woocommerce-tabs ul.tabs.wc-tabs li a::before,
.woocommerce-tabs ul.tabs.wc-tabs li a::after {
    display: none !important;
    content: none !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li.active a,
.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
    background: #e7ddca !important;          /* ~20% dunkler, Gold-Rand bleibt */
}

/* Kein hässlicher Bindestrich-Umbruch im Produkt-Inhalt (z. B. "Mehr-ren"). */
.woocommerce-Tabs-panel,
.woocommerce div.product .woocommerce-tabs {
    hyphens: none;
    -webkit-hyphens: none;
}

/* #2-Nachzügler: "Aus unserem Shop"-Karten (Studio-Startseite) einheitlich groß.
   Alte Karten = Shop-Asset 180x220 (Flasche klein, Weißraum drumherum), neue =
   volle Produktfotos 1000x1000 (randlos) -> wirkten größer. Einheitliche Höhe +
   Innenabstand bei den neuen, damit die Flasche ähnlich groß erscheint. */
.shop_single .s_thumb {
    text-align: center;
}
.shop_single .s_thumb img {
    height: 230px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: inline-block;
}
.shop_single .s_thumb img[src*="antiradicalcreme"],
.shop_single .s_thumb img[src*="renewpeelsoft"] {
    padding: 26px 0;
    box-sizing: border-box;
}

/* #3: Button-Schrift vereinheitlichen. Marken-/Add-to-Cart-Buttons nutzen Lustria,
   Login/Register/Checkout/Konto-Buttons fälschlich Red Hat Display -> auf Lustria. */
.woocommerce form.login button,
.woocommerce form.register button,
.woocommerce-form-login button,
.woocommerce-form-register button,
.woocommerce-EditAccountForm button,
.woocommerce-Address button,
.woocommerce form .button,
.woocommerce #place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.wc-block-components-button {
    font-family: 'Lustria', Georgia, 'Times New Roman', serif !important;
}

/* CLS-Fix Onlineshop: owl-Slider verursachen einen Layout-Sprung, weil die Slides VOR
   der Init gestapelt (= doppelte/mehrfache Höhe) und NACH der Init in einer Reihe sind.
   Vor Init (:not(.owl-loaded)) den Zustand layout-gleich zur Reihe halten -> kein Shift. */
.owl-carousel:not(.owl-loaded) { overflow: hidden; }
/* Hero: Container vor owl-Init sichtbar halten. .cps-hero-slider hat Klasse owl-carousel,
   owl.carousel.css setzt .owl-carousel{display:none} -> Hero wäre Höhe 0 bis owl lädt und
   würde dann auf die aspect-ratio-Höhe springen (schiebt cps-hauttyp runter = CLS 0,294).
   display:block (höhere Spezifität + .cps-slide-aspect-ratio reserviert die Höhe stabil). */
.cps-hero-slider:not(.owl-loaded) { display: block !important; }
/* und nur den ersten Slide zeigen (sonst stapeln sich alle Slides) */
.cps-hero-slider:not(.owl-loaded) > * { display: none !important; }
.cps-hero-slider:not(.owl-loaded) > *:first-child { display: block !important; }
/* Produkt-Karussells: Items vor Init als horizontale Reihe (statt gestapelt) */
.cps-products-owl:not(.owl-loaded) { display: flex; flex-wrap: nowrap; min-height: 520px; }
.cps-products-owl:not(.owl-loaded) > * { flex: 0 0 25%; max-width: 25%; }
@media (max-width: 991px) {
    .cps-products-owl:not(.owl-loaded) > * { flex-basis: 50%; max-width: 50%; }
    .cps-products-owl:not(.owl-loaded) { min-height: 500px; }
}
/* Hero KEINE min-height reservieren: .cps-slide hat aspect-ratio 1600/570 -> stabile Höhe
   vor UND nach owl-Init. Eine min-height (520) erzwang vor Init mehr Höhe als die aspect-ratio
   (~463) und fiel nach Init zurück -> Shrink-Shift -> CLS (cps-hauttyp wurde hochgezogen). */

/* Checkout: Preise in der Bestellübersicht ("Deine Bestellung") waren zu fett -> 500. */
.woocommerce-checkout-review-order .woocommerce-Price-amount,
.woocommerce-checkout-review-order .woocommerce-Price-amount bdi,
.woocommerce-checkout-review-order .order-total .woocommerce-Price-amount {
    font-weight: 500 !important;
}

/* WCAG-AA-Kontrast: Das helle Marken-Gold (#c49944) bleibt, aber Text AUF Gold bzw.
   goldener Text auf Weiß wird dunkel (Kundenvorgabe). */
/* Footer hat goldenen Hintergrund -> hellen Text durch Dunkelbraun ersetzen. */
.footer,
.footer p, .footer span, .footer li, .footer a,
.footer h1, .footer h2, .footer h3, .footer h4,
.footer .fw_title, .footer .widgettitle, .footer address,
.footer .footer_widget, .footer .footer_widget * {
    color: #2a2114 !important;
}
/* Hover nur für echte Text-Links, NICHT für Buttons (Widerruf-Button .cps-wd-entry / .thm_btn). */
.footer a:not(.cps-wd-entry):not(.thm_btn) { transition: color .15s ease; }
.footer a:not(.cps-wd-entry):not(.thm_btn):hover { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
/* Badge "Angebot!" + Blog-Kategorie: weiß auf Gold -> dunkel auf Gold. */
.cps-product__badge,
.cps-blogcard__cat {
    color: #2a2114 !important;
}
/* Goldener Meta-Text auf weißem Grund -> dunkelgrau. */
.cps-blogcard__meta {
    color: #555 !important;
}
/* Kontrast Teil 2: goldene CTA-Buttons (weiß auf Gold), aktiver Tab, Trust-Text. */
.thm_btn,
.thm_btn:hover,
.thm_btn:focus {
    color: #2a2114 !important;   /* dunkler Text auf Gold (#c49944/#e3a128) – Gold bleibt */
}
.cps-tab.is-active {
    color: #2a2a2a !important;   /* war #a8842f (Gold) ~3:1 -> dunkel */
}
.cps-trust__item p {
    color: #555 !important;      /* war #777 ~4:1 (grenzwertig) */
}
/* Cookie-Banner (control-c): "Einstellungen"-Button hatte grauen Text auf grau. */
#cps-banner #cps-btn-settings {
    color: #3a3a3a !important;
}