/* Vape-Tec: Hanken Grotesk lokal vom eigenen Shopserver.
   VOR AKTIVIERUNG beide Original-TTFs in /media/fonts/ bereitstellen.
   Die CSS-Datei enthaelt keine Schriftdateien. */

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/media/fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("/media/fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
}

:root {
    --vt-font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--vt-font-sans) !important;
}

body {
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--vt-font-sans) !important;
}


/* =========================================================
   VapeTec 0.7.0 – FARB- UND FLÄCHENSYSTEM
   Ziel: Wirkung im echten Shop testen, ohne Strukturumbau.
   ========================================================= */

:root {
    --vt-copper: #b87333;
    --vt-copper-action: #a85f2c;
    --vt-copper-hover: #914c22;
    --vt-copper-soft: #f2e5da;

    --vt-silver: #e5e7e9;
    --vt-silver-light: #f4f5f6;
    --vt-silver-hover: #d8dbde;

    --vt-anthracite: #23262b;
    --vt-muted: #6d7075;
    --vt-page-bg: #ecebea;
    --vt-surface: #ffffff;
    --vt-border: #cfd2d4;
}

/* Seitenwirkung: bewusst etwas dunkler als FEALs nahezu weißer Hintergrund. */
html,
body {
    background-color: var(--vt-page-bg) !important;
    color: var(--vt-anthracite);
}

/* Die eigentlichen Inhaltsflächen bleiben hell und heben sich vom Seitenhintergrund ab. */
#content-wrapper,
#content,
.container-main {
    color: var(--vt-anthracite);
}

/* Kupfer ist Interaktions- und Markenakzent, nicht Flächenfarbe für alles. */
a:hover,
a:focus {
    color: var(--vt-copper-action);
}

.btn-primary,
.btn-primary:visited,
.badge-primary,
.bg-primary {
    background-color: var(--vt-copper-action) !important;
    border-color: var(--vt-copper-action) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--vt-copper-hover) !important;
    border-color: var(--vt-copper-hover) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--vt-copper-action) !important;
    border-color: var(--vt-copper-action) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--vt-copper-action) !important;
    border-color: var(--vt-copper-action) !important;
    color: #fff !important;
}

.text-primary {
    color: var(--vt-copper-action) !important;
}

.border-primary {
    border-color: var(--vt-copper-action) !important;
}

/* Aktive / fokussierte Navigation erhält nur einen Kupferakzent. */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    color: var(--vt-copper-action) !important;
}

/* ---------------------------------------------------------
   SILBERNE KLICKFLÄCHEN
   Bestehende Vape-Tec-Linkkarten werden bewusst gemeinsam
   eingefärbt, damit die Wirkung im Shop beurteilt werden kann.
   --------------------------------------------------------- */
body .vt-home-assortment-card,
body .vt-home-device-card,
body .vt-home-contact-action:not(.vt-home-contact-action-primary),
.vt-local-action-card:not(.vt-local-action-stock),
.vt-guide-link-card,
.list-group-item-action {
    background: linear-gradient(180deg, var(--vt-silver-light) 0%, var(--vt-silver) 100%) !important;
    border-color: var(--vt-border) !important;
    color: var(--vt-anthracite) !important;
}

body .vt-home-assortment-card:hover,
body .vt-home-device-card:hover,
body .vt-home-contact-action:not(.vt-home-contact-action-primary):hover,
.vt-local-action-card:not(.vt-local-action-stock):hover,
.vt-guide-link-card:hover,
.list-group-item-action:hover {
    background: linear-gradient(180deg, #eef0f1 0%, var(--vt-silver-hover) 100%) !important;
    border-color: rgba(184, 115, 51, .55) !important;
    color: var(--vt-anthracite) !important;
}

/* Icon-Kreise auf den silbernen Linkflächen bleiben hell, bekommen aber einen warmen Rand. */
body .vt-home-device-circle,
body .vt-home-contact-action-circle,
.vt-local-action-icon,
.vt-guide-link-icon {
    background: linear-gradient(145deg, #ffffff 0%, #e9eaeb 100%) !important;
    border-color: rgba(184, 115, 51, .22) !important;
}

/* ---------------------------------------------------------
   RESERVIEREN = HAUPTAKTION = KUPFER
   Plugin setzt aktuell bewusst Schwarz; im Preview überschreibt
   das Theme diese Stellen, damit wir Kupfer im Zusammenhang sehen.
   --------------------------------------------------------- */
.vt-reservation-btn,
button[data-vt-product-reservation-label="1"],
input[data-vt-product-reservation-label="1"],
a[data-vt-product-reservation-label="1"],
a[data-vt-product-reservation-link="1"],
[data-vt-reservation-target="1"],
.vt-reservation-cancel-submit,
.vt-reserve-hero__badge,
.vt-reserve-hero__number,
.vt-reserve-hero__btn--primary,
.vt-reserve-box__badge,
.vt-reserve-box__number,
.vt-reserve-box__btn--primary,
body .vt-home-btn-primary,
body .vt-home-contact-action-primary {
    background: var(--vt-copper-action) !important;
    border-color: var(--vt-copper-action) !important;
    color: #fff !important;
}

.vt-reservation-btn:hover,
.vt-reservation-btn:focus,
button[data-vt-product-reservation-label="1"]:hover,
button[data-vt-product-reservation-label="1"]:focus,
input[data-vt-product-reservation-label="1"]:hover,
input[data-vt-product-reservation-label="1"]:focus,
a[data-vt-product-reservation-label="1"]:hover,
a[data-vt-product-reservation-label="1"]:focus,
a[data-vt-product-reservation-link="1"]:hover,
a[data-vt-product-reservation-link="1"]:focus,
[data-vt-reservation-target="1"]:hover,
[data-vt-reservation-target="1"]:focus,
[data-vt-reservation-target="1"]:active,
.vt-reservation-cancel-submit:hover,
.vt-reservation-cancel-submit:focus,
.vt-reserve-hero__btn--primary:hover,
.vt-reserve-box__btn--primary:hover,
body .vt-home-btn-primary:hover,
body .vt-home-btn-primary:focus,
body .vt-home-contact-action-primary:hover,
body .vt-home-contact-action-primary:focus {
    background: var(--vt-copper-hover) !important;
    border-color: var(--vt-copper-hover) !important;
    color: #fff !important;
}

/* Bestehende rote Hervorhebungen im Reservierungs-Infobereich in die Markenfarbe ziehen. */
.vt-reserve-box__important {
    border-left-color: var(--vt-copper-action) !important;
}
.vt-reserve-box__important strong {
    color: var(--vt-copper-action) !important;
}

/* Fokus sichtbar halten. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--vt-copper) !important;
    outline-offset: 2px;
}

/* =========================================================
   VapeTec 0.8.0 – KONTRAST / SICHTBARE FLÄCHEN
   Nur zwei Änderungen gegenüber 0.7.0:
   1) Seitenfläche deutlich dunkler, damit weiße Karten wirken.
   2) NOVA-Gelb in der Hauptnavigation auf Kupfer umgestellt.
   ========================================================= */

:root {
    --vt-page-bg: #d9d5d0;
}

/* NOVA setzt den eigentlichen Seitenbereich auf Weiß.
   Deshalb reicht body allein nicht: der Main-Wrapper muss die
   neue Hintergrundfarbe ebenfalls tragen. */
html,
body,
#main-wrapper {
    background-color: var(--vt-page-bg) !important;
}

/* Header / Navigation bleiben als klare helle Ebene bestehen. */
header,
#header-top-bar,
#mainNavigation,
header .dropdown-menu {
    background-color: #ffffff;
}

/* Das gelbe NOVA-Unterstreichen der Hauptnavigation wird Kupfer. */
@media (min-width: 992px) {
    header .navbar-nav > .nav-item > .nav-link::before {
        border-color: var(--vt-copper-action) !important;
    }
}

/* =========================================================
   VapeTec 0.9.0 – MATERIAL / 3D-BUTTONSYSTEM
   Kupfer = Hauptaktion
   Silber = sekundäre Aktion
   Blau   = Route / Navigation
   ========================================================= */

:root {
    --vt-copper-hi: #f0b277;
    --vt-copper-mid: #b87333;
    --vt-copper-lo: #7b3d1b;
    --vt-copper-edge: #6a3215;

    --vt-silver-hi: #ffffff;
    --vt-silver-mid: #d7d9dc;
    --vt-silver-lo: #aeb2b7;
    --vt-silver-edge: #8e9399;

    --vt-route-hi: #68a0ff;
    --vt-route-mid: #2f6fdf;
    --vt-route-lo: #1d4ea9;
    --vt-route-edge: #173f8d;
}

/* Gemeinsame Materialtiefe für echte Buttons/Aktionsflächen. */
.btn:not(.btn-hidden-default),
body .vt-home-btn,
.vt-reservation-btn,
.vt-reserve-hero__btn,
.vt-reserve-box__btn,
body .vt-home-contact-action-primary,
body .vt-route-action {
    position: relative;
    border-width: 1px;
    border-style: solid;
    text-shadow: 0 1px 1px rgba(0,0,0,.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -2px 3px rgba(0,0,0,.18),
        0 2px 0 rgba(0,0,0,.22),
        0 5px 10px rgba(0,0,0,.14);
    transition:
        transform .14s ease,
        box-shadow .14s ease,
        filter .14s ease,
        background-position .22s ease;
}

/* ---------------------------------------------------------
   KUPFER – Hauptaktion / Reservieren
   Lichtstreifen + dunklere Unterkante = Metall/3D
   --------------------------------------------------------- */
.btn-primary,
.btn-primary:visited,
.vt-reservation-btn,
button[data-vt-product-reservation-label="1"],
input[data-vt-product-reservation-label="1"],
a[data-vt-product-reservation-label="1"],
a[data-vt-product-reservation-link="1"],
[data-vt-reservation-target="1"],
.vt-reservation-cancel-submit,
.vt-reserve-hero__btn--primary,
.vt-reserve-box__btn--primary,
body .vt-home-btn-primary,
body .vt-home-contact-action-primary:not(.vt-route-action) {
    background:
        linear-gradient(112deg,
            rgba(255,255,255,.04) 0%,
            rgba(255,255,255,.08) 18%,
            rgba(255,240,224,.55) 34%,
            rgba(255,255,255,.09) 47%,
            rgba(255,255,255,.02) 61%,
            rgba(255,224,194,.24) 78%,
            rgba(255,255,255,.03) 100%),
        linear-gradient(180deg,
            #cb8248 0%,
            var(--vt-copper-mid) 42%,
            #a75c2a 67%,
            var(--vt-copper-lo) 100%) !important;
    background-size: 155% 100%, 100% 100% !important;
    background-position: 14% 0, 0 0 !important;
    border-color: var(--vt-copper-edge) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -2px 3px rgba(83,34,10,.34),
        inset 1px 0 0 rgba(255,255,255,.12),
        0 2px 0 #663114,
        0 5px 10px rgba(82,39,17,.25) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.vt-reservation-btn:hover,
.vt-reservation-btn:focus,
button[data-vt-product-reservation-label="1"]:hover,
button[data-vt-product-reservation-label="1"]:focus,
input[data-vt-product-reservation-label="1"]:hover,
input[data-vt-product-reservation-label="1"]:focus,
a[data-vt-product-reservation-label="1"]:hover,
a[data-vt-product-reservation-label="1"]:focus,
a[data-vt-product-reservation-link="1"]:hover,
a[data-vt-product-reservation-link="1"]:focus,
[data-vt-reservation-target="1"]:hover,
[data-vt-reservation-target="1"]:focus,
.vt-reservation-cancel-submit:hover,
.vt-reservation-cancel-submit:focus,
.vt-reserve-hero__btn--primary:hover,
.vt-reserve-box__btn--primary:hover,
body .vt-home-btn-primary:hover,
body .vt-home-btn-primary:focus,
body .vt-home-contact-action-primary:not(.vt-route-action):hover,
body .vt-home-contact-action-primary:not(.vt-route-action):focus {
    background-position: 72% 0, 0 0 !important;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -2px 3px rgba(83,34,10,.32),
        0 3px 0 #663114,
        0 7px 14px rgba(82,39,17,.28) !important;
}

.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.vt-reservation-btn:active,
.vt-reserve-hero__btn--primary:active,
.vt-reserve-box__btn--primary:active,
body .vt-home-btn-primary:active,
body .vt-home-contact-action-primary:not(.vt-route-action):active {
    transform: translateY(2px);
    filter: brightness(.98);
    box-shadow:
        inset 0 2px 5px rgba(64,26,8,.38),
        inset 0 -1px 1px rgba(255,255,255,.22),
        0 1px 0 #663114,
        0 2px 4px rgba(82,39,17,.18) !important;
}

/* ---------------------------------------------------------
   SILBER – sekundäre Buttons / neutrale Aktionen
   --------------------------------------------------------- */
.btn-secondary,
.btn-outline-primary,
body .vt-home-btn-secondary {
    background:
        linear-gradient(112deg,
            rgba(255,255,255,.24) 0%,
            rgba(255,255,255,.72) 30%,
            rgba(255,255,255,.16) 45%,
            rgba(255,255,255,.04) 64%,
            rgba(255,255,255,.38) 82%,
            rgba(255,255,255,.06) 100%),
        linear-gradient(180deg,
            #f7f8f9 0%,
            var(--vt-silver-mid) 48%,
            #c2c5c9 73%,
            var(--vt-silver-lo) 100%) !important;
    background-size: 150% 100%, 100% 100% !important;
    background-position: 12% 0, 0 0 !important;
    border-color: var(--vt-silver-edge) !important;
    color: var(--vt-anthracite) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -2px 3px rgba(63,69,76,.18),
        0 2px 0 #969ba1,
        0 5px 9px rgba(45,49,54,.16) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
body .vt-home-btn-secondary:hover,
body .vt-home-btn-secondary:focus {
    background-position: 70% 0, 0 0 !important;
    color: var(--vt-anthracite) !important;
    filter: brightness(1.035);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -2px 3px rgba(63,69,76,.16),
        0 3px 0 #969ba1,
        0 7px 13px rgba(45,49,54,.18) !important;
}

.btn-secondary:active,
.btn-outline-primary:active,
body .vt-home-btn-secondary:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 5px rgba(54,59,65,.24),
        inset 0 -1px 1px rgba(255,255,255,.72),
        0 1px 0 #969ba1,
        0 2px 4px rgba(45,49,54,.12) !important;
}

/* ---------------------------------------------------------
   BLAU – Route / Navigation bleibt semantisch blau,
   bekommt aber dieselbe Materialtiefe wie Kupfer/Silber.
   --------------------------------------------------------- */
body .vt-route-action,
.vt-reserve-hero__btn--route,
.vt-reserve-box__btn--route {
    background:
        linear-gradient(112deg,
            rgba(255,255,255,.04) 0%,
            rgba(255,255,255,.12) 17%,
            rgba(225,238,255,.5) 34%,
            rgba(255,255,255,.08) 48%,
            rgba(255,255,255,.02) 62%,
            rgba(200,222,255,.22) 80%,
            rgba(255,255,255,.03) 100%),
        linear-gradient(180deg,
            #4b86f4 0%,
            var(--vt-route-mid) 44%,
            #285fcf 69%,
            var(--vt-route-lo) 100%) !important;
    background-size: 155% 100%, 100% 100% !important;
    background-position: 14% 0, 0 0 !important;
    border-color: var(--vt-route-edge) !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.26);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -2px 3px rgba(8,38,98,.34),
        0 2px 0 #153c83,
        0 5px 10px rgba(21,60,131,.24) !important;
}

body .vt-route-action:hover,
body .vt-route-action:focus,
.vt-reserve-hero__btn--route:hover,
.vt-reserve-hero__btn--route:focus,
.vt-reserve-box__btn--route:hover,
.vt-reserve-box__btn--route:focus {
    background-position: 72% 0, 0 0 !important;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -2px 3px rgba(8,38,98,.3),
        0 3px 0 #153c83,
        0 7px 14px rgba(21,60,131,.27) !important;
}

body .vt-route-action:active,
.vt-reserve-hero__btn--route:active,
.vt-reserve-box__btn--route:active {
    transform: translateY(2px);
    filter: brightness(.98);
    box-shadow:
        inset 0 2px 5px rgba(8,38,98,.42),
        inset 0 -1px 1px rgba(255,255,255,.22),
        0 1px 0 #153c83,
        0 2px 4px rgba(21,60,131,.17) !important;
}

/* Fokus bleibt trotz Materialeffekt deutlich sichtbar. */
.btn:focus-visible,
.vt-reservation-btn:focus-visible,
.vt-reserve-hero__btn:focus-visible,
.vt-reserve-box__btn:focus-visible,
body .vt-home-btn:focus-visible,
body .vt-route-action:focus-visible {
    outline: 3px solid rgba(184,115,51,.48) !important;
    outline-offset: 3px;
}

/* =========================================================
   VapeTec 0.10.0 – DETAIL-HARMONISIERUNG
   Kategorie/Filter, Produktkarten, Route, Merkmaltabelle
   ========================================================= */

:root {
    --vt-surface-soft: #ebe8e4;
    --vt-surface-soft-2: #e2ded9;
    --vt-sidebar-head: #e6e2dd;
    --vt-sidebar-head-open: #ded8d2;
}

/* ---------------------------------------------------------
   01 – RESTLICHES NOVA-GELB -> KUPFER
   Status-/Warnfarben (Bestellware) bleiben bewusst unberührt.
   --------------------------------------------------------- */
.form-control:focus,
.custom-select:focus,
.bootstrap-select.custom-select button.dropdown-toggle:focus,
.bootstrap-select.custom-select.show button.dropdown-toggle,
.bootstrap-select.custom-select.show button[data-toggle="collapse"]:not(.navbar-toggler) {
    border-color: var(--vt-copper-action) !important;
    box-shadow: 0 0 0 .16rem rgba(184,115,51,.20) !important;
}

.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus {
    box-shadow: 0 0 0 .16rem rgba(184,115,51,.20) !important;
}

.btn:focus-visible,
.focus,
:focus-visible {
    outline-color: rgba(184,115,51,.72) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--vt-copper-action) !important;
    background-color: var(--vt-copper-action) !important;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--vt-copper-action) !important;
}

.noUi-horizontal .noUi-connect,
.noUi-horizontal .noUi-handle {
    background: var(--vt-copper-action) !important;
}
.noUi-horizontal .noUi-handle {
    box-shadow: 0 0 0 5px rgba(184,115,51,.24) !important;
}

.custom-range::-webkit-slider-thumb,
.custom-range::-moz-range-thumb,
.custom-range::-ms-thumb {
    background-color: var(--vt-copper-action) !important;
}

.tab-navigation .nav-link.active::after,
.tab-navigation .nav-link:hover::after {
    border-color: var(--vt-copper-action) !important;
}

aside .nav-panel > .nav > .active > .nav-link {
    border-bottom-color: var(--vt-copper-action) !important;
}

.page-link:hover,
.btn-link:hover,
.form-icon-trigger-label:hover {
    color: var(--vt-copper-action) !important;
}

.filter-item.active .filter-img,
.filter-item:active .filter-img,
.carousel-thumbnails .slick-slide.slick-current,
.swatches-image.active,
.swatches-text.active {
    border-color: var(--vt-copper-action) !important;
}

/* ---------------------------------------------------------
   02 – FILTER-SEITENLEISTE KOMPAKTER + KLARE EBENEN
   --------------------------------------------------------- */
@media (min-width: 992px) {
    #content-wrapper.has-left-sidebar #content > .row.justify-content-lg-end > .col-lg-8,
    #content-wrapper.is-item-list #content > .row.justify-content-lg-end > .col-lg-8 {
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }

    #sidepanel_left.sidepanel-left {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        padding-right: .65rem;
    }
}

#sidepanel_left .box {
    margin-bottom: .42rem;
}

#sidepanel_left .btn-filter-box {
    min-height: 34px;
    margin: 0;
    padding: .42rem .55rem !important;
    background: linear-gradient(180deg, #efedea 0%, var(--vt-sidebar-head) 100%) !important;
    border: 1px solid #c8c3bd !important;
    border-radius: 7px !important;
    color: var(--vt-anthracite) !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 1px 2px rgba(33,29,25,.06) !important;
}

#sidepanel_left .btn-filter-box[aria-expanded="true"] {
    background: linear-gradient(180deg, #e9e5e1 0%, var(--vt-sidebar-head-open) 100%) !important;
    border-color: #bdb6af !important;
    box-shadow:
        inset 3px 0 0 var(--vt-copper-action),
        inset 0 1px 0 rgba(255,255,255,.62),
        0 1px 3px rgba(33,29,25,.08) !important;
}

#sidepanel_left .btn-filter-box:focus,
#sidepanel_left .btn-filter-box:focus-visible {
    outline: none !important;
    box-shadow:
        inset 3px 0 0 var(--vt-copper-action),
        inset 0 1px 0 rgba(255,255,255,.68),
        0 0 0 2px rgba(184,115,51,.16) !important;
}

#sidepanel_left .box-filter-hr {
    margin: .34rem 0 .42rem;
    border-top-color: rgba(66,58,51,.12);
}

#sidepanel_left .filter-item {
    margin: 0 2px;
    padding: .18rem .38rem;
    border-radius: 5px;
    color: #3c3c3c;
}

#sidepanel_left .filter-item:hover {
    background: rgba(255,255,255,.42);
    color: var(--vt-copper-hover) !important;
}

#sidepanel_left .filter-item.active,
#sidepanel_left .filter-item:active {
    background: rgba(184,115,51,.10) !important;
    color: #5f341e !important;
    font-weight: 650;
}

#sidepanel_left .filter-item.active .far,
#sidepanel_left .filter-item.active .fa {
    color: var(--vt-copper-action) !important;
}

/* ---------------------------------------------------------
   03 – ARTIKELGRID: KEINE WEISSE TEXTPLATTE / KEIN AUFBLÄHEN
   --------------------------------------------------------- */
@media (min-width: 768px) {
    .productbox.productbox-hover .productbox-inner::before {
        display: none !important;
        content: none !important;
    }

    .productbox.productbox-hover:hover,
    .productbox.productbox-hover:focus,
    .productbox.productbox-hover.focus {
        z-index: 2;
    }

    .productbox.productbox-hover:hover .productbox-ribbon.ribbon,
    .productbox.productbox-hover:focus .productbox-ribbon.ribbon,
    .productbox.productbox-hover.focus .productbox-ribbon.ribbon {
        top: 1rem;
        left: -.5rem;
    }

    .productbox.productbox-hover.productbox-column:hover .productbox-inner.pos-abs,
    .productbox.productbox-hover.productbox-column:focus .productbox-inner.pos-abs,
    .productbox.productbox-hover.productbox-column.focus .productbox-inner.pos-abs {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
    }
}

.productbox .productbox-title,
.productbox .productbox-price,
.productbox .productbox-vat,
.productbox .productbox-details,
.productbox .productbox-status,
.productbox .productbox-delivery {
    background: transparent !important;
}

.productbox {
    transition: transform .15s ease, filter .15s ease;
}
@media (hover:hover) and (min-width:768px) {
    .productbox.productbox-hover:hover {
        transform: translateY(-2px);
        filter: drop-shadow(0 5px 7px rgba(37,31,27,.10));
    }
}

/* ---------------------------------------------------------
   04 – ROUTE-KACHELN IN PORTLETS: BLAU MUSS GEWINNEN
   --------------------------------------------------------- */
body .vt-local-action-card.vt-route-action,
body a.vt-local-action-card.vt-route-action,
body .vt-guide-link-card.vt-route-action,
body a.vt-guide-link-card.vt-route-action {
    background:
        linear-gradient(112deg,
            rgba(255,255,255,.05) 0%,
            rgba(255,255,255,.12) 18%,
            rgba(225,238,255,.50) 34%,
            rgba(255,255,255,.08) 48%,
            rgba(255,255,255,.02) 63%,
            rgba(200,222,255,.22) 80%,
            rgba(255,255,255,.03) 100%),
        linear-gradient(180deg,#4b86f4 0%,var(--vt-route-mid) 44%,#285fcf 69%,var(--vt-route-lo) 100%) !important;
    background-size: 155% 100%,100% 100% !important;
    border-color: var(--vt-route-edge) !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.26);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -2px 3px rgba(8,38,98,.34),
        0 2px 0 #153c83,
        0 5px 10px rgba(21,60,131,.24) !important;
}
body .vt-local-action-card.vt-route-action strong,
body .vt-local-action-card.vt-route-action span,
body .vt-guide-link-card.vt-route-action strong,
body .vt-guide-link-card.vt-route-action span {
    color: #fff !important;
}

/* ---------------------------------------------------------
   05 – PORTLET-OBERFLÄCHEN HARMONISIEREN
   Informative Karten bleiben hell, klickbare Karten Silber.
   Statuskarten Grün/Gelb werden NICHT überschrieben.
   --------------------------------------------------------- */
.vt-product-fact,
.vt-flavour-facts,
.vt-mixing-step,
.vt-analysis-card {
    border-color: rgba(77,68,60,.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.76),
        0 2px 4px rgba(45,38,33,.055),
        0 6px 12px rgba(45,38,33,.07) !important;
}

/* ---------------------------------------------------------
   06 – PRODUKTMERKMALE IN DIE NEUE MATERIALSPRACHE HOLEN
   --------------------------------------------------------- */
.product-attributes {
    margin-top: .7rem;
}

.product-attributes .table {
    margin-bottom: 0;
    background: linear-gradient(180deg, rgba(244,242,239,.96) 0%, rgba(226,222,217,.92) 100%);
    border: 1px solid #c8c3bd !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 2px 5px rgba(37,31,27,.07),
        0 7px 14px rgba(37,31,27,.06);
}

.product-attributes .table td {
    padding: .42rem .58rem;
    border-color: rgba(91,82,74,.10) !important;
    background: transparent !important;
    vertical-align: middle;
}

.product-attributes .table-striped tbody tr:nth-of-type(odd),
.product-attributes .table-striped tbody tr:nth-of-type(even) {
    background: transparent !important;
}

.product-attributes .table-striped tbody tr:nth-of-type(even) td {
    background: rgba(255,255,255,.34) !important;
}

.product-attributes td.h6 {
    width: 42%;
    margin: 0;
    color: #4b4743;
    font-size: .78rem;
    font-weight: 600;
}

.product-attributes .badge-primary {
    background: linear-gradient(180deg,#c98249 0%,#a85f2c 64%,#82421f 100%) !important;
    border: 1px solid #713719;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 1px 2px rgba(60,28,12,.14);
}

/* ---------------------------------------------------------
   07 – SEMANTIK: BESTELLWARE / VORAUSSICHTLICH VERFÜGBAR
   bleibt bewusst gelb. Keine globale Warning-Überschreibung.
   --------------------------------------------------------- */

/* =========================================================
   VapeTec 0.11.0 – PRODUKTDETAIL / PORTLET-HIERARCHIE
   01 Frage-zum-Artikel als echte Aktion
   02 Überschriften optisch nach vorn holen
   03 alte vt-home-Portlethülle neutralisieren
   04 weiße Kategorie-Unterfläche in linker Navigation entfernen
   ========================================================= */

/* 01 – "Frage zum Artikel" nicht mehr als gequetschter Textlink. */
.question-on-item {
    display: flex;
    align-items: center;
    padding-left: .5rem;
}

.question-on-item .btn.question {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-height: 36px;
    min-width: 138px;
    padding: .46rem .78rem !important;
    margin: .15rem 0;
    white-space: nowrap;
    text-decoration: none !important;
    border: 1px solid var(--vt-silver-edge) !important;
    border-radius: 7px !important;
    color: var(--vt-anthracite) !important;
    background:
        linear-gradient(112deg,
            rgba(255,255,255,.28) 0%,
            rgba(255,255,255,.78) 30%,
            rgba(255,255,255,.18) 46%,
            rgba(255,255,255,.06) 64%,
            rgba(255,255,255,.40) 82%,
            rgba(255,255,255,.08) 100%),
        linear-gradient(180deg,#fafbfb 0%,#d9dbde 52%,#b9bdc1 100%) !important;
    background-size: 150% 100%, 100% 100% !important;
    background-position: 12% 0, 0 0 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.82) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -2px 3px rgba(63,69,76,.16),
        0 2px 0 #969ba1,
        0 4px 8px rgba(45,49,54,.13) !important;
    transition: transform .14s ease, box-shadow .14s ease, background-position .22s ease;
}

.question-on-item .btn.question:hover,
.question-on-item .btn.question:focus {
    background-position: 72% 0, 0 0 !important;
    color: var(--vt-anthracite) !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 #fff,
        inset 0 -2px 3px rgba(63,69,76,.14),
        0 3px 0 #969ba1,
        0 6px 11px rgba(45,49,54,.17) !important;
}

.question-on-item .btn.question:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(54,59,65,.22),
        inset 0 -1px 1px rgba(255,255,255,.72),
        0 1px 0 #969ba1,
        0 2px 4px rgba(45,49,54,.10) !important;
}

/* 02 – Überschriften zwischen angehobenen Karten dürfen nicht optisch absaufen. */
#description h2,
#description h3,
#description .h2,
#description .h3,
body .vt-home-hero h2,
body .vt-home-section-head h2,
.vt-flavour-head h2,
.vt-analysis-head h2 {
    position: relative;
    z-index: 3;
    color: #272725 !important;
    font-weight: 650 !important;
    letter-spacing: -.008em;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

#description h2,
#description h3 {
    margin-top: .72rem;
    margin-bottom: .46rem;
}

/* Karten bleiben plastisch, werfen aber keinen unnötig tiefen Schatten auf Überschriften. */
.vt-guide-link-card,
.vt-local-action-card,
.vt-product-fact,
.vt-flavour-facts,
.vt-mixing-step,
.vt-analysis-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        0 2px 4px rgba(45,38,33,.055),
        0 4px 8px rgba(45,38,33,.06) !important;
}

/* 03 – Das alte vt-home-System bringt selbst einen hellgrauen Außencontainer mit.
   Im neuen Child wird die große Hülle neutral weiß; die inneren Karten tragen die Tiefe. */
body .vt-home-hero,
body .vt-home-assortment,
body .vt-home-local,
body .vt-home-owl,
body .vt-home-taste,
body .vt-home-trust,
body .vt-home-contact {
    background: #fff !important;
    border-color: rgba(79,69,61,.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 2px 5px rgba(46,39,34,.045),
        0 5px 11px rgba(46,39,34,.055) !important;
}

/* Der Hero im Kategorien-/Portletbereich benutzt im aktuellen HTML h2 statt h1. */
body .vt-home-hero h2 {
    margin: 0 0 .34rem 0;
    font-size: clamp(1.12rem, 1.85vw, 1.42rem);
    line-height: 1.18;
}

/* 04 – NOVA legt aufgeklappte Kategorie-Untermenüs standardmäßig auf eine helle Fläche.
   Im neuen Sidebar-System bleibt die Fläche durchgehend ruhig. */
#sidepanel_left .box-categories .dropdown .collapse,
#sidepanel_left .box-linkgroup .dropdown .collapse,
#sidepanel_left .box-categories .submenu,
#sidepanel_left .box-categories .nav .nav,
aside .box-categories .dropdown .collapse,
aside .box-linkgroup .dropdown .collapse {
    background: transparent !important;
}

#sidepanel_left .box-categories .nav-link.active,
#sidepanel_left .box-categories .nav-item.active > .nav-link,
aside .box-categories .nav-link.active,
aside .box-categories .nav-item.active > .nav-link {
    background: rgba(184,115,51,.08) !important;
    color: #5f341e !important;
}


/* =========================================================
   VapeTec 0.12.0 – MOBILE-FIRST PRODUKTKARTEN
   Produktkarten sind antippbar; permanente Link-Unterstreichung entfällt.
   Desktop-Hover bleibt eine zusätzliche, nicht notwendige Rückmeldung.
   ========================================================= */

/* Produktnamen in Grid, Slider und ähnlichen Artikellisten ruhig halten. */
#product-list .productbox-title a,
.productbox .productbox-title a,
.item-slider-desc a,
.product-slider .productbox-title a,
.slick-slider .productbox-title a,
.productbox-title > a {
    color: var(--vt-anthracite) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

#product-list .productbox-title a:visited,
.productbox .productbox-title a:visited,
.item-slider-desc a:visited,
.product-slider .productbox-title a:visited,
.slick-slider .productbox-title a:visited,
.productbox-title > a:visited {
    color: var(--vt-anthracite) !important;
    text-decoration: none !important;
}

/* NOVA behandelt die komplette Produktbox bereits als interaktiven Bereich. */
.productbox[role="button"] {
    cursor: pointer;
}

/* Desktop bekommt nur eine dezente Zusatzreaktion – Mobile benötigt sie nicht. */
@media (hover:hover) and (pointer:fine) and (min-width:768px) {
    #product-list .productbox:hover .productbox-title a,
    .productbox:hover .productbox-title a,
    .item-slider-desc a:hover,
    .product-slider .productbox-title a:hover,
    .slick-slider .productbox-title a:hover {
        color: var(--vt-copper-action) !important;
        text-decoration: none !important;
    }
}

/* Tastaturbedienung bleibt sichtbar, ohne Mobile mit Linkoptik zu belasten. */
.productbox[role="button"]:focus-visible {
    outline: 2px solid rgba(168,95,44,.72) !important;
    outline-offset: 4px;
    border-radius: 6px;
}


/* =========================================================
   VapeTec 0.13.0 – JTL hidden submit safeguard
   NOVA places a hidden fallback submit at the start of the buy form.
   It must never receive visible material styling.
   ========================================================= */
.btn-hidden-default {
    display: none !important;
}


/* =========================================================
   VapeTec 0.14.0 – PRODUCT RAILS / MOBILE-FIRST
   "Ähnliche Artikel", "Neu im Sortiment" und weitere NOVA-
   Produktslider wirken frei auf dem Seitenhintergrund statt
   wie ein weiterer Kasten. Die komplette Produktfläche bleibt
   antippbar; permanente Link-Unterstreichung entfällt.
   ========================================================= */

/* 01 – Große Slider-Hüllen bleiben optisch frei. */
.recommendations .slick-slider-other,
.product-slider-wrapper,
.product-slider-wrapper .slick-slider-other {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* 02 – Überschrift ohne lange NOVA-Trennlinie. */
.recommendations .hr-sect,
.product-slider-wrapper .hr-sect {
    display: block;
    margin: 1.15rem 0 .7rem;
    padding: 0;
    color: #35322f !important;
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,.58);
}

.recommendations .hr-sect::before,
.recommendations .hr-sect::after,
.product-slider-wrapper .hr-sect::before,
.product-slider-wrapper .hr-sect::after {
    display: none !important;
    content: none !important;
}

.product-slider-wrapper .hr-sect a {
    color: inherit !important;
    text-decoration: none !important;
}

/* 03 – Produkt selbst bleibt "frei": kein sichtbarer Kartenhintergrund. */
.slick-type-product .product-wrapper-product {
    padding-left: .42rem !important;
    padding-right: .42rem !important;
    background: transparent !important;
}

.slick-type-product .product-wrapper-product > a {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: .28rem .18rem .42rem;
    color: var(--vt-anthracite) !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(184,115,51,.08);
}

.slick-type-product .product-wrapper-product > a:hover,
.slick-type-product .product-wrapper-product > a:focus,
.slick-type-product .product-wrapper-product > a:active {
    text-decoration: none !important;
}

/* 04 – Bilder bewusst kleiner als die verfügbare Slider-Spalte. */
.slick-type-product .item-slider {
    width: min(100%, 124px) !important;
    max-width: 124px !important;
    margin: 0 auto .38rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

.slick-type-product .item-slider .inner,
.slick-type-product .item-slider img,
.slick-type-product .product-image {
    background: transparent !important;
}

/* 05 – Name und Preis kompakt, ruhig, gut antippbar. */
.slick-type-product .item-slider-desc {
    display: -webkit-box !important;
    min-height: 2.15em;
    margin: 0 auto .18rem;
    overflow: hidden;
    color: #373431 !important;
    font-size: .78rem !important;
    font-weight: 520;
    line-height: 1.08;
    text-align: center;
    text-decoration: none !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.slick-type-product .item-slider-price {
    margin-top: auto;
    color: #262422;
    font-size: .84rem;
    line-height: 1.15;
    text-align: center;
}

.slick-type-product .item-slider-price .price,
.slick-type-product .item-slider-price .price_wrapper,
.slick-type-product .item-slider-price .price-note {
    text-decoration: none !important;
}

/* Grundpreis/Steuerhinweise bleiben sichtbar, aber treten zurück. */
.slick-type-product .item-slider-price small,
.slick-type-product .item-slider-price .base-price,
.slick-type-product .item-slider-price .footnote-reference {
    font-size: .68rem !important;
    line-height: 1.1;
    color: #6c6762 !important;
}

/* 06 – Desktop: nur leichter Lift, keine neue Hintergrundkarte. */
@media (hover:hover) and (pointer:fine) {
    .slick-type-product .product-wrapper-product > a {
        transition: transform .16s ease, filter .16s ease;
    }

    .slick-type-product .product-wrapper-product > a:hover {
        transform: translateY(-2px);
        filter: drop-shadow(0 4px 5px rgba(55,47,41,.10));
    }

    .slick-type-product .product-wrapper-product > a:hover .item-slider-desc {
        color: var(--vt-copper-action) !important;
    }
}

/* 07 – Tastatur-Fokus sichtbar, ohne dauerhafte Rahmen auf Touch. */
.slick-type-product .product-wrapper-product > a:focus-visible {
    outline: 2px solid rgba(168,95,44,.72) !important;
    outline-offset: 3px;
}

/* 08 – Mobile: 2 Karten + Vorschau auf die nächste bleiben erhalten.
   Das NOVA-Slick-Padding liefert den "Peek"; wir verdichten nur die Karte. */
@media (max-width: 767.98px) {
    .slick-type-product .slick-slide,
    .slick-type-product .product-wrapper-product {
        padding-left: .32rem !important;
        padding-right: .32rem !important;
    }

    .slick-type-product .item-slider {
        width: min(100%, 132px) !important;
        max-width: 132px !important;
    }

    .slick-type-product .item-slider-desc {
        font-size: .80rem !important;
        min-height: 2.18em;
    }

    .slick-type-product .item-slider-price {
        font-size: .86rem;
    }
}

/* 09 – Pfeile klein und materialkonform, ohne die Reihe einzurahmen. */
.recommendations .slick-type-product .slick-arrow,
.product-slider-wrapper .slick-type-product .slick-arrow {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0 !important;
    border: 1px solid rgba(107,103,98,.34) !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg,#f7f7f6 0%,#d6d7d8 58%,#b9bcc0 100%) !important;
    color: #3e3b38 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 5px rgba(38,34,30,.12) !important;
}

.recommendations .slick-type-product .slick-arrow:hover,
.product-slider-wrapper .slick-type-product .slick-arrow:hover {
    background: linear-gradient(180deg,#d69258 0%,#b87333 56%,#8c481f 100%) !important;
    color: #fff !important;
}

/* =========================================================
   VapeTec 0.15.0 – DARK HEADER / MEGA MENU
   Header und Footer bilden einen gemeinsamen dunklen Rahmen.
   Der Content bleibt auf der warmgrauen Seitenfläche.
   ========================================================= */

:root {
    --vt-header-bg-hi: #292929;
    --vt-header-bg: #202020;
    --vt-header-surface: #303030;
    --vt-header-surface-hover: #393939;
    --vt-header-border: rgba(255,255,255,.10);
    --vt-header-text: #f5f5f5;
    --vt-header-muted: rgba(255,255,255,.68);
}

/* 01 – Header-Grundfläche analog zum Footer. */
body header,
body #jtl-nav-wrapper,
body #header-top-bar,
body .topbar-wrapper,
body header .navbar {
    background: linear-gradient(180deg, var(--vt-header-bg-hi) 0%, var(--vt-header-bg) 100%) !important;
    color: var(--vt-header-text) !important;
}

body header {
    border-bottom: 1px solid rgba(0,0,0,.55);
    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.035),
        0 4px 12px rgba(0,0,0,.16) !important;
}

/* Die inneren Bootstrap-Hüllen dürfen den dunklen Header nicht wieder weiß machen. */
body header .container,
body header .container-fluid,
body header .container-fluid-xl,
body header .navbar-collapse,
body header .nav-scrollbar,
body header .nav-scrollbar-inner {
    background-color: transparent !important;
}

/* 02 – Navigation und Topbar. */
body header .nav-link,
body header .nav-link:visited,
body header .topbar-wrapper a,
body header #header-top-bar a,
body header #shop-nav .nav-link,
body header .navbar-toggler,
body header .form-clear,
body header .nav-home-button a {
    color: var(--vt-header-text) !important;
    text-decoration: none !important;
}

body header .topbar-wrapper,
body header #header-top-bar {
    border-color: var(--vt-header-border) !important;
}

body header .topbar-wrapper,
body header #header-top-bar,
body header .topbar-wrapper a,
body header #header-top-bar a {
    color: var(--vt-header-muted) !important;
}

body header .navbar-nav > .nav-item > .nav-link {
    font-weight: 520;
    letter-spacing: .005em;
}

body header .navbar-nav > .nav-item.active > .nav-link,
body header .navbar-nav > .nav-item:hover > .nav-link,
body header .navbar-nav > .nav-item.hover > .nav-link,
body header .navbar-nav > .nav-item > .nav-link:focus {
    color: #f0b277 !important;
}

@media (min-width: 992px) {
    body header .navbar-nav > .nav-item > .nav-link::before {
        border-color: var(--vt-copper) !important;
    }
}

/* 03 – Suche: dunkle eingelassene Fläche, silberne Suchaktion bleibt erhalten. */
body header #search .form-control,
body header .main-search-wrapper .form-control,
body header .search-wrapper .form-control,
body header .search-form-wrapper-fixed .form-control,
body .fixed-search .form-control {
    background: linear-gradient(180deg, #373737 0%, #303030 100%) !important;
    border-color: #4a4a4a !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.38),
        0 1px 0 rgba(255,255,255,.035) !important;
}

body header #search .form-control::placeholder,
body header .main-search-wrapper .form-control::placeholder,
body header .search-wrapper .form-control::placeholder,
body .fixed-search .form-control::placeholder {
    color: rgba(255,255,255,.55) !important;
}

body header #search .form-control:focus,
body header .main-search-wrapper .form-control:focus,
body header .search-wrapper .form-control:focus,
body .fixed-search .form-control:focus {
    border-color: rgba(184,115,51,.88) !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.38),
        0 0 0 2px rgba(184,115,51,.18) !important;
}

body .fixed-search,
body .search-form-wrapper-fixed {
    background: linear-gradient(180deg, var(--vt-header-bg-hi) 0%, var(--vt-header-bg) 100%) !important;
}

/* 04 – Shop-Icons, Warenkorb und Zähler. */
body header #shop-nav,
body header #shop-nav a,
body header #shop-nav .fas,
body header #shop-nav .far,
body header #shop-nav .fa,
body header .nav-icons {
    color: var(--vt-header-text) !important;
}

body header .product-count,
body header .badge-primary {
    background: linear-gradient(180deg, #d58b4d 0%, var(--vt-copper) 55%, #8b461f 100%) !important;
    border: 1px solid #6a3215 !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 1px 3px rgba(0,0,0,.28) !important;
}

/* 05 – Mega-Menüs und Header-Dropdowns: dunkles Material statt weißer Fläche. */
body header .dropdown-menu {
    background: linear-gradient(180deg, #2c2c2c 0%, #242424 100%) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    color: var(--vt-header-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 14px 30px rgba(0,0,0,.30) !important;
}

@media (min-width: 992px) {
    body header .navbar-nav > .nav-item.dropdown-full > .dropdown-menu,
    body header .navbar-nav > .nav-item > .dropdown-menu {
        border-top: 2px solid var(--vt-copper) !important;
        border-radius: 0 0 10px 10px !important;
    }
}

body header .dropdown-body,
body header .dropdown-menu .container,
body header .dropdown-menu .container-fluid,
body header .dropdown-menu .row,
body header .dropdown-menu .nav {
    background: transparent !important;
    color: inherit !important;
}

/* 06 – Überschriften, Unterkategorien und Trennlinien im Mega-Menü. */
body header .submenu-headline,
body header .submenu-headline:visited,
body header .submenu-headline-toplevel,
body header .dropdown-menu .nav-mobile-heading {
    color: #fff !important;
    text-decoration: none !important;
}

body header .submenu-headline-toplevel {
    border-bottom-color: rgba(255,255,255,.12) !important;
    font-weight: 650;
}

body header .dropdown-menu .nav-link,
body header .dropdown-menu .nav-link:visited,
body header .dropdown-menu .dropdown-item,
body header .dropdown-menu .dropdown-item:visited,
body header .categories-recursive-dropdown .nav-link {
    color: rgba(255,255,255,.76) !important;
    text-decoration: none !important;
}

body header .dropdown-menu .nav-link:hover,
body header .dropdown-menu .nav-link:focus,
body header .dropdown-menu .dropdown-item:hover,
body header .dropdown-menu .dropdown-item:focus,
body header .categories-recursive-dropdown .nav-link:hover,
body header .categories-recursive-dropdown .nav-link:focus {
    background-color: rgba(255,255,255,.055) !important;
    color: #f0b277 !important;
}

body header .dropdown-menu hr,
body header .nav-mobile-header-hr {
    border-color: rgba(255,255,255,.11) !important;
}

/* 07 – Account-/Dropdown-Flächen im Header bleiben lesbar. */
body header .account-icon-dropdown .dropdown-footer {
    background: rgba(255,255,255,.045) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
}

body header .dropdown-menu .form-control,
body header .dropdown-menu input,
body header .dropdown-menu select {
    background-color: #343434 !important;
    border-color: #505050 !important;
    color: #fff !important;
}

body header .dropdown-menu label,
body header .dropdown-menu small,
body header .cart-dropdown-shipping-notice {
    color: var(--vt-header-muted) !important;
}

/* 08 – Mobile: gleiche Designsprache statt weißem Offcanvas-Menü. */
@media (max-width: 991.98px) {
    body header .navbar-collapse,
    body header .navbar-nav,
    body header .nav-mobile-body,
    body header .nav-mobile-header {
        background: linear-gradient(180deg, #292929 0%, #202020 100%) !important;
        color: var(--vt-header-text) !important;
    }

    body header .navbar-nav .nav-item,
    body header .navbar-nav .nav-link {
        border-color: rgba(255,255,255,.075) !important;
    }

    body header .navbar-nav .nav-link:hover,
    body header .navbar-nav .nav-link:focus,
    body header .navbar-nav .nav-item.active > .nav-link {
        background: rgba(255,255,255,.045) !important;
        color: #f0b277 !important;
    }

    body header .navbar-nav .dropdown-menu {
        background: #242424 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* =========================================================
   VapeTec 0.18.0 – COMPONENT CONSOLIDATION / FEAL-DIRECTION
   The complete historical vt-* component CSS now lives inside
   the child before this design layer. These rules deliberately
   keep the FEAL-like strengths we chose: compact typography,
   restrained shadows, free-standing tiles and copper interaction.
   ========================================================= */

:root {
    --vt-ui-radius-sm: 6px;
    --vt-ui-radius: 8px;
    --vt-ui-shadow-soft: 0 2px 4px rgba(35,31,28,.045), 0 5px 10px rgba(35,31,28,.055);
    --vt-ui-border-soft: rgba(69,63,58,.10);
}

/* Old custom components should inherit the new font and calmer material language. */
[class^="vt-"],
[class*=" vt-"] {
    font-family: var(--vt-font-sans);
}

/* Common custom cards: less "box in box", slightly flatter and more compact. */
body .vt-product-fact,
body .vt-data-check-card,
body .vt-mixing-step,
body .vt-mixing-hint,
body .vt-shop-trust-item,
body .vt-related-card,
body .vt-guide-card,
body .vt-guide-step,
body .vt-guide-faq-item,
body .vt-analysis-card,
body .vt-local-action-card {
    border-color: var(--vt-ui-border-soft) !important;
    border-radius: var(--vt-ui-radius) !important;
}

/* Legacy burgundy accents in descriptive product modules align with Vape-Tec copper.
   Explicit warning/status colors are intentionally not globally rewritten. */
body .vt-flavour-main h3,
body .vt-product-profile-note strong {
    color: var(--vt-copper-hover) !important;
}

body .vt-flavour-note {
    background: linear-gradient(145deg, rgba(184,115,51,.075), rgba(184,115,51,.11)) !important;
    border-color: rgba(184,115,51,.18) !important;
}
body .vt-flavour-note strong {
    color: var(--vt-copper-hover) !important;
}


/* =========================================================
   VapeTec 0.20.3 – VARIANT PRODUCTBOX: NO WHITE HOVER PLATE
   NOVA adds a white background specifically to gallery cards
   with listable variations (.show-variation-collapse). Keep the
   variant controls, but preserve the free-standing product look.
   ========================================================= */
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:hover,
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:focus,
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse.focus,
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:focus-within {
    background: transparent !important;
}

#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:hover .productbox-inner,
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:focus .productbox-inner,
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse.focus .productbox-inner,
#product-list.layout-gallery .productbox-hover.productbox-show-variations.show-variation-collapse:focus-within .productbox-inner {
    background: transparent !important;
}

/* ================================================================
   VapeTec 0.20.4 – VARIANT CARD SPACING FIX
   NOVA reserves 1rem bottom padding inside the gallery variation
   collapse. On compact Vape-Tec product cards this creates a blank
   row and pushes title/price into the following product row.
   ================================================================ */
#product-list.layout-gallery .productbox-show-variations.show-variation-collapse .productbox-variations,
#product-list.layout-gallery .productbox-show-variations.show-variation-collapse .productbox-variations .productbox-onhover,
#product-list.layout-gallery .productbox-show-variations.show-variation-collapse .productbox-variations .collapse,
#product-list.layout-gallery .productbox-show-variations.show-variation-collapse .productbox-variations .collapsing,
#product-list.layout-gallery .productbox-show-variations.show-variation-collapse .productbox-variations .show {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#product-list.layout-gallery .productbox-show-variations.show-variation-collapse .productbox-variations .variations .form-group:last-child,
#product-list.layout-gallery .productbox-show-variations.show-variation-collapse .productbox-variations .form-group:last-child {
    margin-bottom: 0 !important;
}

/* ================================================================
   VapeTec 0.20.5 – CATEGORY PAGINATION MATERIAL FIX
   Pagination must sit directly on the warm page surface: no white
   number tiles and no remaining NOVA-yellow active indicator.
   ================================================================ */
body .pagination .page-link,
body .pagination .page-item .page-link,
body .pagination .page-item.disabled .page-link {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #5f5a56 !important;
    text-decoration: none !important;
}

body .pagination .page-link:hover,
body .pagination .page-link:focus {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--vt-copper-action) !important;
}

body .pagination .page-item.active .page-link {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--vt-copper-action) !important;
    box-shadow: none !important;
    color: var(--vt-copper-action) !important;
}

/* Catch theme implementations that draw the active marker with a pseudo element. */
body .pagination .page-item.active .page-link::before,
body .pagination .page-item.active .page-link::after {
    border-color: var(--vt-copper-action) !important;
    background-color: var(--vt-copper-action) !important;
}

/* ================================================================
   VapeTec 0.20.6 – PAGINATION FINAL MATERIAL FIX
   NOVA renders desktop page numbers inside a static .dropdown-menu.
   That wrapper, not the individual .page-link, was the remaining
   white strip. Keep the whole pagination material transparent and
   use exactly ONE copper active marker.
   ================================================================ */
body .productlist-page-nav .pagination,
body .productlist-page-nav .pagination .dropdown,
body .productlist-page-nav .pagination .dropdown-menu,
body .productlist-page-nav .pagination .dropdown-item,
body .productlist-page-nav .pagination .page-item,
body .productlist-page-nav .pagination .page-link,
body .pagination-wrapper .pagination,
body .pagination-wrapper .pagination .dropdown,
body .pagination-wrapper .pagination .dropdown-menu,
body .pagination-wrapper .pagination .dropdown-item,
body .pagination-wrapper .pagination .page-item,
body .pagination-wrapper .pagination .page-link {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body .productlist-page-nav .pagination .dropdown-menu,
body .pagination-wrapper .pagination .dropdown-menu {
    border: 0 !important;
}

body .productlist-page-nav .pagination .page-item.active .page-link,
body .pagination-wrapper .pagination .page-item.active .page-link {
    border: 0 !important;
    border-bottom: 0 !important;
    color: var(--vt-copper-action) !important;
    font-weight: 700 !important;
}

body .productlist-page-nav .pagination .page-item.active .page-link::before,
body .pagination-wrapper .pagination .page-item.active .page-link::before {
    content: none !important;
    display: none !important;
}

body .productlist-page-nav .pagination .page-item.active .page-link::after,
body .pagination-wrapper .pagination .page-item.active .page-link::after {
    content: '' !important;
    position: absolute !important;
    left: .55rem !important;
    right: .55rem !important;
    bottom: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 3px solid var(--vt-copper-action) !important;
}

/* ================================================================
   VapeTec 0.21.18 – FULLWIDTH + COMPACT CATEGORY HEAD
   Ziel:
   - Artikelübersichten ohne permanente linke Sidebar
   - Filter oberhalb der Liste (NOVA "Eigenes Fenster")
   - weniger Verwaltungsfläche zwischen Hauptnavigation und Ware
   - kompakte Werkzeugzeile statt großer Bedienfläche
   ================================================================ */

/* Die Artikelübersicht besitzt jetzt die komplette Containerbreite. */
#content-wrapper.is-item-list.vt-item-list-fullwidth {
    padding-top: 0 !important;
}

#content-wrapper.is-item-list.vt-item-list-fullwidth #content,
#content-wrapper.is-item-list.vt-item-list-fullwidth #result-wrapper {
    width: 100%;
    max-width: none;
}

/* Breadcrumb dichter an Navigation und Kategorietitel. */
#content-wrapper.is-item-list .breadcrumb-container {
    padding-top: .12rem !important;
    padding-bottom: .08rem !important;
}

#content-wrapper.is-item-list .breadcrumb {
    padding-top: .32rem !important;
    padding-bottom: .32rem !important;
    line-height: 1.25;
}

@media (min-width: 992px) {
    #content-wrapper.is-item-list .breadcrumb-wrapper {
        min-height: 0;
    }
}

/* Titel/Beschreibung: NOVA addiert hier sonst mehrere großzügige Abstände. */
#content-wrapper.is-item-list #result-wrapper > .title {
    margin-top: .12rem !important;
    margin-bottom: .34rem !important;
}

#content-wrapper.is-item-list #result-wrapper > .title h1,
#content-wrapper.is-item-list #result-wrapper > .title .h1,
#content-wrapper.is-item-list #result-wrapper > .title h2,
#content-wrapper.is-item-list #result-wrapper > .title .h2,
#content-wrapper.is-item-list #result-wrapper > h1,
#content-wrapper.is-item-list #result-wrapper > .h1 {
    margin-bottom: 0 !important;
    line-height: 1.18;
}

#content-wrapper.is-item-list #result-wrapper > .desc {
    margin-bottom: .48rem !important;
}

#content-wrapper.is-item-list #result-wrapper > .desc > :last-child {
    margin-bottom: 0 !important;
}

/* Haupt-Werkzeugzeile: flach, ruhig, kein großer weißer Verwaltungsblock. */
#content-wrapper.is-item-list .productlist-page-nav-header-m.productlist-page-nav {
    align-items: center;
    min-height: 34px;
    margin-top: .18rem !important;
    margin-bottom: .52rem !important;
    padding: .22rem 0 !important;
    border-top: 1px solid rgba(69,63,58,.10);
    border-bottom: 1px solid rgba(69,63,58,.10);
    background: transparent !important;
    box-shadow: none !important;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m .displayoptions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .28rem;
    padding-right: .35rem;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m .displayoptions > * {
    margin: 0 !important;
}

/* NOVA result-options erzeugt intern eine zusätzliche Grid-Zeile – kompakt neutralisieren. */
#content-wrapper.is-item-list .productlist-page-nav-header-m #improve_search,
#content-wrapper.is-item-list .productlist-page-nav-header-m #result-options,
#content-wrapper.is-item-list .productlist-page-nav-header-m #result-options > .row {
    margin: 0 !important;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m #result-options > .row {
    flex-wrap: nowrap;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m .filter-collapsible-control {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0 !important;
}

/* Filter, Sortierung, Ansicht: gleiche kompakte 30px-Grundhöhe. */
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn,
#content-wrapper.is-item-list .productlist-page-nav-header-m button.btn,
#content-wrapper.is-item-list .productlist-page-nav-header-m a.btn {
    min-height: 30px !important;
    height: 30px;
    padding: .18rem .52rem !important;
    border-radius: 5px !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m #js-filters {
    border-color: rgba(168,95,44,.48) !important;
    color: var(--vt-anthracite) !important;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m #js-filters .fa-filter {
    color: var(--vt-copper-action) !important;
    margin-right: .24rem;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m .dropdown-toggle::after {
    margin-left: .35rem;
    vertical-align: .12em;
}

/* Galerie-/Listenumschalter bewusst klein halten. */
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn-option {
    width: 30px;
    min-width: 30px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Trefferzahl: informativ, aber visuell klar nachrangig. */
#content-wrapper.is-item-list .productlist-page-nav-header-m .productlist-item-info {
    margin-left: auto;
    padding: .28rem 0 .28rem .7rem !important;
    border: 0 !important;
    color: #77716b;
    font-size: .69rem;
    line-height: 1.2;
    white-space: nowrap;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m .vt-product-count-simple {
    font-weight: 500;
}

/* Der Standard-Trenner unter der Leiste bleibt nur eine feine Linie. */
#content-wrapper.is-item-list .productlist-page-nav-bottom {
    margin: 0 0 .55rem !important;
    border-top-color: transparent !important;
}

/* Aktive Filter dicht an der Werkzeugzeile halten. */
#content-wrapper.is-item-list .active-filters {
    margin-top: .42rem !important;
    margin-bottom: .55rem !important;
}

/* Produktgrid nach der Bedienzeile nicht erneut unnötig absetzen. */
#content-wrapper.is-item-list #product-list {
    margin-top: 0 !important;
}

/* Tablet/Mobile: nicht auf Teufel komm raus in eine einzige Zeile pressen. */
@media (max-width: 991.98px) {
    #content-wrapper.is-item-list .productlist-page-nav-header-m.productlist-page-nav {
        row-gap: .28rem;
        padding-top: .3rem !important;
        padding-bottom: .3rem !important;
    }

    #content-wrapper.is-item-list .productlist-page-nav-header-m .displayoptions {
        width: 100%;
        padding-right: 0;
    }

    #content-wrapper.is-item-list .productlist-page-nav-header-m .productlist-item-info {
        margin-left: 0;
        padding-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    #content-wrapper.is-item-list .breadcrumb-container {
        padding-left: .65rem;
        padding-right: .65rem;
    }

    #content-wrapper.is-item-list .productlist-page-nav-header-m .btn,
    #content-wrapper.is-item-list .productlist-page-nav-header-m button.btn,
    #content-wrapper.is-item-list .productlist-page-nav-header-m a.btn {
        min-height: 32px !important;
        height: 32px;
        font-size: .74rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.19 – CATEGORY HEAD FINETUNING
   - obere NOVA-Breadcrumb-Haarlinie entfernen
   - untere Breadcrumb-Linie in Kupfer
   - Abstand Breadcrumb -> Kategorietitel reduzieren
   - Werkzeugleiste oben/unten symmetrisch mit Kupferlinien
   - kompakten Buttons ihre Material-/3D-Tiefe zurückgeben
   - Galerie-/Listenicons exakt zentrieren
   ================================================================ */

/* NOVA zeichnet am Desktop standardmäßig oben UND unten eine helle
   Breadcrumb-Linie. Oben entfällt sie; unten wird sie zum Kupfertrenner. */
@media (min-width: 992px) {
    #content-wrapper.is-item-list .breadcrumb-wrapper {
        border-top: 0 !important;
        border-bottom: 1px solid var(--vt-copper-action) !important;
    }
}

/* Der Content bekam nach dem Breadcrumb noch NOVA-Vertikalraum.
   Nur die Artikelliste wird verdichtet; andere Seitentypen bleiben unangetastet. */
#content-wrapper.is-item-list #content {
    padding-top: .38rem !important;
}

#content-wrapper.is-item-list #result-wrapper > .title {
    margin-top: 0 !important;
    margin-bottom: .30rem !important;
}

/* Werkzeugleiste: gleiche Luft ober- und unterhalb, beide Linien Kupfer. */
#content-wrapper.is-item-list .productlist-page-nav-header-m.productlist-page-nav {
    margin-top: .34rem !important;
    margin-bottom: .34rem !important;
    border-top-color: var(--vt-copper-action) !important;
    border-bottom-color: var(--vt-copper-action) !important;
}

/* 0.21.18 hatte die Tiefe bewusst entfernt. Die kompakte Größe bleibt,
   aber das bestehende Vape-Tec-Materialsystem darf wieder sichtbar sein. */
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn,
#content-wrapper.is-item-list .productlist-page-nav-header-m button.btn,
#content-wrapper.is-item-list .productlist-page-nav-header-m a.btn {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -2px 3px rgba(63,69,76,.16),
        0 2px 0 rgba(91,94,98,.52),
        0 4px 7px rgba(45,49,54,.14) !important;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m .btn:hover,
#content-wrapper.is-item-list .productlist-page-nav-header-m button.btn:hover,
#content-wrapper.is-item-list .productlist-page-nav-header-m a.btn:hover,
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn:focus,
#content-wrapper.is-item-list .productlist-page-nav-header-m button.btn:focus,
#content-wrapper.is-item-list .productlist-page-nav-header-m a.btn:focus {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -2px 3px rgba(63,69,76,.15),
        0 3px 0 rgba(91,94,98,.52),
        0 6px 10px rgba(45,49,54,.16) !important;
}

/* Ansichtsumschalter: Glyph unabhängig von Font-Metrik pixelmittig. */
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn-option {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#content-wrapper.is-item-list .productlist-page-nav-header-m .btn-option > i,
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn-option > .fa,
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn-option > .fas,
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn-option > .far,
#content-wrapper.is-item-list .productlist-page-nav-header-m .btn-option svg {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
}

@media (max-width: 991.98px) {
    #content-wrapper.is-item-list #content {
        padding-top: .45rem !important;
    }

    #content-wrapper.is-item-list .productlist-page-nav-header-m.productlist-page-nav {
        margin-top: .38rem !important;
        margin-bottom: .38rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.20 – CATEGORY RHYTHM + FIVE-COLUMN GALLERY
   - Breadcrumb -> Kategorietitel nochmals enger
   - Werkzeugleiste optisch zwischen den Kupferlinien zentriert
   - Galerieansicht ab Desktop mit 5 Artikeln pro Zeile
   ================================================================ */

@media (min-width: 992px) {
    /* Unter dem Breadcrumb blieb trotz 0.21.19 noch zu viel NOVA-Luft.
       Den gesamten Content nur auf Artikellisten enger an den Trenner ziehen
       und den eigentlichen Kategorietitel noch leicht nach oben setzen. */
    #content-wrapper.is-item-list #content {
        padding-top: .12rem !important;
    }

    #content-wrapper.is-item-list #result-wrapper > .title {
        margin-top: -.55rem !important;
    }

    /* Die Buttons standen optisch zu tief zwischen den beiden Kupferlinien.
       Nur den Inhalt der Zeile leicht anheben – Linien und 3D-Geometrie bleiben
       exakt an ihrer Position. Dadurch wird der Abstand oben/unten ausgewogener. */
    /* 0.21.116: Das transform erzeugte einen eigenen Stacking Context und
       Containing Block fuer das NOVA-Filter-Modal (#collapseFilter) sowie
       Dropdown-Menues. Die visuelle 4px-Verschiebung bleibt erhalten,
       ohne Popups hinter den Produktbildern oder dem Modal-Backdrop
       verschwinden zu lassen. */
    #content-wrapper.is-item-list .productlist-page-nav-header-m > .displayoptions,
    #content-wrapper.is-item-list .productlist-page-nav-header-m > .productlist-item-info,
    #content-wrapper.is-item-list .productlist-page-nav-header-m > .productlist-pagination {
        position: relative;
        top: -4px;
    }

    /* NOVA arbeitet im 12er-Bootstrap-Grid (xl=3 ergibt 4 Spalten).
       Nach Wegfall der Sidebar nutzen wir die volle Breite bewusst mit fünf
       gleich breiten Produktkacheln. Listenansicht bleibt unangetastet. */
    #content-wrapper.is-item-list #product-list.layout-gallery > .product-wrapper {
        flex: 0 0 20% !important;
        width: 20% !important;
        max-width: 20% !important;
    }
}

/* ================================================================
   VapeTec 0.21.21 – CUSTOMER-FIRST LIST VIEW
   - Bildspalte der NOVA-Listenansicht auf 50 % ihrer Standardbreite
   - technische Artikeldaten aus der Kundenansicht entfernt
   - Merkmale direkt unter dem Artikelnamen
   - Reservieren statt „In den Warenkorb“
   ================================================================ */

/* Die NOVA-Bildspalte ist je Breakpoint 4/12, 6/12 bzw. 3/12 breit.
   In der Vape-Tec-Listenansicht halbieren wir exakt diese Anteile.
   Der frei werdende Platz gehört den kaufrelevanten Informationen. */
@media (min-width: 768px) and (max-width: 991.98px) {
    #content-wrapper.is-item-list #product-list.layout-list .productbox-row > .productbox-inner > .row > [class*="col-"]:first-child {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #content-wrapper.is-item-list #product-list.layout-list .productbox-row > .productbox-inner > .row > [class*="col-"]:first-child {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

@media (min-width: 1200px) {
    #content-wrapper.is-item-list #product-list.layout-list .productbox-row > .productbox-inner > .row > [class*="col-"]:first-child {
        flex: 0 0 12.5% !important;
        max-width: 12.5% !important;
    }
}

/* Bild selbst vollständig in der verkleinerten Spalte nutzen. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-images,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .list-gallery,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-image.square {
    width: 100% !important;
    max-width: 100% !important;
}

/* Technische NOVA-Detailspalte (Art.-Nr., Gewichte usw.) ist per TPL leer.
   Auch ihren Rasterplatz nehmen wir aus der visuellen Struktur. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-details:empty {
    display: none !important;
}

/* Merkmale direkt unter dem Namen: filigran, ruhig und scanbar. */
#content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .28rem .34rem;
    margin-top: .38rem;
    margin-bottom: .42rem;
}

#content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristic {
    display: inline-flex;
    align-items: baseline;
    gap: .24rem;
    min-height: 24px;
    padding: .18rem .42rem;
    border: 1px solid rgba(168, 95, 44, .30);
    border-radius: 5px;
    background: rgba(255, 255, 255, .72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 1px 2px rgba(45,49,54,.08);
    font-size: .70rem;
    line-height: 1.2;
    color: #4b4b49;
}

#content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristic__name {
    color: var(--vt-copper-action);
    font-weight: 600;
}

#content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristic__value {
    color: #383a3d;
    font-weight: 500;
}

#content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristic__separator {
    color: #948b84;
}

/* Der Produktname ist jetzt die klare erste Information. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-title {
    margin-bottom: 0 !important;
    font-weight: 600;
}

/* Preis und Reservierung bleiben als Handlungsbereich rechts erhalten,
   technische Verwaltungsdaten nicht. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-options {
    margin-left: auto;
}

/* Kundensprache und Optik der Reservierungsaktion an die Galerie angleichen. */
#content-wrapper.is-item-list #product-list.layout-list .vt-list-reserve {
    min-height: 34px;
    border: 1px solid rgba(168,95,44,.72) !important;
    border-radius: 5px !important;
    background: #1f2021 !important;
    color: #fff !important;
    font-weight: 600;
    font-size: .74rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -2px 3px rgba(0,0,0,.34),
        0 2px 0 rgba(91,94,98,.48),
        0 4px 7px rgba(45,49,54,.14) !important;
}

#content-wrapper.is-item-list #product-list.layout-list .vt-list-reserve:hover,
#content-wrapper.is-item-list #product-list.layout-list .vt-list-reserve:focus {
    background: #292a2c !important;
    border-color: var(--vt-copper-action) !important;
    color: #fff !important;
}

/* Produktzeilen durch die kleinere Bildfläche auch vertikal kompakter halten. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row {
    padding-top: .45rem;
    padding-bottom: .45rem;
}

/* Mobile: Bild/Infos dürfen wieder untereinander laufen; die Merkmale bleiben
   kompakt, ohne winzige Spalten zu erzwingen. */
@media (max-width: 767.98px) {
    #content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristics {
        margin-top: .32rem;
        gap: .25rem;
    }

    #content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristic {
        font-size: .68rem;
    }
}

/* ================================================================
   VapeTec 0.21.22 – LIST VIEW RESERVATION ALWAYS VISIBLE
   - Mengensteuerung und Reservieren in der Listenansicht dauerhaft sichtbar
   - NOVA blendet .productbox-onhover sonst bis zum Hover aus
   ================================================================ */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-basket-details.productbox-onhover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Sicherheit gegen weitere Hover-Vererbung im Aktionsblock. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-basket-details .productbox-onhover {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ================================================================
   VapeTec 0.21.23 – COMPACT LIST ACTION ROW
   - Unter den Merkmalen: Menge links, Preis/Grundpreis/Lager rechts
   - Grundpreis und Lagerbestand ohne künstliche Leerzeile
   - Lagerbestand deutlich/fett
   - Reservieren bleibt dauerhaft sichtbar unter der Mengensteuerung
   ================================================================ */

/* Die alte NOVA-Dreiteilung (Details / Variationen / Optionen) erzeugt nach
   dem Entfernen der technischen Details unnötige Leerfläche. Der Aktionsblock
   bekommt deshalb die volle Informationsbreite. Varianten bleiben – falls
   vorhanden – oberhalb als eigene volle Zeile erhalten. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-variations:not(:has(*)) {
    display: none !important;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-variations:has(*) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: .35rem;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-options {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(190px, 250px) minmax(150px, 1fr);
    grid-template-areas:
        "actions price"
        "actions stock";
    column-gap: 1rem;
    row-gap: 0;
    align-items: start;
}

/* Preisblock rechts neben der Mengensteuerung. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price {
    grid-area: price;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right;
    align-self: end;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price .price_wrapper,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price .price,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price .price-note,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price .base-price {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price .price-note,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price .base-price {
    line-height: 1.18 !important;
}

/* Lagerbestand direkt unter den Grundpreis – ohne Leerzeile – und bewusst fett. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status {
    grid-area: stock;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right;
    line-height: 1.12 !important;
    align-self: start;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status > *,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status small,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status .signal_image,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status .status,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status .availablefrom,
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status .estimated_delivery {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-weight: 700 !important;
}

/* Menge links. Reservieren bleibt darunter und wird nicht mehr in die rechte
   Preis-/Bestandsspalte gezogen. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-basket-details {
    grid-area: actions;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start;
    opacity: 1 !important;
    visibility: visible !important;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-basket-details > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-basket-details .input-group {
    margin: 0 !important;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-basket-details .vt-list-reserve {
    margin-top: .35rem !important;
}

/* Merkmale und Aktionszeile enger zusammenführen. */
#content-wrapper.is-item-list #product-list.layout-list .vt-list-characteristics {
    margin-bottom: .35rem !important;
}

/* Kleinere Displays: dieselbe Logik, aber ohne zu enge Zweispalten-Anordnung. */
@media (max-width: 575.98px) {
    #content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-options {
        max-width: 100% !important;
        grid-template-columns: 1fr;
        grid-template-areas:
            "price"
            "stock"
            "actions";
        row-gap: .35rem;
    }

    #content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-list-price,
    #content-wrapper.is-item-list #product-list.layout-list .productbox-row .item-delivery-status {
        text-align: left;
    }
}

/* ================================================================
   VapeTec 0.21.24 – LIST ACTIONS DIRECTLY BESIDE IMAGE
   - Die leere technische NOVA-Detailspalte wird in der Listenansicht
     ohne :empty-Abhängigkeit vollständig entfernt.
   - Dadurch beginnt der Aktionsblock unmittelbar unter den Merkmalen
     in derselben Inhaltsspalte direkt rechts neben dem Produktbild.
   ================================================================ */

/* Der Block ist durch item_list.tpl absichtlich leer. :empty war hier zu
   fragil, weil bereits Whitespace/Template-Ausgabe den Selektor verhindern
   kann und dadurch weiterhin eine unsichtbare 4/12-Spalte Platz belegt. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-details {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ohne echte Varianten verschwindet auch deren Rasterplatz vollständig.
   Der Optionen-/Reservierungsblock ist damit das erste sichtbare Element
   der Buy-Form und startet exakt an der linken Kante der Merkmale. */
#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-variations:not(:has(*)) {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#content-wrapper.is-item-list #product-list.layout-list .productbox-row .productbox-options {
    order: 1;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start;
}

/* ================================================================
   VapeTec 0.21.25 – MOBILE PRODUCT DETAIL RHYTHM
   - Bild -> Artikeltitel deutlich dichter
   - Preis/UVP -> Bestandsbereich dichter
   - Trennlinien des Bestands-/Fragebereichs in Vape-Tec Kupfer
   - Beschreibung -> erster Inhaltsblock (z. B. Geschmacksprofil) dichter
   Desktop bleibt bewusst unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    /* NOVA reserviert mobil unter der Galerie standardmäßig sehr viel Raum:
       #image_wrapper 3rem + #gallery 2rem. Für die gestapelte Mobilansicht
       reicht ein kompakter Übergang zum Artikeltitel völlig aus. */
    #product-offer .product-gallery #image_wrapper {
        margin-bottom: .75rem !important;
    }

    #product-offer .product-gallery #image_wrapper #gallery {
        margin-bottom: .5rem !important;
    }

    /* Bei nur einem Artikelbild erzeugt NOVA trotzdem die leere Preview-Spalte. */
    #product-offer .product-gallery .product-detail-image-preview-bar:empty {
        display: none !important;
    }

    #product-offer .product-info,
    #product-offer .product-info .product-info-inner,
    #product-offer .product-info .product-headline,
    #product-offer .product-info .product-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Preis/Grundpreis/UVP nicht mit einem großen NOVA-Abstand vom
       nachfolgenden Bestands-/Frageblock trennen. */
    #product-offer .product-info .price_wrapper {
        margin-bottom: .5rem !important;
    }

    #product-offer .product-info .stock-information {
        margin-top: .35rem !important;
        border-top-color: var(--vt-copper) !important;
        border-bottom-color: var(--vt-copper) !important;
    }

    /* Mobile Beschreibung ist ein Accordion. Der Standard-Cardbody plus
       der eigene Geschmacksprofil-Außenabstand addieren sich sonst unnötig. */
    #tabAccordion #tab-description .card-body {
        padding-top: .5rem !important;
    }

    #tabAccordion #tab-description .desc {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #tabAccordion #tab-description .desc > :first-child {
        margin-top: 0 !important;
    }

    #tabAccordion #tab-description .vt-flavour-profile {
        margin-top: 0 !important;
    }
}

/* ================================================================
   VapeTec 0.21.26 – MOBILE PRODUCT DETAIL TOP COMPACTION
   - Header -> Breadcrumb auf Artikeldetails dichter
   - Breadcrumb -> erster Inhaltsblock dichter, ohne Plugin-Inhalt anzufassen
   - Kategorie + Hersteller mobil aus den Stammdaten entfernt
   - Hauptpreis kräftiger/schwarz
   - Bestands-/Frageblock enger zwischen den Kupferlinien
   - Coming-soon-/Verfügbarkeitsbox näher an den unteren Kupfertrenner
   Desktop bleibt bewusst unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    /* JTL kennzeichnet Artikeldetailseiten am html-Element als ItemPage.
       Damit bleiben diese Rhythmuskorrekturen strikt auf Produktseiten. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .breadcrumb-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: .35rem !important;
        padding-bottom: .15rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .breadcrumb-wrapper,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .breadcrumb {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .breadcrumb {
        padding-top: .3rem !important;
        padding-bottom: .3rem !important;
    }

    /* Direkt nach dem Breadcrumb keine zusätzliche NOVA-Luft aufbauen.
       Der Inhalt des Mini-Plugins wird nicht verändert – nur sein Abstand
       zum davorliegenden Breadcrumb-/Zurück-zur-Liste-Bereich. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content {
        padding-top: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content > :first-child {
        margin-top: .3rem !important;
    }

    /* Mobil sind Artikelnummer + kundennützliche Merkmalkarten ausreichend.
       Kategorie und Hersteller stehen an anderen Stellen im Shop zur Verfügung
       und werden hier aus der Stammdatenliste entfernt. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .info-essential .product-category,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .info-essential .product-manufacturer {
        display: none !important;
    }

    /* Der Hauptpreis darf nicht zwischen den Informationsblöcken untergehen. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .price_wrapper > .price,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .price_wrapper .price.h1 {
        color: #1f1f1f !important;
        font-weight: 700 !important;
    }

    /* Bestand + Frage zum Artikel kompakter zwischen den Kupfertrennern. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .stock-information {
        margin-top: .2rem !important;
        margin-bottom: .35rem !important;
        padding-top: .45rem !important;
        padding-bottom: .45rem !important;
        border-top: 1px solid var(--vt-copper) !important;
        border-bottom: 1px solid var(--vt-copper) !important;
        align-items: center !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .stock-information p,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .stock-information .delivery-status,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .stock-information .question-on-item,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .stock-information .question {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Die Verfügbarkeits-/Vorbestellbox folgt ohne die bisherige große Lücke. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer #add-to-cart.coming_soon {
        margin-top: .35rem !important;
        padding-top: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer #add-to-cart.coming_soon > .coming_soon,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer #add-to-cart.coming_soon > .alert {
        margin-top: 0 !important;
        margin-bottom: .75rem !important;
    }
}


/* ================================================================
   VapeTec 0.21.27 – MOBILE PRODUCT DETAIL SPACING PASS 2
   - Restliche NOVA-Top-Padding vor dem mobilen Breadcrumb entfernen
   - Artikelnummer deutlich dichter an Titel und Kurzbeschreibung führen
   - Verfügbarkeits-/Coming-soon-Box näher an den Bestandsblock ziehen
   - Touch-Ziele für Menge bewusst unverändert lassen
   Desktop bleibt unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    /* NOVA gibt #content-wrapper ohne Fluid-Banner standardmäßig ein großes
       padding-top. Das war der Restabstand zwischen mobiler Suche/Header und
       „Zurück zur Liste“. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content-wrapper:not(.has-fluid),
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content-wrapper {
        padding-top: .55rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .breadcrumb-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .breadcrumb-wrapper {
        margin-bottom: .25rem !important;
    }

    /* NOVA gibt ul.info-essential standardmäßig mehrere rem Außenabstand.
       Mobil bleibt nur die Artikelnummer sichtbar, daher braucht der Eintrag
       weder oberhalb noch unterhalb so viel Leerraum. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .product-info ul.info-essential {
        margin-top: .7rem !important;
        margin-bottom: .8rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer .product-info ul.info-essential .product-sku {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* #add-to-cart trägt in NOVA standardmäßig einen großen oberen Abstand.
       Bei Vorbestell-/Coming-soon-Artikeln lag dadurch zu viel Luft zwischen
       der unteren Kupferlinie und der Verfügbarkeitsbox. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer #add-to-cart {
        margin-top: .65rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer #add-to-cart > .coming_soon,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer #add-to-cart > .alert {
        margin-top: 0 !important;
    }
}

/* ================================================================
   VapeTec 0.21.28 – MOBILE COMING-SOON RHYTHM
   - Abstand unter dem unteren Kupfertrenner an den Abstand UVP -> oberen
     Kupfertrenner angleichen.
   - Ausschließlich mobile Artikeldetailseiten / Vorbestellartikel.
   ================================================================ */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #product-offer #add-to-cart.coming_soon {
        margin-top: -.4rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.29 – MOBILE RELATED PRODUCTS RHYTHM
   - Abstand zwischen mobilem Bewertungs-Accordion und Produktempfehlungen
     deutlich reduziert.
   - Überschrift "Ähnliche Artikel" oben und unten enger geführt.
   - Produktslider selbst und Footer bleiben unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion {
        margin-bottom: .45rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-slider-other {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .hr-sect {
        margin: .2rem 0 .38rem !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.15 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-type-product {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ================================================================
   VapeTec 0.21.30 – MOBILE RELATED PRODUCTS FINETUNE
   - Restlichen Leerraum unter den ähnlichen Artikeln entfernen.
   - Untere Linie der Überschrift an ihrer bisherigen Position belassen.
   - Obere Linie separat etwas höher setzen, damit die Überschrift optisch
     gleichmäßig zwischen beiden Linien sitzt.
   - Beide Linien im Vape-Tec-Kupfer.
   - Footer selbst bleibt bewusst unangetastet.
   ================================================================ */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .hr-sect {
        position: relative !important;
        border-top: 0 !important;
        border-bottom: 1px solid var(--vt-copper) !important;
    }

    /* Die obere Linie wird unabhängig vom Box-Modell der Überschrift
       positioniert. So bleibt die untere Linie an ihrer bisherigen Stelle. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .hr-sect::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: -.32rem !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 1px !important;
        margin: 0 !important;
        background: var(--vt-copper) !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .hr-sect::after {
        display: none !important;
        content: none !important;
    }

    /* NOVA addiert hier standardmäßig 2rem am Slider, 1.5rem an der
       Carousel-Hülle und 3rem am Content-Ende. Auf der mobilen Artikelseite
       erzeugt das den großen leeren Bereich vor dem Footer. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-slider-other,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-slider-other.is-not-opc,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-slider-other.is-not-opc .carousel,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .carousel,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-type-product {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content {
        padding-bottom: .7rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.31 – MOBILE RELATED PRODUCTS FOOTER GAP
   - Restlichen Leerraum nach dem Produktslider bis zum Footer entfernen.
   - Nur mobile Artikeldetailseiten.
   - Footer selbst bleibt unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations {
        margin-bottom: -2.8rem !important;
        padding-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-slider-other,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-list,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-track {
        padding-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content {
        padding-bottom: 0 !important;
    }
}


/* ================================================================
   VapeTec 0.21.32 – MOBILE RELATED/FOOTER SEPARATION
   - Den zu aggressiven negativen Footer-Zug aus 0.21.31 neutralisieren.
   - Ähnliche Artikel enden kompakt, aber wieder klar VOR dem Footer.
   - Der Footer selbst bleibt unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations {
        margin-bottom: .35rem !important;
        padding-bottom: 0 !important;
    }

    /* Content selbst bleibt kompakt; der sichtbare Sicherheitsabstand entsteht
       aus .recommendations + dem vorhandenen mobilen Footer-Margin. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content {
        padding-bottom: 0 !important;
    }
}

/* ================================================================
   VapeTec 0.21.33 – MOBILE RELATED/FOOTER RHYTHM FINAL
   - Abstand nach "Ähnliche Artikel" zum Footer weiter reduzieren.
   - Ziel: optisch derselbe Rhythmus wie oberhalb des Empfehlungsblocks,
     ohne dass der Slider in den Footer hineinläuft.
   - Footer-Inhalt selbst bleibt unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations {
        margin-bottom: -1.4rem !important;
        padding-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-slider-other,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-type-product,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-list,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-track,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .slick-slide,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .product-wrapper-product {
        padding-bottom: 0 !important;
    }
}

/* ================================================================
   VapeTec 0.21.34 – RELATED PRODUCTS / FOOTER GAP (DESKTOP + MOBILE)
   - Korrigiert die eigentliche NOVA-Abstandsquelle am Produktslider:
     .slick-slider-other.is-not-opc = 2rem margin-bottom
     .slick-slider-other.is-not-opc .carousel = 1.5rem margin-bottom
   - Zusätzlich den generellen 3rem-Content-Abschluss auf Artikeldetailseiten
     auf einen kleinen, kontrollierten Abstand reduzieren.
   - Gilt bewusst für Desktop UND Mobile, da der gleiche Leerraum in beiden
     Ansichten sichtbar war.
   ================================================================ */
html[itemtype="https://schema.org/ItemPage"] .recommendations,
html[itemtype="https://schema.org/ItemPage"] .recommendations .slick-slider-other,
html[itemtype="https://schema.org/ItemPage"] .recommendations .slick-slider-other.is-not-opc,
html[itemtype="https://schema.org/ItemPage"] .recommendations .slick-slider-other.is-not-opc .carousel,
html[itemtype="https://schema.org/ItemPage"] .recommendations .carousel,
html[itemtype="https://schema.org/ItemPage"] .recommendations .slick-type-product {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* NOVA setzt #content standardmäßig auf 3rem padding-bottom. Am Ende einer
   Artikeldetailseite ist das nach dem Empfehlungsslider unnötig viel Luft. */
html[itemtype="https://schema.org/ItemPage"] #content {
    padding-bottom: .35rem !important;
}

/* Nur noch eine schmale optische Trennung zwischen Content und Footer. */
html[itemtype="https://schema.org/ItemPage"] body #footer.vt-footer {
    margin-top: .35rem !important;
}

@media (max-width: 767.98px) {
    /* Frühere experimentelle negative Margins endgültig neutralisieren. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations {
        margin-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #content {
        padding-bottom: .25rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #footer.vt-footer {
        margin-top: .25rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.35 – RELATED PRODUCTS / FOOTER GAP TIGHTER
   - 0.21.34 hat die internen NOVA-Margins am Slider bereits entfernt.
   - Der verbleibende visuelle Restabstand wird nun am gesamten
     Recommendations-Block kontrolliert reduziert.
   - Gilt Desktop + Mobile; Footer-Inhalt bleibt unangetastet.
   ================================================================ */
html[itemtype="https://schema.org/ItemPage"] .recommendations {
    margin-bottom: -1.4rem !important;
    padding-bottom: 0 !important;
}

html[itemtype="https://schema.org/ItemPage"] #content {
    padding-bottom: 0 !important;
}

html[itemtype="https://schema.org/ItemPage"] body #footer.vt-footer {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations {
        margin-bottom: -1.2rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.37 – FOOTER MOBILE ONLY / DESKTOP RESTORED
   - Die Footer-Verdichtung aus 0.21.36 gilt ausschliesslich mobil.
   - Desktop behaelt die vorherige, breitere Footer-Darstellung.
   - Service und Rechtliches mobil als wirklich zentrierte Kopfgruppen:
     Icon oben, Titel/Unterzeile darunter, alles mittig.
   - Direkte Kontaktaktionen mobil 2x2 und ohne redundante Unterzeilen.
   - Reservierungs-/Telegram-Zusatzhinweise nur mobil ausgeblendet.
   ================================================================ */

@media (max-width: 767.98px) {
    /* Besuch bei Vape-Tec, Service und Rechtliches: mobil einheitlich.
       Icon oben, Titel/Unterzeile darunter, alles mittig. */
    body .vt-footer-main > .vt-footer-card:nth-child(2) .vt-footer-card-head,
    body .vt-footer-main > .vt-footer-card:nth-child(3) .vt-footer-card-head,
    body .vt-footer-main > .vt-footer-card:nth-child(4) .vt-footer-card-head {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .28rem !important;
        text-align: center !important;
    }

    body .vt-footer-main > .vt-footer-card:nth-child(2) .vt-footer-card-head > div,
    body .vt-footer-main > .vt-footer-card:nth-child(3) .vt-footer-card-head > div,
    body .vt-footer-main > .vt-footer-card:nth-child(4) .vt-footer-card-head > div {
        width: 100%;
        text-align: center !important;
    }

    /* Die vier Schnellaktionen sind mobil selbsterklaerende Direktlinks. */
    body .vt-footer-actions .vt-footer-action div > span {
        display: none !important;
    }

    /* Redundante Zusatzhinweise nur mobil entfernen. Desktop bleibt wie zuvor. */
    body .vt-footer-reservation-note,
    body .vt-footer-telegram {
        display: none !important;
    }

    /* Vier direkte Aktionen als 2x2-Raster. */
    body .vt-footer-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .35rem !important;
        margin-top: .4rem !important;
    }

    body .vt-footer-action {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .3rem !important;
        min-height: 78px;
        padding: .5rem .35rem !important;
        text-align: center;
    }

    body .vt-footer-action > div {
        width: 100%;
        text-align: center;
    }

    body .vt-footer-action strong {
        margin: 0;
        font-size: .72rem;
        line-height: 1.25;
    }

    body .vt-footer-action-icon {
        margin: 0 auto !important;
    }
}


/* ================================================================
   VapeTec 0.21.38 – MOBILE FOOTER HEADERS UNIFIED
   - Besuch bei Vape-Tec folgt mobil nun derselben Kopfstruktur wie
     Service und Rechtliches: Icon oben, Text darunter, alles zentriert.
   - Inhaltszeilen Adresse / Öffnungszeiten / Morning Pickup bleiben
     linksbuendig, damit sie weiterhin schnell scanbar sind.
   - Desktop unveraendert.
   ================================================================ */
@media (max-width: 767.98px) {
    body .vt-footer-main > .vt-footer-card:nth-child(2) .vt-footer-card-head {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .28rem !important;
        text-align: center !important;
    }

    body .vt-footer-main > .vt-footer-card:nth-child(2) .vt-footer-card-head > div {
        width: 100%;
        text-align: center !important;
    }
}

/* ================================================================
   VapeTec 0.21.39 – MOBILE RELATED PRODUCTS SECTION SEPARATOR
   - "Ähnliche Artikel" wird mobil als nachgelagerter, eigenständiger Bereich
     behandelt: nur die obere Kupferlinie bleibt als Trenner zum Artikel.
   - Die untere Kupferlinie unter der Überschrift entfällt.
   - Desktop bleibt unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations .hr-sect {
        border-bottom: 0 !important;
    }
}

/* ================================================================
   VapeTec 0.21.40 – MOBILE SUBCATEGORY TILE GRID (PROTOTYPE)
   - Mobile Unterkategorien als kompaktes 3er-Kachelraster statt Linkliste.
   - Vorhandene JTL-Kategoriebilder werden wieder eingeblendet.
   - Fehlende Kategorie-Bilder bekommen per JS vorerst das alte Vape-Tec-Logo.
   - Kategorienamen klein, max. 2 Zeilen; nur echte Überlängen laufen einmal.
   - Desktop bleibt unverändert.
   ================================================================ */
@media (max-width: 767.98px) {
    body .content-cats-small {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .42rem !important;
        margin: .45rem 0 .7rem !important;
        align-items: stretch;
    }

    body .content-cats-small::after {
        display: none !important;
    }

    body .content-cats-small > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    body .content-cats-small .sub-categories {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        height: 100%;
        min-width: 0;
        margin: 0 !important;
        padding: .34rem .28rem .3rem !important;
        background: #fff;
        border: 1px solid rgba(165, 104, 35, .20);
        border-radius: 9px;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 2px 5px rgba(0,0,0,.07);
        overflow: hidden;
    }

    /* NOVA blendet Kategoriebilder mobil normalerweise aus. */
    body .content-cats-small .subcategories-image.d-none.d-md-flex,
    body .content-cats-small .subcategories-image {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 78px !important;
        min-height: 78px !important;
        margin: 0 0 .26rem !important;
        padding: 0 !important;
        overflow: hidden;
    }

    body .content-cats-small .subcategories-image picture,
    body .content-cats-small .subcategories-image img {
        display: block;
        max-width: 72px !important;
        max-height: 72px !important;
        width: auto !important;
        height: auto !important;
        margin: auto !important;
        object-fit: contain !important;
    }

    body .content-cats-small .caption {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0;
        height: 2.5em;
        margin: 0 !important;
        padding: 0 .08rem !important;
        overflow: hidden;
        text-align: center !important;
    }

    body .content-cats-small .caption > a {
        display: -webkit-box;
        width: 100%;
        min-width: 0;
        max-height: 2.5em;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #3f3f3f !important;
        font-size: .66rem !important;
        font-weight: 600 !important;
        line-height: 1.18 !important;
        text-align: center !important;
        text-decoration: none !important;
        overflow-wrap: anywhere;
    }

    /* Nur wenn JS eine echte Überlänge feststellt: eine Zeile läuft einmal
       langsam durch. Die Kachel selbst und alle kurzen Namen bleiben ruhig. */
    body .content-cats-small .caption > a.vt-cat-name--marquee {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        max-height: none;
        white-space: nowrap;
        overflow: hidden;
        overflow-wrap: normal;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
    }

    body .content-cats-small .vt-cat-name-track {
        display: inline-block;
        min-width: max-content;
        will-change: transform;
        transform: translateX(0);
    }

    body .content-cats-small .vt-cat-name--marquee.is-vt-running .vt-cat-name-track {
        animation: vt-category-name-once var(--vt-marquee-duration, 5.5s) ease-in-out .45s 1 forwards;
    }

    @keyframes vt-category-name-once {
        0%, 10% { transform: translateX(0); }
        90%, 100% { transform: translateX(calc(-1 * var(--vt-marquee-distance, 0px))); }
    }

    @media (prefers-reduced-motion: reduce) {
        body .content-cats-small .vt-cat-name--marquee.is-vt-running .vt-cat-name-track {
            animation: none !important;
            transform: translateX(0) !important;
        }
    }
}

/* ================================================================
   VapeTec 0.21.43 – UNIVERSAL LIGHT CARD MATERIAL
   ----------------------------------------------------------------
   Verbindlicher Materialstandard für helle Vape-Tec-Kacheln:
   - minimal heller als der Seitenhintergrund
   - sehr feine Kupferkante
   - dezenter 3D-/Materialeffekt, nicht "schwebend"
   - einheitliche Wirkung über Kategorie-, Info-, Guide- und Linkkarten

   Bewusste Ausnahmen:
   - Footer-Karten: eigenes dunkles System
   - Route/Navigationskarten: blaues Aktionssystem
   - Lagerware/Bestellware: semantische Grün-/Gelbflächen bleiben erhalten
   - Warn-/Statuskarten behalten ihre semantische Farbe
   ================================================================ */
:root {
    --vt-card-bg-top: #f2f0ed;
    --vt-card-bg-bottom: #eeece9;
    --vt-card-border-copper: rgba(184, 115, 51, .46);
    --vt-card-border-copper-hover: rgba(184, 115, 51, .64);
    --vt-card-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -1px 0 rgba(70,58,48,.025),
        0 2px 4px rgba(38,34,30,.055),
        0 6px 12px rgba(38,34,30,.075);
    --vt-card-shadow-hover:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -1px 0 rgba(70,58,48,.03),
        0 3px 6px rgba(38,34,30,.065),
        0 8px 16px rgba(38,34,30,.095);
}

/* Gemeinsame helle Content-Kacheln. */
body .vt-data-check-card,
body .vt-mixing-step,
body .vt-mixing-hint:not(.vt-mixing-warning),
body .vt-shop-trust-item,
body .vt-related-card,
body .vt-guide-card,
body .vt-guide-step,
body .vt-guide-faq-item,
body .vt-guide-link-card,
body .vt-home-assortment-card,
body .vt-home-device-card,
body .vt-home-local-card,
body .vt-home-trust-card,
body .vt-home-contact-info-card,
body .vt-home-taste-card,
body .vt-home-contact-more-card,
body .vt-hardware-accessories .vt-accessory-card,
body .vt-analysis-card,
body .vt-local-action-card:not(.vt-local-action-stock):not(.vt-local-action-order):not(.vt-route-action),
body .vt-owl-badge-item {
    background: linear-gradient(
        180deg,
        var(--vt-card-bg-top) 0%,
        var(--vt-card-bg-bottom) 100%
    ) !important;
    border: 1px solid var(--vt-card-border-copper) !important;
    box-shadow: var(--vt-card-shadow) !important;
}

/* Klickbare Karten: dieselbe Materialsprache, beim Hover nur minimal kräftiger. */
@media (hover: hover) {
    body .vt-related-card:hover,
    body .vt-guide-link-card:hover,
    body .vt-home-assortment-card:hover,
    body .vt-home-device-card:hover,
    body .vt-home-contact-more-card:hover,
    body .vt-local-action-link:not(.vt-local-action-stock):not(.vt-local-action-order):not(.vt-route-action):hover {
        border-color: var(--vt-card-border-copper-hover) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
    }
}

/* Mobile Unterkategorie-Kacheln übernehmen ab jetzt exakt denselben Standard. */
@media (max-width: 767.98px) {
    body .content-cats-small .sub-categories {
        background: linear-gradient(
            180deg,
            var(--vt-card-bg-top) 0%,
            var(--vt-card-bg-bottom) 100%
        ) !important;
        border: 1px solid var(--vt-card-border-copper) !important;
        box-shadow: var(--vt-card-shadow) !important;
    }
}

/* ================================================================
   VapeTec 0.21.44 – RESPONSIVE SUBCATEGORY TILE GRID
   ----------------------------------------------------------------
   Ein gemeinsames Kachelsystem fuer Unterkategorien auf allen Viewports:
   - Mobile: 3 Spalten
   - Tablet: 4 Spalten
   - Desktop: 6 Spalten
   - Wide Desktop: 7 Spalten
   - Extra Wide: 8 Spalten
   Material/Farben kommen aus dem zentralen Card-System (0.21.43).
   ================================================================ */
body .content-cats-small.vt-category-tile-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .42rem !important;
    margin: .45rem 0 .8rem !important;
    align-items: stretch;
}

body .content-cats-small.vt-category-tile-grid::after {
    display: none !important;
}

body .content-cats-small.vt-category-tile-grid > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

body .content-cats-small.vt-category-tile-grid .sub-categories.vt-category-tile {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: .34rem .28rem .3rem !important;
    overflow: hidden;
    border-radius: 9px;
    background: linear-gradient(
        180deg,
        var(--vt-card-bg-top) 0%,
        var(--vt-card-bg-bottom) 100%
    ) !important;
    border: 1px solid var(--vt-card-border-copper) !important;
    box-shadow: var(--vt-card-shadow) !important;
}

body .content-cats-small.vt-category-tile-grid .vt-category-tile-image-link {
    display: block;
    width: 100%;
    text-decoration: none !important;
}

body .content-cats-small.vt-category-tile-grid .subcategories-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 0 .26rem !important;
    padding: 0 !important;
    overflow: hidden;
}

body .content-cats-small.vt-category-tile-grid .subcategories-image picture,
body .content-cats-small.vt-category-tile-grid .subcategories-image img {
    display: block;
    max-width: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
    margin: auto !important;
    object-fit: contain !important;
}

body .content-cats-small.vt-category-tile-grid .caption {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 2.5em;
    margin: 0 !important;
    padding: 0 .08rem !important;
    overflow: hidden;
    text-align: center !important;
}

body .content-cats-small.vt-category-tile-grid .caption > a {
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    max-height: 2.5em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #3f3f3f !important;
    font-size: .66rem !important;
    font-weight: 600 !important;
    line-height: 1.18 !important;
    text-align: center !important;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}

@media (hover: hover) {
    body .content-cats-small.vt-category-tile-grid .sub-categories.vt-category-tile:hover {
        border-color: var(--vt-card-border-copper-hover) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
    }
}

/* Tablet */
@media (min-width: 768px) {
    body .content-cats-small.vt-category-tile-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .58rem !important;
        margin: .6rem 0 1rem !important;
    }

    body .content-cats-small.vt-category-tile-grid .sub-categories.vt-category-tile {
        padding: .48rem .4rem .4rem !important;
        border-radius: 10px;
    }

    body .content-cats-small.vt-category-tile-grid .subcategories-image {
        height: 94px !important;
        min-height: 94px !important;
        margin-bottom: .34rem !important;
    }

    body .content-cats-small.vt-category-tile-grid .subcategories-image picture,
    body .content-cats-small.vt-category-tile-grid .subcategories-image img {
        max-width: 88px !important;
        max-height: 88px !important;
    }

    body .content-cats-small.vt-category-tile-grid .caption > a {
        font-size: .72rem !important;
    }
}

/* Desktop */
@media (min-width: 992px) {
    body .content-cats-small.vt-category-tile-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: .68rem !important;
    }

    body .content-cats-small.vt-category-tile-grid .sub-categories.vt-category-tile {
        padding: .58rem .5rem .46rem !important;
    }

    body .content-cats-small.vt-category-tile-grid .subcategories-image {
        height: 112px !important;
        min-height: 112px !important;
        margin-bottom: .38rem !important;
    }

    body .content-cats-small.vt-category-tile-grid .subcategories-image picture,
    body .content-cats-small.vt-category-tile-grid .subcategories-image img {
        max-width: 106px !important;
        max-height: 106px !important;
    }

    body .content-cats-small.vt-category-tile-grid .caption {
        height: 2.55em;
    }

    body .content-cats-small.vt-category-tile-grid .caption > a {
        max-height: 2.55em;
        font-size: .76rem !important;
        line-height: 1.2 !important;
    }
}

/* Breiter Desktop */
@media (min-width: 1400px) {
    body .content-cats-small.vt-category-tile-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: .72rem !important;
    }
}

/* Sehr breite Arbeitsplaetze – nutzt die vorhandene Flaeche konsequent. */
@media (min-width: 1800px) {
    body .content-cats-small.vt-category-tile-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: .75rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.45 – PRODUCT DETAIL CONTENT CARDS
   ----------------------------------------------------------------
   Artikeldetailseiten nutzen jetzt dasselbe helle Kachelmaterial wie
   Kategorie- und Content-Karten:
   - Kurzbeschreibung/Geschmack als prominente Entscheidungskachel
   - Overdosed-/Profilhinweis ohne weiße Fremdbox
   - Geschmacksprofil als vier einzelne kompakte Kacheln
   - Cooling kontrolliert zweizeilig, ohne Nachbarkacheln aufzuziehen
   ================================================================ */

/* Kurzbeschreibung / kaufentscheidender Geschmackstext */
body .vt-product-profile-text,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description {
    position: relative;
    margin: .42rem 0 .62rem !important;
    padding: .72rem .88rem .74rem 1rem !important;
    overflow: hidden;
    background: linear-gradient(180deg, var(--vt-card-bg-top) 0%, var(--vt-card-bg-bottom) 100%) !important;
    border: 1px solid var(--vt-card-border-copper) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;
    color: var(--vt-anthracite) !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
}

body .vt-product-profile-text::before,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc::before,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description::before,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc::before,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--vt-copper) 0%, var(--vt-copper-action) 58%, var(--vt-copper-hover) 100%);
}

body .vt-product-profile-text::after,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc::after,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description::after,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc::after,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 5px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.92), var(--vt-silver), rgba(255,255,255,0));
}

body .vt-product-profile-text p,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc p,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description p,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc p,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description p {
    margin: 0 !important;
}

body .vt-product-profile {
    margin: .15rem 0 .9rem !important;
}

body .vt-product-profile h2 {
    margin: 0 0 .42rem !important;
}

/* Overdosed / Profilhinweis */
body .vt-product-profile-note,
body .vt-flavour-note,
body .vt-overdosed,
body .vt-overdosed-note,
body .vt-overdosed-card,
body .vt-overdose,
body .vt-overdose-note,
body .vt-overdose-card {
    position: relative;
    align-items: flex-start;
    margin-top: .5rem !important;
    padding: .58rem .76rem .6rem .88rem !important;
    overflow: hidden;
    background: linear-gradient(180deg, var(--vt-card-bg-top) 0%, var(--vt-card-bg-bottom) 100%) !important;
    border: 1px solid var(--vt-card-border-copper) !important;
    border-radius: var(--vt-ui-radius-sm, 6px) !important;
    box-shadow: var(--vt-card-shadow) !important;
    color: var(--vt-anthracite) !important;
    font-size: .78rem !important;
    line-height: 1.38 !important;
}

body .vt-product-profile-note::before,
body .vt-flavour-note::before,
body .vt-overdosed::before,
body .vt-overdosed-note::before,
body .vt-overdosed-card::before,
body .vt-overdose::before,
body .vt-overdose-note::before,
body .vt-overdose-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--vt-copper) 0%, var(--vt-copper-action) 100%);
}

body .vt-product-profile-note strong,
body .vt-flavour-note strong,
body .vt-overdosed strong,
body .vt-overdosed-note strong,
body .vt-overdosed-card strong,
body .vt-overdose strong,
body .vt-overdose-note strong,
body .vt-overdose-card strong {
    color: var(--vt-copper-hover) !important;
    font-weight: 700 !important;
}

/* Produktfakten und Geschmacksprofil: einzelne Kacheln statt langer Sammelbox. */
body .vt-product-facts,
body .vt-flavour-facts {
    display: grid !important;
    gap: .52rem !important;
    margin: 0 0 .7rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body .vt-product-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body .vt-product-facts.vt-product-facts-4,
body .vt-flavour-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body .vt-product-fact,
body .vt-flavour-fact {
    min-width: 0;
    min-height: auto !important;
    padding: .62rem .68rem !important;
    background: linear-gradient(180deg, var(--vt-card-bg-top) 0%, var(--vt-card-bg-bottom) 100%) !important;
    border: 1px solid var(--vt-card-border-copper) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;
}

body .vt-flavour-fact + .vt-flavour-fact {
    border-left: 1px solid var(--vt-card-border-copper) !important;
}

body .vt-product-fact strong,
body .vt-flavour-label {
    display: block;
    margin: 0 0 .22rem !important;
    color: #5b5550 !important;
    font-size: .68rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em;
}

body .vt-product-fact > span,
body .vt-flavour-value {
    display: block;
    min-width: 0;
    color: #252525 !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
}

/* Cooling bleibt kompakt und darf bewusst zwei Zeilen nutzen. */
body .vt-cooling-meter,
body .vt-flavour-cooling {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .22rem .26rem !important;
    max-width: 5.35rem;
    margin: .25rem 0 .18rem !important;
}

body .vt-cooling-dot,
body .vt-flavour-cooling span {
    flex: 0 0 .78rem;
    width: .78rem !important;
    height: .78rem !important;
}

body .vt-flavour-cooling-text {
    display: block;
    color: #5b5550 !important;
    font-size: .64rem !important;
    line-height: 1.22 !important;
}

body .vt-flavour-main {
    margin: 0 0 .5rem !important;
}

body .vt-flavour-main h3 {
    color: var(--vt-copper-hover) !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
}

@media (max-width: 991.98px) {
    body .vt-product-facts.vt-product-facts-4,
    body .vt-flavour-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body .vt-product-profile-text,
    html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc,
    html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description {
        margin: .35rem 0 .5rem !important;
        padding: .62rem .7rem .64rem .84rem !important;
        font-size: .86rem !important;
    }

    body .vt-product-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .42rem !important;
    }

    body .vt-product-fact,
    body .vt-flavour-fact {
        padding: .54rem .58rem !important;
    }

    body .vt-flavour-fact:nth-child(even),
    body .vt-flavour-fact:nth-child(n+3) {
        border: 1px solid var(--vt-card-border-copper) !important;
    }
}

@media (max-width: 380px) {
    body .vt-product-facts,
    body .vt-product-facts.vt-product-facts-4,
    body .vt-flavour-facts {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   VapeTec 0.21.46 – ROBUST PRODUCT DETAIL DECISION CARDS
   ----------------------------------------------------------------
   Fallback-sichere Version fuer WaWi-/OPC-Bloecke:
   - funktioniert auch dann, wenn einzelne Card-Variablen im Backend-CSS
     noch nicht im richtigen Ladepfad angekommen sind
   - klare Inhaltsklassen fuer Geschmack und Overdosed
   - keine Inline-Boxen mehr in Artikeltexten noetig
   ================================================================ */

:root {
    --vt-detail-card-bg-top: var(--vt-card-bg-top, #f2f0ed);
    --vt-detail-card-bg-bottom: var(--vt-card-bg-bottom, #eeece9);
    --vt-detail-card-border: var(--vt-card-border-copper, rgba(184,115,51,.46));
    --vt-detail-card-shadow: var(--vt-card-shadow,
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -1px 0 rgba(70,58,48,.025),
        0 2px 4px rgba(38,34,30,.055),
        0 6px 12px rgba(38,34,30,.075));
}

body .vt-taste-note,
body .vt-overdosed-note,
body .vt-overdosed,
body .vt-overdosed-card,
body .vt-overdose-note,
body .vt-overdose,
body .vt-overdose-card,
body .vt-product-profile-text,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description {
    position: relative;
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    margin: .42rem 0 .62rem !important;
    padding: .68rem .82rem .7rem .98rem !important;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            var(--vt-detail-card-bg-top, #f2f0ed) 0%,
            var(--vt-detail-card-bg-bottom, #eeece9) 100%
        ) !important;
    border: 1px solid var(--vt-detail-card-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-detail-card-shadow) !important;
    color: var(--vt-anthracite, #23262b) !important;
    line-height: 1.38 !important;
}

body .vt-taste-note::before,
body .vt-overdosed-note::before,
body .vt-overdosed::before,
body .vt-overdosed-card::before,
body .vt-overdose-note::before,
body .vt-overdose::before,
body .vt-overdose-card::before,
body .vt-product-profile-text::before,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc::before,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description::before,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc::before,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(
        180deg,
        var(--vt-copper, #b87333) 0%,
        var(--vt-copper-action, #a85f2c) 58%,
        var(--vt-copper-hover, #914c22) 100%
    ) !important;
}

body .vt-taste-note::after,
body .vt-overdosed-note::after,
body .vt-overdosed::after,
body .vt-overdosed-card::after,
body .vt-overdose-note::after,
body .vt-overdose::after,
body .vt-overdose-card::after,
body .vt-product-profile-text::after,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc::after,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description::after,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc::after,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 5px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,.92), var(--vt-silver, #e5e7e9), rgba(255,255,255,0)) !important;
}

body .vt-taste-title,
body .vt-overdosed-title,
body .vt-card-title,
body .vt-product-profile-text > div:first-child,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc > div:first-child,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description > div:first-child,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc > div:first-child,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description > div:first-child {
    display: block;
    margin: 0 0 .14rem !important;
    color: #222 !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
}

body .vt-taste-subtitle,
body .vt-overdosed-subtitle,
body .vt-card-subtitle,
body .vt-product-profile-text > div + div,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc > div + div,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description > div + div,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc > div + div,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description > div + div {
    display: block;
    margin: 0 !important;
    color: #666 !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    line-height: 1.32 !important;
}

/* Overdosed darf kleiner wirken als der Geschmack, aber mit gleichem Material. */
body .vt-overdosed-note,
body .vt-overdosed,
body .vt-overdosed-card,
body .vt-overdose-note,
body .vt-overdose,
body .vt-overdose-card {
    margin-top: .38rem !important;
    padding-top: .52rem !important;
    padding-bottom: .54rem !important;
}

body .vt-overdosed-title,
body .vt-overdosed-note .vt-card-title,
body .vt-overdose-note .vt-card-title {
    font-size: .76rem !important;
}

body .vt-overdosed-subtitle,
body .vt-overdosed-note .vt-card-subtitle,
body .vt-overdose-note .vt-card-subtitle {
    font-size: .68rem !important;
}

@media (max-width: 767.98px) {
    body .vt-taste-note,
    body .vt-overdosed-note,
    body .vt-overdosed,
    body .vt-overdosed-card,
    body .vt-overdose-note,
    body .vt-overdose,
    body .vt-overdose-card,
    body .vt-product-profile-text,
    html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc,
    html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description {
        padding: .58rem .66rem .6rem .82rem !important;
    }
}

/* ================================================================
   VapeTec 0.21.47 – OVERDOSED SILVER ACCENT
   ----------------------------------------------------------------
   Overdosed ist kein eigener lila Status mehr:
   - gleiche helle Kachel wie Geschmack
   - kupferner Rahmen
   - silberner Akzentbalken vorne
   ================================================================ */

body .vt-overdosed-note,
body .vt-overdosed,
body .vt-overdosed-card,
body .vt-overdose-note,
body .vt-overdose,
body .vt-overdose-card {
    background:
        linear-gradient(
            180deg,
            var(--vt-detail-card-bg-top, #f2f0ed) 0%,
            var(--vt-detail-card-bg-bottom, #eeece9) 100%
        ) !important;
    border: 1px solid var(--vt-detail-card-border, rgba(184,115,51,.46)) !important;
    box-shadow: var(--vt-detail-card-shadow) !important;
}

body .vt-overdosed-note::before,
body .vt-overdosed::before,
body .vt-overdosed-card::before,
body .vt-overdose-note::before,
body .vt-overdose::before,
body .vt-overdose-card::before {
    width: 5px;
    background:
        linear-gradient(
            180deg,
            #f7f8f9 0%,
            var(--vt-silver, #e5e7e9) 45%,
            #b9bdc1 100%
        ) !important;
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,.82),
        inset -1px 0 0 rgba(60,64,70,.12) !important;
}

body .vt-overdosed-note::after,
body .vt-overdosed::after,
body .vt-overdosed-card::after,
body .vt-overdose-note::after,
body .vt-overdose::after,
body .vt-overdose-card::after {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96),
            var(--vt-silver, #e5e7e9),
            rgba(255,255,255,0)
        ) !important;
}

/* ================================================================
   VapeTec 0.21.49 – DECISION CARD TYPOGRAPHY / DOUBLE-FRAME FIX
   ----------------------------------------------------------------
   Nur zwei gezielte Korrekturen:
   - Geschmack und Overdosed verwenden dieselben Schriftgroessen.
   - JTLs aeusserer shortdesc-Wrapper wird nur dann neutralisiert,
     wenn darin bereits unsere .vt-taste-note-Kachel steckt.
   Alle Material-/Farb-/Rahmenregeln bleiben auf Stand 0.21.47.
   ================================================================ */

/* Kein Kachel-in-Kachel-Effekt bei der WaWi-Kurzbeschreibung. */
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc:has(.vt-taste-note),
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description:has(.vt-taste-note),
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc:has(.vt-taste-note),
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description:has(.vt-taste-note) {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc:has(.vt-taste-note)::before,
html[itemtype="https://schema.org/ItemPage"] body .product-info .shortdesc:has(.vt-taste-note)::after,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description:has(.vt-taste-note)::before,
html[itemtype="https://schema.org/ItemPage"] body .product-info .short-description:has(.vt-taste-note)::after,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc:has(.vt-taste-note)::before,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .shortdesc:has(.vt-taste-note)::after,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description:has(.vt-taste-note)::before,
html[itemtype="https://schema.org/ItemPage"] body #product-offer .short-description:has(.vt-taste-note)::after {
    content: none !important;
    display: none !important;
}

/* Beide Entscheidungskarten typografisch identisch. */
html body .vt-taste-title,
html body .vt-overdosed-title {
    font-size: .76rem !important;
    line-height: 1.25 !important;
}

html body .vt-taste-subtitle,
html body .vt-overdosed-subtitle {
    font-size: .68rem !important;
    line-height: 1.32 !important;
}


/* ================================================================
   VapeTec 0.21.52 – DESKTOP PRODUCT DETAIL COMPACTION
   ----------------------------------------------------------------
   Ziel: rechte Produktspalte auf Desktop dichter und kaufrelevanter.
   - Kategorie + Hersteller aus den Stammdaten entfernt
   - Artikelnummer -> Geschmack deutlich enger
   - Bestands-/Fragebereich mit Kupfertrennern
   - weniger Luft ober-/unterhalb der Trenner
   - Bestandsinfo auf Button-Mitte ausgerichtet
   Mobil bleibt unverändert (eigene Regeln seit 0.21.26).
   ================================================================ */
@media (min-width: 768px) {

    /* Auf der Artikeldetailseite reicht im sichtbaren Kopf die Artikelnummer.
       Kategorie und Hersteller stehen bereits an anderen Shop-Stellen bereit. */
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .info-essential .product-category,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .info-essential .product-manufacturer {
        display: none !important;
    }

    /* Bootstrap/NOVA lässt nach der Stammdatenliste relativ viel Luft.
       Nach dem Entfernen von Kategorie + Hersteller soll die Geschmackskachel
       direkt und bewusst an die Artikelnummer anschließen. */
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .product-info ul.info-essential {
        margin-bottom: .18rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body #product-offer .product-info .vt-taste-note {
        margin-top: .16rem !important;
    }

    /* Bestandsinfo + Frage zum Artikel als kompakte gemeinsame Zeile.
       Die alten grauen NOVA-Linien werden durch Vape-Tec-Kupfer ersetzt. */
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information {
        margin-top: .18rem !important;
        margin-bottom: .28rem !important;
        padding-top: .30rem !important;
        padding-bottom: .30rem !important;
        border-top: 1px solid var(--vt-copper, #b87333) !important;
        border-bottom: 1px solid var(--vt-copper, #b87333) !important;
        align-items: center !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information p,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information .delivery-status,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information .question-on-item,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information .question {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Linke Bestandsmeldung optisch auf die Mitte des 36px-Fragebuttons setzen. */
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information p,
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information .delivery-status {
        min-height: 36px;
        display: flex;
        align-items: center;
    }

    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information .question-on-item {
        align-items: center !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information .btn.question {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}


/* ================================================================
   VapeTec 0.21.53 – SPACING GRID TEST
   ----------------------------------------------------------------
   Erster Test fuer ein messbares Vape-Tec-Abstandssystem.
   Basisraster: 2px-Schritte fuer Feintuning, groessere Abstaende
   folgen 4/8/12/16/24/32px.

   Wichtig:
   - kein globaler Reset von NOVA/JTL
   - zunaechst nur Produktdetail + die direkt darunterliegenden
     Vape-Tec-Produkt-/Geschmacks-Portlets
   - 0.21.52 bleibt optische Ausgangsbasis
   ================================================================ */

:root {
    --vt-space-2: 2px;
    --vt-space-4: 4px;
    --vt-space-6: 6px;
    --vt-space-8: 8px;
    --vt-space-10: 10px;
    --vt-space-12: 12px;
    --vt-space-16: 16px;
    --vt-space-24: 24px;
    --vt-space-32: 32px;

    /* gemeinsames Kartenraster fuer Produktdetail */
    --vt-pdp-card-pad-y: var(--vt-space-10);
    --vt-pdp-card-pad-x: var(--vt-space-12);
    --vt-pdp-card-gap: var(--vt-space-8);
    --vt-pdp-card-inner-gap: var(--vt-space-4);
}

/* ----------------------------------------------------------------
   1. Gemeinsame Innenabstaende fuer die sichtbaren Produkt-Kacheln:
      Geschmack + Overdosed + Portlet-Kacheln unten.
   ---------------------------------------------------------------- */
html body .vt-taste-note,
html body .vt-overdosed-note,
html body .vt-overdosed,
html body .vt-overdosed-card,
html body .vt-overdose-note,
html body .vt-overdose,
html body .vt-overdose-card,
html body .vt-product-fact,
html body .vt-flavour-fact {
    padding-top: var(--vt-pdp-card-pad-y) !important;
    padding-right: var(--vt-pdp-card-pad-x) !important;
    padding-bottom: var(--vt-pdp-card-pad-y) !important;
    padding-left: var(--vt-pdp-card-pad-x) !important;
}

/* Titel -> Unterzeile / Label -> Wert: ein gemeinsamer 4px-Rhythmus. */
html body .vt-taste-title,
html body .vt-overdosed-title,
html body .vt-product-fact strong,
html body .vt-flavour-label {
    margin-bottom: var(--vt-pdp-card-inner-gap) !important;
}

/* Abstand zwischen den Portlet-Kacheln unten: exakt 8px. */
html body .vt-product-facts,
html body .vt-flavour-facts {
    gap: var(--vt-pdp-card-gap) !important;
    margin-bottom: var(--vt-space-12) !important;
}

/* Geschmack und Overdosed bilden oben ebenfalls denselben 8px-Kartenrhythmus. */
html body .vt-taste-note,
html body .vt-overdosed-note {
    margin-bottom: var(--vt-pdp-card-gap) !important;
}

html body .vt-overdosed-note {
    margin-top: 0 !important;
}

/* ----------------------------------------------------------------
   2. Desktop-Produktkopf: krumme rem-Werte aus 0.21.52 auf gerade px.
      Optik soll moeglichst nah am bestaetigten Stand bleiben.
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .product-info ul.info-essential {
        margin-bottom: var(--vt-space-2) !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body #product-offer .product-info .vt-taste-note {
        margin-top: var(--vt-space-4) !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body #product-offer .stock-information {
        margin-top: var(--vt-space-4) !important;
        margin-bottom: var(--vt-space-4) !important;
        padding-top: var(--vt-space-4) !important;
        padding-bottom: var(--vt-space-4) !important;
    }
}


/* ================================================================
   VapeTec 0.21.54 – SPACING SYSTEM PASS 2
   ----------------------------------------------------------------
   Ein gemeinsamer 12px-Rhythmus fuer die grossen Uebergaenge:
   - Header -> Breadcrumb
   - Produktname -> Artikelnummer
   - Produktbild -> Beschreibung/Bewertungen

   Zusaetzlich:
   - Breadcrumb-Trenner in Kupfer
   - Merkmaltabelle in derselben Material-/Kachelsprache
     wie Geschmack / Overdosed / Portlets
   ================================================================ */

@media (min-width: 768px) {

    /* ------------------------------------------------------------
       1. Header -> Breadcrumb: 12px
       NOVA setzt hier auf Desktop standardmaessig 4rem.
       ------------------------------------------------------------ */
    html[itemtype="https://schema.org/ItemPage"] body #content-wrapper:not(.has-fluid) {
        padding-top: var(--vt-space-12) !important;
    }

    /* Die beiden horizontalen Breadcrumb-Linien werden Marken-Kupfer. */
    html[itemtype="https://schema.org/ItemPage"] body .breadcrumb-wrapper {
        border-top-color: var(--vt-copper) !important;
        border-bottom-color: var(--vt-copper) !important;
    }

    /* ------------------------------------------------------------
       2. Produktname -> Artikelnummer: 12px
       Kategorie/Hersteller bleiben wie in 0.21.52 ausgeblendet.
       ------------------------------------------------------------ */
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .product-info ul.info-essential {
        margin-top: var(--vt-space-12) !important;
    }

    /* ------------------------------------------------------------
       3. Produktbild -> Beschreibung/Bewertungen: 12px Gesamtrhythmus.
       NOVA erzeugt hier 3rem am Wrapper plus 2rem am Gallery-Bereich.
       Der Wrapper wird neutralisiert; der sichtbare Abstand kommt
       zentral aus unserem 12px-Token.
       ------------------------------------------------------------ */
    html[itemtype="https://schema.org/ItemPage"] body #product-offer .product-gallery #image_wrapper {
        margin-bottom: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body #product-offer .product-gallery #image_wrapper #gallery {
        margin-bottom: var(--vt-space-12) !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body .tab-navigation {
        margin-top: 0 !important;
    }
}

/* ---------------------------------------------------------------
   4. Merkmale: gleiche Materialfamilie wie die Vape-Tec-Kacheln
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .product-attributes {
    margin-top: var(--vt-space-12) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .product-attributes .table {
    margin-bottom: 0 !important;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            var(--vt-detail-card-bg-top, #f2f0ed) 0%,
            var(--vt-detail-card-bg-bottom, #eeece9) 100%
        ) !important;
    border: 1px solid var(--vt-detail-card-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-detail-card-shadow) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .product-attributes .table td {
    border-color: rgba(184,115,51,.12) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .product-attributes .table-striped tbody tr:nth-of-type(odd),
html[itemtype="https://schema.org/ItemPage"] body .product-attributes .table-striped tbody tr:nth-of-type(even) {
    background: transparent !important;
}

html[itemtype="https://schema.org/ItemPage"] body .product-attributes .table-striped tbody tr:nth-of-type(even) td {
    background: rgba(255,255,255,.24) !important;
}


/* ================================================================
   VapeTec 0.21.55 – MERKMAL-KACHEL: KUPFER-RAHMEN FIX
   ----------------------------------------------------------------
   NOVA rendert die Merkmale als .product-attributes Wrapper mit
   einer table.table-bordered-outline darin. Der sichtbare Aussen-
   rahmen sitzt deshalb ab jetzt robust am Wrapper statt an der
   border-collapsenden Tabelle.
   ================================================================ */

html[itemtype="https://schema.org/ItemPage"] body .product-attributes {
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            var(--vt-detail-card-bg-top, #f2f0ed) 0%,
            var(--vt-detail-card-bg-bottom, #eeece9) 100%
        ) !important;
    border: 1px solid var(--vt-detail-card-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-detail-card-shadow) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .product-attributes .table {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Falls NOVA table-bordered-outline einen eigenen Outline-Effekt erzeugt,
   darf dieser den Vape-Tec-Kupferrahmen nicht überlagern. */
html[itemtype="https://schema.org/ItemPage"] body .product-attributes .table-bordered-outline {
    outline: 0 !important;
}


/* ================================================================
   VapeTec 0.21.56 – SECTION HEADS + STATUS CARD HARMONY
   ----------------------------------------------------------------
   1) Geschmacksprofil-Head als echte Vape-Tec-Kachel
   2) Mastertemplate-H2 (Shop-Trust / Related Links) gleiche Sprache
   3) Kernprogramm-Karte: Kupferrahmen + normale Kartentiefe
   4) Route-Karte: transparenteres Blau, weniger 3D, Kupferrahmen
   ================================================================ */

:root {
    --vt-section-head-pad-y: var(--vt-space-8, 8px);
    --vt-section-head-pad-x: var(--vt-space-10, 10px);
    --vt-section-head-gap: var(--vt-space-6, 6px);
}

/* ---------------------------------------------------------------
   1 + 2 – Einheitliches Überschriften-System
   --------------------------------------------------------------- */

/* WaWi-Geschmacksprofil: h2 + Unterzeile sitzen gemeinsam in einer Kachel. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head > div {
    width: 100%;
    margin: 0 0 var(--vt-space-8, 8px) !important;
    padding:
        var(--vt-section-head-pad-y)
        var(--vt-section-head-pad-x) !important;
    background:
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;
    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;
}

/* Mastertemplate-Überschriften bekommen dieselbe Kachel-/Typografiesprache. */
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 {
    display: flex !important;
    align-items: center !important;
    gap: var(--vt-section-head-gap) !important;
    margin:
        var(--vt-space-12, 12px)
        0
        var(--vt-space-8, 8px) !important;
    padding:
        var(--vt-section-head-pad-y)
        var(--vt-section-head-pad-x) !important;
    background:
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;
    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;
    color: #272725 !important;
    font-size: .90rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: -.008em;
    text-shadow: none !important;
}

/* Der Head im Geschmacksprofil selbst soll NICHT noch einmal eine innere Kachel bauen. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 {
    display: flex !important;
    align-items: center !important;
    gap: var(--vt-section-head-gap) !important;
    margin: 0 0 var(--vt-space-2, 2px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #272725 !important;
    font-size: .90rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: -.008em;
    text-shadow: none !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head span {
    display: block;
    margin: 0 !important;
    color: #666 !important;
    font-size: .68rem !important;
    line-height: 1.3 !important;
}

/* ---------------------------------------------------------------
   3 – Kernprogramm: semantisches Grün behalten, Material vereinheitlichen
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-local-action-card.vt-local-action-stock {
    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;
}

@media (hover: hover) {
    html[itemtype="https://schema.org/ItemPage"] body .vt-local-action-card.vt-local-action-stock:hover {
        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
    }
}

/* ---------------------------------------------------------------
   4 – Route: Blau bleibt semantisch, aber als transparente Kartenfarbe
   statt schwerem 3D-Aktionsbutton.
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-local-action-card.vt-route-action,
html[itemtype="https://schema.org/ItemPage"] body a.vt-local-action-card.vt-route-action {
    background:
        linear-gradient(
            180deg,
            rgba(47,111,223,.20) 0%,
            rgba(29,78,169,.14) 100%
        ),
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;
    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;
    color: #244f86 !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-local-action-card.vt-route-action strong,
html[itemtype="https://schema.org/ItemPage"] body .vt-local-action-card.vt-route-action span {
    color: #244f86 !important;
    text-shadow: none !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-local-action-card.vt-route-action .vt-local-action-icon {
    border-color: var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    html[itemtype="https://schema.org/ItemPage"] body .vt-local-action-card.vt-route-action:hover,
    html[itemtype="https://schema.org/ItemPage"] body a.vt-local-action-card.vt-route-action:hover {
        background:
            linear-gradient(
                180deg,
                rgba(47,111,223,.25) 0%,
                rgba(29,78,169,.18) 100%
            ),
            linear-gradient(
                180deg,
                var(--vt-card-bg-top, #f2f0ed) 0%,
                var(--vt-card-bg-bottom, #eeece9) 100%
            ) !important;
        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ================================================================
   VapeTec 0.21.57 – SECTION HIERARCHY + FLAVOUR HEAD
   ----------------------------------------------------------------
   - Geschmacksprofil-Icon explizit im globalen Kupfer-Iconstil
   - Geschmacksprofil + Master-Portlet-Heads exakt gleiche Typografie
   - Geschmackszeile wird optisch Teil derselben Head-Kachel
   - neue Abschnitte bekommen klarere Trennung durch 16px Vorabstand
     und einen 3px Kupfer-Akzent links
   ================================================================ */

:root {
    --vt-section-head-font-size: .90rem;
    --vt-section-head-font-weight: 700;
    --vt-section-head-line-height: 1.25;
    --vt-section-head-before: 16px;
    --vt-section-head-after: 8px;
    --vt-section-head-accent: 3px;
}

/* ---------------------------------------------------------------
   1. Geschmacksprofil-Icon: exakt das globale Kupfer-Iconmaterial.
   Die zusätzliche Descendant-Regel verhindert Fremdfarben am FA-Icon.
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head .vt-site-icon,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head .vt-site-icon > .fab {
    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head .vt-site-icon {
    border-color: var(--vt-site-icon-border, rgba(184,115,51,.46)) !important;
    background: var(--vt-site-icon-bg, rgba(184,115,51,.055)) !important;
}

/* ---------------------------------------------------------------
   2. Eine Typografie fuer ALLE Abschnitts-Heads.
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 {
    font-family: var(--vt-font-sans) !important;
    font-size: var(--vt-section-head-font-size) !important;
    font-weight: var(--vt-section-head-font-weight) !important;
    line-height: var(--vt-section-head-line-height) !important;
    letter-spacing: -.008em !important;
    color: #272725 !important;
    text-shadow: none !important;
}

/* ---------------------------------------------------------------
   3. Geschmacksprofil + konkrete Geschmaecker = EINE visuelle Kachel.
   HTML bleibt unveraendert; Head und direkt folgende flavour-main
   werden nur optisch zu einem Kartenkoerper verbunden.
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head {
    margin: 0 !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head > div {
    margin: 0 !important;
    padding:
        var(--vt-section-head-pad-y, 8px)
        var(--vt-section-head-pad-x, 10px)
        4px !important;

    border-left: var(--vt-section-head-accent) solid var(--vt-copper, #b87333) !important;
    border-top: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-right: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-bottom: 0 !important;
    border-radius: var(--vt-ui-radius, 8px) var(--vt-ui-radius, 8px) 0 0 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.74) 0%,
            rgba(242,239,236,.96) 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-main {
    margin: 0 0 var(--vt-section-head-after) 0 !important;
    padding:
        4px
        var(--vt-section-head-pad-x, 10px)
        var(--vt-section-head-pad-y, 8px) !important;

    border-left: var(--vt-section-head-accent) solid var(--vt-copper, #b87333) !important;
    border-right: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-bottom: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-top: 1px solid rgba(184,115,51,.12) !important;
    border-radius: 0 0 var(--vt-ui-radius, 8px) var(--vt-ui-radius, 8px) !important;

    background:
        linear-gradient(
            180deg,
            rgba(242,239,236,.96) 0%,
            rgba(238,236,233,.98) 100%
        ) !important;

    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.60),
        0 2px 4px rgba(45,38,33,.055),
        0 4px 8px rgba(45,38,33,.06) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-main h3 {
    margin: 0 !important;
    font-family: var(--vt-font-sans) !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--vt-copper-hover, #914c22) !important;
}

/* ---------------------------------------------------------------
   4. Neue Master-Abschnitte klarer erkennbar:
      16px Luft davor, 8px danach + linker Kupfer-Akzent.
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 {
    margin:
        var(--vt-section-head-before)
        0
        var(--vt-section-head-after) !important;

    padding:
        var(--vt-section-head-pad-y, 8px)
        var(--vt-section-head-pad-x, 10px) !important;

    border-left: var(--vt-section-head-accent) solid var(--vt-copper, #b87333) !important;
    border-top: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-right: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-bottom: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.74) 0%,
            rgba(238,236,233,.98) 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 4px rgba(45,38,33,.05),
        0 4px 8px rgba(45,38,33,.055) !important;
}

/* Die Head-Icons der Master-Portlets und des Geschmacksprofils
   bekommen dieselbe Geometrie und keinen abweichenden Textabstand. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2 .vt-site-icon,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 .vt-site-icon {
    margin-right: 6px !important;
}


/* ================================================================
   VapeTec 0.21.58 – FLAVOUR PROFILE FINE TUNING
   ----------------------------------------------------------------
   1) Geschmacksprofil-Icon sauber mittig zur Titelzeile
   2) Abschnittsüberschriften groesser
   3) Geschmackssache-Hinweis vertikal sauber zum Icon ausrichten
   4) sichtbare Trennlinie zwischen Head und Geschmackszeile entfernen
   ================================================================ */

:root {
    --vt-section-head-font-size: 16px;
}

/* ---------------------------------------------------------------
   1. Head-Icon exakt in der Titelzeile zentrieren
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon {
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;
    vertical-align: middle !important;
    align-self: center !important;
    transform: none !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon > i,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon > .fab {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

/* ---------------------------------------------------------------
   2. Alle Abschnittsüberschriften jetzt klarer/groesser
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 {
    font-size: var(--vt-section-head-font-size) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* ---------------------------------------------------------------
   3. Geschmackssache-Hinweis: Icon + Text auf derselben Mittelachse
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > span:first-child,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > .vt-site-icon {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > div {
    align-self: center !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

/* ---------------------------------------------------------------
   4. Head + konkrete Geschmaecker ohne sichtbare Zwischenlinie.
      Die beiden Teile bleiben technisch getrennt, wirken aber wie
      eine einzige Kachel.
   --------------------------------------------------------------- */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head > div {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.74) 0%,
            rgba(245,243,240,.96) 100%
        ) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-main {
    border-top: 0 !important;
    background:
        linear-gradient(
            180deg,
            rgba(245,243,240,.96) 0%,
            rgba(238,236,233,.98) 100%
        ) !important;
}

/* Sicherheit gegen alte Linien-/Outline-Regeln aus dem WaWi-Profil */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head > div::after,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-main::before {
    content: none !important;
    display: none !important;
}


/* ================================================================
   VapeTec 0.21.59 – INFO NOTE SILVER ACCENT
   ----------------------------------------------------------------
   Geschmackssache ist ein neutraler Info-Hinweis:
   - linker Akzent von Kupfer auf Silber
   - exakt dieselbe Akzentbreite wie die aktuellen Abschnitts-Heads
     (3px über --vt-section-head-accent)
   - kein zusätzlicher schwerer Schatten auf dem Balken
   ================================================================ */

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note::before {
    width: var(--vt-section-head-accent, 3px) !important;
    background:
        linear-gradient(
            180deg,
            var(--vt-silver-hi, #ffffff) 0%,
            var(--vt-silver-mid, #d7d9dc) 50%,
            var(--vt-silver-lo, #aeb2b7) 100%
        ) !important;
    box-shadow: none !important;
}


/* ================================================================
   VapeTec 0.21.62 – NESTED PORTLET HEAD ICONS
   ----------------------------------------------------------------
   Korrektur der Fehlinterpretation aus 0.21.60/0.21.61.

   Das Portlet-Iconsystem hat ZWEI Ebenen:
   1) außen: helle runde 36px-Fassung / "Pill"-Sockel
   2) innen: 24px-Kupfer-Iconbox, quadratisch mit stark gerundeten Ecken

   Genau dieses System wird jetzt für die Abschnittsüberschriften
   Geschmacksprofil / OWL Salt Longfills / Rund um OWL Salt verwendet.
   ================================================================ */

:root {
    --vt-head-icon-outer: 36px;
    --vt-head-icon-inner: 24px;
    --vt-head-icon-radius: 6px;
}

/* Äußerer 36px-Sockel: entspricht der Materialsprache der
   bisherigen Portlet-Iconfassungen (.vt-related-icon / .vt-local-action-icon). */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2 .vt-site-icon,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 .vt-site-icon {
    position: relative !important;

    flex: 0 0 var(--vt-head-icon-outer) !important;
    width: var(--vt-head-icon-outer) !important;
    height: var(--vt-head-icon-outer) !important;
    min-width: var(--vt-head-icon-outer) !important;
    min-height: var(--vt-head-icon-outer) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1) 0%,
            rgba(245,245,245,.95) 100%
        ) !important;

    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 50% !important;

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.95),
        inset 0 -2px 3px rgba(0,0,0,.06),
        0 2px 4px rgba(0,0,0,.07),
        0 5px 9px rgba(0,0,0,.10) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    align-self: center !important;
    transform: none !important;
}

/* Innerer 24px-Kasten: das eigentliche universelle Vape-Tec-Icon.
   Nicht rund, sondern 6px Radius – genau der "quadratische Kasten mit
   stark abgerundeten Ecken". */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2 .vt-site-icon > .fab,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2 .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2 .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2 .vt-site-icon > .fab,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 .vt-site-icon > .fab {
    position: static !important;
    inset: auto !important;

    flex: 0 0 var(--vt-head-icon-inner) !important;
    width: var(--vt-head-icon-inner) !important;
    height: var(--vt-head-icon-inner) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vt-site-icon-bg, rgba(184,115,51,.055)) !important;
    border: 1px solid var(--vt-site-icon-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-head-icon-radius) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.78),
        0 1px 2px rgba(40,35,31,.06) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}

/* Einheitliche Achse und 8px Abstand zum Titel. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Mit 36px Außensockel bleibt die Head-Kachel kompakt. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head > div,
html[itemtype="https://schema.org/ItemPage"] body .vt-shop-trust > h2,
html[itemtype="https://schema.org/ItemPage"] body .vt-related-links > h2 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}


/* ================================================================
   VapeTec 0.21.63 – FLAVOUR FACT NESTED ICONS
   ----------------------------------------------------------------
   Die vier Geschmacksprofil-Fakten Typ / Inhalt / Flasche / Cooling
   bekommen dieselbe zweistufige Iconsprache wie die Section-Heads:

   außen  = helle runde Fassung
   innen  = kupfernes, stark abgerundetes Quadrat mit FA-Symbol

   Bewusst kleiner skaliert als die Abschnittsüberschriften, damit
   die Faktenkarten kompakt bleiben.
   ================================================================ */

:root {
    --vt-fact-icon-outer: 24px;
    --vt-fact-icon-inner: 16px;
    --vt-fact-icon-radius: 5px;
}

/* Labelzeile kompakt auf eine Achse setzen. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact .vt-flavour-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}

/* Äußerer runder Sockel */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact .vt-flavour-label .vt-site-icon {
    position: relative !important;

    flex: 0 0 var(--vt-fact-icon-outer) !important;
    width: var(--vt-fact-icon-outer) !important;
    height: var(--vt-fact-icon-outer) !important;
    min-width: var(--vt-fact-icon-outer) !important;
    min-height: var(--vt-fact-icon-outer) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1) 0%,
            rgba(245,245,245,.95) 100%
        ) !important;

    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 50% !important;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.95),
        inset 0 -1px 2px rgba(0,0,0,.045),
        0 1px 2px rgba(0,0,0,.06),
        0 3px 6px rgba(0,0,0,.075) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    align-self: center !important;
    transform: none !important;
}

/* Inneres kupfernes Quadrat */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact .vt-flavour-label .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact .vt-flavour-label .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact .vt-flavour-label .vt-site-icon > .fab {
    position: static !important;
    inset: auto !important;

    flex: 0 0 var(--vt-fact-icon-inner) !important;
    width: var(--vt-fact-icon-inner) !important;
    height: var(--vt-fact-icon-inner) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vt-site-icon-bg, rgba(184,115,51,.055)) !important;
    border: 1px solid var(--vt-site-icon-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-fact-icon-radius) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 1px 2px rgba(40,35,31,.05) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}


/* ================================================================
   VapeTec 0.21.64 – INFO NOTE NESTED ICON
   ----------------------------------------------------------------
   Letztes Icon im Geschmacksprofil:
   "Geschmack ist Geschmackssache."

   Gleiche zweistufige Iconsprache wie Typ / Inhalt / Flasche / Cooling:
   außen  = 24px helle runde Fassung
   innen  = 16px kupfernes, stark abgerundetes Quadrat
   ================================================================ */

/* Der vorhandene aria-hidden-Wrapper bleibt nur Träger und sitzt
   sauber auf der vertikalen Mittelachse des Hinweistexts. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > span:first-child {
    flex: 0 0 var(--vt-fact-icon-outer, 24px) !important;
    width: var(--vt-fact-icon-outer, 24px) !important;
    height: var(--vt-fact-icon-outer, 24px) !important;
    min-width: var(--vt-fact-icon-outer, 24px) !important;
    min-height: var(--vt-fact-icon-outer, 24px) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 1 !important;
    align-self: center !important;
}

/* Äußerer runder Sockel */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > span:first-child .vt-site-icon {
    position: relative !important;

    flex: 0 0 var(--vt-fact-icon-outer, 24px) !important;
    width: var(--vt-fact-icon-outer, 24px) !important;
    height: var(--vt-fact-icon-outer, 24px) !important;
    min-width: var(--vt-fact-icon-outer, 24px) !important;
    min-height: var(--vt-fact-icon-outer, 24px) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1) 0%,
            rgba(245,245,245,.95) 100%
        ) !important;

    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 50% !important;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.95),
        inset 0 -1px 2px rgba(0,0,0,.045),
        0 1px 2px rgba(0,0,0,.06),
        0 3px 6px rgba(0,0,0,.075) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    line-height: 1 !important;
    transform: none !important;
}

/* Inneres kupfernes Quadrat */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > span:first-child .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > span:first-child .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note > span:first-child .vt-site-icon > .fab {
    position: static !important;
    inset: auto !important;

    flex: 0 0 var(--vt-fact-icon-inner, 16px) !important;
    width: var(--vt-fact-icon-inner, 16px) !important;
    height: var(--vt-fact-icon-inner, 16px) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vt-site-icon-bg, rgba(184,115,51,.055)) !important;
    border: 1px solid var(--vt-site-icon-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-fact-icon-radius, 5px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 1px 2px rgba(40,35,31,.05) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}


/* ================================================================
   VapeTec 0.21.66 – DECISION CARD ICON GUTTER
   ----------------------------------------------------------------
   Korrektur: Gemeint waren die beiden Entscheidungskarten oben:
   - Geschmack/Kurzbeschreibung
   - Overdosed

   Ziel:
   - Titel und Unterzeile beginnen exakt auf derselben linken Textachse
   - Icon + Pill sitzen links davor, vertikal über BEIDE Textzeilen zentriert
   - gleiche kleine zweistufige Iconsprache:
     24px runder Außensockel + 16px kupferne Quadratbox
   ================================================================ */

:root {
    --vt-decision-icon-outer: 24px;
    --vt-decision-icon-inner: 16px;
    --vt-decision-icon-radius: 5px;
    --vt-decision-icon-gutter: 32px;
}

/* Gemeinsamer linker Text-Gutter für beide Karten. */
html body .vt-taste-note,
html body .vt-overdosed-note {
    position: relative !important;
    padding-left: calc(var(--vt-pdp-card-pad-x, 12px) + var(--vt-decision-icon-gutter)) !important;
}

/* Titel und Unterzeile exakt auf dieselbe Textachse setzen. */
html body .vt-taste-title,
html body .vt-overdosed-title,
html body .vt-taste-subtitle,
html body .vt-overdosed-subtitle {
    padding-left: 0 !important;
    text-indent: 0 !important;
}

/* Das vom universellen Icon-System erzeugte äußere Element
   wird aus dem Textfluss genommen und mittig über der gesamten Karte platziert. */
html body .vt-taste-title > .vt-site-icon,
html body .vt-overdosed-title > .vt-site-icon {
    position: absolute !important;
    left: var(--vt-pdp-card-pad-x, 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    flex: 0 0 var(--vt-decision-icon-outer) !important;
    width: var(--vt-decision-icon-outer) !important;
    height: var(--vt-decision-icon-outer) !important;
    min-width: var(--vt-decision-icon-outer) !important;
    min-height: var(--vt-decision-icon-outer) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1) 0%,
            rgba(245,245,245,.95) 100%
        ) !important;

    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 50% !important;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.95),
        inset 0 -1px 2px rgba(0,0,0,.045),
        0 1px 2px rgba(0,0,0,.06),
        0 3px 6px rgba(0,0,0,.075) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    line-height: 1 !important;
}

/* Inneres kupfernes Quadrat. */
html body .vt-taste-title > .vt-site-icon > .fas,
html body .vt-taste-title > .vt-site-icon > .far,
html body .vt-taste-title > .vt-site-icon > .fab,
html body .vt-overdosed-title > .vt-site-icon > .fas,
html body .vt-overdosed-title > .vt-site-icon > .far,
html body .vt-overdosed-title > .vt-site-icon > .fab {
    position: static !important;
    inset: auto !important;

    flex: 0 0 var(--vt-decision-icon-inner) !important;
    width: var(--vt-decision-icon-inner) !important;
    height: var(--vt-decision-icon-inner) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vt-site-icon-bg, rgba(184,115,51,.055)) !important;
    border: 1px solid var(--vt-site-icon-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-decision-icon-radius) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 1px 2px rgba(40,35,31,.05) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    font-size: 8px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}


/* ================================================================
   VapeTec 0.21.67 – DECISION ICONS MATCH HEADS
   ----------------------------------------------------------------
   Geschmack + Overdosed:
   gleiche zweistufige Icon-Geometrie wie die Abschnittsüberschriften.

   36px runder Außensockel
   24px kupferne, stark abgerundete Quadratbox
   8px Abstand zur gemeinsamen Textachse
   ================================================================ */

:root {
    --vt-decision-icon-outer: 36px;
    --vt-decision-icon-inner: 24px;
    --vt-decision-icon-radius: 6px;
    --vt-decision-icon-gutter: 44px;
}

html body .vt-taste-note,
html body .vt-overdosed-note {
    padding-left: calc(var(--vt-pdp-card-pad-x, 12px) + var(--vt-decision-icon-gutter)) !important;
}

html body .vt-taste-title > .vt-site-icon,
html body .vt-overdosed-title > .vt-site-icon {
    flex-basis: var(--vt-decision-icon-outer) !important;
    width: var(--vt-decision-icon-outer) !important;
    height: var(--vt-decision-icon-outer) !important;
    min-width: var(--vt-decision-icon-outer) !important;
    min-height: var(--vt-decision-icon-outer) !important;
}

html body .vt-taste-title > .vt-site-icon > .fas,
html body .vt-taste-title > .vt-site-icon > .far,
html body .vt-taste-title > .vt-site-icon > .fab,
html body .vt-overdosed-title > .vt-site-icon > .fas,
html body .vt-overdosed-title > .vt-site-icon > .far,
html body .vt-overdosed-title > .vt-site-icon > .fab {
    flex-basis: var(--vt-decision-icon-inner) !important;
    width: var(--vt-decision-icon-inner) !important;
    height: var(--vt-decision-icon-inner) !important;
    border-radius: var(--vt-decision-icon-radius) !important;
    font-size: 11px !important;
}


/* ================================================================
   VapeTec 0.21.68 – MOBILE FLAVOUR FACTS 2x2
   ----------------------------------------------------------------
   Mobile Geschmacksprofil:
   Typ / Inhalt
   Flasche / Cooling

   - zwei gleich breite Spalten
   - 8px Rasterabstand
   - gleiche Karten-/Iconsprache bleibt erhalten
   - Hinweis "Geschmack ist Geschmackssache" bleibt volle Breite
   ================================================================ */

@media (max-width: 767px) {

    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-facts {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact {
        min-width: 0 !important;
        padding: 8px 10px !important;
    }

    /* Alte Tabellen-/Block-Trenner aus früheren Mobile-Regeln abschalten:
       jede Faktenkarte ist jetzt wieder eine eigenständige Vape-Tec-Kachel. */
    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact + .vt-flavour-fact,
    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact:nth-child(even),
    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact:nth-child(n+3) {
        border-left: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
        border-top: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    }

    /* Cooling bleibt auch in halber Breite stabil. */
    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-cooling {
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-cooling span {
        width: 13px !important;
        height: 13px !important;
        flex: 0 0 13px !important;
    }

    /* Hinweis darunter bewusst weiterhin über volle Breite. */
    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note {
        width: 100% !important;
    }
}


/* ================================================================
   VapeTec 0.21.69 – MOBILE DESCRIPTION TRANSPARENT
   ----------------------------------------------------------------
   Entfernt mobil den weißen NOVA-Accordion-Hintergrund rund um die
   komplette Produktbeschreibung. Die eigentlichen Vape-Tec-Kacheln
   bleiben unverändert.
   ================================================================ */

@media (max-width: 767.98px) {

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card > .card-header,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card > .collapse,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card > .collapsing,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card .card-body {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card {
        border: 0 !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card > .card-header {
        border-color: transparent !important;
    }
}


/* ================================================================
   VapeTec 0.21.70 – ATTRIBUTES TO CROSSSELL SPACING
   ----------------------------------------------------------------
   Desktop:
   NOVA gibt .tab-content standardmaessig 1.5rem (= ca. 24px)
   Abstand unten. Zwischen Merkmalkasten und dem nachfolgenden
   Cross-Selling ist das fuer unser kompaktes 12px-Raster zu viel.

   Nur der untere Abstand wird auf 12px gesetzt.
   Der obere Abstand innerhalb der Tabs bleibt unveraendert.
   ================================================================ */

@media (min-width: 768px) {
    html[itemtype="https://schema.org/ItemPage"] body .tab-content {
        margin-bottom: var(--vt-space-12, 12px) !important;
    }
}


/* ================================================================
   VapeTec 0.21.71 – MOBILE ATTRIBUTES -> CROSSSELL HALF GAP
   ----------------------------------------------------------------
   Ziel: Abstand vom Ende der Merkmalliste bis
   "Andere Dampfer kauften dazu folgende Artikel" mobil ca. halbieren.

   NOVA-Basis:
   - Accordion-Card:      1rem  -> 8px
   - offene Collapse:     2rem  -> 16px
   - Description-Body unten ca. 20px -> 10px
   - Accordion gesamt:    ~7px  -> 4px

   Bewertungen bleibt natürlich erhalten; nur die vertikale Luft
   innerhalb dieser Strecke wird reduziert.
   ================================================================ */

@media (max-width: 767.98px) {

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion #tab-description .card-body {
        padding-bottom: 10px !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion > .card {
        margin-bottom: 8px !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion > .card > .collapse,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion > .card > .collapsing {
        margin-bottom: 16px !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion {
        margin-bottom: 4px !important;
    }
}


/* ================================================================
   VapeTec 0.21.79 – BESTELLWARE-KARTE: GELB + KUPFERRAHMEN
   ----------------------------------------------------------------
   Die alte .vt-local-action-order-Regel in my-nova.css liefert zwar
   bereits Gelb, wurde im neuen Materialsystem aber nicht – wie die
   Lagerware – mit einer eigenen starken Regel abgesichert.

   Ab jetzt verbindlich:
   - Bestellware = transparenter warmer Gelbton
   - Rahmen = Vape-Tec Kupfer
   - Tiefe = normaler Vape-Tec-Kartenschatten
   ================================================================ */

body .vt-local-action-card.vt-local-action-order {
    background:
        linear-gradient(
            180deg,
            rgba(245,158,11,.14) 0%,
            rgba(245,158,11,.09) 100%
        ),
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;

    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;

    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;
}

@media (hover: hover) {
    body .vt-local-action-card.vt-local-action-order:hover {
        background:
            linear-gradient(
                180deg,
                rgba(245,158,11,.18) 0%,
                rgba(245,158,11,.11) 100%
            ),
            linear-gradient(
                180deg,
                var(--vt-card-bg-top, #f2f0ed) 0%,
                var(--vt-card-bg-bottom, #eeece9) 100%
            ) !important;

        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
    }
}


/* ================================================================
   VapeTec 0.21.80 – BESTELLWARE: SICHTBARER GELB-VERLAUF
   ----------------------------------------------------------------
   Gleiche Verlaufslogik wie bei .vt-local-action-stock:
   - 145deg
   - oben sehr hell
   - unten deutlich farbiger
   - gleicher 3D-Aufbau
   - Kupferrahmen bleibt bestehen
   ================================================================ */

body .vt-local-action-card.vt-local-action-order {
    background: linear-gradient(
        145deg,
        rgba(255,253,242,.98) 0%,
        rgba(254,243,199,.84) 100%
    ) !important;

    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 1px rgba(245,158,11,.07),
        0 2px 4px rgba(0,0,0,.055),
        0 6px 14px rgba(0,0,0,.09) !important;
}

@media (hover: hover) {
    body .vt-local-action-card.vt-local-action-order:hover {
        background: linear-gradient(
            145deg,
            rgba(255,252,235,.99) 0%,
            rgba(253,230,138,.86) 100%
        ) !important;

        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
    }
}


/* ================================================================
   VapeTec 0.21.81 – ROUTE GLOBAL ENTSCHÄRFT
   ----------------------------------------------------------------
   Die ruhige Route-Optik gilt ab jetzt SHOPWEIT und nicht mehr nur
   auf Product/ItemPage.

   Gilt u. a. für:
   - Route-Karten in Master-/OPC-Inhalten
   - Kategorie-/Landingpages
   - Footer-Route
   - sonstige Elemente mit .vt-route-action
   - Route-Aktionen im Reservierungsbereich

   Semantik bleibt:
   BLAU = Route / Navigation
   Material bleibt:
   transparenter Blauton + Kupferrahmen + normale Karten-Tiefe
   ================================================================ */

body .vt-route-action,
body a.vt-route-action,
.vt-reserve-hero__btn--route,
.vt-reserve-box__btn--route {
    background:
        linear-gradient(
            180deg,
            rgba(47,111,223,.20) 0%,
            rgba(29,78,169,.14) 100%
        ),
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;

    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;

    border-color: var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;

    box-shadow: var(
        --vt-card-shadow,
        inset 0 1px 0 rgba(255,255,255,.88),
        0 2px 4px rgba(0,0,0,.05),
        0 6px 14px rgba(0,0,0,.08)
    ) !important;

    color: #244f86 !important;
    text-shadow: none !important;

    transform: none !important;
    filter: none !important;
}

/* Alte globale Weiß-Regeln für Route-Inhalte sicher überschreiben. */
body .vt-route-action strong,
body .vt-route-action span,
body .vt-route-action .vt-local-action-arrow,
body .vt-route-action .vt-footer-action-arrow,
body .vt-route-action .vt-home-device-arrow,
.vt-reserve-hero__btn--route,
.vt-reserve-box__btn--route {
    color: #244f86 !important;
    text-shadow: none !important;
}

/* Die universelle Iconfassung bleibt Teil des Kupfer-Designsystems. */
body .vt-route-action .vt-local-action-icon,
body .vt-route-action .vt-site-icon,
body .vt-route-action .vt-footer-action-icon {
    border-color: var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    body .vt-route-action:hover,
    body .vt-route-action:focus,
    body a.vt-route-action:hover,
    body a.vt-route-action:focus,
    .vt-reserve-hero__btn--route:hover,
    .vt-reserve-hero__btn--route:focus,
    .vt-reserve-box__btn--route:hover,
    .vt-reserve-box__btn--route:focus {
        background:
            linear-gradient(
                180deg,
                rgba(47,111,223,.25) 0%,
                rgba(29,78,169,.18) 100%
            ),
            linear-gradient(
                180deg,
                var(--vt-card-bg-top, #f2f0ed) 0%,
                var(--vt-card-bg-bottom, #eeece9) 100%
            ) !important;

        background-size: 100% 100%, 100% 100% !important;
        background-position: 0 0, 0 0 !important;

        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(
            --vt-card-shadow-hover,
            inset 0 1px 0 rgba(255,255,255,.94),
            0 3px 6px rgba(0,0,0,.06),
            0 8px 16px rgba(0,0,0,.10)
        ) !important;

        color: #244f86 !important;
        text-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Auch beim Klicken kein Rückfall in den alten tiefblauen 3D-Button. */
body .vt-route-action:active,
body a.vt-route-action:active,
.vt-reserve-hero__btn--route:active,
.vt-reserve-box__btn--route:active {
    background:
        linear-gradient(
            180deg,
            rgba(47,111,223,.27) 0%,
            rgba(29,78,169,.20) 100%
        ),
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;

    border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
    box-shadow: var(--vt-card-shadow) !important;
    color: #244f86 !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
}


/* ================================================================
   VapeTec 0.21.82 – ROUTE: SPEZIFITÄT + FOOTER-KONTEXT KORRIGIERT
   ----------------------------------------------------------------
   0.21.81 hatte zwei Probleme:
   1) Kategorie-/Portlet-Karten:
      Alte Regel body .vt-local-action-card.vt-route-action war bei
      !important spezifischer als body .vt-route-action und gewann.
   2) Footer:
      Die helle Kartenbasis der Content-Karten machte die Route auf
      dunklem Footer nahezu weiß.

   Lösung:
   - Content-/Portlet-Route mit mindestens gleicher Spezifität wie
     die alte Tiefblau-Regel.
   - Footer bekommt dieselbe entschärfte blaue Semantik, aber auf der
     dunklen Footer-Materialbasis statt auf heller Content-Kartenbasis.
   ================================================================ */

/* ---------------------------------------------------------------
   A – Helle Shopflächen / Kategorie / OPC / Mastertexte
   --------------------------------------------------------------- */
body .vt-local-action-card.vt-route-action,
body a.vt-local-action-card.vt-route-action,
body .vt-guide-link-card.vt-route-action,
body a.vt-guide-link-card.vt-route-action {
    background:
        linear-gradient(
            180deg,
            rgba(47,111,223,.20) 0%,
            rgba(29,78,169,.14) 100%
        ),
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;

    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;

    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;

    box-shadow: var(--vt-card-shadow) !important;

    color: #244f86 !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

body .vt-local-action-card.vt-route-action strong,
body .vt-local-action-card.vt-route-action span,
body .vt-guide-link-card.vt-route-action strong,
body .vt-guide-link-card.vt-route-action span {
    color: #244f86 !important;
    text-shadow: none !important;
}

body .vt-local-action-card.vt-route-action .vt-local-action-icon,
body .vt-guide-link-card.vt-route-action .vt-local-action-icon,
body .vt-local-action-card.vt-route-action .vt-site-icon,
body .vt-guide-link-card.vt-route-action .vt-site-icon {
    border-color: var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    body .vt-local-action-card.vt-route-action:hover,
    body a.vt-local-action-card.vt-route-action:hover,
    body .vt-guide-link-card.vt-route-action:hover,
    body a.vt-guide-link-card.vt-route-action:hover {
        background:
            linear-gradient(
                180deg,
                rgba(47,111,223,.25) 0%,
                rgba(29,78,169,.18) 100%
            ),
            linear-gradient(
                180deg,
                var(--vt-card-bg-top, #f2f0ed) 0%,
                var(--vt-card-bg-bottom, #eeece9) 100%
            ) !important;

        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;

        color: #244f86 !important;
        text-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ---------------------------------------------------------------
   B – Dunkler Footer
   Gleiche ruhige Route-Semantik, aber ohne helle Content-Kartenbasis.
   --------------------------------------------------------------- */
body #footer.vt-footer .vt-footer-action.vt-route-action,
body #footer.vt-footer a.vt-footer-action.vt-route-action {
    background:
        linear-gradient(
            180deg,
            rgba(63,125,226,.34) 0%,
            rgba(37,86,173,.26) 100%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.055) 0%,
            rgba(255,255,255,.025) 100%
        ) !important;

    background-size: 100% 100%, 100% 100% !important;
    background-position: 0 0, 0 0 !important;

    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 2px 5px rgba(0,0,0,.14) !important;

    color: #f3f7ff !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

body #footer.vt-footer .vt-footer-action.vt-route-action strong,
body #footer.vt-footer .vt-footer-action.vt-route-action div > span,
body #footer.vt-footer .vt-footer-action.vt-route-action .vt-footer-action-arrow {
    color: #f3f7ff !important;
    text-shadow: none !important;
}

body #footer.vt-footer .vt-footer-action.vt-route-action div > span {
    opacity: .82 !important;
}

@media (hover: hover) {
    body #footer.vt-footer .vt-footer-action.vt-route-action:hover,
    body #footer.vt-footer a.vt-footer-action.vt-route-action:hover {
        background:
            linear-gradient(
                180deg,
                rgba(71,135,238,.40) 0%,
                rgba(40,93,188,.31) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255,255,255,.065) 0%,
                rgba(255,255,255,.03) 100%
            ) !important;

        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 3px 7px rgba(0,0,0,.17) !important;

        color: #fff !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ================================================================
   VapeTec 0.21.83 – CATEGORY INTRO CARD
   ----------------------------------------------------------------
   Neue Inhaltskarte für Kategorie-/Serien-Intros.
   Anbindung an das globale Vape-Tec-Kartensystem:
   - anthrazit/dunkel
   - feine Kupferkante
   - dezente Tiefe
   - Überschrift und Text kompakt
   - auf Mobile ebenfalls ruhig und kompakt
   ================================================================ */

body .vt-category-intro {
    margin: 0 0 var(--vt-space-12, 12px) 0;
    padding: 14px 16px;

    background:
        linear-gradient(
            145deg,
            rgba(46,46,46,.985) 0%,
            rgba(34,34,34,.985) 100%
        ) !important;

    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 1px rgba(0,0,0,.18),
        0 2px 5px rgba(0,0,0,.10),
        0 6px 14px rgba(0,0,0,.12) !important;

    color: #f4f4f4;
}

body .vt-category-intro-head {
    margin: 0 0 6px 0;
    padding: 0;
}

body .vt-category-intro-head > div {
    min-width: 0;
}

body .vt-category-intro-head h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #f7f7f7 !important;
    font-size: 1.02rem;
    font-weight: 650;
    line-height: 1.28;
}

body .vt-category-intro-text {
    margin: 0;
    padding: 0;
}

body .vt-category-intro-text p {
    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,.78) !important;
    font-size: .80rem;
    line-height: 1.48;
}

/* Verlinkte Aktionskarten darunter enger an die Intro-Karte anbinden. */
body .vt-category-intro + .vt-related-links {
    margin-top: 0 !important;
}

body .vt-category-intro + .vt-related-links .vt-related-grid {
    margin-top: 0 !important;
}

/* Kleine Mobile-Kompaktierung. */
@media (max-width: 767.98px) {
    body .vt-category-intro {
        margin-bottom: 8px;
        padding: 11px 12px;
    }

    body .vt-category-intro-head {
        margin-bottom: 5px;
    }

    body .vt-category-intro-head h2 {
        font-size: .92rem;
        line-height: 1.28;
    }

    body .vt-category-intro-text p {
        font-size: .74rem;
        line-height: 1.45;
    }
}


/* ================================================================
   VapeTec 0.21.84 – CATEGORY INTRO = NORMALE ÜBERSCHRIFTEN-KACHEL
   ----------------------------------------------------------------
   Korrektur zu 0.21.83:
   - KEIN Anthrazit
   - normale helle Vape-Tec-Karte
   - feine Kupferumrandung
   - links 3px Kupfer-Akzent wie bei den Überschriften-Kacheln
   - normale dunkle Schrift
   ================================================================ */

body .vt-category-intro {
    margin: 0 0 var(--vt-section-head-after, 8px) 0 !important;
    padding:
        var(--vt-section-head-pad-y, 8px)
        var(--vt-section-head-pad-x, 10px) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.74) 0%,
            rgba(238,236,233,.98) 100%
        ) !important;

    border-top: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-right: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-bottom: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-left: var(--vt-section-head-accent, 3px) solid var(--vt-copper, #b87333) !important;

    border-radius: var(--vt-ui-radius, 8px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 4px rgba(45,38,33,.05),
        0 4px 8px rgba(45,38,33,.055) !important;

    color: #252525 !important;
}

body .vt-category-intro-head {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

body .vt-category-intro-head > div {
    min-width: 0;
}

body .vt-category-intro-head h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #252525 !important;
    font-size: var(--vt-section-head-font-size, .90rem) !important;
    font-weight: var(--vt-section-head-font-weight, 700) !important;
    line-height: var(--vt-section-head-line-height, 1.25) !important;
}

body .vt-category-intro-text {
    margin: 0 !important;
    padding: 0 !important;
}

body .vt-category-intro-text p {
    margin: 0 !important;
    padding: 0 !important;

    color: #555 !important;
    font-size: .78rem !important;
    line-height: 1.46 !important;
}

/* Related Links direkt und mit unserem normalen 8px-Raster darunter. */
body .vt-category-intro + .vt-related-links {
    margin-top: 0 !important;
}

body .vt-category-intro + .vt-related-links .vt-related-grid {
    margin-top: 0 !important;
}

/* Mobile behält dieselbe Designsprache – nur kompakter. */
@media (max-width: 767.98px) {
    body .vt-category-intro {
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
    }

    body .vt-category-intro-head {
        margin-bottom: 4px !important;
    }

    body .vt-category-intro-head h2 {
        font-size: .88rem !important;
    }

    body .vt-category-intro-text p {
        font-size: .74rem !important;
        line-height: 1.44 !important;
    }
}


/* ================================================================
   VapeTec 0.21.85 – GLOBALER CONTENT-FLIESSTEXT
   ----------------------------------------------------------------
   Referenz:
   normaler Erklärungstext in einer .vt-local-action-card
   ("Wie wir 5 EL einordnen").

   Verbindlich für echten erklärenden Fließtext:
   - Desktop: .72rem
   - Mobile:  .66rem
   - Zeilenhöhe: 1.30
   - Gewicht: 400
   - Farbe: #555

   Kleine Sekundärtexte in verlinkten Aktionskarten bleiben bewusst
   separat und kompakter/anders steuerbar.
   ================================================================ */

:root {
    --vt-content-body-size: .72rem;
    --vt-content-body-line-height: 1.30;
    --vt-content-body-color: #555;
    --vt-content-body-weight: 400;
}

/* Intro-/Einordnungstexte nutzen denselben globalen Fließtext. */
body .vt-category-intro-text p,
body .vt-local-action-card:not(.vt-local-action-link) div > span {
    font-size: var(--vt-content-body-size) !important;
    line-height: var(--vt-content-body-line-height) !important;
    color: var(--vt-content-body-color) !important;
    font-weight: var(--vt-content-body-weight) !important;
}

/* Mobile übernimmt exakt die bisher bewährte Größe der Einordnungskarte. */
@media (max-width: 767.98px) {
    :root {
        --vt-content-body-size: .66rem;
    }
}


/* ================================================================
   VapeTec 0.21.87 – GLOBALER CONTENT-FLIESSTEXT: FARBE FINAL
   ----------------------------------------------------------------
   Referenz bleibt die Einordnungskarte ("Wie wir 5 EL einordnen").
   0.21.86 enthielt zusätzlich einen unnötigen Mobile-Fix für ältere
   Related-Karten; dieser wurde wieder entfernt.

   Verbindliche Farbe:
   Vape-Tec Anthrazit statt #555.
   ================================================================ */

:root {
    --vt-content-body-color: var(--vt-anthracite, #23262b);
}

/* Intro + Einordnung verwenden exakt dieselbe Textfarbe. */
body .vt-category-intro-text p,
body .vt-local-action-card:not(.vt-local-action-link) div > span {
    color: var(--vt-content-body-color) !important;
}


/* ================================================================
   VapeTec 0.21.88 – SERIEN-ICON + MOBILE RELATED-LINK-LAYOUT
   ----------------------------------------------------------------
   📂 kennzeichnet ab jetzt Links zu anderen Produktserien und wird
   vom universellen Icon-System als ICONS.series (layer-group)
   gerendert.

   Mobile:
   Die neuen .vt-local-action-link-Karten in .vt-related-grid werden
   wie die bereits bewährten Related-Karten aufgebaut:
   - Icon oben
   - Text darunter
   - Pfeil rechts
   Dadurch verliert der Text nicht mehr gleichzeitig Breite an Icon
   UND Pfeil.
   ================================================================ */

@media (max-width: 767.98px) {

    body .vt-related-grid > .vt-local-action-card.vt-local-action-link {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto 1fr !important;
        grid-template-areas:
            "vt-related-icon vt-related-arrow"
            "vt-related-text vt-related-arrow" !important;

        column-gap: 6px !important;
        row-gap: 5px !important;

        align-items: start !important;
        padding: 9px 8px !important;
        text-align: center !important;
    }

    body .vt-related-grid > .vt-local-action-card.vt-local-action-link > .vt-local-action-icon {
        grid-area: vt-related-icon !important;
        justify-self: center !important;
        align-self: center !important;

        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }

    body .vt-related-grid > .vt-local-action-card.vt-local-action-link > div {
        grid-area: vt-related-text !important;
        min-width: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    body .vt-related-grid > .vt-local-action-card.vt-local-action-link > .vt-local-action-arrow {
        grid-area: vt-related-arrow !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
    }
}


/* ================================================================
   VapeTec 0.21.89 – ABSTAND ZWISCHEN INHALTS-PORTLETS
   ----------------------------------------------------------------
   Zwei direkt aufeinanderfolgende, nicht verlinkte
   .vt-local-action-card-Inhaltskarten bekommen verbindlich 8px
   Abstand. Linkkarten im .vt-related-grid bleiben unberührt.
   ================================================================ */

body .vt-local-action-card:not(.vt-local-action-link)
    + .vt-local-action-card:not(.vt-local-action-link) {
    margin-top: 8px !important;
}


/* ================================================================
   VapeTec 0.21.90 – STATUSKARTEN GLEICH HOCH
   ----------------------------------------------------------------
   Für nebeneinander stehende Lager-/Bestellstatuskarten verwenden
   wir das bereits vorhandene .vt-local-action-grid.

   Desktop:
   - Grid-Items strecken sich auf dieselbe Zeilenhöhe
   - beide Karten füllen ihre Grid-Zelle vollständig

   Mobile:
   - bestehende 1-Spalten-Logik bleibt erhalten
   - Karten wieder natürliche Höhe
   ================================================================ */

body .vt-local-action-grid {
    align-items: stretch !important;
}

body .vt-local-action-grid > .vt-local-action-card {
    height: 100% !important;
    align-self: stretch !important;
}

@media (max-width: 767px) {
    body .vt-local-action-grid > .vt-local-action-card {
        height: auto !important;
    }
}


/* ================================================================
   VapeTec 0.21.91 – STATUS-GRID RESPONSIVE FIX
   ----------------------------------------------------------------
   Korrektur zu 0.21.90:
   Die Kartenhöhe war korrekt, aber die Spaltenzahl wurde auf Mobile
   nicht explizit zurückgesetzt.

   Verbindlich:
   - Desktop/Tablet ab 768px: 2 Spalten, gleiche Höhe
   - Mobile unter 768px:      1 Spalte, natürliche Höhe
   ================================================================ */

body .vt-local-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .65rem !important;
    align-items: stretch !important;
}

body .vt-local-action-grid > .vt-local-action-card {
    height: 100% !important;
    align-self: stretch !important;
}

@media (max-width: 767.98px) {
    body .vt-local-action-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body .vt-local-action-grid > .vt-local-action-card {
        height: auto !important;
    }
}


/* ================================================================
   VapeTec 0.21.92 – STATUS-GRID AUSRICHTUNG KORRIGIERT
   ----------------------------------------------------------------
   Ursache:
   Die globale 8px-Regel aus 0.21.89 für direkt aufeinanderfolgende
   nicht verlinkte Inhaltskarten griff auch innerhalb des
   .vt-local-action-grid.

   Dadurch bekam die zweite Statuskarte margin-top: 8px und saß
   sichtbar tiefer, obwohl beide Karten im selben Grid standen.

   Fix:
   Innerhalb des Status-Grids übernimmt ausschließlich 'gap' den
   Kartenabstand. Zusätzlicher margin-top wird dort neutralisiert.
   ================================================================ */

body .vt-local-action-grid > .vt-local-action-card:not(.vt-local-action-link)
    + .vt-local-action-card:not(.vt-local-action-link) {
    margin-top: 0 !important;
}


/* ================================================================
   VapeTec 0.21.93 – GLOBALES CONTENT-SECTION-SPACING
   ----------------------------------------------------------------
   Keine Abstandshalter-Portlets mehr.

   Nutzung:
   Die OPC-/Content-Blöcke, zwischen denen ein definierter Abstand
   entstehen soll, erhalten zusätzlich die Klasse:
       vt-content-section

   Normaler Abstand:
       8px

   Neuer Hauptabschnitt:
       vt-content-section vt-content-section--major
       -> 16px zum vorherigen Content-Abschnitt

   Interne Grid-/Karten-Abstände bleiben weiterhin Aufgabe von gap.
   ================================================================ */

:root {
    --vt-content-section-gap: 8px;
    --vt-content-section-gap-major: 16px;
}

/* Nur direkt aufeinanderfolgende, ausdrücklich markierte Sections. */
body .vt-content-section + .vt-content-section {
    margin-top: var(--vt-content-section-gap) !important;
}

/* Bewusster größerer Abschnittswechsel. */
body .vt-content-section + .vt-content-section.vt-content-section--major {
    margin-top: var(--vt-content-section-gap-major) !important;
}

/* Wenn eine Section gleichzeitig ein internes Grid ist,
   beeinflusst die Section-Regel nur den Außenabstand – niemals
   die Abstände zwischen den enthaltenen Karten. */
body .vt-content-section.vt-local-action-grid {
    row-gap: .65rem;
    column-gap: .65rem;
}


/* ================================================================
   VapeTec 0.21.95 – GEMISCHTES SORTIMENT / MIXED AVAILABILITY
   ----------------------------------------------------------------
   Dritter universeller Sortimentsstatus:

   vt-local-action-stock  = vollständig regulär vor Ort
   vt-local-action-order  = vollständig erweitertes Sortiment
   vt-local-action-mixed  = teilweise regulär, teilweise erweitert

   Wichtig:
   Keine neue Statusfarbe. Die Mixed-Karte bleibt neutral im
   normalen Vape-Tec-Materialsystem. Die konkrete Aufteilung nach
   Stärke, Farbe, Widerstand, Variante, Zubehör usw. gehört in den
   Kategorieinhalt – nicht in die universelle Statuskarte.
   ================================================================ */

body .vt-local-action-card.vt-local-action-mixed {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96) 0%,
            rgba(239,237,234,.95) 100%
        ) !important;

    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.94),
        inset 0 -1px 1px rgba(0,0,0,.04),
        0 2px 4px rgba(0,0,0,.05),
        0 6px 14px rgba(0,0,0,.08) !important;

    color: var(--vt-anthracite, #23262b) !important;
}

body .vt-local-action-card.vt-local-action-mixed strong,
body .vt-local-action-card.vt-local-action-mixed div > span {
    color: var(--vt-anthracite, #23262b) !important;
}

@media (hover: hover) {
    body .vt-local-action-card.vt-local-action-mixed:hover {
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.99) 0%,
                rgba(235,232,228,.98) 100%
            ) !important;

        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
    }
}


/* ================================================================
   VapeTec 0.21.98 – FEATURE NOTE LAYOUT FINAL
   ----------------------------------------------------------------
   Die Feature-Note benutzt ab jetzt bewusst dieselbe Grundstruktur
   wie eine normale .vt-local-action-card:

   <div class="vt-local-action-card vt-feature-note ...">
       <span class="vt-local-action-icon">...</span>
       <div>
           <strong>Titel</strong>
           <span>Untertext</span>
       </div>
   </div>

   Damit bleiben Icon, Titel-/Untertext-Hierarchie, Typografie und
   3D-Material exakt im bestehenden Vape-Tec-Kartensystem.

   Der Feature-spezifische Farbakzent sitzt nur als innerer Balken.
   ================================================================ */

body .vt-local-action-card.vt-feature-note {
    position: relative !important;
    overflow: hidden !important;

    /* Abstand zum vorherigen Block – kein Abstandshalter nötig. */
    margin-top: 8px !important;

    /* Etwas mehr Platz links für den inneren Akzentbalken. */
    padding-left: 15px !important;

    background:
        linear-gradient(
            180deg,
            var(--vt-card-bg-top, #f2f0ed) 0%,
            var(--vt-card-bg-bottom, #eeece9) 100%
        ) !important;

    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow: var(--vt-card-shadow) !important;

    color: var(--vt-anthracite, #23262b) !important;
}

/* Innerer semantischer Akzent – Außenrahmen bleibt Kupfer. */
body .vt-local-action-card.vt-feature-note::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 5px;
    width: 3px;
    border-radius: 3px;
}

body .vt-local-action-card.vt-feature-note.vt-feature-note--gentle::before {
    background: linear-gradient(
        180deg,
        rgba(58,170,53,.96) 0%,
        rgba(42,139,39,.96) 100%
    );
}

/* Normale Kartenhierarchie bewusst sichern:
   Überschrift deutlich, Untertext kleiner und ruhiger. */
body .vt-local-action-card.vt-feature-note > div > strong {
    display: block !important;
    margin: 0 0 var(--vt-pdp-card-inner-gap, .14rem) 0 !important;
    font-family: var(--vt-font-sans) !important;
    font-size: .76rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #222 !important;
}

body .vt-local-action-card.vt-feature-note > div > span {
    display: block !important;
    margin: 0 !important;
    font-family: var(--vt-font-sans) !important;
    font-size: .68rem !important;
    line-height: 1.32 !important;
    font-weight: 500 !important;
    color: #666 !important;
}

/* Icon bleibt exakt in der universellen kupfernen Fassung. */
body .vt-local-action-card.vt-feature-note > .vt-local-action-icon {
    align-self: center !important;
}

@media (hover: hover) {
    body .vt-local-action-card.vt-feature-note:hover {
        border-color: var(--vt-card-border-copper-hover, rgba(184,115,51,.64)) !important;
        box-shadow: var(--vt-card-shadow-hover) !important;
    }
}

@media (max-width: 767.98px) {
    body .vt-local-action-card.vt-feature-note {
        margin-top: 8px !important;
        padding-left: 13px !important;
    }

}


/* ================================================================
   VapeTec 0.21.99 – FEATURE NOTE AKZENT IM VAPE-TEC-SYSTEM
   ----------------------------------------------------------------
   Korrektur des grünen Balkens aus 0.21.98:
   - exakt dieselbe Geometrie wie Kupfer-/Silber-Akzente
   - volle Kartenhöhe
   - bündig an der linken Kante
   - 3px über --vt-section-head-accent
   - keine Pill-/Kapselrundung
   - kein eigener Schatten
   ================================================================ */

body .vt-local-action-card.vt-feature-note::before {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--vt-section-head-accent, 3px) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .vt-local-action-card.vt-feature-note.vt-feature-note--gentle::before {
    background:
        linear-gradient(
            180deg,
            rgba(72,156,72,.94) 0%,
            rgba(50,126,54,.94) 100%
        ) !important;
}


/* ================================================================
   VapeTec 0.21.100 – KURZBESCHREIBUNG: TITEL + META
   ----------------------------------------------------------------
   Die WaWi-Kurzbeschreibung liefert nur noch semantischen Inhalt:

   <strong class="vt-shortdesc-title">⭐ Geschmack</strong>
   <span class="vt-shortdesc-meta">Typ · Inhalt · Stärke</span>

   Die vorhandene Kurzbeschreibungs-Karte bleibt vollständig Aufgabe
   des Templates. Dadurch entstehen keine doppelten Karten mehr.

   Typografie:
   - Titel: prominente Hauptinformation
   - Meta: deutlich kleinerer, ruhiger Untertext
   ================================================================ */

body .vt-shortdesc-title {
    display: block !important;
    margin: 0 !important;

    font-size: .92rem !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;

    color: var(--vt-anthracite, #23262b) !important;
}

body .vt-shortdesc-meta {
    display: block !important;
    margin: 2px 0 0 0 !important;

    font-size: var(--vt-content-body-size, .72rem) !important;
    line-height: var(--vt-content-body-line-height, 1.30) !important;
    font-weight: var(--vt-content-body-weight, 400) !important;

    color: var(--vt-content-body-color, var(--vt-anthracite, #23262b)) !important;
}

@media (max-width: 767.98px) {
    body .vt-shortdesc-title {
        font-size: .86rem !important;
        line-height: 1.26 !important;
    }

    body .vt-shortdesc-meta {
        font-size: var(--vt-content-body-size, .66rem) !important;
        margin-top: 2px !important;
    }
}


/* ================================================================
   VapeTec 0.21.101 – KURZBESCHREIBUNG ICON-GUTTER WIEDERHERGESTELLT
   ----------------------------------------------------------------
   Die Kurzbeschreibung ist keine neue Komponente.
   Sie wird wieder an die bereits seit 0.21.66/0.21.67 verwendete
   Decision-Card-Iconsprache angeschlossen:

   - 36px heller runder Außensockel
   - 24px kupferne Iconbox
   - Icon vertikal über Titel + Meta zentriert
   - Titel und Meta auf exakt derselben linken Textachse
   ================================================================ */

/* Gemeinsame Textachse rechts neben dem vorhandenen Decision-Icon. */
html[itemtype="https://schema.org/ItemPage"] body .vt-shortdesc-title {
    margin: 0 0 0 var(--vt-decision-icon-gutter, 44px) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-shortdesc-meta {
    margin: 2px 0 0 var(--vt-decision-icon-gutter, 44px) !important;
}

/* Das vom universellen Emoji-System erzeugte Icon wird aus dem
   Titeltextfluss genommen und über beide Textzeilen zentriert. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-shortdesc-title > .vt-site-icon {
    position: absolute !important;
    left: var(--vt-pdp-card-pad-x, 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    flex: 0 0 var(--vt-decision-icon-outer, 36px) !important;
    width: var(--vt-decision-icon-outer, 36px) !important;
    height: var(--vt-decision-icon-outer, 36px) !important;
    min-width: var(--vt-decision-icon-outer, 36px) !important;
    min-height: var(--vt-decision-icon-outer, 36px) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1) 0%,
            rgba(245,245,245,.95) 100%
        ) !important;

    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 50% !important;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.95),
        inset 0 -1px 2px rgba(0,0,0,.045),
        0 1px 2px rgba(0,0,0,.06),
        0 3px 6px rgba(0,0,0,.075) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    line-height: 1 !important;
}

/* Inneres 24px-Kupferkästchen – identisch mit den Decision-Cards. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-shortdesc-title > .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body
.vt-shortdesc-title > .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body
.vt-shortdesc-title > .vt-site-icon > .fab {
    position: static !important;
    inset: auto !important;

    flex: 0 0 var(--vt-decision-icon-inner, 24px) !important;
    width: var(--vt-decision-icon-inner, 24px) !important;
    height: var(--vt-decision-icon-inner, 24px) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vt-site-icon-bg, rgba(184,115,51,.055)) !important;
    border: 1px solid var(--vt-site-icon-border, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-decision-icon-radius, 6px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 1px 2px rgba(40,35,31,.05) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
}


/* ================================================================
   VapeTec 0.21.102 – FEATURE NOTE TYPO = VT-TASTE-NOTE
   ----------------------------------------------------------------
   vt-taste-note ist die verbindliche typografische Blaupause.

   Titel:
   Hanken Grotesk · .76rem · 700 · #222 · 1.25

   Untertext:
   Hanken Grotesk · .68rem · 500 · #666 · 1.32

   Feature-Notes haben keine abweichende Mobile-Typografie.
   ================================================================ */


/* ================================================================
   VapeTec 0.21.103 – FEATURE NOTE GEOMETRIE = VT-TASTE-NOTE
   ----------------------------------------------------------------
   vt-taste-note bleibt die verbindliche Blaupause.

   Korrekturen:
   - grüner Akzent exakt 5px wie der Kupfer-Akzent der Taste-Note
   - Icon-Außensockel exakt auf derselben X-Achse
   - Text startet exakt auf derselben linken Textachse
   - Desktop und Mobile identisch
   ================================================================ */

/* Akzentbreite exakt wie .vt-taste-note::before. */
body .vt-local-action-card.vt-feature-note::before {
    width: 5px !important;
}

/* Derselbe linke Text-Gutter wie bei .vt-taste-note. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-local-action-card.vt-feature-note {
    padding-left:
        calc(var(--vt-pdp-card-pad-x, 12px) + var(--vt-decision-icon-gutter, 44px))
        !important;
}

/* Icon exakt auf dieselbe X-Achse wie das Taste-Note-Icon setzen. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-local-action-card.vt-feature-note > .vt-local-action-icon {
    position: absolute !important;
    left: var(--vt-pdp-card-pad-x, 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: var(--vt-decision-icon-outer, 36px) !important;
    height: var(--vt-decision-icon-outer, 36px) !important;
    min-width: var(--vt-decision-icon-outer, 36px) !important;
    min-height: var(--vt-decision-icon-outer, 36px) !important;

    margin: 0 !important;
    align-self: auto !important;
}

/* 0.21.98 hatte mobil 13px Padding gesetzt; bewusst wieder auf
   dieselbe Taste-Note-Geometrie zurückführen. */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body
    .vt-local-action-card.vt-feature-note {
        padding-left:
            calc(var(--vt-pdp-card-pad-x, 12px) + var(--vt-decision-icon-gutter, 44px))
            !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body
    .vt-local-action-card.vt-feature-note > .vt-local-action-icon {
        left: var(--vt-pdp-card-pad-x, 12px) !important;
    }
}


/* ================================================================
   VapeTec 0.21.104 – PDP PRICE / META CLEANUP
   ----------------------------------------------------------------
   1) Feature-Note -> Preis: gleicher 8px-Rhythmus wie zwischen Karten
   2) GTIN auf Artikeldetailseiten ausblenden
   3) Hauptpreis -> Grundpreis: normaler 8px-Rhythmus
   4) Grundpreis -> USt.-Hinweis kompakt (4px)
   ================================================================ */

/* 1) Zweite Entscheidungskarte bekommt denselben Außenabstand nach
   unten wie unser Kartenraster. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-local-action-card.vt-feature-note {
    margin-bottom: var(--vt-pdp-card-gap, 8px) !important;
}

/* 2) GTIN ist intern weiterhin vorhanden, wird kunden-/UI-seitig aber
   weder auf Desktop noch auf Mobile angezeigt. */
html[itemtype="https://schema.org/ItemPage"] body
#product-offer .info-essential .product-ean,
html[itemtype="https://schema.org/ItemPage"] body
#product-offer .info-essential .product-gtin {
    display: none !important;
}

/* 3) Preis -> Grundpreis auf das feste Vape-Tec-Abstandsraster setzen.
   NOVA nutzt für den großen Detailpreis die H1-Typografie; deren
   Standard-Margin erzeugt sonst zu viel Leerraum. */
html[itemtype="https://schema.org/ItemPage"] body
#product-offer .price_wrapper > .price {
    margin-top: 0 !important;
    margin-bottom: var(--vt-space-8, 8px) !important;
}

html[itemtype="https://schema.org/ItemPage"] body
#product-offer .price_wrapper > .price-note {
    margin-top: 0 !important;
}

html[itemtype="https://schema.org/ItemPage"] body
#product-offer .price_wrapper .price-note .base-price {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 4) USt.-Zeile bewusst nur eine halbe Rasterstufe unter dem Grundpreis. */
html[itemtype="https://schema.org/ItemPage"] body
#product-offer .price_wrapper .price-note .vat_info {
    display: block !important;
    margin-top: var(--vt-space-4, 4px) !important;
}


/* ================================================================
   VapeTec 0.21.105 – PRODUCT DETAILS FACTS POLISH
   ----------------------------------------------------------------
   Der bisherige vt-flavour-Faktenblock wird als universeller
   Produktdetails-Block weiterverwendet.

   Verbindlich:
   - 8px Raster zwischen Head / Fakten / Hinweis
   - Fakten-Icons größer und wie bei den normalen Vape-Tec-Karten
     links neben Titel + Wert zentriert
   - Cooling-Punkte + "Cooling vorhanden" in EINER Zeile
   ================================================================ */

/* 1) Exaktes 8px-Raster im kompletten Produktdetails-Block. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-head > div {
    margin-bottom: 8px !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-facts {
    gap: 8px !important;
    margin: 0 0 8px 0 !important;
}

/* 2) Faktenkarten: größeres Icon links, Text rechts davon.
      Das HTML bleibt unverändert; das Icon wird aus der Labelzeile
      visuell in einen festen linken Gutter gesetzt. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact {
    position: relative !important;
    min-height: 64px !important;
    padding:
        .58rem
        .62rem
        .58rem
        calc(.62rem + 42px) !important;
}

html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-fact .vt-flavour-label {
    display: block !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.22 !important;
}

/* Äußerer Sockel – bewusst größer als bisher 24px. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-fact .vt-flavour-label .vt-site-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1) 0%,
            rgba(245,245,245,.95) 100%
        ) !important;

    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 50% !important;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.95),
        inset 0 -1px 2px rgba(0,0,0,.045),
        0 1px 2px rgba(0,0,0,.06),
        0 3px 6px rgba(0,0,0,.075) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    line-height: 1 !important;
}

/* Inneres Kupferkästchen passend zum größeren Sockel. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-fact .vt-flavour-label .vt-site-icon > .fas,
html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-fact .vt-flavour-label .vt-site-icon > .far,
html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-fact .vt-flavour-label .vt-site-icon > .fab {
    position: static !important;
    inset: auto !important;

    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--vt-site-icon-bg, rgba(184,115,51,.055)) !important;
    border: 1px solid var(--vt-site-icon-border, rgba(184,115,51,.46)) !important;
    border-radius: 6px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.80),
        0 1px 2px rgba(40,35,31,.05) !important;

    color: var(--vt-site-icon-color, var(--vt-copper, #b87333)) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* 3) Cooling-Punkte und Mini-Text nebeneinander statt untereinander. */
html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-cooling {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: none !important;
    margin: 2px 5px 0 0 !important;
    vertical-align: middle !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-cooling-text {
    display: inline-block !important;
    margin: 2px 0 0 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Mobile: dieselbe Geometrie, aber minimal kompakter. */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-fact {
        min-height: 62px !important;
        padding:
            .54rem
            .56rem
            .54rem
            calc(.56rem + 40px) !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body
    .vt-flavour-fact .vt-flavour-label .vt-site-icon {
        left: 9px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body
    .vt-flavour-fact .vt-flavour-label .vt-site-icon > .fas,
    html[itemtype="https://schema.org/ItemPage"] body
    .vt-flavour-fact .vt-flavour-label .vt-site-icon > .far,
    html[itemtype="https://schema.org/ItemPage"] body
    .vt-flavour-fact .vt-flavour-label .vt-site-icon > .fab {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
        font-size: 9px !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-cooling {
        gap: 3px !important;
        margin-right: 4px !important;
    }
}


/* ================================================================
   VapeTec 0.21.106 – PRODUCT DETAILS HEAD STANDALONE
   ----------------------------------------------------------------
   Hintergrund:
   Der alte Geschmacksprofil-Head war optisch mit .vt-flavour-main
   zu EINER Karte verbunden. Deshalb hatte der Head bewusst:
   - keinen unteren Rahmen
   - keine unteren Radien
   - nur einen inneren Topschatten

   Im neuen Produktdetails-Aufbau folgt direkt .vt-flavour-facts.
   In genau diesem Fall muss der Head wieder eine vollständige
   eigenständige Karte sein.

   Legacy-Geschmacksprofile MIT .vt-flavour-main bleiben unverändert.
   ================================================================ */

html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-head:has(+ .vt-flavour-facts) > div {
    border-bottom: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 4px rgba(45,38,33,.05),
        0 4px 8px rgba(45,38,33,.055) !important;
}


/* ================================================================
   VapeTec 0.21.107 – FEATURE NOTE KONTEXT-SAUBER
   ----------------------------------------------------------------
   Die Feature-Note kommt in zwei unterschiedlichen Kontexten vor:

   1) Im Produktkopf / bei der Kurzbeschreibung:
      -> bleibt an vt-taste-note angelehnt
      -> 5px Akzent bleibt dort korrekt

   2) Im Master-/Beschreibungsblock .vt-shop-trust:
      -> ist eine normale Inhaltskarte zwischen anderen Action-Cards
      -> deshalb exakt deren Typografie
      -> Akzent exakt wie Abschnitts-Heads: 3px

   So wird nicht mehr eine einzige Geometrie auf zwei unterschiedliche
   Einsatzzwecke gezwungen.
   ================================================================ */

/* Master-/Beschreibungsbereich:
   grüner Akzent exakt so breit wie die kupfernen Abschnitts-Akzente. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-shop-trust > .vt-local-action-card.vt-feature-note::before {
    width: var(--vt-section-head-accent, 3px) !important;
}

/* Titel entspricht dort wieder einer normalen vt-local-action-card. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-shop-trust > .vt-local-action-card.vt-feature-note > div > strong {
    display: block !important;
    margin: 0 0 3px 0 !important;

    font-family: var(--vt-font-sans) !important;
    font-size: .88rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    color: var(--vt-anthracite, #23262b) !important;
}

/* Untertext entspricht dort ebenfalls einer normalen Action-Card. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-shop-trust > .vt-local-action-card.vt-feature-note > div > span {
    display: block !important;
    margin: 0 !important;

    font-family: var(--vt-font-sans) !important;
    font-size: var(--vt-content-body-size, .72rem) !important;
    line-height: var(--vt-content-body-line-height, 1.30) !important;
    font-weight: var(--vt-content-body-weight, 400) !important;

    color: var(--vt-content-body-color, var(--vt-anthracite, #23262b)) !important;
}

@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body
    .vt-shop-trust > .vt-local-action-card.vt-feature-note > div > strong {
        font-size: .80rem !important;
    }

    html[itemtype="https://schema.org/ItemPage"] body
    .vt-shop-trust > .vt-local-action-card.vt-feature-note > div > span {
        font-size: .66rem !important;
    }
}


/* ================================================================
   VapeTec 0.21.108 – FEATURE NOTE: ECHTER LINKER STATUSRAHMEN
   ----------------------------------------------------------------
   Gegenprüfung 0.21.107:
   Der grüne Balken im .vt-shop-trust war ein ::before-Element,
   das innerhalb der kupfernen Außenumrandung lag und durch
   overflow:hidden + border-radius beschnitten wurde.

   Dadurch wirkten oberes und unteres Ende anders als bei den
   echten kupfernen Akzentkanten.

   Lösung im Master-/Beschreibungsbereich:
   - kein inneres ::before mehr
   - Grün wird zur echten border-left
   - exakt 3px wie die vorhandenen Abschnittsakzente
   - Top / Right / Bottom bleiben Kupfer
   - border-radius wirkt nun auf denselben Border-Box-Rahmen
   ================================================================ */

html[itemtype="https://schema.org/ItemPage"] body
.vt-shop-trust > .vt-local-action-card.vt-feature-note {
    border-left:
        var(--vt-section-head-accent, 3px)
        solid rgb(58, 148, 68) !important;
}

/* Inneren Balken in diesem Kontext vollständig abschalten. */
html[itemtype="https://schema.org/ItemPage"] body
.vt-shop-trust > .vt-local-action-card.vt-feature-note::before {
    content: none !important;
    display: none !important;
}


/* ================================================================
   VapeTec 0.21.109 – INFO NOTE: ECHTER SILBERNER LINKER RAHMEN
   ----------------------------------------------------------------
   Analog zum grünen Feature-Note-Fix aus 0.21.108:

   Bisher:
   - Silber als innenliegendes ::before
   - dadurch an den Rundungen oben/unten andere Geometrie

   Jetzt:
   - echte 3px border-left in Silber
   - Top / Right / Bottom bleiben Kupfer
   - ::before für .vt-flavour-note wird deaktiviert
   - identische Eckgeometrie zum Kupfer-/Grün-System
   ================================================================ */

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note {
    border-left:
        var(--vt-section-head-accent, 3px)
        solid var(--vt-silver-lo, #aeb2b7) !important;
}

html[itemtype="https://schema.org/ItemPage"] body .vt-flavour-note::before {
    content: none !important;
    display: none !important;
}

/* ============================================================
   VapeTec v0.21.112 – METALLIC ROUNDED PRODUCT BADGES (PREVIEW)
   JTL-Ribbon-Klassen unveraendert: nur Kategorie-/Produktlisten.
   Palette entsprechend bisherigem Theme-Ribbon: 1 Bestseller,
   7 Ausverkauft, 8 Auf Lager, 9 Vorreservierung.
   Andere Ribbon-Klassen erhalten einen neutralen Basislook.
   ============================================================ */
.productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon {
    position: absolute;
    top: .32rem;
    left: .32rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 1.55rem;
    max-width: calc(100% - .64rem);
    padding: .25rem .65rem;
    box-sizing: border-box;
    border: 1px solid #b77f55;
    border-radius: .6rem;
    outline: 0;
    background: linear-gradient(165deg, #62656b 0%, #393b40 34%, #26282c 72%, #45474d 100%);
    color: #f8f6f2;
    font-size: .65rem;
    font-weight: 750;
    line-height: 1.18;
    letter-spacing: .01em;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    overflow: visible;
    text-shadow: 0 1px 1px rgba(0,0,0,.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 2px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.24);
    transform: none;
    transition: box-shadow .18s ease;
}
/* Die alten JTL-Faehnchen-Spitzen nicht darstellen. */
.productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon::before,
.productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon::after {
    content: none;
    display: none;
}
/* Bestseller: silber-metallic, feiner Kupferrand. */
.productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon.ribbon-1 {
    border-color: #ac754f;
    background: linear-gradient(165deg, #f1f2f4 0%, #c6cbd0 24%, #939aa2 55%, #bac0c6 78%, #e0e3e6 100%);
    color: #24282d;
    text-shadow: 0 1px 0 rgba(255,255,255,.28);
}
/* Ausverkauft: dunkles rubinrotes Metallic, Kupferrand. */
.productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon.ribbon-7 {
    border-color: #b77f55;
    background: linear-gradient(165deg, #d45e63 0%, #a52736 27%, #781524 65%, #a63342 100%);
    color: #fff8f6;
}
/* Auf Lager: metallisches Dunkelgruen, Kupferrand. */
.productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon.ribbon-8 {
    border-color: #b77f55;
    background: linear-gradient(165deg, #68ad87 0%, #247b55 27%, #13583f 67%, #2e8964 100%);
    color: #fcfff9;
}
/* Vorreservierung: metallisches Kupfer mit silbernem Rand. */
.productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon.ribbon-9 {
    border-color: #c4c9ce;
    background: linear-gradient(165deg, #e6aa78 0%, #c1814f 27%, #8e4b29 70%, #b76f3e 100%);
    color: #fffaf5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.33), inset 0 -1px 2px rgba(62,25,10,.28), 0 2px 5px rgba(0,0,0,.24);
}
@media (min-width: 768px) {
    .productbox.productbox-hover:hover .productbox-ribbon.ribbon,
    .productbox.productbox-hover:focus .productbox-ribbon.ribbon,
    .productbox.productbox-hover.focus .productbox-ribbon.ribbon {
        top: .32rem;
        left: .32rem;
    }
}
@media (max-width: 767.98px) {
    .productbox:not(.productbox-sidebar) .productbox-ribbon.ribbon {
        min-height: 1.45rem;
        padding: .22rem .5rem;
        font-size: .58rem;
        max-width: calc(100% - .4rem);
        top: .2rem;
        left: .2rem;
    }
}


/* ================================================================
   VapeTec 0.21.114 – STANDARDABSTÄNDE FÜR KATEGORIE-INHALTE
   ----------------------------------------------------------------
   - 8px Kartenabstand aus 0.21.89 bleibt unangetastet.
   - 16px vor neuem Themenabschnitt (Intro-Karte nach Infokarte).
   - 16px vor abschließenden Related-Links.
   - 8px Abstand zwischen echten Absätzen im Intro.
   Betrifft nur die ausdrücklich zusammengehörigen Kartenklassen.
   ================================================================ */
body .vt-local-action-card:not(.vt-local-action-link) + .vt-category-intro {
    margin-top: 16px !important;
}

body .vt-local-action-card:not(.vt-local-action-link) + .vt-related-links {
    margin-top: 16px !important;
}

body .vt-category-intro-text > p + p {
    margin-top: 8px !important;
}


/* v0.21.115 – Auslaufartikel-Stoppzeichen: nur das Icon, niemals Badges/Buttons */
body .vt-site-icon[data-vt-rendered-icon="stop-circle"],
body .vt-site-icon[data-vt-rendered-icon="discontinued"] {
    color: #b52d31 !important;
    border-color: rgba(181, 45, 49, .48) !important;
    background: linear-gradient(145deg, #fff5f5 0%, #f5dfe0 100%) !important;
}


/* ================================================================
   VapeTec 0.21.117 – PRODUKTDETAILS: BEZEICHNUNG VOR WERT
   Nur Faktenkacheln der Produktbeschreibung (inkl. Geschmack).
   Kachelgeometrie, Icon-Achse, Cooling, andere Portlets unverändert.
   ================================================================ */
html body .vt-product-facts .vt-product-fact strong,
html body .vt-flavour-facts .vt-flavour-fact .vt-flavour-label {
    color: #342f2a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

html body .vt-product-facts .vt-product-fact > span,
html body .vt-flavour-facts .vt-flavour-fact .vt-flavour-value {
    color: #5b5550 !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}


/* ================================================================
   VapeTec 0.21.122 – LEGACY GESCHMACKSPROFIL: VOLLSTAENDIGE KACHELN
   ----------------------------------------------------------------
   Der alte Verbund aus Head + .vt-flavour-main hatte absichtlich
   unvollstaendige Eckradien / Rahmen. Bei der neuen Kachelsprache
   werden beide als eigenstaendige Karten mit 8px Abstand gezeigt.
   Ausschliesslich Geschmacksprofile MIT .vt-flavour-main betroffen.
   Produktdetails ohne .vt-flavour-main und Mastertemplates bleiben
   unveraendert. Keine HTML-Aenderungen in der WaWi erforderlich.
   ================================================================ */
html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-profile > .vt-flavour-head:has(+ .vt-flavour-main) > div {
    margin: 0 0 8px 0 !important;
    padding: var(--vt-section-head-pad-y, 8px) var(--vt-section-head-pad-x, 10px) !important;
    border-left: var(--vt-section-head-accent, 3px) solid var(--vt-copper, #b87333) !important;
    border-top: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-right: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-bottom: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 4px rgba(45,38,33,.05),
        0 4px 8px rgba(45,38,33,.055) !important;
}

html[itemtype="https://schema.org/ItemPage"] body
.vt-flavour-profile > .vt-flavour-head + .vt-flavour-main {
    margin: 0 0 8px 0 !important;
    padding: var(--vt-section-head-pad-y, 8px) var(--vt-section-head-pad-x, 10px) !important;
    border-left: var(--vt-section-head-accent, 3px) solid var(--vt-copper, #b87333) !important;
    border-top: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-right: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-bottom: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 4px rgba(45,38,33,.05),
        0 4px 8px rgba(45,38,33,.055) !important;
}


/* ==============================================================
   VapeTec 0.21.123 – FLAVOUR CARDS: ROBUST AGAINST JTL WRAPPERS
   ----------------------------------------------------------------
   0.21.122 used a strict :has() and direct-child/adjacent selector.
   These selectors apply even if the shop adds wrappers
   or the HTML schema itemtype differs. Only profiles containing
   a flavour-main qualify; standalone Produktdetails are untouched.
   =============================================================== */
body .vt-flavour-profile:has(.vt-flavour-main) .vt-flavour-head > div {
    margin: 0 0 8px 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-left: 3px solid var(--vt-copper, #b87333) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 4px rgba(45,38,33,.05),
        0 4px 8px rgba(45,38,33,.055) !important;
}
body .vt-flavour-profile .vt-flavour-main {
    margin: 0 0 8px 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--vt-card-border-copper, rgba(184,115,51,.46)) !important;
    border-left: 3px solid var(--vt-copper, #b87333) !important;
    border-radius: var(--vt-ui-radius, 8px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        0 2px 4px rgba(45,38,33,.05),
        0 4px 8px rgba(45,38,33,.055) !important;
}

/* ================================================================
   VapeTec 0.21.125 – UNBESTAETIGTER VEROEFFENTLICHUNGSTERMIN
   ----------------------------------------------------------------
   Eigenstaendige Statusvariante nur fuer gezielt eingesetzte
   Mastertemplate-/OPC-Hinweise. Benutzt zusaetzlich die bestaetigte
   .vt-overdosed-note als Layoutbasis; alle Dimensionen, Schriftarten,
   Icon-Geometrie, Rundungen und Schatten bleiben daher identisch.
   Lediglich der linke Akzent wechselt von Silber zu Metallic-Rot.
   ================================================================ */
html body .vt-overdosed-note.vt-release-unconfirmed::before {
    background: linear-gradient(
        180deg,
        #e8797d 0%,
        #c43b45 48%,
        #92262f 100%
    ) !important;
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,.48),
        inset -1px 0 0 rgba(91,17,24,.24) !important;
}

/* ================================================================
   VapeTec 0.21.126 – MOBILE CONTENT WIDTH + RELATED PRODUCT MODULE
   Referenz: Vape-Tec Letzte Käufe v0.4.10.
   Ausschließlich die NOVA-Accordion-Innenkante auf Mobilgeräten und
   den originalen JTL-Slider #slider-related gestalten.
   Keine Änderung an WaWi-/OPC-Kachelklassen oder der JTL-Sliderlogik.
   ================================================================ */

/* Mobile: Die äußere Bootstrap-Containerbreite ist korrekt; nur der
   zusätzliche NOVA-.card-body-Innenabstand engt WaWi, OPC und Merkmale
   gegenüber der Produktansicht um ca. 20 px je Seite ein. */
@media (max-width: 767.98px) {
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion #tab-description > .card-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* JTL-Ähnliche-Artikel: gleiche Materialfamilie wie das Recent-Purchases-
   Plugin. Nur der original vorhandene Slider #slider-related wird angepasst. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    margin: .7rem auto 1rem !important;
    padding: .58rem .66rem .66rem !important;
    background: linear-gradient(180deg, var(--vt-card-bg-top,#f2f0ed) 0%, var(--vt-card-bg-bottom,#eeece9) 100%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius,8px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 1px 3px rgba(38,34,30,.04), 0 4px 9px rgba(38,34,30,.055) !important;
    color: var(--vt-anthracite,#23262b);
}

html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related > .hr-sect.h2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    min-height: 30px;
    margin: 0 0 .48rem !important;
    padding: 0 65px 0 0 !important;
    text-align: left !important;
    font-size: .90rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: -.008em;
    color: #272725 !important;
    border: 0 !important;
    text-shadow: none !important;
}

/* Das äußere Icon nimmt Form/Farbe des Plugin-Titelicons auf. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related > .hr-sect.h2::before {
    content: "\f0c5" !important;
    display: inline-flex !important;
    position: static !important;
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(145deg,#fff 0%,rgba(245,245,245,.96) 100%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46));
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.95), 0 1px 3px rgba(0,0,0,.055), 0 3px 7px rgba(0,0,0,.075);
    color: var(--vt-copper,#b87333);
    font-family: "Font Awesome 5 Free";
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related > .hr-sect.h2::after {
    content: none !important;
    display: none !important;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .carousel.slick-type-product {
    margin: 0 !important;
    padding: .12rem 0 .14rem !important;
    min-width: 0;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-list {
    min-width: 0;
    margin: 0 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product {
    padding-left: .27rem !important;
    padding-right: .27rem !important;
    min-width: 0;
    min-height: 0;
}

/* Keine neuen Slider-Items erzeugen: bestehendes JTL-Linkelement bleibt
   erhalten und wird lediglich als freischwebende Kompaktkarte gestaltet. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product > a {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 50px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: .55rem;
    row-gap: .10rem;
    align-content: center;
    align-items: center;
    min-height: 70px;
    height: 100%;
    padding: .40rem .48rem !important;
    margin: 0 !important;
    background: linear-gradient(180deg,var(--vt-card-bg-top,#f2f0ed) 0%,var(--vt-card-bg-bottom,#eeece9) 100%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius,8px) !important;
    box-shadow: var(--vt-card-shadow,inset 0 1px 0 rgba(255,255,255,.88),0 2px 4px rgba(38,34,30,.055),0 6px 12px rgba(38,34,30,.075)) !important;
    color: var(--vt-anthracite,#23262b) !important;
    text-decoration: none !important;
    transform: none;
    filter: none;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product > a:hover {
    border-color: var(--vt-card-border-copper-hover,rgba(184,115,51,.64)) !important;
    box-shadow: var(--vt-card-shadow-hover,inset 0 1px 0 rgba(255,255,255,.92),0 3px 6px rgba(38,34,30,.065),0 8px 16px rgba(38,34,30,.095)) !important;
    transform: translateY(-1px);
    filter: none;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider.square-image {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex !important;
    flex: none;
    width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(161,164,168,.42);
    border-radius: 6px;
    background: linear-gradient(145deg,#fff 0%,#eceeef 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(38,34,30,.035) !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider.square-image > .inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider.square-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-desc {
    grid-column: 2;
    grid-row: 1;
    display: -webkit-box !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 3.9em;
    margin: 0 !important;
    overflow: hidden;
    text-align: left !important;
    font-size: .70rem !important;
    font-weight: 400 !important;
    line-height: 1.30 !important;
    color: var(--vt-anthracite,#23262b) !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-price {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin: 0 !important;
    text-align: left !important;
    font-size: .68rem !important;
    line-height: 1.2 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider-price .price {
    font-size: .75rem !important;
}

/* Die bestehenden Slick-Pfeile bleiben funktional unangetastet, stehen
   aber – wie beim Plugin – klein und materialkonform im Kopfbereich. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .slick-arrow {
    position: absolute !important;
    top: -22px !important;
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    padding: 0 !important;
    opacity: 1;
    transform: translateY(-50%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg,#f7f5f2 0%,#ece9e5 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(38,34,30,.05) !important;
    color: var(--vt-copper-action,#a85f2c) !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .slick-prev {
    left: auto !important;
    right: 31px !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .slick-next {
    left: auto !important;
    right: 1px !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .slick-arrow:hover {
    color: var(--vt-copper-hover,#914c22) !important;
    background: linear-gradient(180deg,#fff 0%,#efebe7 100%) !important;
}

@media (max-width: 575.98px) {
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related {
        margin: .6rem auto .85rem !important;
        padding: .52rem !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related > .hr-sect.h2 {
        margin-bottom: .44rem !important;
        min-height: 28px;
        padding-right: 0 !important;
        font-size: .84rem !important;
        gap: 7px;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related > .hr-sect.h2::before {
        flex-basis: 28px;
        width: 28px !important;
        height: 28px !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .slick-arrow {
        display: none !important; /* Mobile bleibt wie beim Plugin wischbar. */
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider.square-image {
        width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product > a {
        grid-template-columns: 46px minmax(0,1fr);
        min-height: 68px;
        padding: .36rem .42rem !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-desc {
        font-size: .68rem !important;
        line-height: 1.29 !important;
    }
}

/* Slick soll nur innerhalb des Modulrahmens zeichnen. Ohne diesen Schutz
   kann vor der JS-Initialisierung die zweite Vorschaukarte herausragen. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related {
    overflow: hidden;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .carousel.slick-type-product {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-list {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow: hidden !important;
}

/* VapeTec 0.21.128 – JTL echtes Cross-Selling #slider-xsell (x-sell).
   Modul- und Kartenoptik 1:1 aus dem bestaetigten "Aehnliche Artikel"-System. */
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    max-width: calc(100% - 2rem);
    margin: .7rem auto 1rem !important;
    padding: .58rem .66rem .66rem !important;
    background: linear-gradient(180deg, var(--vt-card-bg-top,#f2f0ed) 0%, var(--vt-card-bg-bottom,#eeece9) 100%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius,8px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 1px 3px rgba(38,34,30,.04), 0 4px 9px rgba(38,34,30,.055) !important;
    color: var(--vt-anthracite,#23262b);
}

html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell > .hr-sect.h2 {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    min-height: 30px;
    margin: 0 0 .48rem !important;
    padding: 0 65px 0 0 !important;
    text-align: left !important;
    font-size: .90rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: -.008em;
    color: #272725 !important;
    border: 0 !important;
    text-shadow: none !important;
}

/* Das äußere Icon nimmt Form/Farbe des Plugin-Titelicons auf. */
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell > .hr-sect.h2::before {
    content: "\f0c5" !important;
    display: inline-flex !important;
    position: static !important;
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(145deg,#fff 0%,rgba(245,245,245,.96) 100%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46));
    border-radius: 50%;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.95), 0 1px 3px rgba(0,0,0,.055), 0 3px 7px rgba(0,0,0,.075);
    color: var(--vt-copper,#b87333);
    font-family: "Font Awesome 5 Free";
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell > .hr-sect.h2::after {
    content: none !important;
    display: none !important;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .carousel.slick-type-product {
    margin: 0 !important;
    padding: .12rem 0 .14rem !important;
    min-width: 0;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-list {
    min-width: 0;
    margin: 0 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product {
    padding-left: .27rem !important;
    padding-right: .27rem !important;
    min-width: 0;
    min-height: 0;
}

/* Keine neuen Slider-Items erzeugen: bestehendes JTL-Linkelement bleibt
   erhalten und wird lediglich als freischwebende Kompaktkarte gestaltet. */
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product > a {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 50px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: .55rem;
    row-gap: .10rem;
    align-content: center;
    align-items: center;
    min-height: 70px;
    height: 100%;
    padding: .40rem .48rem !important;
    margin: 0 !important;
    background: linear-gradient(180deg,var(--vt-card-bg-top,#f2f0ed) 0%,var(--vt-card-bg-bottom,#eeece9) 100%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
    border-radius: var(--vt-ui-radius,8px) !important;
    box-shadow: var(--vt-card-shadow,inset 0 1px 0 rgba(255,255,255,.88),0 2px 4px rgba(38,34,30,.055),0 6px 12px rgba(38,34,30,.075)) !important;
    color: var(--vt-anthracite,#23262b) !important;
    text-decoration: none !important;
    transform: none;
    filter: none;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product > a:hover {
    border-color: var(--vt-card-border-copper-hover,rgba(184,115,51,.64)) !important;
    box-shadow: var(--vt-card-shadow-hover,inset 0 1px 0 rgba(255,255,255,.92),0 3px 6px rgba(38,34,30,.065),0 8px 16px rgba(38,34,30,.095)) !important;
    transform: translateY(-1px);
    filter: none;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider.square-image {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex !important;
    flex: none;
    width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(161,164,168,.42);
    border-radius: 6px;
    background: linear-gradient(145deg,#fff 0%,#eceeef 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(38,34,30,.035) !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider.square-image > .inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider.square-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-desc {
    grid-column: 2;
    grid-row: 1;
    display: -webkit-box !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 3.9em;
    margin: 0 !important;
    overflow: hidden;
    text-align: left !important;
    font-size: .70rem !important;
    font-weight: 400 !important;
    line-height: 1.30 !important;
    color: var(--vt-anthracite,#23262b) !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-price {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin: 0 !important;
    text-align: left !important;
    font-size: .68rem !important;
    line-height: 1.2 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider-price .price {
    font-size: .75rem !important;
}

/* Die bestehenden Slick-Pfeile bleiben funktional unangetastet, stehen
   aber – wie beim Plugin – klein und materialkonform im Kopfbereich. */
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .slick-arrow {
    position: absolute !important;
    top: -22px !important;
    width: 25px !important;
    min-width: 25px !important;
    height: 25px !important;
    padding: 0 !important;
    opacity: 1;
    transform: translateY(-50%) !important;
    border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg,#f7f5f2 0%,#ece9e5 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(38,34,30,.05) !important;
    color: var(--vt-copper-action,#a85f2c) !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .slick-prev {
    left: auto !important;
    right: 31px !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .slick-next {
    left: auto !important;
    right: 1px !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .slick-arrow:hover {
    color: var(--vt-copper-hover,#914c22) !important;
    background: linear-gradient(180deg,#fff 0%,#efebe7 100%) !important;
}

@media (max-width: 575.98px) {
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell {
        margin: .6rem auto .85rem !important;
        padding: .52rem !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell > .hr-sect.h2 {
        margin-bottom: .44rem !important;
        min-height: 28px;
        padding-right: 0 !important;
        font-size: .84rem !important;
        gap: 7px;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell > .hr-sect.h2::before {
        flex-basis: 28px;
        width: 28px !important;
        height: 28px !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .slick-arrow {
        display: none !important; /* Mobile bleibt wie beim Plugin wischbar. */
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider.square-image {
        width: 46px !important;
        max-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product > a {
        grid-template-columns: 46px minmax(0,1fr);
        min-height: 68px;
        padding: .36rem .42rem !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-desc {
        font-size: .68rem !important;
        line-height: 1.29 !important;
    }
}


/* ==============================================================
   VapeTec v0.21.128 – gemeinsame feine Abstimmung JTL Empfehlungen
   Daten, Links und Slick-Verhalten verbleiben bei NOVA.
   Optik: Kartenkoerper kompakt, Textblock mittig, Betrag+Grundpreis
   bleiben sichtbar (Preisangabenverordnung).
   ============================================================= */

/* Titelicon wie das im Live-Preview bewährte Materialsymbol:
   keinen falschen Font-Awesome-Private-Use-Code verwenden. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related > .hr-sect.h2::before,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell > .hr-sect.h2::before {
    content: "⧉" !important;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Empfehlungskarten nur so hoch wie ihr tatsächlicher Inhalt; Text und
   Bild nebeneinander und auf derselben vertikalen Mitte. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product {
    height: auto !important;
    min-height: 0 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product > a,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product > a {
    min-height: 60px !important;
    height: auto !important;
    grid-template-columns: 50px minmax(0,1fr);
    grid-template-rows: auto auto;
    row-gap: 0 !important;
    align-content: center !important;
    justify-items: center;
    align-items: center !important;
    padding: .30rem .42rem !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-desc,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-desc {
    align-self: end !important;
    justify-self: stretch;
    text-align: center !important;
    font-size: .67rem !important;
    line-height: 1.22 !important;
    max-height: 2.44em !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-price,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-price {
    align-self: start !important;
    justify-self: stretch;
    text-align: center !important;
    font-size: .61rem !important;
    line-height: 1.10 !important;
    margin: .10rem 0 0 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider-price .price,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider-price .price {
    font-size: .68rem !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider-price .price-note,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider-price .price-note {
    margin: .06rem 0 0 !important;
    font-size: .58rem !important;
    line-height: 1.08 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider-price .base-price,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider-price .base-price {
    display: block !important;
    font-size: .58rem !important;
    line-height: 1.08 !important;
    color: #68635d !important;
    white-space: normal;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider-price .footnote-reference,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider-price .footnote-reference {
    display: inline !important;
    font-size: .57rem !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .item-slider-price small,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .item-slider-price small {
    display: inline !important;
    font-size: .57rem !important;
}

/* Kein dominanter Riesenraum zwischen Produkt und Slider-Modul. */
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell {
    overflow: hidden;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .carousel.slick-type-product,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-list {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-list {
    overflow: hidden !important;
}

@media (max-width: 575.98px) {
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product > a,
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product > a {
        grid-template-columns: 46px minmax(0,1fr);
        min-height: 54px !important;
        padding: .28rem .32rem !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-desc,
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-desc {
        font-size: .65rem !important;
        line-height: 1.20 !important;
        max-height: 2.40em !important;
    }
}


/* =====================================================================
   VapeTec 0.21.129 – Empfehlungsmodule als reine Navigationskarten
   NUR #slider-related und #slider-xsell auf Artikeldetailseiten.
   Preis und Grundpreis sind auf den verlinkten Artikelseiten weiterhin sichtbar.
   Keine Änderung an Produktdaten, JTL-Slick, Links oder Breitenlogik.
   ===================================================================== */

/* Die gesamte Preiszeile inklusive eventueller Steuerhinweise entfernen.
   Das verhindert, dass NOVA-Preisunterelemente leeren Platz hinterlassen. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-price,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-price {
    display: none !important;
}

/* Nach dem Wegfall der Preiszeile hat die Karte nur noch eine Textzeile.
   Bild und Artikelname teilen dieselbe vertikale Achse, auch bei zwei
   Titelzeilen. Die vorhandene Bildgröße, Rahmen und Abstände bleiben. */
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product > a,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product > a {
    grid-template-rows: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    min-height: 60px !important;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider.square-image,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider.square-image {
    grid-row: 1 !important;
    align-self: center !important;
}

html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-desc,
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-desc {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    text-align: center !important;
    margin: 0 !important;
}

@media (max-width: 575.98px) {
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .product-wrapper-product > a,
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .product-wrapper-product > a {
        min-height: 54px !important;
    }
}


/* ================================================================
   VapeTec 0.21.130 – Empfehlungen: 3-Zeilen-Titel und 8px-Rhythmus
   ----------------------------------------------------------------
   Nur Artikel-Detailseiten. Originale JTL-Slider und Preisfreiheit
   aus v0.21.129 bleiben erhalten. Die mobilen Bewertungen bleiben
   sichtbar und sind kein Teil der 8px-Messstrecke.
   ================================================================ */

/* 1) Drei statt zwei sichtbare Titelzeilen, vertikal weiterhin mittig
   neben dem Produktbild. In der 50/46px-Bildachse ist genug Platz. */
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-desc,
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    max-height: 3.66em !important;
    overflow: hidden !important;
    align-self: center !important;
}

/* 2) Merkmale / Beschreibung -> erstes Empfehlungsmodul.
   Keine summierten 12px Tab-Margins + 11px Slider-Margin. */
@media (min-width: 768px) {
    html[itemtype="https://schema.org/ItemPage"] body .tab-content {
        margin-bottom: 0 !important;
    }
}
html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell {
    margin-top: 8px !important;
}

/* 3) Letztes Modul -> Footer: den bisherigen negativen
   Recommendation-Ausgleich durch genau einen 8px-Contentabschluss
   ersetzen. Keine Änderung an Modulbreite oder Footer-Inhalt. */
html[itemtype="https://schema.org/ItemPage"] body .recommendations {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related {
    margin-bottom: 0 !important;
}
html[itemtype="https://schema.org/ItemPage"] body:has(#slider-related.x-related) #content {
    padding-bottom: 8px !important;
}
html[itemtype="https://schema.org/ItemPage"] body:has(#slider-related.x-related) #footer.vt-footer {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    /* Die Bewertungskopfzeile bleibt erhalten. Entfernt werden nur
       historische Zusatz-Margins im NOVA-Accordion-Bereich. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion #tab-description .card-body {
        padding-bottom: 0 !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card {
        margin-bottom: 0 !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card > .collapse,
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion > .card > .collapsing {
        margin-bottom: 8px !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile #tabAccordion {
        margin-bottom: 0 !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile .recommendations {
        margin-bottom: 0 !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile:has(#slider-related.x-related) #content {
        padding-bottom: 8px !important;
    }
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile:has(#slider-related.x-related) #footer.vt-footer {
        margin-top: 0 !important;
    }
}

@media (max-width: 575.98px) {
    html[itemtype="https://schema.org/ItemPage"] body #slider-xsell.x-sell .slick-type-product .item-slider-desc,
    html[itemtype="https://schema.org/ItemPage"] body #slider-related.x-related .slick-type-product .item-slider-desc {
        max-height: 3.6em !important;
        -webkit-line-clamp: 3 !important;
    }
}


/* =====================================================================
   VapeTec v0.21.131 – Desktop-Tababstand & mobile Bewertungskachel
   - Desktop: den noch wirksamen NOVA-4rem-Abstand von nav.tab-navigation
     neutralisieren; 8px am ersten Empfehlungsmodul stammen aus v0.21.130.
   - Mobil: nur den vorhandenen NOVA-Bewertungskopf gestalten. Keine
     Änderungen an äußeren Margins, dem Accordion-Verhalten, den
     Empfehlungsmodulen, der Contentbreite oder dem Footer-Abstand.
   ===================================================================== */

@media (min-width: 768px) {
    html[itemtype="https://schema.org/ItemPage"] body nav.tab-navigation {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 767.98px) {
    /* Der originale JTL-Header behält data-toggle, aria-expanded,
       Collapse-Pfeil und seine Position im Dokument. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion > .card > #tab-votes-head.card-header {
        box-sizing: border-box;
        position: relative;
        background: linear-gradient(180deg,
            var(--vt-card-bg-top,#f2f0ed) 0%,
            var(--vt-card-bg-bottom,#eeece9) 100%) !important;
        border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
        border-radius: var(--vt-ui-radius,8px) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
                    0 2px 4px rgba(38,34,30,.055),
                    0 6px 12px rgba(38,34,30,.075) !important;
        color: var(--vt-anthracite,#23262b) !important;
        font-size: .95rem !important;
        font-weight: 650 !important;
        padding-left: 3.25rem !important;
        cursor: pointer;
    }

    /* Eigenständige, zum Template passende Iconfassung.
       Absolut positioniert, daher kein zusätzlicher Flex-/Zeilenplatz. */
    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion > .card > #tab-votes-head.card-header::before {
        content: "★" !important;
        position: absolute;
        left: .70rem;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        border-radius: 50%;
        border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46));
        background: linear-gradient(145deg,#fff 0%,rgba(245,245,245,.96) 100%);
        box-shadow: inset 0 1px 1px rgba(255,255,255,.95),
                    0 1px 3px rgba(0,0,0,.055),
                    0 3px 7px rgba(0,0,0,.075);
        color: var(--vt-copper,#b87333);
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        pointer-events: none;
    }

    html[itemtype="https://schema.org/ItemPage"] body.is-mobile
    #tabAccordion > .card > #tab-votes-head.card-header:focus-visible {
        outline: 2px solid var(--vt-copper,#b87333);
        outline-offset: 2px;
    }
}


/* =====================================================================
   VapeTec v0.21.132 – mobiler Bewertungs-Akkordeonkopf, robuste Kennung
   Der Vorläufer in v0.21.131 setzte eine zu enge Elternstruktur und
   body.is-mobile voraus. Hier zählt die eindeutige NOVA-Votes-Kennung.
   Nur die sichtbare Kopfzeile wird gestaltet: keine Margin-Regeln,
   kein Eingriff in Accordion-Logik, Inhalt oder Empfehlungskarten.
   ===================================================================== */
@media (max-width: 767.98px) {
    #tabAccordion [id^="tab-votes-head"],
    #tabAccordion .card-header[aria-controls^="tab-votes"] {
        box-sizing: border-box !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-height: 44px;
        padding: .52rem 2.5rem .52rem 3.25rem !important;
        background: linear-gradient(180deg,
            var(--vt-card-bg-top,#f2f0ed) 0%,
            var(--vt-card-bg-bottom,#eeece9) 100%) !important;
        border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
        border-radius: var(--vt-ui-radius,8px) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85),
                    0 2px 4px rgba(38,34,30,.055),
                    0 6px 12px rgba(38,34,30,.075) !important;
        color: var(--vt-anthracite,#23262b) !important;
        font-size: .95rem !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
        cursor: pointer;
    }

    #tabAccordion [id^="tab-votes-head"]::before,
    #tabAccordion .card-header[aria-controls^="tab-votes"]::before {
        content: "★" !important;
        position: absolute !important;
        left: .70rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        box-sizing: border-box !important;
        background: linear-gradient(145deg,#fff 0%,rgba(245,245,245,.96) 100%) !important;
        border: 1px solid var(--vt-card-border-copper,rgba(184,115,51,.46)) !important;
        border-radius: 50% !important;
        box-shadow: inset 0 1px 1px rgba(255,255,255,.95),
                    0 1px 3px rgba(0,0,0,.055),
                    0 3px 7px rgba(0,0,0,.075) !important;
        color: var(--vt-copper,#b87333) !important;
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        pointer-events: none;
    }

    #tabAccordion [id^="tab-votes-head"]:focus-visible,
    #tabAccordion .card-header[aria-controls^="tab-votes"]:focus-visible {
        outline: 2px solid var(--vt-copper,#b87333);
        outline-offset: 2px;
    }
}