/** Shopify CDN: Minification failed

Line 22:35 Unexpected "/"
Line 23:22 Unexpected "("
Line 23:54 Unterminated string token

**/
html {
    font-size: 68.75%; /* = 11px at default browser 16px; allows user font scaling (WCAG 1.4.4) */
    overflow-x: hidden; /* Cart-Drawer (.global-drawer__content) ragt über Viewport → horizontales Scrollen verhindern */
}

.appstle_one_time_details_wrapper {
    display: none !important;
    pointer-events: none !important;
}

.appstle_subscription_wrapper_option:last-child {
    display: none !important;
}

/* Override .richtext-block p/h*/ul/ol { margin-bottom:0 } from theme.min.css
   Higher specificity (0,2,1) beats theme's (0,1,1) */
.collapsible-content .richtext-block p,
.collapsible-content .richtext-block ul,
.collapsible-content .richtext-block ol {
    margin-bottom: 15px;
}

.collapsible-content .richtext-block h1,
.collapsible-content .richtext-block h2,
.collapsible-content .richtext-block h3,
.collapsible-content .richtext-block h4,
.collapsible-content .richtext-block h5,
.collapsible-content .richtext-block h6 {
    margin-bottom: 0.625rem;
}

/* FAQ Metafeld-Content: Zeilenumbrüche als Absätze rendern (Fallback falls newline_to_br nicht greift) */
[data-wetheme-section-type="product-faq"] .collapsible-content .richtext-block {
    white-space: pre-line;
}

ul {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 20px !important;
    padding-left: 0;
}

ul li {
    list-style-position: outside !important;
}

/* --- 1. Gemeinsame Basiswerte (Abstraktion) --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    /* Deine definierten Abstände und Gewichtung */
    font-weight: 700;
    margin-top: 1.75rem !important;
    /* Viel Platz nach oben für Trennung */
    margin-bottom: 0.625rem !important;
    /* Wenig Platz nach unten zum Text */
    margin-left: 0;
    margin-right: 0;

    /* Farbe (optional, hier dunkelgrau als Standard) */
    color: #333;

    /* "Tight" Line-Height für Überschriften ist meist besser als fixe rem Werte */
    line-height: 1.2;
}

.active label {
    background: #838f58 !important;
    outline-color: #838f58 !important;
    border-color: #838f58 !important;
    color: #ffffff !important;
}

.btn {
    background: #c8801c;
}

.custom-field-item {
    background-color: #ffffff;
    border-color: #838f58;
}

.custom-field-item:hover {
    background-color: #9ca676 !important;
    border-color: #9ca676 !important;
    color: #1a1a1a; /* #1a1a1a on #9ca676 = ~6.5:1 contrast (WCAG AA) */
}


.custom-field-item .custom-field-content {
    border-color: #838f58 !important;
    border-radius: 5px !important;
}

.custom-field-item:hover .custom-field-content {
    border-color: #9ca676 !important;
}

/* Swatch Labels - Salbei Farben */
.swatch:not(.is-color-swatch):not(.linked-products-swatch) label {
    border-radius: 5px !important;
    border-color: #838f58 !important;
}

[data-wetheme-section-type=template--product] .product-single-wrapper .paymentButtonsWrapper .product--add-to-cart-button,
[data-wetheme-section-type=template--product] .product-single-wrapper .paymentButtonsWrapper .shopify-payment-button {
    border-radius: 5px !important;
}

.swatch:not(.is-color-swatch):not(.linked-products-swatch) label:hover {
    background-color: #9ca676 !important;
    border-color: #9ca676 !important;
    color: #1a1a1a !important;
}

/* Cart Drawer Heading - h2 semantisch korrekt, Größe wie h3 beibehalten */
.cart-drawer__heading {
    font-size: 1.125rem !important;
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    .cart-drawer__heading {
        font-size: 1.5rem !important;
    }
}

/* Submit Buy Button */
#submit-buy_buttons {
    border-radius: 5px;
}

/* --- 2. Mobile Größen (Mobile First) --- */

/* H1: Groß und dominant */
h1 {
    font-size: 1.75rem;
    /* ca. 28px */
    line-height: 1.1;
    /* Noch etwas enger bei sehr großen Texten */
}

/* H2: Dein definierter Wert (21px = 1.3125rem) */
h2 {
    font-size: 1.3125rem;
    /* 21px */
    /* Deine spezifische Line-Height umgerechnet in unitless (26px/21px ≈ 1.24) */
    line-height: 1.25;
}

/* H3: Etwas kleiner als H2, gute Zwischenüberschrift */
h3 {
    font-size: 1.125rem;
    /* 18px */
}

/* H4: Entspricht oft der normalen Textgröße, aber fett */
h4 {
    font-size: 1rem;
    /* 16px */
}

/* H5: Etwas kleiner, gut für Metadaten oder kleine Labels */
h5 {
    font-size: 0.875rem;
    /* 14px */
    text-transform: uppercase;
    /* Optional: oft stilistisch passend für kleine Headlines */
    letter-spacing: 0.05em;
}

/* H6: Die kleinste Stufe */
h6 {
    font-size: 0.75rem;
    /* 12px */
    text-transform: uppercase;
    color: #595959;
    /* WCAG AA 4.6:1 auf Weiß */
}

.swiper {
}

.slideshow-slider-container {
    position: relative;
    z-index: 3;
}

/* --- 3. Responsive Anpassung (Tablet & Desktop) --- */
@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
        /* Wächst auf ca. 40px */
    }

    h2 {
        font-size: 2rem;
        /* Wächst auf 32px - deutlicher Sprung */
        margin-top: 2.5rem;
        /* Mehr Abstand auf großen Screens */
    }

    h3 {
        font-size: 1.5rem;
        /* Wächst auf 24px */
    }

    h4 {
        font-size: 1.25rem;
        /* Wächst auf 20px */
    }

    /* H5 und H6 lassen wir oft gleich, da sie "Utility"-Größen sind */
}

/* --- Abo-Störer Badge on Variant Swatches --- */
.swatch-element.has-abo-storer {
    position: relative;
}

.abo-storer-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background-color: #ffffff;
    color: #333;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 3px 8px;
    border: 2px solid #838f58;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
}

/* --- Variant Swatch Customization --- */
.swatch-items-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-top: 12px; /* Platz für Abo-Störer Badge */
}

.swatch-element {
    margin: 0 !important;
    /* Override theme margins if any */
    width: 100%;
}

.swatch-element label {
    width: 100%;
    margin: 0 !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* Ensure full height filling */
    min-height: 44px;
    /* Basic accessibility touch target size */
}

.swatch .swatch-items-wrapper {
    display: grid !important;
}

/* Desktop: 4 buttons per row */
@media (min-width: 990px) {
    .swatch-items-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

.transparent-video-image {
    width: 100%;
    /* Nutzt den Platz des Containers */
    max-width: 400px;
    /* Wird nie größer als 400px */
    aspect-ratio: 1 / 1;
    /* Erzwingt ein Quadrat ohne feste Höhe */
    object-fit: cover;
    /* Füllt das Quadrat aus, ohne zu verzerren */
    object-position: center;
    position: absolute;
    z-index: 1;
}

.intake-recommendation__step h3,
.intake-recommendation__step .metafield-multi_line_text_field {
    font-size: 16px;
}

/* --- Product Short Description Block --- */
.product-short-description-block {
    margin-bottom: var(--custom-margin-bottom, 30px);
}

.short-description-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.short-description-content {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.short-description-content:not(.expanded) {
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    /* Ensure there is enough height for the text to be visible before fading */
}

.short-description-content.expanded {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

.read-more-btn {
    margin-top: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: 0.7;
}


.read-more-btn:hover {
    opacity: 1;
}

/* Green Checkmarks for Metafield Rich Text Fields */
.metafield-rich_text_field li {
    list-style-type: none !important;
    /* Remove default bullets, enforce override */
    position: relative;
    padding-left: 25px;
    /* Space for the checkmark */
    margin-bottom: 5px;
    /* Optional spacing between items */
}

.site-header .site-header__wrapper .site-header__wrapper__center {
    position: relative;
}

.icon-text-media__media video {
    background: transparent !important;
    border: none;
    width: 100%;
    height: 100%;
    max-height: 400px;
    display: block;
    z-index: 2;
}

.icon-text-media__media .responsive-image-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

/* Ensure the container doesn't have a conflicting background */
.icon-text-media__media {
    background-color: transparent !important;
    position: relative;
}

.metafield-rich_text_field li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    /* Align with text */
    width: 6px;
    height: 12px;
    border: solid #838f58;
    /* Salbei color */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --- Announcement Bar: 3-Column Group Layout --- */

/* Override the min.css grid that stacks everything in one cell */
.announcement_bar animated-background-text-colors {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    overflow: hidden;
}

/* Groups: each group occupies the same grid cell (stacked via grid) */
.announcement_group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: center;
    width: 100%;
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.02, 0.01, 0, 0.95);
    grid-row: 1 / 2 !important;
    grid-column: 1 / -1 !important;
    pointer-events: none;
}

.announcement_group.active {
    opacity: 1;
    z-index: 1;
    transition-delay: 0.35s;
    pointer-events: auto;
}

/* Override min.css: blocks inside groups must NOT stack on top of each other */
.announcement_bar .announcement_group .announcement_block {
    opacity: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    transition: none !important;
    text-align: center;
    display: block !important;
}

/* Enforce minimum font size of 16px */
.announcement_bar .announcement_block {
    font-size: max(16px, var(--announcement-text-size)) !important;
}

/* Mobile Ticker: hide desktop grid, show scrolling marquee */
.announcement-ticker-mobile {
    display: none;
}

@media screen and (max-width: 767px) {
    .announcement_group {
        display: none !important;
    }

    .announcement-ticker-mobile {
        display: block;
        overflow: hidden;
    }

    .announcement-ticker-track {
        display: flex;
        align-items: center;
        width: max-content;
        animation: announcement-ticker 18s linear infinite;
    }

    .announcement-ticker-item {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0 2rem;
    }

    .announcement-ticker-item .announcement_wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .announcement-ticker-item .announcement_text {
        font-size: max(16px, var(--announcement-text-size)) !important;
    }
}

@keyframes announcement-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .announcement-ticker-track {
        animation: none;
        overflow-x: auto;
    }
}

/* --- Announcement Bar Icon --- */
.announcement_wrapper .announcement_icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    object-fit: contain;
}

.announcement_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Social icons: ID-Selektoren mit Context-Suffix kompatibel machen (WCAG unique IDs fix) */
.announcement_bar animated-background-text-colors ul[id^="sm-icons"] { display: none }
.announcement_bar animated-background-text-colors.announcements_icons_only ul[id^="sm-icons"] { grid-column: 1/2; grid-row: 1/2; display: flex; justify-content: flex-end; padding-left: calc(60px - calc((44px - 20px) / 2)); padding-right: calc(60px - calc((44px - 20px) / 2)); }
.announcement_bar animated-background-text-colors.announcements_and_icons ul[id^="sm-icons"] { grid-column: 3/4; grid-row: 1/2; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; align-items: center; }
.announcement_bar ul[id^="sm-icons"] { margin: 0; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; }
.announcement_bar ul[id^="sm-icons"] li { list-style-type: none; margin: 0; }
.announcement_bar ul[id^="sm-icons"] a { display: flex; justify-content: center; align-items: center; width: 44px; }
.announcement_bar ul[id^="sm-icons"] svg { width: 20px; height: 20px; }
.drawer#NavDrawer [id^="sm-icons"] a:focus,
.drawer#NavDrawer [id^="sm-icons"] a:hover { color: var(--menu-drawer-text-color); }

/* Keyboard focus visibility (WCAG 2.4.7) */
.using-keyboard :focus-visible {
    outline: 3px solid #c8801c;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================
   WCAG AA Accessibility Fixes — Schriftgröße & Touch Targets
   Zielgruppe 70+, WCAG 2.1 AA (1.4.4, 2.5.5)
   ========================================================== */

/* --- 1. Schriftgrößen: min. 16px für alle Inhaltselemente --- */

/* Grundpreis dezenter: gedämpftes Grau (#767676 = AA 4.54:1 auf #fff) + bewusst kleiner als 16px (Sekundärinfo) */
.unit-price,
.unit-price__price,
.unit-price .money,
.unit-price__ref-value,
.unit-price__ref-unit {
    color: #767676 !important;
    font-size: 12px !important;
}

/* Produktkarten-Titel */
.product-card-basic__title,
.grid-item__subheading {
    font-size: 16px !important;
}

/* Produktkarten-Metadaten (Hersteller, Bewertung, Fehler) */
.product-card-basic__vendor,
.product-card-basic__errors,
.product-grid--vendor,
.product-grid--rating {
    font-size: 16px !important;
}

/* Sekundäre Labels und Hinweistexte */
.input-label--secondary,
.note {
    font-size: 16px !important;
}

/* +/- Button-Beschriftung */
.js-qty .js-qty__adjust {
    font-size: 16px !important;
}

/* Underlined Link/CTA (z. B. "Optionen anzeigen") */
.btn--underlined-with-icon {
    font-size: 16px !important;
}

/* Headings H5/H6: rem-Werte zu klein bei 68.75% Basis (~11px) */
h5 {
    font-size: 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

h6 {
    font-size: 16px !important;
    text-transform: uppercase;
    color: #595959;
}

/* Intake Recommendation Texte */
.intake-recommendation__text {
    font-size: 16px !important;
}

.intake-recommendation__number {
    font-size: 16px !important;
    width: 44px !important;
    height: 44px !important;
}

/* --- 2. Touch Targets: min. 44×44px (WCAG 2.5.5 AA) --- */

/* Mengenauswahl +/- Buttons:
   .js-qty__adjust ist position:absolute und füllt Containerhöhe.
   Container (.js-qty) braucht min. 44px Höhe. */
.js-qty {
    min-height: 44px !important;
}

.js-qty__adjust {
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Produkttitel-Links in Ähnliche Produkte / Recently Viewed:
   Inline-Anker bekommt Padding für 44px Mindesthöhe */
.product-grid--title a,
.product-card-basic__title a {
    display: block !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 44px !important;
    box-sizing: border-box;
}

/* "Optionen anzeigen" und Quick-Add Links */
a.btn--underlined-with-icon,
.quick-shop--block .btn--underlined,
.quick-shop--block .btn--underlined-with-icon {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box;
}

/* "Optionen anzeigen" in product-card-basic ausblenden (visuell, Logik bleibt erhalten) */
a[data-quick-view-link] {
    display: none !important;
}

/* Fix 1: CTA-Button font-size 14px → 16px */
.btn,
button[name="add"],
.product-form__submit,
.dynamic-section-button--drawer-filled {
    font-size: 16px !important;
}

/* Fix 2: Preis-Elemente font-size 12px → 16px (PDP, Collection-Grid, Cart Drawer) */
.money,
.price-item,
.price-item--regular,
.price-item--sale,
.price--regular-price {
    font-size: 16px !important;
}

/* Fix 3: Quantity ±-Buttons Touch Target auf min. 44×44px */
.quantity__button,
.cart-drawer__product-card--quantity--button {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Fix 4: Packungsgröße-Label font-size 12px → 16px (PDP Variant Label) */
.option-label-wrapper label,
.option-label-wrapper .header {
    font-size: 16px !important;
}

/* Fix 5: Hamburger-Button Touch Target 20×20px → min. 44×44px (WCAG 2.5.5)
   display nur auf dem jeweils aktiven Toggle-Button setzen — pauschales display:flex
   auf beiden Buttons gleichzeitig überschreibt theme-interne show/hide-Logik aus
   component-mobile-menu.min.css und lässt beide Chevrons (▼ und ▲) gleichzeitig
   sichtbar erscheinen. */
.mobile-nav__toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
}

.mobile-nav__toggle button {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Aktiven Toggle-Button als flex-Container darstellen (jeweils nur einer sichtbar) */
.mobile-nav__toggle .mobile-nav__toggle-open,
.mobile-nav--expanded .mobile-nav__toggle .mobile-nav__toggle-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Inaktiven Toggle-Button verstecken — spiegelt Theme-State-Logik */
.mobile-nav__toggle .mobile-nav__toggle-close,
.mobile-nav--expanded .mobile-nav__toggle .mobile-nav__toggle-open {
    display: none !important;
}

/* Fix 6: Standalone Icon Touch Targets — theme already handles 44×44px on wrapper
   (min-width:44px; min-height:44px; padding:12px on .standalone-icon--wrapper)
   and locks SVGs to width:20px; height:20px — no override needed here */

/* Fix 7: Navigation font-size 14px → 16px (WCAG Zielgruppe 70+) */
.top-links ul.site-nav,
.site-nav__link,
.site-nav__dropdown li {
    font-size: 16px !important;
}

/* Fix 8: Badges font-size 9px → 14px (Sale, Ausverkauft, Custom, Preorder) */
.sale-badge,
.sold-out-badge,
.custom-badge,
.preorder-badge,
.cart-drawer__product_card--badge {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Fix 9: Footer-Links font-size 12px → 16px */
.bottom--footer---links li a,
.footer-main .contact-form p,
.links-footer a {
    font-size: 16px !important;
}

/* Fix 10: Cart-Drawer Details font-size 12px → 16px */
.cart-drawer__product-card--details,
.cart-drawer__product_card--vendor,
.cart-drawer__product-card--error,
.cart-drawer__taxes-shipping {
    font-size: 16px !important;
}

/* Drawer-System über Header heben
   theme: .header-section--wrapper z-index:10000, .global-drawer/.drawer nur 1501
   → Overlay, Drawer und Modal müssen klar über 10000 liegen */
.drawer-overlay,
.popup-overlay {
    z-index: 19999 !important;
}

.global-drawer,
.drawer,
#ThemeModal {
    z-index: 20000 !important;
}



/* product-related-articles: Überschrift in Standard-Textfarbe (nicht weiß) */
.product-related-articles .section-title {
    color: var(--text-color, #333) !important;
}

/* Preis: ComparePrice durchgestrichen bei Sale */
/* text-decoration:line-through positioniert die Linie per Font-Metrik (strikeout-position),
   die bei dieser Schrift nahe dem Baseline liegt → sieht aus wie underline.
   Fix: text-decoration auf #ComparePrice deaktivieren, background-gradient auf dem
   inneren span exakt bei 50% Höhe. */
#ComparePrice {
    text-decoration: none;
}
#ComparePrice .money {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-position: 0 50%;
    background-repeat: no-repeat;
}
.price-line-through,
.compare-at-price {
    text-decoration: none !important;
}

/* Issue 1 – Megamenü-Panel unter Logo schieben */
.site-nav__dropdown.mega-menu-dropdown {
    top: calc(100% + 25px);
}

/* Mega-Menu Dropdown-Position korrigieren */
.mega-menu-wrapper .mega-menu .site-nav__dropdown:not(.theme-editor-active) {
    transform: translateY(12px);
    width: 100vw;
    left: 0;
}

/* Mega-Menü: Oberbegriffe (Produkte, Gut für, etc.) fett darstellen */
.mega-menu--links .mega-menu-link--title,
.mega-menu--links .mega-menu-link--title a {
    font-weight: 700;
}

/* Breadcrumbs: Basis-Layout (alle Seiten) */
#breadcrumbs .breadcrumb,
.breadcrumb {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* Breadcrumbs linksbündig + Abstand zum Produktbild (PDP) — eigener Style in pdp-redesign.css */
[data-wetheme-section-type="template--product"] #breadcrumbs {
    text-align: left !important;
    margin-bottom: 16px !important;
}
[data-wetheme-section-type="template--product"] #breadcrumbs .breadcrumb {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Breadcrumbs Fallback-Style (Referenz: Wissen-Breadcrumb, sections/wissen-thema.liquid .wt-breadcrumb) —
   zentriert, cremiger Streifen, gedämpftes Uppercase-Grau. Gilt nur für den generischen #breadcrumbs-Wrapper
   aus layout/theme.liquid (Klasse .wrapper-padded), z. B. Stellenseiten. PDP (pdp-redesign.css) und
   Wissen-Seiten (wt-breadcrumb / ta-breadcrumb, eigene Klassen) bleiben unberührt. */
#breadcrumbs.wrapper-padded {
    background: var(--cream, #FBF8F2);
    border-bottom: 1px solid rgba(22, 32, 28, 0.07);
}
#breadcrumbs.wrapper-padded .breadcrumb {
    justify-content: center;
    text-align: center;
}
#breadcrumbs.wrapper-padded .breadcrumb-item,
#breadcrumbs.wrapper-padded .breadcrumb-item a {
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted, #5C5F55);
}
#breadcrumbs.wrapper-padded .breadcrumb-item a:hover {
    color: var(--ink, #2B2D26);
}
#breadcrumbs.wrapper-padded .breadcrumb-item:last-child {
    color: var(--ink, #2B2D26);
}
#breadcrumbs.wrapper-padded .breadcrumb-divider {
    opacity: 0.4;
}

/* Thumbnail-Strip: letztes Slide nicht abschneiden */
product-media.media-type-thumbnails .thumbnail-media--thumbnails::after {
    display: none !important;
}
product-media.media-type-thumbnails .thumbnail-media--thumbnails {
    overflow: hidden;
    padding-bottom: 4px;
}

/* Homepage Section Titles: linksbündig */
.homepage-sections--title,
.homepage-section-title {
    text-align: left !important;
}

/* Collection-Banner: nur Hintergrundfarbe, kein Bild, responsive Höhe */
[data-wetheme-section-type="collection-header"] .collection-header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 100px !important;
}

@media (min-width: 768px) {
    [data-wetheme-section-type="collection-header"] .collection-header {
        min-height: 120px !important;
    }
}

/* ─── MOBILE-MENÜ — Promo-Bilder & Layout ────────────────────────────────────
   Scope: .mobile-promo--block existiert ausschliesslich im Mobile-Drawer
   (sections/header.liquid ~Zeile 294) — Desktop-Mega-Menü bleibt unangetastet.

   Markup-Struktur im Mobile-Drawer:
     ul.mobile-promo--block
       li.mega-menu-promo-card.mobile-nav__item.block-id-{id}   ← promo_wrapper_classes
         div.inner.mega-menu--image-wrapper
           div.mega-menu-promo
             a/div.mega-menu-promo-wrapper.block-radius-clip
               div.mega-menu-promo-image
                 img[style="max-width:{NaturalWidth}px"]   ← Inline-Breite überschreiben

   Das img bekommt via Liquid promo_img_props ein Inline-style="max-width:{px}",
   was normale CSS-Regeln schlägt. !important im Stylesheet gewinnt über normales
   Inline-Style-Attribut → max-width:100% !important reicht aus.

   OVERFLOW-URSACHE (Live-Messung 390px-Viewport, Drawer 351px):
   Jede Verschachtelungsebene addiert margin-left: 20px, aber width bleibt 100%
   des nicht eingerückten Kontexts → kumulativer Überlauf (rechte Kante bei 376px,
   25px über Drawer-Rand). Fix: width:auto auf eingerückte Listen → schrumpft mit.
────────────────────────────────────────────────────────────────────────────── */

/* Card-Container: Überlauf kappen, Innenabstand passend zu Drawer-Padding.
   padding: 0 16px bleibt: Die Card sitzt bereits in der eingerückten Sublist
   (margin-left der Eltern-Ebene schafft Luft links); 16px seitliches Padding
   gibt dem Bild Atemraum und verhindert bündiges Anlegen am Drawer-Rand. */
.mobile-promo--block .mega-menu-promo-card {
    max-width: 100%;
    overflow: hidden;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Innere Wrapper: volle Container-Breite */
.mobile-promo--block .inner,
.mobile-promo--block .mega-menu-promo,
.mobile-promo--block .mega-menu-promo-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

/* Bild: Inline-Style-Breite (max-width:{px}) mit !important überschreiben */
.mobile-promo--block .mega-menu-promo-image img {
    max-width: 100% !important;
    height: auto;
    display: block;
    border-radius: var(--block-border-radius, 8px);
}

@media (min-width: 1024px) {
    [data-wetheme-section-type="collection-header"] .collection-header {
        min-height: 150px !important;
    }
}

/* PDP: Produktbild Mobile – volle Breite */
@media only screen and (max-width: 767px) {
    [data-wetheme-section-type="template--product"] [data-product-media-wrapper] {
        width: 100% !important;
    }
}

/* Fix: Icon-Text-Media rechte Spalte — Mobile-Fix jetzt in section-icon-text-media.css (Ladereihenfolge) */

/* Fix: Mobile-Nav Promo-Bilder — 1 Spalte, im Container halten, abgerundete Ecken
   Default theme: grid-template-columns: 1fr 1fr (zwei Bilder nebeneinander).
   Anna meldet: Bilder werden abgeschnitten / ragen über den Drawer-Rand.
   Kern-Fix: width:auto auf eingerückte Listen → schrumpfen statt überlaufen.
   margin-left:0 auf promo-block → keine doppelte Einrückung für Bilder-Banner. */

/* KERN-FIX: eingerückte Listen auf width:auto schrumpfen lassen.
   Theme-Regel (.mega-menu--mobile .mobile-promo--block) setzt width:100% mit
   Spezifität (0,3,0) → !important nötig. */
.mobile-nav .mobile-nav__sublist,
.mobile-nav .mobile-promo--block {
    width: auto !important;
    box-sizing: border-box;
}

/* Promo-Block: keine Zusatz-Einrückung — Bild-Banner brauchen den Platz */
.mobile-nav .mobile-promo--block {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    padding-bottom: 12px;
}

/* Explizit 1 Spalte mit erhöhter Spezifität (Theme: 1fr 1fr auf 351px zu eng) */
.mobile-nav .mega-menu--mobile .mobile-promo--block {
    grid-template-columns: 1fr !important;
    padding-bottom: 12px;
}

.mobile-nav .mobile-promo--block > .mobile-nav__item,
.mobile-nav .mobile-promo--block .mega-menu--image-wrapper,
.mobile-nav .mobile-promo--block .mega-menu--image {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mobile-nav .mobile-promo--block img,
.mobile-nav .mobile-promo--block picture {
    width: 100% !important;
    height: auto;
    max-width: 100% !important;
    display: block;
}

.mobile-nav .mobile-promo--block .mega-menu-promo-wrapper,
.mobile-nav .mega-menu--mobile .mobile-promo--block .mega-menu-promo-wrapper {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

/* Sublist: Overflow kappen + mit width:auto schrumpfen (s. KERN-FIX oben) */
.mobile-nav .mobile-nav__sublist {
    overflow-x: hidden;
    max-width: 100%;
}

/* Weiße Schrift nur in Hero/Slideshow-Sektionen (dunkler Hintergrund) */
.section--slideshow-wrapper .homepage-sections--title,
.section--featured-blog-posts .homepage-sections--title,
[data-wetheme-section-type="image--slideshow"] .homepage-sections--title {
    color: #ffffff !important;
}

/* Cart-Page Mobile: Item-Layout horizontal (Bild links, Inhalt rechts gestapelt)
   Default table--responsive stackt Image+Details+Preis+Qty+Total vertikal mit viel
   Whitespace. Anna will kompakteren Checkout-Stil (siehe screenshot 04). */
@media screen and (max-width: 767px) {
    /* Spalten-Header (Preis/Menge/Gesamt) auf Mobile ausblenden — die <td>s
       tragen bereits data-label-Attribute. Selektor MUSS beide Klassen
       (.cart__row.cart__header-labels) tragen, sonst gewinnt die spaetere
       .cart__row{display:grid}-Regel per Cascade-Order. */
    .cart-table.table--responsive .cart__row.cart__header-labels {
        display: none !important;
    }

    .cart-table.table--responsive .cart__row {
        display: grid !important;
        grid-template-columns: 80px 1fr;
        column-gap: 14px;
        row-gap: 4px;
        align-items: start;
        width: 100%;
        float: none;
        padding: 16px 0 !important;
    }

    /* Bild: Spalte 1, spannt alle Zeilen */
    .cart-table.table--responsive .cart__row > td:first-child {
        grid-column: 1;
        grid-row: 1 / -1;
        width: 80px !important;
        padding: 0 !important;
        float: none !important;
        align-self: start;
        text-align: left !important;
    }
    .cart-table.table--responsive .cart__row > td:first-child img,
    .cart-table.table--responsive .cart__row .cart__image img {
        margin: 0 !important;
        width: 100%;
        height: auto;
        display: block;
    }

    /* Restliche Cells: Spalte 2, vertikal gestapelt, linksbündig */
    .cart-table.table--responsive .cart__row > td:not(:first-child) {
        grid-column: 2;
        width: auto !important;
        padding: 0 !important;
        float: none !important;
        text-align: left !important;
        margin: 0 !important;
    }

    /* Qty-Selector linksbündig (nicht zentriert) */
    .cart-table.table--responsive .cart__row .js-qty,
    .cart-table.table--responsive .cart__row .js-qty-wrapper {
        float: none !important;
        margin: 4px 0 0 0 !important;
        justify-content: flex-start;
    }

    /* Total-Preis: rechtsbündig im rechten Spaltenbereich */
    .cart-table.table--responsive .cart__row > td.cart-total-label {
        text-align: right !important;
        margin-top: 4px !important;
        font-weight: 600;
    }

    /* Vertikale Abstände innerhalb der rechten Spalte reduzieren */
    .cart-table.table--responsive .cart__row .cart__row--title {
        font-size: 16px;
        line-height: 1.3;
        display: inline-block;
        margin-bottom: 2px;
    }
    .cart-table.table--responsive .cart__row .cart__meta-text {
        margin: 2px 0;
    }
}

/* Cart-Page: "Vergessen Sie diese nicht"-Empfehlungen klar vom Warenkorb trennen.
   Default (template-cart.min.css): nur margin-top:60px ohne visuellen Trenner.
   Heading-Text editierbar im Theme-Customizer → Settings → cart_recommendations_heading. */
.cart--recommendations {
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    padding-top: 40px;
    margin-top: 40px !important;
}
.cart--recommendations-heading {
    margin-bottom: 24px !important;
}
@media screen and (max-width: 767px) {
    .cart--recommendations {
        padding-top: 28px;
        margin-top: 28px !important;
    }
}

/* Mobile-Menu: Country-/Locale-Switch kompakter
   Default: 15px-Padding + 14px-Font + flex-button mit space-between → wirkt sperrig.
   Anna: "Switch von Deutschland auf Österreich sehr groß, ggf. kleiner darstellen?" */
@media screen and (max-width: 767px) {
    /* Outer-Padding der Locale-Box reduzieren */
    .mobile-nav.locale--mobile {
        padding: 10px 15px !important;
        gap: 10px !important;
    }
    /* Button-Schrift kompakter */
    .locale--mobile localization-form form button {
        font-size: 13px !important;
    }
    /* Innenabstand zwischen Text und Chevron reduzieren */
    .locale--mobile localization-form form button span.animated-underline {
        gap: 8px !important;
    }
    /* Chevron-Icon einen Tick kleiner */
    .locale--mobile localization-form form button .icon-dropdown svg {
        width: 14px;
        height: 14px;
    }
    /* Button nur so breit wie nötig (nicht volle Drawer-Breite) */
    .locale--mobile localization-form,
    .locale--mobile .disclosure {
        width: fit-content;
        max-width: 100%;
    }
}

/* ============================================================
   GRUNDPREIS — Appstle Subscription App (PDP Abo-Block)
   Override: App-eigene Klassen bekommen Grau + kleine Schrift,
   konsistent zu .unit-price (#767676 = WCAG AA 4.54:1 auf #fff).
   ACHTUNG: Klassen .appstle_selling_plan_unit_price und
   .appstle_one_time_unit_price sind App-generiert — fragil bei
   App-Updates (Appstle Subscriptions by Appstle Commerce, Stand 2026-06).
   ============================================================ */
.appstle_selling_plan_unit_price,
.appstle_one_time_unit_price {
    font-size: 12px !important;
    color: #767676 !important;
}

/* ============================================================
   GRUNDPREIS — Warenkorb-Drawer (cart-drawer.liquid ~Z.187)
   .cart-drawer__unit-price wurde an das <span> des Grundpreises
   im unit_price_measurement-Block ergänzt (keine neue Datei,
   Klasse inline im bestehenden Element).
   ============================================================ */
.cart-drawer__unit-price {
    font-size: 12px !important;
    color: #767676 !important;
}

/* ============================================================
   ABO-PREIS — Produktkacheln (product-grid-item-price.liquid)
   Monatspreis als Hauptpreis auf Abo-Produktkarten.
   .price--regular-price auf dem money-span sorgt automatisch
   für dieselbe Größe/Gewicht wie der normale Hauptpreis.
   ============================================================ */

/* Wrapper für "ab … / Monat" — kein eigenes font-size nötig,
   da .money.price--regular-price bereits 16px erzwingt (Fix 2 oben).
   display:block damit Subzeile darunter steht. */
.price--abo-main {
    display: block;
}

/* Subzeile: "im Abo · einmalig ab …"
   #767676 = WCAG AA 4.54:1 auf #fff — identisch zu .unit-price */
.price--abo-note {
    font-size: 12px;
    color: #767676;
    display: block;
}

/* ============================================================
   FREE-SHIPPING-FORTSCHRITTSBALKEN — Cart-Drawer
   Eingebaut in snippets/cart-drawer.liquid (inline, kein Snippet).
   Platzierung: data-cart-dynamic-content="cart-header" (nach h2) → aktualisiert bei jedem Cart-Update.
   Schwellenwert: 75,00 € (7500 Cent). Abos immer versandkostenfrei.
   Grün #2e7d32 = WCAG AA 4.54:1 auf #fff (Material Design Green 800).
   Balkenfarbe #242424 = color_primary_button_background (keine CSS-Var im Theme vorhanden).
   Fortschritt animiert per width-Transition vom letzten Stand (Inline-Script in cart-drawer.liquid trackt lastWidth über Re-Renders). Erfolgs-Puls einmalig via .shipping-bar-pulse.
   Schimmer-Sweep dauerhaft. prefers-reduced-motion deaktiviert Transition, Animation und Shimmer.
   ============================================================ */

/* Keyframes */
@keyframes cart-shipping-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

@keyframes cart-shipping-success-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.cart-drawer__shipping-bar {
    width: 100%;
    padding: 8px 0 12px;
    box-sizing: border-box;
}

.cart-drawer__shipping-bar__text {
    font-size: 14px;
    margin: 0 0 8px;
    line-height: 1.4;
}

.cart-drawer__shipping-bar__text--success {
    color: #2e7d32;
    font-weight: 600;
    display: inline-block;
}

.cart-drawer__shipping-bar__track {
    width: 100%;
    height: 8px;
    background: #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.cart-drawer__shipping-bar__fill {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: #242424;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.cart-drawer__shipping-bar__fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
    );
    animation: cart-shipping-shimmer 2.5s ease-in-out infinite;
}

.cart-drawer__shipping-bar__fill--success {
    background: #2e7d32;
}

/* Erfolgs-Puls: einmalig beim erstmaligen Überschreiten der Schwelle,
   gesetzt via .shipping-bar-pulse durch das Inline-Script. */
.cart-drawer__shipping-bar__text--success.shipping-bar-pulse {
    animation: cart-shipping-success-pulse 0.5s ease-out;
}

/* Accessibility: Transition, Animationen und Shimmer deaktivieren */
@media (prefers-reduced-motion: reduce) {
    .cart-drawer__shipping-bar__fill {
        transition: none;
    }
    .cart-drawer__shipping-bar__fill::after {
        animation: none;
        display: none;
    }
    .cart-drawer__shipping-bar__text--success.shipping-bar-pulse {
        animation: none;
    }
}


/* product-sticky-atc CSS removed — replaced by pdp-sticky-bar in pdp-redesign.css */

/* ============ ASLAN VITALITY Design System -- Component Restyling ============ */

/* --- Buttons: Primaer (Gold) --- */
/* Gefunden in: snippets/payment-buttons.liquid (class="button button--primary")
   theme.min.css: .btn, .btn-colors-primary vorhanden
   .btn ist die Basisklasse fuer alle Buttons in diesem Theme */
.button.button--primary,
.btn.btn-colors-primary {
    background-color: #c8801c;
    color: #ffffff;
    border-color: #c8801c;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.button.button--primary:hover,
.btn.btn-colors-primary:hover {
    background-color: #d4920a;
    border-color: #d4920a;
    color: #ffffff;
}

/* --- Buttons: Sekundaer (Dunkelgruen) --- */
/* Gefunden in: snippets/main-collection-filtering-sorting.liquid (class="button button--secondary")
   theme.min.css: .btn--secondary vorhanden */
.button.button--secondary,
.btn.btn--secondary {
    background-color: #1b3a2f;
    color: #ffffff;
    border-color: #1b3a2f;
    border-radius: 8px;
}
.button.button--secondary:hover,
.btn.btn--secondary:hover {
    background-color: #2a5240;
    border-color: #2a5240;
    color: #ffffff;
}

/* --- Buttons: Tertiaer / Outline / Ghost --- */
/* Klasse nicht gefunden - generischer Selektor als Fallback
   gesucht nach: btn--outline, button--outline, btn-outline in theme.min.css + sections/ + snippets/
   .button--tertiary in sections/ gefunden (Liquid-Variable), aber kein CSS-Ruleset dazu */
.button.button--tertiary,
.btn.btn--outline {
    background-color: transparent;
    color: #c8801c;
    border-color: #c8801c;
    border-radius: 8px;
}
.button.button--tertiary:hover,
.btn.btn--outline:hover {
    background-color: #c8801c;
    color: #ffffff;
}

/* --- Produktkarten / Cards --- */
/* Gefunden in: theme.min.css + snippets/ -> .product-card-basic, .product-card__image
   .product-card-basic ist die Hauptkarten-Klasse fuer Grid-Produktkarten */
.product-card-basic {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* --- Badges / Chips: Basis --- */
/* Gefunden in: theme.min.css -> .badge (generisch), .badge-radius (Radius-Helper) */
.badge {
    border-radius: 4px;
}

/* --- Badges: Sale (Fehlrot) --- */
/* Gefunden in: theme.min.css -> .sale-badge, .cart-drawer__product_card--badge--sale */
.sale-badge,
.cart-drawer__product_card--badge--sale {
    background-color: #c0392b;
    color: #ffffff;
    border-radius: 4px;
}

/* --- Badges: Akzent / Neu (Gold) --- */
/* Gefunden in: theme.min.css -> .custom-badge
   .preorder-badge und .sold-out-badge ebenfalls vorhanden, aber eigene Bedeutung */
.custom-badge {
    background-color: #c8801c;
    color: #ffffff;
    border-radius: 4px;
}

/* --- Sternebewertungen --- */
/* Gefunden in: theme.min.css + snippets/ -> .rating-icons__icon, .rating-icons__icon--half
   .reviews-star-rating__stars fuer externe Review-Widgets (z.B. Judge.me, Loox)
   SVG-Icons nutzen currentColor, daher reicht color-Zuweisung auf dem Container */
.rating-icons__icon,
.rating-icons__icon--half,
.reviews-star-rating__stars {
    color: #c8801c;
    fill: #c8801c;
}

/* --- Akkordeon / Collapsible: Offener Zustand --- */
/* Gefunden in: snippets/collapsible-tab.liquid -> .collapsible-tab bekommt Klasse .open wenn aktiv
   snippets/collapsible-tab.liquid -> <collapsible-button> Custom Element als Trigger
   assets/section-accordion-with-image.min.css -> .accordion--button fuer Accordion-Sektionen
   .summary ist die Kopfzeile innerhalb .collapsible-tab */
.collapsible-tab.open > collapsible-button .summary,
.collapsible-tab.open > collapsible-button {
    color: #c8801c;
}
.collapsible-tab.open {
    border-top-color: #c8801c;
}
.accordion--button[aria-expanded="true"] {
    color: #c8801c;
    border-bottom-color: #c8801c;
}
.collapsible-content {
    border-color: #e8e8e4;
}

/* --- Tabs (highlight_collapsible_tab) --- */
/* Gefunden in: snippets/ -> highlight_collapsible_tab, last-tab (CSS-Klassenname in Liquid-Var)
   theme.min.css enthaelt keine .tab--active oder aehnliche Klasse
   .collapsible-tab ist die einzige Tab-Implementierung dieses Themes
   generischer Selektor als Fallback fuer zukuenftige Tab-Erweiterungen */
/* Klasse nicht gefunden - generischer Selektor als Fallback */
[aria-selected="true"].collapsible-tab,
.collapsible-tab.active {
    color: #c8801c;
    border-bottom: 2px solid #c8801c;
}

/* --- Preise / Produktpreise --- */
/* Gefunden in: snippets/ + theme.min.css ->
   .product-card-basic__price (Preis auf Grid-Karten)
   .product-price--sale (Angebotspreise auf PDP, snippets)
   .price--sale-price (Preis-Snippet allgemein)
   .sale-price (Kurzklasse, theme.min.css)
   .price-line-through (durchgestrichener Vergleichspreis - NICHT Gold, intentional ausgelassen)
   .product-grid--price (Grid-Preis-Wrapper) */
.product-card-basic__price,
.product-price--sale,
.price--sale-price,
.sale-price {
    color: #c8801c;
}

/* --- Akzent-Links (z.B. "Mehr anzeigen") --- */
/* Klasse nicht gefunden - generischer Selektor als Fallback
   gesucht nach: link--accent in theme.min.css + sections/ + snippets/ */
a.link--accent,
[class*="link--accent"] {
    color: #c8801c;
}
a.link--accent:hover,
[class*="link--accent"]:hover {
    color: #a8680f;
}

/* ===== ASLAN Header Redesign 2026 ===== */

/* --- Header Hintergrund Dunkelgruen --- */
/* Selector confirmed from header.liquid line 809:
   .site-header.wrapper-spacing--h (main header div inside .header-section--wrapper) */
.site-header {
    background-color: #1b3a2f !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Overlay-Header Override: auch auf Startseite/Collection mit Overlay immer gruen */
/* Class .overlay-header is added to .site-header when overlay settings are on */
.site-header.overlay-header {
    background-color: #1b3a2f !important;
}

/* Sticky Header: sicherstellen, dass beim Sticking keine andere bg greift */
.header-section.sticky-header .site-header,
.header-section.sticky-header .site-header.sticked {
    background-color: #1b3a2f !important;
}

/* Overlay-Hintergrund (greift auf .overlay-header wenn force-hover oder default bg) */
.template-index .overlay-header.force-hover,
.template-collection .overlay-header.force-hover,
.template-list-collections .overlay-header.force-hover,
.template-article .overlay-header.force-hover,
.contact-page .overlay-header.force-hover {
    background-color: #1b3a2f !important;
}

/* --- Logo: Text-Logo Gold (wenn kein Bild) --- */
/* Confirmed from header.liquid line 739: a.site-header__logo-link */
.site-header__logo-link {
    color: #c8801c !important;
}

/* Logo: Bild-Logo Gold-Filter (wenn Bild-Logo aktiv) */
/* Confirmed from header.liquid line 722: a.site-header__logo-image > img.logo_image */
.site-header__logo-image .logo_image {
    filter: brightness(0) saturate(100%) invert(54%) sepia(70%) saturate(500%) hue-rotate(15deg) brightness(95%);
}

/* Logo-Wrapper Padding sichern */
/* Confirmed from header.liquid line 789: .site-header__logowrapper */
.site-header__logowrapper .site-header__logo.site-title {
    color: #c8801c;
}

/* --- Nav Links Weiss --- */
/* Confirmed from nav--main.liquid line 22: a.site-nav__link inside .site-header__nav */
.site-header__nav .site-nav__link,
.site-header__nav .site-nav__link span,
.site-nav .site-nav__link,
.site-nav .site-nav__link span {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
}

/* Nav Links Hover: helleres Weiss + gruenes Bg */
.site-header__nav .site-nav__link:hover,
.site-header__nav li:hover > .site-nav__link,
.site-nav .site-nav__link:hover,
.site-nav li:hover > .site-nav__link {
    color: #ffffff !important;
    background-color: rgba(42, 82, 64, 0.5);
    border-radius: 4px;
}

/* Nav animated underline weiss */
.site-header__nav .site-nav__link .animated-underline,
.site-nav .site-nav__link .animated-underline {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* --- Rechte Icons (Suche, Account, Warenkorb) --- */
/* Confirmed from header.liquid line 101: ul.site-header__links.top-links--icon-links > li > a */
/* Icon colors inherit from currentColor on SVG, so we set color on wrapper */
.site-header__links a.standalone-icon--wrapper,
.site-header__links button.standalone-icon--wrapper,
.site-header__links .standalone-icon--wrapper {
    color: #ffffff !important;
}

.site-header__links a.standalone-icon--wrapper:hover,
.site-header__links button.standalone-icon--wrapper:hover,
.site-header__links .standalone-icon--wrapper:hover {
    background-color: rgba(42, 82, 64, 0.5);
    border-radius: 4px;
    color: #ffffff !important;
}

/* --- Warenkorb-Badge Gold --- */
/* Confirmed from header.liquid line 157: .cart-item-count-bubble */
.cart-item-count-bubble {
    background-color: #c8801c !important;
    color: #ffffff !important;
    border-radius: 50%;
}

/* --- Wishlist- & Cart-Badge Positionierung (identisch, Eck-Badge) --- */
/* Cart-Link hat die Klasse .cart-count-enabled (position:relative, theme.min.css)
   als Containing-Block fuer .cart-item-count-bubble. Der Wishlist-Link (Desktop:
   .wishlist-button, Mobile: identische Klasse ergaenzt in header.liquid Zeile 937)
   hatte kein positioniertes Eltern-Element, wodurch das Badge sich am naechsten
   uebergeordneten positionierten Element ausrichtete statt an der Icon-Ecke. */
.wishlist-button {
    position: relative !important;
}

/* Nachschlag: die unscoped .cart-item-count-bubble-Basisregel (theme.min.css) reichte
   trotz position:relative nicht aus -- Wishlist- und Cart-Badge liefen mit
   unterschiedlicher Geometrie auseinander: Basis-Regel setzt top:10px/right:10px,
   min-width/-height 20px und je nach Cart-Icon-Style (.shopping-bag/.shopping-cart)
   einen abweichenden transform (translate(45%,-25%) bzw. translate(50%,-50%)),
   waehrend das Wishlist-Herz kleiner ist und dadurch optisch komplett losgeloest
   ueber dem Icon schwebte. Beide Badges bekommen daher dieselbe, in sich
   geschlossene Geometrie (alles !important, inkl. left/bottom/transform explizit
   zurueckgesetzt), damit keine fremde Regel mehr dazwischenfunken kann.
   Anker-Korrektur: top:0/right:0 zielte auf die Ecke der 44x44-Buttonbox
   (.standalone-icon--wrapper: min-width/-height 44px, padding 12px !important),
   nicht auf das eigentliche 20x20-Icon darin -- das Badge schwebte dadurch
   sichtbar oberhalb/neben dem Icon, ohne es zu beruehren. Da das Icon-SVG
   (.standalone-icon--wrapper svg { width/height:20px }) durch das 12px-Padding
   exakt zentriert ist, liegt seine obere rechte Ecke bei top:12px/right:12px
   relativ zur Buttonbox -- dort wird jetzt verankert. Der translate(35%,-35%)
   schiebt das Badge von dieser Icon-Ecke aus zusaetzlich nach aussen, sodass es
   die Icon-Ecke leicht ueberlappt (drauf) und gleichzeitig darueber hinausragt,
   statt komplett losgeloest zu schweben. .cart-count-enabled deckt Desktop
   (site-header__cart-toggle) UND Mobile (site-nav__link) Cart-Links ab,
   .wishlist-button deckt beide Wishlist-Varianten ab (header.liquid Zeilen
   153 und 937) -- beide nutzen dieselbe .standalone-icon--wrapper-Buttonbox
   und denselben 20px-Icon-Aufbau, daher identische Werte fuer Desktop+Mobile. */
.wishlist-button .cart-item-count-bubble,
.cart-count-enabled .cart-item-count-bubble {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translate(35%, -35%) !important;
    min-width: 16px !important;
    min-height: 16px !important;
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Announcement Bar Dunkelgruen --- */
/* Confirmed from announcement-bar.liquid line 31: div.announcement_bar */
/* Per-block bg set via announcement_bg_color; override to match header */
.announcement_bar {
    background-color: #1b3a2f !important;
    border-bottom: 1px solid rgba(42, 82, 64, 0.5);
}

.announcement_bar .announcement_block,
.announcement_bar .announcement_text,
.announcement_bar .announcement_text p,
.announcement_bar .announcement_text a,
.announcement_bar .announcement_wrapper {
    color: rgba(255, 255, 255, 0.7) !important;
}

.announcement_bar a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.announcement_bar a:hover {
    color: #ffffff !important;
}

/* --- Mega-Menu / Dropdown: Cream-Weiss + Gold-Akzent --- */
/* Confirmed from nav--main.liquid line 40: ul.site-nav__dropdown.mega-menu-dropdown */
/* Confirmed from mega-menu.liquid line 37: div.mega-menu-block */
.site-nav__dropdown {
    background-color: #faf8f5;
    border-top: 2px solid #c8801c;
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(27,58,47,.10));
    overflow: hidden;
}

/* Mega-Menü (Vollbreite): kein Radius / kein Schatten */
.site-nav__dropdown.mega-menu-dropdown {
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.site-nav__dropdown .site-nav__link,
.site-nav__dropdown .site-nav__link span,
.site-nav__dropdown .animated-underline {
    color: #2a2a2a !important;
    font-weight: 400;
}

.site-nav__dropdown .site-nav__link:hover,
.site-nav__dropdown li:hover > .site-nav__link {
    color: #c8801c !important;
    background-color: transparent;
}

.mega-menu-block .mega-menu--links .animated-link--item,
.mega-menu-block .mega-menu--links a {
    color: #2a2a2a !important;
}

.mega-menu-block .mega-menu--links .animated-link--item:hover,
.mega-menu-block .mega-menu--links a:hover {
    color: #c8801c !important;
}

/* Subdropdown ebenfalls cream, mit Radius + Schatten */
.site-nav__subdropdown {
    background-color: #faf8f5;
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(27,58,47,.10));
    overflow: hidden;
}

/* ===== Ende ASLAN Header Redesign 2026 ===== */

/* ===== Kein Blau / Brand-Farben global ===== */

/* Standard-Link-Blau (Browser-Default) → Gold */
/* Scope: Inhaltsbereich - nicht Header/Footer/Button-Links (bereits weiss/gold gestylt) */
.rte a,
.richtext-block a,
article a,
.page-content a,
.template--page a:not(.btn):not(.button),
.template--article a:not(.btn):not(.button) {
    color: #c8801c;
}
.rte a:visited,
.richtext-block a:visited {
    color: #a8680f;
}
.rte a:hover,
.richtext-block a:hover,
article a:hover {
    color: #a8680f;
}

/* ::selection Highlight (Browser-Default oft Blau) → Gold/Cream */
::selection {
    background-color: rgba(200, 128, 28, 0.25);
    color: #1a1a1a;
}

/* Formularfeld-Fokus: Browser-blaue outline/box-shadow → Gold */
input:focus,
textarea:focus,
select:focus {
    outline-color: #c8801c !important;
    box-shadow: 0 0 0 2px rgba(200, 128, 28, 0.35) !important;
}

/* Swatch "selected" ring: falls irgendwo ein blauer Ring durch theme.min.css kommt */
.swatch.active label,
.swatch-element.active label,
[data-value].active label {
    outline-color: #c8801c !important;
    border-color: #c8801c !important;
}

/* Breadcrumb aktueller Eintrag */
.breadcrumb__current,
.breadcrumb li:last-child a {
    color: #c8801c;
}

/* Pagination: aktive Seite */
.pagination .current,
.pagination__item--current,
.pagination .active a,
.pagination [aria-current="page"] {
    background-color: #1b3a2f;
    color: #ffffff;
    border-color: #1b3a2f;
}

/* Info/Hinweis-Komponenten die ein blaues Styling verwenden koennten */
.notice--info,
.banner--info,
.alert-info {
    background-color: rgba(27, 58, 47, 0.08);
    border-color: #1b3a2f;
    color: #1b3a2f;
}

/* Checkout-Akzent (wird in settings_data als #333333 gesetzt, hier defensiv) */
/* Kein Override noetig wenn settings_data korrekt ist */

/* ===== Vendor-Blau Overrides (Swiper + Plyr) ===== */

/* --- Swiper: CSS-Custom-Properties ueberschreiben --- */
/* swiper-bundle.min.css setzt :root{--swiper-theme-color:#007aff}        */
/* Da custom.css spaeter laedt, gewinnen diese Werte.                     */
:root {
    --swiper-theme-color:      #1b3a2f; /* Dunkelgruen fuer Navigation    */
    --swiper-pagination-color: #c8801c; /* Gold fuer Pagination-Bullets   */
    --swiper-navigation-color: #1b3a2f; /* Dunkelgruen fuer Pfeile        */
}
/* swiper-bundle.min.css enthaelt #007aff NUR in der :root-Deklaration,  */
/* alle anderen Regeln nutzen var(). Kein weiterer Literal-Override noetig.*/

/* --- Plyr: Literal #00b3ff und rgba(0,179,255,...) ueberschreiben ---   */
/* plyr.min.css kennt kein --plyr-color-main; alle Farben sind hart kodiert*/

/* Overlaid Play-Button (Standard + Hover/Focus) */
.plyr__control--overlaid {
    background: rgba(200, 128, 28, 0.8); /* Gold mit Transparenz          */
}
.plyr__control--overlaid:focus,
.plyr__control--overlaid:hover {
    background: #c8801c;
}

/* Range-Input (Fortschrittsbalken, Lautstaerke) */
.plyr--full-ui input[type=range] {
    color: #c8801c;
}

/* Audio-Controls: Tab-Focus, Hover, aria-expanded */
.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
    background: #c8801c;
    color: #fff;
}

/* Video-Controls: Tab-Focus, Hover, aria-expanded */
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
    background: #c8801c;
    color: #fff;
}

/* Menueintrag ausgewaehlt (radiogroup) */
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
    background: #c8801c;
}

/* Tab-Focus Glow an Controls und Range-Tracks */
.plyr__control.plyr__tab-focus {
    box-shadow: 0 0 0 5px rgba(200, 128, 28, 0.5);
    outline: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
    box-shadow: 0 0 0 5px rgba(200, 128, 28, 0.5);
    outline: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
    box-shadow: 0 0 0 5px rgba(200, 128, 28, 0.5);
    outline: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
    box-shadow: 0 0 0 5px rgba(200, 128, 28, 0.5);
    outline: 0;
}

/* === PDP Radio-Cards: Grid-Override (ueberschreibt alte Pill-Styles) === */
[data-wetheme-section-type="template--product"] .swatch-items-wrapper {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  gap: 12px !important;
  padding-top: 0 !important;
}

[data-wetheme-section-type="template--product"] .swatch-element label {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: unset !important;
}

@media (min-width: 990px) {
  [data-wetheme-section-type="template--product"] .swatch-items-wrapper {
    grid-template-columns: unset !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ===== ASLAN Vitality — Collection Header ===== */
.collection-info.template-title--wrapper {
  background: transparent;
  padding: var(--space-7, 48px) var(--space-6, 32px) var(--space-5, 24px);
  text-align: center;
}
.collection-info .aslan-collection-eyebrow {
  display: block;
  font-size: var(--fs-small, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--gold-600, #97580f);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2, 8px);
}
.collection-info .page--title.template-title {
  font-family: var(--header-font-stack);
  font-size: var(--fs-display, clamp(40px, 5vw, 56px));
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-tight, 1.15);
  color: var(--green-900, #1B3A2F) !important;
  margin: 0 0 var(--space-3, 12px);
}
.collection-info .collection-info__description.template-description {
  font-size: var(--fs-body, 16px);
  color: var(--ink-muted, #5C5F55);
  max-width: 640px;
  margin: 0 auto;
  line-height: var(--lh-normal, 1.6);
}

/* ===== ASLAN Vitality — USP-Bar ===== */
.aslan-usp-bar {
  display: flex;
  gap: var(--space-5, 24px);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background: var(--cream, #FBF8F2);
  padding: var(--space-4, 16px) var(--space-6, 32px);
  border-top: 1px solid var(--border, #DCDCDD);
  border-bottom: 1px solid var(--border, #DCDCDD);
}
.aslan-usp-bar::-webkit-scrollbar { display: none; }
.aslan-usp-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  white-space: nowrap;
  flex-shrink: 0;
}
.aslan-usp-bar__icon {
  color: var(--green-500, #2E7257);
  font-size: var(--fs-body, 16px);
  font-weight: var(--fw-bold, 700);
}
.aslan-usp-bar__text {
  font-size: var(--fs-small, 14px);
  color: var(--ink, #2B2D26);
  font-weight: var(--fw-semibold, 600);
}

/* ===== ASLAN Vitality — Filter-Tabs (Pill-Restyling der .facets-Klassen) ===== */
.collection-filters.collection-filters__topbar {
  background: var(--bg, #FEFEFE);
  border-bottom: 1px solid var(--border, #DCDCDD);
  padding: var(--space-3, 12px) 0;
}
.facets__form-inner.desktop .facets__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  align-items: center;
}
.facets__disclosure {
  border: 1px solid var(--border, #DCDCDD);
  border-radius: var(--radius-pill, 999px);
  background: var(--bg, #FEFEFE);
}
.facets__summary {
  padding: var(--space-2, 8px) var(--space-4, 16px);
  font-size: var(--fs-small, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--ink, #2B2D26);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-pill, 999px);
  transition: background 0.15s, color 0.15s;
}
.facets__summary:hover,
.facets__disclosure[open] > .facets__summary {
  background: var(--green-900, #1B3A2F);
  color: var(--white, #FFFFFF);
}
.facets__disclosure:hover,
.facets__disclosure[open] {
  border-color: var(--green-900, #1B3A2F);
}
a.active-facets__button, button.active-facets__button {
  background: var(--green-900, #1B3A2F);
  color: var(--white, #FFFFFF);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-caption, 12px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  border: none;
  cursor: pointer;
}
.facets__reset {
  font-size: var(--fs-small, 14px);
  color: var(--gold-500, #b08d4c);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
}

/* ===== ASLAN Vitality — Produkt-Cards ===== */
.grid-view-item {
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(27,58,47,.06));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  background: var(--bg, #FEFEFE);
}
.grid-view-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(27,58,47,.10));
}
.grid-view-item .product-grid--title a {
  font-size: var(--fs-body, 16px);
  font-weight: var(--fw-semibold, 600);
  color: var(--ink, #2B2D26);
  text-decoration: none;
}
.grid-view-item .product-grid--title a:hover {
  color: var(--green-600, #1E5C42);
}
.grid-view-item .product-grid--subtitle {
  font-size: var(--fs-small, 14px);
  color: var(--ink-muted, #5C5F55);
  text-align: inherit;
  margin: 4px 0 0;
}

/* Trusted-Shops-Badge auf Mobile verkleinern (überdeckt sonst Inhalte) */
@media (max-width: 767px) {
  button[id^="minimized-trustbadge"] {
    transform: scale(0.72) !important;
    transform-origin: bottom right !important;
  }
}

/* ============================================================
   ASLAN CART-DRAWER CROSS-SELL REDESIGN 2026
   Betrifft ausschliesslich den Cross-Sell-Bereich im Cart-Drawer
   ("Vergessen Sie diese nicht ...", snippets/cart-drawer.liquid
   ~Z.364, Wrapper .global-drawer--secondary).
   Alle Selektoren sind mit .global-drawer--secondary gescoped, damit
   product-card-basic.liquid an anderen Einsatzorten (z.B.
   sections/offers-drawer.liquid) unveraendert bleibt.
   Farben gemaess verbindlicher Kunden-Farbspec (Anna, 22.06.):
   Gruen #1B3A2F, Messing #B08D4C, Schrift #16201C, BG-Beige #F4EFE5.
   ============================================================ */

/* --- Panel: Beige-Hintergrund + einheitliches Innen-Padding
   (vorher: Content padding 30px + Header zusätzlich 15px = ungleich) --- */
.global-drawer--secondary__content {
    padding: 22px;
    background-color: #f4efe5;
}

.global-drawer--secondary__header {
    padding: 0 0 16px;
}

/* Heading dezent: Letter-Spacing/Uppercase bleibt (globales h5),
   nur Farbe auf Kunden-Gruen */
.global-drawer--secondary__header h5,
.global-drawer--secondary__header .h5 {
    color: #1b3a2f;
}

/* --- Karten-Raster: einheitlicher, kompakterer Abstand zwischen Karten
   (vorher 30px Desktop / 15px Mobile) --- */
.global-drawer--secondary .cart-drawer__recommendations-grid {
    gap: 12px;
}

/* --- Karte: weisser Hintergrund bleibt (globale Regel .product-card-basic),
   harter Schatten raus, dezenter Gruen-Border rein, mehr Innen-Padding
   (vorher: 0 Innen-Padding, Bild/Text lagen direkt an der Kante) --- */
.global-drawer--secondary .product-card-basic {
    padding: 14px;
    border: 1px solid rgba(27, 58, 47, 0.08);
    box-shadow: none;
}

/* Info-Spalte: -4px-Verschiebungshack der Basiskarte neutralisieren
   (kompensierte bisher den sehr hohen 44px-Touch-Target-Titel),
   Innenabstände verkleinern für ein kompakteres Layout */
.global-drawer--secondary .product-card-basic--info {
    transform: none;
    gap: 6px;
}

.global-drawer--secondary .product-card-basic--info--body {
    gap: 4px;
}

/* --- Produktbild: Packshot nie abschneiden (analog Commit 30f332f) --- */
.global-drawer--secondary .product-card-basic__image img {
    object-fit: contain;
}

.global-drawer--secondary .product-card-basic__image .aspect-ratio img {
    object-fit: contain;
}

/* --- Titel: Schriftfarbe + kompaktere line-height.
   Touch-Target-Padding (WCAG-Fix, custom.css "Produkttitel-Links") bewusst
   verkleinert: Bild + Add-to-Cart-Button bieten in dieser Cross-Sell-Karte
   bereits ausreichend grosse Tap-Flächen, der 44px-Titel-Link erzeugte den
   grossen Leerraum zwischen Titel und Preis. --- */
.global-drawer--secondary .product-card-basic__title,
.global-drawer--secondary .product-card-basic__title a {
    color: #16201c;
}

.global-drawer--secondary .product-card-basic__title {
    line-height: 1.3;
}

.global-drawer--secondary .product-card-basic__title a {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: auto !important;
}

/* --- Preiszeile "ab X € monatlich" / regulärer Preis: prominent in Gruen --- */
.global-drawer--secondary .price--abo-main,
.global-drawer--secondary .product-price--regular .price--regular-price,
.global-drawer--secondary .product-price--sale .price--sale-price {
    color: #1b3a2f;
    font-weight: 600;
}

/* --- "im Abo" / Grundpreis "(… / 100 g)": klein und gedämpft --- */
.global-drawer--secondary .price--abo-note,
.global-drawer--secondary .unit-price,
.global-drawer--secondary .unit-price__price,
.global-drawer--secondary .unit-price .money,
.global-drawer--secondary .unit-price__ref-value,
.global-drawer--secondary .unit-price__ref-unit {
    color: rgba(22, 32, 28, 0.55) !important;
}

/* ============================================================
   CART-DRAWER FOOTER-BUTTON "Warenkorb ansehen" — Schriftfarbe
   Gefunden in: assets/theme.min.css -> .btn.btn--secondary setzt
   background:transparent + color/border:var(--primary-btn-bg-color)
   (=Gold #b08d4c). Cart-Drawer-Footer-Hintergrund ist hell
   (--cart-drawer-color, aktuell #ffffff) -> reines #fff als Textfarbe
   waere auf hellem Grund unlesbar (weiss auf weiss). Deshalb zusaetzlich
   mit ASLAN-Gruen gefuellt, damit die gewuenschte weisse Schrift
   tatsaechlich lesbar bleibt (Hover etwas dunkler, Text bleibt weiss).
   Selektor: exakte Klassenkombination aus snippets/cart-drawer.liquid
   Z.523 (.btn.btn--secondary.dynamic-section-button--drawer-outlined
   .cart-drawer__footer--button) — kommt nur an dieser einen Stelle vor,
   dadurch bereits eindeutig auf den Cart-Drawer gescoped.
   ============================================================ */
.btn.btn--secondary.dynamic-section-button--drawer-outlined.cart-drawer__footer--button {
    background-color: #1b3a2f !important;
    border-color: #1b3a2f !important;
    color: #ffffff !important;
}

.btn.btn--secondary.dynamic-section-button--drawer-outlined.cart-drawer__footer--button:hover {
    background-color: #16201c !important;
    border-color: #16201c !important;
    color: #ffffff !important;
}

/* ============================================================
   TRUSTED-SHOPS-TRUSTBADGE VERDECKT "ZUR KASSE"-BUTTON IM CART-DRAWER
   Trustbadge-Container wird zur Laufzeit instanzspezifisch injiziert
   (<div id="trustbadge-container-<hash>">) — Hash ist pro Seitenaufruf
   unterschiedlich, daher Attribut-Selektor [id^="trustbadge-container-"]
   statt volle ID.
   Cart-Drawer liegt bei z-index:20000 (.global-drawer, s.o. "Drawer-System
   über Header heben"), Overlay bei 19999. Trusted Shops setzt seinen
   z-index typischerweise inline nahe 2147483647 -> Badge liegt sonst immer
   über dem Drawer. Fix: Badge knapp UNTER den Drawer (19998) setzen, bleibt
   damit im normalen Seitenkontext weiterhin ueber Header (10000)/Content,
   nur nicht mehr ueber dem Cart-Drawer.
   !important ist hier zwingend: eine externe Stylesheet-Regel mit
   !important gewinnt gegen eine NICHT-!important Inline-Style-Deklaration.
   Falls Trusted Shops den z-index inline zusaetzlich mit !important
   erzwingt, kann keine externe Regel das mehr überschreiben — als
   Fallback wird deshalb zusaetzlich das iframe-Kind adressiert. */
div[id^="trustbadge-container-"],
div[id^="trustbadge-container-"] iframe {
    z-index: 19998 !important;
}

/* ============================================================
   CART-SEITE (/cart) CROSS-SELL-KARUSSELL "Vergessen Sie diese nicht ..."
   Optik an den Cart-Drawer-Fix angleichen (siehe Block weiter oben).
   Gefunden in: sections/template--cart.liquid Z.314-396 — kein eigenes
   Snippet, direkt in der Section. Rendert NICHT product-card-basic wie
   der Cart-Drawer, sondern snippets/grid-view-item.liquid im
   Standard-Zweig (<product-card class="grid-view-item ...">), da
   card_style nirgends auf 'aslan' gesetzt wird.
   Wrapper .cart--recommendations ist die bereits bestehende, eindeutige
   Scope-Klasse fuer diesen Bereich (siehe Regel weiter oben "Cart-Page:
   Vergessen Sie diese nicht"-Empfehlungen). .grid-view-item wird
   THEMENWEIT verwendet (Collections, Suche, Recently-Viewed, Shop-the-
   Look) — alle Selektoren daher zwingend unter .cart--recommendations
   gescoped, damit andere Seiten unveraendert bleiben.
   Ursache der zu grossen vertikalen Abstaende: .grid-view-item ist per
   product-card.grid-view-item{display:grid} (css-variables.liquid) ein
   Grid mit row-gap:1em (aus der Basis-Flex-Regel geerbt) + zusaetzlich
   .grid-view-item-image{margin-bottom:1em} + .product-grid--title/
   .product-grid--rating{padding-bottom:.5em} + dem globalen 44px-WCAG-
   Touch-Target auf .product-grid--title a (custom.css "Produkttitel-
   Links") — alles addiert sich zu den auseinandergerissenen Abstaenden.
   Farben konsistent zum Cart-Drawer-Fix: Titel #16201c, Preis #1b3a2f/600,
   "im Abo (…)"-Zeile gedaempft rgba(22,32,28,.55). ============================================================ */

/* Karten-Innen-Padding: Bild bleibt oben randlos (bewusst kein
   top-padding), Titel/Sterne/Preis bekommen seitliches + unteres Padding
   + dezenten Border (Radius bleibt das bestehende Theme-Token
   var(--radius-md), s.o. "ASLAN Vitality — Produkt-Cards") */
.cart--recommendations .grid-view-item {
    padding: 0 15px 16px;
    border: 1px solid rgba(27, 58, 47, 0.08);
    row-gap: 4px;
}

/* Vertikale Abstaende kompakt (~8px pro Uebergang statt ~1em+.5em):
   Bild -> Titel */
.cart--recommendations .grid-view-item-image:not(:last-child) {
    margin-bottom: 4px;
}

/* Titel -> Sterne-Bewertung / Bewertung -> Preiszeile */
.cart--recommendations .product-grid--title:not(:last-child),
.cart--recommendations .product-grid--rating:not(:last-child) {
    padding-bottom: 4px;
}

/* Globalen 44px-WCAG-Touch-Target-Fix (custom.css "Produkttitel-Links")
   nur in diesem Karussell reduzieren — Bild + separater "Zum Produkt"-
   Link bieten hier bereits ausreichend grosse Tap-Flaechen */
.cart--recommendations .product-grid--title a {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: auto !important;
}

/* Titelfarbe konsistent zum Cart-Drawer-Fix */
.cart--recommendations .product-grid--title,
.cart--recommendations .product-grid--title a {
    color: #16201c !important;
}

/* Preis "ab X € monatlich" / regulaerer Preis: prominent in Gruen */
.cart--recommendations .price--abo-main,
.cart--recommendations .product-price--regular .price--regular-price,
.cart--recommendations .product-price--sale .price--sale-price {
    color: #1b3a2f;
    font-weight: 600;
}

/* "im Abo" / Grundpreis "(… / 100 g)": klein und gedaempft */
.cart--recommendations .price--abo-note,
.cart--recommendations .unit-price,
.cart--recommendations .unit-price__price,
.cart--recommendations .unit-price .money,
.cart--recommendations .unit-price__ref-value,
.cart--recommendations .unit-price__ref-unit {
    color: rgba(22, 32, 28, 0.55) !important;
}

/* Fix 6: Cart-Drawer Line-Item "Entfernen": rotes Muelleimer-Icon statt X,
   besser erkennbar. Klickflaeche (padding: 14px, siehe theme.min.css) bleibt
   unveraendert bestehen -> Touch-Target weiterhin >= 24px. */
.cart-drawer__product-card--remove {
    color: #c0392b !important;
}

.cart-drawer__product-card--remove:hover,
.cart-drawer__product-card--remove:focus-visible {
    color: #922b21 !important;
}

.cart-drawer__product-card--remove-icon {
    width: 17px;
    height: 17px;
}