.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-2 {
    max-width: none;
}


.woocommerce-page .page-content {
    padding-top: 20px;
    margin-bottom: 30px;
}
@media (max-width: 767px){
    .woocommerce-page .page-content{
        padding-top: 10px;
    }
}

/*
    Standard Elemente
*/

.woocommerce-info,
.woocommerce-message {
    border-top-color: var(--color-main);
}

.nice-select {
    border-radius: var(--button-corners);
    border-color: #ddd;
    width: 100%;
    margin-bottom: 20px;
}
.nice-select:hover {
    border-color: black;
}

select.woof_select{
    width: 100%;
}

.wc-block-components-panel__button{
    padding: 10px 15px !important;
}

/*
    WooCommerce Standard Buttons
*/
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled],
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled[disabled],
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:disabled[disabled]:hover{
    background-color: var(--color-main);
    color: #fff;
}

/*
    Woocommerce Standard Buttons on hover
*/
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
    background-color: var(--color-main);
    color: black;
    -webkit-font-smoothing: antialiased;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:hover {
    background-color: #231f1e;
    color: #fff;
    text-decoration: none;
}


/*
    WooCommerce Archivseite
*/
.woocommerce-page .shop-archive-wrapper {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
}
@media (max-width: 767px){
    .woocommerce-page .shop-archive-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.woocommerce ul.products li.product .price {
    color: #222222;
    display: block;
    font-weight: 400;
    margin-bottom: 0.5em;
    font-size: 1.4em;
}
@media (max-width: 767px){
    .woocommerce ul.products li.product .price {
        font-size: 1.0em;
    }
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    box-shadow: 2px 5px 15px #00000012;
    padding: 10px;
}

.wp-block-button__link.add_to_cart_button,
.woocommerce ul.products li.product .button {
    background: var(--color-main);
    color: var(--body-text-color);
    width: 100%;
    border-radius: var(--button-corners);
    font-weight: 500;
}
@media (max-width: 767px){
    .woocommerce ul.products li.product .button {
        font-size: 14px;
    }
    .product p.wc-gzd-additional-info {
        margin-top: 0;
        font-size: .8em;
    }
    li.product p.wc-gzd-additional-info {
        font-size: .7em;
    }
}
.woocommerce ul.products li.product .button:hover {
    background: var(--color-heavy);
    color: white;
}

/*
    Mobil Filter auf Archivseiten
*/
.show-filters-link{
    display: none;
    color: var(--body-text-color);
    border: solid 1px #dddddd;
    width: 70%;
    margin: auto;
    text-align: center;
    width: auto;
    padding: 5px 25px;
    border-radius: 45px;
}
.show-filters-link svg{
    margin-right: 10px;
}
@media (max-width: 767px){
    .show-filters-link{
        display: block;
    }
    .shop-archive-filters-inner{
        display: none;
    }
}

.woocommerce div.product form.cart .variations {
    margin-bottom: 0 !important;
}

@media (max-width: 767px){
    .woocommerce div.product form.cart table.variations tbody{
        display: flex;
        justify-content: space-between;
    }
}

.reset_variations{
    display: none !important;
}
/*
    HUSKY Filter
*/
.woocommerce-page .woof_reset_button_2{
    display: none;
}


@media (max-width: 767px){
    ul.woof_list_checkbox{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    ul.woof_list_checkbox .woof_checkbox_label{
        margin: 0;
    }
}





/*
    WooCommerce Produkt Detailseite
*/
.woocommerce div.product .product_title {
    text-align: left;
    font-size: 20px;
    line-height: 1.3em;
    margin-bottom: 10px;
}
@media (min-width: 768px){
    .woocommerce div.product .product_title {
        font-size: 33px;
    }
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: black;
}

.woocommerce .quantity .qty {
    width: 3.631em;
    text-align: center;
    min-width: 100px;
    min-height: 50px;
    border-radius: var(--button-corners);
    padding: 6px 20px;
    margin-right: 10px;
    border: solid 1px #ddd;
}
.woocommerce div.product form.cart .button {
    min-width: 100px;
    min-height: 50px;
}

.single-product .woocommerce-breadcrumb {
    display: none !important;
}
/*
    Produktdetailseite: dieselbe Bewertungszeile wie im Warenkorb, also Sterne
    plus "4,9 Sterne aus 39 Bewertungen" (siehe single-product/rating.php und
    warmduscher_bewertung_html in wc-functions.php). Die Sterne selbst kommen aus
    den .wd-bewertung-Regeln weiter unten.
*/
.woocommerce.single-product div.product .woocommerce-product-rating{
    margin-bottom: 0.5em;
}
/* inline-flex, weil .wd-bewertung ein Flex-Container ist: so bleibt die
   Klickflaeche beim Text und laeuft nicht ueber die ganze Spalte. */
.woocommerce.single-product div.product .woocommerce-product-rating a.woocommerce-review-link {
    display: inline-flex;
    text-decoration: none;
}
.woocommerce.single-product div.product .woocommerce-product-rating a.woocommerce-review-link:hover .wd-bewertung__text {
    text-decoration: underline;
    text-decoration-color: var(--color-main);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
/*
    Im Warenkorb haelt nowrap die Zeile zusammen, dort ist der Platz bekannt.
    In der schmalen Produktspalte koennte die Zeile damit aus dem Viewport
    laufen, sobald die Zahl der Bewertungen vierstellig wird - hier also
    umbrechen lassen. Die Sterne bleiben durch ihr eigenes nowrap beieinander.
*/
.woocommerce.single-product div.product .woocommerce-product-rating .wd-bewertung {
    white-space: normal;
}
.woocommerce.single-product div.product .woocommerce-product-rating .wd-bewertung__sterne {
    flex: 0 0 auto;
    white-space: nowrap;
}

.woocommerce.single-product:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce.single-product:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    font-size: 1.5em;
}

.single-product div.product span.price {
    font-size: 28px;
    display: block;
    margin-bottom: 20px;
}

.single-product .variations tbody tr:nth-child(even) {
    background-color: transparent;
}

.single-product .summary ul{
    margin-top: 0;
    padding-left: 18px;
}

.single-product .product-subtitle{
    background: var(--body-text-color);
    display: inline-block;
    padding: 3px 11px;
    border-radius: 34px;
    color: white;
    margin-bottom: 9px;
}
.single-product .product_meta{
    display: flex;
    flex-direction: column;
    gap: 5px;
}




/*
    Cart Seite
*/
.woocommerce-checkout button.button,
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
    padding: 14px 30px;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    outline: 0;
    line-height: normal;
    border: solid 1px black;
    border-radius: 4px;
}



/*
    Checkout
*/

.woocommerce form.checkout .form-row::after,
.woocommerce form.checkout .form-row::before,
.woocommerce-page form.checkout .form-row::after,
.woocommerce-page form.checkout .form-row::before {
    display: none;
}
.checkout .form-row{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.checkout .form-row .woocommerce-input-wrapper{
    flex-grow: 1
}


.checkout p.form-row-first,
.checkout p.form-row-last{
    gap: 0;
    justify-content: flex-start;
}

.woocommerce-gzd-checkout .edit-post-visual-editor .wc-block-components-button.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option,
.woocommerce-gzd-checkout .wc-block-components-button.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option {
    background-color: hsla(0, 0%, 7%, .02);
    outline: 1px solid hsla(0, 0%, 7%, .8);
}

.woocommerce-gzd-checkout .edit-post-visual-editor .wc-block-components-button.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected,
.woocommerce-gzd-checkout .wc-block-components-button.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
    background-color: var(--color-main) !important;
    outline: 1px solid hsla(0, 0%, 7%, .8) !important;
}

#customer_details{
    margin-bottom: 30px;
}

.woocommerce-additional-fields__field-wrapper .form-row{
    display: block;
}


a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
    background: var(--color-main);
    border-radius: 999px;
    color: black;
    margin-top: 20px;
    font-weight: 600;
}
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained:hover {
    background: #231f1e;
    color: #fff;
    text-decoration: none;
}





/*
    Produktdetailseite: einspaltiger Aufbau

    Ueberschrift, Bilder-Slider und Warenkorb-Block stehen untereinander.
    WooCommerce (woocommerce-layout.css) stellt Galerie und Zusammenfassung ab
    768px nebeneinander - float links/rechts mit je 48% Breite. Das heben wir
    hier auf.

    Die Breite geben wir bewusst nicht vor: width zurueck auf auto, damit die
    Bloecke schlicht den Container ausfuellen, in dem die Seite sie ausgibt -
    genauso breit wie die Tabs, Cross-Sells und aehnlichen Produkte darunter.
*/
.woocommerce.single-product div.product > .product-heading,
.woocommerce.single-product div.product > .woocommerce-product-gallery,
.woocommerce.single-product div.product > .summary {
    float: none;
    width: auto;
}

/*
    Ab 768px zwei Spalten: links die Galerie, rechts der Warenkorb-Block von den
    Auswahlfeldern bis zur Kurzbeschreibung. Die Ueberschrift laeuft darueber
    ueber beide Spalten, mobil bleibt alles untereinander.

    Als Grid und nicht ueber die Floats von WooCommerce: Die Ueberschrift steht
    als eigener Block davor, und Tabs, Cross-Sells und aehnliche Produkte
    darunter brauchen so kein clear. Der Stern sorgt dafuer, dass alles andere
    in div.product ueber beide Spalten laeuft - auch das, was Plugins dort
    zusaetzlich ausgeben.
*/
@media (min-width: 768px) {
    .woocommerce.single-product div.product {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        align-items: start;
    }
    .woocommerce.single-product div.product > * {
        grid-column: 1 / -1;
    }
    .woocommerce.single-product div.product > .woocommerce-product-gallery {
        grid-column: 1;
    }
    .woocommerce.single-product div.product > .summary {
        grid-column: 2;
    }
}

body.woocommerce div.product div.images {
    margin-bottom:0;
}

/*
    Produktgalerie als Slider, wischbar: mobil zwei Bilder nebeneinander, ab
    768px eines - dort ist die Galerie nur noch eine von zwei Spalten.

    Kein JavaScript-Slider, sondern ein horizontal scrollender Grid-Container
    mit Scroll-Snap - Wischen, Trackpad und Tastatur uebernimmt damit der
    Browser. Pfeile und Punkte kommen aus js/single-product.js; ohne JavaScript
    fehlen sie, gescrollt werden kann trotzdem.

    Ein eigenes grosses Titelbild gibt es nicht mehr, das Beitragsbild ist
    einfach das erste Bild der Reihe (siehe single-product/product-image.php).

    Zur Laenge der Selektoren: WooCommerce formatiert die Galeriebilder mit
    .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2)
    auf 25% Breite - fuenf Klassen. Die Regeln hier muessen darueber liegen,
    deshalb der Praefix bis .wd-galerie.images statt eines kurzen Selektors.
*/
.woocommerce-product-gallery {
    --wd-galerie-abstand: 10px;
    position: relative;
}
@media only screen and (max-width: 35.999em) {
    .woocommerce-product-gallery {
        --wd-galerie-abstand: 6px;
    }
}

.woocommerce.single-product div.product .wd-galerie.images .woocommerce-product-gallery__wrapper {
    display: grid;
    grid-auto-flow: column;
    /* Zwei Bilder im sichtbaren Bereich, der Abstand dazwischen abgezogen. */
    grid-auto-columns: calc((100% - var(--wd-galerie-abstand)) / 2);
    gap: var(--wd-galerie-abstand);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    /* Scrollbalken weg, die Position zeigen die Punkte darunter. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/*
    Desktop: ein Bild pro Ansicht. Die Galerie hat dort nur noch die halbe
    Breite, zwei Kacheln nebeneinander waeren darin zu klein. Wie viele Bilder
    sichtbar sind, misst js/single-product.js am Layout - die Zahl steht also
    nur hier.
*/
@media (min-width: 768px) {
    .woocommerce.single-product div.product .wd-galerie.images .woocommerce-product-gallery__wrapper {
        grid-auto-columns: 100%;
    }
}

.woocommerce.single-product div.product .wd-galerie.images .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
    display: none;
}
/* Die Spur ist per tabindex fokussierbar (Scrollen mit den Pfeiltasten). */
.woocommerce.single-product div.product .wd-galerie.images .woocommerce-product-gallery__wrapper:focus-visible {
    outline: 2px solid var(--body-text-color, #000);
    outline-offset: 3px;
}

.woocommerce.single-product div.product .wd-galerie.images .woocommerce-product-gallery__image {
    float: none;
    width: auto;
    margin: 0;
    scroll-snap-align: start;
}
.woocommerce.single-product div.product .wd-galerie.images .woocommerce-product-gallery__image a {
    display: block;
}
.woocommerce.single-product div.product .wd-galerie.images .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    margin: 0;
    /*
        Gleich hohe Kacheln, ohne etwas abzuschneiden: contain statt cover, der
        freie Rest der Kachel bleibt hellgrau. Bei Produktfotos auf weissem
        Grund faellt das nicht auf, Hochformate und technische Zeichnungen
        bleiben aber vollstaendig sichtbar.
    */
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f7f7f7;
    border-radius: 5px;
}

/*
    Pfeile nur fuer Mausnutzer: auf Touchgeraeten wird gewischt, dort wuerden
    sie nur Bildflaeche verdecken. js/single-product.js setzt zusaetzlich
    hidden, solange es nichts zu scrollen gibt (ein oder zwei Bilder).

    Farben wie bei allen anderen Buttons im Shop (siehe style.css im Child):
    --color-main mit dunklem Icon, im Hover Anthrazit mit weissem Icon. Das
    Icon zeichnet sich mit currentColor und folgt damit der color-Angabe.

    Zur Laenge der Selektoren: Das Child-Theme formatiert jedes button-Element
    global - Hintergrund, Polsterung (5px 30px), Ecken, Schriftgroesse. Mit
    einer einzelnen Klasse waere diese Regel schwaecher als das, aus den runden
    Knoepfen wuerden eckige Buttons mit viel Innenabstand. Dasselbe gilt fuer
    die Punkte weiter unten, auch das sind button-Elemente.
*/
.woocommerce.single-product .wd-galerie button.wd-galerie__pfeil {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--color-main);
    color: #000;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
    .woocommerce.single-product .wd-galerie button.wd-galerie__pfeil:not([hidden]) {
        display: flex;
    }
}
.woocommerce.single-product .wd-galerie button.wd-galerie__pfeil:hover,
.woocommerce.single-product .wd-galerie button.wd-galerie__pfeil:focus-visible {
    background: #231f1e;
    color: #fff;
}
.woocommerce.single-product .wd-galerie button.wd-galerie__pfeil--zurueck {
    left: 10px;
}
.woocommerce.single-product .wd-galerie button.wd-galerie__pfeil--vor {
    right: 10px;
}
.woocommerce.single-product .wd-galerie button.wd-galerie__pfeil:disabled {
    opacity: 0;
    pointer-events: none;
}
.wd-galerie__pfeil svg {
    display: block;
}

.wd-galerie__punkte {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
/* Ohne das hier wuerde display:flex das hidden-Attribut ueberstimmen. */
.wd-galerie__punkte[hidden] {
    display: none;
}
.woocommerce.single-product .wd-galerie button.wd-galerie__punkt {
    width: 8px;
    height: 8px;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d5d5d5;
    color: inherit;
    cursor: pointer;
}
.woocommerce.single-product .wd-galerie button.wd-galerie__punkt:hover {
    background: #b5b5b5;
}
.woocommerce.single-product .wd-galerie button.wd-galerie__punkt.is-aktiv {
    background: var(--body-text-color, #000);
}

/*
    Preisspanne unter den Auswahlfeldern ("ab 199 €", siehe
    warmduscher_wc_preis_unter_varianten in wc-functions.php). Sobald eine
    Variante gewaehlt ist, steht deren Preis direkt darunter - dann blendet
    js/single-product.js die Spanne ueber diese Klasse aus.
*/
.single-product .variations_form.wd-hat-variante > p.price {
    display: none;
}

.wc-block-components-product-details:first-child {
    display: none !important;
}





/*
    Produkt-Tabs (Beschreibung, Einbau, Lieferumfang, ...)

    WooCommerce liefert die Tabs als Karteireiter mit Rahmen, Farbverlauf und
    abgerundeten Ecken aus - dafuer werden ::before/::after der <li> als
    "Eckchen" und ::before des <ul> als durchgehende Linie missbraucht. Alles
    das schalten wir ab und bauen die Leiste als Pill-Navigation neu:

    - Desktop: Pills nebeneinander, aktiver Tab dunkel gefuellt.
    - Mobil: die Leiste scrollt horizontal (7 Tabs passen nie nebeneinander),
      mit Scroll-Snap und weicher Kante als Hinweis auf mehr Inhalt.

    Die Tab-Logik (WooCommerce tabs.js) bleibt unveraendert, es ist reines CSS.
*/
.woocommerce div.product .woocommerce-tabs {
    clear: both;
    margin-top: 50px;
    padding-top: 32px;
    border-top: 1px solid #ece8e4;
}

/* Clearfix- und Linien-Pseudoelemente von WooCommerce abschalten,
   sonst landen sie als Flex-Items in der Leiste. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none;
}

.single-product.woocommerce ul.wc-tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    scroll-snap-align: start;
    scroll-margin-inline: 8px;
}
/* Die "Eckchen" der Karteireiter. */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
    display: none;
    content: none;
    border: 0;
    box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 11px 19px;
    border-radius: 999px;
    background: #f4f2f0;
    color: #4a4441;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}
/* Wrench-Icons aus dem WooCommerce-Iconfont. */
#woocommerce-coupon-data ul.wc-tabs li a::before,
#woocommerce-product-data ul.wc-tabs li a::before,
.woocommerce ul.wc-tabs li a::before {
    display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus {
    background: #eae5e0;
    color: #231f1e;
    text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
    outline: 2px solid var(--color-heavy, #231f1e);
    outline-offset: 2px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce ul.wc-tabs li.active a {
    background: var(--color-heavy, #231f1e);
    color: #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: none;
}

/*
    Mobil: weiche Kante rechts als Hinweis, dass die Leiste weitergeht.
*/
@media (max-width: 767px) {
    .woocommerce div.product .woocommerce-tabs {
        margin-top: 36px;
        padding-top: 26px;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        gap: 6px;
        margin-bottom: 22px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 16px;
        font-size: 14px;
    }
}

/*
    Progressive Enhancement: mit scroll-getriebenen Animationen wandert die
    weiche Kante mit - links sobald gescrollt wurde, rechts nur solange noch
    etwas kommt. Browser ohne Unterstuetzung behalten die statische Kante oben.
*/
@property --wd-tab-fade-left {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
@property --wd-tab-fade-right {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}
@supports (animation-timeline: scroll(self inline)) {
    @media (max-width: 767px) {
        .woocommerce div.product .woocommerce-tabs ul.tabs {
            --wd-tab-fade-left: 0px;
            --wd-tab-fade-right: 26px;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--wd-tab-fade-left), #000 calc(100% - var(--wd-tab-fade-right)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--wd-tab-fade-left), #000 calc(100% - var(--wd-tab-fade-right)), transparent 100%);
            animation: wd-tab-fade linear both;
            animation-timeline: scroll(self inline);
        }
    }
    @keyframes wd-tab-fade {
        0%          { --wd-tab-fade-left: 0px;  --wd-tab-fade-right: 26px; }
        10%, 90%    { --wd-tab-fade-left: 26px; --wd-tab-fade-right: 26px; }
        100%        { --wd-tab-fade-left: 26px; --wd-tab-fade-right: 0px; }
    }
}

/*
    Tab-Inhalte
*/
.woocommerce div.product .woocommerce-tabs .panel {
    max-width: 78ch;
    margin: 0 0 10px;
    padding: 0;
    animation: wd-tab-panel-in .24s ease both;
}
@keyframes wd-tab-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .woocommerce div.product .woocommerce-tabs .panel {
        animation: none;
    }
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        transition: none;
    }
}

.woocommerce div.product .woocommerce-tabs .panel > :first-child {
    margin-top: 0;
}
.woocommerce div.product .woocommerce-tabs .panel > :last-child {
    margin-bottom: 0;
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 25px;
    line-height: 1.3;
    margin: 1.4em 0 .5em;
}
.woocommerce div.product .woocommerce-tabs .panel h3 {
    font-size: 19px;
    line-height: 1.35;
    margin: 1.5em 0 .4em;
}
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol {
    padding-left: 1.2em;
    margin: 0 0 1.1em;
}
.woocommerce div.product .woocommerce-tabs .panel li {
    margin-bottom: .35em;
}
/* Verschachtelte Listen aus dem Editor (z. B. Downloads) nicht doppelt
   einruecken und mit dem gleichen Punkt wie ueberall markieren. */
.woocommerce div.product .woocommerce-tabs .panel li[style*="list-style-type: none"] > ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: disc;
}
.woocommerce div.product .woocommerce-tabs .panel a:not(.button) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-main, #ffb326);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color .18s ease;
}
/* Lange Dateinamen (Downloads) sprengen sonst mobil den Viewport. */
.woocommerce div.product .woocommerce-tabs .panel a:not(.button),
.woocommerce div.product .woocommerce-tabs .panel li {
    overflow-wrap: anywhere;
}
.woocommerce div.product .woocommerce-tabs .panel a:not(.button):hover {
    text-decoration-color: var(--color-heavy, #231f1e);
}

/*
    -2% bei Zahlung per Überweisung
*/
#radio-control-wc-payment-method-options-bacs__label ::after{
    content: " · 2% Rabatt";
    right: 10px;
    font-weight: bold;
}


.single-product :is(.posted_in, .tagged_as){
    display: none;
}

/*
    Shop Trial
*/
.shop-trial-widget{
    background: var(--color-main);
    border-radius: 10px;
    margin: 15px 0;
    width: 100%;
    color: black;
    padding: 1em 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 767px)
{
    .shop-trial-widget img{
        display: none;
    }
}

.shop-trial-widget img{
    max-width: 80px;
}

.shop-trial-widget :is(h2, p){
    color: black;
    margin: 0;
}

a.wc-block-components-product-name{
    font-weight: 600;
}

.single-product .summary ul.payment-option-list{
    width: 100%;
    display: flex;
    gap: 1.5em;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 20px;
}
.single-product .summary ul.payment-option-list li img{
    height: 1.5em;
    width: auto;
}

/*
    Produktbewertungen
*/
.woocommerce #reviews #comments ol.commentlist {
    padding-left: 0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
    margin-left: 0;
}

/*
    Verifizierter Kauf Mehr Erfahren Link ausblenden
*/
.wc-gzd-additional-info.wc-gzd-review-authenticity-status.is-verified a,
.wc-block-components-product-details__gzd-item-desc{
    display: none !important;
}

.wc-gzd-additional-info.wc-gzd-rating-authenticity-status.is-unverified{
    display: none;
}

a.woocommerce-review-link{
    color: black;
}

body.woocommerce span.onsale {
    min-height: 1.2em;
    min-width: 3.236em;
    padding: 0 0.5em;
    font-size: 1em;
    font-weight: 700;
    position: absolute;
    text-align: center;
    line-height: 3.236;
    top: -.5em;
    left: -.5em;
    margin: 0;
    border-radius: 5px;
    background-color: var(--color-main);
    color: #fff;
    font-size: .857em;
    z-index: 9;
    color: black;
}

/*
    Order received page
*/
body.page-id-1309 .page-content{
    margin-top: 150px;
}


/*
    Product video trigger button (next to gallery zoom icon)

    Oben links in der Ecke der Galerie und nicht mehr mittig ueber dem grossen
    Titelbild: Der Slider zeigt zwei Bilder nebeneinander und scrollt, mittig
    laege der Knopf in der Luecke dazwischen. Die Lupe von WooCommerce
    (.woocommerce-product-gallery__trigger) sitzt oben rechts, beide kommen sich
    damit nicht ins Gehege.
*/
.woocommerce .woocommerce-product-gallery .product-video-trigger {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-main);
    color: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.15s ease;
}
.woocommerce .woocommerce-product-gallery .product-video-trigger:hover {
    background: var(--color-main, #ffe44d);
}
.woocommerce .woocommerce-product-gallery__trigger:hover {
    background: var(--color-main, #ffe44d) !important;
}
.woocommerce .woocommerce-product-gallery .product-video-trigger svg {
    display: block;
    fill: #000;
}

/*
    Product video lightbox
*/
.product-video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.product-video-lightbox.is-open {
    visibility: visible;
    opacity: 1;
}
.product-video-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.product-video-lightbox__inner {
    position: relative;
    z-index: 1;
    width: min(900px, 90vw);
}
.product-video-lightbox__video {
    display: block;
    width: 100%;
    max-height: 80vh;
    background: #000;
}
button.product-video-lightbox__close {
    position: absolute;
    top: -35px;
    right: -15px;
    width: 100px;
    height: 30px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--color-main) !important;
    font-weight: 600;
}
@media (min-width: 768px){
    button.product-video-lightbox__close {
        top: -15px;
        right: -15px;
    }
}
button.product-video-lightbox__close:hover {
    text-decoration: none !important;
}

.value.woo-variation-items-wrapper{
    padding-bottom: 10px;
}

/*
    Shipping cost links
*/
.scpp-calculator-open-button{
    color: black !important;
    text-decoration: none !important;
}

.scpp-calculate-button {
    background: var(--color-main);
    color: black !important;
    font-weight: 500;
    border-radius: 999px;
    padding: 0.3em 1em;
    text-decoration: none !important;
}

.woo-variation-swatches .variable-items-wrapper.radio-variable-items-wrapper .radio-variable-item .variable-item-radio-value-wrapper {
    font-size: 14px;
}

.variable-item-radio-input-wrapper{
    display: flex !important;
    align-items: center;
}

@media (max-width: 767px){
    .woo-selected-variation-item-name{
        display: none !important;
    }
}

.woocommerce-variation.single_variation{
    margin-top: 10px;
}

/*
    Cross Sells (Block-Warenkorb) – als Tabelle/Zeile darstellen:
    Bild | Text | Preis | Button
 */

/* Produktliste: Zeilen untereinander mit Abstand */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Eine Zeile pro Produkt */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

/* Innerer Wrapper (Bild + Titel + Bewertung + Preis) ebenfalls als Zeile */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product > div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Bild links, feste Breite */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image {
    flex: 0 0 70px;
    width: 70px;
    margin: 0;
}

/* Titel nimmt den verfügbaren Platz ein */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    text-align: left;
}

/* Bewertung: nicht wachsen lassen, ausblenden wenn leer */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-rating-stars {
    flex: 0 0 auto;
}

/* Preis */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-price {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
}

/* Button rechts, Breite an Inhalt anpassen (nicht 100%) */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button {
    flex: 0 0 auto;
    margin: 0;
}
/* Button als runder Plus-Icon-Button: Text ausblenden, "+" anzeigen */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link {
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 0 !important;      /* Text "In den Warenkorb" ausblenden */
    line-height: 0;
}
/* Plus aus zwei Balken – exakt zentriert, unabhängig von der Schrift */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link::before,
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link::before {
    width: 16px;
    height: 2px;
}
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link::after {
    width: 2px;
    height: 16px;
}
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link:hover {
    text-decoration: none;
    background-color: #231f1e;
    color: #fff;
}

/* Mobil: kompakter, bleibt aber eine Zeile */
@media (max-width: 767px) {
    .woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
        gap: 10px;
    }
    .woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product > div:first-child {
        gap: 10px;
    }
    .woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-image {
        flex: 0 0 55px;
        width: 55px;
    }
    .woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-title {
        font-size: 13px;
    }
    .woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link {
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 0;
    }
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
    font-weight: 500;
}

.woocommerce .star-rating span::before {
    color: var(--color-main);
}

.woocommerce div.product form.cart .phone-order-message {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    flex-basis: 100% !important;
    margin: 18px 0 !important;
    padding-top: 12px;
    font-size: 1.05rem;
    line-height: 1.5;
}
.woocommerce div.product form.cart .phone-order-message a {
    color: #f5c800 !important;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: underline;
    white-space: nowrap;
}

/*
    Warenkorb: Sterne unter dem Produktnamen (siehe warmduscher_warenkorb_bewertung
    in wc-functions.php).

    Die Sterne kommen aus CSS-content, weil der Cart-Block inline-styles aus den
    item_data entfernt: unten fuenf graue Sterne, darueber dieselben fuenf in
    --color-main, per Breite beschnitten. Kein letter-spacing, damit die Breite
    genau in Fuenftel aufgeht.
*/
.wd-bewertung {
    /* flex statt inline-flex: eigene Zeile, auch wenn ein Plugin weitere item_data
       liefert - die rendert der Block sonst mit " / " in derselben Zeile. */
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.wd-bewertung__sterne {
    position: relative;
    display: inline-block;
    font-size: 1.15em;
    line-height: 1;
    color: #d9d9d9;
}
.wd-bewertung__sterne::before {
    content: "\2605\2605\2605\2605\2605";
}

.wd-bewertung__fuellung {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--color-main);
}
.wd-bewertung__fuellung::before {
    content: "\2605\2605\2605\2605\2605";
}

.wd-bewertung__fuellung--0 { width: 0; }
.wd-bewertung__fuellung--10 { width: 10%; }
.wd-bewertung__fuellung--20 { width: 20%; }
.wd-bewertung__fuellung--30 { width: 30%; }
.wd-bewertung__fuellung--40 { width: 40%; }
.wd-bewertung__fuellung--50 { width: 50%; }
.wd-bewertung__fuellung--60 { width: 60%; }
.wd-bewertung__fuellung--70 { width: 70%; }
.wd-bewertung__fuellung--80 { width: 80%; }
.wd-bewertung__fuellung--90 { width: 90%; }
.wd-bewertung__fuellung--100 { width: 100%; }

/*
    Weiter oben blendet .wc-block-components-product-details:first-child die
    Germanized-Zeile aus. Ohne Kurzbeschreibung ist unsere Bewertung dieses erste
    Element, deshalb hier wieder einschalten - gleiche Spezifitaet, greift durch
    die spaetere Position.
*/
.wc-block-components-product-details:has(.wd-bewertung) {
    display: block !important;
}

/*
    Direkt unter den Produktnamen, also vor die Kurzbeschreibung ziehen.
*/
.wc-block-components-product-metadata {
    display: flex;
    flex-direction: column;
}
.wc-block-components-product-metadata .wc-block-components-product-details:has(.wd-bewertung) {
    order: -1;
}