.ganesh-topbar{
    background-color: #000060 !important;
    color:#fff;
    height:calc(42px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

html {
    background-color:#000060 !important;
}

body,
body.is-nova {
    background-color:#fff !important;
    min-height:100vh;
}

body.is-nova.vapor-safari-blue {
    background-color:#000060 !important;
}

/* Echte iPhone-Safe-Area: blau hinter der Statusleiste, Body bleibt weiß. */
@supports (padding-top: env(safe-area-inset-top)) {
    body.is-nova::before {
        content:"";
        position:fixed;
        z-index:2147483646;
        top:0;
        right:0;
        left:0;
        height:env(safe-area-inset-top);
        background:#000060;
        pointer-events:none;
    }
}

#main-wrapper {
    background-color:#fff !important;
}

#jtl-nav-wrapper {
    background-color:#000060 !important;
}

/* Herstellerlogos: mobil 2, Desktop 4 pro Reihe */
.page-manufacturers .row {
    justify-content:center;
    margin-right:-6px;
    margin-left:-6px;
}

.page-manufacturers .vapor-manufacturer-column {
    display:flex;
    justify-content:center;
    flex:0 0 25% !important;
    max-width:25% !important;
    padding:7px 6px;
    text-align:center;
}

.page-manufacturers .vapor-manufacturer-column > a {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:110px;
    gap:5px;
    text-decoration:none;
}

.page-manufacturers .vapor-manufacturer-logo {
    display:block;
    width:auto !important;
    height:auto !important;
    max-width:150px !important;
    max-height:76px !important;
    margin:0 auto;
    object-fit:contain;
}

@media (max-width:991.98px) {
    .page-manufacturers .vapor-manufacturer-column {
        flex:0 0 50% !important;
        max-width:50% !important;
        padding:5px 4px;
    }

    .page-manufacturers .vapor-manufacturer-column > a {
        min-height:82px;
        gap:3px;
    }

    .page-manufacturers .vapor-manufacturer-logo {
        max-width:105px !important;
        max-height:54px !important;
    }
}

/* FAQ/Accordion: alle Pfeile bündig rechts und vertikal mittig */
.accordion .card-header,
.accordion [data-toggle="collapse"],
.accordion [data-bs-toggle="collapse"],
.faq-item .faq-question,
.faq-question,
.accordion-button {
    position:relative;
}

.accordion .card-header [data-toggle="collapse"],
.accordion .card-header [data-bs-toggle="collapse"],
.faq-item .faq-question,
.faq-question,
.accordion-button {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100%;
    min-height:64px;
    padding-right:48px !important;
    text-align:left !important;
}

.opc-Accordion .card-header,
.opc-Accordion .card-header h2,
.opc-Accordion .opc-Accordion-head {
    text-align:left !important;
}

.opc-Accordion .opc-Accordion-head {
    justify-content:flex-start !important;
}

.accordion .card-header [data-toggle="collapse"]::after,
.accordion .card-header [data-bs-toggle="collapse"]::after,
.faq-item .faq-question::after,
.faq-question::after,
.accordion-button::after,
.accordion .card-header [data-toggle="collapse"] > i:last-child,
.accordion .card-header [data-bs-toggle="collapse"] > i:last-child,
.faq-item .faq-question > i:last-child,
.faq-question > i:last-child {
    position:absolute !important;
    top:50% !important;
    right:18px !important;
    margin:0 !important;
    transform:translateY(-50%);
    line-height:1 !important;
}

/* Header-Pfeile ohne weißen Schein oder sonstigen Schatten */
#jtl-nav-wrapper .dropdown-toggle::after,
#jtl-nav-wrapper .fa-chevron-down,
#jtl-nav-wrapper .fa-chevron-right,
.vapor-scroll-header .dropdown-toggle::after,
.breadcrumb-arrow::before {
    box-shadow:none !important;
    text-shadow:none !important;
    filter:none !important;
}

/* Startseite: blaues Vapor-Company-Bild nur auf Desktop kompakter anzeigen */
@media (min-width:992px) {
    #main-wrapper img[src*="11c2928a-5335-4bca-8bdf-2fa0759821ca"] {
        display:block;
        width:calc(100% - 48px) !important;
        max-width:1050px !important;
        height:auto !important;
        max-height:none !important;
        margin-right:auto !important;
        margin-left:auto !important;
        object-fit:contain !important;
    }
}

/* Zähler auf hellem Seitenhintergrund */
.badge-primary,
.product-count.badge {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

/* Zähler innerhalb des blauen Headers und mobilen Menüs */
#jtl-nav-wrapper .badge-primary,
#jtl-nav-wrapper .product-count.badge,
#mainNavigation .badge-primary,
#mainNavigation .product-count.badge {
    color:#000 !important;
    background-color:#fff !important;
    border-color:#fff !important;
}

/* Desktop: gleiche Suchleisten-Optik wie mobil, bewusst mit eckigen Kanten */
@media (min-width:992px) {
    #jtl-nav-wrapper #shop-logo {
        width:auto;
        height:49px;
        max-width:50vw;
        object-fit:contain;
        transform:translateY(-3px) scale(1.35);
        transform-origin:left center;
    }

    #jtl-nav-wrapper #mainNavigation .dropdown-menu,
    #jtl-nav-wrapper #mainNavigation .dropdown-body,
    #jtl-nav-wrapper #mainNavigation .subcategory-wrapper,
    #jtl-nav-wrapper #mainNavigation .categories-recursive-dropdown {
        color:#000 !important;
        background:#fff !important;
    }

    #jtl-nav-wrapper #mainNavigation .dropdown-menu a,
    #jtl-nav-wrapper #mainNavigation .dropdown-menu .nav-link,
    #jtl-nav-wrapper #mainNavigation .dropdown-menu .submenu-headline,
    #jtl-nav-wrapper #mainNavigation .dropdown-menu strong,
    #jtl-nav-wrapper #mainNavigation .dropdown-menu span {
        color:#000 !important;
    }

    #jtl-nav-wrapper #mainNavigation .dropdown-menu .submenu-headline-toplevel {
        border-bottom-color:rgba(0,0,0,.25) !important;
    }

    #jtl-nav-wrapper #mainNavigation > .nav-scrollbar-inner > .navbar-nav > .nav-item > .nav-link::before,
    #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link::before {
        border-color:#fff !important;
    }

    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .nav-scrollbar-inner > .nav-item > .nav-link,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .nav-scrollbar-inner > .nav-item > .nav-link:hover,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .nav-scrollbar-inner > .nav-item > .nav-link:focus,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .nav-scrollbar-inner > .nav-item.active > .nav-link,
    #jtl-nav-wrapper #mainNavigation > .nav-mobile-body > .nav-scrollbar-inner > .nav-item.hover > .nav-link {
        color:#fff !important;
    }

    #jtl-nav-wrapper #search .input-group {
        --vapor-search-color:rgba(255,255,255,.68);
        flex-wrap:nowrap;
        border:1px solid var(--vapor-search-color);
        border-radius:0;
        overflow:hidden;
    }

    #jtl-nav-wrapper #search .twitter-typeahead {
        display:flex;
        flex:1 1 auto;
        width:1% !important;
        min-width:0;
    }

    #jtl-nav-wrapper #search .form-control,
    #jtl-nav-wrapper #search .btn {
        height:44px;
    }

    #jtl-nav-wrapper #search .form-control,
    #jtl-nav-wrapper #search .form-control:focus {
        min-width:0;
        color:#fff !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        outline:0;
        box-shadow:none !important;
    }

    #jtl-nav-wrapper #search .form-control::placeholder {
        color:var(--vapor-search-color) !important;
        opacity:1;
    }

    #jtl-nav-wrapper #search .input-group-append .btn,
    #jtl-nav-wrapper #search .input-group-append .btn:hover,
    #jtl-nav-wrapper #search .input-group-append .btn:focus,
    #jtl-nav-wrapper #search .input-group-append .btn:active {
        width:44px;
        padding-right:0;
        padding-left:0;
        color:var(--vapor-search-color) !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    #jtl-nav-wrapper #search .input-group:focus-within {
        border-color:var(--vapor-search-color);
        box-shadow:none;
    }

    #jtl-nav-wrapper #search .form-clear {
        color:var(--vapor-search-color) !important;
    }

    /* Desktop: der klebende Header wird beim Scrollen etwas höher */
    #jtl-nav-wrapper.vapor-desktop-scrolled,
    #jtl-nav-wrapper.vapor-desktop-scrolled > .container,
    #jtl-nav-wrapper.vapor-desktop-scrolled > .container-fluid,
    #jtl-nav-wrapper.vapor-desktop-scrolled > .container-fluid-xl,
    #jtl-nav-wrapper.vapor-desktop-scrolled nav.navbar,
    #jtl-nav-wrapper.vapor-desktop-scrolled .navbar-collapse {
        min-height:78px;
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled .navbar-collapse {
        height:78px;
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled .navbar-brand {
        display:flex;
        align-items:center;
        height:78px;
        padding-top:0;
        padding-bottom:0;
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled #shop-logo {
        transform:translateY(-2px) scale(1.35);
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation,
    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .nav-mobile-body,
    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .nav-scrollbar-inner,
    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation > .nav-mobile-body > .navbar-nav {
        align-self:center !important;
        align-items:center;
        height:78px;
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .nav-scrollbar-inner {
        padding-bottom:0 !important;
        margin-bottom:0 !important;
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .navbar-nav > .nav-item,
    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .navbar-nav > .nav-item > .nav-link {
        display:flex;
        align-items:center;
        height:100%;
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .navbar-nav > .nav-item > .nav-link {
        padding-top:0;
        padding-bottom:0;
        justify-content:center;
        gap:.35rem;
        line-height:1.2;
    }

    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .navbar-nav > .dropdown > .nav-link::after {
        align-self:center;
        margin-top:0;
        vertical-align:middle;
    }

    /* Beschriftung im Desktop-Scroll-Header optisch auf die Pfeilmitte absenken */
    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .navbar-nav > .dropdown > .nav-link > .nav-mobile-heading,
    #jtl-nav-wrapper.vapor-desktop-scrolled #mainNavigation .navbar-nav > .dropdown > .nav-link > .text-truncate {
        position:relative !important;
        top:auto !important;
        transform:translateY(4px) !important;
    }
}

.ganesh-topbar-slider{
    position:relative;
    width:100%;
    height:100%;
}

.ganesh-topbar-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    text-align:center;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    opacity:0;
    transform:translateY(8px);
    animation:ganeshTopbarSlide 6s infinite;
}

/* ===========================
   GANESH ICON ANIMATION
=========================== */

.ganesh-topbar-slide:nth-child(2){
    animation-delay:3s;
}

@keyframes ganeshTopbarSlide{
    0%, 45%{
        opacity:1;
        transform:translateY(0);
    }
    50%, 100%{
        opacity:0;
        transform:translateY(-8px);
    }
}

/* ===========================
   GANESH MOBILE TOPBAR
=========================== */

@media (max-width: 991px){

    .ganesh-topbar{
        height:calc(34px + env(safe-area-inset-top, 0px));
    }

    .ganesh-topbar-slide{
        font-size:13px;
    }

}

/* ===========================
   GANESH CATEGORY CARDS START
=========================== */

/* Category Card */
.category-wrapper .card,
.categories .card,
.category-card{

    border:0 !important;
    border-radius:16px !important;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:all .3s ease;

}

/* Hover */

.category-wrapper .card:hover,
.categories .card:hover,
.category-card:hover{

    transform:translateY(-6px);
    box-shadow:0 18px 36px rgba(0,0,0,.14);

}

/* Images */

.category-wrapper img,
.categories img,
.category-card img{

    transition:transform .35s ease;

}

.category-wrapper .card:hover img,
.categories .card:hover img,
.category-card:hover img{

    transform:scale(1.06);

}

/* Titles */

.category-wrapper .card-title,
.categories .card-title,
.category-card .card-title{

    font-weight:700;
    font-size:18px;

}

/* ===========================
   GANESH CUSTOM START
=========================== */

.ganesh-home-categories{
    margin-top:-12px;
    padding:0 0 18px;
}

.ganesh-home-categories .container{
    max-width:2000px;
    width:96%;
    padding:0;
}

.ganesh-category-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.ganesh-promo-card{
    background:#f5f5f5;
    border-radius:18px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:175px;
    text-decoration:none;
    transition:.35s ease;
    overflow:hidden;
    border:1px solid #ececec;
}

.ganesh-promo-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    background:#fff;
}

.ganesh-card-content{
    width:62%;
}

.ganesh-card-content h3{
    font-size:24px;
    font-weight:700;
    color:#222;
    margin:0 0 10px;
    line-height:1.2;
}

.ganesh-card-content p{
    margin:0;
    color:#666;
    font-size:14px;
    line-height:1.5;
}

.ganesh-card-image{
    width:38%;
    text-align:right;
}

.ganesh-card-image img{
    display:block;
    width:100%;
    height:135px;
    max-width:100%;
    max-height:135px;
    margin:0 auto;
    object-fit:contain;
    transition:.35s ease;
}

/* Original-Produktfotos größer zeigen: Verpackungsdruck und Symbole bleiben 1:1. */
.ganesh-promo-card-product-original .ganesh-card-content {
    width:52%;
}

.ganesh-promo-card-product-original .ganesh-card-image {
    width:48%;
}

/* Zwei unveränderte Originalfotos bilden eine gestaltete Produktcollage. */
.ganesh-product-collage {
    position:relative;
    align-self:stretch;
    min-height:145px;
}

.ganesh-product-collage img {
    position:absolute;
    width:82%;
    height:112px;
    max-height:none;
    object-fit:contain;
    background:#fff;
    border-radius:10px;
    box-shadow:0 5px 14px rgba(0,0,0,.13);
    mix-blend-mode:multiply;
}

.ganesh-product-collage .ganesh-product-back {
    top:4px;
    right:-5px;
    transform:rotate(5deg);
    opacity:.92;
}

.ganesh-product-collage .ganesh-product-front {
    right:14px;
    bottom:2px;
    z-index:2;
    transform:rotate(-4deg);
}

.ganesh-product-collage-elfliq .ganesh-product-front {
    width:62%;
    right:2px;
}

/* SALE gerade: schwarzes Prozentzeichen hinten, roter Text davor. */
.ganesh-sale-mark {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:112px;
    min-height:90px;
    padding:8px;
    background:transparent;
    border:0;
    box-shadow:none;
    font-size:clamp(21px, 2vw, 34px);
    font-weight:900;
    line-height:1;
    letter-spacing:-.03em;
    white-space:nowrap;
    text-align:center;
    transform:none;
}

.ganesh-sale-word {
    position:relative;
    z-index:2;
    color:#e00000;
    text-shadow:0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
}

.ganesh-sale-percent {
    position:absolute;
    z-index:1;
    color:#111;
    font-size:2.35em;
    font-weight:900;
    line-height:1;
    opacity:.95;
}

.ganesh-designed-product-image img {
    height:150px;
    max-height:150px;
    mix-blend-mode:multiply;
}

@media (max-width:768px) {
    .ganesh-promo-card-product-original .ganesh-card-content {
        width:55%;
    }

    .ganesh-promo-card-product-original .ganesh-card-image {
        width:45%;
    }

    .ganesh-product-collage {
        min-height:76px;
    }

    .ganesh-product-collage img {
        width:82%;
        height:62px;
    }

    .ganesh-product-collage .ganesh-product-front {
        right:8px;
    }

    .ganesh-product-collage-elfliq .ganesh-product-front {
        width:60%;
        right:0;
    }

    .ganesh-sale-mark {
        min-width:72px;
        min-height:60px;
        padding:2px;
        font-size:16px;
    }

    .ganesh-designed-product-image img {
        height:76px;
        max-height:76px;
    }
}

.ganesh-brands-section {
    padding:14px 0 28px;
    background:#fff;
}

.ganesh-brands-section .container {
    width:94%;
    max-width:1280px;
}

.ganesh-section-title {
    margin:0 0 14px;
    color:#111;
    font-size:24px;
    font-weight:700;
    text-align:center;
}

.ganesh-brands-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px 18px;
    align-items:center;
}

.ganesh-brand {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    height:92px;
    padding:10px 16px;
    background:#fff;
    text-decoration:none;
}

.ganesh-brand img {
    display:block;
    width:auto;
    height:auto;
    max-width:175px;
    max-height:62px;
    object-fit:contain;
}

/* Vorhandene, im JTL OnPage Composer bearbeitbare Markenbilder.
   Die Zeilen werden nur visuell zu einem einheitlichen Raster zusammengeführt. */
.opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) > div {
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px 18px;
    align-items:center;
    width:min(1180px, 94%);
    margin:0 auto;
}

.opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) > div > .row {
    display:contents !important;
}

.opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) > div > .row > [class*="col"] {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100% !important;
    max-width:none !important;
    min-height:88px;
    padding:8px;
    flex:0 0 auto !important;
}

.opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) img {
    display:block;
    width:auto !important;
    height:auto !important;
    max-width:185px !important;
    max-height:66px !important;
    margin:auto !important;
    object-fit:contain;
    background:transparent !important;
    mix-blend-mode:multiply;
}

.ganesh-promo-card:hover .ganesh-card-image img{
    transform:scale(1.08);
}

@media(max-width:1200px){
    .ganesh-category-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

.opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) > div {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:3px 8px;
    width:94%;
}

.opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) > div > .row > [class*="col"] {
    min-height:62px;
    padding:4px 6px;
}

.opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) img {
    max-width:128px !important;
    max-height:46px !important;
}

.ganesh-brands-section {
    padding:8px 0 18px;
}

.ganesh-section-title {
    margin-bottom:8px;
    font-size:18px;
}

.ganesh-brands-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:4px 8px;
}

.ganesh-brand {
    height:62px;
    padding:5px 8px;
}

.ganesh-brand img {
    max-width:112px;
    max-height:42px;
}

.ganesh-category-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.ganesh-promo-card{
    min-height:92px;
    padding:10px;
    border-radius:12px;
}

.ganesh-card-content{
    width:68%;
}

.ganesh-card-image{
    width:32%;
}

.ganesh-card-content h3{
    font-size:13px;
    margin-bottom:6px;
}

.ganesh-card-content p{
    font-size:10px;
    line-height:1.3;
}

.ganesh-card-image img {
    height:68px;
    max-height:68px;
}

.ganesh-card-image img{
    max-height:60px;
}

}

/* ===========================
   GANESH CUSTOM END
=========================== */

/* Markenraster: Tablets und groessere Ansichten zeigen vier Marken pro Zeile.
   Die bestehende Handy-Darstellung unter 600px bleibt unveraendert. */
@media (min-width:600px) {
    .ganesh-brands-grid,
    .opc-Container:has(img[src*="geekvape" i]):has(img[src*="vaporesso" i]) > div {
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

/* ===========================
   VAPOR AKZENTFARBEN
   Auf hellen Flächen: Blau/Weiß. Auf Blau: Weiß.
=========================== */

/* Gefüllte Aktionen auf hellen Seitenflächen */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.dropdown-item.active,
.dropdown-item:active,
.list-group-item.active,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.progress-bar,
.bg-primary {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

/* Normale Links auf hellen Flächen: gelben NOVA-Hover durch Blau ersetzen */
#main-wrapper a:not(.btn):not(.badge):hover,
#main-wrapper a:not(.btn):not(.badge):focus {
    color:#000060 !important;
}

/* Konturbuttons und auswählbare Optionen auf hellen Flächen */
.btn-outline-primary,
.text-primary,
a.text-primary,
.border-primary {
    color:#000060 !important;
    border-color:#000060 !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color:#000060 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

.btn-icon-primary:hover,
.btn-icon-primary:focus,
.btn-icon-primary.active,
.badge-circle.on-list,
.badge-check .badge-circle {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

.badge-outline-primary,
.badge-check,
.swatches-image.active,
.swatches-text.active,
.cfg-swatch:checked ~ .custom-control-label .config-item {
    border-color:#000060 !important;
}

.badge-outline-primary {
    color:#000060 !important;
}

a.badge-outline-primary:hover,
a.badge-outline-primary:focus {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

.noUi-horizontal .noUi-connect,
.noUi-horizontal .noUi-handle,
.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after {
    background-color:#000060 !important;
}

.noUi-horizontal .noUi-handle {
    box-shadow:0 0 0 5px rgba(0,0,96,.35) !important;
}

/* Weitere von NOVA aus der Primärfarbe berechnete Komponenten */
.custom-range::-webkit-slider-thumb,
.custom-range::-webkit-slider-thumb:active,
.custom-range::-moz-range-thumb,
.custom-range::-moz-range-thumb:active,
.custom-range::-ms-thumb,
.custom-range::-ms-thumb:active {
    background-color:#000060 !important;
}

.ribbon-1 {
    color:#fff !important;
    background-color:#000060 !important;
}

.ribbon-1::before {
    border-right-color:#000040 !important;
}

.jqcloud-word.w0,
.jqcloud-word.w1,
.jqcloud-word.w2,
.jqcloud-word.w3,
.jqcloud-word.w4,
.jqcloud-word.w5,
.jqcloud-word.w6,
.jqcloud-word.w7,
.jqcloud-word a {
    color:#000060 !important;
}

.bg-recommendation,
.table-primary,
.table-primary > th,
.table-primary > td,
.table-hover .table-primary:hover,
.table-hover .table-primary:hover > th,
.table-hover .table-primary:hover > td,
.list-group-item-primary,
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus,
.list-group-item-primary.list-group-item-action.active,
.alert-primary {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

.bg-recommendation a,
.bg-recommendation p,
.bg-recommendation span,
.bg-recommendation strong,
.table-primary a,
.table-primary th,
.table-primary td,
.list-group-item-primary a,
.alert-primary a,
.alert-primary .alert-link {
    color:#fff !important;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
    border-color:rgba(255,255,255,.35) !important;
}

.alert-primary hr {
    border-top-color:rgba(255,255,255,.35) !important;
}

/* Formulare, Varianten, Checkboxen und Auswahlrahmen */
.form-control:focus,
.custom-select:focus,
.btn:focus,
.btn.focus {
    border-color:#000060 !important;
    box-shadow:0 0 0 .2rem rgba(0,0,96,.18) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    color:#fff !important;
    background-color:#000060 !important;
    border-color:#000060 !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    border-color:#000060 !important;
    box-shadow:0 0 0 .2rem rgba(0,0,96,.18) !important;
}

/* Gelbe Aktivlinien bei Produkt-Tabs und Listen werden blau */
.tab-navigation .nav-link::after,
.productlist-filter-headline::before,
.productlist-filter-headline::after,
.pagination .page-item.active .page-link::after {
    border-color:#000060 !important;
}

/* Im blauen Header darf kein gelber Hover-/Aktivzustand bleiben */
#jtl-nav-wrapper .navbar-toggler,
#jtl-nav-wrapper .navbar-toggler:hover,
#jtl-nav-wrapper .navbar-toggler:focus,
#jtl-nav-wrapper .nav-right > .nav-item > .nav-link,
#jtl-nav-wrapper .nav-right > .nav-item > .nav-link:hover,
#jtl-nav-wrapper .nav-right > .nav-item > .nav-link:focus,
#jtl-nav-wrapper .nav-right > .nav-item.show > .nav-link,
#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link,
#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link:hover,
#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link:focus,
#jtl-nav-wrapper #shop-nav > .nav-item.show > .nav-link {
    color:#fff !important;
}

#jtl-nav-wrapper .nav-right > .nav-item > .nav-link i,
#jtl-nav-wrapper .nav-right > .nav-item > .nav-link svg,
#jtl-nav-wrapper .nav-right > .nav-item > .nav-link span:not(.badge),
#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link i,
#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link svg,
#jtl-nav-wrapper #shop-nav > .nav-item > .nav-link span:not(.badge) {
    color:inherit !important;
    fill:currentColor !important;
}

/* Zähler auf Blau bleiben weiß; im weißen Menükörper blau */
#jtl-nav-wrapper .badge-primary,
#jtl-nav-wrapper .product-count.badge {
    color:#000 !important;
    background:#fff !important;
    border-color:#fff !important;
}

@media (max-width:991.98px) {
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .badge-primary,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .product-count.badge {
        color:#fff !important;
        background:#000060 !important;
        border-color:#000060 !important;
    }
}

/* ===========================
   VAPOR AKZENTFARBEN ENDE
=========================== */

/* Einheitliche Footer-Farben – gelten auch für später in JTL geänderte Inhalte */
#footer,
#footer #copyright,
#footer .container,
#footer .container-fluid {
    background-color:#000060 !important;
}

#footer,
#footer p,
#footer span,
#footer div,
#footer li,
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer label,
#footer a,
#footer a:hover,
#footer a:focus,
#footer a:active,
#footer i,
#footer svg {
    color:#fff !important;
}

#footer svg {
    fill:currentColor;
}

#footer hr {
    border-color:rgba(255,255,255,.35) !important;
}

#footer .form-control {
    color:#fff !important;
    background-color:transparent !important;
    border-color:rgba(255,255,255,.65) !important;
}

#footer .form-control::placeholder {
    color:rgba(255,255,255,.75) !important;
    opacity:1;
}

#footer .newsletter-email-wrapper .btn,
#footer .newsletter-email-wrapper .btn:hover,
#footer .newsletter-email-wrapper .btn:focus,
#footer .newsletter-email-wrapper .btn:active {
    color:#000 !important;
    background:#fff !important;
    border-color:#fff !important;
    box-shadow:none !important;
}

/* Der Footer bleibt nach unten blau, ohne die Seite beim Laden blau einzufärben. */
#footer {
    position:relative;
    padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
    margin-bottom:calc(-1 * env(safe-area-inset-bottom, 0px));
}

#footer > .container {
    padding-top:.85rem;
    padding-bottom:0;
}

#footer .newsletter-footer {
    padding-top:.65rem;
    padding-bottom:.65rem;
    margin-bottom:0;
}

#footer hr {
    margin:.65rem 0;
}

#footer #footer-boxes {
    margin-bottom:.35rem;
}

#footer .footnote-vat {
    margin-top:.35rem;
    margin-bottom:0;
}

#footer #copyright {
    display:none !important;
}

#footer .footer-social-media {
    display:none !important;
}

/* Alten SEO-Absatz im Footer entfernen, Footer-Navigation bleibt erhalten. */
#footer p:has(a[href*="Antimatter"]),
#footer .box-body:has(a[href*="Antimatter"]),
#footer .card-body:has(a[href*="Antimatter"]) {
    display:none !important;
}

#footer .vapor-footer-seo-text {
    display:none !important;
}

/* Kompaktes Trust-Widget im aufgeräumten Footer */
#footer .it-recht-trust-widget {
    display:flex;
    justify-content:flex-end;
    margin:.35rem 0 0;
    padding-bottom:0;
}

#footer .it-recht-trust-widget a {
    display:inline-block;
    line-height:0;
}

#footer .it-recht-trust-widget img {
    display:block;
    width:112px;
    max-width:100%;
    height:auto;
}

@media (max-width:767.98px) {
    #footer {
        padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
    }

    #footer > .container {
        padding-top:.5rem;
    }

    #footer .it-recht-trust-widget img {
        width:96px;
    }
}

.smoothscroll-top.go-to-top {
    display:none !important;
}

/* ===========================
   VAPOR MOBILE/TABLET HEADER
=========================== */

@media (max-width: 991.98px) {
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body,
    #jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner,
    #jtl-nav-wrapper #mainNavigation .dropdown-menu,
    #jtl-nav-wrapper #mainNavigation .dropdown-body,
    #jtl-nav-wrapper #mainNavigation .subcategory-wrapper,
    #jtl-nav-wrapper #mainNavigation .categories-recursive-dropdown {
        color:#000 !important;
        background:#fff !important;
    }

    /* Menü aus dem Scroll-Header: Text und Pfeil exakt in einer Mittellinie */
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .navbar-nav > .nav-item > .nav-link {
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        min-height:62px;
        padding-top:0 !important;
        padding-bottom:0 !important;
        line-height:1.2;
    }

    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .navbar-nav > .dropdown > .nav-link::after {
        display:flex !important;
        flex:0 0 18px;
        align-self:center !important;
        align-items:center;
        justify-content:center;
        width:18px;
        height:18px;
        margin-top:0 !important;
        margin-bottom:0 !important;
        line-height:18px;
        vertical-align:middle;
    }

    #jtl-nav-wrapper #mainNavigation .nav-mobile-body a,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .nav-link,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body span,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body strong,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body i,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body a:hover,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body a:focus,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .active > .nav-link {
        color:#000 !important;
    }

    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .product-count.badge,
    #jtl-nav-wrapper #mainNavigation .nav-mobile-body .badge-primary {
        color:#fff !important;
        background-color:#000060 !important;
        border-color:#000060 !important;
    }

    #jtl-nav-wrapper {
        min-height:80px;
        background-color:#000060 !important;
    }

    #jtl-nav-wrapper > .container,
    #jtl-nav-wrapper > .container-fluid,
    #jtl-nav-wrapper > .container-fluid-xl {
        position:relative;
        min-height:80px;
        padding-left:8px;
        padding-right:8px;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper {
        position:static;
        width:auto;
        height:80px;
    }

    #jtl-nav-wrapper .navbar-brand {
        position:absolute;
        top:0;
        left:8px;
        z-index:4;
        display:flex;
        align-items:center;
        height:80px;
        padding:0;
        margin:0;
        transform:translateY(-3px);
    }

    #jtl-nav-wrapper #shop-logo {
        width: auto;
        height: 72px;
        max-width: 34vw;
        object-fit: contain;
    }

    #jtl-nav-wrapper #burger-menu {
        position:absolute;
        top:20px;
        right:104px;
        z-index:5;
        margin:0;
    }

    #jtl-nav-wrapper nav.navbar {
        min-height:80px;
        padding:0;
    }

    #jtl-nav-wrapper #shop-nav {
        margin-left:auto;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed {
        position:absolute;
        top:18px;
        left:100px;
        right:142px;
        z-index:3;
        width:auto;
        padding:0;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .form-control,
    #jtl-nav-wrapper .search-form-wrapper-fixed .btn {
        height:44px;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .input-group {
        --vapor-search-color:rgba(255,255,255,.68);
        flex-wrap:nowrap;
        width:100%;
        border:1px solid var(--vapor-search-color);
        border-radius:12px;
        overflow:hidden;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .twitter-typeahead {
        flex:1 1 auto;
        width:1% !important;
        min-width:0;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .form-control {
        width:100%;
        min-width:0;
        font-size:16px;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .input-group-append {
        flex:0 0 44px;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .input-group-append .btn {
        width:44px;
        padding-left:0;
        padding-right:0;
        color:var(--vapor-search-color) !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .form-control,
    #jtl-nav-wrapper .search-form-wrapper-fixed .form-control:focus {
        color:#fff !important;
        background-color:transparent !important;
        border:0 !important;
        outline:0;
        box-shadow:none !important;
        border-radius:0 !important;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .input-group:focus-within .form-control,
    #jtl-nav-wrapper .search-form-wrapper-fixed .input-group:focus-within .btn {
        border-color:transparent !important;
        box-shadow:none !important;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .input-group:focus-within {
        border-color:var(--vapor-search-color);
        box-shadow:none;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .form-control::placeholder {
        color:var(--vapor-search-color) !important;
        opacity:1;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed .form-control {
        padding-left:12px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #jtl-nav-wrapper,
    #jtl-nav-wrapper > .container,
    #jtl-nav-wrapper > .container-fluid,
    #jtl-nav-wrapper > .container-fluid-xl,
    #jtl-nav-wrapper .toggler-logo-wrapper,
    #jtl-nav-wrapper .navbar-brand,
    #jtl-nav-wrapper nav.navbar {
        min-height:88px;
        height:88px;
    }

    #jtl-nav-wrapper #shop-logo {
        height: 80px;
        max-width: 22vw;
    }

    #jtl-nav-wrapper #burger-menu {
        top:24px;
    }

    #jtl-nav-wrapper .search-form-wrapper-fixed {
        top:22px;
        left:114px;
        right:180px;
    }
}

@media (max-width: 991.98px) {
    .fixed-search.smoothscroll-top-search {
        display:none !important;
    }

    .vapor-scroll-header {
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:1040;
        display:grid;
        grid-template-columns:56px 1fr 56px;
        align-items:center;
        height:calc(58px + env(safe-area-inset-top, 0px));
        padding:env(safe-area-inset-top, 0px) 8px 0;
        color:#fff;
        background:#000060;
        box-shadow:0 4px 14px rgba(0,0,0,.18);
        opacity:0;
        visibility:hidden;
        transform:translateY(-100%);
        transition:transform .22s ease, opacity .22s ease, visibility .22s ease;
        pointer-events:none;
    }

    .vapor-scroll-header.is-visible {
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .vapor-scroll-header-button,
    .vapor-scroll-header-cart {
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        width:48px;
        height:48px;
        padding:0;
        color:#fff !important;
        background:transparent;
        border:0;
        text-decoration:none;
    }

    .vapor-scroll-header-button {
        justify-self:start;
    }

    .vapor-scroll-header-cart {
        justify-self:end;
        font-size:1rem;
    }

    .vapor-scroll-header-logo {
        justify-self:center;
        display:flex;
        align-items:center;
        justify-content:center;
        height:56px;
        text-decoration:none;
    }

    .vapor-scroll-header-logo img {
        display:block;
        width:auto;
        height:54px;
        max-width:150px;
        object-fit:contain;
    }

    .vapor-scroll-header-count {
        position:absolute;
        top:4px;
        right:2px;
        min-width:17px;
        height:17px;
        padding:0 4px;
        border-radius:9px;
        color:#000060;
        background:#fff;
        font-size:10px;
        font-weight:700;
        line-height:17px;
        text-align:center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vapor-scroll-header {
        transition:none;
    }
}

/* ===========================
   VAPOR MOBILE/TABLET HEADER END
=========================== */


/* ===========================
   GANESH CUSTOM BANNER START
=========================== */

.ganesh-home-banners{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px;

max-width:2050px;

margin:25px auto 10px;

padding:0 20px;

}

.ganesh-banner{

display:block;

position:relative;

overflow:hidden;

border-radius:22px;

padding:0px;

background:#fff;

height:200px;

transition:.35s;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.ganesh-banner:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.18);

}

.ganesh-banner img{

width:100%;

height:100%;

display:block;

border-radius:22px;

object-fit:cover;

object-position:center;

background:#fff;

transition:.45s;

}

.ganesh-banner picture{

display:block;

width:100%;

height:100%;

}

.ganesh-banner:hover img{

transform:scale(1.04);

}

.ganesh-elfa-banner .ganesh-elfa-banner-logo{

position:absolute;

top:50%;

left:14%;

z-index:2;

width:112px;

height:auto;

object-fit:contain;

background:transparent;

border-radius:0;

filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));

transform:translateY(-50%);

}

.ganesh-elfa-banner:hover .ganesh-elfa-banner-logo{

transform:translateY(-50%);

}

@media(max-width:768px){

.ganesh-home-banners{

grid-template-columns:1fr;

gap:18px;

margin-top:18px;

}

.ganesh-banner{

border-radius:18px;

padding:6px;

height:190px;

}

.ganesh-elfa-banner .ganesh-elfa-banner-logo{

top:50%;

left:10%;

width:88px;

}

}

/* ===========================
   GANESH CUSTOM END
=========================== */