/*
 Theme Name:   GeneratePress Child (Shopify-Polish)
 Theme URI:    https://generatepress.com
 Description:  Variante der Child-Theme-style.css mit zusaetzlichem
               Polish-Block fuer Warenkorb und Checkout (Shopify-Look-Lite).
               Marken-Orange (#f39022) und Rosa-Hinweise (#e9415b) bleiben
               unangetastet.
 Author:       WebWork Beate Bodendorf
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.9
*/

html {box-sizing: border-box;}
*, ::before, ::after {box-sizing: inherit;}

/*Allgemeines Layout*/

.uppercase, .art span {text-transform: uppercase !important;}
.margin-top {margin-top: 1em;}
.small {font-size: 80%;}

h1 {font-weight: 400;}

.container.grid-container {width: 100%;} /*Full Width*/

.sub-menu li:first-child a {padding-top: 20px !important;}
.sub-menu li:last-child a {padding-bottom: 40px !important;}

/*Woocommerce*/

.tax-product_cat .woocommerce-de_price_taxrate, .tax-product_cat .woocommerce_de_versandkosten, .tax-product_cat .add_to_cart_button, .page-id-42 .woocommerce-de_price_taxrate, .page-id-42 .woocommerce_de_versandkosten, .page-id-42 .add_to_cart_button {
  position: absolute;
  top: -99999px;
  left: -99999px;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;}

.woocommerce div.product form.cart .variations select {
    max-width: 100%;
    min-width: 75%;
    display: inline-block;
    margin-right: 1em;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 15px;
    padding-right: 40px;}

/* Produkt-Vorschaubilder: IMMER quadratisch, Bild fuellt Karte komplett aus.
   Das Theme nutzt eigene Wrapper .wc-product-image und .inside-wc-product-image
   um das <img>. Beide Wrapper muessen volle Breite und Quadrat-Aspekt erhalten,
   damit das Bild den Rahmen ausfuellt.
   ACHTUNG: Funktioniert nur mit Originalbildern >= 500x500 px. Kleinere
   Originale haben gar keine Thumbnail-Version und koennen nicht hochskaliert
   werden, ohne unscharf zu werden. */

.woocommerce ul.products li.product .wc-product-image,
.woocommerce ul.products li.product .inside-wc-product-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: #f6f6f7;
}

.woocommerce ul.products li.product .wc-product-image img,
.woocommerce ul.products li.product .inside-wc-product-image img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border-radius: 0;
}

/* Link-Wrapper um das Produktbild: volle Breite */
.woocommerce ul.products li.product > a,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    display: block;
    width: 100%;
}

/* Markenfarben Buttons + Hinweise
   Orange       #f39022 = alle Shop-Buttons (In den Warenkorb, Zur Kasse, etc.)
   Soft-Orange  #fde4c8 = alle WooCommerce-Hinweise (Erfolg, Info, Fehler), Text schwarz */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce-page a.button,
.woocommerce-page button.button {
    background-color: #f39022 !important;
    border-color: #f39022 !important;
    color: #fff !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.added_to_cart:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover {
    background-color: #d97a13 !important;
    border-color: #d97a13 !important;
    color: #fff !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
    background-color: #fde4c8 !important;
    color: #000 !important;
}

.woocommerce-message *,
.woocommerce-info *,
.woocommerce-error *,
.wc-block-components-notice-banner * {
    color: #000 !important;
}

.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-message a.button:focus,
.woocommerce-info a.button:focus,
.woocommerce-error a.button:focus,
.woocommerce-message a.button.alt,
.woocommerce-info a.button.alt,
.woocommerce-error a.button.alt,
.woocommerce-message a.button.alt:hover,
.woocommerce-info a.button.alt:hover,
.woocommerce-error a.button.alt:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #000 !important;
    text-decoration: underline !important;
}

/* Gutschein-Eingabefeld: nur Schriftgroesse verkleinern,
   damit der eingegebene Code nicht abgeschnitten wird.
   Hoehe und Breite bleiben unveraendert (Theme-Default). */

.woocommerce form.checkout_coupon input#coupon_code,
.woocommerce .coupon input#coupon_code,
.woocommerce-cart .coupon input#coupon_code {
    font-size: 0.9rem !important;
}

/*Sticky Footer*/

#page {flex: 1 1 auto;}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Lato',sans-serif !important;}

#footer-widgets .widget {
    margin-bottom: 10px;
}

/*Small*/

@media screen and (max-width: 768px) {

    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {width: 100%;}

}

@media screen and (max-width: 1024px) {

    #primary-menu a {font-size: 1.1rem;}
    body, blockquote {font-size: 1rem;}
    .art {font-size: 1.8rem;} 
    h1 {font-size: 1.6rem;}
    h2 {font-size: 1.3rem;}
    h3 {font-size: 1.1rem;}
    h4, h5 {font-size: 1rem;}

    .mobile-none {display: none;}

}

/* Medium */
@media screen and (min-width:1025px) and (max-width:1499px) {

    #primary-menu a {font-size: 1.2rem;}
    body, blockquote {font-size: 1.1rem;}
    body  {font-size: 1.1rem;}
    .art {font-size: 2.2rem;} 
    h1 {font-size: 2rem;}
    h2 {font-size: 1.6rem;}
    h3 {font-size: 1.3rem;}
    h4, h5 {font-size: 1.1rem;}

}

/* Large */
@media screen and (min-width:1500px) {

    #primary-menu a {font-size: 1.3rem;}
    body, blockquote {font-size: 1.2rem;}
    .art {font-size: 2.4rem;} 
    h1 {font-size: 2.2rem;}
    h2 {font-size: 1.8rem;}
    h3 {font-size: 1.4rem;}
    h4, h5 {font-size: 1.2rem;}

}


/* ============================================================
   ============================================================
   SHOPIFY-POLISH (Test-Block fuer Warenkorb und Checkout)
   ------------------------------------------------------------
   Stand:  26. April 2026
   Zweck:  Warenkorb- und Checkout-Seite dezent aufraeumen.
           Felder einheitlich, ruhige graue Aside-Bloecke,
           klarer Focus-Rahmen.
   Marke:  Marken-Orange (#f39022) und Rosa-Hinweise (#e9415b)
           werden NICHT veraendert. Buttons bleiben orange.
   Scope:  Nur .woocommerce-cart und .woocommerce-checkout.
           Andere Shop-Seiten und das Frontend bleiben unberuehrt.
   ============================================================
   ============================================================ */


/* ---------- Warenkorb: Tabelle klar abgegrenzt ---------- */
.woocommerce-cart table.shop_table {
    border: 1px solid #e1e3e5;
    border-radius: 6px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.woocommerce-cart table.shop_table th {
    background: #f6f6f7;
    color: #202223;
    font-weight: 600;
    padding: 1rem;
    border-bottom: 1px solid #e1e3e5;
    text-align: left;
}

.woocommerce-cart table.shop_table td {
    padding: 1rem;
    border-top: 1px solid #e1e3e5;
    vertical-align: middle;
}

.woocommerce-cart table.shop_table td.product-thumbnail img {
    border-radius: 4px;
    max-width: 80px;
    height: auto;
}


/* ---------- Warenkorb: Mengen- und Coupon-Feld ---------- */
.woocommerce-cart .quantity .qty,
.woocommerce-cart .coupon input#coupon_code {
    min-height: 42px;
    padding: 0.5rem 0.7rem;
    border: 1px solid #babfc4;
    border-radius: 4px;
    background: #fff;
    font-size: 1rem;
}

.woocommerce-cart .quantity .qty {
    text-align: center;
    min-width: 70px;
}

.woocommerce-cart .quantity .qty:focus,
.woocommerce-cart .coupon input#coupon_code:focus {
    outline: none;
    border-color: #202223;
    box-shadow: 0 0 0 1px #202223;
}

/* Coupon-Container: Input und Button auf gleiche Hoehe (Flexbox) */
.woocommerce-cart .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.woocommerce-cart .coupon input#coupon_code {
    flex: 1 1 200px;
    min-width: 0;
}

.woocommerce-cart .coupon button[name="apply_coupon"],
.woocommerce-cart .coupon .button {
    min-height: 42px;
    padding: 0.5rem 1.1rem;
    border-radius: 4px;
    line-height: 1.2;
    white-space: nowrap;
}


/* ---------- Warenkorb: Bestellsumme als grauer Block ---------- */
.woocommerce-cart .cart_totals {
    background: #f6f6f7;
    border: 1px solid #e1e3e5;
    border-radius: 6px;
    padding: 1.5rem;
}

.woocommerce-cart .cart_totals h2 {
    font-size: 1.15rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.woocommerce-cart .cart_totals table {
    background: transparent;
    border: 0;
    margin-bottom: 1rem;
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e1e3e5;
    padding: 0.75rem 0;
}

.woocommerce-cart .cart_totals .order-total .amount {
    font-size: 1.35rem;
    font-weight: 700;
    color: #3a3a3a;
}

/* MwSt-Hinweis und alle small-Texte in der Bestellsumme dezent halten.
   Hohe Spezifitaet, weil WC und Theme oft eigene Werte setzen. */
.woocommerce-cart .cart_totals small,
.woocommerce-cart .cart_totals .includes_tax,
.woocommerce-cart .cart_totals small.includes_tax,
.woocommerce-cart .cart_totals .order-total small,
.woocommerce-cart .cart_totals .order-total .includes_tax,
.woocommerce-cart .cart_totals td small {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #6d7175 !important;
    line-height: 1.5 !important;
    margin-top: 0.3rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Wichtig: Der MwSt-Hinweis enthaelt selbst ein .amount-Element
   (fuer den Steuerbetrag). Das muss explizit klein gesetzt werden,
   sonst erbt es die 1.35rem-Groesse vom Order-Total-Selektor. */
.woocommerce-cart .cart_totals small .amount,
.woocommerce-cart .cart_totals small bdi,
.woocommerce-cart .cart_totals .includes_tax .amount,
.woocommerce-cart .cart_totals .includes_tax bdi,
.woocommerce-cart .cart_totals .order-total small .amount,
.woocommerce-cart .cart_totals .order-total small bdi {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #6d7175 !important;
}


/* ---------- Warenkorb: Aktualisieren-Button als Sekundaer-Aktion ----------
   Dezent grau und kleiner, damit der primaere CTA ("Zur Kasse") klar
   prominent bleibt. Marken-Orange wird hier per !important
   ueberschrieben, weil der Original-WooCommerce-Block in der style.css
   Orange via !important setzt. */

.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
    background-color: #fff !important;
    color: #6d7175 !important;
    border: 1px solid #d1d3d5 !important;
    font-weight: 500;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.85rem !important;
    min-height: 34px;
    border-radius: 4px;
}

.woocommerce-cart button[name="update_cart"]:hover:not([disabled]),
.woocommerce-cart input[name="update_cart"]:hover:not([disabled]) {
    background-color: #f6f6f7 !important;
    border-color: #6d7175 !important;
    color: #3a3a3a !important;
}

.woocommerce-cart button[name="update_cart"][disabled],
.woocommerce-cart input[name="update_cart"][disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ---------- Warenkorb: "Zur Kasse"-Button als primaerer CTA ----------
   Volle Breite in der Cart-Totals-Box, etwas groesser. Marken-Orange
   bleibt erhalten (kommt aus dem oberen WooCommerce-Block). */

.woocommerce-cart .wc-proceed-to-checkout {
    margin-top: 1rem;
    padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 4px;
    margin: 0;
}


/* ---------- Warenkorb: Zwei-Spalten-Layout auf Desktop (Flexbox) ----------
   Robust gebaut mit Flexbox, festen Pixel-Breiten fuer die Sidebar.
   - Notices oben, voller Breite
   - Tabelle links flexibel
   - Bestellsumme rechts mit fester Breite (340px)
   - Auf Mobile (< 1024px) bleibt das Standard-Layout untereinander.

   Keine sticky-Position (vermeidet Konflikte mit Theme-Header und
   Coolify-Banner). Alle WC-Float-Defaults werden explizit zurueckgesetzt. */

@media (min-width: 1024px) {
    .woocommerce-cart .woocommerce {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: flex-start;
    }

    /* Notices voller Breite, oben */
    .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
        flex: 0 0 100%;
        order: 1;
        margin: 0;
    }

    /* Tabelle/Form: flexibel, fuellt linke Spalte */
    .woocommerce-cart .woocommerce-cart-form {
        flex: 1 1 0;
        min-width: 0;
        order: 2;
        margin: 0;
    }

    /* Cart-Collaterals: feste Breite rechts */
    .woocommerce-cart .cart-collaterals {
        flex: 0 0 340px;
        max-width: 340px;
        order: 3;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    /* Cross-Sells unter der Tabelle, nicht in der Sidebar */
    .woocommerce-cart .cart-collaterals .cross-sells {
        display: none;
    }

    /* WC default float-Reset auf alle Cart-Children */
    .woocommerce-cart .woocommerce > * {
        float: none;
    }

    /* Bestellsumme-Tabelle: Label oben, Wert darunter ----------
       Bei der schmalen Sidebar (340px) wuerde Versand-Adresse oder
       MwSt-Zeile nicht in eine Spalte passen. Deshalb stacken wir die
       beiden Zellen pro Row untereinander. */
    .woocommerce-cart .cart_totals table tr {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #e1e3e5;
        padding: 0.65rem 0;
    }

    .woocommerce-cart .cart_totals table tr:last-child {
        border-bottom: 0;
    }

    .woocommerce-cart .cart_totals table th,
    .woocommerce-cart .cart_totals table td {
        background: transparent;
        border: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: left !important;
    }

    .woocommerce-cart .cart_totals table th {
        font-size: 0.78rem;
        font-weight: 600;
        color: #6d7175;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.3rem;
    }

    .woocommerce-cart .cart_totals table td {
        font-size: 0.95rem;
        color: #3a3a3a;
        line-height: 1.5;
    }

    /* Versand-Adresse, MwSt-Hinweis innerhalb td als kleinerer Subtext */
    .woocommerce-cart .cart_totals .shipping-calculator-button,
    .woocommerce-cart .cart_totals .woocommerce-shipping-destination,
    .woocommerce-cart .cart_totals small {
        display: block;
        font-size: 0.8rem;
        color: #6d7175;
        margin-top: 0.3rem;
        font-weight: 400;
    }
}


/* ---------- Checkout: Eingabefelder einheitlich ---------- */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    min-height: 46px;
    padding: 0.75rem 0.9rem;
    font-size: 1rem;
    border: 1px solid #babfc4;
    border-radius: 4px;
    background: #fff;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: #202223;
    box-shadow: 0 0 0 1px #202223;
}

.woocommerce-checkout .form-row label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    display: block;
}

.woocommerce-checkout .form-row {
    margin-bottom: 0.85rem;
}


/* ---------- Checkout: Bestelluebersicht als grauer Block ----------
   Gleiche Optik wie Cart-Totals: heller Block, klare Borders,
   Hauptpreis prominent, MwSt-Hinweise dezent.
   Heading "Ihre Bestellung" wird visuell als Teil der Box gerendert
   (oberer Teil), damit es nicht ueber dem Kasten steht. */

/* Heading "Ihre Bestellung" (ID order_review_heading): grauer Container,
   ABER kein Border oben (User-Wunsch, mehrfach bestaetigt). Nur Seiten
   und Verbindung nach unten zur #order_review-Box. */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3#order_review_heading {
    background: #f6f6f7;
    border: 1px solid #e1e3e5;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0;
    padding: 1.25rem 1.5rem 0.75rem;
    margin: 1.5rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #3a3a3a;
    line-height: 1.3;
    text-align: left;
}

/* #order_review schliesst direkt unter dem Heading an: kein border-top,
   nur unten rund. Heading + Box bilden visuell einen Kasten. */
.woocommerce-checkout #order_review {
    background: #f6f6f7;
    border: 1px solid #e1e3e5;
    border-top: 0 !important;
    border-radius: 0 0 6px 6px;
    padding: 0.5rem 1.5rem 1.5rem;
    margin: 0;
}

/* Generelle Sub-Headings im Order-Review/Payment-Bereich,
   z.B. "Zahlungsweise" - klar als Sektion innerhalb des Blocks markiert */
.woocommerce-checkout #order_review h3,
.woocommerce-checkout #order_review h4,
.woocommerce-checkout #payment h3,
.woocommerce-checkout #payment h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #3a3a3a;
    margin: 1.25rem 0 0.6rem;
    padding: 0;
}

.woocommerce-checkout #order_review table.shop_table {
    background: transparent;
    border: 0;
    margin-bottom: 1rem;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e1e3e5;
    padding: 0.9rem 0.25rem;
    line-height: 1.5;
    vertical-align: top;
    color: #3a3a3a;
}

.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td {
    font-weight: 500;
}

.woocommerce-checkout #order_review .order-total .amount {
    font-size: 1.35rem;
    font-weight: 700;
    color: #3a3a3a;
}

.woocommerce-checkout #order_review .order-total th {
    font-weight: 700;
    color: #3a3a3a;
}


/* ---------- Checkout: Variantenliste kompakter ----------
   Vorher:  Druck: \n Leinwanddruck 2 cm Tiefe \n Format: \n 100 x 100 cm
   Nachher: Druck: Leinwanddruck 2 cm Tiefe
            Format: 100 x 100 cm
   Funktioniert fuer beide WC-Markup-Varianten:
   - dl.variation (klassisch)
   - ul.wc-item-meta (neuer) */

/* Variante A: dl.variation */
.woocommerce-checkout #order_review td.product-name dl.variation {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.5rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
    font-size: 0.9rem;
    color: #6d7175;
    line-height: 1.5;
}

.woocommerce-checkout #order_review td.product-name dl.variation dt {
    font-weight: 600;
    margin: 0;
}

.woocommerce-checkout #order_review td.product-name dl.variation dd {
    margin: 0;
}

.woocommerce-checkout #order_review td.product-name dl.variation dd p {
    margin: 0;
}

/* Variante B: ul.wc-item-meta */
.woocommerce-checkout #order_review td.product-name .wc-item-meta {
    list-style: none;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
    font-size: 0.9rem;
    color: #6d7175;
    line-height: 1.5;
}

.woocommerce-checkout #order_review td.product-name .wc-item-meta li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.15rem 0;
    padding: 0;
}

.woocommerce-checkout #order_review td.product-name .wc-item-meta li strong {
    font-weight: 600;
    margin: 0;
}

.woocommerce-checkout #order_review td.product-name .wc-item-meta li p {
    margin: 0;
}

/* MwSt-Hinweis abgesetzt vom Hauptpreis */
.woocommerce-checkout #order_review .includes_tax,
.woocommerce-checkout #order_review small.includes_tax,
.woocommerce-checkout #order_review td small {
    display: block !important;
    margin-top: 0.3rem !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #6d7175 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Wichtig: Der MwSt-Hinweis enthaelt selbst ein .amount-Element
   (fuer den Steuerbetrag). Das muss explizit klein gesetzt werden,
   sonst erbt es die 1.2rem-Groesse vom Order-Total-Selektor. */
.woocommerce-checkout #order_review small .amount,
.woocommerce-checkout #order_review small bdi,
.woocommerce-checkout #order_review .includes_tax .amount,
.woocommerce-checkout #order_review .includes_tax bdi,
.woocommerce-checkout #order_review .order-total small .amount,
.woocommerce-checkout #order_review .order-total small bdi {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #6d7175 !important;
}


/* ---------- Checkout: Zahlungsmethoden mit Atem ----------
   Beschreibungs-Box der Zahlungsmethode (z.B. "Direkte Bankueberweisung")
   bekommt Abstand zum Label und etwas mehr Innen-Padding.

   #payment bekommt eigenen grauen Container. Falls direkt davor ein
   h3/h4 "Zahlungsweise" steht, wird das Heading visuell auf den
   Container draufgesetzt (gleicher Hintergrund + obere Rundung). */

.woocommerce-checkout #payment {
    background: #f6f6f7;
    border: 1px solid #e1e3e5;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

/* Falls #payment innerhalb #order_review liegt, kein doppelter Block */
.woocommerce-checkout #order_review #payment {
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: 0;
}

/* Heading direkt vor #payment (z.B. "Zahlungsweise") wird Teil des
   grauen Blocks: gleicher Hintergrund, obere Rundung.
   Selektor mit :has() greift unabhaengig von der DOM-Position. */
.woocommerce-checkout h3:has(+ #payment),
.woocommerce-checkout h4:has(+ #payment),
.woocommerce-checkout h3:has(+ .woocommerce-checkout-payment),
.woocommerce-checkout h4:has(+ .woocommerce-checkout-payment) {
    background: #f6f6f7;
    border: 1px solid #e1e3e5;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    padding: 1.25rem 1.5rem 0.5rem;
    margin: 1.5rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #3a3a3a;
    line-height: 1.3;
    text-align: left;
}

/* #payment direkt nach so einem Heading: oben kein Radius, kein margin */
.woocommerce-checkout h3 + #payment,
.woocommerce-checkout h4 + #payment {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 0.5rem 0;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    display: inline-block;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.woocommerce-checkout #payment div.payment_box {
    margin-top: 0.6rem;
    padding: 1rem 1.15rem;
    line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box p {
    margin: 0 0 0.5rem;
}

.woocommerce-checkout #payment div.payment_box p:last-child {
    margin-bottom: 0;
}


/* ---------- Checkout: Bestell-Button (groesser, voller Breite) ----------
   Hinweis: Farbe NICHT ueberschrieben. Marken-Orange aus dem
   WooCommerce-Block oben (#f39022, Hover #d97a13) bleibt erhalten. */
.woocommerce-checkout #payment #place_order {
    width: 100%;
    min-height: 54px;
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 1rem;
    border-radius: 4px;
}


/* ---------- Produktuebersicht: Karten-Layout ----------
   Greift auf allen Produkt-Listings (Shop, Kategorie, Tag, Suche).
   Jedes Produkt bekommt einen weissen Karten-Container mit dezentem
   Rahmen, einheitlichem Padding und einem leichten Hover-Effekt.
   Marken-Orange-Buttons bleiben unveraendert. */

.woocommerce ul.products {
    gap: 1.75rem;
}

.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid #e1e3e5;
    border-radius: 6px;
    padding: 1rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
    border-color: #babfc4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.woocommerce ul.products li.product a img {
    margin-bottom: 1rem;
    border-radius: 4px;
}

/* Titel: einheitliche Groesse und Abstand, unabhaengig vom Theme-Heading */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 0.5rem;
    padding: 0;
}

.woocommerce ul.products li.product .star-rating {
    margin-bottom: 0.5rem;
}

/* Preis am unteren Kartenrand verankern, dezent eingebunden
   im Stil von Shopify-Shops (Snocks, Allbirds, etc.):
   kleinere Schriftgroesse, Regular-Gewicht, Sale-Preis daneben statt drueber.
   Wichtig: ALLE Kind-Elemente (.amount, bdi, span, ins) per !important
   auf Regular-Gewicht setzen, sonst erbt WC/Theme den Default-Bold. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price * {
    font-weight: 400 !important;
}

.woocommerce ul.products li.product .price {
    margin-top: auto;
    margin-bottom: 0.75rem;
    padding-top: 0.85rem;
    font-size: 0.9rem;
    color: #202223;
    line-height: 1.4;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi {
    font-weight: 400 !important;
    color: inherit;
}

/* Sale-Preis (durchgestrichen) dezent grau, daneben statt darueber */
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del * {
    color: #8c9196 !important;
    opacity: 1;
    font-weight: 400 !important;
    font-size: 0.82rem;
    margin: 0;
    text-decoration-thickness: 1px;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins * {
    background: none;
    text-decoration: none;
    color: #202223 !important;
    font-weight: 400 !important;
}

/* "ab"-Hinweis bei variablen Produkten ruhiger einbinden */
.woocommerce ul.products li.product .price .from,
.woocommerce ul.products li.product .price small {
    font-size: 0.75rem;
    color: #6d7175 !important;
    font-weight: 400 !important;
}

/* Button direkt unter dem Preis, ohne zusaetzliche Luecke */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    margin-top: 0;
}


/* ---------- Einzel-Produkt: Preis dezent, Premium-Look ----------
   Statt grossem, fetten Preis (Discounter-Optik) ein selbstbewusst
   mittelgrosser, mittelschwerer Preis. Kommuniziert Wert ohne
   zu schreien. MwSt-Hinweis und Versand-Info dezent darunter.
   Greift auf der Einzelproduktseite (.single-product .summary). */

.woocommerce div.product .summary .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    color: #202223 !important;
    line-height: 1.4 !important;
    margin: 0.5rem 0 1rem !important;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.woocommerce div.product .summary .price *,
.woocommerce div.product p.price *,
.woocommerce div.product span.price * {
    font-weight: 500 !important;
}

.woocommerce div.product .summary .price .amount,
.woocommerce div.product .summary .price bdi,
.woocommerce div.product p.price .amount,
.woocommerce div.product p.price bdi {
    font-weight: 500 !important;
    color: inherit;
}

/* Sale-Preis: Originalpreis durchgestrichen kleiner und grau, neuer Preis daneben */
.woocommerce div.product .summary .price del,
.woocommerce div.product .summary .price del *,
.woocommerce div.product p.price del,
.woocommerce div.product p.price del * {
    color: #8c9196 !important;
    opacity: 1;
    font-weight: 400 !important;
    font-size: 1.05rem !important;
    margin: 0;
    text-decoration-thickness: 1px;
}

.woocommerce div.product .summary .price ins,
.woocommerce div.product .summary .price ins *,
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins * {
    background: none;
    text-decoration: none;
    color: #202223 !important;
    font-weight: 500 !important;
}

/* MwSt-Hinweis ("inkl. MwSt." / "zzgl. Versand") und WC German Market Suffix
   unterhalb des Preises dezent als kleinen grauen Subtext. */
.woocommerce div.product .summary .price .woocommerce-de_price_taxrate,
.woocommerce div.product .summary .price .woocommerce_de_versandkosten,
.woocommerce div.product .summary .price small,
.woocommerce div.product .woocommerce-de_price_taxrate,
.woocommerce div.product .woocommerce_de_versandkosten,
.woocommerce div.product .summary > .woocommerce-de_price_taxrate,
.woocommerce div.product .summary > .woocommerce_de_versandkosten {
    display: block !important;
    width: 100%;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: #6d7175 !important;
    line-height: 1.5 !important;
    margin: 0.15rem 0 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* ---------- Produkt-Tabs: Aktiver Tab in Marken-Orange ----------
   Beschreibung / Zusaetzliche Information / Bewertungen.
   Standard-Blau wird ueberschrieben. */

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #f39022 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: #f39022 !important;
}


/* ---------- Tab "Zusaetzliche Information": Tabelle aufgeraeumt ----------
   Klare Spalten, grauer Label-Hintergrund, abgerundete Ecken,
   gleiche Optik wie Warenkorb- und Checkout-Tabellen. */

.woocommerce div.product .woocommerce-product-attributes,
.woocommerce div.product table.shop_attributes {
    border: 1px solid #e1e3e5;
    border-radius: 6px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-top: 1rem;
    overflow: hidden;
}

.woocommerce div.product .woocommerce-product-attributes tr,
.woocommerce div.product table.shop_attributes tr {
    border-bottom: 1px solid #e1e3e5;
}

.woocommerce div.product .woocommerce-product-attributes tr:last-child,
.woocommerce div.product table.shop_attributes tr:last-child {
    border-bottom: 0;
}

.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes td,
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes td {
    padding: 1rem 1.25rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.7;
    color: #3a3a3a;
    border: 0;
    background: #fff;
}

/* Linke Label-Spalte: konstantes Grau, ueberschreibt Theme-Striping */
.woocommerce div.product .woocommerce-product-attributes th,
.woocommerce div.product .woocommerce-product-attributes tr:nth-child(even) th,
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes tr:nth-child(even) th {
    background: #f6f6f7;
    font-weight: 600;
    width: 30%;
    border-right: 1px solid #e1e3e5;
}

/* Rechte Werte-Spalte: konstantes Weiss, ueberschreibt Theme-Striping */
.woocommerce div.product .woocommerce-product-attributes tr:nth-child(even) td,
.woocommerce div.product .woocommerce-product-attributes tr:nth-child(odd) td,
.woocommerce div.product table.shop_attributes tr:nth-child(even) td,
.woocommerce div.product table.shop_attributes tr:nth-child(odd) td {
    background: #fff;
}

.woocommerce div.product .woocommerce-product-attributes td p,
.woocommerce div.product table.shop_attributes td p {
    margin: 0;
    line-height: 1.9;
    word-spacing: 0.04em;
}

/* Komma-getrennte Werte etwas optisch trennen */
.woocommerce div.product .woocommerce-product-attributes td,
.woocommerce div.product table.shop_attributes td {
    word-spacing: 0.04em;
}


/* ---------- Paginierung: Kreise mit Zahlen ----------
   Greift auf Shop-Listen, Kategorien, Tag-Seiten, Suche.
   Aktuelle Seite in Marken-Orange, Hover dezent in Soft-Orange. */

.woocommerce nav.woocommerce-pagination {
    margin: 2.5rem 0 1.5rem;
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    border: 0 !important;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    display: inline-flex;
    border: 0 !important;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid #e1e3e5 !important;
    background: #fff !important;
    color: #3a3a3a !important;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
    background: #fde4c8 !important;
    border-color: #f39022 !important;
    color: #3a3a3a !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current {
    background: #f39022 !important;
    border-color: #f39022 !important;
    color: #fff !important;
    font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.dots,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots {
    background: transparent !important;
    border-color: transparent !important;
    color: #6d7175 !important;
    cursor: default;
}

/* Pfeile (Vor/Zurueck): gleiche Kreis-Optik, Pfeil als Inhalt */
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.prev {
    font-size: 1.1rem;
    line-height: 1;
}


/* ============================================================
   ENDE SHOPIFY-POLISH-BLOCK
   ============================================================ */


/* lato-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/lato-v25-latin-300.woff2') format('woff2');
}
/* lato-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/lato-v25-latin-300italic.woff2') format('woff2');
}
/* lato-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lato-v25-latin-regular.woff2') format('woff2');
}
/* lato-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/lato-v25-latin-italic.woff2') format('woff2');
}
/* lato-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/lato-v25-latin-700.woff2') format('woff2');
}
/* lato-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/lato-v25-latin-700italic.woff2') format('woff2');
}
/* lato-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/lato-v25-latin-900.woff2') format('woff2');
}
/* lato-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/lato-v25-latin-900italic.woff2') format('woff2');
}

/* =====================================================================
   Originalgemaelde: Bestandstext "Unikat von Karin Greife, signiert"
   mit gruenem Haken-im-Kreis davor.
   Markup wird in functions.php ueber malerei_kg_unikat_text() erzeugt
   (Filter woocommerce_get_availability_text).
   ===================================================================== */
.woocommerce p.stock .mkg-unikat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-weight: normal;
  line-height: 1.4;
}

.woocommerce p.stock .mkg-unikat-haken {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  background: #28a745;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

.woocommerce p.stock .mkg-unikat-text {
  color: #000;
}

/* ---------------------------------------------------------------------
   Zahlungsarten-Hinweis unter dem "In den Warenkorb"-Button.
   Markup wird durch GP Pro Hook (woocommerce_after_add_to_cart_button)
   geliefert.
   --------------------------------------------------------------------- */
.mkg-pay {
  display: block;
  width: 100%;
  clear: both;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 14px;
  border-top: 1px solid #e5e5e5;
}

.mkg-pay-headline {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  margin: 0 0 8px;
}

.mkg-pay-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.mkg-pay-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #000;
  line-height: 1;
}

.mkg-pay-item img.mkg-pay-icon {
  height: 22px;
  width: auto;
  display: block;
}

.mkg-pay-item svg.mkg-pay-icon {
  height: 22px;
  width: auto;
  display: block;
  color: #000;
}

/* ---------------------------------------------------------------------
   Dezente Abrundung shop-weit fuer Buttons und Form-Elemente.
   Schliesst die Luecke auf der Produkt-Einzelseite (Variations-Dropdowns,
   Mengen-Feld, Kaufen-Button) und vereinheitlicht das Erscheinungsbild
   mit Cart und Checkout.
   --------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce-page a.button,
.woocommerce-page button.button {
    border-radius: 5px !important;
}

.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .qty,
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border-radius: 5px !important;
}

/* ---------------------------------------------------------------------
   Bestellbestaetigung (order-received): jeder Block als eigene graue
   Box mit abgerundeten Ecken. Inhalte und Reihenfolge bleiben
   unveraendert, jeder Container wird visuell einzeln gerahmt.
   --------------------------------------------------------------------- */
.woocommerce-order-received .woocommerce-order .woocommerce-order-overview,
.woocommerce-order-received .woocommerce-order .woocommerce-bacs-bank-details,
.woocommerce-order-received .woocommerce-order .woocommerce-order-details,
.woocommerce-order-received .woocommerce-order .woocommerce-customer-details {
    background: #f6f6f7;
    border: 1px solid #e1e3e5;
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.woocommerce-order-received .woocommerce-order .woocommerce-order-overview:last-child,
.woocommerce-order-received .woocommerce-order .woocommerce-bacs-bank-details:last-child,
.woocommerce-order-received .woocommerce-order .woocommerce-order-details:last-child,
.woocommerce-order-received .woocommerce-order .woocommerce-customer-details:last-child {
    margin-bottom: 0;
}