/**
 * DJ Refresh — header (utility bar + primary nav).
 *
 * Two modes, set by chauvetdj_djr_header_mode() (see includes/dj-refresh.php):
 *
 *   .djr-header--overlay  transparent, floats ON TOP of the hero. Used on pages that open
 *                         with a full-bleed image. Fills to a solid background on hover /
 *                         keyboard focus / scroll, so the menu is always readable over
 *                         whatever is behind it — the Focusrite behaviour.
 *
 *   .djr-header--solid    opaque, occupies its own space in the flow. Used on pages with
 *                         no hero behind the header.
 *
 * Because the fill is driven by :hover / :focus-within, it needs no JS. The .is-scrolled
 * class (js/djr-header.js) is the only scripted part, and the header degrades gracefully
 * to the hover behaviour if that script never runs.
 */

.djr-header {
  --djr-header-fill: var(--djr-red); /* brand red header bar (was #111111) */
  --djr-topbar-h: 41px;
  --djr-nav-h: 100px;
  /* The header has its own gutters — narrower than the 80px used by page sections.
     Figma: topbar content starts at x=40, nav content at x=48. */
  --djr-topbar-gutter: 40px;
  --djr-nav-gutter: 48px;

  position: relative;
  z-index: 50;
}

/*
 * Overlay mode. Only the NAV floats over the hero — the utility bar stays in the flow, so
 * the hero begins beneath it (Figma: hero starts at y=41, i.e. exactly under the topbar,
 * and the 100px nav overlaps the top of the hero image).
 */
.djr-header--overlay {
  position: relative;
}

.djr-header--overlay .djr-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

/*
 * Sticky headroom. Once scrolled well past the hero, the header pins to the top of the viewport
 * and slides in on scroll-up / out on scroll-down, so the menu is reachable mid-page without
 * returning to the top. The utility strip is dropped for a compact bar, and the nav (normally
 * floating absolutely over the hero) drops into the flow. JS toggles is-sticky / is-pinned.
 *
 * Only the reveal (is-pinned) transitions — the hide has no transition so the bar can't flash
 * at top:0 before sliding away when it first becomes fixed.
 */
.djr-header.is-sticky {
  position: fixed;
  top: 0;
  /* Locked to the site's 1600px box and centred (margin:auto on a fixed, left/right:0 element),
     so on screens wider than 1600 the pinned bar lines up with the boxed shell instead of
     bleeding to the viewport edges. The transform stays reserved for the slide in/out. */
  left: 0;
  right: 0;
  width: 100%;
  max-width: var(--djr-max, 1600px);
  margin-left: auto;
  margin-right: auto;
  z-index: 100;
  background: var(--djr-header-fill);
  transform: translateY(-100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.djr-header.is-sticky.is-pinned {
  transform: translateY(0);
  transition: transform 0.32s ease;
}

.djr-header.is-sticky .djr-topbar {
  display: none;
}

.djr-header.is-sticky .djr-nav {
  position: static;
}

@media (prefers-reduced-motion: reduce) {
  .djr-header.is-sticky.is-pinned {
    transition: none;
  }
}

/* Header gutters override the shared container's 80px. */
.djr-topbar .djr-container {
  padding-left: var(--djr-topbar-gutter);
  padding-right: var(--djr-topbar-gutter);
}

.djr-nav .djr-container {
  padding-left: var(--djr-nav-gutter);
  padding-right: var(--djr-nav-gutter);
}

/* ---------- Utility bar ---------- */

.djr-topbar {
  background: var(--djr-header-fill);
  color: var(--djr-white);
  font-size: 13px;
  line-height: 1;
}

.djr-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--djr-topbar-h);
  gap: 16px;
}

.djr-topbar__brands {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--djr-white);
  transition: color 0.18s ease;
}

.djr-topbar__brands:hover {
  color: var(--djr-white);
}

.djr-topbar__brands-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
}

.djr-topbar__utils {
  display: flex;
  align-items: center;
  gap: 16px;
}

.djr-topbar__util {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--djr-white);
  font: inherit;
  cursor: pointer;
  transition: color 0.18s ease;
}

.djr-topbar__util:hover {
  color: var(--djr-white);
}

/*
 * Reserve space for the UIkit icons BEFORE their SVGs are injected. uikit-icons.js loads
 * from the CDN and swaps each `[uk-icon]` span (0-width until then) for an ~16-18px SVG; on
 * a cold/slow load that injection reflows the utility bar and nav horizontally — the "jump"
 * on reload. A fixed box sized to the largest icon (world = 20*0.85 ≈ 17px) means the SVG
 * lands inside already-reserved space, so nothing shifts. The brands grid icon and the burger
 * already sit in fixed boxes, so only these inline ones need it.
 */
.djr-topbar__util [uk-icon],
.djr-nav__search [uk-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
}

.djr-topbar__divider {
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, 0.45);
}

/* ---------- House of Brands dropdown + WPML switcher ---------- */

/* NOTE: deliberately NOT position:relative — the brands panel is full-width and must resolve
   against .djr-topbar, not against this trigger (which is only ~140px wide). */
.djr-topbar__brands-wrap {
  display: inline-flex;
  align-items: center;
}

.djr-topbar__lang-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.djr-topbar__brands {
  cursor: pointer;
}

/*
 * House of Brands panel — ported from chauvetprofessional.com / lyntec.com: a FULL-WIDTH
 * black panel dropping out of the utility bar, with four columns separated by vertical
 * rules. Each column is a heading, a short description, then either a button (the parent
 * site) or brand links separated by hairlines.
 *
 * It spans the whole boxed shell rather than sitting under the trigger, so it is positioned
 * against .djr-topbar (full width) instead of the trigger itself.
 */
.djr-topbar {
  position: relative;
}

.djr-brands {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  background: #ffffff;
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  /* Rounded at the bottom — the top meets the utility bar, so it stays square there. */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

  /* Closed by default; revealed on hover / keyboard focus. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/*
 * Reveal on the is-open class (js/djr-header.js — the tap toggle on touch, and Enter/Space/Escape
 * for keyboard) on every device. Deliberately NOT :focus-within: it would fight the toggle — a
 * trigger that keeps focus after a tap-to-close would immediately re-open the panel.
 */
.djr-topbar__brands-wrap.is-open .djr-brands {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*
 * Hover reveal ONLY on devices that actually hover. On touch, a tap emulates a sticky :hover that
 * would keep the panel open even after the tap toggle removes is-open — so the second tap couldn't
 * close it. Gating on (hover: hover) leaves touch entirely to the is-open toggle.
 */
@media (hover: hover) {
  .djr-topbar__brands-wrap:hover .djr-brands,
  .djr-brands:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.djr-brands__inner {
  display: flex;
  align-items: stretch;
  padding-top: 36px;
  padding-bottom: 36px;
  background: #ffffff;
  color: var(--djr-ink);
}

.djr-brands__col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 40px;
  border-left: 1px solid #e5e5e5;
}

.djr-brands__col:first-child {
  padding-left: 0;
  border-left: 0;
}

.djr-brands__title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--djr-ink);
}

/*
 * On the sub-brand columns the title is a <button> so it can toggle the accordion on mobile.
 * On desktop it must read as the plain heading: reset the button chrome, inherit the type, and
 * hide the chevron (columns are always expanded there).
 */
.djr-brands__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

.djr-brands__chevron {
  display: none;
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid #555555;
  border-bottom: 2px solid #555555;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.djr-brands__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
}

/* Brand links, each underscored by a hairline. */
.djr-brands__list {
  margin-top: 20px;
}

.djr-brands__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #e5e5e5;
  color: var(--djr-ink);
  font-size: 15px;
  font-weight: 700;
  transition: color 0.15s ease;
}

.djr-brands__list li:first-child .djr-brands__link {
  border-top: 1px solid #e5e5e5;
}

.djr-brands__link:hover,
.djr-brands__link:focus-visible {
  color: var(--djr-red);
}

/*
 * The parent-site column ends in a button. It uses the DJ button component
 * (.djr-btn--primary — red pill) rather than the flat grey square the Pro site uses, so
 * only the spacing lives here; colour, radius and type come from djr-base.css.
 */
.djr-brands__btn {
  margin-top: 20px;
  /* A plugin sheet underlines links inside the header; the button must not inherit that. */
  text-decoration: none;
}

/* ---------- Quick Product Find ----------
 * Same structure as chauvetprofessional.com (panel > search > status > scrollable results),
 * but with DJ's rounded corners rather than the Pro site's square ones.
 */

.djr-qpf {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.djr-qpf__toggle[aria-expanded="true"] {
  color: var(--djr-white);
}

.djr-qpf__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: 320px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.djr-qpf__panel[hidden] {
  display: none;
}

.djr-qpf__input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #cccccc;
  border-radius: var(--djr-radius-pill);
  background: transparent;
  color: var(--djr-ink);
  font: inherit;
  font-size: 14px;
}

.djr-qpf__input::placeholder {
  color: #8b8b8b;
}

.djr-qpf__input:focus {
  outline: none;
  border-color: var(--djr-red);
}

.djr-qpf__status {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8b8b8b;
}

.djr-qpf__results {
  max-height: 320px;
  margin: 8px 0 0;
  padding-right: 4px;
  overflow-y: auto;
  /* Contain the scroll so it doesn't chain into the page behind the panel. */
  overscroll-behavior: contain;
}

.djr-qpf__results li[hidden] {
  display: none;
}

.djr-qpf__results a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--djr-ink);
  font-size: 14px;
  font-weight: 400;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.djr-qpf__results a:hover,
.djr-qpf__results a:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--djr-red);
}

/* Slim scrollbar inside the results list. */
.djr-qpf__results::-webkit-scrollbar {
  width: 6px;
}

.djr-qpf__results::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 999px;
}

/* ---------- WPML language switcher ---------- */

/*
 * Hide the language menu until UIkit upgrades it. `.djr-langs` is a dropdown via the
 * `uk-dropdown` ATTRIBUTE, but UIkit's own `display:none` only lands once its JS adds the
 * `.uk-dropdown` CLASS on boot. On a slow load (e.g. 3G) that leaves the whole language list
 * rendered in normal flow — inflating the utility bar's height — until the script runs, then
 * collapsing it once UIkit takes over. That collapse is a large layout shift (the header CLS
 * the reload "jump" comes from). Gating on `:not(.uk-dropdown)` hides it during the pre-boot
 * window and hands control straight back to UIkit the instant the class appears.
 */
.djr-langs:not(.uk-dropdown) {
  display: none;
}

.djr-langs {
  min-width: 190px;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  /* Rounded, to match the rest of the DJ chrome. */
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.djr-langs__list {
  display: flex;
  flex-direction: column;
}

.djr-langs__link {
  display: block;
  padding: 9px 20px;
  color: var(--djr-ink);
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.djr-langs__link:hover,
.djr-langs__link:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  color: var(--djr-red);
}

.djr-langs__link.is-active {
  color: var(--djr-ink);
  font-weight: 700;
}

/*
 * Mobile House of Brands. There's no dedicated mobile design, so the desktop mega-panel is
 * re-flowed into a stacked, scrollable sheet dropping from the utility bar: the four columns
 * stack vertically with hairline separators, and the panel caps its height and scrolls rather
 * than running off-screen. Opening is handled by the tap toggle in js/djr-header.js (hover
 * doesn't exist on touch).
 */
@media (max-width: 960px) {
  .djr-brands__inner {
    flex-direction: column;
    padding-top: 8px;
    padding-bottom: 8px;
    /* Cap to the space below the utility bar and scroll the overflow. */
    max-height: calc(100vh - var(--djr-topbar-h) - 8px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .djr-brands__col {
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid #e5e5e5;
  }

  .djr-brands__col:first-child {
    padding-top: 8px;
    border-top: 0;
  }

  /*
   * Sub-brand columns become accordions: the title row is the whole tap target, and its body
   * collapses so all four category headings are visible at once without scrolling. The lead
   * column (description + CTA) is not an accordion — it stays open.
   */
  .djr-brands__col--accordion {
    padding: 0;
  }

  .djr-brands__col--accordion .djr-brands__title {
    margin: 0;
  }

  .djr-brands__col--accordion .djr-brands__toggle {
    padding: 20px 0;
    cursor: pointer;
  }

  .djr-brands__chevron {
    display: block;
  }

  .djr-brands__col--accordion .djr-brands__col-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }

  .djr-brands__col--accordion.is-expanded .djr-brands__col-body {
    /* Generous cap — the tallest column's content is well under this. */
    max-height: 500px;
    opacity: 1;
    padding-bottom: 20px;
  }

  .djr-brands__col--accordion.is-expanded .djr-brands__chevron {
    transform: rotate(225deg);
  }

  /* The parent-site button should fill the stacked column rather than sit at button width. */
  .djr-brands__btn {
    display: block;
    text-align: center;
  }
}

/* ---------- Primary nav ---------- */

.djr-nav {
  /* The fill that appears on hover. Transparent in overlay mode until hovered. */
  background: var(--djr-header-fill);
  transition: background-color 0.3s ease;
}

.djr-header--overlay .djr-nav {
  background: transparent;
}

/* Inner pages (solid mode) share the brand-red header bar so the chrome matches the homepage. */
.djr-header--solid {
  --djr-header-fill: var(--djr-red);
}

/* On solid (hero-less) pages the red topbar sits directly above the red nav, so the two read as one
   flat block. Flip the utility topbar to a white strip with dark text (red on hover) to separate it
   from the nav below. Overlay pages keep the topbar red/white — there it floats over the hero. */
.djr-header--solid .djr-topbar {
  background: #ffffff;
  color: var(--djr-ink);
}
.djr-header--solid .djr-topbar__brands,
.djr-header--solid .djr-topbar__util {
  color: var(--djr-ink);
}
.djr-header--solid .djr-topbar__brands:hover,
.djr-header--solid .djr-topbar__util:hover {
  color: var(--djr-red);
}
.djr-header--solid .djr-topbar__divider {
  background: rgba(0, 0, 0, 0.2);
}
.djr-header--solid .djr-topbar__brands-icon {
  border-color: rgba(0, 0, 0, 0.3);
}

/*
 * NO hover fill in overlay mode — on a page with a hero we deliberately let the artwork
 * show through, rather than covering it the way Focusrite does. The nav stays transparent
 * and the links keep their own dark pill for legibility.
 *
 * The fill still comes in once the page is SCROLLED, so the nav stays readable over page
 * content rather than over the hero.
 */
.djr-header--overlay.is-scrolled .djr-nav {
  background: var(--djr-header-fill);
}

.djr-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--djr-nav-h);
  /* Anchor for the mega panel — this row is the boxed, viewport-centred container, so a wide
     panel centred on it stays centred and won't clip at smaller widths (the off-centre pill
     would push it off-screen). */
  position: relative;
}

.djr-nav__logo {
  flex: 0 0 auto;
}

/* A plugin sheet applies `object-fit: cover` to images, which crops the logo (its artwork
   is 2.42:1, the slot is 2.30:1). Contain + auto height keeps the mark whole. */
.djr-nav__logo img {
  width: 129px;
  height: auto;
  /* Reserve the height from the intrinsic ratio (146x60) so the logo doesn't collapse to
     zero and then pop the nav down when the SVG finishes loading. */
  aspect-ratio: 146 / 60;
  object-fit: contain;
  transition: filter 0.18s ease;
}

/* When the bar turns red — sticky (pinned), overlay-scrolled, or solid-mode inner pages — the
   two-tone logo's red "DJ" mark would disappear. Flatten the whole lockup to solid white. At rest
   (overlay, over the hero) no filter applies, so the regular white+red logo shows. */
.djr-header.is-sticky .djr-nav__logo img,
.djr-header--overlay.is-scrolled .djr-nav__logo img,
.djr-header--solid .djr-nav__logo img {
  filter: brightness(0) invert(1);
}

/* The dark pill that holds the links. In overlay mode it keeps the menu legible over the
   hero before the user hovers; once the header fills, it blends into the bar. */
.djr-nav__menu {
  flex: 0 1 auto;
}

/* Figma: the pill is 716px wide. Items fill full height and share the width (flex-grow keeps
   roughly the design's content proportions) so the red hover can occupy each cell edge-to-edge
   with no black padding around it. No horizontal/vertical padding on the bar — the red must
   reach the pill edges; first/last items round to match. overflow can't be clipped here because
   the mega panel overflows the bar below it. */
.djr-nav__list {
  display: flex;
  align-items: stretch;
  /* Sized to content, with 716px (the Figma English width) as the floor — so English is unchanged
     but longer translated labels (fr/de) grow the bar instead of overflowing to the right. */
  width: max-content;
  min-width: 716px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.95);
  transition: background-color 0.3s ease;
}

/* Once the bar itself is filled (scrolled, or solid mode) the pill is redundant. */
.djr-header--overlay.is-scrolled .djr-nav__list,
.djr-header--solid .djr-nav__list {
  background: transparent;
}

.djr-nav__item {
  display: flex;
  flex: 1 1 auto;
}

.djr-nav__link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Vertical padding sets the bar height (no padding on the bar itself), horizontal padding
     insets the text from the dividers. The hover background fills this whole box. */
  padding: 16px;
  color: var(--djr-white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
  text-decoration: none!important;
}

/* First / last items take the bar's rounded outer corners and a little extra edge padding, so
   the red hover reads flush with the pill ends instead of a floating rounded chip. */
.djr-nav__item:first-child .djr-nav__link {
  border-radius: 10px 0 0 10px;
  padding-left: 26px;
}

.djr-nav__item:last-child .djr-nav__link {
  border-radius: 0 10px 10px 0;
  padding-right: 26px;
}

/* i18n: fr/de/es nav labels run longer than English. Tighten the horizontal padding and drop the
   font a touch so the bar fits the row on mid-width desktops before the mobile breakpoint (960px). */
html:lang(fr) .djr-nav__link,
html:lang(de) .djr-nav__link,
html:lang(es) .djr-nav__link {
  padding-left: 13px;
  padding-right: 13px;
  font-size: 15px;
}
html:lang(fr) .djr-nav__item:first-child .djr-nav__link,
html:lang(de) .djr-nav__item:first-child .djr-nav__link,
html:lang(es) .djr-nav__item:first-child .djr-nav__link {
  padding-left: 20px;
}
html:lang(fr) .djr-nav__item:last-child .djr-nav__link,
html:lang(de) .djr-nav__item:last-child .djr-nav__link,
html:lang(es) .djr-nav__item:last-child .djr-nav__link {
  padding-right: 20px;
}

/* Hover fills the whole cell — full bar height, divider to divider. On the red header bar a red
   fill would be invisible, so the hover inverts to a white pill with red text. */
.djr-nav__link:hover,
.djr-nav__link:focus-visible,
.djr-nav__item--mega:hover .djr-nav__link,
.djr-nav__item--drop:hover .djr-nav__link {
  background: var(--djr-white);
  color: var(--djr-red);
}

/* Chevron on the Products item; rotates when the mega menu is open. */
.djr-nav__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.djr-nav__item--mega:hover .djr-nav__chevron,
.djr-nav__item--drop:hover .djr-nav__chevron {
  transform: translateY(1px) rotate(-135deg);
}

/* Simple dropdown (Support / Financing) — a small link panel below the pill. */
.djr-nav__item--drop {
  position: relative;
}

.djr-nav__drop {
  position: absolute;
  /* Matches the mega's ~8px gap from the pill. The dropdown anchors to the item (pill height)
     while the mega anchors to the taller row, so the offsets differ but the visual gap is equal. */
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 70;
  min-width: 230px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: 12px;
  background: var(--djr-surface);
  box-shadow: 0 24px 60px rgba(12, 16, 22, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

/* Transparent bridge so the cursor can cross the gap from pill to panel without closing it. */
.djr-nav__drop::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}

.djr-nav__item--drop:hover .djr-nav__drop,
.djr-nav__drop:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.djr-nav__drop-link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--djr-ink);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.djr-nav__drop-link:hover,
.djr-nav__drop-link:focus-visible {
  background: var(--djr-red);
  color: var(--djr-white);
}

.djr-nav__sep {
  flex: 0 0 1px;
  align-self: center;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  transition: opacity 0.18s ease;
}

/* The divider touching a hovered item is subsumed by the red edge (no line against the fill). */
.djr-nav__item:hover + .djr-nav__sep,
.djr-nav__sep:has(+ .djr-nav__item:hover) {
  opacity: 0;
}

/* ---------- Products mega menu ----------
 * A wide panel dropping from the Products nav item on hover: a grid of category tiles on a
 * light panel, plus a white sidebar of secondary links + CTAs. Figma node 71:694.
 */

/* The mega panel now anchors to .djr-nav__inner (viewport-centred row), not the pill — see
   the position:relative on .djr-nav__inner above. */

.djr-nav__item--mega {
  position: static;
}

.djr-mega {
  position: absolute;
  /* Anchored to .djr-nav__inner (the row), which is ~18px taller than the pill, so pull the
     panel up to sit ~8px under the pill instead of 32px away — that big gap dropped the hover
     before the pointer could reach the panel. */
  top: calc(100% - 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 70;
  width: min(1270px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  border-radius: 16px;
  background: var(--djr-surface);
  box-shadow: 0 24px 60px rgba(12, 16, 22, 0.28);
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Transparent bridge so the pointer can cross the gap from the nav to the panel. */
.djr-mega::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}

.djr-nav__item--mega:hover .djr-mega,
.djr-mega:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Left: category tile grid. */
.djr-mega__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px 8px;
  padding: 30px 24px;
}

.djr-mega__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

.djr-mega__tile-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 14px;
  border-radius: 6px;
  background: #e0e0e0;
  overflow: hidden;
}

.djr-mega__tile-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Lifestyle photo revealed on hover (Figma tile hover variant): fills the box, fading over
   the product-on-grey. */
.djr-mega__tile-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.djr-mega__tile:hover .djr-mega__tile-hover,
.djr-mega__tile:focus-visible .djr-mega__tile-hover {
  opacity: 1;
}

.djr-mega__tile-label {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--djr-ink);
}

/* Right: sidebar. The content lives in an absolutely-positioned inner so an expanded submenu
   scrolls the sidebar internally instead of growing the panel and shoving the tile grid. */
.djr-mega__side {
  position: relative;
  overflow: hidden;
  background: var(--djr-white);
}

.djr-mega__side-inner {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
}

.djr-mega__side-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--djr-line);
  color: var(--djr-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  transition: color 0.18s ease;
}

/* No divider under the last top-level item (Discontinued), before the buttons. Scoped to the
   inner's direct children so it doesn't also match the toggles (each toggle is the last
   <button> inside its group, which the unscoped :last-of-type was wrongly wiping). */
.djr-mega__side-inner > .djr-mega__side-link:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.djr-mega__side-link:hover,
.djr-mega__side-link:focus-visible {
  color: var(--djr-red);
}

.djr-mega__side-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 0.2s ease;
}

/* Expandable sidebar groups (Series / Applications) — click to reveal a submenu. The group
   carries the divider at its own bottom, so the line sits below the whole submenu (matching
   the Accessories / Discontinued dividers) rather than between the toggle and its children. */
.djr-mega__side-group {
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--djr-line);
}

.djr-mega__side-toggle {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  /* Match the plain side links (Accessories / Discontinued). A bare `font: inherit` was
     wiping the 15px/700 from .djr-mega__side-link and letting the button drift. */
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--djr-ink);
  text-align: left;
  cursor: pointer;
}

.djr-mega__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.djr-mega__side-group.is-open .djr-mega__submenu {
  /* Roomy enough for the full dynamic Series/Applications lists (20+ terms); the sidebar's
     .djr-mega__side-inner scrolls internally to reach anything past the panel height. */
  max-height: 1400px;
}

.djr-mega__side-group.is-open .djr-mega__side-chevron {
  transform: translateY(2px) rotate(-135deg);
}

.djr-mega__submenu-link {
  display: block;
  padding: 9px 0 9px 14px;
  color: var(--djr-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.djr-mega__submenu li:first-child .djr-mega__submenu-link {
  padding-top: 14px;
}

.djr-mega__submenu-link:hover,
.djr-mega__submenu-link:focus-visible {
  color: var(--djr-red);
}

.djr-mega__side-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.djr-mega__btn {
  width: 100%;
  text-decoration: none !important;
}

/* Two classes so the ink text/border beat the single-class .djr-btn base (whose white text
   otherwise wins on source order and vanishes on the light mega/mobile panel). */
.djr-btn.djr-mega__btn--outline {
  background: transparent;
  border-color: var(--djr-ink);
  color: var(--djr-ink);
}

.djr-btn.djr-mega__btn--outline:hover {
  background: var(--djr-ink);
  color: var(--djr-white);
}

.djr-nav__search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  /* Reset the <button> UA styling — this used to be an <a>. */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--djr-white);
  font-size: 16px;
  font-weight: 700;
  transition: color 0.18s ease;
}

.djr-nav__search:hover,
.djr-nav__search:focus-visible {
  color: var(--djr-white);
  text-decoration: none;
}

.djr-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--djr-white);
  cursor: pointer;
}

/* ---------- Mobile menu (offcanvas) ---------- */

/* While the full-screen menu is open, hide the page utility bar behind it (its Brands / Quick
   Product Find / language controls are mirrored in the menu's own strip). */
.djr-menu-open .djr-topbar {
  display: none;
}

/* The mobile menu is a fixed-position UIkit offcanvas nested inside the header. Any transform on
   the header (the sticky headroom, incl. translateY(0) when pinned) becomes the containing block
   for that fixed descendant and traps the full-screen menu inside the header's box, so it opens
   invisibly. Drop the transform while the menu is open — the overlay covers the header anyway. */
.djr-menu-open .djr-header.is-sticky {
  transform: none;
}


/* Full-screen dark panel. Products expands inline to a light panel; the rest stay dark rows. */
#djr-mobile-nav .uk-offcanvas-bar {
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  padding: 0;
  background: var(--djr-header-fill);
  overflow-y: auto;
}

/* Logo + close. */
.djr-mobile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.djr-mobile__logo img {
  height: 52px;
  width: auto;
  display: block;
  /* The drawer background is brand red, so flatten the two-tone lockup to solid white — the red
     "DJ" mark would otherwise vanish against it. */
  filter: brightness(0) invert(1);
}

/* UIkit forces .uk-offcanvas-close to an absolute, 50%-opacity top-right corner — pull it back
   into the logo row, full white and larger, matching the Figma close glyph. */
.djr-mobile__close.uk-offcanvas-close {
  position: static;
  top: auto;
  right: auto;
  margin: 0;
  padding: 6px;
  color: var(--djr-white);
  opacity: 1;
}

.djr-mobile__close.uk-offcanvas-close svg {
  width: 22px;
  height: 22px;
}

/* Search field — dark pill at the top of the menu. */
.djr-mobile__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 40px);
  height: 44px;
  margin: 16px 20px;
  padding: 0 16px 0 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.djr-mobile__search:hover { border-color: var(--djr-red); }
.djr-mobile__search-text { color: rgba(255, 255, 255, 0.55); }

.djr-mobile__search-icon {
  position: absolute;
  left: 14px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.djr-mobile__search-input {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 16px 0 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--djr-white);
  font-family: inherit;
  font-size: 15px;
}

.djr-mobile__search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.djr-mobile__search-input:focus {
  outline: none;
  border-color: var(--djr-red);
}

.djr-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level rows (Products, Sales Network, …). */
.djr-mobile__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  margin: 0;
  padding: 17px 20px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: none;
  color: var(--djr-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Products / Support / Financing rows fill red while their panel is open (Figma 77:1015). */
.djr-mobile__group.is-open > .djr-mobile__row--products,
.djr-mobile__group.is-open > .djr-mobile__row--toggle {
  background: var(--djr-red);
}

/* Right-pointing arrow on the plain link rows. */
.djr-mobile__arrow::before {
  content: "\2192";
  font-size: 19px;
  line-height: 1;
}

/* Down chevron that flips up when its group is open. */
.djr-mobile__chevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}

.djr-mobile__group.is-open > .djr-mobile__row .djr-mobile__chevron,
.djr-mobile__subgroup.is-open > .djr-mobile__side-row .djr-mobile__chevron {
  transform: translateY(2px) rotate(-135deg);
}

/* Products panel — light, collapses via max-height. */
.djr-mobile__panel {
  max-height: 0;
  overflow: hidden;
  background: var(--djr-surface);
  transition: max-height 0.32s ease;
}

.djr-mobile__group.is-open > .djr-mobile__panel {
  /* Tiles + Series/Applications accordions can all be open at once; keep the cap well clear. */
  max-height: 5000px;
}

/* Accordion submenu (Support / Financing) — red toggle row + light F2F2F2 panel, matching the
   Products expanded state. */
.djr-mobile__subnav {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: var(--djr-surface);
  transition: max-height 0.3s ease;
}

.djr-mobile__group.is-open > .djr-mobile__subnav {
  max-height: 600px;
}

.djr-mobile__subnav-link {
  display: block;
  padding: 14px 20px 14px 34px;
  border-bottom: 1px solid var(--djr-line);
  color: var(--djr-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
}

/* a:link (0,1,1) outranks the single-class color and forces white → invisible on the light
   panel; scope to win (same fix as the Products sidebar links). */
.djr-mobile__subnav a.djr-mobile__subnav-link {
  color: var(--djr-ink);
}

.djr-mobile__subnav li:last-child .djr-mobile__subnav-link {
  border-bottom: 0;
}

/* 3-column category tile grid. */
.djr-mobile__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  padding: 20px;
}

.djr-mobile__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  text-decoration: none !important;
}

.djr-mobile__tile-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 110 / 120;
  padding: 10px;
  border-radius: 5px;
  background: #e0e0e0;
}

.djr-mobile__tile-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.djr-mobile__tile-label {
  color: var(--djr-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* Sidebar links (Accessories / Series / Applications / Discontinued) on the light panel. */
.djr-mobile__side {
  padding: 0 20px;
}

.djr-mobile__side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--djr-line);
  background: none;
  color: var(--djr-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}

.djr-mobile__side > .djr-mobile__side-row:last-child,
.djr-mobile__side > .djr-mobile__subgroup:last-child {
  border-bottom: 0;
}

.djr-mobile__subgroup {
  border-bottom: 1px solid var(--djr-line);
}

.djr-mobile__subgroup .djr-mobile__side-row {
  border-bottom: 0;
}

.djr-mobile__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.djr-mobile__subgroup.is-open .djr-mobile__submenu {
  /* Fits the full dynamic Series list (20+ terms); the offcanvas bar scrolls for overflow. */
  max-height: 1600px;
}

.djr-mobile__submenu-link {
  display: block;
  padding: 11px 0 11px 14px;
  color: var(--djr-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
}

/* Light-panel anchors: a theme `a:link` rule (0,1,1) outranks the single-class color above and
   forces these white → invisible on the light panel. Scope them so ink/body wins. (The Series /
   Applications toggles are <button>s and unaffected, which is why only the links went white.) */
.djr-mobile__side a.djr-mobile__side-row {
  color: var(--djr-ink);
}

.djr-mobile__submenu a.djr-mobile__submenu-link {
  color: var(--djr-body);
}

.djr-mobile__submenu li:last-child .djr-mobile__submenu-link {
  padding-bottom: 16px;
}

/* New Products / All Products buttons. */
.djr-mobile__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.djr-mobile__actions .djr-btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Responsive ---------- */

/* Tablet / small desktop: keep the edge-to-edge pill fill (the old rule switched to a gapped,
   content-width bar, which reintroduced black gaps around the red). Instead let the pill shrink
   via its max-width:100% and tighten the link padding/type so the labels still fit. */
@media (max-width: 1200px) {
  .djr-nav__link {
    padding: 15px 12px;
    font-size: 15px;
  }

  .djr-nav__item:first-child .djr-nav__link {
    padding-left: 18px;
  }

  .djr-nav__item:last-child .djr-nav__link {
    padding-right: 18px;
  }

  .djr-nav__search {
    font-size: 14px;
  }

  /* Narrow the mega's sidebar so the whole panel fits with margin at these widths. */
  .djr-mega {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1040px) {
  .djr-nav__list {
    width: 640px;
  }

  .djr-nav__link {
    padding: 14px 8px;
    font-size: 14px;
  }

  .djr-nav__item:first-child .djr-nav__link {
    padding-left: 14px;
  }

  .djr-nav__item:last-child .djr-nav__link {
    padding-right: 14px;
  }

  /* Icon-only search to reclaim room for the pill. */
  .djr-nav__search > span:first-child {
    display: none;
  }

  .djr-mega {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .djr-mega__grid {
    gap: 14px 6px;
    padding: 24px 18px;
  }
}

@media (max-width: 960px) {
  .djr-header {
    --djr-nav-h: 72px;
  }

  /* The nav stays transparent and overlaid on mobile (same as desktop); the hero reserves room
     for it via padding-top on .djr-hero__container so the floating logo sits over the hero image
     rather than colliding with the hero content. */

  .djr-nav__menu,
  .djr-nav__search {
    display: none;
  }

  .djr-nav__toggle {
    display: inline-flex;
  }

  /* Keep the "Brands" label visible — just drop the "House of " prefix and tighten the bar
     so all three items (Brands / Quick Product Find / English) fit at phone width. */
  .djr-topbar__brands-prefix {
    display: none;
  }

  .djr-topbar {
    font-size: 12px;
  }

  .djr-topbar__inner {
    gap: 10px;
  }

  .djr-topbar__utils {
    gap: 10px;
  }

  .djr-topbar__util {
    gap: 5px;
  }

  /* Utility bar and nav share the same edge on mobile (the nav's 48px desktop gutter would
     otherwise indent the logo far more than "Brands" above it). */
  .djr-topbar .djr-container,
  .djr-nav .djr-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------------------------------------------------------------- product search popup */
/* Opened by the header + mobile "Search" triggers; searches PRODUCTS via the Quick Product Find
   data (js/djr-quick-find.js). Centred modal over a dark scrim, above the sticky header. */
html.djr-search-open { overflow: hidden; }
.djr-search[hidden] { display: none; }
.djr-search {
  position: fixed;
  inset: 0;
  z-index: 1090; /* above the sticky header (100) and UIkit offcanvas (~1010) */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 11vh 20px 24px;
}
.djr-search__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.66);
}
.djr-search__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 78vh;
  padding: 22px;
  background: var(--djr-white);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
  animation: djr-search-in 0.18s ease;
}
@keyframes djr-search-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.djr-search__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--djr-muted);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.djr-search__close:hover { background: var(--djr-surface); color: var(--djr-ink); }
.djr-search__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 40px 16px 4px;
  border-bottom: 2px solid var(--djr-ink);
}
.djr-search__icon { flex: 0 0 auto; color: var(--djr-red); }
.djr-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  color: var(--djr-ink);
}
.djr-search__input::placeholder { color: var(--djr-muted); font-weight: 500; }
/* Hide the browser's native search-clear "✕" (WebKit) so it doesn't double up with our own
   close button in the corner. */
.djr-search__input::-webkit-search-cancel-button,
.djr-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.djr-search__status {
  margin: 14px 4px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--djr-muted);
}
.djr-search__results {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.djr-search__results li { margin: 0; }
.djr-search__results li[hidden] { display: none; }
/* Rich product row: thumbnail + name + "series · type" subtitle + chevron. */
.djr-search__results a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.djr-search__results a:hover,
.djr-search__results a:focus-visible { background: var(--djr-surface); outline: none; }
.djr-search__thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--djr-line);
  border-radius: 10px;
  background: var(--djr-surface);
  overflow: hidden;
}
.djr-search__results a:hover .djr-search__thumb { background: var(--djr-white); }
.djr-search__thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Blend any solid-white shot backgrounds into the grey tile (matches the product cards). */
  mix-blend-mode: multiply;
}
.djr-search__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.djr-search__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--djr-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.djr-search__sub {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #9a9a9a;
}
.djr-search__chev {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--djr-muted);
}
.djr-search__chev svg { width: 12px; height: 18px; }

/* Footer — "View all N results" pill, shown only when a query has matches. */
.djr-search__footer {
  display: flex;
  justify-content: center;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--djr-line);
}
.djr-search__footer[hidden] { display: none; }
.djr-search__viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 12px 22px;
  border-radius: var(--djr-radius-pill);
  background: var(--djr-red);
  color: var(--djr-white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.djr-search__viewall:hover,
.djr-search__viewall:focus-visible { background: var(--djr-red-dark); color: var(--djr-white); }
.djr-search__viewall-arrow { display: inline-flex; }

@media (max-width: 640px) {
  .djr-search { padding: 0; }
  .djr-search__dialog { max-width: none; min-height: 100%; max-height: 100%; border-radius: 0; padding: 20px 18px; }
}