/* Full-screen search and shopping-bag pages. */
.search-panel,
.cart-panel {
  z-index: 160;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: max(24px, calc(env(safe-area-inset-top) + 18px)) clamp(20px, 5vw, 64px) max(24px, calc(env(safe-area-inset-bottom) + 18px));
  background: #fff;
  color: #111;
  transform: translate3d(100%, 0, 0);
  overflow: hidden;
  overscroll-behavior: none;
  box-shadow: 0 -180px 0 #fff, 0 180px 0 #fff;
}

.search-panel.open,
.cart-panel.open {
  transform: translate3d(0, 0, 0);
}

.search-panel .panel-head,
.cart-panel .panel-head {
  position: relative;
  min-height: 56px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.search-panel .panel-head h1,
.cart-panel .panel-head h1 {
  margin: 3px 0 0;
  font: 34px/1 "Book Antiqua Local", "Book Antiqua", Palatino, serif;
  font-weight: 400;
}

.utility-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.utility-close span {
  position: absolute;
  top: 18px;
  left: 5px;
  width: 28px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}

.utility-close span:first-child { transform: rotate(45deg); }
.utility-close span:last-child { transform: rotate(-45deg); }
.utility-close:focus { outline: none; }
.utility-close:focus-visible { outline: 1px solid #111; outline-offset: 4px; }

.search-panel label {
  width: min(720px, 100%);
  margin: clamp(70px, 14vh, 150px) auto 0;
}

.search-panel .search-results {
  width: min(720px, 100%);
  margin: 28px auto 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cart-panel .cart-items,
.cart-panel .cart-foot {
  width: min(760px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.cart-panel .cart-items {
  padding-top: clamp(55px, 10vh, 110px);
  overscroll-behavior: contain;
}

.overlay.open { z-index: 150; }

/* The menu is an opaque full-screen page and must sit above the dimming layer. */
.mobile-panel { z-index: 170; }

@media (max-width: 850px) {
  .search-panel,
  .cart-panel {
    transition: transform .32s cubic-bezier(.22, .75, .24, 1);
    padding-left: 24px;
    padding-right: 24px;
  }

  .search-panel .panel-head h1,
  .cart-panel .panel-head h1 { font-size: 29px; }

  .search-panel .search-input { font-size: 28px; }
  .cart-panel .cart-items { padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .search-panel,
  .cart-panel { transition-duration: .01ms; }
}