/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

.ml-5px{
    margin-left: 5px;
}

.mobile-topbar{
    font-size:1rem!important;
}

.whb-top-bar .wd-header-text{
    font-size: 105%!important;
}

@media (max-width: 768.98px) {
    .wd-content-layout{
        padding-top: 20px!important;
    }
}

@media (min-width: 769px) {
    .wd-content-layout{
        padding-top: 0px!important;
    }
}

.elementor-section.elementor-section-height-full {
    height: calc(100vh - 130px)!important;
}

@media (max-width: 768.98px) {
    .product-tabs-inner h2{
        font-size: 20px;
    }
    .product-tabs-inner h3{
        font-size: 20px;
    }
    .product-tabs-inner h4{
        font-size: 20px;
    }
}

[class*="title-line-"] .wd-product .wd-entities-title{
    min-height: 50px;
}

@media (min-width: 769px) {
    .kunstrasen-home-kategorien h3.wd-entities-title{
        color: #ffffff!important;
        background: #00000094;
        padding:3px;
        padding-left:10px;
        padding-right:10px;
        border-radius: 12px;
    }

    .unterkategorien-karussel h2.wd-entities-title{
        color: #ffffff!important;
        background: #00000094;
        padding:3px;
        padding-left:10px;
        padding-right:10px;
        border-radius: 12px;
        font-size: 1.2rem;
    }
}

h1.woodmart-title-container.title.wd-fontsize-l{
    background: #00000080;
    padding-left:20px;
    padding-right:20px;
    border-radius: 12px; 
    margin-bottom: 10px;
}

@media (max-width: 768.98px) {
    h1.woodmart-title-container.title.wd-fontsize-l{
        margin-bottom: 20px;
    }
}

.title-after_title.reset-last-child.wd-fontsize-xs p {
    background: #00000080;
    padding:3px;
    padding-left:10px;
    padding-right:10px;
    border-radius: 12px;
}

.title-subtitle.subtitle-color-white.subtitle-style-default.wd-fontsize-xs {
    background: #00000080;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 12px;
}

.liner-continer{
    margin-bottom: 0px!important;
}


#menu-hauptnavigation-desktop .nav-link-text{
    font-size: 120%;
}

.wd-nav[class*="wd-style-"]>li:is(.wd-has-children,.menu-item-has-children)>a:after {
    color: var(--wd-primary-color);
}

.wd-nav>li:is(.wd-has-children,.menu-item-has-children)>a:after {
    font-size: inherit;

}

#menu-hauptnavigation-desktop.wd-nav>li>a{
    text-transform:none!important;
}

#menu-mobile-navigation.wd-nav>li>a{
    text-transform:none!important;
    font-size: 110%!important;
}

#menu-mobile-navigation.wd-nav>li>a>span, #menu-hauptnavigation-desktop.wd-nav>li>a>span, #menu-hauptnavigation-desktop.wd-nav>li>a:after{
    margin-top: 5px;
}

#menu-mobile-navigation.wd-nav>li>a>img, #menu-hauptnavigation-desktop.wd-nav>li>a>img{
    opacity: 0.7;
}

.wd-sub-menu li>a {
    font-size: 120%;
}

.wd-page-title{
    margin-bottom: 25px;
}
@media (min-width: 769px) {
    .wd-page-content{
        margin-top: 40px;
    }
}
.wd-dropdown-menu {
    min-width: var(--wd-dropdown-width);
    width: max-content;
}

.vorteile-start .title-after_title.reset-last-child.wd-fontsize-xs p{
    padding: 0;
    background: #ffffff;
    margin-top: 15px;
}



/* === Zubehör-Box (bestehend) === */
.kunsthecken-zubehoer-wrapper {
    margin-top: 40px;
    padding: 20px;
    border-top: 2px solid #eee;
}

.kunsthecken-zubehoer-wrapper h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: Orbitron, sans-serif;
}

/* Grid */
.kunsthecken-zubehoer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
}

/* Einheitliche Karten */
.kunsthecken-zubehoer-item {
    flex: 0 0 calc(20% - 24px); /* 5 Spalten Desktop */
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 360px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}
.kunsthecken-zubehoer-item:hover {
    transform: translateY(-4px);
}

.kunsthecken-zubehoer-item img {
    max-height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
}

.kunsthecken-zubehoer-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    flex-grow: 1;
}

.kunsthecken-zubehoer-item span {
    font-size: 14px;
    color: #000;
    margin-bottom: 12px;
    display: block;
}

.kunsthecken-zubehoer-item .button {
    background-color: #66a336;
    color: #fff;
    font-family: Orbitron, sans-serif;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    text-transform: uppercase;
    width: 100%;
    transition: background-color 0.3s ease;
}
.kunsthecken-zubehoer-item .button:hover {
    background-color: #4c8127;
}

/* Responsive */
@media (max-width: 1200px) {
    .kunsthecken-zubehoer-item {
        flex: 0 0 calc(25% - 24px); /* 4 Spalten */
    }
}

@media (max-width: 992px) {
    .kunsthecken-zubehoer-item {
        flex: 0 0 calc(33.33% - 24px); /* 3 Spalten */
    }
}

@media (max-width: 768px) {
    .kunsthecken-zubehoer-item {
        flex: 0 0 calc(50% - 24px); /* 2 Spalten */
    }
}

@media (max-width: 480px) {
    .kunsthecken-zubehoer-item {
        flex: 0 0 100%; /* 1 Spalte */
    }
}

/* === FAQ-Bereich für Kunsthecken Paneele === */
.faq-paneel {

}

.faq-paneel h2 {
    margin-bottom: 1em;
}

.faq-item {
    margin-bottom: 1.8em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1.5em;
}

.faq-item h3 {
    margin-bottom: 0.4em;
}

.faq-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}


.single-product .product-tabs-wrapper .wd-accordion-title{
    background: var(--btn-accented-bgcolor-hover);
    padding-block:10px;
}

.single-product .product-tabs-wrapper .wd-accordion-title.wd-active{
    background: var(--btn-accented-bgcolor);
}

.single-product .product-tabs-wrapper .wd-accordion-title-text{
    color: #ffffff !important;
    font-size: 1.3rem;
    margin-left: 15px;
    text-transform: uppercase;
}

.single-product .product-tabs-wrapper .wd-accordion-title-text>span:before{
    content: "\f100";
    font-family: "woodmart-font";
    font-weight: 400;
    margin-right: 7px;
}


.single-product .product-tabs-wrapper .tabs-layout-tabs>.wd-nav-tabs-wrapper{
    background: #f1f1f1;
    margin-bottom: 15px;
}

.single-product .product-tabs-wrapper{
    border-top: none;
    border-bottom: none;
    margin-top: 80px;
}


.single-product .product-tabs-wrapper .wd-nav-tabs {
    --nav-gap: 0px;
    align-items: center;
}

.single-product .product-tabs-wrapper .wd-nav-tabs>li>a{
    padding:15px;
    background: var(--btn-accented-bgcolor-hover);
    color: var(--btn-accented-color);
    border-right: 2px solid #ffffff;
}

.single-product .product-tabs-wrapper .wd-nav-tabs > li > a:hover {
    background: var(--btn-accented-bgcolor);
}

.single-product .product-tabs-wrapper .wd-nav-tabs > li.active > a {
    background: var(--btn-accented-bgcolor);
}

.single-product .product-tabs-wrapper .wd-accordion-item .wc-tab-inner{
    padding: 15px;
    border: 1px solid #e1e1e1;
}

.single-product .product-tabs-wrapper .wd-accordion-item .wc-tab-inner h2{
    font-size: 20px;
}

.single-product .product-tabs-wrapper .wd-accordion-item .wc-tab-inner h3{
    font-size: 20px;
}

.single_add_to_cart_button {
    flex-basis: auto;
    flex-grow: 1!important;
    flex-shrink: 0;
}

.single-product .stock {
    display: none !important;
}

@media (min-width: 769px) {
    .single-product .product_title{
        font-size: 26px;
    }
}

.single-product div.quantity input[type="number"]{
    width: 100%;
}

.single-product form.cart :where(.single_add_to_cart_button,.wd-buy-now-btn,.quantity) {
    width: 100%;
}

.single-product div.quantity input[type="button"]{
    min-width: 50px;
}

/* Container für die Unterkategorien */
.woocommerce-subcategories-grid {
    display: flex; /* Macht den Container zu einem Flex-Container */
    flex-wrap: wrap; /* Erlaubt den Elementen, in die nächste Zeile umzubrechen */
    gap: 20px; /* Einheitlicher Abstand zwischen den Kacheln */
    margin-bottom: 30px; /* Abstand zur Produktliste darunter */
    justify-content: flex-start; /* Ordnet Elemente linksbündig an */
    /* Füge !important hinzu, falls es nicht greift */
    /* display: flex !important; */
    /* flex-wrap: wrap !important; */
    /* gap: 20px !important; */
}

/* Einzelnes Unterkategorie-Element */
.woocommerce-subcategories-grid .subcategory-item {
    /* Berechnung für 4 Spalten (25%) minus anteiligem Gap */
    /* Die 20px gap werden auf 4 Elemente verteilt, also 3 * 20px = 60px Gesamtabstand
       60px / 4 = 15px pro Element als Korrektur */
    flex: 0 0 calc(25% - 15px); /* Wichtig: flex-basis von 25% und Korrektur für Gap */
    max-width: calc(25% - 15px); /* Zusätzliche Absicherung, falls flex-basis nicht ausreicht */
    text-align: center;
    border: 1px solid #eee;
    padding: 15px;
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in die Breite einfließen */
    /* margin-bottom: 15px; Wird durch gap ersetzt */
    /* Füge !important hinzu, falls es nicht greift */
    /* flex: 0 0 calc(25% - 15px) !important; */
    /* max-width: calc(25% - 15px) !important; */
}

.woocommerce-subcategories-grid .subcategory-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 5px; /* Optional: leicht abgerundete Ecken für Bilder */
}

.woocommerce-subcategories-grid .subcategory-item h3 {
    font-size: 1em;
    margin: 0;
    color: inherit;
    line-height: 1.2; /* Verbesserte Lesbarkeit */
}

.woocommerce-subcategories-grid .subcategory-item a {
    text-decoration: none;
    color: #333;
    display: block; /* Macht den gesamten Kachel-Bereich klickbar */
}

.woocommerce-subcategories-grid .subcategory-item a:hover {
    color: var(--btn-accented-bgcolor, #0073aa); /* Passt zur Akzentfarbe des Buttons */
    text-decoration: none; /* Entfernt Unterstreichung auch beim Hover */
}

/* --- Responsive Anpassungen --- */

/* Tablets (z.B. 768px bis 991px) - 3 pro Reihe */
@media (max-width: 991px) {
    .woocommerce-subcategories-grid .subcategory-item {
        flex: 0 0 calc(33.333% - 13.33px); /* 33.333% Breite minus anteiligem Gap (2/3 * 20px) */
        max-width: calc(33.333% - 13.33px);
    }
}

/* Kleinere Tablets / Größere Smartphones (z.B. 481px bis 767px) - 2 pro Reihe */
@media (max-width: 767px) {
    .woocommerce-subcategories-grid .subcategory-item {
        flex: 0 0 calc(50% - 10px); /* 50% Breite minus anteiligem Gap (1/2 * 20px) */
        max-width: calc(50% - 10px);
    }
}

/* Smartphones (bis 480px) - 1 pro Reihe */
@media (max-width: 480px) {
    .woocommerce-subcategories-grid .subcategory-item {
        flex: 0 0 100%; /* Volle Breite */
        max-width: 100%;
    }
}

.header-phone-icon{
    color:var(--wd-primary-color);
}

.header-phone{
    line-height: 20px;
}

.header-phone-text{
    font-weight: 700;
}

.header-phone-number{
    font-size: 1.45rem;
}

.header-flag{
    margin-right: 10px;
    border:1px solid #ffffff81;
    border-radius: 5px;
}

.mobile-nav-home>a:before{
    content: "\f144"; 
    opacity: 0.7;  
}

.mobile-nav-account>a:before{
    content: "\f124";   
    opacity: 0.7;
}

.mobile-nav-contact>a:before{
    content: "\f125";  
    opacity: 0.7; 
}

.mobile-nav-home, .mobile-nav-contact, .mobile-nav-account{
    background-color: #f5f5f5;
}

.product-labels.labels-rounded .product-label {
    min-height: fit-content!important;
    border-radius: 5px!important;
    padding:5px 7px 3px!important;
}


.product-labels.labels-rounded .out-of-stock {
    background-color: var(--notices-warning-bg)!important;
    color: #ffffff!important;
    max-width: fit-content !important;
}

@media (min-width: 769px) {
    .sidebar-widget{
        padding: 7px;
        border: 1px solid rgba(0,0,0,0.105);
        border-radius: var(--wd-form-brd-radius);
    }
}

.sidebar-widget{
    background-color: #ffffff;
}

.sidebar-widget h5{
    background-color: #7aa639;
    color: #ffffff;
    padding: 7px;
    border-radius: var(--wd-form-brd-radius);
    text-transform: none;
}

.wd-product .product-wrapper{
    border-radius: var(--wd-form-brd-radius)!important;
}

.wd-cat-thumb.category-image-wrapp{
    padding: 7px;
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: var(--wd-form-brd-radius);
}