@import url("https://use.typekit.net/czn4mhz.css");

/* =========================================================
   ZOE & LOUIS – CUSTOM.CSS
   JTL-Shop 5.7.x / NOVA / Child-Template
   Konsolidierte, responsive Version
   ========================================================= */


/* =========================================================
   0. DESIGN-SYSTEM
   ========================================================= */

:root {
    --zl-primary: #C77752;
    --zl-primary-hover: #A95F40;
    --zl-accent: #E8B7AD;
    --zl-offwhite: #F6F3EE;
    --zl-green: #8FA588;
    --zl-gold: #DDD28E;
    --zl-dark: #2F2F2F;
    --zl-text: #444444;
    --zl-muted: #666666;
    --zl-white: #FFFFFF;
    --zl-border: #E3DDD5;
    --zl-shadow-soft: 0 4px 14px rgba(47,47,47,.08);
    --zl-shadow-hover: 0 12px 28px rgba(47,47,47,.14);
    --zl-radius-sm: 5px;
    --zl-radius-md: 8px;
    --zl-radius-lg: 12px;
    --zl-transition: .3s ease;
}



html {
    background: var(--zl-offwhite);
}

body {
    background: var(--zl-offwhite);
    color: var(--zl-text);
}

a {
    text-decoration-thickness: 1px;
}

.lazyload {
    opacity: 0 !important;
}

.btn-pause:focus,
.btn-pause:focus-within {
    outline: 2px solid var(--zl-primary) !important;
}


/* =========================================================
   2. HEADER
   Start: transparent über dem Hero
   Scroll: solide + sticky/fixed
   Homepage wird über data-page="18" gezielt behandelt.
   ========================================================= */

#jtl-nav-wrapper {
    z-index: 1000 !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    transition: background-color .25s ease, box-shadow .25s ease !important;
}

/* Homepage: Header liegt zunächst transparent über dem Hero. */
body[data-page="18"] #jtl-nav-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Die vorhandene Header-Logik setzt beim Scrollen
   die Klasse zl-header-scrolled. */
#jtl-nav-wrapper.zl-header-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(246,243,238,.97) !important;
    box-shadow: 0 3px 18px rgba(47,47,47,.10) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* NOVA-Innencontainer transparent halten */
#jtl-nav-wrapper .hide-navbar,
#jtl-nav-wrapper .navbar,
#jtl-nav-wrapper .menu-center-center,
#jtl-nav-wrapper .menu-multiple-rows-scroll,
#jtl-nav-wrapper .nav-logo-wrapper,
#jtl-nav-wrapper .main-search-wrapper,
#jtl-nav-wrapper .nav-icons-wrapper {
    background: transparent !important;
}


/* Logo */

#jtl-nav-wrapper #logo.logo-wrapper,
#jtl-nav-wrapper #logo.logo-wrapper .navbar-brand {
    display: flex !important;
    align-items: center !important;
}

#jtl-nav-wrapper #logo.logo-wrapper .navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
}

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


/* Navigation */

#jtl-nav-wrapper #mainNavigation,
#jtl-nav-wrapper .menu-multiple-rows-scroll {
    position: relative !important;
}

#jtl-nav-wrapper #mainNavigation ul.navbar-nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item,
#jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item > a.nav-link {
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

#jtl-nav-wrapper .menu-multiple-rows-scroll .nav-scrollbar-arrow {
    display: none !important;
}


/* Suche */

#jtl-nav-wrapper .search-wrapper {
    width: 100%;
}

#jtl-nav-wrapper #search-header,
#jtl-nav-wrapper .form-control {
    background: rgba(255,255,255,.94) !important;
    color: var(--zl-dark) !important;
    border-color: rgba(47,47,47,.55) !important;
}

#jtl-nav-wrapper .search-wrapper .btn-secondary {
    background: rgba(47,47,47,.88) !important;
    border-color: rgba(47,47,47,.88) !important;
    color: #fff !important;
}


/* Header-Links + Icons */

#jtl-nav-wrapper a:not(.dropdown-item):not(.btn) {
    color: var(--zl-dark);
    text-decoration: none;
}

#jtl-nav-wrapper .nav-icons-wrapper,
#jtl-nav-wrapper #shop-nav {
    background: transparent !important;
}

#jtl-nav-wrapper #shop-nav a,
#jtl-nav-wrapper #shop-nav button,
#jtl-nav-wrapper #shop-nav .fa,
#jtl-nav-wrapper #shop-nav .fas,
#jtl-nav-wrapper #shop-nav .far {
    color: var(--zl-dark) !important;
}


/* Burger */

#jtl-nav-wrapper #burger-menu,
#jtl-nav-wrapper .burger-menu-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#jtl-nav-wrapper .navbar-toggler-icon {
    color: var(--zl-dark);
}


/* =========================================================
   3. HERO – ZWEI GETRENNTE SLIDER
   Composer:
   Desktop = zl-hero-desktop
   Mobile  = zl-hero-mobile

   Desktop: XS + SM versteckt / MD + LG sichtbar
   Mobile:  XS + SM sichtbar / MD + LG versteckt
   ========================================================= */

.zl-hero-desktop,
.zl-hero-mobile {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.zl-hero-desktop .nivoSlider,
.zl-hero-mobile .nivoSlider {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.zl-hero-desktop .nivo-main-image,
.zl-hero-mobile .nivo-main-image {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}


/* -------------------------
   DESKTOP HERO
   ------------------------- */

.zl-hero-desktop {
    display: block !important;
    height: clamp(520px, 42vw, 680px) !important;
}

.zl-hero-desktop .nivoSlider,
.zl-hero-desktop .nivo-main-image {
    height: 100% !important;
}

.zl-hero-desktop .nivo-main-image {
    object-position: center center !important;
}


/* Desktop-Infobox */

.zl-hero-desktop .nivo-caption {
    display: block !important;
    position: absolute !important;
    left: 5% !important;
    right: auto !important;
    bottom: 8% !important;
    width: min(42%, 560px) !important;
    max-width: 560px !important;
    padding: 22px 30px !important;
    box-sizing: border-box !important;
    background: rgba(246,243,238,.88) !important;
    color: var(--zl-dark) !important;
    border-left: 5px solid var(--zl-primary) !important;
    border-radius: 0 var(--zl-radius-md) var(--zl-radius-md) 0 !important;
    box-shadow: 0 8px 28px rgba(47,47,47,.10) !important;
    opacity: 1 !important;
    text-align: left !important;
}

.zl-hero-desktop .nivo-caption .title {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: var(--zl-primary) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
}

.zl-hero-desktop .nivo-caption .desc {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--zl-dark) !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
}


/* -------------------------
   MOBILE HERO
   ------------------------- */

.zl-hero-mobile {
    display: none !important;
    height: 330px !important;
}

.zl-hero-mobile .nivoSlider,
.zl-hero-mobile .nivo-main-image {
    height: 330px !important;
    min-height: 330px !important;
}

.zl-hero-mobile .nivo-main-image {
    object-position: center center !important;
}


/* Mobile-Infobox */

.zl-hero-mobile .nivo-caption {
    display: block !important;
    position: absolute !important;
    left: 4% !important;
    right: 4% !important;
    bottom: 6% !important;
    width: auto !important;
    max-width: none !important;
    padding: 14px 17px !important;
    box-sizing: border-box !important;
    background: rgba(246,243,238,.90) !important;
    color: var(--zl-dark) !important;
    border-left: 4px solid var(--zl-primary) !important;
    border-radius: 0 7px 7px 0 !important;
    box-shadow: 0 6px 20px rgba(47,47,47,.10) !important;
    opacity: 1 !important;
    text-align: left !important;
}

.zl-hero-mobile .nivo-caption .title {
    display: block !important;
    margin: 0 0 5px !important;
    color: var(--zl-primary) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.zl-hero-mobile .nivo-caption .desc {
    display: block !important;
    margin: 0 !important;
    color: var(--zl-dark) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}


/* Slider-Navigation ausblenden */

.zl-hero-desktop .nivo-directionNav,
.zl-hero-mobile .nivo-directionNav,
.zl-hero-desktop .nivo-controlNav,
.zl-hero-mobile .nivo-controlNav {
    display: none !important;
}


/* =========================================================
   4. RESPONSIVE – HEADER + HERO
   ========================================================= */

@media (max-width: 991.98px) {

    #jtl-nav-wrapper #shop-logo {
        width: auto !important;
        max-width: 220px !important;
        max-height: 72px !important;
        height: auto !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper,
    #jtl-nav-wrapper .toggler-logo-wrapper {
        display: flex !important;
        align-items: center !important;
    }

    /* Mobile sichtbar, Desktop versteckt */
    .zl-hero-desktop {
        display: none !important;
    }

    .zl-hero-mobile {
        display: block !important;
    }

    .zl-hero-mobile,
    .zl-hero-mobile .nivoSlider,
    .zl-hero-mobile .nivo-main-image {
        height: 330px !important;
        min-height: 330px !important;
    }
}


@media (max-width: 575.98px) {

    #jtl-nav-wrapper #shop-logo {
        max-width: 210px !important;
        max-height: 68px !important;
    }

    .zl-hero-mobile,
    .zl-hero-mobile .nivoSlider,
    .zl-hero-mobile .nivo-main-image {
        height: 340px !important;
        min-height: 340px !important;
    }

    .zl-hero-mobile .nivo-caption {
        left: 4% !important;
        right: 4% !important;
        bottom: 5% !important;
        padding: 12px 14px !important;
        border-left-width: 3px !important;
    }

    .zl-hero-mobile .nivo-caption .title {
        font-size: 17px !important;
    }

    .zl-hero-mobile .nivo-caption .desc {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
}


/* =========================================================
   5. KURSE & WORKSHOPS – PRODUCTSTREAM
   ========================================================= */

.zl-course-stream {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.zl-course-stream .product-wrapper {
    position: relative;
    margin-bottom: 30px !important;
}

.zl-course-stream .productbox {
    position: relative;
    height: 100%;
    background: var(--zl-offwhite);
    border: 1px solid rgba(199,119,82,.12);
    border-radius: 10px;
    overflow: hidden;
    transition: transform var(--zl-transition), box-shadow var(--zl-transition), border-color var(--zl-transition);
}

.zl-course-stream .productbox:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(199,119,82,.30);
    box-shadow: 0 10px 25px rgba(47,47,47,.12) !important;
}


/* Kursbilder */

.zl-course-stream .productbox-image,
.zl-course-stream .productbox-images,
.zl-course-stream .square-image,
.zl-course-stream .first-wrapper,
.zl-course-stream .square-image .inner,
.zl-course-stream .first-wrapper .inner {
    overflow: hidden !important;
}

.productbox-image.square.square-image.first-wrapper {
    position: relative !important;
    overflow: hidden !important;
}

.productbox-image.square.square-image.first-wrapper .inner {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.productbox-image.square.square-image.first-wrapper .inner picture {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.productbox-image.square.square-image.first-wrapper .inner picture img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    transition: transform .45s ease !important;
}

.productbox-image.square.square-image.first-wrapper:hover .inner picture img {
    transform: scale(1.06) !important;
}


/* Ribbons */

.zl-course-stream .productbox-ribbon,
.zl-course-stream .ribbon {
    z-index: 20;
}

.zl-course-stream .ribbon {
    font-size: 12px;
    font-weight: 700;
    border-radius: 0 0 4px 0;
}


/* Kursinformationen */

.zl-course-stream .productbox-inner {
    background: var(--zl-offwhite);
    padding-bottom: 16px !important;
}

.zl-course-stream .productbox-title,
.zl-course-stream .productbox-title a,
.zl-course-stream .product-title,
.zl-course-stream .product-title a {
    color: var(--zl-dark) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.zl-course-stream .productbox-title a:hover,
.zl-course-stream .product-title a:hover {
    color: var(--zl-primary) !important;
}

.zl-course-stream .price,
.zl-course-stream .productbox-price,
.zl-course-stream .price_wrapper {
    color: var(--zl-primary) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}


/* Buttons */

.zl-course-stream .btn-primary,
.zl-course-stream .btn {
    border-radius: 6px;
}

.zl-course-stream .btn-primary {
    background: var(--zl-primary) !important;
    border-color: var(--zl-primary) !important;
    color: #fff !important;
}

.zl-course-stream .btn-primary:hover {
    background: var(--zl-primary-hover) !important;
    border-color: var(--zl-primary-hover) !important;
}


/* Wunschliste / Vergleich */

.zl-course-stream .productbox-hover .productbox-actions {
    z-index: 30;
}

.zl-course-stream .productbox-actions .btn,
.zl-course-stream .productbox-actions a {
    border-radius: 50%;
}


/* =========================================================
   6. PRODUKTWELT
   ========================================================= */

.row:has(.opc-Button) > .col[data-area-id^="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 30px !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] > div:first-child {
    overflow: hidden !important;
    border-radius: var(--zl-radius-lg) !important;
    background: var(--zl-offwhite) !important;
    box-shadow: var(--zl-shadow-soft) !important;
    transition: transform .35s ease, box-shadow .35s ease !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] > div:first-child picture {
    display: block !important;
    overflow: hidden !important;
    border-radius: var(--zl-radius-lg) !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] > div:first-child picture img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: var(--zl-radius-lg) !important;
    transform: scale(1) !important;
    transition: transform .45s ease !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"]:hover > div:first-child {
    transform: translateY(-4px) !important;
    box-shadow: var(--zl-shadow-hover) !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"]:hover > div:first-child picture img {
    transform: scale(1.05) !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] > div:nth-of-type(2) {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
    color: var(--zl-dark) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] > div:nth-of-type(3) {
    min-height: 62px !important;
    margin-bottom: 14px !important;
    color: var(--zl-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] .opc-Button {
    width: 100% !important;
    margin-top: 10px !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] .opc-Button a,
.row:has(.opc-Button) > .col[data-area-id^="col-"] .opc-Button button {
    display: block !important;
    width: 100% !important;
    padding: 11px 20px !important;
    background: var(--zl-primary) !important;
    border: 1px solid var(--zl-primary) !important;
    border-radius: 6px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.row:has(.opc-Button) > .col[data-area-id^="col-"] .opc-Button a:hover,
.row:has(.opc-Button) > .col[data-area-id^="col-"] .opc-Button button:hover {
    background: var(--zl-primary-hover) !important;
    border-color: var(--zl-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(47,47,47,.12) !important;
}


/* =========================================================
   7. MARKENBEREICH
   ========================================================= */

.row:has(.zl-brand-text) {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 70px 6% !important;
    background: var(--zl-offwhite);
}

.row:has(.zl-brand-text) > .col {
    padding-left: 35px !important;
    padding-right: 35px !important;
}

.row:has(.zl-brand-text) .zl-brand-text {
    max-width: 560px;
    padding: 20px 20px 20px 0;
}

.row:has(.zl-brand-text) .zl-brand-eyebrow {
    margin-bottom: 14px;
    color: var(--zl-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.row:has(.zl-brand-text) .zl-brand-text h2 {
    margin: 0 0 18px;
    color: var(--zl-dark);
    font-size: 42px;
    font-weight: 600;
    line-height: 1.15;
}

.row:has(.zl-brand-text) .zl-brand-text h3 {
    margin: 0 0 25px;
    color: var(--zl-primary);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;
}

.row:has(.zl-brand-text) .zl-brand-text p {
    margin: 0 0 18px;
    color: var(--zl-text);
    font-size: 17px;
    line-height: 1.7;
}

.row:has(.zl-brand-text) .zl-brand-claim {
    margin-top: 25px;
    color: var(--zl-green);
    font-size: 17px;
    font-weight: 600;
}

.row:has(.zl-brand-text) .zl-brand-button {
    display: inline-block;
    margin-top: 15px;
    padding: 11px 24px;
    background: var(--zl-primary);
    border: 1px solid var(--zl-primary);
    border-radius: var(--zl-radius-sm);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

.row:has(.zl-brand-text) > .col[data-area-id="col-1"] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: var(--zl-radius-lg);
    box-shadow: 0 8px 25px rgba(47,47,47,.10);
}


/* =========================================================
   8. STARTSEITEN-ABSTÄNDE + TYPOGRAFIE
   ========================================================= */

.row:has(.opc-Button) {
    padding-top: 45px;
    padding-bottom: 20px;
}

.row:has(.opc-Button) h2,
.row:has(.opc-Button) h3 {
    color: var(--zl-dark);
}

.row:has(.opc-Button) h2 {
    line-height: 1.2;
}

.row:has(.opc-Button) h3 {
    line-height: 1.3;
}

.opc-Container:has(.opc-Button) h2 + div p {
    font-size: 18px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   9. KURS-INFORMATIONEN
   ========================================================= */

.zl-course-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin: 12px 0 14px;
    padding: 10px 0;
    border-top: 1px solid rgba(199,119,82,.18);
    border-bottom: 1px solid rgba(199,119,82,.18);
}

.zl-course-info-item {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
    color: #2F3E4D;
}

.zl-course-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: var(--zl-primary);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zl-course-info-item span {
    display: block;
}


/* =========================================================
   10. RESPONSIVE – KURSE / PRODUKTWELT / MARKE
   ========================================================= */

@media (min-width: 1300px) {

    .zl-course-stream .product-wrapper {
        margin-bottom: 35px !important;
    }

    .zl-course-stream .productbox-title,
    .zl-course-stream .productbox-title a,
    .zl-course-stream .product-title,
    .zl-course-stream .product-title a {
        font-size: 18px !important;
    }
}


@media (min-width: 768px) and (max-width: 1299px) {

    .zl-hero-desktop .nivo-caption {
        left: 4% !important;
        width: min(48%, 520px) !important;
        max-width: 520px !important;
        padding: 20px 26px !important;
    }

    .zl-hero-desktop .nivo-caption .title {
        font-size: 25px !important;
    }

    .zl-hero-desktop .nivo-caption .desc {
        font-size: 16px !important;
    }

    .zl-course-stream .product-wrapper {
        margin-bottom: 25px !important;
    }

    .zl-course-stream .productbox-title,
    .zl-course-stream .productbox-title a,
    .zl-course-stream .product-title,
    .zl-course-stream .product-title a {
        font-size: 16px !important;
    }
}


@media (max-width: 767px) {

    .row:has(.opc-Button) {
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .row:has(.opc-Button) > .col[data-area-id^="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .row:has(.opc-Button) > .col[data-area-id^="col-"] > div:first-child,
    .row:has(.opc-Button) > .col[data-area-id^="col-"] > div:first-child picture,
    .row:has(.opc-Button) > .col[data-area-id^="col-"] > div:first-child picture img {
        border-radius: 10px !important;
    }

    .row:has(.opc-Button) > .col[data-area-id^="col-"] > div:nth-of-type(3) {
        min-height: auto !important;
    }

    .row:has(.zl-brand-text) {
        display: block !important;
        padding: 45px 20px !important;
    }

    .row:has(.zl-brand-text) > .col {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .row:has(.zl-brand-text) .zl-brand-text {
        max-width: none;
        padding: 0;
        margin-bottom: 35px;
    }

    .row:has(.zl-brand-text) .zl-brand-text h2 {
        font-size: 32px;
    }

    .row:has(.zl-brand-text) .zl-brand-text h3 {
        font-size: 19px;
    }

    .row:has(.zl-brand-text) .zl-brand-text p {
        font-size: 16px;
        line-height: 1.6;
    }

    .zl-course-stream {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .zl-course-stream .product-wrapper {
        margin-bottom: 20px !important;
    }

    .zl-course-stream .productbox {
        border-radius: 7px;
    }

    .zl-course-stream .productbox-title,
    .zl-course-stream .productbox-title a,
    .zl-course-stream .product-title,
    .zl-course-stream .product-title a {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .zl-course-stream .price,
    .zl-course-stream .productbox-price {
        font-size: 17px !important;
    }
}


@media (max-width: 575.98px) {

    .zl-course-info {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}


/* =========================================================
   11. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #jtl-nav-wrapper,
    .zl-hero-desktop *,
    .zl-hero-mobile *,
    .zl-course-stream *,
    .row:has(.zl-brand-text) *,
    .row:has(.opc-Button) * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   12. WICHTIGER FIX – OPC-CONTENT NACH HERO
   ========================================================= */

/*
   Der Mobile-Hero wird auf Desktop durch die OPC-
   Gerätesichtbarkeit ausgeblendet.

   Der nachfolgende OPC-Container darf dadurch NICHT
   ebenfalls ausgeblendet werden.

   Die früher verwendeten Regeln

   .zl-hero-desktop + .zl-hero-mobile + .opc-Container
   #main-wrapper > .zl-hero-desktop + .zl-hero-mobile + .opc-Container

   sowie die Regel mit height: 0 / overflow: hidden
   werden deshalb bewusst NICHT verwendet.
*/

@media (min-width: 992px) {

    .zl-hero-desktop + .zl-hero-mobile + .opc-Container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #main-wrapper > .zl-hero-desktop + .zl-hero-mobile + .opc-Container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}

@media (max-width: 991.98px) {

    .zl-hero-mobile + .opc-Container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* =========================================================
   13. ZOE & LOUIS – FINAL NAVIGATION + HERO-FOLGEBEREICH
   ========================================================= */

/*
   Navigation:
   Die gelbe Standard-Markierung des NOVA-Themes wird entfernt.
   Stattdessen erscheint eine sehr feine Terrakotta-Linie,
   die sich beim Hover von der Mitte nach außen öffnet.
*/

#jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item,
#jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item > a.nav-link {
    position: relative !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
}

/* Alte farbige Unterstreichung des Themes neutralisieren */
#jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item::before,
#jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item::after,
#jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item > a.nav-link::before {
    content: none !important;
    display: none !important;
}

/* Die Hover-Linie wird weiter unten ausschließlich als Background animiert. */

/*
   HERO -> erster OPC-Bereich:
   Kein künstlicher 300px-Mindestabstand mehr.
   Stattdessen ein kontrollierter, eleganter Abstand von 20px.
   Die Sichtbarkeit des Containers wird NICHT verändert.
*/

/* =========================================================
   ZOE & LOUIS – HERO → ERSTER INHALTSBEREICH
   FINALER ABSTAND
   ========================================================= */

@media (min-width: 992px) {

    #main-wrapper > .zl-hero-desktop + .zl-hero-mobile + .opc-Container {
        min-height: 0 !important;
        height: auto !important;

        /* kein zusätzlicher Außenabstand */
        margin-top: 0 !important;

        /* kleiner, kontrollierter Abstand */
        padding-top: 10px !important;
    }

    /* Nur der erste Inhaltsbereich direkt nach dem Hero */
    #main-wrapper > .zl-hero-desktop
    + .zl-hero-mobile
    + .opc-Container
    > .row:first-child {
        padding-top: 25px !important;
    }
}


@media (max-width: 991.98px) {

    #main-wrapper > .zl-hero-desktop + .zl-hero-mobile + .opc-Container {
        min-height: 0 !important;
        height: auto !important;

        margin-top: 0 !important;
        padding-top: 5px !important;
    }

    /* Mobile etwas mehr Luft */
    #main-wrapper > .zl-hero-desktop
    + .zl-hero-mobile
    + .opc-Container
    > .row:first-child {
        padding-top: 25px !important;
    }
}

/* Mobile: keine Hover-Unterstreichung */
@media (max-width: 767px) {
    #jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item > a.nav-link::after {
        display: none !important;
    }
}

/* Bewegungen bei reduzierter Bewegung deaktivieren */
@media (prefers-reduced-motion: reduce) {
    #jtl-nav-wrapper #mainNavigation ul.navbar-nav > li.nav-scrollbar-item > a.nav-link::after {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – HERO / HEADER
   FEINERE GRADIENT-ABSTUFUNG
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP
   --------------------------------------------------------- */

@media (min-width: 992px) {

    header::before,
    #header::before,
    .header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        height: 250px !important;

        background:
            linear-gradient(
                to bottom,

                /* ganz oben – ruhig für Logo */
                rgba(255, 252, 247, 0.92) 0%,

                /* Navigation */
                rgba(255, 252, 247, 0.78) 18%,

                /* weicher Übergang */
                rgba(255, 252, 247, 0.52) 38%,

                /* Bild kommt stärker durch */
                rgba(255, 252, 247, 0.25) 58%,

                /* nahezu unsichtbar */
                rgba(255, 252, 247, 0.08) 78%,

                /* vollständig ins Bild */
                rgba(255, 252, 247, 0) 100%
            ) !important;

        pointer-events: none;
        z-index: -1;
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    header::before,
    #header::before,
    .header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        /* deutlich längere Ruhezone */
        height: 270px !important;

        background:
            linear-gradient(
                to bottom,

                /* Logo / Menü / Icons */
                rgba(255, 252, 247, 0.96) 0%,

                /* Suchfeld */
                rgba(255, 252, 247, 0.90) 15%,

                /* untere Navigation */
                rgba(255, 252, 247, 0.72) 30%,

                /* Beginn des Bildes */
                rgba(255, 252, 247, 0.46) 47%,

                /* Bild wieder stärker sichtbar */
                rgba(255, 252, 247, 0.22) 65%,

                /* weicher Auslauf */
                rgba(255, 252, 247, 0.07) 84%,

                /* komplett transparent */
                rgba(255, 252, 247, 0) 100%
            ) !important;

        pointer-events: none;
        z-index: -1;
    }
}

/* =========================================================
   MOBILE HERO – FINALER TEST 570 PX
   ========================================================= */

@media (max-width: 767.98px) {

    .zl-hero-mobile {
        height: 570px !important;
        min-height: 570px !important;
        max-height: none !important;
    }

    .zl-hero-mobile .nivoSlider {
        height: 570px !important;
        min-height: 570px !important;
        max-height: none !important;
    }

    .zl-hero-mobile .nivo-main-image {
        height: 570px !important;
        min-height: 570px !important;
        max-height: none !important;
    }
}


/* Sehr kleine Geräte weiterhin etwas kompakter */

@media (max-width: 575.98px) {

    .zl-hero-mobile {
        height: 550px !important;
        min-height: 550px !important;
    }

    .zl-hero-mobile .nivoSlider,
    .zl-hero-mobile .nivo-main-image {
        height: 550px !important;
        min-height: 550px !important;
    }
}


/* =========================================================
   ZOE & LOUIS – LOGO HEADER
   ========================================================= */

@media (min-width: 992px) {

    #jtl-nav-wrapper #shop-logo {
        display: block !important;
        width: 250px !important;
        max-width: 250px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        margin-left: 0 !important;
    }

    #jtl-nav-wrapper #shop-logo img {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        object-fit: contain !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    #jtl-nav-wrapper #shop-logo {
        display: block !important;
        width: 220px !important;
        max-width: 220px !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #jtl-nav-wrapper #shop-logo img {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        object-fit: contain !important;
    }
}


/* =========================================================
   ZOE & LOUIS – DESKTOP NAV HOVER
   Linie wächst aus der Mitte nach außen
   ========================================================= */

@media (min-width: 992px) {

    #jtl-nav-wrapper #mainNavigation
    ul.navbar-nav > li.nav-scrollbar-item > a.nav-link {

        position: relative !important;

        color: var(--zl-dark) !important;
        font-size: 20px !important;

        border: 0 !important;
        border-bottom: 0 !important;
        text-decoration: none !important;

        /* Hover-Linie als Hintergrund */
        background-image: linear-gradient(
            to right,
            #C77752,
            #C77752
        ) !important;

        background-repeat: no-repeat !important;
        background-position: center calc(100% - 8px) !important;
        background-size: 0% 1px !important;

        transition:
            color 0.3s ease,
            background-size 0.35s ease !important;
    }

    /* Hover */
    #jtl-nav-wrapper #mainNavigation
    ul.navbar-nav > li.nav-scrollbar-item > a.nav-link:hover {

        color: #C77752 !important;

        background-size: 100% 1px !important;
    }

    /* Tastaturbedienung */
    #jtl-nav-wrapper #mainNavigation
    ul.navbar-nav > li.nav-scrollbar-item > a.nav-link:focus-visible {

        color: #C77752 !important;

        background-size: 100% 1px !important;
    }
}

/* =========================================================
   ZOE & LOUIS
   SLIDER-NAVIGATION – DESKTOP
   Variante 4: Randpfeile + Punkte
   ========================================================= */

@media (min-width: 992px) {

    /* =====================================================
       1. PAUSENSYMBOL
       Bleibt weiterhin ausgeblendet
       ===================================================== */

    .zl-hero-desktop .nivo-controlNav .btn-pause,
    .zl-hero-desktop .nivo-controlNav .nivo-pause,
    .zl-hero-desktop .nivo-pause {
        display: none !important;
    }


/* =========================================================
   ZOE & LOUIS – SLIDER PUNKTE
   Variante 4
   ========================================================= */

@media (min-width: 992px) {

    /* Container der Punkte */
    .zl-hero-desktop .nivo-controlNav {
        display: block !important;

        position: absolute !important;

        left: 50% !important;
        bottom: 18px !important;

        transform: translateX(-50%) !important;

        width: auto !important;
        height: auto !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        z-index: 50 !important;

        line-height: 1 !important;
    }


    /* einzelne Punkte */
    .zl-hero-desktop .nivo-controlNav a {
        display: inline-block !important;

        width: 8px !important;
        height: 8px !important;

        margin: 0 5px !important;
        padding: 0 !important;

        border-radius: 50% !important;

        background: rgba(255,255,255,0.90) !important;

        border: 1px solid rgba(255,255,255,0.95) !important;

        box-shadow:
            0 1px 4px rgba(0,0,0,0.18) !important;

        opacity: 0.95 !important;

        text-indent: -9999px !important;

        vertical-align: middle !important;

        transition:
            background-color 0.25s ease,
            transform 0.25s ease,
            opacity 0.25s ease !important;
    }


    /* aktiver Punkt */
    .zl-hero-desktop .nivo-controlNav a.active {
        background: #C77752 !important;

        border-color: #C77752 !important;

        opacity: 1 !important;

        transform: scale(1.2) !important;
    }


    /* Hover */
    .zl-hero-desktop .nivo-controlNav a:hover {
        background: #C77752 !important;

        border-color: #C77752 !important;

        opacity: 1 !important;

        transform: scale(1.15) !important;
    }
}


    /* =====================================================
       3. RICHTUNGSPFEILE
       Kleine runde Buttons am linken/rechten Bildrand
       ===================================================== */

    .zl-hero-desktop .nivo-directionNav {
        display: block !important;

        z-index: 50 !important;
    }


    /* beide Pfeile */

    .zl-hero-desktop .nivo-directionNav a {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        position: absolute !important;

        top: 50% !important;

        width: 36px !important;
        height: 36px !important;

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

        border: 0 !important;
        border-radius: 50% !important;

        background: rgba(255,255,255,0.88) !important;

        color: #C77752 !important;

        font-size: 0 !important;
        line-height: 1 !important;

        text-decoration: none !important;

        opacity: 0.78 !important;

        box-shadow:
            0 2px 8px rgba(0,0,0,0.10) !important;

        transform: translateY(-50%) !important;

        z-index: 51 !important;

        transition:
            opacity 0.25s ease,
            background-color 0.25s ease,
            transform 0.25s ease !important;
    }


    /* =====================================================
       4. LINKER PFEIL
       ===================================================== */

    .zl-hero-desktop .nivo-directionNav a.nivo-prevNav {
        left: 18px !important;
        right: auto !important;
    }


    .zl-hero-desktop .nivo-directionNav a.nivo-prevNav::before {
        content: "‹" !important;

        display: block !important;

        color: #C77752 !important;

        font-family: Arial, sans-serif !important;

        font-size: 25px !important;
        font-weight: 300 !important;

        line-height: 32px !important;
    }


    /* =====================================================
       5. RECHTER PFEIL
       ===================================================== */

    .zl-hero-desktop .nivo-directionNav a.nivo-nextNav {
        right: 18px !important;
        left: auto !important;
    }


    .zl-hero-desktop .nivo-directionNav a.nivo-nextNav::before {
        content: "›" !important;

        display: block !important;

        color: #C77752 !important;

        font-family: Arial, sans-serif !important;

        font-size: 25px !important;
        font-weight: 300 !important;

        line-height: 32px !important;
    }


    /* =====================================================
       6. PFEIL-HOVER
       ===================================================== */

    .zl-hero-desktop .nivo-directionNav a:hover {
        opacity: 1 !important;

        background: rgba(255,255,255,0.97) !important;

        transform:
            translateY(-50%)
            scale(1.06) !important;
    }


    /* =====================================================
       7. ALTE NOVA-PSEUDO-EFFEKTE
       Nur innerhalb der Slider-Navigation entfernen
       ===================================================== */

    .zl-hero-desktop .nivo-directionNav a::after {
        display: none !important;
    }

}


/* =========================================================
   MOBILE
   Slider-Navigation vorerst unverändert / ausgeblendet
   ========================================================= */

@media (max-width: 991.98px) {

    .zl-hero-mobile .nivo-directionNav,
    .zl-hero-mobile .nivo-controlNav {
        display: none !important;
    }

}

/* =========================================================
   ZOE & LOUIS – MOBILE SLIDER PUNKTE
   ========================================================= */

@media (max-width: 991.98px) {

    /* Punkte wieder anzeigen */
    .zl-hero-mobile .nivo-controlNav {
        display: block !important;

        position: absolute !important;

        left: 50% !important;
        bottom: 14px !important;

        transform: translateX(-50%) !important;

        width: auto !important;
        height: auto !important;

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

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        z-index: 50 !important;

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


    /* einzelne Punkte */
    .zl-hero-mobile .nivo-controlNav a {
        display: inline-block !important;

        width: 8px !important;
        height: 8px !important;

        margin: 0 5px !important;
        padding: 0 !important;

        border-radius: 50% !important;

        background: rgba(255,255,255,0.90) !important;

        border: 1px solid rgba(255,255,255,0.95) !important;

        box-shadow:
            0 1px 4px rgba(0,0,0,0.18) !important;

        opacity: 0.95 !important;

        text-indent: -9999px !important;

        vertical-align: middle !important;

        transition:
            background-color 0.25s ease,
            transform 0.25s ease !important;
    }


    /* aktiver Punkt */
    .zl-hero-mobile .nivo-controlNav a.active {
        background: #C77752 !important;

        border-color: #C77752 !important;

        transform: scale(1.2) !important;
    }


    /* Hover / Touch */
    .zl-hero-mobile .nivo-controlNav a:hover {
        background: #C77752 !important;

        border-color: #C77752 !important;
    }


    /* Mobile Pfeile weiterhin ausblenden */
    .zl-hero-mobile .nivo-directionNav {
        display: none !important;
    }

}

/* =========================================================
   ZOE & LOUIS – FRANK
   EINHEITLICHE HANDSCHRIFT – FRANK
   ========================================================= */

/* Allgemeine ZL-Handschrift */
.zl-handwriting,
.zl-slogan,
.zl-creative-slogan,
[class*="zl-"][class*="hand"],
[class*="zl-"][class*="slogan"] {
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}


/* Hero – Desktop */
.zl-hero-desktop .nivo-caption .title,
.zl-hero-desktop .nivo-caption strong.title {
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* Hero – Mobile */
.zl-hero-mobile .nivo-caption .title,
.zl-hero-mobile .nivo-caption strong.title {
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* OPC / Rich Text */
.opc-Container .zl-handwriting,
.opc-Container .zl-slogan,
.opc-Container .zl-creative-slogan {
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}


/* Testklasse */
.zl-test-handwriting {
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 42px !important;
}

/* =========================================================
   ZOE & LOUIS – VARIANTE B
   Handschriftliche Botschaft zwischen Hero und Kursbereich
   ========================================================= */

.zl-hero-message {
    width: 100%;
    text-align: center;
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: #C77752 !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;

    margin: 0 !important;
    padding: 18px 20px 8px !important;
}

/* Abstand danach bis zur Überschrift */
.zl-hero-message + * {
    margin-top: 0 !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .zl-hero-message {
        font-size: 27px !important;
        padding: 14px 15px 6px !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KURSKARTEN
   Titel + Innenabstand
   ========================================================= */

/* Kartentitel */
.productbox .productbox-title,
.productbox .productbox-title a {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #2F2F2F !important;
}

/* Inhalt innerhalb der Karte */
.productbox .productbox-title,
.productbox .productbox-information,
.productbox .productbox-info,
.productbox .productbox-price {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* etwas Luft zwischen Bild und Titel */
.productbox .productbox-title {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
}

/* Preis ebenfalls sauber vom Rahmen abrücken */
.productbox .productbox-price {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
}

/* =========================================================
   ZOE & LOUIS – KURSKARTEN
   Einheitlicher Innenabstand
   ========================================================= */

/* Titel */
.productbox .productbox-title,
.productbox .productbox-title a {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    color: #2F2F2F !important;
}

.productbox .productbox-title {
    padding: 12px 15px 10px !important;
}

/* Informationsbereich inkl. Icons */
.productbox .productbox-information,
.productbox .productbox-info {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Preis */
.productbox .productbox-price {
    padding: 12px 15px 14px !important;
}

.zl-course-info-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* =========================================================
   ZOE & LOUIS – KURSKARTEN MOBILE
   Mehr Platz für lange Kurstitel
   ========================================================= */

@media (max-width: 767.98px) {

    .productbox .productbox-title {
        padding: 14px 15px 12px !important;
        min-height: 112px !important;
    }

    .productbox .productbox-title a.text-clamp-2 {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
        overflow: hidden !important;

        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        color: #2F2F2F !important;
    }
}

/* =========================================================
   ZOE & LOUIS – KURSKARTEN MOBILE
   4 Zeilen für Kurstitel
   ========================================================= */

@media (max-width: 767.98px) {

    .productbox .productbox-title {
        padding: 14px 15px 12px !important;
        min-height: 128px !important;
    }

    .productbox .productbox-title a.text-clamp-2 {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;
        overflow: hidden !important;

        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        color: #2F2F2F !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* =========================================================
   ZOE & LOUIS – MOBILE KURSTITEL
   Lange Wörter sauber umbrechen
   ========================================================= */

@media (max-width: 767.98px) {

    .productbox .productbox-title {
        padding: 14px 15px 12px !important;
        min-height: 128px !important;
    }

    .productbox .productbox-title a.text-clamp-2 {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;

        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;

        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        color: #2F2F2F !important;
    }
}

@media (max-width: 767.98px) {

    .productbox .productbox-title {
        padding: 14px 15px 12px !important;
        min-height: 128px !important;
    }

    .productbox .productbox-title a.text-clamp-2 {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 4 !important;

        overflow: hidden !important;

        /* Deutsche Silbentrennung */
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;

        font-size: 18px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        color: #2F2F2F !important;
    }
}

/* =========================================================
   ZOE & LOUIS – FOOTER / PHASE 1
   Grundgestaltung + Salbeigrün
   ========================================================= */

:root {
    --zl-footer-bg: #EEF2EC;
    --zl-footer-green: #8FA588;
    --zl-footer-text: #2F2F2F;
    --zl-footer-muted: #596157;
    --zl-footer-accent: #C77752;
    --zl-footer-border: rgba(143,165,136,.35);
}


/* ---------------------------------------------------------
   FOOTER – Grundfläche
   --------------------------------------------------------- */

footer,
#footer {
    background: var(--zl-footer-bg) !important;
    color: var(--zl-footer-text) !important;
}


/* JTL Footer-Innenbereich */
footer .container,
#footer .container {
    background: transparent !important;
}


/* ---------------------------------------------------------
   Footer Linkgruppen
   --------------------------------------------------------- */

footer .footer-links,
footer .footer-content,
#footer .footer-links,
#footer .footer-content {
    background: transparent !important;
}


/* Überschriften der Linkgruppen */
footer h3,
footer h4,
footer .nav-head,
footer .footer-title,
#footer h3,
#footer h4,
#footer .nav-head,
#footer .footer-title {
    color: var(--zl-footer-text) !important;
    font-weight: 600 !important;
    letter-spacing: .04em;
}


/* Kleine Terracotta-Linie unter den Überschriften */
footer h3::after,
footer h4::after,
footer .nav-head::after,
footer .footer-title::after,
#footer h3::after,
#footer h4::after,
#footer .nav-head::after,
#footer .footer-title::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    margin-top: 10px;
    background: var(--zl-footer-accent);
}


/* ---------------------------------------------------------
   Footer Links
   --------------------------------------------------------- */

footer a,
#footer a {
    color: var(--zl-footer-text) !important;
    text-decoration: none;
    transition:
        color .2s ease,
        opacity .2s ease;
}


footer a:hover,
#footer a:hover {
    color: var(--zl-footer-accent) !important;
}


/* ---------------------------------------------------------
   Footer Abstände
   --------------------------------------------------------- */

footer,
#footer {
    padding-top: 55px !important;
}


footer .row,
#footer .row {
    row-gap: 35px;
}


/* Link-Abstände */
footer ul,
#footer ul {
    margin-bottom: 0;
}


footer li,
#footer li {
    margin-bottom: 11px;
}


/* ---------------------------------------------------------
   Widerrufsbereich
   --------------------------------------------------------- */

footer .form-group,
#footer .form-group {
    margin-bottom: 0;
}


/* Bestehenden JTL-Widerrufsbutton optisch anpassen */
footer button,
footer .btn,
#footer button,
#footer .btn {
    border-radius: 2px;
}


/* ---------------------------------------------------------
   Preis-Hinweis
   --------------------------------------------------------- */

footer .price-note,
footer .footnote,
#footer .price-note,
#footer .footnote {
    color: var(--zl-footer-muted) !important;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    footer,
    #footer {
        padding-top: 40px !important;
    }

    footer .row,
    #footer .row {
        row-gap: 28px;
    }

    footer h3,
    footer h4,
    footer .nav-head,
    footer .footer-title,
    #footer h3,
    #footer h4,
    #footer .nav-head,
    #footer .footer-title {
        margin-bottom: 16px !important;
    }

    footer li,
    #footer li {
        margin-bottom: 9px;
    }
}


/* =========================================================
   ZOE & LOUIS – FOOTER PHASE 2
   4-Spalten-Layout
   ========================================================= */

#footer .zl-footer-main {
    width: 100%;
}

#footer .zl-footer-grid {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.15fr)
        minmax(180px, .9fr)
        minmax(210px, 1fr)
        minmax(260px, 1.25fr);
    gap: 55px;
    align-items: start;
    padding: 10px 0 45px;
}


/* =========================================================
   MARKE
   ========================================================= */

#footer .zl-footer-brand {
    min-width: 0;
}

#footer .zl-footer-logo {
    display: block;
    width: 100%;
    max-width: 255px;
    margin-bottom: 12px;
}

#footer .zl-footer-logo img {
    display: block;
    width: 100%;
    max-width: 255px;
    height: auto;
    max-height: 105px;
    object-fit: contain;
    object-position: left center;
}

#footer .zl-footer-brand-tagline {
    margin: 4px 0 22px;
    color: var(--zl-footer-accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

#footer .zl-footer-brand-text {
    max-width: 300px;
    margin: 0;
    color: var(--zl-footer-text);
    font-size: 16px;
    line-height: 1.65;
}

#footer .zl-footer-brand-signature {
    margin-top: 24px;
    color: var(--zl-footer-green);
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-size: 27px;
    line-height: 1.2;
}


/* =========================================================
   JTL FOOTER-BOXEN
   ========================================================= */

#footer .zl-footer-box {
    min-width: 0;
}

/*
 * JTL erzeugt innerhalb der Boxen eigene Überschriften.
 * Diese übernehmen wir optisch in unseren Footer.
 */

#footer .zl-footer-box .box-standard-head,
#footer .zl-footer-box .box-title,
#footer .zl-footer-box h2,
#footer .zl-footer-box h3,
#footer .zl-footer-box h4 {
    margin-top: 0;
    margin-bottom: 24px;
    color: var(--zl-footer-text) !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* Terracotta-Linie unter der Überschrift */

#footer .zl-footer-box .box-standard-head::after,
#footer .zl-footer-box .box-title::after,
#footer .zl-footer-box h2::after,
#footer .zl-footer-box h3::after,
#footer .zl-footer-box h4::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    margin-top: 10px;
    background: var(--zl-footer-accent);
}


/* Links */

#footer .zl-footer-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer .zl-footer-box li {
    margin: 0 0 13px;
    padding: 0;
}

#footer .zl-footer-box li:last-child {
    margin-bottom: 0;
}

#footer .zl-footer-box a {
    color: var(--zl-footer-text) !important;
    font-size: 16px;
    line-height: 1.45;
    text-decoration: none;
}

#footer .zl-footer-box a:hover {
    color: var(--zl-footer-accent) !important;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

#footer .zl-footer-newsletter {
    min-width: 0;
}

#footer .zl-footer-section-title {
    margin: 0 0 24px;
    color: var(--zl-footer-text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#footer .zl-footer-section-title::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    margin-top: 10px;
    background: var(--zl-footer-accent);
}

#footer .zl-footer-newsletter-text {
    max-width: 360px;
    margin: 0 0 22px;
    color: var(--zl-footer-text);
    font-size: 16px;
    line-height: 1.6;
}


/* Newsletter Eingabefeld */

#footer .zl-footer-newsletter-form {
    margin: 0;
}

#footer .zl-footer-newsletter-form .input-group {
    display: flex;
    width: 100%;
}

#footer .zl-footer-newsletter-form input[type="email"] {
    min-width: 0;
    height: 52px;
    border: 0;
    border-radius: 4px 0 0 4px;
    background: #fff;
    box-shadow: none;
    padding: 0 16px;
    color: var(--zl-footer-text);
}

#footer .zl-footer-newsletter-button {
    height: 52px;
    border: 0 !important;
    border-radius: 0 4px 4px 0 !important;
    background: var(--zl-footer-accent) !important;
    color: #fff !important;
    padding: 0 22px;
    font-weight: 600;
}

#footer .zl-footer-newsletter-button:hover {
    background: var(--zl-primary-hover) !important;
}


/* Datenschutz-/Einwilligungstext */

#footer .zl-footer-newsletter-consent {
    max-width: 360px;
    margin: 14px 0 0;
    color: var(--zl-footer-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   TRENNLINIE
   ========================================================= */

#footer .zl-footer-divider {
    width: 100%;
    height: 1px;
    margin: 0 0 30px;
    background: var(--zl-footer-border);
}


/* =========================================================
   WIDERRUF
   ========================================================= */

#footer .withdrawal-link-wrapper {
    margin: 0 0 35px;
}

#footer .withdrawal-link-wrapper > [class*="col"] {
    max-width: 100%;
    flex: 0 0 100%;
}


/* =========================================================
   SOCIAL MEDIA
   ========================================================= */

#footer .footer-social-media {
    margin-top: 25px;
}

#footer .footer-social-media ul {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

#footer .footer-social-media .btn {
    border: 0 !important;
    background: transparent !important;
    color: var(--zl-footer-green) !important;
}

#footer .footer-social-media .btn:hover {
    color: var(--zl-footer-accent) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    #footer .zl-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 35px;
    }

    #footer .zl-footer-brand {
        grid-column: 1 / -1;
    }

    #footer .zl-footer-brand-text {
        max-width: 500px;
    }

    #footer .zl-footer-newsletter {
        grid-column: 1 / -1;
        max-width: 600px;
    }
}


@media (max-width: 575.98px) {

    #footer .zl-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 35px;
    }

    #footer .zl-footer-brand,
    #footer .zl-footer-newsletter {
        grid-column: auto;
    }

    #footer .zl-footer-logo,
    #footer .zl-footer-logo img {
        max-width: 220px;
        max-height: 90px;
    }

    #footer .zl-footer-brand-text,
    #footer .zl-footer-newsletter-text {
        max-width: none;
    }

    #footer .zl-footer-newsletter-form .input-group {
        width: 100%;
    }

    #footer .zl-footer-newsletter-button {
        padding-left: 16px;
        padding-right: 16px;
    }

    #footer .footer-social-media ul {
        justify-content: flex-start;
    }
}


/* =========================================================
   ZOE & LOUIS – WIDERRUF
   ========================================================= */

#footer .withdrawal-link-wrapper {
    margin: 0 0 42px !important;
    padding: 0 !important;
}

#footer .withdrawal-link-wrapper > .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* JTL-Widerrufsbereich */
#footer .withdrawal-link-wrapper .withdrawal-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    width: 100%;
    min-height: 108px;

    padding: 25px 32px;

    background: rgba(255,255,255,.58);
    border: 1px solid rgba(143,165,136,.20);
    border-radius: 8px;

    box-sizing: border-box;
}

/* Button */
#footer .withdrawal-link-wrapper .btn,
#footer .withdrawal-link-wrapper button,
#footer .withdrawal-link-wrapper a {
    background: var(--zl-footer-accent) !important;
    border-color: var(--zl-footer-accent) !important;
    color: #fff !important;
    border-radius: 5px !important;
    min-height: 52px;
    padding: 0 30px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

#footer .withdrawal-link-wrapper .btn:hover,
#footer .withdrawal-link-wrapper button:hover,
#footer .withdrawal-link-wrapper a:hover {
    background: var(--zl-primary-hover) !important;
    border-color: var(--zl-primary-hover) !important;
    transform: translateY(-1px);
}


/* Mobile */
@media (max-width: 767.98px) {

    #footer .withdrawal-link-wrapper .withdrawal-link {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 22px;
    }

    #footer .withdrawal-link-wrapper .btn,
    #footer .withdrawal-link-wrapper button,
    #footer .withdrawal-link-wrapper a {
        width: 100%;
        justify-content: center;
    }
}



/* =========================================================
   ZOE & LOUIS – FOOTER TRUST / PAYMENT / SOCIAL
   ========================================================= */

#footer .zl-footer-trust {
    width: 100%;
}

#footer .zl-footer-trust-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 0;
    padding: 8px 0 30px;
}

#footer .zl-footer-trust-item {
    min-height: 105px;
    padding: 0 45px;
    border-left: 1px solid var(--zl-footer-border);
}

#footer .zl-footer-trust-item:first-child {
    padding-left: 0;
    border-left: 0;
}

#footer .zl-footer-trust-title {
    margin-bottom: 18px;
    color: var(--zl-footer-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

#footer .zl-footer-trust-title::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    margin-top: 9px;
    background: var(--zl-footer-accent);
}


/* ---------------------------------------------------------
   Zahlungsarten
   --------------------------------------------------------- */

#footer .zl-footer-payment-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#footer .zl-payment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;
    height: 34px;
    padding: 0 12px;

    border: 1px solid rgba(47,47,47,.12);
    border-radius: 5px;

    background: rgba(255,255,255,.72);
    color: var(--zl-footer-text);

    font-size: 13px;
    font-weight: 600;
}

#footer .zl-payment-paypal {
    color: #173f78;
}


/* ---------------------------------------------------------
   Versand
   --------------------------------------------------------- */

#footer .zl-footer-shipping {
    display: flex;
    align-items: center;
    gap: 18px;
}

#footer .zl-footer-shipping strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 88px;
    height: 38px;
    padding: 0 13px;

    border-radius: 5px;
    background: #fff;
    color: #d40511;

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

#footer .zl-footer-shipping span {
    max-width: 170px;
    color: var(--zl-footer-muted);
    font-size: 14px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   Social Media
   --------------------------------------------------------- */

#footer .zl-footer-social-list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

#footer .zl-footer-social-list li {
    margin: 0 !important;
    padding: 0;
}

#footer .zl-social-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(143,165,136,.55);
    border-radius: 50%;

    background: rgba(255,255,255,.45);
    color: var(--zl-footer-green) !important;

    font-size: 18px;
    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

#footer .zl-social-link:hover {
    background: var(--zl-footer-green);
    border-color: var(--zl-footer-green);
    color: #fff !important;
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Trennlinie vor Widerruf
   --------------------------------------------------------- */

#footer .zl-footer-divider-trust {
    margin-bottom: 30px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    #footer .zl-footer-trust-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #footer .zl-footer-trust-item,
    #footer .zl-footer-trust-item:first-child {
        min-height: auto;
        padding: 0 0 28px;
        border-left: 0;
        border-bottom: 1px solid var(--zl-footer-border);
    }

    #footer .zl-footer-trust-item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
}


@media (max-width: 575.98px) {

    #footer .zl-footer-payment-list {
        gap: 6px;
    }

    #footer .zl-payment-badge {
        min-width: 65px;
        height: 32px;
        font-size: 12px;
    }

    #footer .zl-footer-shipping {
        align-items: flex-start;
    }

    #footer .zl-social-link {
        width: 40px;
        height: 40px;
    }
}

/* =========================================================
   ZOE & LOUIS – WIDERRUFSBOX
   ========================================================= */

#footer .zl-footer-withdrawal {
    width: 100%;
    margin: 0 0 42px;
}

#footer .zl-footer-withdrawal-content {
    display: flex;
    align-items: center;
    gap: 25px;

    min-height: 108px;
    padding: 24px 32px;

    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(143, 165, 136, .20);
    border-radius: 8px;

    box-sizing: border-box;
}


/* kleines Blatt-/Natur-Symbol */

#footer .zl-footer-withdrawal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 64px;
    width: 64px;
    height: 64px;

    border-radius: 50%;
    background: rgba(143, 165, 136, .16);

    color: var(--zl-footer-green);
    font-size: 30px;
}

#footer .zl-footer-withdrawal-icon span {
    transform: rotate(-35deg);
}


/* Text */

#footer .zl-footer-withdrawal-text {
    display: flex;
    flex-direction: column;
    gap: 5px;

    flex: 1;
}

#footer .zl-footer-withdrawal-text strong {
    color: var(--zl-footer-text);
    font-size: 17px;
    font-weight: 600;
}

#footer .zl-footer-withdrawal-text span {
    color: var(--zl-footer-muted);
    font-size: 15px;
    line-height: 1.5;
}


/* JTL-Widerrufsbutton */

#footer .zl-footer-withdrawal-action {
    flex: 0 0 auto;
}

#footer .zl-footer-withdrawal-action .btn,
#footer .zl-footer-withdrawal-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 245px;
    min-height: 52px;
    padding: 0 28px;

    border: 0 !important;
    border-radius: 5px !important;

    background: var(--zl-footer-accent) !important;
    color: #fff !important;

    font-size: 16px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

#footer .zl-footer-withdrawal-action .btn:hover,
#footer .zl-footer-withdrawal-action a:hover {
    background: var(--zl-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    #footer .zl-footer-withdrawal {
        margin-bottom: 32px;
    }

    #footer .zl-footer-withdrawal-content {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;

        padding: 22px;
    }

    #footer .zl-footer-withdrawal-icon {
        align-self: flex-start;
    }

    #footer .zl-footer-withdrawal-text strong {
        font-size: 16px;
    }

    #footer .zl-footer-withdrawal-action .btn,
    #footer .zl-footer-withdrawal-action a {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   ZOE & LOUIS – JTL FOOTER-ÜBERSCHRIFTEN
   Terracotta-Linie auch bei Informationen / Gesetzliches
   ========================================================= */

/* JTL Footerboxen */
#footer .zl-footer-box {
    position: relative;
}

/* Überschriften der beiden dynamischen JTL-Boxen */
#footer .zl-footer-box > .box-header,
#footer .zl-footer-box > .box-title,
#footer .zl-footer-box > .box-standard-head,
#footer .zl-footer-box > h2,
#footer .zl-footer-box > h3,
#footer .zl-footer-box > h4 {
    position: relative;
}

/* Terracotta-Linie */
#footer .zl-footer-box > .box-header::after,
#footer .zl-footer-box > .box-title::after,
#footer .zl-footer-box > .box-standard-head::after,
#footer .zl-footer-box > h2::after,
#footer .zl-footer-box > h3::after,
#footer .zl-footer-box > h4::after {
    content: "";
    display: block;
    width: 38px;
    height: 1px;
    margin-top: 10px;
    background: var(--zl-footer-accent);
}


/* =========================================================
   ZOE & LOUIS – FOOTER V5
   Blatt-/Herz-Icon + Copyright-Bereich
   ========================================================= */

/* --- Widerruf: echtes kleines Zoe-&-Louis-Blatt-Icon --- */
#footer .zl-footer-withdrawal-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(143,165,136,.12);
}

#footer .zl-footer-withdrawal-icon svg {
    width: 35px;
    height: 35px;
    display: block;
    overflow: visible;
}

#footer .zl-footer-withdrawal-icon .zl-leaf-left,
#footer .zl-footer-withdrawal-icon .zl-leaf-right {
    fill: none;
    stroke: #8FA588;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#footer .zl-footer-withdrawal-icon .zl-leaf-left {
    transform-origin: 32px 52px;
    transform: rotate(-4deg);
}

#footer .zl-footer-withdrawal-icon .zl-leaf-right {
    transform-origin: 32px 52px;
    transform: rotate(4deg);
}

#footer .zl-footer-withdrawal-icon .zl-leaf-stem {
    fill: none;
    stroke: #C77752;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* --- Copyright-Bereich --- */
#footer #copyright {
    margin-top: 0;
    background: #DDE5D9;
    border-top: 1px solid rgba(143,165,136,.28);
    color: #4A5148;
    font-size: 13px;
}

#footer #copyright > .container,
#footer #copyright > .container-fluid {
    padding-top: 13px;
    padding-bottom: 13px;
}

#footer #copyright .row {
    align-items: center;
    row-gap: 6px;
}

#footer #copyright .col,
#footer #copyright #system-credits {
    color: #4A5148;
}

#footer #copyright a {
    color: #4A5148 !important;
    text-decoration: none !important;
    transition: color .2s ease;
}

#footer #copyright a:hover,
#footer #copyright a:focus {
    color: #C77752 !important;
}

#footer #copyright .icon-mr-2 {
    margin-right: .35rem;
}

#footer #copyright #system-credits {
    text-align: right;
    opacity: .85;
}

/* Auf kleinen Geräten ruhig und sauber untereinander */
@media (max-width: 767.98px) {
    #footer .zl-footer-withdrawal-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    #footer .zl-footer-withdrawal-icon svg {
        width: 31px;
        height: 31px;
    }

    #footer #copyright {
        text-align: center;
    }

    #footer #copyright #system-credits {
        text-align: center;
        margin-top: 2px;
    }
}


/* =========================================================
   ZOE & LOUIS – Footer-Linkgruppen
   Terrakotta-Linie unter Informationen + Gesetzliche Informationen
   ========================================================= */

#footer .zl-footer-box .box-linkgroup .footer-headline,
#footer .zl-footer-box .box-linkgroup .footer-headline.d-md-flex {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    padding: 0 0 10px !important;
    margin: 0 0 18px !important;
}

#footer .zl-footer-box .box-linkgroup .footer-headline::after,
#footer .zl-footer-box .box-linkgroup .footer-headline.d-md-flex::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 47px !important;
    height: 1px !important;
    background: #C77752 !important;
}

/* Footer – Terrakotta-Linie unter den Linkgruppen-Überschriften */
#footer .zl-footer-box .box-linkgroup > .productlist-filter-headline.d-none.d-md-flex {
    padding-bottom: 10px !important;
    background-image: linear-gradient(#C77752, #C77752) !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: 47px 1px !important;
}


/* =========================================================
   ZOE & LOUIS – Footer-/Inhaltsseiten
   REFERENZ v3: ruhige Inhaltsseite + Icon-Struktur
   ========================================================= */

:root {
    --zl-page-sage: #EEF2EC;
    --zl-page-sage-soft: #F5F7F3;
    --zl-page-terracotta: #C77752;
    --zl-page-dark: #2F2F2F;
    --zl-page-text: #444;
    --zl-page-border: #D9DED7;
}

/* Nur Seiten mit unserem Master-Container */
body:has(.zl-content-page) #content {
    color: var(--zl-page-text);
}

body:has(.zl-content-page) #content h1 {
    position: relative;
    max-width: 1040px;
    margin: 46px auto 0 !important;
    padding: 0 0 18px !important;
    color: var(--zl-page-dark) !important;
    font-size: clamp(40px, 4vw, 54px) !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

body:has(.zl-content-page) #content h1::after {
    content: "";
    display: block;
    width: 58px;
    height: 1px;
    margin-top: 16px;
    background: var(--zl-page-terracotta);
}

/* =========================================================
   Hauptinhalt
   ========================================================= */

.zl-content-page {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 70px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--zl-page-text);
}

/* Einleitung als ruhiger, breiter Bereich – ohne Florales */
.zl-content-intro {
    margin: 0 0 48px;
    padding: 28px max(30px, calc((100% - 1040px) / 2));
    background: var(--zl-page-sage-soft);
    border-top: 1px solid rgba(143,165,136,.18);
    border-bottom: 1px solid rgba(143,165,136,.18);
}

.zl-content-intro p {
    max-width: 820px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
}

/* =========================================================
   Icon-Struktur
   ========================================================= */

.zl-content-section {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    column-gap: 30px;
    max-width: 1040px;
    margin: 0 auto 42px;
    padding: 0;
}

.zl-content-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--zl-page-sage-soft);
    color: #8FA588;
}

.zl-content-icon svg {
    width: 30px;
    height: 30px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zl-content-section-content {
    padding-top: 0;
}

.zl-content-section h2,
.zl-content-section h3 {
    position: relative;
    display: inline-block;
    margin: 0 0 22px;
    padding-bottom: 10px;
    color: var(--zl-page-dark);
    font-weight: 500;
    line-height: 1.25;
}

.zl-content-section h2 {
    font-size: 27px;
}

.zl-content-section h3 {
    font-size: 21px;
}

.zl-content-section h2::after,
.zl-content-section h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 47px;
    height: 1px;
    background: var(--zl-page-terracotta);
}

.zl-content-section p {
    margin: 0 0 18px;
}

.zl-content-section p:last-child {
    margin-bottom: 0;
}

.zl-content-section strong {
    color: var(--zl-page-dark);
    font-weight: 600;
}

.zl-content-page a {
    color: var(--zl-page-terracotta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.zl-content-page a:hover {
    color: #A95F40;
}

/* Dezente Trennlinie zwischen den Inhaltsblöcken */
.zl-content-section + .zl-content-section {
    padding-top: 34px;
    border-top: 1px solid var(--zl-page-border);
}

/* =========================================================
   Handschriftlicher Abschluss
   ========================================================= */

.zl-content-signature {
    max-width: 1040px;
    margin: 52px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--zl-page-border);
    color: #8FA588;
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 400;
}

.zl-content-page ul,
.zl-content-page ol {
    margin: 0 0 24px;
    padding-left: 1.4em;
}

.zl-content-page li {
    margin-bottom: 8px;
}

.zl-content-page hr {
    margin: 36px 0;
    border: 0;
    border-top: 1px solid var(--zl-page-border);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767.98px) {

    body:has(.zl-content-page) #content h1 {
        margin: 30px 20px 0 !important;
        padding-bottom: 14px !important;
        font-size: 36px !important;
    }

    .zl-content-page {
        padding-bottom: 46px;
        font-size: 16px;
        line-height: 1.65;
    }

    .zl-content-intro {
        margin-bottom: 34px;
        padding: 22px 20px;
    }

    .zl-content-intro p {
        font-size: 16px;
    }

    .zl-content-section {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 18px;
        margin: 0 20px 30px;
    }

    .zl-content-icon {
        width: 52px;
        height: 52px;
    }

    .zl-content-icon svg {
        width: 24px;
        height: 24px;
    }

    .zl-content-section h2 {
        font-size: 23px;
        margin-bottom: 18px;
    }

    .zl-content-section h3 {
        font-size: 19px;
    }

    .zl-content-section + .zl-content-section {
        padding-top: 28px;
    }

    .zl-content-signature {
        margin: 40px 20px 0;
        font-size: 24px;
    }

    .zl-content-location {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 18px;
        margin: 0 20px;
        padding-bottom: 28px;
    }

    .zl-content-location-icon {
        width: 52px;
        height: 52px;
    }

    .zl-content-location-icon svg {
        width: 24px;
        height: 24px;
    }

    .zl-content-location h2 {
        font-size: 23px;
        margin-bottom: 18px;
    }
}


/* Kurs-/Workshop-Adresse direkt unter dem Transparenz-Kasten */
.zl-content-location {
    display:flex;
    align-items:center;
    gap:22px;
    max-width:1040px;
    margin:-20px auto 48px;
    padding:18px 24px;
    background:#FFFDFC;
    border:1px solid rgba(199,119,82,.28);
    border-radius:4px;
}
.zl-content-location-icon {
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(199,119,82,.20);
    border-radius:50%;
    color:var(--zl-page-terracotta);
    background:#FFF;
}
.zl-content-location-icon svg {
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.zl-content-location-text {
    font-size:17px;
    line-height:1.55;
    color:var(--zl-page-text);
}
.zl-content-location-text strong {
    color:var(--zl-page-dark);
    font-weight:600;
}
@media (max-width:767.98px) {
    .zl-content-location {
        align-items:flex-start;
        gap:14px;
        margin:-10px 20px 34px;
        padding:16px 18px;
    }
    .zl-content-location-icon {
        flex-basis:46px;
        width:46px;
        height:46px;
    }
    .zl-content-location-icon svg {
        width:22px;
        height:22px;
    }
    .zl-content-location-text { font-size:15.5px; }
}


/* =========================================================
   ZOE & LOUIS – Footer-/Inhaltsseiten
   REFERENZ v3: ruhige Inhaltsseite + Icon-Struktur
   ========================================================= */

:root {
    --zl-page-sage: #EEF2EC;
    --zl-page-sage-soft: #F5F7F3;
    --zl-page-terracotta: #C77752;
    --zl-page-dark: #2F2F2F;
    --zl-page-text: #444;
    --zl-page-border: #D9DED7;
}

/* Nur Seiten mit unserem Master-Container */
body:has(.zl-content-page) #content {
    color: var(--zl-page-text);
}

body:has(.zl-content-page) #content h1 {
    position: relative;
    max-width: 1040px;
    margin: 46px auto 0 !important;
    padding: 0 0 18px !important;
    color: var(--zl-page-dark) !important;
    font-size: clamp(40px, 4vw, 54px) !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

body:has(.zl-content-page) #content h1::after {
    content: "";
    display: block;
    width: 58px;
    height: 1px;
    margin-top: 16px;
    background: var(--zl-page-terracotta);
}

/* =========================================================
   Hauptinhalt
   ========================================================= */

.zl-content-page {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 70px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--zl-page-text);
}

/* Einleitung als ruhiger, breiter Bereich – ohne Florales */
.zl-content-intro {
    margin: 0 0 48px;
    padding: 28px max(30px, calc((100% - 1040px) / 2));
    background: var(--zl-page-sage-soft);
    border-top: 1px solid rgba(143,165,136,.18);
    border-bottom: 1px solid rgba(143,165,136,.18);
}

.zl-content-intro p {
    max-width: 820px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.65;
}

/* =========================================================
   Icon-Struktur
   ========================================================= */

.zl-content-section {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    column-gap: 30px;
    max-width: 1040px;
    margin: 0 auto 42px;
    padding: 0;
}

.zl-content-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--zl-page-sage-soft);
    color: #8FA588;
}

.zl-content-icon svg {
    width: 30px;
    height: 30px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.zl-content-section-content {
    padding-top: 0;
}

.zl-content-section h2,
.zl-content-section h3 {
    position: relative;
    display: inline-block;
    margin: 0 0 22px;
    padding-bottom: 10px;
    color: var(--zl-page-dark);
    font-weight: 500;
    line-height: 1.25;
}

.zl-content-section h2 {
    font-size: 27px;
}

.zl-content-section h3 {
    font-size: 21px;
}

.zl-content-section h2::after,
.zl-content-section h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 47px;
    height: 1px;
    background: var(--zl-page-terracotta);
}

.zl-content-section p {
    margin: 0 0 18px;
}

.zl-content-section p:last-child {
    margin-bottom: 0;
}

.zl-content-section strong {
    color: var(--zl-page-dark);
    font-weight: 600;
}

.zl-content-page a {
    color: var(--zl-page-terracotta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.zl-content-page a:hover {
    color: #A95F40;
}

/* Dezente Trennlinie zwischen den Inhaltsblöcken */
.zl-content-section + .zl-content-section {
    padding-top: 34px;
    border-top: 1px solid var(--zl-page-border);
}

/* =========================================================
   Handschriftlicher Abschluss
   ========================================================= */

.zl-content-signature {
    max-width: 1040px;
    margin: 52px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--zl-page-border);
    color: #8FA588;
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 400;
}

.zl-content-page ul,
.zl-content-page ol {
    margin: 0 0 24px;
    padding-left: 1.4em;
}

.zl-content-page li {
    margin-bottom: 8px;
}

.zl-content-page hr {
    margin: 36px 0;
    border: 0;
    border-top: 1px solid var(--zl-page-border);
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767.98px) {

    body:has(.zl-content-page) #content h1 {
        margin: 30px 20px 0 !important;
        padding-bottom: 14px !important;
        font-size: 36px !important;
    }

    .zl-content-page {
        padding-bottom: 46px;
        font-size: 16px;
        line-height: 1.65;
    }

    .zl-content-intro {
        margin-bottom: 34px;
        padding: 22px 20px;
    }

    .zl-content-intro p {
        font-size: 16px;
    }

    .zl-content-section {
        grid-template-columns: 58px minmax(0, 1fr);
        column-gap: 18px;
        margin: 0 20px 30px;
    }

    .zl-content-icon {
        width: 52px;
        height: 52px;
    }

    .zl-content-icon svg {
        width: 24px;
        height: 24px;
    }

    .zl-content-section h2 {
        font-size: 23px;
        margin-bottom: 18px;
    }

    .zl-content-section h3 {
        font-size: 19px;
    }

    .zl-content-section + .zl-content-section {
        padding-top: 28px;
    }

    .zl-content-signature {
        margin: 40px 20px 0;
        font-size: 24px;
    }
}


/* =========================================================
   ZOE & LOUIS – INFORMATIONSSEITEN
   Zentrale CSS-Ergänzung für:
   Über uns / Zahlungsmöglichkeiten / Versandinformationen /
   Kontakt / FAQ

   Die jeweiligen HTML-Seiten enthalten nur Inhalt + Icons.
   ========================================================= */

/* Seitenrahmen */
.zl-info-page {
    --zl-info-sage: #EEF2EC;
    --zl-info-green: #8FA588;
    --zl-info-terracotta: #C77752;
    --zl-info-dark: #2F2F2F;
    --zl-info-text: #444;
    --zl-info-border: #E3DDD5;

    width: 100%;
    margin: 0 auto;
    padding: 0 0 70px;
    color: var(--zl-info-text);
    font-size: 17px;
    line-height: 1.7;
    box-sizing: border-box;
}

.zl-info-page *,
.zl-info-page *::before,
.zl-info-page *::after {
    box-sizing: border-box;
}

/* Seitenkopf */
.zl-info-hero {
    max-width: 1040px;
    margin: 46px auto 0;
    padding: 0 0 18px;
}

.zl-info-kicker {
    margin: 0 0 7px;
    color: var(--zl-info-green);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zl-info-hero h1 {
    margin: 0 !important;
    padding: 0 0 18px !important;
    color: var(--zl-info-dark) !important;
    font-size: clamp(40px, 4vw, 54px) !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
    letter-spacing: -.025em !important;
}

/* Einleitungsbox */
.zl-info-page .zl-content-intro {
    width: 100%;
    margin: 0 0 50px;
    padding: 28px max(30px, calc((100% - 1040px) / 2));
    background: var(--zl-info-sage);
    border-top: 1px solid rgba(143,165,136,.18);
    border-bottom: 1px solid rgba(143,165,136,.18);
}

.zl-info-page .zl-content-intro p {
    max-width: 820px;
    margin: 0 auto 12px;
    font-size: 18px;
    line-height: 1.65;
}

.zl-info-page .zl-content-intro p:last-child {
    margin-bottom: 0;
}

/* Inhaltsbereiche */
.zl-info-section {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 42px;
    padding: 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
}

.zl-info-section + .zl-info-section {
    padding-top: 34px;
    border-top: 1px solid var(--zl-info-border);
}

/* Icon */
.zl-info-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--zl-info-sage);
    color: var(--zl-info-green);
}

.zl-info-icon svg {
    display: block;
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Textbereich */
.zl-info-section-content {
    min-width: 0;
    width: 100%;
}

.zl-info-section h2 {
    margin: 0 0 20px !important;
    padding: 0 0 11px !important;
    color: var(--zl-info-dark) !important;
    font-size: 27px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

.zl-info-section h2::after {
    content: "";
    display: block;
    width: 47px;
    height: 1px;
    margin-top: 10px;
    background: var(--zl-info-terracotta);
}

.zl-info-section p {
    margin: 0 0 16px;
    padding: 0;
    font-size: 17px;
    line-height: 1.7;
}

.zl-info-section p:last-child {
    margin-bottom: 0;
}

.zl-info-section strong {
    color: var(--zl-info-dark);
    font-weight: 600;
}

.zl-info-section a {
    color: var(--zl-info-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Abschluss */
.zl-info-quote {
    width: 100%;
    max-width: 820px;
    margin: 58px auto 0;
    padding: 30px 20px 0;
    text-align: center;
    border-top: 1px solid var(--zl-info-border);
}

.zl-info-quote .zl-handwriting {
    margin: 0 0 12px;
    color: var(--zl-info-terracotta);
    font-size: 29px;
    line-height: 1.35;
    text-align: center;
}

.zl-info-closing {
    margin: 0;
    color: var(--zl-info-dark);
    font-size: 18px;
    font-weight: 500;
}

/* =========================================================
   MOBILE
   Wichtig: eigene Struktur, kein Zusammenschieben des Desktop-
   Grids. Dadurch bleibt die Seite auf Smartphones stabil.
   ========================================================= */
@media (max-width: 767.98px) {

    .zl-info-page {
        padding-bottom: 45px;
        font-size: 15px;
        line-height: 1.65;
    }

    .zl-info-hero {
        margin: 30px 20px 0;
        padding-bottom: 16px;
    }

    .zl-info-kicker {
        font-size: 12px;
    }

    .zl-info-hero h1 {
        padding-bottom: 15px !important;
        font-size: 36px !important;
    }

    .zl-info-page .zl-content-intro {
        margin-bottom: 36px;
        padding: 24px 20px;
    }

    .zl-info-page .zl-content-intro p {
        font-size: 16px;
        line-height: 1.6;
    }

    .zl-info-section {
        display: block;
        width: auto;
        max-width: none;
        margin: 0 20px 30px;
        padding: 0;
    }

    .zl-info-section + .zl-info-section {
        padding-top: 28px;
    }

    .zl-info-icon {
        width: 52px;
        height: 52px;
        margin: 0 0 16px;
    }

    .zl-info-icon svg {
        width: 27px;
        height: 27px;
    }

    .zl-info-section h2 {
        margin-bottom: 17px !important;
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    .zl-info-section p {
        margin-bottom: 14px;
        font-size: 15px;
        line-height: 1.65;
    }

    .zl-info-quote {
        width: auto;
        margin: 42px 20px 0;
        padding: 26px 5px 0;
    }

    .zl-info-quote .zl-handwriting {
        font-size: 24px;
        line-height: 1.35;
    }

    .zl-info-closing {
        font-size: 16px;
    }
}


/* =========================================================
   ZOE & LOUIS – INFORMATIONSSEITEN
   Zentrale CSS-Ergänzung für:
   Über uns / Zahlungsmöglichkeiten / Versandinformationen /
   Kontakt / FAQ

   Die jeweiligen HTML-Seiten enthalten nur Inhalt + Icons.
   ========================================================= */

/* Seitenrahmen */
.zl-info-page {
    --zl-info-sage: #EEF2EC;
    --zl-info-green: #8FA588;
    --zl-info-terracotta: #C77752;
    --zl-info-dark: #2F2F2F;
    --zl-info-text: #444;
    --zl-info-border: #E3DDD5;

    width: 100%;
    margin: 0 auto;
    padding: 0 0 70px;
    color: var(--zl-info-text);
    font-size: 17px;
    line-height: 1.7;
    box-sizing: border-box;
}

.zl-info-page *,
.zl-info-page *::before,
.zl-info-page *::after {
    box-sizing: border-box;
}

/* Seitenkopf */
.zl-info-hero {
    max-width: 1040px;
    margin: 46px auto 0;
    padding: 0 0 18px;
}

.zl-info-kicker {
    margin: 0 0 7px;
    color: var(--zl-info-green);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zl-info-hero h1 {
    margin: 0 !important;
    padding: 0 0 18px !important;
    color: var(--zl-info-dark) !important;
    font-size: clamp(40px, 4vw, 54px) !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
    letter-spacing: -.025em !important;
}

/* Einleitungsbox */
.zl-info-page .zl-content-intro {
    width: 100%;
    margin: 0 0 50px;
    padding: 28px max(30px, calc((100% - 1040px) / 2));
    background: var(--zl-info-sage);
    border-top: 1px solid rgba(143,165,136,.18);
    border-bottom: 1px solid rgba(143,165,136,.18);
}

.zl-info-page .zl-content-intro p {
    max-width: 820px;
    margin: 0 auto 12px;
    font-size: 18px;
    line-height: 1.65;
}

.zl-info-page .zl-content-intro p:last-child {
    margin-bottom: 0;
}

/* Inhaltsbereiche */
.zl-info-section {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 42px;
    padding: 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
}

.zl-info-section + .zl-info-section {
    padding-top: 34px;
    border-top: 1px solid var(--zl-info-border);
}

/* Icon */
.zl-info-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--zl-info-sage);
    color: var(--zl-info-green);
}

.zl-info-icon svg {
    display: block;
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Textbereich */
.zl-info-section-content {
    min-width: 0;
    width: 100%;
}

.zl-info-section h2 {
    margin: 0 0 20px !important;
    padding: 0 0 11px !important;
    color: var(--zl-info-dark) !important;
    font-size: 27px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

.zl-info-section h2::after {
    content: "";
    display: block;
    width: 47px;
    height: 1px;
    margin-top: 10px;
    background: var(--zl-info-terracotta);
}

.zl-info-section p {
    margin: 0 0 16px;
    padding: 0;
    font-size: 17px;
    line-height: 1.7;
}

.zl-info-section p:last-child {
    margin-bottom: 0;
}

.zl-info-section strong {
    color: var(--zl-info-dark);
    font-weight: 600;
}

.zl-info-section a {
    color: var(--zl-info-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Abschluss */
.zl-info-quote {
    width: 100%;
    max-width: 820px;
    margin: 58px auto 0;
    padding: 30px 20px 0;
    text-align: center;
    border-top: 1px solid var(--zl-info-border);
}

.zl-info-quote .zl-handwriting {
    margin: 0 0 12px;
    color: var(--zl-info-terracotta);
    font-size: 29px;
    line-height: 1.35;
    text-align: center;
}

.zl-info-closing {
    margin: 0;
    color: var(--zl-info-dark);
    font-size: 18px;
    font-weight: 500;
}

/* =========================================================
   MOBILE
   Wichtig: eigene Struktur, kein Zusammenschieben des Desktop-
   Grids. Dadurch bleibt die Seite auf Smartphones stabil.
   ========================================================= */
@media (max-width: 767.98px) {

    .zl-info-page {
        padding-bottom: 45px;
        font-size: 15px;
        line-height: 1.65;
    }

    .zl-info-hero {
        margin: 30px 20px 0;
        padding-bottom: 16px;
    }

    .zl-info-kicker {
        font-size: 12px;
    }

    .zl-info-hero h1 {
        padding-bottom: 15px !important;
        font-size: 36px !important;
    }

    .zl-info-page .zl-content-intro {
        margin-bottom: 36px;
        padding: 24px 20px;
    }

    .zl-info-page .zl-content-intro p {
        font-size: 16px;
        line-height: 1.6;
    }

    .zl-info-section {
        display: block;
        width: auto;
        max-width: none;
        margin: 0 20px 30px;
        padding: 0;
    }

    .zl-info-section + .zl-info-section {
        padding-top: 28px;
    }

    .zl-info-icon {
        width: 52px;
        height: 52px;
        margin: 0 0 16px;
    }

    .zl-info-icon svg {
        width: 27px;
        height: 27px;
    }

    .zl-info-section h2 {
        margin-bottom: 17px !important;
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    .zl-info-section p {
        margin-bottom: 14px;
        font-size: 15px;
        line-height: 1.65;
    }

    .zl-info-quote {
        width: auto;
        margin: 42px 20px 0;
        padding: 26px 5px 0;
    }

    .zl-info-quote .zl-handwriting {
        font-size: 24px;
        line-height: 1.35;
    }

    .zl-info-closing {
        font-size: 16px;
    }
}

/* =========================================================
   ZAHLUNGSMÖGLICHKEITEN
   Gemeinsame Platzhalter für spätere Zahlungslogos
   ========================================================= */

.zl-payment-placeholder-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.zl-payment-placeholder {
    width: 170px;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    border: 1px dashed #C9C2B9;
    border-radius: 8px;
    background: #FAF9F6;
    color: #8FA588;
}

.zl-payment-placeholder span {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .04em;
}

.zl-payment-placeholder small {
    font-size: 11px;
    line-height: 1.2;
    color: #777;
}

.zl-info-section-content > .zl-payment-placeholder {
    margin-top: 22px;
}

@media (max-width: 767.98px) {
    .zl-payment-placeholder-group {
        gap: 10px;
    }

    .zl-payment-placeholder {
        width: calc(50% - 5px);
        min-width: 130px;
        min-height: 68px;
    }
}

/* =========================================================
   ZOE & LOUIS – INFORMATIONSSEITEN
   Zentrale CSS-Ergänzung für:
   Über uns / Zahlungsmöglichkeiten / Versandinformationen /
   Kontakt / FAQ

   Die jeweiligen HTML-Seiten enthalten nur Inhalt + Icons.
   ========================================================= */

/* Seitenrahmen */
.zl-info-page {
    --zl-info-sage: #EEF2EC;
    --zl-info-green: #8FA588;
    --zl-info-terracotta: #C77752;
    --zl-info-dark: #2F2F2F;
    --zl-info-text: #444;
    --zl-info-border: #E3DDD5;

    width: 100%;
    margin: 0 auto;
    padding: 0 0 70px;
    color: var(--zl-info-text);
    font-size: 17px;
    line-height: 1.7;
    box-sizing: border-box;
}

.zl-info-page *,
.zl-info-page *::before,
.zl-info-page *::after {
    box-sizing: border-box;
}

/* Seitenkopf */
.zl-info-hero {
    max-width: 1040px;
    margin: 46px auto 0;
    padding: 0 0 18px;
}

.zl-info-kicker {
    margin: 0 0 7px;
    color: var(--zl-info-green);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.zl-info-hero h1 {
    margin: 0 !important;
    padding: 0 0 18px !important;
    color: var(--zl-info-dark) !important;
    font-size: clamp(40px, 4vw, 54px) !important;
    line-height: 1.12 !important;
    font-weight: 500 !important;
    letter-spacing: -.025em !important;
}

/* Einleitungsbox */
.zl-info-page .zl-content-intro {
    width: 100%;
    margin: 0 0 50px;
    padding: 28px max(30px, calc((100% - 1040px) / 2));
    background: var(--zl-info-sage);
    border-top: 1px solid rgba(143,165,136,.18);
    border-bottom: 1px solid rgba(143,165,136,.18);
}

.zl-info-page .zl-content-intro p {
    max-width: 820px;
    margin: 0 auto 12px;
    font-size: 18px;
    line-height: 1.65;
}

.zl-info-page .zl-content-intro p:last-child {
    margin-bottom: 0;
}

/* Inhaltsbereiche */
.zl-info-section {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 42px;
    padding: 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
}

.zl-info-section + .zl-info-section {
    padding-top: 34px;
    border-top: 1px solid var(--zl-info-border);
}

/* Icon */
.zl-info-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--zl-info-sage);
    color: var(--zl-info-green);
}

.zl-info-icon svg {
    display: block;
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Textbereich */
.zl-info-section-content {
    min-width: 0;
    width: 100%;
}

.zl-info-section h2 {
    margin: 0 0 20px !important;
    padding: 0 0 11px !important;
    color: var(--zl-info-dark) !important;
    font-size: 27px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

.zl-info-section h2::after {
    content: "";
    display: block;
    width: 47px;
    height: 1px;
    margin-top: 10px;
    background: var(--zl-info-terracotta);
}

.zl-info-section p {
    margin: 0 0 16px;
    padding: 0;
    font-size: 17px;
    line-height: 1.7;
}

.zl-info-section p:last-child {
    margin-bottom: 0;
}

.zl-info-section strong {
    color: var(--zl-info-dark);
    font-weight: 600;
}

.zl-info-section a {
    color: var(--zl-info-terracotta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Abschluss */
.zl-info-quote {
    width: 100%;
    max-width: 820px;
    margin: 58px auto 0;
    padding: 30px 20px 0;
    text-align: center;
    border-top: 1px solid var(--zl-info-border);
}

.zl-info-quote .zl-handwriting {
    margin: 0 0 12px;
    color: var(--zl-info-terracotta);
    font-size: 29px;
    line-height: 1.35;
    text-align: center;
}

.zl-info-closing {
    margin: 0;
    color: var(--zl-info-dark);
    font-size: 18px;
    font-weight: 500;
}

/* =========================================================
   MOBILE
   Wichtig: eigene Struktur, kein Zusammenschieben des Desktop-
   Grids. Dadurch bleibt die Seite auf Smartphones stabil.
   ========================================================= */
@media (max-width: 767.98px) {

    .zl-info-page {
        padding-bottom: 45px;
        font-size: 15px;
        line-height: 1.65;
    }

    .zl-info-hero {
        margin: 30px 20px 0;
        padding-bottom: 16px;
    }

    .zl-info-kicker {
        font-size: 12px;
    }

    .zl-info-hero h1 {
        padding-bottom: 15px !important;
        font-size: 36px !important;
    }

    .zl-info-page .zl-content-intro {
        margin-bottom: 36px;
        padding: 24px 20px;
    }

    .zl-info-page .zl-content-intro p {
        font-size: 16px;
        line-height: 1.6;
    }

    .zl-info-section {
        display: block;
        width: auto;
        max-width: none;
        margin: 0 20px 30px;
        padding: 0;
    }

    .zl-info-section + .zl-info-section {
        padding-top: 28px;
    }

    .zl-info-icon {
        width: 52px;
        height: 52px;
        margin: 0 0 16px;
    }

    .zl-info-icon svg {
        width: 27px;
        height: 27px;
    }

    .zl-info-section h2 {
        margin-bottom: 17px !important;
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    .zl-info-section p {
        margin-bottom: 14px;
        font-size: 15px;
        line-height: 1.65;
    }

    .zl-info-quote {
        width: auto;
        margin: 42px 20px 0;
        padding: 26px 5px 0;
    }

    .zl-info-quote .zl-handwriting {
        font-size: 24px;
        line-height: 1.35;
    }

    .zl-info-closing {
        font-size: 16px;
    }
}

/* =========================================================
   ZAHLUNGSMÖGLICHKEITEN
   Gemeinsame Platzhalter für spätere Zahlungslogos
   ========================================================= */

.zl-payment-placeholder-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.zl-payment-placeholder {
    width: 170px;
    min-height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    border: 1px dashed #C9C2B9;
    border-radius: 8px;
    background: #FAF9F6;
    color: #8FA588;
}

.zl-payment-placeholder span {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .04em;
}

.zl-payment-placeholder small {
    font-size: 11px;
    line-height: 1.2;
    color: #777;
}

.zl-info-section-content > .zl-payment-placeholder {
    margin-top: 22px;
}

@media (max-width: 767.98px) {
    .zl-payment-placeholder-group {
        gap: 10px;
    }

    .zl-payment-placeholder {
        width: calc(50% - 5px);
        min-width: 130px;
        min-height: 68px;
    }
}


/* H1-Linie – Informationsseiten: exakt EINE Linie */
.zl-info-page .zl-info-hero::after {
    display: none !important;
}

.zl-info-page .zl-info-hero h1::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 18px !important;
    background: var(--zl-info-terracotta) !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    .zl-info-page .zl-info-hero h1::after {
        width: 52px !important;
        margin-top: 15px !important;
    }
}


/* =========================================================
   ZOE & LOUIS – FAQ / JTL OPC ACCORDION
   OPC-Klasse: zl-faq-accordion
   ========================================================= */

.zl-faq-accordion {
    max-width: 1040px;
    margin: 0 auto 60px;
    color: #444;
}

.zl-faq-accordion .accordion {
    width: 100%;
}

.zl-faq-accordion .card {
    margin: 0 0 12px;
    border: 1px solid #E3DDD5;
    border-radius: 8px;
    overflow: hidden;
    background: #FFF;
    box-shadow: none;
}

.zl-faq-accordion .card-header {
    padding: 0;
    border: 0;
    background: #EEF2EC;
}

.zl-faq-accordion .card-header .btn-link,
.zl-faq-accordion .card-header [data-toggle="collapse"] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    padding: 18px 22px;
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
    text-decoration: none !important;
    white-space: normal;
    box-shadow: none !important;
}

.zl-faq-accordion .card-header .btn-link:hover,
.zl-faq-accordion .card-header [data-toggle="collapse"]:hover {
    color: #C77752 !important;
}

.zl-faq-accordion .card-header .btn-link::after,
.zl-faq-accordion .card-header [data-toggle="collapse"]::after {
    flex: 0 0 auto;
    margin-left: 18px;
    color: #C77752;
}

.zl-faq-accordion .card-body {
    padding: 24px 22px 26px;
    color: #444;
    background: #FFF;
    border-top: 1px solid #E3DDD5;
    font-size: 17px;
    line-height: 1.7;
}

.zl-faq-accordion .card-body p {
    margin: 0 0 14px;
}

.zl-faq-accordion .card-body p:last-child {
    margin-bottom: 0;
}

.zl-faq-accordion .card-body strong {
    color: #2F2F2F;
}

.zl-faq-accordion .card-header .btn-link:not(.collapsed),
.zl-faq-accordion .card-header [data-toggle="collapse"]:not(.collapsed) {
    color: #2F2F2F !important;
}

@media (max-width: 767.98px) {
    .zl-faq-accordion {
        width: auto;
        max-width: none;
        margin: 0 20px 40px;
    }

    .zl-faq-accordion .card {
        margin-bottom: 10px;
        border-radius: 7px;
    }

    .zl-faq-accordion .card-header .btn-link,
    .zl-faq-accordion .card-header [data-toggle="collapse"] {
        min-height: 58px;
        padding: 16px 17px;
        font-size: 16px;
        line-height: 1.45;
        white-space: normal !important;
        overflow-wrap: break-word;
    }

    .zl-faq-accordion .card-header .btn-link::after,
    .zl-faq-accordion .card-header [data-toggle="collapse"]::after {
        margin-left: 12px;
    }

    .zl-faq-accordion .card-body {
        padding: 19px 17px 21px;
        font-size: 15px;
        line-height: 1.65;
    }
}


/* =========================================================
   ZOE & LOUIS – BUTTON SYSTEM
   Einheitlicher JTL-inspirierter Button mit seidenglänzendem
   Hovereffekt für eigene Buttons und OPC-Buttons
   ========================================================= */

:root {
    --zl-button-bg: #C77752;
    --zl-button-border: #B86A43;
    --zl-button-hover: #C77752;
    --zl-button-text: #FFFFFF;
}

/* Grundzustand */
.btn.btn-primary,
.opc-Button .btn.btn-primary,
.zl-button,
.zl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    overflow: hidden;
    border: 1px solid var(--zl-button-border) !important;
    border-radius: 6px !important;
    background: var(--zl-button-bg) !important;
    background-image: none !important;
    color: var(--zl-button-text) !important;
    font-family: "source-sans-pro", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

/* seidenglänzender Lichtstreifen */
.btn.btn-primary::before,
.opc-Button .btn.btn-primary::before,
.zl-button::before,
.zl-btn::before {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -38%;
    width: 24%;
    min-width: 42px;
    transform: skewX(-24deg);
    background: rgba(255,255,255,.24);
    opacity: 0;
    pointer-events: none;
    transition:
        left .45s ease,
        opacity .2s ease;
}

/* Hover – JTL-artiger seidiger Glanz */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.opc-Button .btn.btn-primary:hover,
.opc-Button .btn.btn-primary:focus,
.zl-button:hover,
.zl-button:focus,
.zl-btn:hover,
.zl-btn:focus {
    background: var(--zl-button-hover) !important;
    background-image: none !important;
    border-color: var(--zl-button-border) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.10);
    text-decoration: none !important;
}

.btn.btn-primary:hover::before,
.opc-Button .btn.btn-primary:hover::before,
.zl-button:hover::before,
.zl-btn:hover::before {
    left: 125%;
    opacity: 1;
}

/* Klickzustand */
.btn.btn-primary:active,
.opc-Button .btn.btn-primary:active,
.zl-button:active,
.zl-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Button-Inhalte immer über dem Glanz */
.btn.btn-primary > *,
.opc-Button .btn.btn-primary > *,
.zl-button > *,
.zl-btn > * {
    position: relative;
    z-index: 1;
}

/* Block-Buttons */
.btn.btn-primary.btn-block,
.opc-Button .btn.btn-primary.btn-block,
.zl-button.btn-block,
.zl-btn.btn-block {
    width: 100%;
}

/* Warenkorb-Buttons der Produktkarten */
.productbox .btn.btn-primary {
    min-height: 44px;
    padding: 10px 16px;
}

/* Mobile */
@media (max-width: 767.98px) {
    .btn.btn-primary,
    .opc-Button .btn.btn-primary,
    .zl-button,
    .zl-btn {
        min-height: 46px;
        padding: 11px 18px;
        font-size: 15.5px;
        border-radius: 6px !important;
    }
}



/* =========================================================
   ZOE & LOUIS – BUTTON ERWEITERUNG
   Footer-Newsletter + OPC-Markenbereich
   ========================================================= */

/* Alle selbst gestalteten OPC-Buttons */
.opc-Button .btn {
    position: relative;
    overflow: hidden;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid #B86A43 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-family: "source-sans-pro", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

/* Seidenglanz */
.opc-Button .btn::before,
#footer .btn-secondary::before {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -38%;
    width: 24%;
    min-width: 42px;
    transform: skewX(-24deg);
    background: rgba(255,255,255,.24);
    opacity: 0;
    pointer-events: none;
    transition:
        left .45s ease,
        opacity .2s ease;
}

.opc-Button .btn:hover,
.opc-Button .btn:focus,
#footer .btn-secondary:hover,
#footer .btn-secondary:focus {
    background: #C77752 !important;
    background-image: none !important;
    border-color: #B86A43 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.10);
    text-decoration: none !important;
}

.opc-Button .btn:hover::before,
#footer .btn-secondary:hover::before {
    left: 125%;
    opacity: 1;
}

.opc-Button .btn:active,
#footer .btn-secondary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* Newsletter-Button im Footer
   JTL liefert ihn als variant="secondary". */
#footer .btn-secondary {
    position: relative;
    overflow: hidden;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid #B86A43 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-family: "source-sans-pro", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

@media (max-width: 767.98px) {
    .opc-Button .btn,
    #footer .btn-secondary {
        min-height: 46px;
        padding: 11px 18px;
        font-size: 15.5px;
    }
}


/* =========================================================
   ZOE & LOUIS – MARKENBUTTON FINAL FIX
   Exakter OPC-Selektor aus dem vorhandenen HTML:
   <a class="zl-brand-button" ...>
   ========================================================= */

.zl-brand-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 12px 22px !important;
    overflow: hidden !important;

    border: 1px solid #B86A43 !important;
    border-radius: 6px !important;

    background: #C77752 !important;
    background-image: none !important;

    color: #FFFFFF !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;

    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

/* seidenglänzender Lichtstreifen */
.zl-brand-button::before {
    content: "" !important;
    position: absolute !important;
    top: -35% !important;
    bottom: -35% !important;
    left: -38% !important;
    width: 24% !important;
    min-width: 42px !important;

    transform: skewX(-24deg) !important;
    background: rgba(255,255,255,.24) !important;

    opacity: 0 !important;
    pointer-events: none !important;

    transition:
        left .45s ease,
        opacity .2s ease !important;
}

/* Hover */
.zl-brand-button:hover,
.zl-brand-button:focus {
    background: #C77752 !important;
    background-image: none !important;
    border-color: #B86A43 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.10) !important;
}

.zl-brand-button:hover::before,
.zl-brand-button:focus::before {
    left: 125% !important;
    opacity: 1 !important;
}

/* Klick */
.zl-brand-button:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
}

/* Text bleibt über dem Glanz */
.zl-brand-button {
    isolation: isolate;
}

.zl-brand-button::after {
    content: none !important;
}

@media (max-width: 767.98px) {
    .zl-brand-button {
        min-height: 46px !important;
        padding: 11px 18px !important;
        font-size: 15.5px !important;
    }
}

/* =========================================================
========================================================= */




/* =========================================================
   ZOE & LOUIS – KATEGORIESEITEN
   MASTER DESIGN – VARIANTE 2 „NATÜRLICH & KLAR“

   Gilt automatisch für alle JTL-Kategorieseiten.
   Keine Kategorie oder Produktnamen fest codiert.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN-VARIABLEN
   --------------------------------------------------------- */

:root {
    --zl-cat-sage: #8FA588;
    --zl-cat-sage-soft: #EEF2EC;
    --zl-cat-terracotta: #C77752;
    --zl-cat-terracotta-dark: #A95F40;
    --zl-cat-offwhite: #F6F3EE;
    --zl-cat-dark: #2F2F2F;
    --zl-cat-text: #444;
    --zl-cat-muted: #666;
    --zl-cat-border: #E3DDD5;
    --zl-cat-white: #FFFFFF;
}

/* ---------------------------------------------------------
   1. KATEGORIE – GRUNDLAGE
   --------------------------------------------------------- */

body:has(#result-wrapper) #content {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) #result-wrapper {
    width: 100%;
}

/* ---------------------------------------------------------
   2. KATEGORIE-HEADER
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper .productlist-header {
    margin-bottom: 34px;
}

body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 17px !important;
    color: var(--zl-cat-dark) !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

/* unsere typische kurze Terracotta-Linie */
body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: var(--zl-cat-terracotta);
}

body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
    max-width: 820px;
    margin: 0;
    color: var(--zl-cat-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   3. LINKER BEREICH / KATEGORIEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #sidepanel-left,
body:has(#result-wrapper) .sidepanel-left {
    padding-right: 28px;
}

body:has(#result-wrapper) .box-categories,
body:has(#result-wrapper) .box-filter,
body:has(#result-wrapper) .box-filter-category {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#result-wrapper) .box-categories .box-heading,
body:has(#result-wrapper) .box-filter .box-heading {
    margin-bottom: 0;
    padding: 0 0 12px;
    color: var(--zl-cat-dark);
    border-bottom: 1px solid var(--zl-cat-border);
    font-size: 18px;
    font-weight: 600;
}

/* Kategorie-Links */
body:has(#result-wrapper) .box-categories .nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--zl-cat-text) !important;
    background: transparent !important;
    font-size: 16px;
    transition: color .18s ease, padding-left .18s ease;
}

body:has(#result-wrapper) .box-categories .nav-link:hover {
    padding-left: 5px;
    color: var(--zl-cat-terracotta) !important;
}

/* aktive Kategorie */
body:has(#result-wrapper) .box-categories .nav-link.active,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link {
    padding-left: 12px;
    color: var(--zl-cat-dark) !important;
    background: var(--zl-cat-sage-soft) !important;
    border-radius: 4px;
    font-weight: 600;
}

body:has(#result-wrapper) .box-categories .nav-link.active::before,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zl-cat-sage);
    border-radius: 3px 0 0 3px;
}

/* ---------------------------------------------------------
   4. FILTER
   --------------------------------------------------------- */

body:has(#result-wrapper) .box-filter .productlist-filter-headline,
body:has(#result-wrapper) .box-filter .filter-headline {
    padding: 17px 0 11px;
    color: var(--zl-cat-dark);
    border-top: 1px solid var(--zl-cat-border);
    font-size: 16px;
    font-weight: 500;
}

body:has(#result-wrapper) .box-filter .nav-link {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) .box-filter .nav-link:hover {
    color: var(--zl-cat-terracotta);
}

/* ---------------------------------------------------------
   5. SORTIERUNG / ANSICHT
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper select,
body:has(#result-wrapper) #result-wrapper .custom-select {
    min-height: 48px;
    padding-left: 14px;
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper select:focus,
body:has(#result-wrapper) #result-wrapper .custom-select:focus {
    border-color: var(--zl-cat-sage);
    box-shadow: 0 0 0 1px rgba(143,165,136,.12);
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
body:has(#result-wrapper) #result-wrapper .btn-group .btn {
    min-height: 48px;
    border-color: var(--zl-cat-border);
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn:hover,
body:has(#result-wrapper) #result-wrapper .btn-group .btn:hover {
    color: var(--zl-cat-terracotta);
    border-color: var(--zl-cat-terracotta);
    background: var(--zl-cat-white);
}

/* ---------------------------------------------------------
   6. PRODUKTGRID
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list {
    margin-top: 8px;
}

body:has(#result-wrapper) #product-list .productbox {
    margin-bottom: 28px;
}

body:has(#result-wrapper) #product-list .productbox-inner {
    height: 100%;
    overflow: hidden;
    background: var(--zl-cat-white);
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* dezenter Hover */
@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   7. PRODUKTBILDER
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-image {
    overflow: hidden;
}

body:has(#result-wrapper) #product-list .productbox-images img {
    transition: transform .35s ease;
}

@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   8. PRODUKTTITEL / INFORMATIONEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-title {
    padding: 15px 15px 8px !important;
    min-height: 64px;
}

body:has(#result-wrapper) #product-list .productbox-title a {
    color: var(--zl-cat-dark) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body:has(#result-wrapper) #product-list .productbox-title a:hover {
    color: var(--zl-cat-terracotta) !important;
}

/* Preis */
body:has(#result-wrapper) #product-list .productbox-price {
    color: var(--zl-cat-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header {
        margin-bottom: 26px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        margin-bottom: 13px !important;
        padding-bottom: 14px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 16px;
        line-height: 1.65;
    }

    body:has(#result-wrapper) #sidepanel-left,
    body:has(#result-wrapper) .sidepanel-left {
        padding-right: 0;
    }

    body:has(#result-wrapper) #result-wrapper select,
    body:has(#result-wrapper) #result-wrapper .custom-select,
    body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
    body:has(#result-wrapper) #result-wrapper .btn-group .btn {
        min-height: 46px;
    }

    body:has(#result-wrapper) #product-list {
        margin-top: 4px;
    }

    body:has(#result-wrapper) #product-list .productbox {
        margin-bottom: 20px;
    }

    body:has(#result-wrapper) #product-list .productbox-title {
        min-height: 0;
        padding: 14px 15px 9px !important;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 575.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        font-size: 31px !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 15.5px;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------
   10. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#result-wrapper) #product-list .productbox-inner,
    body:has(#result-wrapper) #product-list .productbox-images img,
    body:has(#result-wrapper) .box-categories .nav-link {
        transition: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE MASTER
   EXAKTER JTL-DOM-FIX
   Grundlage: echte Kategorieseite / Kurse & Workshops
   ========================================================= */

/* ---------------------------------------------------------
   KATEGORIE-HAUPTBEREICH
   JTL verwendet #result-wrapper direkt innerhalb
   der rechten Content-Spalte.
   --------------------------------------------------------- */

#content > .row.justify-content-lg-end {
    align-items: flex-start;
}

#content > .row.justify-content-lg-end > .col-lg-8,
#content > .row.justify-content-lg-end > .col-xl-9 {
    min-width: 0;
}

/* ---------------------------------------------------------
   1. ECHTE KATEGORIEÜBERSCHRIFT
   JTL-Struktur:
   #result-wrapper > .title > h1.h2
   --------------------------------------------------------- */

#result-wrapper > .title {
    margin: 0 0 30px !important;
    padding: 0 !important;
}

#result-wrapper > .title h1.h2 {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

/* genau eine Zoe-&-Louis-Linie */
#result-wrapper > .title h1.h2::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 17px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   2. SORTIER-/ANSICHTSLEISTE
   --------------------------------------------------------- */

#result-wrapper .productlist-page-nav-header-m {
    margin-top: 0 !important;
}

#result-wrapper .productlist-page-nav-header-m + hr,
#result-wrapper .productlist-page-nav-header-m ~ hr.productlist-page-nav-bottom {
    border-color: #E3DDD5 !important;
}

#result-wrapper .productlist-page-nav-header-m .btn {
    min-height: 48px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #444 !important;
    box-shadow: none !important;
}

#result-wrapper .productlist-page-nav-header-m .btn:hover,
#result-wrapper .productlist-page-nav-header-m .btn:focus {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* aktive Galerie/Listendarstellung */
#result-wrapper .productlist-page-nav-header-m .btn-option.active {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* Ergebniszahl */
#result-wrapper .productlist-item-info {
    color: #666 !important;
    font-size: 15px;
}

/* ---------------------------------------------------------
   3. SIDEBAR – EXAKTE JTL-ID #sidepanel_left
   --------------------------------------------------------- */

#sidepanel_left {
    padding-right: 28px !important;
}

#sidepanel_left .box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop-Kategorieüberschrift */
#sidepanel_left .productlist-filter-headline.d-none.d-md-flex {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* mobile Kategorieüberschrift */
#sidepanel_left > .box-categories > a.box-normal-link {
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Kategorie-Navigation */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item {
    margin: 0 !important;
}

#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
    position: relative !important;
    display: block !important;
    padding: 11px 12px !important;
    margin: 0 !important;

    color: #444 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        padding-left .18s ease !important;
}

/* Hover */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link:hover {
    padding-left: 17px !important;
    color: #C77752 !important;
    background: #FAF9F6 !important;
}

/* Aktive Kategorie – JTL-Gelb vollständig entfernen */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link,
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link:hover {
    padding-left: 17px !important;

    color: #2F2F2F !important;
    background: #EEF2EC !important;

    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    font-weight: 600 !important;
}

/* Sage-Akzent links statt gelber JTL-Leiste */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;

    background: #8FA588 !important;
    border-radius: 3px 0 0 3px !important;
}

/* JTL-HR unter der Kategorienbox */
#sidepanel_left .box-normal-hr,
#sidepanel_left .box-filter-hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #E3DDD5 !important;
}

/* ---------------------------------------------------------
   4. FILTER-BOXEN
   --------------------------------------------------------- */

#sidepanel_left .btn-filter-box {
    position: relative !important;
    min-height: 48px !important;
    padding: 14px 28px 14px 0 !important;

    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#sidepanel_left .btn-filter-box:hover,
#sidepanel_left .btn-filter-box:focus {
    color: #C77752 !important;
    background: transparent !important;
}

/* Filter-Pfeil */
#sidepanel_left .btn-filter-box::after {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Preisfelder */
#sidepanel_left .price-range-input {
    border-color: #D6CEC5 !important;
    box-shadow: none !important;
}

#sidepanel_left .price-range-input:focus {
    border-color: #8FA588 !important;
    box-shadow: 0 0 0 1px rgba(143,165,136,.12) !important;
}

#sidepanel_left .input-group-text {
    border-color: #D6CEC5 !important;
    background: #FAF9F6 !important;
    color: #666 !important;
}

/* Preis-Slider – JTL-Gelb durch Sage */
#sidepanel_left .price-range-slide .noUi-connect {
    background: #8FA588 !important;
}

#sidepanel_left .price-range-slide .noUi-handle {
    border-color: #8FA588 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(47,47,47,.14) !important;
}

/* ---------------------------------------------------------
   5. PRODUKTGRID – JTL setzt 4 / 3 / 2 Spalten selbst
   --------------------------------------------------------- */

#product-list {
    margin-top: 0 !important;
}

#product-list .product-wrapper {
    margin-bottom: 28px !important;
}

/* Karten nur dezent einfassen */
#product-list .productbox {
    height: 100%;
}

#product-list .productbox-inner {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (min-width: 768px) {
    #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    #content > .row.justify-content-lg-end {
        display: block !important;
    }

    #sidepanel_left {
        padding-right: 0 !important;
    }

    #result-wrapper > .title {
        margin-bottom: 22px !important;
    }

    #result-wrapper > .title h1.h2 {
        font-size: 34px !important;
        padding-bottom: 14px !important;
    }

    #result-wrapper > .title h1.h2::after {
        width: 52px !important;
        margin-top: 14px !important;
    }

    #result-wrapper .productlist-page-nav-header-m {
        margin-bottom: 10px !important;
    }

    #result-wrapper .productlist-page-nav-header-m .btn {
        min-height: 46px !important;
    }

    #product-list .product-wrapper {
        margin-bottom: 20px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #result-wrapper > .title h1.h2 {
        font-size: 31px !important;
    }
}


/* ZOE & LOUIS – KATEGORIE-BANNER / VARIANTE 2
   OPC-Slider-Klasse: zl-category-slider
   Texte und Bilder werden ausschließlich im JTL OnPage Composer gepflegt.
*/

.zl-category-slider{
 position:relative!important;width:100%!important;margin:0 0 42px!important;
 overflow:hidden!important;border-radius:4px!important;
}
.zl-category-slider .nivoSlider{
 position:relative!important;min-height:280px!important;max-height:320px!important;
 overflow:hidden!important;background:#F6F3EE!important;
}
.zl-category-slider .nivoSlider img{
 width:100%!important;height:310px!important;object-fit:cover!important;
 object-position:center center!important;
}

/* Heller Textbereich links */
.zl-category-slider .nivo-caption{
 top:0!important;bottom:0!important;left:0!important;right:auto!important;
 width:58%!important;min-height:100%!important;
 display:flex!important;flex-direction:column!important;justify-content:center!important;
 padding:42px 48px!important;
 background:linear-gradient(90deg,rgba(246,243,238,.98) 0%,rgba(246,243,238,.95) 58%,rgba(246,243,238,.72) 82%,rgba(246,243,238,0) 100%)!important;
 color:#2F2F2F!important;opacity:1!important;
}

/* Überschrift aus dem OPC */
.zl-category-slider .nivo-caption .title,
.zl-category-slider .nivo-caption strong.title{
 display:block!important;width:fit-content!important;margin:0!important;
 padding:0 0 15px!important;color:#C77752!important;
 font-family:"source-sans-pro",sans-serif!important;
 font-size:clamp(38px,3.5vw,52px)!important;font-weight:500!important;
 line-height:1.12!important;letter-spacing:-.025em!important;
 text-transform:none!important;
}
.zl-category-slider .nivo-caption .title::after,
.zl-category-slider .nivo-caption strong.title::after{
 content:""!important;display:block!important;width:62px!important;height:1px!important;
 margin-top:16px!important;background:#C77752!important;border:0!important;box-shadow:none!important;
}

/* Beschreibung aus dem OPC */
.zl-category-slider .nivo-caption .desc,
.zl-category-slider .nivo-caption p{
 display:block!important;max-width:680px!important;margin:0!important;padding:0!important;
 color:#444!important;font-family:"source-sans-pro",sans-serif!important;
 font-size:17px!important;font-weight:400!important;line-height:1.65!important;
}

/* Navigation */
.zl-category-slider .nivo-controlNav{bottom:12px!important}
.zl-category-slider .nivo-directionNav a{opacity:.35!important;transition:opacity .2s ease!important}
.zl-category-slider:hover .nivo-directionNav a{opacity:.7!important}
.zl-category-slider .nivo-pause{display:none!important}

/* Mobile */
@media (max-width:767.98px){
 .zl-category-slider{margin-bottom:28px!important;border-radius:0!important}
 .zl-category-slider .nivoSlider{min-height:360px!important;max-height:410px!important}
 .zl-category-slider .nivoSlider img{height:390px!important;object-fit:cover!important}
 .zl-category-slider .nivo-caption{
  top:auto!important;bottom:0!important;left:0!important;right:0!important;
  width:100%!important;min-height:52%!important;padding:28px 22px 38px!important;
  justify-content:flex-end!important;
  background:linear-gradient(0deg,rgba(246,243,238,.98) 0%,rgba(246,243,238,.94) 60%,rgba(246,243,238,.35) 88%,rgba(246,243,238,0) 100%)!important;
 }
 .zl-category-slider .nivo-caption .title,
 .zl-category-slider .nivo-caption strong.title{
  font-size:32px!important;line-height:1.15!important;padding-bottom:13px!important;
 }
 .zl-category-slider .nivo-caption .title::after,
 .zl-category-slider .nivo-caption strong.title::after{
  width:52px!important;margin-top:13px!important;
 }
 .zl-category-slider .nivo-caption .desc,
 .zl-category-slider .nivo-caption p{
  max-width:100%!important;font-size:15.5px!important;line-height:1.6!important;
 }
 .zl-category-slider .nivo-controlNav{bottom:10px!important}
}
@media (max-width:575.98px){
 .zl-category-slider .nivoSlider{min-height:340px!important;max-height:390px!important}
 .zl-category-slider .nivoSlider img{height:370px!important}
 .zl-category-slider .nivo-caption{padding:24px 18px 34px!important}
 .zl-category-slider .nivo-caption .title,
 .zl-category-slider .nivo-caption strong.title{font-size:29px!important}
 .zl-category-slider .nivo-caption .desc,
 .zl-category-slider .nivo-caption p{font-size:15px!important}
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE-BANNER
   FINALER ABSTANDS- UND PAUSEN-FIX
   ========================================================= */

/* Banner-Höhe wirklich auf die sichtbare Bannerhöhe begrenzen */
.zl-category-slider {
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

.zl-category-slider .nivoSlider {
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    overflow: hidden !important;
}

.zl-category-slider .nivoSlider img {
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
}

/* Nivo-Pause vollständig entfernen */
.zl-category-slider .nivo-pause,
.zl-category-slider a.nivo-pause,
.zl-category-slider .nivoSlider .nivo-pause,
.zl-category-slider .nivo-directionNav .nivo-pause {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Falls JTL das Pausenelement als separates Control ausgibt */
.zl-category-slider [class*="pause"],
.zl-category-slider [id*="pause"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Mobile */
@media (max-width: 767.98px) {
    .zl-category-slider {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
        margin-bottom: 0 !important;
    }

    .zl-category-slider .nivoSlider {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
    }

    .zl-category-slider .nivoSlider img {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
    }
}

@media (max-width: 575.98px) {
    .zl-category-slider,
    .zl-category-slider .nivoSlider {
        height: 370px !important;
        min-height: 370px !important;
        max-height: 370px !important;
    }

    .zl-category-slider .nivoSlider img {
        height: 370px !important;
        min-height: 370px !important;
        max-height: 370px !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE-BANNER
   FINAL: Abstand entfernen + doppelte JTL-H1 ausblenden
   ========================================================= */

/* 1. OPC-Container des Kategorie-Sliders darf keinen
      zusätzlichen unteren Leerraum erzeugen */
body:has(.zl-category-slider) .opc-Container:has(.zl-category-slider),
body:has(.zl-category-slider) .opc-Container:has(.zl-category-slider) > .row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
}

/* Slider selbst ohne Abstand nach unten */
body:has(.zl-category-slider) .zl-category-slider {
    margin-bottom: 0 !important;
}

/* 2. Der verbleibende JTL-Abstand vor dem Breadcrumb wird
      kompakt zusammengezogen */
body:has(.zl-category-slider) #content .breadcrumb {
    margin-top: -72px !important;
}

/* 3. Doppelte Kategorieüberschrift unter dem Banner:
      visuell ausblenden, aber im DOM belassen.
      So bleibt die H1 für SEO/Accessibility erhalten. */
body:has(.zl-category-slider) #result-wrapper > .title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Auch die zuvor gestaltete Linie der versteckten H1 entfernen */
body:has(.zl-category-slider) #result-wrapper > .title h1.h2::after {
    display: none !important;
}

/* 4. Mobile: ebenfalls den weißen Zwischenraum entfernen.
      Etwas weniger aggressiv, damit der Breadcrumb nicht
      zu dicht am Banner sitzt. */
@media (max-width: 767.98px) {

    body:has(.zl-category-slider) #content .breadcrumb {
        margin-top: -42px !important;
    }
}

@media (max-width: 575.98px) {

    body:has(.zl-category-slider) #content .breadcrumb {
        margin-top: -34px !important;
    }
}

/* =========================================================
   ZOE & LOUIS – HERO
   Infobox mittig / 80 % Deckkraft / Button wie
   "Mehr über Zoe & Louis"
   ========================================================= */

/* Infobox */
.zl-hero-desktop .nivo-caption,
.zl-hero-mobile .nivo-caption {
    top: 50% !important;
    bottom: auto !important;
    left: 0 !important;
    transform: translateY(-50%) !important;

    width: min(54%, 760px) !important;
    max-width: 760px !important;

    padding: 30px 38px 32px !important;
    box-sizing: border-box !important;

    /* 80 % Deckkraft */
    background: rgba(246, 243, 238, 0.80) !important;

    border: 0 !important;
    box-shadow: none !important;
}

/* Überschrift */
.zl-hero-desktop .nivo-caption .title,
.zl-hero-desktop .nivo-caption strong.title,
.zl-hero-mobile .nivo-caption .title,
.zl-hero-mobile .nivo-caption strong.title {
    display: inline-block !important;
    width: auto !important;

    margin: 0 0 18px !important;
    padding: 0 0 13px !important;

    color: #C77752 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.12 !important;

    border-bottom: 1px solid #C77752 !important;
}

/* Beschreibung */
.zl-hero-desktop .nivo-caption .desc,
.zl-hero-mobile .nivo-caption .desc {
    color: #2F2F2F !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.65 !important;
}

.zl-hero-desktop .nivo-caption .desc p,
.zl-hero-mobile .nivo-caption .desc p {
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
}


/* =========================================================
   BUTTON
   Optisch wie "Mehr über Zoe & Louis"
   ========================================================= */

.zl-slider-caption-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 266px !important;
    min-width: 266px !important;
    height: 62px !important;
    min-height: 62px !important;

    margin-top: 28px !important;
    padding: 0 24px !important;

    box-sizing: border-box !important;

    background: #C77752 !important;
    color: #FFFFFF !important;

    border: 0 !important;
    border-radius: 6px !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;

    overflow: hidden !important;

    transition:
        background-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease !important;
}

/* Seidenglänzender JTL-artiger Lichtreflex */
.zl-slider-caption-button::after {
    content: "" !important;
    position: absolute !important;

    top: -20% !important;
    left: -75% !important;

    width: 45% !important;
    height: 140% !important;

    background: rgba(255, 255, 255, .24) !important;

    transform: skewX(-24deg) !important;
    transition: left .55s ease !important;

    pointer-events: none !important;
}

.zl-slider-caption-button:hover,
.zl-slider-caption-button:focus {
    background: #C77752 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 5px 14px rgba(47, 47, 47, .12) !important;
}

.zl-slider-caption-button:hover::after,
.zl-slider-caption-button:focus::after {
    left: 135% !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zl-hero-mobile .nivo-caption {
        top: 50% !important;
        bottom: auto !important;
        left: 0 !important;

        width: 100% !important;
        max-width: none !important;

        transform: translateY(-50%) !important;

        padding: 22px 24px 24px !important;
    }

    .zl-hero-mobile .nivo-caption .title,
    .zl-hero-mobile .nivo-caption strong.title {
        margin-bottom: 15px !important;
        padding-bottom: 10px !important;
    }

    .zl-hero-mobile .nivo-caption .desc {
        line-height: 1.6 !important;
    }

    .zl-slider-caption-button {
        width: 266px !important;
        min-width: 266px !important;
        height: 58px !important;
        min-height: 58px !important;

        margin-top: 24px !important;

        font-size: 16px !important;
    }
}


/* =========================================================
   ENDE ZOE & LOUIS CUSTOM.CSS
   ========================================================= */


/* =========================================================
   ZOE & LOUIS – JTL NOVA PRODUKTSTICKER
   FINALER HOVER-FIX
   ---------------------------------------------------------
   Die NOVA-Klasse productbox-hover verschiebt den Ribbon
   beim Hover. Der Ribbon soll exakt an seiner Ausgangs-
   position bleiben.
   ========================================================= */

/* Normale Position des Status-Ribbons */
#product-list .productbox-ribbon.ribbon {
    position: absolute !important;
    z-index: 50 !important;
    transition: none !important;
    animation: none !important;
}

/* JTL-NOVA-Hover-Regel gezielt überschreiben */
#product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
    top: 1rem !important;
    left: -0.5rem !important;
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Pseudo-Element des JTL-Ribbons nicht animieren */
#product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon::before,
#product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Auch beim normalen Zustand keine Bewegung */
#product-list .productbox-ribbon.ribbon::before,
#product-list .productbox-ribbon.ribbon::after {
    transition: none !important;
    animation: none !important;
}

/* Der Bild-Zoom bleibt davon unberührt. */
#product-list .productbox-inner:hover .productbox-images img {
    transform: scale(1.025) !important;
}

/* Mobile: Status-Ribbon ebenfalls statisch halten */
@media (max-width: 767.98px) {
    #product-list .productbox-ribbon.ribbon,
    #product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================
   ENDE JTL NOVA PRODUKTSTICKER FIX
   ========================================================= */


/* =========================================================
   ZOE & LOUIS – MOBILE KATEGORIENBEREICH
   ---------------------------------------------------------
   Nur eine mobile Überschrift anzeigen.
   JTL liefert hier zwei Varianten der Kategorienüberschrift:
   - productlist-filter-headline (Desktop)
   - box-normal-link (Mobile)
   Die bisherige Desktop-Regel hat die erste versehentlich
   auch auf Mobile eingeblendet.
   ========================================================= */

@media (max-width: 767.98px) {

    /* Doppelte Desktop-Überschrift auf Mobile ausblenden */
    #sidepanel_left .box-categories > .productlist-filter-headline.d-none.d-md-flex {
        display: none !important;
    }

    /* Kategorienbereich sauber als einheitlichen Mobile-Header */
    #sidepanel_left .box-categories {
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #E3DDD5 !important;
        border-bottom: 1px solid #E3DDD5 !important;
    }

    /* Einziger sichtbarer Kategorien-Trigger */
    #sidepanel_left > .box-categories > a.box-normal-link {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 15px 4px 15px 0 !important;
        box-sizing: border-box !important;

        color: #2F2F2F !important;
        background: #FFFFFF !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-decoration: none !important;

        border: 0 !important;
        box-shadow: none !important;
    }

    #sidepanel_left > .box-categories > a.box-normal-link:hover,
    #sidepanel_left > .box-categories > a.box-normal-link:focus {
        color: #C77752 !important;
        background: #FFFFFF !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    /* Vorhandenen JTL-Pfeil sauber positionieren */
    #sidepanel_left > .box-categories > a.box-normal-link::after {
        margin-left: auto !important;
        flex: 0 0 auto !important;
    }

    /* Untergeordnete Kategorien erhalten weiterhin die JTL-Funktion,
       werden aber optisch ruhiger an Zoe & Louis angepasst. */
    #sidepanel_left .box-categories .nav-panel {
        margin: 0 !important;
        padding: 0 0 8px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding: 11px 12px !important;
        border-radius: 4px !important;
    }

    /* Kein zusätzlicher Abstand zwischen Kategorienbox und Filter */
    #sidepanel_left .box-categories + .box-normal-hr,
    #sidepanel_left .box-categories + .box-filter-hr {
        margin-top: 14px !important;
    }
}

/* =========================================================
   ENDE MOBILE KATEGORIENBEREICH
   ========================================================= */


/* =========================================================
   ZOE & LOUIS – HERO FINAL FEINSCHLIFF
   ---------------------------------------------------------
   1. Hero-Überschrift wieder in normaler Markentypografie
      statt der globalen Frank-Handschrift.
   2. Infobox erhält wieder sichtbaren Abstand zum linken
      Slider-Rand.
   ========================================================= */

/* HERO-TITEL: niemals die globale Handschrift übernehmen */
.zl-hero-desktop .nivo-caption .title,
.zl-hero-desktop .nivo-caption strong.title,
.zl-hero-mobile .nivo-caption .title,
.zl-hero-mobile .nivo-caption strong.title {
    font-family: "source-sans-pro", sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
}

/* Infobox: etwas vom linken Bildrand abrücken */
.zl-hero-desktop .nivo-caption {
    left: 32px !important;
    width: min(54%, 760px) !important;
    max-width: 760px !important;
}

/* Mehr Luft innerhalb der Infobox – passend zum Kategorie-Banner */
.zl-hero-desktop .nivo-caption {
    padding-left: 48px !important;
    padding-right: 48px !important;
}

/* MOBILE: Box nicht direkt am Bildrand kleben lassen */
@media (max-width: 767.98px) {
    .zl-hero-mobile .nivo-caption {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

@media (max-width: 575.98px) {
    .zl-hero-mobile .nivo-caption {
        left: 12px !important;
        right: 12px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* =========================================================
   ENDE HERO FINAL FEINSCHLIFF
   ========================================================= */


/* =========================================================
   ZOE & LOUIS – HERO BUTTON FINAL
   ---------------------------------------------------------
   Einheitlicher Zoe-&-Louis-Button für Desktop und Mobile.
   Die vorherige feste Mobile-Größe war zu groß und wird hier
   gezielt überschrieben.
   ========================================================= */

/* Desktop */
.zl-hero-desktop .nivo-caption .zl-slider-caption-button,
.zl-hero-mobile .nivo-caption .zl-slider-caption-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;

    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    margin-top: 22px !important;
    margin-right: 0 !important;
    padding: 0 22px !important;

    background: #C77752 !important;
    color: #FFFFFF !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;

    overflow: hidden !important;
    cursor: pointer !important;
    z-index: 99999 !important;
    pointer-events: auto !important;

    box-shadow: none !important;
    transform: none !important;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease !important;
}

/* Seidenglänzender Zoe-&-Louis-Lichtreflex */
.zl-hero-desktop .nivo-caption .zl-slider-caption-button::after,
.zl-hero-mobile .nivo-caption .zl-slider-caption-button::after {
    content: "" !important;
    position: absolute !important;
    top: -20% !important;
    left: -75% !important;
    width: 45% !important;
    height: 140% !important;

    background: rgba(255,255,255,.24) !important;
    border: 0 !important;
    transform: skewX(-24deg) !important;
    transition: left .55s ease !important;
    pointer-events: none !important;
}

.zl-hero-desktop .nivo-caption .zl-slider-caption-button:hover,
.zl-hero-desktop .nivo-caption .zl-slider-caption-button:focus,
.zl-hero-mobile .nivo-caption .zl-slider-caption-button:hover,
.zl-hero-mobile .nivo-caption .zl-slider-caption-button:focus {
    background: #C77752 !important;
    border-color: #C77752 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 5px 14px rgba(47,47,47,.12) !important;
    transform: translateY(-1px) !important;
}

.zl-hero-desktop .nivo-caption .zl-slider-caption-button:hover::after,
.zl-hero-desktop .nivo-caption .zl-slider-caption-button:focus::after,
.zl-hero-mobile .nivo-caption .zl-slider-caption-button:hover::after,
.zl-hero-mobile .nivo-caption .zl-slider-caption-button:focus::after {
    left: 135% !important;
}

/* Mobile – bewusst kompakter */
@media (max-width: 767.98px) {
    .zl-hero-mobile .nivo-caption .zl-slider-caption-button {
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;

        margin-top: 20px !important;
        padding: 0 18px !important;

        font-size: 16px !important;
        border-radius: 6px !important;
    }
}

@media (max-width: 575.98px) {
    .zl-hero-mobile .nivo-caption .zl-slider-caption-button {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        margin-top: 18px !important;
        font-size: 15.5px !important;
    }
}


/* =========================================================
   ZOE & LOUIS
   PAULA STARTSEITE
   Gründerinnen-Block unter "Unsere Kurse"
   ========================================================= */

.zl-paula-startseite {
    width: 100%;
    margin: 72px 0 0 !important;
    padding: 0 !important;
}

/* =========================================================
   GRID
   ========================================================= */

.zl-paula-startseite .zl-paula-grid {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Beide Spalten */
.zl-paula-startseite .zl-paula-grid > .row {
    align-items: stretch;
}

/* =========================================================
   BILD
   ========================================================= */

.zl-paula-startseite .zl-paula-bild {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 8px;
}

/* Bild selbst */
.zl-paula-startseite .zl-paula-bild img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 560px;
    object-fit: cover;
    object-position: center center;
    border-radius: 8px;
}

/* =========================================================
   RECHTE INHALTSSEITE
   ========================================================= */

.zl-paula-startseite .zl-paula-kicker,
.zl-paula-startseite .zl-paula-title,
.zl-paula-startseite .zl-paula-intro,
.zl-paula-startseite .zl-paula-text,
.zl-paula-startseite .zl-paula-benefits,
.zl-paula-startseite .zl-paula-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================================
   KICKER
   ========================================================= */

.zl-paula-startseite .zl-paula-kicker {
    margin-top: 4px !important;
    margin-bottom: 12px !important;

    color: #C77752 !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.3 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

/* =========================================================
   HAUPTÜBERSCHRIFT
   ========================================================= */

.zl-paula-startseite .zl-paula-title {
    position: relative;

    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(38px, 4vw, 54px) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
}

/* Terracotta-Linie */
.zl-paula-startseite .zl-paula-title::after {
    content: "";

    display: block;

    width: 62px;
    height: 1px;

    margin-top: 17px;

    background: #C77752;
}

/* =========================================================
   EINLEITUNG
   ========================================================= */

.zl-paula-startseite .zl-paula-intro {
    max-width: 650px;

    margin-bottom: 18px !important;

    color: #2F2F2F !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;

    line-height: 1.5 !important;
}

/* =========================================================
   HAUPTTEXT
   ========================================================= */

.zl-paula-startseite .zl-paula-text {
    max-width: 700px;

    margin-bottom: 30px !important;

    color: #444444 !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.65 !important;
}

/* Absätze */
.zl-paula-startseite .zl-paula-text p {
    margin-bottom: 14px !important;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.zl-paula-startseite .zl-paula-benefits {
    margin: 0 0 30px !important;
}

/* einzelne Benefit-Spalten */
.zl-paula-startseite .zl-paula-benefit {
    padding: 0 10px 0 0 !important;

    color: #444444 !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 14px !important;

    line-height: 1.45 !important;
    text-align: center !important;
}

/* Herz / Icon erste Zeile */
.zl-paula-startseite .zl-paula-benefit p:first-child {
    margin-bottom: 7px !important;

    color: #C77752 !important;

    font-size: 27px !important;
    line-height: 1 !important;
}

/* Titel */
.zl-paula-startseite .zl-paula-benefit strong {
    display: block;

    margin-bottom: 5px;

    color: #2F2F2F !important;

    font-size: 15px !important;
    font-weight: 600 !important;
}

/* =========================================================
   BUTTON
   ========================================================= */

.zl-paula-startseite .zl-paula-button {
    position: relative;

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

    width: 250px;
    min-height: 54px;

    margin-top: 2px !important;
    padding: 0 25px !important;

    background: #C77752 !important;
    color: #FFFFFF !important;

    border: 1px solid #C77752 !important;
    border-radius: 6px !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    text-align: center !important;
    text-decoration: none !important;

    overflow: hidden;

    transition:
        background-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease !important;
}

/* Glanz-Effekt */
.zl-paula-startseite .zl-paula-button::after {
    content: "";

    position: absolute;

    top: -20%;
    left: -75%;

    width: 45%;
    height: 140%;

    background: rgba(255,255,255,.24);

    transform: skewX(-24deg);

    transition: left .55s ease;

    pointer-events: none;
}

.zl-paula-startseite .zl-paula-button:hover,
.zl-paula-startseite .zl-paula-button:focus {
    background: #C77752 !important;
    border-color: #C77752 !important;
    color: #FFFFFF !important;

    text-decoration: none !important;

    box-shadow: 0 5px 14px rgba(47,47,47,.12) !important;
}

.zl-paula-startseite .zl-paula-button:hover::after,
.zl-paula-startseite .zl-paula-button:focus::after {
    left: 135%;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .zl-paula-startseite {
        margin-top: 58px !important;
    }

    .zl-paula-startseite .zl-paula-bild img {
        min-height: 500px;
    }

    .zl-paula-startseite .zl-paula-title {
        font-size: 40px !important;
    }

    .zl-paula-startseite .zl-paula-intro {
        font-size: 18px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .zl-paula-startseite {
        margin-top: 48px !important;
    }

    /* Bild zuerst */
    .zl-paula-startseite .zl-paula-bild {
        margin-bottom: 32px !important;
    }

    .zl-paula-startseite .zl-paula-bild img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 4 / 5;

        object-fit: cover;
        object-position: center center;
    }

    .zl-paula-startseite .zl-paula-kicker {
        margin-bottom: 9px !important;
        font-size: 12px !important;
    }

    .zl-paula-startseite .zl-paula-title {
        margin-bottom: 23px !important;
        padding-bottom: 14px !important;

        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    .zl-paula-startseite .zl-paula-title::after {
        width: 52px;
        margin-top: 14px;
    }

    .zl-paula-startseite .zl-paula-intro {
        margin-bottom: 15px !important;

        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .zl-paula-startseite .zl-paula-text {
        margin-bottom: 25px !important;

        font-size: 15.5px !important;
        line-height: 1.6 !important;
    }

    /* Benefits zweispaltig */
    .zl-paula-startseite .zl-paula-benefits {
        margin-bottom: 27px !important;
    }

    .zl-paula-startseite .zl-paula-benefit {
        margin-bottom: 22px !important;
        padding-right: 8px !important;
    }

    .zl-paula-startseite .zl-paula-button {
        width: 250px;
        min-height: 54px;
    }
}

/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 575.98px) {

    .zl-paula-startseite {
        margin-top: 40px !important;
    }

    .zl-paula-startseite .zl-paula-bild img {
        aspect-ratio: 1 / 1.15;
    }

    .zl-paula-startseite .zl-paula-title {
        font-size: 31px !important;
    }

    .zl-paula-startseite .zl-paula-intro {
        font-size: 17px !important;
    }

    .zl-paula-startseite .zl-paula-benefit {
        font-size: 13.5px !important;
    }

    .zl-paula-startseite .zl-paula-button {
        width: 100%;
    }
}

/* =========================================================
   PAULA STARTSEITE – BILD DESKTOP AUSBALANCIEREN
   ========================================================= */

@media (min-width: 992px) {

    .zl-paula-startseite .zl-paula-bild {
        height: 600px !important;
        max-height: 600px !important;
        overflow: hidden !important;
    }

    .zl-paula-startseite .zl-paula-bild img {
        width: 100% !important;
        height: 600px !important;
        min-height: 0 !important;
        max-height: 600px !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .zl-paula-startseite .zl-paula-bild {
        height: 540px !important;
        max-height: 540px !important;
    }

    .zl-paula-startseite .zl-paula-bild img {
        height: 540px !important;
        max-height: 540px !important;
    }

}

 /* =========================================================
    PAULA STARTSEITE – TEXTGEWICHT
    ========================================================= */

.zl-paula-startseite .zl-paula-text,
.zl-paula-startseite .zl-paula-text p,
.zl-paula-startseite .zl-paula-text strong,
.zl-paula-startseite .zl-paula-text b {
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #444444 !important;
}

.zl-paula-startseite .zl-paula-text strong,
.zl-paula-startseite .zl-paula-text b {
    font-weight: 400 !important;
}


 /* =========================================================
    PAULA STARTSEITE – VORTEILE MOBILE
    2 × 2 ANORDNUNG
    ========================================================= */

@media (max-width: 767.98px) {

    .zl-paula-startseite .zl-paula-benefits {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 18px !important;
        row-gap: 28px !important;
        width: 100% !important;
        margin: 0 0 30px !important;
        padding: 0 !important;
    }

    .zl-paula-startseite .zl-paula-benefit {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 4px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .zl-paula-startseite .zl-paula-benefit p:first-child {
        margin: 0 0 7px !important;
        color: #C77752 !important;
        font-size: 25px !important;
        line-height: 1 !important;
    }

    .zl-paula-startseite .zl-paula-benefit strong,
    .zl-paula-startseite .zl-paula-benefit b {
        display: block !important;
        margin-bottom: 5px !important;
        color: #2F2F2F !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    .zl-paula-startseite .zl-paula-benefit {
        color: #444444 !important;
        font-size: 13.5px !important;
        line-height: 1.45 !important;
    }

}

@media (max-width: 380px) {

    .zl-paula-startseite .zl-paula-benefits {
        column-gap: 10px !important;
        row-gap: 24px !important;
    }

    .zl-paula-startseite .zl-paula-benefit {
        padding: 0 !important;
    }

    .zl-paula-startseite .zl-paula-benefit strong,
    .zl-paula-startseite .zl-paula-benefit b {
        font-size: 14px !important;
    }

    .zl-paula-startseite .zl-paula-benefit {
        font-size: 13px !important;
    }

}


/* =========================================================
   PAULA STARTSEITE – BUTTON MOBILE EINRÜCKEN
   ========================================================= */

@media (max-width: 767.98px) {

    .zl-paula-startseite .zl-paula-button {
        display: flex !important;
        width: calc(100% - 32px) !important;
        max-width: none !important;
        min-height: 54px !important;
        margin: 2px 16px 0 !important;
        box-sizing: border-box !important;
    }

}

@media (max-width: 575.98px) {

    .zl-paula-startseite .zl-paula-button {
        width: calc(100% - 28px) !important;
        


margin-left: 14px !important;
        margin-right: 14px !important;
    }

}


/* =========================================================
   PAULA STARTSEITE – ABSTÄNDE HARMONISIEREN
   ========================================================= */

/* Desktop */
@media (min-width: 768px) {

    .zl-paula-startseite .zl-paula-title {
        margin-bottom: 24px !important;
    }

    .zl-paula-startseite .zl-paula-intro {
        margin-bottom: 20px !important;
    }

    .zl-paula-startseite .zl-paula-text {
        margin-bottom: 26px !important;
    }

    .zl-paula-startseite .zl-paula-benefits {
        margin-bottom: 26px !important;
    }

    .zl-paula-startseite .zl-paula-button {
        margin-top: 0 !important;
    }

}


/* Mobile */
@media (max-width: 767.98px) {

    .zl-paula-startseite .zl-paula-title {
        margin-bottom: 20px !important;
    }

    .zl-paula-startseite .zl-paula-intro {
        margin-bottom: 17px !important;
    }

    .zl-paula-startseite .zl-paula-text {
        margin-bottom: 24px !important;
    }

    .zl-paula-startseite .zl-paula-benefits {
        margin-bottom: 26px !important;
    }

    .zl-paula-startseite .zl-paula-button {
        margin-top: 0 !important;
    }

}


/* Kleine Smartphones */
@media (max-width: 575.98px) {

    .zl-paula-startseite .zl-paula-title {
        margin-bottom: 18px !important;
    }

    .zl-paula-startseite .zl-paula-intro {
        margin-bottom: 16px !important;
    }

    .zl-paula-startseite .zl-paula-text {
        margin-bottom: 22px !important;
    }

    .zl-paula-startseite .zl-paula-benefits {
        margin-bottom: 24px !important;
    }

}

/* =========================================================
   PAULA STARTSEITE
   BENEFIT-ICONS – SVG LINE ART
   ========================================================= */

.zl-paula-startseite .zl-paula-benefit-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 12px !important;
    padding: 0 !important;
}

.zl-paula-startseite .zl-paula-benefit-icon img {
    display: block !important;
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    object-fit: contain !important;
    border: 0 !important;
}


/* Mobile */

@media (max-width: 767.98px) {

    .zl-paula-startseite .zl-paula-benefit-icon {
        width: 86px !important;
        height: 86px !important;
        margin-bottom: 10px !important;
    }

    .zl-paula-startseite .zl-paula-benefit-icon img {
        width: 86px !important;
        height: 86px !important;
        max-width: 86px !important;
    }

}


/* Kleine Smartphones */

@media (max-width: 575.98px) {

    .zl-paula-startseite .zl-paula-benefit-icon {
        width: 78px !important;
        height: 78px !important;
    }

    .zl-paula-startseite .zl-paula-benefit-icon img {
        width: 78px !important;
        height: 78px !important;
        max-width: 78px !important;
    }

}

/* =========================================================
   PAULA STARTSEITE
   MOBILE BENEFITS – OPC GRID AUF 2 × 2 ZWINGEN
   ========================================================= */

@media (max-width: 767.98px) {

    /* Das eigentliche OPC-Grid */
    .zl-paula-startseite .zl-paula-benefits .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 32px 12px !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Die vier Spalten */
    .zl-paula-startseite .zl-paula-benefits .row > [class*="col-"] {
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        box-sizing: border-box !important;
    }

    /* Benefit selbst */
    .zl-paula-startseite .zl-paula-benefit {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* SVG */
    .zl-paula-startseite .zl-paula-benefit-icon {
        width: 82px !important;
        height: 82px !important;
        margin: 0 auto 10px !important;
    }

    .zl-paula-startseite .zl-paula-benefit-icon img {
        width: 82px !important;
        height: 82px !important;
        max-width: 82px !important;
    }

    /* Titel */
    .zl-paula-startseite .zl-paula-benefit strong,
    .zl-paula-startseite .zl-paula-benefit b {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

}


/* Sehr kleine Smartphones */
@media (max-width: 575.98px) {

    .zl-paula-startseite .zl-paula-benefits .row {
        column-gap: 8px !important;
        row-gap: 28px !important;
    }

    .zl-paula-startseite .zl-paula-benefits .row > [class*="col-"] {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .zl-paula-startseite .zl-paula-benefit-icon {
        width: 76px !important;
        height: 76px !important;
    }

    .zl-paula-startseite .zl-paula-benefit-icon img {
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
    }

}
/* =========================================================
   ENDE PAULA STARTSEITE
   ========================================================= */


/* =========================================================
   ENDE HERO BUTTON FINAL
   ========================================================= */


/* =========================================================
   ZOE & LOUIS – FINALER KATEGORIE-RIBBON-FIX
   ---------------------------------------------------------
   Ziel:
   - Status-Ribbons bleiben beim Hover sichtbar
   - keine Verschiebung / Animation des Ribbons
   - JTL-NOVA-Hover-Layer wird entfernt
   - negative Ribbon-Position wird nicht mehr abgeschnitten
   - Bild-Zoom bleibt erhalten
   - Mobile bleibt unangetastet
   ========================================================= */

@media (min-width: 768px) {

    /* 1. JTL-NOVA-Hover-Layer über dem Produkt entfernen */
    #product-list
    .productbox.productbox-hover:hover
    .productbox-inner::before {
        display: none !important;
        content: none !important;
    }

    /* 2. Die äußeren Ebenen dürfen das Ribbon nicht abschneiden */
    #product-list .productbox-inner {
        overflow: visible !important;
    }

    #product-list .productbox-image {
        overflow: visible !important;
    }

    /* 3. Nur die eigentlichen Bild-Ebenen weiterhin beschneiden,
          damit der Bild-Zoom sauber innerhalb des Bildes bleibt */
    #product-list .productbox-images,
    #product-list .productbox-image.square,
    #product-list .productbox-image.square .inner,
    #product-list .productbox-image.square .first-wrapper,
    #product-list .productbox-image.square .first-wrapper .inner,
    #product-list .productbox-image.square .first-wrapper .inner picture {
        overflow: hidden !important;
    }

    /* 4. Ribbon selbst statisch und immer sichtbar */
    #product-list .productbox-ribbon.ribbon,
    #product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
        position: absolute !important;
        top: 1rem !important;
        left: -0.5rem !important;
        right: auto !important;
        bottom: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 100 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 5. Auch die JTL-Ribbon-Pseudo-Elemente nicht verändern */
    #product-list .productbox-ribbon.ribbon::before,
    #product-list .productbox-ribbon.ribbon::after,
    #product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon::before,
    #product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon::after {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* 6. Der gewünschte dezente Bild-Zoom bleibt erhalten */
    #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025) !important;
    }
}

/* Mobile: keine zusätzliche Bewegung des Ribbons */
@media (max-width: 767.98px) {

    #product-list .productbox-ribbon.ribbon,
    #product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================
   ENDE FINALER KATEGORIE-RIBBON-FIX
   ========================================================= */


/* =========================================================
   ZOE & LOUIS – PRODUKTRIBBON FINAL V2
   ---------------------------------------------------------
   Ziel:
   - NEU / AUF LAGER / AUSVERKAUFT bleibt beim Hover sichtbar
   - keine Verschiebung durch NOVA-Hover
   - kein Abschneiden des linken Buchstabens
   - Bild-Zoom und Produkt-Hover bleiben erhalten
   --------------------------------------------------------- */

/* Desktop: Ribbon vollständig innerhalb der Produktkarte halten.
   Wichtig: left:0 statt negativem left-Wert – dadurch kann JTL/NOVA
   den ersten Buchstaben nicht mehr am Kartenrand abschneiden. */
@media (min-width: 768px) {

    #product-list .productbox {
        position: relative !important;
    }

    #product-list .productbox-inner {
        position: relative !important;
        overflow: visible !important;
    }

    #product-list .productbox-image {
        position: relative !important;
        overflow: visible !important;
    }

    /* NOVA-Hoverfläche vollständig deaktivieren */
    #product-list .productbox.productbox-hover:hover .productbox-inner::before,
    #product-list .productbox.productbox-hover:hover .productbox-inner::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Ribbon: feste Position, keine Animation, immer sichtbar */
    #product-list .productbox-ribbon.ribbon,
    #product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
        position: absolute !important;
        top: 16px !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        z-index: 1000 !important;

        transform: none !important;
        transition: none !important;
        animation: none !important;

        pointer-events: none !important;
    }

    /* Auch JTL-NOVA darf beim Hover keine Positionswerte setzen */
    #product-list .productbox.productbox-hover:hover
    .productbox-ribbon.ribbon {
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        inset-block-start: 16px !important;
        inset-block-end: auto !important;
    }

    /* Ribbon-Pseudo-Elemente ebenfalls statisch */
    #product-list .productbox-ribbon.ribbon::before,
    #product-list .productbox-ribbon.ribbon::after,
    #product-list .productbox.productbox-hover:hover
    .productbox-ribbon.ribbon::before,
    #product-list .productbox.productbox-hover:hover
    .productbox-ribbon.ribbon::after {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Nur die Bildfläche darf den Bild-Zoom beschneiden */
    #product-list .productbox-images,
    #product-list .productbox-image.square,
    #product-list .productbox-image.square .inner,
    #product-list .productbox-image.square .first-wrapper,
    #product-list .productbox-image.square .first-wrapper .inner,
    #product-list .productbox-image.square .first-wrapper .inner picture {
        overflow: hidden !important;
    }

    /* Bild-Zoom bleibt erhalten */
    #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025) !important;
    }
}

/* Mobile: keine Änderung an der bisherigen Darstellung,
   nur Animation/Transformation des Ribbons unterbinden. */
@media (max-width: 767.98px) {

    #product-list .productbox-ribbon.ribbon,
    #product-list .productbox.productbox-hover:hover
    .productbox-ribbon.ribbon {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    #product-list .productbox-ribbon.ribbon::before,
    #product-list .productbox-ribbon.ribbon::after {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTKARTEN
   NOVA-HOVER KOMPLETT DEAKTIVIEREN
   ========================================================= */

@media (min-width: 768px) {

    /* NOVA-Hover-Rahmen vollständig abschalten */
    #product-list .productbox.productbox-hover:hover .productbox-inner::before {
        display: none !important;
        content: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Produktkarte selbst nicht verschieben */
    #product-list .productbox.productbox-hover:hover .productbox-inner {
        transform: none !important;
    }

    /* Ribbon immer an derselben Stelle */
    #product-list .productbox .productbox-ribbon.ribbon {
        position: absolute !important;
        top: 16px !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        z-index: 9999 !important;

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Besonders wichtig für AUF LAGER = ribbon-8 */
    #product-list .productbox .ribbon-8.productbox-ribbon,
    #product-list .productbox.productbox-hover:hover .ribbon-8.productbox-ribbon {
        top: 16px !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Alle anderen Sticker ebenfalls festsetzen */
    #product-list .productbox .ribbon-1.productbox-ribbon,
    #product-list .productbox .ribbon-2.productbox-ribbon,
    #product-list .productbox .ribbon-3.productbox-ribbon,
    #product-list .productbox .ribbon-4.productbox-ribbon,
    #product-list .productbox .ribbon-5.productbox-ribbon,
    #product-list .productbox .ribbon-6.productbox-ribbon,
    #product-list .productbox .ribbon-7.productbox-ribbon,
    #product-list .productbox .ribbon-8.productbox-ribbon,
    #product-list .productbox .ribbon-9.productbox-ribbon {
        position: absolute !important;
        top: 16px !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Ribbon-Zipfel */
    #product-list .productbox .productbox-ribbon::before,
    #product-list .productbox .productbox-ribbon::after {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Bild-Zoom bleibt erhalten */
    #product-list .productbox:hover
    .productbox-images img {
        transform: scale(1.025) !important;
    }
}


/* =========================================================
   ZOE & LOUIS – PRODUKT-RIBBONS
   FINALER FIX
   Ribbon darf aus dem Bildbereich herausragen,
   Bilder selbst bleiben sauber beschnitten.
   ========================================================= */

@media (min-width: 768px) {

    /* Der Container darf den Ribbon nicht abschneiden */
    body:has(#result-wrapper) #product-list .productbox-image {
        overflow: visible !important;
    }

    /* Das eigentliche Bild bleibt sauber beschnitten */
    body:has(#result-wrapper) #product-list .productbox-images {
        overflow: hidden !important;
    }

    body:has(#result-wrapper) #product-list .productbox-images .square,
    body:has(#result-wrapper) #product-list .productbox-images .inner,
    body:has(#result-wrapper) #product-list .productbox-images picture {
        overflow: hidden !important;
    }

    /* Ribbon exakt nach JTL-Vorgabe positionieren */
    body:has(#result-wrapper) #product-list .productbox-ribbon.ribbon {
        position: absolute !important;
        top: 1rem !important;
        left: -0.5rem !important;
        right: auto !important;
        bottom: auto !important;

        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;

        z-index: 20 !important;

        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Beim Hover darf JTL den Ribbon nicht verschieben */
    body:has(#result-wrapper)
    #product-list
    .productbox.productbox-hover:hover
    .productbox-ribbon.ribbon {
        top: 1rem !important;
        left: -0.5rem !important;
        right: auto !important;
        bottom: auto !important;

        transform: none !important;
        transition: none !important;
        animation: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Auch die Ribbon-Zipfel bleiben unverändert */
    body:has(#result-wrapper)
    #product-list
    .productbox-ribbon.ribbon::before,
    body:has(#result-wrapper)
    #product-list
    .productbox-ribbon.ribbon::after {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS
   PRODUKTBOX – HOVER-RIBBON ENDGÜLTIG FIXIEREN
   ========================================================= */

@media (min-width: 768px) {

    /* NOVA-Hover-Fläche vollständig deaktivieren */
    #product-list .productbox.productbox-hover:hover .productbox-inner::before,
    #product-list .productbox.productbox-hover:hover .productbox-inner::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: none !important;
    }

    /* Ribbon immer an derselben Position */
    #product-list .productbox.productbox-hover .productbox-ribbon.ribbon {
        position: absolute !important;
        top: 1rem !important;
        left: -0.5rem !important;
        right: auto !important;
        bottom: auto !important;

        z-index: 100 !important;

        transform: none !important;
        transition: none !important;
        animation: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Explizit auch während Hover */
    #product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
        position: absolute !important;
        top: 1rem !important;
        left: -0.5rem !important;
        right: auto !important;
        bottom: auto !important;

        z-index: 100 !important;

        transform: none !important;
        transition: none !important;
        animation: none !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Der Bildcontainer darf den Ribbon nicht abschneiden */
    #product-list .productbox-image {
        overflow: visible !important;
    }

    /* Bilder selbst bleiben sauber */
    #product-list .productbox-images,
    #product-list .productbox-images .square,
    #product-list .productbox-images .inner {
        overflow: hidden !important;
    }
}

/* =========================================================
   ZOE & LOUIS – RIBBON TEST 1
   Ribbon vollständig innerhalb der Produktkarte
   ========================================================= */

#product-list .productbox-ribbon.ribbon,
#product-list .productbox.productbox-hover:hover .productbox-ribbon.ribbon {
    position: absolute !important;

    top: 16px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 9999 !important;

    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* JTL-Hover darf die Position nicht verändern */
#product-list .productbox.productbox-hover:hover
.productbox-ribbon.ribbon {
    top: 16px !important;
    left: 0 !important;
    transform: none !important;
}

/* =========================================================
   ZOE & LOUIS – STARTSEITE KURS-STREAM
   RIBBON / HOVER FINAL FIX
   ========================================================= */

/* Die Produktkarte selbst bleibt beim Hover an ihrem Platz */
.zl-course-stream .productbox,
.zl-course-stream .productbox:hover {
    transform: none !important;
}

/* Ribbon darf nicht von der Produktkarte abgeschnitten werden */
.zl-course-stream .productbox {
    overflow: visible !important;
}

/* Auch der direkte Ribbon-Elterncontainer darf ihn nicht abschneiden */
.zl-course-stream .productbox-image {
    overflow: visible !important;
}

/* Die eigentlichen Bilder bleiben weiterhin sauber beschnitten */
.zl-course-stream .productbox-images,
.zl-course-stream .square-image,
.zl-course-stream .first-wrapper,
.zl-course-stream .square-image .inner,
.zl-course-stream .first-wrapper .inner {
    overflow: hidden !important;
}

/* Ribbon immer exakt an seiner normalen JTL-Position */
.zl-course-stream .productbox-ribbon.ribbon,
.zl-course-stream .productbox:hover .productbox-ribbon.ribbon {
    position: absolute !important;
    top: 1rem !important;
    left: -0.5rem !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 100 !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover darf auch die Ribbon-Pseudoelemente nicht verändern */
.zl-course-stream .productbox-ribbon.ribbon::before,
.zl-course-stream .productbox-ribbon.ribbon::after {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* =========================================================
   ZOE & LOUIS – HEADER / INNENSEITEN FIX
   Kategorie-, Produkt- und Kursseiten:
   Header bleibt im normalen Seitenfluss.
   Nur die Startseite darf den Header über dem Hero tragen.
   ========================================================= */

body:not([data-page="18"]) #jtl-nav-wrapper,
body:not([data-page="18"]) #jtl-nav-wrapper.zl-header-scrolled {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    background: #F6F3EE !important;
    box-shadow: 0 2px 12px rgba(47,47,47,.06) !important;
}

/* Der Header soll auf Innenseiten keinen Inhalt überlagern */
body:not([data-page="18"]) #main-wrapper {
    position: relative !important;
    z-index: 1 !important;
}












/* =========================================================
   ZOE & LOUIS – PRODUKTDETAILSEITE / PHASE 1
   Reiner Artikelbereich – JTL/NOVA-Datenlogik bleibt erhalten
   Fokus: Galerie + Produktinformationen + Varianten + Kaufbereich
   ========================================================= */

/* ---------------------------------------------------------
   1. PRODUKTDETAIL – GRUNDRAHMEN
   Der Produktdetailbereich wird über die vorhandene JTL-Galerie
   erkannt. Es werden keine Produktdaten hardcodiert.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #content {
    color: #444;
}

body:has(#gallery_preview_wrapper) #content > .container,
body:has(#gallery_preview_wrapper) #content > .container-fluid {
    padding-top: 18px;
}

body:has(#gallery_preview_wrapper) .product-primary,
body:has(#gallery_preview_wrapper) .product-detail {
    position: relative;
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .breadcrumb {
    margin: 0 0 30px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.5;
    border: 0 !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a:hover {
    color: #C77752 !important;
}

/* ---------------------------------------------------------
   3. PRODUKT-GALERIE
   ---------------------------------------------------------
   WICHTIG:
   Die JTL/NOVA/Slick-Galerie übernimmt Bildgröße, Position,
   object-fit und Slide-Transform vollständig selbst.
   Wir gestalten hier ausschließlich die äußere Optik.
   --------------------------------------------------------- */

/* Nur der äußere Galerie-Rahmen */
body:has(#gallery_preview_wrapper) #gallery_preview,
body:has(#gallery_preview_wrapper) #gallery {
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
}

/* Keine eigene Positionierung oder Skalierung des JTL-Hauptbildes.
   Dadurch bleiben Slick und die native JTL-Galerielogik intakt. */

/* Thumbnail-Optik */
body:has(#gallery_preview_wrapper) .product-thumbnails {
    margin-top: 14px !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image {
    margin-right: 10px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    transition: border-color .2s ease, opacity .2s ease;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image:hover {
    border-color: #C77752 !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current .square-image,
body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current {
    border-color: #C77752 !important;
}

/* ---------------------------------------------------------
   4. PRODUKT-INFORMATIONEN RECHTS
   --------------------------------------------------------- */


body:has(#gallery_preview_wrapper) .product-info,
body:has(#gallery_preview_wrapper) .product-primary .product-info {
    padding-left: 28px;
}

body:has(#gallery_preview_wrapper) .product-title,
body:has(#gallery_preview_wrapper) .product-info h1 {
    margin: 0 0 14px !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

body:has(#gallery_preview_wrapper) .product-title::after,
body:has(#gallery_preview_wrapper) .product-info h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: #C77752;
}

/* Artikelnummer / Kategorie / Hersteller */
body:has(#gallery_preview_wrapper) .product-reference,
body:has(#gallery_preview_wrapper) .product-manufacturer,
body:has(#gallery_preview_wrapper) .product-meta {
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .product-reference a,
body:has(#gallery_preview_wrapper) .product-manufacturer a,
body:has(#gallery_preview_wrapper) .product-meta a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   5. KURZBESCHREIBUNG
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-description-short {
    margin: 22px 0 26px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body:has(#gallery_preview_wrapper) .product-description-short p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. VARIANTEN – JTL-RADIOS ALS CHOICE CARDS
   Die vorhandenen Inputs bleiben unverändert funktional.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-variations,
body:has(#gallery_preview_wrapper) .variations {
    margin: 22px 0 28px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .form-group,
body:has(#gallery_preview_wrapper) .variations .form-group {
    margin-bottom: 18px !important;
}

body:has(#gallery_preview_wrapper) .product-variations label,
body:has(#gallery_preview_wrapper) .variations label {
    color: #2F2F2F !important;
}

body:has(#gallery_preview_wrapper) .product-variations input[type="radio"],
body:has(#gallery_preview_wrapper) .variations input[type="radio"] {
    accent-color: #C77752;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control,
body:has(#gallery_preview_wrapper) .variations .custom-control {
    margin-bottom: 10px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label:hover,
body:has(#gallery_preview_wrapper) .variations .custom-control-label:hover {
    border-color: #C77752 !important;
    background: #FAF7F3 !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-input:checked ~ .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-input:checked ~ .custom-control-label {
    border-color: #C77752 !important;
    background: #FBF7F3 !important;
    box-shadow: inset 3px 0 0 #C77752 !important;
}

/* Falls NOVA keine custom-control-Struktur verwendet:
   alternative JTL-Variationselemente */
body:has(#gallery_preview_wrapper) .product-variations .radio,
body:has(#gallery_preview_wrapper) .variations .radio {
    margin-bottom: 10px;
}

body:has(#gallery_preview_wrapper) .product-variations .radio label,
body:has(#gallery_preview_wrapper) .variations .radio label {
    display: block;
    padding: 13px 16px;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    background: #FFF;
}

/* ---------------------------------------------------------
   7. PREIS
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-price,
body:has(#gallery_preview_wrapper) .price {
    margin: 28px 0 0 !important;
    padding-top: 22px !important;
    border-top: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) .product-price .price,
body:has(#gallery_preview_wrapper) .product-price .price-value {
    color: #2F2F2F !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

body:has(#gallery_preview_wrapper) .product-price small,
body:has(#gallery_preview_wrapper) .product-price .price-note {
    color: #666 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   8. VERFÜGBARKEIT / LIEFERZEIT
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-stock {
    margin-top: 22px !important;
    padding: 18px 0 !important;
    border-top: 1px solid #E3DDD5 !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #444 !important;
}

body:has(#gallery_preview_wrapper) .product-stock .text-success,
body:has(#gallery_preview_wrapper) .product-stock .stock-status {
    color: #6F8B68 !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .product-stock a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   9. MENGE + WARENKORB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form {
    margin-top: 24px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .quantity,
body:has(#gallery_preview_wrapper) #buy_form .input-group {
    min-height: 54px;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form .quantity input {
    height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    color: #2F2F2F !important;
    background: #FFF !important;
    text-align: center;
    font-size: 17px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
    min-height: 54px !important;
    padding: 13px 28px !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket:hover,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"]:hover,
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"]:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-left: 0;
        padding-top: 32px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #content > .container,
    body:has(#gallery_preview_wrapper) #content > .container-fluid {
        padding-top: 10px;
    }

    body:has(#gallery_preview_wrapper) .breadcrumb {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    body:has(#gallery_preview_wrapper) #gallery,
    body:has(#gallery_preview_wrapper) #gallery_preview {
        border-radius: 6px !important;
    }

    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-top: 26px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) .product-title::after,
    body:has(#gallery_preview_wrapper) .product-info h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        font-size: 16px !important;
    }

    body:has(#gallery_preview_wrapper) .product-price .price,
    body:has(#gallery_preview_wrapper) .product-price .price-value {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
    body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        font-size: 15.5px !important;
    }

    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
    body:has(#gallery_preview_wrapper) .variations .custom-control-label {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ---------------------------------------------------------
   11. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#gallery_preview_wrapper) .product-thumbnails .square-image,
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"],
    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL PRODUKTE
   PHASE 1 V3 – BESCHREIBUNG / TABS / MENGENFELD
   ========================================================= */

/* ---------------------------------------------------------
   12. BESCHREIBUNG – LESBARER SATZ
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #tab-description,
body:has(#gallery_preview_wrapper) #tab-description .product-description,
body:has(#gallery_preview_wrapper) #tab-description .desc,
body:has(#gallery_preview_wrapper) #tab-description p {
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

body:has(#gallery_preview_wrapper) #tab-description p {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body:has(#gallery_preview_wrapper) #tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   13. PRODUKT-TABS – ZOE & LOUIS
   Gelbe JTL-Aktivlinie wird vollständig ersetzt.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]),
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) .nav-link,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0 0 15px !important;
    margin: 0 34px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:focus,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:focus {
    color: #C77752 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active {
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   14. MENGENFELD – MINUS / ZAHL / PLUS
   JTL data-count-down / data-count-up bleibt vollständig aktiv.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form .form-counter,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    overflow: hidden !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-append,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #C77752 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Wir verwenden bewusst einfache Zeichen statt einer Abhängigkeit
   von der geladenen Font-Awesome-Version. */
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]::before {
    content: "−" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]::before {
    content: "+" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] .fas {
    display: none !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]:hover {
    background: #FBF7F3 !important;
    color: #A95F40 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #E3DDD5 !important;
    border-right: 1px solid #E3DDD5 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Native Spinner ebenfalls ausblenden – unsere +/- Steuerung bleibt sichtbar. */
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-inner-spin-button,
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ---------------------------------------------------------
   15. MENGE + BUTTON AUF MOBIL
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #buy_form .form-counter,
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
        max-width: 100% !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
        width: 48px !important;
        min-width: 48px !important;
    }

    body:has(#gallery_preview_wrapper) #tab-description,
    body:has(#gallery_preview_wrapper) #tab-description .product-description,
    body:has(#gallery_preview_wrapper) #tab-description .desc,
    body:has(#gallery_preview_wrapper) #tab-description p {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}


/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL
   TABS – GELBE JTL-LINIE ERSETZEN
   ========================================================= */

body:has(#buy_form) .tab-navigation .nav-link.active::after,
body:has(#buy_form) .tab-navigation .nav-link:hover::after,
body:has(#buy_form) .tab-navigation .nav-link:focus::after {
    border-color: #C77752 !important;
    background-color: #C77752 !important;
}

/* Grundlinie der Tabs */
body:has(#buy_form) .tab-navigation .nav-link::after {
    border-color: #C77752 !important;
}

/* Keine gelbe Hover-Farbe */
body:has(#buy_form) .tab-navigation .nav-link:hover {
    color: #C77752 !important;
}


/* Aktiver Tab – Zoe & Louis */
body:has(#buy_form) #product-tabs .nav-link.active::after,
body:has(#buy_form) #product-tabs .nav-link:hover::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: 100% !important;
    height: 4px !important;

    border: 0 !important;
    background: #C77752 !important;
    box-shadow: none !important;
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL
   ARTIKELMERKMALE / BADGES
   ========================================================= */

body:has(#buy_form) .product-attributes .badge.badge-primary {
    display: inline-block !important;
    padding: 4px 9px !important;
    border: 0 !important;
    border-radius: 3px !important;

    background: #8FA588 !important;
    color: #FFFFFF !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

/* Hover ebenfalls ruhig halten */
body:has(#buy_form) .product-attributes .badge.badge-primary:hover,
body:has(#buy_form) .product-attributes .badge.badge-primary:focus {
    background: #7D9477 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}


/* =========================================================
   ZOE & LOUIS – JTL BEWERTUNGSBUTTON FINAL
   Entfernt den gelben JTL-Hover-Effekt
   ========================================================= */

body:has(#buy_form) #article_rating button.btn-outline-primary {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;
    padding: 11px 22px !important;

    background-color: #FFFFFF !important;
    background-image: none !important;

    border: 1px solid #C77752 !important;
    border-radius: 6px !important;

    color: #C77752 !important;

    font-family: "source-sans-pro", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;
    overflow: hidden !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}

/* JTL-Hoverfläche komplett deaktivieren */
body:has(#buy_form) #article_rating button.btn-outline-primary::after {
    content: none !important;
    display: none !important;
    background-color: transparent !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    transform: none !important;
    transition: none !important;
}

/* Normaler Hover – Zoe & Louis */
body:has(#buy_form) #article_rating button.btn-outline-primary:hover {
    background-color: #C77752 !important;
    background-image: none !important;

    border-color: #C77752 !important;
    color: #FFFFFF !important;

    box-shadow: 0 3px 10px rgba(47,47,47,.08) !important;
}

/* Auch Hover-Pseudo-Element sicher neutralisieren */
body:has(#buy_form) #article_rating button.btn-outline-primary:hover::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-color: transparent !important;
}

/* Fokus / Active */
body:has(#buy_form) #article_rating button.btn-outline-primary:focus,
body:has(#buy_form) #article_rating button.btn-outline-primary:active {
    background-color: #FFFFFF !important;
    background-image: none !important;

    border-color: #C77752 !important;
    color: #C77752 !important;

    box-shadow: 0 0 0 2px rgba(199,119,82,.15) !important;
}





/* =========================================================
   ZOE & LOUIS – MASTER CSS
   Produktdetailseiten + Kategorieseiten
   Basis: zuletzt bestätigte Versionen
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAILSEITE / PHASE 1
   Reiner Artikelbereich – JTL/NOVA-Datenlogik bleibt erhalten
   Fokus: Galerie + Produktinformationen + Varianten + Kaufbereich
   ========================================================= */

/* ---------------------------------------------------------
   1. PRODUKTDETAIL – GRUNDRAHMEN
   Der Produktdetailbereich wird über die vorhandene JTL-Galerie
   erkannt. Es werden keine Produktdaten hardcodiert.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #content {
    color: #444;
}

body:has(#gallery_preview_wrapper) #content > .container,
body:has(#gallery_preview_wrapper) #content > .container-fluid {
    padding-top: 18px;
}

body:has(#gallery_preview_wrapper) .product-primary,
body:has(#gallery_preview_wrapper) .product-detail {
    position: relative;
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .breadcrumb {
    margin: 0 0 30px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.5;
    border: 0 !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a:hover {
    color: #C77752 !important;
}

/* ---------------------------------------------------------
   3. PRODUKT-GALERIE
   ---------------------------------------------------------
   WICHTIG:
   Die JTL/NOVA/Slick-Galerie übernimmt Bildgröße, Position,
   object-fit und Slide-Transform vollständig selbst.
   Wir gestalten hier ausschließlich die äußere Optik.
   --------------------------------------------------------- */

/* Nur der äußere Galerie-Rahmen */
body:has(#gallery_preview_wrapper) #gallery_preview,
body:has(#gallery_preview_wrapper) #gallery {
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
}

/* Keine eigene Positionierung oder Skalierung des JTL-Hauptbildes.
   Dadurch bleiben Slick und die native JTL-Galerielogik intakt. */

/* Thumbnail-Optik */
body:has(#gallery_preview_wrapper) .product-thumbnails {
    margin-top: 14px !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image {
    margin-right: 10px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    transition: border-color .2s ease, opacity .2s ease;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image:hover {
    border-color: #C77752 !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current .square-image,
body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current {
    border-color: #C77752 !important;
}

/* ---------------------------------------------------------
   4. PRODUKT-INFORMATIONEN RECHTS
   --------------------------------------------------------- */


body:has(#gallery_preview_wrapper) .product-info,
body:has(#gallery_preview_wrapper) .product-primary .product-info {
    padding-left: 28px;
}

body:has(#gallery_preview_wrapper) .product-title,
body:has(#gallery_preview_wrapper) .product-info h1 {
    margin: 0 0 14px !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

body:has(#gallery_preview_wrapper) .product-title::after,
body:has(#gallery_preview_wrapper) .product-info h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: #C77752;
}

/* Artikelnummer / Kategorie / Hersteller */
body:has(#gallery_preview_wrapper) .product-reference,
body:has(#gallery_preview_wrapper) .product-manufacturer,
body:has(#gallery_preview_wrapper) .product-meta {
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .product-reference a,
body:has(#gallery_preview_wrapper) .product-manufacturer a,
body:has(#gallery_preview_wrapper) .product-meta a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   5. KURZBESCHREIBUNG
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-description-short {
    margin: 22px 0 26px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body:has(#gallery_preview_wrapper) .product-description-short p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. VARIANTEN – JTL-RADIOS ALS CHOICE CARDS
   Die vorhandenen Inputs bleiben unverändert funktional.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-variations,
body:has(#gallery_preview_wrapper) .variations {
    margin: 22px 0 28px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .form-group,
body:has(#gallery_preview_wrapper) .variations .form-group {
    margin-bottom: 18px !important;
}

body:has(#gallery_preview_wrapper) .product-variations label,
body:has(#gallery_preview_wrapper) .variations label {
    color: #2F2F2F !important;
}

body:has(#gallery_preview_wrapper) .product-variations input[type="radio"],
body:has(#gallery_preview_wrapper) .variations input[type="radio"] {
    accent-color: #C77752;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control,
body:has(#gallery_preview_wrapper) .variations .custom-control {
    margin-bottom: 10px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label:hover,
body:has(#gallery_preview_wrapper) .variations .custom-control-label:hover {
    border-color: #C77752 !important;
    background: #FAF7F3 !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-input:checked ~ .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-input:checked ~ .custom-control-label {
    border-color: #C77752 !important;
    background: #FBF7F3 !important;
    box-shadow: inset 3px 0 0 #C77752 !important;
}

/* Falls NOVA keine custom-control-Struktur verwendet:
   alternative JTL-Variationselemente */
body:has(#gallery_preview_wrapper) .product-variations .radio,
body:has(#gallery_preview_wrapper) .variations .radio {
    margin-bottom: 10px;
}

body:has(#gallery_preview_wrapper) .product-variations .radio label,
body:has(#gallery_preview_wrapper) .variations .radio label {
    display: block;
    padding: 13px 16px;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    background: #FFF;
}

/* ---------------------------------------------------------
   7. PREIS
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-price,
body:has(#gallery_preview_wrapper) .price {
    margin: 28px 0 0 !important;
    padding-top: 22px !important;
    border-top: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) .product-price .price,
body:has(#gallery_preview_wrapper) .product-price .price-value {
    color: #2F2F2F !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

body:has(#gallery_preview_wrapper) .product-price small,
body:has(#gallery_preview_wrapper) .product-price .price-note {
    color: #666 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   8. VERFÜGBARKEIT / LIEFERZEIT
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-stock {
    margin-top: 22px !important;
    padding: 18px 0 !important;
    border-top: 1px solid #E3DDD5 !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #444 !important;
}

body:has(#gallery_preview_wrapper) .product-stock .text-success,
body:has(#gallery_preview_wrapper) .product-stock .stock-status {
    color: #6F8B68 !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .product-stock a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   9. MENGE + WARENKORB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form {
    margin-top: 24px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .quantity,
body:has(#gallery_preview_wrapper) #buy_form .input-group {
    min-height: 54px;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form .quantity input {
    height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    color: #2F2F2F !important;
    background: #FFF !important;
    text-align: center;
    font-size: 17px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
    min-height: 54px !important;
    padding: 13px 28px !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket:hover,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"]:hover,
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"]:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-left: 0;
        padding-top: 32px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #content > .container,
    body:has(#gallery_preview_wrapper) #content > .container-fluid {
        padding-top: 10px;
    }

    body:has(#gallery_preview_wrapper) .breadcrumb {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    body:has(#gallery_preview_wrapper) #gallery,
    body:has(#gallery_preview_wrapper) #gallery_preview {
        border-radius: 6px !important;
    }

    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-top: 26px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) .product-title::after,
    body:has(#gallery_preview_wrapper) .product-info h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        font-size: 16px !important;
    }

    body:has(#gallery_preview_wrapper) .product-price .price,
    body:has(#gallery_preview_wrapper) .product-price .price-value {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
    body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        font-size: 15.5px !important;
    }

    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
    body:has(#gallery_preview_wrapper) .variations .custom-control-label {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ---------------------------------------------------------
   11. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#gallery_preview_wrapper) .product-thumbnails .square-image,
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"],
    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL PRODUKTE
   PHASE 1 V3 – BESCHREIBUNG / TABS / MENGENFELD
   ========================================================= */

/* ---------------------------------------------------------
   12. BESCHREIBUNG – LESBARER SATZ
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #tab-description,
body:has(#gallery_preview_wrapper) #tab-description .product-description,
body:has(#gallery_preview_wrapper) #tab-description .desc,
body:has(#gallery_preview_wrapper) #tab-description p {
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

body:has(#gallery_preview_wrapper) #tab-description p {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body:has(#gallery_preview_wrapper) #tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   13. PRODUKT-TABS – ZOE & LOUIS
   Gelbe JTL-Aktivlinie wird vollständig ersetzt.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]),
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) .nav-link,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0 0 15px !important;
    margin: 0 34px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:focus,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:focus {
    color: #C77752 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active {
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   14. MENGENFELD – MINUS / ZAHL / PLUS
   JTL data-count-down / data-count-up bleibt vollständig aktiv.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form .form-counter,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    overflow: hidden !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-append,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #C77752 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Wir verwenden bewusst einfache Zeichen statt einer Abhängigkeit
   von der geladenen Font-Awesome-Version. */
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]::before {
    content: "−" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]::before {
    content: "+" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] .fas {
    display: none !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]:hover {
    background: #FBF7F3 !important;
    color: #A95F40 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #E3DDD5 !important;
    border-right: 1px solid #E3DDD5 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Native Spinner ebenfalls ausblenden – unsere +/- Steuerung bleibt sichtbar. */
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-inner-spin-button,
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ---------------------------------------------------------
   15. MENGE + BUTTON AUF MOBIL
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #buy_form .form-counter,
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
        max-width: 100% !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
        width: 48px !important;
        min-width: 48px !important;
    }

    body:has(#gallery_preview_wrapper) #tab-description,
    body:has(#gallery_preview_wrapper) #tab-description .product-description,
    body:has(#gallery_preview_wrapper) #tab-description .desc,
    body:has(#gallery_preview_wrapper) #tab-description p {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}


/* =========================================================
   KATEGORIESEITEN – VARIANTE 2 „NATÜRLICH & KLAR"
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – KATEGORIESEITEN
   MASTER DESIGN – VARIANTE 2 „NATÜRLICH & KLAR“

   Gilt automatisch für alle JTL-Kategorieseiten.
   Keine Kategorie oder Produktnamen fest codiert.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN-VARIABLEN
   --------------------------------------------------------- */

:root {
    --zl-cat-sage: #8FA588;
    --zl-cat-sage-soft: #EEF2EC;
    --zl-cat-terracotta: #C77752;
    --zl-cat-terracotta-dark: #A95F40;
    --zl-cat-offwhite: #F6F3EE;
    --zl-cat-dark: #2F2F2F;
    --zl-cat-text: #444;
    --zl-cat-muted: #666;
    --zl-cat-border: #E3DDD5;
    --zl-cat-white: #FFFFFF;
}

/* ---------------------------------------------------------
   1. KATEGORIE – GRUNDLAGE
   --------------------------------------------------------- */

body:has(#result-wrapper) #content {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) #result-wrapper {
    width: 100%;
}

/* ---------------------------------------------------------
   2. KATEGORIE-HEADER
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper .productlist-header {
    margin-bottom: 34px;
}

body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 17px !important;
    color: var(--zl-cat-dark) !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

/* unsere typische kurze Terracotta-Linie */
body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: var(--zl-cat-terracotta);
}

body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
    max-width: 820px;
    margin: 0;
    color: var(--zl-cat-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   3. LINKER BEREICH / KATEGORIEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #sidepanel-left,
body:has(#result-wrapper) .sidepanel-left {
    padding-right: 28px;
}

body:has(#result-wrapper) .box-categories,
body:has(#result-wrapper) .box-filter,
body:has(#result-wrapper) .box-filter-category {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#result-wrapper) .box-categories .box-heading,
body:has(#result-wrapper) .box-filter .box-heading {
    margin-bottom: 0;
    padding: 0 0 12px;
    color: var(--zl-cat-dark);
    border-bottom: 1px solid var(--zl-cat-border);
    font-size: 18px;
    font-weight: 600;
}

/* Kategorie-Links */
body:has(#result-wrapper) .box-categories .nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--zl-cat-text) !important;
    background: transparent !important;
    font-size: 16px;
    transition: color .18s ease, padding-left .18s ease;
}

body:has(#result-wrapper) .box-categories .nav-link:hover {
    padding-left: 5px;
    color: var(--zl-cat-terracotta) !important;
}

/* aktive Kategorie */
body:has(#result-wrapper) .box-categories .nav-link.active,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link {
    padding-left: 12px;
    color: var(--zl-cat-dark) !important;
    background: var(--zl-cat-sage-soft) !important;
    border-radius: 4px;
    font-weight: 600;
}

body:has(#result-wrapper) .box-categories .nav-link.active::before,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zl-cat-sage);
    border-radius: 3px 0 0 3px;
}

/* ---------------------------------------------------------
   4. FILTER
   --------------------------------------------------------- */

body:has(#result-wrapper) .box-filter .productlist-filter-headline,
body:has(#result-wrapper) .box-filter .filter-headline {
    padding: 17px 0 11px;
    color: var(--zl-cat-dark);
    border-top: 1px solid var(--zl-cat-border);
    font-size: 16px;
    font-weight: 500;
}

body:has(#result-wrapper) .box-filter .nav-link {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) .box-filter .nav-link:hover {
    color: var(--zl-cat-terracotta);
}

/* ---------------------------------------------------------
   5. SORTIERUNG / ANSICHT
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper select,
body:has(#result-wrapper) #result-wrapper .custom-select {
    min-height: 48px;
    padding-left: 14px;
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper select:focus,
body:has(#result-wrapper) #result-wrapper .custom-select:focus {
    border-color: var(--zl-cat-sage);
    box-shadow: 0 0 0 1px rgba(143,165,136,.12);
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
body:has(#result-wrapper) #result-wrapper .btn-group .btn {
    min-height: 48px;
    border-color: var(--zl-cat-border);
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn:hover,
body:has(#result-wrapper) #result-wrapper .btn-group .btn:hover {
    color: var(--zl-cat-terracotta);
    border-color: var(--zl-cat-terracotta);
    background: var(--zl-cat-white);
}

/* ---------------------------------------------------------
   6. PRODUKTGRID
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list {
    margin-top: 8px;
}

body:has(#result-wrapper) #product-list .productbox {
    margin-bottom: 28px;
}

body:has(#result-wrapper) #product-list .productbox-inner {
    height: 100%;
    overflow: hidden;
    background: var(--zl-cat-white);
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* dezenter Hover */
@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   7. PRODUKTBILDER
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-image {
    overflow: hidden;
}

body:has(#result-wrapper) #product-list .productbox-images img {
    transition: transform .35s ease;
}

@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   8. PRODUKTTITEL / INFORMATIONEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-title {
    padding: 15px 15px 8px !important;
    min-height: 64px;
}

body:has(#result-wrapper) #product-list .productbox-title a {
    color: var(--zl-cat-dark) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body:has(#result-wrapper) #product-list .productbox-title a:hover {
    color: var(--zl-cat-terracotta) !important;
}

/* Preis */
body:has(#result-wrapper) #product-list .productbox-price {
    color: var(--zl-cat-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header {
        margin-bottom: 26px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        margin-bottom: 13px !important;
        padding-bottom: 14px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 16px;
        line-height: 1.65;
    }

    body:has(#result-wrapper) #sidepanel-left,
    body:has(#result-wrapper) .sidepanel-left {
        padding-right: 0;
    }

    body:has(#result-wrapper) #result-wrapper select,
    body:has(#result-wrapper) #result-wrapper .custom-select,
    body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
    body:has(#result-wrapper) #result-wrapper .btn-group .btn {
        min-height: 46px;
    }

    body:has(#result-wrapper) #product-list {
        margin-top: 4px;
    }

    body:has(#result-wrapper) #product-list .productbox {
        margin-bottom: 20px;
    }

    body:has(#result-wrapper) #product-list .productbox-title {
        min-height: 0;
        padding: 14px 15px 9px !important;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 575.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        font-size: 31px !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 15.5px;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------
   10. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#result-wrapper) #product-list .productbox-inner,
    body:has(#result-wrapper) #product-list .productbox-images img,
    body:has(#result-wrapper) .box-categories .nav-link {
        transition: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE MASTER
   EXAKTER JTL-DOM-FIX
   Grundlage: echte Kategorieseite / Kurse & Workshops
   ========================================================= */

/* ---------------------------------------------------------
   KATEGORIE-HAUPTBEREICH
   JTL verwendet #result-wrapper direkt innerhalb
   der rechten Content-Spalte.
   --------------------------------------------------------- */

#content > .row.justify-content-lg-end {
    align-items: flex-start;
}

#content > .row.justify-content-lg-end > .col-lg-8,
#content > .row.justify-content-lg-end > .col-xl-9 {
    min-width: 0;
}

/* ---------------------------------------------------------
   1. ECHTE KATEGORIEÜBERSCHRIFT
   JTL-Struktur:
   #result-wrapper > .title > h1.h2
   --------------------------------------------------------- */

#result-wrapper > .title {
    margin: 0 0 30px !important;
    padding: 0 !important;
}

#result-wrapper > .title h1.h2 {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

/* genau eine Zoe-&-Louis-Linie */
#result-wrapper > .title h1.h2::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 17px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   2. SORTIER-/ANSICHTSLEISTE
   --------------------------------------------------------- */

#result-wrapper .productlist-page-nav-header-m {
    margin-top: 0 !important;
}

#result-wrapper .productlist-page-nav-header-m + hr,
#result-wrapper .productlist-page-nav-header-m ~ hr.productlist-page-nav-bottom {
    border-color: #E3DDD5 !important;
}

#result-wrapper .productlist-page-nav-header-m .btn {
    min-height: 48px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #444 !important;
    box-shadow: none !important;
}

#result-wrapper .productlist-page-nav-header-m .btn:hover,
#result-wrapper .productlist-page-nav-header-m .btn:focus {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* aktive Galerie/Listendarstellung */
#result-wrapper .productlist-page-nav-header-m .btn-option.active {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* Ergebniszahl */
#result-wrapper .productlist-item-info {
    color: #666 !important;
    font-size: 15px;
}

/* ---------------------------------------------------------
   3. SIDEBAR – EXAKTE JTL-ID #sidepanel_left
   --------------------------------------------------------- */

#sidepanel_left {
    padding-right: 28px !important;
}

#sidepanel_left .box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop-Kategorieüberschrift */
#sidepanel_left .productlist-filter-headline.d-none.d-md-flex {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* mobile Kategorieüberschrift */
#sidepanel_left > .box-categories > a.box-normal-link {
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Kategorie-Navigation */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item {
    margin: 0 !important;
}

#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
    position: relative !important;
    display: block !important;
    padding: 11px 12px !important;
    margin: 0 !important;

    color: #444 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        padding-left .18s ease !important;
}

/* Hover */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link:hover {
    padding-left: 17px !important;
    color: #C77752 !important;
    background: #FAF9F6 !important;
}

/* Aktive Kategorie – JTL-Gelb vollständig entfernen */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link,
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link:hover {
    padding-left: 17px !important;

    color: #2F2F2F !important;
    background: #EEF2EC !important;

    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    font-weight: 600 !important;
}

/* Sage-Akzent links statt gelber JTL-Leiste */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;

    background: #8FA588 !important;
    border-radius: 3px 0 0 3px !important;
}

/* JTL-HR unter der Kategorienbox */
#sidepanel_left .box-normal-hr,
#sidepanel_left .box-filter-hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #E3DDD5 !important;
}

/* ---------------------------------------------------------
   4. FILTER-BOXEN
   --------------------------------------------------------- */

#sidepanel_left .btn-filter-box {
    position: relative !important;
    min-height: 48px !important;
    padding: 14px 28px 14px 0 !important;

    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#sidepanel_left .btn-filter-box:hover,
#sidepanel_left .btn-filter-box:focus {
    color: #C77752 !important;
    background: transparent !important;
}

/* Filter-Pfeil */
#sidepanel_left .btn-filter-box::after {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Preisfelder */
#sidepanel_left .price-range-input {
    border-color: #D6CEC5 !important;
    box-shadow: none !important;
}

#sidepanel_left .price-range-input:focus {
    border-color: #8FA588 !important;
    box-shadow: 0 0 0 1px rgba(143,165,136,.12) !important;
}

#sidepanel_left .input-group-text {
    border-color: #D6CEC5 !important;
    background: #FAF9F6 !important;
    color: #666 !important;
}

/* Preis-Slider – JTL-Gelb durch Sage */
#sidepanel_left .price-range-slide .noUi-connect {
    background: #8FA588 !important;
}

#sidepanel_left .price-range-slide .noUi-handle {
    border-color: #8FA588 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(47,47,47,.14) !important;
}

/* ---------------------------------------------------------
   5. PRODUKTGRID – JTL setzt 4 / 3 / 2 Spalten selbst
   --------------------------------------------------------- */

#product-list {
    margin-top: 0 !important;
}

#product-list .product-wrapper {
    margin-bottom: 28px !important;
}

/* Karten nur dezent einfassen */
#product-list .productbox {
    height: 100%;
}

#product-list .productbox-inner {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (min-width: 768px) {
    #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    #content > .row.justify-content-lg-end {
        display: block !important;
    }

    #sidepanel_left {
        padding-right: 0 !important;
    }

    #result-wrapper > .title {
        margin-bottom: 22px !important;
    }

    #result-wrapper > .title h1.h2 {
        font-size: 34px !important;
        padding-bottom: 14px !important;
    }

    #result-wrapper > .title h1.h2::after {
        width: 52px !important;
        margin-top: 14px !important;
    }

    #result-wrapper .productlist-page-nav-header-m {
        margin-bottom: 10px !important;
    }

    #result-wrapper .productlist-page-nav-header-m .btn {
        min-height: 46px !important;
    }

    #product-list .product-wrapper {
        margin-bottom: 20px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #result-wrapper > .title h1.h2 {
        font-size: 31px !important;
    }
}





/* =========================================================
   ZOE & LOUIS – MASTER CSS
   Produktdetailseiten + Kategorieseiten
   Basis: zuletzt bestätigte Versionen
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAILSEITE / PHASE 1
   Reiner Artikelbereich – JTL/NOVA-Datenlogik bleibt erhalten
   Fokus: Galerie + Produktinformationen + Varianten + Kaufbereich
   ========================================================= */

/* ---------------------------------------------------------
   1. PRODUKTDETAIL – GRUNDRAHMEN
   Der Produktdetailbereich wird über die vorhandene JTL-Galerie
   erkannt. Es werden keine Produktdaten hardcodiert.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #content {
    color: #444;
}

body:has(#gallery_preview_wrapper) #content > .container,
body:has(#gallery_preview_wrapper) #content > .container-fluid {
    padding-top: 18px;
}

body:has(#gallery_preview_wrapper) .product-primary,
body:has(#gallery_preview_wrapper) .product-detail {
    position: relative;
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .breadcrumb {
    margin: 0 0 30px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.5;
    border: 0 !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a:hover {
    color: #C77752 !important;
}

/* ---------------------------------------------------------
   3. PRODUKT-GALERIE
   ---------------------------------------------------------
   WICHTIG:
   Die JTL/NOVA/Slick-Galerie übernimmt Bildgröße, Position,
   object-fit und Slide-Transform vollständig selbst.
   Wir gestalten hier ausschließlich die äußere Optik.
   --------------------------------------------------------- */

/* Nur der äußere Galerie-Rahmen */
body:has(#gallery_preview_wrapper) #gallery_preview,
body:has(#gallery_preview_wrapper) #gallery {
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
}

/* Keine eigene Positionierung oder Skalierung des JTL-Hauptbildes.
   Dadurch bleiben Slick und die native JTL-Galerielogik intakt. */

/* Thumbnail-Optik */
body:has(#gallery_preview_wrapper) .product-thumbnails {
    margin-top: 14px !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image {
    margin-right: 10px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    transition: border-color .2s ease, opacity .2s ease;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image:hover {
    border-color: #C77752 !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current .square-image,
body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current {
    border-color: #C77752 !important;
}

/* ---------------------------------------------------------
   4. PRODUKT-INFORMATIONEN RECHTS
   --------------------------------------------------------- */


body:has(#gallery_preview_wrapper) .product-info,
body:has(#gallery_preview_wrapper) .product-primary .product-info {
    padding-left: 28px;
}

body:has(#gallery_preview_wrapper) .product-title,
body:has(#gallery_preview_wrapper) .product-info h1 {
    margin: 0 0 14px !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

body:has(#gallery_preview_wrapper) .product-title::after,
body:has(#gallery_preview_wrapper) .product-info h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: #C77752;
}

/* Artikelnummer / Kategorie / Hersteller */
body:has(#gallery_preview_wrapper) .product-reference,
body:has(#gallery_preview_wrapper) .product-manufacturer,
body:has(#gallery_preview_wrapper) .product-meta {
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .product-reference a,
body:has(#gallery_preview_wrapper) .product-manufacturer a,
body:has(#gallery_preview_wrapper) .product-meta a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   5. KURZBESCHREIBUNG
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-description-short {
    margin: 22px 0 26px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body:has(#gallery_preview_wrapper) .product-description-short p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. VARIANTEN – JTL-RADIOS ALS CHOICE CARDS
   Die vorhandenen Inputs bleiben unverändert funktional.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-variations,
body:has(#gallery_preview_wrapper) .variations {
    margin: 22px 0 28px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .form-group,
body:has(#gallery_preview_wrapper) .variations .form-group {
    margin-bottom: 18px !important;
}

body:has(#gallery_preview_wrapper) .product-variations label,
body:has(#gallery_preview_wrapper) .variations label {
    color: #2F2F2F !important;
}

body:has(#gallery_preview_wrapper) .product-variations input[type="radio"],
body:has(#gallery_preview_wrapper) .variations input[type="radio"] {
    accent-color: #C77752;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control,
body:has(#gallery_preview_wrapper) .variations .custom-control {
    margin-bottom: 10px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label:hover,
body:has(#gallery_preview_wrapper) .variations .custom-control-label:hover {
    border-color: #C77752 !important;
    background: #FAF7F3 !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-input:checked ~ .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-input:checked ~ .custom-control-label {
    border-color: #C77752 !important;
    background: #FBF7F3 !important;
    box-shadow: inset 3px 0 0 #C77752 !important;
}

/* Falls NOVA keine custom-control-Struktur verwendet:
   alternative JTL-Variationselemente */
body:has(#gallery_preview_wrapper) .product-variations .radio,
body:has(#gallery_preview_wrapper) .variations .radio {
    margin-bottom: 10px;
}

body:has(#gallery_preview_wrapper) .product-variations .radio label,
body:has(#gallery_preview_wrapper) .variations .radio label {
    display: block;
    padding: 13px 16px;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    background: #FFF;
}

/* ---------------------------------------------------------
   7. PREIS
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-price,
body:has(#gallery_preview_wrapper) .price {
    margin: 28px 0 0 !important;
    padding-top: 22px !important;
    border-top: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) .product-price .price,
body:has(#gallery_preview_wrapper) .product-price .price-value {
    color: #2F2F2F !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

body:has(#gallery_preview_wrapper) .product-price small,
body:has(#gallery_preview_wrapper) .product-price .price-note {
    color: #666 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   8. VERFÜGBARKEIT / LIEFERZEIT
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-stock {
    margin-top: 22px !important;
    padding: 18px 0 !important;
    border-top: 1px solid #E3DDD5 !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #444 !important;
}

body:has(#gallery_preview_wrapper) .product-stock .text-success,
body:has(#gallery_preview_wrapper) .product-stock .stock-status {
    color: #6F8B68 !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .product-stock a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   9. MENGE + WARENKORB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form {
    margin-top: 24px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .quantity,
body:has(#gallery_preview_wrapper) #buy_form .input-group {
    min-height: 54px;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form .quantity input {
    height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    color: #2F2F2F !important;
    background: #FFF !important;
    text-align: center;
    font-size: 17px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
    min-height: 54px !important;
    padding: 13px 28px !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket:hover,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"]:hover,
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"]:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-left: 0;
        padding-top: 32px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #content > .container,
    body:has(#gallery_preview_wrapper) #content > .container-fluid {
        padding-top: 10px;
    }

    body:has(#gallery_preview_wrapper) .breadcrumb {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    body:has(#gallery_preview_wrapper) #gallery,
    body:has(#gallery_preview_wrapper) #gallery_preview {
        border-radius: 6px !important;
    }

    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-top: 26px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) .product-title::after,
    body:has(#gallery_preview_wrapper) .product-info h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        font-size: 16px !important;
    }

    body:has(#gallery_preview_wrapper) .product-price .price,
    body:has(#gallery_preview_wrapper) .product-price .price-value {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
    body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        font-size: 15.5px !important;
    }

    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
    body:has(#gallery_preview_wrapper) .variations .custom-control-label {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ---------------------------------------------------------
   11. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#gallery_preview_wrapper) .product-thumbnails .square-image,
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"],
    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL PRODUKTE
   PHASE 1 V3 – BESCHREIBUNG / TABS / MENGENFELD
   ========================================================= */

/* ---------------------------------------------------------
   12. BESCHREIBUNG – LESBARER SATZ
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #tab-description,
body:has(#gallery_preview_wrapper) #tab-description .product-description,
body:has(#gallery_preview_wrapper) #tab-description .desc,
body:has(#gallery_preview_wrapper) #tab-description p {
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

body:has(#gallery_preview_wrapper) #tab-description p {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body:has(#gallery_preview_wrapper) #tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   13. PRODUKT-TABS – ZOE & LOUIS
   Gelbe JTL-Aktivlinie wird vollständig ersetzt.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]),
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) .nav-link,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0 0 15px !important;
    margin: 0 34px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:focus,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:focus {
    color: #C77752 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active {
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   14. MENGENFELD – MINUS / ZAHL / PLUS
   JTL data-count-down / data-count-up bleibt vollständig aktiv.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form .form-counter,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    overflow: hidden !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-append,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #C77752 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Wir verwenden bewusst einfache Zeichen statt einer Abhängigkeit
   von der geladenen Font-Awesome-Version. */
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]::before {
    content: "−" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]::before {
    content: "+" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] .fas {
    display: none !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]:hover {
    background: #FBF7F3 !important;
    color: #A95F40 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #E3DDD5 !important;
    border-right: 1px solid #E3DDD5 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Native Spinner ebenfalls ausblenden – unsere +/- Steuerung bleibt sichtbar. */
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-inner-spin-button,
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ---------------------------------------------------------
   15. MENGE + BUTTON AUF MOBIL
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #buy_form .form-counter,
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
        max-width: 100% !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
        width: 48px !important;
        min-width: 48px !important;
    }

    body:has(#gallery_preview_wrapper) #tab-description,
    body:has(#gallery_preview_wrapper) #tab-description .product-description,
    body:has(#gallery_preview_wrapper) #tab-description .desc,
    body:has(#gallery_preview_wrapper) #tab-description p {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}


/* =========================================================
   KATEGORIESEITEN – VARIANTE 2 „NATÜRLICH & KLAR"
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – KATEGORIESEITEN
   MASTER DESIGN – VARIANTE 2 „NATÜRLICH & KLAR“

   Gilt automatisch für alle JTL-Kategorieseiten.
   Keine Kategorie oder Produktnamen fest codiert.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN-VARIABLEN
   --------------------------------------------------------- */

:root {
    --zl-cat-sage: #8FA588;
    --zl-cat-sage-soft: #EEF2EC;
    --zl-cat-terracotta: #C77752;
    --zl-cat-terracotta-dark: #A95F40;
    --zl-cat-offwhite: #F6F3EE;
    --zl-cat-dark: #2F2F2F;
    --zl-cat-text: #444;
    --zl-cat-muted: #666;
    --zl-cat-border: #E3DDD5;
    --zl-cat-white: #FFFFFF;
}

/* ---------------------------------------------------------
   1. KATEGORIE – GRUNDLAGE
   --------------------------------------------------------- */

body:has(#result-wrapper) #content {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) #result-wrapper {
    width: 100%;
}

/* ---------------------------------------------------------
   2. KATEGORIE-HEADER
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper .productlist-header {
    margin-bottom: 34px;
}

body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 17px !important;
    color: var(--zl-cat-dark) !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

/* unsere typische kurze Terracotta-Linie */
body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: var(--zl-cat-terracotta);
}

body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
    max-width: 820px;
    margin: 0;
    color: var(--zl-cat-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   3. LINKER BEREICH / KATEGORIEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #sidepanel-left,
body:has(#result-wrapper) .sidepanel-left {
    padding-right: 28px;
}

body:has(#result-wrapper) .box-categories,
body:has(#result-wrapper) .box-filter,
body:has(#result-wrapper) .box-filter-category {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#result-wrapper) .box-categories .box-heading,
body:has(#result-wrapper) .box-filter .box-heading {
    margin-bottom: 0;
    padding: 0 0 12px;
    color: var(--zl-cat-dark);
    border-bottom: 1px solid var(--zl-cat-border);
    font-size: 18px;
    font-weight: 600;
}

/* Kategorie-Links */
body:has(#result-wrapper) .box-categories .nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--zl-cat-text) !important;
    background: transparent !important;
    font-size: 16px;
    transition: color .18s ease, padding-left .18s ease;
}

body:has(#result-wrapper) .box-categories .nav-link:hover {
    padding-left: 5px;
    color: var(--zl-cat-terracotta) !important;
}

/* aktive Kategorie */
body:has(#result-wrapper) .box-categories .nav-link.active,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link {
    padding-left: 12px;
    color: var(--zl-cat-dark) !important;
    background: var(--zl-cat-sage-soft) !important;
    border-radius: 4px;
    font-weight: 600;
}

body:has(#result-wrapper) .box-categories .nav-link.active::before,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zl-cat-sage);
    border-radius: 3px 0 0 3px;
}

/* ---------------------------------------------------------
   4. FILTER
   --------------------------------------------------------- */

body:has(#result-wrapper) .box-filter .productlist-filter-headline,
body:has(#result-wrapper) .box-filter .filter-headline {
    padding: 17px 0 11px;
    color: var(--zl-cat-dark);
    border-top: 1px solid var(--zl-cat-border);
    font-size: 16px;
    font-weight: 500;
}

body:has(#result-wrapper) .box-filter .nav-link {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) .box-filter .nav-link:hover {
    color: var(--zl-cat-terracotta);
}

/* ---------------------------------------------------------
   5. SORTIERUNG / ANSICHT
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper select,
body:has(#result-wrapper) #result-wrapper .custom-select {
    min-height: 48px;
    padding-left: 14px;
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper select:focus,
body:has(#result-wrapper) #result-wrapper .custom-select:focus {
    border-color: var(--zl-cat-sage);
    box-shadow: 0 0 0 1px rgba(143,165,136,.12);
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
body:has(#result-wrapper) #result-wrapper .btn-group .btn {
    min-height: 48px;
    border-color: var(--zl-cat-border);
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn:hover,
body:has(#result-wrapper) #result-wrapper .btn-group .btn:hover {
    color: var(--zl-cat-terracotta);
    border-color: var(--zl-cat-terracotta);
    background: var(--zl-cat-white);
}

/* ---------------------------------------------------------
   6. PRODUKTGRID
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list {
    margin-top: 8px;
}

body:has(#result-wrapper) #product-list .productbox {
    margin-bottom: 28px;
}

body:has(#result-wrapper) #product-list .productbox-inner {
    height: 100%;
    overflow: hidden;
    background: var(--zl-cat-white);
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* dezenter Hover */
@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   7. PRODUKTBILDER
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-image {
    overflow: hidden;
}

body:has(#result-wrapper) #product-list .productbox-images img {
    transition: transform .35s ease;
}

@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   8. PRODUKTTITEL / INFORMATIONEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-title {
    padding: 15px 15px 8px !important;
    min-height: 64px;
}

body:has(#result-wrapper) #product-list .productbox-title a {
    color: var(--zl-cat-dark) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body:has(#result-wrapper) #product-list .productbox-title a:hover {
    color: var(--zl-cat-terracotta) !important;
}

/* Preis */
body:has(#result-wrapper) #product-list .productbox-price {
    color: var(--zl-cat-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header {
        margin-bottom: 26px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        margin-bottom: 13px !important;
        padding-bottom: 14px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 16px;
        line-height: 1.65;
    }

    body:has(#result-wrapper) #sidepanel-left,
    body:has(#result-wrapper) .sidepanel-left {
        padding-right: 0;
    }

    body:has(#result-wrapper) #result-wrapper select,
    body:has(#result-wrapper) #result-wrapper .custom-select,
    body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
    body:has(#result-wrapper) #result-wrapper .btn-group .btn {
        min-height: 46px;
    }

    body:has(#result-wrapper) #product-list {
        margin-top: 4px;
    }

    body:has(#result-wrapper) #product-list .productbox {
        margin-bottom: 20px;
    }

    body:has(#result-wrapper) #product-list .productbox-title {
        min-height: 0;
        padding: 14px 15px 9px !important;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 575.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        font-size: 31px !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 15.5px;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------
   10. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#result-wrapper) #product-list .productbox-inner,
    body:has(#result-wrapper) #product-list .productbox-images img,
    body:has(#result-wrapper) .box-categories .nav-link {
        transition: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE MASTER
   EXAKTER JTL-DOM-FIX
   Grundlage: echte Kategorieseite / Kurse & Workshops
   ========================================================= */

/* ---------------------------------------------------------
   KATEGORIE-HAUPTBEREICH
   JTL verwendet #result-wrapper direkt innerhalb
   der rechten Content-Spalte.
   --------------------------------------------------------- */

#content > .row.justify-content-lg-end {
    align-items: flex-start;
}

#content > .row.justify-content-lg-end > .col-lg-8,
#content > .row.justify-content-lg-end > .col-xl-9 {
    min-width: 0;
}

/* ---------------------------------------------------------
   1. ECHTE KATEGORIEÜBERSCHRIFT
   JTL-Struktur:
   #result-wrapper > .title > h1.h2
   --------------------------------------------------------- */

#result-wrapper > .title {
    margin: 0 0 30px !important;
    padding: 0 !important;
}

#result-wrapper > .title h1.h2 {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

/* genau eine Zoe-&-Louis-Linie */
#result-wrapper > .title h1.h2::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 17px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   2. SORTIER-/ANSICHTSLEISTE
   --------------------------------------------------------- */

#result-wrapper .productlist-page-nav-header-m {
    margin-top: 0 !important;
}

#result-wrapper .productlist-page-nav-header-m + hr,
#result-wrapper .productlist-page-nav-header-m ~ hr.productlist-page-nav-bottom {
    border-color: #E3DDD5 !important;
}

#result-wrapper .productlist-page-nav-header-m .btn {
    min-height: 48px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #444 !important;
    box-shadow: none !important;
}

#result-wrapper .productlist-page-nav-header-m .btn:hover,
#result-wrapper .productlist-page-nav-header-m .btn:focus {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* aktive Galerie/Listendarstellung */
#result-wrapper .productlist-page-nav-header-m .btn-option.active {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* Ergebniszahl */
#result-wrapper .productlist-item-info {
    color: #666 !important;
    font-size: 15px;
}

/* ---------------------------------------------------------
   3. SIDEBAR – EXAKTE JTL-ID #sidepanel_left
   --------------------------------------------------------- */

#sidepanel_left {
    padding-right: 28px !important;
}

#sidepanel_left .box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop-Kategorieüberschrift */
#sidepanel_left .productlist-filter-headline.d-none.d-md-flex {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* mobile Kategorieüberschrift */
#sidepanel_left > .box-categories > a.box-normal-link {
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Kategorie-Navigation */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item {
    margin: 0 !important;
}

#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
    position: relative !important;
    display: block !important;
    padding: 11px 12px !important;
    margin: 0 !important;

    color: #444 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        padding-left .18s ease !important;
}

/* Hover */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link:hover {
    padding-left: 17px !important;
    color: #C77752 !important;
    background: #FAF9F6 !important;
}

/* Aktive Kategorie – JTL-Gelb vollständig entfernen */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link,
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link:hover {
    padding-left: 17px !important;

    color: #2F2F2F !important;
    background: #EEF2EC !important;

    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    font-weight: 600 !important;
}

/* Sage-Akzent links statt gelber JTL-Leiste */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;

    background: #8FA588 !important;
    border-radius: 3px 0 0 3px !important;
}

/* JTL-HR unter der Kategorienbox */
#sidepanel_left .box-normal-hr,
#sidepanel_left .box-filter-hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #E3DDD5 !important;
}

/* ---------------------------------------------------------
   4. FILTER-BOXEN
   --------------------------------------------------------- */

#sidepanel_left .btn-filter-box {
    position: relative !important;
    min-height: 48px !important;
    padding: 14px 28px 14px 0 !important;

    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#sidepanel_left .btn-filter-box:hover,
#sidepanel_left .btn-filter-box:focus {
    color: #C77752 !important;
    background: transparent !important;
}

/* Filter-Pfeil */
#sidepanel_left .btn-filter-box::after {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Preisfelder */
#sidepanel_left .price-range-input {
    border-color: #D6CEC5 !important;
    box-shadow: none !important;
}

#sidepanel_left .price-range-input:focus {
    border-color: #8FA588 !important;
    box-shadow: 0 0 0 1px rgba(143,165,136,.12) !important;
}

#sidepanel_left .input-group-text {
    border-color: #D6CEC5 !important;
    background: #FAF9F6 !important;
    color: #666 !important;
}

/* Preis-Slider – JTL-Gelb durch Sage */
#sidepanel_left .price-range-slide .noUi-connect {
    background: #8FA588 !important;
}

#sidepanel_left .price-range-slide .noUi-handle {
    border-color: #8FA588 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(47,47,47,.14) !important;
}

/* ---------------------------------------------------------
   5. PRODUKTGRID – JTL setzt 4 / 3 / 2 Spalten selbst
   --------------------------------------------------------- */

#product-list {
    margin-top: 0 !important;
}

#product-list .product-wrapper {
    margin-bottom: 28px !important;
}

/* Karten nur dezent einfassen */
#product-list .productbox {
    height: 100%;
}

#product-list .productbox-inner {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (min-width: 768px) {
    #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    #content > .row.justify-content-lg-end {
        display: block !important;
    }

    #sidepanel_left {
        padding-right: 0 !important;
    }

    #result-wrapper > .title {
        margin-bottom: 22px !important;
    }

    #result-wrapper > .title h1.h2 {
        font-size: 34px !important;
        padding-bottom: 14px !important;
    }

    #result-wrapper > .title h1.h2::after {
        width: 52px !important;
        margin-top: 14px !important;
    }

    #result-wrapper .productlist-page-nav-header-m {
        margin-bottom: 10px !important;
    }

    #result-wrapper .productlist-page-nav-header-m .btn {
        min-height: 46px !important;
    }

    #product-list .product-wrapper {
        margin-bottom: 20px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #result-wrapper > .title h1.h2 {
        font-size: 31px !important;
    }
}



/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG / EDITORIAL
   Für strukturierte Produktbeschreibungen in JTL
   ========================================================= */

body:has(#gallery_preview_wrapper) .zl-product-description {
    max-width: 980px;
    margin: 0 auto;
    color: #444;
    font-family: "source-sans-pro", sans-serif;
    font-size: 17px;
    line-height: 1.68;
}

body:has(#gallery_preview_wrapper) .zl-product-description p {
    margin: 0 0 18px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
    max-width: 850px;
    margin: 0 0 38px;
    color: #2F2F2F;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 400;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-kicker {
    margin: 0 0 8px;
    color: #C77752;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body:has(#gallery_preview_wrapper) .zl-product-description h2 {
    margin: 0 0 18px;
    color: #2F2F2F;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.015em;
}

body:has(#gallery_preview_wrapper) .zl-product-description h3 {
    margin: 0 0 12px;
    color: #2F2F2F;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
    margin: 0 0 48px;
    padding: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality {
    padding: 34px 36px;
    background: #F6F3EE;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality p:last-child {
    margin-bottom: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list {
    margin: 22px 0 24px;
    padding: 0;
    list-style: none;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
    color: #444;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #8FA588;
    font-weight: 600;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    min-height: 96px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    color: #2F2F2F;
    font-size: 15px;
    line-height: 1.4;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability {
    margin: 0 0 48px;
    padding: 34px 36px;
    background: #EEF2EC;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block;
    margin: -4px 0 18px;
    color: #8FA588;
    font-size: 24px;
    line-height: 1.25;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
    margin: 0 0 48px;
    padding: 34px 36px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 8px;
    padding: 11px 22px;
    background: #C77752;
    border: 1px solid #C77752;
    border-radius: 6px;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button:hover {
    background: #A95F40;
    border-color: #A95F40;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(47,47,47,.08);
}

/* Attribute table: bleibt technisch, wird aber optisch an die Marke angepasst */
body:has(#gallery_preview_wrapper) .zl-product-description + .product-attributes,
body:has(#gallery_preview_wrapper) .product-attributes {
    font-size: 15px;
}

body:has(#gallery_preview_wrapper) .product-attributes th {
    color: #2F2F2F;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        max-width: 100%;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        font-size: 16px;
        line-height: 1.68;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 1.62;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description h2 {
        font-size: 27px;
        line-height: 1.28;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        margin-bottom: 36px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 26px 22px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        gap: 12px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 86px;
        padding: 15px 12px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: 1fr 1fr;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 24px 18px;
    }
}

/* =========================================================
   ZOE & LOUIS – MASTER CSS
   Produktdetailseiten + Kategorieseiten
   Basis: zuletzt bestätigte Versionen
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAILSEITE / PHASE 1
   Reiner Artikelbereich – JTL/NOVA-Datenlogik bleibt erhalten
   Fokus: Galerie + Produktinformationen + Varianten + Kaufbereich
   ========================================================= */

/* ---------------------------------------------------------
   1. PRODUKTDETAIL – GRUNDRAHMEN
   Der Produktdetailbereich wird über die vorhandene JTL-Galerie
   erkannt. Es werden keine Produktdaten hardcodiert.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #content {
    color: #444;
}

body:has(#gallery_preview_wrapper) #content > .container,
body:has(#gallery_preview_wrapper) #content > .container-fluid {
    padding-top: 18px;
}

body:has(#gallery_preview_wrapper) .product-primary,
body:has(#gallery_preview_wrapper) .product-detail {
    position: relative;
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .breadcrumb {
    margin: 0 0 30px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.5;
    border: 0 !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a:hover {
    color: #C77752 !important;
}

/* ---------------------------------------------------------
   3. PRODUKT-GALERIE
   ---------------------------------------------------------
   WICHTIG:
   Die JTL/NOVA/Slick-Galerie übernimmt Bildgröße, Position,
   object-fit und Slide-Transform vollständig selbst.
   Wir gestalten hier ausschließlich die äußere Optik.
   --------------------------------------------------------- */

/* Nur der äußere Galerie-Rahmen */
body:has(#gallery_preview_wrapper) #gallery_preview,
body:has(#gallery_preview_wrapper) #gallery {
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
}

/* Keine eigene Positionierung oder Skalierung des JTL-Hauptbildes.
   Dadurch bleiben Slick und die native JTL-Galerielogik intakt. */

/* Thumbnail-Optik */
body:has(#gallery_preview_wrapper) .product-thumbnails {
    margin-top: 14px !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image {
    margin-right: 10px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    transition: border-color .2s ease, opacity .2s ease;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image:hover {
    border-color: #C77752 !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current .square-image,
body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current {
    border-color: #C77752 !important;
}

/* ---------------------------------------------------------
   4. PRODUKT-INFORMATIONEN RECHTS
   --------------------------------------------------------- */


body:has(#gallery_preview_wrapper) .product-info,
body:has(#gallery_preview_wrapper) .product-primary .product-info {
    padding-left: 28px;
}

body:has(#gallery_preview_wrapper) .product-title,
body:has(#gallery_preview_wrapper) .product-info h1 {
    margin: 0 0 14px !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

body:has(#gallery_preview_wrapper) .product-title::after,
body:has(#gallery_preview_wrapper) .product-info h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: #C77752;
}

/* Artikelnummer / Kategorie / Hersteller */
body:has(#gallery_preview_wrapper) .product-reference,
body:has(#gallery_preview_wrapper) .product-manufacturer,
body:has(#gallery_preview_wrapper) .product-meta {
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .product-reference a,
body:has(#gallery_preview_wrapper) .product-manufacturer a,
body:has(#gallery_preview_wrapper) .product-meta a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   5. KURZBESCHREIBUNG
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-description-short {
    margin: 22px 0 26px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body:has(#gallery_preview_wrapper) .product-description-short p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. VARIANTEN – JTL-RADIOS ALS CHOICE CARDS
   Die vorhandenen Inputs bleiben unverändert funktional.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-variations,
body:has(#gallery_preview_wrapper) .variations {
    margin: 22px 0 28px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .form-group,
body:has(#gallery_preview_wrapper) .variations .form-group {
    margin-bottom: 18px !important;
}

body:has(#gallery_preview_wrapper) .product-variations label,
body:has(#gallery_preview_wrapper) .variations label {
    color: #2F2F2F !important;
}

body:has(#gallery_preview_wrapper) .product-variations input[type="radio"],
body:has(#gallery_preview_wrapper) .variations input[type="radio"] {
    accent-color: #C77752;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control,
body:has(#gallery_preview_wrapper) .variations .custom-control {
    margin-bottom: 10px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label:hover,
body:has(#gallery_preview_wrapper) .variations .custom-control-label:hover {
    border-color: #C77752 !important;
    background: #FAF7F3 !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-input:checked ~ .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-input:checked ~ .custom-control-label {
    border-color: #C77752 !important;
    background: #FBF7F3 !important;
    box-shadow: inset 3px 0 0 #C77752 !important;
}

/* Falls NOVA keine custom-control-Struktur verwendet:
   alternative JTL-Variationselemente */
body:has(#gallery_preview_wrapper) .product-variations .radio,
body:has(#gallery_preview_wrapper) .variations .radio {
    margin-bottom: 10px;
}

body:has(#gallery_preview_wrapper) .product-variations .radio label,
body:has(#gallery_preview_wrapper) .variations .radio label {
    display: block;
    padding: 13px 16px;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    background: #FFF;
}

/* ---------------------------------------------------------
   7. PREIS
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-price,
body:has(#gallery_preview_wrapper) .price {
    margin: 28px 0 0 !important;
    padding-top: 22px !important;
    border-top: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) .product-price .price,
body:has(#gallery_preview_wrapper) .product-price .price-value {
    color: #2F2F2F !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

body:has(#gallery_preview_wrapper) .product-price small,
body:has(#gallery_preview_wrapper) .product-price .price-note {
    color: #666 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   8. VERFÜGBARKEIT / LIEFERZEIT
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-stock {
    margin-top: 22px !important;
    padding: 18px 0 !important;
    border-top: 1px solid #E3DDD5 !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #444 !important;
}

body:has(#gallery_preview_wrapper) .product-stock .text-success,
body:has(#gallery_preview_wrapper) .product-stock .stock-status {
    color: #6F8B68 !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .product-stock a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   9. MENGE + WARENKORB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form {
    margin-top: 24px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .quantity,
body:has(#gallery_preview_wrapper) #buy_form .input-group {
    min-height: 54px;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form .quantity input {
    height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    color: #2F2F2F !important;
    background: #FFF !important;
    text-align: center;
    font-size: 17px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
    min-height: 54px !important;
    padding: 13px 28px !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket:hover,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"]:hover,
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"]:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-left: 0;
        padding-top: 32px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #content > .container,
    body:has(#gallery_preview_wrapper) #content > .container-fluid {
        padding-top: 10px;
    }

    body:has(#gallery_preview_wrapper) .breadcrumb {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    body:has(#gallery_preview_wrapper) #gallery,
    body:has(#gallery_preview_wrapper) #gallery_preview {
        border-radius: 6px !important;
    }

    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-top: 26px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) .product-title::after,
    body:has(#gallery_preview_wrapper) .product-info h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        font-size: 16px !important;
    }

    body:has(#gallery_preview_wrapper) .product-price .price,
    body:has(#gallery_preview_wrapper) .product-price .price-value {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
    body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        font-size: 15.5px !important;
    }

    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
    body:has(#gallery_preview_wrapper) .variations .custom-control-label {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ---------------------------------------------------------
   11. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#gallery_preview_wrapper) .product-thumbnails .square-image,
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"],
    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL PRODUKTE
   PHASE 1 V3 – BESCHREIBUNG / TABS / MENGENFELD
   ========================================================= */

/* ---------------------------------------------------------
   12. BESCHREIBUNG – LESBARER SATZ
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #tab-description,
body:has(#gallery_preview_wrapper) #tab-description .product-description,
body:has(#gallery_preview_wrapper) #tab-description .desc,
body:has(#gallery_preview_wrapper) #tab-description p {
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

body:has(#gallery_preview_wrapper) #tab-description p {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body:has(#gallery_preview_wrapper) #tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   13. PRODUKT-TABS – ZOE & LOUIS
   Gelbe JTL-Aktivlinie wird vollständig ersetzt.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]),
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) .nav-link,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0 0 15px !important;
    margin: 0 34px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:focus,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:focus {
    color: #C77752 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active {
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   14. MENGENFELD – MINUS / ZAHL / PLUS
   JTL data-count-down / data-count-up bleibt vollständig aktiv.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form .form-counter,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    overflow: hidden !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-append,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #C77752 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Wir verwenden bewusst einfache Zeichen statt einer Abhängigkeit
   von der geladenen Font-Awesome-Version. */
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]::before {
    content: "−" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]::before {
    content: "+" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] .fas {
    display: none !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]:hover {
    background: #FBF7F3 !important;
    color: #A95F40 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #E3DDD5 !important;
    border-right: 1px solid #E3DDD5 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Native Spinner ebenfalls ausblenden – unsere +/- Steuerung bleibt sichtbar. */
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-inner-spin-button,
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ---------------------------------------------------------
   15. MENGE + BUTTON AUF MOBIL
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #buy_form .form-counter,
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
        max-width: 100% !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
        width: 48px !important;
        min-width: 48px !important;
    }

    body:has(#gallery_preview_wrapper) #tab-description,
    body:has(#gallery_preview_wrapper) #tab-description .product-description,
    body:has(#gallery_preview_wrapper) #tab-description .desc,
    body:has(#gallery_preview_wrapper) #tab-description p {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}


/* =========================================================
   KATEGORIESEITEN – VARIANTE 2 „NATÜRLICH & KLAR"
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – KATEGORIESEITEN
   MASTER DESIGN – VARIANTE 2 „NATÜRLICH & KLAR“

   Gilt automatisch für alle JTL-Kategorieseiten.
   Keine Kategorie oder Produktnamen fest codiert.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN-VARIABLEN
   --------------------------------------------------------- */

:root {
    --zl-cat-sage: #8FA588;
    --zl-cat-sage-soft: #EEF2EC;
    --zl-cat-terracotta: #C77752;
    --zl-cat-terracotta-dark: #A95F40;
    --zl-cat-offwhite: #F6F3EE;
    --zl-cat-dark: #2F2F2F;
    --zl-cat-text: #444;
    --zl-cat-muted: #666;
    --zl-cat-border: #E3DDD5;
    --zl-cat-white: #FFFFFF;
}

/* ---------------------------------------------------------
   1. KATEGORIE – GRUNDLAGE
   --------------------------------------------------------- */

body:has(#result-wrapper) #content {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) #result-wrapper {
    width: 100%;
}

/* ---------------------------------------------------------
   2. KATEGORIE-HEADER
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper .productlist-header {
    margin-bottom: 34px;
}

body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 17px !important;
    color: var(--zl-cat-dark) !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

/* unsere typische kurze Terracotta-Linie */
body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: var(--zl-cat-terracotta);
}

body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
    max-width: 820px;
    margin: 0;
    color: var(--zl-cat-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   3. LINKER BEREICH / KATEGORIEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #sidepanel-left,
body:has(#result-wrapper) .sidepanel-left {
    padding-right: 28px;
}

body:has(#result-wrapper) .box-categories,
body:has(#result-wrapper) .box-filter,
body:has(#result-wrapper) .box-filter-category {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#result-wrapper) .box-categories .box-heading,
body:has(#result-wrapper) .box-filter .box-heading {
    margin-bottom: 0;
    padding: 0 0 12px;
    color: var(--zl-cat-dark);
    border-bottom: 1px solid var(--zl-cat-border);
    font-size: 18px;
    font-weight: 600;
}

/* Kategorie-Links */
body:has(#result-wrapper) .box-categories .nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--zl-cat-text) !important;
    background: transparent !important;
    font-size: 16px;
    transition: color .18s ease, padding-left .18s ease;
}

body:has(#result-wrapper) .box-categories .nav-link:hover {
    padding-left: 5px;
    color: var(--zl-cat-terracotta) !important;
}

/* aktive Kategorie */
body:has(#result-wrapper) .box-categories .nav-link.active,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link {
    padding-left: 12px;
    color: var(--zl-cat-dark) !important;
    background: var(--zl-cat-sage-soft) !important;
    border-radius: 4px;
    font-weight: 600;
}

body:has(#result-wrapper) .box-categories .nav-link.active::before,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zl-cat-sage);
    border-radius: 3px 0 0 3px;
}

/* ---------------------------------------------------------
   4. FILTER
   --------------------------------------------------------- */

body:has(#result-wrapper) .box-filter .productlist-filter-headline,
body:has(#result-wrapper) .box-filter .filter-headline {
    padding: 17px 0 11px;
    color: var(--zl-cat-dark);
    border-top: 1px solid var(--zl-cat-border);
    font-size: 16px;
    font-weight: 500;
}

body:has(#result-wrapper) .box-filter .nav-link {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) .box-filter .nav-link:hover {
    color: var(--zl-cat-terracotta);
}

/* ---------------------------------------------------------
   5. SORTIERUNG / ANSICHT
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper select,
body:has(#result-wrapper) #result-wrapper .custom-select {
    min-height: 48px;
    padding-left: 14px;
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper select:focus,
body:has(#result-wrapper) #result-wrapper .custom-select:focus {
    border-color: var(--zl-cat-sage);
    box-shadow: 0 0 0 1px rgba(143,165,136,.12);
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
body:has(#result-wrapper) #result-wrapper .btn-group .btn {
    min-height: 48px;
    border-color: var(--zl-cat-border);
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn:hover,
body:has(#result-wrapper) #result-wrapper .btn-group .btn:hover {
    color: var(--zl-cat-terracotta);
    border-color: var(--zl-cat-terracotta);
    background: var(--zl-cat-white);
}

/* ---------------------------------------------------------
   6. PRODUKTGRID
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list {
    margin-top: 8px;
}

body:has(#result-wrapper) #product-list .productbox {
    margin-bottom: 28px;
}

body:has(#result-wrapper) #product-list .productbox-inner {
    height: 100%;
    overflow: hidden;
    background: var(--zl-cat-white);
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* dezenter Hover */
@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   7. PRODUKTBILDER
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-image {
    overflow: hidden;
}

body:has(#result-wrapper) #product-list .productbox-images img {
    transition: transform .35s ease;
}

@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   8. PRODUKTTITEL / INFORMATIONEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-title {
    padding: 15px 15px 8px !important;
    min-height: 64px;
}

body:has(#result-wrapper) #product-list .productbox-title a {
    color: var(--zl-cat-dark) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body:has(#result-wrapper) #product-list .productbox-title a:hover {
    color: var(--zl-cat-terracotta) !important;
}

/* Preis */
body:has(#result-wrapper) #product-list .productbox-price {
    color: var(--zl-cat-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header {
        margin-bottom: 26px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        margin-bottom: 13px !important;
        padding-bottom: 14px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 16px;
        line-height: 1.65;
    }

    body:has(#result-wrapper) #sidepanel-left,
    body:has(#result-wrapper) .sidepanel-left {
        padding-right: 0;
    }

    body:has(#result-wrapper) #result-wrapper select,
    body:has(#result-wrapper) #result-wrapper .custom-select,
    body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
    body:has(#result-wrapper) #result-wrapper .btn-group .btn {
        min-height: 46px;
    }

    body:has(#result-wrapper) #product-list {
        margin-top: 4px;
    }

    body:has(#result-wrapper) #product-list .productbox {
        margin-bottom: 20px;
    }

    body:has(#result-wrapper) #product-list .productbox-title {
        min-height: 0;
        padding: 14px 15px 9px !important;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 575.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        font-size: 31px !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 15.5px;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------
   10. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#result-wrapper) #product-list .productbox-inner,
    body:has(#result-wrapper) #product-list .productbox-images img,
    body:has(#result-wrapper) .box-categories .nav-link {
        transition: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE MASTER
   EXAKTER JTL-DOM-FIX
   Grundlage: echte Kategorieseite / Kurse & Workshops
   ========================================================= */

/* ---------------------------------------------------------
   KATEGORIE-HAUPTBEREICH
   JTL verwendet #result-wrapper direkt innerhalb
   der rechten Content-Spalte.
   --------------------------------------------------------- */

#content > .row.justify-content-lg-end {
    align-items: flex-start;
}

#content > .row.justify-content-lg-end > .col-lg-8,
#content > .row.justify-content-lg-end > .col-xl-9 {
    min-width: 0;
}

/* ---------------------------------------------------------
   1. ECHTE KATEGORIEÜBERSCHRIFT
   JTL-Struktur:
   #result-wrapper > .title > h1.h2
   --------------------------------------------------------- */

#result-wrapper > .title {
    margin: 0 0 30px !important;
    padding: 0 !important;
}

#result-wrapper > .title h1.h2 {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

/* genau eine Zoe-&-Louis-Linie */
#result-wrapper > .title h1.h2::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 17px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   2. SORTIER-/ANSICHTSLEISTE
   --------------------------------------------------------- */

#result-wrapper .productlist-page-nav-header-m {
    margin-top: 0 !important;
}

#result-wrapper .productlist-page-nav-header-m + hr,
#result-wrapper .productlist-page-nav-header-m ~ hr.productlist-page-nav-bottom {
    border-color: #E3DDD5 !important;
}

#result-wrapper .productlist-page-nav-header-m .btn {
    min-height: 48px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #444 !important;
    box-shadow: none !important;
}

#result-wrapper .productlist-page-nav-header-m .btn:hover,
#result-wrapper .productlist-page-nav-header-m .btn:focus {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* aktive Galerie/Listendarstellung */
#result-wrapper .productlist-page-nav-header-m .btn-option.active {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* Ergebniszahl */
#result-wrapper .productlist-item-info {
    color: #666 !important;
    font-size: 15px;
}

/* ---------------------------------------------------------
   3. SIDEBAR – EXAKTE JTL-ID #sidepanel_left
   --------------------------------------------------------- */

#sidepanel_left {
    padding-right: 28px !important;
}

#sidepanel_left .box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop-Kategorieüberschrift */
#sidepanel_left .productlist-filter-headline.d-none.d-md-flex {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* mobile Kategorieüberschrift */
#sidepanel_left > .box-categories > a.box-normal-link {
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Kategorie-Navigation */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item {
    margin: 0 !important;
}

#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
    position: relative !important;
    display: block !important;
    padding: 11px 12px !important;
    margin: 0 !important;

    color: #444 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        padding-left .18s ease !important;
}

/* Hover */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link:hover {
    padding-left: 17px !important;
    color: #C77752 !important;
    background: #FAF9F6 !important;
}

/* Aktive Kategorie – JTL-Gelb vollständig entfernen */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link,
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link:hover {
    padding-left: 17px !important;

    color: #2F2F2F !important;
    background: #EEF2EC !important;

    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    font-weight: 600 !important;
}

/* Sage-Akzent links statt gelber JTL-Leiste */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;

    background: #8FA588 !important;
    border-radius: 3px 0 0 3px !important;
}

/* JTL-HR unter der Kategorienbox */
#sidepanel_left .box-normal-hr,
#sidepanel_left .box-filter-hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #E3DDD5 !important;
}

/* ---------------------------------------------------------
   4. FILTER-BOXEN
   --------------------------------------------------------- */

#sidepanel_left .btn-filter-box {
    position: relative !important;
    min-height: 48px !important;
    padding: 14px 28px 14px 0 !important;

    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#sidepanel_left .btn-filter-box:hover,
#sidepanel_left .btn-filter-box:focus {
    color: #C77752 !important;
    background: transparent !important;
}

/* Filter-Pfeil */
#sidepanel_left .btn-filter-box::after {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Preisfelder */
#sidepanel_left .price-range-input {
    border-color: #D6CEC5 !important;
    box-shadow: none !important;
}

#sidepanel_left .price-range-input:focus {
    border-color: #8FA588 !important;
    box-shadow: 0 0 0 1px rgba(143,165,136,.12) !important;
}

#sidepanel_left .input-group-text {
    border-color: #D6CEC5 !important;
    background: #FAF9F6 !important;
    color: #666 !important;
}

/* Preis-Slider – JTL-Gelb durch Sage */
#sidepanel_left .price-range-slide .noUi-connect {
    background: #8FA588 !important;
}

#sidepanel_left .price-range-slide .noUi-handle {
    border-color: #8FA588 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(47,47,47,.14) !important;
}

/* ---------------------------------------------------------
   5. PRODUKTGRID – JTL setzt 4 / 3 / 2 Spalten selbst
   --------------------------------------------------------- */

#product-list {
    margin-top: 0 !important;
}

#product-list .product-wrapper {
    margin-bottom: 28px !important;
}

/* Karten nur dezent einfassen */
#product-list .productbox {
    height: 100%;
}

#product-list .productbox-inner {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (min-width: 768px) {
    #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    #content > .row.justify-content-lg-end {
        display: block !important;
    }

    #sidepanel_left {
        padding-right: 0 !important;
    }

    #result-wrapper > .title {
        margin-bottom: 22px !important;
    }

    #result-wrapper > .title h1.h2 {
        font-size: 34px !important;
        padding-bottom: 14px !important;
    }

    #result-wrapper > .title h1.h2::after {
        width: 52px !important;
        margin-top: 14px !important;
    }

    #result-wrapper .productlist-page-nav-header-m {
        margin-bottom: 10px !important;
    }

    #result-wrapper .productlist-page-nav-header-m .btn {
        min-height: 46px !important;
    }

    #product-list .product-wrapper {
        margin-bottom: 20px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #result-wrapper > .title h1.h2 {
        font-size: 31px !important;
    }
}



/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG / EDITORIAL
   Für strukturierte Produktbeschreibungen in JTL
   ========================================================= */

body:has(#gallery_preview_wrapper) .zl-product-description {
    max-width: 980px;
    margin: 0 auto;
    color: #444;
    font-family: "source-sans-pro", sans-serif;
    font-size: 17px;
    line-height: 1.68;
}

body:has(#gallery_preview_wrapper) .zl-product-description p {
    margin: 0 0 18px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
    max-width: 850px;
    margin: 0 0 38px;
    color: #2F2F2F;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 400;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-kicker {
    margin: 0 0 8px;
    color: #C77752;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body:has(#gallery_preview_wrapper) .zl-product-description h2 {
    margin: 0 0 18px;
    color: #2F2F2F;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.015em;
}

body:has(#gallery_preview_wrapper) .zl-product-description h3 {
    margin: 0 0 12px;
    color: #2F2F2F;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
    margin: 0 0 48px;
    padding: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality {
    padding: 34px 36px;
    background: #F6F3EE;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality p:last-child {
    margin-bottom: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list {
    margin: 22px 0 24px;
    padding: 0;
    list-style: none;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
    color: #444;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #8FA588;
    font-weight: 600;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    min-height: 96px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    color: #2F2F2F;
    font-size: 15px;
    line-height: 1.4;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability {
    margin: 0 0 48px;
    padding: 34px 36px;
    background: #EEF2EC;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block;
    margin: -4px 0 18px;
    color: #8FA588;
    font-size: 24px;
    line-height: 1.25;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
    margin: 0 0 48px;
    padding: 34px 36px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 8px;
    padding: 11px 22px;
    background: #C77752;
    border: 1px solid #C77752;
    border-radius: 6px;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button:hover {
    background: #A95F40;
    border-color: #A95F40;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(47,47,47,.08);
}

/* Attribute table: bleibt technisch, wird aber optisch an die Marke angepasst */
body:has(#gallery_preview_wrapper) .zl-product-description + .product-attributes,
body:has(#gallery_preview_wrapper) .product-attributes {
    font-size: 15px;
}

body:has(#gallery_preview_wrapper) .product-attributes th {
    color: #2F2F2F;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        max-width: 100%;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        font-size: 16px;
        line-height: 1.68;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 1.62;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description h2 {
        font-size: 27px;
        line-height: 1.28;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        margin-bottom: 36px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 26px 22px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        gap: 12px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 86px;
        padding: 15px 12px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: 1fr 1fr;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 24px 18px;
    }
}
/* =========================================================
   ZOE & LOUIS – MASTER CSS
   Produktdetailseiten + Kategorieseiten
   Basis: zuletzt bestätigte Versionen
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAILSEITE / PHASE 1
   Reiner Artikelbereich – JTL/NOVA-Datenlogik bleibt erhalten
   Fokus: Galerie + Produktinformationen + Varianten + Kaufbereich
   ========================================================= */

/* ---------------------------------------------------------
   1. PRODUKTDETAIL – GRUNDRAHMEN
   Der Produktdetailbereich wird über die vorhandene JTL-Galerie
   erkannt. Es werden keine Produktdaten hardcodiert.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #content {
    color: #444;
}

body:has(#gallery_preview_wrapper) #content > .container,
body:has(#gallery_preview_wrapper) #content > .container-fluid {
    padding-top: 18px;
}

body:has(#gallery_preview_wrapper) .product-primary,
body:has(#gallery_preview_wrapper) .product-detail {
    position: relative;
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .breadcrumb {
    margin: 0 0 30px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.5;
    border: 0 !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a:hover {
    color: #C77752 !important;
}

/* ---------------------------------------------------------
   3. PRODUKT-GALERIE
   ---------------------------------------------------------
   WICHTIG:
   Die JTL/NOVA/Slick-Galerie übernimmt Bildgröße, Position,
   object-fit und Slide-Transform vollständig selbst.
   Wir gestalten hier ausschließlich die äußere Optik.
   --------------------------------------------------------- */

/* Nur der äußere Galerie-Rahmen */
body:has(#gallery_preview_wrapper) #gallery_preview,
body:has(#gallery_preview_wrapper) #gallery {
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
}

/* Keine eigene Positionierung oder Skalierung des JTL-Hauptbildes.
   Dadurch bleiben Slick und die native JTL-Galerielogik intakt. */

/* Thumbnail-Optik */
body:has(#gallery_preview_wrapper) .product-thumbnails {
    margin-top: 14px !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image {
    margin-right: 10px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    transition: border-color .2s ease, opacity .2s ease;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image:hover {
    border-color: #C77752 !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current .square-image,
body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current {
    border-color: #C77752 !important;
}

/* ---------------------------------------------------------
   4. PRODUKT-INFORMATIONEN RECHTS
   --------------------------------------------------------- */


body:has(#gallery_preview_wrapper) .product-info,
body:has(#gallery_preview_wrapper) .product-primary .product-info {
    padding-left: 28px;
}

body:has(#gallery_preview_wrapper) .product-title,
body:has(#gallery_preview_wrapper) .product-info h1 {
    margin: 0 0 14px !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

body:has(#gallery_preview_wrapper) .product-title::after,
body:has(#gallery_preview_wrapper) .product-info h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: #C77752;
}

/* Artikelnummer / Kategorie / Hersteller */
body:has(#gallery_preview_wrapper) .product-reference,
body:has(#gallery_preview_wrapper) .product-manufacturer,
body:has(#gallery_preview_wrapper) .product-meta {
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .product-reference a,
body:has(#gallery_preview_wrapper) .product-manufacturer a,
body:has(#gallery_preview_wrapper) .product-meta a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   5. KURZBESCHREIBUNG
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-description-short {
    margin: 22px 0 26px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body:has(#gallery_preview_wrapper) .product-description-short p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. VARIANTEN – JTL-RADIOS ALS CHOICE CARDS
   Die vorhandenen Inputs bleiben unverändert funktional.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-variations,
body:has(#gallery_preview_wrapper) .variations {
    margin: 22px 0 28px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .form-group,
body:has(#gallery_preview_wrapper) .variations .form-group {
    margin-bottom: 18px !important;
}

body:has(#gallery_preview_wrapper) .product-variations label,
body:has(#gallery_preview_wrapper) .variations label {
    color: #2F2F2F !important;
}

body:has(#gallery_preview_wrapper) .product-variations input[type="radio"],
body:has(#gallery_preview_wrapper) .variations input[type="radio"] {
    accent-color: #C77752;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control,
body:has(#gallery_preview_wrapper) .variations .custom-control {
    margin-bottom: 10px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label:hover,
body:has(#gallery_preview_wrapper) .variations .custom-control-label:hover {
    border-color: #C77752 !important;
    background: #FAF7F3 !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-input:checked ~ .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-input:checked ~ .custom-control-label {
    border-color: #C77752 !important;
    background: #FBF7F3 !important;
    box-shadow: inset 3px 0 0 #C77752 !important;
}

/* Falls NOVA keine custom-control-Struktur verwendet:
   alternative JTL-Variationselemente */
body:has(#gallery_preview_wrapper) .product-variations .radio,
body:has(#gallery_preview_wrapper) .variations .radio {
    margin-bottom: 10px;
}

body:has(#gallery_preview_wrapper) .product-variations .radio label,
body:has(#gallery_preview_wrapper) .variations .radio label {
    display: block;
    padding: 13px 16px;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    background: #FFF;
}

/* ---------------------------------------------------------
   7. PREIS
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-price,
body:has(#gallery_preview_wrapper) .price {
    margin: 28px 0 0 !important;
    padding-top: 22px !important;
    border-top: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) .product-price .price,
body:has(#gallery_preview_wrapper) .product-price .price-value {
    color: #2F2F2F !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

body:has(#gallery_preview_wrapper) .product-price small,
body:has(#gallery_preview_wrapper) .product-price .price-note {
    color: #666 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   8. VERFÜGBARKEIT / LIEFERZEIT
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-stock {
    margin-top: 22px !important;
    padding: 18px 0 !important;
    border-top: 1px solid #E3DDD5 !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #444 !important;
}

body:has(#gallery_preview_wrapper) .product-stock .text-success,
body:has(#gallery_preview_wrapper) .product-stock .stock-status {
    color: #6F8B68 !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .product-stock a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   9. MENGE + WARENKORB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form {
    margin-top: 24px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .quantity,
body:has(#gallery_preview_wrapper) #buy_form .input-group {
    min-height: 54px;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form .quantity input {
    height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    color: #2F2F2F !important;
    background: #FFF !important;
    text-align: center;
    font-size: 17px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
    min-height: 54px !important;
    padding: 13px 28px !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket:hover,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"]:hover,
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"]:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-left: 0;
        padding-top: 32px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #content > .container,
    body:has(#gallery_preview_wrapper) #content > .container-fluid {
        padding-top: 10px;
    }

    body:has(#gallery_preview_wrapper) .breadcrumb {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    body:has(#gallery_preview_wrapper) #gallery,
    body:has(#gallery_preview_wrapper) #gallery_preview {
        border-radius: 6px !important;
    }

    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-top: 26px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) .product-title::after,
    body:has(#gallery_preview_wrapper) .product-info h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        font-size: 16px !important;
    }

    body:has(#gallery_preview_wrapper) .product-price .price,
    body:has(#gallery_preview_wrapper) .product-price .price-value {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
    body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        font-size: 15.5px !important;
    }

    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
    body:has(#gallery_preview_wrapper) .variations .custom-control-label {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ---------------------------------------------------------
   11. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#gallery_preview_wrapper) .product-thumbnails .square-image,
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"],
    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL PRODUKTE
   PHASE 1 V3 – BESCHREIBUNG / TABS / MENGENFELD
   ========================================================= */

/* ---------------------------------------------------------
   12. BESCHREIBUNG – LESBARER SATZ
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #tab-description,
body:has(#gallery_preview_wrapper) #tab-description .product-description,
body:has(#gallery_preview_wrapper) #tab-description .desc,
body:has(#gallery_preview_wrapper) #tab-description p {
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

body:has(#gallery_preview_wrapper) #tab-description p {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body:has(#gallery_preview_wrapper) #tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   13. PRODUKT-TABS – ZOE & LOUIS
   Gelbe JTL-Aktivlinie wird vollständig ersetzt.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]),
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) .nav-link,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0 0 15px !important;
    margin: 0 34px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:focus,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:focus {
    color: #C77752 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active {
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   14. MENGENFELD – MINUS / ZAHL / PLUS
   JTL data-count-down / data-count-up bleibt vollständig aktiv.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form .form-counter,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    overflow: hidden !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-append,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #C77752 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Wir verwenden bewusst einfache Zeichen statt einer Abhängigkeit
   von der geladenen Font-Awesome-Version. */
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]::before {
    content: "−" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]::before {
    content: "+" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] .fas {
    display: none !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]:hover {
    background: #FBF7F3 !important;
    color: #A95F40 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #E3DDD5 !important;
    border-right: 1px solid #E3DDD5 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Native Spinner ebenfalls ausblenden – unsere +/- Steuerung bleibt sichtbar. */
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-inner-spin-button,
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ---------------------------------------------------------
   15. MENGE + BUTTON AUF MOBIL
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #buy_form .form-counter,
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
        max-width: 100% !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
        width: 48px !important;
        min-width: 48px !important;
    }

    body:has(#gallery_preview_wrapper) #tab-description,
    body:has(#gallery_preview_wrapper) #tab-description .product-description,
    body:has(#gallery_preview_wrapper) #tab-description .desc,
    body:has(#gallery_preview_wrapper) #tab-description p {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}


/* =========================================================
   KATEGORIESEITEN – VARIANTE 2 „NATÜRLICH & KLAR"
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – KATEGORIESEITEN
   MASTER DESIGN – VARIANTE 2 „NATÜRLICH & KLAR“

   Gilt automatisch für alle JTL-Kategorieseiten.
   Keine Kategorie oder Produktnamen fest codiert.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN-VARIABLEN
   --------------------------------------------------------- */

:root {
    --zl-cat-sage: #8FA588;
    --zl-cat-sage-soft: #EEF2EC;
    --zl-cat-terracotta: #C77752;
    --zl-cat-terracotta-dark: #A95F40;
    --zl-cat-offwhite: #F6F3EE;
    --zl-cat-dark: #2F2F2F;
    --zl-cat-text: #444;
    --zl-cat-muted: #666;
    --zl-cat-border: #E3DDD5;
    --zl-cat-white: #FFFFFF;
}

/* ---------------------------------------------------------
   1. KATEGORIE – GRUNDLAGE
   --------------------------------------------------------- */

body:has(#result-wrapper) #content {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) #result-wrapper {
    width: 100%;
}

/* ---------------------------------------------------------
   2. KATEGORIE-HEADER
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper .productlist-header {
    margin-bottom: 34px;
}

body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 17px !important;
    color: var(--zl-cat-dark) !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

/* unsere typische kurze Terracotta-Linie */
body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: var(--zl-cat-terracotta);
}

body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
    max-width: 820px;
    margin: 0;
    color: var(--zl-cat-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   3. LINKER BEREICH / KATEGORIEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #sidepanel-left,
body:has(#result-wrapper) .sidepanel-left {
    padding-right: 28px;
}

body:has(#result-wrapper) .box-categories,
body:has(#result-wrapper) .box-filter,
body:has(#result-wrapper) .box-filter-category {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#result-wrapper) .box-categories .box-heading,
body:has(#result-wrapper) .box-filter .box-heading {
    margin-bottom: 0;
    padding: 0 0 12px;
    color: var(--zl-cat-dark);
    border-bottom: 1px solid var(--zl-cat-border);
    font-size: 18px;
    font-weight: 600;
}

/* Kategorie-Links */
body:has(#result-wrapper) .box-categories .nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--zl-cat-text) !important;
    background: transparent !important;
    font-size: 16px;
    transition: color .18s ease, padding-left .18s ease;
}

body:has(#result-wrapper) .box-categories .nav-link:hover {
    padding-left: 5px;
    color: var(--zl-cat-terracotta) !important;
}

/* aktive Kategorie */
body:has(#result-wrapper) .box-categories .nav-link.active,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link {
    padding-left: 12px;
    color: var(--zl-cat-dark) !important;
    background: var(--zl-cat-sage-soft) !important;
    border-radius: 4px;
    font-weight: 600;
}

body:has(#result-wrapper) .box-categories .nav-link.active::before,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zl-cat-sage);
    border-radius: 3px 0 0 3px;
}

/* ---------------------------------------------------------
   4. FILTER
   --------------------------------------------------------- */

body:has(#result-wrapper) .box-filter .productlist-filter-headline,
body:has(#result-wrapper) .box-filter .filter-headline {
    padding: 17px 0 11px;
    color: var(--zl-cat-dark);
    border-top: 1px solid var(--zl-cat-border);
    font-size: 16px;
    font-weight: 500;
}

body:has(#result-wrapper) .box-filter .nav-link {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) .box-filter .nav-link:hover {
    color: var(--zl-cat-terracotta);
}

/* ---------------------------------------------------------
   5. SORTIERUNG / ANSICHT
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper select,
body:has(#result-wrapper) #result-wrapper .custom-select {
    min-height: 48px;
    padding-left: 14px;
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper select:focus,
body:has(#result-wrapper) #result-wrapper .custom-select:focus {
    border-color: var(--zl-cat-sage);
    box-shadow: 0 0 0 1px rgba(143,165,136,.12);
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
body:has(#result-wrapper) #result-wrapper .btn-group .btn {
    min-height: 48px;
    border-color: var(--zl-cat-border);
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn:hover,
body:has(#result-wrapper) #result-wrapper .btn-group .btn:hover {
    color: var(--zl-cat-terracotta);
    border-color: var(--zl-cat-terracotta);
    background: var(--zl-cat-white);
}

/* ---------------------------------------------------------
   6. PRODUKTGRID
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list {
    margin-top: 8px;
}

body:has(#result-wrapper) #product-list .productbox {
    margin-bottom: 28px;
}

body:has(#result-wrapper) #product-list .productbox-inner {
    height: 100%;
    overflow: hidden;
    background: var(--zl-cat-white);
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* dezenter Hover */
@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   7. PRODUKTBILDER
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-image {
    overflow: hidden;
}

body:has(#result-wrapper) #product-list .productbox-images img {
    transition: transform .35s ease;
}

@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   8. PRODUKTTITEL / INFORMATIONEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-title {
    padding: 15px 15px 8px !important;
    min-height: 64px;
}

body:has(#result-wrapper) #product-list .productbox-title a {
    color: var(--zl-cat-dark) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body:has(#result-wrapper) #product-list .productbox-title a:hover {
    color: var(--zl-cat-terracotta) !important;
}

/* Preis */
body:has(#result-wrapper) #product-list .productbox-price {
    color: var(--zl-cat-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header {
        margin-bottom: 26px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        margin-bottom: 13px !important;
        padding-bottom: 14px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 16px;
        line-height: 1.65;
    }

    body:has(#result-wrapper) #sidepanel-left,
    body:has(#result-wrapper) .sidepanel-left {
        padding-right: 0;
    }

    body:has(#result-wrapper) #result-wrapper select,
    body:has(#result-wrapper) #result-wrapper .custom-select,
    body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
    body:has(#result-wrapper) #result-wrapper .btn-group .btn {
        min-height: 46px;
    }

    body:has(#result-wrapper) #product-list {
        margin-top: 4px;
    }

    body:has(#result-wrapper) #product-list .productbox {
        margin-bottom: 20px;
    }

    body:has(#result-wrapper) #product-list .productbox-title {
        min-height: 0;
        padding: 14px 15px 9px !important;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 575.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        font-size: 31px !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 15.5px;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------
   10. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#result-wrapper) #product-list .productbox-inner,
    body:has(#result-wrapper) #product-list .productbox-images img,
    body:has(#result-wrapper) .box-categories .nav-link {
        transition: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE MASTER
   EXAKTER JTL-DOM-FIX
   Grundlage: echte Kategorieseite / Kurse & Workshops
   ========================================================= */

/* ---------------------------------------------------------
   KATEGORIE-HAUPTBEREICH
   JTL verwendet #result-wrapper direkt innerhalb
   der rechten Content-Spalte.
   --------------------------------------------------------- */

#content > .row.justify-content-lg-end {
    align-items: flex-start;
}

#content > .row.justify-content-lg-end > .col-lg-8,
#content > .row.justify-content-lg-end > .col-xl-9 {
    min-width: 0;
}

/* ---------------------------------------------------------
   1. ECHTE KATEGORIEÜBERSCHRIFT
   JTL-Struktur:
   #result-wrapper > .title > h1.h2
   --------------------------------------------------------- */

#result-wrapper > .title {
    margin: 0 0 30px !important;
    padding: 0 !important;
}

#result-wrapper > .title h1.h2 {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

/* genau eine Zoe-&-Louis-Linie */
#result-wrapper > .title h1.h2::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 17px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   2. SORTIER-/ANSICHTSLEISTE
   --------------------------------------------------------- */

#result-wrapper .productlist-page-nav-header-m {
    margin-top: 0 !important;
}

#result-wrapper .productlist-page-nav-header-m + hr,
#result-wrapper .productlist-page-nav-header-m ~ hr.productlist-page-nav-bottom {
    border-color: #E3DDD5 !important;
}

#result-wrapper .productlist-page-nav-header-m .btn {
    min-height: 48px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #444 !important;
    box-shadow: none !important;
}

#result-wrapper .productlist-page-nav-header-m .btn:hover,
#result-wrapper .productlist-page-nav-header-m .btn:focus {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* aktive Galerie/Listendarstellung */
#result-wrapper .productlist-page-nav-header-m .btn-option.active {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* Ergebniszahl */
#result-wrapper .productlist-item-info {
    color: #666 !important;
    font-size: 15px;
}

/* ---------------------------------------------------------
   3. SIDEBAR – EXAKTE JTL-ID #sidepanel_left
   --------------------------------------------------------- */

#sidepanel_left {
    padding-right: 28px !important;
}

#sidepanel_left .box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop-Kategorieüberschrift */
#sidepanel_left .productlist-filter-headline.d-none.d-md-flex {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* mobile Kategorieüberschrift */
#sidepanel_left > .box-categories > a.box-normal-link {
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Kategorie-Navigation */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item {
    margin: 0 !important;
}

#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
    position: relative !important;
    display: block !important;
    padding: 11px 12px !important;
    margin: 0 !important;

    color: #444 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        padding-left .18s ease !important;
}

/* Hover */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link:hover {
    padding-left: 17px !important;
    color: #C77752 !important;
    background: #FAF9F6 !important;
}

/* Aktive Kategorie – JTL-Gelb vollständig entfernen */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link,
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link:hover {
    padding-left: 17px !important;

    color: #2F2F2F !important;
    background: #EEF2EC !important;

    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    font-weight: 600 !important;
}

/* Sage-Akzent links statt gelber JTL-Leiste */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;

    background: #8FA588 !important;
    border-radius: 3px 0 0 3px !important;
}

/* JTL-HR unter der Kategorienbox */
#sidepanel_left .box-normal-hr,
#sidepanel_left .box-filter-hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #E3DDD5 !important;
}

/* ---------------------------------------------------------
   4. FILTER-BOXEN
   --------------------------------------------------------- */

#sidepanel_left .btn-filter-box {
    position: relative !important;
    min-height: 48px !important;
    padding: 14px 28px 14px 0 !important;

    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#sidepanel_left .btn-filter-box:hover,
#sidepanel_left .btn-filter-box:focus {
    color: #C77752 !important;
    background: transparent !important;
}

/* Filter-Pfeil */
#sidepanel_left .btn-filter-box::after {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Preisfelder */
#sidepanel_left .price-range-input {
    border-color: #D6CEC5 !important;
    box-shadow: none !important;
}

#sidepanel_left .price-range-input:focus {
    border-color: #8FA588 !important;
    box-shadow: 0 0 0 1px rgba(143,165,136,.12) !important;
}

#sidepanel_left .input-group-text {
    border-color: #D6CEC5 !important;
    background: #FAF9F6 !important;
    color: #666 !important;
}

/* Preis-Slider – JTL-Gelb durch Sage */
#sidepanel_left .price-range-slide .noUi-connect {
    background: #8FA588 !important;
}

#sidepanel_left .price-range-slide .noUi-handle {
    border-color: #8FA588 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(47,47,47,.14) !important;
}

/* ---------------------------------------------------------
   5. PRODUKTGRID – JTL setzt 4 / 3 / 2 Spalten selbst
   --------------------------------------------------------- */

#product-list {
    margin-top: 0 !important;
}

#product-list .product-wrapper {
    margin-bottom: 28px !important;
}

/* Karten nur dezent einfassen */
#product-list .productbox {
    height: 100%;
}

#product-list .productbox-inner {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (min-width: 768px) {
    #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    #content > .row.justify-content-lg-end {
        display: block !important;
    }

    #sidepanel_left {
        padding-right: 0 !important;
    }

    #result-wrapper > .title {
        margin-bottom: 22px !important;
    }

    #result-wrapper > .title h1.h2 {
        font-size: 34px !important;
        padding-bottom: 14px !important;
    }

    #result-wrapper > .title h1.h2::after {
        width: 52px !important;
        margin-top: 14px !important;
    }

    #result-wrapper .productlist-page-nav-header-m {
        margin-bottom: 10px !important;
    }

    #result-wrapper .productlist-page-nav-header-m .btn {
        min-height: 46px !important;
    }

    #product-list .product-wrapper {
        margin-bottom: 20px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #result-wrapper > .title h1.h2 {
        font-size: 31px !important;
    }
}



/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG / EDITORIAL
   Für strukturierte Produktbeschreibungen in JTL
   ========================================================= */

body:has(#gallery_preview_wrapper) .zl-product-description {
    max-width: 980px;
    margin: 0 auto;
    color: #444;
    font-family: "source-sans-pro", sans-serif;
    font-size: 17px;
    line-height: 1.68;
}

body:has(#gallery_preview_wrapper) .zl-product-description p {
    margin: 0 0 18px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
    max-width: 850px;
    margin: 0 0 38px;
    color: #2F2F2F;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 400;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-kicker {
    margin: 0 0 8px;
    color: #C77752;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body:has(#gallery_preview_wrapper) .zl-product-description h2 {
    margin: 0 0 18px;
    color: #2F2F2F;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.015em;
}

body:has(#gallery_preview_wrapper) .zl-product-description h3 {
    margin: 0 0 12px;
    color: #2F2F2F;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
    margin: 0 0 48px;
    padding: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality {
    padding: 34px 36px;
    background: #F6F3EE;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality p:last-child {
    margin-bottom: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list {
    margin: 22px 0 24px;
    padding: 0;
    list-style: none;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
    color: #444;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #8FA588;
    font-weight: 600;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    min-height: 96px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    color: #2F2F2F;
    font-size: 15px;
    line-height: 1.4;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability {
    margin: 0 0 48px;
    padding: 34px 36px;
    background: #EEF2EC;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block;
    margin: -4px 0 18px;
    color: #8FA588;
    font-size: 24px;
    line-height: 1.25;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
    margin: 0 0 48px;
    padding: 34px 36px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 8px;
    padding: 11px 22px;
    background: #C77752;
    border: 1px solid #C77752;
    border-radius: 6px;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button:hover {
    background: #A95F40;
    border-color: #A95F40;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(47,47,47,.08);
}

/* Attribute table: bleibt technisch, wird aber optisch an die Marke angepasst */
body:has(#gallery_preview_wrapper) .zl-product-description + .product-attributes,
body:has(#gallery_preview_wrapper) .product-attributes {
    font-size: 15px;
}

body:has(#gallery_preview_wrapper) .product-attributes th {
    color: #2F2F2F;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        max-width: 100%;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        font-size: 16px;
        line-height: 1.68;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 1.62;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description h2 {
        font-size: 27px;
        line-height: 1.28;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        margin-bottom: 36px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 26px 22px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        gap: 12px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 86px;
        padding: 15px 12px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: 1fr 1fr;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 24px 18px;
    }
}

/* =========================================================
   KATEGORIEN – VORBEREITUNG FÜR OBER-/UNTERKATEGORIEN
   Die Darstellung bleibt vollständig dynamisch.
   Die eigentliche Zusammenführung von Artikeln aus
   Unterkategorien in einer Oberkategorie ist KEIN CSS-Thema
   und wird separat über JTL-Template/PHP gelöst.
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL BESCHREIBUNG V2
   Editorial / Concept-Store Layout
   ========================================================= */

/* Beschreibung darf niemals horizontal aus dem Viewport laufen */
body:has(#gallery_preview_wrapper) .zl-product-description {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ---------- Intro ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr) !important;
    gap: 54px !important;
    align-items: center !important;
    margin: 0 0 64px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
    max-width: none !important;
    margin: 0 !important;
    color: #2F2F2F !important;
    font-size: 20px !important;
    line-height: 1.68 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #F6F3EE !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ---------- Kicker / headings ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-kicker {
    margin: 0 0 8px !important;
    color: #C77752 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description h2 {
    margin: 0 0 18px !important;
    color: #2F2F2F !important;
    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -.015em !important;
}

/* ---------- Standard sections ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
    margin: 0 0 62px !important;
    padding: 0 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section > p,
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality > p,
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability > p {
    max-width: 900px !important;
    margin-right: auto !important;
    overflow-wrap: anywhere !important;
}

/* ---------- Produktauswahl – Varianten ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 26px 0 22px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card {
    position: relative !important;
    padding: 20px 22px 20px 50px !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 7px !important;
    color: #2F2F2F !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 23px !important;
    width: 12px !important;
    height: 12px !important;
    border: 1px solid #C77752 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: #2F2F2F !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card span {
    display: block !important;
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* ---------- Qualität ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality {
    margin: 0 0 62px !important;
    padding: 42px 44px !important;
    background: #F6F3EE !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality .zl-quality-intro {
    max-width: 850px !important;
    margin-bottom: 26px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality .zl-description-list {
    display: none !important;
}

/* ---------- Vier Qualitätskacheln ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 28px 0 0 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    min-height: 128px !important;
    padding: 18px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    text-align: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 7px !important;
    color: #2F2F2F !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
    background: #F6F3EE !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
}

/* ---------- Nachhaltigkeit ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability {
    margin: 0 0 62px !important;
    padding: 42px 44px !important;
    background: #EEF2EC !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block !important;
    margin: -3px 0 19px !important;
    color: #8FA588 !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
}

/* ---------- CTA ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
    margin: 0 0 52px !important;
    padding: 42px 44px !important;
    text-align: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta h2 {
    margin-bottom: 12px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta p {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    margin-top: 8px !important;
    padding: 11px 22px !important;
    background: #C77752 !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background-color .2s ease, box-shadow .2s ease !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(47,47,47,.08) !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image {
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-wrap {
        gap: 24px !important;
        margin-bottom: 46px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        font-size: 18px !important;
        line-height: 1.62 !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description h2 {
        font-size: 27px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
        margin-bottom: 44px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-options {
        grid-template-columns: 1fr !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        margin-bottom: 44px !important;
        padding: 28px 22px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        gap: 10px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 112px !important;
        padding: 15px 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image {
        max-width: none !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 25px 18px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
        width: 23px !important;
        height: 23px !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG V2.1
   Fix: SVG-Icons / Feature-Kacheln
   ========================================================= */

/* Featurebereich strikt als vier gleichwertige Kacheln */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Icon-Kreis darf niemals von globalen SVG-Regeln vergrößert werden */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #F6F3EE !important;
}

/* SVG selbst hart begrenzen */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
    display: block !important;
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    flex: 0 0 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Featurekarte: keine riesigen vertikalen Abstände */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 128px !important;
    height: 128px !important;
    padding: 16px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Text innerhalb der Kachel darf nicht nach unten "weglaufen" */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature > span:last-child {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Mobile: 2 x 2 */
@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 112px !important;
        height: 112px !important;
        padding: 13px 8px !important;
        gap: 8px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
        flex-basis: 23px !important;
    }
}

/* =========================================================
   MOBILE – saubere Breite / kein horizontaler Überlauf
   ========================================================= */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description,
    body:has(#gallery_preview_wrapper) .zl-product-description * {
        max-width: 100%;
        box-sizing: border-box;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description p,
    body:has(#gallery_preview_wrapper) .zl-product-description li,
    body:has(#gallery_preview_wrapper) .zl-product-description span {
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        margin-bottom: 34px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
        margin-bottom: 42px !important;
    }
}









/* =========================================================
   ZOE & LOUIS – MASTER CSS
   Produktdetailseiten + Kategorieseiten
   Basis: zuletzt bestätigte Versionen
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAILSEITE / PHASE 1
   Reiner Artikelbereich – JTL/NOVA-Datenlogik bleibt erhalten
   Fokus: Galerie + Produktinformationen + Varianten + Kaufbereich
   ========================================================= */

/* ---------------------------------------------------------
   1. PRODUKTDETAIL – GRUNDRAHMEN
   Der Produktdetailbereich wird über die vorhandene JTL-Galerie
   erkannt. Es werden keine Produktdaten hardcodiert.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #content {
    color: #444;
}

body:has(#gallery_preview_wrapper) #content > .container,
body:has(#gallery_preview_wrapper) #content > .container-fluid {
    padding-top: 18px;
}

body:has(#gallery_preview_wrapper) .product-primary,
body:has(#gallery_preview_wrapper) .product-detail {
    position: relative;
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .breadcrumb {
    margin: 0 0 30px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.5;
    border: 0 !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a:hover {
    color: #C77752 !important;
}

/* ---------------------------------------------------------
   3. PRODUKT-GALERIE
   ---------------------------------------------------------
   WICHTIG:
   Die JTL/NOVA/Slick-Galerie übernimmt Bildgröße, Position,
   object-fit und Slide-Transform vollständig selbst.
   Wir gestalten hier ausschließlich die äußere Optik.
   --------------------------------------------------------- */

/* Nur der äußere Galerie-Rahmen */
body:has(#gallery_preview_wrapper) #gallery_preview,
body:has(#gallery_preview_wrapper) #gallery {
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
}

/* Keine eigene Positionierung oder Skalierung des JTL-Hauptbildes.
   Dadurch bleiben Slick und die native JTL-Galerielogik intakt. */

/* Thumbnail-Optik */
body:has(#gallery_preview_wrapper) .product-thumbnails {
    margin-top: 14px !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image {
    margin-right: 10px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    transition: border-color .2s ease, opacity .2s ease;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image:hover {
    border-color: #C77752 !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current .square-image,
body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current {
    border-color: #C77752 !important;
}

/* ---------------------------------------------------------
   4. PRODUKT-INFORMATIONEN RECHTS
   --------------------------------------------------------- */


body:has(#gallery_preview_wrapper) .product-info,
body:has(#gallery_preview_wrapper) .product-primary .product-info {
    padding-left: 28px;
}

body:has(#gallery_preview_wrapper) .product-title,
body:has(#gallery_preview_wrapper) .product-info h1 {
    margin: 0 0 14px !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

body:has(#gallery_preview_wrapper) .product-title::after,
body:has(#gallery_preview_wrapper) .product-info h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: #C77752;
}

/* Artikelnummer / Kategorie / Hersteller */
body:has(#gallery_preview_wrapper) .product-reference,
body:has(#gallery_preview_wrapper) .product-manufacturer,
body:has(#gallery_preview_wrapper) .product-meta {
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .product-reference a,
body:has(#gallery_preview_wrapper) .product-manufacturer a,
body:has(#gallery_preview_wrapper) .product-meta a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   5. KURZBESCHREIBUNG
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-description-short {
    margin: 22px 0 26px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body:has(#gallery_preview_wrapper) .product-description-short p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. VARIANTEN – JTL-RADIOS ALS CHOICE CARDS
   Die vorhandenen Inputs bleiben unverändert funktional.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-variations,
body:has(#gallery_preview_wrapper) .variations {
    margin: 22px 0 28px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .form-group,
body:has(#gallery_preview_wrapper) .variations .form-group {
    margin-bottom: 18px !important;
}

body:has(#gallery_preview_wrapper) .product-variations label,
body:has(#gallery_preview_wrapper) .variations label {
    color: #2F2F2F !important;
}

body:has(#gallery_preview_wrapper) .product-variations input[type="radio"],
body:has(#gallery_preview_wrapper) .variations input[type="radio"] {
    accent-color: #C77752;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control,
body:has(#gallery_preview_wrapper) .variations .custom-control {
    margin-bottom: 10px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label:hover,
body:has(#gallery_preview_wrapper) .variations .custom-control-label:hover {
    border-color: #C77752 !important;
    background: #FAF7F3 !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-input:checked ~ .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-input:checked ~ .custom-control-label {
    border-color: #C77752 !important;
    background: #FBF7F3 !important;
    box-shadow: inset 3px 0 0 #C77752 !important;
}

/* Falls NOVA keine custom-control-Struktur verwendet:
   alternative JTL-Variationselemente */
body:has(#gallery_preview_wrapper) .product-variations .radio,
body:has(#gallery_preview_wrapper) .variations .radio {
    margin-bottom: 10px;
}

body:has(#gallery_preview_wrapper) .product-variations .radio label,
body:has(#gallery_preview_wrapper) .variations .radio label {
    display: block;
    padding: 13px 16px;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    background: #FFF;
}

/* ---------------------------------------------------------
   7. PREIS
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-price,
body:has(#gallery_preview_wrapper) .price {
    margin: 28px 0 0 !important;
    padding-top: 22px !important;
    border-top: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) .product-price .price,
body:has(#gallery_preview_wrapper) .product-price .price-value {
    color: #2F2F2F !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

body:has(#gallery_preview_wrapper) .product-price small,
body:has(#gallery_preview_wrapper) .product-price .price-note {
    color: #666 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   8. VERFÜGBARKEIT / LIEFERZEIT
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-stock {
    margin-top: 22px !important;
    padding: 18px 0 !important;
    border-top: 1px solid #E3DDD5 !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #444 !important;
}

body:has(#gallery_preview_wrapper) .product-stock .text-success,
body:has(#gallery_preview_wrapper) .product-stock .stock-status {
    color: #6F8B68 !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .product-stock a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   9. MENGE + WARENKORB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form {
    margin-top: 24px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .quantity,
body:has(#gallery_preview_wrapper) #buy_form .input-group {
    min-height: 54px;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form .quantity input {
    height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    color: #2F2F2F !important;
    background: #FFF !important;
    text-align: center;
    font-size: 17px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
    min-height: 54px !important;
    padding: 13px 28px !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket:hover,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"]:hover,
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"]:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-left: 0;
        padding-top: 32px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #content > .container,
    body:has(#gallery_preview_wrapper) #content > .container-fluid {
        padding-top: 10px;
    }

    body:has(#gallery_preview_wrapper) .breadcrumb {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    body:has(#gallery_preview_wrapper) #gallery,
    body:has(#gallery_preview_wrapper) #gallery_preview {
        border-radius: 6px !important;
    }

    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-top: 26px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) .product-title::after,
    body:has(#gallery_preview_wrapper) .product-info h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        font-size: 16px !important;
    }

    body:has(#gallery_preview_wrapper) .product-price .price,
    body:has(#gallery_preview_wrapper) .product-price .price-value {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
    body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        font-size: 15.5px !important;
    }

    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
    body:has(#gallery_preview_wrapper) .variations .custom-control-label {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ---------------------------------------------------------
   11. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#gallery_preview_wrapper) .product-thumbnails .square-image,
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"],
    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL PRODUKTE
   PHASE 1 V3 – BESCHREIBUNG / TABS / MENGENFELD
   ========================================================= */

/* ---------------------------------------------------------
   12. BESCHREIBUNG – LESBARER SATZ
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #tab-description,
body:has(#gallery_preview_wrapper) #tab-description .product-description,
body:has(#gallery_preview_wrapper) #tab-description .desc,
body:has(#gallery_preview_wrapper) #tab-description p {
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

body:has(#gallery_preview_wrapper) #tab-description p {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body:has(#gallery_preview_wrapper) #tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   13. PRODUKT-TABS – ZOE & LOUIS
   Gelbe JTL-Aktivlinie wird vollständig ersetzt.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]),
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) .nav-link,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0 0 15px !important;
    margin: 0 34px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:focus,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:focus {
    color: #C77752 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active {
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   14. MENGENFELD – MINUS / ZAHL / PLUS
   JTL data-count-down / data-count-up bleibt vollständig aktiv.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form .form-counter,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    overflow: hidden !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-append,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #C77752 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Wir verwenden bewusst einfache Zeichen statt einer Abhängigkeit
   von der geladenen Font-Awesome-Version. */
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]::before {
    content: "−" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]::before {
    content: "+" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] .fas {
    display: none !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]:hover {
    background: #FBF7F3 !important;
    color: #A95F40 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #E3DDD5 !important;
    border-right: 1px solid #E3DDD5 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Native Spinner ebenfalls ausblenden – unsere +/- Steuerung bleibt sichtbar. */
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-inner-spin-button,
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ---------------------------------------------------------
   15. MENGE + BUTTON AUF MOBIL
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #buy_form .form-counter,
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
        max-width: 100% !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
        width: 48px !important;
        min-width: 48px !important;
    }

    body:has(#gallery_preview_wrapper) #tab-description,
    body:has(#gallery_preview_wrapper) #tab-description .product-description,
    body:has(#gallery_preview_wrapper) #tab-description .desc,
    body:has(#gallery_preview_wrapper) #tab-description p {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}


/* =========================================================
   KATEGORIESEITEN – VARIANTE 2 „NATÜRLICH & KLAR"
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – KATEGORIESEITEN
   MASTER DESIGN – VARIANTE 2 „NATÜRLICH & KLAR“

   Gilt automatisch für alle JTL-Kategorieseiten.
   Keine Kategorie oder Produktnamen fest codiert.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN-VARIABLEN
   --------------------------------------------------------- */

:root {
    --zl-cat-sage: #8FA588;
    --zl-cat-sage-soft: #EEF2EC;
    --zl-cat-terracotta: #C77752;
    --zl-cat-terracotta-dark: #A95F40;
    --zl-cat-offwhite: #F6F3EE;
    --zl-cat-dark: #2F2F2F;
    --zl-cat-text: #444;
    --zl-cat-muted: #666;
    --zl-cat-border: #E3DDD5;
    --zl-cat-white: #FFFFFF;
}

/* ---------------------------------------------------------
   1. KATEGORIE – GRUNDLAGE
   --------------------------------------------------------- */

body:has(#result-wrapper) #content {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) #result-wrapper {
    width: 100%;
}

/* ---------------------------------------------------------
   2. KATEGORIE-HEADER
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper .productlist-header {
    margin-bottom: 34px;
}

body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 17px !important;
    color: var(--zl-cat-dark) !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

/* unsere typische kurze Terracotta-Linie */
body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: var(--zl-cat-terracotta);
}

body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
    max-width: 820px;
    margin: 0;
    color: var(--zl-cat-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   3. LINKER BEREICH / KATEGORIEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #sidepanel-left,
body:has(#result-wrapper) .sidepanel-left {
    padding-right: 28px;
}

body:has(#result-wrapper) .box-categories,
body:has(#result-wrapper) .box-filter,
body:has(#result-wrapper) .box-filter-category {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#result-wrapper) .box-categories .box-heading,
body:has(#result-wrapper) .box-filter .box-heading {
    margin-bottom: 0;
    padding: 0 0 12px;
    color: var(--zl-cat-dark);
    border-bottom: 1px solid var(--zl-cat-border);
    font-size: 18px;
    font-weight: 600;
}

/* Kategorie-Links */
body:has(#result-wrapper) .box-categories .nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--zl-cat-text) !important;
    background: transparent !important;
    font-size: 16px;
    transition: color .18s ease, padding-left .18s ease;
}

body:has(#result-wrapper) .box-categories .nav-link:hover {
    padding-left: 5px;
    color: var(--zl-cat-terracotta) !important;
}

/* aktive Kategorie */
body:has(#result-wrapper) .box-categories .nav-link.active,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link {
    padding-left: 12px;
    color: var(--zl-cat-dark) !important;
    background: var(--zl-cat-sage-soft) !important;
    border-radius: 4px;
    font-weight: 600;
}

body:has(#result-wrapper) .box-categories .nav-link.active::before,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zl-cat-sage);
    border-radius: 3px 0 0 3px;
}

/* ---------------------------------------------------------
   4. FILTER
   --------------------------------------------------------- */

body:has(#result-wrapper) .box-filter .productlist-filter-headline,
body:has(#result-wrapper) .box-filter .filter-headline {
    padding: 17px 0 11px;
    color: var(--zl-cat-dark);
    border-top: 1px solid var(--zl-cat-border);
    font-size: 16px;
    font-weight: 500;
}

body:has(#result-wrapper) .box-filter .nav-link {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) .box-filter .nav-link:hover {
    color: var(--zl-cat-terracotta);
}

/* ---------------------------------------------------------
   5. SORTIERUNG / ANSICHT
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper select,
body:has(#result-wrapper) #result-wrapper .custom-select {
    min-height: 48px;
    padding-left: 14px;
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper select:focus,
body:has(#result-wrapper) #result-wrapper .custom-select:focus {
    border-color: var(--zl-cat-sage);
    box-shadow: 0 0 0 1px rgba(143,165,136,.12);
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
body:has(#result-wrapper) #result-wrapper .btn-group .btn {
    min-height: 48px;
    border-color: var(--zl-cat-border);
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn:hover,
body:has(#result-wrapper) #result-wrapper .btn-group .btn:hover {
    color: var(--zl-cat-terracotta);
    border-color: var(--zl-cat-terracotta);
    background: var(--zl-cat-white);
}

/* ---------------------------------------------------------
   6. PRODUKTGRID
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list {
    margin-top: 8px;
}

body:has(#result-wrapper) #product-list .productbox {
    margin-bottom: 28px;
}

body:has(#result-wrapper) #product-list .productbox-inner {
    height: 100%;
    overflow: hidden;
    background: var(--zl-cat-white);
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* dezenter Hover */
@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   7. PRODUKTBILDER
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-image {
    overflow: hidden;
}

body:has(#result-wrapper) #product-list .productbox-images img {
    transition: transform .35s ease;
}

@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   8. PRODUKTTITEL / INFORMATIONEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-title {
    padding: 15px 15px 8px !important;
    min-height: 64px;
}

body:has(#result-wrapper) #product-list .productbox-title a {
    color: var(--zl-cat-dark) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body:has(#result-wrapper) #product-list .productbox-title a:hover {
    color: var(--zl-cat-terracotta) !important;
}

/* Preis */
body:has(#result-wrapper) #product-list .productbox-price {
    color: var(--zl-cat-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header {
        margin-bottom: 26px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        margin-bottom: 13px !important;
        padding-bottom: 14px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 16px;
        line-height: 1.65;
    }

    body:has(#result-wrapper) #sidepanel-left,
    body:has(#result-wrapper) .sidepanel-left {
        padding-right: 0;
    }

    body:has(#result-wrapper) #result-wrapper select,
    body:has(#result-wrapper) #result-wrapper .custom-select,
    body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
    body:has(#result-wrapper) #result-wrapper .btn-group .btn {
        min-height: 46px;
    }

    body:has(#result-wrapper) #product-list {
        margin-top: 4px;
    }

    body:has(#result-wrapper) #product-list .productbox {
        margin-bottom: 20px;
    }

    body:has(#result-wrapper) #product-list .productbox-title {
        min-height: 0;
        padding: 14px 15px 9px !important;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 575.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        font-size: 31px !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 15.5px;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------
   10. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#result-wrapper) #product-list .productbox-inner,
    body:has(#result-wrapper) #product-list .productbox-images img,
    body:has(#result-wrapper) .box-categories .nav-link {
        transition: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE MASTER
   EXAKTER JTL-DOM-FIX
   Grundlage: echte Kategorieseite / Kurse & Workshops
   ========================================================= */

/* ---------------------------------------------------------
   KATEGORIE-HAUPTBEREICH
   JTL verwendet #result-wrapper direkt innerhalb
   der rechten Content-Spalte.
   --------------------------------------------------------- */

#content > .row.justify-content-lg-end {
    align-items: flex-start;
}

#content > .row.justify-content-lg-end > .col-lg-8,
#content > .row.justify-content-lg-end > .col-xl-9 {
    min-width: 0;
}

/* ---------------------------------------------------------
   1. ECHTE KATEGORIEÜBERSCHRIFT
   JTL-Struktur:
   #result-wrapper > .title > h1.h2
   --------------------------------------------------------- */

#result-wrapper > .title {
    margin: 0 0 30px !important;
    padding: 0 !important;
}

#result-wrapper > .title h1.h2 {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

/* genau eine Zoe-&-Louis-Linie */
#result-wrapper > .title h1.h2::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 17px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   2. SORTIER-/ANSICHTSLEISTE
   --------------------------------------------------------- */

#result-wrapper .productlist-page-nav-header-m {
    margin-top: 0 !important;
}

#result-wrapper .productlist-page-nav-header-m + hr,
#result-wrapper .productlist-page-nav-header-m ~ hr.productlist-page-nav-bottom {
    border-color: #E3DDD5 !important;
}

#result-wrapper .productlist-page-nav-header-m .btn {
    min-height: 48px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #444 !important;
    box-shadow: none !important;
}

#result-wrapper .productlist-page-nav-header-m .btn:hover,
#result-wrapper .productlist-page-nav-header-m .btn:focus {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* aktive Galerie/Listendarstellung */
#result-wrapper .productlist-page-nav-header-m .btn-option.active {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* Ergebniszahl */
#result-wrapper .productlist-item-info {
    color: #666 !important;
    font-size: 15px;
}

/* ---------------------------------------------------------
   3. SIDEBAR – EXAKTE JTL-ID #sidepanel_left
   --------------------------------------------------------- */

#sidepanel_left {
    padding-right: 28px !important;
}

#sidepanel_left .box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop-Kategorieüberschrift */
#sidepanel_left .productlist-filter-headline.d-none.d-md-flex {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* mobile Kategorieüberschrift */
#sidepanel_left > .box-categories > a.box-normal-link {
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Kategorie-Navigation */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item {
    margin: 0 !important;
}

#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
    position: relative !important;
    display: block !important;
    padding: 11px 12px !important;
    margin: 0 !important;

    color: #444 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        padding-left .18s ease !important;
}

/* Hover */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link:hover {
    padding-left: 17px !important;
    color: #C77752 !important;
    background: #FAF9F6 !important;
}

/* Aktive Kategorie – JTL-Gelb vollständig entfernen */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link,
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link:hover {
    padding-left: 17px !important;

    color: #2F2F2F !important;
    background: #EEF2EC !important;

    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    font-weight: 600 !important;
}

/* Sage-Akzent links statt gelber JTL-Leiste */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;

    background: #8FA588 !important;
    border-radius: 3px 0 0 3px !important;
}

/* JTL-HR unter der Kategorienbox */
#sidepanel_left .box-normal-hr,
#sidepanel_left .box-filter-hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #E3DDD5 !important;
}

/* ---------------------------------------------------------
   4. FILTER-BOXEN
   --------------------------------------------------------- */

#sidepanel_left .btn-filter-box {
    position: relative !important;
    min-height: 48px !important;
    padding: 14px 28px 14px 0 !important;

    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#sidepanel_left .btn-filter-box:hover,
#sidepanel_left .btn-filter-box:focus {
    color: #C77752 !important;
    background: transparent !important;
}

/* Filter-Pfeil */
#sidepanel_left .btn-filter-box::after {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Preisfelder */
#sidepanel_left .price-range-input {
    border-color: #D6CEC5 !important;
    box-shadow: none !important;
}

#sidepanel_left .price-range-input:focus {
    border-color: #8FA588 !important;
    box-shadow: 0 0 0 1px rgba(143,165,136,.12) !important;
}

#sidepanel_left .input-group-text {
    border-color: #D6CEC5 !important;
    background: #FAF9F6 !important;
    color: #666 !important;
}

/* Preis-Slider – JTL-Gelb durch Sage */
#sidepanel_left .price-range-slide .noUi-connect {
    background: #8FA588 !important;
}

#sidepanel_left .price-range-slide .noUi-handle {
    border-color: #8FA588 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(47,47,47,.14) !important;
}

/* ---------------------------------------------------------
   5. PRODUKTGRID – JTL setzt 4 / 3 / 2 Spalten selbst
   --------------------------------------------------------- */

#product-list {
    margin-top: 0 !important;
}

#product-list .product-wrapper {
    margin-bottom: 28px !important;
}

/* Karten nur dezent einfassen */
#product-list .productbox {
    height: 100%;
}

#product-list .productbox-inner {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (min-width: 768px) {
    #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    #content > .row.justify-content-lg-end {
        display: block !important;
    }

    #sidepanel_left {
        padding-right: 0 !important;
    }

    #result-wrapper > .title {
        margin-bottom: 22px !important;
    }

    #result-wrapper > .title h1.h2 {
        font-size: 34px !important;
        padding-bottom: 14px !important;
    }

    #result-wrapper > .title h1.h2::after {
        width: 52px !important;
        margin-top: 14px !important;
    }

    #result-wrapper .productlist-page-nav-header-m {
        margin-bottom: 10px !important;
    }

    #result-wrapper .productlist-page-nav-header-m .btn {
        min-height: 46px !important;
    }

    #product-list .product-wrapper {
        margin-bottom: 20px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #result-wrapper > .title h1.h2 {
        font-size: 31px !important;
    }
}



/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG / EDITORIAL
   Für strukturierte Produktbeschreibungen in JTL
   ========================================================= */

body:has(#gallery_preview_wrapper) .zl-product-description {
    max-width: 980px;
    margin: 0 auto;
    color: #444;
    font-family: "source-sans-pro", sans-serif;
    font-size: 17px;
    line-height: 1.68;
}

body:has(#gallery_preview_wrapper) .zl-product-description p {
    margin: 0 0 18px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
    max-width: 850px;
    margin: 0 0 38px;
    color: #2F2F2F;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 400;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-kicker {
    margin: 0 0 8px;
    color: #C77752;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body:has(#gallery_preview_wrapper) .zl-product-description h2 {
    margin: 0 0 18px;
    color: #2F2F2F;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.015em;
}

body:has(#gallery_preview_wrapper) .zl-product-description h3 {
    margin: 0 0 12px;
    color: #2F2F2F;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
    margin: 0 0 48px;
    padding: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality {
    padding: 34px 36px;
    background: #F6F3EE;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality p:last-child {
    margin-bottom: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list {
    margin: 22px 0 24px;
    padding: 0;
    list-style: none;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
    color: #444;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #8FA588;
    font-weight: 600;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    min-height: 96px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    color: #2F2F2F;
    font-size: 15px;
    line-height: 1.4;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability {
    margin: 0 0 48px;
    padding: 34px 36px;
    background: #EEF2EC;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block;
    margin: -4px 0 18px;
    color: #8FA588;
    font-size: 24px;
    line-height: 1.25;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
    margin: 0 0 48px;
    padding: 34px 36px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 8px;
    padding: 11px 22px;
    background: #C77752;
    border: 1px solid #C77752;
    border-radius: 6px;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button:hover {
    background: #A95F40;
    border-color: #A95F40;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(47,47,47,.08);
}

/* Attribute table: bleibt technisch, wird aber optisch an die Marke angepasst */
body:has(#gallery_preview_wrapper) .zl-product-description + .product-attributes,
body:has(#gallery_preview_wrapper) .product-attributes {
    font-size: 15px;
}

body:has(#gallery_preview_wrapper) .product-attributes th {
    color: #2F2F2F;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        max-width: 100%;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        font-size: 16px;
        line-height: 1.68;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 1.62;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description h2 {
        font-size: 27px;
        line-height: 1.28;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        margin-bottom: 36px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 26px 22px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        gap: 12px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 86px;
        padding: 15px 12px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: 1fr 1fr;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 24px 18px;
    }
}

/* =========================================================
   ZOE & LOUIS – MASTER CSS
   Produktdetailseiten + Kategorieseiten
   Basis: zuletzt bestätigte Versionen
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAILSEITE / PHASE 1
   Reiner Artikelbereich – JTL/NOVA-Datenlogik bleibt erhalten
   Fokus: Galerie + Produktinformationen + Varianten + Kaufbereich
   ========================================================= */

/* ---------------------------------------------------------
   1. PRODUKTDETAIL – GRUNDRAHMEN
   Der Produktdetailbereich wird über die vorhandene JTL-Galerie
   erkannt. Es werden keine Produktdaten hardcodiert.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #content {
    color: #444;
}

body:has(#gallery_preview_wrapper) #content > .container,
body:has(#gallery_preview_wrapper) #content > .container-fluid {
    padding-top: 18px;
}

body:has(#gallery_preview_wrapper) .product-primary,
body:has(#gallery_preview_wrapper) .product-detail {
    position: relative;
}

/* ---------------------------------------------------------
   2. BREADCRUMB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .breadcrumb {
    margin: 0 0 30px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.5;
    border: 0 !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a {
    color: #666 !important;
    text-decoration: none !important;
}

body:has(#gallery_preview_wrapper) .breadcrumb a:hover {
    color: #C77752 !important;
}

/* ---------------------------------------------------------
   3. PRODUKT-GALERIE
   ---------------------------------------------------------
   WICHTIG:
   Die JTL/NOVA/Slick-Galerie übernimmt Bildgröße, Position,
   object-fit und Slide-Transform vollständig selbst.
   Wir gestalten hier ausschließlich die äußere Optik.
   --------------------------------------------------------- */

/* Nur der äußere Galerie-Rahmen */
body:has(#gallery_preview_wrapper) #gallery_preview,
body:has(#gallery_preview_wrapper) #gallery {
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
}

/* Keine eigene Positionierung oder Skalierung des JTL-Hauptbildes.
   Dadurch bleiben Slick und die native JTL-Galerielogik intakt. */

/* Thumbnail-Optik */
body:has(#gallery_preview_wrapper) .product-thumbnails {
    margin-top: 14px !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image {
    margin-right: 10px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    transition: border-color .2s ease, opacity .2s ease;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .square-image:hover {
    border-color: #C77752 !important;
}

body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current .square-image,
body:has(#gallery_preview_wrapper) .product-thumbnails .slick-current {
    border-color: #C77752 !important;
}

/* ---------------------------------------------------------
   4. PRODUKT-INFORMATIONEN RECHTS
   --------------------------------------------------------- */


body:has(#gallery_preview_wrapper) .product-info,
body:has(#gallery_preview_wrapper) .product-primary .product-info {
    padding-left: 28px;
}

body:has(#gallery_preview_wrapper) .product-title,
body:has(#gallery_preview_wrapper) .product-info h1 {
    margin: 0 0 14px !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
}

body:has(#gallery_preview_wrapper) .product-title::after,
body:has(#gallery_preview_wrapper) .product-info h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: #C77752;
}

/* Artikelnummer / Kategorie / Hersteller */
body:has(#gallery_preview_wrapper) .product-reference,
body:has(#gallery_preview_wrapper) .product-manufacturer,
body:has(#gallery_preview_wrapper) .product-meta {
    color: #777 !important;
    font-size: 14px !important;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .product-reference a,
body:has(#gallery_preview_wrapper) .product-manufacturer a,
body:has(#gallery_preview_wrapper) .product-meta a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   5. KURZBESCHREIBUNG
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-description-short {
    margin: 22px 0 26px !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
}

body:has(#gallery_preview_wrapper) .product-description-short p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   6. VARIANTEN – JTL-RADIOS ALS CHOICE CARDS
   Die vorhandenen Inputs bleiben unverändert funktional.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-variations,
body:has(#gallery_preview_wrapper) .variations {
    margin: 22px 0 28px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .form-group,
body:has(#gallery_preview_wrapper) .variations .form-group {
    margin-bottom: 18px !important;
}

body:has(#gallery_preview_wrapper) .product-variations label,
body:has(#gallery_preview_wrapper) .variations label {
    color: #2F2F2F !important;
}

body:has(#gallery_preview_wrapper) .product-variations input[type="radio"],
body:has(#gallery_preview_wrapper) .variations input[type="radio"] {
    accent-color: #C77752;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control,
body:has(#gallery_preview_wrapper) .variations .custom-control {
    margin-bottom: 10px !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-label:hover,
body:has(#gallery_preview_wrapper) .variations .custom-control-label:hover {
    border-color: #C77752 !important;
    background: #FAF7F3 !important;
}

body:has(#gallery_preview_wrapper) .product-variations .custom-control-input:checked ~ .custom-control-label,
body:has(#gallery_preview_wrapper) .variations .custom-control-input:checked ~ .custom-control-label {
    border-color: #C77752 !important;
    background: #FBF7F3 !important;
    box-shadow: inset 3px 0 0 #C77752 !important;
}

/* Falls NOVA keine custom-control-Struktur verwendet:
   alternative JTL-Variationselemente */
body:has(#gallery_preview_wrapper) .product-variations .radio,
body:has(#gallery_preview_wrapper) .variations .radio {
    margin-bottom: 10px;
}

body:has(#gallery_preview_wrapper) .product-variations .radio label,
body:has(#gallery_preview_wrapper) .variations .radio label {
    display: block;
    padding: 13px 16px;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    background: #FFF;
}

/* ---------------------------------------------------------
   7. PREIS
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-price,
body:has(#gallery_preview_wrapper) .price {
    margin: 28px 0 0 !important;
    padding-top: 22px !important;
    border-top: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) .product-price .price,
body:has(#gallery_preview_wrapper) .product-price .price-value {
    color: #2F2F2F !important;
    font-size: 34px !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
}

body:has(#gallery_preview_wrapper) .product-price small,
body:has(#gallery_preview_wrapper) .product-price .price-note {
    color: #666 !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------
   8. VERFÜGBARKEIT / LIEFERZEIT
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) .product-stock {
    margin-top: 22px !important;
    padding: 18px 0 !important;
    border-top: 1px solid #E3DDD5 !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #444 !important;
}

body:has(#gallery_preview_wrapper) .product-stock .text-success,
body:has(#gallery_preview_wrapper) .product-stock .stock-status {
    color: #6F8B68 !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .product-stock a {
    color: #666 !important;
}

/* ---------------------------------------------------------
   9. MENGE + WARENKORB
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form {
    margin-top: 24px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .quantity,
body:has(#gallery_preview_wrapper) #buy_form .input-group {
    min-height: 54px;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form .quantity input {
    height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    color: #2F2F2F !important;
    background: #FFF !important;
    text-align: center;
    font-size: 17px !important;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
    min-height: 54px !important;
    padding: 13px 28px !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    background: #C77752 !important;
    color: #FFF !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

body:has(#gallery_preview_wrapper) #buy_form .btn-basket:hover,
body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"]:hover,
body:has(#gallery_preview_wrapper) #buy_form button[type="submit"]:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   10. MOBILE
   --------------------------------------------------------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-left: 0;
        padding-top: 32px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 34px !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #content > .container,
    body:has(#gallery_preview_wrapper) #content > .container-fluid {
        padding-top: 10px;
    }

    body:has(#gallery_preview_wrapper) .breadcrumb {
        margin-bottom: 22px !important;
        font-size: 13px !important;
    }

    body:has(#gallery_preview_wrapper) #gallery,
    body:has(#gallery_preview_wrapper) #gallery_preview {
        border-radius: 6px !important;
    }

    body:has(#gallery_preview_wrapper) .product-info,
    body:has(#gallery_preview_wrapper) .product-primary .product-info {
        padding-top: 26px;
    }

    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) .product-title::after,
    body:has(#gallery_preview_wrapper) .product-info h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        font-size: 16px !important;
    }

    body:has(#gallery_preview_wrapper) .product-price .price,
    body:has(#gallery_preview_wrapper) .product-price .price-value {
        font-size: 30px !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .btn-basket,
    body:has(#gallery_preview_wrapper) #buy_form button[name="inWarenkorb"],
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"] {
        width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .product-title,
    body:has(#gallery_preview_wrapper) .product-info h1 {
        font-size: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .product-description-short {
        margin-top: 18px !important;
        margin-bottom: 22px !important;
        font-size: 15.5px !important;
    }

    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label,
    body:has(#gallery_preview_wrapper) .variations .custom-control-label {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
}

/* ---------------------------------------------------------
   11. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#gallery_preview_wrapper) .product-thumbnails .square-image,
    body:has(#gallery_preview_wrapper) #buy_form button[type="submit"],
    body:has(#gallery_preview_wrapper) .product-variations .custom-control-label {
        transition: none !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL PRODUKTE
   PHASE 1 V3 – BESCHREIBUNG / TABS / MENGENFELD
   ========================================================= */

/* ---------------------------------------------------------
   12. BESCHREIBUNG – LESBARER SATZ
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #tab-description,
body:has(#gallery_preview_wrapper) #tab-description .product-description,
body:has(#gallery_preview_wrapper) #tab-description .desc,
body:has(#gallery_preview_wrapper) #tab-description p {
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    font-weight: 400 !important;
}

body:has(#gallery_preview_wrapper) #tab-description p {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body:has(#gallery_preview_wrapper) #tab-description p:last-child {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   13. PRODUKT-TABS – ZOE & LOUIS
   Gelbe JTL-Aktivlinie wird vollständig ersetzt.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]),
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) {
    margin-bottom: 30px !important;
    border-bottom: 1px solid #E3DDD5 !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) .nav-link,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) .nav-link {
    position: relative !important;
    display: block !important;
    padding: 0 0 15px !important;
    margin: 0 34px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #666 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:hover,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a:focus,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a:focus {
    color: #C77752 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active {
    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li.active > a::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-description"]) > li > a.active::after,
body:has(#gallery_preview_wrapper) ul.nav.nav-tabs:has(a[href="#tab-votes"]) > li > a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -1px !important;
    width: 100% !important;
    height: 2px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   14. MENGENFELD – MINUS / ZAHL / PLUS
   JTL data-count-down / data-count-up bleibt vollständig aktiv.
   --------------------------------------------------------- */

body:has(#gallery_preview_wrapper) #buy_form .form-counter,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 230px !important;
    min-height: 54px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 6px !important;
    background: #FFF !important;
    overflow: hidden !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form .form-counter > .input-group-append,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-prepend,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp > .input-group-append {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #C77752 !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* Wir verwenden bewusst einfache Zeichen statt einer Abhängigkeit
   von der geladenen Font-Awesome-Version. */
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]::before {
    content: "−" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]::before,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]::before {
    content: "+" !important;
    display: block !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down] .fas,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] .fas {
    display: none !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down]:hover,
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up]:hover {
    background: #FBF7F3 !important;
    color: #A95F40 !important;
}

body:has(#gallery_preview_wrapper) #buy_form .form-counter input[type="number"],
body:has(#gallery_preview_wrapper) #buy_form #quantity-grp input[type="number"] {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-left: 1px solid #E3DDD5 !important;
    border-right: 1px solid #E3DDD5 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    color: #2F2F2F !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

/* Native Spinner ebenfalls ausblenden – unsere +/- Steuerung bleibt sichtbar. */
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-inner-spin-button,
body:has(#gallery_preview_wrapper) #buy_form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

body:has(#gallery_preview_wrapper) #buy_form input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ---------------------------------------------------------
   15. MENGE + BUTTON AUF MOBIL
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) #buy_form .form-counter,
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp {
        max-width: 100% !important;
    }

    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form .form-counter button[data-count-up],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-down],
    body:has(#gallery_preview_wrapper) #buy_form #quantity-grp button[data-count-up] {
        width: 48px !important;
        min-width: 48px !important;
    }

    body:has(#gallery_preview_wrapper) #tab-description,
    body:has(#gallery_preview_wrapper) #tab-description .product-description,
    body:has(#gallery_preview_wrapper) #tab-description .desc,
    body:has(#gallery_preview_wrapper) #tab-description p {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }
}


/* =========================================================
   KATEGORIESEITEN – VARIANTE 2 „NATÜRLICH & KLAR"
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – KATEGORIESEITEN
   MASTER DESIGN – VARIANTE 2 „NATÜRLICH & KLAR“

   Gilt automatisch für alle JTL-Kategorieseiten.
   Keine Kategorie oder Produktnamen fest codiert.
   ========================================================= */

/* ---------------------------------------------------------
   DESIGN-VARIABLEN
   --------------------------------------------------------- */

:root {
    --zl-cat-sage: #8FA588;
    --zl-cat-sage-soft: #EEF2EC;
    --zl-cat-terracotta: #C77752;
    --zl-cat-terracotta-dark: #A95F40;
    --zl-cat-offwhite: #F6F3EE;
    --zl-cat-dark: #2F2F2F;
    --zl-cat-text: #444;
    --zl-cat-muted: #666;
    --zl-cat-border: #E3DDD5;
    --zl-cat-white: #FFFFFF;
}

/* ---------------------------------------------------------
   1. KATEGORIE – GRUNDLAGE
   --------------------------------------------------------- */

body:has(#result-wrapper) #content {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) #result-wrapper {
    width: 100%;
}

/* ---------------------------------------------------------
   2. KATEGORIE-HEADER
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper .productlist-header {
    margin-bottom: 34px;
}

body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
    position: relative;
    margin: 0 0 16px !important;
    padding: 0 0 17px !important;
    color: var(--zl-cat-dark) !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
}

/* unsere typische kurze Terracotta-Linie */
body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
    content: "";
    display: block;
    width: 62px;
    height: 1px;
    margin-top: 17px;
    background: var(--zl-cat-terracotta);
}

body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
    max-width: 820px;
    margin: 0;
    color: var(--zl-cat-muted);
    font-size: 17px;
    line-height: 1.7;
}

/* ---------------------------------------------------------
   3. LINKER BEREICH / KATEGORIEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #sidepanel-left,
body:has(#result-wrapper) .sidepanel-left {
    padding-right: 28px;
}

body:has(#result-wrapper) .box-categories,
body:has(#result-wrapper) .box-filter,
body:has(#result-wrapper) .box-filter-category {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:has(#result-wrapper) .box-categories .box-heading,
body:has(#result-wrapper) .box-filter .box-heading {
    margin-bottom: 0;
    padding: 0 0 12px;
    color: var(--zl-cat-dark);
    border-bottom: 1px solid var(--zl-cat-border);
    font-size: 18px;
    font-weight: 600;
}

/* Kategorie-Links */
body:has(#result-wrapper) .box-categories .nav-link {
    position: relative;
    padding: 11px 0;
    color: var(--zl-cat-text) !important;
    background: transparent !important;
    font-size: 16px;
    transition: color .18s ease, padding-left .18s ease;
}

body:has(#result-wrapper) .box-categories .nav-link:hover {
    padding-left: 5px;
    color: var(--zl-cat-terracotta) !important;
}

/* aktive Kategorie */
body:has(#result-wrapper) .box-categories .nav-link.active,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link {
    padding-left: 12px;
    color: var(--zl-cat-dark) !important;
    background: var(--zl-cat-sage-soft) !important;
    border-radius: 4px;
    font-weight: 600;
}

body:has(#result-wrapper) .box-categories .nav-link.active::before,
body:has(#result-wrapper) .box-categories .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--zl-cat-sage);
    border-radius: 3px 0 0 3px;
}

/* ---------------------------------------------------------
   4. FILTER
   --------------------------------------------------------- */

body:has(#result-wrapper) .box-filter .productlist-filter-headline,
body:has(#result-wrapper) .box-filter .filter-headline {
    padding: 17px 0 11px;
    color: var(--zl-cat-dark);
    border-top: 1px solid var(--zl-cat-border);
    font-size: 16px;
    font-weight: 500;
}

body:has(#result-wrapper) .box-filter .nav-link {
    color: var(--zl-cat-text);
}

body:has(#result-wrapper) .box-filter .nav-link:hover {
    color: var(--zl-cat-terracotta);
}

/* ---------------------------------------------------------
   5. SORTIERUNG / ANSICHT
   --------------------------------------------------------- */

body:has(#result-wrapper) #result-wrapper select,
body:has(#result-wrapper) #result-wrapper .custom-select {
    min-height: 48px;
    padding-left: 14px;
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper select:focus,
body:has(#result-wrapper) #result-wrapper .custom-select:focus {
    border-color: var(--zl-cat-sage);
    box-shadow: 0 0 0 1px rgba(143,165,136,.12);
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
body:has(#result-wrapper) #result-wrapper .btn-group .btn {
    min-height: 48px;
    border-color: var(--zl-cat-border);
    background: var(--zl-cat-white);
    color: var(--zl-cat-text);
    box-shadow: none;
}

body:has(#result-wrapper) #result-wrapper .productlist-options .btn:hover,
body:has(#result-wrapper) #result-wrapper .btn-group .btn:hover {
    color: var(--zl-cat-terracotta);
    border-color: var(--zl-cat-terracotta);
    background: var(--zl-cat-white);
}

/* ---------------------------------------------------------
   6. PRODUKTGRID
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list {
    margin-top: 8px;
}

body:has(#result-wrapper) #product-list .productbox {
    margin-bottom: 28px;
}

body:has(#result-wrapper) #product-list .productbox-inner {
    height: 100%;
    overflow: hidden;
    background: var(--zl-cat-white);
    border: 1px solid var(--zl-cat-border);
    border-radius: 5px;
    box-shadow: none;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

/* dezenter Hover */
@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   7. PRODUKTBILDER
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-image {
    overflow: hidden;
}

body:has(#result-wrapper) #product-list .productbox-images img {
    transition: transform .35s ease;
}

@media (min-width: 768px) {
    body:has(#result-wrapper) #product-list .productbox-inner:hover .productbox-images img {
        transform: scale(1.025);
    }
}

/* ---------------------------------------------------------
   8. PRODUKTTITEL / INFORMATIONEN
   --------------------------------------------------------- */

body:has(#result-wrapper) #product-list .productbox-title {
    padding: 15px 15px 8px !important;
    min-height: 64px;
}

body:has(#result-wrapper) #product-list .productbox-title a {
    color: var(--zl-cat-dark) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body:has(#result-wrapper) #product-list .productbox-title a:hover {
    color: var(--zl-cat-terracotta) !important;
}

/* Preis */
body:has(#result-wrapper) #product-list .productbox-price {
    color: var(--zl-cat-dark);
    font-weight: 600;
}

/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header {
        margin-bottom: 26px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        margin-bottom: 13px !important;
        padding-bottom: 14px !important;
        font-size: 34px !important;
        line-height: 1.15 !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header h1::after {
        width: 52px;
        margin-top: 14px;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 16px;
        line-height: 1.65;
    }

    body:has(#result-wrapper) #sidepanel-left,
    body:has(#result-wrapper) .sidepanel-left {
        padding-right: 0;
    }

    body:has(#result-wrapper) #result-wrapper select,
    body:has(#result-wrapper) #result-wrapper .custom-select,
    body:has(#result-wrapper) #result-wrapper .productlist-options .btn,
    body:has(#result-wrapper) #result-wrapper .btn-group .btn {
        min-height: 46px;
    }

    body:has(#result-wrapper) #product-list {
        margin-top: 4px;
    }

    body:has(#result-wrapper) #product-list .productbox {
        margin-bottom: 20px;
    }

    body:has(#result-wrapper) #product-list .productbox-title {
        min-height: 0;
        padding: 14px 15px 9px !important;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 575.98px) {

    body:has(#result-wrapper) #result-wrapper .productlist-header h1 {
        font-size: 31px !important;
    }

    body:has(#result-wrapper) #result-wrapper .productlist-header .desc,
    body:has(#result-wrapper) #result-wrapper .productlist-header .item_desc {
        font-size: 15.5px;
    }

    body:has(#result-wrapper) #product-list .productbox-title a {
        font-size: 16px !important;
    }
}

/* ---------------------------------------------------------
   10. REDUZIERTE BEWEGUNG
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body:has(#result-wrapper) #product-list .productbox-inner,
    body:has(#result-wrapper) #product-list .productbox-images img,
    body:has(#result-wrapper) .box-categories .nav-link {
        transition: none !important;
    }
}


/* =========================================================
   ZOE & LOUIS – KATEGORIE MASTER
   EXAKTER JTL-DOM-FIX
   Grundlage: echte Kategorieseite / Kurse & Workshops
   ========================================================= */

/* ---------------------------------------------------------
   KATEGORIE-HAUPTBEREICH
   JTL verwendet #result-wrapper direkt innerhalb
   der rechten Content-Spalte.
   --------------------------------------------------------- */

#content > .row.justify-content-lg-end {
    align-items: flex-start;
}

#content > .row.justify-content-lg-end > .col-lg-8,
#content > .row.justify-content-lg-end > .col-xl-9 {
    min-width: 0;
}

/* ---------------------------------------------------------
   1. ECHTE KATEGORIEÜBERSCHRIFT
   JTL-Struktur:
   #result-wrapper > .title > h1.h2
   --------------------------------------------------------- */

#result-wrapper > .title {
    margin: 0 0 30px !important;
    padding: 0 !important;
}

#result-wrapper > .title h1.h2 {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 0 17px !important;

    color: #2F2F2F !important;
    font-size: clamp(38px, 3.4vw, 50px) !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
}

/* genau eine Zoe-&-Louis-Linie */
#result-wrapper > .title h1.h2::after {
    content: "" !important;
    display: block !important;
    width: 62px !important;
    height: 1px !important;
    margin-top: 17px !important;
    background: #C77752 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   2. SORTIER-/ANSICHTSLEISTE
   --------------------------------------------------------- */

#result-wrapper .productlist-page-nav-header-m {
    margin-top: 0 !important;
}

#result-wrapper .productlist-page-nav-header-m + hr,
#result-wrapper .productlist-page-nav-header-m ~ hr.productlist-page-nav-bottom {
    border-color: #E3DDD5 !important;
}

#result-wrapper .productlist-page-nav-header-m .btn {
    min-height: 48px !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #444 !important;
    box-shadow: none !important;
}

#result-wrapper .productlist-page-nav-header-m .btn:hover,
#result-wrapper .productlist-page-nav-header-m .btn:focus {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* aktive Galerie/Listendarstellung */
#result-wrapper .productlist-page-nav-header-m .btn-option.active {
    border-color: #8FA588 !important;
    background: #EEF2EC !important;
    color: #2F2F2F !important;
}

/* Ergebniszahl */
#result-wrapper .productlist-item-info {
    color: #666 !important;
    font-size: 15px;
}

/* ---------------------------------------------------------
   3. SIDEBAR – EXAKTE JTL-ID #sidepanel_left
   --------------------------------------------------------- */

#sidepanel_left {
    padding-right: 28px !important;
}

#sidepanel_left .box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop-Kategorieüberschrift */
#sidepanel_left .productlist-filter-headline.d-none.d-md-flex {
    display: block !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #E3DDD5 !important;
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* mobile Kategorieüberschrift */
#sidepanel_left > .box-categories > a.box-normal-link {
    color: #2F2F2F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Kategorie-Navigation */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item {
    margin: 0 !important;
}

#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
    position: relative !important;
    display: block !important;
    padding: 11px 12px !important;
    margin: 0 !important;

    color: #444 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    transition:
        color .18s ease,
        background-color .18s ease,
        padding-left .18s ease !important;
}

/* Hover */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link:hover {
    padding-left: 17px !important;
    color: #C77752 !important;
    background: #FAF9F6 !important;
}

/* Aktive Kategorie – JTL-Gelb vollständig entfernen */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link,
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link:hover {
    padding-left: 17px !important;

    color: #2F2F2F !important;
    background: #EEF2EC !important;

    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;

    font-weight: 600 !important;
}

/* Sage-Akzent links statt gelber JTL-Leiste */
#sidepanel_left .box-categories .nav-panel > .nav > .nav-item.active > .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;

    background: #8FA588 !important;
    border-radius: 3px 0 0 3px !important;
}

/* JTL-HR unter der Kategorienbox */
#sidepanel_left .box-normal-hr,
#sidepanel_left .box-filter-hr {
    margin: 14px 0 !important;
    border: 0 !important;
    border-top: 1px solid #E3DDD5 !important;
}

/* ---------------------------------------------------------
   4. FILTER-BOXEN
   --------------------------------------------------------- */

#sidepanel_left .btn-filter-box {
    position: relative !important;
    min-height: 48px !important;
    padding: 14px 28px 14px 0 !important;

    color: #2F2F2F !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#sidepanel_left .btn-filter-box:hover,
#sidepanel_left .btn-filter-box:focus {
    color: #C77752 !important;
    background: transparent !important;
}

/* Filter-Pfeil */
#sidepanel_left .btn-filter-box::after {
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* Preisfelder */
#sidepanel_left .price-range-input {
    border-color: #D6CEC5 !important;
    box-shadow: none !important;
}

#sidepanel_left .price-range-input:focus {
    border-color: #8FA588 !important;
    box-shadow: 0 0 0 1px rgba(143,165,136,.12) !important;
}

#sidepanel_left .input-group-text {
    border-color: #D6CEC5 !important;
    background: #FAF9F6 !important;
    color: #666 !important;
}

/* Preis-Slider – JTL-Gelb durch Sage */
#sidepanel_left .price-range-slide .noUi-connect {
    background: #8FA588 !important;
}

#sidepanel_left .price-range-slide .noUi-handle {
    border-color: #8FA588 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(47,47,47,.14) !important;
}

/* ---------------------------------------------------------
   5. PRODUKTGRID – JTL setzt 4 / 3 / 2 Spalten selbst
   --------------------------------------------------------- */

#product-list {
    margin-top: 0 !important;
}

#product-list .product-wrapper {
    margin-bottom: 28px !important;
}

/* Karten nur dezent einfassen */
#product-list .productbox {
    height: 100%;
}

#product-list .productbox-inner {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 5px;
    box-shadow: none;
    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

@media (min-width: 768px) {
    #product-list .productbox-inner:hover {
        transform: translateY(-2px);
        border-color: #D6CEC5;
        box-shadow: 0 5px 16px rgba(47,47,47,.07);
    }
}

/* ---------------------------------------------------------
   6. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    #content > .row.justify-content-lg-end {
        display: block !important;
    }

    #sidepanel_left {
        padding-right: 0 !important;
    }

    #result-wrapper > .title {
        margin-bottom: 22px !important;
    }

    #result-wrapper > .title h1.h2 {
        font-size: 34px !important;
        padding-bottom: 14px !important;
    }

    #result-wrapper > .title h1.h2::after {
        width: 52px !important;
        margin-top: 14px !important;
    }

    #result-wrapper .productlist-page-nav-header-m {
        margin-bottom: 10px !important;
    }

    #result-wrapper .productlist-page-nav-header-m .btn {
        min-height: 46px !important;
    }

    #product-list .product-wrapper {
        margin-bottom: 20px !important;
    }

    #sidepanel_left .box-categories .nav-panel > .nav > .nav-item > .nav-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 575.98px) {
    #result-wrapper > .title h1.h2 {
        font-size: 31px !important;
    }
}



/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG / EDITORIAL
   Für strukturierte Produktbeschreibungen in JTL
   ========================================================= */

body:has(#gallery_preview_wrapper) .zl-product-description {
    max-width: 980px;
    margin: 0 auto;
    color: #444;
    font-family: "source-sans-pro", sans-serif;
    font-size: 17px;
    line-height: 1.68;
}

body:has(#gallery_preview_wrapper) .zl-product-description p {
    margin: 0 0 18px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
    max-width: 850px;
    margin: 0 0 38px;
    color: #2F2F2F;
    font-size: 20px;
    line-height: 1.65;
    font-weight: 400;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-kicker {
    margin: 0 0 8px;
    color: #C77752;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body:has(#gallery_preview_wrapper) .zl-product-description h2 {
    margin: 0 0 18px;
    color: #2F2F2F;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.015em;
}

body:has(#gallery_preview_wrapper) .zl-product-description h3 {
    margin: 0 0 12px;
    color: #2F2F2F;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
    margin: 0 0 48px;
    padding: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality {
    padding: 34px 36px;
    background: #F6F3EE;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality p:last-child {
    margin-bottom: 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list {
    margin: 22px 0 24px;
    padding: 0;
    list-style: none;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 28px;
    color: #444;
    line-height: 1.55;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #8FA588;
    font-weight: 600;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    min-height: 96px;
    padding: 18px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 6px;
    color: #2F2F2F;
    font-size: 15px;
    line-height: 1.4;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability {
    margin: 0 0 48px;
    padding: 34px 36px;
    background: #EEF2EC;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block;
    margin: -4px 0 18px;
    color: #8FA588;
    font-size: 24px;
    line-height: 1.25;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
    margin: 0 0 48px;
    padding: 34px 36px;
    text-align: center;
    background: #FFFFFF;
    border: 1px solid #E3DDD5;
    border-radius: 8px;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta p {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-top: 8px;
    padding: 11px 22px;
    background: #C77752;
    border: 1px solid #C77752;
    border-radius: 6px;
    color: #FFFFFF !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button:hover {
    background: #A95F40;
    border-color: #A95F40;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(47,47,47,.08);
}

/* Attribute table: bleibt technisch, wird aber optisch an die Marke angepasst */
body:has(#gallery_preview_wrapper) .zl-product-description + .product-attributes,
body:has(#gallery_preview_wrapper) .product-attributes {
    font-size: 15px;
}

body:has(#gallery_preview_wrapper) .product-attributes th {
    color: #2F2F2F;
    font-weight: 500;
}

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        max-width: 100%;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        font-size: 16px;
        line-height: 1.68;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 1.62;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description h2 {
        font-size: 27px;
        line-height: 1.28;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        margin-bottom: 36px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 26px 22px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        gap: 12px;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 86px;
        padding: 15px 12px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: 1fr 1fr;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 24px 18px;
    }
}

/* =========================================================
   KATEGORIEN – VORBEREITUNG FÜR OBER-/UNTERKATEGORIEN
   Die Darstellung bleibt vollständig dynamisch.
   Die eigentliche Zusammenführung von Artikeln aus
   Unterkategorien in einer Oberkategorie ist KEIN CSS-Thema
   und wird separat über JTL-Template/PHP gelöst.
   ========================================================= */

/* =========================================================
   ZOE & LOUIS – PRODUKTDETAIL BESCHREIBUNG V2
   Editorial / Concept-Store Layout
   ========================================================= */

/* Beschreibung darf niemals horizontal aus dem Viewport laufen */
body:has(#gallery_preview_wrapper) .zl-product-description {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ---------- Intro ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr) !important;
    gap: 54px !important;
    align-items: center !important;
    margin: 0 0 64px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
    max-width: none !important;
    margin: 0 !important;
    color: #2F2F2F !important;
    font-size: 20px !important;
    line-height: 1.68 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #F6F3EE !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ---------- Kicker / headings ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-kicker {
    margin: 0 0 8px !important;
    color: #C77752 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description h2 {
    margin: 0 0 18px !important;
    color: #2F2F2F !important;
    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -.015em !important;
}

/* ---------- Standard sections ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
    margin: 0 0 62px !important;
    padding: 0 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section > p,
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality > p,
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability > p {
    max-width: 900px !important;
    margin-right: auto !important;
    overflow-wrap: anywhere !important;
}

/* ---------- Produktauswahl – Varianten ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 26px 0 22px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card {
    position: relative !important;
    padding: 20px 22px 20px 50px !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 7px !important;
    color: #2F2F2F !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 23px !important;
    width: 12px !important;
    height: 12px !important;
    border: 1px solid #C77752 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card strong {
    display: block !important;
    margin-bottom: 4px !important;
    color: #2F2F2F !important;
    font-size: 17px !important;
    font-weight: 500 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-card span {
    display: block !important;
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* ---------- Qualität ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality {
    margin: 0 0 62px !important;
    padding: 42px 44px !important;
    background: #F6F3EE !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality .zl-quality-intro {
    max-width: 850px !important;
    margin-bottom: 26px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality .zl-description-list {
    display: none !important;
}

/* ---------- Vier Qualitätskacheln ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 28px 0 0 !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    min-height: 128px !important;
    padding: 18px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    text-align: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 7px !important;
    color: #2F2F2F !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
    background: #F6F3EE !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
}

/* ---------- Nachhaltigkeit ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability {
    margin: 0 0 62px !important;
    padding: 42px 44px !important;
    background: #EEF2EC !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block !important;
    margin: -3px 0 19px !important;
    color: #8FA588 !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
}

/* ---------- CTA ---------- */

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
    margin: 0 0 52px !important;
    padding: 42px 44px !important;
    text-align: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta h2 {
    margin-bottom: 12px !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta p {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    margin-top: 8px !important;
    padding: 11px 22px !important;
    background: #C77752 !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background-color .2s ease, box-shadow .2s ease !important;
}

body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-button:hover {
    background: #A95F40 !important;
    border-color: #A95F40 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 10px rgba(47,47,47,.08) !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-wrap {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image {
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description {
        font-size: 16px !important;
        line-height: 1.68 !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-wrap {
        gap: 24px !important;
        margin-bottom: 46px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        font-size: 18px !important;
        line-height: 1.62 !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description h2 {
        font-size: 27px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
        margin-bottom: 44px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-variant-options {
        grid-template-columns: 1fr !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        margin-bottom: 44px !important;
        padding: 28px 22px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        gap: 10px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 112px !important;
        padding: 15px 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro-image {
        max-width: none !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-quality,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-sustainability,
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-cta {
        padding: 25px 18px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
        width: 23px !important;
        height: 23px !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG V2.1
   Fix: SVG-Icons / Feature-Kacheln
   ========================================================= */

/* Featurebereich strikt als vier gleichwertige Kacheln */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

/* Icon-Kreis darf niemals von globalen SVG-Regeln vergrößert werden */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #F6F3EE !important;
}

/* SVG selbst hart begrenzen */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
    display: block !important;
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    flex: 0 0 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Featurekarte: keine riesigen vertikalen Abstände */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 128px !important;
    height: 128px !important;
    padding: 16px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Text innerhalb der Kachel darf nicht nach unten "weglaufen" */
body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature > span:last-child {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Mobile: 2 x 2 */
@media (max-width: 991.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature {
        min-height: 112px !important;
        height: 112px !important;
        padding: 13px 8px !important;
        gap: 8px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-feature-icon svg {
        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
        flex-basis: 23px !important;
    }
}

/* =========================================================
   MOBILE – saubere Breite / kein horizontaler Überlauf
   ========================================================= */

@media (max-width: 767.98px) {
    body:has(#gallery_preview_wrapper) .zl-product-description,
    body:has(#gallery_preview_wrapper) .zl-product-description * {
        max-width: 100%;
        box-sizing: border-box;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description p,
    body:has(#gallery_preview_wrapper) .zl-product-description li,
    body:has(#gallery_preview_wrapper) .zl-product-description span {
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-intro {
        margin-bottom: 34px !important;
    }

    body:has(#gallery_preview_wrapper) .zl-product-description .zl-description-section {
        margin-bottom: 42px !important;
    }
}

/* =========================================================
   ZOE & LOUIS – PRODUKTBESCHREIBUNG V4
   FINALER, ISOLIERTER EDITORIAL-BEREICH
   ========================================================= */

/* Hauptcontainer */
.zl-product-description {
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: #444 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Alle direkten Elemente sauber zurücksetzen */
.zl-product-description > * {
    box-sizing: border-box !important;
}

/* ---------- Intro ---------- */

.zl-product-description .zl-description-intro {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 0 58px !important;
    padding: 0 !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    overflow-wrap: break-word !important;
}

/* ---------- Kicker ---------- */

.zl-product-description .zl-description-kicker {
    display: block !important;
    width: auto !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #C77752 !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* ---------- Überschriften ---------- */

.zl-product-description h2 {
    display: block !important;
    width: auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -.015em !important;
    text-transform: none !important;
}

/* ---------- Abschnitte ---------- */

.zl-product-description .zl-description-section {
    display: block !important;
    width: 100% !important;
    margin: 0 0 58px !important;
    padding: 0 !important;
}

/* ---------- Produktauswahl ---------- */

.zl-product-description .zl-variant-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 24px 0 20px !important;
    padding: 0 !important;
}

.zl-product-description .zl-variant-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 92px !important;
    margin: 0 !important;
    padding: 19px 20px 18px 50px !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 7px !important;
    color: #2F2F2F !important;
    box-sizing: border-box !important;
}

.zl-product-description .zl-variant-card::before {
    content: "" !important;
    position: absolute !important;
    left: 20px !important;
    top: 22px !important;
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #C77752 !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

.zl-product-description .zl-variant-card strong {
    display: block !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: #2F2F2F !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

.zl-product-description .zl-variant-card span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
}

/* ---------- Qualität ---------- */

.zl-product-description .zl-description-quality {
    display: block !important;
    width: 100% !important;
    margin: 0 0 58px !important;
    padding: 40px 42px !important;
    background: #F6F3EE !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.zl-product-description .zl-description-quality .zl-quality-intro {
    display: block !important;
    max-width: 900px !important;
    margin: 0 0 25px !important;
    padding: 0 !important;
}

/* Alte Aufzählung aus Qualität ausblenden – Features übernehmen diese */
.zl-product-description .zl-description-quality > .zl-description-list {
    display: none !important;
}

/* ---------- Feature-Kacheln ---------- */

.zl-product-description .zl-description-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 25px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.zl-product-description .zl-description-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;

    margin: 0 !important;
    padding: 15px 10px !important;

    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 7px !important;

    color: #2F2F2F !important;
    font-family: "source-sans-pro", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.zl-product-description .zl-description-feature-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

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

    flex: 0 0 44px !important;

    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 50% !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

.zl-product-description .zl-description-feature-icon svg {
    display: block !important;

    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;

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

    flex: 0 0 25px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* SVG-Pfade ebenfalls gegen globale JTL-Regeln absichern */
.zl-product-description .zl-description-feature-icon svg *,
.zl-product-description .zl-description-feature-icon svg path,
.zl-product-description .zl-description-feature-icon svg circle {
    box-sizing: border-box !important;
}

/* ---------- Nachhaltigkeit ---------- */

.zl-product-description .zl-description-sustainability {
    display: block !important;
    width: 100% !important;
    margin: 0 0 58px !important;
    padding: 40px 42px !important;

    background: #EEF2EC !important;
    border: 0 !important;
    border-radius: 8px !important;

    box-sizing: border-box !important;
}

.zl-product-description .zl-description-sustainability .zl-handwriting {
    display: block !important;
    margin: -2px 0 17px !important;
    padding: 0 !important;

    color: #8FA588 !important;
    font-family: "adobe-handwriting-frank", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
}

/* ---------- CTA ---------- */

.zl-product-description .zl-description-cta {
    display: block !important;
    width: 100% !important;
    margin: 0 0 48px !important;
    padding: 40px 42px !important;

    text-align: center !important;
    background: #FFFFFF !important;
    border: 1px solid #E3DDD5 !important;
    border-radius: 8px !important;

    box-sizing: border-box !important;
}

.zl-product-description .zl-description-cta h2 {
    margin-bottom: 12px !important;
}

.zl-product-description .zl-description-cta p {
    max-width: 700px !important;
    margin: 0 auto 18px !important;
}

.zl-product-description .zl-description-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 46px !important;
    margin: 0 !important;
    padding: 11px 22px !important;

    background: #C77752 !important;
    border: 1px solid #C77752 !important;
    border-radius: 6px !important;

    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* ---------- Fließtext ---------- */

.zl-product-description p,
.zl-product-description li {
    font-family: "source-sans-pro", sans-serif !important;
    color: #444 !important;
    font-size: 17px !important;
    line-height: 1.65 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
    .zl-product-description {
        max-width: 100% !important;
    }

    .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .zl-product-description {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    .zl-product-description .zl-description-intro {
        max-width: 100% !important;
        margin-bottom: 42px !important;
        font-size: 18px !important;
        line-height: 1.62 !important;
    }

    .zl-product-description h2 {
        font-size: 27px !important;
        line-height: 1.28 !important;
    }

    .zl-product-description .zl-description-section {
        margin-bottom: 44px !important;
    }

    .zl-product-description .zl-variant-options {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .zl-product-description .zl-description-quality,
    .zl-product-description .zl-description-sustainability,
    .zl-product-description .zl-description-cta {
        margin-bottom: 44px !important;
        padding: 28px 22px !important;
    }

    .zl-product-description .zl-description-feature {
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
        padding: 12px 8px !important;
    }
}

@media (max-width: 575.98px) {
    .zl-product-description .zl-description-quality,
    .zl-product-description .zl-description-sustainability,
    .zl-product-description .zl-description-cta {
        padding: 25px 18px !important;
    }

    .zl-product-description .zl-description-feature-icon {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
    }

    .zl-product-description .zl-description-feature-icon svg {
        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
        flex-basis: 23px !important;
    }
}

/* =========================================================
   V5 – DOM-UNABHÄNGIGER BESCHREIBUNGS-FIX
   Der Beschreibungsteil kann in JTL Desktop als Tab und
   mobil als Accordion gerendert werden. Deshalb kein
   #product-tabs als notwendiger Eltern-Selektor.
   ========================================================= */

.zl-product-description {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
}

.zl-product-description .zl-description-feature-icon,
.zl-product-description .zl-description-feature-icon svg {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.zl-product-description .zl-description-feature-icon {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.zl-product-description .zl-description-feature-icon svg {
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    flex: 0 0 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.zl-product-description .zl-description-feature-icon svg[width],
.zl-product-description .zl-description-feature-icon svg[height] {
    width: 25px !important;
    height: 25px !important;
}

.zl-product-description .zl-description-feature {
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 15px 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.zl-product-description .zl-description-features {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 25px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 991.98px) {
    .zl-product-description .zl-description-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .zl-product-description {
        max-width: 100% !important;
    }

    .zl-product-description .zl-description-feature {
        height: 112px !important;
        min-height: 112px !important;
        max-height: 112px !important;
    }
}

@media (max-width: 575.98px) {
    .zl-product-description .zl-description-feature-icon {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
    }

    .zl-product-description .zl-description-feature-icon svg {
        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
        flex-basis: 23px !important;
    }
}

/* SVGs als IMG: JTL kann externe SVGs anders behandeln als Inline-SVGs */
.zl-product-description .zl-description-feature-icon img {
    display: block !important;
    width: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    flex: 0 0 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 575.98px) {
    .zl-product-description .zl-description-feature-icon img {
        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;
        height: 23px !important;
        min-height: 23px !important;
        max-height: 23px !important;
        flex-basis: 23px !important;
    }
}

/* =========================================================
   ZOE & LOUIS – V5.1
   SVG-FIX: Icons als Hintergrundgrafik
   Dadurch können globale JTL-SVG-Regeln nicht eingreifen.
   ========================================================= */

.zl-product-description .zl-description-feature-icon {
    position: relative !important;
    display: block !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    flex: 0 0 44px !important;

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

    background-color: #FFFFFF !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 25px 25px !important;

    border: 1px solid #E3DDD5 !important;
    border-radius: 50% !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Eingebettete SVG/IMG-Grafiken aus dem Inhalt ausblenden.
   Die Grafik kommt stattdessen über background-image. */
.zl-product-description .zl-description-feature-icon svg,
.zl-product-description .zl-description-feature-icon img {
    display: none !important;
}

/* Die vier neuen, feinen Illustrationen */
.zl-product-description .zl-description-feature:nth-child(1) .zl-description-feature-icon {
    background-image: url("/bilder/produktbeschreibung/01-recyclingpapier.svg") !important;
}

.zl-product-description .zl-description-feature:nth-child(2) .zl-description-feature-icon {
    background-image: url("/bilder/produktbeschreibung/02-matte-oberflaeche.svg") !important;
}

.zl-product-description .zl-description-feature:nth-child(3) .zl-description-feature-icon {
    background-image: url("/bilder/produktbeschreibung/03-qualitaetsdruck.svg") !important;
}

.zl-product-description .zl-description-feature:nth-child(4) .zl-description-feature-icon {
    background-image: url("/bilder/produktbeschreibung/04-stifte.svg") !important;
}

@media (max-width: 575.98px) {
    .zl-product-description .zl-description-feature-icon {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
        background-size: 23px 23px !important;
    }
}

/* =========================================================
   ENDE PRODUKTRIBBON FINAL V2
   ========================================================= */