/* SEKUREX — the Whatnot live-show promo (owner, 13 Oct 2026).

   Two pieces, both driven by /js/whatnot-v1.js:
   - .wn-strip  one slim line at the top of <main> on / and the cards page. House voice:
                it names the channel and the giveaway, never a category, so it does not
                let one category own the home page.
   - #whatnot   the full band with the promo video, on the cards page only, after the lot
                grid so the lots still lead.

   State lives in data-wn-state on each .wn-scope ("before" | "live" | "after"). The HTML
   ships "before", so with no JS the Thursday copy shows. A [data-wn-only] child lists
   the states it shows in, space-separated ("before live").

   A new file rather than rules in shop.css: the zone holds /css/* for 4 hours (see
   _headers), so new markup next to an old cached stylesheet would render unstyled. */

.wn-scope[data-wn-state="before"] [data-wn-only]:not([data-wn-only~="before"]),
.wn-scope[data-wn-state="live"] [data-wn-only]:not([data-wn-only~="live"]),
.wn-scope[data-wn-state="after"] [data-wn-only]:not([data-wn-only~="after"]){display:none !important;}

/* ---------- the status dot: gold before, red and pulsing while live ---------- */
.wn-dot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--gold-400);box-shadow:0 0 10px rgba(217,164,65,0.7);
}
.wn-scope[data-wn-state="live"] .wn-dot{background:#ff3b4e;box-shadow:0 0 0 0 rgba(255,59,78,0.6);animation:wn-pulse 1.6s infinite;}
@keyframes wn-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,59,78,0.55);}
  70%{box-shadow:0 0 0 10px rgba(255,59,78,0);}
  100%{box-shadow:0 0 0 0 rgba(255,59,78,0);}
}
@media (prefers-reduced-motion:reduce){.wn-scope[data-wn-state="live"] .wn-dot{animation:none;}}

/* ---------- strip ---------- */
.wn-strip{
  position:relative;
  border-bottom:1px solid var(--hair);
  background:
    linear-gradient(90deg,rgba(109,63,196,0.20),rgba(10,10,20,0.6) 38%,rgba(10,10,20,0.6) 62%,rgba(109,63,196,0.20));
}
.wn-strip-in{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:8px 16px;padding-top:11px;padding-bottom:11px;
}
.wn-strip p{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
  font-size:13px;line-height:1.45;color:var(--silver);
}
.wn-strip strong{
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold-300);
}
.wn-strip-links{display:flex;align-items:center;gap:14px;}
.wn-strip-cta{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-radius:2px;
  font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:#120d02;background:linear-gradient(180deg,var(--gold-300),var(--gold-500));
  box-shadow:0 6px 20px rgba(192,138,46,0.22);
  transition:background var(--transition),box-shadow var(--transition);
}
.wn-strip-cta:hover{color:#120d02;background:linear-gradient(180deg,var(--gold-200),var(--gold-400));box-shadow:0 8px 26px rgba(217,164,65,0.32);}
.wn-strip-link{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ash);border-bottom:1px solid var(--edge-2);padding-bottom:1px;
}
.wn-strip-link:hover{color:var(--gold-200);border-color:var(--gold-500);}
@media (max-width:560px){
  .wn-strip-in{gap:6px 14px;padding-top:9px;padding-bottom:9px;}
  .wn-strip p{justify-content:center;text-align:center;font-size:12px;gap:2px 10px;}
}

/* ---------- cards grid with three tiles (13 Oct 2026) ----------
   shop.css lays .coll-grid out for four or five lots. With three (FIRST OVERALL, the
   autograph lot, the Whatnot tile): phones keep two-up with the third centred below,
   wider screens go three-up in a centred, capped row. This file loads after shop.css,
   so equal-specificity rules here win. */
.coll-grid--3 .lot:nth-child(3){grid-column:2/4;}
@media (min-width:700px){
  .coll-grid--3{grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto;}
  .coll-grid--3 .lot,
  .coll-grid--3 .lot:nth-child(3){grid-column:auto;}
}

/* The Whatnot tile: a .lot whose picture is a link to the band below. */
.lot--wn{border-color:var(--violet-line);}
.lot--wn a.lot-visual{display:block;}
.lot--wn .lot-visual img{object-position:50% 45%;}
.lot--wn[data-wn-state="live"] .lot-grade{color:#fff;background:linear-gradient(135deg,#ff6b7a,#c81e3a);box-shadow:0 0 16px rgba(255,59,78,0.4);}

/* ---------- band (cards page) ---------- */
.shop-page section.wn{
  border-top:1px solid var(--edge);
  background:
    radial-gradient(60% 55% at 78% 40%,rgba(109,63,196,0.20),transparent 70%),
    linear-gradient(180deg,rgba(138,100,32,0.05),transparent 34%);
  overflow:hidden;
}
.wn-band{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
@media (min-width:900px){.wn-band{grid-template-columns:1.1fr 0.9fr;gap:60px;}}

.wn-status{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:20px;
  padding:8px 14px;border:1px solid var(--hair-strong);border-radius:2px;background:rgba(0,0,0,0.35);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--bone);
}
.wn-count{color:var(--gold-300);}
.wn-count:empty{display:none;}
.wn-scope[data-wn-state="live"] .wn-status{border-color:rgba(255,59,78,0.55);}

/* The giveaway is the hook, so it gets the one panel in the band. */
.wn-gift{
  display:flex;align-items:center;gap:18px;max-width:540px;margin:0 0 28px;padding:18px 20px;
  border:1px solid var(--violet-line);border-radius:3px;
  background:linear-gradient(135deg,rgba(109,63,196,0.16),rgba(217,164,65,0.06));
}
.wn-gift .band-badge-ring{flex:0 0 auto;width:54px;height:54px;display:grid;}
.wn-gift svg{width:25px;height:25px;fill:none;stroke:var(--gold-300);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.wn-gift strong{
  display:block;margin-bottom:4px;
  font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-0.01em;line-height:1.3;color:var(--bone);
}
.wn-gift div > span{display:block;font-size:13.5px;line-height:1.6;color:var(--ash);}

.wn .band-actions{margin-bottom:18px;}
.wn-steps{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;
}
.wn-steps li{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--slate);
}
.wn-steps b{color:var(--gold-500);font-weight:500;}
.wn-fine{margin-top:16px;max-width:520px;font-size:12px;line-height:1.6;color:var(--slate);}

/* Video: a vertical 9:16 promo in a phone-ish frame, capped so it never towers over
   the copy on desktop. */
.wn-visual{margin:0;display:flex;flex-direction:column;align-items:center;}
.wn-phone{
  position:relative;width:min(100%,340px);aspect-ratio:9 / 16;
  border:1px solid var(--hair-strong);border-radius:22px;overflow:hidden;background:#06060c;
  box-shadow:0 30px 70px rgba(0,0,0,0.65),0 0 60px rgba(109,63,196,0.28);
}
.wn-phone video{display:block;width:100%;height:100%;object-fit:cover;}
.wn-sound{
  position:absolute;right:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
  border:1px solid rgba(255,255,255,0.22);border-radius:16px;background:rgba(5,5,11,0.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bone);
  cursor:pointer;transition:border-color var(--transition),background var(--transition);
}
.wn-sound:hover{border-color:var(--gold-400);background:rgba(5,5,11,0.82);}
.wn-sound svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.wn-sound[aria-pressed="true"] .wn-ico-off,
.wn-sound[aria-pressed="false"] .wn-ico-on{display:none;}
.wn-visual figcaption{
  margin-top:14px;text-align:center;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--slate);
}
/* Phones: the video is the strongest asset, so it moves up under the headline instead
   of trailing the whole column. display:contents lets the copy's children and the
   figure share one ordered column. */
@media (max-width:899.98px){
  .wn-band{gap:0;}
  .wn-copy{display:contents;}
  .wn-visual{order:1;margin:8px 0 36px;}
  .wn-phone{width:min(82%,300px);}
  .wn-copy > .band-body,.wn-gift,.wn .band-actions,.wn-steps,.wn-fine{order:2;}
}
.wn-visual figcaption a{color:var(--gold-400);border-bottom:1px solid var(--hair);}
.wn-visual figcaption a:hover{color:var(--gold-200);}