/*
Theme Name: DRECKSTÜCKCHEN.DE
Description: Child theme for Avada theme
Author: OLEMEDIEN
Author URI: https://olemedien.de
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/*  GLOBALS     */

.hyphenate h1, .hyphenate h2, .hyphenate h3, .hyphenate h4, .hyphenate h5, .hyphenate h6, .hyphenate p{
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
    hyphens: auto !important;
}

.top-auto-margin{
    margin-top: auto !important;
}
/*  EXTRA PRODUCT OPTIONS – an Avada angeglichen
    ------------------------------------------------------------------
    Die Felder kommen als Tabelle .extra-options. Ob die Bezeichnung links
    oder oberhalb steht, entscheidet EPO selbst über die Feldeinstellung
    „Title Position“ – Klasse .leftside beziehungsweise .above. Hier wird
    ausschließlich .leftside bemaßt, damit diese Wahl erhalten bleibt.
    Abstände und Breiten kommen aus denselben Variablen wie in Avadas
    Variationstabelle, damit beide bei Änderungen am Element mitgehen.  */

.extra-options {
    width: 100%;
}

/*  EPO stellt die Tabelle auf table-layout: fixed. Dadurch wird jede
    Breitenangabe zur harten Spaltenbreite und lange Bezeichnungen brechen
    um. Avadas Variationstabelle laeuft auf auto, die Beschriftungsspalte
    waechst dort mit ihrem Inhalt. Der Selektor ist so lang, weil EPOs
    eigener genauso lang ist – bei gleicher Spezifitaet gewinnt das spaeter
    geladene Stylesheet, und das ist dieses hier.                        */

.woocommerce div.product form.cart table.extra-options {
    table-layout: auto;
    margin: 0 0 30px;
}

/*  Der Abstand zwischen Avada-Teil und EPO-Teil kam aus vier Quellen: der
    letzten Variationszeile, dem Aussenabstand von .single_variation_wrap,
    dem Aussenabstand der Tabelle und EPOs eigener Zellenpolsterung. Hier
    fallen die beiden mittleren weg, damit nur noch der Zeilenabstand zaehlt. */

.single-product .single_variation_wrap {
    margin-top: 0;
}

/*  Zeilenabstand: eine Angabe fuer beide Tabellen. EPO setzt ueber
    .theme-Avada oben und unten je 10px; das wird hier ersetzt.          */

form.variations_form .variations td,
form.variations_form .extra-options td {
    padding-top: 0;
    padding-bottom: var(--dst-woo-row-gap, 5px);
}

.extra-options td {
    vertical-align: middle;
}

/*  Mindestbreite und Spaltenabstand wie bei Avada. Das display: table-cell
    setzt EPO für .leftside bereits selbst.                              */

.extra-options td.label.leftside {
    min-width: var(--awb-variation-label-min-width, 8em);
    padding-right: var(--awb-variation-label-column-gap, 1em);
}

/*  Beide Tabellen teilen sich dieselbe Spaltenbreite, damit die Felder auf
    einer Linie beginnen. Ohne diese Angabe verteilt der Browser den Platz
    je Tabelle nach ihrem Inhalt – Avadas Auswahlfelder und EPOs Textfläche
    sind unterschiedlich breit, und die Spalten laufen auseinander.
    Auf schmalen Bildschirmen bleibt es beim inhaltsabhängigen Verhalten. */

@media only screen and (min-width: 800px) {

    form.variations_form .variations .label,
    form.variations_form .extra-options td.label.leftside {
        width: var(--dst-woo-label-width, 50%);
    }
}

.extra-options td.value.leftside {
    width: 100%;
    min-width: 150px;
}

.extra-options td.label .label-tag {
    display: inline-block;
    margin: 0;
}

/*  Eingabefelder wie Avadas Formularfelder  */

.extra-options .thwepo-input-field {
    box-sizing: border-box;
    width: 100%;
    padding: 0 0.75em;
    border: var(--form_border_width, 1px) solid var(--form_border_color, #d2d2d2);
    border-radius: var(--form_border_radius, 4px);
    background-color: var(--form_bg_color, #fff);
    color: var(--form_text_color, inherit);
    font-size: var(--form_text_size, inherit);
}

.extra-options .thwepo-input-field:focus {
    border-color: var(--form_focus_border_color, var(--primary_color, #d51083));
    outline: none;
}

.extra-options textarea.thwepo-input-field {
    min-height: calc(var(--form_input_height, 40px) * 2);
    padding: 0.6em 0.75em;
    line-height: 1.5;
    resize: vertical;
}

/*  Dateiauswahl: der Knopf im Feld wie eine Avada-Schaltfläche.
    Die beiden Schreibweisen brauchen eigene Regeln – fasst man sie
    zusammen, verwerfen die Browser die ganze Regel.                    */

.extra-options input[type="file"].thwepo-input-field {
    height: auto;
    padding: 0.4em 0.5em;
    line-height: 1.4;
}

.extra-options input[type="file"].thwepo-input-field::file-selector-button {
    margin-right: 0.8em;
    padding: 0.45em 1.1em;
    border: var(--button_border_width, 0) solid var(--button_border_color, transparent);
    border-radius: var(--form_border_radius, 4px);
    background: var(--button_gradient_top_color, var(--primary_color, #d51083));
    color: var(--button_accent_color, #fff);
    font-size: 0.75em;
    line-height: 1.4;
    letter-spacing: var(--button_letter_spacing, 0);
    text-transform: var(--button_text_transform, none);
    cursor: pointer;
}

.extra-options input[type="file"].thwepo-input-field::-webkit-file-upload-button {
    margin-right: 0.8em;
    padding: 0.45em 1.1em;
    border: var(--button_border_width, 0) solid var(--button_border_color, transparent);
    border-radius: var(--form_border_radius, 4px);
    background: var(--button_gradient_top_color, var(--primary_color, #d51083));
    color: var(--button_accent_color, #fff);
    font-size: 0.75em;
    line-height: 1.4;
    letter-spacing: var(--button_letter_spacing, 0);
    text-transform: var(--button_text_transform, none);
    cursor: pointer;
}

.extra-options input[type="file"].thwepo-input-field::file-selector-button:hover {
    background: var(--button_gradient_top_color_hover, var(--button_gradient_top_color, #d51083));
    color: var(--button_accent_hover_color, #fff);
}

.extra-options input[type="file"].thwepo-input-field::-webkit-file-upload-button:hover {
    background: var(--button_gradient_top_color_hover, var(--button_gradient_top_color, #d51083));
    color: var(--button_accent_hover_color, #fff);
}

.extra-options .thwepo-preview-file:not(:empty) {
    margin-top: 0px;
}

/*  GERMAN MARKET – Preiszusätze neben den Preis
    ------------------------------------------------------------------
    German Market hängt hinter den Preis zwei Geschwister: einen span
    mit Steuer- und Versandhinweis und ein div mit der Lieferzeit.

    Zwei Spalten: links der Preis, rechts beide Zusätze untereinander.
    Ein Raster statt einer Flexzeile, weil sich damit die zweite Spalte
    festlegen lässt – sonst rutschte die Lieferzeit unter den Preis.
    Die Grundlinie richtet den ersten Zusatz am Preis aus.              */

.woocommerce-variation-price {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9em;
    row-gap: 0;
    align-items: center;
}

/*  Der Preis laeuft ueber beide Zeilen. Ohne das Uebergreifen bestimmte
    seine Hoehe die erste Rasterzeile, und die Lieferzeit rutschte weit
    nach unten. Seine Zeilenhoehe bleibt die von Avada (1,5) - gemessen
    sitzt der Textblock damit exakt mittig.                             */

.woocommerce-variation-price > .price {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.woocommerce-variation-price > .wgm-info {
    grid-column: 2;
    line-height: 1;
}

/*  Der Preis ist hoeher als beide Texte zusammen; der Ueberschuss wird
    auf beide Rasterzeilen verteilt und schiebt sie auseinander. Deshalb
    haengt der erste Zusatz am unteren Rand seiner Zeile, jeder weitere
    am oberen – so ruecken sie zusammen.

    Der Geschwisterselektor trifft „jedes .wgm-info nach einem .wgm-info“
    und kommt damit ohne :nth-child aus. Das ist hier wichtig, weil die
    beiden Zusaetze unterschiedliche Elementtypen sind (span und div)
    und die Reihenfolge von German Markets Einstellungen abhaengt.       */

.woocommerce-variation-price > .wgm-info {
    align-self: end;
}

.woocommerce-variation-price > .wgm-info ~ .wgm-info {
    align-self: start;
}

/*  Die Zusätze bringen eigene Abstände mit, die in der Zeile stören.  */

.woocommerce-variation-price .wgm-info {
    margin: 0;
}

.woocommerce-variation-price .wgm-info small {
    display: inline;
}

/*  Dasselbe für einfache Produkte
    ------------------------------------------------------------------
    Dort kommt der Preis aus Avadas Woo-Price-Element, und die Zusätze
    stecken zwei Ebenen tiefer in einer Hülle mit inline width:100% –
    die drückt sie unter den Preis. Avadas Flexlayout bleibt erhalten,
    damit Angebots-Abzeichen weiter funktionieren; nur die Breite der
    Hülle wird zurückgenommen und ihr Inhalt gestapelt.                */

.single-product .fusion-woo-price-tb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.9em;
}

.single-product .fusion-woo-price-tb > .price {
    margin: 0;
}

/*  Das inline gesetzte width:100% laesst sich nur so ueberstimmen.     */

.single-product .fusion-woo-price-tb > div:not(.price) {
    width: auto !important;
}

.single-product .fusion-woo-price-tb .legacy-itemprop-offers {
    display: grid;
    row-gap: 0;
}

.single-product .fusion-woo-price-tb .wgm-info {
    line-height: 1;
    margin: 0;
}

/*  Dieselbe Regel wie bei den Variationen: Das small der Lieferzeit soll
    keine eigene Blockhoehe aufmachen, sonst sitzt der Textblock nicht
    mittig zum Preis.                                                    */

.single-product .fusion-woo-price-tb .wgm-info small {
    display: inline;
    line-height: inherit;
}

/*  Der Preiskasten der Varianten ist grau hinterlegt und hat Innenabstand.
    Solange keine Variante gewählt ist, ist er leer und erscheint als
    leerer grauer Balken. WooCommerce füllt ihn bei der Auswahl und blendet
    ihn beim Zurücksetzen selbst wieder aus; ausgeblendet wird hier nur der
    leere Anfangszustand.                                                */

.woocommerce-variation.single_variation:empty {
    display: none;
}

/*  Handy: Zusätze etwas kleiner (German Market setzt 0,8em = 13,6px).
    Neben dem Preis bleibt dort wenig Breite, mit 12px brechen sie
    seltener um. Kleiner nicht: Es sind Pflichtangaben (MwSt., Versand,
    Lieferzeit), die gut lesbar bleiben müssen.                          */

@media (max-width: 640px) {
    .woocommerce-variation-price .wgm-info,
    .single-product .fusion-woo-price-tb .wgm-info {
        font-size: 12px;
    }
}

/* --- Schaltflächen in Produkttexten ------------------------------------- */

/*
 * Links mit den Klassen .button-extra .dst-cta stammen aus den alten
 * Kurzbeschreibungen. Sie übernehmen sämtliche Werte der Avada
 * Button-Optionen, damit sie sich mitändern, wenn dort etwas angepasst wird.
 * Die Rückfallwerte entsprechen der aktuellen Einstellung des Shops.
 */
.fusion-body a.button-extra.dst-cta {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var( --button_padding-top, 13px ) var( --button_padding-right, 29px ) var( --button_padding-bottom, 13px ) var( --button_padding-left, 29px );
    border-width: var( --button_border_width-top, 0 ) var( --button_border_width-right, 0 ) var( --button_border_width-bottom, 0 ) var( --button_border_width-left, 0 );
    border-style: solid;
    border-color: var( --button_border_color, transparent );
    border-radius: var( --button-border-radius-top-left, 0 ) var( --button-border-radius-top-right, 0 ) var( --button-border-radius-bottom-right, 0 ) var( --button-border-radius-bottom-left, 0 );
    background-color: var( --button_gradient_top_color, #d51083 );
    background-image: var( --button_gradient, none );
    box-shadow: var( --button_box_shadow, none );
    color: var( --button_accent_color, #ffffff );
    font-family: var( --button_typography-font-family, inherit );
    font-size: var( --button_font_size, 14px );
    font-weight: var( --button_typography-font-weight, 700 );
    line-height: var( --button_line_height, 1.3 );
    letter-spacing: var( --button_typography-letter-spacing, normal );
    text-align: center;
    text-decoration: none;
    text-transform: var( --button_text_transform, uppercase );
    transition: background-color 0.2s, background-image 0.2s, border-color 0.2s, color 0.2s;
}

.fusion-body a.button-extra.dst-cta:hover,
.fusion-body a.button-extra.dst-cta:focus {
    border-color: var( --button_border_hover_color, transparent );
    background-color: var( --button_gradient_top_color_hover, #4d062f );
    background-image: var( --button_gradient_hover, none );
    color: var( --button_accent_hover_color, #ffffff );
    text-decoration: none;
}

/* --- Produkt-Tabs: Überschriften und Merkmalslisten --------------------- */

/*
 * Die Überschrift im Tab stammt aus dem WooCommerce-Template und trägt keine
 * eigene Klasse. Die Größen sind bewusst fest gesetzt und folgen nicht den
 * Avada-Vorgaben, damit die Tabs unabhängig von den Theme-Optionen bleiben.
 */
/*
 * Avada ersetzt das WooCommerce-Template: Die Überschrift des Tabs ist eine
 * h3 mit eigener Klasse, keine h2. Sie bekommt 30px, die Zwischen-
 * überschriften im Text 20px.
 */
.fusion-body .fusion-woo-tabs-tb .woocommerce-Tabs-panel h2.fusion-woocommerce-tab-title,
.fusion-body .single-product .woocommerce-tabs h2.fusion-woocommerce-tab-title,
.fusion-body .woocommerce-Tabs-panel h2.fusion-woocommerce-tab-title {
    font-size: 30px;
}

.fusion-body .woocommerce-Tabs-panel h3:not( .fusion-woocommerce-tab-title ),
.fusion-body .post-content h3:not( .fusion-woocommerce-tab-title ) {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 20px;
}

/*
 * Merkmalslisten: Merkmal und Wert stehen ab Tablet nebeneinander, auf
 * schmalen Geräten untereinander. Ohne Aufzählungszeichen, damit es wie
 * eine Tabelle wirkt.
 */
.fusion-body .woocommerce-Tabs-panel ul.p1x-merkmale {
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

/*
 * Raster statt Flexbox: Der Wert bleibt auch dann in seiner Spalte, wenn er
 * aus einem ganzen Satz besteht, und bricht dort um. Auf schmalen Geräten
 * steht er unter dem Merkmal.
 */
.fusion-body .woocommerce-Tabs-panel ul.p1x-merkmale li {
    display: grid;
    gap: 0 1em;
    padding: 3px 0;
}

@media ( min-width: 640px ) {

    .fusion-body .woocommerce-Tabs-panel ul.p1x-merkmale li {
        grid-template-columns: 14em 1fr;
    }
}

/* --- Warenkorb im Menü ------------------------------------------------- */

/*
 * Avada gibt das Produktbild dort direkt über get_the_post_thumbnail() aus,
 * ohne eigenen Filter. Ausblenden geht deshalb nur über CSS. Die Breite der
 * Textspalte ist bei Avada um die Bildbreite verringert und wird hier
 * wieder auf die volle Breite gesetzt.
 */
.fusion-body .awb-menu__sub-li.fusion-menu-cart-item img,
.fusion-body .fusion-menu-cart-item img {
    display: none;
}

/*
 * Der Textblock ist bei Avada nur so breit wie sein Inhalt. Ohne die volle
 * Breite hätte eine Ausrichtung keinen Effekt, weil kein freier Platz bleibt.
 */
.fusion-body .awb-menu__sub-li .fusion-menu-cart-item-details,
.fusion-body .fusion-menu-cart-item-details {
    flex: 1 1 auto;
    max-width: 100%;
    text-align: right;
}

/* --- Formlare ------------------------------------------------- */

.anfrage-nach-mass-produkt label{
    display: none !important;
}


/* --- Mobil-Optimierung ---------------------------------------- */

/*
 * Alles, was nur auf kleinen Bildschirmen gelten soll. Der Schaltpunkt
 * 640px entspricht Avadas eigenem Wert für „klein" (visibility_small).
 */

@media ( max-width: 640px ) {

    /*
     * Slider: Die Unterzeile soll deutlich kleiner sein als die
     * Überschrift. Avadas responsive Typografie staucht die Rangfolge auf
     * dem Handy zusammen — die Überschrift schrumpft von 60px auf rund
     * 23px, die Unterzeile aber nur von 24px auf 22px. Beide wirken dann
     * gleich wichtig.
     *
     * Das !important ist hier nötig und bewusst gesetzt: Der Slider
     * schreibt die Größe inline an das Element (style="font-size:1em;
     * --fontSize:24"), dagegen kommt eine normale Regel nicht an.
     */
    .fusion-body .tfs-slider .slide-content-container h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    /*
     * Die Beschriftungen stehen in halbdurchsichtigen Kästen. Avada gibt
     * dem Titel darin auf kleinen Bildschirmen 10px Abstand nach oben
     * (--awb-margin-top-small), nach unten keinen. Dadurch klebt der Text
     * am unteren Rand seines Kastens statt mittig darin zu sitzen.
     *
     * Der Abstand wandert deshalb vom Titel in die Polsterung des Kastens:
     * oben wie unten 8px. Die Gesamthöhe bleibt dadurch unverändert, nur
     * der Text sitzt jetzt mittig. Auch hier kommen die Werte inline vom
     * Slider, daher wieder !important.
     *
     * Das display:flex löst ein zweites Problem: Der Titel-Container
     * behält die unskalierte Schriftgröße der Desktop-Ansicht (60px)
     * und erzeugt damit eine 60px hohe Grundlinie. Einzeilige
     * Überschriften saßen deshalb am unteren Rand ihres Kastens -
     * 36px Luft oben, 9px unten. Flex kennt diese Grundlinie nicht,
     * der Kasten umschließt den Text wieder eng.
     */
    .fusion-body .tfs-slider .fusion-title-sc-wrapper .fusion-title {
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .fusion-body .tfs-slider .fusion-title-sc-wrapper {
        padding: 8px 15px !important;
    }

}

/* --- Off Canvas ------------------------------------------------ */

/*
 * Off-Canvas: Spalte auf volle Höhe, damit der Fußbereich unten sitzt.
 *
 * Die eigentliche Verteilung macht die Element-Option „Content Alignment:
 * space-between" an der Spalte. Die wirkt laut Avada aber nur bei Spalten
 * voller Höhe — und im Off Canvas greifen die dafür vorgesehenen
 * Container-Optionen (100% Height, Equal Heights) nicht, weil sie mit der
 * Fensterhöhe rechnen und nicht mit der des Panels. Diese eine Zeile liefert
 * die Höhe nach, den Rest erledigt die Option.
 */
.awb-off-canvas .off-canvas-content > .fusion-fullwidth,
.awb-off-canvas .fusion-builder-row > .fusion-layout-column {
    flex: 1 1 auto;
}

.awb-off-canvas .fusion-layout-column > .fusion-column-wrapper {
    height: 100%;
}

/* --- Produktraster (Post Cards) ---------------------------------------- */

/*
 * Im Custom CSS der Avada-Globaloptionen stehen `#content ul { margin-left: 20px }`
 * und `#content li { padding-left: 0 }`. Beides trifft auch die Raster der Post
 * Cards (ul/li): Das Raster rutscht 20px nach rechts, und links fehlt die halbe
 * Spaltenlücke. Hier bekommen Raster und Karten ihre Abstände zurück, links
 * genauso wie rechts.
 */
#content .fusion-post-cards ul.fusion-grid {
    margin-left: calc(var(--awb-pc-column-space) / -2);
}

#content .fusion-post-cards ul.fusion-grid > li.fusion-grid-column {
    padding-left: calc(var(--awb-pc-column-space) / 2);
}

/* Gleiche Ursache beim Sortier-Element: Die Mengen-Buttons (24/48/72) sind eine ul. */
#content .fusion-woo-sorting ul {
    margin-left: 0;
}

/* --- Handy: Produkt-Tabs und Überschriften im Text ---------------------- */

@media (max-width: 640px) {

    /*
     * Avada setzt dem Tab-Inhalt bis 800px pauschal 4% Innenabstand, auf dem
     * Handy knapp 13px. Die Element-Option „Content Padding“ gilt für alle
     * Geräte (Desktop 40px), deshalb hier nur der Handy-Wert. Avada setzt
     * die 4% mit !important, also geht es nur mit !important.
     */
    #wrapper .fusion-woo-tabs-tb .woocommerce-tabs .panel {
        padding: 20px !important;
    }

    /*
     * Überschriften in Text-Elementen nutzen die Abstände der Typografie-
     * Einstellungen (h2: oben 0, unten 1em). Auf dem Handy klebt die
     * Überschrift dadurch am vorherigen Absatz und steht weit weg von ihrem
     * eigenen Text. Hier umgekehrt: Luft nach oben, dicht am eigenen Text.
     * Unten 15px wie beim Title-Element (Global Options, Title Margin Mobile).
     * h3 fehlt absichtlich: Dafür gilt oben die Regel „Produkttexte“ (10px).
     */
    .fusion-text h1,
    .fusion-text h2 {
        margin-top: 30px;
        margin-bottom: 15px;
    }

    .fusion-text h4,
    .fusion-text h5,
    .fusion-text h6 {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .fusion-text > h1:first-child,
    .fusion-text > h2:first-child,
    .fusion-text > h4:first-child,
    .fusion-text > h5:first-child,
    .fusion-text > h6:first-child {
        margin-top: 0;
    }
}

/* --- „Mehr lesen“ (Avada Collapse) als Textlink -------------------------- */

/*
 * Avada baut den Knopf zum Ein-/Ausklappen als normalen Button mit den
 * globalen Button-Farben; eine eigene Option für sein Aussehen gibt es
 * nicht. Hier wird er zum Textlink: kein Innenabstand, kein Hintergrund
 * (auch nicht beim Überfahren), Schrift in der Markenfarbe. Linksbündig
 * steht er über die Element-Option „Button Alignment“.
 */
.awb-collapse-trigger-wrapper .awb-collapse-trigger.fusion-button,
.awb-collapse-trigger-wrapper .awb-collapse-trigger.fusion-button:hover,
.awb-collapse-trigger-wrapper .awb-collapse-trigger.fusion-button:focus {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--awb-color4);
}

/* Avada gibt der Schrift im inneren span eine eigene (weiße) Farbe. */
.awb-collapse-trigger-wrapper .awb-collapse-trigger.fusion-button .fusion-button-text,
.awb-collapse-trigger-wrapper .awb-collapse-trigger.fusion-button i {
    color: inherit;
}

.awb-collapse-trigger-wrapper .awb-collapse-trigger.fusion-button:hover .fusion-button-text,
.awb-collapse-trigger-wrapper .awb-collapse-trigger.fusion-button:focus-visible .fusion-button-text {
    text-decoration: underline;
}

/* =========================================================================
 * Warenkorb, Kasse, Mein Konto (07.11.2026)
 * ========================================================================= */

/* --- Warenkorb (Avada-Elemente, Seite 215) ------------------------------- */

/* Gesamtsumme hervorheben, wie die Summe in der Kasse. Nur der Betrag,
   nicht die enthaltene MwSt. darunter. */
.fusion-woo-cart-totals-wrapper tr.order-total td > strong .woocommerce-Price-amount {
	font-size: 20px;
	font-weight: 700;
}

/* German-Market-Hinweis unter der Tabelle: Links in Magenta. Avada färbt
   alle Links der Tabelle mit !important über --awb-text-color. Die Variable
   wird hier nur an den Links dieser Zeile umgesetzt, Produktnamen bleiben, wie sie sind. */
.p1x-woo-cart table.shop_table.cart td.actions a {
	--awb-text-color: var(--awb-color4);
}
.p1x-woo-cart table.shop_table.cart td.actions a:hover,
.p1x-woo-cart table.shop_table.cart td.actions a:focus-visible {
	text-decoration: underline;
}

/* Versandarten: Avadas Ersatz-Radiobutton hat einen fast unsichtbaren
   hellgrauen Rand. Dunkler, wie die Felder in der Kasse. */
.fusion-woo-cart-totals-wrapper #shipping_method li input:not(:checked) + label::before {
	border-color: #949494;
}

/* Handy: Produktzeile kompakt. Bild links, Name und Varianten rechts,
   darunter Einzelpreis, Menge und Summe in einer Reihe. */
@media (max-width: 640px) {
	.p1x-woo-cart table.shop_table.cart {
		margin-top: 15px;
	}
	.p1x-woo-cart table.shop_table.cart tr.cart_item {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 15px;
		padding: 20px 0;
	}
	.p1x-woo-cart table.shop_table.cart tr.cart_item td {
		padding: 0;
		border: 0;
		text-align: left;
	}
	.p1x-woo-cart table.shop_table.cart tr.cart_item td::before {
		display: none;
	}
	.p1x-woo-cart table.shop_table.cart tr.cart_item td.product-name {
		grid-column: 1 / -1;
		padding-right: 30px;
	}
	.p1x-woo-cart table.shop_table.cart .fusion-product-name-wrapper {
		display: flex;
		align-items: flex-start;
		gap: 15px;
		text-align: left;
	}
	.p1x-woo-cart table.shop_table.cart .product-thumbnail {
		flex: 0 0 90px;
		margin: 0;
	}
	.p1x-woo-cart table.shop_table.cart .product-thumbnail img {
		width: 90px;
		height: auto;
	}
	.p1x-woo-cart table.shop_table.cart .product-info {
		margin: 0;
		text-align: left;
	}
	.p1x-woo-cart table.shop_table.cart dl.variation dd {
		margin-left: 0;
	}
	.p1x-woo-cart table.shop_table.cart tr.cart_item td.product-subtotal {
		text-align: right;
	}
	.p1x-woo-cart table.shop_table.cart tr.cart_item td.product-remove {
		top: 20px;
	}
	.p1x-woo-cart table.shop_table.cart td.actions {
		text-align: left;
	}
}

/* --- Kasse (WooCommerce-Block, Seite 216) -------------------------------- */

/* Bestellknopf wie die Avada-Buttons: Magenta, fett, Großbuchstaben. */
.wc-block-checkout .wc-block-components-checkout-place-order-button {
	min-height: 56px;
	padding: 13px 29px;
	border: 0;
	border-radius: 0;
	background: var(--button_gradient_top_color);
	color: var(--button_accent_color);
	font-family: var(--button_typography-font-family);
	font-size: var(--button_font_size, 16px);
	font-weight: 700;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	transition: background-color 0.2s;
}
.wc-block-checkout .wc-block-components-checkout-place-order-button:not(:disabled):hover,
.wc-block-checkout .wc-block-components-checkout-place-order-button:not(:disabled):focus {
	background: var(--button_gradient_top_color_hover);
	color: var(--button_accent_hover_color);
}

/* Eingabefelder wie die Avada-Formulare: 6px Rundung, ruhigerer Rahmen,
   Magenta beim Fokus. Der Rahmen bleibt dunkel genug für 3:1 Kontrast. */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-textarea,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-checkout .wc-block-components-address-card {
	border-color: #949494;
	border-radius: 6px;
}
.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-textarea:focus,
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--awb-color4);
	box-shadow: 0 0 0 1px var(--awb-color4);
	outline: 0;
}

/* Ausgewählte Optionen, Radio-Buttons und Checkboxen in Magenta. */
.wc-block-checkout .wc-block-checkout__shipping-method-option--selected,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--awb-color4);
	box-shadow: inset 0 0 0 1.5px var(--awb-color4);
}
.wc-block-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--awb-color4);
}
.wc-block-checkout .wc-block-components-radio-control__input:checked::before {
	background: var(--awb-color4);
}
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--awb-color4);
}
.wc-block-checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--awb-color4);
}

/* Bestellübersicht: Produktname war 20px fett und brach mitten im Wort um.
   Er ist ein h3, daher h3 im Selektor gegen die h3-Regel weiter oben. */
.fusion-body .wc-block-checkout .wc-block-components-order-summary-item__description h3.wc-block-components-product-name {
	margin: 0 0 5px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}

/* German Market: Den Schritt „Zusätzliche Versandinformationen“ nur zeigen,
   wenn es etwas einzugeben gibt (DHL-Postnummer, Abholort, Wunschtag …).
   Sonst steht dort nur „Keine zusätzlichen Versandinformationen erforderlich“.
   Erkennbar ist der leere Zustand an dem Absatz, den German Market dann
   sichtbar schaltet. Ändert German Market das Markup, erscheint der Schritt
   einfach wieder. */
.wc-block-checkout .wc-block-checkout__shipping-option:has(.german-market-shipping-input-delivery-day):has(.wc-block-components-checkout-step__content > div[style*="display: block"] > p:only-child) {
	display: none;
}

/* German Market: Gewährleistungs-Label (EU-Pflicht seit 27.09.2026).
   Inhalt und Layout des Labels sind fest vorgegeben, nicht verändern und
   nicht einklappen (laut Händlerbund und IT-Recht Kanzlei unzulässig).
   Die Breite steht am Block selbst (maxWidthPx 520, displayType full).
   Hier nur ein ruhiger Rahmen mit kurzer Einleitung, damit es nicht wie
   hineingeklebt wirkt. */
.wc-block-checkout .german-market-legal-guarantee-label-block {
	margin-top: 40px;
	padding: 20px;
	border: 1px solid var(--awb-color3);
	background: var(--awb-custom_color_1);
}
.wc-block-checkout .german-market-legal-guarantee-label-block::before {
	content: "Ihre gesetzlichen Rechte als Verbraucher";
	display: block;
	margin-bottom: 12px;
	color: var(--awb-color6);
	font-size: 14px;
	font-weight: 500;
}
.wc-block-checkout .german-market-legal-guarantee-label-block figure {
	margin: 0;
}

@media (max-width: 640px) {
	.wc-block-checkout.wp-block-woocommerce-checkout {
		padding-top: 0;
	}
	/* Handy: kein Kasten, das Label braucht jeden Pixel Breite, damit die
	   kleine Schrift im Bild lesbar bleibt. */
	.wc-block-checkout .german-market-legal-guarantee-label-block {
		margin-top: 30px;
		padding: 0;
		border: 0;
		background: none;
	}
	/* Umschalter Versand / Abholung untereinander statt nebeneinander.
	   Nebeneinander brach „Abholung vor Ort (Click & Collect)“ auf vier
	   Zeilen um. Der Text selbst ist der Name der Versandart (WooCommerce →
	   Versand → Abholung vor Ort) und steht auch in Bestellungen. */
	.wc-block-checkout .wc-block-checkout__shipping-method-container {
		flex-direction: column;
	}
	.wc-block-checkout .wc-block-checkout__shipping-method-option {
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 52px;
		padding: 12px 16px;
	}
	.wc-block-checkout .wc-block-checkout__shipping-method-option-title {
		line-height: 1.3;
	}
	.wc-block-checkout .wc-block-components-checkout-place-order-button {
		width: 100%;
	}
}

/* --- Mein Konto (Anmeldung und Registrierung) ----------------------------- */

/* Checkboxen größer, mit Abstand zum Text und in Magenta. Die Box sitzt
   absolut, damit der Text samt Pflicht-Sternchen normal umbricht. */
.woocommerce-account .woocommerce-form__label-for-checkbox {
	position: relative;
	padding-left: 28px;
	cursor: pointer;
}
.woocommerce-account .woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox {
	position: absolute;
	top: 3px;
	left: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--awb-color4);
}

/* „Angemeldet bleiben“ neben dem Button, auf dem Handy darüber.
   Avada setzt hier eigene Regeln mit #customer_login, daher die lange Kette. */
.woocommerce-account .woocommerce #customer_login .login .form-row:has(.woocommerce-form-login__rememberme) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px 25px;
	width: 100%;
	margin: 0;
}
.woocommerce-account .woocommerce #customer_login .login .woocommerce-form-login__rememberme {
	padding: 0 0 0 28px;
}
.woocommerce-account .woocommerce #customer_login .login .lost_password {
	margin-top: 15px;
}
@media (max-width: 640px) {
	.woocommerce-account .woocommerce #customer_login .login .woocommerce-form-login__rememberme {
		order: 1;
	}
	.woocommerce-account .woocommerce #customer_login .login .woocommerce-form-login__submit {
		order: 2;
		width: 100%;
	}
}