/*
 * LLU 5.3.0 color/typography system for Smartstore 4.2 storefront.
 * Dark is the LLU default. Light mirrors surfaces/text only; content is untouched.
 */

:root,
html[data-llu-theme="dark"] {
    --llu-page-bg: #121512;
    --llu-surface: #191d19;
    --llu-surface-2: #202620;
    --llu-surface-3: #293029;
    --llu-text: #ecebe6;
    --llu-text-soft: #c7cbc3;
    --llu-muted: #9ea69b;
    --llu-border: rgba(236,235,230,.14);
    --llu-shadow: rgba(0,0,0,.34);
    --llu-input-bg: #202620;
    --llu-input-text: #ecebe6;
    --llu-link: #8db7c5;
    --llu-sale: #64835a;
    --llu-sale-hover: #4f7048;
    --llu-sale-soft: #273126;
    --llu-contact: #538597;
    --llu-dark-left: #131713;
    --llu-dark-right: #1d241d;
    --llu-copy-dark: #c2c7be;
    --llu-focus: #9fc495;
    --llu-font-ui: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
    --llu-page-rgb: 18,21,18;
    --llu-surface-rgb: 25,29,25;
    --llu-slider-overlay-rgb: 18,21,18;
}

html[data-llu-theme="light"] {
    --llu-page-bg: #ffffff;
    --llu-surface: #ffffff;
    --llu-surface-2: #fafaf7;
    --llu-surface-3: #f2f4ef;
    --llu-text: #2e342f;
    --llu-text-soft: #4b554d;
    --llu-muted: #6c766d;
    --llu-border: rgba(46,52,47,.13);
    --llu-shadow: rgba(35,45,36,.08);
    --llu-input-bg: #ffffff;
    --llu-input-text: #2e342f;
    --llu-link: #456f7e;
    --llu-sale: #6f8f64;
    --llu-sale-hover: #58794f;
    --llu-sale-soft: #f1f5ee;
    --llu-contact: #5c8a99;
    --llu-dark-left: #ffffff;
    --llu-dark-right: #f7f8f4;
    --llu-copy-dark: #505951;
    --llu-focus: #557b4d;
    --llu-page-rgb: 255,255,255;
    --llu-surface-rgb: 255,255,255;
    --llu-slider-overlay-rgb: 255,255,255;
}

html {
    background: var(--llu-page-bg);
}

body,
body input,
body button,
body select,
body textarea,
body .btn,
body .form-control,
body .dropdown-menu,
body .modal,
body .popover,
body .tooltip,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--llu-font-ui) !important;
}

body {
    background: var(--llu-page-bg) !important;
    color: var(--llu-text) !important;
    font-size: clamp(15px, calc(14px + .16vw), 18px);
    line-height: 1.55;
    transition: background-color .18s ease, color .18s ease;
}

body h1 { font-size: clamp(30px, 2.15vw, 46px); }
body h2 { font-size: clamp(24px, 1.65vw, 36px); }
body h3 { font-size: clamp(20px, 1.25vw, 28px); }
body h4 { font-size: clamp(18px, 1vw, 23px); }
body .btn,
body .form-control,
body .custom-select,
body select {
    font-size: clamp(14px, calc(13px + .10vw), 16px);
}

/* Whole Smartstore storefront, excluding the image-based home hero itself. */
#page,
.page-main,
#content-wrapper,
#content,
#content-body,
#content-center,
.page,
.page-body,
.master-wrapper-page {
    background-color: var(--llu-page-bg);
    color: var(--llu-text);
}

body:not(.llu-home) #header,
body:not(.llu-home) .header,
body:not(.llu-home) .shopbar-section,
body:not(.llu-home) .menubar-section,
body:not(.llu-home) .megamenu-section,
body:not(.llu-home) .navbar,
body:not(.llu-home) .breadcrumb {
    background-color: var(--llu-surface) !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

body a:not(.btn) {
    color: var(--llu-link);
}

body a:not(.btn):hover,
body a:not(.btn):focus {
    color: var(--llu-focus);
}

/* Common Smartstore/Flex surfaces. */
.card,
.card-body,
.card-header,
.card-footer,
.block,
.block-body,
.box,
.panel,
.list-group-item,
.dropdown-menu,
.modal-content,
.popover,
.table,
.table td,
.table th,
.product-box,
.art,
.artlist,
.product-list,
.product-grid,
.topic-block,
.topic-block-body,
.news-item,
.forum-table,
.account-page,
.registration-page,
.login-page,
.order-summary-content {
    background-color: var(--llu-surface) !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

.card-header,
.card-footer,
.table thead th,
.table-active,
.table-striped tbody tr:nth-of-type(odd),
.list-group-item.active + .list-group-item,
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--llu-surface-2) !important;
    color: var(--llu-text) !important;
}

.dropdown-item,
.nav-link,
.breadcrumb-item,
.page-link,
.pagination a,
.table,
.table td,
.table th,
label,
.form-text,
.text-body {
    color: var(--llu-text-soft) !important;
}

.text-muted,
.help-block,
.form-text.text-muted,
.small,
small {
    color: var(--llu-muted) !important;
}

.form-control,
.custom-select,
.input-group-text,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    background-color: var(--llu-input-bg) !important;
    color: var(--llu-input-text) !important;
    border-color: var(--llu-border) !important;
}

.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
    border-color: var(--llu-focus) !important;
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--llu-focus) 25%, transparent);
}

/* color-mix fallback for older browsers used with Smartstore 4.2. */
@supports not (color: color-mix(in srgb, black 50%, white)) {
    .form-control:focus,
    .custom-select:focus,
    select:focus,
    textarea:focus,
    input:focus {
        box-shadow: 0 0 0 .15rem rgba(100,131,90,.25);
    }
}

hr,
.dropdown-divider,
.nav-tabs,
.card,
.list-group-item,
.table td,
.table th {
    border-color: var(--llu-border) !important;
}

/* HOME: retain imagery/content, but use the same color variables. */
body.llu-home .llu-section,
body.llu-home .llu-section--sale {
    background: var(--llu-page-bg) !important;
    color: var(--llu-text) !important;
}

body.llu-home .llu-section-label {
    color: var(--llu-text) !important;
}

body.llu-home .llu-section--contact,
body.llu-home #kontakt {
    background: var(--llu-surface-2) !important;
    color: var(--llu-text) !important;
}

body.llu-home .llu-section--contact .llu-section-label,
body.llu-home .llu-section--contact .topic-block,
body.llu-home .llu-section--contact .topic-block-body,
body.llu-home .llu-section--contact a {
    color: var(--llu-text) !important;
}

body.llu-home .llu-section--horses,
body.llu-home .llu-section--livestock {
    color: var(--llu-text) !important;
}

html[data-llu-theme="light"] body.llu-home .llu-legacy-two-col h3,
html[data-llu-theme="light"] body.llu-home .llu-section--horses h3,
html[data-llu-theme="light"] body.llu-home .llu-section--livestock h3 {
    color: var(--llu-text) !important;
}

/* In light mode the existing two split panels are mirrored to light surfaces. */
html[data-llu-theme="light"] body.llu-home .llu-legacy-two-col--horses .llu-legacy-col--left,
html[data-llu-theme="light"] body.llu-home .llu-legacy-two-col--livestock .llu-legacy-col--left {
    background: var(--llu-dark-left) !important;
}

html[data-llu-theme="light"] body.llu-home .llu-legacy-two-col--horses .llu-legacy-col--right,
html[data-llu-theme="light"] body.llu-home .llu-legacy-two-col--livestock .llu-legacy-col--right {
    background: var(--llu-dark-right) !important;
}

/* Remove the former white-only sale transition and map it to the active mode. */
body.llu-home .llu-section--sale::before {
    background:
        linear-gradient(to bottom, var(--llu-dark-left) 0%, transparent 100%) left top / 50% 100% no-repeat,
        linear-gradient(to bottom, var(--llu-dark-right) 0%, transparent 100%) right top / 50% 100% no-repeat !important;
    opacity: .55;
}

/* SALE now owns a nature green instead of sharing the contact blue. */
.llu-nav-sale {
    background: var(--llu-sale) !important;
    color: #fff !important;
}

.llu-nav-sale:hover,
.llu-nav-sale:focus {
    background: var(--llu-sale-hover) !important;
    color: #fff !important;
}

body.llu-home .llu-section--sale .btn-primary,
.pmcc .pmcc-action.btn-primary,
.pm-market .btn-primary,
.pmp-market-listing .btn-primary {
    background-color: var(--llu-sale) !important;
    border-color: var(--llu-sale) !important;
    color: #fff !important;
}

body.llu-home .llu-section--sale .btn-primary:hover,
body.llu-home .llu-section--sale .btn-primary:focus,
.pmcc .pmcc-action.btn-primary:hover,
.pmcc .pmcc-action.btn-primary:focus,
.pm-market .btn-primary:hover,
.pm-market .btn-primary:focus,
.pmp-market-listing .btn-primary:hover,
.pmp-market-listing .btn-primary:focus {
    background-color: var(--llu-sale-hover) !important;
    border-color: var(--llu-sale-hover) !important;
}

.pmcc {
    --pmcc-market-accent: var(--llu-sale) !important;
}

/* Keep CONTACT distinct in blue/teal. */
.llu-nav-contact {
    background: var(--llu-contact) !important;
    color: #fff !important;
}

/* Product/manufacturer cards in the sale area follow current theme surfaces. */
.llu-section--sale .card,
.llu-section--sale .product-box,
.llu-section--sale .art,
.llu-section--sale .llu-product-card,
.llu-section--sale .llu-manufacturer-card {
    background: var(--llu-surface) !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
    box-shadow: 0 10px 28px var(--llu-shadow);
}

/* Footer follows the selected mode but remains visually separated. */
#footer,
.llu-footer {
    background: var(--llu-surface-2) !important;
    color: var(--llu-text-soft) !important;
}

.llu-footer-company,
.llu-footer-links a,
.llu-footer-copy,
.llu-footer-language {
    color: var(--llu-text-soft) !important;
}

.llu-theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
    padding: 5px;
    border: 1px solid var(--llu-border);
    background: var(--llu-surface);
}

.llu-theme-switch-btn {
    width: 42px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--llu-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.llu-theme-switch-btn:hover,
.llu-theme-switch-btn:focus {
    color: var(--llu-text);
    background: var(--llu-surface-3);
    outline: none;
}

.llu-theme-switch-btn:focus-visible {
    outline: 2px solid var(--llu-focus);
    outline-offset: 2px;
}

.llu-theme-switch-btn.is-active,
.llu-theme-switch-btn[aria-pressed="true"] {
    background: var(--llu-sale);
    color: #fff;
}

/* The bundled CMS fallback now gets exactly the wrapper expected by llu.js. */
body.llu-home .llu-bundled-topic,
body.llu-home .llu-bundled-topic > .more-block {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Flexible two-column desktop layout; collapses naturally on tablet/mobile. */
@media (min-width: 901px) {
    body.llu-home .llu-legacy-two-col {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: clamp(42px, 6vw, 112px) !important;
        width: 100% !important;
        max-width: 1180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 900px) {
    body.llu-home .llu-legacy-two-col {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .llu-theme-switch-btn {
        transition: none !important;
    }
}


/* ============================================================
   LLU 5.3.1 – complete mode mirroring / bleed-through fixes
   ============================================================ */

/* Footer locale tools: language flags and sun/moon sit on one compact row. */
.llu-footer-locale-tools {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
}

.llu-footer-locale-tools .llu-footer-language,
.llu-footer-locale-tools .llu-theme-switch {
    margin-top: 0 !important;
}

.llu-footer-locale-tools .llu-footer-language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.llu-footer-locale-tools .llu-footer-language .menubar-link {
    min-width: 54px;
    height: 28px;
    padding: 0 8px;
    gap: 5px;
    border-color: var(--llu-border) !important;
    background: var(--llu-surface) !important;
    color: var(--llu-text-soft) !important;
}

.llu-footer-locale-tools .llu-theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--llu-border);
    background: var(--llu-surface);
}

.llu-footer-locale-tools .llu-theme-switch-btn {
    width: 27px;
    height: 24px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

.llu-footer-locale-tools .llu-theme-switch-btn.is-active,
.llu-footer-locale-tools .llu-theme-switch-btn[aria-pressed="true"] {
    background: var(--llu-surface-3);
    color: var(--llu-text);
}

/* Home shell itself always follows the active mode. */
body.llu-home,
body.llu-home #page,
body.llu-home .page-main,
body.llu-home #content-wrapper,
body.llu-home #content,
body.llu-home #content-body,
body.llu-home #content-center,
body.llu-home .page,
body.llu-home .page-body,
body.llu-home .master-wrapper-page,
body.llu-home .llu-home-shell {
    background: var(--llu-page-bg) !important;
    color: var(--llu-text) !important;
}

/* Intro/welcome was previously hard-coded white/black. */
body.llu-home .llu-hero-welcome {
    color: var(--llu-text) !important;
}

body.llu-home .llu-welcome-title {
    color: var(--llu-text) !important;
}

body.llu-home .llu-welcome-copy {
    background: rgba(var(--llu-surface-rgb), .84) !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

body.llu-home .llu-welcome-copy .topic-block,
body.llu-home .llu-welcome-copy .topic-block-body,
body.llu-home .llu-welcome-copy .topic-block-title {
    background: transparent !important;
    color: inherit !important;
}

/* content_before / ContentSlider:
   no black band in light mode and no white wrapper in dark mode. */
body.llu-home .llu-slider-slot,
body.llu-home .llu-slider-slot > *,
body.llu-home .llu-slider-slot .widget-zone,
body.llu-home .llu-slider-slot [data-widget-zone] {
    background-color: var(--llu-page-bg) !important;
    border-color: var(--llu-border) !important;
}

body.llu-home .llu-slider-slot {
    padding-top: clamp(20px, 3vw, 34px) !important;
    padding-bottom: clamp(20px, 3vw, 34px) !important;
}

body.llu-home .llu-slider-slot .container,
body.llu-home .llu-slider-slot .container-fluid {
    background: transparent !important;
}

body.llu-home .llu-slider-slot .carousel,
body.llu-home .llu-slider-slot .carousel-inner {
    background-color: var(--llu-surface) !important;
    color: var(--llu-text) !important;
}

body.llu-home .llu-slider-slot .carousel .carousel-item {
    background-color: var(--llu-surface) !important;
    color: var(--llu-text) !important;
    box-shadow: inset 0 0 0 9999px rgba(var(--llu-slider-overlay-rgb), .18) !important;
}

body.llu-home .llu-slider-slot .carousel .carousel-item h1,
body.llu-home .llu-slider-slot .carousel .carousel-item h2,
body.llu-home .llu-slider-slot .carousel .carousel-item h3,
body.llu-home .llu-slider-slot .carousel .carousel-item h4,
body.llu-home .llu-slider-slot .carousel .carousel-item h5,
body.llu-home .llu-slider-slot .carousel .carousel-item h6,
body.llu-home .llu-slider-slot .carousel .carousel-item p,
body.llu-home .llu-slider-slot .carousel .carousel-item .carousel-caption {
    color: var(--llu-text) !important;
}

/* All editorial sections mirror instead of carrying legacy fixed white/dark colors. */
body.llu-home .llu-section,
body.llu-home .llu-section--news,
body.llu-home .llu-section--horses,
body.llu-home .llu-section--livestock,
body.llu-home .llu-section--sale,
body.llu-home .llu-section--contact,
body.llu-home .llu-section--recent {
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

body.llu-home .llu-section--news,
body.llu-home .llu-section--horses,
body.llu-home .llu-section--livestock {
    background:
        linear-gradient(
            to right,
            var(--llu-dark-left) 0%,
            var(--llu-dark-left) 50%,
            var(--llu-dark-right) 50%,
            var(--llu-dark-right) 100%
        ) !important;
}

body.llu-home .llu-section--sale,
body.llu-home .llu-section--recent {
    background: var(--llu-page-bg) !important;
}

body.llu-home .llu-section--contact,
body.llu-home #kontakt {
    background: var(--llu-surface-2) !important;
}

body.llu-home .llu-section-label,
body.llu-home .llu-section h1,
body.llu-home .llu-section h2,
body.llu-home .llu-section h3,
body.llu-home .llu-section h4,
body.llu-home .llu-section h5,
body.llu-home .llu-section h6,
body.llu-home .llu-section p,
body.llu-home .llu-section li,
body.llu-home .llu-section dt,
body.llu-home .llu-section dd {
    color: var(--llu-text) !important;
}

/* Original divider graphics are mode-sensitive:
   dark keeps the original dark artwork; light mirrors to clean near-white split. */
body.llu-home .llu-original-divider {
    background-color: var(--llu-page-bg) !important;
    border: 0 !important;
}

html[data-llu-theme="light"] body.llu-home .llu-original-divider {
    background-image: none !important;
    background:
        linear-gradient(
            to right,
            var(--llu-dark-left) 0%,
            var(--llu-dark-left) 50%,
            var(--llu-dark-right) 50%,
            var(--llu-dark-right) 100%
        ) !important;
    box-shadow: 0 -12px 24px rgba(35,45,36,.06) !important;
}

html[data-llu-theme="dark"] body.llu-home .llu-original-divider {
    background-color: var(--llu-dark-left) !important;
}

/* Prevent white fallback canvas behind photos in dark mode. */
body.llu-home .llu-original-photo,
body.llu-home .llu-original-photo--after-sale {
    background-color: var(--llu-page-bg) !important;
    border-color: var(--llu-border) !important;
}

/* Legacy dark shadow graphic is too dark for light mode; mirror it to a soft white edge. */
html[data-llu-theme="light"] body.llu-home .llu-original-shadow {
    background-image: none !important;
    background:
        linear-gradient(
            to bottom,
            rgba(35,45,36,.10) 0%,
            rgba(255,255,255,0) 100%
        ) !important;
}

html[data-llu-theme="dark"] body.llu-home .llu-original-shadow {
    background-color: transparent !important;
}

/* Sale top transition follows mode; no dark gradient can leak into light mode. */
body.llu-home .llu-section--sale::before {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-page-rgb), .92) 0%,
            rgba(var(--llu-page-rgb), .34) 50%,
            rgba(var(--llu-page-rgb), 0) 100%
        ) left top / 50% 100% no-repeat,
        linear-gradient(
            to bottom,
            rgba(var(--llu-page-rgb), .92) 0%,
            rgba(var(--llu-page-rgb), .34) 50%,
            rgba(var(--llu-page-rgb), 0) 100%
        ) right top / 50% 100% no-repeat !important;
}

/* The old "post-sale-white" name is historical only; surface now follows mode. */
body.llu-home .llu-post-sale-white,
body.llu-home .llu-post-sale-white-inner,
body.llu-home .llu-post-sale-white .block,
body.llu-home .llu-post-sale-white .block-body,
body.llu-home .llu-post-sale-white .widget-zone,
body.llu-home .llu-post-sale-white [data-widget-zone] {
    background: var(--llu-page-bg) !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

/* Transition from sale/polls into contact image also follows the active mode. */
body.llu-home .llu-original-photo--after-sale::before {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-page-rgb), 1) 0%,
            rgba(var(--llu-page-rgb), .62) 34%,
            rgba(var(--llu-page-rgb), .18) 68%,
            rgba(var(--llu-page-rgb), 0) 100%
        ) !important;
}

/* Native homepage output: remove remaining hard white/dark island surfaces. */
body.llu-home .llu-native-home-slot,
body.llu-home .llu-native-home-slot > *,
body.llu-home .llu-native-home-slot .block,
body.llu-home .llu-native-home-slot .block-body,
body.llu-home .llu-native-home-slot .card,
body.llu-home .llu-native-home-slot .card-body,
body.llu-home .llu-native-home-slot .art,
body.llu-home .llu-native-home-slot .product-box,
body.llu-home .llu-native-home-slot .list-group-item,
body.llu-home .home-page-news,
body.llu-home .news-list-homepage,
body.llu-home .poll,
body.llu-home .poll-display-text,
body.llu-home .recently-viewed-products {
    background-color: var(--llu-page-bg) !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

/* Cards themselves may remain slightly raised from the page. */
body.llu-home .llu-native-home-slot .card,
body.llu-home .llu-native-home-slot .art,
body.llu-home .llu-native-home-slot .product-box {
    background-color: var(--llu-surface) !important;
}

/* Light mode should shade toward white, not grey/black. */
html[data-llu-theme="light"] body.llu-home .card,
html[data-llu-theme="light"] body.llu-home .product-box,
html[data-llu-theme="light"] body.llu-home .art,
html[data-llu-theme="light"] body.llu-home .list-group-item,
html[data-llu-theme="light"] body.llu-home .llu-welcome-copy,
html[data-llu-theme="light"] body.llu-home .llu-slider-slot .carousel {
    box-shadow: 0 10px 30px var(--llu-shadow) !important;
}

/* Dark mode: kill known white Flex/Smartstore helper canvases on the homepage. */
html[data-llu-theme="dark"] body.llu-home .bg-white,
html[data-llu-theme="dark"] body.llu-home .bg-light,
html[data-llu-theme="dark"] body.llu-home .section,
html[data-llu-theme="dark"] body.llu-home .widget-zone,
html[data-llu-theme="dark"] body.llu-home [data-widget-zone],
html[data-llu-theme="dark"] body.llu-home .container-fluid:not(.llu-hero-container) {
    background-color: transparent !important;
    border-color: var(--llu-border) !important;
}

/* Storefront chrome: fill remaining common Flex surfaces in both modes. */
body .offcanvas,
body .offcanvas-menu,
body .offcanvas-body,
body .shopbar-flyout,
body .mega-menu-dropdown,
body .nav-tabs .nav-link,
body .pagination .page-link,
body .alert,
body .toast,
body .toast-header,
body .toast-body,
body .quantity-control,
body .qty-input,
body .product-details-page,
body .manufacturer-details-page,
body .category-page,
body .search-page,
body .cart-page,
body .checkout-page,
body .order-list-page,
body .wishlist-page,
body .compare-products-page {
    background-color: var(--llu-surface) !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

/* MARKET green is an area/navigation accent only, not a global button skin. */
.llu-nav-sale {
    background: var(--llu-sale) !important;
    color: #fff !important;
}

.pmcc {
    --pmcc-market-accent: var(--llu-sale) !important;
}

/* Undo 5.3.0 broad market-button green override: buttons follow store theme. */
.pmcc .pmcc-action.btn-primary,
.pm-market .btn-primary,
.pmp-market-listing .btn-primary {
    background-color: initial;
    border-color: initial;
}

@media (max-width: 767.98px) {
    .llu-footer-locale-tools {
        gap: 5px;
    }

    .llu-footer-locale-tools .llu-footer-language .menubar-link {
        min-width: 50px;
        height: 27px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .llu-footer-locale-tools .llu-theme-switch-btn {
        width: 25px;
        height: 23px;
        font-size: 13px;
    }
}


/* ============================================================
   LLU 5.3.2 – definitive section colors + transition reset
   ============================================================ */

:root,
html[data-llu-theme="dark"] {
    --llu-horses: #57B7F2;
    --llu-livestock: #BD7F46;
    --llu-sale: #64835A;
    --llu-sale-hover: #527348;
    --llu-contact: #538597;
    --llu-section-neutral: #D9C0A2;
}

html[data-llu-theme="light"] {
    --llu-horses: #3F9FD8;
    --llu-livestock: #A76831;
    --llu-sale: #5E8153;
    --llu-sale-hover: #4D7045;
    --llu-contact: #47798A;
    --llu-section-neutral: #A98560;
}

/* ------------------------------------------------------------
   Navigation: each section owns its accent.
   SALE is explicitly green and cannot fall back to CONTACT blue.
   ------------------------------------------------------------ */

body.llu-home .llu-nav-horses,
.llu-nav-horses {
    background: var(--llu-horses) !important;
    color: #1f2a30 !important;
}

body.llu-home .llu-nav-livestock,
.llu-nav-livestock {
    background: var(--llu-livestock) !important;
    color: #fff !important;
}

body.llu-home .llu-nav-sale,
.llu-nav-sale {
    background: var(--llu-sale) !important;
    color: #fff !important;
}

body.llu-home .llu-nav-sale:hover,
body.llu-home .llu-nav-sale:focus,
.llu-nav-sale:hover,
.llu-nav-sale:focus {
    background: var(--llu-sale-hover) !important;
    color: #fff !important;
}

body.llu-home .llu-nav-contact,
.llu-nav-contact {
    background: var(--llu-contact) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   Section headings use the same accent as their navigation button.
   This applies in BOTH modes.
   ------------------------------------------------------------ */

body.llu-home .llu-section--horses > .llu-section-inner > .llu-section-label,
body.llu-home #pferdezucht .llu-section-label {
    color: var(--llu-horses) !important;
}

body.llu-home .llu-section--livestock > .llu-section-inner > .llu-section-label,
body.llu-home #viehzucht .llu-section-label {
    color: var(--llu-livestock) !important;
}

body.llu-home .llu-section--sale > .llu-section-inner > .llu-section-label,
body.llu-home #verkauf .llu-section-label {
    color: var(--llu-sale) !important;
}

body.llu-home .llu-section--contact > .llu-section-inner > .llu-section-label,
body.llu-home #kontakt .llu-section-label {
    color: var(--llu-contact) !important;
}

/* CMS subheadings remain readable and softly inherit their section family. */
body.llu-home .llu-section--horses h3 {
    color: var(--llu-horses) !important;
}

body.llu-home .llu-section--livestock h3 {
    color: var(--llu-livestock) !important;
}

body.llu-home .llu-section--sale h2,
body.llu-home .llu-section--sale h3,
body.llu-home .llu-section--sale h4 {
    color: var(--llu-sale) !important;
}

/* ------------------------------------------------------------
   SALE text: consistently readable on the active background.
   ------------------------------------------------------------ */

body.llu-home .llu-section--sale,
body.llu-home .llu-section--sale p,
body.llu-home .llu-section--sale li,
body.llu-home .llu-section--sale dt,
body.llu-home .llu-section--sale dd,
body.llu-home .llu-section--sale .topic-block,
body.llu-home .llu-section--sale .topic-block-body,
body.llu-home .llu-section--sale .html-editor-content {
    color: var(--llu-text) !important;
}

body.llu-home .llu-section--sale a:not(.btn) {
    color: var(--llu-sale) !important;
}

/* Buttons that are specifically INSIDE the sale section get the green accent.
   Other Smartstore buttons continue to follow normal storefront styling. */
body.llu-home .llu-section--sale .btn-primary,
body.llu-home .llu-section--sale .btn-success,
body.llu-home .llu-section--sale .btn[data-action="sale"] {
    background: var(--llu-sale) !important;
    border-color: var(--llu-sale) !important;
    color: #fff !important;
}

body.llu-home .llu-section--sale .btn-primary:hover,
body.llu-home .llu-section--sale .btn-primary:focus,
body.llu-home .llu-section--sale .btn-success:hover,
body.llu-home .llu-section--sale .btn-success:focus,
body.llu-home .llu-section--sale .btn[data-action="sale"]:hover,
body.llu-home .llu-section--sale .btn[data-action="sale"]:focus {
    background: var(--llu-sale-hover) !important;
    border-color: var(--llu-sale-hover) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   Transition reset:
   old back_home/shadow assets may remain as files, but they no longer
   participate in color transitions. This prevents black in light mode
   and white in dark mode.
   ------------------------------------------------------------ */

body.llu-home .llu-original-divider,
body.llu-home .llu-original-divider--1,
body.llu-home .llu-original-divider--2,
body.llu-home .llu-original-shadow,
body.llu-home .llu-post-sale-white,
body.llu-home .llu-post-sale-white-inner {
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Between hero/photo and HORSES: use the page mode only. */
body.llu-home .llu-original-shadow {
    height: clamp(16px, 2.2vw, 28px) !important;
    min-height: 0 !important;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-page-rgb), 0) 0%,
            rgba(var(--llu-page-rgb), .58) 45%,
            rgba(var(--llu-page-rgb), 1) 100%
        ) !important;
}

/* Between HORSES and LIVESTOCK: no legacy black divider. */
body.llu-home .llu-original-divider {
    height: clamp(16px, 2.2vw, 28px) !important;
    min-height: 0 !important;
    background: var(--llu-page-bg) !important;
}

/* SALE begins directly in the active page color. */
body.llu-home .llu-section--sale::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Historical "white" block now follows the current mode exactly. */
body.llu-home .llu-post-sale-white,
body.llu-home .llu-post-sale-white-inner,
body.llu-home .llu-post-sale-white .widget-zone,
body.llu-home .llu-post-sale-white [data-widget-zone],
body.llu-home .llu-post-sale-white .block,
body.llu-home .llu-post-sale-white .block-body {
    background: var(--llu-page-bg) !important;
    color: var(--llu-text) !important;
}

/* Photo after sale: disable hard-coded white/black overlay. */
body.llu-home .llu-original-photo--after-sale::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Every section boundary is mode-owned, never asset-owned. */
html[data-llu-theme="light"] body.llu-home .llu-original-divider,
html[data-llu-theme="light"] body.llu-home .llu-original-shadow,
html[data-llu-theme="light"] body.llu-home .llu-post-sale-white {
    background-color: #fff !important;
}

html[data-llu-theme="dark"] body.llu-home .llu-original-divider,
html[data-llu-theme="dark"] body.llu-home .llu-original-shadow,
html[data-llu-theme="dark"] body.llu-home .llu-post-sale-white {
    background-color: var(--llu-page-bg) !important;
}

/* ------------------------------------------------------------
   Light mode: section copy is dark; accent headings stay colored.
   This explicitly overrides old #fff declarations from llu.css.
   ------------------------------------------------------------ */

html[data-llu-theme="light"] body.llu-home .llu-section--horses,
html[data-llu-theme="light"] body.llu-home .llu-section--livestock,
html[data-llu-theme="light"] body.llu-home .llu-section--sale,
html[data-llu-theme="light"] body.llu-home .llu-section--contact,
html[data-llu-theme="light"] body.llu-home .llu-section--horses p,
html[data-llu-theme="light"] body.llu-home .llu-section--livestock p,
html[data-llu-theme="light"] body.llu-home .llu-section--sale p,
html[data-llu-theme="light"] body.llu-home .llu-section--contact p {
    color: var(--llu-text) !important;
}

/* Dark mode: section copy is light throughout. */
html[data-llu-theme="dark"] body.llu-home .llu-section--horses,
html[data-llu-theme="dark"] body.llu-home .llu-section--livestock,
html[data-llu-theme="dark"] body.llu-home .llu-section--sale,
html[data-llu-theme="dark"] body.llu-home .llu-section--contact,
html[data-llu-theme="dark"] body.llu-home .llu-section--horses p,
html[data-llu-theme="dark"] body.llu-home .llu-section--livestock p,
html[data-llu-theme="dark"] body.llu-home .llu-section--sale p,
html[data-llu-theme="dark"] body.llu-home .llu-section--contact p {
    color: var(--llu-text) !important;
}

/* ------------------------------------------------------------
   Compact footer controls – exactly one row beside language selector.
   ------------------------------------------------------------ */

.llu-footer-locale-tools {
    width: auto !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 18px auto 0 !important;
    vertical-align: middle !important;
}

.llu-footer-locale-tools .llu-footer-language {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    width: auto !important;
}

.llu-footer-locale-tools .llu-footer-language .dropdown,
.llu-footer-locale-tools .llu-footer-language .language-selector {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.llu-footer-locale-tools .llu-footer-language .menubar-link {
    min-width: 44px !important;
    height: 23px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    line-height: 21px !important;
}

.llu-footer-locale-tools .llu-theme-switch {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 1px !important;
    vertical-align: middle !important;
}

.llu-footer-locale-tools .llu-theme-switch-btn {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 11px !important;
    line-height: 20px !important;
}

.llu-footer-locale-tools .llu-theme-switch-btn span[aria-hidden="true"] {
    display: block !important;
    font-size: 11px !important;
    line-height: 20px !important;
}

@media (max-width: 479.98px) {
    .llu-footer-locale-tools {
        gap: 3px !important;
    }

    .llu-footer-locale-tools .llu-footer-language .menubar-link {
        min-width: 42px !important;
        height: 22px !important;
    }

    .llu-footer-locale-tools .llu-theme-switch-btn {
        width: 19px !important;
        min-width: 19px !important;
        height: 19px !important;
        min-height: 19px !important;
        font-size: 10px !important;
        line-height: 19px !important;
    }
}


/* ============================================================
   LLU 5.3.3 – hero/welcome remains intentionally light
   ============================================================ */

/*
 * The opening LLU identity section is not part of the storefront color mode.
 * It remains visually identical in light and dark mode:
 * original hero image + bright translucent reading panel + dark copy.
 */
body.llu-home .llu-legacy-hero .llu-hero-welcome {
    color: #222 !important;
}

body.llu-home .llu-legacy-hero .llu-welcome-title,
html[data-llu-theme="dark"] body.llu-home .llu-legacy-hero .llu-welcome-title,
html[data-llu-theme="light"] body.llu-home .llu-legacy-hero .llu-welcome-title {
    color: #111 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.28);
}

body.llu-home .llu-legacy-hero .llu-welcome-copy,
html[data-llu-theme="dark"] body.llu-home .llu-legacy-hero .llu-welcome-copy,
html[data-llu-theme="light"] body.llu-home .llu-legacy-hero .llu-welcome-copy {
    background: rgba(255,255,255,.72) !important;
    color: #222 !important;
    border-color: rgba(255,255,255,.45) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.10);
}

body.llu-home .llu-legacy-hero .llu-welcome-copy,
body.llu-home .llu-legacy-hero .llu-welcome-copy p,
body.llu-home .llu-legacy-hero .llu-welcome-copy li,
body.llu-home .llu-legacy-hero .llu-welcome-copy dt,
body.llu-home .llu-legacy-hero .llu-welcome-copy dd,
body.llu-home .llu-legacy-hero .llu-welcome-copy strong,
body.llu-home .llu-legacy-hero .llu-welcome-copy em,
body.llu-home .llu-legacy-hero .llu-welcome-copy span,
body.llu-home .llu-legacy-hero .llu-welcome-copy .topic-block,
body.llu-home .llu-legacy-hero .llu-welcome-copy .topic-block-body,
body.llu-home .llu-legacy-hero .llu-welcome-copy .topic-block-title,
body.llu-home .llu-legacy-hero .llu-welcome-copy .html-editor-content {
    color: #222 !important;
    background: transparent !important;
}

body.llu-home .llu-legacy-hero .llu-welcome-copy a:not(.btn) {
    color: #355f70 !important;
}

body.llu-home .llu-legacy-hero .llu-welcome-copy a:not(.btn):hover,
body.llu-home .llu-legacy-hero .llu-welcome-copy a:not(.btn):focus {
    color: #244957 !important;
}

@media (max-width: 767.98px) {
    body.llu-home .llu-legacy-hero .llu-welcome-copy,
    html[data-llu-theme="dark"] body.llu-home .llu-legacy-hero .llu-welcome-copy,
    html[data-llu-theme="light"] body.llu-home .llu-legacy-hero .llu-welcome-copy {
        background: rgba(255,255,255,.80) !important;
    }
}


/* ============================================================
   LLU 5.4.1 – accepted refinements only
   IMPORTANT:
   - Navigation geometry remains the 5.3.3 baseline.
   - Welcome/intro surface remains the 5.3.3 baseline.
   ============================================================ */

:root,
html[data-llu-theme="dark"] {
    --llu-news: #E9CEAC;
    --llu-news-left: #191D19;
    --llu-news-right: #111411;
    --llu-horses: #57B7F2;
    --llu-livestock: #BD7F46;
    --llu-sale: #64835A;
    --llu-sale-hover: #58774F;
    --llu-contact: #538597;
}

html[data-llu-theme="light"] {
    --llu-news: #AD8760;
    --llu-news-left: #FFFFFF;
    --llu-news-right: #EEF1EB;
    --llu-horses: #338DC2;
    --llu-livestock: #A46631;
    --llu-sale: #64835A;
    --llu-sale-hover: #58774F;
    --llu-contact: #47798A;
}

/* Trebuchet remains the storefront text family. */
html,
body,
body .page,
body .page-body,
body .topic-block,
body .topic-block-body,
body .html-editor-content,
body .product-title,
body .product-name,
body .news-title,
body .news-body,
body .btn,
body input,
body textarea,
body select,
body label,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body li,
body dt,
body dd,
body th,
body td {
    font-family: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif !important;
}

/* Only the BIG LLU section labels use the section color. */
body.llu-home #aktuelle-neuigkeiten .llu-section-label,
body.llu-home .llu-section--news > .llu-section-inner > .llu-section-label {
    color: var(--llu-news) !important;
}

body.llu-home #pferdezucht .llu-section-label,
body.llu-home .llu-section--horses > .llu-section-inner > .llu-section-label {
    color: var(--llu-horses) !important;
}

body.llu-home #viehzucht .llu-section-label,
body.llu-home .llu-section--livestock > .llu-section-inner > .llu-section-label {
    color: var(--llu-livestock) !important;
}

body.llu-home #verkauf .llu-section-label,
body.llu-home .llu-section--sale > .llu-section-inner > .llu-section-label {
    color: var(--llu-sale) !important;
}

body.llu-home #kontakt .llu-section-label,
body.llu-home .llu-section--contact > .llu-section-inner > .llu-section-label {
    color: var(--llu-contact) !important;
}

/* Smaller content headings are normal text, not accent-colored. */
body.llu-home .llu-section--news h2,
body.llu-home .llu-section--news h3,
body.llu-home .llu-section--news h4,
body.llu-home .llu-section--horses h2,
body.llu-home .llu-section--horses h3,
body.llu-home .llu-section--horses h4,
body.llu-home .llu-section--livestock h2,
body.llu-home .llu-section--livestock h3,
body.llu-home .llu-section--livestock h4,
body.llu-home .llu-section--sale h2,
body.llu-home .llu-section--sale h3,
body.llu-home .llu-section--sale h4,
body.llu-home .llu-section--contact h2,
body.llu-home .llu-section--contact h3,
body.llu-home .llu-section--contact h4,
body.llu-home .llu-legacy-two-col h3 {
    color: var(--llu-text) !important;
}

/* News right half is slightly darker/more distinct when two-column News exists. */
body.llu-home .llu-section--news {
    background:
        linear-gradient(
            to right,
            var(--llu-news-left) 0%,
            var(--llu-news-left) 50%,
            var(--llu-news-right) 50%,
            var(--llu-news-right) 100%
        ) !important;
}

@media (max-width: 900px) {
    body.llu-home .llu-section--news {
        background: var(--llu-news-left) !important;
    }

    body.llu-home .llu-home-news .news-preview-lg:nth-child(even) {
        background: var(--llu-news-right) !important;
    }
}

/* SALE is green already in the normal state; hover only darkens slightly. */
body.llu-home .llu-nav-sale,
.llu-nav-sale {
    background-color: var(--llu-sale) !important;
    color: #fff !important;
}

body.llu-home .llu-nav-sale:hover,
body.llu-home .llu-nav-sale:focus,
.llu-nav-sale:hover,
.llu-nav-sale:focus {
    background-color: var(--llu-sale-hover) !important;
    color: #fff !important;
}

/*
 * Do NOT add navigation sizing/translation rules here.
 * Do NOT alter .llu-welcome-copy here.
 * Both intentionally remain 5.3.3.
 */


/* ============================================================
   LLU 5.4.6 – winner baseline 5.4.1
   Only transition colors + homepage image crop positions.
   ============================================================ */

:root,
html[data-llu-theme="dark"] {
    --llu-transition-bg: var(--llu-page-bg);
    --llu-transition-rgb: var(--llu-page-rgb);
}

html[data-llu-theme="light"] {
    --llu-transition-bg: #ffffff;
    --llu-transition-rgb: 255,255,255;
}

/* ---------- All actual homepage <img> photo layers ---------- */

/* Hero and every full-width section photo use object-fit: cover.
   Anchor the crop to the LOWER edge instead of the vertical center. */
body.llu-home .llu-hero-media,
body.llu-home .llu-original-photo-img,
body.llu-home .llu-original-photo--horses .llu-original-photo-img,
body.llu-home .llu-original-photo--livestock .llu-original-photo-img,
body.llu-home .llu-original-photo--contact .llu-original-photo-img,
body.llu-home .llu-original-photo--after-sale .llu-original-photo-img {
    object-position: center bottom !important;
}

/* CSS background fallbacks use the same lower-edge alignment. */
body.llu-home .llu-original-photo,
body.llu-home .llu-original-photo--horses,
body.llu-home .llu-original-photo--livestock,
body.llu-home .llu-original-photo--contact,
body.llu-home .llu-original-photo--after-sale,
body.llu-home .llu-home-photo,
body.llu-home .llu-section-image,
body.llu-home [class*="photo-bg"],
body.llu-home [class*="home-photo"] {
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* ---------- Mode-clean transitions on every photo boundary ---------- */

/* Top fade on the photo after NEWS / before PFERDEZUCHT. */
body.llu-home .llu-original-photo--horses::before,
body.llu-home .llu-original-photo--horses.llu-original-photo--from-news::before,
body.llu-home .llu-original-photo--horses.llu-original-photo--from-hero::before {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-transition-rgb), .94) 0%,
            rgba(var(--llu-transition-rgb), .34) 50%,
            rgba(var(--llu-transition-rgb), 0) 100%
        ) !important;
}

/* Top fade on the NEW photo after PFERDEZUCHT / before VIEHZUCHT. */
body.llu-home .llu-original-photo--livestock::before {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-transition-rgb), .94) 0%,
            rgba(var(--llu-transition-rgb), .34) 50%,
            rgba(var(--llu-transition-rgb), 0) 100%
        ) !important;
}

/* Top fade before CONTACT / after SALE. */
body.llu-home .llu-original-photo--contact::before,
body.llu-home .llu-original-photo--after-sale::before {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-transition-rgb), 1) 0%,
            rgba(var(--llu-transition-rgb), .68) 32%,
            rgba(var(--llu-transition-rgb), .24) 64%,
            rgba(var(--llu-transition-rgb), 0) 100%
        ) !important;
}

/* Divider and shadow surfaces stay inside the active mode. */
body.llu-home .llu-original-divider,
body.llu-home .llu-original-divider--1,
body.llu-home .llu-original-divider--2 {
    background-image: none !important;
    background-color: var(--llu-transition-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.llu-home .llu-original-shadow {
    background-image: none !important;
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-transition-rgb), 0) 0%,
            rgba(var(--llu-transition-rgb), .42) 44%,
            rgba(var(--llu-transition-rgb), 1) 100%
        ) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Transition into SALE: white->white in light, dark->dark in dark. */
body.llu-home .llu-section--sale::before {
    background:
        linear-gradient(
            to bottom,
            rgba(var(--llu-transition-rgb), 1) 0%,
            rgba(var(--llu-transition-rgb), .70) 50%,
            rgba(var(--llu-transition-rgb), 0) 100%
        ) !important;
}

/* Historical name only: this area follows the selected mode. */
body.llu-home .llu-post-sale-white,
body.llu-home .llu-post-sale-white-inner,
body.llu-home .llu-post-sale-white .block,
body.llu-home .llu-post-sale-white .block-body,
body.llu-home .llu-post-sale-white .widget-zone,
body.llu-home .llu-post-sale-white [data-widget-zone] {
    background-color: var(--llu-transition-bg) !important;
    background-image: none !important;
    color: var(--llu-text) !important;
    border-color: var(--llu-border) !important;
}

/* Explicit guarantees. */
html[data-llu-theme="light"] body.llu-home .llu-original-divider,
html[data-llu-theme="light"] body.llu-home .llu-original-shadow,
html[data-llu-theme="light"] body.llu-home .llu-post-sale-white,
html[data-llu-theme="light"] body.llu-home .llu-post-sale-white-inner {
    background-color: #ffffff !important;
}

html[data-llu-theme="dark"] body.llu-home .llu-original-divider,
html[data-llu-theme="dark"] body.llu-home .llu-original-shadow,
html[data-llu-theme="dark"] body.llu-home .llu-post-sale-white,
html[data-llu-theme="dark"] body.llu-home .llu-post-sale-white-inner {
    background-color: var(--llu-page-bg) !important;
}