/*
 * Restock request modal.
 *
 * Not part of the Claude Design export - the mockup's request button only flipped
 * a local flag, with nowhere to put an email address. Colours and radii are taken
 * from the design so it reads as the same surface.
 */
#ej-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.ej-m-scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 16, 0.72);
  backdrop-filter: blur(3px);
  animation: ejMFade 220ms ease-out both;
}

.ej-m-box {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  margin: max(8vh, 24px) auto 24px;
  background: #1B0E28;
  border: 1px solid #33203F;
  border-radius: 18px;
  padding: 26px 26px 22px;
  color: #F5EBE2;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: ejMRise 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
  max-height: 88vh;
  overflow-y: auto;
}

@keyframes ejMFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ejMRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985) }
  to   { opacity: 1; transform: none }
}

.ej-m-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #B9A6C4;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ej-m-x:hover { background: #2A0C1B; color: #F0B6C9 }

.ej-m-head { display: flex; gap: 15px; align-items: center; margin-bottom: 16px }
.ej-m-head img {
  width: 78px; height: 78px; flex: none;
  object-fit: cover; border-radius: 11px;
  filter: grayscale(0.6) brightness(0.78);
}
.ej-m-head h3 { margin: 3px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em }
.ej-m-kick {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #D98BA8;
}
.ej-m-var-now { font-size: 13px; color: #C3B2CE; margin-top: 2px }
.ej-m-price { font-size: 14px; font-weight: 700; margin-top: 4px; color: #EFC15E }

.ej-m-copy { font-size: 14px; line-height: 1.55; color: #C9B9D3; margin: 0 0 18px }

.ej-m-lbl {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: #9C89A8; margin: 0 0 8px;
}

.ej-m-vars { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px }
.ej-m-var {
  border: none; border-radius: 999px;
  background: #2A0C1B; color: #F0B6C9;
  padding: 9px 15px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.ej-m-var.on { background: #D98BA8; color: #2A0C1B }

#ej-req-email {
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #3B2649;
  border-radius: 11px;
  background: #120A1B;
  color: #F5EBE2;
  font: inherit;
  font-size: 15px;
  margin-bottom: 12px;
}
#ej-req-email::placeholder { color: #6E5C7B }
#ej-req-email:focus { outline: 2px solid #D98BA8; outline-offset: 1px; border-color: transparent }

.ej-m-err { font-size: 13px; color: #FF9BB0; margin: -4px 0 12px }

.ej-m-go {
  width: 100%; height: 52px;
  border: none; border-radius: 999px;
  background: #D98BA8; color: #2A0C1B;
  font: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer;
}
.ej-m-go:hover { background: #E5A0B9 }
.ej-m-go[disabled] { opacity: 0.6; cursor: default }

.ej-m-alt {
  width: 100%;
  margin-top: 10px;
  display: flex; align-items: center; gap: 11px;
  height: 50px; padding: 0 16px;
  border: 1px solid #3B2649; border-radius: 11px;
  background: transparent; color: #C9B9D3;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.ej-m-alt:hover { border-color: #55385F }
.ej-m-alt.on { border-color: #D98BA8; color: #F5EBE2 }
.ej-m-box-tick {
  width: 20px; height: 20px; flex: none;
  border: 1px solid #55385F; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #2A0C1B;
}
.ej-m-alt.on .ej-m-box-tick { background: #D98BA8; border-color: #D98BA8 }

.ej-m-fine { font-size: 12px; color: #7E6C8A; margin: 11px 0 0; text-align: center }

.ej-m-done { text-align: center; padding: 12px 0 4px }
.ej-m-tick {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 999px; background: #D98BA8; color: #2A0C1B;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  animation: ejMPop 420ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
@keyframes ejMPop { from { transform: scale(0.4); opacity: 0 } to { transform: none; opacity: 1 } }
.ej-m-done h3 { margin: 0 0 9px; font-size: 20px; font-weight: 700 }
.ej-m-done p { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: #C9B9D3 }

@media (prefers-reduced-motion: reduce) {
  .ej-m-scrim, .ej-m-box, .ej-m-tick { animation: none }
}

/* ---------------------------------------------------------------------------
 * Announcement bar. Both messages sit on the bar at once, separated by a single
 * twinkle star, and flicker like a neon sign.
 *
 * The first pass flickered for half a second once every seven, which on a bar
 * that is only on screen while scrolled meant it looked static. These cycle
 * faster, dip much further, and blip several times in a burst - a single smooth
 * fade reads as a loading state, a stutter reads as neon. The two run on
 * different periods so they never blink together.
 * ------------------------------------------------------------------------ */
.ej-ann { display: inline-flex; align-items: center; white-space: nowrap; }

.ej-ann-star {
  font-size: 13px;
  line-height: 1;
  flex: none;
  color: #2A0C1B;
  animation: ejStarTwinkle 2.6s ease-in-out infinite both;
}

.ej-ann-a { animation: ejNeonA 4.1s linear infinite both; }
.ej-ann-b { animation: ejNeonB 5.3s linear 1.4s infinite both; }

@keyframes ejNeonA {
  0%, 55%   { opacity: 1; }
  57%       { opacity: 0.12; }
  59%       { opacity: 1; }
  61%       { opacity: 0.18; }
  63%       { opacity: 0.95; }
  65%       { opacity: 0.25; }
  68%, 100% { opacity: 1; }
}
@keyframes ejNeonB {
  0%, 42%   { opacity: 1; }
  44%       { opacity: 0.15; }
  46%       { opacity: 0.9; }
  48%       { opacity: 0.2; }
  51%       { opacity: 1; }
  53%       { opacity: 0.3; }
  56%, 100% { opacity: 1; }
}
@keyframes ejStarTwinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.86) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.18) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ej-ann-a, .ej-ann-b, .ej-ann-star { animation: none; opacity: 1; }
}

/* Snipcart's cart and checkout are position:fixed at z-index 20, which the
   header's own positioned layers can still paint over - that is what clipped the
   top of the cart panel. Giving Snipcart's root its own stacking context above
   the page puts every one of its screens over the site, whatever the header is
   doing underneath. */
#snipcart {
  position: relative;
  z-index: 2147483000;
}