/* ═══════════════════════════════════════════════
   WAITLIST — the button, the band and the card
   Built entirely by js/waitlist.js, so everything
   here styles markup the HTML does not contain.

   It borrows rather than invents: the solid pill from
   .buy__btn--now, the card and consent treatment from
   css/popup.css, the dashed code chip from the scratch
   card. One promise should look like one thing.
   ═══════════════════════════════════════════════ */

/* ── the button ── */
.wl__cta{
  appearance:none; cursor:pointer;
  min-height:44px; padding:0 26px;
  background:var(--wine); color:var(--cream);
  border:1.5px solid var(--wine); border-radius:99px;
  font:600 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), transform .18s var(--ease);
}
.wl__cta:hover{background:var(--wine-soft); border-color:var(--wine-soft)}
.wl__cta:active{transform:translateY(1px)}
.wl__cta:focus-visible{outline:2px solid var(--wine); outline-offset:3px}

/* already signed up — quieter, but still a way back to the code */
.wl__cta.is-joined{
  background:transparent; color:var(--wine);
  border-color:rgba(136,1,42,.4);
}
.wl__cta.is-joined:hover{background:rgba(136,1,42,.06); border-color:var(--wine)}

/* in the chosen-box panel, where the two shop buttons used to sit */
.wl__cta--detail{
  position:absolute; left:50%; bottom:13%;
  transform:translateX(-50%);
  pointer-events:auto;
}
.wl__cta--detail:active{transform:translateX(-50%) translateY(1px)}

/* ── the band ── */
.wlband{
  position:relative; z-index:2;
  max-width:560px; margin:0 auto; padding:clamp(56px,9vw,96px) 24px clamp(64px,10vw,104px);
  text-align:center;
}
.wlband__eyebrow{
  margin:0 0 10px; font:600 11px/1 var(--sans);
  letter-spacing:.26em; text-transform:uppercase; color:var(--wine);
}
.wlband__title{
  margin:0 0 12px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(26px,4.6vw,38px); color:var(--wine); line-height:1.18;
}
.wlband__sub{
  margin:0 auto 26px; max-width:44ch;
  color:var(--ink-soft); font:400 14px/1.7 var(--sans);
}

/* ── the card ──
   Above the cookie bar (z-index 9000): it is legally required and may well be
   on screen at the same time, and it must not cover the submit button. */
.wl__scrim{
  position:fixed; inset:0; z-index:9050;
  background:rgba(43,28,30,.38);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.wl__scrim.is-on{opacity:1; pointer-events:auto}

.wl{
  position:fixed; z-index:9200;
  top:50%; left:50%;
  width:min(420px, calc(100vw - 32px));
  max-height:calc(100vh - 32px); overflow-y:auto;
  box-sizing:border-box;
  padding:34px 30px 30px;
  background:linear-gradient(165deg, rgba(255,255,255,.94), rgba(226,178,170,.34)), var(--cream);
  border:1px solid rgba(136,1,42,.10); border-radius:20px;
  box-shadow:0 30px 70px rgba(43,28,30,.28);
  text-align:center;
  opacity:0; pointer-events:none;
  transform:translate(-50%,-50%) translateY(18px) scale(.97);
  visibility:hidden;
  /* closed = invisible AND out of the tab order / screen reader; visibility
     switches at the end of the fade out and the start of the fade in */
  transition:opacity .3s var(--ease), transform .45s var(--ease), visibility .3s;
}
.wl.is-on{opacity:1; pointer-events:auto; visibility:visible; transform:translate(-50%,-50%)}

.wl__x{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; display:grid; place-items:center;
  appearance:none; border:0; background:none; cursor:pointer;
  color:var(--ink-soft); font-size:18px; line-height:1;
  border-radius:50%; transition:background .25s, color .25s;
}
.wl__x:hover{background:rgba(136,1,42,.08); color:var(--wine)}
.wl__x:focus-visible{outline:2px solid var(--wine); outline-offset:2px}

.wl__eyebrow{
  margin:0 0 8px; font:600 11px/1 var(--sans);
  letter-spacing:.26em; text-transform:uppercase; color:var(--wine);
}
.wl__title{
  margin:0 0 10px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,4vw,27px); color:var(--wine); line-height:1.2;
}
.wl__sub{
  margin:0 0 20px; color:var(--ink-soft);
  font:400 13.5px/1.6 var(--sans);
}
.wl__sub--code{margin-bottom:6px}

.wl__form{display:flex; flex-direction:column; gap:12px}
.wl__in{
  width:100%; padding:13px 16px; box-sizing:border-box;
  background:rgba(255,255,255,.7); color:var(--ink);
  border:1px solid rgba(136,1,42,.18); border-radius:12px;
  font:400 14px/1 var(--sans);
  transition:border-color .25s;
}
.wl__in::placeholder{color:var(--ink-soft); opacity:.7}
.wl__in:focus{border-color:var(--wine)}
.wl__in:focus-visible{outline:2px solid var(--wine); outline-offset:2px; border-color:var(--wine)}

/* never pre-ticked — a pre-ticked box is not consent under GDPR */
.wl__consent{
  display:flex; align-items:flex-start; gap:9px;
  font:400 12px/1.45 var(--sans); color:var(--ink-soft);
  text-align:left; cursor:pointer;
}
.wl__consent input{
  flex:0 0 auto; width:20px; height:20px; margin:0;
  accent-color:var(--wine); cursor:pointer;
}
.wl__consent a{color:var(--wine); text-underline-offset:2px}
.wl__consent input:focus-visible{outline:2px solid var(--wine); outline-offset:2px}

/* ── the one optional question ── */
/* four chips in a 2x2 grid rather than a wrapping row: at this card width a
   flex row breaks 3 + 1 and the orphan reads like a mistake */
.wl__chips{
  margin:4px 0 0; padding:0; border:0;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.wl__chips legend{
  padding:0; margin:0 0 10px; grid-column:1 / -1; width:100%;
  font:500 12px/1.45 var(--sans); color:var(--ink-soft); text-align:center;
}
.wl__chips legend span{opacity:.72}
.wl__chip{cursor:pointer}
.wl__chip input{position:absolute; opacity:0; width:0; height:0}
.wl__chip span{
  display:block; padding:9px 14px;
  border:1px solid rgba(136,1,42,.22); border-radius:99px;
  background:rgba(255,255,255,.55);
  font:500 12px/1 var(--sans); color:var(--ink-soft);
  transition:background .2s, border-color .2s, color .2s;
}
.wl__chip:hover span{border-color:var(--wine); color:var(--wine)}
.wl__chip input:checked + span{
  background:rgba(136,1,42,.1); border-color:var(--wine); color:var(--wine);
}
.wl__chip input:focus-visible + span{outline:2px solid var(--wine); outline-offset:2px}

.wl__err{
  margin:0; min-height:1.2em; font:400 12px/1.4 var(--sans); color:var(--wine);
  opacity:0; transition:opacity .2s;
}
.wl__err.is-on{opacity:1}

.wl__go{
  appearance:none; cursor:pointer; width:100%;
  background:var(--wine); color:#fdf3f0; border:1px solid var(--wine);
  border-radius:999px; padding:13px 20px;
  font:600 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  transition:background .25s, transform .2s;
}
.wl__go:hover{background:var(--wine-soft); border-color:var(--wine-soft)}
.wl__go:active{transform:scale(.98)}
.wl__go:focus-visible{outline:2px solid var(--wine); outline-offset:3px}
.wl__go[disabled]{cursor:default; opacity:.75}

/* ── the code, same chip as the scratch card ── */
.wl__code-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:14px;
}
.wl__code{
  font:600 14px/1 var(--sans); letter-spacing:.08em;
  color:var(--wine); background:rgba(136,1,42,.06);
  padding:8px 12px; border-radius:8px; border:1px dashed rgba(136,1,42,.28);
}
.wl__copy{
  appearance:none; cursor:pointer; background:none;
  color:var(--wine); border:0; border-bottom:1px solid rgba(136,1,42,.3);
  padding:2px 0; font:600 11px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase;
  transition:color .3s, border-color .3s;
}
.wl__copy:hover{border-color:var(--wine)}
.wl__copy:focus-visible{outline:2px solid var(--wine); outline-offset:3px}

@media (max-width:480px){
  .wl{padding:30px 22px 24px}
  .wl__cta--detail{padding:0 20px}
}

@media (prefers-reduced-motion:reduce){
  .wl, .wl__scrim{transition:none}
}