/* =============================================================================
   Org Website Header - Strip System
   Runtime styles for the strip-based header rendered by
   OrgWebsiteHeaderWidget. Builder UI styles live in header-builder.css.
   ============================================================================= */

.website-header {
    position: relative;
    z-index: 1030;
}

/* When any strip opts into sticky OR shrink-on-scroll, the entire
   <header> needs to stick too. Sticky elements only stick within their
   containing block; without this rule the strip's containing block (the
   <header> wrapper) is only as tall as the strip itself, so the strip
   un-sticks the moment the header's bottom edge passes the viewport
   top. Shrink-on-scroll needs the same treatment - if the strip scrolls
   off screen, the shrink animation has nothing to render onto.
   Bumping z-index above any sticky page sections too. */
.website-header:has(.website-header-strip-sticky),
.website-header:has(.website-header-strip-shrinkable) {
    position: sticky;
    top: var(--wb-trial-banner-h, 0px);
    z-index: 1040;
}

/* ---------- Strip wrapper ------------------------------------------------ */

.website-header-strip {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.website-header-strip:last-of-type {
    border-bottom: none;
}

.website-header-strip-row {
    min-height: 56px;
    gap: 1rem;
}

/* ---------- Per-strip padding ------------------------------------------- */

.website-header-strip-pad-tight .website-header-strip-row {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: 36px;
}

.website-header-strip-pad-normal .website-header-strip-row {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.website-header-strip-pad-loose .website-header-strip-row {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ---------- Per-strip vertical alignment -------------------------------- */

.website-header-strip-align-start .website-header-strip-row {
    align-items: flex-start;
}

.website-header-strip-align-end .website-header-strip-row {
    align-items: flex-end;
}

/* ---------- Per-strip backgrounds --------------------------------------- */

/* Surface = match the page's own body background so the strip blends
   into the page surface. The two fallbacks make the rule theme-aware
   even when the org doesn't define its own --website-bg / --website-fg
   palette: in light mode the design system's --bg-primary resolves to
   white with dark text, in dark mode to a dark surface with light text. */
.website-header-strip-bg-surface {
    background-color: var(--website-bg, var(--bg-primary, var(--bs-body-bg, #fff)));
    color: var(--website-fg, var(--text-primary, var(--bs-body-color, inherit)));
}

.website-header-strip-bg-primary {
    background-color: var(--website-primary, #0d6efd);
    color: var(--website-on-primary, #fff);
}

.website-header-strip-bg-primary a {
    color: var(--website-on-primary, #fff);
}

.website-header-strip-bg-dark {
    background-color: #1a1a1a;
    color: #fff;
}

.website-header-strip-bg-dark a {
    color: #fff;
}

.website-header-strip-bg-light {
    background-color: #f8f9fa;
    color: #1a1a1a;
}

.website-header-strip-bg-transparent {
    background-color: transparent;
}

/* Custom per-strip color. The hex + its computed contrast text color arrive
   as inline CSS vars (--strip-custom-bg / --strip-custom-fg) set by
   StripRenderHelper. Kept as a plain class so the overlay-mode
   `background: transparent !important` rules still win at the top of a hero. */
.website-header-strip-bg-custom {
    background-color: var(--strip-custom-bg);
    color: var(--strip-custom-fg);
}

.website-header-strip-bg-custom a {
    color: inherit;
}

/* Dark custom background (light contrast text): flip muted/secondary tokens
   so small print stays legible, matching the dark/primary strips below. */
.website-header-strip-bg-custom--dark {
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-secondary: rgba(255, 255, 255, 0.85);
    --bs-secondary-color: rgba(255, 255, 255, 0.7);
}

/* On intentionally dark / primary strips (contact_bar's top utility bar,
   promo's announcement banner) redefine the muted/secondary tokens to light
   values. Descendants that color themselves with var(--text-muted) /
   var(--text-secondary) - the language switcher separator, hour badges,
   small print - otherwise keep a mid-grey that washes out on the near-black
   or brand background. Locally overriding the tokens fixes every such
   element at once without targeting each by hand. */
.website-header-strip-bg-dark,
.website-header-strip-bg-primary {
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-secondary: rgba(255, 255, 255, 0.85);
    --bs-secondary-color: rgba(255, 255, 255, 0.7);
}

/* ---------- Sticky / shrink / glass behaviour --------------------------- */

.website-header-strip-sticky {
    position: sticky;
    top: var(--wb-trial-banner-h, 0px);
    z-index: 1030;
}

.website-header-strip-glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .website-header-strip-glass {
    background-color: rgba(20, 20, 20, 0.7);
}

/* Transitions belong on the elements that actually change. The row
   shrinks its padding + min-height; the logo shrinks its max-height. */
.website-header-strip-shrinkable .website-header-strip-row {
    transition: padding 0.22s ease, min-height 0.22s ease;
}

.website-header-strip-shrinkable .website-nav-logo,
.website-header-strip-shrinkable .website-header-logo {
    transition: max-height 0.22s ease;
}

.website-header-strip-shrunk .website-header-strip-row {
    min-height: 40px;
}

/* Per-padding shrink overrides. Each padding tier collapses to a
   noticeably smaller value when shrunk so users see something happen
   regardless of which tier they picked. */
.website-header-strip-shrunk.website-header-strip-pad-tight .website-header-strip-row {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.website-header-strip-shrunk.website-header-strip-pad-normal .website-header-strip-row {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.website-header-strip-shrunk.website-header-strip-pad-loose .website-header-strip-row {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.website-header-strip-shrunk .website-nav-logo,
.website-header-strip-shrunk .website-header-logo {
    max-height: calc(var(--website-header-logo-h, var(--website-nav-logo-height, 40px)) * 0.65);
}

/* ---------- Zones (left / center / right) ------------------------------- */

.website-header-zone {
    min-width: 0;
}

.website-header-zone-left {
    flex: 0 0 auto;
}

.website-header-zone-center {
    flex: 1 1 auto;
}

.website-header-zone-right {
    flex: 0 0 auto;
}

/* ---------- Section wrappers -------------------------------------------- */

.website-header-section,
.website-header-section-wrap {
    display: inline-flex;
    align-items: center;
}

.website-header-logo {
    max-height: var(--website-header-logo-h, var(--website-nav-logo-height, 40px));
    width: auto;
    transition: max-height 0.2s ease;
}

/* Logo size presets (S/M/L/XL). A per-element variable so the
   shrink-on-scroll rule above can scale whatever size was picked.
   An inline max-height (the "Custom px" knob) still wins over these. */
.website-header-logo--sm { --website-header-logo-h: 28px; }
.website-header-logo--md { --website-header-logo-h: 40px; }
.website-header-logo--lg { --website-header-logo-h: 56px; }
.website-header-logo--xl { --website-header-logo-h: 72px; }

.website-header-wordmark {
    font-family: var(--font-family-brand, var(--font-family-heading));
    font-weight: 600;
    white-space: nowrap;
}

/* Wordmark text-size presets. */
.website-header-wordmark--sm { font-size: 1rem; }
.website-header-wordmark--md { font-size: 1.25rem; }
.website-header-wordmark--lg { font-size: 1.5rem; }
.website-header-wordmark--xl { font-size: 1.875rem; }

/* Wordmark weight presets (override the base 600). */
.website-header-wordmark--w-normal { font-weight: 400; }
.website-header-wordmark--w-medium { font-weight: 500; }
.website-header-wordmark--w-semibold { font-weight: 600; }
.website-header-wordmark--w-bold { font-weight: 700; }

/* Wordmark letter-case. */
.website-header-wordmark--upper {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Logo + name stacked layout (logo above text instead of side by side). */
.website-header-section-brand-combo--stacked {
    flex-direction: column;
    text-align: center;
}

/* Brand-area anchors (logo / wordmark / brand_combo) wrap their content
   in a link to the homepage. Without this reset the browser would
   render the wordmark as a blue-and-underlined hyperlink, which looks
   like an accidental anchor instead of the site's name. Keep the
   anchor for click-to-go-home semantics, drop the visual link styling. */
.website-header-section-logo,
.website-header-section-wordmark,
.website-header-section-brand-combo {
    color: inherit;
    text-decoration: none;
}

.website-header-section-logo:hover,
.website-header-section-wordmark:hover,
.website-header-section-brand-combo:hover,
.website-header-section-logo:focus,
.website-header-section-wordmark:focus,
.website-header-section-brand-combo:focus {
    color: inherit;
    text-decoration: none;
}

/* ---------- Search section ---------------------------------------------- */

/* Keep the icon + input on one row. Without this the input-group (Bootstrap
   default flex-wrap: wrap) wraps the form-control below the magnifier icon -
   the form-control keeps flex: 1 1 auto so its content, not width:0, drives its
   size - and the collapsed 38px / overflow:hidden then clips it to a crooked
   half-word under the icon. */
.website-header-search .input-group {
    flex-wrap: nowrap;
}

/* Collapsed (resting) state reads as a tidy pill button built from design
   tokens: a soft surface fill, a hairline border, and full rounding so it
   invites a click instead of looking like a stray icon. It morphs into a full
   input on hover / focus, where it switches to the page surface, picks up the
   brand border, and a soft brand focus ring. */
.website-header-search-expandable .input-group {
    width: 38px;
    border: 1px solid var(--border-default, var(--bs-border-color, rgba(0, 0, 0, 0.12)));
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-secondary, var(--bs-tertiary-bg, #f1f3f5));
    overflow: hidden;
    transition: width 0.25s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.website-header-search-expandable:hover .input-group,
.website-header-search-expandable:focus-within .input-group {
    width: 240px;
    background: var(--website-bg, var(--bs-body-bg, #fff));
    border-color: var(--color-primary-600, var(--bs-primary, #0d6efd));
    box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-600-rgb, 37, 99, 235), 0.15);
}

/* Icon + field sit transparent and border-free so the pill's own fill and
   single hairline border show through cleanly; the magnifier is muted at rest
   and adopts the brand color on hover/focus. */
.website-header-search-expandable .input-group-text,
.website-header-search-expandable .form-control {
    background: transparent;
    border: 0;
}

.website-header-search-expandable .input-group-text {
    color: var(--text-secondary, var(--bs-secondary-color, #6c757d));
    transition: color 0.2s ease;
}

.website-header-search-expandable:hover .input-group-text,
.website-header-search-expandable:focus-within .input-group-text {
    color: var(--color-primary-600, var(--bs-primary, #0d6efd));
}

.website-header-search-expandable .form-control {
    /* flex: 0 1 0 (not Bootstrap's 1 1 auto) so the collapsed input truly
       takes zero width - the icon then sits alone in the pill. */
    flex: 0 1 0;
    width: 0;
    min-width: 0;
    padding-left: 0;
    box-shadow: none;
    transition: width 0.25s ease, padding 0.25s ease, flex-basis 0.25s ease;
}

.website-header-search-expandable:hover .form-control,
.website-header-search-expandable:focus-within .form-control {
    flex: 1 1 auto;
    width: 100%;
    padding-left: 0.5rem;
}

/* ---------- Language switcher in header --------------------------------- */

/* The default language-text variant (CSS in web/css/language.css) is
   styled for the vertical floating sidebar - it stacks the codes in a
   column. Inside a header strip we always want them inline, with the
   "|" separator visible. */

.website-header-section-language .language-text-links {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
}

.website-header-section-language .language-separator {
    display: inline;
    opacity: 0.5;
    color: var(--text-muted, currentColor);
    margin: 0 0.15rem;
}

/* Same for the flag-row variant: each flag rendered as a separate
   anchor needs to sit on one line. */
.website-header-section-language .language-flags {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

/* ---------- Switcher hover suppression ---------------------------------- */

/* The theme switcher (icon / toggle / dropdown), language switcher (flag /
   inline / flags) and shopping-cart widget are controls, not nav links - the
   org asked for NO mouse-hover feedback on them. The visible "box" on hover
   sits on the clickable CONTAINER (.nav-link / button / label), so we clear
   the container's hover+focus fill, kill movement / shadow / focus-ring, and
   re-assert the few RESTING fills that are part of the design (the toggle
   track, the language pill + flag chips, the dropdown trigger). `!important`
   beats the per-variant + dark-theme rules in theme.css / language.css. */

/* Movement, shadow and focus-ring off everywhere inside these widgets.
   `:not(.dropdown-menu)` spares the open popup: Bootstrap/Popper positions
   .dropdown-menu with an inline transform, so clobbering it to `none` on hover
   would snap the menu up over its trigger. The trigger + container still get
   suppressed (they are never Popper-transformed). */
.website-header .website-header-section-theme :hover:not(.dropdown-menu),
.website-header .website-header-section-theme :focus:not(.dropdown-menu),
.website-header .website-header-section-theme :focus-visible:not(.dropdown-menu),
.website-header .website-header-section-language :hover:not(.dropdown-menu),
.website-header .website-header-section-language :focus:not(.dropdown-menu),
.website-header .website-header-section-language :focus-visible:not(.dropdown-menu),
.website-header .website-header-section-cart :hover:not(.dropdown-menu),
.website-header .website-header-section-cart :focus:not(.dropdown-menu),
.website-header .website-header-section-cart :focus-visible:not(.dropdown-menu) {
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Clear hover/focus FILL on the clickable containers (no resting fill, so
   transparent == rest). Covers: theme icon button + its nav-link wrapper, the
   toggle's nav-link wrapper + label, language text/flag-row containers, and
   the cart trigger. The toggle TRACK (.theme-toggle-slider) is intentionally
   absent so its state colour (light/dark) is preserved. */
.website-header .website-header-section-theme .nav-link:hover,
.website-header .website-header-section-theme .nav-link:focus,
.website-header .website-header-section-theme .theme-icon-button:hover,
.website-header .website-header-section-theme .theme-icon-button:focus,
.website-header .website-header-section-theme .theme-toggle-switch:hover,
.website-header .website-header-section-theme .theme-toggle-switch:focus,
.website-header .website-header-section-language .language-text-link:hover,
.website-header .website-header-section-language .language-text-link:focus,
.website-header .website-header-section-language .language-toggle-link:hover,
.website-header .website-header-section-language .language-toggle-link:focus,
.website-header .website-header-section-cart .nav-link:hover,
.website-header .website-header-section-cart .nav-link:focus,
.website-header .website-header-section-cart .btn:hover,
.website-header .website-header-section-cart .btn:focus,
.website-header .website-header-section-cart .dropdown-toggle:hover,
.website-header .website-header-section-cart .dropdown-toggle:focus {
    background: transparent !important;
    border-color: transparent !important;
    color: inherit !important;
}

/* Language - pill (inline) variant (rest: tertiary fill + muted border). */
.website-header .website-header-section-language .language-link:hover,
.website-header .website-header-section-language .language-link:focus {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-muted) !important;
    color: inherit !important;
}

/* Language - flag variant (rest: tertiary fill, transparent ring). */
.website-header .website-header-section-language .language-flag:hover,
.website-header .website-header-section-language .language-flag:focus {
    background: var(--bg-tertiary) !important;
    border-color: transparent !important;
}

/* Theme - dropdown trigger (rest: secondary fill + default border). */
.website-header .website-header-section-theme .theme-switcher-dropdown .theme-switcher-btn:hover,
.website-header .website-header-section-theme .theme-switcher-dropdown .theme-switcher-btn:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-default) !important;
    color: inherit !important;
}

/* Exception: items INSIDE an open dropdown menu keep their hover - a popup
   list needs to show which row is focused. Only the in-bar trigger is
   suppressed above. */
.website-header .website-header-section-theme .dropdown-menu .dropdown-item:hover,
.website-header .website-header-section-theme .dropdown-menu .dropdown-item:focus,
.website-header .website-header-section-language .dropdown-menu .dropdown-item:hover,
.website-header .website-header-section-language .dropdown-menu .dropdown-item:focus,
.website-header .website-header-section-cart .dropdown-menu .dropdown-item:hover,
.website-header .website-header-section-cart .dropdown-menu .dropdown-item:focus {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* ---------- Social icons ------------------------------------------------ */

.website-header-section-social a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.website-header-section-social a:hover {
    opacity: 1;
}

.website-header-section-social .rounded-circle,
.website-header-section-social .rounded {
    width: 32px;
    height: 32px;
}

/* ---------- Payment & trust badges -------------------------------------- */

.website-header-section-payment {
    line-height: 1;
}

.website-payment-caption {
    font-size: 0.8125rem;
    opacity: 0.75;
}

.website-payment-badge {
    color: inherit;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}

.website-header-section-payment:hover .website-payment-badge {
    opacity: 0.9;
}

/* Brand-color mode: restore each card network's own hue. */
.website-payment-badge-color.fa-cc-visa { color: #1a1f71; opacity: 1; }
.website-payment-badge-color.fa-cc-mastercard { color: #eb001b; opacity: 1; }
.website-payment-badge-color.fa-cc-amex { color: #2e77bc; opacity: 1; }
.website-payment-badge-color.fa-cc-paypal { color: #003087; opacity: 1; }
.website-payment-badge-color.fa-cc-apple-pay { color: inherit; opacity: 1; }
.website-payment-badge-color.fa-google-pay { color: inherit; opacity: 1; }
.website-payment-badge-color.fa-cc-stripe { color: #635bff; opacity: 1; }

.website-payment-badge-outline {
    padding: 0.35rem 0.5rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    opacity: 0.55;
}

.website-payment-trust {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.85;
}

.website-app-pill {
    padding: 0.4rem 0.85rem;
    border: 1px solid currentColor;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.website-app-pill:hover {
    opacity: 1;
    transform: translateY(-1px);
    color: inherit;
}

.website-app-pill-label {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.1;
}

/* ---------- Spacer ------------------------------------------------------ */

.website-header-spacer-grow {
    min-width: 1rem;
}

/* ---------- Announcement-as-section ------------------------------------- */

.website-announcement-inline {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.website-announcement-inline.website-announcement-primary {
    background-color: var(--website-primary, #0d6efd);
    color: #fff;
}

.website-announcement-inline.website-announcement-secondary {
    background-color: #6c757d;
    color: #fff;
}

.website-announcement-inline.website-announcement-dark {
    background-color: #1a1a1a;
    color: #fff;
}

.website-announcement-inline.website-announcement-light {
    background-color: #f8f9fa;
    color: #1a1a1a;
}

.website-announcement-inline .btn-close-inline {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    padding: 0 0.25rem;
}

.website-announcement-inline .btn-close-inline:hover {
    opacity: 1;
}

/* ---------- Org-website mobile drawer overrides -------------------------
   Reuses every base class from web/css/mobile-menu.css (mobile-menu-
   container, mobile-menu-header, mobile-nav-item, mobile-menu-footer,
   etc.). The rules below add the org-website-only refinements: logo
   in the title block, primary CTA above the footer, contact group
   spacing, social icon row. */

.mobile-menu-title-org {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.mobile-menu-org-logo {
    max-height: 28px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
}

.mobile-menu-org-subtitle {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, var(--bs-secondary-color, #6c757d));
    font-weight: 600;
}

/* Inline announcement banner above the nav list */
.mobile-org-announce {
    margin: 0.5rem 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    background: var(--color-primary-50, rgba(13, 110, 253, 0.08));
    color: var(--text-primary, inherit);
    font-size: 0.85rem;
    border-left: 3px solid var(--color-primary-500, var(--bs-primary, #0d6efd));
}

.mobile-org-announce-cta {
    font-weight: 600;
    text-decoration: underline;
}

/* Inline search above the nav list */
.mobile-org-search {
    margin: 0.5rem 1rem 0.75rem;
}

.mobile-org-search .form-control {
    background: var(--bg-secondary, var(--bs-tertiary-bg, #f1f3f5));
    border: 1px solid var(--border-default, var(--bs-border-color, rgba(0,0,0,0.1)));
}

.mobile-org-search .input-group-text {
    background: transparent;
    border-right: none;
    color: var(--text-secondary, var(--bs-secondary-color, #6c757d));
}

/* Contact group: clear visual block under a "Contact" heading */
.mobile-org-contact-group {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-muted, var(--bs-border-color, rgba(0,0,0,0.06)));
    padding-top: 0.5rem;
}

.mobile-org-contact-heading {
    padding: 0.5rem 1rem 0.25rem;
    display: flex;
    align-items: center;
}

.mobile-org-contact-group .mobile-nav-item {
    /* Slightly tighter than top-level nav items so the contact rows
       read as a sub-group. */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Social icons row */
.mobile-org-social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-muted, var(--bs-border-color, rgba(0,0,0,0.06)));
}

.mobile-org-social:empty {
    display: none;
}

.mobile-org-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary, var(--bs-tertiary-bg, #f1f3f5));
    color: var(--text-secondary, var(--bs-secondary-color, #6c757d));
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-org-social-icon:hover,
.mobile-org-social-icon:focus {
    background: var(--color-primary-500, var(--bs-primary, #0d6efd));
    color: #fff;
}

/* Primary CTA pinned above the user card / utility bar */
.mobile-org-cta {
    font-weight: 600;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* Guest section: log-in button + optional cart icon side-by-side. */
.mobile-guest-section {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.mobile-guest-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: var(--bg-secondary, var(--bs-tertiary-bg, #f1f3f5));
    color: var(--text-primary, inherit);
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.mobile-guest-cart-btn:hover,
.mobile-guest-cart-btn:focus {
    background: var(--color-primary-50, rgba(13, 110, 253, 0.08));
    color: var(--color-primary-600, var(--bs-primary, #0d6efd));
}

/* ---------- Mobile (< lg) ----------------------------------------------- */

@media (max-width: 991.98px) {
    .website-header-strip-row {
        flex-wrap: wrap;
    }
    .website-header-zone-center {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
    }
    .website-header-search-expandable .input-group {
        width: 100%;
    }
}