/*
 * CMSAgent primary navigation
 * Shared presentation for the recursive primary-navigation Go partial.
 */

.site-navigation-header {
  --site-nav-height: 4.875rem;
  min-height: var(--site-nav-height);
}

#site-navbar {
  /* Wired to the site theme tokens (/theme/admin); the literal values are
     the un-themed fallbacks. Nav-specific dims (shadow/radius/height) stay
     local - they're layout, not brand. */
  --site-nav-bg: var(--bs-body-bg, rgba(255, 255, 255, .94));
  --site-nav-surface: var(--bs-tertiary-bg, #f7f9fc);
  --site-nav-surface-strong: var(--bs-secondary-bg, #eef3f9);
  --site-nav-border: var(--bs-border-color, rgba(18, 37, 63, .12));
  --site-nav-border-strong: rgba(var(--bs-primary-rgb, 13, 110, 253), .26);
  --site-nav-text: var(--bs-body-color, #172033);
  --site-nav-muted: var(--bs-secondary-color, #667085);
  --site-nav-accent: var(--bs-primary, #0d6efd);
  --site-nav-accent-strong: rgb(var(--bs-link-hover-color-rgb, 7, 93, 204));
  --site-nav-accent-soft: rgba(var(--bs-primary-rgb, 13, 110, 253), .1);
  --site-nav-danger: var(--bs-danger, #dc3545);
  --site-nav-shadow: 0 .7rem 2rem rgba(24, 39, 75, .1);
  --site-nav-radius: .9rem;
  min-height: var(--site-nav-height);
  padding: .65rem clamp(.65rem, 1.8vw, 1.35rem);
  color: var(--site-nav-text);
  border-bottom: 1px solid var(--site-nav-border);
  box-shadow: 0 .25rem 1.25rem rgba(24, 39, 75, .06);
}

/* position:relative here is a deliberate fallback for the "static"
   NavPosition choice ONLY, not a blanket rule - it must NOT apply when
   Bootstrap's own .fixed-top/.sticky-top classes are present. Those
   classes set position:fixed/sticky with no !important, and #site-navbar
   is an ID selector - if this fallback were a plain, unscoped
   "#site-navbar { position: relative; }" rule (a real, live-caught
   regression this replaced), its higher specificity would silently beat
   .fixed-top/.sticky-top regardless of source order or which one was
   actually chosen in the admin, breaking BOTH position modes and only
   leaving "static" (the one case that ever needed this) looking correct.
   Scoping via :not() keeps this rule from ever matching an element that
   already carries either Bootstrap class, so their own position wins
   completely unimpeded - this selector only ever matches the "static"
   case, where #site-navbar would otherwise have no position at all
   (default: static), which the ::before glass layer below needs some
   positioned ancestor to anchor its inset:0 against. */
#site-navbar:not(.fixed-top):not(.sticky-top) {
  position: relative;
}

/* The nav's translucent/blurred ("glass") background lives on a
   ::before pseudo-element, NOT directly on #site-navbar itself -
   deliberately, not a style preference. Per the CSS spec, a non-none
   backdrop-filter (or filter/transform/perspective/contain/will-change)
   on an element creates a new containing block for ITS OWN position:fixed
   descendants. #site-navbar is exactly that ancestor for the off-canvas
   mobile nav panel (NavMobileStyle="offcanvas", #navbarOffcanvas), which
   relies entirely on position:fixed to overlay the whole viewport as a
   real slide-in drawer. With backdrop-filter directly on #site-navbar,
   the panel's "fixed" positioning silently resolved relative to the
   navbar's own ~72px-tall box instead of the page - confirmed live via
   getComputedStyle (the panel's computed height was exactly the navbar's
   own height, not the viewport's), squishing it into a sliver next to the
   logo with no backdrop dimming the page behind it. A ::before pseudo-
   element has no real descendants of its own, so putting the blur there
   instead removes #site-navbar from the containing-block chain entirely,
   with zero visual difference (it renders in the same box, same z-order)
   and zero DOM/markup changes needed anywhere else. */
#site-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--site-nav-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

[data-bs-theme="dark"] #site-navbar,
[data-theme="dark"] #site-navbar {
  /* Dark fallbacks; a dark:* theme token still wins (it resolves --bs-*
     under [data-bs-theme="dark"], which the var() picks up here). */
  --site-nav-bg: var(--bs-body-bg, rgba(10, 16, 25, .94));
  --site-nav-surface: var(--bs-tertiary-bg, #121b28);
  --site-nav-surface-strong: var(--bs-secondary-bg, #182435);
  --site-nav-border: var(--bs-border-color, rgba(167, 185, 211, .16));
  --site-nav-border-strong: rgba(var(--bs-primary-rgb, 52, 143, 255), .38);
  --site-nav-text: var(--bs-body-color, #f4f7fb);
  --site-nav-muted: var(--bs-secondary-color, #98a6ba);
  --site-nav-accent: var(--bs-primary, #348fff);
  --site-nav-accent-strong: rgb(var(--bs-link-hover-color-rgb, 103, 170, 255));
  --site-nav-accent-soft: rgba(var(--bs-primary-rgb, 52, 143, 255), .15);
  --site-nav-danger: var(--bs-danger, #ff6b78);
  --site-nav-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .36);
}

#site-navbar,
#site-navbar *,
#site-navbar *::before,
#site-navbar *::after {
  box-sizing: border-box;
}

#site-navbar .site-navbar-shell {
  width: min(100%, 92rem);
  min-width: 0;
  margin-inline: auto;
  padding-inline: 0;
  gap: .8rem;
}

#site-navbar .navbar-brand {
  min-width: 0;
  margin: 0 clamp(.3rem, 1.15vw, 1rem) 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: var(--site-nav-text);
  text-decoration: none;
}

#site-navbar .site-navbar-brand-mark {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .82rem;
  background: linear-gradient(145deg, #28a1ff 0%, #0d6efd 52%, #6d5dfc 100%);
  box-shadow: 0 .55rem 1.2rem rgba(13, 110, 253, .24);
}

/* A real uploaded logo image isn't designed to sit on the decorative
   gradient badge above (built for a plain monochrome Bootstrap icon
   glyph) - strip the badge chrome and let the image show at its own
   natural look, just bounded to the same footprint the badge occupied. */
#site-navbar .site-navbar-brand-mark--image {
  background: none;
  border: none;
  box-shadow: none;
}
#site-navbar .site-navbar-brand-mark--image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#site-navbar .site-navbar-brand-copy {
  min-width: 0;
  display: grid;
  line-height: 1.08;
}

#site-navbar .site-navbar-brand-copy strong {
  overflow: hidden;
  color: var(--site-nav-text);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#site-navbar .site-navbar-brand-copy small {
  margin-top: .3rem;
  color: var(--site-nav-muted);
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

#site-navbar .navbar-toggler {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: none;
  place-items: center;
  color: var(--site-nav-text);
  border: 1px solid var(--site-nav-border);
  border-radius: .8rem;
  background: var(--site-nav-surface);
  box-shadow: none;
}

#site-navbar .navbar-toggler:hover {
  color: var(--site-nav-accent);
  border-color: var(--site-nav-border-strong);
  background: var(--site-nav-accent-soft);
}

#site-navbar .navbar-toggler-icon {
  width: 1.25rem;
  height: 1.25rem;
}

#site-navbar .navbar-collapse {
  min-width: 0;
}

#site-navbar .site-navbar-primary {
  min-width: 0;
  align-items: center;
  gap: .18rem;
}

#site-navbar .nav-item {
  min-width: 0;
}

#site-navbar .nav-link,
#site-navbar .site-navbar-action,
#site-navbar .site-navbar-user-toggle,
#site-navbar .site-navbar-login {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: var(--site-nav-muted);
  font-size: .875rem;
  font-weight: 680;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: .72rem;
  transition:
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

#site-navbar .nav-link {
  position: relative;
  padding: .62rem .72rem;
}

#site-navbar .nav-link:hover,
#site-navbar .nav-link:focus-visible,
#site-navbar .site-navbar-action:hover,
#site-navbar .site-navbar-action:focus-visible,
#site-navbar .site-navbar-user-toggle:hover,
#site-navbar .site-navbar-user-toggle:focus-visible,
#site-navbar .site-navbar-login:hover,
#site-navbar .site-navbar-login:focus-visible {
  color: var(--site-nav-text);
  border-color: var(--site-nav-border);
  background: var(--site-nav-surface);
}

#site-navbar .nav-link.active,
#site-navbar .nav-link[aria-current="page"],
#site-navbar .nav-item.is-active > .nav-link,
#site-navbar .nav-item.active > .nav-link {
  color: var(--site-nav-accent-strong);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#site-navbar .nav-link.active::after,
#site-navbar .nav-link[aria-current="page"]::after,
#site-navbar .nav-item.is-active > .nav-link::after,
#site-navbar .nav-item.active > .nav-link::after {
  content: "";
  width: 1.35rem;
  height: 3px;
  position: absolute;
  right: 50%;
  bottom: .24rem;
  translate: 50% 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--site-nav-accent), #7569ff);
  box-shadow: 0 0 .65rem rgba(52, 143, 255, .45);
}

#site-navbar .nav-link i,
#site-navbar .site-navbar-action i,
#site-navbar .site-navbar-login i {
  flex: 0 0 auto;
  font-size: 1rem;
}

#site-navbar .nav-item.dropdown {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: .72rem;
  transition: border-color .18s ease, background-color .18s ease;
}

#site-navbar .nav-item.dropdown > .nav-link {
  border: 0;
  border-radius: .68rem 0 0 .68rem;
  background: transparent;
}

#site-navbar .nav-caret-btn {
  width: 1.9rem;
  min-height: 2.55rem;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--site-nav-muted);
  border: 0;
  border-radius: .58rem;
  background: transparent;
  box-shadow: none;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

#site-navbar .nav-item.dropdown > .nav-caret-btn {
  border-left: 1px solid transparent;
  border-radius: 0 .68rem .68rem 0;
}

#site-navbar .nav-item.dropdown:hover,
#site-navbar .nav-item.dropdown:focus-within {
  border-color: var(--site-nav-border);
  background: var(--site-nav-surface);
}

#site-navbar .nav-item.dropdown:hover > .nav-link,
#site-navbar .nav-item.dropdown:focus-within > .nav-link,
#site-navbar .nav-item.dropdown:hover > .nav-caret-btn,
#site-navbar .nav-item.dropdown:focus-within > .nav-caret-btn {
  border-color: transparent;
  background: transparent;
}

#site-navbar .nav-item.dropdown:hover > .nav-caret-btn,
#site-navbar .nav-item.dropdown:focus-within > .nav-caret-btn {
  border-left-color: var(--site-nav-border);
}

#site-navbar .nav-caret-btn i {
  display: block;
  font-size: .72rem;
  line-height: 1;
  transition: transform .2s ease;
}

#site-navbar .nav-caret-btn:hover,
#site-navbar .nav-caret-btn:focus-visible,
#site-navbar .nav-caret-btn[aria-expanded="true"] {
  color: var(--site-nav-accent);
  background: var(--site-nav-accent-soft);
}

#site-navbar .nav-item.dropdown > .nav-caret-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

#site-navbar .dropend > .nav-caret-btn[aria-expanded="true"] i,
#site-navbar .dropstart > .nav-caret-btn[aria-expanded="true"] i {
  transform: rotate(90deg);
}

#site-navbar .dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--site-nav-accent-soft);
  --bs-dropdown-link-active-bg: var(--site-nav-accent);
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  margin-top: .55rem;
  padding: .48rem;
  color: var(--site-nav-text);
  border: 1px solid var(--site-nav-border);
  border-radius: var(--site-nav-radius);
  background: var(--site-nav-bg);
  box-shadow: var(--site-nav-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

#site-navbar .dropdown-item {
  min-height: 2.65rem;
  padding: .62rem .72rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  overflow: hidden;
  color: var(--site-nav-text);
  font-size: .875rem;
  font-weight: 570;
  border-radius: .62rem;
  text-overflow: ellipsis;
}

#site-navbar .dropdown-item:hover,
#site-navbar .dropdown-item:focus-visible {
  color: var(--site-nav-accent-strong);
  background: var(--site-nav-accent-soft);
}

#site-navbar .dropdown-item.active,
#site-navbar .dropdown-item:active,
#site-navbar .dropdown-item[aria-current="page"] {
  color: #fff;
  background: var(--site-nav-accent);
}

#site-navbar .dropdown-item i {
  width: 1.15rem;
  flex: 0 0 1.15rem;
  color: var(--site-nav-accent);
  text-align: center;
}

#site-navbar .dropdown-item.active i,
#site-navbar .dropdown-item:active i {
  color: inherit;
}

#site-navbar .dropdown-divider {
  margin: .42rem .25rem;
  border-color: var(--site-nav-border);
}

#site-navbar .dropdown-header {
  padding: .55rem .72rem .35rem;
  color: var(--site-nav-muted);
  font-size: .69rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#site-navbar .dropend,
#site-navbar .dropstart {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid transparent;
  border-radius: .62rem;
  transition: border-color .18s ease, background-color .18s ease;
}

#site-navbar .dropend > .dropdown-item,
#site-navbar .dropstart > .dropdown-item {
  width: auto !important;
  min-width: 0;
  flex: 1 1 calc(100% - 2.45rem);
  border-radius: .58rem 0 0 .58rem;
  background: transparent;
}

#site-navbar .dropend > .nav-caret-btn,
#site-navbar .dropstart > .nav-caret-btn {
  width: 2.35rem;
  min-height: 2.65rem;
  flex: 0 0 2.35rem;
  border-left: 1px solid var(--site-nav-border);
  border-radius: 0 .62rem .62rem 0;
}

#site-navbar .dropend:hover,
#site-navbar .dropend:focus-within,
#site-navbar .dropstart:hover,
#site-navbar .dropstart:focus-within {
  border-color: var(--site-nav-border);
  background: var(--site-nav-accent-soft);
}

#site-navbar .dropend:hover > .dropdown-item,
#site-navbar .dropend:focus-within > .dropdown-item,
#site-navbar .dropstart:hover > .dropdown-item,
#site-navbar .dropstart:focus-within > .dropdown-item,
#site-navbar .dropend:hover > .nav-caret-btn,
#site-navbar .dropend:focus-within > .nav-caret-btn,
#site-navbar .dropstart:hover > .nav-caret-btn,
#site-navbar .dropstart:focus-within > .nav-caret-btn {
  background: transparent;
}

#site-navbar .dropend > .dropdown-menu,
#site-navbar .dropstart > .dropdown-menu {
  top: -.48rem;
  margin-top: 0;
}

#site-navbar .dropend > .dropdown-menu {
  left: calc(100% - 1px);
}

#site-navbar .dropstart > .dropdown-menu {
  right: calc(100% - 1px);
  left: auto;
}

#site-navbar .dropend.nav-open > .dropdown-menu,
#site-navbar .dropstart.nav-open > .dropdown-menu {
  display: block;
}

#site-navbar .dropdown-submenu-trigger {
  width: 100%;
  display: flex;
  align-items: center;
}

#site-navbar .dropdown-submenu-trigger .dropdown-item {
  min-width: 0;
  flex: 1 1 auto;
}

#site-navbar .dropdown-submenu-toggle {
  width: 2.45rem;
  min-height: 2.65rem;
  flex: 0 0 2.45rem;
  display: inline-grid;
  place-items: center;
  color: var(--site-nav-muted);
  border: 0;
  border-left: 1px solid var(--site-nav-border);
  border-radius: 0 .62rem .62rem 0;
  background: transparent;
}

#site-navbar .dropdown-submenu-toggle:hover,
#site-navbar .dropdown-submenu-toggle:focus-visible,
#site-navbar .dropdown-submenu-toggle[aria-expanded="true"] {
  color: var(--site-nav-accent);
  background: var(--site-nav-accent-soft);
}

#site-navbar .site-navbar-search {
  min-width: 11rem;
  max-width: 15rem;
  margin-left: auto;
  margin-right: .6rem;
  position: relative;
  display: flex;
  align-items: center;
}

#site-navbar .site-navbar-search-icon {
  position: absolute;
  left: .78rem;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  color: var(--site-nav-muted);
  pointer-events: none;
}

#site-navbar .site-navbar-search .form-control {
  min-width: 0;
  height: 2.55rem;
  padding: .55rem 2.4rem .55rem 2.35rem;
  color: var(--site-nav-text);
  font-size: .85rem;
  border-color: var(--site-nav-border);
  border-radius: .72rem;
  background: var(--site-nav-surface);
  box-shadow: none;
}

#site-navbar .site-navbar-search .form-control::placeholder {
  color: var(--site-nav-muted);
  opacity: .82;
}

#site-navbar .site-navbar-search .form-control:focus {
  border-color: var(--site-nav-accent);
  background: var(--site-nav-bg);
  box-shadow: 0 0 0 .2rem var(--site-nav-accent-soft);
}

#site-navbar .site-navbar-search .btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  position: absolute;
  right: .22rem;
  display: inline-grid;
  place-items: center;
  color: var(--site-nav-accent);
  border: 0;
  border-radius: .55rem;
  background: transparent;
}

#site-navbar .site-navbar-search .btn:hover,
#site-navbar .site-navbar-search .btn:focus-visible {
  color: #fff;
  background: var(--site-nav-accent);
}

#site-navbar .site-navbar-action,
#site-navbar .site-navbar-user-toggle,
#site-navbar .site-navbar-login {
  padding: .55rem .7rem;
  border-color: var(--site-nav-border);
  background: var(--site-nav-surface);
}

#site-navbar .site-navbar-cart {
  position: relative;
  margin-left: .7rem;
  margin-right: .55rem;
}

#site-navbar .site-navbar-cart .badge {
  min-width: 1.28rem;
  height: 1.28rem;
  padding: .15rem .3rem;
  display: inline-grid;
  place-items: center;
  font-size: .67rem;
  border: 2px solid var(--site-nav-bg);
}

#site-navbar .site-navbar-user {
  min-width: 0;
}

#site-navbar .site-navbar-user-toggle {
  max-width: 12rem;
  gap: .55rem;
}

#site-navbar .site-navbar-user-toggle::after {
  width: .48rem;
  height: .48rem;
  margin: -.2rem .12rem 0 .1rem;
  flex: 0 0 .48rem;
  border: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease, margin .2s ease;
}

#site-navbar .site-navbar-user-toggle[aria-expanded="true"]::after {
  margin-top: .2rem;
  transform: rotate(225deg);
}

#site-navbar .site-navbar-user-avatar {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  display: inline-grid;
  place-items: center;
  color: var(--site-nav-accent-strong);
  border-radius: .55rem;
  background: var(--site-nav-accent-soft);
}

#site-navbar .site-navbar-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#site-navbar .site-navbar-user > .dropdown-menu {
  width: min(20rem, calc(100vw - 1.5rem));
  max-height: min(34rem, calc(100dvh - 6rem));
  padding-right: .35rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--site-nav-muted) 42%, transparent) transparent;
  scrollbar-gutter: stable;
}

#site-navbar .site-navbar-user > .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

#site-navbar .site-navbar-user > .dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

#site-navbar .site-navbar-user > .dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--site-nav-muted) 38%, transparent);
}

#site-navbar .site-navbar-user > .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--site-nav-accent) 62%, transparent);
}

/* The user-menu dropdown's per-item icon deliberately reuses the same
   .choice-icon/.choice-icon-outline "circular badge" look already
   established by the admin choice-card system (content_blocks/
   block_modal_custom.css) - a matching, correctly-scoped copy here, not a
   reference to that file (this codebase's own accepted precedent for
   small, cross-surface-shared visual rules - see e.g. shared/
   template_badge.css's own writeup for why a shared JS-imported copy would
   risk a worse bug class than duplicating a few lines of CSS).
   Confirmed live this class was previously UNSTYLED here: nothing in this
   file defined it, so the badge look only ever appeared by accident, when
   an admin viewing a builder-type page happened to also have
   block_modal_custom.css loaded (linked unconditionally by
   _builder_content.html whenever CanEditPage is true) - every other page
   type rendered a bare, unstyled icon glyph instead, ~15px shorter per
   menu item. Both that CSS's OWN .choice-icon* selectors were bare/
   unscoped at the time (a real leak risk independent of this fix) and
   _primary_navigation.html's own markup had a naming mismatch
   ("icon-outline" instead of "choice-icon-outline") that meant even the
   accidental match never picked up the outline background/border - see
   both of those fixes' own commit for the rest of this story. */
#site-navbar .dropdown-item .choice-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
}
#site-navbar .dropdown-item .choice-icon-outline {
  background: var(--bs-body-bg);
  border: 1.5px solid var(--bs-border-color);
  color: var(--bs-secondary);
}

#site-navbar .site-navbar-login {
  min-height: 0;
  padding: 0;
  display: block;
  color: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#site-navbar .site-navbar-login:hover,
#site-navbar .site-navbar-login:focus-visible {
  color: inherit;
  border-color: transparent;
  background: transparent;
  transform: none;
}

#site-navbar .site-navbar-login > a {
  min-height: 2.55rem;
  padding: .45rem .7rem .45rem .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--site-nav-text);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--site-nav-border);
  border-radius: .72rem;
  background: var(--site-nav-surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
  transition:
    color .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

#site-navbar .site-navbar-login > a i {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  display: inline-grid;
  place-items: center;
  color: var(--site-nav-accent-strong);
  font-size: .92rem;
  border-radius: .52rem;
  background: var(--site-nav-accent-soft);
}

#site-navbar .site-navbar-login > a:hover,
#site-navbar .site-navbar-login > a:focus-visible {
  color: var(--site-nav-accent-strong);
  border-color: var(--site-nav-border-strong);
  background: var(--site-nav-surface-strong);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent),
    0 .45rem 1rem color-mix(in srgb, var(--site-nav-accent) 12%, transparent);
  transform: translateY(-1px);
}

#site-navbar a:focus-visible,
#site-navbar button:focus-visible,
#site-navbar input:focus-visible {
  outline: 2px solid var(--site-nav-accent);
  outline-offset: 2px;
}

@media (hover: hover) and (min-width: 1400px) {
  #site-navbar .nav-link:hover,
  #site-navbar .site-navbar-action:hover,
  #site-navbar .site-navbar-login:hover {
    transform: translateY(-1px);
  }

  #site-navbar .dropend:hover > .dropdown-menu,
  #site-navbar .dropstart:hover > .dropdown-menu {
    display: block;
  }
}

@media (max-width: 1399.98px) {
  .site-navigation-header {
    --site-nav-height: 4.5rem;
  }

  #site-navbar {
    min-height: var(--site-nav-height);
    padding-block: .55rem;
  }

  #site-navbar .navbar-toggler {
    display: inline-grid;
  }

  #site-navbar .site-navbar-shell {
    flex-wrap: wrap;
    position: relative;
  }

  #site-navbar .navbar-collapse {
    width: auto;
    max-height: calc(100dvh - var(--site-nav-height) - 1.25rem);
    position: absolute;
    top: calc(100% + .65rem);
    right: 0;
    left: 0;
    padding: .65rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--site-nav-border);
    border-radius: 1rem;
    background: var(--site-nav-bg);
    box-shadow: var(--site-nav-shadow);
  }

  #site-navbar .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  #site-navbar .navbar-collapse.show {
    display: block;
  }

  #site-navbar .navbar-collapse.collapsing {
    display: block;
    height: 0;
    overflow: hidden;
  }

  #site-navbar .site-navbar-primary {
    width: 100%;
    align-items: stretch;
    gap: .12rem;
    margin: 0 0 .55rem !important;
    padding: .2rem;
    border: 1px solid var(--site-nav-border);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--site-nav-surface) 72%, transparent);
  }

  #site-navbar .nav-item,
  #site-navbar .nav-item.dropdown {
    width: 100%;
    flex-wrap: wrap;
  }

  #site-navbar .nav-item.dropdown {
    border-radius: .65rem;
  }

  #site-navbar .nav-link {
    min-height: 2.65rem;
    flex: 1 1 auto;
    justify-content: flex-start;
    padding-inline: .8rem;
    border-radius: .62rem;
  }

  #site-navbar .nav-link.active,
  #site-navbar .nav-link[aria-current="page"],
  #site-navbar .nav-item.is-active > .nav-link,
  #site-navbar .nav-item.active > .nav-link {
    padding-left: 1rem;
    background: var(--site-nav-accent-soft);
  }

  #site-navbar .nav-link.active::after,
  #site-navbar .nav-link[aria-current="page"]::after,
  #site-navbar .nav-item.is-active > .nav-link::after,
  #site-navbar .nav-item.active > .nav-link::after {
    width: 3px;
    height: 1.15rem;
    right: auto;
    bottom: 50%;
    left: .4rem;
    translate: 0 50%;
  }

  #site-navbar .nav-item.dropdown > .nav-caret-btn {
    width: 2.65rem;
    min-height: 2.65rem;
    flex: 0 0 2.65rem;
    border-left: 1px solid var(--site-nav-border);
    border-radius: 0 .6rem .6rem 0;
  }

  #site-navbar .dropdown-menu {
    width: 100%;
    max-width: none;
    margin: .3rem 0 .2rem;
    padding: .38rem;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    border-radius: .75rem;
    background: var(--site-nav-surface);
    box-shadow: none;
  }

  #site-navbar .dropend,
  #site-navbar .dropstart,
  #site-navbar .dropdown-submenu-trigger {
    width: 100%;
    flex-wrap: wrap;
  }

  #site-navbar .dropend > .nav-caret-btn,
  #site-navbar .dropstart > .nav-caret-btn {
    width: 2.65rem;
    flex-basis: 2.65rem;
  }

  #site-navbar .dropend > .dropdown-item,
  #site-navbar .dropstart > .dropdown-item {
    width: auto !important;
    flex-basis: calc(100% - 2.65rem);
  }

  #site-navbar .dropend > .dropdown-menu,
  #site-navbar .dropstart > .dropdown-menu {
    flex-basis: 100%;
    width: calc(100% - .75rem);
    margin: .25rem 0 .25rem .75rem;
    border-left: 2px solid var(--site-nav-border-strong);
  }

  #site-navbar .dropdown-submenu-toggle {
    min-height: 2.75rem;
  }

  #site-navbar .site-navbar-search {
    width: 100%;
    max-width: none;
    margin: 0 0 .45rem;
  }

  #site-navbar .site-navbar-search .form-control {
    height: 2.85rem;
  }

  #site-navbar .site-navbar-action,
  #site-navbar .site-navbar-user-toggle,
  #site-navbar .site-navbar-login {
    width: 100%;
    max-width: none;
    min-height: 2.85rem;
    justify-content: flex-start;
  }

  #site-navbar .site-navbar-cart {
    margin: 0 0 .45rem;
  }

  #site-navbar .site-navbar-cart,
  #site-navbar .site-navbar-user-toggle,
  #site-navbar .site-navbar-login {
    padding-inline: .8rem;
    border-color: var(--site-nav-border);
    background: var(--site-nav-surface);
  }

  #site-navbar .site-navbar-user {
    width: 100%;
  }

  #site-navbar .site-navbar-login {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #site-navbar .site-navbar-login > a {
    width: 100%;
    min-height: 2.85rem;
    justify-content: flex-start;
    padding: .5rem .65rem;
  }

  #site-navbar .site-navbar-user > .dropdown-menu {
    width: 100%;
    max-height: none;
  }
}

@media (max-width: 575.98px) {
  #site-navbar {
    padding-inline: .55rem;
  }

  #site-navbar .navbar-brand {
    max-width: calc(100% - 3.5rem);
  }

  #site-navbar .site-navbar-brand-mark {
    width: 2.4rem;
    height: 2.4rem;
    flex-basis: 2.4rem;
    border-radius: .72rem;
  }

  #site-navbar .site-navbar-brand-copy small {
    display: none;
  }

  #site-navbar .navbar-collapse {
    right: -.05rem;
    left: -.05rem;
    padding: .55rem;
    border-radius: .85rem;
  }

  #site-navbar .dropdown-item {
    white-space: normal;
  }

  #site-navbar .site-navbar-user-name {
    max-width: calc(100vw - 8rem);
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]) #site-navbar {
    --site-nav-bg: rgba(10, 16, 25, .94);
    --site-nav-surface: #121b28;
    --site-nav-surface-strong: #182435;
    --site-nav-border: rgba(167, 185, 211, .16);
    --site-nav-border-strong: rgba(52, 143, 255, .38);
    --site-nav-text: #f4f7fb;
    --site-nav-muted: #98a6ba;
    --site-nav-accent: #348fff;
    --site-nav-accent-strong: #67aaff;
    --site-nav-accent-soft: rgba(52, 143, 255, .15);
    --site-nav-danger: #ff6b78;
    --site-nav-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .36);
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-navbar *,
  #site-navbar *::before,
  #site-navbar *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   Nav & Footer Appearance (docs/NAV_FOOTER_APPEARANCE_PLAN.md)

   NavBackgroundColor/NavTextColor need no CSS here at all - they're
   applied as an inline style="--site-nav-bg: ...; --site-nav-text: ...;"
   directly on #site-navbar (_primary_navigation.html), and every rule
   above already reads var(--site-nav-bg)/var(--site-nav-text) - an inline
   style on the same element beats any stylesheet rule for the same
   custom property, so the override just works with zero new selectors.
   ============================================================ */

/* NavBackgroundMode="transparent_on_top": starts transparent/overlaid at
   the very top of the page, gains the normal solid background once
   primary_navigation.js's scroll listener adds .site-navbar-scrolled.
   #site-navbar's own background is already transparent by default (the
   real paint - color + blur - lives on ::before, see its own comment
   above), so clearing background here alone is a no-op; the ::before
   layer must be cleared too or its opaque background/backdrop-filter
   keeps painting regardless of this rule (a real, live-caught regression
   from moving the glass effect onto ::before - confirmed live, the nav
   stayed fully opaque at the top of the page with this mode selected). */
#site-navbar[data-nav-bg-mode="transparent_on_top"]:not(.site-navbar-scrolled) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#site-navbar[data-nav-bg-mode="transparent_on_top"]:not(.site-navbar-scrolled)::before {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* NavLogoPlacement="center": a two-tier header - the brand takes its own
   full-width, centered row; the toggler moves to the far right of that
   same row; the collapse/offcanvas content becomes a second, centered
   row below it. CSS-only (no template branching) so the existing single-
   row markup/collapse mechanics are completely unaffected either way. */
#site-navbar[data-logo-placement="center"] .site-navbar-shell {
  flex-wrap: wrap;
  justify-content: center;
}

#site-navbar[data-logo-placement="center"] .navbar-brand {
  order: 1;
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 .5rem;
}

#site-navbar[data-logo-placement="center"] .navbar-toggler {
  order: 2;
}

#site-navbar[data-logo-placement="center"] .navbar-collapse,
#site-navbar[data-logo-placement="center"] .offcanvas {
  order: 3;
}

@media (min-width: 1400px) {
  #site-navbar[data-logo-placement="center"] .navbar-collapse {
    flex: 0 0 100%;
    justify-content: center;
  }

  #site-navbar[data-logo-placement="center"] .site-navbar-primary {
    justify-content: center;
  }
}

/* Mega-menu: a top-level item's children render as a wide, full-bleed
   multi-card panel instead of the plain nested flyout list. Structural
   layout patterns below (full-width panel, rounded-bottom "sheet" shape,
   larger square thumbnails, sibling-dimming, the +/x toggle) were adapted
   from huts.com's own mega menu at the user's request (2026-09-25/26) -
   deliberately structural/interaction patterns only, not their specific
   typography or color choices, which stay driven by this site's own
   Theme Settings / Nav & Footer Appearance config (--site-nav-* tokens)
   like every other rule in this file. No admin-configurable column count
   - CSS auto-flow handles it based on child count and viewport width. */

/* The panel positions itself relative to #site-navbar (edge-to-edge, full
   navbar width) rather than the trigger button Bootstrap's Popper would
   otherwise anchor it to - this needs the immediate <li> neutralized back
   to position:static so #site-navbar (not the <li>, which Bootstrap's own
   .dropdown rule already makes position:relative) is the nearest
   positioned ancestor an absolutely-positioned child resolves against.
   :has() is what lets this be scoped to ONLY a mega-menu's own <li>,
   leaving every plain/simple dropdown's existing position:relative (and
   therefore its own anchored-flyout behavior) completely untouched. */
#site-navbar .nav-item.dropdown:has(> .dropdown-menu-mega) {
  position: static;
}

#site-navbar .dropdown-menu-mega {
  /* !important on every positioning property here defeats Bootstrap's
     Popper, which sets position/inset/transform as an INLINE style on
     this exact element - a plain (non-!important) rule can never win
     against that regardless of selector specificity. This is the same
     technique (and the same reason for it) as the position:static
     override already used below for the <1400px stacked case. */
  position: absolute !important;
  inset: auto !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0 !important;
  width: 100%;
  min-width: 0;
  max-width: none;
  border: 0;
  border-top: 1px solid var(--site-nav-border);
  border-radius: 0 0 1.5rem 1.5rem;
  background: var(--site-nav-surface-strong);
  box-shadow: var(--site-nav-shadow);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem 2.5rem;
  padding: 2.5rem clamp(1.5rem, 5vw, 4rem) 3rem;
}

/* display:grid deliberately lives ONLY here, scoped to .show, not on the
   base .dropdown-menu-mega rule above - a real, live-caught bug: Bootstrap's
   own .dropdown-menu is display:none by default, only becoming
   display:block via its own .show-scoped rule (its JS toggles .show on
   open/close). #site-navbar .dropdown-menu-mega (ID+class, 1,1,0) has
   higher specificity than Bootstrap's own bare .dropdown-menu (0,1,0), so
   a plain "display: grid" on that base selector unconditionally overrode
   Bootstrap's hide/show toggle entirely - confirmed live via
   getComputedStyle (display:grid, visibility:visible) BEFORE ever
   clicking the dropdown's own toggle button, with the panel's own
   negatively-offset default position overlapping and intercepting clicks
   on the toggle button itself, making the mega-menu impossible to
   interact with via mouse/keyboard at all. */
#site-navbar .dropdown-menu-mega.show {
  display: grid;
}

/* While any mega panel is open, dim every OTHER top-level nav item (both
   plain links and other dropdown triggers) so the open panel reads as the
   clear focus - matches huts.com's own effect. Pure CSS via :has(), no JS
   listener on Bootstrap's shown/hidden.bs.dropdown events needed. */
#site-navbar:has(.dropdown-menu-mega.show) .site-navbar-primary > .nav-item:not(:has(.dropdown-menu-mega.show)) > .nav-link,
#site-navbar:has(.dropdown-menu-mega.show) .site-navbar-primary > .nav-item:not(:has(.dropdown-menu-mega.show)) > .nav-caret-btn {
  opacity: .45;
  transition: opacity .2s ease;
}

/* A mega-menu trigger swaps its chevron for a rotating "x" while open,
   instead of the plain rotate-180 the chevron already does for a simple
   dropdown (left untouched below) - a clearer "this closes the panel"
   affordance for the more prominent full-bleed panel specifically. */
#site-navbar .nav-item.dropdown:has(> .dropdown-menu-mega) > .nav-caret-btn {
  position: relative;
}

#site-navbar .nav-item.dropdown:has(> .dropdown-menu-mega) > .nav-caret-btn[aria-expanded="true"] i {
  opacity: 0;
}

#site-navbar:not([data-caret-style="plus"]) .nav-item.dropdown:has(> .dropdown-menu-mega) > .nav-caret-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .2s ease;
}

#site-navbar:not([data-caret-style="plus"]) .nav-item.dropdown:has(> .dropdown-menu-mega) > .nav-caret-btn[aria-expanded="true"]::after {
  content: "\00d7";
  display: flex;
  transform: rotate(90deg);
}

/* Caret icon style: chevron (default, handled above per-context - see
   the mega-menu x-swap immediately above, both rules deliberately scoped
   :not([data-caret-style="plus"]) so they yield to this block, and the
   base rotate-180/rotate-90 rules elsewhere in this file for plain/
   nested carets, which are harmless to leave firing since the icon
   itself is hidden below regardless of rotation) vs plus. Selected via
   Nav & Footer Appearance (NavCaretStyle) - "plus" applies UNIFORMLY
   across every caret type (plain top-level, mega top-level, nested
   dropend/dropstart), replacing all of the chevron-specific machinery
   with one flat +/- pair. Deliberately plain-text glyphs, not a rotated
   icon - orientation-agnostic, so a nested flyout's sideways expand
   reads the same as a top-level down expand, and (unlike the mega
   x-swap's absolute-overlay technique, built only for the floating
   desktop panel) this works identically on mobile too, so no separate
   mobile override block is needed for this style. */
#site-navbar[data-caret-style="plus"] .nav-caret-btn i {
  display: none;
}

#site-navbar[data-caret-style="plus"] .nav-caret-btn {
  position: relative;
}

#site-navbar[data-caret-style="plus"] .nav-caret-btn::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

#site-navbar[data-caret-style="plus"] .nav-caret-btn[aria-expanded="true"]::after {
  content: "\2212";
}

#site-navbar .mega-menu-card {
  padding: 0;
}

#site-navbar .mega-menu-card-link {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0;
  border-radius: .5rem;
  color: inherit;
  text-decoration: none;
}

#site-navbar .mega-menu-card-link:hover .mega-menu-card-title {
  color: var(--site-nav-accent);
}

#site-navbar .mega-menu-card-link:hover .mega-menu-card-icon,
#site-navbar .mega-menu-card-link:hover .mega-menu-card-image {
  transform: scale(1.03);
}

/* Icon and image both render as a consistent square thumbnail (icon on a
   filled tile, image cropped to fill) so a mix of icon-only and
   image-only cards in the same panel still reads as one uniform grid -
   matches huts.com's own consistent-thumbnail-size treatment regardless
   of whether a given card uses an illustration or a real photo. */
#site-navbar .mega-menu-card-icon,
#site-navbar .mega-menu-card-image {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border-radius: 1rem;
  transition: transform .2s ease;
}

#site-navbar .mega-menu-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  color: var(--site-nav-accent);
  background: var(--site-nav-accent-soft);
}

#site-navbar .mega-menu-card-image {
  object-fit: cover;
}

#site-navbar .mega-menu-card-title {
  font-weight: 600;
  font-size: 1.02rem;
  transition: color .18s ease;
}

#site-navbar .mega-menu-card-desc {
  font-size: .86rem;
  line-height: 1.45;
  color: var(--site-nav-muted);
}

#site-navbar .mega-menu-card-sublist {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
}

#site-navbar .mega-menu-card-sublink {
  display: block;
  padding: .2rem 0;
  font-size: .88rem;
  color: var(--site-nav-muted);
  text-decoration: none;
  border-radius: .35rem;
}

#site-navbar .mega-menu-card-sublink:hover {
  color: var(--site-nav-accent);
}

@media (max-width: 1399.98px) {
  /* Mega-menu inside the mobile collapsed panel just stacks as a single
     column - the same "position:static, no floating panel" treatment
     the existing mobile dropdown CSS already applies to a plain
     .dropdown-menu at this breakpoint. The full-bleed "sheet" look
     (rounded corners, shadow, generous padding) only makes sense as a
     floating panel breaking out of the navbar - inline in the collapsed
     column it would just look like an oversized, oddly-inset box, so
     this resets those properties back down to plain, compact spacing. */
  #site-navbar .dropdown-menu-mega {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    min-width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    gap: .75rem;
    padding: .5rem .25rem;
  }
  /* Same bug as the base rule above, same fix - display must stay scoped
     to .show or it overrides Bootstrap's own hide/show toggle at every
     viewport this media query applies to as well. */
  #site-navbar .dropdown-menu-mega.show {
    display: block;
  }
  /* Sibling-dimming and the x-swap toggle are both desktop-only touches
     for the floating panel's own visual prominence - suppressed here so
     a mobile visitor never sees other nav items fade while just scrolling
     through an inline-expanded section, and the caret stays a plain
     rotating chevron like every other mobile dropdown. Both x-swap rules
     stay scoped :not([data-caret-style="plus"]) - under plus style, the
     desktop-defined plus/minus block above already applies identically
     on mobile with no override needed here at all, see its own comment. */
  #site-navbar:has(.dropdown-menu-mega.show) .site-navbar-primary > .nav-item:not(:has(.dropdown-menu-mega.show)) > .nav-link,
  #site-navbar:has(.dropdown-menu-mega.show) .site-navbar-primary > .nav-item:not(:has(.dropdown-menu-mega.show)) > .nav-caret-btn {
    opacity: 1;
  }
  #site-navbar:not([data-caret-style="plus"]) .nav-item.dropdown:has(> .dropdown-menu-mega) > .nav-caret-btn[aria-expanded="true"] i {
    opacity: 1;
  }
  #site-navbar:not([data-caret-style="plus"]) .nav-item.dropdown:has(> .dropdown-menu-mega) > .nav-caret-btn[aria-expanded="true"]::after {
    display: none;
  }
}