/* One lightweight generated illustration; no live blur over the movie. */
.header-order {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 11px;
  width: 264px;
  min-height: 54px;
  padding: 7px 13px 7px 102px;
  margin-inline: auto;
  border: 1px solid rgba(226, 199, 255, .42);
  border-radius: 18px;
  background: radial-gradient(ellipse at 25% 5%, rgba(231, 196, 255, .26), transparent 70%),
    linear-gradient(125deg, #665075, #4b325e 55%, #392844);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(231, 199, 255, .09),
    0 4px 16px rgba(8, 3, 17, .16);
  color: #fff7ff;
  isolation: isolate;
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.header-order::before {
  content: "";
  position: absolute;
  inset: 0 0 50%;
  border-radius: 17px 17px 50% 15%;
  background: linear-gradient(130deg, rgba(255, 255, 255, .13), transparent 80%);
  pointer-events: none;
  z-index: -1;
}
.header-order__art {
  position: absolute;
  left: -15px;
  top: 50%;
  width: 124px;
  height: 83px;
  transform: translateY(-50%) rotate(-4deg);
  pointer-events: none;
  transition: transform 350ms cubic-bezier(.2, .75, .25, 1);
}
.header-order__art img { width: 100%; height: 100%; object-fit: contain; }
.header-order__copy { display: grid; gap: 3px; min-width: 0; }
.header-order__copy strong { font-size: 16px; font-weight: 550; letter-spacing: -.025em; line-height: 1.15; }
.header-order__copy small { font-size: 8px; color: #e3cfee; white-space: nowrap; letter-spacing: .025em; }
.header-order__arrow { margin-left: auto; display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid #d9b8ef40; border-radius: 50%; background: #ead1ff0c; }
.header-order__arrow svg { width: 12px; height: 12px; }
.header-order:focus-visible { outline: 2px solid #f5dfff; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .header-order:hover { border-color: #e9c8ffbd; box-shadow: inset 0 1px 0 #ffffff60, 0 5px 23px #b686e332; }
  .header-order:hover .header-order__art,
  .header-order:focus-visible .header-order__art { transform: translateY(-54%) rotate(-7deg) scale(1.045); }
}
@media (min-width: 1400px) {
  .header-order { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
}
@media (min-width: 701px) and (max-width: 1399px) {
  .site-header { gap: 22px; }
  .desktop-nav { margin-left: 0; margin-right: 0; gap: 24px; }
  .header-order { width: 238px; padding-left: 94px; }
  .header-order__art { width: 115px; height: 77px; }
  .header-order__arrow { flex-basis: 23px; height: 23px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .site-header { gap: 16px; }
  .header-socials { display: none; }
  .desktop-nav { gap: 20px; }
  .header-order { width: 182px; min-height: 48px; padding-left: 75px; gap: 7px; }
  .header-order__art { left: -10px; width: 88px; height: 59px; }
  .header-order__copy small { display: none; }
  .header-order__copy strong { font-size: 15px; }
  .login-link { padding-left: 14px; gap: 9px; }
}
@media (max-width: 760px) and (min-width: 701px) {
  .header-order { width: 158px; padding-left: 67px; }
  .header-order__art { width: 78px; height: 52px; }
  .header-order__arrow { display: none; }
  .site-header { gap: 13px; }
  .desktop-nav { gap: 15px; }
}
@media (max-width: 700px), (any-pointer: coarse) and (max-height: 500px) {
  /* The order pill takes the space between the logo and the menu, so its
     artwork never overlaps the logo on narrow phones. */
  .site-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .site-header > .header-order { justify-self: center; }
  .site-header > .brand { justify-self: start; }
  .site-header .header-actions { justify-self: end; margin-left: 0; }
  .site-header .login-link { display: none; }
  .header-order { position: relative; inset: auto; transform: none; margin: 0; width: 142px; min-height: 44px; padding: 6px 11px 6px 71px; border-radius: 15px; gap: 0; }
  .header-order__art { left: -9px; width: 84px; height: 56px; }
  .header-order__copy strong { font-size: 14px; }
  .header-order__copy small, .header-order__arrow { display: none; }
}
@media (max-width: 359px) {
  .site-header { padding-inline: 10px; gap: 6px; }
  .site-header .brand, .site-header .brand img { width: 75px; }
  .header-order { width: 124px; padding-left: 59px; }
  .header-order__art { left: -8px; width: 69px; height: 46px; }
  .header-order__copy strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .header-order, .header-order__art { transition: none; }
  .header-order:hover .header-order__art, .header-order:focus-visible .header-order__art { transform: translateY(-50%) rotate(-4deg); }
}