.mps-header-search {
  --mps-hs-height: 48px;
  --mps-hs-min-width: 44px;
  --mps-hs-max-width: 360px;
  --mps-hs-inline-width: 300px;
  --mps-hs-bg: #fff;
  --mps-hs-text: #181818;
  --mps-hs-placeholder: #7c746a;
  --mps-hs-icon: #2b241c;
  --mps-hs-focus: #9E835C;
  --mps-hs-hover-bg: #f7f3ed;
  --mps-hs-submit-bg: #9E835C;
  --mps-hs-submit-color: #fff;
  --mps-hs-padding-top: 0px;
  --mps-hs-padding-right: 14px;
  --mps-hs-padding-bottom: 0px;
  --mps-hs-padding-left: 14px;
  --mps-hs-gap: 9px;
  --mps-hs-radius: 14px;
  --mps-hs-icon-size: 19px;
  --mps-hs-backdrop: rgba(20,17,13,.82);
  --mps-hs-backdrop-opacity: 100%;
  --mps-hs-backdrop-blur: 8px;
  --mps-hs-dialog-width: 680px;
  --mps-hs-dialog-bg: rgba(255,255,255,.12);
  --mps-hs-dialog-border: rgba(255,255,255,.2);
  --mps-hs-dialog-surface-bg: rgba(255,255,255,.88);
  --mps-hs-dialog-input-bg: rgba(255,255,255,.76);
  --mps-hs-dialog-action-bg: #9E835C;
  --mps-hs-dialog-action-color: #fff;
  --mps-hs-dialog-close-color: #fff;
  --mps-hs-dialog-close-bg: rgba(255,255,255,.12);
  --mps-hs-dialog-close-hover-color: #fff;
  --mps-hs-dialog-close-hover-bg: rgba(255,255,255,.22);
  --mps-hs-dialog-close-hover-border: rgba(255,255,255,.32);
  --mps-hs-close-button-size: 44px;
  --mps-hs-close-icon-size: 20px;
  --mps-hs-overlay-duration: 240ms;
  --mps-hs-title: #181818;
  --mps-hs-desc: #6f665b;
  --mps-hs-closed-width: 48px;
  --mps-hs-open-width: 300px;
  --mps-hs-open-bg: #fff;
  --mps-hs-duration: 260ms;
  position: relative;
  display: inline-flex;
  min-width: var(--mps-hs-min-width);
  max-width: min(100%, var(--mps-hs-max-width));
  color: var(--mps-hs-text);
}

.mps-header-search button { border: 0; cursor: pointer; }
.mps-header-search svg,
.mps-header-search i { width: var(--mps-hs-icon-size); height: var(--mps-hs-icon-size); font-size: var(--mps-hs-icon-size); line-height: 1; display: block; }
.mps-header-search svg [fill]:not([fill="none"]):not([fill^="url("]),
.mps-header-search svg:not([fill="none"]) { fill: currentColor; }
.mps-header-search svg [stroke]:not([stroke="none"]):not([stroke^="url("]),
.mps-header-search svg:not([stroke="none"]) { stroke: currentColor; }

.mps-header-search__surface,
.mps-header-search__toggle {
  min-height: var(--mps-hs-height);
  border-radius: var(--mps-hs-radius);
  background: var(--mps-hs-bg);
  color: var(--mps-hs-icon);
}

.mps-header-search__surface {
  display: flex;
  align-items: center;
  gap: var(--mps-hs-gap);
  width: 100%;
  padding: var(--mps-hs-padding-top) var(--mps-hs-padding-right) var(--mps-hs-padding-bottom) var(--mps-hs-padding-left);
}

.mps-header-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--mps-hs-text);
  outline: 0;
  font: inherit;
}
.mps-header-search__input::placeholder { color: var(--mps-hs-placeholder); opacity: 1; }

.mps-header-search__clear,
.mps-header-search__submit,
.mps-header-search__toggle,
.mps-header-search__collapse,
.mps-header-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--mps-hs-icon);
  background: transparent;
}

.mps-header-search__submit {
  min-height: calc(var(--mps-hs-height) - 12px);
  padding: 0 14px;
  border-radius: calc(var(--mps-hs-radius) - 4px);
  background: var(--mps-hs-submit-bg);
  color: var(--mps-hs-submit-color);
}

.mps-header-search__surface:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mps-hs-focus) 22%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
  .mps-header-search__surface:focus-within { box-shadow: 0 0 0 3px rgba(158,131,92,.22); }
}

.mps-header-search__message {
  margin: 10px 4px 0;
  font-size: 13px;
  color: var(--mps-hs-desc);
}

.mps-header-search__suggestions {
  margin-top: 12px;
  border-radius: calc(var(--mps-hs-radius) + 4px);
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  overflow: hidden;
}

.mps-header-search__suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: inherit;
  text-decoration: none;
}
.mps-header-search__suggestion:hover,
.mps-header-search__suggestion:focus-visible { background: rgba(158,131,92,.08); outline: 0; }
.mps-header-search__suggestion + .mps-header-search__suggestion { border-top: 1px solid rgba(15,23,42,.06); }
.mps-header-search__suggestion-thumb { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.mps-header-search__suggestion-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mps-header-search__suggestion-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mps-header-search__suggestion-title { font-weight: 700; color: #181818; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mps-header-search__suggestion-meta { color: #6b7280; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fullscreen */
.mps-header-search--fullscreen .mps-header-search__toggle {
  width: var(--mps-hs-height);
  min-width: var(--mps-hs-min-width);
  height: var(--mps-hs-height);
  border-radius: 999px;
  padding: 0;
}
.mps-header-search--fullscreen .mps-header-search__toggle:hover,
.mps-header-search--fullscreen .mps-header-search__toggle:focus-visible { background: var(--mps-hs-hover-bg); outline: 0; }

.mps-header-search__overlay[hidden] { display: none !important; }
.mps-header-search__overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--mps-hs-overlay-duration) ease, visibility 0s linear var(--mps-hs-overlay-duration);
}
.mps-header-search__overlay.is-opening,
.mps-header-search__overlay.is-open,
.mps-header-search__overlay.is-closing {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.mps-header-search__overlay.is-opening,
.mps-header-search__overlay.is-open { opacity: 1; }
.mps-header-search__overlay.is-closing { opacity: 0; }
.mps-header-search__backdrop {
  position: absolute;
  inset: 0;
  background: var(--mps-hs-backdrop);
  opacity: 0;
  backdrop-filter: blur(var(--mps-hs-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--mps-hs-backdrop-blur));
  transition: opacity var(--mps-hs-overlay-duration) ease;
}
.mps-header-search__overlay.is-opening .mps-header-search__backdrop,
.mps-header-search__overlay.is-open .mps-header-search__backdrop {
  opacity: calc(var(--mps-hs-backdrop-opacity) / 100%);
}
.mps-header-search__dialog {
  position: relative;
  z-index: 1;
  width: min(var(--mps-hs-dialog-width), calc(100vw - 40px));
  max-width: 100%;
  padding: 34px;
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mps-hs-dialog-bg) 88%, white 12%), var(--mps-hs-dialog-bg));
  border: 1px solid var(--mps-hs-dialog-border);
  box-shadow: 0 28px 80px rgba(6, 10, 18, .28), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity var(--mps-hs-overlay-duration) ease, transform var(--mps-hs-overlay-duration) cubic-bezier(.2,.75,.25,1);
  will-change: opacity, transform;
}
.mps-header-search__overlay.is-opening .mps-header-search__dialog,
.mps-header-search__overlay.is-open .mps-header-search__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mps-header-search__overlay.is-closing .mps-header-search__dialog {
  opacity: 0;
  transform: translateY(8px) scale(.99);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .mps-header-search__dialog { background: var(--mps-hs-dialog-bg); }
}
.mps-header-search__dialog::before {
  content: '';
  position: absolute;
  inset: -18% auto auto -12%;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(184,159,123,.20), rgba(184,159,123,0));
  pointer-events: none;
}
.mps-header-search__header {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
.mps-header-search__header h2 { margin: 0; color: var(--mps-hs-title); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.mps-header-search__header p { margin: 10px 0 0; color: var(--mps-hs-desc); font-size: 15px; line-height: 1.7; }
.mps-header-search__close {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  width: var(--mps-hs-close-button-size);
  height: var(--mps-hs-close-button-size);
  min-width: var(--mps-hs-close-button-size);
  min-height: var(--mps-hs-close-button-size);
  padding: 0;
  border-radius: 999px;
  color: var(--mps-hs-dialog-close-color);
  background: var(--mps-hs-dialog-close-bg);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mps-header-search__close svg,
.mps-header-search__close i {
  width: var(--mps-hs-close-icon-size) !important;
  height: var(--mps-hs-close-icon-size) !important;
  max-width: 100%;
  max-height: 100%;
  font-size: var(--mps-hs-close-icon-size) !important;
  color: currentColor;
  flex: 0 0 auto;
}
.mps-header-search__close svg [fill]:not([fill="none"]):not([fill^="url("]),
.mps-header-search__close svg:not([fill="none"]) { fill: currentColor; }
.mps-header-search__close svg [stroke]:not([stroke="none"]):not([stroke^="url("]),
.mps-header-search__close svg:not([stroke="none"]) { stroke: currentColor; }
.mps-header-search__close:hover,
.mps-header-search__close:focus-visible {
  color: var(--mps-hs-dialog-close-hover-color);
  background: var(--mps-hs-dialog-close-hover-bg);
  border-color: var(--mps-hs-dialog-close-hover-border);
  outline: 0;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mps-hs-focus) 28%, transparent);
}
.mps-header-search--fullscreen .mps-header-search__form { position: relative; z-index: 1; }
.mps-header-search--fullscreen .mps-header-search__surface {
  background: var(--mps-hs-dialog-surface-bg);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  min-height: 74px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 36px rgba(15,23,42,.08);
}
.mps-header-search--fullscreen .mps-header-search__input {
  min-height: 54px;
  padding: 0 10px;
  color: var(--mps-hs-text);
  background: var(--mps-hs-dialog-input-bg);
  border-radius: 14px;
  font-size: 18px;
}
.mps-header-search--fullscreen .mps-header-search__input::placeholder { color: var(--mps-hs-placeholder); }
.mps-header-search--fullscreen .mps-header-search__surface:focus-within {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 38px rgba(15,23,42,.1), 0 0 0 3px color-mix(in srgb, var(--mps-hs-focus) 26%, transparent);
}
.mps-header-search--fullscreen .mps-header-search__submit {
  min-width: 58px;
  min-height: 54px;
  padding: 0 18px;
  background: var(--mps-hs-dialog-action-bg);
  color: var(--mps-hs-dialog-action-color);
}
.mps-header-search--fullscreen .mps-header-search__clear { min-width: 40px; min-height: 40px; border-radius: 999px; }
.mps-header-search--fullscreen .mps-header-search__clear:hover,
.mps-header-search--fullscreen .mps-header-search__clear:focus-visible {
  background: rgba(15,23,42,.06);
  outline: 0;
}
.mps-header-search--fullscreen .mps-header-search__message { color: rgba(255,255,255,.88); margin: 14px 2px 0; }
.mps-header-search--fullscreen .mps-header-search__suggestions {
  margin-top: 16px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.24);
}

/* Inline */
.mps-header-search--inline { width: min(100%, var(--mps-hs-inline-width)); max-width: none; }
.mps-header-search--inline .mps-header-search__form { width: 100%; }

/* Expandable */
.mps-header-search--expandable {
  width: auto;
  max-width: none;
}
.mps-header-search__expand-shell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  min-width: var(--mps-hs-closed-width);
  max-width: min(100%, var(--mps-hs-open-width));
  transition: width var(--mps-hs-duration) ease;
}
.mps-header-search--expandable.is-open .mps-header-search__expand-shell {
  width: min(100%, var(--mps-hs-open-width));
}
.mps-header-search--expandable .mps-header-search__toggle,
.mps-header-search--expandable .mps-header-search__collapse {
  width: var(--mps-hs-closed-width);
  height: var(--mps-hs-height);
  border-radius: 999px;
}
.mps-header-search__expand-form { width: 0; overflow: hidden; opacity: 0; transition: width var(--mps-hs-duration) ease, opacity var(--mps-hs-duration) ease; }
.mps-header-search--expandable.is-open .mps-header-search__expand-form { width: min(100%, var(--mps-hs-open-width)); opacity: 1; }
.mps-header-search--expandable .mps-header-search__surface { background: var(--mps-hs-open-bg); }

@media (max-width: 1024px) {
  .mps-header-search__dialog { width: min(var(--mps-hs-dialog-width), calc(100vw - 32px)); padding: 28px; }
}

@media (max-width: 767px) {
  .mps-header-search__overlay { padding: 16px; }
  .mps-header-search__dialog {
    width: calc(100vw - 32px);
    padding: 22px 18px 18px;
    border-radius: 22px;
  }
  .mps-header-search__close {
    inset-block-start: 14px;
    inset-inline-end: 14px;
  }
  .mps-header-search__header { padding-inline-end: 74px; }
  .mps-header-search__header h2 { font-size: 22px; }
  .mps-header-search__header p { font-size: 14px; }
  .mps-header-search--fullscreen .mps-header-search__surface {
    min-height: 64px;
    border-radius: 18px;
  }
  .mps-header-search--fullscreen .mps-header-search__input { min-height: 48px; font-size: 16px; }
  .mps-header-search--fullscreen .mps-header-search__submit { min-height: 48px; min-width: 48px; padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mps-header-search__overlay,
  .mps-header-search__dialog,
  .mps-header-search__surface,
  .mps-header-search__expand-form,
  .mps-header-search__expand-shell,
  .mps-header-search__toggle,
  .mps-header-search__submit,
  .mps-header-search__clear,
  .mps-header-search__close {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}
