/* =========================================================
   VAPE-TEC HEADER 2.0
   0.20.2 – continuous dark header · aligned search action · unified category link states
   ========================================================= */

:root {
    --vt-header-row-bg-top: #2b2b2b;
    --vt-header-row-bg-bottom: #202020;
    --vt-header-usp-text: #d69258;
    --vt-header-category: rgba(255,255,255,.72);
    --vt-header-category-hover: #f0b277;
}

/* ---------------------------------------------------------
   00 – CONTINUOUS HEADER SURFACE
   Main row + category row use one uninterrupted material.
   --------------------------------------------------------- */
body #jtl-nav-wrapper,
body #jtl-nav-wrapper > .container,
body #jtl-nav-wrapper > .container-fluid,
body #jtl-nav-wrapper > .container-fluid-xl,
body #jtl-nav-wrapper .hide-navbar,
body #jtl-nav-wrapper .hide-navbar > .navbar,
body #jtl-nav-wrapper .hide-navbar .navbar.row,
body #jtl-nav-wrapper .menu-center-left,
body #jtl-nav-wrapper .menu-center-center,
body #jtl-nav-wrapper .menu-center-space-between,
body #jtl-nav-wrapper .menu-center-left > .navbar,
body #jtl-nav-wrapper .menu-center-center > .navbar,
body #jtl-nav-wrapper .menu-center-space-between > .navbar {
    background: var(--vt-header-bg) !important;
    background-image: none !important;
}

/* ---------------------------------------------------------
   01 – USP BAR
   --------------------------------------------------------- */
body #header-top-bar.topbar-wrapper {
    min-height: 29px;
    padding: 0 !important;
    background: var(--vt-header-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(184,115,51,.42) !important;
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.025),
        0 1px 3px rgba(0,0,0,.16) !important;
    color: var(--vt-header-usp-text) !important;
}

body #header-top-bar.topbar-wrapper > .container,
body #header-top-bar.topbar-wrapper > .container-fluid,
body #header-top-bar.topbar-wrapper > .container-fluid-xl {
    width: 100%;
    min-height: 29px;
    justify-content: center !important;
    align-items: center !important;
}

body .vt-usp-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    font-size: .69rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: .005em;
    white-space: nowrap;
    text-align: center;
    color: var(--vt-header-usp-text);
    text-shadow: none;
}

body .vt-usp-item {
    display: inline-flex;
    align-items: center;
}

body .vt-usp-item:not(:last-child)::after {
    content: "·";
    display: inline-block;
    margin: 0 .72rem;
    color: rgba(214,146,88,.48);
    font-weight: 800;
}

/* ---------------------------------------------------------
   02 – MAIN BRAND / SEARCH / ACTION ROW
   --------------------------------------------------------- */
@media (min-width: 992px) {
    body #jtl-nav-wrapper .hide-navbar > .navbar,
    body #jtl-nav-wrapper .hide-navbar .navbar.row {
        min-height: 68px;
        padding-top: .48rem;
        padding-bottom: .48rem;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    body #jtl-nav-wrapper .nav-logo-wrapper {
        flex: 0 0 auto;
        max-width: none;
        padding-right: 1rem;
    }

    body #jtl-nav-wrapper #logo .navbar-brand {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    body #jtl-nav-wrapper #shop-logo {
        display: block;
        width: auto !important;
        max-width: 230px;
        max-height: 54px;
        object-fit: contain;
    }

    body #jtl-nav-wrapper .main-search-wrapper {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 260px;
        padding-left: .45rem;
        padding-right: .65rem;
    }

    body #jtl-nav-wrapper .main-search-wrapper #search,
    body #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
    body #jtl-nav-wrapper .main-search-wrapper form,
    body #jtl-nav-wrapper .main-search-wrapper .form-icon,
    body #jtl-nav-wrapper .main-search-wrapper .input-group {
        width: 100% !important;
        max-width: none !important;
    }

    body #jtl-nav-wrapper .main-search-wrapper .form-control {
        height: 39px;
        min-height: 39px;
        font-size: .84rem;
    }

    /* Search action must be flush with the input. The global 3D button
       system otherwise adds a visible lower lip here. */
    body #jtl-nav-wrapper .main-search-wrapper .input-group-append > .btn,
    body #jtl-nav-wrapper .main-search-wrapper .input-group > .btn,
    body #jtl-nav-wrapper .main-search-wrapper button[type="submit"] {
        height: 39px !important;
        min-height: 39px !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.92),
            inset 0 -1px 2px rgba(63,69,76,.14),
            0 1px 2px rgba(0,0,0,.16) !important;
    }

    body #jtl-nav-wrapper .main-search-wrapper .input-group-append > .btn:hover,
    body #jtl-nav-wrapper .main-search-wrapper .input-group-append > .btn:focus,
    body #jtl-nav-wrapper .main-search-wrapper button[type="submit"]:hover,
    body #jtl-nav-wrapper .main-search-wrapper button[type="submit"]:focus {
        transform: none !important;
    }

    body #jtl-nav-wrapper .nav-icons-wrapper {
        flex: 0 0 auto;
        max-width: none;
        padding-left: 0;
    }

    body #jtl-nav-wrapper #shop-nav.vt-header-actions {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: .1rem;
        margin: 0;
    }

    body #jtl-nav-wrapper .vt-header-utility-link > a,
    body #jtl-nav-wrapper .vt-header-utility-link.nav-item > a,
    body #jtl-nav-wrapper .vt-header-utility-link .nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: .42rem .48rem !important;
        color: rgba(255,255,255,.68) !important;
        font-size: .72rem;
        font-weight: 550;
        line-height: 1.1;
        text-decoration: none !important;
        white-space: nowrap;
        border-radius: 6px;
    }

    body #jtl-nav-wrapper .vt-header-utility-link:hover > a,
    body #jtl-nav-wrapper .vt-header-utility-link > a:hover,
    body #jtl-nav-wrapper .vt-header-utility-link > a:focus,
    body #jtl-nav-wrapper .vt-header-utility-link.active > a {
        color: var(--vt-header-category-hover) !important;
        background: rgba(255,255,255,.045);
    }

    body #jtl-nav-wrapper #shop-nav > .nav-item:last-child {
        margin-left: .18rem;
    }
}

/* ---------------------------------------------------------
   03 – CATEGORY ROW
   --------------------------------------------------------- */
@media (min-width: 992px) {
    body #jtl-nav-wrapper .hide-navbar + .container,
    body #jtl-nav-wrapper .hide-navbar + .container-fluid,
    body #jtl-nav-wrapper .hide-navbar + .container-fluid-xl {
        border-top: 1px solid rgba(255,255,255,.06);
    }

    body #jtl-nav-wrapper .menu-center-left > .navbar,
    body #jtl-nav-wrapper .menu-center-center > .navbar,
    body #jtl-nav-wrapper .menu-center-space-between > .navbar {
        min-height: 39px;
        padding-top: 0;
        padding-bottom: 0;
    }

    body #jtl-nav-wrapper #mainNavigation > .navbar-nav > .nav-item > .nav-link,
    body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
        padding-top: .58rem !important;
        padding-bottom: .58rem !important;
        font-size: .79rem;
        font-weight: 560;
        line-height: 1.15;
        color: var(--vt-header-category) !important;
        white-space: nowrap;
    }

    /* NOVA wraps categories WITH children in .nav-mobile-heading.
       Older Vape-Tec CSS forced that span to white, so dropdown parents
       ignored the grey/copper state of their actual nav-link. */
    body #jtl-nav-wrapper #mainNavigation > .navbar-nav > .nav-item > .nav-link > .nav-mobile-heading,
    body #jtl-nav-wrapper #mainNavigation > .navbar-nav > .nav-item > .nav-link > .text-truncate,
    body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link > .nav-mobile-heading,
    body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link > .text-truncate {
        color: inherit !important;
    }

    body #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link,
    body #jtl-nav-wrapper .navbar-nav > .nav-item:hover > .nav-link,
    body #jtl-nav-wrapper .navbar-nav > .nav-item.hover > .nav-link,
    body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus {
        color: var(--vt-header-category-hover) !important;
    }

    /* Normale Mega-Menüs kompakter; das große Label-Menü wird von vt-megamenu.css noch feiner geregelt. */
    body #jtl-nav-wrapper .dropdown-menu:not(:has(.vt-mega-enhanced)) .submenu-headline-toplevel,
    body #jtl-nav-wrapper .dropdown-menu:not(:has(.vt-mega-enhanced)) .categories-recursive-link {
        font-size: .82rem;
        line-height: 1.24;
    }
}

/* ---------------------------------------------------------
   04 – MOBILE
   Mobile wird bewusst separat weiterentwickelt. Die Desktop-
   USP-Bar bleibt hier zunächst verborgen wie im NOVA-Standard.
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    body .vt-header-utility-link {
        display: none !important;
    }
}

/* =========================================================
   0.20.6 – CENTERED DESKTOP CATEGORY NAVIGATION
   Center the complete top-level category group as one unit.
   ========================================================= */
@media (min-width: 992px) {
    body #jtl-nav-wrapper .menu-center-center > .navbar {
        justify-content: center !important;
    }

    body #jtl-nav-wrapper .menu-center-center #mainNavigation {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body #jtl-nav-wrapper .menu-center-center #mainNavigation .nav-mobile-body {
        display: flex !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100% !important;
    }

    body #jtl-nav-wrapper .menu-center-center #mainNavigation .nav-scrollbar-inner {
        width: auto !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }
}

/* =========================================================
   VapeTec 0.21.19 – HEADER COPPER DETAILS
   Suchfeld und Trennlinie zwischen Suchzeile und Kategorienavigation
   werden an das Kupfer-System angeglichen.
   ========================================================= */
body #jtl-nav-wrapper .main-search-wrapper .form-control,
body header #search .form-control,
body header .search-wrapper .form-control {
    border-color: rgba(184,115,51,.78) !important;
}

body #jtl-nav-wrapper .main-search-wrapper .input-group-append > .btn,
body #jtl-nav-wrapper .main-search-wrapper .input-group > .btn,
body #jtl-nav-wrapper .main-search-wrapper button[type="submit"] {
    border-color: rgba(184,115,51,.78) !important;
}

@media (min-width: 992px) {
    body #jtl-nav-wrapper .hide-navbar + .container,
    body #jtl-nav-wrapper .hide-navbar + .container-fluid,
    body #jtl-nav-wrapper .hide-navbar + .container-fluid-xl {
        border-top-color: rgba(184,115,51,.62) !important;
    }
}

/* =========================================================
   Vape-Tec v0.21.153 – Hauptnavigation nach echtem NOVA-DOM.
   #mainNavigation.nav-scrollbar ist der Scroll-Container,
   ul.nav-scrollbar-inner ist SELBST die Kategorienliste.
   Nur bei per JS bestaetigter waagerechter Navigation aktiv.
   ========================================================= */
body #jtl-nav-wrapper #mainNavigation.vt-nav-scroll-controls {
    position: relative;
    /* NOVA reserves 4.3125rem (69px) for the category row even when
       the visible items need only ~33px. Keep only the content height.
       This class is added solely for a visible horizontal category list. */
    height: auto !important;
    min-height: 0 !important;
}
/* Sichtbare System-Scrollleiste nur bei aktiven Bedienelementen ausblenden. */
body #jtl-nav-wrapper #mainNavigation.vt-nav-scroll-controls .nav-scrollbar-inner {
    box-sizing: border-box;
    min-width: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    justify-content: flex-start !important;
}
body #jtl-nav-wrapper #mainNavigation.vt-nav-scroll-controls .nav-scrollbar-inner::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* Pfeilzone nur bei echtem Ueberlauf reservieren. */
body #jtl-nav-wrapper #mainNavigation.vt-nav-scroll-controls.vt-nav-overflow .nav-scrollbar-inner {
    width: calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}
/* Nicht gleichzeitig NOVA- und Vape-Tec-Pfeile darstellen. */
body #jtl-nav-wrapper #mainNavigation.vt-nav-scroll-controls > .nav-scrollbar-arrow {
    display: none !important;
}
body #jtl-nav-wrapper #mainNavigation .vt-nav-scroll-btn {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 15;
    width: 25px;
    height: 25px;
    min-width: 25px;
    padding: 0;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid rgba(184,115,51,.9);
    border-radius: 50%;
    color: #d99a67;
    background: #292623;
    background-image: none !important;
    box-shadow: inset 0 1px rgba(255,255,255,.10), 0 1px 3px rgba(0,0,0,.25);
    font: 700 20px/1 Arial,sans-serif;
    cursor: pointer;
}
body #jtl-nav-wrapper #mainNavigation.vt-nav-scroll-controls.vt-nav-overflow > .vt-nav-scroll-btn:not(.vt-nav-scroll-hidden) {
    display: inline-flex;
}
body #jtl-nav-wrapper #mainNavigation .vt-nav-scroll-btn[data-vt-direction="left"] { left: 1px; }
body #jtl-nav-wrapper #mainNavigation .vt-nav-scroll-btn[data-vt-direction="right"] { right: 1px; }
body #jtl-nav-wrapper #mainNavigation .vt-nav-scroll-btn:hover,
body #jtl-nav-wrapper #mainNavigation .vt-nav-scroll-btn:focus-visible {
    border-color: #f0b277;
    color: #f0b277;
    background: #332b26;
}


/* =========================================================
   Vape-Tec v0.21.155 – Dropdowns aus der Scrollflaeche loesen
   Nur bei horizontalem Kategorien-Ueberlauf aktiv.
   NOVA haengt die .dropdown-menu als Kind eines LI IN die
   scrollbare UL. overflow-x:auto clippt absolute Submenus.
   Fixed position verlässt diese Clipping-Flaeche, laesst
   das horizontale Scrollen UND den Scrollstand unveraendert.
   Die Koordinaten setzt die bestehende Navigation in custom.js.
   ========================================================= */
body #jtl-nav-wrapper #mainNavigation.vt-nav-scroll-controls
  > .nav-mobile-body > ul.nav-scrollbar-inner > li.dropdown-full > .dropdown-menu {
    position: fixed !important;
    top: var(--vt-nav-dropdown-top, 0px) !important;
    left: var(--vt-nav-dropdown-left, 0px) !important;
    right: auto !important;
    width: var(--vt-nav-dropdown-width, 100vw) !important;
    max-width: 100vw !important;
    z-index: 1050;
}