/* ============================================================
 * BP Menu v3 — professional mega-menu styles (Tectum-grade).
 *
 * Skin-agnostic — uses --bs-* design tokens so it picks up the
 * current skin's brand colors automatically. Skins can still
 * override any --bp-mega-* var at a higher specificity.
 *
 * Toggle states:
 *   - .bp-menu__item--mega_parent.is-open  ← set by JS (hover-intent + click)
 *   - .bp-menu__item--mega_parent.show     ← Bootstrap dropdown compat
 *
 * Rendered DOM:
 *
 *   <li class="bp-menu__item bp-menu__item--mega_parent">
 *     <a class="bp-menu__link bp-menu__mega-trigger">…<i class="…chevron-down"/></a>
 *     <ul class="bp-menu bp-mega__panel" data-layout="columns|grid|stack" data-cols="N">
 *       <li class="bp-menu__item bp-menu__item--mega_column">
 *         <header class="bp-mega__col-head">…</header>
 *         <ul class="bp-menu">…links / cards…</ul>
 *       </li>
 *       …
 *     </ul>
 *   </li>
 * ============================================================ */

:root {
    --bp-mega-radius: 16px;
    --bp-mega-gap: 2rem;
    --bp-mega-pad: 2rem;
    --bp-mega-max-width: 1280px;
    --bp-mega-top: 64px;       /* updated by JS to match the sticky header's bottom edge */
    --bp-mega-shift: 0px;      /* updated by JS to keep panel inside viewport */
    --bp-mega-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.22),
        0 10px 30px -12px rgba(0, 0, 0, 0.10),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    --bp-mega-ease: cubic-bezier(0.2, 0, 0.13, 1);
    --bp-mega-dur-in: 220ms;
    --bp-mega-dur-out: 160ms;
}

/* ============================================================
 * PER-SKIN CUSTOMIZATION TOKENS  (--bp-menu-* / --bp-drawer-*)
 *
 * Every customizable property below reads `var(--token, <default>)`. The token is
 * intentionally NOT pre-defined here — the default lives inline as the fallback,
 * so a skin that DEFINES the token always wins, regardless of stylesheet load
 * order (engine CSS loads after the skin's). To restyle the menu for a client, set
 * these in the skin's `_tokens.scss` / `_design-overlays.scss` `:root {}` — no
 * selector copying, no specificity wars, no !important:
 *
 *   :root {
 *     --bp-menu-accent:        #c8102e;            // hover / active / accent
 *     --bp-menu-link-hover-bg: rgba(200,16,46,.08);
 *     --bp-menu-link-radius:   4px;
 *     --bp-drawer-width:       420px;
 *   }
 *
 * SHARED (all contexts)
 *   --bp-menu-accent            hover/active/accent colour   (def: --bs-primary)
 *   --bp-menu-link-color        link text                    (def: --bs-body-color)
 *   --bp-menu-link-hover-color  link text on hover           (def: accent)
 *   --bp-menu-link-hover-bg     link bg on hover             (def: primary @ 9%)
 *   --bp-menu-link-radius       row corner radius            (def: --bp-radius-input)
 *   --bp-menu-link-weight       link font-weight             (def: 500)
 *   --bp-menu-icon-color        leading icon colour          (def: currentColor @ .85)
 *   --bp-menu-muted             secondary text (sub/dates)   (def: --bs-secondary-color)
 *   --bp-menu-border            hairlines / guide lines      (def: --bs-border-color)
 *   --bp-menu-panel-bg          dropdown/mega/card surface   (def: --bs-body-bg)
 *   --bp-menu-heading-color     section heading colour       (def: --bs-secondary-color)
 *
 * DRAWER / OFFCANVAS
 *   --bp-drawer-width           offcanvas width              (def: min(86vw,380px))
 *   --bp-drawer-link-size       row font-size                (def: 1rem)
 *   --bp-drawer-link-pad        row padding                  (def: .7rem .6rem)
 *   --bp-drawer-gap             gap between rows             (def: .05rem)
 *   --bp-drawer-indent          nested accordion indent      (def: .6rem)
 *
 * MEGA (existing :root defaults, override at higher specificity):
 *   --bp-mega-radius / -gap / -pad / -max-width / -shadow / -ease / -dur-in / -dur-out
 * ============================================================ */

/* ============================================================
 * Mega parent (trigger row container)
 * ============================================================ */
.bp-menu__item--mega_parent {
    /* Panel uses `position: fixed` so the <li> can stay in whatever
       positioning context the nav lays out with. No override here. */
}

.bp-menu__mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bp-menu__mega-trigger .bp-menu__chevron {
    font-size: 0.7em;
    transition: transform var(--bp-mega-dur-in) var(--bp-mega-ease);
    opacity: 0.7;
}
.bp-menu__item--mega_parent.is-open > .bp-menu__mega-trigger .bp-menu__chevron,
.bp-menu__item--mega_parent.show > .bp-menu__mega-trigger .bp-menu__chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ============================================================
 * Panel — fixed-positioned, viewport-aware, clamped, soft shadow
 *
 * Why `position: fixed`:
 *   - The blueprint header is sticky/fixed/translate'd, which makes ancestor
 *     containing blocks unpredictable. With `fixed` the panel always anchors
 *     to the viewport — JS measures the header's bottom edge and writes it
 *     to `--bp-mega-top` so the panel sits flush under the header regardless
 *     of scroll, header-hide animation, or front-page-overlay variants.
 *   - JS also writes `--bp-mega-shift` if the panel would overflow either
 *     viewport edge, so it always fits on screen.
 * ============================================================ */
.bp-mega__panel {
    position: fixed;
    top: var(--bp-mega-top, 64px);
    left: 50%;
    width: min(calc(100vw - 2rem), var(--bp-mega-max-width));
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: var(--bp-mega-pad);

    /* Visual */
    background: var(--bp-menu-panel-bg, var(--bs-body-bg, #fff));
    color: var(--bp-menu-link-color, var(--bs-body-color, #1a1a1a));
    border-radius: var(--bp-mega-radius);
    box-shadow: var(--bp-mega-shadow);
    list-style: none;

    /* Hidden state */
    transform: translateX(calc(-50% + var(--bp-mega-shift, 0px))) translateY(8px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 1100;   /* above sticky header so the panel covers anything below */

    /* Transition: open quick-ish, close slightly faster. */
    transition:
        opacity var(--bp-mega-dur-out) var(--bp-mega-ease),
        transform var(--bp-mega-dur-out) var(--bp-mega-ease),
        visibility 0s linear var(--bp-mega-dur-out);

    /* Grid */
    display: grid;
    gap: var(--bp-mega-gap);

    /* Tall panels: scroll inside, don't break the viewport */
    max-height: calc(100vh - var(--bp-mega-top, 64px) - 1.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Prevent grid items from blowing past the panel due to min-width: auto.
   This is the classic "min-content sized grid item" gotcha. */
.bp-mega__panel > * {
    min-width: 0;
}

/* Suppress skins' animated link underline (a::after / a::before) inside the whole
   mega panel — it bleeds onto cards, CTA, featured, loop and column links. The mega
   CSS provides its own hover affordances instead. */
.bp-mega__panel a::after,
.bp-mega__panel a::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

.bp-menu__item--mega_parent.is-open > .bp-mega__panel,
.bp-menu__item--mega_parent.show > .bp-mega__panel {
    opacity: 1;
    transform: translateX(calc(-50% + var(--bp-mega-shift, 0px))) translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity var(--bp-mega-dur-in) var(--bp-mega-ease),
        transform var(--bp-mega-dur-in) var(--bp-mega-ease),
        visibility 0s linear 0s;
}

/* No CSS-only :hover fallback any more — the panel uses `position: fixed`,
   so `--bp-mega-top` must be JS-set before the panel can show without floating
   over the header. JS handles the open/close + position update. */

/* ============================================================
 * Hard overrides — beat any legacy `.blueprint-dropdown-menu` rules in skin
 * CSS that use !important. We use a compound selector (two classes) so the
 * specificity (0,2,0) wins over single-class !important rules (0,1,0).
 * This is a defensive measure for cases where the renderer still emits the
 * legacy class (e.g. cached HTML predating the renderer change).
 * ============================================================ */
ul.bp-mega__panel,
.bp-mega__panel.blueprint-dropdown-menu,
.bp-mega__panel.sub-menu {
    position: fixed !important;
    top: var(--bp-mega-top, 64px) !important;
    left: 50% !important;
    width: min(calc(100vw - 2rem), var(--bp-mega-max-width)) !important;
    max-width: calc(100vw - 2rem) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: var(--bp-mega-pad) !important;
    transform: translateX(calc(-50% + var(--bp-mega-shift, 0px))) translateY(8px) !important;
    border-radius: var(--bp-mega-radius) !important;
    box-shadow: var(--bp-mega-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bp-menu-panel-bg, var(--bs-body-bg, #fff)) !important;
}

.bp-menu__item--mega_parent.is-open > .bp-mega__panel,
.bp-menu__item--mega_parent.show > .bp-mega__panel {
    transform: translateX(calc(-50% + var(--bp-mega-shift, 0px))) translateY(0) !important;
}

/* Full-width variant — anchor=full per-menu setting. Panel spans the viewport. */
.bp-mega__panel--full,
ul.bp-mega__panel.bp-mega__panel--full {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
}
.bp-menu__item--mega_parent.is-open > .bp-mega__panel--full,
.bp-menu__item--mega_parent.show > .bp-mega__panel--full {
    transform: translateX(-50%) translateY(0) !important;
}

/* ============================================================
 * Layouts
 * ============================================================ */
/* Default grid — 12 columns. Every mega_column applies `grid-column: span N`
   inline, so columns place themselves and wrap automatically when a row fills.
   Pattern user wants — col(6) col(6) | col(12) | col(4) col(4) col(4) — works out
   of the box on a 12-col base. */
.bp-mega__panel,
.bp-mega__panel[data-layout="grid"],
.bp-mega__panel[data-layout="columns"] {
    grid-template-columns: repeat(var(--bp-mega-cols, 12), minmax(0, 1fr));
    grid-auto-flow: row dense;
}
.bp-mega__panel[data-layout="stack"] {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
}

/* Override --bp-mega-cols via data-cols (set by mega_parent's mega_cols config). */
.bp-mega__panel[data-cols="2"]  { --bp-mega-cols: 2; }
.bp-mega__panel[data-cols="3"]  { --bp-mega-cols: 3; }
.bp-mega__panel[data-cols="4"]  { --bp-mega-cols: 4; }
.bp-mega__panel[data-cols="5"]  { --bp-mega-cols: 5; }
.bp-mega__panel[data-cols="6"]  { --bp-mega-cols: 6; }
.bp-mega__panel[data-cols="8"]  { --bp-mega-cols: 8; }
.bp-mega__panel[data-cols="10"] { --bp-mega-cols: 10; }
.bp-mega__panel[data-cols="12"] { --bp-mega-cols: 12; }

/* ============================================================
 * Column — header + child link list
 * ============================================================ */
.bp-menu__item--mega_column {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.bp-mega__col-head {
    position: relative;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color, #6c757d);
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bp-mega__col-head::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--bs-primary, #0d6efd);
    border-radius: 2px;
}
.bp-mega__col-head .bp-menu__icon { color: var(--bs-primary, #0d6efd); }
.bp-mega__col-label { line-height: 1.2; }

/* Column's child <ul> — vertical link list */
.bp-menu__item--mega_column > .bp-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

/* Links inside a column */
.bp-menu__item--mega_column > .bp-menu > li > .bp-menu__link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    margin: 0 -0.55rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--bs-body-color, #1a1a1a);
    text-decoration: none;
    border-radius: 6px;
    transition:
        color 150ms var(--bp-mega-ease),
        background 150ms var(--bp-mega-ease),
        transform 200ms var(--bp-mega-ease);
}
.bp-menu__item--mega_column > .bp-menu > li > .bp-menu__link:hover,
.bp-menu__item--mega_column > .bp-menu > li > .bp-menu__link:focus-visible {
    color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.06);
    transform: translateX(2px);
    outline: none;
}
.bp-menu__item--mega_column > .bp-menu > li > .bp-menu__link .bp-menu__icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--bs-primary, #0d6efd);
    opacity: 0.6;
    transition: opacity 150ms var(--bp-mega-ease), transform 150ms var(--bp-mega-ease);
}
.bp-menu__item--mega_column > .bp-menu > li > .bp-menu__link:hover .bp-menu__icon {
    opacity: 1;
    transform: scale(1.08);
}
.bp-menu__item--mega_column > .bp-menu > li > .bp-menu__link .bp-menu__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Optional description (item->description_pl/en rendered as <small>) */
.bp-menu__item--mega_column > .bp-menu .bp-menu__desc {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 0.1rem;
    font-weight: 400;
    line-height: 1.35;
}

/* "View all" trailing link convention — kind=special with class hint, or last link with .bp-menu__view-all */
.bp-menu__view-all,
.bp-menu__item--mega_column > .bp-menu > li.is-view-all > .bp-menu__link {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--bs-border-color, rgba(0, 0, 0, 0.08));
    font-weight: 600;
    color: var(--bs-primary, #0d6efd) !important;
}

/* ============================================================
 * Image card (mega_image_card)
 * ============================================================ */
.bp-mega__card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    overflow: hidden;
    transition:
        transform 250ms var(--bp-mega-ease),
        box-shadow 250ms var(--bp-mega-ease);
    position: relative;
}
.bp-mega__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.18);
}

.bp-mega__card-image {
    position: relative;
    overflow: hidden;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 10px;
}
.bp-mega__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--bp-mega-ease);
}
.bp-mega__card:hover .bp-mega__card-image img {
    transform: scale(1.06);
}

.bp-mega__card-image--16-9 { aspect-ratio: 16 / 9; }
.bp-mega__card-image--4-3  { aspect-ratio: 4 / 3; }
.bp-mega__card-image--1-1  { aspect-ratio: 1 / 1; }
.bp-mega__card-image--21-9 { aspect-ratio: 21 / 9; }
.bp-mega__card-image--3-2  { aspect-ratio: 3 / 2; }

/* Overlay variant — text on top of image */
.bp-mega__card--overlay { color: #fff; }
.bp-mega__card--overlay .bp-mega__card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
    pointer-events: none;
}
.bp-mega__card--overlay .bp-mega__card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1.1rem;
    z-index: 1;
}
.bp-mega__card--overlay .bp-mega__card-title,
.bp-mega__card--overlay .bp-mega__card-desc {
    color: #fff;
}

.bp-mega__card-body { padding: 0 0.15rem; }
.bp-mega__card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-body-color, #1a1a1a);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bp-mega__card-title::after {
    content: '\2192';   /* → */
    font-size: 0.85em;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms var(--bp-mega-ease), transform 200ms var(--bp-mega-ease);
    color: var(--bs-primary, #0d6efd);
}
.bp-mega__card:hover .bp-mega__card-title::after {
    opacity: 1;
    transform: translateX(0);
}
.bp-mega__card-desc {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.45;
}

/* ============================================================
 * CTA box (mega_cta_box)
 * ============================================================ */
.bp-mega__cta-box {
    padding: 1.4rem 1.3rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    min-height: 160px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 250ms var(--bp-mega-ease), box-shadow 250ms var(--bp-mega-ease);
}
.bp-mega__cta-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.25);
}

.bp-mega__cta-box--primary { background: var(--bs-primary, #0d6efd); }
.bp-mega__cta-box--secondary { background: var(--bs-secondary, #6c757d); }
.bp-mega__cta-box--amber { background: #f59e0b; }
.bp-mega__cta-box--dark { background: var(--bs-dark, #1a1a1a); }
.bp-mega__cta-box--gradient {
    background: linear-gradient(135deg,
        var(--bs-primary, #0d6efd) 0%,
        var(--bs-info, #6366f1) 100%);
}
.bp-mega__cta-box--with-image {
    background-size: cover;
    background-position: center;
}
.bp-mega__cta-box--with-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35));
    z-index: 0;
}
.bp-mega__cta-box-body {
    position: relative;
    z-index: 1;
}

.bp-mega__cta-box-title {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}
.bp-mega__cta-box-desc {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    opacity: 0.92;
    line-height: 1.45;
}
.bp-mega__cta-box-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    color: #fff !important;
    text-decoration: none;
    border-radius: 7px;
    font-weight: 600;
    font-size: 0.85rem;
    align-self: flex-start;
    transition: background 150ms var(--bp-mega-ease), transform 150ms var(--bp-mega-ease);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.bp-mega__cta-box-btn:hover {
    background: rgba(255, 255, 255, 0.30);
    transform: translateX(3px);
}

/* ============================================================
 * Loop — card display mode (locations w/ logo, posts w/ thumb, realizations w/ hero)
 * The loop's own <ul> handles the grid (inline grid-template + per-item span).
 * Here we style the individual card link.
 * ============================================================ */
.bp-menu--loop { list-style: none; margin: 0; padding: 0; }
.bp-menu--loop > li { list-style: none; margin: 0; }

.bp-menu__loop-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem;
    margin: 0;
    text-decoration: none;
    color: var(--bs-body-color, #1a1a1a);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 150ms var(--bp-mega-ease), border-color 150ms var(--bp-mega-ease), transform 150ms var(--bp-mega-ease);
}
/* Kill skin's animated link underline (a::after / a::before) bleeding onto cards. */
.bp-menu__loop-card::after,
.bp-menu__loop-card::before,
.bp-menu__loop-card-title::after,
.bp-menu__loop-card-title::before {
    content: none !important;
    display: none !important;
    background: none !important;
}
.bp-menu__loop-card:hover,
.bp-menu__loop-card:focus-visible {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05);
    border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15);
    transform: translateY(-1px);
    outline: none;
}

.bp-menu__loop-card-media {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg, #f1f3f5);
}
.bp-menu__loop-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* logos/herby look best uncropped; thumbs still fill */
    display: block;
}
.bp-menu__loop-card-media--icon {
    color: var(--bs-primary, #0d6efd);
    font-size: 1.25rem;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
}

.bp-menu__loop-card-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.bp-menu__loop-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bp-menu-link-color, var(--bs-body-color, #1a1a1a));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-menu__loop-card:hover .bp-menu__loop-card-title { color: var(--bp-menu-link-hover-color, var(--bp-menu-accent, var(--bs-primary, #0d6efd))); }
.bp-menu__loop-card-sub {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
 * Featured posts (mega_featured_posts)
 * ============================================================ */
.bp-mega__featured-heading {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    position: relative;
}
.bp-mega__featured-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--bs-primary, #0d6efd);
    border-radius: 2px;
}

.bp-mega__featured-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bp-mega__featured-link {
    display: flex;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    padding: 0.4rem;
    margin: -0.4rem;
    border-radius: 8px;
    transition: background 150ms var(--bp-mega-ease);
}
.bp-mega__featured-link:hover {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05);
}

.bp-mega__featured-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.bp-mega__featured-body { flex: 1; min-width: 0; }

.bp-mega__featured-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.2rem;
    color: var(--bs-body-color, #1a1a1a);
    transition: color 150ms var(--bp-mega-ease);
}
.bp-mega__featured-link:hover .bp-mega__featured-title {
    color: var(--bs-primary, #0d6efd);
}

.bp-mega__featured-date {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
}

.bp-mega__featured-excerpt {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.45;
}

/* ============================================================
 * Mobile — panel collapses inline, no float, full width
 * ============================================================ */
@media (max-width: 991.98px) {
    .bp-mega__panel {
        position: static;
        top: auto;
        left: auto;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 100%;
        max-width: 100%;
        max-height: none;
        overflow: visible;
        padding: 0.5rem 0 1rem;
        margin: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1rem;
        display: none;
        z-index: auto;
    }
    .bp-menu__item--mega_parent.is-open > .bp-mega__panel,
    .bp-menu__item--mega_parent.show > .bp-mega__panel {
        display: grid;
    }
    .bp-mega__card-image { max-width: 240px; }
    .bp-mega__cta-box { min-height: auto; }
}

/* ============================================================
 * CTA buttons — item rendered as a button (cta_style on the <li>).
 * These styles ship with the always-enqueued mega CSS so CTAs work on every
 * skin without per-skin .bp-cta-* definitions. High specificity (.is-cta +
 * style class + > child) so they win over the skin's plain `.…menu-list a`.
 * ============================================================ */
.bp-menu__item.is-cta > .bp-menu__link,
.bp-menu__item.is-cta > .bp-menu__mega-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--bp-radius-button, 0.5rem);
    font-weight: 600;
    text-decoration: none !important;
    border: 2px solid transparent;
    line-height: 1.2;
    transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.bp-menu__item.is-cta > .bp-menu__link::after,
.bp-menu__item.is-cta > .bp-menu__link::before { content: none !important; display: none !important; }

/* color uses !important so the skin's `.…menu-list a { color: … !important }` can't
   override the button text (#4 — primary CTA keeps white text, not skin link color). */
/* Solid — full Bootstrap palette. amber = legacy alias for warning. */
.bp-menu__item.is-cta.bp-cta-primary   > .bp-menu__link { background: var(--bs-primary);   color: #fff !important; border-color: var(--bs-primary); }
.bp-menu__item.is-cta.bp-cta-secondary > .bp-menu__link { background: var(--bs-secondary); color: #fff !important; border-color: var(--bs-secondary); }
.bp-menu__item.is-cta.bp-cta-success   > .bp-menu__link { background: var(--bs-success);   color: #fff !important; border-color: var(--bs-success); }
.bp-menu__item.is-cta.bp-cta-danger    > .bp-menu__link { background: var(--bs-danger);    color: #fff !important; border-color: var(--bs-danger); }
.bp-menu__item.is-cta.bp-cta-warning   > .bp-menu__link,
.bp-menu__item.is-cta.bp-cta-amber     > .bp-menu__link { background: var(--bs-warning);   color: #000 !important; border-color: var(--bs-warning); }
.bp-menu__item.is-cta.bp-cta-info      > .bp-menu__link { background: var(--bs-info);      color: #000 !important; border-color: var(--bs-info); }
.bp-menu__item.is-cta.bp-cta-light     > .bp-menu__link { background: var(--bs-light);     color: #000 !important; border-color: var(--bs-light); }
.bp-menu__item.is-cta.bp-cta-dark      > .bp-menu__link { background: var(--bs-dark);      color: #fff !important; border-color: var(--bs-dark); }

/* Outline */
.bp-menu__item.is-cta.bp-cta-outline-primary   > .bp-menu__link { background: transparent; color: var(--bs-primary)   !important; border-color: var(--bs-primary); }
.bp-menu__item.is-cta.bp-cta-outline-secondary > .bp-menu__link { background: transparent; color: var(--bs-secondary) !important; border-color: var(--bs-secondary); }
.bp-menu__item.is-cta.bp-cta-outline-success   > .bp-menu__link { background: transparent; color: var(--bs-success)   !important; border-color: var(--bs-success); }
.bp-menu__item.is-cta.bp-cta-outline-danger    > .bp-menu__link { background: transparent; color: var(--bs-danger)    !important; border-color: var(--bs-danger); }
.bp-menu__item.is-cta.bp-cta-outline-warning   > .bp-menu__link { background: transparent; color: var(--bs-warning)   !important; border-color: var(--bs-warning); }
.bp-menu__item.is-cta.bp-cta-outline-info      > .bp-menu__link { background: transparent; color: var(--bs-info)      !important; border-color: var(--bs-info); }
.bp-menu__item.is-cta.bp-cta-outline-light     > .bp-menu__link { background: transparent; color: var(--bs-light)     !important; border-color: var(--bs-light); }
.bp-menu__item.is-cta.bp-cta-outline-dark      > .bp-menu__link { background: transparent; color: var(--bs-dark)      !important; border-color: var(--bs-dark); }

/* Subtle (BS bg-{c}-subtle + text-{c}-emphasis + border-{c}-subtle) — softest CTA tone. */
.bp-menu__item.is-cta.bp-cta-subtle-primary   > .bp-menu__link { background: var(--bs-primary-bg-subtle);   color: var(--bs-primary-text-emphasis)   !important; border-color: var(--bs-primary-border-subtle); }
.bp-menu__item.is-cta.bp-cta-subtle-secondary > .bp-menu__link { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis) !important; border-color: var(--bs-secondary-border-subtle); }
.bp-menu__item.is-cta.bp-cta-subtle-success   > .bp-menu__link { background: var(--bs-success-bg-subtle);   color: var(--bs-success-text-emphasis)   !important; border-color: var(--bs-success-border-subtle); }
.bp-menu__item.is-cta.bp-cta-subtle-danger    > .bp-menu__link { background: var(--bs-danger-bg-subtle);    color: var(--bs-danger-text-emphasis)    !important; border-color: var(--bs-danger-border-subtle); }
.bp-menu__item.is-cta.bp-cta-subtle-warning   > .bp-menu__link { background: var(--bs-warning-bg-subtle);   color: var(--bs-warning-text-emphasis)   !important; border-color: var(--bs-warning-border-subtle); }
.bp-menu__item.is-cta.bp-cta-subtle-info      > .bp-menu__link { background: var(--bs-info-bg-subtle);      color: var(--bs-info-text-emphasis)      !important; border-color: var(--bs-info-border-subtle); }

.bp-menu__item.is-cta.bp-cta-ghost > .bp-menu__link { background: rgba(var(--bs-body-color-rgb), 0.06); color: var(--bs-body-color) !important; }
.bp-menu__item.is-cta.bp-cta-link  > .bp-menu__link { background: transparent; color: var(--bs-link-color) !important; text-decoration: underline; }

/* Hover — solid/subtle bump brightness; outline fills with own color; ghost darkens. */
.bp-menu__item.is-cta.bp-cta-primary   > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-secondary > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-success   > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-danger    > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-warning   > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-amber     > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-info      > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-light     > .bp-menu__link:hover,
.bp-menu__item.is-cta.bp-cta-dark      > .bp-menu__link:hover { filter: brightness(1.08); transform: translateY(-1px); }

.bp-menu__item.is-cta.bp-cta-outline-primary   > .bp-menu__link:hover { background: var(--bs-primary);   color: #fff !important; }
.bp-menu__item.is-cta.bp-cta-outline-secondary > .bp-menu__link:hover { background: var(--bs-secondary); color: #fff !important; }
.bp-menu__item.is-cta.bp-cta-outline-success   > .bp-menu__link:hover { background: var(--bs-success);   color: #fff !important; }
.bp-menu__item.is-cta.bp-cta-outline-danger    > .bp-menu__link:hover { background: var(--bs-danger);    color: #fff !important; }
.bp-menu__item.is-cta.bp-cta-outline-warning   > .bp-menu__link:hover { background: var(--bs-warning);   color: #000 !important; }
.bp-menu__item.is-cta.bp-cta-outline-info      > .bp-menu__link:hover { background: var(--bs-info);      color: #000 !important; }
.bp-menu__item.is-cta.bp-cta-outline-light     > .bp-menu__link:hover { background: var(--bs-light);     color: #000 !important; }
.bp-menu__item.is-cta.bp-cta-outline-dark      > .bp-menu__link:hover { background: var(--bs-dark);      color: #fff !important; }

.bp-menu__item.is-cta[class*="bp-cta-subtle-"] > .bp-menu__link:hover { filter: brightness(0.96); }
.bp-menu__item.is-cta.bp-cta-ghost > .bp-menu__link:hover { background: rgba(var(--bs-body-color-rgb), 0.12); }
.bp-menu__item.is-cta.bp-cta-link  > .bp-menu__link:hover { text-decoration-thickness: 2px; }

/* CTA arrow — nudges right on hover. */
.bp-menu__cta-arrow { transition: transform 0.15s ease; }
.bp-menu__link:hover .bp-menu__cta-arrow { transform: translateX(3px); }

/* Sizes */
.bp-menu__item.is-cta.bp-cta-size-sm > .bp-menu__link { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.bp-menu__item.is-cta.bp-cta-size-lg > .bp-menu__link { padding: 0.65rem 1.4rem; font-size: 1.05rem; }

/* Align right (cta_align=right → .ms-auto on the <li>) — ensure utility exists. */
.bp-menu__item.is-cta.ms-auto { margin-left: auto !important; }

/* ============================================================
 * Link display modes (link / entity / special — `display` config)
 *   default     → icon + label (no extra CSS needed)
 *   icon-right  → label then icon
 *   rich        → icon + (title + description below)
 * ============================================================ */
.bp-menu__link--display-icon-right {
    flex-direction: row;
}
.bp-menu__link--display-rich {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.bp-menu__link--display-rich .bp-menu__icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    margin-top: 0.1rem;
    color: var(--bs-primary, #0d6efd);
}
.bp-menu__link-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.bp-menu__link--display-rich .bp-menu__label {
    font-weight: 600;
    line-height: 1.3;
}
.bp-menu__desc {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.4;
    font-weight: 400;
}

/* ============================================================
 * Heading (section title) — styles + sizes
 * ============================================================ */
.bp-menu__heading {
    margin: 0.5rem 0 0.35rem;
    color: var(--bp-menu-heading-color, var(--bs-body-color, #1a1a1a));
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bp-menu__heading .bp-menu__icon { color: var(--bp-menu-accent, var(--bs-primary, #0d6efd)); }
.bp-menu__heading--h4 { font-size: 1.15rem; }
.bp-menu__heading--h5 { font-size: 1rem; }
.bp-menu__heading--h6 { font-size: 0.78rem; }

.bp-menu__heading--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--bp-menu-heading-color, var(--bs-secondary-color, #6c757d));
}
.bp-menu__heading--bold { font-weight: 700; }
.bp-menu__heading--normal { font-weight: 500; }

/* Accent — uppercase label with a short underline bar (like mega column heads). */
.bp-menu__heading--accent {
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--bp-menu-heading-color, var(--bs-secondary-color, #6c757d));
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--bp-menu-border, var(--bs-border-color, rgba(0,0,0,0.08)));
    margin-bottom: 0.6rem;
}
.bp-menu__heading--accent::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--bp-menu-accent, var(--bs-primary, #0d6efd));
    border-radius: 2px;
}

/* Boxed — pill/box background. */
.bp-menu__heading--boxed {
    display: inline-flex;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--bs-primary, #0d6efd);
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.10);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

/* ============================================================
 * Container — inline group display (children shown directly, not a dropdown)
 * ============================================================ */
.bp-menu__container--inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0;
}
/* Default colors moved to :where() so per-item color_variant always wins. */
:where(.bp-menu__container--inline) { color: var(--bs-secondary-color, #6c757d); }
:where(.bp-menu__container--inline .bp-menu__icon) { color: var(--bs-primary, #0d6efd); }

/* Force the inline container's child list to be a visible static group
   (override the dropdown hover-reveal / absolute positioning). */
.bp-container-inline > .bp-menu,
.bp-container-inline > .blueprint-dropdown-menu {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.1rem;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0.25rem 0 0 !important;
    min-width: 0 !important;
    backdrop-filter: none !important;
}

/* ============================================================
 * Image card — side layout (image left, text right)
 * ============================================================ */
.bp-mega__card--side {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}
.bp-mega__card--side .bp-mega__card-image {
    flex: 0 0 88px;
    width: 88px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}
.bp-mega__card--side .bp-mega__card-body {
    flex: 1;
    min-width: 0;
    padding: 0;
}
.bp-mega__card--side .bp-mega__card-title { margin: 0; }

/* ============================================================
 * Nested (level 3+) dropdowns — side flyout for NON-mega menus.
 *
 * The renderer only wires hover-reveal at depth 0 (skin header.css targets
 * `.blueprint-has-dropdown`, which the renderer sets only on top-level <li>).
 * Two problems with deeper submenus left unstyled:
 *   1. The skin's reveal rule uses a *descendant* combinator
 *      (`.blueprint-has-dropdown:hover .blueprint-dropdown-menu`), so hovering the
 *      top item flashes EVERY nested submenu open at once, stacked below the parent.
 *   2. Nested menus inherit `top:100%; left:50%` → they overlap their parent.
 * Fix: re-hide nested dropdowns by default (higher specificity than the skin's
 * reveal) and open them as a right-side flyout only when their OWN parent <li>
 * is hovered / focused / programmatically expanded. Scoped to nav context only —
 * drawer/sidebar/inline submenus expand inline (accordion) via skin header.css.
 * ============================================================ */
.bp-menu--nav .blueprint-dropdown-menu .bp-menu__item.has-children {
    position: relative;
}

/* Default hidden + side-flyout geometry. The extra `.sub-menu` qualifier raises
   specificity to (0,4,0) so this beats the skin's (0,3,0) descendant reveal. */
.bp-menu--nav .blueprint-dropdown-menu .blueprint-dropdown-menu.sub-menu {
    top: -0.4rem;
    left: 100%;
    right: auto;
    transform: translateX(8px);
    opacity: 0;
    visibility: hidden;
}

.bp-menu--nav .blueprint-dropdown-menu .bp-menu__item.has-children:hover > .blueprint-dropdown-menu.sub-menu,
.bp-menu--nav .blueprint-dropdown-menu .bp-menu__item.has-children:focus-within > .blueprint-dropdown-menu.sub-menu,
.bp-menu--nav .blueprint-dropdown-menu .bp-menu__item.has-children.is-expanded > .blueprint-dropdown-menu.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Flyout that would overflow the right viewport edge flips to the left.
   JS (bp-menu-mega.js) tags the parent <li> with .bp-flyout-left at hover time. */
.bp-menu--nav .blueprint-dropdown-menu .bp-menu__item.has-children.bp-flyout-left > .blueprint-dropdown-menu.sub-menu {
    left: auto;
    right: 100%;
    transform: translateX(-8px);
}
.bp-menu--nav .blueprint-dropdown-menu .bp-menu__item.has-children.bp-flyout-left:hover > .blueprint-dropdown-menu.sub-menu,
.bp-menu--nav .blueprint-dropdown-menu .bp-menu__item.has-children.bp-flyout-left.is-expanded > .blueprint-dropdown-menu.sub-menu {
    transform: translateX(0);
}

/* Nested parent row: chevron points to the side (set in renderStandardLink). */
.bp-menu__chevron--flyout {
    margin-left: auto;
    font-size: 0.7em;
    opacity: 0.6;
}

/* ============================================================
 * OFFCANVAS / DRAWER context — full polish for every non-mega kind.
 *
 * Engine baseline (always enqueued) so EVERY skin gets a consistent,
 * touch-friendly drawer with accordions + widgets + loops + CTA. Accordion
 * mechanics (collapse nested .sub-menu, reveal on .is-expanded, the caret) are
 * self-contained below — no dependency on the skin/header module CSS. The JS
 * toggle of .is-expanded lives in the header module's offcanvas handler.
 * Mega kinds are nav-only and never reach the drawer.
 * ============================================================ */

/* Offcanvas shell */
.bp-offcanvas { width: var(--bp-drawer-width, min(86vw, 380px)); }
.bp-offcanvas .offcanvas-body { padding: var(--bp-drawer-pad-body, 0.6rem 0.85rem 1.25rem); }

/* Hard list reset for EVERYTHING inside a drawer / offcanvas — kills the UA
   `list-style: disc` + ::marker + default left padding on ANY <ul>/<li>, including
   loop lists and nested sub-menus that don't carry .blueprint-offcanvas-list. */
.bp-offcanvas ul,
.bp-offcanvas ol,
.bp-menu--drawer,
.bp-menu--drawer ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.bp-offcanvas li,
.bp-menu--drawer li {
    list-style: none;
}
.bp-offcanvas li::marker,
.bp-menu--drawer li::marker { content: none; }
/* List items are layout containers here, not bulleted rows. */
.bp-menu--drawer > .bp-menu__item,
.bp-menu--drawer .bp-menu__item--loop-item { display: block; }

/* The drawer <ul> at every depth: vertical, no inherited nav flex/gap. */
.bp-menu--drawer {
    display: flex;
    flex-direction: column;
    gap: var(--bp-drawer-gap, 0.2rem);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.bp-menu--drawer .bp-menu__item { width: 100%; }

/* Link / container rows — big touch targets, full width.
   Layout properties keep normal specificity (drawer-scoped). Color stays
   in `:where()` so per-item color_variant + tone choices win over the default. */
.bp-menu--drawer .bp-menu__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: var(--bp-drawer-link-pad, 0.7rem 0.6rem);
    border-radius: var(--bp-menu-link-radius, var(--bp-radius-input, 0.55rem));
    text-decoration: none;
    font-size: var(--bp-drawer-link-size, 1rem);
    font-weight: var(--bp-menu-link-weight, 500);
    line-height: 1.3;
    transition: background-color 0.15s ease, color 0.15s ease;
}
:where(.bp-menu--drawer) .bp-menu__link {
    color: var(--bp-menu-link-color, var(--bs-body-color));
}
.bp-menu--drawer .bp-menu__link:hover,
.bp-menu--drawer .bp-menu__link:focus-visible {
    background: var(--bp-menu-link-hover-bg, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.09));
    color: var(--bp-menu-link-hover-color, var(--bp-menu-accent, var(--bs-primary, #0d6efd)));
}
.bp-menu--drawer .bp-menu__icon {
    flex: 0 0 auto;
    width: 1.5em;
    font-size: 1.1em;
    text-align: center;
    color: var(--bp-menu-icon-color, currentColor);
    opacity: 0.85;
}
.bp-menu--drawer .bp-menu__label { flex: 1 1 auto; min-width: 0; }
.bp-menu--drawer .bp-menu__badge { flex: 0 0 auto; margin-left: 0.35rem; }

/* Hide the v3 chevron on NON-accordion rows (plain links). The accordion toggle keeps
   its own chevron (rotates via aria-expanded — styled in the accordion section below). */
.bp-menu--drawer .bp-menu__link:not(.bp-menu__accordion-toggle) .bp-menu__chevron { display: none; }

/* ---- Accordion = native Bootstrap collapse. The parent row is a
   <button class="bp-menu__accordion-toggle" data-bs-toggle="collapse">; the renderer
   wraps the children in <div class="collapse bp-menu__collapse" id="bp-acc-{id}">.
   Bootstrap drives show/hide — we only style the indent guide + rotate the chevron. ---- */
.bp-menu--drawer .sub-menu {
    /* Reset desktop dropdown positioning that the renderer's legacy classes carry. */
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}
/* Indent guide on the collapse region (wraps the children ul). */
.bp-menu--drawer .bp-menu__collapse {
    border-left: 2px solid var(--bp-menu-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    margin: 0.1rem 0 0.35rem var(--bp-drawer-indent, 0.6rem);
    padding-left: var(--bp-drawer-indent, 0.6rem);
}
.bp-menu--drawer .bp-menu__collapse .bp-menu__collapse {
    border-left-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35);
}
/* Flat — kontener z opcją "Bez wcięcia": dzieci na pełnej szerokości, bez prowadnicy. */
.bp-menu--drawer .bp-menu__collapse--flat {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}
/* Chevron in the accordion toggle rotates with Bootstrap's aria-expanded state. */
.bp-menu--drawer .bp-menu__accordion-toggle .bp-menu__chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}
.bp-menu--drawer .bp-menu__accordion-toggle[aria-expanded="true"] .bp-menu__chevron {
    transform: rotate(180deg);
}

/* Parent rows (accordion toggle, container with children) get a VISIBLE BASE
   surface so they read as tappable group headers without hovering — touch UX.
   `:where()` drops drawer scope to zero specificity → per-item color/tone choices
   from the editor always win without `!important` gymnastics. */
:where(.bp-menu--drawer) :is(.bp-menu__accordion-toggle, .bp-menu__container) {
    background: var(--bp-menu-parent-bg, rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.04));
    border: 1px solid var(--bp-menu-parent-border, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08)));
    font-weight: var(--bp-menu-parent-weight, 600);
}
:where(.bp-menu--drawer) :is(.bp-menu__accordion-toggle:hover, .bp-menu__accordion-toggle:focus-visible, .bp-menu__accordion-toggle[aria-expanded="true"], .bp-menu__container:hover) {
    background: var(--bp-menu-parent-hover-bg, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1));
    border-color: var(--bp-menu-parent-hover-border, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25));
}

/* Rich display (title + description) reads better left-aligned in a column. */
.bp-menu--drawer .bp-menu__link--display-rich { align-items: flex-start; }
.bp-menu--drawer .bp-menu__desc {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 0.1rem;
}

/* Section heading — uppercase label between groups. */
.bp-menu--drawer .bp-menu__heading {
    margin: 0.9rem 0 0.25rem;
    padding: 0 0.6rem;
}

/* Divider — full-width hairline. */
.bp-menu--drawer .bp-menu__item--divider { margin: 0.5rem 0; }
.bp-menu--drawer .bp-menu__divider,
.bp-menu--drawer hr.bp-menu__divider {
    border: 0;
    border-top: 1px solid var(--bp-menu-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    margin: 0;
}

/* CTA — full-width pill button (don't let it look like a plain row). */
.bp-menu--drawer .bp-menu__item.is-cta { margin: 0.4rem 0; }
.bp-menu--drawer .bp-menu__item.is-cta > .bp-menu__link {
    justify-content: center;
    font-weight: 600;
}

/* Widgets (lang / theme / search) — full-width, comfortable touch row. */
.bp-menu--drawer .bp-menu__widget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem;
    margin: 0.15rem 0;
}
.bp-menu--drawer .blueprint-menu-widget__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    width: 100%;
}
.bp-menu--drawer .blueprint-lang-switcher,
.bp-menu--drawer .blueprint-lang-pills,
.bp-menu--drawer .blueprint-lang-inline,
.bp-menu--drawer .blueprint-theme-pills,
.bp-menu--drawer .blueprint-menu-search,
.bp-menu--drawer .blueprint-menu-search--inline,
.bp-menu--drawer .blueprint-lang-select .blueprint-lang-select-input {
    width: 100%;
}
.bp-menu--drawer .blueprint-menu-search--inline { display: flex; }
.bp-menu--drawer .blueprint-menu-search--inline .form-control { flex: 1 1 auto; }
/* Make pill/inline switchers spread across the row on touch. */
.bp-menu--drawer .blueprint-lang-pills,
.bp-menu--drawer .blueprint-lang-inline { justify-content: stretch; }
.bp-menu--drawer .blueprint-lang-pills .blueprint-lang-pill,
.bp-menu--drawer .blueprint-lang-inline .blueprint-lang-link { flex: 1 1 0; justify-content: center; }

/* ---- Touch lang switcher (offcanvas-dedicated, full-width segmented buttons).
   Renderer emits this in $ctx->context === 'drawer'. Big tap targets, language
   code + native name stacked. ---- */
.bp-menu__lang-touch {
    display: grid;
    grid-template-columns: repeat(var(--bp-menu-lang-touch-cols, 2), 1fr);
    gap: var(--bp-menu-lang-touch-gap, 0.4rem);
    width: 100%;
}
.bp-menu__lang-touch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: var(--bp-menu-lang-touch-pad, 0.85rem 0.5rem);
    border: 1px solid var(--bp-menu-lang-touch-border, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.12)));
    border-radius: var(--bp-menu-lang-touch-radius, var(--bp-radius-input, 0.55rem));
    background: var(--bp-menu-lang-touch-bg, transparent);
    color: var(--bp-menu-lang-touch-color, var(--bs-body-color));
    text-decoration: none;
    line-height: 1.15;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-height: var(--bp-menu-lang-touch-min-h, 3.25rem);
}
.bp-menu__lang-touch-btn:hover,
.bp-menu__lang-touch-btn:focus-visible {
    background: var(--bp-menu-lang-touch-hover-bg, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08));
    border-color: var(--bp-menu-lang-touch-hover-border, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35));
    color: var(--bp-menu-lang-touch-hover-color, inherit);
}
.bp-menu__lang-touch-btn.is-active {
    background: var(--bp-menu-lang-touch-active-bg, var(--bp-menu-accent, var(--bs-primary, #0d6efd)));
    border-color: var(--bp-menu-lang-touch-active-border, var(--bp-menu-accent, var(--bs-primary, #0d6efd)));
    color: var(--bp-menu-lang-touch-active-color, #fff);
    cursor: default;
}
.bp-menu__lang-touch-code {
    font-size: var(--bp-menu-lang-touch-code-size, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.bp-menu__lang-touch-name {
    font-size: var(--bp-menu-lang-touch-name-size, 0.72rem);
    font-weight: 500;
    opacity: 0.75;
}
.bp-menu__lang-touch-btn.is-active .bp-menu__lang-touch-name { opacity: 0.92; }

/* Variant — list: one row per language (vertical stack, full width). */
.bp-menu__lang-touch--list { grid-template-columns: 1fr; }
.bp-menu__lang-touch--list .bp-menu__lang-touch-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
}
.bp-menu__lang-touch--list .bp-menu__lang-touch-flag { font-size: 1.4rem; }
.bp-menu__lang-touch--list .bp-menu__lang-touch-code { font-size: 0.9rem; }
.bp-menu__lang-touch--list .bp-menu__lang-touch-name {
    margin-left: auto;
    font-size: 0.82rem;
}

/* Variant — flags: large flag-led tiles, code below. */
.bp-menu__lang-touch--flags { grid-template-columns: repeat(var(--bp-menu-lang-touch-flags-cols, 3), 1fr); }
.bp-menu__lang-touch--flags .bp-menu__lang-touch-btn { min-height: 4.2rem; gap: 0.25rem; }
.bp-menu__lang-touch--flags .bp-menu__lang-touch-flag { font-size: 1.8rem; line-height: 1; }
.bp-menu__lang-touch--flags .bp-menu__lang-touch-code { font-size: 0.78rem; opacity: 0.8; }

/* ---- Touch theme switcher (offcanvas-dedicated, 3-segment full-width). ---- */
.bp-menu__theme-touch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bp-menu-theme-touch-gap, 0.4rem);
    width: 100%;
}
.bp-menu__theme-touch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: var(--bp-menu-theme-touch-pad, 0.7rem 0.4rem);
    appearance: none;
    border: 1px solid var(--bp-menu-theme-touch-border, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.12)));
    border-radius: var(--bp-menu-theme-touch-radius, var(--bp-radius-input, 0.55rem));
    background: var(--bp-menu-theme-touch-bg, transparent);
    color: var(--bp-menu-theme-touch-color, var(--bs-body-color));
    cursor: pointer;
    line-height: 1.1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-height: var(--bp-menu-theme-touch-min-h, 3.25rem);
}
.bp-menu__theme-touch-btn i { font-size: 1.05rem; opacity: 0.9; }
.bp-menu__theme-touch-label { font-size: 0.72rem; font-weight: 500; opacity: 0.75; }
.bp-menu__theme-touch-btn:hover,
.bp-menu__theme-touch-btn:focus-visible {
    background: var(--bp-menu-theme-touch-hover-bg, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08));
    border-color: var(--bp-menu-theme-touch-hover-border, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.35));
}
/* Active state — header.js dodaje .active na elemencie z data-theme-value == currentTheme. */
.bp-menu__theme-touch-btn.active {
    background: var(--bp-menu-theme-touch-active-bg, var(--bp-menu-accent, var(--bs-primary, #0d6efd)));
    border-color: var(--bp-menu-theme-touch-active-border, var(--bp-menu-accent, var(--bs-primary, #0d6efd)));
    color: var(--bp-menu-theme-touch-active-color, #fff);
}
.bp-menu__theme-touch-btn.active i,
.bp-menu__theme-touch-btn.active .bp-menu__theme-touch-label { opacity: 1; }

/* Variant — list: vertical row per option (auto / light / dark stacked). */
.bp-menu__theme-touch--list { grid-template-columns: 1fr; }
.bp-menu__theme-touch--list .bp-menu__theme-touch-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.7rem;
    min-height: 2.8rem;
    padding: 0.6rem 0.9rem;
}
.bp-menu__theme-touch--list .bp-menu__theme-touch-label { font-size: 0.9rem; }

/* Variant — icons: large icon-only tiles (label small, secondary). */
.bp-menu__theme-touch--icons .bp-menu__theme-touch-btn { min-height: 4.2rem; gap: 0.25rem; }
.bp-menu__theme-touch--icons .bp-menu__theme-touch-btn i { font-size: 1.6rem; opacity: 1; }
.bp-menu__theme-touch--icons .bp-menu__theme-touch-label { font-size: 0.7rem; opacity: 0.7; }

/* ---- Touch search variants (offcanvas-dedicated, mirror of lang/theme touch).
   Tokens drive sizing so a skin can tune without selector overrides. ---- */
.bp-menu__search-touch {
    display: flex;
    align-items: stretch;
    gap: var(--bp-menu-search-touch-gap, 0.45rem);
    width: 100%;
}
.bp-menu__search-touch .form-control { flex: 1 1 auto; min-width: 0; }
.bp-menu__search-touch .btn { flex: 0 0 auto; }

/* Variant — bar: standard full-width input + submit button. */
.bp-menu__search-touch--bar .form-control {
    padding: var(--bp-menu-search-touch-pad, 0.7rem 0.85rem);
    font-size: var(--bp-menu-search-touch-size, 0.95rem);
    min-height: var(--bp-menu-search-touch-min-h, 3rem);
}
.bp-menu__search-touch--bar .btn { padding-inline: 1rem; }

/* Variant — large: hero-style oversized input + bold submit. */
.bp-menu__search-touch--large .form-control {
    padding: var(--bp-menu-search-touch-large-pad, 0.95rem 1.05rem);
    font-size: var(--bp-menu-search-touch-large-size, 1.1rem);
    min-height: var(--bp-menu-search-touch-large-min-h, 3.6rem);
    border-radius: var(--bp-menu-search-touch-large-radius, 0.7rem);
}
.bp-menu__search-touch--large .btn { padding-inline: 1.3rem; }

/* Variant — pill: icon prefix INSIDE the input, no separate submit button.
   Submit happens on Enter. Pill border-radius, soft background. */
.bp-menu__search-touch--pill { gap: 0; }
.bp-menu__search-touch--pill .bp-menu__search-touch-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.bp-menu__search-touch--pill .bp-menu__search-touch-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--bs-secondary-color, var(--bs-body-color));
    pointer-events: none;
}
.bp-menu__search-touch--pill .form-control {
    padding: var(--bp-menu-search-touch-pill-pad, 0.7rem 0.95rem 0.7rem 2.4rem);
    font-size: var(--bp-menu-search-touch-pill-size, 0.95rem);
    min-height: var(--bp-menu-search-touch-pill-min-h, 3rem);
    border-radius: var(--bp-menu-search-touch-pill-radius, 9999px);
    background: var(--bp-menu-search-touch-pill-bg, rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.04));
}

/* Loop in the drawer — list rows match link rows; cards go single-column,
   compact (image left, text right) regardless of item_cols (no room for a grid). */
.bp-menu--drawer .bp-menu__loop-heading {
    display: block;
    margin: 0.7rem 0 0.2rem;
    padding: 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
}
.bp-menu--drawer .bp-menu--loop {
    display: flex !important;
    flex-direction: column;
    gap: 0.1rem;
    grid-template-columns: none !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bp-menu--drawer .bp-menu--loop > .bp-menu__item--loop-item { grid-column: auto !important; width: 100%; }
.bp-menu--drawer .bp-menu__loop-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--bp-menu-link-radius, var(--bp-radius-input, 0.55rem));
    text-decoration: none;
    color: var(--bp-menu-link-color, var(--bs-body-color));
}
.bp-menu--drawer .bp-menu__loop-card:hover {
    background: var(--bp-menu-link-hover-bg, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.09));
}
.bp-menu--drawer .bp-menu__loop-card-media {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-tertiary-bg, #f1f3f5);
}
.bp-menu--drawer .bp-menu__loop-card-media img { width: 100%; height: 100%; object-fit: cover; }
.bp-menu--drawer .bp-menu__loop-card-body { min-width: 0; display: flex; flex-direction: column; }
.bp-menu--drawer .bp-menu__loop-card-title { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.bp-menu--drawer .bp-menu__loop-card-sub {
    font-size: 0.78rem;
    color: var(--bp-menu-muted, var(--bs-secondary-color));
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline container in the drawer renders its children as a static sub-group. */
.bp-menu--drawer .bp-menu__container--inline {
    display: block;
    padding: 0.6rem 0.6rem 0.1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
}

/* ============================================================
 * Container label styles (config `style`: plain | boxed | accent | uppercase).
 * Context-agnostic so they read in nav, drawer and footer alike.
 * ============================================================ */
.bp-menu__container--uppercase .bp-menu__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82em;
    font-weight: 700;
}
/* Legacy `style` enum (plain/boxed/accent/uppercase) — kept for backwards compat,
   wrapped in `:where()` so the new color_variant + tone choices always win. */
:where(.bp-menu__container--accent) { font-weight: 700; }
:where(.bp-menu__container--accent .bp-menu__label,
       .bp-menu__container--accent .bp-menu__icon) { color: var(--bs-primary, #0d6efd); }
:where(.bp-menu--drawer .bp-menu__container--boxed) {
    background: var(--bs-tertiary-bg, #f1f3f5);
    font-weight: 600;
    border-radius: var(--bp-radius-input, 0.55rem);
}
:where(.bp-menu--drawer a.bp-menu__container--boxed:hover) {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
}

/* ============================================================
 * Offcanvas trigger — a <button> that opens a drawer. As a <button> it does NOT
 * inherit anchor styling, so reset native button chrome → it then looks exactly
 * like the menu link/item next to it (it carries .bp-menu__link, styled per
 * context). Per-context tweaks below adapt it to bar / drawer / nav / footer.
 * ============================================================ */
.bp-menu__offcanvas-trigger {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    margin: 0;
    cursor: pointer;
    font: inherit;
    text-align: inherit;
    color: inherit;
}
/* Bar (top bar / bottom mobile bar) — fill the slot like the other tabs. */
.bp-menu--bar .bp-menu__offcanvas-trigger { width: 100%; height: 100%; }

/* Menu toggle buttons (search toggle, theme cycle, offcanvas trigger) are bare
   <button>s — reset native chrome so they inherit the menu's text color (works in
   light AND dark via --bs-link-color) and get a consistent hover affordance. */
.bp-menu .blueprint-menu-search-toggle,
.bp-menu .blueprint-theme-btn,
.bp-menu .blueprint-theme-btn--cycle {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: var(--bp-menu-link-radius, var(--bp-radius-input, 0.5rem));
    transition: background-color 0.15s ease, color 0.15s ease;
}
.bp-menu .blueprint-menu-search-toggle:hover,
.bp-menu .blueprint-menu-search-toggle:focus-visible,
.bp-menu .blueprint-theme-btn:hover,
.bp-menu .blueprint-theme-btn:focus-visible {
    color: var(--bp-menu-link-hover-color, var(--bp-menu-accent, var(--bs-link-color, var(--bs-primary))));
    background: var(--bp-menu-link-hover-bg, rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08));
}
/* Drawer — full-width row (matches .bp-menu--drawer .bp-menu__link). */
.bp-menu--drawer .bp-menu__offcanvas-trigger { width: 100%; }
/* Nav / footer (context=nav) — inline, hover affordance to match links. */
.bp-menu--nav .bp-menu__offcanvas-trigger:hover,
.bp-menu--nav .bp-menu__offcanvas-trigger:focus-visible {
    color: var(--bp-menu-link-hover-color, var(--bp-menu-accent, var(--bs-primary, #0d6efd)));
}

/* ============================================================
 * UNIFIED STYLE SYSTEM — text-align / color / tone.
 *
 * Applied via per-item config (text_align, color_variant, tone) in any kind
 * that uses styleClasses() (link, container, entity, special, heading).
 *
 *   .bp-menu__link--align-{start|center|end}   text-align + flex justify
 *   .bp-menu__link--color-{token}              sets --bp-color-* from BS palette
 *   .bp-menu__link--tone-{tone}                paints background/text/border using --bp-color-*
 *
 * The two-axis split (color × tone) means a single colour can be applied as
 * solid / subtle / outline / ghost / link without exploding into N×M classes.
 * Pure BS variables → auto-respects data-bs-theme="dark".
 * ============================================================ */

/* --- text-align --- */
.bp-menu__link--align-start  { text-align: start;  justify-content: flex-start; }
.bp-menu__link--align-center { text-align: center; justify-content: center; }
.bp-menu__link--align-end    { text-align: end;    justify-content: flex-end; }

/* --- color tokens — map BS color to --bp-color-* shared by tone classes --- */
.bp-menu__link--color-primary    { --bp-color: var(--bs-primary);        --bp-color-rgb: var(--bs-primary-rgb);        --bp-color-subtle-bg: var(--bs-primary-bg-subtle);        --bp-color-emphasis: var(--bs-primary-text-emphasis);        --bp-color-border: var(--bs-primary-border-subtle);        --bp-color-contrast: #fff; }
.bp-menu__link--color-secondary  { --bp-color: var(--bs-secondary);      --bp-color-rgb: var(--bs-secondary-rgb);      --bp-color-subtle-bg: var(--bs-secondary-bg-subtle);      --bp-color-emphasis: var(--bs-secondary-text-emphasis);      --bp-color-border: var(--bs-secondary-border-subtle);      --bp-color-contrast: #fff; }
.bp-menu__link--color-success    { --bp-color: var(--bs-success);        --bp-color-rgb: var(--bs-success-rgb);        --bp-color-subtle-bg: var(--bs-success-bg-subtle);        --bp-color-emphasis: var(--bs-success-text-emphasis);        --bp-color-border: var(--bs-success-border-subtle);        --bp-color-contrast: #fff; }
.bp-menu__link--color-danger     { --bp-color: var(--bs-danger);         --bp-color-rgb: var(--bs-danger-rgb);         --bp-color-subtle-bg: var(--bs-danger-bg-subtle);         --bp-color-emphasis: var(--bs-danger-text-emphasis);         --bp-color-border: var(--bs-danger-border-subtle);         --bp-color-contrast: #fff; }
.bp-menu__link--color-warning    { --bp-color: var(--bs-warning);        --bp-color-rgb: var(--bs-warning-rgb);        --bp-color-subtle-bg: var(--bs-warning-bg-subtle);        --bp-color-emphasis: var(--bs-warning-text-emphasis);        --bp-color-border: var(--bs-warning-border-subtle);        --bp-color-contrast: #000; }
.bp-menu__link--color-info       { --bp-color: var(--bs-info);           --bp-color-rgb: var(--bs-info-rgb);           --bp-color-subtle-bg: var(--bs-info-bg-subtle);           --bp-color-emphasis: var(--bs-info-text-emphasis);           --bp-color-border: var(--bs-info-border-subtle);           --bp-color-contrast: #000; }
.bp-menu__link--color-light      { --bp-color: var(--bs-light);          --bp-color-rgb: var(--bs-light-rgb);          --bp-color-subtle-bg: var(--bs-light-bg-subtle);          --bp-color-emphasis: var(--bs-light-text-emphasis);          --bp-color-border: var(--bs-light-border-subtle);          --bp-color-contrast: #000; }
.bp-menu__link--color-dark       { --bp-color: var(--bs-dark);           --bp-color-rgb: var(--bs-dark-rgb);           --bp-color-subtle-bg: var(--bs-dark-bg-subtle);           --bp-color-emphasis: var(--bs-dark-text-emphasis);           --bp-color-border: var(--bs-dark-border-subtle);           --bp-color-contrast: #fff; }
.bp-menu__link--color-body            { --bp-color: var(--bs-body-color);           --bp-color-rgb: var(--bs-body-color-rgb);           --bp-color-subtle-bg: rgba(var(--bs-body-color-rgb), 0.06);  --bp-color-emphasis: var(--bs-body-color);           --bp-color-border: var(--bs-border-color);           --bp-color-contrast: var(--bs-body-bg); }
.bp-menu__link--color-body-secondary  { --bp-color: var(--bs-secondary-color);      --bp-color-rgb: var(--bs-secondary-color-rgb);      --bp-color-subtle-bg: var(--bs-secondary-bg);                --bp-color-emphasis: var(--bs-secondary-color);      --bp-color-border: var(--bs-border-color);           --bp-color-contrast: var(--bs-body-bg); }
.bp-menu__link--color-body-tertiary   { --bp-color: var(--bs-tertiary-color);       --bp-color-rgb: var(--bs-tertiary-color-rgb);       --bp-color-subtle-bg: var(--bs-tertiary-bg);                 --bp-color-emphasis: var(--bs-tertiary-color);       --bp-color-border: var(--bs-border-color);           --bp-color-contrast: var(--bs-body-bg); }
.bp-menu__link--color-body-emphasis   { --bp-color: var(--bs-emphasis-color);       --bp-color-rgb: var(--bs-emphasis-color-rgb);       --bp-color-subtle-bg: rgba(var(--bs-emphasis-color-rgb), 0.06); --bp-color-emphasis: var(--bs-emphasis-color);    --bp-color-border: var(--bs-border-color);           --bp-color-contrast: var(--bs-body-bg); }

/* --- tones — use --bp-color-* defined by color class above ---
   Each tone uses its own bg/color/border + a hover delta. !important on color
   so a skin's link reset can't strip the deliberate variant choice. */
.bp-menu__link--tone-solid {
    background: var(--bp-color, transparent);
    color: var(--bp-color-contrast, #fff) !important;
    border: 1px solid var(--bp-color, transparent);
}
.bp-menu__link--tone-solid:hover { filter: brightness(1.08); }

.bp-menu__link--tone-subtle {
    background: var(--bp-color-subtle-bg, transparent);
    color: var(--bp-color-emphasis, inherit) !important;
    border: 1px solid var(--bp-color-border, transparent);
}
.bp-menu__link--tone-subtle:hover { background: rgba(var(--bp-color-rgb, 0, 0, 0), 0.18); }

.bp-menu__link--tone-outline {
    background: transparent;
    color: var(--bp-color, inherit) !important;
    border: 1px solid var(--bp-color, currentColor);
}
.bp-menu__link--tone-outline:hover {
    background: var(--bp-color, transparent);
    color: var(--bp-color-contrast, #fff) !important;
}

.bp-menu__link--tone-ghost {
    background: transparent;
    color: var(--bp-color, inherit) !important;
}
.bp-menu__link--tone-ghost:hover { background: rgba(var(--bp-color-rgb, 0, 0, 0), 0.1); }

.bp-menu__link--tone-link {
    background: transparent;
    color: var(--bp-color, inherit) !important;
    text-decoration: underline;
}
.bp-menu__link--tone-link:hover { text-decoration-thickness: 2px; }

/* Heading reusing the same color tokens — color emphasis only (no background/border). */
.bp-menu__heading.bp-menu__link--color-primary,
.bp-menu__heading.bp-menu__link--color-secondary,
.bp-menu__heading.bp-menu__link--color-success,
.bp-menu__heading.bp-menu__link--color-danger,
.bp-menu__heading.bp-menu__link--color-warning,
.bp-menu__heading.bp-menu__link--color-info,
.bp-menu__heading.bp-menu__link--color-light,
.bp-menu__heading.bp-menu__link--color-dark,
.bp-menu__heading.bp-menu__link--color-body,
.bp-menu__heading.bp-menu__link--color-body-secondary,
.bp-menu__heading.bp-menu__link--color-body-tertiary,
.bp-menu__heading.bp-menu__link--color-body-emphasis {
    color: var(--bp-color-emphasis, var(--bp-color, inherit));
}

/* ============================================================
 * Search overlay (fullscreen variant) — widget search_form variant=overlay
 * Tectum-style search-overlay replacement. Glass backdrop, centered glass form,
 * autofocus on open, ESC/backdrop close. Tokens for skin override.
 * ============================================================ */
/* Algolia-style panel: backdrop blurred + dark, top-anchored card with sticky
   search box i scrollowanymi wynikami. Mobile = pełen ekran. */
.bp-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1rem, 8vh, 6rem) clamp(0.75rem, 4vw, 2rem) clamp(1rem, 4vh, 3rem);
    background: var(--bp-search-overlay-bg, rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(var(--bp-search-overlay-blur, 8px)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--bp-search-overlay-blur, 8px)) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.2s ease,
        backdrop-filter 0.2s ease,
        visibility 0s linear 0.2s;
}
.bp-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}
[data-bs-theme="dark"] .bp-search-overlay {
    background: var(--bp-search-overlay-bg-dark, rgba(0, 0, 0, 0.62));
}

/* Panel — card z rounded corners, max-height flex column. */
.bp-search-overlay__panel {
    width: 100%;
    max-width: 720px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 18px;
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.35),
        0 8px 16px -4px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transform: translateY(-16px) scale(0.98);
    opacity: 0;
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
}
.bp-search-overlay.is-open .bp-search-overlay__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
[data-bs-theme="dark"] .bp-search-overlay__panel {
    box-shadow:
        0 24px 60px -12px rgba(0, 0, 0, 0.6),
        0 8px 16px -4px rgba(0, 0, 0, 0.4);
}

/* Search box — sticky top, flex row z icon/input/clear/spinner/esc */
.bp-search-overlay__search-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.85rem 0.85rem 0.85rem 1.25rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition:
        padding 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
/* Compact mode — gdy results scroll past 16px, search box shrinka + box-shadow */
.bp-search-overlay__panel.is-scrolled .bp-search-overlay__search-box {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.12);
}

/* Focus ring on whole search box */
.bp-search-overlay__search-box:focus-within {
    border-bottom-color: var(--bs-primary);
    box-shadow: 0 4px 16px -6px rgba(var(--bs-primary-rgb), 0.25);
}

.bp-search-overlay__search-icon {
    flex: 0 0 auto;
    font-size: 1.35rem;
    color: var(--bs-secondary-color);
    margin-right: 0.75rem;
    transition: font-size 0.2s ease, color 0.15s ease;
    pointer-events: none;
}
.bp-search-overlay__search-box:focus-within .bp-search-overlay__search-icon {
    color: var(--bs-primary);
}
.bp-search-overlay__panel.is-scrolled .bp-search-overlay__search-icon {
    font-size: 1.1rem;
}

.bp-search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
    line-height: 1.3;
    transition: font-size 0.2s ease;

    &:focus { outline: 0; }
    &::placeholder { color: var(--bs-secondary-color); opacity: 0.7; }
    /* Hide native Webkit X cancel */
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
}
.bp-search-overlay__panel.is-scrolled .bp-search-overlay__input {
    font-size: 1.05rem;
}

/* Clear button — pojawia się gdy input ma wartość */
.bp-search-overlay__clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin-right: 0.2rem;
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;

    i { font-size: 1.15rem; }
    &:hover, &:focus-visible {
        background: rgba(var(--bs-danger-rgb), 0.08);
        color: var(--bs-danger);
    }
}

/* Spinner — pojawia się podczas AJAX fetch */
.bp-search-overlay__spinner {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 0.2rem;
    color: var(--bs-primary);
    pointer-events: none;

    i { font-size: 1.05rem; }
}

/* ESC kbd button — clickable, visual cue for keyboard hint */
.bp-search-overlay__esc-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.5rem;
    background: transparent;
    border: 0;
    cursor: pointer;

    kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 1.8rem;
        padding: 0 0.6rem;
        background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.08);
        border: 1px solid var(--bs-border-color);
        border-radius: 6px;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--bs-secondary-color);
        letter-spacing: 0.04em;
        line-height: 1;
        box-shadow: 0 1px 0 rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.06);
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    &:hover kbd, &:focus-visible kbd {
        background: rgba(var(--bs-primary-rgb), 0.08);
        border-color: rgba(var(--bs-primary-rgb), 0.25);
        color: var(--bs-primary);
    }
}

/* Body scroll lock — added by JS when overlay opens */
body.bp-search-overlay-open { overflow: hidden; }

/* Mobile compact — panel pełnoekranowy, mniejsze paddingi */
@media (max-width: 640px) {
    .bp-search-overlay { padding: 0; }
    .bp-search-overlay__panel {
        max-width: none;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: 0;
    }
    .bp-search-overlay__search-box {
        padding: 0.7rem 0.75rem 0.7rem 1rem;
    }
    .bp-search-overlay__input { font-size: 1.1rem; }
    .bp-search-overlay__esc-btn { display: none; }   /* mobile = no kbd hint */
}

/* ============================================================
 * Live search results in bp-search-overlay.
 * Pretty list with thumbnail, title, post-type badge, excerpt highlight.
 * ============================================================ */
.bp-search-overlay__results-wrap {
    flex: 1 1 auto;
    min-height: 0;             /* WAŻNE — flex+overflow scroll wymaga min-height:0 */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem 1.25rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
/* Nice scrollbar dla results-wrap */
.bp-search-overlay__results-wrap::-webkit-scrollbar { width: 8px; }
.bp-search-overlay__results-wrap::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.18);
    border-radius: 4px;
}
.bp-search-overlay__results-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.28);
}

/* State containers (loading / empty / hint / error) */
.bp-search-overlay__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
    border: 1px dashed var(--bs-border-color-translucent);
    border-radius: 14px;
    background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.02);

    i { font-size: 1.8rem; opacity: 0.5; }
    p { margin: 0; font-size: 0.92rem; }
}
.bp-search-overlay__state--loading i { color: var(--bs-primary); opacity: 1; }
.bp-search-overlay__state--error {
    color: var(--bs-danger-text-emphasis, var(--bs-danger));
    border-color: var(--bs-danger-border-subtle, rgba(var(--bs-danger-rgb), 0.3));
    background: var(--bs-danger-bg-subtle, rgba(var(--bs-danger-rgb), 0.06));
    i { color: var(--bs-danger); opacity: 1; }
}

/* Empty state */
.bp-search-overlay__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    color: var(--bs-secondary-color);
    text-align: center;

    i { font-size: 2rem; opacity: 0.45; }
    p { margin: 0; font-size: 0.95rem; }
}

/* Results list */
.bp-search-overlay__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 60vh;
    overflow-y: auto;
}
.bp-search-overlay__result { margin: 0; }
.bp-search-overlay__result-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--bs-body-color);
    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.6);
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;

    &:hover,
    &.is-focused {
        background: rgba(var(--bs-primary-rgb), 0.06);
        border-color: rgba(var(--bs-primary-rgb), 0.18);
        color: var(--bs-body-color);
        text-decoration: none;
    }
    &.is-focused { outline: 2px solid rgba(var(--bs-primary-rgb), 0.35); outline-offset: 1px; }
}

/* Result media (thumbnail or icon) */
.bp-search-overlay__result-media {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.05);
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    i {
        font-size: 1.5rem;
        color: var(--bs-secondary-color);
        opacity: 0.6;
    }
}

/* Result body — title + badge row + excerpt */
.bp-search-overlay__result-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.bp-search-overlay__result-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.bp-search-overlay__result-title {
    font-weight: 600;
    font-size: 0.97rem;
    line-height: 1.35;
    color: var(--bs-emphasis-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.bp-search-overlay__result-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.15rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.10);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.20);
    border-radius: 9999px;
    line-height: 1.4;
}
.bp-search-overlay__result-excerpt {
    font-size: 0.83rem;
    color: var(--bs-secondary-color);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Structured meta — phone/email/address linijki pod excerptem (lokalizacje, future encje) */
.bp-search-overlay__result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    line-height: 1.35;
}
.bp-search-overlay__result-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
}
.bp-search-overlay__result-meta-item > i {
    flex: 0 0 auto;
    font-size: 0.78rem;
    opacity: 0.7;
    color: var(--bs-primary);
}
.bp-search-overlay__result-meta-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bp-search-overlay__result-arrow {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    opacity: 0.4;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}
.bp-search-overlay__result-link:hover .bp-search-overlay__result-arrow,
.bp-search-overlay__result-link.is-focused .bp-search-overlay__result-arrow {
    color: var(--bs-primary);
    opacity: 1;
    transform: translateX(4px);
}

/* Highlight match in title/excerpt */
.bp-search-overlay__hl {
    background: rgba(var(--bs-warning-rgb), 0.30);
    color: inherit;
    padding: 0.05em 0.15em;
    border-radius: 3px;
}

/* "View all results" link below results */
.bp-search-overlay__view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.55rem 1.1rem;
    border-radius: 9999px;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.08);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.22);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.15s ease;

    &:hover {
        background: rgba(var(--bs-primary-rgb), 0.14);
        color: var(--bs-primary);
        text-decoration: none;
        transform: translateY(-1px);
    }
}

/* Spinner for loading state */
.bp-spin {
    animation: bp-spin-rotate 0.8s linear infinite;
    display: inline-block;
}
@keyframes bp-spin-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bp-spin { animation: none; }
    .bp-search-overlay__result-link { transition: none; }
}

/* ============================================================
 * Search overlay — PRO version (filters, stats, grouped, footer hints)
 * ============================================================ */

/* Stats bar — count + query time */
.bp-search-overlay__stats {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.95rem;
    margin-bottom: 0.85rem;
    border-radius: 10px;
    background: rgba(var(--bs-success-rgb, 25, 135, 84), 0.08);
    color: var(--bs-success-text-emphasis, var(--bs-success));
    font-size: 0.85rem;
    border: 1px solid rgba(var(--bs-success-rgb, 25, 135, 84), 0.18);

    i { font-size: 1rem; }
    strong { font-weight: 700; }
}
.bp-search-overlay__stats-time {
    margin-left: auto;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* Filter chips row */
.bp-search-overlay__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.bp-search-overlay__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.04);
    border: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-emphasis-color);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;

    &:hover {
        background: rgba(var(--bs-primary-rgb), 0.08);
        border-color: rgba(var(--bs-primary-rgb), 0.25);
        color: var(--bs-primary);
        transform: translateY(-1px);
    }
    &:focus-visible {
        outline: 2px solid rgba(var(--bs-primary-rgb), 0.45);
        outline-offset: 2px;
    }
    &.is-active {
        background: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
        box-shadow: 0 4px 10px -4px rgba(var(--bs-primary-rgb), 0.45);

        .bp-search-overlay__filter-count {
            background: rgba(255, 255, 255, 0.22);
            color: #fff;
        }
    }
    &:active { transform: translateY(0); }
}
.bp-search-overlay__filter-icon {
    font-size: 0.9rem;
    opacity: 0.85;
}
.bp-search-overlay__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.42rem;
    height: 1.25rem;
    background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.10);
    color: var(--bs-emphasis-color);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9999px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Grouped results — section header per source type */
.bp-search-overlay__group {
    margin-bottom: 1.5rem;
    &:last-child { margin-bottom: 0; }
}
.bp-search-overlay__group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    margin-bottom: 0.4rem;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--bs-border-color-translucent);

    i {
        font-size: 0.95rem;
        color: var(--bs-primary);
    }
}
.bp-search-overlay__group-label { flex: 1 1 auto; }
.bp-search-overlay__group-count {
    color: var(--bs-emphasis-color);
    background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.08);
    padding: 0.1rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
}

/* Result badge — z ikoną per typu */
.bp-search-overlay__result-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    padding: 0.18rem 0.55rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.10);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.20);
    border-radius: 9999px;
    line-height: 1.4;

    i { font-size: 0.78rem; opacity: 0.95; }
}

/* Footer with keyboard hints + view-all */
.bp-search-overlay__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}
.bp-search-overlay__hints {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}
.bp-search-overlay__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.5rem;
        padding: 0.1rem 0.35rem;
        background: rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.08);
        border: 1px solid var(--bs-border-color-translucent);
        border-radius: 5px;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
        font-size: 0.7rem;
        color: var(--bs-emphasis-color);
        box-shadow: 0 1px 0 rgba(var(--bs-emphasis-color-rgb, 33, 37, 41), 0.06);
        line-height: 1;
        font-weight: 600;
    }
    kbd + kbd { margin-left: -0.2rem; }
}

/* Smooth filter transition */
.bp-search-overlay__body { min-height: 100px; }
.bp-search-overlay__body > .bp-search-overlay__group,
.bp-search-overlay__body > .bp-search-overlay__results {
    animation: bp-search-fade-in 0.18s ease-out;
}
@keyframes bp-search-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bp-search-overlay__body > .bp-search-overlay__group,
    .bp-search-overlay__body > .bp-search-overlay__results { animation: none; }
}

/* Mobile compact — chips scroll horizontally, hints abbreviated */
@media (max-width: 640px) {
    .bp-search-overlay__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1rem;
        margin: 0 -0.5rem 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .bp-search-overlay__filter { flex: 0 0 auto; }
    .bp-search-overlay__footer { flex-direction: column; align-items: flex-start; }
    .bp-search-overlay__hints { gap: 0.6rem; font-size: 0.7rem; }
}