/* bi_navbar - mobile-first navigation menu */

/*
 * Themable through custom properties: this file only reads them, each with
 * its default as fallback, and never declares them. A theme declares the ones
 * it needs on `.bi-navbar` (and `.bi-drawer`, moved under <body>), from any
 * cascade layer: being unlayered, these rules would win over a layered
 * theme's own rules, but not over its custom properties.
 *
 * Bar and panels:
 *   --bi-navbar-bg                    submenu background (#fff)
 *   --bi-navbar-muted                 subtitles (rgba(0, 0, 0, 0.55))
 *   --bi-navbar-border                hover of the "More" links (rgba(0, 0, 0, 0.08))
 *   --bi-navbar-radius                submenus, highlights (4px)
 *   --bi-navbar-burger-bar-width      burger bars (24px)
 *   --bi-navbar-burger-bar-height     (2px)
 *   --bi-navbar-burger-display        burger from 768px (none)
 *   --bi-navbar-bar-display           bar from 768px (flex)
 *   --bi-navbar-item-padding          top-level entries (0 0.5rem)
 *   --bi-navbar-link-flex             links (1 1 auto)
 *   --bi-navbar-link-padding          links (0.75rem 0.25rem)
 *   --bi-navbar-current-weight        current entry (700)
 *   --bi-navbar-toggle-width          sub-menu toggle (40px)
 *   --bi-navbar-toggle-height         (40px)
 *   --bi-navbar-chevron-size          its chevron (8px)
 *   --bi-navbar-chevron-thickness     (2px)
 *   --bi-navbar-submenu-shadow        (0 8px 16px rgba(0, 0, 0, 0.15))
 *   --bi-navbar-mega-max-width        mega-menu content (1320px)
 *   --bi-navbar-mega-padding          (1.5rem)
 *   --bi-navbar-mega-gap              grid gap (1.5rem 2rem)
 *   --bi-navbar-mega-link-padding     links of the columns (0.25rem 0)
 *   --bi-navbar-col-title-weight      column titles (700)
 *   --bi-navbar-col-title-gap         space under them (0.5rem)
 * Highlights (mega-menu and drawer):
 *   --bi-navbar-highlight-bg          without picture (rgba(0, 0, 0, 0.08))
 *   --bi-navbar-highlight-min-height  (180px; 160px in the drawer)
 *   --bi-navbar-highlight-overlay-bg  text box (rgba(255, 255, 255, 0.92))
 *   --bi-navbar-highlight-overlay-text (#1a1a1a)
 *   --bi-navbar-highlight-box-inset   (0.75rem)
 *   --bi-navbar-highlight-box-max-width (260px)
 *   --bi-navbar-highlight-box-padding (0.75rem 1rem; 0.625rem 0.875rem)
 *   --bi-navbar-highlight-text-weight (600)
 *   --bi-navbar-highlight-cta-weight  (700)
 *   --bi-navbar-highlight-cta-decoration (underline)
 *   --bi-navbar-highlight-cta-arrow   (\2192)
 * Drawer (colours, radius and type come from the --bs-* properties):
 *   --bi-drawer-backdrop, --bi-drawer-width
 *   --bi-drawer-mobile-display        manual menu's drawer from 768px (none)
 *   --bi-drawer-title-font            panel titles (inherit)
 *   --bi-drawer-title-size            (1.125rem)
 *   --bi-drawer-title-weight          (600)
 *   --bi-drawer-icon-btn-radius       back/close buttons (50%)
 *   --bi-drawer-row-weight            entries (500)
 */
.bi-navbar {
  width: 100%;
}

.bi-navbar__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.bi-navbar__burger-bar {
  display: block;
  width: var(--bi-navbar-burger-bar-width, 24px);
  height: var(--bi-navbar-burger-bar-height, 2px);
  background-color: currentColor;
}

.bi-navbar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile: the bar gives way to the burger, which opens the drawer (see the
   automatic mode below). */
.bi-navbar__list--depth-0 {
  display: none;
}

.bi-navbar__item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.bi-navbar__row {
  display: flex;
  align-items: center;
}

.bi-navbar__link,
.bi-navbar__link--group {
  display: flex;
  flex: var(--bi-navbar-link-flex, 1 1 auto);
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--bi-navbar-link-padding, 0.75rem 0.25rem);
  color: inherit;
  text-decoration: none;
}

.bi-navbar__link--group {
  cursor: default;
}

.bi-navbar__subtitle {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bi-navbar-muted, rgba(0, 0, 0, 0.55));
}

.bi-navbar__subtitle::after {
  content: '\203A';
  margin-inline-start: 0.35em;
  opacity: 0.6;
}

.bi-navbar__item--current > .bi-navbar__row > .bi-navbar__link,
.bi-navbar__item--has-current-child > .bi-navbar__row > .bi-navbar__link,
.bi-navbar__item--more:has(.bi-navbar__more-item:not([hidden]) [aria-current]) > .bi-navbar__row > .bi-navbar__link {
  font-weight: var(--bi-navbar-current-weight, 700);
}

.bi-navbar__toggle {
  flex: 0 0 auto;
  width: var(--bi-navbar-toggle-width, 40px);
  height: var(--bi-navbar-toggle-height, 40px);
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.bi-navbar__toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bi-navbar-chevron-size, 8px);
  height: var(--bi-navbar-chevron-size, 8px);
  border-right: var(--bi-navbar-chevron-thickness, 2px) solid currentColor;
  border-bottom: var(--bi-navbar-chevron-thickness, 2px) solid currentColor;
  transform: translate(-50%, -65%) rotate(45deg);
  transition: transform 0.2s ease;
}

.bi-navbar__item--open > .bi-navbar__row > .bi-navbar__toggle::before {
  transform: translate(-50%, -35%) rotate(-135deg);
}

.bi-navbar__mega {
  padding: 1rem 0;
}

/* Highlight block: an image with an overlay text/CTA box, used as a mega-menu
   "column" instead of a text list. Purely decorative background image, so no
   alt text is needed on the <a> itself; the overlay text carries the meaning. */
.bi-navbar__mega-highlight {
  position: relative;
  display: block;
  min-height: var(--bi-navbar-highlight-min-height, 180px);
  border-radius: var(--bi-navbar-radius, 4px);
  background-color: var(--bi-navbar-highlight-bg, rgba(0, 0, 0, 0.08));
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: background-size 0.3s ease;
}

.bi-navbar__mega-highlight:hover,
.bi-navbar__mega-highlight:focus-visible {
  background-size: 108%;
}

.bi-navbar__mega-highlight-box {
  position: absolute;
  left: var(--bi-navbar-highlight-box-inset, 0.75rem);
  right: var(--bi-navbar-highlight-box-inset, 0.75rem);
  bottom: var(--bi-navbar-highlight-box-inset, 0.75rem);
  max-width: var(--bi-navbar-highlight-box-max-width, 260px);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--bi-navbar-highlight-box-padding, 0.75rem 1rem);
  background-color: var(--bi-navbar-highlight-overlay-bg, rgba(255, 255, 255, 0.92));
  color: var(--bi-navbar-highlight-overlay-text, #1a1a1a);
  border-radius: max(0px, calc(var(--bi-navbar-radius, 4px) - 1px));
  font-size: 0.85rem;
  line-height: 1.3;
}

.bi-navbar__mega-highlight-text {
  font-weight: var(--bi-navbar-highlight-text-weight, 600);
}

.bi-navbar__mega-highlight-cta {
  font-weight: var(--bi-navbar-highlight-cta-weight, 700);
  text-decoration: var(--bi-navbar-highlight-cta-decoration, underline);
}

.bi-navbar__mega-highlight-cta::after {
  content: var(--bi-navbar-highlight-cta-arrow, '\2192');
  display: inline-block;
  margin-inline-start: 0.35em;
  text-decoration: none;
}

/* Desktop */
@media (min-width: 768px) {
  .bi-navbar__burger {
    display: var(--bi-navbar-burger-display, none);
  }

  .bi-navbar__list--depth-0 {
    display: var(--bi-navbar-bar-display, flex);
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Once the "More" item is displayed, the theme handles the overflow by
     moving the last links in there: the bar must then stay on one line. */
  .bi-navbar__list--depth-0:has(> .bi-navbar__item--more:not([hidden])) {
    flex-wrap: nowrap;
  }

  .bi-navbar__list--depth-0:has(> .bi-navbar__item--more:not([hidden])) > .bi-navbar__item {
    flex-shrink: 0;
  }

  .bi-navbar__list--depth-0:has(> .bi-navbar__item--more:not([hidden])) > .bi-navbar__item > .bi-navbar__row {
    white-space: nowrap;
  }

  .bi-navbar__list--depth-0 > .bi-navbar__item {
    position: relative;
    border-top: 0;
  }

  /* Mega-menu items opt out of the relative-positioned anchor above: their
     submenu positions itself against the nearest positioned ancestor further
     up the page (typically the sticky <header>) so it can span edge to edge
     instead of being confined to the width of the trigger link. */
  .bi-navbar__list--depth-0 > .bi-navbar__item--mega {
    position: static;
  }

  .bi-navbar__list--depth-0 > .bi-navbar__item > .bi-navbar__row {
    padding: var(--bi-navbar-item-padding, 0 0.5rem);
  }

  /* Fade + slide flyout, out of flow (position: absolute) so it doesn't push
     content around while it animates. */
  .bi-navbar__submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    padding: 0.5rem 0;
    background-color: var(--bi-navbar-bg, #fff);
    box-shadow: var(--bi-navbar-submenu-shadow, 0 8px 16px rgba(0, 0, 0, 0.15));
    border-radius: var(--bi-navbar-radius, 4px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .bi-navbar__list--depth-0 > .bi-navbar__item > .bi-navbar__submenu {
    padding-left: 0;
  }

  /* Depth-0 items open on hover/focus; any depth also opens via its toggle
     button (.bi-navbar__item--open), which is how depth >= 1 flyouts work
     since they aren't hover-triggered. */
  .bi-navbar__list--depth-0 > .bi-navbar__item:hover > .bi-navbar__submenu,
  .bi-navbar__list--depth-0 > .bi-navbar__item:focus-within > .bi-navbar__submenu,
  .bi-navbar__item--open > .bi-navbar__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }

  .bi-navbar__item .bi-navbar__item .bi-navbar__submenu {
    top: 0;
    left: 100%;
  }

  /* Mega-menu: full-width submenu (edge to edge under the header) instead of
     a small flyout list. Anchored to the nearest positioned ancestor, which
     .bi-navbar__item--mega deliberately isn't (see above) so this reaches all
     the way up to the page's own full-width header. */
  .bi-navbar__submenu--mega {
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    border-radius: 0;
  }

  .bi-navbar__mega-container {
    max-width: var(--bi-navbar-mega-max-width, 1320px);
    margin-inline: auto;
    padding: var(--bi-navbar-mega-padding, 1.5rem);
  }

  /* Own grid system (not the shop theme's), so it keeps working on any theme,
     with or without Bootstrap. Each cell sets --bi-navbar-col-span (out of 12). */
  .bi-navbar__mega {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: var(--bi-navbar-mega-gap, 1.5rem 2rem);
  }

  .bi-navbar__mega-col,
  .bi-navbar__mega-highlight {
    grid-column: span var(--bi-navbar-col-span, 3);
  }

  .bi-navbar__mega-highlight {
    grid-row: span 2;
  }

  .bi-navbar__mega-col {
    position: relative;
  }

  .bi-navbar__mega-col-title {
    display: block;
    margin-bottom: var(--bi-navbar-col-title-gap, 0.5rem);
    font-weight: var(--bi-navbar-col-title-weight, 700);
  }

  .bi-navbar__mega-col-title .bi-navbar__link {
    display: block;
    padding: 0;
  }

  .bi-navbar__mega .bi-navbar__list {
    display: flex;
    flex-direction: column;
  }

  .bi-navbar__mega .bi-navbar__item {
    border-top: 0;
  }

  .bi-navbar__mega > .bi-navbar__row,
  .bi-navbar__mega .bi-navbar__row {
    padding: 0;
  }

  .bi-navbar__mega .bi-navbar__link {
    padding: var(--bi-navbar-mega-link-padding, 0.25rem 0);
  }

  /* "More" item: the links the bar has no room for, as a plain dropdown. It
     is the last item, so it opens leftwards to stay inside the page. */
  .bi-navbar__submenu--more {
    left: auto;
    right: 0;
    min-width: 240px;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
  }

  .bi-navbar__more-list,
  .bi-navbar__more-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .bi-navbar__more-item > .bi-navbar__link {
    padding: 0.5rem 1rem;
    font-weight: 600;
  }

  .bi-navbar__more-sublist {
    padding-bottom: 0.35rem;
  }

  .bi-navbar__more-sublist .bi-navbar__link {
    padding: 0.2rem 1rem 0.2rem 1.75rem;
    font-size: 0.875rem;
  }

  .bi-navbar__more-item .bi-navbar__link:hover,
  .bi-navbar__more-item .bi-navbar__link:focus-visible {
    background-color: var(--bi-navbar-border, rgba(0, 0, 0, 0.08));
  }
}

/* ---------------------------------------------------------------------------
   Automatic mode: "Menu" button + quick links, and the drawer the button opens
   (also opened by the burger of the manual mode, on mobile)

   Colors, radius and type come from the theme's Bootstrap custom properties
   (--bs-*), so the drawer follows the shop's look, dark mode included. The
   drawer is moved under <body> by the script, out of .bi-navbar: its own
   --bi-drawer-* properties are read with a fallback and can be redeclared
   on :root to re-skin it.
   ------------------------------------------------------------------------- */

.bi-navbar--drawer {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bi-navbar__menu-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  padding: 0 0.625rem;
  color: inherit;
  font: inherit;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: var(--bs-border-radius, 0.5rem);
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.bi-navbar__menu-btn:hover,
.bi-navbar__menu-btn:focus-visible {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.bi-navbar__menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bi-navbar__menu-icon > span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
}

.bi-navbar__menu-icon > span:last-child {
  width: 14px;
}

/* Mobile: the icon alone, like the classic burger; the label stays for
   screen readers. */
@media (max-width: 767.98px) {
  .bi-navbar__menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (min-width: 768px) {
  /* Short thin separator between the button and the quick links. */
  .bi-navbar__menu-btn + .bi-navbar__quick {
    position: relative;
    padding-left: 0.75rem;
    margin-left: 0.25rem;
  }

  .bi-navbar__menu-btn + .bi-navbar__quick::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    height: 1.25rem;
    border-left: 1px solid var(--bs-border-color, #dee2e6);
    transform: translateY(-50%);
  }

  .bi-navbar__quick > .bi-navbar__item > .bi-navbar__row {
    white-space: nowrap;
  }

  .bi-navbar__quick .bi-navbar__link {
    font-weight: 500;
  }
}

html.bi-drawer-locked,
html.bi-drawer-locked body {
  overflow: hidden;
}

.bi-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  transition: visibility 0s linear 0.35s;
}

.bi-drawer--open {
  visibility: visible;
  transition: none;
}

.bi-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--bi-drawer-backdrop, rgba(0, 0, 0, 0.4));
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bi-drawer--open .bi-drawer__backdrop {
  opacity: 1;
}

.bi-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(var(--bi-drawer-width, 400px), calc(100vw - 3rem));
  overflow: hidden;
  color: var(--bs-body-color, #212529);
  background-color: var(--bs-body-bg, #fff);
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.12);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.bi-drawer--open .bi-drawer__panel {
  transform: none;
}

/* Every level is a full-height panel stacked on the others. The active one
   is in place; the others are faded out and nudged aside, to the left for
   the ones leading to it and to the right for the rest, so going forward
   and back move in opposite directions. */
.bi-drawer__view {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--bs-body-bg, #fff);
  opacity: 0;
  visibility: hidden;
  transform: translateX(2rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.bi-drawer__view.is-behind {
  transform: translateX(-2rem);
}

.bi-drawer__view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

.bi-drawer__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 4rem;
  padding: 0 0.75rem 0 1.5rem;
  background-color: inherit;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.bi-drawer__icon-btn--back + .bi-drawer__title {
  margin-left: 0.25rem;
}

.bi-drawer__view:not(#bi-drawer-root) .bi-drawer__head {
  padding-left: 0.75rem;
}

.bi-drawer__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--bi-drawer-title-font, inherit);
  font-size: var(--bi-drawer-title-size, 1.125rem);
  font-weight: var(--bi-drawer-title-weight, 600);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bi-drawer__icon-btn {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--bi-drawer-icon-btn-radius, 50%);
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.bi-drawer__icon-btn:hover,
.bi-drawer__icon-btn:focus-visible {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Cross */
.bi-drawer__icon-btn--close::before,
.bi-drawer__icon-btn--close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background-color: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.bi-drawer__icon-btn--close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Left chevron */
.bi-drawer__icon-btn--back::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-25%, -50%) rotate(45deg);
}

.bi-drawer__body {
  padding: 0.5rem 1.5rem 2rem;
}

.bi-drawer__section {
  margin: 1.25rem 0 0.5rem;
  color: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "See all" link of a category, above its subcategories. */
.bi-drawer__all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.bi-drawer__all:hover,
.bi-drawer__all:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bi-drawer__arrow {
  position: relative;
  width: 14px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 0.15s ease;
}

.bi-drawer__arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.bi-drawer__all:hover .bi-drawer__arrow {
  transform: translateX(3px);
}

.bi-drawer__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bi-drawer__rows > li + li .bi-drawer__row {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.bi-drawer__row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 0;
  color: inherit;
  font: inherit;
  font-weight: var(--bi-drawer-row-weight, 500);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.bi-drawer__row:hover,
.bi-drawer__row:focus-visible {
  color: inherit;
  text-decoration: none;
}

.bi-drawer__row:hover .bi-drawer__row-label,
.bi-drawer__row:focus-visible .bi-drawer__row-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bi-drawer__row--current {
  font-weight: 700;
}

.bi-drawer__thumb {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  border-radius: var(--bs-border-radius, 0.5rem);
}

.bi-drawer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A category without thumbnail keeps its label aligned with the others
   when some rows of its list have one. */
.bi-drawer__rows:has(.bi-drawer__thumb) .bi-drawer__row:not(:has(.bi-drawer__thumb)) {
  padding-left: calc(36px + 0.875rem);
}

.bi-drawer__row-label {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.1rem;
}

.bi-drawer__row-sub {
  color: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  font-size: 0.75rem;
  font-weight: 400;
}

/* Highlight of the manual menu: its visual as a card, under the links of
   its panel. */
.bi-drawer__highlight {
  position: relative;
  display: block;
  min-height: var(--bi-navbar-highlight-min-height, 160px);
  margin-top: 1rem;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background-color: var(--bi-navbar-highlight-bg, var(--bs-tertiary-bg, #f8f9fa));
  background-position: center;
  background-size: cover;
  border-radius: var(--bs-border-radius, 0.5rem);
}

.bi-drawer__highlight:hover,
.bi-drawer__highlight:focus-visible {
  color: inherit;
  text-decoration: none;
}

.bi-drawer__highlight-box {
  position: absolute;
  right: var(--bi-navbar-highlight-box-inset, 0.75rem);
  bottom: var(--bi-navbar-highlight-box-inset, 0.75rem);
  left: var(--bi-navbar-highlight-box-inset, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--bi-navbar-highlight-box-padding, 0.625rem 0.875rem);
  color: var(--bi-navbar-highlight-overlay-text, #1a1a1a);
  font-size: 0.85rem;
  line-height: 1.3;
  background-color: var(--bi-navbar-highlight-overlay-bg, rgba(255, 255, 255, 0.92));
  border-radius: max(0px, calc(var(--bs-border-radius, 0.5rem) - 2px));
}

.bi-drawer__highlight-text {
  font-weight: var(--bi-navbar-highlight-text-weight, 600);
}

.bi-drawer__highlight-cta {
  font-weight: var(--bi-navbar-highlight-cta-weight, 700);
  text-decoration: var(--bi-navbar-highlight-cta-decoration, underline);
}

.bi-drawer__highlight-cta::after {
  content: var(--bi-navbar-highlight-cta-arrow, '\2192');
  display: inline-block;
  margin-inline-start: 0.35em;
  text-decoration: none;
}

/* The manual menu only opens its drawer from the mobile burger. */
@media (min-width: 768px) {
  .bi-drawer--mobile {
    display: var(--bi-drawer-mobile-display, none);
  }
}

.bi-drawer__chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 0.25rem;
  color: var(--bs-secondary-color, rgba(33, 37, 41, 0.75));
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.bi-drawer__row:hover .bi-drawer__chevron {
  transform: translateX(3px) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .bi-navbar__submenu,
  .bi-navbar__toggle::before,
  .bi-navbar__mega-highlight,
  .bi-drawer,
  .bi-drawer__backdrop,
  .bi-drawer__panel,
  .bi-drawer__view {
    transition: none !important;
  }
}