/* Search bar + filters: deliberate final layout, loaded after card-refresh.css
   so it wins the cascade cleanly rather than adding another patch on top of
   the accumulated rules in style.css/postgres-ui.css. */

/* --- Search bar: consistent height, evenly aligned icon/input/buttons ---
   Deliberately no overflow:hidden on the container: it was clipping both
   the search-suggestions dropdown (positioned below this box, so it was
   rendering into the DOM correctly but invisible on screen) and the
   input's focus ring. The input gets matching rounded corners directly
   instead, since it's the only child that could otherwise show a square
   corner poking out from under the container's own rounding. */
.nav .site-search {
  display: flex;
  align-items: stretch;
  height: 48px;
  border-radius: 14px;
}
.nav .site-search-icon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.nav .site-search input {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  height: auto;
  padding-left: 16px;
  border-radius: 14px 0 0 14px;
}
.nav .site-search input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent, #a74434);
}
.nav .site-search .header-filters-button,
.nav .site-search .site-search-submit {
  flex: 0 0 48px;
  width: 48px;
  height: auto;
  align-self: stretch;
  border-radius: 0;
  border-left: 1px solid #e4d8cc;
}
.nav .site-search .site-search-submit {
  border-left: 0;
  border-radius: 0 14px 14px 0;
}

/* --- Filter facet dropdowns: clearer states, smoother open/close --- */
.facet-popover {
  transform-origin: top left;
  animation: facet-pop-in 0.14s ease-out;
}
@keyframes facet-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .facet-popover { animation: none; }
}

.facet > summary {
  transition: border-color 0.15s ease, background 0.15s ease;
}
.facet > summary::-webkit-details-marker {
  display: none;
}
.facet > summary:after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.facet[open] > summary:after {
  transform: rotate(-135deg);
}

.facet-options label {
  transition: background 0.12s ease;
  cursor: pointer;
}
.facet-options label:has(input:checked) {
  font-weight: 700;
}

/* A visible, easy target for clearing one facet's selection without
   reopening it and unchecking every box by hand. */
.facet-clear {
  display: none;
  padding: 6px 8px;
  margin-top: 2px;
  border: 0;
  background: transparent;
  color: var(--accent, #a74434);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.facet.has-selection .facet-clear {
  display: block;
}

/* The filter sheet's own primary/secondary actions, distinguished clearly. */
.filter-sheet > footer > a {
  padding: 10px 6px;
  font-weight: 700;
}
.filter-sheet > footer > button {
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}
.filter-sheet > footer > button:active {
  transform: translateY(2px);
  box-shadow: none;
}

@media (max-width: 540px) {
  .nav .site-search .header-filters-button,
  .nav .site-search .site-search-submit {
    flex-basis: 42px;
    width: 42px;
  }
}

/* Price-range / availability filter fields: the label wraps its text label
   AND the input in a column, but a fixed 46px height (from the "Search
   controls" patch) can't fit both - and the global `input{border;background}`
   rule then gives the input its own visible box, which overflows out the
   bottom of the label looking like a second, unstyled field underneath.
   Fix: auto height sized to actual content, and the input styled to sit
   invisibly inside the label's own box instead of drawing a second one. */
.price-field,
.stock-check {
  height: auto !important;
  min-height: 64px !important;
  padding: 9px 13px !important;
}
.price-field {
  justify-content: center;
  gap: 4px;
}
.price-field > input {
  height: 22px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 0.86rem;
}
.stock-check {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start !important;
  gap: 9px;
}
.stock-check input {
  width: auto !important;
}

/* Site-wide safety net: an unexpectedly long word (long URL-like author
   string, a title with no spaces, etc.) must wrap or ellipsize, never force
   a container wider than its column and never sit half-hidden with no
   indication there's more text. */
.notification-item h2,
.notification-item p,
.cart-product h3,
.cart-editor article > div strong,
.suggestion-copy strong,
.suggestion-copy small,
.library-list h2 {
  overflow-wrap: anywhere;
}