/* THE NIGHT MARKET - Black Friday 2026 (App_Code/night_market.vb). Shared by the landing page and the
   stall pages. Everything is scoped under #nm so the site CSS loaded by common_head_resources can't
   reach in, and nothing here reaches out. Single night look on purpose (no light theme). */
body.nm-page{margin:0;background:#0d0a20;overflow-x:hidden}
#nm{
  --night:#0d0a20;--panel:#171230;--ink:#F3EEFA;--soft:#C9BCE0;--mute:#9387ad;--line:rgba(243,238,250,.14);
  --amber:#f3c27a;--orange:#FA4616;--pink:#ff4fa3;--well:#ffffff;
  --display:"Archivo",system-ui,sans-serif;--body:"DM Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;background:var(--night);color:var(--ink);font:400 16px/1.5 var(--body);
  /* clip, not hidden: hidden makes #nm a scroll container, and the landing's sticky stage then scrolls
     away with the page instead of holding while the clouds part */
  overflow-x:clip
}
#nm *{box-sizing:border-box}
#nm img{max-width:none}
#nm a{color:inherit}
#nm .nm-gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#nm .nm-in{max-width:1240px;margin:0 auto}

/* ---------- our own small header: back to the site + the bag ---------- */
#nm .nm-top{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 18px max(16px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,rgba(13,10,32,.85),rgba(13,10,32,0));pointer-events:none}
#nm .nm-top a{pointer-events:auto;text-decoration:none;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  padding:8px 12px;border:1px solid var(--line);border-radius:3px;background:rgba(13,10,32,.6);min-height:36px;display:inline-flex;align-items:center;gap:8px}
#nm .nm-top a:hover{color:var(--ink);border-color:rgba(255,79,163,.5)}
#nm .nm-top .nm-ar{font-family:var(--body);font-size:15px;letter-spacing:0}
#nm .nm-bag #h-cart{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- the sign in a stall's window (landing page and stall page) ----------
   night-market.js (nmFit) sizes each sign to fill its window: the name on one line across it, stopping
   early if the sign would overflow the window's height. */
#nm .nm-fascia{position:absolute;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;text-align:center;gap:.35em;opacity:0;transition:opacity .8s ease;text-shadow:0 2px 1.2em rgba(10,4,20,.75)}
#nm .nm-fascia .f-eb{font:500 .95em var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber);opacity:.8}
#nm .nm-fascia .f-nm{font:900 3.2em/.9 var(--display);letter-spacing:-.015em;color:var(--ink);margin:0}
#nm .nm-fascia .f-of{font:800 1.45em/1.2 var(--display);color:var(--ink);margin:0;max-width:min(34ch,88%)}
#nm .nm-fascia .f-in{font:400 1.05em/1.45 var(--body);color:#EDE4F7;margin:0;max-width:34ch}
#nm .nm-fascia .f-in a{color:inherit;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:.2em}
#nm .nm-fascia .f-in a:hover{color:#fff}
#nm .nm-fascia .f-bt{display:inline-flex;align-items:center;background:var(--orange);color:#fff;border:0;border-radius:3px;padding:.55em 1.15em;font:600 1.05em var(--body);cursor:pointer;margin-top:.25em;text-decoration:none;min-height:42px}
#nm .nm-fascia .f-bt:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* (10 Nov) SIGN SPACING, standardised: one gap between every block of a sign, and a bigger one above the
   button. Placed AFTER the sign's own rules (their margin:0 used to cancel it). nmFit sizes the whole sign to
   its window, so a sign with more words comes out smaller, never tighter. */
#nm .nm-fascia{gap:0}
#nm .nm-fascia .f-nm{line-height:1}
#nm .nm-fascia .f-in{line-height:1.5}
#nm .nm-fascia>:is(.f-nm,.f-of,.f-in){margin-top:.75em}
#nm .nm-fascia>.f-bt{margin-top:1.4em}
/* (10 Nov) the yellow line sits closer to the name: half the gap it had (the name's em is 3.2x the sign's) */
#nm .nm-fascia>.f-nm{margin-top:.375em}
/* (10 Nov) the yellow line, readable on the bright purple shelves: full strength, a lighter warmer gold, and a soft dark halo behind the letters */
#nm .nm-fascia .f-eb{opacity:1;color:#FFD98F;text-shadow:0 1px 2px rgba(13,10,32,.9),0 0 12px rgba(13,10,32,.75)}
/* (10 Nov) a soft dark wash behind each sign to calm the brighter stall lights: black at about .2, fading out to the window's edges so it never reads as a box */
#nm .nm-fascia{background:radial-gradient(closest-side,rgba(0,0,0,.24),rgba(0,0,0,.2) 55%,rgba(0,0,0,0))}
/* The Reveal's stall is the brightest: a deeper wash */
/* (10 Nov) the terms link: small plain text at the foot of the landing page and every stall */
#nm .nm-terms{margin:28px 0 0;text-align:center;font-size:13px}
#nm .nm-terms a{color:var(--mute);text-decoration:underline;text-decoration-color:rgba(147,135,173,.4);text-underline-offset:.2em}
#nm .nm-terms a:hover{color:var(--soft)}
#nm .nm-fascia[data-slug="the-reveal"]{background:radial-gradient(closest-side,rgba(0,0,0,.46),rgba(0,0,0,.38) 55%,rgba(0,0,0,0))}

/* ---------- stall page: arrival ----------
   The landing scene, full bleed: the mist clears, the photo sharpens, then the sign fades in. On phones
   it opens wide (stall centred, the character in view) and pushes in on the stall, as the landing does. */
#nm .nm-arrive{position:relative;height:min(88vh,860px);min-height:560px;overflow:hidden;background:var(--night)}
#nm .nm-aframe{position:absolute;transform-origin:50% 50%;filter:blur(14px) brightness(.4)}
#nm .nm-aframe img{position:absolute;inset:0;width:100%;height:100%;display:block}
#nm .nm-arrive.go .nm-aframe{filter:none;transition:filter 1.6s cubic-bezier(.2,.7,.2,1) .1s,transform 1.9s cubic-bezier(.45,.05,.25,1) .2s}
#nm .nm-arrive::after{content:"";position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(180deg,transparent,var(--night));pointer-events:none}
#nm .nm-mistin{position:absolute;inset:-10%;pointer-events:none;z-index:3;background:radial-gradient(45% 35% at 30% 40%,rgba(150,58,140,.6),transparent 70%),radial-gradient(50% 40% at 70% 62%,rgba(120,50,160,.55),transparent 70%),radial-gradient(70% 60% at 50% 50%,rgba(48,20,66,.92),rgba(16,10,30,.98) 80%)}
#nm .nm-arrive.go .nm-mistin{opacity:0;transition:opacity 1.5s ease .1s}
#nm .nm-arrive.go .nm-fascia{opacity:1;transition:opacity .8s ease 1.5s}
#nm .nm-down{position:absolute;z-index:4;left:50%;bottom:3vh;transform:translateX(-50%);font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);opacity:0}
#nm .nm-arrive.go .nm-down{opacity:1;transition:opacity 1s ease 2.2s}
/* stepping inside (night-market.js): ONLY transforms animate - the picture pushes in, the page below
   slides up over it; the real band height is swapped in at the end. The stall page has no blur to clear
   (a 14px blur animating on a full-screen photo stuttered); the mist fade does the opening. */
#nm .nm-arrive{contain:paint}
#nm .nm-arrive .nm-aframe{filter:none}
#nm .nm-arrive.in .nm-aframe{transition:transform 1.5s cubic-bezier(.45,.05,.25,1)}
#nm .nm-arrive.in .nm-fascia{opacity:1;transition:opacity .8s ease .3s}
#nm .nm-arrive.in .nm-down{display:none}
#nm > .nm-arrive ~ *{position:relative;z-index:2}
#nm > .nm-arrive ~ section{background-color:var(--night)}
/* the fade into the page rides on the page's top edge (it moves with it), not on the header's bottom */
#nm .nm-arrive::after{display:none}
#nm > .nm-arrive + *::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:min(18vh,150px);background:linear-gradient(180deg,transparent,var(--night));pointer-events:none}
#nm .nm-arrive.walking ~ *{transition:transform 1.5s cubic-bezier(.45,.05,.25,1);will-change:transform}
#nm .nm-arrive.walking .nm-aframe{will-change:transform}
#nm .nm-arrive.still,#nm .nm-arrive.still .nm-aframe,#nm .nm-arrive.still ~ *{transition:none!important}

/* ---------- live strip ---------- */
#nm .nm-live{border-block:1px solid var(--line);background:linear-gradient(90deg,rgba(255,79,163,.07),transparent 40%,transparent 60%,rgba(250,70,22,.06))}
#nm .nm-live .nm-in{display:flex;flex-wrap:wrap;gap:12px 64px;align-items:center;justify-content:center;padding-block:18px}
#nm .nm-stat{display:flex;gap:12px;align-items:baseline}
#nm .nm-stat b{font:900 34px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
#nm .nm-stat span{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
#nm .nm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);margin-right:8px;animation:nm-pulse 2s ease-in-out infinite}
@keyframes nm-pulse{50%{opacity:.35}}

/* ---------- products ---------- */
#nm .nm-shelf .nm-in{padding-block:40px 24px}
#nm .nm-shelf h2{font:800 24px/1.2 var(--display);margin:0 0 4px;color:var(--ink)}
#nm .nm-sub{color:var(--mute);margin:0 0 24px;font-size:15px}
#nm .nm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:20px}
#nm .nm-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
#nm .nm-card:hover{border-color:rgba(255,79,163,.45)}
#nm .nm-well{position:relative;display:block;background:var(--well);aspect-ratio:280/332}
#nm .nm-well img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
#nm .nm-body{position:relative;padding:12px 14px 14px;display:grid;gap:8px;flex:1;align-content:start}
#nm .nm-t{font:600 15px/1.3 var(--body);margin:0;min-height:2.6em}
#nm .nm-t a{text-decoration:none}
#nm .nm-p{margin:0;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
#nm .nm-now{font:800 22px/1 var(--display)}
#nm .nm-was{font-size:14px;color:var(--mute);text-decoration:line-through}
#nm .nm-limit{flex-basis:100%;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
#nm .nm-left{display:grid;gap:5px}
#nm .nm-lbl{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
#nm .nm-lbl.hot{color:var(--pink)}
#nm .nm-bar{height:4px;background:rgba(243,238,250,.1);border-radius:2px;overflow:hidden}
#nm .nm-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--orange));border-radius:2px;transition:width .4s}
/* display: the site hides every .sc-buy globally (content.common_head_resources); these stay */
#nm .nm-grab{display:flex!important;align-items:center;justify-content:center;width:100%;margin-top:4px;background:var(--orange);color:#fff;border:0;border-radius:3px;padding:11px 14px;font:600 15px var(--body);cursor:pointer;min-height:44px}
#nm .nm-grab:hover{filter:brightness(1.08)}
#nm .nm-grab.nm-inbag,#nm .nm-grab:disabled{background:transparent;color:var(--ink);border:1px solid var(--line);cursor:default;filter:none}
#nm .nm-grab:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* (10 Nov) CARDS LINE UP in each row whatever they hold: the title is always two lines (longer ones end
   in an ellipsis; the full name is on the product page), so every price starts level, and the button
   sits at the foot of the card, so a units bar on one card doesn't push its button out of line. */
#nm .nm-body{display:flex;flex-direction:column}
#nm .nm-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;height:2.6em;min-height:0}
#nm .nm-grab{margin-top:auto}
#nm .nm-three .nm-card:first-child .nm-body{justify-content:center}
#nm .nm-three .nm-card:first-child .nm-t{-webkit-line-clamp:3;line-clamp:3;height:auto}
#nm .nm-three .nm-card:first-child .nm-grab{margin-top:4px}
/* sold out: the photo stays exactly as it was; the details give way to a neon outline sign */
#nm .nm-card.gone{border-color:rgba(255,79,163,.35)}
#nm .nm-card.gone .nm-body>*:not(.nm-stamp){visibility:hidden}
#nm .nm-stamp{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:2;text-align:center;pointer-events:none;background:radial-gradient(70% 70% at 50% 50%,rgba(255,79,163,.10),transparent 75%)}
#nm .nm-card.gone .nm-stamp{display:flex}
/* (10 Nov) SOLD OUT sits in the card's text area, below the photo. A sold-out card has no price or button, so
   that area was only a title tall and the stamp burst out of it: give it a normal card's height instead. */
#nm .nm-card.gone .nm-body{min-height:152px}
#nm .nm-card.gone .nm-stamp b{font-size:clamp(26px,2.6vw,36px)}
@media (max-width:760px){#nm .nm-card.gone .nm-body{min-height:136px}}
#nm .nm-card.gone .nm-well img{opacity:.35;filter:grayscale(1)}
#nm .nm-stamp b{font:900 clamp(30px,3.4vw,44px)/.95 var(--display);letter-spacing:.04em;text-transform:uppercase;color:transparent;-webkit-text-stroke:2px #ffe3f1;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--pink)) drop-shadow(0 0 16px var(--pink));animation:nm-flick 4s steps(1) infinite}
@keyframes nm-flick{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.35}94%{opacity:1}96%{opacity:.5}97%{opacity:1}}

/* THE REVEAL: tonight's three as one headliner + two, so a 2-across phone grid never leaves one hanging */
#nm .nm-grid.nm-three{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}
#nm .nm-three .nm-well{aspect-ratio:1/1}
#nm .nm-three .nm-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-color:rgba(255,79,163,.45);box-shadow:0 0 32px rgba(255,79,163,.12)}
#nm .nm-three .nm-card:first-child .nm-body{align-content:center;padding:28px 30px;gap:12px}
#nm .nm-three .nm-card:first-child .nm-body::before{content:"Tonight\2019 s headliner";font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
#nm .nm-three .nm-card:first-child .nm-t{font:800 clamp(20px,2.4vw,30px)/1.15 var(--display);min-height:0}
#nm .nm-three .nm-card:first-child .nm-now{font-size:clamp(28px,3vw,40px)}
#nm .nm-three .nm-card:first-child .nm-grab{max-width:280px}

/* THE REVEAL'S EARLY HOUR: the countdown before 8pm, and the note for early arrivals */
#nm .nm-teaser{grid-column:1/-1;display:grid;justify-items:center;gap:12px;text-align:center;padding:48px 24px;border:1px solid rgba(255,79,163,.45);border-radius:6px;background:radial-gradient(70% 120% at 50% 0%,rgba(255,79,163,.14),transparent 70%)}
#nm .nm-teaser .k{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
#nm .nm-teaser .h{font:900 clamp(26px,3.6vw,44px)/1.05 var(--display);margin:0;color:var(--ink);text-wrap:balance}
#nm .nm-teaser .d{margin:0;color:var(--soft);max-width:46ch}
#nm .nm-teaser .d a{color:var(--ink)}
#nm .nm-early{margin:0 0 12px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}

/* ---------- back to the market ---------- */
#nm .nm-back .nm-in{padding-block:56px 80px;display:grid;justify-items:center}
#nm .nm-home-panel{display:grid;justify-items:center;gap:8px;text-align:center;text-decoration:none;color:var(--ink);padding:36px 48px;border:1px solid var(--line);border-radius:6px;background:radial-gradient(80% 120% at 50% 0%,rgba(255,79,163,.12),transparent 70%);transition:border-color .2s,box-shadow .2s;max-width:100%}
#nm .nm-home-panel:hover{border-color:var(--pink);box-shadow:0 0 28px rgba(255,79,163,.25)}
#nm .nm-home-panel .k{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
#nm .nm-home-panel .h{font:900 clamp(28px,3.6vw,44px)/1 var(--display);letter-spacing:-.01em}
#nm .nm-home-panel .ar{font-family:var(--body);font-weight:600;margin-right:.25em}
#nm .nm-home-panel .d{color:var(--soft)}

@media (max-width:760px){
  #nm .nm-top a{padding:6px 10px;font-size:11px}
  #nm .nm-arrive{height:78vh;height:78svh;min-height:520px}
  #nm .nm-aframe img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  #nm .nm-fascia .f-bt{font-size:15px}
  #nm .nm-down{display:none}
  #nm .nm-live .nm-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;padding-block:14px}
  #nm .nm-stat{flex-direction:column;gap:4px}
  #nm .nm-stat b{font-size:26px}
  #nm .nm-stat span{font-size:10px;letter-spacing:.08em}
  #nm .nm-dot{display:none}
  #nm .nm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #nm .nm-t{font-size:14px}
  #nm .nm-now{font-size:19px}
  #nm .nm-body{padding:10px}
  #nm .nm-three .nm-card:first-child .nm-body{padding:14px 12px;gap:8px}
  #nm .nm-three .nm-card:first-child .nm-body::before{font-size:10px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  #nm .nm-arrive.go .nm-aframe,#nm .nm-arrive.go .nm-mistin,#nm .nm-arrive.go .nm-fascia,#nm .nm-arrive.go .nm-down{transition:none}
  #nm .nm-stamp b{animation:none}
}