/* Dropdown-Menü unter "Produkte" anpassen – für BEIDE Navigationsleisten:
   - .HomeNavbarNavDropdown = untere, sticky Leiste (weißer Hintergrund, schwarze Schrift)
   - .GeneralNavbarNavDropdown = obere, statische Leiste (dunkler Hintergrund, weiße Schrift) */

/* Hintergrund/Rahmen für beide Varianten entfernen */
.HomeNavbarNavDropdown .dropdown-menu,
.GeneralNavbarNavDropdown .dropdown-menu {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Untere Leiste (weißer Hintergrund): dunkle Schrift */
.HomeNavbarNavDropdown .dropdown-menu .nav-link {
    color: #292b2c !important;
}

/* Obere Leiste (dunkler Hintergrund): weiße Schrift, sonst unsichtbar */
.GeneralNavbarNavDropdown .dropdown-menu .nav-link {
    color: #fff !important;
}

/* Schriftgröße an "Produkte" angleichen (12px lt. Computed-Tab) */
.HomeNavbarNavDropdown .dropdown-menu .nav-link,
.GeneralNavbarNavDropdown .dropdown-menu .nav-link {
    font-size: 12px !important;
}

/* Kein Hover-Hintergrund mehr */
.HomeNavbarNavDropdown .dropdown-menu .nav-link:hover,
.HomeNavbarNavDropdown .dropdown-menu .nav-link:focus,
.GeneralNavbarNavDropdown .dropdown-menu .nav-link:hover,
.GeneralNavbarNavDropdown .dropdown-menu .nav-link:focus {
    background-color: transparent !important;
}

/* ===== Mobile/Tablet-Fix: Dropdown fälschlich dauerhaft aufgeklappt ===== */
/* Ursache: bestehende Regel ".HomeNavbarNavDropdown ul, .GeneralNavbarNavDropdown ul"
   trifft auch das verschachtelte Dropdown-<ul> und zwingt es permanent auf
   display:flex. Wir grenzen das hier gezielt auf das Dropdown-Menü ein und
   stellen den normalen Klapp-Mechanismus (Bootstrap-Klasse "show") wieder her. */
@media (max-width: 992px) {
    .HomeNavbarNavDropdown .dropdown-menu,
    .GeneralNavbarNavDropdown .dropdown-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        float: none !important;
    }

    .HomeNavbarNavDropdown li.show > .dropdown-menu,
    .GeneralNavbarNavDropdown li.show > .dropdown-menu {
        display: flex !important;
        flex-direction: column;
    }
}

/* ===== Doppelter "Login"-Link im Tablet-Bereich (768px–991px) =====
   Ursache: Die bestehenden Bootstrap-Hilfsklassen "hidden-lg-up" (links,
   im Produkte-Bereich) und "hidden-sm-down" (rechts) überschneiden sich
   genau im Tablet-Breitenbereich, wodurch "Login" doppelt erscheint.
   Wir blenden hier gezielt die rechte, zweite Instanz aus. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .top-right-menu a[href*="mein-konto"] {
        display: none !important;
    }
}

/* ===== iOS-Safari-Fix: "Menu"-Button erscheint fälschlich blau =====
   Ursache: Safari auf iOS rendert <button>-Elemente ohne explizit gesetzte
   Farbe teils mit der System-Akzentfarbe (blau) statt der vererbten
   Textfarbe - passiert nur auf echten iOS-Geräten, nicht in der
   Desktop-Simulation. Betrifft die untere, weiße Navigationsleiste
   (.black-on-white-nav). */
.black-on-white-nav .navbar-toggler {
    color: #292b2c !important;
    -webkit-appearance: none;
    appearance: none;
}

/* ===== Fallback: Artikelnummer auf Produktseite ausblenden =====
   Nur nötig, falls der PHP-Filter wc_product_sku_enabled aus irgendeinem
   Grund nicht greift (z.B. weil das Theme die Vorlage überschreibt). */
.single-product .sku_wrapper {
    display: none !important;
}

/* ===== Verfügbarkeits-Hinweis auf Produktseite =====
   Nur "Nicht vorrätig" wird noch ausgegeben (siehe PHP-Filter in
   functions.php), hier nur noch Optik: schwarz statt rot, zentriert
   statt linksbündig. */
.single-product p.stock {
    color: #292b2c !important;
    text-align: center !important;
}

/* ===== Hinweistext statt "In die Tasche" bei ausverkauften Produkten =====
   Wird per JavaScript (product-filter.js) anstelle des Links eingefügt. */
.add-to-cart-unavailable {
    flex: 1 1 auto;
    text-align: right;
    padding-left: 25px;
    color: #292b2c;
}

/* ===== Mengen-Eingabefeld auf der Produktseite =====
   Rahmen/Outline entfernen, Schrift an den Rest der Seite angleichen,
   native Auf/Ab-Pfeile des Browsers verstecken (werden durch eigene
   Buttons ersetzt, siehe quantity-buttons.js). */
.single-product .quantity input.qty {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 18px !important;
    color: #292b2c !important;
    width: 26px !important;
    padding: 0 !important;
    text-align: center !important;
    transform: translateY(-8px); /* Feinjustierung vertikale Mitte - bei Bedarf anpassen */
}

.single-product .quantity input.qty:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Native Spinner-Pfeile ausblenden (Chrome/Safari) */
.single-product .quantity input.qty::-webkit-inner-spin-button,
.single-product .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Native Spinner-Pfeile ausblenden (Firefox) */
.single-product .quantity input.qty {
    -moz-appearance: textfield;
}

/* ===== Eigene Auf/Ab-Buttons fürs Mengenfeld ===== */
/* Gemeinsames Elternelement von Mengenfeld und Button per Flexbox
   ausrichten - dadurch richten sich beide automatisch zueinander aus,
   unabhängig von Bildschirmgröße, ohne manuelle Pixel-Justierung. */
.single-product form.cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 20px 30px; /* 20px Abstand bei Zeilenumbruch, 30px Abstand nebeneinander */
}

.single-product .quantity {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    position: relative;
    margin: 0; /* Abstand wird jetzt über "gap" am Elternelement geregelt */
}

.single-product .quantity .qty-buttons {
    display: inline-flex;
    flex-direction: column;
    gap: 0; /* Pfeile rücken direkt zusammen */
    margin-left: 0; /* Zahl direkt an die Pfeile gerückt */
}

.single-product .quantity .qty-button {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxNiAxMCAyMiAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTYgMTB2MjhsMjItMTR6Ii8+PC9zdmc+);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.single-product .quantity .qty-button-up {
    transform: rotate(-90deg);
}

.single-product .quantity .qty-button-down {
    transform: rotate(90deg);
}

/* ===== "In die Tasche"-Button leicht nach oben verschieben =====
   Nur der Button, unabhängig vom Mengenfeld-Pfeil-Block. */
.single-product .single_add_to_cart_button {
    transform: translateY(-10px);
}

/* ===== Warenkorb/Kasse: Produktbild + Produktname nebeneinander =====
   Verhindert Überlagerung bei verschiedenen Bildschirmgrößen durch eine
   feste Flex-Zeile mit definiertem Abstand, statt sich auf browser-
   abhängiges Standardverhalten zu verlassen. Betrifft Warenkorb UND
   Kasse gleichermaßen (gleiche Klasse an beiden Stellen von
   WooCommerce Germanized verwendet). */
.wc-gzd-cart-item-name-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 45px;
}

.wc-gzd-cart-item-thumbnail {
    flex: 0 0 auto;
    width: 60px; /* feste, kleine Breite statt Originalgröße 300x300 */
}

.wc-gzd-cart-item-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== Warenkorb/Kasse: kein wechselnder grauer Hintergrund =====
   Deckt sowohl klassische WooCommerce-Tabellen als auch
   Bootstrap-"table-striped"-Zebra-Streifen ab. */
.woocommerce-cart table.shop_table tbody tr,
.woocommerce-cart table.shop_table tbody tr td,
.woocommerce-checkout table.shop_table tbody tr,
.woocommerce-checkout table.shop_table tbody tr td,
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) td,
.table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) td {
    background-color: #fff !important;
}

/* ===== Warenkorb/Kasse Mobile: Doppelpunkt vor Produktbild entfernen =====
   Vermutung: responsive Tabellen-Label (content: attr(data-title) ":"),
   das bei leerem Attribut nur den Doppelpunkt übrig lässt. Falls das
   nicht die Ursache ist, bitte HTML-Ausschnitt schicken. */
@media (max-width: 768px) {
    td.product-name:before,
    td.product-thumbnail:before,
    .wc-gzd-cart-item-thumbnail:before {
        content: none !important;
    }
}

/* ===== Kasse: Füllmengen-Info ("Produkt enthält: X ml") ausblenden =====
   Stammt von WooCommerce Germanized. Gilt für alle Produkte auf der
   Kasse-Seite, nicht nur für einzelne. */
.woocommerce-checkout .wc-gzd-cart-info.units-info {
    display: none !important;
}

/* ===== Warenkorb: Abstand zwischen Produktbild und Produktname =====
   Andere Struktur als die Kasse-Seite (Bild-Link + Text-Link direkt in
   derselben Zelle "product-thumbnail"), daher separate Regel. */
td.product-thumbnail > a {
    display: inline-block;
    vertical-align: middle;
}

td.product-thumbnail > a + a {
    margin-left: 45px;
}