/* ===================================================
   1. WOOCOMMERCE BASIS & THEME LAYOUT
   =================================================== */

.wc-block-product-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-left: 0;
    padding-left: 0;
}

.wc-block-product-categories-list li {
    list-style: none;
}

.wc-block-product-categories-list li a {
    text-decoration: none;
    padding: 6px 12px;
    color: var(--clr-blue);
    background-color: var(--clr-gray);
    font-size: 15px;
    display: inline-block;
    border-radius: 3px;
}

.wc-block-product-categories-list li a span {
    font-size: 15px;
}

.wc-block-product-categories-list li.current-cat a, 
.wc-block-product-categories-list li a:hover {
    background-color: var(--clr-blue);
    color: white;
}

.woocommerce a.button {
    color: var(--clr-blue);
    border: 1px solid var(--clr-blue);
    background-color: unset;
}

.woocommerce a.button:hover {
    color: white;
    border: 1px solid var(--clr-blue);
    background-color: var(--clr-blue);
}

.woocommerce ul.products li.product a img {
    margin: 0;
    height: 100%;
    max-height: 353px;
}

.woocommerce ul.products li.product .pl-format {
    font-size: 13px;
    padding-top: 15px;
    padding-inline: 24px;
    background-color: var(--clr-background);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 15px;
    font-weight: bold;
    padding-top: 15px;
    padding-inline: 24px;
    background-color: var(--clr-background);
    min-height: 110px;
}

.woocommerce ul.products li.product .price {
    color: var(--clr-blue);
    font-weight: bold;
    font-size: 24px;
    padding: 10px 24px 20px;
    background-color: var(--clr-background);
}

.woocommerce ul.products li.product .button {
    display: inline-block;
    margin-top: 0;
}

.wc-block-product-categories {
    margin-bottom: 60px;
    margin-top: 70px;
}

.woocommerce nav.woocommerce-pagination ul li a:focus, 
.woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--clr-blue);
    color: var(--clr-white);
}

.woocommerce nav.woocommerce-pagination ul li a, 
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 0.3em 0.5em 0.5em 0.5em;
}

.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(--clr-blue);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    border: 1px solid var(--clr-blue);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-bottom: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;   
    background-color: white;
    color: var(--clr-blue);
    border-radius: 0;
    padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    z-index: 2;
    border-radius: 0;
    background: var(--clr-gray);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    z-index: 0;
    border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    right: 0;
    border-bottom-left-radius: 0;
    border-width: unset;
    box-shadow: none;
    border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after, 
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
    border: 0;
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    content: " ";
    box-sizing: border-box;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--clr-blue);
    padding: 5px 1em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    background: var(--clr-gray);
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, 
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: var(--clr-blue);
    font-size: 1.25em;
}

.woocommerce .header_image img, 
.woocommerce-page .header_image img {
    height: 445px;
    max-width: 100%;
    object-fit: cover;
    object-position: center center;
}

.woocommerce .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
    float: right;
    width: 48%;
    clear: none;
    padding-left: 5px;
}

.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
}

.woocommerce-product-details__short-description {
    margin-bottom: 20px;
}


/* ===================================================
   2. PRODUKT-COLLECTION BLOCK (GRID & SPALTENABSTÄNDE)
   =================================================== */

ul.wc-block-product-template__responsive {
    --grid-abstand: 32px;
    grid-gap: var(--grid-abstand) !important;
    gap: var(--grid-abstand) !important;
}

ul.wc-block-product-template__responsive.columns-4 {
    grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(25% - (var(--grid-abstand) * 0.75))), 1fr)) !important;
}

ul.wc-block-product-template > li.wc-block-product {
    margin: 0 !important;
}


/* ===================================================
   3. KACHEL-LAYOUT (GLEICHE HÖHE & DYNAMISCHER LEERRAUM)
   =================================================== */

/* Kachel als flexibler Container auf voller Höhe */
.wc-block-product-template li.wc-block-product {
    background-color: var(--clr-background) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-align: left !important;
    padding-bottom: 24px !important;
}

/* Innerer Wrapper von WooCommerce füllt die gesamte Kachel */
.wc-block-product-template li.wc-block-product > .element-inside {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
}

/* Produktbild im 2:3 Hochformat */
.wc-block-product-template .wc-block-components-product-image,
.wc-block-product-template .wc-block-components-product-image a {
    display: block;
    margin: 0;
    width: 100%;
}

.wc-block-product-template .wc-block-components-product-image img,
.wc-block-product-template .wc-block-components-product-image {
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    max-height: 415px !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* SPENDEN BILD PROPORTIONEN */
.page-id-11158 .wc-block-product-template .wc-block-components-product-image img,
.page-id-11158 .wc-block-product-template .wc-block-components-product-image {
    max-height: 300px !important;
}

.wc-block-product-template .wc-block-components-product-image--aspect-ratio-1-1 {
    aspect-ratio: unset !important;
}

/* Produkt-Kategorien oberhalb des Titels */
.wc-block-product-template .taxonomy-product_cat,
.wc-block-product-template .wp-block-post-terms {
    font-size: 13px !important;
    padding-top: 15px !important;
    padding-inline: 24px !important;
    background-color: var(--clr-background) !important;
    margin: 0 !important;
    text-align: left !important;
}

.wc-block-product-template .taxonomy-product_cat a,
.wc-block-product-template .wp-block-post-terms a {
    color: var(--clr-blue) !important;
    text-decoration: none;
}

/* Produkttitel: Dynamischer Leerraum darunter (margin-bottom: auto) */
.wc-block-product-template .wp-block-post-title {
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 1.35 !important;
    padding-top: 10px !important;
    padding-inline: 24px !important;
    margin: 0 0 auto 0 !important; /* Absorbiert den Leerraum flexibel */
    min-height: unset !important;
    background-color: var(--clr-background) !important;
    text-align: left !important;
}

.wc-block-product-template .wp-block-post-title a {
    color: var(--clr-blue) !important;
    text-decoration: none;
}

/* Hinweistext "zzgl. Versandkosten" (schließt bündig unten an) */
.wc-block-product-template .element-inside.wp-paragraph,
.wc-block-product-template .wp-block-paragraph {
    font-size: 13px !important;
    color: #444;
    padding-inline: 24px !important;
    margin: 0 !important;
    padding-top: 15px !important;
    background-color: var(--clr-background) !important;
    text-align: left !important;
}

/* Preisbereich */
.wc-block-product-template .wp-block-woocommerce-product-price {
    background-color: var(--clr-background) !important;
    padding: 8px 24px 18px !important;
    margin: 0 !important;
    text-align: left !important;
}

.wc-block-product-template .wc-block-components-product-price,
.wc-block-product-template .wc-block-components-product-price .amount {
    color: var(--clr-blue) !important;
    font-weight: bold !important;
    font-size: 24px !important;
    text-align: left !important;
}

.wc-block-product-template .wc-block-components-product-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
}

/* Streichpreis: Horizontal mittig durchgestrichen & dezent */
.wc-block-product-template .wc-block-components-product-price del,
.wc-block-product-template .wc-block-components-product-price del .amount {
    text-decoration: line-through !important;
    text-decoration-thickness: 1.5px !important;
    text-decoration-color: #888888 !important;
    color: #888888 !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

/* Angebotspreis: Grün, fett & ohne gelben Hintergrund */
.wc-block-product-template .wc-block-components-product-price ins,
.wc-block-product-template .wc-block-components-product-price ins .amount {
    background: none !important;
    background-color: transparent !important;
    text-decoration: none !important;
    color: #2e7d32 !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

/* Warenkorb- / Weiterlesen-Button im Outline-Look */
.wc-block-product-template .wp-block-button,
.wc-block-product-template .wc-block-components-product-button {
    padding-inline: 24px !important;
    margin-top: 0 !important;
    text-align: left !important;
}

.wc-block-product-template .wp-block-button__link,
.wc-block-product-template .wc-block-components-product-button__button {
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: normal !important;
    color: var(--clr-blue) !important;
    border: 1px solid var(--clr-blue) !important;
    background-color: transparent !important;
    border-radius: 3px !important;
    padding: 6px 16px !important;
    transition: all 0.2s ease;
    text-align: center;
}

.wc-block-product-template .wp-block-button__link:hover,
.wc-block-product-template .wc-block-components-product-button__button:hover {
    color: white !important;
    border: 1px solid var(--clr-blue) !important;
    background-color: var(--clr-blue) !important;
}


/* ===================================================
   4. KATEGORIE FILTER-BUTTONS (SHORTCODE)
   =================================================== */

.custom-cat-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.custom-cat-filter-bar .cat-filter-btn {
    text-decoration: none;
    padding: 8px 18px;
    color: var(--clr-blue, #174a6e);
    background-color: var(--clr-gray, #eef2f5);
    font-size: 15px;
    font-weight: 500;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.custom-cat-filter-bar .cat-filter-btn:hover,
.custom-cat-filter-bar .cat-filter-btn.is-active {
    background-color: var(--clr-blue, #174a6e);
    color: #ffffff;
}


.wc-block-product-template .element-inside.wp-paragraph, .wc-block-product-template .wp-block-paragraph {
    padding-inline: 12px !important;
    margin: 0 !important;
    padding-top: 0 !important;
}