/* Allgemeine Header-Anpassungen */
.custom-site-header {
    z-index: 1000;
}

.site-content {
    padding-top: 5%;
}

.widget_product_search, .site-search, .site-branding {
    margin-bottom: 0px !important;
}

/* Einzelne Bereiche im Header */

.custom-search { flex: 2; max-width: 300px; }

/* Produktsuche Styling */
.custom-search input {
    width: 100%;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Styling für den Button "Produkte" */
.button-produkte {
    background-color: #419274;; /* Farbe des Buttons */
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.button-produkte:hover {
    background-color: #419274; /* Farbe beim Hover */
}


/* Fix für cart-contents Padding/Margin */
.custom-cart .cart-contents {
    display: flex;
    align-items: center;
    padding: 0 !important; /* Entfernt unnötiges Padding */
    margin: 0 !important;  /* Entfernt unnötige Abstände */
    height: auto; /* Stellt sicher, dass die Höhe nicht zu groß ist */
}

/* Fix für #site-header-cart */
#site-header-cart {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Fix für woocommerce-Price & count */
.custom-cart .woocommerce-Price-amount,
.custom-cart .count {
    display: inline-block;
    vertical-align: middle; /* Stellt sicher, dass Währungsbetrag & Artikelanzahl mittig sind */
}

.custom-logo img {
    max-height: 50px; /* Höhe anpassen */
    width: auto; /* Breite proportional skalieren */
}



/* Dropdown Menü für Kategorien */
.categories-dropdown {
    position: absolute;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    top: 100%; /* Positionierung unter dem Button */
    left: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    z-index: 2000;
    padding: 10px;
    display: none; /* Standardmäßig ausgeblendet */
    width: 100%;
}

/* Aufteilung in 4 Spalten */
.categories-dropdown .categories-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
    gap: 20px; /* Abstand zwischen den Spalten */
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative; /* Wichtig für die Position der Unterkategorien */
}

/* Kategorien und Unterkategorien innerhalb der Dropdown */
.categories-dropdown .categories-list .category-item {
    position: relative; /* Ermöglicht die Positionierung der Unterkategorien */
    padding: 8px 0;
}

/* Hauptkategorien fett */
.categories-dropdown .categories-list .top-level-category a {
    font-weight: bold;
}

/* Stil für Links in den Kategorien */
.categories-dropdown ul li a {
    text-decoration: none;
    color: #333;
    display: block;
    padding-left: 20px; /* Leichter Einzug für Unterkategorien */
}

/* Hover-Effekt für Links */
.categories-dropdown ul li a:hover {
    background-color: #f0f0f0;
    color: #0073aa;
}

/* Unterkategorien versteckt, erscheinen beim Hover */
.categories-dropdown ul ul {
    position: absolute;
    left: 100%; /* Platziert Unterkategorien rechts vom Elternteil */
    top: 0;
    display: none;
    min-width: 200px; /* Optional: Mindestbreite für Unterkategorien */
}

/* Zeige Unterkategorien bei Hover an */
.categories-dropdown ul li:hover > ul {
    display: block;
    z-index: 100; /* Stellt sicher, dass die Unterkategorie über der Hauptkategorie angezeigt wird */
}

/* Optional: Stil für Unterkategorien */
.categories-dropdown ul ul li a {
    font-size: 14px;
    padding-left: 30px; /* Weiterer Einzug für Unterkategorien */
}



#site-header-cart .widget_shopping_cart_content {
    max-height: 730px !important; /* Höhe anpassen */
    width: 430px !important; /* Breite anpassen */
    overflow-y: auto; /* Scrollbar für vertikalen Inhalt */
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 8px;
    position: absolute; /* Positionierung relativ zum Header */
    right: 0; /* Warenkorb öffnet sich nach links */
    top: 100%; /* Direkt unter dem Header */
    z-index: 9999; /* Stellt sicher, dass der Warenkorb über anderen Elementen liegt */
}

#mobileMenuDropdown .site-search {
    display: block !important;
}

#mobileMenuDropdown .woocommerce-product-search {
    margin: 0 !important;
}

@media (max-width: 768px) {
    .categories-dropdown .categories-list {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf kleineren Bildschirmen */
    }

    .site-content {
        padding-top: 8vh; /* Mehr Platz für den Header auf kleineren Bildschirmen */
    }
}

@media (max-width: 480px) {
    .categories-dropdown .categories-list {
        grid-template-columns: 1fr; /* 1 Spalte auf sehr kleinen Bildschirmen */
    }
}