/*
 * Verdant — product-details redesign (from Stitch mockup)
 * Scoped entirely to #result-wrapper (the product-detail page content),
 * so the rest of the shop is untouched. Loaded last → wins on specificity.
 * Pure CSS: no SASS compile needed.
 */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..700;1,400..600&family=Inter:wght@300..700&display=swap');

/* ---- design tokens (Verdant palette) — global ---- */
:root,
#result-wrapper {
    --v-bg:                 #fcf9f8;
    --v-surface-low:        #f6f3f2;
    --v-surface:            #f0eded;
    --v-surface-high:       #eae7e7;
    /* admin-driven: NOVA exposes admin "Primärfarbe"/"Sekundärfarbe" as the
       global Bootstrap --primary / --secondary. Inherit them so changing the
       colors in admin (Template → Farben) repaints every component we built.
       Hex after the comma = fallback if those vars ever missing. */
    --v-primary:            var(--primary, #1b3022);
    --v-primary-container:   var(--primary, #1b3022);
    --v-on-primary:         #ffffff;
    --v-secondary:          #4a654f;
    --v-secondary-container: var(--secondary, #d0e9d4);
    --v-primary-fixed:      var(--secondary, #d0e9d4);
    --v-on-primary-fixed:   #0b2013;
    --v-on-surface:         #1b1c1c;
    --v-on-surface-variant: #434843;
    --v-outline-variant:    #c3c8c1;
    --v-surface-variant:    #e4e2e1;
    --v-error:              #ba1a1a;
    --v-radius:             1rem;
    --v-radius-lg:          1rem;
    --v-font-head:          'EB Garamond', Georgia, 'Times New Roman', serif;
    --v-font-body:          'Inter', -apple-system, "Segoe UI", sans-serif;

    font-family: var(--v-font-body);
    color: var(--v-on-surface);
}

/* ---- typography ---- */
#result-wrapper h1,
#result-wrapper h2,
#result-wrapper h3,
#result-wrapper .product-title,
#result-wrapper .recommendations h2,
#result-wrapper .slider-wrapper .h2,
#result-wrapper .tab-pane h2 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    letter-spacing: -0.01em;
}

#result-wrapper .product-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    font-weight: 600;
    margin-bottom: .5rem;
}

#result-wrapper .info-essential {
    font-size: .8rem;
    color: var(--v-on-surface-variant);
    margin-bottom: 1rem;
}
#result-wrapper .info-essential a { color: var(--v-secondary); }

#result-wrapper .shortdesc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--v-on-surface);
    margin: 1rem 0 1.75rem;
}

/* ---- gallery (left) ---- */
#result-wrapper .product-gallery img,
#result-wrapper .product-gallery .owl-stage img,
#result-wrapper .product-gallery .slick-slide img {
    border-radius: var(--v-radius-lg);
}
#result-wrapper .product-gallery .product-image,
#result-wrapper .product-gallery figure {
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    background: var(--v-surface);
    box-shadow: 0 8px 32px rgba(27, 48, 34, .08);
}
#result-wrapper .product-gallery .thumbnails img,
#result-wrapper .product-gallery .thumbnail img {
    border-radius: .5rem;
    border: 2px solid transparent;
    transition: border-color .2s ease, opacity .2s ease;
}
#result-wrapper .product-gallery .slick-current img,
#result-wrapper .product-gallery .active img {
    border-color: var(--v-primary);
}

/* product stickers / ribbons -> soft pill (keep system per-type bg colors) */
#result-wrapper .ribbon,
#result-wrapper .product-badges .badge {
    border-radius: 9999px !important;
    padding: .35em 1em !important;
    font-family: var(--v-font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .7rem;
    box-shadow: none !important;
    border: 0 !important;
}
/* remove NOVA's folded-corner triangle (the little dart under the pill) */
#result-wrapper .ribbon::before,
#result-wrapper .ribbon::after { display: none !important; content: none !important; }

/* ---- info column: sticky buy-box on desktop ---- */
/* (sticky intentionally removed — it overlapped the trust badges on tall
   configurable products; revisit once layout is confirmed) */

/* ---- price ---- */
#result-wrapper .price_wrapper .price,
#result-wrapper .price.h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
}
#result-wrapper .price.h1 { font-size: 2.25rem; }
#result-wrapper .price_label.pricestarting,
#result-wrapper .price_label.nowonly { color: var(--v-secondary); }
#result-wrapper .price-note .vat_info,
#result-wrapper .base-price { color: var(--v-on-surface-variant); }
#result-wrapper .special-price .price { color: var(--v-error); }

/* ---- quantity counter ---- */
#result-wrapper .form-counter.choose_quantity,
#result-wrapper #quantity-grp {
    border: 1px solid var(--v-outline-variant);
    border-radius: var(--v-radius);
    overflow: hidden;
    background: var(--v-bg);
}
#result-wrapper .form-counter .btn { color: var(--v-on-surface-variant); }
#result-wrapper .form-counter .btn:hover { color: var(--v-primary); }

/* ---- add to cart button ---- */
#result-wrapper #add-to-cart .btn-primary,
#result-wrapper .product-buy .btn-primary {
    background-color: var(--v-primary-container);
    border-color: var(--v-primary-container);
    color: var(--v-on-primary);
    border-radius: var(--v-radius);
    padding-top: .9rem;
    padding-bottom: .9rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
    box-shadow: none;
    transition: background-color .3s ease, border-color .3s ease;
}
#result-wrapper #add-to-cart .btn-primary:hover,
#result-wrapper #add-to-cart .btn-primary:focus,
#result-wrapper .product-buy .btn-primary:hover {
    background-color: var(--v-secondary);
    border-color: var(--v-secondary);
}

/* secondary buttons (configure, question) */
#result-wrapper .btn-secondary {
    background-color: transparent;
    border-color: var(--v-secondary);
    color: var(--v-secondary);
    border-radius: var(--v-radius);
}
#result-wrapper .btn-secondary:hover {
    background-color: var(--v-secondary);
    color: var(--v-on-primary);
}

/* stock note */
#result-wrapper .stock-information .text-success,
#result-wrapper .delivery-status .text-success { color: var(--v-secondary) !important; }

/* ---- variation swatches / selectors -> chip look ---- */
#result-wrapper .variations .variationValue label,
#result-wrapper .variation .product-variation .btn {
    border-radius: var(--v-radius);
    border: 1px solid var(--v-outline-variant);
}
#result-wrapper .variations input:checked + label,
#result-wrapper .variation .active .btn {
    border-color: var(--v-primary);
    box-shadow: inset 0 0 0 1px var(--v-primary);
    background: var(--v-surface-low);
}

/* ---- tabs / description -> bento card ---- */
#result-wrapper .product-tabs,
#result-wrapper .tab-content {
    background: var(--v-surface-low);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: 2rem;
    margin-top: 2.5rem;
}
#result-wrapper .nav-tabs {
    border-bottom: 1px solid var(--v-surface-variant);
    margin-bottom: 1.5rem;
}
#result-wrapper .nav-tabs .nav-link.active {
    color: var(--v-primary);
    border-color: transparent transparent var(--v-secondary);
    background: transparent;
    font-weight: 600;
}
#result-wrapper .nav-tabs .nav-link { color: var(--v-on-surface-variant); }

/* product attribute (Merkmale) table inside description */
#result-wrapper .attributes-table th,
#result-wrapper .product-attributes th { color: var(--v-primary); }

/* ---- "Complete the Look" recommendations ---- */
#result-wrapper .recommendations {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--v-surface-variant);
}
#result-wrapper .recommendations .productbox,
#result-wrapper .recommendations .product-wrapper {
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    transition: transform .3s ease;
}
#result-wrapper .recommendations .productbox:hover { transform: translateY(-4px); }
#result-wrapper .recommendations img { border-radius: var(--v-radius); }
#result-wrapper .recommendations .productbox-price,
#result-wrapper .recommendations .price { color: var(--v-secondary); }

/* ---- feature chips (from product characteristics) ---- */
#result-wrapper .verdant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.75rem;
}
#result-wrapper .verdant-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 9999px;
    background: var(--v-primary-fixed);
    color: var(--v-on-primary-fixed);
    font-size: .8rem;
    line-height: 1;
    font-weight: 500;
}
#result-wrapper .verdant-chip i { font-size: .75rem; color: var(--v-secondary); }

/* ---- trust & delivery badges ---- */
#result-wrapper .verdant-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    clear: both;
    position: relative;
    z-index: 1;
    background: var(--v-bg);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--v-surface-variant);
}
#result-wrapper .verdant-trust-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
#result-wrapper .verdant-trust-item i {
    color: var(--v-secondary);
    font-size: 1.25rem;
    margin-top: .15rem;
}
#result-wrapper .verdant-trust-item strong {
    display: block;
    font-size: .85rem;
    color: var(--v-primary);
}
#result-wrapper .verdant-trust-item span {
    font-size: .75rem;
    color: var(--v-on-surface-variant);
}
@media (max-width: 575px) {
    #result-wrapper .verdant-trust { grid-template-columns: 1fr; }
}

/* ---- About + details bento (description tab) ---- */
#result-wrapper .verdant-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 992px) {
    #result-wrapper .verdant-bento { grid-template-columns: 2fr 1fr; align-items: stretch; }
}
#result-wrapper .verdant-bento-card {
    background: var(--v-bg);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: 2rem;
}
#result-wrapper .verdant-bento-about {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#result-wrapper .verdant-bento-about .desc {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--v-on-surface-variant);
}
#result-wrapper .verdant-bento-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--v-font-head);
    color: var(--v-primary);
    margin: 0 0 1.25rem;
    font-size: 1.4rem;
}
#result-wrapper .verdant-bento-title i { color: var(--v-secondary); font-size: 1.05rem; }
/* let the bento cards be the cards (avoid double-card nesting in the tab body) */
#result-wrapper .tab-content:has(.verdant-bento) {
    background: transparent;
    border: 0;
    padding: 0;
}

/* links */
#result-wrapper a { color: var(--v-secondary); }
#result-wrapper a:hover { color: var(--v-primary); }

/* ===================================================================== */
/*  GLOBAL VERDANT THEME — site-wide (header, nav, background, fonts)     */
/* ===================================================================== */

/* ---- background + base typography (whole site) ---- */
body.is-nova,
body {
    background-color: var(--v-bg) !important;
    font-family: var(--v-font-body);
    color: var(--v-on-surface);
}
#main-wrapper,
.wrapper-content,
main { background-color: var(--v-bg); }

/* headings site-wide -> EB Garamond */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--v-font-head); letter-spacing: -0.01em; }

/* ---- top promo bar ---- */
.topbar-wrapper,
.nav.topbar-main { background-color: var(--v-primary) !important; }
.topbar-wrapper,
.topbar-wrapper a,
.nav.topbar-main,
.nav.topbar-main a,
.nav.topbar-main .nav-link { color: rgba(255, 255, 255, .82) !important; }
.topbar-wrapper a:hover,
.nav.topbar-main a:hover { color: #fff !important; }
.nav.topbar-main.nav-dividers .nav-item + .nav-item { border-color: rgba(255, 255, 255, .18); }

/* ---- main navbar ---- */
.fixed-navbar,
.fixed-navbar .navbar,
.navbar.navbar-expand-lg {
    background-color: var(--v-bg) !important;
    box-shadow: 0 1px 0 rgba(27, 48, 34, .06);
}

/* brand / logo (serif italic if it's a text logo) */
.navbar-brand {
    font-family: var(--v-font-head);
    font-style: italic;
    font-weight: 600;
    color: var(--v-primary);
    letter-spacing: -0.02em;
}

/* main nav links */
.navbar-nav .nav-link {
    font-family: var(--v-font-body);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--v-on-surface-variant);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active { color: var(--v-primary); }
.navbar-nav .nav-item.active > .nav-link {
    border-bottom: 2px solid var(--v-primary);
}

/* ---- right-hand icons (search / account / wishlist / cart) ---- */
.nav-icons .nav-link,
.nav-icons .btn,
.nav-icons > li > a,
.search-wrapper .btn { color: var(--v-primary); }
.nav-icons .nav-link:hover,
.nav-icons .btn:hover { color: var(--v-secondary); }
/* cart count badge */
.cart-icon-dropdown .badge,
.nav-icons .badge-circle-1,
.nav-icons .badge {
    background-color: var(--v-secondary) !important;
    color: #fff !important;
}

/* search field */
.search-wrapper .form-control {
    border-radius: var(--v-radius);
    border-color: var(--v-outline-variant);
}
.search-wrapper .form-control:focus { border-color: var(--v-secondary); }

/* ---- primary buttons site-wide ---- */
.btn-primary {
    background-color: var(--v-primary-container);
    border-color: var(--v-primary-container);
    border-radius: var(--v-radius);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--v-secondary) !important;
    border-color: var(--v-secondary) !important;
}
a, .btn-link { color: var(--v-secondary); }
a:hover, .btn-link:hover { color: var(--v-primary); }

/* ===================================================================== */
/*  PRODUCT PAGE — variation swatches (pot colour) as circles            */
/* ===================================================================== */
/* circular style ONLY for real image/colour swatches (not text-in-imgswatches) */
#result-wrapper .variation.swatches.swatches-image {
    border-radius: 9999px;
    overflow: hidden;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--v-outline-variant);
}
#result-wrapper .variation.swatches.swatches-image.active {
    box-shadow: 0 0 0 2px var(--v-bg), 0 0 0 4px var(--v-primary);
    border-color: transparent;
}
#result-wrapper .variation.swatches.swatches-text {
    border-radius: var(--v-radius);
    border: 1px solid var(--v-outline-variant);
    padding: .5rem 1rem;
}
#result-wrapper .variation.swatches.swatches-text.active {
    border-color: var(--v-primary);
    box-shadow: inset 0 0 0 1px var(--v-primary);
    background: var(--v-surface-low);
}
#result-wrapper .label-variation { color: var(--v-primary); font-weight: 600; }
#result-wrapper .swatches-selected { color: var(--v-secondary) !important; }

/* ===================================================================== */
/*  Fixes from screenshot review                                          */
/* ===================================================================== */

/* 1) Center the main category nav between logo and icons */
.navbar .navbar-collapse .navbar-nav.mr-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2) Size swatches: equal size, two-line label, clamp-based sizing */
/* text swatches live inside an .imgswatches container sized for image tiles —
   force a clean wrapping row of equal text tiles instead. */
#result-wrapper .swatches.imgswatches,
#result-wrapper .swatches.colorswatches,
#result-wrapper .variations .swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .6rem;
    margin: 0;
    transform: none !important;
}
#result-wrapper .swatches > .js-slider-item,
#result-wrapper .swatches > .col-auto {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    left: auto !important;
}
#result-wrapper .variation.swatches.swatches-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    width: clamp(7rem, 17vw, 9.5rem) !important;
    height: auto !important;
    min-height: clamp(3.5rem, 8vw, 4.5rem) !important;
    margin: 0 !important;
    padding: clamp(.6rem, 1.6vw, .95rem) !important;
    border: 1px solid var(--v-outline-variant) !important;
    border-radius: var(--v-radius) !important;
    background: var(--v-bg);
    line-height: 1.2;
    overflow: visible !important;
    white-space: normal;
    word-break: normal;
}
#result-wrapper .variation.swatches.swatches-text.active {
    border-color: var(--v-primary) !important;
    box-shadow: inset 0 0 0 1px var(--v-primary);
    background: var(--v-surface-low);
}
#result-wrapper .swatches-text .swatch-main {
    order: 1;
    display: block;
    font-weight: 600;
    color: var(--v-primary);
    font-size: clamp(.82rem, 1.8vw, .95rem);
}
#result-wrapper .swatches-text .swatch-sub {
    order: 2;
    display: block;
    margin-top: .15rem;
    font-size: clamp(.62rem, 1.4vw, .73rem);
    color: var(--v-on-surface-variant);
}
#result-wrapper .swatches-text .variation-badge {
    order: 3;
    position: static !important;
    margin-top: .35rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--v-secondary);
}
#result-wrapper .swatches-text .sr-only { position: absolute !important; }

/* ===================================================================== */
/*  Header round 2 — centered nav, uniform icons, breadcrumb, topbar      */
/* ===================================================================== */

/* --- categories centered between logo and icons --- */
@media (min-width: 992px) {
    .navbar.navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: space-around !important;
    }
    .navbar .navbar-collapse.nav-scrollbar { flex-grow: 0; }
    .navbar .navbar-collapse .navbar-nav {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- top-right icons: make them match each other --- */
.nav-icons { align-items: center; }
.nav-icons > .nav-item,
.nav-icons > li { display: flex; align-items: center; }
.nav-icons .nav-link,
.nav-icons .btn,
.verdant-search-toggle {
    color: var(--v-primary) !important;
    padding: .4rem .6rem !important;
    line-height: 1;
    box-shadow: none !important;
}
.nav-icons .nav-link:hover,
.nav-icons .btn:hover,
.verdant-search-toggle:hover { color: var(--v-secondary) !important; }
/* the wishlist is a btn-secondary in NOVA — flatten it to match the icon buttons */
.nav-icons .btn-secondary,
.nav-icons .btn.wishlist {
    background: transparent !important;
    border: 0 !important;
    color: var(--v-primary) !important;
}
.nav-icons .fas,
.nav-icons .far,
.nav-icons .fa,
.verdant-search-toggle .fas { font-size: 1.15rem; line-height: 1; }
.cart-icon-dropdown-price {
    font-size: .82rem;
    color: var(--v-on-surface-variant);
    margin-left: .3rem;
    font-family: var(--v-font-body);
}

/* --- breadcrumb: small font, tight padding, arrow separators --- */
.breadcrumb-wrapper { font-size: .76rem; }
.breadcrumb,
#breadcrumb.breadcrumb {
    padding: .35rem 0;
    margin-bottom: .25rem;
    background: transparent;
    font-size: .76rem;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";              /* › */
    color: var(--v-outline);
    padding: 0 .45rem;
    font-size: .85em;
}
.breadcrumb .breadcrumb-item a { color: var(--v-on-surface-variant); }
.breadcrumb .breadcrumb-item a:hover { color: var(--v-primary); }
.breadcrumb .breadcrumb-item.active,
.breadcrumb .breadcrumb-item.last { color: var(--v-primary); }
/* drop the redundant "Zurück zur Liste" back-link + its separator */
.breadcrumb .breadcrumb-backtolist { display: none !important; }
.breadcrumb .breadcrumb-backtolist + .breadcrumb-item::before { content: none; }
.navigation-arrows .btn { color: var(--v-on-surface-variant); padding: 0 .4rem; }

/* --- top bar: free-shipping note --- */
.topbar-note,
.topbar-note #topbarNote,
.topbar-note .nav-link { color: rgba(255, 255, 255, .9) !important; }
.topbar-note { margin: 0; }
.topbar-note .fa-truck { margin-right: .35rem; }

/* --- search modal (elegant) --- */
.verdant-search-modal { z-index: 1060; }            /* safety, on top of backdrop */
.verdant-search-modal .modal-dialog { max-width: 620px; }
.verdant-search-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 1.25rem;
    background: #ffffffc9;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.25rem);
    box-shadow: 0 30px 80px rgba(27, 48, 34, .28);
}
.verdant-search-modal .modal-body { padding: 0; }

.verdant-search-head {
    font-family: var(--v-font-head);
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.1;
    color: var(--v-primary);
    letter-spacing: -.01em;
    margin-bottom: 1.4rem;
}
.verdant-search-form {
    display: flex;
    align-items: center;
    gap: .85rem;
    border-bottom: 1.5px solid var(--v-outline-variant);
    padding-bottom: .4rem;
    transition: border-color .25s ease;
}
.verdant-search-form:focus-within { border-color: var(--v-primary); }
.verdant-search-ico {
    flex: 0 0 auto;
    color: var(--v-on-surface-variant);
    font-size: 1.05rem;
    transition: color .25s ease;
}
.verdant-search-form:focus-within .verdant-search-ico { color: var(--v-primary); }
.verdant-search-input {
    flex: 1 1 auto;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: var(--v-font-body);
    font-weight: 300;
    font-size: clamp(1.15rem, 3vw, 1.7rem);
    color: var(--v-on-surface);
    padding: .4rem 0;
}
.verdant-search-input::placeholder { color: var(--v-outline); font-weight: 300; }
.verdant-search-submit {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 9999px;
    border: 0;
    background: var(--v-primary-container);
    color: #fff;
    font-size: .95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}
.verdant-search-submit:hover { background: var(--v-secondary); transform: translateX(2px); }
.verdant-search-hint {
    margin-top: 1.1rem;
    font-size: .78rem;
    color: var(--v-on-surface-variant);
}
.verdant-search-hint kbd {
    background: var(--v-surface-high);
    color: var(--v-on-surface-variant);
    border: 1px solid var(--v-surface-variant);
    border-radius: 4px;
    padding: .1rem .45rem;
    font-family: var(--v-font-body);
    font-size: .72rem;
    box-shadow: none;
}
.verdant-search-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--v-on-surface-variant);
    font-size: 1.4rem;
    line-height: 1;
    opacity: .85;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.verdant-search-close:hover { background: var(--v-surface); color: var(--v-primary); opacity: 1; }

/* blurred backdrop + soft entrance for the search modal */
.modal-backdrop.show { background-color: rgba(6, 27, 14, .55); }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .modal-backdrop.show { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.verdant-search-modal.fade .modal-dialog {
    transform: translateY(-14px) scale(.98);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.verdant-search-modal.show .modal-dialog { transform: none; }

/* ===================================================================== */
/*  Header round 3 — spacing tweaks                                       */
/* ===================================================================== */

/* top bar: a little breathing room at the bottom */
.topbar-wrapper { padding-top: .25rem; padding-bottom: .45rem; }

/* search icon: no trailing margin */
.verdant-search,
.verdant-search-toggle { margin-right: 0 !important; }

/* reclaim the big empty gap above the content */
#content { padding-top: 1rem !important; }
.breadcrumb-wrapper { margin-top: 0; }

/* category dropdowns: match the site background */
.navbar-nav .dropdown-menu { background-color: var(--v-bg) !important; }
.navbar-nav .dropdown-menu .dropdown-body,
.navbar-nav .dropdown-menu .megamenu-body,
.navbar-nav .dropdown-menu .subcategory-wrapper { background-color: var(--v-bg) !important; }

/* ===================================================================== */
/*  Round 4 — remove horizontal divider lines + make it compact          */
/* ===================================================================== */

/* remove the horizontal lines in the header / breadcrumb region */
.fixed-navbar,
.fixed-navbar .navbar,
.navbar.navbar-expand-lg {
    box-shadow: none !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    padding-bottom: 1rem;
}
.breadcrumb,
.breadcrumb-wrapper,
#breadcrumb.breadcrumb,
.subcategory-wrapper { border: 0 !important; box-shadow: none !important; }

/* compact: trim vertical spacing in the top region */
.topbar-wrapper { padding-top: .15rem !important; padding-bottom: .25rem !important; }
.navbar.navbar-expand-lg { padding-top: .35rem !important; padding-bottom: .35rem !important; }
#content { padding-top: .35rem !important; padding-bottom: .5rem !important; }
.breadcrumb,
#breadcrumb.breadcrumb { padding: .2rem 0 !important; margin-bottom: 0 !important; }
.breadcrumb-wrapper { margin: 0 !important; padding: .15rem 0 !important; }

/* kill the big gap before the product hero + tighten the info column */
#result-wrapper { padding-top: 0 !important; }
#result-wrapper #product-offer.product-detail,
#result-wrapper .product-detail { margin-top: .5rem !important; }
#result-wrapper .product-info-inner > * { margin-bottom: .75rem; }
#result-wrapper .shortdesc { margin: .75rem 0 1rem !important; }
#result-wrapper .verdant-chips { margin-bottom: 1rem !important; }
#result-wrapper .info-essential { margin-bottom: .5rem !important; }
#result-wrapper .variation.swatches.swatches-text.active {
    border-color: var(--v-primary);
    box-shadow: inset 0 0 0 1px var(--v-primary);
    background: var(--v-surface-low);
}
#result-wrapper .swatch-main {
    display: block;
    font-weight: 600;
    color: var(--v-primary);
    font-size: clamp(.8rem, 1.8vw, .95rem);
}
#result-wrapper .swatch-sub {
    display: block;
    margin-top: .15rem;
    font-size: clamp(.62rem, 1.4vw, .72rem);
    color: var(--v-on-surface-variant);
}

/* 3) Produktdetails table: green values + clean stacked layout in the card */
#result-wrapper .verdant-bento-details .product-attributes table { border: 0; margin: 0; width: 100%; }
#result-wrapper .verdant-bento-details .product-attributes tr {
    display: block;
    padding: .85rem 0;
    border: 0;
    border-bottom: 1px solid var(--v-surface-variant);
    background: transparent !important;
}
.product-attributes tr > td:first-child {
    width: 50% !important
}
#result-wrapper .verdant-bento-details .product-attributes tr:last-child { border-bottom: 0; }
#result-wrapper .verdant-bento-details .product-attributes td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
}
#result-wrapper .verdant-bento-details .product-attributes td.h6 {
    color: var(--v-on-surface-variant);
    font-weight: 600;
    font-size: .8rem;
    white-space: normal;
    margin: 0 0 .4rem;
}
#result-wrapper .verdant-bento-details .attr-characteristic { display: flex; flex-wrap: wrap; gap: .35rem; }
/* green pills instead of NOVA-yellow .badge-primary */
#result-wrapper .product-attributes .badge,
#result-wrapper .product-attributes .badge-primary,
#result-wrapper .verdant-bento-details .badge {
    background: var(--v-primary-fixed) !important;
    color: var(--v-on-primary-fixed) !important;
    border-radius: 9999px;
    font-weight: 500;
    font-size: .72rem;
    padding: .4em .85em;
}
#result-wrapper .product-attributes a.badge:hover { background: var(--v-secondary-container) !important; }

/* 4) Search: hidden behind an icon, opens as a panel */
.verdant-search { position: relative; }
.verdant-search-toggle {
    background: transparent;
    border: 0;
    color: var(--v-primary);
    padding: .5rem .75rem;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.verdant-search-toggle:hover { color: var(--v-secondary); }
.verdant-search-panel { display: none; }
.verdant-search.open .verdant-search-panel {
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + .5rem);
    z-index: 1080;
    width: min(440px, 92vw);
    background: var(--v-bg);
    padding: 1rem;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius);
    box-shadow: 0 12px 40px rgba(27, 48, 34, .14);
}
.verdant-search.open .verdant-search-panel form,
.verdant-search.open .verdant-search-panel .form-icon { width: 100%; }

/* ===================================================================== */
/*  PRODUCT LIST — Verdant "Plant Collection" (GRID view)                 */
/*  Stitch screen: Verdant - Plant Collection (Grid)                      */
/* ===================================================================== */

/* each grid card */
/* 3 cards per row on desktop (was 4 at xl) */
@media (min-width: 1300px) {
    #result-wrapper .product-list.layout-gallery > .product-wrapper.col-xl-3 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
}
#result-wrapper .product-list.layout-gallery .product-wrapper,
#result-wrapper .product-list:not(.layout-list) .product-wrapper {
    margin-bottom: 1.75rem;
}
#result-wrapper .productbox-column {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    overflow: visible;                  /* let badge overflow, not clipped */
    box-shadow: none;
    /* subtle: only the border reacts on hover, nothing moves/zooms */
    transition: border-color .35s ease;
    height: auto;                       /* size to content → no empty bottom */
}
#result-wrapper .productbox-column:hover {
    border-color: var(--v-primary);
}
/* No hover MOVEMENT (kill transforms only — keep image fade-in animation). */
#result-wrapper .productbox-column:hover .productbox-image img,
#result-wrapper .productbox-column:hover .productbox-image .inner img,
#result-wrapper .productbox-column:hover .ribbon {
    transform: none !important;
}

/* uniform padding around the whole card */
#result-wrapper .productbox-column .productbox-inner {
    padding: .85rem;
    height: auto;
}
#result-wrapper .productbox-column .productbox-inner > .row {
    margin-left: 0;
    margin-right: 0;
}
#result-wrapper .productbox-column .productbox-inner > .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}

/* image: CLIP it to the rounded box (ribbon is positioned inside the bounds
   below, so clipping no longer cuts the badge). */
#result-wrapper .productbox-column .productbox-image {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
}
#result-wrapper .productbox-column .productbox-images,
#result-wrapper .productbox-column .productbox-images > a {
    overflow: hidden;
    border-radius: .75rem;
}
#result-wrapper .productbox-column .square-image,
#result-wrapper .productbox-column .square-image .inner {
    overflow: hidden !important;
}
/* NO hover image swap */
#result-wrapper .productbox-column .productbox-image .second-wrapper {
    display: none !important;
}
#result-wrapper .productbox-column .productbox-image img,
#result-wrapper .productbox-column .productbox-image .inner img {
    object-fit: cover;
    border-radius: .75rem;
}

/* badge / ribbon: sit fully inside top-left, never clipped */
#result-wrapper .productbox-column .ribbon {
    position: absolute !important;
    top: .6rem !important;
    left: .6rem !important;
    right: auto !important;
    z-index: 5;
    margin: 0 !important;
    transform: none !important;
}

/* hidden grid-tag (legacy) */
#result-wrapper .productbox-column .verdant-grid-tag { display: none !important; }

#result-wrapper .productbox-column .productbox-title {
    font-family: var(--v-font-head);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.25;
    margin-top: .85rem;
    margin-bottom: .3rem;
}
#result-wrapper .productbox-column .productbox-title a { color: var(--v-primary); }
#result-wrapper .productbox-column .price_wrapper .price,
#result-wrapper .productbox-column .price.h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1.15rem;
}
#result-wrapper .productbox-column .productbox-inner > .row > [class*="col"]:last-child {
    padding-bottom: .25rem;
}

/* CSS fallback if JS hasn't stripped .productbox-hover yet: neutralize the
   NOVA hover swap so the image/badge never move or vanish. */
#result-wrapper .productbox-hover:hover .productbox-inner,
#result-wrapper .productbox-hover .productbox-inner {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
}
#result-wrapper .productbox-hover .productbox-onhover,
#result-wrapper .productbox-hover:hover .productbox-onhover {
    /* keep wishlist/compare icons static + always visible, no slide-in */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
#result-wrapper .productbox-column .productbox-image .first-wrapper,
#result-wrapper .productbox-column:hover .productbox-image .first-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* "Zum Artikel" button */
#result-wrapper .productbox-column .verdant-zum-artikel {
    display: block;
    width: 100%;
    margin-top: .85rem;
    padding: .6rem 1rem;
    border-radius: 9999px;
    background: var(--v-primary);
    color: var(--v-on-primary);
    font-weight: 600;
    font-size: .85rem;
    text-align: center;
    border: 1px solid var(--v-primary);
}
#result-wrapper .productbox-column .verdant-zum-artikel:hover {
    background: transparent;
    color: var(--v-primary);
    text-decoration: none;
}

/* ===================================================================== */
/*  BASKET — Verdant "Your Cart"                                          */
/*  Stitch screen: Verdant - Your Basket                                  */
/*  Scoped to .basket so only the cart page is affected.                  */
/* ===================================================================== */

/* page heading "Your Cart" */
.basket .basket-heading {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    letter-spacing: -.01em;
}
.basket > .row > [class*="col"]:first-child > .basket-heading:first-of-type {
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: .35rem;
}

/* ---- each cart item -> white rounded card ---- */
.basket .cart-items-header { display: none !important; }   /* mockup has no column header row */
.basket .basket-items .cart-items-body {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 24px -14px rgba(27, 48, 34, .10);
    margin: 0 0 1.1rem;
    padding: 1.1rem 1.25rem;
    align-items: center;
}
/* hide the <hr> separators NOVA puts between rows (cards replace them) */
.basket .basket-items .cart-items-body > [class*="col-12"]:last-child > hr,
.basket .basket-items .cart-items-body hr { display: none; }

/* product image -> rounded thumbnail */
.basket .cart-items-image img {
    border-radius: var(--v-radius);
    object-fit: cover;
    background: var(--v-surface);
}

/* product name -> serif */
.basket .cart-items-name {
    font-family: var(--v-font-head);
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--v-primary);
}
.basket .cart-items-name:hover { color: var(--v-secondary); }

/* meta list (variant / sku) -> muted small */
.basket .cart-items-body .list-unstyled li {
    font-size: .8rem;
    color: var(--v-on-surface-variant);
}

/* line price -> serif accent */
.basket .cart-items-price .price_overall,
.basket .cart-items-price .text-accent {
    font-family: var(--v-font-head);
    font-weight: 600;
    color: var(--v-primary);
    font-size: 1.1rem;
}

/* quantity stepper -> pill */
.basket .cart-items-quantity .form-counter {
    border: 1px solid var(--v-outline-variant);
    border-radius: 9999px;
    overflow: hidden;
    background: var(--v-bg);
    max-width: 130px;
}
.basket .cart-items-quantity .form-counter .btn { color: var(--v-on-surface-variant); border: 0; }
.basket .cart-items-quantity .form-counter .btn:hover { color: var(--v-primary); }
.basket .cart-items-quantity .form-counter .quantity {
    border: 0; background: transparent; text-align: center;
}

/* "Remove" / delete button -> subtle muted link with icon */
.basket .cart-items-delete-button {
    color: var(--v-on-surface-variant);
    font-size: .8rem;
    text-decoration: none;
}
.basket .cart-items-delete-button:hover { color: var(--v-error); }

/* ---- order summary (right column) ---- */
.basket .cart-summary .basket-heading {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.basket .cart-summary .card,
.basket .cart-summary .card-gray {
    background: var(--v-surface-low);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
}
.basket .basket-summary {
    padding: .5rem .25rem;
}
.basket .basket-summary .price_label,
.basket .basket-summary .tax_label {
    color: var(--v-on-surface-variant);
    font-weight: 400;
}
.basket .basket-summary .basket-summary-total {
    border-top: 0;            /* no top divider line */
    margin-top: 0;
    padding-top: .25rem;
}
.basket .basket-summary .basket-summary-total .price_label { color: var(--v-primary); font-weight: 600; }
.basket .basket-summary .basket-summary-total .total-sum {
    font-family: var(--v-font-head);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--v-primary);
}

.basket .basket-summary { margin-top:1rem !important; }
/* ---- right column re-order: shipping bar → summary → coupon ---- */
.basket .cart-summary { display: flex; flex-direction: column; }
.basket .cart-summary .basket-heading    { order: 0; }
.basket .cart-summary .verdant-ship-mount { order: 1; margin-top: 0; margin-bottom: 1rem; }
.basket .cart-summary .basket-summary     { order: 2; }
.basket .cart-summary .verdant-mc-coupon,
.basket .cart-summary .verdant-coupon     { order: 3; margin-top: 1rem; }
/* misc right-col notes (free-ship hint, weight) after coupon */
.basket .cart-summary > .font-weight-bold,
.basket .cart-summary .basket-summary-notice-weight-wrapper { order: 4; }

/* ---- coupon card: primary bg, no header, always-open ---- */
.basket .cart-summary .verdant-coupon {
    background: var(--v-primary) !important;
    border: 1px solid var(--v-primary) !important;
    border-radius: var(--v-radius-lg);
    overflow: hidden;
}
.basket .cart-summary .verdant-coupon-body { padding: 1.1rem; }
.basket .cart-summary .verdant-coupon-unavailable .verdant-coupon-body {
    color: #fff; text-align: center; font-size: .9rem;
}

/* white input field */
.basket .cart-summary .verdant-coupon-input {
    background: #fff !important;
    color: var(--v-on-surface) !important;
    border: 1px solid #fff !important;
    border-radius: var(--v-radius);
    height: auto;
    padding: .7rem 1rem;
}
.basket .cart-summary .verdant-coupon-input::placeholder { color: var(--v-on-surface-variant) !important; }
.basket .cart-summary .verdant-coupon-group { margin-bottom: .75rem; }
.basket .cart-summary .verdant-coupon-error { color: #fff; font-size: .8rem; margin-top: .35rem; }

/* button: secondary-container border + text, transparent bg */
.basket .cart-summary .verdant-coupon-btn {
    border-radius: var(--v-radius);
    background: transparent !important;
    border: 1px solid var(--v-secondary-container) !important;
    color: var(--v-secondary-container) !important;
    font-weight: 600;
    padding: .7rem 1rem;
}
.basket .cart-summary .verdant-coupon-btn:hover {
    background: var(--v-secondary-container) !important;
    color: var(--v-primary) !important;
}

/* proceed-to-checkout -> full-width dark pill button */
.basket #cart-checkout-btn {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    color: var(--v-on-primary);
    border-radius: var(--v-radius);
    display: block;
    width: 100%;
    text-align: center;
    padding: .95rem 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-top: 1rem;
}
.basket #cart-checkout-btn:hover {
    background: var(--v-secondary);
    border-color: var(--v-secondary);
}

/* trust line under the proceed button */
.basket .verdant-checkout-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .85rem;
    font-size: .72rem;
    color: var(--v-on-surface-variant);
}
.basket .verdant-checkout-trust i { color: var(--v-secondary); font-size: .8rem; }

/* ===================================================================== */
/*  CHECKOUT — Verdant "Secure Checkout"                                  */
/*  Stitch screen: Verdant - Secure Checkout                             */
/*  Scoped to #checkout (inside #result-wrapper).                         */
/* ===================================================================== */

/* ---- step indicator -> clean numbered breadcrumb ---- */
#checkout .stepper.checkout-steps {
    border: 0;
    background: transparent;
    margin-bottom: 2rem;
    justify-content: flex-start;
    gap: .5rem;
}
#checkout .checkout-steps .step .step-content {
    display: flex;
    align-items: center;
    gap: .5rem;
}
#checkout .checkout-steps .step .badge-pill {
    background: var(--v-surface) !important;
    color: var(--v-on-surface-variant) !important;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    padding: 0;
}
#checkout .checkout-steps .step.step-current .badge-pill,
#checkout .checkout-steps .step.step-active .badge-pill {
    background: var(--v-primary) !important;
    color: var(--v-on-primary) !important;
}
#checkout .checkout-steps .step .step-text {
    font-size: .8rem;
    color: var(--v-on-surface-variant);
    font-weight: 500;
}
#checkout .checkout-steps .step.step-current .step-text { color: var(--v-primary); font-weight: 600; }
#checkout .checkout-steps .step .step-check { color: var(--v-secondary); }

/* ---- form section cards ---- */
#checkout .card,
#checkout .panel,
#checkout fieldset.card-gray,
#checkout .checkout-card {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 24px -16px rgba(27, 48, 34, .10);
}
#checkout .card .card-header,
#checkout .panel .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--v-surface-variant);
}

/* section headings -> serif */
#checkout h2,
#checkout h3,
#checkout .card-header,
#checkout legend,
#checkout .panel-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 500;
}

/* ---- form fields ---- */
#checkout .form-control,
#checkout .custom-select {
    border-radius: var(--v-radius);
    border-color: var(--v-outline-variant);
    background: var(--v-bg);
    padding: .7rem .9rem;
    height: auto;
}
#checkout .form-control:focus,
#checkout .custom-select:focus {
    border-color: var(--v-secondary);
    box-shadow: 0 0 0 3px rgba(74, 101, 79, .12);
}
#checkout label,
#checkout .control-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--v-on-surface-variant);
}

/* ---- order summary (right column) ---- */
#checkout .checkout-summary,
#checkout .order-summary,
#checkout .sticky-top.cart-summary,
#checkout aside .card {
    background: var(--v-surface-low);
}
#checkout .total-sum,
#checkout .order-total .price {
    font-family: var(--v-font-head);
    font-weight: 600;
    color: var(--v-primary);
}

/* ---- primary action button -> full-width dark pill ---- */
#checkout .btn-primary,
#checkout button[type="submit"].btn-primary,
#checkout .checkout-next-button {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    color: var(--v-on-primary);
    border-radius: var(--v-radius);
    padding: .95rem 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
}
#checkout .btn-primary:hover,
#checkout .btn-primary:focus {
    background: var(--v-secondary);
    border-color: var(--v-secondary);
}

/* payment-method rows -> soft selectable cards */
#checkout .payment-method,
#checkout .shipping-method,
#checkout .list-group-item {
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius);
    background: var(--v-bg);
    margin-bottom: .65rem;
}
#checkout .payment-method.active,
#checkout .shipping-method.active,
#checkout .list-group-item.active {
    border-color: var(--v-primary);
    box-shadow: inset 0 0 0 1px var(--v-primary);
    background: var(--v-surface-low);
    color: inherit;
}

/* ===================================================================== */
/*  PRODUCT LIST — LIST view (Verdant 3-zone card)                        */
/*  Markup: productlist/item_list.tpl (.verdant-list-grid)                */
/*  Zones: media | body | buy. Image fills the media zone full height.    */
/* ===================================================================== */

/* category page heading -> serif */
#result-wrapper .producttitle,
#result-wrapper h1.h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    letter-spacing: -.02em;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.05;
}

#result-wrapper .product-list.layout-list .product-wrapper { margin-bottom: 1.5rem; }

/* the card shell */
#result-wrapper .productbox-row.verdant-list {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(27, 48, 34, .08);
}
#result-wrapper .productbox-row.verdant-list .productbox-inner { padding: 0; height: auto; }

/* 3-zone grid: image | body | buy */
#result-wrapper .verdant-list-grid {
    display: grid;
    grid-template-columns: minmax(220px, 32%) 1fr minmax(250px, 300px);
    align-items: stretch;
}

/* ---- media zone: image fills the full card height ---- */
#result-wrapper .verdant-list-media {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
#result-wrapper .verdant-list-media .verdant-list-media-link {
    display: block;
    width: 100%;
    height: 100%;
}
#result-wrapper .verdant-list-media .verdant-list-img,
#result-wrapper .verdant-list-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
/* "AUF LAGER" ribbon -> pill, top-left over the image */
#result-wrapper .verdant-list-media .ribbon {
    position: absolute !important;
    top: .7rem;
    left: .7rem;
    right: auto;
    z-index: 3;
    margin: 0 !important;
    background: var(--v-primary) !important;
    color: var(--v-on-primary) !important;
    border-radius: 9999px !important;
    padding: .3rem .85rem !important;
    font-size: .6rem !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(27, 48, 34, .18);
}

/* ---- body zone: chips, title, description ---- */
#result-wrapper .verdant-list-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.4rem, 2.6vw, 2.25rem);
    min-width: 0;
}
#result-wrapper .verdant-list-body .verdant-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .75rem;
}
#result-wrapper .verdant-list-body .verdant-chip {
    background: var(--v-secondary-container);
    color: var(--v-on-secondary-container, #4e6953);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .6rem;
    font-weight: 600;
    padding: .3rem .75rem;
    border-radius: 9999px;
    line-height: 1.1;
}
#result-wrapper .verdant-list-body .productbox-title {
    font-family: var(--v-font-head);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.15;
    margin: 0 0 .65rem;
}
#result-wrapper .verdant-list-body .productbox-title a { color: var(--v-primary); }
#result-wrapper .verdant-list-body .item-list-description {
    color: var(--v-on-surface-variant);
    font-size: .98rem;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- buy zone: price, variations, qty, buttons (left divider) ---- */
#result-wrapper .verdant-list-buy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .7rem;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    border-left: 1px solid var(--v-surface-variant);
}
#result-wrapper .verdant-list-buy .form-basket {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
/* buttons a touch tighter so the card stays sleek */
#result-wrapper .verdant-list-buy .verdant-quickbuy,
#result-wrapper .verdant-list-buy .verdant-moredetails { padding-top: .7rem; padding-bottom: .7rem; }
/* price -> serif, right aligned at the top */
#result-wrapper .verdant-list-buy .verdant-list-price { text-align: right; }
#result-wrapper .verdant-list-buy .verdant-list-price .price,
#result-wrapper .verdant-list-buy .price.h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}
#result-wrapper .verdant-list-buy .verdant-list-price .price-note,
#result-wrapper .verdant-list-buy .verdant-list-price .vat_info { font-size: .72rem; color: var(--v-on-surface-variant); }
#result-wrapper .verdant-list-buy .verdant-list-stock {
    text-align: right;
    font-size: .72rem;
    color: var(--v-on-surface-variant);
    margin-top: -.5rem;
}

/* ---- compact list variation swatches (productlist/variation_list.tpl) ---- */
#result-wrapper .verdant-list-buy .verdant-vars {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
#result-wrapper .verdant-list-buy .verdant-var-name {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--v-on-surface-variant);
    margin-bottom: .3rem;
}
#result-wrapper .verdant-list-buy .verdant-var-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
#result-wrapper .verdant-list-buy .verdant-swatch { position: relative; margin: 0; cursor: pointer; }
#result-wrapper .verdant-list-buy .verdant-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* text swatch -> small, non-bold pill that fits in one row */
#result-wrapper .verdant-list-buy .verdant-swatch-label {
    display: inline-block;
    padding: .28rem .6rem;
    border: 1px solid var(--v-outline-variant);
    border-radius: var(--v-radius);
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--v-on-surface);
    background: var(--v-bg);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#result-wrapper .verdant-list-buy .verdant-swatch input:checked + .verdant-swatch-label {
    border-color: var(--v-primary);
    box-shadow: inset 0 0 0 1px var(--v-primary);
    background: var(--v-surface-low);
    color: var(--v-primary);
}
/* image swatch -> small circle */
#result-wrapper .verdant-list-buy .verdant-swatch-img {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid var(--v-outline-variant);
    display: inline-flex;
}
#result-wrapper .verdant-list-buy .verdant-swatch-img img { width: 100%; height: 100%; object-fit: cover; }
#result-wrapper .verdant-list-buy .verdant-swatch-img:has(input:checked) {
    box-shadow: 0 0 0 2px var(--v-bg), 0 0 0 4px var(--v-primary);
    border-color: transparent;
}
/* out-of-stock swatch */
#result-wrapper .verdant-list-buy .verdant-swatch.is-out { opacity: .45; }
#result-wrapper .verdant-list-buy .verdant-swatch.is-out .verdant-swatch-label { text-decoration: line-through; }

/* qty row */
#result-wrapper .verdant-list-buy .verdant-list-qty {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}
#result-wrapper .verdant-list-buy .verdant-list-qty-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--v-on-surface-variant);
}
#result-wrapper .verdant-list-buy .form-counter {
    border: 1px solid var(--v-outline-variant);
    border-radius: var(--v-radius);
    overflow: hidden;
    background: var(--v-bg);
    max-width: 130px;
    margin: 0;
}
#result-wrapper .verdant-list-buy .form-counter .btn { color: var(--v-on-surface-variant); border: 0; }
#result-wrapper .verdant-list-buy .form-counter .btn:hover { color: var(--v-primary); }
#result-wrapper .verdant-list-buy .form-counter .quantity { border: 0; background: transparent; text-align: center; }

/* Quick Buy (primary dark) + More Details (outline) */
#result-wrapper .verdant-list-buy .verdant-quickbuy {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    color: var(--v-on-primary);
    border-radius: var(--v-radius);
    padding: .8rem 1.25rem;
    font-weight: 600;
    letter-spacing: .02em;
}
#result-wrapper .verdant-list-buy .verdant-quickbuy:hover {
    background: var(--v-secondary);
    border-color: var(--v-secondary);
    color: var(--v-on-primary);
}
#result-wrapper .verdant-list-buy .verdant-moredetails {
    background: transparent;
    border: 1px solid var(--v-outline-variant);
    color: var(--v-secondary);
    border-radius: var(--v-radius);
    padding: .8rem 1.25rem;
    font-weight: 600;
}
#result-wrapper .verdant-list-buy .verdant-moredetails:hover {
    border-color: var(--v-secondary);
    background: var(--v-surface-low);
    color: var(--v-primary);
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    #result-wrapper .verdant-list-grid {
        grid-template-columns: 200px 1fr;
    }
    #result-wrapper .verdant-list-buy {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid var(--v-surface-variant);
    }
    #result-wrapper .verdant-list-buy .form-basket {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        gap: .85rem 1.25rem;
    }
    #result-wrapper .verdant-list-buy .verdant-list-variations { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    #result-wrapper .verdant-list-grid { grid-template-columns: 1fr; }
    #result-wrapper .verdant-list-media { min-height: 240px; height: 240px; }
    #result-wrapper .verdant-list-buy .form-basket { grid-template-columns: 1fr; }
}

/* ===================================================================== */
/*  TOP BAR — center the free-shipping note                              */
/*  The note lives in a flex-row-reverse container (links pushed right);  */
/*  absolutely center it across the bar so it sits in the middle.         */
/* ===================================================================== */
@media (min-width: 992px) {
    #header-top-bar .container-fluid { position: relative; }
    #header-top-bar .topbar-note {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        white-space: nowrap;
    }
}

/* ===================================================================== */
/*  PRODUCT LIST — left filter sidebar (Verdant modernization)           */
/*  Each filter group -> rounded card; categories -> dark green;          */
/*  price slider (noUiSlider) restyled; count badges -> green pills.      */
/* ===================================================================== */

/* every filter group becomes a rounded card */
.box.box-categories,
.box.box-filter-availability,
.box.box-filter-price,
.box.box-filter-characteristics {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: 1rem 1.15rem .9rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 20px -14px rgba(27, 48, 34, .12);
}
/* the cards replace the old divider lines */
.box-filter-hr { display: none !important; }

/* group titles -> serif, dark green */
.box-categories .box-normal-link,
.box-filter-availability .btn-filter-box,
.box-filter-price .btn-filter-box,
.box-filter-characteristics .btn-filter-box,
.productlist-filter-headline {
    font-family: var(--v-font-head) !important;
    color: var(--v-primary) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    padding: 0 !important;
    text-align: left;
    letter-spacing: -.01em;
}
.box-filter-availability .btn-filter-box,
.box-filter-price .btn-filter-box,
.box-filter-characteristics .btn-filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* chevron caret in dark green */
.box .btn-filter-box.dropdown-toggle::after,
.box-categories .box-normal-link.dropdown-toggle::after { color: var(--v-on-surface-variant); }

/* ---- categories: dark green links ---- */
.box-categories .nav-panel .nav-link,
.box-categories .nav-panel .nav-link a,
.box-categories .nav-panel a {
    color: var(--v-primary) !important;
    font-weight: 500;
}
.box-categories .nav-panel .nav-link { padding: .35rem 0; }
.box-categories .nav-panel a:hover { color: var(--v-secondary) !important; }
.box-categories .nav-panel .nav-link.dropdown-toggle::after { color: var(--v-on-surface-variant); }

/* ---- availability / characteristics filter items ---- */
.box-link-wrapper i.snippets-filter-item-icon-right { color: var(--v-outline-variant) !important; }
.filter-item.active .snippets-filter-item-icon-right,
.box-link-wrapper i.fa-check-square,
.box-link-wrapper i.fa-check { color: var(--v-secondary) !important; }
.box-filter-availability .filter-item,
.box-filter-characteristics .filter-item { color: var(--v-on-surface) !important; }
.box-filter-availability .filter-item:hover,
.box-filter-characteristics .filter-item:hover { color: var(--v-primary) !important; }
.filter-item.active { color: var(--v-primary) !important; font-weight: 600; }

/* count badges -> green pills */
.box-link-wrapper .badge {
    background: var(--v-primary-fixed) !important;
    color: var(--v-on-primary-fixed) !important;
    border-radius: 9999px !important;
    font-weight: 600;
    padding: .25em .6em;
    border: 0;
}

/* "Alle anzeigen" / show-more -> green */
.box-filter-characteristics a.btn-link,
.box-filter-characteristics .filter-show-all,
.box-filter-characteristics .characteristic-show-all { color: var(--v-secondary) !important; }

/* ---- price slider (noUiSlider) ---- */
.box-filter-price .noUi-target {
    background: var(--v-surface-high);
    border: 0;
    box-shadow: none;
    height: 6px;
    border-radius: 9999px;
    margin: .5rem 0 0;
}
.box-filter-price .noUi-horizontal { height: 6px; }
.box-filter-price .noUi-connect { background: var(--v-primary); }
.box-filter-price .noUi-handle {
    width: 18px;
    height: 18px;
    right: -9px;
    top: -6px;
    border-radius: 50%;
    background: var(--v-primary);
    border: 0;
    box-shadow: 0 2px 6px rgba(27, 48, 34, .28);
    cursor: pointer;
}
.box-filter-price .noUi-handle::before,
.box-filter-price .noUi-handle::after { display: none; }
.box-filter-price .noUi-handle:focus { outline: none; box-shadow: 0 0 0 4px rgba(74, 101, 79, .2); }

/* price inputs + EUR addon -> rounded */
.box-filter-price .price-range-input {
    border-radius: var(--v-radius);
    border-color: var(--v-outline-variant);
}
.box-filter-price .price-range-input:focus { border-color: var(--v-secondary); box-shadow: none; }
.box-filter-price .input-group-text {
    background: var(--v-surface);
    border-color: var(--v-outline-variant);
    color: var(--v-on-surface-variant);
    border-radius: var(--v-radius);
}

/* ===================================================================== */
/*  HOME — Verdant "Bento Hero" landing (page/index.tpl)                  */
/* ===================================================================== */
.verdant-home {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem var(--vh-pad, clamp(20px, 5vw, 64px)) 0;
}

/* ---------- hero (v2 grid is defined further below) ---------- */

.vh-cell {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 10px 30px -10px rgba(27, 48, 34, .10);
    text-decoration: none;
    display: block;
}
.vh-cell .vh-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.vh-cell:hover .vh-img { transform: scale(1.05); }
.vh-overlay { position: absolute; inset: 0; }
.vh-overlay-light  { background: linear-gradient(to right, rgba(246,243,242,.82), rgba(246,243,242,.25) 55%, transparent); }
.vh-overlay-bottom { background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%); }

/* main hero cell */
.vh-cell-main { min-height: 460px; }
.vh-main-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 4rem);
    max-width: 30rem;
}
.vh-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(2.5rem, 5.5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.vh-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--v-on-surface-variant);
    margin: 0 0 1.5rem;
}
.vh-btn {
    display: inline-block;
    width: fit-content;
    padding: .85rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}
.vh-btn-primary { background: var(--v-primary); color: var(--v-on-primary); }
.vh-cell-main:hover .vh-btn-primary { background: var(--v-secondary); }
.vh-btn-light { background: var(--v-bg); color: var(--v-primary); box-shadow: 0 2px 8px rgba(27,48,34,.10); }
.vh-btn-light:hover { background: var(--v-primary); color: var(--v-on-primary); }

/* right column */
.vh-col { display: flex; flex-direction: column; gap: 1.5rem; }
.vh-cell-sec { flex: 1; min-height: 220px; }
.vh-sec-link {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.25rem;
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.vh-cell-sec:hover .vh-sec-link { text-decoration: underline; }

.vh-cell-editorial {
    flex: 1;
    min-height: 200px;
    background: var(--v-surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    box-shadow: none;
}
.vh-eyebrow {
    color: var(--v-secondary);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .7rem;
    font-weight: 600;
    margin-bottom: .5rem;
}
.vh-editorial-text {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-size: 1.3rem;
    line-height: 1.25;
    margin: 0 0 .85rem;
}
.vh-text-link { color: var(--v-primary); font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: .35rem; }
.vh-text-link:hover { color: var(--v-secondary); }
.vh-text-link i, .vh-sec-link i { font-size: .75rem; }

/* bottom row */
.vh-cell-easy { min-height: 260px; background: var(--v-surface); }
.vh-cell-easy::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--vh-easy-img);
    background-size: cover;
    background-position: center;
    transition: transform .7s ease;
}
.vh-cell-easy:hover::before { transform: scale(1.05); }
.vh-easy-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: linear-gradient(to top, rgba(6,27,14,.65), transparent 65%);
    text-decoration: none;
}
.vh-easy-title { font-family: var(--v-font-head); color: #fff; font-size: 1.4rem; margin: 0 0 .25rem; }
.vh-easy-sub { color: rgba(255,255,255,.85); margin: 0 0 .65rem; font-size: .9rem; }
.vh-underline-link { color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); width: fit-content; font-weight: 600; font-size: .85rem; padding-bottom: 2px; }
.vh-cell-easy:hover .vh-underline-link { border-color: #fff; }

.vh-cell-gift {
    min-height: 260px;
    background: rgba(201, 231, 204, .35);
    display: flex;
    align-items: center;
    padding: clamp(1.5rem, 3vw, 3rem);
}
.vh-gift-inner { position: relative; z-index: 1; max-width: 28rem; }
.vh-gift-title { font-family: var(--v-font-head); color: var(--v-primary); font-size: 1.5rem; margin: 0 0 .4rem; }
.vh-gift-sub { color: var(--v-on-surface-variant); margin: 0 0 1.1rem; }
.vh-gift-leaf {
    position: absolute;
    right: 1.5rem;
    bottom: 1rem;
    font-size: 7rem;
    color: var(--v-primary);
    opacity: .12;
}

/* ---------- beloved botanicals ---------- */
.verdant-beloved { padding: clamp(3rem, 6vw, 6rem) 0; }
.verdant-beloved-inner { max-width: 1280px; margin: 0 auto; }
.vb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.vb-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: -.01em;
    margin: 0 0 .25rem;
}
.vb-sub { color: var(--v-on-surface-variant); margin: 0; }
.vb-all { color: var(--v-secondary); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.vb-all:hover { color: var(--v-primary); }

.verdant-beloved-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 380px;
    gap: 1.5rem;
}
.vb-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--v-radius-lg);
    box-shadow: 0 10px 30px -12px rgba(27, 48, 34, .12);
    text-decoration: none;
    display: block;
}
.vb-card-wide { grid-column: span 2; }
.vb-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vb-card:hover .vb-card-img { transform: scale(1.05); }
.vb-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(27,48,34,.78), transparent 55%);
}
.vb-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.25rem;
}
.vb-card-name { font-family: var(--v-font-head); color: #fff; font-size: 1.25rem; margin: 0 0 .15rem; }
.vb-card-price { color: rgba(255,255,255,.9); margin: 0; font-weight: 500; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
    .vh-top, .vh-bottom { grid-template-columns: 1fr; }
    .verdant-beloved-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; }
    .vb-card-wide { grid-column: span 1; }
    .vh-overlay-light { background: linear-gradient(to top, rgba(246,243,242,.9), rgba(246,243,242,.4) 60%, transparent); }
}

/* ===================================================================== */
/*  HOME — carousels, SEO text, FAQ                                      */
/* ===================================================================== */

/* product carousels (Bestseller / Neu im Sortiment) */
.verdant-home .verdant-slider-section { padding: clamp(2rem, 4vw, 3.5rem) 0 0; }
.verdant-home .verdant-slider-section .hr-sect.h2 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    letter-spacing: -.01em;
    border: 0;
    margin-bottom: 1.5rem;
}
.verdant-home .verdant-slider-section .hr-sect.h2 a { color: var(--v-primary); }
.verdant-home .verdant-slider-section .hr-sect.h2 a:hover { color: var(--v-secondary); }

/* ---------- SEO text ---------- */
.verdant-seo { padding: clamp(3rem, 6vw, 5rem) 0 1rem; }
.verdant-seo-inner { max-width: 880px; margin: 0 auto; }
.verdant-seo-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    letter-spacing: -.01em;
    margin: 0 0 1.25rem;
}
.verdant-seo-inner p {
    color: var(--v-on-surface-variant);
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0 0 1.1rem;
}
.verdant-seo-inner strong { color: var(--v-primary); }
.verdant-seo-inner em { color: var(--v-secondary); font-style: italic; }

/* ---------- FAQ ---------- */
.verdant-faq { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.verdant-faq-inner { max-width: 880px; margin: 0 auto; }
.verdant-faq-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    letter-spacing: -.01em;
    margin: 0 0 1.75rem;
    text-align: center;
}
.verdant-faq-list { display: flex; flex-direction: column; gap: .85rem; }
.verdant-faq-item {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    box-shadow: 0 6px 20px -14px rgba(27, 48, 34, .12);
}
.verdant-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 1.15rem 1.4rem;
    cursor: pointer;
    font-family: var(--v-font-head);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--v-primary);
}
.verdant-faq-q i {
    flex: 0 0 auto;
    font-size: .85rem;
    color: var(--v-secondary);
    transition: transform .3s ease;
}
.verdant-faq-q[aria-expanded="true"] i { transform: rotate(180deg); }
.verdant-faq-a {
    padding: 0 1.4rem 1.25rem;
    color: var(--v-on-surface-variant);
    line-height: 1.7;
}

/* ===================================================================== */
/*  HOME — modern shelf component (text panel + product carousel)        */
/* ===================================================================== */
.verdant-shelf { padding: clamp(2rem, 4vw, 3.25rem) 0; }
.verdant-shelf-inner {
    display: grid;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.verdant-shelf-reverse .verdant-shelf-inner {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
}

/* the text panel card */
.verdant-shelf-panel {
    border-radius: var(--v-radius-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.vsp-dark { background: var(--v-primary-container); color: #fff; }
.vsp-sage { background: var(--v-secondary-container); color: var(--v-primary); }
.vsp-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    font-weight: 600;
    opacity: .85;
    margin-bottom: .6rem;
}
.vsp-title {
    font-family: var(--v-font-head);
    font-weight: 600;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0 0 .85rem;
    color: inherit;
}
.vsp-text { line-height: 1.65; opacity: .9; margin: 0 0 1.5rem; font-size: .98rem; }
.vsp-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    padding: .75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: .85rem;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.vsp-btn i { font-size: .75rem; transition: transform .25s ease; }
.vsp-btn:hover i { transform: translateX(3px); }
.vsp-btn-light { background: #fff; color: var(--v-primary); }
.vsp-btn-light:hover { background: var(--v-primary-fixed); color: var(--v-primary); }
.vsp-btn-dark { background: var(--v-primary); color: #fff; }
.vsp-btn-dark:hover { background: var(--v-primary-container); color: #fff; }

/* carousel area: min-width:0 lets slick measure correctly inside the grid */
.verdant-shelf-carousel { min-width: 0; }
.verdant-shelf-carousel .slick-slider-other { margin: 0; }

/* ---- product tiles -> white rounded cards, price on one row ---- */
.verdant-shelf-carousel .product-wrapper-product {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: .65rem .65rem 1rem;
    margin: .25rem .4rem;
    box-shadow: 0 6px 20px -14px rgba(27, 48, 34, .12);
    text-align: left !important;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.verdant-shelf-carousel .product-wrapper-product:hover {
    border-color: rgba(6, 27, 14, .18);
    box-shadow: 0 14px 32px -18px rgba(27, 48, 34, .2);
    transform: translateY(-3px);
}
.verdant-shelf-carousel .product-wrapper-product .productbox-image,
.verdant-shelf-carousel .product-wrapper-product .item-slider {
    border-radius: var(--v-radius);
    overflow: hidden;
    background: var(--v-surface);
}
/* product name */
.verdant-shelf-carousel .item-slider-desc {
    margin-top: .6rem;
    text-align: left;
}
.verdant-shelf-carousel .item-slider-desc,
.verdant-shelf-carousel .item-slider-desc a {
    color: var(--v-primary) !important;
    font-weight: 500;
    text-decoration: none !important;
    font-size: .9rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.verdant-shelf-carousel .item-slider-desc a:hover { color: var(--v-secondary) !important; }
/* price -> one row, serif accent */
.verdant-shelf-carousel .item-slider-price {
    margin-top: .35rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.verdant-shelf-carousel .item-slider-price .price {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}
.verdant-shelf-carousel .item-slider-price .second-range-price,
.verdant-shelf-carousel .item-slider-price .first-range-price { white-space: nowrap; }

/* arrows in Verdant green */
.verdant-shelf-carousel .slick-prev:before,
.verdant-shelf-carousel .slick-next:before { color: var(--v-primary); }

@media (max-width: 991px) {
    .verdant-shelf-inner,
    .verdant-shelf-reverse .verdant-shelf-inner { grid-template-columns: 1fr; }
    /* keep panel above its carousel even in the reversed block */
    .verdant-shelf-reverse .verdant-shelf-carousel { order: 2; }
    .verdant-shelf-reverse .verdant-shelf-panel { order: 1; }
}

/* ---- FAQ: kill NOVA's extra dropdown caret, keep our single chevron ---- */
.verdant-faq-q.no-caret { display: flex !important; }
.verdant-faq-q::after,
.verdant-faq-q::before { display: none !important; content: none !important; }

/* ---- bigger, fuller shelf product cards (4-up) ---- */
.verdant-shelf-carousel .product-wrapper-product {
    padding: .9rem .9rem 1.1rem;
    margin: .3rem .55rem;
}
.verdant-shelf-carousel .item-slider-desc,
.verdant-shelf-carousel .item-slider-desc a { font-size: 1rem; }
.verdant-shelf-carousel .item-slider-price .price { font-size: 1.1rem; }
/* let the tiles stand tall like the side panels */
.verdant-shelf-carousel .slick-track { display: flex; align-items: stretch; }
.verdant-shelf-carousel .slick-slide { height: auto; }
.verdant-shelf-carousel .slick-slide > div,
.verdant-shelf-carousel .product-wrapper-product { height: 100%; }
.verdant-shelf-carousel .product-wrapper-product {
    display: flex;
    flex-direction: column;
}

/* ===================================================================== */
/*  HOME hero — two-colour design language (#1b3022 + #c9e7cc)           */
/* ===================================================================== */

/* main cell: sage wash over the image, deep-green CTA */
.verdant-home .vh-overlay-light {
    background: linear-gradient(to right,
        rgba(201, 231, 204, .94), rgba(201, 231, 204, .5) 52%, rgba(201, 231, 204, 0));
}
.verdant-home .vh-title { color: var(--v-primary-container); text-shadow: none; }
.verdant-home .vh-cell-main .vh-lead { color: #2c4031; }
.verdant-home .vh-btn-primary { background: var(--v-primary-container); color: #fff; }
.verdant-home .vh-cell-main:hover .vh-btn-primary { background: var(--v-primary); }

/* secondary image cell: deep-green gradient at the bottom */
.verdant-home .vh-overlay-bottom {
    background: linear-gradient(to top, rgba(27, 48, 34, .72), transparent 60%);
}

/* editorial cell: SOLID deep green (#1b3022) with light + sage text */
.verdant-home .vh-cell-editorial { background: var(--v-primary-container); }
.verdant-home .vh-cell-editorial .vh-eyebrow { color: var(--v-secondary-container); }
.verdant-home .vh-cell-editorial .vh-editorial-text { color: #fff; }
.verdant-home .vh-cell-editorial .vh-text-link { color: var(--v-secondary-container); }
.verdant-home .vh-cell-editorial .vh-text-link:hover { color: #fff; }

/* easy-care cell: deep-green wash instead of black for tonal harmony */
.verdant-home .vh-easy-inner {
    background: linear-gradient(to top, rgba(27, 48, 34, .78), rgba(27, 48, 34, .05) 65%);
}

/* gift cell: SOLID sage (#c9e7cc) with deep-green text + deep-green button */
.verdant-home .vh-cell-gift { background: var(--v-secondary-container); }
.verdant-home .vh-cell-gift .vh-gift-title { color: var(--v-primary-container); }
.verdant-home .vh-cell-gift .vh-gift-sub { color: #33493b; }
.verdant-home .vh-cell-gift .vh-btn-light { background: var(--v-primary-container); color: #fff; }
.verdant-home .vh-cell-gift .vh-btn-light:hover { background: var(--v-primary); color: #fff; }
.verdant-home .vh-cell-gift .vh-gift-leaf { color: var(--v-primary-container); opacity: .18; }

/* ===================================================================== */
/*  HEADER tweaks — padding, centered categories, bigger logo            */
/*  + remove the big gap above the homepage content                      */
/* ===================================================================== */

/* 1) more breathing room at the top of the navbar */
.navbar.navbar-expand-lg {
    padding-top: 1.4rem !important;
    padding-bottom: .7rem !important;
}

/* (logo-size override removed — logo uses NOVA default size) */

/* 3) center the category nav between the logo and the icons */
@media (min-width: 992px) {
    .navbar.navbar-expand-lg { flex-wrap: nowrap !important; }
    .navbar.navbar-expand-lg > .navbar-collapse,
    .navbar.navbar-expand-lg .navbar-collapse.nav-scrollbar {
        flex: 1 1 auto !important;
        justify-content: center !important;
    }
    .navbar.navbar-expand-lg .navbar-collapse .navbar-nav {
        flex-direction: row !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* 4) homepage: kill the extensive gap between navbar and the hero */
#content-wrapper:has(.verdant-home) {
    padding-top: 0 !important;
}
#content-wrapper:has(.verdant-home) .breadcrumb-container { display: none !important; }
.verdant-home { padding-top: .35rem !important; }

/* ===================================================================== */
/*  HEADER — align everything on one row + larger logo (round 2)         */
/* ===================================================================== */
.navbar.navbar-expand-lg,
.navbar.navbar-expand-lg .navbar-collapse,
.navbar.navbar-expand-lg .navbar-nav,
.navbar.navbar-expand-lg .nav-icons {
    align-items: center !important;
}
/* keep the row vertically centered regardless of the taller logo */
.navbar.navbar-expand-lg .navbar-nav .nav-item,
.navbar.navbar-expand-lg .nav-icons > li,
.navbar.navbar-expand-lg .nav-icons > .nav-item {
    display: flex;
    align-items: center;
}

/* keep the brand vertically centered (no size override) */
.navbar-brand { display: inline-flex; align-items: center; }

/* ===================================================================== */
/*  Match widths to the product-details container (.container = 1250px)   */
/*  Homepage content + navbar + top bar all align to the same 1250px box  */
/* ===================================================================== */
.verdant-home {
    max-width: 1250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}
/* navbar + top bar: narrow the wide xl container to the content width */
.fixed-navbar .container-fluid-xl,
#header-top-bar .container-fluid-xl {
    max-width: 1250px !important;
}

/* ===================================================================== */
/*  NAV — category hover pill + compact rounded sub-category dropdown     */
/*  Replaces the full-width megamenu with a small bordered rounded box.   */
/* ===================================================================== */
@media (min-width: 992px) {
    /* anchor the dropdown under its item */
    .navbar-nav > .nav-item.dropdown { position: relative !important; }

    /* category links: rounded white-on-hover pill, NO underline */
    .navbar-nav > .nav-item > .nav-link {
        border-radius: var(--v-radius);
        padding: .5rem 1rem !important;
        border-bottom: 0 !important;
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .navbar-nav > .nav-item:hover > .nav-link,
    .navbar-nav > .nav-item.show > .nav-link,
    .navbar-nav > .nav-item > .nav-link:hover,
    .navbar-nav > .nav-item > .nav-link:focus,
    .navbar-nav > .nav-item.active > .nav-link {
        background: #fff !important;
        color: var(--v-primary) !important;
        box-shadow: 0 4px 14px rgba(27, 48, 34, .10);
        border-bottom: 0 !important;
    }
    .navbar-nav .nav-item.active > .nav-link { border-bottom: 0 !important; }

    /* compact rounded dropdown box (kill the full-width megamenu) */
    .navbar-nav > .nav-item.dropdown-full > .dropdown-menu,
    .navbar-nav > .nav-item.dropdown > .dropdown-menu {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        width: auto !important;
        min-width: 250px !important;
        max-width: 340px !important;
        margin-top: .5rem !important;
        padding: .5rem !important;
        background: #fff !important;
        border: 1px solid var(--v-surface-variant) !important;
        border-radius: var(--v-radius-lg) !important;
        box-shadow: 0 16px 44px -14px rgba(27, 48, 34, .22) !important;
        max-height: 72vh;
        overflow-y: auto;
    }
    /* neutralize the inner full-width container + multi-column grid */
    .navbar-nav .dropdown-menu .dropdown-body { padding: 0 !important; }
    .navbar-nav .dropdown-menu .subcategory-wrapper {
        max-width: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .navbar-nav .dropdown-menu .subcategory-wrapper > .row,
    .navbar-nav .dropdown-menu .row.nav,
    .navbar-nav .dropdown-menu .row {
        display: block !important;
        margin: 0 !important;
    }
    .navbar-nav .dropdown-menu .row > [class*="col"] {
        max-width: 100% !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* hide the per-column mobile heading inside the desktop dropdown */
    .navbar-nav .dropdown-menu .nav-mobile-heading { display: none !important; }

    /* sub-category items: minimal rounded rows */
    .navbar-nav .dropdown-menu a {
        display: block;
        padding: .5rem .75rem !important;
        border-radius: var(--v-radius);
        color: var(--v-on-surface-variant) !important;
        font-weight: 500;
        white-space: normal;
        line-height: 1.3;
    }
    .navbar-nav .dropdown-menu a:hover,
    .navbar-nav .dropdown-menu a:focus {
        background: var(--v-surface-low) !important;
        color: var(--v-primary) !important;
    }
    /* nested sub-category group labels stay readable */
    .navbar-nav .dropdown-menu .nav-item.dropdown > .nav-link.dropdown-toggle { color: var(--v-primary) !important; font-weight: 600; }
}

/* ===================================================================== */
/*  NAV — dropdown box z-index/overflow, no page overlay, navbar spacing  */
/*  + true vertical alignment of logo / categories / icons               */
/* ===================================================================== */

/* 1) remove the page-dimming overlay behind the megamenu */
.modal-backdrop.zindex-dropdown,
.modal-backdrop.zindex-dropdown.show { display: none !important; opacity: 0 !important; }

@media (min-width: 992px) {
    /* 2) dropdown box on top, no inner scroll/clipping */
    .navbar-nav > .nav-item.dropdown > .dropdown-menu,
    .navbar-nav > .nav-item.dropdown-full > .dropdown-menu {
        z-index: 1085 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 3) no line under the category on hover / active / open */
    .navbar-nav > .nav-item > .nav-link,
    .navbar-nav > .nav-item:hover > .nav-link,
    .navbar-nav > .nav-item.show > .nav-link,
    .navbar-nav > .nav-item.active > .nav-link,
    .navbar-nav > .nav-item > .nav-link.dropdown-toggle {
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
    /* keep just the soft pill shadow on hover/open (no underline) */
    .navbar-nav > .nav-item:hover > .nav-link,
    .navbar-nav > .nav-item.show > .nav-link,
    .navbar-nav > .nav-item > .nav-link:hover {
        box-shadow: 0 4px 14px rgba(27, 48, 34, .10) !important;
    }

    /* 4) vertical alignment: the real flex row is the inner xl container */
    .fixed-navbar .navbar.navbar-expand-lg > .container-fluid-xl {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    .fixed-navbar .navbar.navbar-expand-lg > .container-fluid-xl > * {
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .fixed-navbar .navbar .toggler-logo-wrapper,
    .fixed-navbar .navbar .logo-wrapper,
    .fixed-navbar .navbar .navbar-collapse,
    .fixed-navbar .navbar .nav-icons { align-items: center !important; }
}

/* 5) more space between the top bar and the navbar */
.fixed-navbar .navbar.navbar-expand-lg {
    margin-top: .85rem !important;
    padding-top: 1.1rem !important;
}

/* ===================================================================== */
/*  NAV — kill the nav-scrollbar (black line + clipping), bigger logo     */
/* ===================================================================== */
@media (min-width: 992px) {
    /* the desktop category nav fits — disable the scroll wrapper entirely
       so there's no horizontal scrollbar line and the dropdown isn't clipped */
    .navbar .navbar-collapse.nav-scrollbar,
    .navbar .nav-scrollbar { overflow: visible !important; }
    .navbar .nav-scrollbar-inner {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .navbar .nav-scrollbar-arrow { display: none !important; }

    /* belt-and-suspenders: no underline / border / shadow line under a category */
    .navbar-nav .nav-item .nav-link,
    .navbar-nav .nav-item.show .nav-link,
    .navbar-nav .nav-item.active .nav-link,
    .navbar-nav .nav-link.dropdown-toggle,
    .navbar-nav .nav-link.dropdown-toggle[aria-expanded="true"] {
        border-bottom: 0 !important;
        text-decoration: none !important;
    }
    .navbar-nav .nav-item:hover .nav-link,
    .navbar-nav .nav-item.show .nav-link {
        box-shadow: 0 4px 14px rgba(27, 48, 34, .10) !important;
    }
}

/* (logo-size override removed) */

/* ===================================================================== */
/*  NAV — final fixes: center nav, remove ::before line, white dropdown   */
/* ===================================================================== */
@media (min-width: 992px) {
    /* vertically center the category nav with the logo + icons */
    .navbar .nav-scrollbar-inner { align-self: center !important; }

    /* the "line" is a ::before on each category item — remove it */
    .navbar-nav .nav-item::before,
    .navbar-nav .nav-scrollbar-item::before,
    .navbar-nav .nav-link::before,
    .navbar-nav .nav-link::after.line,
    .navbar-nav .nav-item .nav-link::before { content: none !important; display: none !important; }
}

/* dropdown body / sub-category panel -> white (was var(--v-bg)) */
.navbar-nav .dropdown-menu .dropdown-body,
.navbar-nav .dropdown-menu .megamenu-body,
.navbar-nav .dropdown-menu .subcategory-wrapper,
.navbar-nav .dropdown-menu { background-color: #fff !important; }

/* fix: clean valid rule for removing the ::before line on category items */
@media (min-width: 992px) {
    .navbar-nav .nav-item::before,
    .navbar-nav .nav-scrollbar-item::before,
    .navbar-nav .nav-link::before { content: none !important; display: none !important; }
}

/* nav: center the mobile-body wrapper too so the whole row aligns */
@media (min-width: 992px) {
    .navbar .nav-mobile-body { align-self: center !important; }
}

/* ===================================================================== */
/*  PRODUCT DETAILS — variation swatches: green selected, secondary price */
/* ===================================================================== */
#result-wrapper .variation.swatches.swatches-text {
    text-align: center;
    transition: border-color .2s ease, background-color .2s ease,
                box-shadow .2s ease, transform .2s ease;
    cursor: pointer;
}
/* hover (not selected) */
#result-wrapper .variation.swatches.swatches-text:not(.active):hover {
    border-color: var(--v-primary) !important;
    background: var(--v-surface-low) !important;
    box-shadow: 0 8px 20px -10px rgba(27, 48, 34, .28);
    transform: translateY(-2px);
}
/* price badge -> secondary colour, centered */
#result-wrapper .variation.swatches.swatches-text .variation-badge {
    color: var(--v-secondary) !important;
    align-self: center !important;
    text-align: center !important;
    width: auto !important;
    margin: .35rem auto 0 !important;
}

/* SELECTED -> solid primary green, all text white, sage price */
#result-wrapper .variation.swatches.swatches-text.active {
    background: var(--v-primary) !important;
    border-color: var(--v-primary) !important;
    box-shadow: 0 10px 24px -10px rgba(6, 27, 14, .45);
}
#result-wrapper .variation.swatches.swatches-text.active .swatch-main,
#result-wrapper .variation.swatches.swatches-text.active .swatch-sub,
#result-wrapper .variation.swatches.swatches-text.active .label-variation {
    color: #fff !important;
}
#result-wrapper .variation.swatches.swatches-text.active .variation-badge {
    color: var(--v-secondary-container) !important;   /* sage = readable secondary on green */
}

/* product details — price moved above the variation selection */
#result-wrapper .verdant-detail-price { margin-bottom: 1.25rem; }
#result-wrapper .verdant-detail-price .price-note { margin-bottom: 0; }

/* product details — bigger price, label ("ab" / "Preis wie konfiguriert") under it */
#result-wrapper .verdant-detail-price .price_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#result-wrapper .verdant-detail-price .price.h1 {
    order: 1;
    font-size: clamp(2.6rem, 5vw, 3.4rem) !important;
    line-height: 1.05;
    margin: 0;
}
#result-wrapper .verdant-detail-price .price_label {
    order: 2;
    margin: .35rem 0 0 !important;
    font-size: .95rem;
    color: var(--v-secondary) !important;
    font-weight: 600;
}
#result-wrapper .verdant-detail-price .price-note { order: 3; margin-top: .35rem; }

/* price section: label on TOP, more margin + padding */
#result-wrapper .verdant-detail-price {
    margin: .5rem 0 2rem !important;
    padding: 1.25rem 1.5rem;
    background: var(--v-surface-low);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
}
#result-wrapper .verdant-detail-price .price_label {
    order: 0 !important;
    margin: 0 0 .4rem !important;
}
#result-wrapper .verdant-detail-price .price.h1 { order: 1 !important; }
#result-wrapper .verdant-detail-price .price-note { order: 2 !important; margin-top: .5rem; }

/* ===================================================================== */
/*  HOME hero v2 — tall image left + 3 stacked cells right                */
/*  Images get a primary-colour gradient (bottom -> transparent top)      */
/* ===================================================================== */
.verdant-hero { padding: .25rem 0 2rem; }
.verdant-hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    min-height: 660px;
}
.verdant-hero-grid .vh-cell { position: relative; overflow: hidden; border-radius: 1rem; }
.vh-main { min-height: 420px; }
.vh-right { display: flex; flex-direction: column; gap: 1.25rem; }
.vh-right > .vh-cell { flex: 1; min-height: 0; }

/* images cover + zoom on hover */
.verdant-hero .vh-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.verdant-hero .vh-cell:hover .vh-img { transform: scale(1.05); }

/* PRIMARY gradient: opaque at the bottom, transparent at the top */
.verdant-hero .vh-grad {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top,
        rgba(6, 27, 14, .9) 0%,
        rgba(6, 27, 14, .5) 32%,
        rgba(6, 27, 14, .12) 64%,
        rgba(6, 27, 14, 0) 100%);
}
.verdant-hero .vh-grad-soft {
    background: linear-gradient(to top,
        rgba(6, 27, 14, .72) 0%,
        rgba(6, 27, 14, .25) 45%,
        rgba(6, 27, 14, 0) 80%);
}

/* ---- main cell copy (bottom-left, white) ---- */
.vh-main .vh-main-content {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    gap: .85rem;
    padding: clamp(1.75rem, 4vw, 3rem);
}
.vh-main .vh-badge {
    background: var(--v-secondary-container);
    color: var(--v-primary);
    padding: .35rem .9rem;
    border-radius: var(--v-radius);
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
}
.verdant-home .vh-main .vh-title {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    line-height: 1.0;
    margin: 0;
}
.vh-main .vh-lead {
    color: rgba(255, 255, 255, .92);
    max-width: 30rem; margin: 0; font-size: 1.05rem; line-height: 1.55;
}
.vh-main .vh-btn-onimg {
    background: var(--v-primary-container);
    color: #fff;
    padding: .8rem 1.85rem;
    border-radius: 9999px;
    font-weight: 600; font-size: .9rem;
    transition: background .25s ease;
}
.vh-main:hover .vh-btn-onimg { background: var(--v-primary); }

/* ---- best sellers band ---- */
.vh-best .vh-band {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    font-family: var(--v-font-head);
    font-size: 1.5rem;
    padding: .4rem 1.4rem;
    background: rgba(6, 27, 14, .5);
    border-radius: var(--v-radius);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* ---- expert care sage card ---- */
.vh-care {
    background: var(--v-secondary-container);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.vh-care-icon { font-size: 1.75rem; color: var(--v-primary); margin-bottom: .85rem; }
.vh-care-title { font-family: var(--v-font-head); color: var(--v-primary); font-size: 1.6rem; margin: 0 0 .4rem; }
.vh-care-text { color: #33493b; margin: 0; font-size: .95rem; max-width: 18rem; line-height: 1.5; }

/* ---- our roots ---- */
.vh-roots .vh-roots-content {
    position: absolute; left: 0; bottom: 0; z-index: 2;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.vh-roots-title { font-family: var(--v-font-head); color: #fff; font-size: 1.6rem; margin: 0 0 .25rem; }
.vh-roots-link { color: #fff; font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; }
.vh-roots-link i { font-size: .75rem; transition: transform .25s ease; }
.vh-roots:hover .vh-roots-link i { transform: translateX(3px); }

@media (max-width: 767px) {
    .verdant-hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .vh-main { min-height: 360px; }
    .vh-right > .vh-cell { min-height: 220px; }
}

/* fix: hero must span the full verdant-home width like the other sections */
.verdant-home .verdant-hero,
.verdant-home .verdant-hero-grid {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.verdant-home .verdant-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===================================================================== */
/*  PRODUCT DETAILS — cross-selling component (under the Produktdetails)   */
/* ===================================================================== */
#result-wrapper .verdant-xsell,
.verdant-xsell { margin: 2.5rem 0 1rem; }
.verdant-xsell-head { text-align: center; margin-bottom: 2rem; }
.verdant-xsell-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .68rem;
    font-weight: 600;
    color: var(--v-secondary);
    margin-bottom: .5rem;
}
.verdant-xsell-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    letter-spacing: -.01em;
    margin: 0 0 .35rem;
}
.verdant-xsell-sub { color: var(--v-on-surface-variant); margin: 0; }

.verdant-xsell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.25rem;
}
.vx-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 24px -16px rgba(27, 48, 34, .12);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.vx-card:hover {
    border-color: rgba(6, 27, 14, .18);
    box-shadow: 0 16px 34px -18px rgba(27, 48, 34, .22);
    transform: translateY(-4px);
}
.vx-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--v-surface);
}
.vx-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.vx-card:hover .vx-card-media img { transform: scale(1.06); }
.vx-card-body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem 1.1rem;
    flex: 1;
}
.vx-card-name {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-size: 1.05rem;
    line-height: 1.2;
    margin: 0;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vx-card-price {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1.05rem;
}
.vx-card-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--v-secondary);
    font-weight: 600;
    font-size: .82rem;
}
.vx-card-cta i { font-size: .72rem; transition: transform .25s ease; }
.vx-card:hover .vx-card-cta i { transform: translateX(3px); }

@media (max-width: 575px) {
    .verdant-xsell-grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
    .vx-card-name, .vx-card-price { font-size: .92rem; }
}

/* cross-sell relocated INTO the bento right column, under Produktdetails */
#result-wrapper .verdant-bento-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}
/* compact "side" variant of the cross-sell component */
#result-wrapper .verdant-xsell-side { margin: 0; }
#result-wrapper .verdant-xsell-side .verdant-xsell-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 500;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
}
#result-wrapper .verdant-xsell-side .verdant-xsell-title i { color: var(--v-secondary); font-size: 1.05rem; }
#result-wrapper .verdant-xsell-side .verdant-xsell-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* cross-sell side: small horizontal mini product card */
#result-wrapper .verdant-xsell-side { margin-top: 2rem; }
#result-wrapper .verdant-xsell-side .verdant-xsell-grid { grid-template-columns: 1fr; gap: .65rem; }
#result-wrapper .verdant-xsell-side .vx-card {
    flex-direction: row;
    align-items: center;
    gap: .85rem;
    padding: .55rem;
    border-radius: var(--v-radius);
}
#result-wrapper .verdant-xsell-side .vx-card:hover { transform: none; }
#result-wrapper .verdant-xsell-side .vx-card-media {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    aspect-ratio: auto;
    border-radius: var(--v-radius);
}
#result-wrapper .verdant-xsell-side .vx-card-body {
    padding: 0;
    gap: .15rem;
}
#result-wrapper .verdant-xsell-side .vx-card-name {
    font-size: .85rem;
    -webkit-line-clamp: 2;
    margin: 0;
}
#result-wrapper .verdant-xsell-side .vx-card-price { font-size: .9rem; }
#result-wrapper .verdant-xsell-side .vx-card-cta { font-size: .72rem; margin-top: .1rem; }

/* cross-sell side: small vertical tiles like "Ähnliche Artikel", grid when >1 */
#result-wrapper .verdant-xsell-side .verdant-xsell-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 1rem !important;
}
#result-wrapper .verdant-xsell-side .vx-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: var(--v-radius-lg) !important;
}
#result-wrapper .verdant-xsell-side .vx-card:hover { transform: translateY(-4px); }
#result-wrapper .verdant-xsell-side .vx-card-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
}
#result-wrapper .verdant-xsell-side .vx-card-body {
    padding: .65rem .75rem .85rem !important;
    gap: .3rem !important;
}
#result-wrapper .verdant-xsell-side .vx-card-name { font-size: .88rem !important; }
#result-wrapper .verdant-xsell-side .vx-card-price { font-size: .92rem !important; }
#result-wrapper .verdant-xsell-side .vx-card-cta { font-size: .74rem !important; }

/* ===================================================================== */
/*  PRODUCT DETAILS — sticky image gallery (desktop)                      */
/*  Gallery follows the scroll until the product row ends (tabs/Merkmale) */
/* ===================================================================== */
@media (min-width: 992px) {
    #result-wrapper .product-gallery {
        position: sticky;
        top: 120px;
        align-self: flex-start;
        z-index: 1;
    }
    /* Fullscreen gallery: sticky parent's z-index:1 traps the fullscreen
       wrapper (z-index:10000) in its stacking context, so the fixed navbar
       paints over it. Drop the stacking context while fullscreen is open. */
    #result-wrapper .product-gallery:has(#image_wrapper.fullscreen) {
        position: static;
        z-index: auto;
    }
}

/* ===================================================================== */
/*  Lenis smooth scrolling — recommended base styles                      */
/* ===================================================================== */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
/* NOTE: deliberately NOT using Lenis' recommended
   `.lenis.lenis-stopped { overflow: hidden; }` — hiding the scrollbar shifts
   the layout (~15px) and overflow:hidden on <html> breaks position:sticky.
   lenis.stop() already blocks wheel/touch; the drawer backdrop swallows the rest. */
.lenis.lenis-stopped { overflow: visible; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* (logo-size overrides removed — logo uses NOVA default size) */
/* keep the logo vertically centered in the navbar row */
@media (min-width: 992px) {
    .fixed-navbar .navbar.navbar-expand-lg > .container-fluid-xl { align-items: center !important; }
    .fixed-navbar .navbar .toggler-logo-wrapper,
    .fixed-navbar .navbar .logo-wrapper,
    .fixed-navbar .navbar .navbar-brand {
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ===================================================================== */
/*  CART DRAWER — full-height side panel, slides right -> left            */
/* ===================================================================== */
#verdant-cart-drawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
#verdant-cart-drawer .vcd-backdrop {
    position: absolute; inset: 0;
    background: rgba(6, 27, 14, .45);
    opacity: 0;
    transition: opacity .35s ease;
}
#verdant-cart-drawer.open { pointer-events: auto; }
#verdant-cart-drawer.open .vcd-backdrop { opacity: 1; }
@supports ((backdrop-filter: blur(3px))) {
    #verdant-cart-drawer.open .vcd-backdrop { backdrop-filter: blur(3px); }
}
#verdant-cart-drawer .vcd-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(430px, 94vw);
    background: var(--v-bg);
    box-shadow: -24px 0 60px rgba(6, 27, 14, .25);
    transform: translateX(105%);
    transition: transform .38s cubic-bezier(.22, .8, .26, .99);
    display: flex;
    flex-direction: column;
}
#verdant-cart-drawer.open .vcd-panel { transform: translateX(0); }
/* NOTE: no overflow:hidden scroll-lock here — overflow:hidden on html/body
   breaks position:sticky (product gallery). Scroll is locked via Lenis.stop()
   + wheel/touch preventDefault on the backdrop (custom.js). */

/* head */
#verdant-cart-drawer .vcd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--v-surface-variant);
}
#verdant-cart-drawer .vcd-title {
    font-family: var(--v-font-head);
    font-size: 1.45rem; font-weight: 600; color: var(--v-primary);
    display: inline-flex; align-items: center; gap: .6rem;
}
#verdant-cart-drawer .vcd-title i { color: var(--v-secondary); font-size: 1.05rem; }
#verdant-cart-drawer .vcd-close {
    border: 0; background: transparent; cursor: pointer;
    font-size: 1.7rem; line-height: 1; color: var(--v-on-surface-variant);
    width: 2.2rem; height: 2.2rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
}
#verdant-cart-drawer .vcd-close:hover { background: var(--v-surface); color: var(--v-primary); }

/* body = injected cart-dropdown content */
#verdant-cart-drawer .vcd-body {
    flex: 1;
    display: flex; flex-direction: column;
    min-height: 0;
    padding: 0;
}
#verdant-cart-drawer .vcd-loading { padding: 2rem; text-align: center; color: var(--v-secondary); }
/* items list scrolls; totals/buttons pinned below */
#verdant-cart-drawer .vcd-body .table-responsive {
    flex: 1 1 auto;
    max-height: none !important;
    overflow-y: auto;
    padding: .75rem 1.35rem;
}
#verdant-cart-drawer .dropdown-cart-items { margin: 0; }
#verdant-cart-drawer .dropdown-cart-items td {
    border: 0;
    border-bottom: 1px solid var(--v-surface-variant);
    padding: .85rem .25rem;
    vertical-align: middle;
}
#verdant-cart-drawer .dropdown-cart-items tr:last-child td { border-bottom: 0; }
#verdant-cart-drawer .dropdown-cart-items img {
    border-radius: var(--v-radius);
    background: var(--v-surface);
}
#verdant-cart-drawer .dropdown-cart-items a { color: var(--v-primary); font-weight: 500; }
#verdant-cart-drawer .dropdown-cart-items a:hover { color: var(--v-secondary); }
#verdant-cart-drawer .dropdown-cart-items td.text-right-util {
    font-family: var(--v-font-head);
    font-weight: 600;
    color: var(--v-primary);
}
/* totals + buttons */
#verdant-cart-drawer .vcd-body .dropdown-body {
    flex: 0 0 auto;
    border-top: 1px solid var(--v-surface-variant);
    background: var(--v-surface-low);
    padding: 1.1rem 1.35rem 1.25rem;
}
#verdant-cart-drawer .dropdown-body ul { margin-bottom: 1rem; }
#verdant-cart-drawer .cart-dropdown-total-item { color: var(--v-on-surface-variant); font-size: .85rem; }
#verdant-cart-drawer .cart-dropdown-total-item-price { float: right; }
#verdant-cart-drawer .dropdown-body .font-weight-bold-util {
    color: var(--v-primary);
    font-size: 1.05rem;
    margin-top: .35rem;
}
#verdant-cart-drawer .dropdown-body .font-weight-bold-util .cart-dropdown-total-item-price {
    font-family: var(--v-font-head);
    font-size: 1.3rem;
    font-weight: 600;
}
/* stack the two buttons full width */
#verdant-cart-drawer .cart-dropdown-buttons { margin: 0; }
#verdant-cart-drawer .cart-dropdown-buttons [class*="col"] {
    flex: 0 0 100%; max-width: 100%;
    padding: 0; margin-bottom: .6rem;
}
#verdant-cart-drawer .cart-dropdown-buttons .btn {
    border-radius: var(--v-radius);
    padding: .8rem 1rem;
    font-weight: 600;
    font-size: .9rem;
}
#verdant-cart-drawer .cart-dropdown-buttons .btn-primary {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
}
#verdant-cart-drawer .cart-dropdown-buttons .btn-primary:hover {
    background: var(--v-secondary); border-color: var(--v-secondary);
}
#verdant-cart-drawer .cart-dropdown-buttons .btn-outline-primary {
    border-color: var(--v-secondary); color: var(--v-secondary);
}
#verdant-cart-drawer .cart-dropdown-buttons .btn-outline-primary:hover {
    background: var(--v-secondary); color: #fff;
}
/* empty state */
#verdant-cart-drawer .cart-dropdown-empty,
#verdant-cart-drawer .vcd-empty {
    display: block;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--v-on-surface-variant);
}

/* ===================================================================== */
/*  STICKY BUY BAR — product details, appears after scrolling past buy    */
/* ===================================================================== */
#verdant-buybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1150;
    transform: translateY(110%);
    transition: transform .35s cubic-bezier(.22, .8, .26, .99);
    pointer-events: none;
}
#verdant-buybar.show { transform: translateY(0); pointer-events: auto; }
#verdant-buybar .vbb-inner {
    max-width: 1250px;
    margin: 0 auto .85rem;
    padding: .65rem .85rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 -6px 40px rgba(6, 27, 14, .18);
}
#verdant-buybar .vbb-img {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: var(--v-radius);
    background: var(--v-surface);
    flex: 0 0 auto;
}
#verdant-buybar .vbb-info {
    display: flex; flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
#verdant-buybar .vbb-name {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#verdant-buybar .vbb-config {
    color: var(--v-on-surface-variant);
    font-size: .78rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#verdant-buybar .vbb-price {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1.15rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
#verdant-buybar .vbb-buy {
    flex: 0 0 auto;
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    border-radius: var(--v-radius);
    font-weight: 600;
    padding: .7rem 1.5rem;
}
#verdant-buybar .vbb-buy:hover { background: var(--v-secondary); border-color: var(--v-secondary); }
#verdant-buybar .vbb-buy-icon { display: none; }
@media (max-width: 575px) {
    #verdant-buybar .vbb-inner { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
    /* show price, shrink CTA to icon-only so price fits */
    #verdant-buybar .vbb-price { display: block; font-size: 1rem; }
    #verdant-buybar .vbb-buy-label { display: none; }
    #verdant-buybar .vbb-buy-icon { display: inline-block; font-size: 1.1rem; }
    #verdant-buybar .vbb-buy {
        padding: .6rem;
        width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* cart drawer — compact item rows (cap the thumbnail size) */
#verdant-cart-drawer .vcd-body .table-responsive { overflow-x: hidden; }
#verdant-cart-drawer .dropdown-cart-items img,
#verdant-cart-drawer .dropdown-cart-items picture img {
    width: 56px !important;
    height: 56px !important;
    max-width: none !important;
    object-fit: cover;
    flex: 0 0 auto;
}
#verdant-cart-drawer .dropdown-cart-items td:first-child { width: 100%; }
#verdant-cart-drawer .dropdown-cart-items .form-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
}
#verdant-cart-drawer .dropdown-cart-items .form-row > [class*="col"] { min-width: 0; }
#verdant-cart-drawer .dropdown-cart-items a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.3;
}

/* product details — qty counter + add-to-cart button: equal height, centered */
#result-wrapper #add-to-cart .basket-form-inline {
    align-items: center;
}
#result-wrapper #add-to-cart .basket-form-inline > [class*="col"] {
    display: flex;
    align-items: center;
}
#result-wrapper #add-to-cart .form-counter.choose_quantity,
#result-wrapper #add-to-cart #quantity-grp {
    height: 52px;
    width: 100%;
    margin: 0;
    align-items: stretch;
    flex-wrap: nowrap;
}
#result-wrapper #add-to-cart .form-counter .form-control,
#result-wrapper #add-to-cart .form-counter .btn,
#result-wrapper #add-to-cart .form-counter .input-group-text {
    height: 100%;
    display: flex;
    align-items: center;
}
#result-wrapper #add-to-cart .btn-primary {
    height: 52px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
}


/* ===================================================================== */
/*  CHECKOUT POLISH v2 — clean stepper, account choice, option cards      */
/* ===================================================================== */

/* ---- 1) stepper: kill NOVA's arrow triangles + underline bars ---- */
#checkout .stepper.checkout-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 0;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    margin: .5rem 0 2.25rem !important;
}
#checkout .stepper .step::before,
#checkout .stepper .step::after,
#checkout .stepper .step .step-content::before,
#checkout .stepper .step .step-content::after {
    display: none !important;
    content: none !important;
}
#checkout .stepper .step {
    flex: 0 1 auto !important;
    max-width: none !important;
    width: auto !important;
    background: transparent !important;
    padding: 0 !important;
}
#checkout .stepper .step a { text-decoration: none; }
#checkout .stepper .step .step-content {
    min-height: 0 !important;
    padding: .5rem .9rem;
    border-radius: 9999px;
    gap: .55rem;
    transition: background .2s ease;
}
#checkout .stepper .step.step-current .step-content {
    background: #fff;
    box-shadow: 0 4px 14px rgba(27, 48, 34, .10);
}
/* connector line between steps */
#checkout .stepper .step:not(:first-child) { position: relative; padding-left: 2.2rem !important; }
#checkout .stepper .step:not(:first-child)::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: .35rem;
    top: 50%;
    width: 1.4rem;
    height: 1px;
    margin: 0 !important;
    border: 0 !important;
    background: var(--v-outline-variant);
}
/* badges + text */
#checkout .stepper .step .badge-pill {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--v-surface-high) !important;
    color: var(--v-on-surface-variant) !important;
    font-size: .78rem;
    padding: 0 !important;
}
#checkout .stepper .step.step-active .badge-pill,
#checkout .stepper .step.step-current .badge-pill {
    background: var(--v-primary) !important;
    color: #fff !important;
}
#checkout .stepper .step .step-text {
    font-size: .85rem;
    color: var(--v-on-surface-variant);
    font-weight: 500;
    white-space: nowrap;
}
#checkout .stepper .step.step-current .step-text { color: var(--v-primary); font-weight: 600; }
#checkout .stepper .step .step-check { color: var(--v-secondary); font-size: .8rem; }
/* ---- mobile stepper: circles + stretched connectors, labels hidden
   (the page <h1> below names the current step, so no cramped text) ---- */
@media (max-width: 767px) {
    #checkout .stepper.checkout-steps {
        justify-content: space-between !important;
        gap: 0;
        padding: 0 .25rem;
        margin: .25rem 0 1.5rem !important;
    }
    #checkout .stepper .step {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto !important;
    }
    #checkout .stepper .step:not(:first-child) {
        flex: 1 1 auto !important;
        padding-left: 0 !important;
    }
    /* connector becomes a flexible line that fills the gap */
    #checkout .stepper .step:not(:first-child)::before {
        content: '' !important;
        display: block !important;
        position: static !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: .75rem;
        height: 2px;
        top: auto;
        margin: 0 .45rem !important;
        background: var(--v-outline-variant);
    }
    #checkout .stepper .step.step-active:not(:first-child)::before,
    #checkout .stepper .step.step-current:not(:first-child)::before {
        background: var(--v-primary);
    }
    #checkout .stepper .step .step-text,
    #checkout .stepper .step.step-current .step-text { display: none !important; }
    #checkout .stepper .step .step-content {
        padding: .2rem !important;
        background: transparent !important;
        box-shadow: none !important;
        gap: 0;
    }
    #checkout .stepper .step .badge-pill {
        width: 2.1rem !important;
        height: 2.1rem !important;
        font-size: .95rem !important;
    }
    #checkout .stepper .step .step-check { display: none !important; }
}

/* ============================================================
   CHECKOUT — bigger, readable prices through all steps
   ============================================================ */
#checkout .price-col,
#checkout .checkout-items-total-wrapper .total-net,
#checkout .checkout-items-total-wrapper .total-sum {
    font-size: 1.05rem;
}
/* item line prices */
#checkout .cart-items-price,
#checkout .checkout-items .price,
#checkout .checkout-items-total-finance-item .price-col {
    font-size: 1rem;
    font-weight: 600;
}
/* GRAND TOTAL — big + primary, especially on the confirmation step */
#checkout .checkout-items-total-total .price_label strong {
    font-size: 1.15rem;
}
#checkout .checkout-items-total-total .total-sum {
    font-size: 1.9rem !important;
    line-height: 1.1;
    font-weight: 700;
    color: var(--v-primary) !important;
    font-family: var(--v-font-head);
}
@media (max-width: 767px) {
    #checkout .checkout-items-total-total .total-sum { font-size: 1.6rem !important; }
}

/* ---- 2) step 0: login (bereits Kunde) | guest/register cards ---- */
#checkout #register-customer { align-items: stretch; }
#checkout .checkout-existing-customer .card.card-gray {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 24px -16px rgba(27, 48, 34, .10);
}
#checkout .checkout-existing-customer .card-title,
#checkout #customer .card-title,
#checkout .checkout-register-form .h3,
#checkout #customer h2,
#checkout #customer .h2 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
}
#checkout .checkout-existing-customer .btn-primary { width: 100%; }
/* "oder" divider */
#checkout .checkout-existing-customer-hr .hr-sect {
    color: var(--v-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
}
/* guest/register form panel */
#checkout #customer .checkout-register-form {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 24px -16px rgba(27, 48, 34, .10);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}
/* the "Neues Kundenkonto erstellen" checkbox -> prominent toggle row */
#checkout #customer .custom-checkbox {
    background: var(--v-surface-low);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius);
    padding: .8rem 1rem .8rem 2.4rem;
    margin: .75rem 0;
    transition: border-color .2s ease, background .2s ease;
}
#checkout #customer .custom-checkbox:has(input:checked) {
    border-color: var(--v-secondary);
    background: rgba(201, 231, 204, .25);
}
#checkout #customer .custom-checkbox label {
    font-weight: 600;
    color: var(--v-primary);
    cursor: pointer;
}

/* ---- 3) shipping + payment options -> consistent compact square cards ---- */
/* flex grid on the actual wrapper that holds the cards (class-agnostic) */
#checkout .checkout-shipping-form-options :has(> .custom-radio),
#checkout #fieldset-payment :has(> .checkout-payment-method) {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: stretch;
    margin-left: 0 !important;   /* kill bootstrap .row negative gutters */
    margin-right: 0 !important;  /* so payment cards line up with the rest */
    width: 100%;
}
/* the real payment row is .checkout-payment-options.row — kill its -gutters */
#checkout #fieldset-payment .checkout-payment-options.row,
#checkout #fieldset-payment .checkout-payment-options {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#checkout .checkout-payment-method { flex: 1 1 240px; max-width: 100%; padding: 0; position: static; }
/* the card itself */
#checkout .checkout-shipping-form-options .custom-radio,
#checkout .checkout-payment-method .custom-radio {
    position: relative;
    flex: 1 1 240px;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    background: #fff;
    padding: .95rem 2.4rem .95rem 1.05rem;   /* right room for the info badge */
    min-height: 80px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
/* whole card clickable: overlay the native input, kill the default dot */
#checkout .checkout-shipping-form-options .custom-control-input,
#checkout .checkout-payment-method .custom-control-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
#checkout .checkout-shipping-form-options .custom-control-label::before,
#checkout .checkout-shipping-form-options .custom-control-label::after,
#checkout .checkout-payment-method .custom-control-label::before,
#checkout .checkout-payment-method .custom-control-label::after { display: none !important; }
#checkout .checkout-shipping-form-options .custom-control-label,
#checkout .checkout-payment-method .custom-control-label {
    display: flex; flex-direction: column; gap: .15rem;
    padding-left: 0 !important; width: 100%; cursor: pointer;
}

/* CONSISTENT states across shipping + payment + packaging */
#checkout .checkout-shipping-form-options .custom-radio:hover,
#checkout .checkout-payment-method .custom-radio:hover,
.verdant-pac:hover {
    border-color: var(--v-secondary);
    box-shadow: 0 8px 20px -12px rgba(27, 48, 34, .18);
}
#checkout .checkout-shipping-form-options .custom-radio:has(input:checked),
#checkout .checkout-payment-method .custom-radio:has(input:checked),
.verdant-pac:has(.custom-control-input:checked) {
    border-color: var(--v-primary);
    box-shadow: inset 0 0 0 1px var(--v-primary);
    background: var(--v-surface-low);
}

/* option content */
#checkout .checkout-shipping-form-options .title,
#checkout .checkout-payment-method .title {
    font-weight: 600;
    color: var(--v-primary);
    font-size: .98rem;
}
#checkout .checkout-shipping-form-options .desc {
    color: var(--v-on-surface-variant) !important;
    font-size: .8rem;
}
#checkout .checkout-shipping-form-options .price-col,
#checkout .checkout-payment-method-badge {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    white-space: nowrap;
}
#checkout .checkout-shipping-form-options .content {
    align-items: center;
    margin: 0;
    width: 100%;
    flex-wrap: wrap;
}
/* align option text to the card's left padding (no extra col/row gutter) */
#checkout .checkout-shipping-form-options .content > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
}
#checkout .checkout-shipping-form-options .content > [class*="col"]:first-child { padding-left: 0; }

/* ---- info badge + hover tooltip (shipping / payment / packaging) ---- */
.verdant-opt-info {
    position: absolute; top: .5rem; right: .5rem; z-index: 3;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v-surface-variant); color: var(--v-on-surface-variant);
    font-size: .58rem; cursor: help;
    transition: background .2s ease, color .2s ease;
}
.verdant-opt-info:hover { background: var(--v-primary); color: #fff; }
.verdant-opt-info .verdant-opt-tip {
    position: absolute; bottom: calc(100% + 9px); right: 0;
    width: 230px; max-width: 70vw;
    background: var(--v-primary); color: #fff;
    padding: .55rem .7rem; border-radius: .5rem;
    font-size: .78rem; line-height: 1.35; font-weight: 400; text-align: left;
    box-shadow: 0 10px 28px rgba(27, 48, 34, .22);
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none; z-index: 5;
}
.verdant-opt-info .verdant-opt-tip::after {
    content: ''; position: absolute; top: 100%; right: 6px;
    border: 6px solid transparent; border-top-color: var(--v-primary);
}
.verdant-opt-info:hover .verdant-opt-tip,
.verdant-opt-info:focus .verdant-opt-tip,
.verdant-opt-info:focus-within .verdant-opt-tip {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* ---- sections: spacing, no divider lines ---- */
#checkout #checkout-shipping-payment hr,
#checkout #fieldset-payment hr,
#checkout .checkout-shipping-form fieldset hr { display: none !important; }
#checkout .checkout-shipping-form fieldset { margin-bottom: 2.5rem; }
#checkout .checkout-shipping-form fieldset > .h2 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    margin-bottom: 1rem;
}
#checkout .checkout-shipping-form-change { margin-bottom: 1rem; }

/* back / next buttons */
#checkout .btn-outline-primary,
#checkout .btn-outline-secondary {
    border-radius: var(--v-radius);
    border-color: var(--v-outline-variant);
    color: var(--v-on-surface);
    padding: .85rem 1.75rem;
}
#checkout .btn-outline-primary:hover,
#checkout .btn-outline-secondary:hover {
    background: var(--v-surface-low);
    border-color: var(--v-secondary);
    color: var(--v-primary);
}


/* ===================================================================== */
/*  HOME — category teaser: image left + sub-categories right             */
/* ===================================================================== */
.verdant-cattease {
    background: #fff;
    border-radius: 1.5rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    margin: clamp(1.5rem, 4vw, 3rem) 0;
    box-shadow: 0 8px 30px rgba(6, 27, 14, .06);
}
.verdant-cattease-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 1.75rem;
    align-items: stretch;
    min-height: 420px;
}

/* left image */
.verdant-cattease .vct-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--v-radius-lg);
    box-shadow: 0 12px 32px -14px rgba(27, 48, 34, .18);
    min-height: 360px;
    text-decoration: none;
}
.verdant-cattease .vct-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}
.verdant-cattease .vct-media:hover img { transform: scale(1.05); }
.verdant-cattease .vct-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 27, 14, .7) 0%, rgba(6, 27, 14, .1) 45%, transparent 75%);
}
.verdant-cattease .vct-media-label {
    position: absolute;
    left: clamp(1.25rem, 2.5vw, 2rem);
    bottom: clamp(1.25rem, 2.5vw, 2rem);
    z-index: 2;
    color: #fff;
    font-family: var(--v-font-head);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 600;
    line-height: 1.05;
}

/* right content */
.verdant-cattease .vct-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(.5rem, 2vw, 1.5rem) 0;
}
.verdant-cattease .vct-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .7rem;
    font-weight: 600;
    color: var(--v-secondary);
    margin-bottom: .6rem;
}
.verdant-cattease .vct-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.9rem);
    letter-spacing: -.01em;
    line-height: 1.05;
    margin: 0 0 .75rem;
}
.verdant-cattease .vct-sub {
    color: var(--v-on-surface-variant);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    max-width: 34rem;
}

/* sub-category list */
.verdant-cattease .vct-sublist {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border-top: 1px solid var(--v-surface-variant);
}
.verdant-cattease .vct-sublist li { border-bottom: 1px solid var(--v-surface-variant); }
.verdant-cattease .vct-sublist a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem .25rem;
    color: var(--v-primary);
    font-family: var(--v-font-head);
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    transition: padding-left .2s ease, color .2s ease;
}
.verdant-cattease .vct-sublist a:hover {
    color: var(--v-secondary);
    padding-left: .65rem;
}
.verdant-cattease .vct-sublist a i {
    flex: 0 0 auto;
    font-size: .8rem;
    color: var(--v-secondary);
    transition: transform .2s ease;
}
.verdant-cattease .vct-sublist a:hover i { transform: translateX(4px); }

/* all-link */
.verdant-cattease .vct-all {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    color: var(--v-secondary);
    font-weight: 600;
    font-size: .9rem;
}
.verdant-cattease .vct-all:hover { color: var(--v-primary); }
.verdant-cattease .vct-all i { font-size: .75rem; transition: transform .2s ease; }
.verdant-cattease .vct-all:hover i { transform: translateX(3px); }

@media (max-width: 767px) {
    .verdant-cattease-inner { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
    .verdant-cattease .vct-media { min-height: 260px; }
}


/* ===================================================================== */
/*  PRODUCT DETAILS — fix swatch height shift + qty/button height match   */
/* ===================================================================== */

/* 1) variation swatches: equal height even when a value has no price.
   The visible card is the label; make it fill its (stretched) flex wrapper. */
#result-wrapper .variations .swatches { align-items: stretch !important; }
#result-wrapper .variations .swatches > .col-auto,
#result-wrapper .variations .swatches > .js-slider-item {
    display: flex !important;
    align-items: stretch !important;
}
#result-wrapper .variation.swatches.swatches-text {
    height: 100% !important;
    min-height: 5rem !important;
    justify-content: center !important;
}

/* 2) quantity counter + add-to-cart button: identical height, centered */
#result-wrapper #add-to-cart .form-counter.choose_quantity,
#result-wrapper #add-to-cart #quantity-grp,
#result-wrapper #add-to-cart .btn-primary,
#result-wrapper #add-to-cart .basket-details-add-to-cart {
    height: 54px !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
#result-wrapper #add-to-cart .form-counter.choose_quantity,
#result-wrapper #add-to-cart #quantity-grp {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
#result-wrapper #add-to-cart .form-counter .form-control,
#result-wrapper #add-to-cart .form-counter .btn,
#result-wrapper #add-to-cart .form-counter .input-group-text,
#result-wrapper #add-to-cart .form-counter .input-group-prepend,
#result-wrapper #add-to-cart .form-counter .input-group-append {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}
#result-wrapper #add-to-cart .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ===================================================================== */
/*  HOME category teaser — sub-category cards (image + name)              */
/* ===================================================================== */
.verdant-cattease .vct-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0 0 1.5rem;
}
.verdant-cattease .vct-subcard {
    position: relative;
    display: block;
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 5 / 3;
    box-shadow: 0 8px 22px -16px rgba(27, 48, 34, .14);
    background: var(--v-surface);
    transition: box-shadow .25s ease, transform .25s ease;
}
.verdant-cattease .vct-subcard:hover {
    box-shadow: 0 16px 32px -18px rgba(27, 48, 34, .26);
    transform: translateY(-3px);
}
.verdant-cattease .vct-subcard-media {
    position: absolute;
    inset: 0;
    display: block;
}
.verdant-cattease .vct-subcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.verdant-cattease .vct-subcard:hover .vct-subcard-media img { transform: scale(1.06); }
.verdant-cattease .vct-subcard-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 27, 14, .72) 0%, rgba(6, 27, 14, .15) 45%, transparent 75%);
}
.verdant-cattease .vct-subcard-name {
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: .7rem;
    z-index: 2;
    color: #fff;
    font-family: var(--v-font-head);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.15;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

@media (max-width: 575px) {
    .verdant-cattease .vct-subgrid { grid-template-columns: 1fr 1fr; gap: .7rem; }
    .verdant-cattease .vct-subcard-name { font-size: .92rem; }
}

.verdant-search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.verdant-search-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.verdant-search-input {
    flex: 1;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color:#1b30224d;
}

.verdant-search-ico {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.verdant-search-submit {
    flex-shrink: 0;
}

/* ===================================================================== */
/*  NAV — account dropdown (modern Verdant card)                          */
/* ===================================================================== */
.account-icon-dropdown .dropdown-menu {
    min-width: 250px !important;
    margin-top: .6rem !important;
    padding: .5rem !important;
    background: #fff !important;
    border: 1px solid var(--v-surface-variant) !important;
    border-radius: var(--v-radius-lg) !important;
    box-shadow: 0 18px 44px -16px rgba(27, 48, 34, .24) !important;
    overflow: hidden;
}

/* header (greeting) */
.verdant-account-menu .vam-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem .6rem .85rem;
    margin-bottom: .4rem;
    border-bottom: 1px solid var(--v-surface-variant);
}
.verdant-account-menu .vam-head-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--v-secondary-container);
    color: var(--v-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.verdant-account-menu .vam-head-text { display: flex; flex-direction: column; min-width: 0; }
.verdant-account-menu .vam-head-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.1;
}
.verdant-account-menu .vam-head-sub {
    font-size: .78rem;
    color: var(--v-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* items */
.account-icon-dropdown .dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem !important;
    border-radius: var(--v-radius) !important;
    color: var(--v-on-surface) !important;
    font-weight: 500;
    font-size: .9rem;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.account-icon-dropdown .dropdown-menu .dropdown-item:hover,
.account-icon-dropdown .dropdown-menu .dropdown-item:focus {
    background: var(--v-surface-low) !important;
    color: var(--v-primary) !important;
}
.verdant-account-menu .vam-ico {
    flex: 0 0 auto;
    width: 1.2rem;
    text-align: center;
    color: var(--v-secondary);
    font-size: .92rem;
}
.account-icon-dropdown .dropdown-menu .dropdown-item:hover .vam-ico { color: var(--v-primary); }

/* divider */
.account-icon-dropdown .dropdown-menu .dropdown-divider {
    margin: .4rem .25rem;
    border-color: var(--v-surface-variant);
}

/* logout row */
.verdant-account-menu .vam-logout { color: var(--v-error) !important; }
.verdant-account-menu .vam-logout .vam-ico { color: var(--v-error); }
.verdant-account-menu .vam-logout:hover {
    background: var(--v-error-container, #ffdad6) !important;
    color: var(--v-error) !important;
}
.verdant-account-menu .vam-logout:hover .vam-ico { color: var(--v-error); }


/* ===================================================================== */
/*  NAV — wishlist dropdown (modern Verdant card)                         */
/* ===================================================================== */
#nav-wishlist-collapse.dropdown-menu {
    min-width: 280px !important;
    margin-top: .6rem !important;
    padding: .5rem !important;
    background: #fff !important;
    border: 1px solid var(--v-surface-variant) !important;
    border-radius: var(--v-radius-lg) !important;
    box-shadow: 0 18px 44px -16px rgba(27, 48, 34, .24) !important;
    overflow: hidden;
}
/* header (reuses .vam-head styling from the account menu) */
#nav-wishlist-collapse .vam-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem .6rem .85rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--v-surface-variant);
}
#nav-wishlist-collapse .vam-head-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--v-secondary-container);
    color: var(--v-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
#nav-wishlist-collapse .vam-head-text { display: flex; flex-direction: column; }
#nav-wishlist-collapse .vam-head-title {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.1;
}
#nav-wishlist-collapse .vam-head-sub { font-size: .78rem; color: var(--v-on-surface-variant); }

/* wishlist rows */
#nav-wishlist-collapse .wishlist-dropdown-items {
    padding: 0 .15rem;
    max-height: 320px !important;
    overflow-y: auto;
}
#nav-wishlist-collapse .table { margin: 0; }
#nav-wishlist-collapse .clickable-row {
    cursor: pointer;
    transition: background .15s ease;
}
#nav-wishlist-collapse .clickable-row td {
    border: 0;
    border-bottom: 1px solid var(--v-surface-variant);
    padding: .7rem .6rem;
    vertical-align: middle;
}
#nav-wishlist-collapse .clickable-row:last-child td { border-bottom: 0; }
#nav-wishlist-collapse .clickable-row:hover td { background: var(--v-surface-low); }
#nav-wishlist-collapse .clickable-row td:first-child {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 500;
}
#nav-wishlist-collapse .clickable-row td .small {
    font-family: var(--v-font-body);
    font-weight: 400;
    color: var(--v-on-surface-variant);
    font-size: .72rem;
}
#nav-wishlist-collapse .clickable-row td.text-right-util {
    color: var(--v-secondary);
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
}

/* footer: new-wishlist button */
#nav-wishlist-collapse .wishlist-dropdown-footer {
    padding: .65rem .35rem .35rem;
    border-top: 1px solid var(--v-surface-variant);
    margin-top: .25rem;
}
#nav-wishlist-collapse .wishlist-dropdown-footer .btn-primary {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    border-radius: var(--v-radius);
    padding: .65rem 1rem;
    font-weight: 600;
}
#nav-wishlist-collapse .wishlist-dropdown-footer .btn-primary:hover {
    background: var(--v-secondary);
    border-color: var(--v-secondary);
}


/* ===================================================================== */
/*  ACCOUNT DASHBOARD — professional cards with dividing lines            */
/*  Scoped to #account (the my-account page wrapper).                      */
/* ===================================================================== */

/* greeting */
#account h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    letter-spacing: -.01em;
    font-size: clamp(2rem, 4vw, 2.9rem);
    margin: .25rem 0 1.5rem;
}

/* intro + credit row */
#account .account-head-data {
    align-items: stretch;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--v-surface-variant);
}
#account .account-head-data > [class*="col"]:first-child {
    color: var(--v-on-surface-variant);
    line-height: 1.6;
    display: flex;
    align-items: center;
}
#account .account-head-data-credit {
    background: var(--v-secondary-container) !important;
    border: 0 !important;
    border-radius: var(--v-radius-lg) !important;
    color: var(--v-primary);
    font-weight: 600;
    padding: 1.1rem 1.35rem;
    display: flex;
    align-items: center;
}

/* ---- dashboard cards ---- */
#account .account-data-item { margin-bottom: 1.5rem; }
#account .account-data-item > .card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 26px -18px rgba(27, 48, 34, .12);
    overflow: hidden;
}
/* card header = section title + divider line */
#account .account-data-item > .card > .card-header {
    background: transparent;
    border-bottom: 1px solid var(--v-surface-variant);
    padding: 1rem 1.25rem;
}
#account .account-data-item .card-header h2,
#account .account-data-item .card-header .h3 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1.3rem;
    margin: 0;
}
#account .account-data-item .card-header h2 a { color: var(--v-primary); }
#account .account-data-item .card-header h2 a:hover { color: var(--v-secondary); }
#account .account-data-item .card-header .col-auto a {
    color: var(--v-secondary);
    font-weight: 600;
}
#account .account-data-item .card-header .col-auto a:hover { color: var(--v-primary); }

/* card body tables — rows divided by lines */
#account .account-data-item .table { margin: 0; }
#account .account-data-item .table td {
    border: 0;
    border-bottom: 1px solid var(--v-surface-variant);
    padding: .9rem 1.25rem;
    vertical-align: middle;
    color: var(--v-on-surface);
}
#account .account-data-item .table tr:last-child td { border-bottom: 0; }
#account .account-data-item .table .table-hover tr:hover td,
#account .account-data-item .table-hover tbody tr:hover td { background: var(--v-surface-low); }
#account .account-data-item .table small,
#account .account-data-item .table .text-muted-util { color: var(--v-on-surface-variant) !important; }
/* edit pencils + view icons -> green */
#account .account-data-item .table .fa-pencil-alt,
#account .account-data-item .table .fa-eye,
#account .account-data-item .table .fa-retweet { color: var(--v-secondary); }
#account .account-data-item .table a:hover .fa-pencil-alt,
#account .account-data-item .clickable-row:hover .fa-eye { color: var(--v-primary); }
/* clickable order/rma rows */
#account .account-data-item .clickable-row { cursor: pointer; }
#account .account-data-item .cardbody,
#account .account-data-item .card-body { padding: 1.1rem 1.25rem; color: var(--v-on-surface-variant); }

/* default/visibility switches -> Verdant green */
#account .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--v-primary) !important;
    border-color: var(--v-primary) !important;
}

/* status badges */
#account .account-data-item .badge { border-radius: 9999px; font-weight: 600; }

/* ---- downloads + actions: divider above ---- */
#account .btn-row {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--v-surface-variant);
    align-items: center;
}
#account .btn-row .btn-primary {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    border-radius: var(--v-radius);
    font-weight: 600;
}
#account .btn-row .btn-primary:hover { background: var(--v-secondary); border-color: var(--v-secondary); }
#account .btn-row .btn-outline-danger {
    border-radius: var(--v-radius);
    border-color: var(--v-outline-variant);
    color: var(--v-error);
}
#account .btn-row .btn-outline-danger:hover {
    background: var(--v-error-container, #ffdad6);
    border-color: var(--v-error);
    color: var(--v-error);
}

/* outline buttons inside cards (create address / return) */
#account .account-data-item .btn-outline-secondary {
    border-radius: var(--v-radius);
    border-color: var(--v-secondary);
    color: var(--v-secondary);
}
#account .account-data-item .btn-outline-secondary:hover {
    background: var(--v-secondary);
    color: #fff;
}


/* ===================================================================== */
/*  NAV count badges — sage background, primary-green text                */
/* ===================================================================== */
.nav-icons .fa-sup,
.cart-icon-dropdown .fa-sup,
#badge-wl-count,
#badge-vl-count,
.cart-icon-dropdown-icon .fa-sup {
    background-color: var(--v-secondary-container) !important;
    color: var(--v-primary) !important;
    border: 0 !important;
    font-weight: 700;
}

/* ===================================================================== */
/*  WISHLIST page — product cards (reuse the Verdant grid-card look)       */
/* ===================================================================== */
.basket_wrapper .productbox-column {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px -14px rgba(27, 48, 34, .10);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
    height: 100%;
}
.basket_wrapper .productbox-column:hover {
    border-color: rgba(6, 27, 14, .18);
    box-shadow: 0 18px 40px -18px rgba(27, 48, 34, .18);
    transform: translateY(-3px);
}
.basket_wrapper .productbox-column .productbox-inner { padding: 0; }
.basket_wrapper .productbox-column .productbox-image { border-radius: 0; overflow: hidden; }
.basket_wrapper .productbox-column .productbox-image .square-image .inner img { object-fit: cover; }
.basket_wrapper .productbox-column .productbox-title,
.basket_wrapper .productbox-column .caption .productbox-title {
    font-family: var(--v-font-head);
    font-weight: 500;
    font-size: 1.1rem;
    padding: .75rem 1rem 0;
}
.basket_wrapper .productbox-column .productbox-title a { color: var(--v-primary); }
.basket_wrapper .productbox-column .caption,
.basket_wrapper .productbox-column .price_wrapper { padding-left: 1rem; padding-right: 1rem; }
.basket_wrapper .productbox-column .price_wrapper .price,
.basket_wrapper .productbox-column .price.h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
}
.basket_wrapper .productbox-column .form-row.productbox-actions { padding: 0 1rem 1rem; }
.basket_wrapper .productbox-column .btn-primary {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    border-radius: var(--v-radius);
    font-weight: 600;
}
.basket_wrapper .productbox-column .btn-primary:hover {
    background: var(--v-secondary);
    border-color: var(--v-secondary);
}
.basket_wrapper .productbox-column .form-counter {
    border: 1px solid var(--v-outline-variant);
    border-radius: var(--v-radius);
    overflow: hidden;
    background: var(--v-bg);
}
/* remove product card on the wishlist -> small icon button */
.basket_wrapper .productbox-quick-actions .btn { color: var(--v-on-surface-variant); }
.basket_wrapper .productbox-quick-actions .btn:hover { color: var(--v-error); }

/* ===================================================================== */
/*  COMPARE LIST — smaller images, professional table                     */
/* ===================================================================== */
.comparelist .table.table-bordered {
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
}
.comparelist .table td,
.comparelist .table th {
    border: 0;
    border-bottom: 1px solid var(--v-surface-variant);
    border-right: 1px solid var(--v-surface-variant);
    padding: .9rem 1rem;
    vertical-align: middle;
}
.comparelist .table tr:last-child td { border-bottom: 0; }
.comparelist .table td:last-child,
.comparelist .table th:last-child { border-right: 0; }
.comparelist .table-hover tbody tr:hover td { background: var(--v-surface-low); }
/* smaller product images */
.comparelist .comparelist-item-image,
.comparelist .comparelist-item img {
    max-width: 96px !important;
    max-height: 96px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: var(--v-radius);
    background: var(--v-surface);
    margin: 0 auto;
}
/* product name */
.comparelist .comparelist-item a {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 500;
}
.comparelist .comparelist-item a:hover { color: var(--v-secondary); }
/* row labels (left sticky column) */
.comparelist .comparelist-label,
.comparelist .sticky-top.comparelist-label {
    font-weight: 600;
    color: var(--v-on-surface-variant);
    background: var(--v-surface-low) !important;
}
/* delete buttons */
.comparelist .delete-link-times .fa-times,
.comparelist .comparelist-delete-all { color: var(--v-on-surface-variant); }
.comparelist .delete-link-times:hover .fa-times { color: var(--v-error); }
/* checkboxes -> green */
.comparelist .comparelist-checkbox:checked ~ .custom-control-label::before,
.comparelist .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--v-primary) !important;
    border-color: var(--v-primary) !important;
}

/* ===================================================================== */
/*  ORDERS list page (#account ?bestellungen=1)                           */
/* ===================================================================== */
#account .account-orders-item {
    background: #fff;
    border: 1px solid var(--v-surface-variant) !important;
    border-radius: var(--v-radius-lg) !important;
    box-shadow: 0 6px 20px -16px rgba(27, 48, 34, .12);
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#account .account-orders-item:hover {
    border-color: rgba(6, 27, 14, .15) !important;
    box-shadow: 0 12px 28px -18px rgba(27, 48, 34, .2);
}
#account .account-orders-item strong { color: var(--v-primary); }
#account .account-orders-item .fa-calendar-alt,
#account .account-orders-item .fa-eye,
#account .account-orders-item .fa-retweet { color: var(--v-secondary); }
#account .account-orders-item .badge { border-radius: 9999px; font-weight: 600; }

/* ===================================================================== */
/*  ADDRESS forms (#rechnungsdaten / shipping) inside #account            */
/* ===================================================================== */
#account #panel-address-form,
#account .account-address-form,
#account form#rechnungsdaten,
#account form[id*="lieferadresse"] {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 26px -18px rgba(27, 48, 34, .12);
    padding: clamp(1.25rem, 2.5vw, 2rem);
}
#account .form-control,
#account .custom-select {
    border-radius: var(--v-radius);
    border-color: var(--v-outline-variant);
    background: var(--v-bg);
    padding: .65rem .85rem;
    height: auto;
}
#account .form-control:focus,
#account .custom-select:focus {
    border-color: var(--v-secondary);
    box-shadow: 0 0 0 3px rgba(74, 101, 79, .12);
}
#account label,
#account .control-label,
#account legend {
    color: var(--v-on-surface-variant);
    font-weight: 600;
}
#account .checkout-button-row-submit .btn-primary,
#account form .btn-primary {
    background: var(--v-primary-container);
    border-color: var(--v-primary-container);
    border-radius: var(--v-radius);
    font-weight: 600;
}
#account form .btn-primary:hover { background: var(--v-secondary); border-color: var(--v-secondary); }
#account .btn-back.btn-outline-primary {
    border-radius: var(--v-radius);
    border-color: var(--v-outline-variant);
    color: var(--v-on-surface);
}
#account .btn-back.btn-outline-primary:hover {
    background: var(--v-surface-low);
    border-color: var(--v-secondary);
    color: var(--v-primary);
}


/* ===================================================================== */
/*  Nav count badges — smaller circle + smaller text                      */
/* ===================================================================== */
.nav-icons .fa-sup,
.cart-icon-dropdown .fa-sup,
#badge-wl-count,
#badge-vl-count,
#comparelist-badge {
    padding: .2em .35em !important;
    font-size: .58em !important;
    min-width: 1.45em;
    line-height: 1;
    font-weight: 700;
    background-color: var(--v-secondary-container) !important;
    color: var(--v-primary) !important;
}

/* ===================================================================== */
/*  COMPARE-LIST dropdown — Verdant card (matches account/wishlist)        */
/* ===================================================================== */
#comparelist-dropdown-container.dropdown-menu {
    min-width: 300px !important;
    margin-top: .6rem !important;
    padding: .5rem !important;
    background: #fff !important;
    border: 1px solid var(--v-surface-variant) !important;
    border-radius: var(--v-radius-lg) !important;
    box-shadow: 0 18px 44px -16px rgba(27, 48, 34, .24) !important;
    overflow: hidden;
}
#comparelist-dropdown-container .vam-head {
    display: flex; align-items: center; gap: .7rem;
    padding: .35rem .6rem .85rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--v-surface-variant);
}
#comparelist-dropdown-container .vam-head-icon {
    flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    background: var(--v-secondary-container); color: var(--v-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
#comparelist-dropdown-container .vam-head-text { display: flex; flex-direction: column; }
#comparelist-dropdown-container .vam-head-title {
    font-family: var(--v-font-head); color: var(--v-primary); font-weight: 600; font-size: 1.05rem; line-height: 1.1;
}
#comparelist-dropdown-container .vam-head-sub { font-size: .78rem; color: var(--v-on-surface-variant); }
/* item rows */
#comparelist-dropdown-container .comparelist-dropdown-table { padding: 0 .15rem; }
#comparelist-dropdown-container .table td {
    border: 0;
    border-bottom: 1px solid var(--v-surface-variant);
    padding: .65rem .5rem;
    vertical-align: middle;
}
#comparelist-dropdown-container .table tr:last-child td { border-bottom: 0; }
#comparelist-dropdown-container .img-sm { border-radius: var(--v-radius); background: var(--v-surface); }
#comparelist-dropdown-container .remove .fa-times { color: var(--v-on-surface-variant); }
#comparelist-dropdown-container .remove:hover .fa-times { color: var(--v-error); }
/* footer button -> dark green, white text */
#comparelist-dropdown-container .comparelist-dropdown-table-body-button.btn-primary {
    background: var(--v-primary-container) !important;
    border-color: var(--v-primary-container) !important;
    color: #fff !important;
    border-radius: var(--v-radius) !important;
    font-weight: 600;
    margin-top: .35rem;
}
#comparelist-dropdown-container .comparelist-dropdown-table-body-button.btn-primary:hover {
    background: var(--v-secondary) !important;
    border-color: var(--v-secondary) !important;
}

/* ===================================================================== */
/*  Account "Zur Vergleichsliste / Wunschliste" CTAs -> solid green/white  */
/* ===================================================================== */
#account .account-comparelist .btn,
#account .account-data-item-comparelist .btn,
#account .account-data-item-wishlist .btn-outline-secondary,
.comparelist .btn-outline-secondary.stretched,
.basket_wrapper .wishlist-actions .btn-primary {
    background: var(--v-primary-container) !important;
    border-color: var(--v-primary-container) !important;
    color: #fff !important;
    border-radius: var(--v-radius) !important;
    font-weight: 600;
}
#account .account-comparelist .btn:hover,
#account .account-data-item-comparelist .btn:hover,
#account .account-data-item-wishlist .btn-outline-secondary:hover {
    background: var(--v-secondary) !important;
    border-color: var(--v-secondary) !important;
    color: #fff !important;
}

/* ===================================================================== */
/*  WISHLIST page — rounded search + circular icon button                 */
/* ===================================================================== */
.wishlist-search-wrapper #wishlist-search .input-group {
    border: 1px solid var(--v-outline-variant);
    border-radius: 9999px;
    background: var(--v-bg);
    padding: .25rem .25rem .25rem 1rem;
    overflow: hidden;
    align-items: center;
}
.wishlist-search-wrapper #wishlist-search .input-group:focus-within {
    border-color: var(--v-secondary);
    box-shadow: 0 0 0 3px rgba(74, 101, 79, .12);
}
.wishlist-search-wrapper #wishlist-search .form-control {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: .4rem .5rem;
}
.wishlist-search-wrapper #wishlist-search .input-group-append { margin: 0; }
/* search button -> circular green icon (hide the text label) */
.wishlist-search-wrapper .wishlist-search-button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0 !important;
    border-radius: 9999px !important;
    background: var(--v-primary-container) !important;
    border-color: var(--v-primary-container) !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wishlist-search-wrapper .wishlist-search-button:hover {
    background: var(--v-secondary) !important;
    border-color: var(--v-secondary) !important;
}
.wishlist-search-wrapper .wishlist-search-button-text { display: none; }
/* "remove search" button stays a small rounded pill */
.wishlist-search-wrapper #wishlist-search .input-group-append .btn {
    border-radius: 9999px;
    margin-left: .35rem;
    color: var(--v-secondary);
    border-color: transparent;
}
/* email textarea -> rounded */
#wishlist-email,
.basket_wrapper textarea {
    border-radius: var(--v-radius-lg) !important;
    border-color: var(--v-outline-variant) !important;
    padding: .75rem 1rem !important;
}
#wishlist-email:focus { border-color: var(--v-secondary) !important; box-shadow: 0 0 0 3px rgba(74,101,79,.12) !important; }

/* ===================================================================== */
/*  PRODUCT DETAILS — qty + add-to-cart on the same level                 */
/* ===================================================================== */
#result-wrapper #add-to-cart .basket-form-inline { align-items: flex-start !important; }
#result-wrapper #add-to-cart .form-counter.choose_quantity {
    height: 54px !important;
    margin-bottom: 1rem !important;
}
#result-wrapper #add-to-cart .btn-primary,
#result-wrapper #add-to-cart .product-buy .btn-primary {
    height: 54px !important;
    margin-bottom: 1rem !important;
}


/* ===================================================================== */
/*  PRODUCT DETAILS — compact, clearer price + Staffelpreise              */
/* ===================================================================== */
#result-wrapper .verdant-detail-price {
    padding: .9rem 1.15rem !important;
    margin: .5rem 0 1.4rem !important;
}
#result-wrapper .verdant-detail-price .price_label {
    font-size: .78rem !important;
    color: var(--v-secondary) !important;
    margin: 0 0 .1rem !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}
#result-wrapper .verdant-detail-price .price.h1 {
    font-size: clamp(2.1rem, 4.5vw, 2.9rem) !important;
    line-height: 1 !important;
    margin: 0 0 .25rem !important;
}
#result-wrapper .verdant-detail-price .price-note {
    margin: 0 !important;
    font-size: .76rem;
}

/* ---- Staffelpreise (bulk prices) -> compact "ab N Stk → unit price" ---- */
#result-wrapper .verdant-detail-price .bulk-prices {
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid var(--v-surface-variant);
}
#result-wrapper .verdant-detail-price .bulk-prices .table {
    margin: 0;
    width: 100%;
    border: 0;
    background: transparent;
}
/* hide the column header — each row is now self-explanatory */
#result-wrapper .verdant-detail-price .bulk-prices thead { display: none; }
#result-wrapper .verdant-detail-price .bulk-prices tbody td {
    border: 0;
    border-bottom: 1px solid var(--v-surface-variant);
    padding: .45rem .25rem;
    vertical-align: middle;
    background: transparent !important;
}
#result-wrapper .verdant-detail-price .bulk-prices tbody tr:last-child td { border-bottom: 0; }
#result-wrapper .verdant-detail-price .bulk-prices tbody tr:hover td { background: var(--v-surface-low) !important; }

/* quantity column -> "ab N Stk" pill */
#result-wrapper .verdant-detail-price .bulk-prices tbody td:first-child {
    width: 1%;
    white-space: nowrap;
    font-weight: 600;
    color: var(--v-primary);
    font-size: .82rem;
}
#result-wrapper .verdant-detail-price .bulk-prices tbody td:first-child::before {
    content: "ab ";
    color: var(--v-on-surface-variant);
    font-weight: 500;
}
#result-wrapper .verdant-detail-price .bulk-prices tbody td:first-child::after {
    content: " Stk";
    color: var(--v-on-surface-variant);
    font-weight: 500;
}
/* unit price -> serif green, right-aligned */
#result-wrapper .verdant-detail-price .bulk-prices tbody td .bulk-price,
#result-wrapper .verdant-detail-price .bulk-prices tbody td:nth-child(2) {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: .95rem;
    text-align: right;
}
#result-wrapper .verdant-detail-price .bulk-prices tbody td:nth-child(2) { padding-left: 1rem; }
/* base-price column (if shown) -> small muted */
#result-wrapper .verdant-detail-price .bulk-prices tbody td.bulk-base-price {
    text-align: right;
    color: var(--v-on-surface-variant);
    font-size: .72rem;
}
#result-wrapper .verdant-detail-price .bulk-prices .footnote-reference { color: var(--v-on-surface-variant); }

/* ===================================================================== */
/*  PRODUCT GALLERY — remove the black thumbnail border (NOVA $gray-darker)*/
/* ===================================================================== */
#result-wrapper .carousel-thumbnails .slick-slide,
.product-thumbnails.carousel-thumbnails .slick-slide {
    border: 1px solid var(--v-surface-variant) !important;
    border-radius: var(--v-radius) !important;
    overflow: hidden;
}
#result-wrapper .carousel-thumbnails .slick-slide.slick-current,
.product-thumbnails.carousel-thumbnails .slick-slide.slick-current {
    border: 2px solid var(--v-primary) !important;
}

/* cart drawer — per-item remove (×) button */
#verdant-cart-drawer .vcd-price-cell {
    position: relative;
    white-space: nowrap;
}
#verdant-cart-drawer .vcd-remove {
    border: 0;
    background: transparent;
    color: var(--v-on-surface-variant);
    cursor: pointer;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 9999px;
    line-height: 1;
    margin-left: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    vertical-align: middle;
}
#verdant-cart-drawer .vcd-remove:hover {
    background: var(--v-error-container, #ffdad6);
    color: var(--v-error);
}
#verdant-cart-drawer .vcd-remove:disabled { opacity: .5; cursor: default; }

/* ===================================================================== */
/*  BASKET — product title spans full width on top (not cramped left)     */
/* ===================================================================== */
.basket .cart-items-body .align-items-baseline { flex-wrap: wrap; align-items: center !important; }
/* the name column -> full width, first */
.basket .cart-items-body .align-items-baseline > [class*="col"]:has(.cart-items-name) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: -1;
    margin-bottom: .65rem;
}
.basket .cart-items-name {
    text-decoration: none !important;
    font-size: clamp(1.15rem, 2.2vw, 1.35rem) !important;
    line-height: 1.2;
    display: inline-block;
}
.basket .cart-items-name:hover { text-decoration: none !important; color: var(--v-secondary) !important; }
/* price / qty / total row sits under the title, neatly spaced */
.basket .cart-items-body .cart-items-single-price,
.basket .cart-items-body .cart-items-quantity,
.basket .cart-items-body .cart-items-price { margin-top: .15rem; }


/* ===================================================================== */
/*  FOOTER — Verdant dark (primary) refactor + brand row                  */
/* ===================================================================== */
#footer {
    background: var(--v-primary-container) !important;
    color: rgba(255, 255, 255, .82);
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(2.5rem, 5vw, 4rem) 0 0 !important;
}

/* ---- brand row (logo + tagline) ---- */
#footer .verdant-footer-brand {
    text-align: center;
    padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
    margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
#footer .verdant-footer-brand .vf-logo { display: inline-block; }
#footer .verdant-footer-brand img {
    max-height: 64px;
    width: auto;
    /* dark logo -> white on the dark footer */
    filter: brightness(0) invert(1);
    opacity: .95;
}
#footer .verdant-footer-brand .vf-tagline {
    margin: 1rem auto 0;
    max-width: 34rem;
    color: rgba(255, 255, 255, .65);
    font-size: .95rem;
    line-height: 1.6;
}

/* ---- newsletter ---- */
#footer .newsletter-footer-heading {
    font-family: var(--v-font-head);
    color: #fff;
    font-weight: 600;
    letter-spacing: -.01em;
}
#footer .newsletter-footer .info,
#footer .newsletter-footer .info a { color: rgba(255, 255, 255, .6); }
#footer .newsletter-footer .info a { text-decoration: underline; }
#footer .newsletter-footer .form-control {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--v-radius) 0 0 var(--v-radius);
    color: #fff;
    padding: .8rem 1rem;
    height: auto;
}
#footer .newsletter-footer .form-control::placeholder { color: rgba(255, 255, 255, .5); }
#footer .newsletter-footer .form-control:focus {
    background: rgba(255, 255, 255, .12);
    border-color: var(--v-secondary-container);
    box-shadow: none;
    color: #fff;
}
#footer .newsletter-footer .btn-secondary {
    background: var(--v-secondary-container);
    border-color: var(--v-secondary-container);
    color: var(--v-primary);
    font-weight: 600;
    border-radius: 0 var(--v-radius) var(--v-radius) 0;
}
#footer .newsletter-footer .btn-secondary:hover {
    background: #fff;
    border-color: #fff;
    color: var(--v-primary);
}
#footer hr { border-color: rgba(255, 255, 255, .14); }

/* ---- link-group boxes ---- */
#footer .box-linkgroup .productlist-filter-headline,
#footer .box-linkgroup .box-normal-link {
    font-family: var(--v-font-head);
    color: #fff !important;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .01em;
    margin-bottom: .6rem;
}
#footer .box-linkgroup .nav-link {
    color: rgba(255, 255, 255, .72) !important;
    padding: .3rem 0;
    font-weight: 400;
    transition: color .15s ease, padding-left .15s ease;
}
#footer .box-linkgroup .nav-link:hover {
    color: #fff !important;
    padding-left: .35rem;
}
/* mobile collapse caret */
#footer .box-normal-link.dropdown-toggle::after { color: rgba(255, 255, 255, .6); }

/* withdrawal link + misc text/links in the footer body */
#footer a { color: rgba(255, 255, 255, .72); }
#footer a:hover { color: #fff; }
#footer .withdrawal-link-wrapper { margin-top: .5rem; }

/* ---- social icons ---- */
#footer .footer-social-media .btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    border-radius: 9999px;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 .25rem;
}
#footer .footer-social-media .btn:hover {
    background: var(--v-secondary-container);
    color: var(--v-primary);
    border-color: var(--v-secondary-container);
}

/* ---- copyright bar ---- */
#copyright {
    background: rgba(0, 0, 0, .25) !important;
    color: rgba(255, 255, 255, .55) !important;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
    padding: 1rem 0;
    font-size: .8rem;
}
#copyright a,
#copyright .text-white { color: rgba(255, 255, 255, .75) !important; }
#copyright a:hover { color: #fff !important; }

/* footer — withdrawal button was primary-on-primary (invisible) -> sage */
#footer .withdrawal-link.btn-primary {
    background: var(--v-secondary-container) !important;
    border-color: var(--v-secondary-container) !important;
    color: var(--v-primary) !important;
    border-radius: var(--v-radius);
    font-weight: 600;
}
#footer .withdrawal-link.btn-primary:hover {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--v-primary) !important;
}

/* sticky buy bar — cap width at 1080px */
#verdant-buybar .vbb-inner { max-width: 1080px !important; }

/* category dropdown — remove the divider lines under sub-category items */
.navbar-nav .dropdown-menu a,
.navbar-nav .dropdown-menu .nav-link,
.navbar-nav .dropdown-menu .nav-item,
.navbar-nav .dropdown-menu li,
.navbar-nav .dropdown-menu .dropdown-item {
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.navbar-nav .dropdown-menu .nav-item::after,
.navbar-nav .dropdown-menu .nav-item::before,
.navbar-nav .dropdown-menu a::after,
.navbar-nav .dropdown-menu a::before {
    content: none !important;
    display: none !important;
}
.navbar-nav .dropdown-menu hr,
.navbar-nav .dropdown-menu .dropdown-divider { display: none !important; }
/* ============================================================
   VERDANT — mobile / small-screen fixes
   ============================================================ */
@media (max-width: 991.98px) {

    /* (1) Mobile search: round icon button, detached with a left margin -------- */
    .search-form-wrapper-fixed .input-group { align-items: center; }
    .search-form-wrapper-fixed .ac_input,
    .search-form-wrapper-fixed .input-group .form-control {
        border-radius: 9999px !important;
        border-right: 1px solid var(--input-border-color, #d8ded9) !important;
    }
    .search-form-wrapper-fixed .input-group-append { margin-left: .5rem; }
    .search-form-wrapper-fixed .input-group-append .btn,
    .search-form-wrapper-fixed .btn[type="submit"],
    .search-form-wrapper-fixed button.btn-secondary {
        border-radius: 9999px !important;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    /* (2) Top bar: hamburger LEFT · logo CENTER · icons RIGHT, all centered ----- */
    /* kill the always-on navbar top padding (custom.css ~2534) that pushed the
       icons ~2rem below the logo on mobile */
    .fixed-navbar .navbar.navbar-expand-lg {
        margin-top: 0 !important;
        padding-top: .2rem !important;
        padding-bottom: .2rem !important;
        min-height: 0 !important;
    }
    /* shrink overall bar margin-top + height */
    .fixed-navbar {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .fixed-navbar > .container,
    .fixed-navbar > .container-fluid,
    .fixed-navbar .container-fluid-xl {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: .4rem;
        padding-top: .2rem !important;
        padding-bottom: .2rem !important;
    }
    /* logo height down -> shorter bar */
    .fixed-navbar #shop-logo,
    .fixed-navbar .logo-wrapper .navbar-brand img {
        max-height: 32px;
        width: auto;
    }
    /* dissolve the burger+logo wrapper so both become direct flex items */
    .fixed-navbar .toggler-logo-wrapper { display: contents; }
    .fixed-navbar .burger-menu-wrapper {
        order: 0; flex: 0 0 auto; margin: 0 !important;
        display: flex; align-items: center;
    }
    /* logo LEFT, directly next to burger */
    .fixed-navbar .logo-wrapper {
        order: 1; flex: 0 0 auto; margin: 0 !important;
        display: flex; justify-content: flex-start; align-items: center;
    }
    .fixed-navbar .logo-wrapper .navbar-brand { margin: 0; }
    /* icons pushed to far right */
    .fixed-navbar .navbar.navbar-expand-lg {
        order: 2; flex: 0 0 auto; width: auto !important;
        margin-left: auto !important;
        align-items: center !important;
    }
    /* hide search icon on mobile (fixed search bar below already covers it) */
    .fixed-navbar #search.verdant-search,
    .fixed-navbar .nav-icons .verdant-search { display: none !important; }
    .nav.nav-right.nav-icons,
    .nav-icons > li,
    .nav-icons .nav-link {
        display: flex !important;
        align-items: center !important;
    }
    .nav-icons { flex-wrap: nowrap; }

    /* kill NOVA crit-css top padding on the content wrapper (mobile) */
    #content-wrapper:not(.has-fluid) { padding-top: 0 !important; }

    /* ===== Verdant mobile menu drawer (offcanvas) ====================== */
    /* wider panel, light Verdant surface, soft shadow */
    #mainNavigation.navbar-collapse {
        max-width: min(86vw, 380px) !important;
        background: var(--v-surface-low, #fff) !important;
        box-shadow: 0 0 40px rgba(27, 48, 34, .18);
    }

    /* header row: title left, close right, divider under */
    .nav-mobile-header {
        padding: .85rem 1.1rem !important;
        border-bottom: 1px solid var(--v-surface-variant);
        align-items: center !important;
    }
    .nav-mobile-header .row { align-items: center !important; }
    .nav-mobile-header > [class*="col"] { display: flex; align-items: center; }
    .nav-mobile-header-hr { display: none !important; }
    .nav-mobile-header .nav-offcanvas-title {
        font-family: var(--v-font-head);
        font-weight: 600; font-size: 1.05rem; color: var(--v-primary);
    }
    .nav-mobile-header .navbar-toggler { color: var(--v-on-surface-variant); font-size: 1.15rem; padding: .25rem .5rem; }

    .nav-mobile-body { padding: .15rem 0 1rem; }

    /* each row: full width, left text, right chevron, divider, tap target */
    .nav-mobile-body .nav-scrollbar-item,
    .nav-mobile-body .nav-item { width: 100%; text-align: left; }
    .nav-mobile-body .nav-link,
    .nav-mobile-body .nav-scrollbar-item > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .5rem;
        width: 100%;
        text-align: left !important;
        padding: .8rem 1.1rem !important;
        margin: 0 !important;
        color: var(--v-primary) !important;
        font-weight: 500; font-size: 1rem;
        border-bottom: 1px solid var(--v-surface-variant);
        white-space: normal;
    }
    .nav-mobile-body .nav-link:hover,
    .nav-mobile-body .nav-link:focus { background: var(--v-surface); }

    /* kill label truncation (was clipping "Hängepf…" in the 270px drawer) */
    .nav-mobile-body .nav-mobile-heading,
    .nav-mobile-body .text-truncate {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        max-width: none !important;
        margin-right: auto;
    }

    /* chevron on the right, muted */
    .nav-mobile-body .nav-link.dropdown-toggle::after {
        margin-left: auto !important;
        border: 0 !important;
        content: "\f054" !important;           /* chevron-right */
        font-family: "Font Awesome 5 Free"; font-weight: 900;
        font-size: .8rem; color: var(--v-on-surface-variant);
        width: auto; height: auto;
    }
    .nav-mobile-body .nav-link [class*="fa-"]:last-child { margin-left: auto !important; }
    .nav-mobile-body .product-count { margin-left: .4rem; }
    .nav-mobile-body > .navbar-nav > li > hr,
    .nav-mobile-body li > hr { display: none; }

    /* ----- sub-category panel (slides in from the right) -------------- */
    #mainNavigation .dropdown-menu {
        background: var(--v-surface-low, #fff) !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    #mainNavigation .dropdown-body .nav-mobile-heading,
    #mainNavigation .dropdown-body strong.nav-mobile-heading {
        font-family: var(--v-font-head);
        color: var(--v-primary); font-weight: 600;
    }
    #mainNavigation .dropdown-body .submenu-headline,
    #mainNavigation .dropdown-menu .nav-link {
        text-align: left !important;
        padding: .75rem 1.1rem !important;
        border-bottom: 1px solid var(--v-surface-variant);
        color: var(--v-primary) !important;
    }
    /* "back" link in sub-panels */
    .nav-mobile-body [data-menu-back],
    #mainNavigation [data-menu-back] {
        color: var(--v-on-surface-variant) !important;
        font-weight: 600;
    }

    /* (4) Fullscreen gallery: allow vertical scroll of a tall opened image ------ */
    /* keep slick's own touch handling on the wrapper — do NOT add overflow here
       (a scroll container over slick eats swipe/tap on touch devices). Scroll the
       tall image inside slick-list instead, with pan-y so vertical scroll works
       while slick keeps horizontal swipe. */
    #image_wrapper.fullscreen .slick-list {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
        max-height: 100vh;
    }
    #image_wrapper.fullscreen .slick-track,
    #image_wrapper.fullscreen .slick-slide,
    #image_wrapper.fullscreen .slick-slide > div {
        height: auto !important;
        max-height: none !important;
    }
    #image_wrapper.fullscreen .product-image,
    #image_wrapper.fullscreen img {
        height: auto !important;
        max-height: none !important;
        width: auto;
        max-width: 100%;
        object-fit: contain;
        touch-action: pan-y !important;
    }

    /* (5) mobile cross-sell grid ----------------------------------------------- */
    .verdant-xsell-mobile { margin-top: 1.25rem; }
    .verdant-xsell-mobile .verdant-xsell-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    /* (6) product-detail tabs: round, primary-colored pills -------------------- */
    #product-tabs.nav-tabs {
        border-bottom: 0 !important;
        flex-wrap: wrap;
        gap: .5rem;
    }
    #product-tabs.nav-tabs .nav-item { margin: 0 !important; }
    #product-tabs.nav-tabs .nav-link {
        border-radius: 9999px !important;
        border: 1px solid var(--v-primary, #061b0e) !important;
        color: var(--v-primary, #061b0e) !important;
        background: transparent !important;
        padding: .5rem 1.25rem !important;
        font-weight: 600;
        white-space: nowrap;
    }
    #product-tabs.nav-tabs .nav-link.active,
    #product-tabs.nav-tabs .nav-item.show .nav-link {
        background: var(--v-primary, #061b0e) !important;
        color: var(--v-on-primary, #fff) !important;
    }

    /* (6b) mobile accordion tab headers (Beschreibung / Bewertungen) ----------- */
    #tabAccordion .card {
        border: 0 !important;
        background: transparent !important;
        margin-bottom: .5rem;
    }
    #tabAccordion > .card > .card-header {
        border-radius: 9999px !important;
        background: var(--v-primary, #1b3022) !important;
        color: var(--v-on-primary, #fff) !important;
        border: 0 !important;
        font-weight: 600;
        padding: .75rem 1.25rem !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* chevron + any icon inside header inherit white */
    #tabAccordion > .card > .card-header::after,
    #tabAccordion > .card > .card-header [class*="fa-"],
    #tabAccordion > .card > .card-header [class*="icon"] {
        color: var(--v-on-primary, #fff) !important;
    }
}

/* ============================================================
   CHECKOUT — Zusatzverpackungen as equal flex-row swatches
   (Bestellvorgang?wk=1 → step3 shipping options)
   ============================================================ */
/* flex parent: the checkboxgroup wrapper that holds the packaging items */
[role="group"]:has(> .verdant-pac) {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: stretch;   /* identical height across the row */
}
.verdant-pac {
    flex: 1 1 240px;        /* match shipping / payment card width */
    min-width: 200px;
    margin: 0 !important;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    background: #fff;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.verdant-pac .custom-control,
.verdant-pac .custom-checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: .95rem 2.4rem .95rem 1.05rem;   /* right room for the info badge */
    min-height: 80px;
}
/* whole card clickable; hide the default checkbox box */
.verdant-pac .custom-control-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.verdant-pac .custom-control-label::before,
.verdant-pac .custom-control-label::after { display: none !important; }
.verdant-pac .custom-control-label {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-left: 0 !important;
    height: 100%;
    cursor: pointer;
}
.verdant-pac .checkout-shipping-form-packaging-title { font-weight: 600; color: var(--v-primary); }
.verdant-pac .checkout-shipping-form-packaging-cost  { color: var(--v-primary); font-weight: 600; }
/* hover + selected states unified with shipping/payment (see section 3) */

/* ============================================================
   WUNSCHLISTE (Wunschliste?wl=1) — padded product cards
   ============================================================ */
.snippets-wishlist .wishlist-item { margin-bottom: 1.5rem; }
.snippets-wishlist .wishlist-item .productbox-column {
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: 1rem;
    height: 100%;
}
/* inner is pos-abs (overlay) by default → make static so card padding shows */
.snippets-wishlist .wishlist-item .productbox-inner.pos-abs {
    position: static !important;
}

/* product list: keep the image visible on hover for variation products
   (NOVA swaps it for a variation preview on hover/.focus). Belt for the JS
   class-strip in custom.js. */
#product-list.layout-gallery .productbox-show-variations:hover .productbox-image .first-wrapper,
#product-list.layout-gallery .productbox-show-variations.focus .productbox-image .first-wrapper,
#product-list .productbox .productbox-image .first-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}
#product-list .productbox .productbox-variations .productbox-onhover { display: none !important; }

/* ============================================================
   PRODUCT DETAILS — colour (Farbe) swatches as round image circles
   JS (custom.js) adds .has-swatch-img + background-image from data-list.
   ============================================================ */
#result-wrapper .variation.swatches.swatches-text.has-swatch-img {
    width: 5.5rem !important;
    height: 5.5rem !important;
    min-width: 0 !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    border: 1px solid var(--v-surface-variant) !important;
}
#result-wrapper .variation.swatches.swatches-text.has-swatch-img.active {
    border: 2px solid var(--v-primary) !important;
}
/* remove text header + sub-name */
#result-wrapper .has-swatch-img .swatch-main,
#result-wrapper .has-swatch-img .swatch-sub,
#result-wrapper .has-swatch-img .label-variation { display: none !important; }

/* "Farbe" colour circle — solid hard-coded hex (bg set inline per value) */
/* wrapper must not stretch the swatch (flex parent) — keep it square */
#result-wrapper .swatches > .js-slider-item:has(.swatch-color-circle),
#result-wrapper .swatches > .col-auto:has(.swatch-color-circle) {
    align-self: center !important;
    flex: 0 0 auto !important;
}
#result-wrapper .variation.swatches.swatch-color-circle {
    display: block !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    min-height: 3rem !important;
    max-height: 3rem !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--v-outline-variant) !important;
}
/* selected = single solid primary ring around the circle, colour fill kept */
#result-wrapper .variation.swatches.swatch-color-circle.active {
    border-color: var(--v-primary) !important;
    background-image: none !important;
    box-shadow: 0 0 0 2px var(--v-primary) !important;
    outline: none !important;
}
#result-wrapper .swatch-color-circle img,
#result-wrapper .swatch-color-circle .swatch-main,
#result-wrapper .swatch-color-circle .swatch-sub,
#result-wrapper .swatch-color-circle .variation-badge,
#result-wrapper .swatch-color-circle .label-variation { display: none !important; }

/* ===================================================================== */
/*  NAVBAR — taller bar + scroll border                                   */
/*  More top space so the nav starts cleanly under the top bar, more      */
/*  bottom padding for breathing room, and a subtle border that appears   */
/*  once the page is scrolled past 100px (class set by custom.js).        */
/* ===================================================================== */
/* gap so the nav begins exactly after the top bar */
.fixed-navbar .navbar.navbar-expand-lg,
.navbar.navbar-expand-lg {
    padding-top: .5rem !important;
}

.fixed-navbar { margin-top: .4rem; }

/* subtle separator once scrolled — only when sticky nav has detached */
.fixed-navbar.is-scrolled {
    border-bottom: 1px solid var(--v-surface-variant) !important;
    box-shadow: 0 2px 6px rgba(27, 48, 34, .06) !important;
}

/* ===================================================================== */
/*  CART DRAWER — golden free-shipping upsell progress bar (top)          */
/* ===================================================================== */
.vcd-ship {
    flex: 0 0 auto;
    padding: .95rem 1.35rem 1.05rem;
    background: linear-gradient(135deg, #fff9ec 0%, #fdf2d4 100%);
    border-bottom: 1px solid #efd9a0;
}
.vcd-ship-msg {
    font-size: .9rem;
    line-height: 1.35;
    color: #6b531a;
    margin-bottom: .6rem;
    text-align: center;
}
.vcd-ship-msg b { color: #9a7510; font-weight: 700; }
.vcd-ship-msg .fa-gift { color: #c79a1e; margin-right: .25rem; }

.vcd-ship-track {
    position: relative;
    height: 10px;
    border-radius: 9999px;
    background: #ece0c2;
    box-shadow: inset 0 1px 2px rgba(122, 92, 20, .18);
    overflow: visible;
}
.vcd-ship-fill {
    position: relative;
    height: 100%;
    border-radius: 9999px;
    /* layer 1 = moving white sheen, layer 2 = static golden fill */
    background:
        linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%),
        linear-gradient(90deg, #e8c25a 0%, #d4a017 55%, #b8860b 100%);
    background-size: 200% 100%, 100% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 1px 4px rgba(184, 134, 11, .45);
    transition: width .5s cubic-bezier(.22, 1, .36, 1);
    min-width: 10px;
    animation: vcd-ship-shimmer 2.4s linear infinite;
}
@keyframes vcd-ship-shimmer {
    0%   { background-position: -150% 0, 0 0; }
    100% { background-position:  250% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .vcd-ship-fill { animation: none; }
}
/* basket page mount spacing */
.verdant-ship-mount { margin-top: 1rem; }
.vcd-ship-truck {
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d4a017;
    color: #b8860b;
    font-size: .62rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(122, 92, 20, .35);
}
/* goal reached: full golden bar, celebratory tint */
.vcd-ship.is-reached {
    background: linear-gradient(135deg, #fdf2d4 0%, #f7e3a8 100%);
}
.vcd-ship.is-reached .vcd-ship-fill {
    background:
        linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%),
        linear-gradient(90deg, #d4a017 0%, #b8860b 100%);
    background-size: 200% 100%, 100% 100%;
    background-repeat: no-repeat;
}
/* price centered, readable pill over the image */
#result-wrapper .has-swatch-img .variation-badge {
    background: rgba(255, 255, 255, .9) !important;
    color: var(--v-primary) !important;
    border-radius: 9999px !important;
    padding: .12rem .5rem !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.list-unstyled{
    margin-top:1rem !important;
}

/* ===================================================================== */
/*  GALLERY CARD — full rewrite (.verdant-card, productlist/item_box.tpl) */
/* ===================================================================== */
#result-wrapper .verdant-card {
    display: flex;
    flex-direction: column;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    overflow: visible;
    transition: border-color .3s ease, box-shadow .3s ease;
    height: 100%;
}
#result-wrapper .verdant-card:hover {
    border-color: var(--v-primary);
    box-shadow: 0 8px 24px rgba(27, 48, 34, .08);
}
#result-wrapper .verdant-card .verdant-card-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* ---- media ---- */
#result-wrapper .verdant-card-media {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    background: var(--v-surface);
}
#result-wrapper .verdant-card-imglink {
    display: block;
    aspect-ratio: 1 / 1;          /* perfect square */
}
#result-wrapper .verdant-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    animation: verdant-card-fade .4s ease forwards;
}
@keyframes verdant-card-fade { to { opacity: 1; } }
#result-wrapper .verdant-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    color: var(--v-surface-variant);
    font-size: 2.5rem;
}

/* ribbon (SALE / stock) sits inside the media, top-left */
#result-wrapper .verdant-card-media .ribbon {
    position: absolute !important;
    top: .6rem !important;
    left: .6rem !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 3;
}
/* wishlist + compare quick actions, top-right */
#result-wrapper .verdant-card-actions {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 3;
    display: flex;
    gap: .4rem;
}
#result-wrapper .verdant-card-actions .productbox-quick-actions {
    display: flex;
    gap: .4rem;
    margin: 0;
}

/* mobile: tighten the gallery grid gap + drop wishlist/compare quick actions */
@media (max-width: 991.98px) {
    #result-wrapper #product-list .product-wrapper:not(:last-child),
    #result-wrapper #product-list .product-wrapper { margin-bottom: .6rem !important; }
    #result-wrapper .verdant-card-actions { display: none !important; }
}

/* ---- body ---- */
#result-wrapper .verdant-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: .9rem .35rem .35rem;
}
#result-wrapper .verdant-card-title {
    font-family: var(--v-font-head);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--v-primary);
    margin-bottom: .4rem;
}
#result-wrapper .verdant-card-title:hover { color: var(--v-secondary); text-decoration: none; }
#result-wrapper .verdant-card-rating { margin-bottom: .35rem; }
#result-wrapper .verdant-card-price { margin-bottom: .25rem; }
#result-wrapper .verdant-card-price .price,
#result-wrapper .verdant-card-price .price.h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-weight: 600;
    font-size: 1.1rem;
}
/* push the button to the bottom so all cards align */
#result-wrapper .verdant-card .verdant-zum-artikel {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: .65rem 1rem;
    border-radius: 9999px;
    background: var(--v-primary);
    color: var(--v-on-primary);
    font-weight: 600;
    font-size: .85rem;
    text-align: center;
    border: 1px solid var(--v-primary);
    transition: background .2s ease, color .2s ease;
}
#result-wrapper .verdant-card .verdant-zum-artikel:hover {
    background: transparent;
    color: var(--v-primary);
    text-decoration: none;
}

/* ===================================================================== */
/*  SHIPPING-COST ESTIMATOR (basket) — match Verdant style               */
/* ===================================================================== */
.basket .shipping-calculator-main {
    background: var(--v-surface-low);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: 1.25rem 1.35rem;
}
.basket .shipping-calculator-main-heading {
    font-family: var(--v-font-head);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--v-primary);
    margin-bottom: 1rem;
}
/* align country / plz / button on one baseline */
.basket .shipping-calculator-main .form-row { align-items: flex-end; }
.basket .shipping-calculator-main .form-group,
.basket .shipping-calculator-main .formgroup { margin-bottom: 0; }

/* inputs → white, rounded */
.basket .shipping-calculator-main #country,
.basket .shipping-calculator-main #plz {
    background-color: #fff;
    border: 1px solid var(--v-outline-variant);
    border-radius: var(--v-radius);
    height: calc(2.75rem + 2px);
    padding: .55rem .9rem;
    color: var(--v-on-surface);
}
.basket .shipping-calculator-main #country:focus,
.basket .shipping-calculator-main #plz:focus {
    border-color: var(--v-primary);
    box-shadow: 0 0 0 .15rem rgba(74, 101, 79, .15);
}
.basket .shipping-calculator-main .custom-select {
    background-position: right .8rem center;
}

/* estimate button → primary pill, full height match */
.basket .shipping-calculator-main [name='versandrechnerBTN'] {
    border-radius: var(--v-radius);
    height: calc(2.75rem + 2px);
    background: var(--v-primary);
    border: 1px solid var(--v-primary);
    color: var(--v-on-primary);
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.basket .shipping-calculator-main [name='versandrechnerBTN']:hover {
    background: transparent;
    color: var(--v-primary);
}
/* drop the trailing divider line */
.basket .shipping-calculator-hr { display: none; }

/* ===================================================================== */
/*  REGISTER + KONTAKT forms — Verdant style                              */
/* ===================================================================== */
/* page headings */
#content .title.h2,
#new_customer > [class*="col"] > h1 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    margin-bottom: 1.25rem;
}

/* form as a soft card */
.register-form,
.contact-form {
    background: var(--v-surface-low);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: 1.75rem;
}

/* no divider lines — spacing carries the structure */
.register-form hr,
.contact-form hr { display: none !important; }
.register-form fieldset,
.contact-form fieldset { margin-bottom: 1.75rem; }
.register-form fieldset:last-of-type,
.contact-form fieldset:last-of-type { margin-bottom: 0; }

/* section legends */
.register-form .h3,
.contact-form .h3 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    font-size: 1.1rem;
    margin-bottom: .85rem;
}
.contact-form .required-info {
    color: var(--v-on-surface-variant);
    font-size: .82rem;
    margin-bottom: 1rem;
}

/* inputs — keep NOVA floating-label sizing, restyle only the skin */
.register-form .form-control,
.register-form .custom-select,
.register-form textarea,
.contact-form .form-control,
.contact-form .custom-select,
.contact-form textarea {
    background-color: #fff;
    border: 1px solid var(--v-outline-variant);
    border-radius: var(--v-radius);
}
.register-form .form-control:focus,
.register-form .custom-select:focus,
.register-form textarea:focus,
.contact-form .form-control:focus,
.contact-form .custom-select:focus,
.contact-form textarea:focus {
    border-color: var(--v-primary);
    box-shadow: 0 0 0 .15rem rgba(74, 101, 79, .15);
}

/* submit → primary pill, inverts on hover */
.register-form .btn-primary,
.contact-form .btn-primary {
    background: var(--v-primary);
    border: 1px solid var(--v-primary);
    color: var(--v-on-primary);
    border-radius: var(--v-radius);
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.register-form .btn-primary:hover,
.contact-form .btn-primary:hover {
    background: transparent;
    color: var(--v-primary);
}

/* privacy link */
.register-form .checkout-register-form-buttons-privacy a,
.contact-form .contact-form-privacy a { color: var(--v-secondary); }

/* ===================================================================== */
/*  BASKET — collapsible shipping-estimator + coupon (<details>)          */
/*  Mobile: tap to expand. Desktop (>=992px): always open, summary hidden */
/* ===================================================================== */
.verdant-mc {
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    background: var(--v-surface-low);
    margin-bottom: 1rem;
    overflow: hidden;
}
.verdant-mc > summary {
    list-style: none;
    cursor: pointer;
    padding: .95rem 1.15rem;
    font-weight: 600;
    color: var(--v-primary);
    display: flex; align-items: center; gap: .5rem;
}
.verdant-mc > summary::-webkit-details-marker { display: none; }
.verdant-mc > summary::after {
    content: "\f078";                 /* chevron-down */
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    margin-left: auto; font-size: .8rem;
    transition: transform .2s ease;
}
.verdant-mc[open] > summary::after { transform: rotate(180deg); }
.verdant-mc-body { padding: 0 1.15rem 1.15rem; }

@media (min-width: 992px) {
    /* desktop: render exactly as before — no toggle, content always shown */
    .verdant-mc { border: 0; background: transparent; border-radius: 0; overflow: visible; margin-bottom: 0; }
    .verdant-mc > summary { display: none; }
    .verdant-mc > .verdant-mc-body { display: block !important; padding: 0; }
}

/* ===================================================================== */
/*  BASKET — compact mobile cart item cards (image left, stacked right)   */
/* ===================================================================== */
@media (max-width: 991px) {
    .basket .basket-items .cart-items-body {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: clamp(.6rem, 3vw, 1rem);
        padding: clamp(.7rem, 3vw, 1rem);
        margin-bottom: .85rem;
    }
    .basket .cart-items-image {
        flex: 0 0 clamp(72px, 24vw, 120px);
        max-width: clamp(72px, 24vw, 120px);
        padding: 0;
    }
    .basket .cart-items-image img {
        width: 100%;
        height: clamp(72px, 24vw, 120px);
    }
    /* main column */
    .basket .cart-items-body > .col { flex: 1 1 auto; min-width: 0; padding: 0; }

    /* right side: name pinned top, qty (left) + price (right) pinned bottom
       so the bottom row aligns with the image base. Trash floats to the
       card's top-right corner (absolute). Explicit grid lines — no :has. */
    .basket .basket-items .cart-items-body { position: relative; }
    .basket .basket-items { margin-bottom: 1rem !important; }
    .basket .cart-items-body .align-items-baseline {
        display: grid !important;
        grid-template-columns: 1fr auto;
        column-gap: .6rem;
        row-gap: clamp(.4rem, 2vw, .75rem);
        align-items: center;
        margin: 0 !important;
        min-height: clamp(72px, 24vw, 120px);
        align-content: space-between;
    }
    .basket .cart-items-body .align-items-baseline > [class*="col"] {
        padding: 0 !important; margin: 0 !important;
        max-width: none !important; width: auto !important;
        flex: none !important; min-width: 0;
    }
    /* name = the col that is none of the known ones → row 1, full width.
       pad-right leaves room for the corner trash icon. */
    .basket .cart-items-body .align-items-baseline > .col:not(.cart-items-single-price):not(.cart-items-quantity):not(.cart-items-price):not(.cart-items-delete):not(.ml-auto-util) {
        grid-column: 1 / -1; grid-row: 1; justify-self: start; padding-right: 1.9rem !important;
    }
    .basket .cart-items-quantity { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; }
    .basket .cart-items-price    { grid-column: 2; grid-row: 2; justify-self: end;   align-self: end; }
    /* trash -> subtle round icon button, card top-right corner */
    .basket .cart-items-delete {
        position: absolute;
        top: clamp(.45rem, 2.5vw, .8rem); right: clamp(.45rem, 2.5vw, .8rem);
        z-index: 2; grid-row: 1;
    }

    /* responsive sizing */
    .basket .cart-items-name {
        font-size: clamp(.95rem, 4vw, 1.2rem);
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .basket .cart-items-price .price_overall,
    .basket .cart-items-price .text-accent {
        font-size: clamp(1.1rem, 5vw, 1.45rem);
        line-height: 1;
    }
    .basket .cart-items-quantity .form-counter {
        max-width: clamp(96px, 30vw, 130px);
    }
    .basket .cart-items-quantity .form-counter .quantity,
    .basket .cart-items-quantity .form-counter .btn {
        font-size: clamp(.78rem, 3.2vw, .95rem);
    }

    /* hide verbose info on mobile (incl. the whole product-data column) */
    .basket .cart-items-body .align-items-baseline > .ml-auto-util,
    .basket .cart-items-body .list-unstyled,
    .basket .cart-items-single-price,
    .basket .cart-items-price-text,
    .basket .cart-items-body .config-items,
    .basket .cart-items-body .partlist-items { display: none !important; }

    /* delete -> icon only: drop wishlist link + the "Löschen" text label */
    .basket .cart-items-delete > :not(.cart-items-delete-button) { display: none !important; }
    .basket .cart-items-delete-button {
        font-size: 0 !important; line-height: 1; min-width: 0;
        padding: .4rem !important; margin: 0;
        color: var(--v-on-surface-variant);
        border-radius: 9999px;
        transition: color .15s, background-color .15s;
    }
    .basket .cart-items-delete-button:hover { color: var(--v-error); background: rgba(0,0,0,.05); }
    .basket .cart-items-delete-button .fas { font-size: clamp(.95rem, 4vw, 1.1rem); }

    /* estimator: hide its inner heading (the <summary> already labels it) */
    .verdant-mc-ship .shipping-calculator-main-heading { display: none; }
    .verdant-mc-ship .shipping-calculator-main { background: transparent; border: 0; padding: 0; }
}

/* mobile basket: vertical rhythm between the stacked sections (compact) */
.verdant-basket-mobile .basket_wrapper { margin-bottom: .6rem; }
.verdant-basket-mobile .verdant-ship-mount { margin: 0 0 .6rem; }
.verdant-basket-mobile .verdant-mob-secondary { margin: 0 0 .6rem; }
.verdant-basket-mobile .verdant-mob-summary { margin-top: 0; margin-bottom: .6rem; }
.verdant-basket-mobile .verdant-mc { margin-bottom: .6rem; }
.verdant-basket-mobile .basket-heading { margin-bottom: .6rem; }

/* ---- mobile coupon + shipping-calc: Verdant input/button design ---- */
/* coupon: drop the inner card chrome, fields sit straight in the panel body */
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon,
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon-body {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon-group { margin-bottom: .6rem; }

/* shared field look: rounded, soft border, comfy padding, full width */
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon-input,
.verdant-basket-mobile .verdant-mc-ship .form-control,
.verdant-basket-mobile .verdant-mc-ship .custom-select {
    width: 100%;
    height: auto;
    padding: .7rem 1rem;
    background-color: #fff !important;
    color: var(--v-on-surface) !important;
    border: 1px solid var(--v-outline-variant) !important;
    border-radius: var(--v-radius);
}
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon-input::placeholder,
.verdant-basket-mobile .verdant-mc-ship .form-control::placeholder { color: var(--v-on-surface-variant) !important; }
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon-input:focus,
.verdant-basket-mobile .verdant-mc-ship .form-control:focus,
.verdant-basket-mobile .verdant-mc-ship .custom-select:focus {
    border-color: var(--v-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--v-primary) 18%, transparent);
    outline: 0;
}

/* shared button: filled primary pill, full width */
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon-btn,
.verdant-basket-mobile .verdant-mc-ship [name="versandrechnerBTN"] {
    width: 100%;
    margin: 0;
    padding: .75rem 1rem;
    font-weight: 600;
    border-radius: var(--v-radius);
    background: var(--v-primary) !important;
    border: 1px solid var(--v-primary) !important;
    color: #fff !important;
}
.verdant-basket-mobile .verdant-mc-coupon .verdant-coupon-btn:hover,
.verdant-basket-mobile .verdant-mc-ship [name="versandrechnerBTN"]:hover {
    background: var(--v-secondary) !important;
    border-color: var(--v-secondary) !important;
}

/* shipping-calc: stack country / PLZ / button with even spacing */
.verdant-basket-mobile .verdant-mc-ship .form-row { margin: 0; row-gap: .6rem; }
.verdant-basket-mobile .verdant-mc-ship .form-row > [class*="col"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
}
.verdant-basket-mobile .verdant-mc-ship .shipping-calculator-main { background: transparent; border: 0; padding: 0; }
.verdant-basket-mobile .verdant-mc-ship .shipping-calculator-main-heading,
.verdant-basket-mobile .verdant-mc-ship .col-form-label { display: none; }
.verdant-basket-mobile .verdant-mc-ship .form-group { margin: 0; }

/* order summary — flex rows (no bootstrap row/col), layout only */
.verdant-mob-summary { width: 100%; }
.verdant-summary-card { display: flex; flex-direction: column; gap: .7rem; }
.verdant-summary-content { display: flex; flex-direction: column; gap: .45rem; }
.verdant-summary-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.verdant-summary-label { min-width: 0; flex: 1; }
.verdant-summary-value { flex-shrink: 0; text-align: right; white-space: nowrap; }
.verdant-summary-total { padding-top: .75rem; margin-top: .25rem; }
.verdant-summary-total .verdant-summary-label,
.verdant-summary-total .verdant-summary-value { font-size: 1.05rem; font-weight: 600; }
.verdant-summary-shipping-note { margin-top: .25rem; }
.verdant-summary-checkout { width: 100%; }
.verdant-checkout-btn { width: 100%; display: flex; align-items: center; justify-content: center; }
.verdant-checkout-trust { display: flex; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.verdant-trust-icons { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.verdant-trust-text { line-height: 1.3; }

/* ===================================================================== */
/*  VERDANT MOBILE cart cards (own markup: basket/verdant_mobile_items)   */
/*  Scoped to .verdant-mc-items so desktop cart_items.tpl is untouched.   */
/* ===================================================================== */
.verdant-mc-items .vmc-list { margin: 0; }

.verdant-mc-items .vmc-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: .65rem;
    background: #fff;
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 8px 24px -14px rgba(27, 48, 34, .10);
    padding: .6rem;
    margin-bottom: .55rem;
}
.verdant-mc-items .vmc-card:last-child { margin-bottom: 0; }

/* image */
.verdant-mc-items .vmc-media {
    flex: 0 0 clamp(76px, 26vw, 116px);
    width: clamp(76px, 26vw, 116px);
}
.verdant-mc-items .vmc-media-link { display: block; height: 100%; }
.verdant-mc-items .vmc-media img,
.verdant-mc-items .vmc-media picture {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--v-radius);
    background: var(--v-surface);
}

/* body: name top, foot (qty+price) bottom */
.verdant-mc-items .vmc-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding-right: 1.7rem; /* room for corner trash */
}

.verdant-mc-items .vmc-name {
    font-family: var(--v-font-head);
    font-weight: 500;
    font-size: clamp(.98rem, 4vw, 1.2rem);
    line-height: 1.25;
    color: var(--v-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.verdant-mc-items .vmc-name:hover { color: var(--v-secondary); }

.verdant-mc-items .vmc-variations {
    font-size: .78rem;
    line-height: 1.3;
    color: var(--v-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* bottom row — pinned to card base via margin-top:auto */
.verdant-mc-items .vmc-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding-top: .1rem;
}

/* qty stepper -> pill (reuses NOVA .form-counter JS hooks) */
.verdant-mc-items .vmc-counter {
    border: 1px solid var(--v-outline-variant);
    border-radius: 9999px;
    overflow: hidden;
    background: var(--v-bg);
    width: clamp(104px, 32vw, 128px);
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
.verdant-mc-items .vmc-counter .btn {
    color: var(--v-on-surface-variant);
    border: 0;
    background: transparent;
    padding: .3rem .55rem;
}
.verdant-mc-items .vmc-counter .btn:hover { color: var(--v-primary); }
.verdant-mc-items .vmc-counter .quantity {
    border: 0;
    background: transparent;
    text-align: center;
    padding: .25rem 0;
    font-size: clamp(.82rem, 3.4vw, .95rem);
    min-width: 0;
}

.verdant-mc-items .vmc-gift-badge {
    font-size: .78rem;
    color: var(--v-on-surface-variant);
}

/* price -> serif accent, prominent. order:-1 puts it LEFT, qty stepper RIGHT */
.verdant-mc-items .vmc-price {
    order: -1;
    font-family: var(--v-font-head);
    font-weight: 600;
    color: var(--v-primary);
    font-size: clamp(1.12rem, 5vw, 1.5rem);
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* delete -> subtle round icon, card top-right corner */
.verdant-mc-items .vmc-remove {
    position: absolute;
    top: clamp(.45rem, 2.5vw, .8rem);
    right: clamp(.45rem, 2.5vw, .8rem);
    z-index: 2;
    line-height: 1;
    padding: .4rem;
    min-width: 0;
    color: var(--v-on-surface-variant);
    border-radius: 9999px;
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.verdant-mc-items .vmc-remove:hover { color: var(--v-error); background: rgba(0,0,0,.05); }
.verdant-mc-items .vmc-remove .fas { font-size: clamp(.95rem, 4vw, 1.1rem); }

/* on desktop the mobile basket file is not used; keep cards full-width anyway */
@media (min-width: 992px) {
    .verdant-mc-items .vmc-media { flex-basis: 116px; width: 116px; }
}

/* =====================================================================
   CONTENT PAGES — Kontakt / Newsletter / Widerruf / Versand (Verdant)
   Tokens (--v-*) are defined globally on :root, so these work outside
   #result-wrapper too.
   ===================================================================== */

/* ---- shared page hero ---- */
.verdant-page-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1.25rem 0 2rem;
    padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
    border-radius: var(--v-radius-lg);
    background: linear-gradient(135deg, var(--v-primary) 0%, var(--v-secondary) 120%);
    color: #fff;
    overflow: hidden;
}
.verdant-page-hero .vph-text { max-width: 42rem; }
.verdant-page-hero .vph-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--v-font-body);
    font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    opacity: .85; margin-bottom: .5rem;
}
.verdant-page-hero .vph-title {
    font-family: var(--v-font-head);
    color: #fff !important;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.05; font-weight: 600; margin: 0;
}
.verdant-page-hero .vph-lead { margin: .75rem 0 0; opacity: .92; font-size: 1.02rem; line-height: 1.5; }

.verdant-page-hero .vph-cards {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .6rem; min-width: 15rem;
}
.verdant-page-hero .vph-card {
    display: flex; align-items: center; gap: .8rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--v-radius);
    padding: .65rem .9rem;
    backdrop-filter: blur(2px);
}
.verdant-page-hero .vph-card > i { font-size: 1.15rem; width: 1.4rem; text-align: center; opacity: .95; }
.verdant-page-hero .vph-card-h { display: block; font-weight: 600; font-size: .92rem; }
.verdant-page-hero .vph-card-s { display: block; font-size: .78rem; opacity: .82; }
@media (max-width: 767px) {
    .verdant-page-hero { flex-direction: column; align-items: stretch; }
    .verdant-page-hero .vph-cards { flex-direction: column; }
}

/* ---- Kontakt form ---- */
.contact-form {
    background: var(--v-bg);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: 0 6px 30px rgba(6,27,14,.05);
}
.contact-form .required-info { color: var(--v-on-surface-variant); font-size: .85rem; }
.contact-form fieldset .h3 {
    font-family: var(--v-font-head);
    color: var(--v-primary);
    display: flex; align-items: center; gap: .6rem;
}
.contact-form .verdant-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--v-secondary-container); color: var(--v-on-primary-fixed);
    font-family: var(--v-font-body); font-weight: 700; font-size: .95rem;
}
.contact-form .contact-form-hr { border-color: var(--v-surface-variant); }
.contact-form-privacy a { color: var(--v-secondary); font-weight: 600; }

/* ---- Newsletter tabs ---- */
.verdant-nl-tabs { margin-top: .5rem; }
.verdant-tabs {
    display: flex; gap: .5rem; border: 0; padding: .35rem;
    background: var(--v-surface-low);
    border-radius: var(--v-radius); margin-bottom: 1.25rem;
}
.verdant-tabs .nav-item { flex: 1 1 0; margin: 0; }
.verdant-tab {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; padding: .7rem 1rem;
    border-radius: calc(var(--v-radius) - .35rem);
    font-weight: 600; color: var(--v-on-surface-variant);
    text-decoration: none; transition: background-color .15s, color .15s;
}
.verdant-tab:hover { color: var(--v-primary); }
.verdant-tab.active {
    background: var(--v-primary); color: #fff;
    box-shadow: 0 3px 12px rgba(6,27,14,.18);
}
.verdant-nl-card {
    background: var(--v-bg);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.verdant-nl-desc { color: var(--v-on-surface-variant); margin-bottom: 1.25rem; }

/* ---- Widerruf ---- */
.verdant-withdrawal .verdant-withdrawal-intro {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--v-surface-low);
    border-left: 4px solid var(--v-secondary);
    border-radius: var(--v-radius);
    padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.verdant-withdrawal .verdant-withdrawal-intro > i { color: var(--v-secondary); font-size: 1.4rem; margin-top: .2rem; }
.verdant-withdrawal .vwd-title { font-family: var(--v-font-head); color: var(--v-primary); margin: 0 0 .25rem; font-size: 1.4rem; }
.verdant-withdrawal .vwd-lead { margin: 0; color: var(--v-on-surface-variant); }
.verdant-withdrawal .withdrawal-form {
    background: var(--v-bg);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* ---- Versand (page-shipping) card — mirrors product price_wrapper ---- */
.page-shipping .verdant-shipping-card,
.verdant-shipping-card {
    background: var(--v-bg);
    border: 1px solid var(--v-surface-variant);
    border-radius: var(--v-radius-lg);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    box-shadow: 0 6px 30px rgba(6,27,14,.05);
}
.verdant-shipping-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.verdant-shipping-head .vsc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--v-secondary-container); color: var(--v-on-primary-fixed);
}
.verdant-shipping-head .vsc-title { font-family: var(--v-font-head); color: var(--v-primary); font-size: 1.3rem; font-weight: 600; }
/* shipping result table — like the product .bulk-prices table */
.page-shipping table,
.verdant-shipping-card table {
    border-radius: var(--v-radius); overflow: hidden;
}
.page-shipping table thead th,
.verdant-shipping-card table thead th {
    background: var(--v-surface-low); color: var(--v-primary);
    font-family: var(--v-font-head); border: 0;
}
.page-shipping .btn-primary, .verdant-shipping-card .btn-primary { border-radius: var(--v-radius); }

/* ---- rounded form controls on all Verdant content pages ---- */
.contact-form .form-control,
.contact-form .custom-select,
.contact-form textarea,
.verdant-nl-card .form-control,
.verdant-nl-card .custom-select,
.verdant-withdrawal .form-control,
.verdant-withdrawal .custom-select,
.verdant-withdrawal textarea,
.verdant-shipping-card .form-control,
.verdant-shipping-card .custom-select,
.page-shipping .form-control,
.page-shipping .custom-select {
    border-radius: .65rem !important;
    border: 1px solid var(--v-outline-variant);
    padding: .6rem .85rem;
    height: auto;
    background-color: #fff;
}
.contact-form .form-control:focus,
.verdant-nl-card .form-control:focus,
.verdant-withdrawal .form-control:focus,
.verdant-shipping-card .form-control:focus,
.page-shipping .form-control:focus,
.contact-form .custom-select:focus,
.verdant-shipping-card .custom-select:focus,
.page-shipping .custom-select:focus {
    border-color: var(--v-secondary);
    box-shadow: 0 0 0 3px rgba(74,101,79,.15);
}
.verdant-shipping-card .btn,
.page-shipping .btn { border-radius: .65rem !important; }
.verdant-shipping-empty { color: var(--v-on-surface-variant); margin: 0; }

/* =====================================================================
   HEADER ICON DROPDOWNS — restore real buttons inside account/wishlist
   panels. The generic ".nav-icons .btn" reset (flat, primary text, tiny
   padding) is meant for the icon TRIGGERS only, not the panel buttons.
   ===================================================================== */
.nav-icons .dropdown-menu .btn-primary,
.nav-icons .dropdown-body .btn-primary,
.nav-icons #submit-btn,
.nav-icons .dropdown-menu .btn-secondary,
.nav-icons .dropdown-body .btn-secondary {
    color: #fff !important;
    background: var(--v-primary) !important;
    border: 1px solid var(--v-primary) !important;
    padding: .6rem 1rem !important;
    border-radius: .65rem !important;
    line-height: 1.3 !important;
}
.nav-icons .dropdown-menu .btn-primary:hover,
.nav-icons .dropdown-body .btn-primary:hover,
.nav-icons #submit-btn:hover {
    background: var(--v-secondary) !important;
    border-color: var(--v-secondary) !important;
    color: #fff !important;
}
.nav-icons .dropdown-menu .btn-outline-primary,
.nav-icons .dropdown-body .btn-outline-primary {
    color: var(--v-primary) !important;
    border: 1px solid var(--v-primary) !important;
    padding: .6rem 1rem !important;
    border-radius: .65rem !important;
}
/* rounded inputs inside the quick-login dropdown too */
.nav-icons .dropdown-menu .form-control,
.nav-icons .dropdown-body .form-control {
    border-radius: .65rem !important;
    padding: .55rem .8rem !important;
    height: auto !important;
    color: var(--v-on-surface) !important;
}

/* =====================================================================
   SLICK ARROWS — primary/secondary, always visible (override my-nova.css)
   ===================================================================== */
.carousel .slick-arrow,
.slick-slider .slick-arrow {
    opacity: 1 !important;
    width: 2.75rem; height: 2.75rem; padding: 0 !important;
    border-radius: 50% !important;
    background-color: var(--v-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(6,27,14,.22);
    display: flex !important; align-items: center; justify-content: center;
    transition: background-color .15s, transform .15s;
}
/* glyph already rendered by my-nova.css via ::after (\f053/\f054) — just recolor/size it */
.carousel .slick-arrow::after,
.slick-slider .slick-arrow::after {
    color: #fff !important;
    font-size: 1rem !important;
    line-height: 1;
}
.carousel .slick-arrow:hover,
.slick-slider .slick-arrow:hover {
    background-color: var(--v-secondary) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.06);
}
.carousel:hover .slick-arrow { opacity: 1; }
/* keep the lightbox arrows as the parent theme had them */
.slick-lightbox .slick-arrow { background: transparent !important; box-shadow: none; }

/* =====================================================================
   CONSENT MANAGER MODAL — Verdant design (overrides my-nova.css)
   ===================================================================== */
#consent-manager,
#consent-manager strong,
#consent-manager a { font-family: var(--v-font-body); }
#consent-manager { color: var(--v-on-surface); }

.consent-modal { background-color: rgba(6,27,14,.55) !important; backdrop-filter: blur(3px); }
.consent-modal-content {
    max-width: 42rem;
    border-radius: var(--v-radius-lg) !important;
    padding: clamp(1.5rem, 4vw, 2.5rem) !important;
    background: var(--v-bg) !important;
    box-shadow: 0 20px 60px rgba(6,27,14,.28) !important;
}
.consent-modal-content::after { display: none !important; } /* drop the oval drop-shadow hack */

/* heading + icon */
.consent-display-1,
.consent-display-2,
.consent-display-3,
#consent-manager strong {
    font-family: var(--v-font-head);
    color: var(--v-primary) !important;
}
.consent-modal-icon {
    color: #fff !important;
    background: var(--v-primary) !important;
}
.consent-modal-icon svg { fill: #fff !important; }

/* links */
#consent-manager a { color: var(--v-secondary) !important; font-weight: 600; }

/* close button */
.consent-modal-close:hover,
.consent-modal-close:focus { color: var(--v-primary) !important; }

/* hr */
#consent-manager hr { border-bottom-color: var(--v-surface-variant) !important; }

/* buttons → Verdant pill */
.consent-btn {
    border-radius: .65rem !important;
    padding: .65rem 1.25rem !important;
    font-weight: 600 !important;
    font-family: var(--v-font-body) !important;
}
.consent-btn-primary,
.consent-btn-tertiary {
    background-color: var(--v-primary) !important;
    border-color: var(--v-primary) !important;
    color: #fff !important;
}
.consent-btn-primary:hover,
.consent-btn-primary:focus,
.consent-btn-tertiary:hover,
.consent-btn-tertiary:focus {
    background-color: var(--v-secondary) !important;
    border-color: var(--v-secondary) !important;
    color: #fff !important;
}
.consent-btn-secondary,
.consent-btn-outline-primary,
.consent-btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--v-primary) !important;
    color: var(--v-primary) !important;
}
.consent-btn-secondary:hover,
.consent-btn-outline-primary:hover,
.consent-btn-outline-secondary:hover {
    background-color: var(--v-primary) !important;
    color: #fff !important;
}

/* floating re-open button (bottom-left) → circular primary FAB, white icon */
#consent-settings-btn {
    background: var(--v-primary) !important;
    border-color: var(--v-primary) !important;
    color: #fff !important;
    width: 3rem !important; height: 3rem !important;
    padding: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
    border-radius: 50% !important;
    box-shadow: 0 6px 20px rgba(6,27,14,.25);
}
#consent-settings-btn:hover { background: var(--v-secondary) !important; border-color: var(--v-secondary) !important; }
#consent-settings-btn .consent-icon { width: 1.4rem; height: 1.4rem; margin: 0; }
#consent-settings-btn .consent-icon svg { width: 100%; height: 100%; fill: #fff !important; }

/* toggle switches → primary when on, secondary focus ring */
.consent-switch .consent-label { color: var(--v-on-surface) !important; }
.consent-switch .consent-input:checked ~ .consent-label::before { background-color: var(--v-primary) !important; }
.consent-switch .consent-input:focus + .consent-label::before { outline-color: var(--v-secondary) !important; }
/* ============================================================
   Bestellabschluss / order-completed success page (Verdant)
   Scoped to .order-completed. Card + animated check live in
   checkout/inc_order_completed.tpl (.verdant-oc*).
   ============================================================ */
.order-completed {
    --v-success: #1f8a4c;
    --v-success-soft: #e7f5ec;
    max-width: 640px;
    margin-inline: auto;
}

/* heading from NOVA order_completed.tpl */
.order-completed h1 {
    font-family: var(--v-font-head);
    text-align: center;
    color: var(--v-on-surface);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin: 1.5rem 0 .5rem;
}

/* the confirmation card */
.verdant-oc {
    background: #fff;
    border: 1px solid var(--v-outline-variant);
    border-radius: var(--v-radius-lg);
    box-shadow: 0 10px 30px rgba(6, 27, 14, .08);
    padding: 2.5rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

/* animated check badge */
.verdant-oc-badge {
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--v-success-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.verdant-oc-check {
    width: 3.5rem;
    height: 3.5rem;
}
.verdant-oc-check-circle {
    stroke: var(--v-success);
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: verdant-oc-stroke .6s cubic-bezier(.65, 0, .45, 1) forwards;
}
.verdant-oc-check-mark {
    stroke: var(--v-success);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: verdant-oc-stroke .35s cubic-bezier(.65, 0, .45, 1) .55s forwards;
}
@keyframes verdant-oc-stroke {
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .verdant-oc-check-circle,
    .verdant-oc-check-mark { animation: none; stroke-dashoffset: 0; }
}

.verdant-oc-note {
    color: var(--v-on-surface-variant);
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 auto 1.75rem;
    max-width: 42ch;
}

/* details as clean key/value rows */
.verdant-oc-details {
    margin: 0;
    text-align: left;
    border-top: 1px solid var(--v-outline-variant);
}
.verdant-oc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .9rem .25rem;
    border-bottom: 1px solid var(--v-outline-variant);
}
.verdant-oc-row dt {
    color: var(--v-on-surface-variant);
    font-weight: 500;
    margin: 0;
}
.verdant-oc-row dd {
    margin: 0;
    font-weight: 600;
    color: var(--v-on-surface);
    text-align: right;
}

/* center the continue-shopping button under the card */
.order-completed .row:last-child {
    justify-content: center;
}

/* ============================================================
   Order-progress timeline — account order detail (?bestellung=X)
   Markup: account/order_details.tpl (.verdant-tl*).
   Steps: Bestellt → vorbereitet → Versendet → Geliefert.
   --tl-reached (0-3) set inline = index of last done step.
   ============================================================ */
.verdant-tl {
    --tl-green: #1b6b3a;
    --tl-grey: #c3c8c1;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: 1.5rem 0 2.5rem;
    padding: 0;
    counter-reset: none;
}
.verdant-tl-step {
    position: relative;
    text-align: center;
    padding: 0 .5rem;
    min-width: 0;
}
/* connector line: drawn from each dot to the next */
.verdant-tl-step::before {
    content: "";
    position: absolute;
    top: .6rem;            /* dot center */
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--tl-grey);
    z-index: 0;
}
.verdant-tl-step:last-child::before { display: none; }
/* a segment is green when the NEXT step is also reached */
.verdant-tl-step.is-done:not(.is-current)::before { background: var(--tl-green); }

/* dot */
.verdant-tl-dot {
    position: relative;
    z-index: 1;
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 auto .65rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--tl-grey);
    transition: background .2s, border-color .2s;
}
/* done intermediate steps: green ring + check */
.verdant-tl-step.is-done .verdant-tl-dot {
    background: var(--tl-green);
    border-color: var(--tl-green);
}
.verdant-tl-step.is-done .verdant-tl-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: .3rem;
    height: .55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg);
}
/* current step: bigger solid dot, no check */
.verdant-tl-step.is-current .verdant-tl-dot {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -.15rem;
    background: var(--tl-green);
    border-color: var(--tl-green);
    box-shadow: 0 0 0 4px rgba(27, 107, 58, .15);
}
.verdant-tl-step.is-current .verdant-tl-dot::after { display: none; }

.verdant-tl-label {
    display: block;
    font-size: .9rem;
    line-height: 1.25;
    color: var(--v-on-surface-variant);
}
.verdant-tl-step.is-current .verdant-tl-label {
    font-weight: 700;
    color: var(--v-on-surface);
}
.verdant-tl-date {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    color: var(--v-on-surface-variant);
}

/* cancelled order */
.verdant-tl-cancelled {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.5rem 0 2rem;
    padding: .9rem 1.1rem;
    border-radius: var(--v-radius);
    background: #fdecec;
    color: var(--v-error);
    font-weight: 600;
}

/* mobile: stack vertical with a left rail */
@media (max-width: 575px) {
    .verdant-tl {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        row-gap: 1.5rem;
        padding-left: .5rem;
    }
    .verdant-tl-step {
        display: grid;
        grid-template-columns: 1.5rem 1fr;
        gap: 0 .9rem;
        text-align: left;
        align-items: start;
        padding: 0;
    }
    .verdant-tl-dot { margin: 0; }
    .verdant-tl-step::before {
        top: 1.2rem;
        left: .6rem;
        width: 2px;
        height: calc(100% + 1.5rem);
    }
    .verdant-tl-label,
    .verdant-tl-date { grid-column: 2; }
}

/* ============================================================
   Orders list — Meine Bestellungen (account/orders.tpl)
   ============================================================ */
/* card: match page surface, soft border, no bluish cap bg */
.account-orders-item {
    background: #fff;
    border: 1px solid var(--v-outline-variant) !important;
    border-radius: var(--v-radius-lg) !important;
    box-shadow: 0 4px 16px rgba(6, 27, 14, .05);
    overflow: hidden;
}
.account-orders-item .card-header {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 1.1rem 1.35rem;
}
/* kill any pill/bg behind the date cell */
.account-orders-item .card-header strong {
    background: transparent !important;
}
.account-orders-item .card-header strong .fa-calendar-alt,
.account-orders-item .card-header strong .far { color: var(--v-secondary); }

/* eye / action icons → brand colour */
.account-orders-item a .fa-eye,
.account-orders-item a .fa-retweet { color: var(--v-secondary); }
.account-orders-item a:hover .fa-eye,
.account-orders-item a:hover .fa-retweet { color: var(--v-primary); }

/* Verdant secondary button (rounded, soft green) — Zurück */
.verdant-btn-secondary {
    background-color: var(--v-secondary-container);
    border: 1px solid transparent;
    color: var(--v-on-primary-fixed);
    border-radius: var(--v-radius);
    font-weight: 600;
    padding: .6rem 1.4rem;
}
.verdant-btn-secondary:hover,
.verdant-btn-secondary:focus {
    background-color: var(--v-secondary);
    color: #fff;
}