/* Begrenze NUR die Hauptkategorie-Dropdowns (erste Ebene) */
@media (min-width: 992px) {
  /* Nur direkte Dropdown-Menüs unter nav-item, NICHT verschachtelte */
  header .navbar-nav > .nav-item > .dropdown-menu {
    max-height: 450px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  /* Verhindere Scrollbalken bei Untermenüs */
  header .navbar-nav .dropdown-menu .dropdown-menu {
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Schönere Scrollbar nur für Hauptmenü */
  header .navbar-nav > .nav-item > .dropdown-menu::-webkit-scrollbar {
    width: 6px;
  }
  
  header .navbar-nav > .nav-item > .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  header .navbar-nav > .nav-item > .dropdown-menu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
  
  header .navbar-nav > .nav-item > .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

/* Verhindert das Aufblitzen der "In den Warenkorb"-Bestätigungsbox */
#pushed-success {
    display: none !important;
}

/**
 * Stellt sicher, dass der Header-Icon-Bereich (inkl. Warenkorb-Dropdown)
 * immer über dem Megamenü und anderen Inhalten liegt.
 * Dies behebt das Problem, dass der Warenkorb verdeckt wird.
 */
.nav-icons-wrapper {
    position: relative;
    z-index: 1040; /* Standard z-index für Bootstrap-Dropdowns ist 1000 */
}

/**
 * Gestaltet die neue, dritte Spalte (Kauf-Box) auf der Artikeldetailseite
 * mit einem grauen Hintergrund und einem Rahmen, um sie hervorzuheben.
 */
.product-buy-box {
    background-color: #f8f9fa; /* Ein heller, neutraler Grauton */
    border: 1px solid #dee2e6;  /* Ein passender, etwas dunklerer Rahmen */
    border-radius: 6px;         /* Leicht abgerundete Ecken für ein modernes Aussehen */
    padding: 20px;              /* Innenabstand, damit der Inhalt nicht am Rand klebt */
    height: 100%;               /* Stellt sicher, dass die Box die volle Höhe der Spalte einnimmt */
}

/**
 * Styling für die neue, simple Produkt-Bildergalerie
 */

/* Container für die vertikalen Thumbnails */
.gallery-thumbnails-vertical {
    display: flex;
    flex-direction: column;
}

/* Container für die horizontalen Mobile-Thumbnails */
.gallery-thumbnails-horizontal {
    display: flex;
    flex-direction: row;
    overflow-x: auto; /* Erlaubt horizontales Scrollen bei vielen Bildern */
    margin-top: 10px;
}

/* Styling für ein einzelnes Thumbnail */
.thumbnail-item {
    border: 2px solid transparent;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    flex-shrink: 0; /* Verhindert, dass Bilder auf Mobile gestaucht werden */
}
.gallery-thumbnails-horizontal .thumbnail-item {
    margin-right: 10px;
    width: 60px; /* Feste Breite für mobile Thumbnails */
}

/* Styling für das aktive/ausgewählte Thumbnail */
.thumbnail-item.active {
    border-color: #007bff; /* Hebt das aktive Thumbnail hervor (Farbe anpassen) */
}

/* Hauptbild-Container */
.gallery-main-image-wrapper {
    position: relative;
}

/**
 * Entfernt den automatischen oberen Abstand (padding-top),
 * den JTL-Shop für den Sticky Header zum #content-wrapper hinzufügt.
 */
#content-wrapper {
    padding-top: 0 !important;
}

/**
 * Entfernt den Rahmen (border) von der Breadcrumb-Navigation,
 * um einen nahtlosen Übergang zu schaffen.
 */
.breadcrumb-wrapper {
    border: none !important;
}

/**
 * Ordnet die Mengenauswahl und den Warenkorb-Button
 * in der Kauf-Box untereinander an und auf volle Breite.
 * (Korrigierte Version basierend auf dem exakten HTML)
 */

/* 1. Der Container, der beide Elemente umschließt (die .row), wird zu einem Spalten-Layout */
.product-buy .row.basket-form-inline {
    display: flex;
    flex-direction: column; /* Kinder untereinander anordnen */
}

/* 2. Wir wählen BEIDE direkten Kinder (.col) dieser Reihe aus und setzen sie auf 100% Breite */
.product-buy .row.basket-form-inline > .col {
    flex: 1 1 100%; /* Erlaube Wachstum, kein Schrumpfen, Basisbreite 100% */
    max-width: 100%;
}

/* 3. Wir wählen das ERSTE Kind (.col) aus und geben ihm einen Abstand nach unten */
.product-buy .row.basket-form-inline > .col:first-child {
    margin-bottom: 15px; /* Abstand zwischen Mengenauswahl und Button */
}

/* 4. Der Button hat bereits 'btn-block', was ihn auf 100% Breite setzt. Wir benötigen keine weitere Regel. */

/**
 * FINAL V10.1: Zentriert das Logo im Checkout-Header mit maximaler CSS-Spezifität
 * und durch Zurücksetzen des Layout-Modells, inklusive vertikaler Ausrichtung.
 */

/* 
 * Wir wählen den Eltern-Container mit einem extrem spezifischen Selektor
 * (ID + Klassen) und zwingen ihn, das Flexbox-Layout aufzugeben.
 */
body.is-checkout #jtl-nav-wrapper .navbar.row {
    display: block !important;
}

/* 
 * Jetzt, wo der Eltern-Container ein simpler Block ist, können wir den
 * Logo-Container mit der klassischen Methode zentrieren UND ihm einen Abstand nach oben geben.
 */
body.is-checkout #jtl-nav-wrapper .nav-logo-wrapper {
    width: -moz-fit-content; /* Firefox */
    width: fit-content;      /* Standard-Browser */
    margin: 0 auto !important;
    padding-top: 25px;       /* NEU: Fügt 20px Abstand oben hinzu */
    padding-bottom: 15px;    /* NEU: Fügt 20px Abstand unten hinzu für Symmetrie */
}

/* 
 * Wir verstecken das "Sichere Bezahlung"-Icon endgültig, da es 
 * in diesem simplen Layout-Modell die Zentrierung stören würde.
 */
body.is-checkout #jtl-nav-wrapper .secure-checkout-icon {
    display: none !important;
}