/*
 * Kussin Menu Builder — megamenu widget styling for the wh1-2026 / APEX theme.
 *
 * The desktop dropdown panel (.nav-level-2: absolute, white, shown on
 * .nav-item.has-subs:hover) is provided by the theme. This file styles the widget internals
 * (shared across breakpoints) plus desktop column layout and mobile full-width rows.
 */

/* --- shared (all breakpoints) ------------------------------------------------ */
.kussin-omb-widget-headline {
    font-weight: 700;
    margin-bottom: .5rem;
}

/* #70027: a headline that carries the widget's main link renders as an <a>. It must keep the exact
   box of the <div> variant (block, full column width, same divider) so the two are indistinguishable
   apart from being clickable — prod's `a.dd-nav-category-main` behaves the same way.
   The selector carries .kussin-omb-widget deliberately: a `links` widget's own container div is
   `.kussin-omb-widget.kussin-omb-widget-links` — the same class its <ul> uses — so the leaf-link
   rule `.kussin-omb-widget-links a` below also matches this headline and would otherwise win on
   specificity and strip its padding and size. */
.kussin-omb-widget a.kussin-omb-widget-headline {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 0;
}

.kussin-omb-widget-title {
    display: block;
    font-weight: 700;
    color: var(--wh1-color-apex-333333, #333);
    text-decoration: none;
    margin-bottom: .35rem;
}

.kussin-omb-widget-title:hover {
    color: var(--wh1-color-highlight-apex, #e2001a);
}

/* The preselected FACT Finder ASN filters shown inside the category name (#69723) — separator,
   prefix, values and suffix in one span so the per-menu colour can be applied to all of it. The
   colour itself comes from the menu setting as an inline style; without one it inherits the title
   (and its hover), which is why nothing is declared here. */
.kussin-omb-asn-name {
    font-weight: 400;
}

.kussin-omb-widget-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kussin-omb-widget-links a {
    display: block;
    padding: 8px 0;
    color: var(--wh1-color-apex-333333, #333);
    text-decoration: none;
}

.kussin-omb-widget-links a:hover {
    color: var(--wh1-color-highlight-apex, #e2001a);
}

.kussin-omb-widget-img {
    display: block;
    margin-bottom: .5rem;
}

.kussin-omb-widget-img img,
.kussin-omb-widget-content img {
    max-width: 100%;
    height: auto;
}

.kussin-omb-widget-content {
    color: var(--wh1-color-apex-333333, #333);
}

/* --- desktop panel layout (>=992px): tighter rows, column flow --------------- */
@media (min-width: 992px) {
    .kussin-omb-widgets {
        margin-right: 0;
        margin-left: 0;
    }

    .kussin-omb-widget {
        margin-bottom: 20px;     /* prod dl.dd-nav-category spacing */
    }

    .kussin-omb-widget-links li {
        break-inside: avoid;
    }

    /* --- dropdown internals — match prod (warehouse-one.de) ------------------- */
    /* section titles (Wake, Beachwear, …): bold dark-teal with a thin light-teal rule
       under, like prod's dt > a.dd-nav-category-main. Two markups carry a section header:
       category-list widgets use .kussin-omb-widget-title (a link), links/manufacturer
       widgets use .kussin-omb-widget-headline (text). Style both alike. Blank (&nbsp;)
       headlines are stripped by menu_builder_frontend.js so this divider never lands on an empty line. */
    .kussin-omb .kussin-omb-widget-title,
    .kussin-omb .kussin-omb-widget-headline {
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
        color: #0f555c;                    /* prod dark teal */
        padding: 5px 0;
        margin-bottom: 10px;
        border-bottom: 1px solid #e0eff0;  /* prod light-teal divider */
    }
    .kussin-omb .kussin-omb-widget-title:hover { color: #0f555c; }
    /* #70027: the clickable headline variant must keep the section-title metrics — see the note on
       the shared rule above: `.kussin-omb .kussin-omb-widget-links a` matches it too. */
    .kussin-omb .kussin-omb-widget a.kussin-omb-widget-headline {
        font-size: 14px;
        line-height: 20px;
        padding: 5px 0;
        color: #0f555c;
    }
    .kussin-omb .kussin-omb-widget a.kussin-omb-widget-headline:hover { color: #0f555c; }
    /* blank (&nbsp;) headlines are kept as column spacers — hide their divider so it
       doesn't read as a stray rule (tagged by menu_builder_frontend.js, never removed) */
    .kussin-omb .kussin-omb-widget-headline-blank { border-bottom-color: transparent; }

    /* sub-category links: dark-teal, tight line-height, underline on hover (no red),
       each preceded by a thin ">" chevron — prod renders fa-angle-right; drawn with
       borders here since the APEX theme ships no FontAwesome */
    .kussin-omb .kussin-omb-widget-links a {
        padding: 0;
        font-size: 12.6px;
        line-height: 18px;
        color: #0f555c;
    }
    .kussin-omb .kussin-omb-widget-links a:hover {
        color: #0f555c;
        text-decoration: underline;
    }
    .kussin-omb .kussin-omb-widget-links li > a::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 4px; height: 4px;
        margin: -2px 7px 0 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(-45deg);
    }

    /* panel header ("Zur Kategorie …"): bold teal + thin divider; drop the FontAwesome
       close glyph (no FA in the theme, so it would render as a stray/empty box) */
    .kussin-omb .dd-nav-expand-title a { color: #0f555c; font-weight: 700; font-size: 14px; text-decoration: none; }
    .kussin-omb .dd-nav-expand-header {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #e0eff0;
    }
    .kussin-omb .dd-nav-expand-close { display: none; }

    /* desktop bar metrics — match prod (≈40px bar, 14px items, 10px 15px padding) */
    .kussin-omb .navbar-nav-mega > .nav-item > .nav-link-1 {
        padding: 10px 15px;
        margin: 0;            /* theme adds a wide right margin between items — remove it */
        font-size: 14px;
        line-height: 20px;
    }
    /* tighten: pack top items together (no extra item box spacing) */
    .kussin-omb .navbar-nav-mega > .nav-item {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    /* the navbar-collapse carries a white theme background that hid the teal bar — clear it so
       the menu background colour (#mainnav) shows and the white item text is readable */
    #mainnav.kussin-omb .navbar-collapse {
        background-color: transparent;
    }
    /* extend the (container-width) teal bar background edge-to-edge across the viewport via a
       100vw pseudo that inherits the bar colour; content stays container-aligned */
    .kussin-omb-bar { position: relative; }
    .kussin-omb-bar::before {
        content: '';
        position: absolute; top: 0; bottom: 0; left: 50%;
        width: 100vw; margin-left: -50vw;
        background-color: inherit; z-index: 0;
    }
    .kussin-omb-bar > * { position: relative; z-index: 1; }
    /* drop the theme's white 10px ::after strip; show a down-caret only on items with a dropdown
       (prod parity — white via currentColor, always visible) */
    .kussin-omb .navbar-nav-mega > .nav-item > .nav-link-1::after { display: none; }
    .kussin-omb .navbar-nav-mega > .nav-item.has-subs > .nav-link-1::after {
        content: ''; display: inline-block; vertical-align: middle;
        width: 6px; height: 6px; margin: -3px 0 0 7px;
        border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        background: none; transform: rotate(45deg);
    }
    /* keep the caret visible on hover/focus: the theme reclaims this same ::after as a white
       connector strip (position:absolute; height:10px; background:#fff), which would hide the
       chevron. Re-assert it with an #id to outrank the theme and undo its absolute positioning. */
    #mainnav.kussin-omb .navbar-nav-mega > .nav-item.has-subs:hover > .nav-link-1::after,
    #mainnav.kussin-omb .navbar-nav-mega > .nav-item.has-subs:focus-within > .nav-link-1::after {
        content: ''; display: inline-block; vertical-align: middle;
        position: static; top: auto; bottom: auto; left: auto; right: auto;
        width: 6px; height: 6px; margin: -3px 0 0 7px;
        border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        background: none; transform: rotate(45deg);
    }

    /* desktop dropdown panel — match prod (tighter padding, softer/larger shadow), content
       left-aligned with the bar items (panel pad 10 + zeroed container/gutters → ~15px, = item text) */
    #mainnav.kussin-omb .nav-level-2 {
        padding: 15px 10px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
    }
    #mainnav.kussin-omb .nav-level-2 > .container-xxl,
    #mainnav.kussin-omb .nav-level-2 > .container-fluid {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    #mainnav.kussin-omb .nav-level-2 .row { margin-left: 0; margin-right: 0; }
    #mainnav.kussin-omb .nav-level-2 .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
}

/* --- category-list-full: multi-column flow listing --------------------------- */
.kussin-omb-fullwidth {
    column-gap: 1.5rem;
}

.kussin-omb-fullwidth-item {
    display: block;
    padding: 6px 0;
    color: var(--wh1-color-apex-333333, #333);
    text-decoration: none;
    break-inside: avoid;
}

.kussin-omb-fullwidth-item:hover {
    color: var(--wh1-color-highlight-apex, #e2001a);
}

.kussin-omb-fullwidth-char {
    font-weight: 700;
    margin: .5rem 0 .25rem;
    break-after: avoid;
    color: var(--wh1-color-apex-999999, #999);
}

/* --- manufacturer: logo grid ------------------------------------------------- */
.kussin-omb-mf-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.kussin-omb-mf-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

.kussin-omb-mf-logo img {
    max-width: 100%;
    height: auto;
}

.kussin-omb-mf-size-10   { width: 10%; }
.kussin-omb-mf-size-12-5 { width: 12.5%; }
.kussin-omb-mf-size-20   { width: 20%; }
.kussin-omb-mf-size-25   { width: 25%; }
.kussin-omb-mf-size-50   { width: 50%; }
.kussin-omb-mf-size-100  { width: 100%; }

/* --- manufacturerlist: name columns ------------------------------------------ */
.kussin-omb-mf-list a {
    display: block;
    padding: 5px 0;
    color: var(--wh1-color-apex-333333, #333);
    text-decoration: none;
}

.kussin-omb-mf-list a:hover {
    color: var(--wh1-color-highlight-apex, #e2001a);
}

.kussin-omb-mf-letter {
    display: block;
    margin: .5rem 0 .25rem;
    color: var(--wh1-color-apex-999999, #999);
}

/* --- module-setting CSS hooks ------------------------------------------------ */
.kussin-omb-no-more .kussin-omb-more-btn { display: none !important; }
.kussin-omb-no-mobile .kussin-omb-mobile-btn { display: none !important; }

/* --- mobile (<992px): clean full-width rows with separators ------------------ */
@media (max-width: 991.98px) {
    .kussin-omb .nav-level-2 {
        padding: 0 1rem 1rem;
    }

    .kussin-omb-widget {
        margin-bottom: .5rem;
    }

    .kussin-omb-widget-links a {
        border-bottom: 1px solid var(--wh1-color-apex-eeeeee, #eee);
    }

    /* full-width + manufacturer grids collapse to a single column on mobile */
    .kussin-omb-fullwidth { column-count: 1 !important; }
    .kussin-omb-mf-logo { width: 25% !important; }
}

/* === Desktop: dim the page *below the menu* while a dropdown is open (setting: dim background) === */
/* The overlay is appended to <body> by menu_builder_frontend.js; its `top` is set to the bottom edge of
   the menu bar at hover time, so the header and the bar stay bright and only the content below the
   menu dims (matching warehouse-one.de). */
.kussin-omb-dim {
    position: fixed;
    top: 0;        /* overridden by JS to the menu bar's bottom edge */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.kussin-omb-dim.visible {
    opacity: 1;
    visibility: visible;
}
@media (min-width: 992px) {
    /* Lift the menu (bar + open dropdown) above the overlay so only the rest of the page dims —
       but ONLY while the menu is hovered (i.e. one of its dropdowns is open). A permanent z-index
       would sit on top of header UI such as the "Change language and currency" dropdown and block
       clicks on it. Dropdowns only appear on :hover, so :hover is exactly when the lift is needed. */
    .kussin-omb.kussin-omb-dim-on { position: relative; }
    #mainnav.kussin-omb.kussin-omb-dim-on:hover { z-index: 1001; }
    /* Visibility follows the open dropdown via :has() — reliable while scrolling (no JS race).
       JS only keeps the overlay's `top` pinned to the live menu-bottom. (.visible = JS fallback.) */
    body:has(#mainnav.kussin-omb.kussin-omb-dim-on .nav-item.has-subs:hover) .kussin-omb-dim {
        opacity: 1;
        visibility: visible;
    }
}
@media (max-width: 991.98px) {
    /* Dimming is a desktop hover feature only. */
    .kussin-omb-dim { display: none !important; }
}

/* === Mobile menu options (settings: hide images / expand subcategories / bottom info) === */
@media (max-width: 991.98px) {
    /* 5.1 — hide Menu Builder widget/promo images on mobile */
    .kussin-omb.kussin-omb-hide-img-mobile .kussin-omb-widget-img,
    .kussin-omb.kussin-omb-hide-img-mobile .kussin-omb-widget-content img {
        display: none !important;
    }

    /* per-widget "hide on mobile menu" (content widgets, on by default) */
    .kussin-omb .kussin-omb-widget-hide-mobile {
        display: none !important;
    }

    /* 5.2 — when "expand all subcategories" is OFF, collapse dropdowns into a tap-to-open accordion */
    .kussin-omb:not(.kussin-omb-expand-subs) .nav-item.has-subs > .nav-level-2 {
        display: none;
    }
    .kussin-omb:not(.kussin-omb-expand-subs) .nav-item.has-subs.omb-open > .nav-level-2 {
        display: block;
    }

    /* 5.3 — bottom-info toggle bar (mmenu mm-navbars--bottom parity) */
    .kussin-omb-bottom {
        display: block;
        border-top: 1px solid var(--wh1-color-apex-eeeeee, #eee);
    }
    .kussin-omb-bottom-toggle {
        display: block;
        width: 100%;
        text-align: left;
        padding: 12px 1rem;
        background: var(--wh1-color-apex-f3f4f6, #f3f4f6);
        border: 0;
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .kussin-omb-bottom-body {
        display: none;
        padding: .5rem 1rem 1rem;
    }
    .kussin-omb-bottom.open .kussin-omb-bottom-body {
        display: block;
    }
}

/* The bottom-info bar is mobile-only. */
@media (min-width: 992px) {
    .kussin-omb-bottom { display: none; }
}

/* === Mobile-menu logo (setting: show logo on mobile) — mobile only =========== */
.kussin-omb-mobile-logo { display: none; }
.kussin-omb-mobile-logo img { max-height: 40px; width: auto; }
@media (max-width: 991.98px) {
    .kussin-omb-mobile-logo {
        display: block;
        padding: 12px 1rem;
    }
}

/* === Off-canvas drill-down (mobile main menu + #69744 burger menu) =========================== */
/* Rendered server-side (frontend/_menu_builder_offcanvas.html.twig), moved to <body> by the JS. The
   component styles are viewport-independent (closed = off-screen / invisible) so the burger
   instance can open on desktop too; only the main-nav integration rules stay mobile-scoped. */
@media (max-width: 991.98px) {
    /* In off-canvas mode the inline Bootstrap collapse + inline bottom bar are replaced. */
    .kussin-omb.kussin-omb-offcanvas #navbarSupportedContent { display: none !important; }
    .kussin-omb.kussin-omb-offcanvas .kussin-omb-bottom { display: none !important; }
}
    .kussin-omb-oc-lock { overflow: hidden; }

    .kussin-omb-oc-overlay {
        display: block;
        position: fixed; inset: 0; z-index: 1090;
        background: rgba(0, 0, 0, .45);
        opacity: 0; visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
    }
    .kussin-omb-oc-overlay.open { opacity: 1; visibility: visible; }

    .kussin-omb-oc {
        display: flex; flex-direction: column;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(312px, 86vw); height: 100vh; height: 100dvh;
        background: #f3f3f3; z-index: 1100;
        transform: translateX(-100%); transition: transform .4s ease;
        overflow: hidden; box-shadow: 2px 0 12px rgba(0, 0, 0, .2);
    }
    .kussin-omb-oc.open { transform: translateX(0); }

    /* the sliding panels fill the space above the pinned footer. Root is in flow; every drill
       sub-panel is stacked in the depth-1 slot (just right of the root) and only the .is-active one
       is shown — so one translateX(-100%) reveals whichever category was drilled. */
    .kussin-omb-oc-panels { position: relative; flex: 1 1 auto; min-height: 0; transition: transform .35s ease; }
    .kussin-omb-oc-panel {
        width: 100%; height: 100%;
        display: flex; flex-direction: column; overflow: hidden;
    }
    .kussin-omb-oc-root { position: relative; }
    .kussin-omb-oc-sub { position: absolute; top: 0; left: 100%; }
    .kussin-omb-oc-sub:not(.is-active) { display: none; }

    .kussin-omb-oc-head {
        display: flex; align-items: center; gap: 8px; flex: none;
        min-height: 56px; padding: 6px 10px; background: #fff;
    }
    /* root header: full-width centred logo, no X inside the panel (prod parity) */
    /* #69984: the logo used to be forced to `height: 42px; width: auto; max-width: 90%`. For a wide
       wordmark that is a losing combination — the aspect ratio makes `width: auto` overshoot, the
       90 % cap then clamps it, and an SVG letterboxes inside the resulting 42px-tall box, so the
       drawing ended up ~207px wide on a 22px baseline while the header reserved 42px for it.
       Production sizes it the other way round (`padding: 0 20px` on the link, `max-width: 100%` on
       the image, no height at all): the logo is as wide as the panel allows and its height simply
       follows. Same approach here — width-driven, aspect preserved, `max-height` only as a guard
       for a squarer logo file. */
    .kussin-omb-oc-head-root { justify-content: center; padding: 0; }
    .kussin-omb-oc-logo {
        display: block; flex: 1 1 auto; min-width: 0;
        margin: 0; padding: 6px 10px; text-align: center;
    }
    .kussin-omb-oc-logo img {
        display: block;
        width: 100%; max-width: 100%;
        height: auto; max-height: 56px;
        margin: 0 auto;
    }
    .kussin-omb-oc-title {
        flex: 1; text-align: center; font-weight: 700;
        color: #0F555C; text-decoration: none;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .kussin-omb-oc-back {
        flex: none; width: 38px; height: 38px; padding: 0;
        border: 0; background: transparent; cursor: pointer;
    }
    .kussin-omb-oc-back::before {
        content: ''; display: inline-block; width: 9px; height: 9px; margin-left: 4px;
        border-left: 2px solid #0F555C; border-bottom: 2px solid #0F555C;
        transform: rotate(45deg);
    }
    /* balances the back button so the panel title is truly centred (prod parity) */
    .kussin-omb-oc-spacer { flex: none; width: 38px; }

    /* 10px teal divider directly below the logo (prod parity) */
    .kussin-omb-oc-root .kussin-omb-oc-list { border-top: 10px solid #0F555C; }

    .kussin-omb-oc-list, .kussin-omb-oc-body {
        flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }

    /* rows (top items, leaf links) — uniform height (prod ~46px) */
    .kussin-omb-oc-row {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; min-height: 46px; box-sizing: border-box; text-align: left;
        margin: 0; padding: 6px 16px;
        border: 0; border-bottom: 1px solid #e6e6e6;
        background: transparent; font: inherit;
        color: var(--wh1-color-apex-333333, #333); text-decoration: none; cursor: pointer;
    }
    .kussin-omb-oc-row:hover { color: var(--wh1-color-highlight-apex, #e2001a); }
    /* drill chevron — border-drawn dark teal (prod parity), not a glyph */
    .kussin-omb-oc-drill::after {
        content: ''; flex: none; width: 8px; height: 8px; margin-left: 8px;
        border-top: 2px solid #0B4247; border-right: 2px solid #0B4247;
        transform: rotate(45deg);
    }

    /* teal section bars inside drill panels (prod parity, #0F555C) — titles AND headlines */
    .kussin-omb-oc .kussin-omb-oc-section {
        display: flex; align-items: center; justify-content: space-between;
        margin: 0; padding: 12px 16px;
        background: #0F555C; color: #fff !important; font-weight: 700; text-decoration: none;
    }
    .kussin-omb-oc .kussin-omb-oc-section::after {
        content: ''; flex: none; width: 8px; height: 8px; margin-left: 8px;
        border-top: 2px solid #fff; border-right: 2px solid #fff;
        transform: rotate(45deg);
    }
    /* links inside a headless `links` widget render as teal section bars (Neopren, Lycras…) —
       higher specificity than the leaf-link rule below so it wins. */
    .kussin-omb-oc .kussin-omb-widget-links a.kussin-omb-oc-section {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 16px; border-bottom: 1px solid rgba(0, 0, 0, .08);
        background: #0F555C; color: #fff; font-weight: 700;
    }

    /* flatten the cloned desktop .nav-level-2 grid into a simple list */
    .kussin-omb-oc .nav-level-2 {
        position: static; display: block; width: auto;
        padding: 0; margin: 0; box-shadow: none; border: 0; background: transparent;
    }
    .kussin-omb-oc .nav-level-2 .container-xxl,
    .kussin-omb-oc .nav-level-2 .container-fluid,
    .kussin-omb-oc .nav-level-2 .row { width: auto; margin: 0; padding: 0; }
    .kussin-omb-oc .nav-level-2 [class*="col-"] {
        width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0;
    }
    .kussin-omb-oc .kussin-omb-widget { margin: 0; }
    .kussin-omb-oc .kussin-omb-widget-links { margin: 0; padding: 0; list-style: none; }
    .kussin-omb-oc .kussin-omb-widget-links a,
    .kussin-omb-oc .nav-item-2 .nav-link,
    .kussin-omb-oc .kussin-omb-fullwidth-item {
        display: block; padding: 12px 16px; border-bottom: 1px solid #e6e6e6;
        color: var(--wh1-color-apex-333333, #333); text-decoration: none;
    }

    /* footer (bottom-info) pinned to the bottom of the root panel (prod "Hast du Fragen?") */
    .kussin-omb-oc-footer {
        display: block; flex: none;
        border-top: 4px solid #0F555C; background: #fff;
    }
    /* The bar's collapse behaviour and button chrome are declared in the mobile-only block above,
       because the INLINE bar (non-off-canvas mode) is mobile-only. The off-canvas footer must
       repeat them viewport-independently: the #69744 burger instance opens on desktop too, where
       those rules do not apply and the block would otherwise sit permanently expanded under an
       unstyled default button. */
    .kussin-omb-oc-footer .kussin-omb-bottom-body { display: none; overflow-y: auto; max-height: 50vh; }
    .kussin-omb-oc-footer.open .kussin-omb-bottom-body { display: block; }
    /* heading: centred teal title + chevron, like prod */
    .kussin-omb-oc-footer .kussin-omb-bottom-toggle {
        font: inherit; width: 100%; padding: 12px 1rem; border: 0; cursor: pointer;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        background: #fff; color: #0F555C; font-weight: 700; font-size: 18px; text-align: center;
    }
    .kussin-omb-oc-footer .kussin-omb-bottom-toggle::after {
        content: ''; flex: none; width: 9px; height: 9px;
        border-top: 2px solid #0F555C; border-right: 2px solid #0F555C;
        transform: rotate(-45deg);
    }
    .kussin-omb-oc-footer.open .kussin-omb-bottom-toggle::after { transform: rotate(135deg); }
    /* content: centred teal, icons + bold links, like prod */
    .kussin-omb-oc-footer .kussin-omb-bottom-body {
        padding: 4px 14px 14px; text-align: center; color: #0F555C;
    }
    .kussin-omb-oc-footer .kussin-omb-bottom-body p { margin: 0 0 5px; font-size: 12px; line-height: 1.35; }
    .kussin-omb-oc-footer .kussin-omb-bottom-body a {
        color: #0F555C; text-decoration: none; font-weight: 700; font-size: 14px;
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    }
    .kussin-omb-oc-footer .kussin-omb-bottom-body svg { flex: none; }


/* KUSSIN-EMENU HORIZONTAL-SCROLL FIX: the desktop full-bleed bar background (.kussin-omb-bar::before) uses width:100vw, which is wider than the document by the vertical scrollbar and forces a horizontal scrollbar on every page. Clip horizontal overflow at the root; overflow:clip (not hidden) keeps position:sticky working, and the explicit overflow-y:auto avoids the spec's clip+visible -> clip coercion that would otherwise disable vertical scrolling. */
html { overflow-x: clip; overflow-y: auto; }

/* === #69744 multiple menus: secondary header top-bar + footer link columns ============== */

/* Secondary desktop navigation (header_topbar location) — flat inline links in the header top zone. */
.kussin-omb-topbar { gap: 1.25rem; align-items: center; margin-left: 1.25rem; }
.kussin-omb-topbar-link { color: inherit; text-decoration: none; font-size: .9rem; white-space: nowrap; }
.kussin-omb-topbar-link:hover,
.kussin-omb-topbar-link.active { text-decoration: underline; }

/* Footer menu columns (footer_1..3 locations) — appended as their own row of link columns. */
.kussin-omb-footer-row { margin-top: 1rem; }
.kussin-omb-footer-links { list-style: none; padding: 0; margin: 0; }
.kussin-omb-footer-links li { margin-bottom: .35rem; }
.kussin-omb-footer-links a { color: inherit; text-decoration: none; }

/* Burger menu (header_burger location) — icon button next to the main navigation, any viewport. */
/* align-items:center (not stretch): stretching #mainnav to a definite height makes the nested
   .navbar-collapse collapse to 0 and the nav overflow below the bar; centering keeps #mainnav at its
   natural (content) height, matching the no-burger layout. The burger keeps a full-height hit area. */
.kussin-omb-bar-with-burger { display: flex; align-items: center; }
.kussin-omb-bar-with-burger > #mainnav { flex: 1 1 auto; min-width: 0; }
.kussin-omb-bar-with-burger > .kussin-omb-burger-btn { align-self: stretch; }
.kussin-omb-burger-btn {
    flex: none; display: inline-flex; align-items: center; gap: .5rem;
    margin: 0; padding: .6rem 1rem; border: 0; background: transparent;
    font: inherit; color: inherit; cursor: pointer;
}
.kussin-omb-burger-icon {
    position: relative; display: block;
    width: 22px; height: 2px; border-radius: 1px; background: currentColor;
}
.kussin-omb-burger-icon::before,
.kussin-omb-burger-icon::after {
    content: ''; position: absolute; left: 0;
    width: 22px; height: 2px; border-radius: 1px; background: currentColor;
}
.kussin-omb-burger-icon::before { top: -7px; }
.kussin-omb-burger-icon::after { top: 7px; }

/* `[kussin_menu_builder <slug>]` shortcode — a neutral link list/row that inherits the surrounding typography. */
.kussin-omb-shortcode-title { margin: 0 0 .5rem; }
.kussin-omb-shortcode-list { list-style: none; margin: 0; padding: 0; }
.kussin-omb-shortcode-list a { color: inherit; text-decoration: none; }
.kussin-omb-shortcode-list a:hover { text-decoration: underline; }
.kussin-omb-shortcode-item { margin: 0 0 .35rem; }
.kussin-omb-shortcode-sublist { list-style: none; margin: .25rem 0 .5rem; padding: 0 0 0 1rem; }
.kussin-omb-shortcode-inline .kussin-omb-shortcode-list { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.kussin-omb-shortcode-inline .kussin-omb-shortcode-item { margin: 0; }
.kussin-omb-footer-links a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * 9 — Merchant-configured colours.
 *
 * The values are DB-driven (module settings + per-entry colours), so they are
 * passed in as CSS custom properties on the elements themselves and switched on
 * by a marker class. That keeps the rules here, in a cacheable stylesheet,
 * instead of in a per-request <style> block in the Twig template. A colour that
 * is not configured emits no class, so the theme default is left untouched.
 *
 * --omb-menu-bg / --omb-menu-active-bg  -> .kussin-omb-bar   (whole menu)
 * --omb-item-bg / --omb-item-active-bg  -> .nav-item / oc row  (single entry)
 * ------------------------------------------------------------------------- */

.kussin-omb-bar.omb-has-bg,
.kussin-omb-bar.omb-has-bg #mainnav.kussin-omb {
    background-color: var(--omb-menu-bg);
}

/* Burger icon follows the menu text colour. By default the button inherits the header text
   colour (currentColor draws the three bars). On a coloured bar the nav links are forced white
   (see the rule below), but the burger sits on the bar OUTSIDE #mainnav, so it needs the same
   white explicitly — otherwise it stays dark and vanishes into the coloured background. */
.kussin-omb-bar.omb-has-bg .kussin-omb-burger-btn { color: #fff; }

@media (min-width: 992px) {
    .kussin-omb-bar.omb-has-bg #mainnav.kussin-omb .nav-link-1 {
        color: #fff;
    }

    .kussin-omb-bar.omb-has-active-bg #mainnav.kussin-omb .nav-item:hover > .nav-link-1,
    .kussin-omb-bar.omb-has-active-bg #mainnav.kussin-omb .nav-link-1.active {
        background-color: var(--omb-menu-active-bg);
        color: #fff;
    }
}

/* Per-entry colours come last so they win the specificity tie with the
   whole-menu rules above (e.g. a red "Sale" entry inside a teal menu bar). */
#mainnav.kussin-omb .nav-item.omb-has-bg > .nav-link-1 {
    background-color: var(--omb-item-bg);
    color: #fff;
}

#mainnav.kussin-omb .nav-item.omb-has-active-bg:hover > .nav-link-1,
#mainnav.kussin-omb .nav-item.omb-has-active-bg > .nav-link-1.active {
    background-color: var(--omb-item-active-bg);
    color: #fff;
}

.kussin-omb-oc .kussin-omb-oc-row.omb-has-bg {
    background-color: var(--omb-item-bg);
    color: #fff;
}

.kussin-omb-oc .kussin-omb-oc-row.omb-has-bg::after {
    border-color: #fff;
}