/*
Theme Name: gsKosmetik
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ============================================================================
   gs-kosmetik – Child-Theme CSS  (neu strukturiert, Stand 02.06.2026)
   Markenfarben: #6b5b8a (Lila) · #3d3252 (Dunkel) · #e4e4ea (Rahmen)
                 #4a4a4a (Grau-Text) · #c0392b (Fehler-Rot)
   Reihenfolge:
     1) Shop-/Kategorie-Loop (Produktkacheln)
     2) Kategorie-Banner
     3) Kategorie: Sidebar + Titel-/Sortierzeile
     4) Produktseite
     5) Warenkorb
     6) Checkout
     7) Footer
     8) Mobile (< 850px)
     9) FAQ- & Kontakt-Seiten (page-id-gescoped)
    10) Staffelpreis-Tabelle (Discount Rules for WooCommerce)
   HINWEIS: Hier ist jetzt das KOMPLETTE CSS. Wenn diese Datei live ist,
            das „Zusätzliche CSS" im Customizer komplett leeren (sonst
            überschreibt es diese Datei, weil es als Letztes lädt).
   ============================================================================ */


/* ===== 1) SHOP-/KATEGORIE-LOOP (Produktkacheln) ===== */

/* Ergebnis-Anzahl kleiner */
.woocommerce-result-count { font-size: .8em; }

/* Produktname größer + fett */
.product-small .product-title a,
.product-small .woocommerce-loop-product__title a {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
}

/* Preis (Angebotspreis) größer */
.price-wrapper > span.price > ins { font-size: 21px; }

/* Produktbilder vollständig zeigen statt beschneiden
   (Voraussetzung: „Vorschaubild zuschneiden = Nicht zuschneiden" + Thumbnails neu generiert) */
.woocommerce .product-small .box-image img,
.woocommerce ul.products li.product .box-image img { object-fit: contain !important; }


/* ===== 2) KATEGORIE-BANNER ===== */
/* Farben wie Suchfeld, eckig, ohne Schatten */
.gs-cat-banner,
.woocommerce .term-description {
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 0;
    box-shadow: none;
    padding: 36px 40px;
    text-align: center;
    margin: 0 0 30px;
}
.gs-cat-banner .gs-cat-title {
    color: #6b5b8a;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 14px;
}
.gs-cat-banner .gs-cat-desc,
.gs-cat-banner .gs-cat-desc p {
    color: #4a4a4a;
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.6;
}


/* ===== 3) KATEGORIE: Sidebar + Titel-/Sortierzeile ===== */

/* Trenner zwischen Leftbar und Inhalt */
.woocommerce #shop-sidebar {
    border-right: 1px solid #e4e4ea;
    padding-right: 30px;
}
/* Divider-Widget in der Sidebar volle Breite */
#product-sidebar .is-divider.small { max-width: 100% !important; }

/* Sortier-Dropdown kompakter */
.woocommerce .woocommerce-ordering select.orderby {
    width: auto !important;
    max-width: 230px;
    height: 36px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    padding: 6px 30px 6px 12px !important;
    margin: 0 !important;
}
.woocommerce .woocommerce-ordering { height: auto !important; margin: 0 !important; }

/* Titel-/Breadcrumb-Zeile flach */
.woocommerce .shop-page-title.page-title {
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}
.woocommerce .page-title-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
}
.category-page-row { padding-top: 5px; }


/* ===== 4) PRODUKTSEITE ===== */

/* Englischer Titel unter dem Produktnamen */
.gs-product-subtitle {
    font-size: 0.9em;
    font-weight: 300;
    color: #666;
    margin: 2px 0 0 0 !important;
}

/* Titelzeile mit Hersteller-Logo rechts */
.gs-title-logo-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.gs-title-logo-wrapper .product-title { margin: 0 !important; }
.gs-hersteller-logo {
    width: 110px;
    height: auto;
    flex-shrink: 0;
    margin-left: 20px;
}

/* Trennlinie vor den Tabs entfernen */
.product-footer .woocommerce-tabs { border-top: none; }

/* Grundpreis-/UVP-Zeile (wird per JS in die Inhaltszeile gemergt) ausblenden */
.product p.wc-gzd-additional-info { margin-bottom: 0; }
p.price-unit.wc-gzd-additional-info { display: none !important; }
p.price-unit.wc-gzd-additional-info del { display: none; }

/* Kurzbeschreibung Abstand */
.product-short-description { margin: 25px 0; }


/* ===== 5) WARENKORB ===== */

/* Links offen, kein mittiger Trennstrich */
.woocommerce-cart .woocommerce-cart-form { border: 0 !important; padding: 0 !important; background: transparent !important; }
.woocommerce-cart .cart-collaterals { border-left: 0 !important; }

/* Rechte Panels */
.woocommerce-cart .cart_totals { border: 1px solid #e4e4ea; border-radius: 14px; padding: 20px 24px; background: #fff; }
.woocommerce-cart form.ux-cart-coupon { border: 1px solid #e4e4ea; border-radius: 14px; padding: 20px 24px; background: #fff; margin-top: 20px; }
.woocommerce-cart form.ux-cart-coupon .input-text { border: 1px solid #ddd !important; border-radius: 10px !important; }
.woocommerce-cart .checkout-button { border-radius: 10px !important; }

/* Überschriften wie „Rechnungsdaten" (GROSS) */
.woocommerce-cart .cart_totals .product-name,
.woocommerce-cart .cart-collaterals .widget-title {
    font-family: Montserrat, sans-serif !important;
    font-size: 17.6px !important;
    line-height: 1.6 !important;
    color: #3d3252 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: normal !important;
    border-bottom: 2px solid #6b5b8a !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}
.woocommerce-cart .cart-collaterals .widget-title .icon-tag { display: none !important; }

/* Summen-Hierarchie */
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td { border: 0 !important; padding: 5px 0 !important; }
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal th,
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td { color: #6b6b76 !important; font-size: 15px !important; }
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td { border-top: 2px solid #e4e4ea !important; padding-top: 10px !important; }
.woocommerce-cart .cart_totals table.shop_table tr.order-total th { font-size: 18px !important; font-weight: 700 !important; color: #3d3252 !important; }
.woocommerce-cart .cart_totals table.shop_table tr.order-total td strong,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount.amount { font-size: 18px !important; color: #3d3252 !important; }
.woocommerce-cart .cart_totals table.shop_table tr.order-tax th,
.woocommerce-cart .cart_totals table.shop_table tr.order-tax td { font-size: 13px !important; color: #9a9aa2 !important; }

/* Erfolgs-Meldung (z. B. „… wurde dem Warenkorb hinzugefügt", „entfernt/Rückgängig")
   als runde grüne Box, Text zentriert – seitenweit (Produktseite, Shop, Warenkorb).
   WooCommerce/Flatsome rendert die Meldung oft randlos voll-breit und legt den Text
   in einen zentrierten .message-container (1080px). Daher die Box auf den inneren
   Container legen; Fallback für Meldungen ohne Wrapper via :not(:has()). */
.woocommerce-message { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; margin: 0 0 22px !important; list-style: none !important; }
.woocommerce-message .message-container,
.woocommerce-message:not(:has(.message-container)) {
    background: #edf6ec !important;
    border: 1px solid #5b8a3a !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
    color: #3f6027 !important;
    text-align: center !important;
}
.woocommerce-message a { color: #3f6027 !important; text-decoration: underline; font-weight: 600; }

/* Leerer Warenkorb: Text prominenter + zentriert (beide Render-Zustände) */
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .wc-empty-cart-message { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-info .message-container,
.woocommerce-cart .wc-empty-cart-message,
.woocommerce-cart .wc-empty-cart-message .message-container {
    font-size: 22px !important; font-weight: 600 !important; color: #3d3252 !important; text-align: center !important;
}
.woocommerce-cart .woocommerce-info::before { display: none !important; }

/* Versand-Fortschrittsleiste (Flatsome ux-free-shipping) als runde NEUTRALE Box (Farben wie Kategorie-Box), Text zentriert */
.woocommerce-cart .ux-free-shipping {
    background: rgba(0,0,0,.03) !important;
    border: 1px solid rgba(0,0,0,.09) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin: 0 0 24px !important;
    box-shadow: none !important;
    text-align: center !important;
}
.woocommerce-cart .ux-free-shipping__notice { text-align: center !important; justify-content: center !important; color: #4a4a4a !important; margin-bottom: 12px !important; }
.woocommerce-cart .ux-free-shipping__notice strong { color: #3d3252 !important; }

/* Mini-Warenkorb (Header-Dropdown): Buttons nicht umbrechen */
.woocommerce-mini-cart__buttons .button { white-space: nowrap !important; }


/* ===== 6) CHECKOUT ===== */

/* Eingabefelder */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-selection { border: 1px solid #ddd !important; border-radius: 10px; box-shadow: none !important; }
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus { border-color: #6b5b8a !important; box-shadow: 0 0 0 3px rgba(107,91,138,.18); outline: none; }

/* Beide Spalten als Karten */
.woocommerce-checkout .col-inner.has-border { border: 1px solid #e4e4ea !important; border-radius: 14px; }
.woocommerce-checkout #customer_details { border: 1px solid #e4e4ea; border-radius: 14px; padding: 30px; background: #fff; }
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields { border: 0 !important; padding: 0 !important; }

/* Überschriften-Striche + Bestell-Button */
.woocommerce-checkout h3 { border-bottom: 2px solid #6b5b8a; padding-bottom: 10px; margin-bottom: 20px; }
.woocommerce-checkout #place_order { background: #6b5b8a !important; border-radius: 10px; padding: 16px 24px; font-size: 16px; width: 100%; }
.woocommerce-checkout #place_order:hover { filter: brightness(.93); }

/* Gutschein */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: #f7f7f9; border: 1px solid #e4e4ea; border-radius: 10px; padding: 14px 18px !important; margin: 0 0 22px; }
.woocommerce-checkout .showcoupon { font-weight: 600; }
.woocommerce-checkout form.checkout_coupon { border: 1px solid #e4e4ea !important; border-radius: 14px !important; }
.woocommerce-checkout form.checkout_coupon .input-text { border: 1px solid #ddd !important; border-radius: 10px !important; }
.woocommerce-checkout form.checkout_coupon .flex-row { align-items: flex-start !important; }
.woocommerce-checkout .coupon-error-notice { color: #c0392b !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin-top: 8px; display: block; }
/* Gutschein aufgeklappt = ein Bereich */
.woocommerce-checkout .woocommerce-form-coupon-toggle:has(+ form.checkout_coupon[style*="display: block"]) { margin-bottom: 0; }
.woocommerce-checkout .woocommerce-form-coupon-toggle:has(+ form.checkout_coupon[style*="display: block"]) .woocommerce-info { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.woocommerce-checkout form.checkout_coupon[style*="display: block"] { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0; }

/* Fehlermeldungen als Box (wie Gutschein, aber rot): rosa Hintergrund, dunkelroter Rahmen */
.woocommerce-checkout form.checkout ul.woocommerce-error {
    background: #fdecea !important;
    border: 1px solid #c0392b !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    margin: 0 0 22px !important;
    color: #c0392b !important;
    list-style: none !important;
    box-shadow: none !important;
}
.woocommerce-checkout form.checkout ul.woocommerce-error li { color: #c0392b !important; margin: 0; padding: 3px 0; list-style: none !important; }
.woocommerce-checkout form.checkout ul.woocommerce-error strong { color: #c0392b !important; }
.woocommerce-checkout form.checkout ul.woocommerce-error a { color: #a5281b !important; text-decoration: underline; }


/* ===== 7) FOOTER ===== */
.footer-wrapper .menu li a { font-size: 90%; }
.footer-wrapper .menu li a::before {
    content: "›";
    margin-right: 8px;
    font-size: 1.2em;
}


/* ===== 8) MOBILE (< 850px) ===== */

/* Versand-Leiste: per Snippet im functions.php ausgegeben (.gs-mobile-shipbar).
   Falls zusätzlich im Customizer/Code Snippets aktiv → dort entfernen. */
.gs-mobile-shipbar { display: none; }

@media (max-width: 849px) {
    /* Versand-Leiste unter dem Header – Farbe wie die Navi (#666699), damit sie verschmilzt */
    .gs-mobile-shipbar {
        display: block;
        background: #666699;
        color: #fff;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        padding: 9px 12px;
    }
    /* Sortier-Dropdown ausblenden (FILTER-Button bleibt) */
    .woocommerce-ordering { display: none !important; }
    /* Produktseite: Hersteller-Logo ausblenden, Titel über volle Breite */
    .gs-hersteller-logo { display: none !important; }
    .gs-title-logo-wrapper .gs-title-block { flex: 1 1 auto !important; }
}


/* ===== 9) FAQ- & KONTAKT-SEITEN =====
   Aus den Seiten-Inline-<style> hierher konsolidiert. Beide Blöcke sind über
   die Seiten-ID gescoped, greifen also nur auf der jeweiligen Seite.
   Nach dem Übernehmen das Inline-CSS in den Seiten (Flatsome „Custom CSS")
   entfernen. Die vom Builder erzeugten #section_…/#gap_…-Styles dort BELASSEN. */

/* --- FAQ-Seite (page-id-1325) --- */
.page-id-1325 .gs-cat-banner { border-radius: 14px; }
.page-id-1325 .gs-faq-card { border: 1px solid #e4e4ea; border-radius: 14px; padding: 22px 28px; background: #fff; margin: 0 auto 22px; max-width: 900px; }
.page-id-1325 .gs-faq-card h3 { margin: 0 0 14px; color: #3d3252; border-bottom: 2px solid #6b5b8a; padding-bottom: 10px; }
.page-id-1325 .gs-cat-banner .button { margin-top: 14px; }

/* --- Kontakt-Seite (page-id-2310) --- */
.page-id-2310 .gs-cat-banner { border-radius: 14px; margin-bottom: 0; }
.page-id-2310 .gs-contact-card { border: 1px solid #e4e4ea; border-radius: 14px; padding: 30px; background: #fff; height: 100%; }
.page-id-2310 .gs-contact-card h3 { border-bottom: 2px solid #6b5b8a; padding-bottom: 10px; margin: 0 0 20px; color: #3d3252; }
.page-id-2310 .wpcf7 .gs-fld { position: relative; margin: 0 0 16px; }
.page-id-2310 .wpcf7 .gs-fld > label { position: absolute; top: 6px; left: 13px; font-size: 12px !important; font-weight: 400 !important; color: #222; margin: 0; padding: 0; line-height: 1.2; pointer-events: none; z-index: 1; }
.page-id-2310 .wpcf7 .gs-fld .wpcf7-form-control-wrap { display: block; margin: 0; }
.page-id-2310 .wpcf7 .gs-fld input.wpcf7-text,
.page-id-2310 .wpcf7 .gs-fld input.wpcf7-email,
.page-id-2310 .wpcf7 .gs-fld textarea.wpcf7-textarea { border: 1px solid #ddd !important; border-radius: 10px !important; box-shadow: none !important; padding: 17px 12px 7px !important; font-size: 15.5px !important; line-height: 1.6 !important; height: 47px !important; width: 100%; background: #fff !important; }
.page-id-2310 .wpcf7 .gs-fld.gs-fld-area textarea.wpcf7-textarea { height: auto !important; min-height: 120px !important; padding-top: 24px !important; resize: vertical; }
.page-id-2310 .wpcf7 .gs-fld input:focus,
.page-id-2310 .wpcf7 .gs-fld textarea:focus { border-color: #6b5b8a !important; box-shadow: 0 0 0 3px rgba(107,91,138,.18) !important; outline: none; }
.page-id-2310 .wpcf7 .gs-fld:has(.wpcf7-not-valid) input,
.page-id-2310 .wpcf7 .gs-fld:has(.wpcf7-not-valid) textarea { border-color: #c0392b !important; }
.page-id-2310 .wpcf7 .gs-radio { margin: 0 0 16px; }
.page-id-2310 .wpcf7 .gs-radio-label { display: block; font-size: 12px; color: #222; margin: 0 0 6px; }
.page-id-2310 .wpcf7 .gs-accept { font-size: 14px; color: #4a4a4a; margin: 4px 0 18px; }
.page-id-2310 .wpcf7 .wpcf7-submit { background: #6b5b8a !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 14px 28px !important; font-size: 16px !important; width: auto; cursor: pointer; }
.page-id-2310 .wpcf7 .wpcf7-submit:hover { filter: brightness(.93); }
.page-id-2310 .wpcf7 .wpcf7-spinner { display: none; }
/* Feld-Fehlerhinweis: nur roter Text, kein grauer Kasten, kein Pfeil */
.page-id-2310 .wpcf7 .wpcf7-not-valid-tip { background: transparent !important; color: #c0392b !important; font-size: 13px !important; padding: 4px 0 0 !important; border: 0 !important; border-radius: 0 !important; }
.page-id-2310 .wpcf7 .wpcf7-not-valid-tip::before,
.page-id-2310 .wpcf7 .wpcf7-not-valid-tip::after { display: none !important; }
/* Fehler-Zusammenfassung wie Checkout-Fehlerbox (nur Fehlerzustände, Erfolg bleibt grün) */
.page-id-2310 .wpcf7-form.invalid .wpcf7-response-output,
.page-id-2310 .wpcf7-form.unaccepted .wpcf7-response-output,
.page-id-2310 .wpcf7-form.failed .wpcf7-response-output,
.page-id-2310 .wpcf7-form.spam .wpcf7-response-output { background: #fdecea !important; border: 1px solid #c0392b !important; border-radius: 10px !important; color: #c0392b !important; padding: 14px 18px !important; margin: 18px 0 0 !important; }


/* ===== 10) STAFFELPREIS-TABELLE (Discount Rules for WooCommerce) =====
   Anpassbare Bulk-Tabelle (.awdr-bulk-customizable-table). Markenkonform:
   Kopf lila unterstrichen, Preise dunkel/fett, Rabatt-% als rotes Badge (SW5-Look),
   Normalpreis-Zeile dezent hinterlegt. Spalte 1 (Titel) + Spalte 2 (Menge) sind
   im Plugin als Text pflegbar. */
.awdr-bulk-customizable-table table.sar-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.awdr-bulk-customizable-table table.sar-table th {
    text-transform: uppercase; color: #3d3252; font-weight: 700; font-size: 13px; letter-spacing: .03em;
    text-align: left; padding: 10px 14px !important; border-bottom: 2px solid #6b5b8a !important; background: transparent;
}
.awdr-bulk-customizable-table table.sar-table td { padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid #e4e4ea !important; vertical-align: middle; }
.awdr-bulk-customizable-table .wdr_bulk_title { color: #3d3252; font-weight: 600; }
.awdr-bulk-customizable-table .wdr_bulk_range { color: #4a4a4a; }
/* Menge- + Preis-Spalte zentriert (Kopf + Zellen; Preis-Gruppe via flex justify-content:center oben) */
.awdr-bulk-customizable-table table.sar-table th:nth-child(2),
.awdr-bulk-customizable-table table.sar-table th:nth-child(3),
.awdr-bulk-customizable-table .wdr_bulk_range { text-align: center !important; }
/* Preis-Zelle als Flex: Preis zuerst, Rabatt-Badge dahinter */
.awdr-bulk-customizable-table .wdr_bulk_table_discount { display: flex !important; align-items: center; justify-content: center; gap: 12px; }
.awdr-bulk-customizable-table .wdr_table_discounted_price { order: 1; font-weight: 700; color: #3d3252; font-size: 16px; }
/* Rabatt-Badge: helleres Aktions-Rot #e3342f (NICHT das Fehler-Rot #c0392b),
   "-" vorangestellt, Pfeil nach links. Plugin blendet das %-Element per Default aus -> erzwingen. */
.awdr-bulk-customizable-table .bulk_table_row:not(:first-child) .wdr_table_discounted_value {
    order: 2; position: relative; display: inline-block !important; background: #e3342f !important; color: #fff !important;
    border-radius: 4px !important; padding: 3px 10px !important; font-size: 12px !important; font-weight: 700 !important; margin: 0 !important;
}
/* führendes Minus vor der Prozentzahl */
.awdr-bulk-customizable-table .bulk_table_row:not(:first-child) .wdr_table_discounted_value::before { content: "-" !important; }
/* Pfeil nach links (Preisschild-Look) */
.awdr-bulk-customizable-table .bulk_table_row:not(:first-child) .wdr_table_discounted_value::after {
    content: "" !important; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
    width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #e3342f;
}
.awdr-bulk-customizable-table .bulk_table_row:first-child .wdr_table_discounted_value { display: none !important; }
.awdr-bulk-customizable-table .bulk_table_row:first-child { background: rgba(107,91,138,.05); }