/* Search overlay redesign (mobile + desktop). Two <details-modal
   class="header__search"> instances exist in header.blade.php -- one
   before the logo (shown at desktop widths), one inside .header__icons
   (shown on mobile) -- toggled by a header-layout.css breakpoint. Both
   share the same markup/classes, so everything here targets ".header__search"
   generically and applies to whichever instance is actually visible.

   base.css centers the search form dead-center of the full-screen overlay
   (align-items/justify-content: center on both .modal__content and
   .search-modal__content), which floats a plain white/red-bordered input
   in an empty void with nothing else on screen -- on both mobile and
   desktop. This anchors it to the top like a real search page, re-themes
   it to the site's maroon/cream/gold premium palette (already used by the
   footer, utility bar and mobile header), and gives the empty state
   something useful to do: browse the same categories the nav uses,
   instead of staring at a blank screen. */

.header__search .search-modal.modal__content {
  --color-background: 44, 12, 18;
  --gradient-background: #2c0c12;
  --color-foreground: 244, 236, 224;
  align-items: flex-start;
}

.header__search .search-modal__content {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 100%;
  overflow-y: auto;
}

/* Placed at the top via flex "order" rather than position: absolute --
   absolute positioning on this button triggers a Chromium rendering bug
   where its SVG icon paints only its top half (confirmed by toggling the
   position property alone: the X icon is complete under static/relative
   positioning and silently truncates under absolute, independent of any
   other CSS here). order + align-self achieves the same visual result
   entirely in normal flow. */
.header__search .search-modal__close-button {
  order: -1;
  align-self: flex-end;
  margin-bottom: 1.4rem;
}

.header__search predictive-search.search-modal__form {
  width: 100%;
  max-width: 60rem;
}

.header__search .field::before {
  border-color: rgba(176, 141, 87, 0.5);
}

.header__search .field:focus-within::before {
  border-color: rgb(176, 141, 87);
}

.header__search .search__button,
.header__search .reset__button {
  color: rgb(176, 141, 87);
}

/* predictive-search.js expects a global `routes.predictive_search_url`
   (the Shopify-injected object this Laravel port never sets up), so typing
   throws "routes is not defined" the instant a keystroke fires a lookup --
   before that, it has already set the [loading] attribute, and since the
   throw happens synchronously it's never cleared. The empty bordered
   results box (component-predictive-search.css shows it while
   predictive-search[loading]) is then stuck open forever, floating over
   the category chips below. There's no live-suggestions backend to wire
   up here, so hide this container rather than leave a broken stuck box;
   the plain form submit (Enter / the search icon) still works via the
   real /search route. */
.header__search .predictive-search {
  display: none !important;
}

.search-modal__discover {
  width: 100%;
  max-width: 60rem;
  margin: 2.6rem auto 0;
}

.search-modal__discover-heading {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.09rem;
  text-transform: uppercase;
  color: rgb(176, 141, 87);
  margin: 0 0 1.4rem;
}

.search-modal__discover-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.4rem;
}

.search-modal__discover-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  border: 0.1rem solid rgba(244, 236, 224, 0.25);
  border-radius: 3rem;
  color: rgb(244, 236, 224);
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.search-modal__discover-chip:hover,
.search-modal__discover-chip:focus-visible {
  border-color: rgb(176, 141, 87);
  background-color: rgba(176, 141, 87, 0.12);
  color: rgb(176, 141, 87);
}

.search-modal__discover-chip-icon {
  width: 0.6rem;
  height: 0.6rem;
  background: rgb(176, 141, 87);
  transform: rotate(45deg);
  flex: none;
}

.search-modal__discover-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.3rem;
  border: 0.1rem solid rgba(176, 141, 87, 0.5);
  border-radius: 0.6rem;
  background: linear-gradient(135deg, rgba(176, 141, 87, 0.16), rgba(176, 141, 87, 0.04));
  color: rgb(244, 236, 224);
  font-weight: 600;
  font-size: 1.5rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.search-modal__discover-viewall:hover,
.search-modal__discover-viewall:focus-visible {
  background: linear-gradient(135deg, rgba(176, 141, 87, 0.24), rgba(176, 141, 87, 0.08));
}

/* Mobile: full-bleed content, room at top to clear the close button. */
@media screen and (max-width: 989px) {
  .header__search .search-modal__content {
    padding: 7rem 2rem 3rem;
  }
}

/* Desktop: the overlay is much wider than the search form itself, so cap
   and center the column, and let the category chips sit centered under
   the input rather than flush to the left edge of that column. */
@media screen and (min-width: 990px) {
  .header__search .search-modal__content {
    padding: 10rem 4rem 4rem;
  }

  .search-modal__discover-grid {
    justify-content: center;
  }
}