/* Shared header ownership layer. Keep page templates from redefining its geometry. */
:root {
  --supei-shared-header-height: 56px;
  --supei-shared-header-height-scrolled: 54px;
  --supei-shared-header-control: 44px;
}

body .supei-hf-header {
  height: var(--supei-shared-header-height) !important;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid rgba(203, 213, 225, 0.78);
}

body.supei-header-scrolled .supei-hf-header {
  height: var(--supei-shared-header-height-scrolled) !important;
}

body .supei-hf-header__inner,
body.supei-header-scrolled .supei-hf-header__inner {
  width: 100% !important;
  max-width: 1280px !important;
  height: 100%;
  margin: 0 auto;
  padding-right: 16px !important;
  padding-left: 16px !important;
  gap: 20px !important;
}

body .supei-hf-search-slot {
  position: relative;
  flex: 0 0 var(--supei-shared-header-control);
  width: var(--supei-shared-header-control);
  height: var(--supei-shared-header-control);
  margin-left: auto;
  z-index: 740;
}

body .supei-hf-search.supei-hf-search--compact,
body.supei-header-scrolled .supei-hf-search.supei-hf-search--compact {
  position: relative;
  display: block;
  flex: 0 0 var(--supei-shared-header-control);
  width: var(--supei-shared-header-control);
  min-width: var(--supei-shared-header-control);
  max-width: var(--supei-shared-header-control);
  height: var(--supei-shared-header-control);
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body .supei-hf-search.supei-hf-search--compact:not(.is-expanded),
body.supei-header-scrolled .supei-hf-search.supei-hf-search--compact:not(.is-expanded) {
  min-height: var(--supei-shared-header-control);
  max-height: var(--supei-shared-header-control);
}

body .supei-hf-search--compact:not(.is-expanded) .supei-hf-search__input,
body.supei-header-scrolled .supei-hf-search--compact:not(.is-expanded) .supei-hf-search__input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  visibility: hidden;
  pointer-events: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body .supei-hf-search--compact:not(.is-expanded) .supei-hf-search__btn,
body.supei-header-scrolled .supei-hf-search--compact:not(.is-expanded) .supei-hf-search__btn {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--supei-shared-header-control);
  min-width: var(--supei-shared-header-control);
  max-width: var(--supei-shared-header-control);
  height: var(--supei-shared-header-control);
  min-height: var(--supei-shared-header-control);
  padding: 0;
  margin: 0;
  transform: none;
  color: #17202a;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
}

body .supei-hf-search--compact:not(.is-expanded) .supei-hf-search__btn:hover,
body .supei-hf-search--compact:not(.is-expanded) .supei-hf-search__btn:focus-visible {
  color: #b4232d;
  background: #f3f4f6;
}

body .supei-hf-search--compact.is-expanded,
body.supei-header-scrolled .supei-hf-search--compact.is-expanded {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  min-width: min(360px, calc(100vw - 32px));
  max-width: min(420px, calc(100vw - 32px));
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  overflow: visible;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
}

body .supei-hf-search--compact.is-expanded .supei-hf-search__input,
body.supei-header-scrolled .supei-hf-search--compact.is-expanded .supei-hf-search__input {
  position: static;
  display: block;
  width: 100%;
  height: 46px;
  min-width: 0;
  min-height: 46px;
  padding: 0 54px 0 14px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  visibility: visible;
  pointer-events: auto;
  color: #17202a;
  border: 0;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
  font-size: 16px;
}

body .supei-hf-search--compact.is-expanded .supei-hf-search__input::placeholder {
  color: #64748b;
  opacity: 1;
}

body .supei-hf-search--compact.is-expanded .supei-hf-search__btn,
body.supei-header-scrolled .supei-hf-search--compact.is-expanded .supei-hf-search__btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  transform: none;
  color: #17202a;
  border: 0;
  border-radius: 5px;
  background: transparent;
}

body .supei-hf-search--compact.is-expanded .supei-hf-search__suggestions:not([hidden]) {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  max-height: min(60vh, 380px);
  overflow: auto;
  z-index: 1001;
}

@media (max-width: 992px) {
  body .supei-hf-topbar,
  body .supei-hf-quickbar {
    display: none;
  }

  body .supei-hf-header__inner,
  body.supei-header-scrolled .supei-hf-header__inner {
    gap: 8px !important;
  }

  body .supei-hf-actions,
  body.supei-header-scrolled .supei-hf-actions {
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    justify-content: flex-end;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  :root {
    --supei-shared-header-height: 56px;
    --supei-shared-header-height-scrolled: 56px;
  }

  html {
    scroll-padding-top: calc(var(--supei-shared-header-height) + 16px);
  }

  body .supei-hf-header__inner,
  body.supei-header-scrolled .supei-hf-header__inner {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  body .supei-hf-logo,
  body.supei-header-scrolled .supei-hf-logo {
    flex: 0 1 auto;
    min-width: 0;
    gap: 4px;
  }

  body .supei-hf-actions,
  body.supei-header-scrolled .supei-hf-actions {
    flex: 0 0 calc(var(--supei-shared-header-control) + 52px);
    padding-right: 52px;
  }

  body .supei-hf-actions .supei-hf-actions__btn--wishlist {
    display: none;
  }

  body .supei-hf-actions .supei-hf-actions__btn[data-cart-drawer-trigger],
  body.supei-header-scrolled .supei-hf-actions .supei-hf-actions__btn[data-cart-drawer-trigger] {
    display: none;
  }

  body .supei-hf-search--compact.is-expanded,
  body.supei-header-scrolled .supei-hf-search--compact.is-expanded {
    position: fixed;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--supei-shared-header-height) + 8px);
    right: 12px;
    left: 12px;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 420px) {
  body .supei-hf-logo,
  body.supei-header-scrolled .supei-hf-logo {
    --supei-hf-logo-height: 25px;
    --supei-hf-logo-max-width: 86px;
    --supei-hf-wordmark-size: 14px;
    --supei-hf-wordmark-gap: 2px;
  }

}

@media (max-width: 360px) {
  body .supei-hf-logo__wordmark,
  body.supei-header-scrolled .supei-hf-logo__wordmark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .supei-hf-search--compact.is-expanded {
    transition: none;
  }
}