/**
 * Product search at /suche.
 *
 * Mobile-first: results are the primary content and filters open in a sheet.
 * At 900px the same filter markup becomes a persistent sidebar.
 */

.view-search {
  --search-surface: #fff;
  --search-surface-muted: #faf9f8;
  --search-border: #e6e3e1;
  --search-text-muted: #68635f;
  --search-red-soft: #fff4f3;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
  color: var(--black);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.view-search,
.view-search * {
  box-sizing: border-box;
}

.view-search__heading {
  max-width: 52rem;
  margin: 0 0 1rem;
  color: var(--black);
  font-family: "MontserratSemibold", sans-serif;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.2;
}

/* The site header already contains the shop's primary product search. The
   exposed Views form duplicates it, so keeping it visible adds noise without
   adding a capability. */
.view-search__exposed {
  display: none;
}

.view-search a,
.view-search button,
.view-search input,
.view-search select {
  font-family: inherit;
}

.view-search a:focus-visible,
.view-search button:focus-visible,
.view-search input:focus-visible,
.view-search select:focus-visible,
.view-search .select2-selection:focus-visible {
  outline: 3px solid rgba(217, 61, 51, 0.32);
  outline-offset: 2px;
}

/* --- Toolbar: filter button + sort ---------------------------------- */

.view-search__toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0 -0.25rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--search-border);
  background: var(--search-surface);
}

/* On a narrow phone the three toolbar controls cannot share one 375px row.
   The button takes a full-width row of its own, and the count and the sort
   share the row below — from 560px up all three sit on one line.

   Outlined, not filled: on a phone it sits right under "Lieferbarkeit
   prüfen", and two solid red bars in a column each claim to be the main
   action. Whether a piece reaches the shopper at all is the qualifying
   question here, so that one keeps the weight and filtering steps back. */
.view-search__filter-button {
  display: inline-flex;
  flex: 1 0 100%;
  width: auto !important;
  gap: 0.5rem;
  align-items: center;
  /* Centring came from the theme's .button, which this control no longer
     carries. */
  justify-content: center;
  min-height: 48px;
  padding: 0 1.125rem;
  border: 2px solid var(--red);
  border-radius: 10px;
  background: #fff;
  /* The brand red reaches exactly 4.5:1 on white, which is the floor with no
     headroom left. The label takes the theme's darker hover red instead
     (5.83:1); the border keeps the brand colour, where 3:1 applies. */
  color: #bd2f27;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1rem;
  cursor: pointer;
}

.view-search__filter-button:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.view-search__filter-button:hover .view-search__filter-count {
  background: #fff;
  color: var(--red);
}

.view-search__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 0.75rem;
}

/* Shares the toolbar row with the count on every width: it may shrink, but
   it must not wrap onto a line of its own. */
.search-sort {
  display: flex;
  flex: 1 1 7rem;
  min-width: 0;
  max-width: 12.5rem;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.search-sort__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.search-sort__select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-width: 12.5rem;
  border: 1px solid var(--search-border);
  border-radius: 10px;
  background-color: var(--search-surface);
  box-shadow: none;
  font-size: 1rem;
}

/* Search selects deliberately stay native. The theme's global JavaScript
   otherwise replaces them with Select2 after first paint, which causes a
   visible layout jump and leaves a mismatched tooltip-bearing control. These
   rules also recover cleanly if an older cached script already enhanced one. */
.view-search .redbeed-search-native-select + .select2-container {
  display: none !important;
}

.view-search .redbeed-search-native-select.select2-hidden-accessible {
  position: static !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 2.25rem 0 0.875rem !important;
  border: 1px solid var(--search-border) !important;
  border-radius: 10px !important;
  background-color: var(--search-surface) !important;
  box-shadow: none !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

.view-search .search-location__select.select2-hidden-accessible {
  margin-bottom: 0.875rem !important;
}

.js .search-sort__submit,
.js .search-price__submit,
.js .search-location__submit {
  display: none;
}

/* --- Active filter chips -------------------------------------------- */

.search-chips-wrap {
  margin: 0.75rem 0 0;
}

.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-chips__chip {
  max-width: 100%;
}

.search-chips__remove {
  display: inline-flex;
  max-width: 100%;
  gap: 0.5rem;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0.625rem 0.375rem 0.875rem;
  border: 1px solid rgba(217, 61, 51, 0.45);
  border-radius: 999px;
  background: var(--search-red-soft);
  color: #8f241d;
  font-size: 1rem;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.search-chips__group {
  flex: 0 0 auto;
  font-family: "MontserratSemibold", sans-serif;
}

.search-chips__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-chips__remove:hover,
.search-chips__remove:focus {
  border-color: var(--red);
  background: #ffe9e7;
  color: #7d1d17;
}

.search-chips__x {
  flex: 0 0 auto;
  color: var(--red);
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
}

.search-chips__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.375rem;
  padding: 0 0.25rem;
  color: #8f241d;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.search-chips__reset:hover {
  color: var(--red);
}

@media (min-width: 560px) {
  .view-search__filter-button {
    flex: 0 0 auto;
  }
}

/* --- Results --------------------------------------------------------- */

.view-search__count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--search-text-muted);
  font-family: "MontserratSemibold", sans-serif;
}

.view-search__results {
  margin-top: 1rem;
}

.view-search__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

/* Search-result cards favour comparison information over decorative
   taxonomy detail. The deepest category is enough context here. */
.view-search .product-card__categories a:not(:last-child) {
  display: none;
}

.view-search .product-card__categories a:last-child {
  color: #5f5a56;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.view-search .product-card__categories a + a::before {
  content: none;
}

.view-search .product-card__price-retail {
  color: #68635f;
  font-size: 0.875rem;
}

.view-search .product-card__savings {
  color: #246a24;
  font-size: 0.875rem;
  line-height: 1.4;
}

.view-search .product-card__prior-price {
  color: #5f5a56;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.view-search .product-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border-color: #9b9692;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1rem;
}

/* Match the product-list paragraph: the card, not Views' wrapper, is the
   grid item and therefore stretches to the full row height. */
.view-search__rows > .views-row,
.view-search__rows > .search-results__item {
  display: contents;
}

.view-search__pager {
  margin: 2rem 0 0;
  text-align: center;
}

.search-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-load-more__button {
  display: inline-flex;
  width: auto !important;
  min-height: 48px;
  padding: 0 2rem;
  color: #fff;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1rem;
  text-decoration: none;
}

.search-load-more__button:hover {
  background: #bd2f27;
  border-color: #bd2f27;
  color: #fff;
}

.search-load-more__remaining {
  margin: 0.625rem 0 0;
  color: var(--search-text-muted);
  font-size: 0.9375rem;
}

.view-search__empty {
  padding: 2rem 1.25rem;
  border: 1px solid var(--search-border);
  border-radius: 10px;
  background: var(--search-surface-muted);
  text-align: center;
}

.view-search__empty-lead {
  margin: 0 0 0.5rem;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1.125rem;
}

.view-search__empty-hint {
  margin: 0 0 1.25rem;
  color: var(--search-text-muted);
}

.view-search__empty-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.view-search__empty-action {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.5rem;
  text-align: center;
}

.view-search__empty-reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #8f241d;
  font-family: "MontserratSemibold", sans-serif;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Filters: fullscreen sheet on mobile ----------------------------- */

.view-search__sidebar {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--search-surface);
  box-shadow: -8px 0 32px rgba(10, 10, 10, 0.16);
  transform: translateX(100%);
  transition: transform 0.22s ease-out, visibility 0s linear 0.22s;
  visibility: hidden;
}

.view-search__sidebar.is-open {
  transform: translateX(0);
  transition-delay: 0s;
  visibility: visible;
}

.view-search__sheet-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--search-border);
}

.view-search__sheet-title {
  margin: 0;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1.25rem;
  line-height: 1.2;
}

.view-search__sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--search-border);
  border-radius: 999px;
  background: var(--search-surface-muted);
  color: var(--black);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* Closing is not an action worth painting red — red inside the sheet means
   "applied" or "apply". */
.view-search__sheet-close:hover {
  border-color: #4a453f;
  background: var(--search-surface-muted);
}

.view-search__sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1rem;
  -webkit-overflow-scrolling: touch;
}

.view-search__sheet-footer {
  flex: 0 0 auto;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--search-border);
  background: var(--search-surface);
  box-shadow: 0 -4px 16px rgba(10, 10, 10, 0.06);
}

.view-search__sheet-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.view-search__apply {
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  font-size: 1rem;
  cursor: pointer;
}

.view-search__apply:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* --- Location availability: a shop capability, not another facet ------- */

.search-availability {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--search-border);
  border-bottom: 1px solid var(--search-border);
  background: transparent;
}

.search-availability__heading {
  min-width: 0;
}

.search-availability__title {
  margin: 0;
  color: var(--black);
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.search-availability__intro {
  margin: 0.25rem 0 0;
  color: var(--search-text-muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* A stated fact, not an input. It used to be a full-width bordered box that
   looked like the field it replaces, and it stacked above two more rows for
   what amounts to "48165, change it, drop it". Chip-sized instead, on one
   line with both actions. */
.search-availability.is-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.search-availability.is-active .search-availability__heading {
  flex: 1 1 100%;
}

/* "Ändern" opens the field, "Entfernen" drops the filter: the gentler action
   comes first at every width, which is not the reading order of the markup. */
.search-availability.is-active .search-availability__status {
  order: 2;
}

.search-availability.is-active .search-availability__edit {
  order: 3;
}

.search-availability.is-active .search-availability__remove {
  order: 4;
}

/* Opened, the form is a row of its own rather than an item squeezed in beside
   the chip. True at every width, since the section is a flex row throughout. */
.search-availability.is-active .search-availability__edit[open] {
  flex: 1 1 100%;
  order: 3;
}

.search-availability__status {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--search-surface-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}

.search-availability__status strong {
  font-family: "MontserratSemibold", sans-serif;
}

.search-availability__remove {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  color: #6e322e;
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.search-availability__edit > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid #b8b1ac;
  border-radius: 9px;
  background: #fff;
  color: var(--black);
  font-family: "MontserratSemibold", sans-serif;
  font-size: 0.875rem;
  list-style: none;
  cursor: pointer;
}

.search-availability.is-active .search-availability__edit > summary {
  width: max-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #6e322e;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.search-availability.is-active .search-availability__edit > summary::after {
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0.65rem;
  border-width: 0 1.5px 1.5px 0;
  border-color: currentColor;
}

.search-availability__edit > summary::-webkit-details-marker {
  display: none;
}

.search-availability__edit > summary::after {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid #4a453f;
  border-bottom: 2px solid #4a453f;
  content: "";
  transform: rotate(45deg);
}

.search-availability__edit[open] > summary::after {
  transform: rotate(225deg);
}

.search-availability:not(.is-active) .search-availability__edit > summary {
  display: none;
}

.search-availability__edit .search-location {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* From the width the toolbar below turns horizontal, this control has to as
   well: a full-width red bar above a compact toolbar reads as two different
   pages. Must come after the column default above -- same specificity, so
   source order decides. The heading keeps its own line until the section
   itself goes horizontal at 900px. */
@media (min-width: 560px) {
  .search-availability__edit .search-location {
    flex-direction: row;
    align-items: center;
  }

  /* A postal code is five characters and the longest place name still fits
     in 19rem. A field the width of the page would promise a search box. It
     may shrink below that though: a rigid field is what pushes the button
     out of the page on a narrow window or at browser zoom. */
  .search-availability .search-location__input {
    flex: 1 1 19rem;
    max-width: 19rem;
    min-width: 6rem;
  }

  .js .search-availability .search-location__submit {
    flex: 0 1 auto;
    min-height: 48px;
  }
}

/* One caption per field is enough; the label still reaches screen readers. */
.search-location__label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Availability now lives outside the filter sheet and has an explicit
   action. It must not inherit the ordinary filters' JS-only hidden submit. */
.js .search-availability .search-location__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.search-availability .search-location__input,
.search-availability .search-location__select {
  margin-bottom: 0;
}

/* --- Filter groups (accordions on mobile) ---------------------------- */

.search-filters__group {
  border-bottom: 1px solid var(--search-border);
}

.search-filters__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.search-filters__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.search-filters__toggle::after {
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  border-right: 2px solid #4a453f;
  border-bottom: 2px solid #4a453f;
  content: "";
  transform: rotate(225deg);
  transition: transform 0.18s ease;
}

.search-filters__toggle[aria-expanded="false"]::after {
  transform: rotate(45deg);
}

/* Red is the panel's "applied" colour, so a collapsed group says how much of
   the current filtering is hiding inside it. */
.search-filters__applied {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  margin-right: 0.625rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 0.8125rem;
}

.search-filters__group.is-collapsed .search-filters__body {
  display: none;
}

.search-filters__body {
  padding: 0 0 0.875rem;
}

.search-filters__body--facet h3 {
  margin: 0 0 0.5rem;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 1rem;
}

.search-filters__body ul,
.category-drilldown__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facet-item,
.category-drilldown__item {
  margin: 0;
  padding: 0;
}

.facet-item {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  min-height: 44px;
  padding: 0 0.375rem;
  border-radius: 8px;
}

.facet-item:hover {
  background: var(--search-surface-muted);
}

.facet-item a,
.facet-item label {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.625rem;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin: 0;
  padding: 0.375rem 0;
  color: var(--black);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.facet-item label {
  width: auto;
}

.facet-item label:hover {
  background: transparent;
}

.facet-item .facets-checkbox {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid #767676;
  border-radius: 4px;
  background: var(--search-surface) center / 16px 16px no-repeat;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.facet-item .facets-checkbox:checked {
  border-color: var(--red);
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
}

/* A selected filter must be readable as "on" from the row alone, not only
   from the box: the label carries the state for anyone scanning the list. */
.facet-item .facets-checkbox:checked + label {
  font-family: "MontserratSemibold", sans-serif;
  font-weight: 600;
}

.facet-item .facets-checkbox + label {
  display: flex;
  width: auto;
}

/* The theme's normalise.css sets `word-break: break-word` on every div. That
   inherits into these labels, so a long German compound snaps at whatever
   character happens to hit the edge — "Speditionslieferu / ng". Normal
   breaking is restored and the browser is allowed to hyphenate instead, which
   puts the break at a real syllable boundary. Needs <html lang="de">, which
   Drupal renders. */
.facet-item__value,
.category-drilldown__value,
.search-chips__label {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.facet-item__count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--search-text-muted);
  font-size: 0.8125rem;
}

.category-drilldown:focus-visible {
  outline: 3px solid rgba(217, 61, 51, 0.32);
  outline-offset: 3px;
}

.category-drilldown__choice {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.375rem;
  border-radius: 8px;
  color: var(--black);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
}

.category-drilldown__choice:hover {
  background: var(--search-surface-muted);
}

.category-drilldown__box {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 2px solid #767676;
  border-radius: 4px;
  background: var(--search-surface) center / 16px 16px no-repeat;
}

.category-drilldown__choice.is-selected .category-drilldown__box {
  border-color: var(--red);
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
}

.category-drilldown__choice.is-selected .category-drilldown__value {
  font-family: "MontserratSemibold", sans-serif;
}

/* Subcategories sit under their checked parent, like a nested list. */
.category-drilldown__item--child .category-drilldown__choice {
  padding-left: 2.375rem;
}

.category-drilldown__count {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--search-text-muted);
  font-size: 0.8125rem;
}

/* Soft-limit is a secondary reveal action, not another filter value. It is
   still a full touch target and exposes direction in addition to its text. */
.view-search .facets-soft-limit-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: 44px;
  margin-top: 0.375rem;
  padding: 0 0.25rem;
  color: #4a453f;
  font-family: "MontserratSemibold", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.view-search .facets-soft-limit-link::after {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  content: "";
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.view-search .facets-soft-limit-link.open::after {
  margin-top: 0.25rem;
  transform: rotate(225deg);
}

.view-search .facets-soft-limit-link:hover {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Facets' searchbox class lives on the input itself. */
.view-search .facets-widget-searchbox,
.view-search .facets-widget-searchbox input[type="text"],
.view-search .facets-widget-searchbox input[type="search"] {
  width: 100%;
  min-height: 44px;
  margin: 0 0 0.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--search-border);
  border-radius: 10px;
  background: var(--search-surface);
  box-shadow: none;
  color: var(--black);
  font-size: 1rem;
}

/* --- Price and location controls ------------------------------------- */

.search-price__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.375rem 0.625rem;
  align-items: center;
}

.search-price__label,
.search-location__label {
  color: var(--search-text-muted);
  font-size: 0.9375rem;
}

.search-price__label:first-of-type {
  grid-column: 1;
  grid-row: 1;
}

.search-price__label:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
}

.search-price__input:first-of-type {
  grid-column: 1;
  grid-row: 2;
}

.search-price__input:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
}

.search-price__input,
.search-location__input,
.search-location__select {
  width: 100%;
  min-height: 48px;
  padding: 0 0.75rem;
  border: 1px solid var(--search-border);
  border-radius: 10px;
  background: var(--search-surface);
  box-shadow: none;
  color: var(--black);
  font-size: 1rem;
}

/* The UA/theme placeholder grey fails 4.5:1 against a white field; pin it to
   a passing tone. #6e6259 on #fff is ~5.6:1. */
.view-search input::placeholder {
  color: #6e6259;
  opacity: 1;
}

.search-price__input:focus,
.search-location__input:focus,
.search-location__select:focus,
.view-search .facets-widget-searchbox:focus {
  border-color: var(--red);
}

.search-price__submit,
.search-location__submit,
.search-sort__submit {
  min-height: 44px;
  padding: 0 1rem;
  border: 2px solid var(--red);
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-family: "MontserratSemibold", sans-serif;
  cursor: pointer;
}

.search-price__submit {
  grid-column: 1 / -1;
  margin-top: 0.375rem;
}

.search-location__label {
  display: block;
  margin-bottom: 0.375rem;
}

.search-location__input,
.search-location__select {
  margin-bottom: 0.875rem;
}

.search-location__hint {
  margin: 0.25rem 0 0;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--search-surface-muted);
  color: var(--search-text-muted);
  font-size: 0.875rem;
}

/* --- Wider phones/tablets -------------------------------------------- */

@media (min-width: 600px) {
  .view-search {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .view-search__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* --- Desktop: persistent sidebar ------------------------------------- */

@media (min-width: 900px) {
  .view-search {
    padding: 2.25rem 2rem 5rem;
  }

  .view-search__heading {
    margin-bottom: 1.5rem;
    font-size: 2rem;
  }

  .view-search__layout {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }

  .view-search__sidebar {
    position: sticky;
    inset: auto;
    top: 1.5rem;
    z-index: auto;
    display: block;
    grid-column: 1;
    grid-row: 1;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    border: 1px solid var(--search-border);
    border-radius: 10px;
    background: var(--search-surface-muted);
    box-shadow: none;
    transform: none;
    transition: none;
    visibility: visible;
    scrollbar-width: thin;
    scrollbar-color: #c8c3bf transparent;
  }

  .view-search__main {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }

  .view-search__sheet-header,
  .view-search__sheet-footer,
  .view-search .view-search__filter-button {
    display: none;
  }

  .view-search__sheet-body {
    overflow: visible;
    padding: 0 1rem;
  }

  .view-search__toolbar {
    flex-wrap: nowrap;
    padding-top: 0;
  }

  /* The sort group hugs the right edge instead of growing into the gap
     next to the count. */
  .search-sort {
    flex: 0 0 auto;
    max-width: none;
    justify-content: flex-end;
  }

  .search-sort__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: var(--search-text-muted);
    font-family: "MontserratSemibold", sans-serif;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .search-sort__select,
  .view-search .search-sort__select.select2-hidden-accessible {
    width: 14rem !important;
    max-width: 14rem;
  }

  .search-filters__group.is-collapsed .search-filters__body {
    display: block;
  }

  .search-filters__toggle {
    cursor: default;
  }

  .search-filters__toggle::after {
    display: none;
  }

  .search-filters__applied {
    display: none;
  }

  .view-search__rows {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
  }

  /* Flex, not grid. A grid track sized `auto` takes its content's min-content
     width, so a row that will not shrink grows the track past the container
     and the button escapes the section. Flex with wrap cannot do that: when
     the space runs out the control moves to the next line instead. */
  .search-availability:not(.is-active),
  .search-availability.is-active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
  }

  .search-availability__heading,
  /* Same specificity as the base rule that gives the heading its own line
     on a phone, so this one actually wins here. */
  .search-availability.is-active .search-availability__heading {
    flex: 1 1 13rem;
  }

  /* An explicit basis rather than intrinsic sizing: as a flex item holding a
     flex row, `auto` makes the width depend on how the browser measures that
     row, which is where the field ends up too narrow for its placeholder.
     32rem is the field plus the gap plus the button; it shrinks from there.
     Only where the form is actually on screen — collapsed, the block is a
     single "Ändern" link and would otherwise reserve the same width. */
  .search-availability:not(.is-active) .search-availability__edit {
    flex: 0 1 32rem;
    min-width: 0;
  }

  .search-availability.is-active .search-availability__edit {
    flex: 0 0 auto;
  }

  /* Beside the heading now, so it loses the space that separated it from
     the heading above. */
  .search-availability__edit .search-location {
    margin-top: 0;
  }
}

/* The theme otherwise stacks the entire header between 900 and 1000 px,
   even though the search page has already switched to its desktop layout. */
@media (min-width: 900px) and (max-width: 1000px) {
  header.header-logged > .main-header {
    flex-direction: row !important;
    gap: 1rem;
  }

  header.header-logged > .main-header > .logo {
    flex: 0 0 11rem;
    min-width: 9rem;
    max-width: 11rem;
  }

  header.header-logged > .main-header > .search-input-container {
    flex: 1 1 auto;
    min-width: 14rem;
    max-width: none;
    width: auto;
  }

  header.header-logged > .main-header > .action {
    flex: 0 0 18rem;
    min-width: 18rem;
    max-width: 18rem;
    width: auto;
  }

  header.header-logged > .main-header > .action .button {
    white-space: nowrap;
  }
}

@media (min-width: 1250px) {
  .view-search__layout {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 2.5rem;
  }

  .view-search__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- While an AJAX update is in flight ------------------------------- */

.view-search__results {
  transition: opacity 0.15s ease;
}

.view-search__results.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .view-search__sidebar,
  .search-filters__toggle::after,
  .view-search__results {
    transition: none;
  }
}

/* --- A landing-page section ------------------------------------------ */

/* The section sits inside the paragraph's own container, which already
   provides the gutter and the width the search page has to give itself. */
.view-search.view-search--embed {
  max-width: none;
  padding: 0;
}

/* Nothing stands beside a section, so it reaches three columns at the width
   the search page still needs for two. These are the widths the section had
   before it was served by the index — same layout, new source. */
@media (min-width: 480px) {
  .view-search--embed .view-search__rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (min-width: 900px) {
  .view-search--embed .view-search__rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}