/* Keep every header utility in the same right-side drawer. */
.search-panel,
.login-panel,
.cart-panel {
  font-family: "Book Antiqua Local", "Book Antiqua", Palatino, serif;
}

.search-panel button,
.search-panel input,
.login-panel button,
.login-panel input,
.cart-panel button,
.cart-panel input {
  font-family: inherit;
}

.search-panel,
.search-panel * {
  font-family: "Book Antiqua Local", "Book Antiqua", Palatino, serif;
}

.search-panel .search-input {
  min-height: 50px;
  padding: 5px 0 9px;
  line-height: 1.35;
  overflow: visible;
}

.search-panel .search-result b,
.search-panel .search-discover h2,
.search-panel .search-empty h2 {
  font-weight: 400;
}

.search-panel .search-result > span {
  display: grid;
  grid-template-rows: 2.3em 2.6em auto;
  align-content: start;
}

.search-panel .search-result b {
  grid-row: 1;
  display: -webkit-box;
  min-height: 2.3em;
  line-height: 1.15;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.search-panel .search-result small {
  grid-row: 2;
  min-height: 2.6em;
  line-height: 1.3;
  overflow: hidden;
}

.search-panel .search-result em {
  grid-row: 3;
}

.login-panel .panel-head > span,
.login-panel .login-content,
.login-panel .login-content h2,
.login-panel .login-content p,
.login-panel .login-content button,
.login-panel .login-content a,
.login-panel .login-content small {
  font-family: "Book Antiqua Local", "Book Antiqua", Palatino, serif;
}

.search-panel,
.cart-panel {
  z-index: 160;
  inset: 0 0 0 auto;
  width: min(500px, 100%);
  height: 100dvh;
  min-height: 100dvh;
  padding: max(24px, calc(env(safe-area-inset-top) + 18px)) 24px 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;
  right: 0;
  left: auto;
  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: 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; }

/* Keep the account drawer above the shared dimming layer. */
.login-panel.open { z-index: 160; }

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

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

.login-panel .panel-head > span {
  margin-top: 3px;
  font-family: "Book Antiqua Local", "Book Antiqua", Palatino, serif;
  font-size: 18px;
  line-height: 1;
}

@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; }
}