/* ==========================================================================
   MOULDSHOP LIST TOOLBAR — quick search (left) + sort (right). M4 / TASK-0105.

   Styles `.ms-listbar*`, emitted only by Custom/MouldshopListToolbar.cshtml.
   The line under the row is NOT here: it is the TASK-0104 divider, and it lives
   with its siblings in mouldshop-category-nav.css (item 3).

   NO COLOUR IS SET (DEC-0063). Text and icons take `currentColor` from the
   row; the pill outline is `--ms-rule`, the scheme-aware rule token, so a dark
   row gets a light outline without anything here knowing about schemes.

   MOBILE IS NOT DESIGNED, per the packet. What it does: the row wraps. Below
   roughly 400px of column the sort pill drops under the search box and both keep
   their own width. Nothing is fixed-width, so nothing can push past the column.
   ========================================================================== */

.ms-listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

/* --- the pill, shared by both controls ---------------------------------- */
.ms-listbar-input,
.ms-listbar-select {
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
  background-color: transparent;
  border: 1px solid var(--ms-rule);
  border-radius: 999px;
  min-height: 2.5rem;
  margin: 0;
}

.ms-listbar-input:focus-visible,
.ms-listbar-select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* THE SEARCH PILL DOES NOT CHANGE ON FOCUS (operator, 2026-09-24: "not change border which we have
   already - nothing is changing - border keeps the same"). Neither ring: not the navy outline
   above, not swift.css's global `:where(:focus-visible)` 4px box-shadow. The existing 1px border
   stays exactly as it is; the caret shows focus - the same call as the header search
   (`ccec378`). The sort pill keeps its ring. */
.ms-listbar-input:focus,
.ms-listbar-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- search, left ------------------------------------------------------- */
.ms-listbar-search {
  position: relative;
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 24rem;
}

.ms-listbar-icon {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  pointer-events: none;
}

.ms-listbar-input {
  width: 100%;
  padding-block: 0.375rem;
  padding-inline: 2.5rem 1rem;
}

.ms-listbar-input::placeholder {
  color: inherit;
  opacity: 0.6;
}

/* --- sort, right -------------------------------------------------------- */
.ms-listbar-sort {
  position: relative;
  flex: 0 0 auto;
  max-width: 100%;
}

.ms-listbar-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 100%;
  padding-block: 0.375rem;
  padding-inline: 1.25rem 2.5rem;
  cursor: pointer;
}

/* The chevron is a border triangle in currentColor, so it follows the row's
   scheme; a data-URI SVG would have to hardcode its colour. */
.ms-listbar-sort::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.125rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* The open option list is drawn by the OS, not by the row: inheriting a dark
   row's light text there would put white on the system's white. `initial` hands
   it back to the system pair; no colour value is chosen here. */
.ms-listbar-select option {
  color: initial;
  background-color: initial;
}

/* --------------------------------------------------------------------------
   THE SIDEBAR SORT BLOCK, REMOVED FROM VIEW. Packet item 2, "a move, not a new
   sort".

   Hidden, not deleted, on purpose. The radios live inside the vendor facets
   forms and FormData includes a checked radio whether it is displayed or not.
   So when a facet is changed, the facets form still posts the current SortBy
   and the sort survives, which is ruling 3. Deleting the block from our facets
   shadow would make every facet click reset the sort to Relevance.

   Both copies go: the desktop form's and the mobile modal's. The toolbar is
   visible at every width, so the modal needs no sort of its own.
   -------------------------------------------------------------------------- */
div.border-bottom:has(> [id^="SortBy_desktop_"]),
div.border-bottom:has(> [id^="SortBy_mobile_"]) {
  display: none;
}

/* --------------------------------------------------------------------------
   MOBILE: FILTER · SEARCH · SORT, ONE ROW, THREE EQUAL WIDTHS.
   Operator, 2026-09-23: "we dont need categories menu" · "Filter same height as
   search and [sort] - and also same rounding" · "all three in one row - same
   width".

   "Mobile" = below 1080, where this listing stacks (TASK-0045). The toolbar
   carries its own Filter trigger (see MouldshopListToolbar.cshtml); vendor's
   trigger in the stacked sidebar is hidden, and the category menu with it.
   That leaves the stacked sidebar cell holding only the modal, which is fixed
   and takes no space, so the outer row's gap is closed as well.

   The row is a three-track grid. `minmax(0, 1fr)` so no control's content can
   make its track wider than the others.
   -------------------------------------------------------------------------- */
.ms-listbar-filter {
  display: none;
}

@media (max-width: 1079.98px) {
  .ms-listbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .ms-listbar-search,
  .ms-listbar-sort {
    max-width: none;
    min-width: 0;
  }

  .ms-listbar-select {
    width: 100%;
    padding-inline: 1rem 2rem;
    text-overflow: ellipsis;
  }

  .ms-listbar-sort::after {
    inset-inline-end: 0.875rem;
  }

  .ms-listbar-input {
    padding-inline: 2.25rem 0.75rem;
  }

  .ms-listbar-icon {
    inset-inline-start: 0.875rem;
  }

  /* Same box as the two pills: height, radius, type size. Its fill stays the
     vendor primary button's, a brand fill with its own text colour (DEC-0063
     rule 5). */
  .ms-listbar-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 0;
    min-height: 2.5rem;
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
    border-radius: 999px;
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: nowrap;
  }

  .ms-listbar-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Vendor's trigger and the category menu: not in the stacked layout. */
  [class*="FacetsForm_Mobile_"] > button[data-bs-target="#FacetsModal"],
  .ms-catnav {
    display: none;
  }

  /* The stacked sidebar cell is now empty in flow; close the row gap it left. */
  .grid:has(> [data-dw-itemtype="swift-v2_productlistfacets"]) {
    row-gap: 0;
  }
}

/* --------------------------------------------------------------------------
   LOAD MORE: THE TOOLBAR'S BUTTON BOX. Operator, 2026-09-23: "the load more
   has to have same height like top navigation buttons above products - and
   same roundings".

   Vendor's `.swift_load_more_button` (btn-primary) keeps its fill: a brand fill
   with its own text colour (DEC-0063 rule 5). Only the box changes, to the
   pills' 2.5rem height, full rounding and 0.9375rem type, the same values the
   mobile Filter trigger takes above.
   -------------------------------------------------------------------------- */
.product-list .swift_load_more_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding-block: 0.375rem;
  padding-inline: 1.5rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.5;
}