/* rr-search-ui — the header search row and the collection/search filter buttons.

   Everything below is copied from the reference storefront (whitemoonjewels.com),
   measured in the browser. Its markup is:

     <div class="wm-search">                          block, #fff, h 86
       <div class="wm-container wm-search__inner">    flex, align center, gap 16,
                                                      max-width 1400, padding 16px 61.44px
         <form class="wm-search__form">               flex, align center, gap 12, h 53
           <input class="wm-search__input">           h 44, pad 0 8, transparent,
                                                      border-bottom 1px #e3e3e3, 20px/300
           <button type="submit">Search</button>      h 53, pad 16.8 3.2, 11.52px/400, ls 2.304
         </form>
         <button class="wm-search__close">×</button>  44x44, 28px/300, far right
       </div>
     </div>

   Two things follow from that and were wrong here before:
     * the reference has NO small clear/reset "x" inside the field — Dawn ships one,
       so it is hidden;
     * the close "x" is a STATIC element at the end of the row. Dawn positions it
       absolutely, which is what left an empty white box up in the header icons.
*/

/* ---------------------------------------------------------------- the band */

.search-modal {
  position: static !important;
  display: none;
  width: 100%;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-top: 1px solid #ececec !important;
  box-shadow: none !important;
}

.search-modal.rr-search-open {
  display: block;
  /* Dawn fades the panel in with a "details[open] .search-modal { opacity: 1 }" rule.
     This panel is moved out of that <details> by rr-search-ui.js so it can sit in
     flow, so that selector never matches and the row would stay invisible. */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* there is no overlay in the reference — the row simply pushes the page down */
.search-modal .modal-overlay { display: none !important; }

/* --------------------------------------------------------------- the row */

.search-modal__content {
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto;
  padding: 16px 61.44px !important;
  /* relative, not static: the predictive dropdown below is absolute against this row */
  position: relative !important;
}

/* predictive-search wraps the form; it must not add a box of its own */
.search-modal__form,
predictive-search.search-modal__form {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  position: static;
}

.search-modal__content form.search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 53px;
  margin: 0;
}

.search-modal__content .field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 53px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.search-modal__content .field::before,
.search-modal__content .field::after { content: none; }

.search-modal__content .search__input.field__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e3e3e3;
  border-radius: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 44px;
  color: #16171b;
  box-shadow: none;
}

.search-modal__content .search__input.field__input:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #16171b;
}

.search-modal__content .search__input.field__input::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

/* the floating label sits on top of the placeholder — the reference has none */
.search-modal__content .field__label { display: none !important; }

/* the reference has no clear "x" inside the field */
.search-modal__content .reset__button,
.search-modal__content .field__button.reset__button { display: none !important; }

/* submit is the word "Search" */
.search-modal__content .search__button.field__button {
  position: static !important;
  flex: 0 0 auto;
  width: auto !important;
  height: 53px;
  display: flex;
  align-items: center;
  padding: 16.8px 3.2px;
  background: transparent;
  border: 0;
  color: #16171b;
  cursor: pointer;
}

.rr-search__submit-text {
  font-size: 11.52px;
  font-weight: 400;
  letter-spacing: 2.304px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the single close "x", static at the end of the row */
.search-modal__content .search-modal__close-button,
.search-modal .search-modal__close-button {
  position: static !important;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: #16171b;
  cursor: pointer;
}

.search-modal .search-modal__close-button svg { width: 20px; height: 20px; }

/* predictive results hang under the row rather than stretching it */
.search-modal__content .predictive-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  background: #fff;
}

@media screen and (max-width: 989px) {
  .search-modal__content { padding: 14px 20px !important; gap: 12px; }
}

@media screen and (max-width: 749px) {
  .search-modal__content { padding: 12px 16px !important; }
  .search-modal__content .search__input.field__input { font-size: 16px; }
}

/* ------------------------------------------------- filter trigger buttons

   Reference .wm-fbar__btn: inline-flex, gap 8, h 38, padding 0 12px,
   1px solid #e3e3e3, radius 0, #fff, 12px/300, letter-spacing .48px,
   UPPERCASE, caret 13x13, no underline. */

.facets__summary.facets__summary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .48px;
  text-transform: uppercase;
  color: #16171b;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}

.facets__summary.facets__summary::-webkit-details-marker { display: none; }

.facets__summary.facets__summary span,
.facets__summary.facets__summary .facets__summary-label {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.facets__summary.facets__summary svg,
.facets__summary.facets__summary .icon-caret {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin: 0;
  position: static;
}

.facets__wrapper,
.facets__form {
  align-items: center;
  gap: 12px;
}

/* ------------------------------------------------------- price filter panel

   The panel rendered BLACK because nothing above it carries a colour-scheme class,
   so it fell back to :root — and this theme's scheme 1 ships
   --color-background: 0,0,0 against --color-foreground: 18,18,18. Explicit colours
   here rather than repainting scheme 1 site-wide.

   Doubled class because component-facets.css loads with the section, i.e. after
   this file, and would win on source order at equal specificity. */

.facets__display.facets__display {
  background: #ffffff;
  border: 1px solid rgba(22, 23, 27, .12);
  border-radius: 0;
  box-shadow: 0 12px 40px rgba(22, 23, 27, .14);
  color: #16171b;
}

.facets__display.facets__display .facets__header,
.facets__display.facets__display .facets__selected {
  background: #ffffff;
  color: #16171b;
}

.facets__display.facets__display .field__input,
.facets__price .field__input {
  height: 36px;
  padding: 0 8px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  font-size: 12px;
  font-weight: 300;
  color: #16171b;
  box-shadow: none;
}

.facets__display .field::before,
.facets__display .field::after { content: none; }

.facets__display .field__label {
  color: #6b6b6b;
  font-size: 12px;
}

.facets__display .facets__button,
.facets__display button[type="submit"] {
  height: 36px;
  padding: 0 16px;
  background: #16171b;
  border: 0;
  border-radius: 0;
  color: #f4f3f0;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
}

/* The search icon's own close "x".

   base.css: `.header__icon-close{display:none}` and
             `details[open] .header__icon-close{display:inline-block}`
   In stock Dawn the open modal covers the header, so only that x is ever seen. Our row
   sits BELOW the nav, so the magnifier and the x both showed, stacked on each other.
   The reference keeps only the magnifier up here — its close x lives in the row, which
   ours already has. Scoped to the search icon so the menu drawer's own close is
   untouched. */
.header__icon--search .header__icon-close {
  display: none !important;
}