/* Pop Dot — waitlist page (v4.4). Loads after styles.css + pages.css. */
[hidden]{display:none!important}
.wl-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,88px);align-items:center}
.wl-copy{display:flex;flex-direction:column;gap:22px}
.wl-copy .h-hero{color:var(--ink);font-size:clamp(40px,4.6vw + 10px,96px)}
.wl-copy .h-hero em{font-style:normal}
.wl-dots{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:10px}
.wl-dots li{width:clamp(44px,4.6vw,64px);aspect-ratio:1;border-radius:50%;background:var(--c);display:grid;place-items:center;box-shadow:inset 0 -6px 14px rgba(43,39,51,.12),0 10px 24px -14px rgba(43,39,51,.45)}
.wl-dots li span{font-family:var(--display);font-weight:700;font-size:13px;color:rgba(43,39,51,.55);mix-blend-mode:multiply}
.wl-dots li:last-child span,.wl-dots li:nth-child(4) span{color:rgba(250,246,239,.75);mix-blend-mode:normal}
.wl-small{font-size:var(--t-label);opacity:.75}
.wl-small a{color:var(--pink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.wl-card{background:#fff;border-radius:32px;padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;gap:22px;box-shadow:0 1px 0 rgba(43,39,51,.06),0 30px 60px -40px rgba(43,39,51,.3)}
.wl-who{display:grid;grid-template-columns:1fr 1fr;background:var(--board);border-radius:999px;padding:5px;gap:4px}
.who{border:0;background:transparent;font-family:var(--display);font-weight:600;font-size:var(--t-label);color:var(--ink);padding:.7em 1em;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.who.on{background:var(--ink);color:var(--cream)}
.wl-shades{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.wl-label{font-family:var(--display);font-weight:600;font-size:var(--t-lede);line-height:1.1;padding:0;color:var(--ink)}
.sws{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sw{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:20px;background:var(--board);cursor:pointer;text-align:center;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,transform .2s var(--ease)}
.sw:hover{transform:translateY(-2px)}
.sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw .dot{width:38px;height:38px;border-radius:50%;background:var(--c);box-shadow:inset 0 -5px 10px rgba(43,39,51,.12),0 0 0 2px #fff}
.sw b{font-family:var(--display);font-weight:700;font-size:20px;line-height:1;color:var(--ink)}
.sw small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.6;line-height:1.1;color:var(--ink)}
.sw:has(input:checked){box-shadow:inset 0 0 0 3px var(--pink);background:#fff}
.sw:has(input:focus-visible){outline:3px solid var(--pink);outline-offset:3px}
.sw-all{display:none}
.sw-all .dot{background:conic-gradient(#F3EDE0 0 20%,#EBCBAA 0 40%,#D9A87E 0 60%,#B97F55 0 80%,#6E4227 0)}
.wl-card.wholesale .sw-all{display:flex}
.wl-card.wholesale .sws{grid-template-columns:repeat(6,1fr)}
.wl-hint{font-size:var(--t-cap);letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.55;min-height:1.2em}
.wl-hint.err{color:var(--pink-deep);opacity:1}

.wl-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{display:flex;flex-direction:column;gap:6px}
.f span{font-size:var(--t-cap);letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.7}
.f span i{font-style:normal;opacity:.6;text-transform:none;letter-spacing:0;font-weight:500;margin-left:.4em}
.f.wide{grid-column:1/-1}
.f textarea{resize:vertical;min-height:110px;line-height:1.45}
.f input,.f select,.f textarea{font:inherit;font-size:var(--t-label);color:var(--ink);background:var(--cream);border:0;border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s;appearance:none;-webkit-appearance:none;width:100%}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--pink)}
.f input.bad{box-shadow:inset 0 0 0 2px var(--pink-deep)}
.wl-wholesale{padding-top:8px;border-top:1px dashed rgba(43,39,51,.15)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl-submit{align-self:stretch;justify-content:center;font-size:var(--t-label)}
.wl-submit[disabled]{opacity:.6;transform:none}
.wl-fine{font-size:13px;opacity:.6;line-height:1.4}
.wl-fine.err{color:var(--pink-deep);opacity:1}

.wl-done{background:#fff;border-radius:32px;padding:clamp(28px,3vw,48px);display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 0 rgba(43,39,51,.06),0 30px 60px -40px rgba(43,39,51,.3);align-items:flex-start}
.wl-done .eyebrow{margin:0}
.done-num{font-family:var(--display);font-weight:700;font-size:clamp(72px,9vw,140px);line-height:.9;color:var(--pink);letter-spacing:-.03em}
.done-name{font-family:var(--display);font-weight:600;font-size:var(--t-h3);line-height:1;color:var(--ink);margin-top:-6px}
.wl-done .lede{margin-top:10px}

@media (max-width:900px){
  .wl-grid{grid-template-columns:1fr}
  .wl-copy{position:static}
  .sws{grid-template-columns:repeat(5,1fr);gap:6px}
  .wl-card.wholesale .sws{grid-template-columns:repeat(3,1fr)}
  .sw{padding:10px 4px 8px;border-radius:16px}
  .sw .dot{width:30px;height:30px}
  .sw b{font-size:17px}
  .sw small{font-size:9.5px;letter-spacing:.02em}
  .wl-fields{grid-template-columns:1fr}
}

/* holding page: described shade list (Oct 9, 2026) */
.sws.list{display:flex;flex-direction:column;gap:8px}
.sws.list .sw{flex-direction:row;align-items:center;text-align:left;gap:14px;padding:12px 16px 12px 14px;border-radius:18px}
.sws.list .sw .dot{flex:0 0 38px;box-shadow:inset 0 -5px 10px rgba(43,39,51,.12)}
.sws.list .sw-t{display:flex;flex-direction:column;gap:4px;flex:0 0 92px}
.sws.list .sw b{font-size:22px}
.sws.list .sw small{text-align:left;opacity:.65}
.sws.list .desc{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink);opacity:.8}
.wl-card.wholesale .sws.list{grid-template-columns:none}
@media (max-width:767px){
  .sws.list .sw{flex-wrap:wrap;gap:10px 12px;padding:12px}
  .sws.list .sw .dot{flex-basis:30px}
  .sws.list .sw-t{flex:1 1 auto;flex-direction:row;align-items:baseline;gap:8px}
  .sws.list .desc{flex-basis:100%;font-size:13.5px}
}
.wl-hint:empty{display:none}
