/*
 * 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; }
}