.mps-search-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, .44);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.mps-search-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mps-search-panel__close {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  justify-self: end;
  color: #171717;
  font: 300 36px/1 var(--mps-font-body);
  cursor: pointer;
}

.mps-search-panel__dialog { min-height: min(578px,100vh); background: #f9f8f6; color: #161616; transform: translateY(-28px); transition: transform 260ms ease; }
.mps-search-panel.is-open .mps-search-panel__dialog { transform: translateY(0); }
.mps-search-panel__bar { display: grid; min-height: 58px; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 5px solid #202020; border-bottom: 1px solid #e6e2df; padding: 0 54px; }
.mps-search-panel__bar p { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mps-search-panel__back { justify-self: start; border: 0; padding: 0; background: transparent; color: #171717; font: 600 12px/1 var(--mps-font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.mps-search-panel__back span { margin-left: 10px; }
.mps-search-panel__inner { padding-block: 58px 64px; }
.mps-search-panel__title { margin: 0 0 16px; font-size: clamp(58px,5vw,84px); font-weight: 400; line-height: 1.05; }
.mps-search-panel__form { display: grid; grid-template-columns: 1fr 68px; border-bottom: 1px solid #a9a4a0; }
.mps-search-panel__input { min-width: 0; height: 74px; border: 0; padding: 0; background: transparent; color: #171717; font: 500 18px/1.3 var(--mps-font-body); outline: 0; box-shadow: none; appearance: none; }
.mps-search-panel__input:focus,
.mps-search-panel__input:focus-visible { border: 0; outline: 0; box-shadow: none; }
.mps-search-panel__input::placeholder { color: #747474; }
.mps-search-panel__submit { display: grid; width: 68px; height: 74px; place-items: center; border: 0; background: transparent; color: #111; font: 400 34px/1 var(--mps-font-body); cursor: pointer; }
.mps-search-panel__popular { margin-top: 54px; }
.mps-search-panel__popular-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mps-search-panel__popular-heading p,
.mps-search-panel__popular-heading a { margin: 0; color: #171717; font-size: 12px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.mps-search-panel__popular-heading a { border-bottom: 1px solid #171717; padding-bottom: 8px; }
.mps-search-products { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px; }
.mps-search-product { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; color: #171717; text-decoration: none; }
.mps-search-product__image { display: grid; width: 96px; height: 112px; place-items: center; background: #fff; }
.mps-search-product__image img { width: 100%; height: 100%; object-fit: contain; }
.mps-search-product__content { display: grid; gap: 8px; }
.mps-search-product__content strong { font-family: var(--mps-font-heading); font-size: 17px; font-weight: 400; line-height: 1.25; }
.mps-search-product__content span { font-size: 14px; }

@media (max-width: 1279px) {
  .mps-search-products { gap: 22px; }
}

@media (max-width: 1024px) {
  .mps-search-products { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .mps-search-panel__bar { min-height: 52px; padding: 0 var(--gutter-mobile); }
  .mps-search-panel__bar p { display: none; }
  .mps-search-panel__inner { padding-block: 36px 48px; }
  .mps-search-panel__title { margin-bottom: 20px; font-size: 42px; }
  .mps-search-panel__form { grid-template-columns: 1fr 52px; }
  .mps-search-panel__input { height: 60px; font-size: 15px; }
  .mps-search-panel__submit { width: 52px; height: 60px; font-size: 27px; }
  .mps-search-panel__popular { margin-top: 40px; }
  .mps-search-products { grid-template-columns: 1fr; gap: 16px; }
  .mps-search-product { grid-template-columns: 72px 1fr; }
  .mps-search-product__image { width: 72px; height: 82px; }
  .mps-search-product__content strong { font-size: 15px; }
}