/* ── SEARCH DOCK ───────────────────────────────────────────────────────
   Scrolled past its search surface, the navbar stops being a list of links
   and becomes the filters themselves. Not a summary of them, not a button
   that opens them — the actual controls, in the bar.

   So there is exactly one filter bar on screen at any moment: on the page
   while you are at the top of it, in the navbar once you have scrolled by.
   Geometry comes from --nav-h (variables.css), so the row stays centred in
   the bar at every height the navbar passes through as it condenses.     */

/* A real grid item in the navbar's middle column (see navbar.css), not an
   absolutely positioned overlay — the column is what centres it, so it stays
   centred on the bar at every width instead of on whatever gap the logo and
   the auth cluster happen to leave.

   Deliberately no transform: one here would become the containing block for
   the dropdowns inside, and they would then be clipped by this row's own
   sideways scroll. */
.nav-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  /* The middle column is auto-sized, so without a ceiling a long filter row
     would squeeze the side columns to nothing and run over the logo. Measured
     against the viewport, not the column, which would be circular. */
  max-width: min(1100px, calc(100vw - 360px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), visibility 0.22s;
}
html.nav-docked .nav-dock { opacity: 1; visibility: visible; pointer-events: auto; }

/* The links and the filters are the same seat — only one sits in it. */
.navbar .nav-links { transition: opacity 0.22s var(--ease), visibility 0.22s; }
html.nav-docked .navbar .nav-links {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The controls, once the navbar has them. One line, vertically centred,
   scrolling sideways rather than wrapping or spilling — a filter bar that
   changes height as the window narrows is a filter bar that shifts the page
   underneath it. */
/* No !important here on purpose. The width cap belongs to `.nav-dock > *`
   above (and to the per-page rules that narrow it further); an !important
   max-width here used to beat both and let the hero pill span the whole bar,
   over the brand and the account controls. */
.nd-adopted {
  display: flex;
  align-items: center;
  /* One gap for the whole row. Every control carries its own edge, so the
     spacing between any two of them is this number and nothing else. */
  gap: 12px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* the row is the scroller, so its children must not be squeezed */
  flex-wrap: nowrap;
  padding-bottom: 0;
}
.nd-adopted::-webkit-scrollbar { display: none; }

/* A row that has more to show says so. The mask fades whichever edge still
   has controls beyond it, so a filter bar that scrolls never reads as one
   that has been chopped in half. Applied to the row wherever it lives — on
   the page and in the navbar — and switched on only while it overflows. */
.nd-more-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
.nd-more-start {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px);
  mask-image: linear-gradient(to right, transparent 0, #000 34px);
}
.nd-more-start.nd-more-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.nd-adopted > * { flex: 0 0 auto; }

/* In the bar every control drops to the navbar's own scale so the row reads
   as part of the header rather than a filter bar parked inside it. */
.nd-adopted .kd-trigger,
.nd-adopted .filter-select,
.nd-adopted .filter-toggle,
.nd-adopted .sort-select,
.nd-adopted .pr-btn,
.nd-adopted .mp-trigger {
  height: 36px;
  min-height: 36px;
  font-size: 13px;
  padding: 0 12px;
}
.nd-adopted .filter-results {
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}

/* The space the controls leave behind on the page, so lifting them into the
   navbar cannot shorten the document and jerk the scroll position. */
.nd-placeholder { pointer-events: none; }

/* ── Phones ──
   Same rule, same single bar: the brand and the menu keep their corners and
   the filters take everything between them, scrolling sideways. No sheet, no
   button that opens one — the filters are always the thing you are looking
   at, exactly as on a laptop. */
@media (max-width: 900px) {
  .nav-dock {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0 10px;
    justify-content: flex-start;
  }
  .nav-dock > * { max-width: none; width: 100%; }
  .navbar .nav-right { order: 2; }
  .navbar .nav-hamburger { order: 3; }
  /* Nothing in the right-hand group earns its width next to the filters */
  html.nav-docked .navbar .lang-btn,
  html.nav-docked .navbar .theme-toggle { display: none; }

  .nd-adopted { gap: 8px; }
  .nd-adopted .kd-trigger,
  .nd-adopted .filter-select,
  .nd-adopted .filter-toggle,
  .nd-adopted .sort-select,
  .nd-adopted .pr-btn,
  .nd-adopted .mp-trigger {
    height: 34px;
    min-height: 34px;
    width: auto !important;
    font-size: 12.5px;
    padding: 0 11px;
  }
  .nd-adopted .filter-results { display: none; }
}

/* A dropdown opened from the navbar hangs from the navbar, and must clear
   the page under it. */
.nav-dock .kd-wrap.open,
.nav-dock .pr-wrap { z-index: 1500; }

@media (prefers-reduced-motion: reduce) {
  .nav-dock, .navbar .nav-links { transition: none; }
}