/* ============================================================
   DJ VOCKA — THE DROP
   A runway, not a product grid. Vertical scroll drives a
   horizontal walk past each piece. Shoppable, but it should
   read as a fashion film first.
   ============================================================ */
.sh-main{ position:relative; z-index:2; }

.sh-open{
  position:relative; min-height:92svh; display:grid; align-content:center; gap:clamp(14px,2.4vh,28px);
  padding:calc(var(--gut) + 6rem) var(--gut) clamp(50px,8vh,100px); overflow:hidden;
}
.sh-open::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 60% at 70% 40%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 68%);
}
.sh-title{
  font-family:var(--f-display); font-variation-settings:'wdth' 140,'wght' 900;
  font-size:clamp(52px,15vw,230px); line-height:.8; text-transform:uppercase; letter-spacing:-.05em;
}
body.lang-km .sh-title{ font-family:var(--f-khmer); font-weight:700; text-transform:none;
  letter-spacing:0; line-height:1.22; font-size:clamp(32px,8vw,120px); }
.sh-lede{ font-size:clamp(13px,1.2vw,16px); color:var(--bone-dim); max-width:46ch; }
body.lang-km .sh-lede{ font-family:var(--f-khmer); line-height:1.85; }
.sh-meta{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:baseline;
  border-top:1px solid rgba(244,241,235,.14); padding-top:1.1rem; }
.sh-meta .n{ font-family:var(--f-mono); font-size:clamp(12px,1.3vw,15px); color:var(--accent); }
.sh-cue{ display:inline-flex; align-items:center; gap:.6rem; font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--bone-mute); }
body.lang-km .sh-cue{ letter-spacing:0; text-transform:none; font-size:11.5px; }
.sh-cue i{ display:block; width:30px; height:1px; background:linear-gradient(90deg,var(--accent),transparent);
  animation:cue 2.2s var(--e-out) infinite; transform-origin:left; }

.runway-track{ height:640vh; }
@media(max-width:860px){ .runway-track{ height:560vh; } }
.runway{ position:sticky; top:0; height:100svh; overflow:hidden; }
.runway-row{ display:flex; height:100%; will-change:transform; }
.prod{
  --pa:var(--accent);
  position:relative; flex:0 0 100%; height:100%;
  display:grid; align-content:center; justify-items:center; gap:clamp(6px,1vh,12px);
  padding:calc(var(--gut) + 4.4rem) var(--gut) calc(var(--gut) + 5.4rem);
}
.prod::before{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(52% 48% at 50% 46%, color-mix(in srgb,var(--pa) 20%,transparent), transparent 70%);
}
.prod-ghost{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:-1; pointer-events:none;
  font-family:var(--f-display); font-variation-settings:'wdth' 138,'wght' 900;
  font-size:clamp(58px,15vw,220px); line-height:.82; text-transform:uppercase; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb,var(--pa) 40%,transparent);
  white-space:nowrap; opacity:.55;
}
body.lang-km .prod-ghost{ font-family:var(--f-khmer); text-transform:none; letter-spacing:0;
  font-size:clamp(34px,9vw,130px); -webkit-text-stroke:0; color:color-mix(in srgb,var(--pa) 22%,transparent); }
.prod-shot{ position:relative; width:min(42vh, 70vw); aspect-ratio:303/390; margin-bottom:clamp(8px,1.4vh,18px); }
.prod-shot img{ width:100%; height:100%; object-fit:cover; display:block; box-shadow:0 40px 90px rgba(0,0,0,.8); }
.prod-shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pa) 45%,transparent);
  background:linear-gradient(190deg, color-mix(in srgb,var(--pa) 12%,transparent), transparent 44%);
  mix-blend-mode:screen;
}
.prod-ix{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--pa); }
.prod-nm{ font-family:var(--f-edit); font-weight:700; font-size:clamp(19px,2.5vw,34px);
  letter-spacing:-.01em; text-align:center; }
body.lang-km .prod-nm{ font-family:var(--f-khmer); }
.prod-pr{ font-family:var(--f-mono); font-size:clamp(14px,1.6vw,20px); color:var(--pa); font-weight:500; }
.prod-buy{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-top:clamp(6px,1.2vh,14px); }
.sizes{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.size{
  min-width:42px; padding:.6rem .7rem; cursor:pointer; border:0; background:none;
  box-shadow:inset 0 0 0 1px var(--ink-4); color:var(--bone-dim);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  transition:box-shadow .3s var(--e-out), color .3s var(--e-out), background .3s var(--e-out);
}
.size:hover{ color:var(--bone); box-shadow:inset 0 0 0 1px var(--bone-mute); }
.size[aria-pressed="true"]{ color:var(--accent-ink); background:var(--pa); box-shadow:inset 0 0 0 1px var(--pa); }
.size.one{ pointer-events:none; opacity:.7; }
.prod .cta{ --cta-bg:var(--pa); }

.runway-rail{
  position:absolute; left:var(--gut); right:var(--gut); bottom:calc(var(--gut) + 2.6rem); z-index:3;
  display:flex; align-items:center; gap:.9rem; pointer-events:none;
}
.runway-rail .bar{ position:relative; flex:1; height:1px; background:rgba(244,241,235,.16); }
.runway-rail .bar i{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--accent);
  box-shadow:0 0 12px var(--glow); }
.runway-rail .ct{ font-family:var(--f-mono); font-size:11px; color:var(--bone-dim); font-variant-numeric:tabular-nums; }
@media(max-width:860px){
  .runway-rail{ bottom:calc(var(--gut) + 3.8rem); }
  .prod{ padding-bottom:calc(var(--gut) + 7rem); }
  .prod-shot{ width:min(36vh, 62vw); }
}

.bag-btn{
  position:fixed; z-index:70;
  left:max(var(--gut), env(safe-area-inset-left));
  bottom:max(var(--gut), calc(env(safe-area-inset-bottom) + 12px));
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; border:0;
  padding:.78rem 1.2rem; border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--f-ui); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 16px 44px -16px var(--glow); transition:transform .35s var(--e-out), filter .3s, background .4s;
}
body.lang-km .bag-btn{ letter-spacing:0; text-transform:none; font-size:12.5px; }
.bag-btn:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.bag-btn .n{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--accent-ink); color:var(--accent); font-family:var(--f-mono); font-size:11px; }
.bag-btn[data-empty="true"]{ background:rgba(10,10,15,.6); color:var(--bone-dim);
  box-shadow:inset 0 0 0 1px var(--ink-4); }
.bag-btn[data-empty="true"] .n{ display:none; }

.sheet{ position:fixed; inset:0; z-index:95; visibility:hidden; }
body.bag-open .sheet{ visibility:visible; }
.sheet-scrim{ position:absolute; inset:0; background:rgba(4,4,8,.72); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .5s var(--e-out); }
body.bag-open .sheet-scrim{ opacity:1; }
.sheet-panel{
  position:absolute; right:0; top:0; bottom:0; width:min(100%, 480px);
  background:#0A0A10; box-shadow:-1px 0 0 rgba(244,241,235,.10), -40px 0 90px rgba(0,0,0,.7);
  transform:translateX(100%); transition:transform .62s var(--e-both);
  display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;
}
body.bag-open .sheet-panel{ transform:none; }
@media(max-width:640px){
  .sheet-panel{ right:0; left:0; top:auto; width:100%; height:min(86svh, 700px);
    transform:translateY(100%); box-shadow:0 -1px 0 rgba(244,241,235,.10), 0 -40px 90px rgba(0,0,0,.7); }
  body.bag-open .sheet-panel{ transform:none; }
}
.sheet-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:clamp(18px,3vw,26px); border-bottom:1px solid rgba(244,241,235,.10); }
.sheet-top h2{ font-family:var(--f-display); font-variation-settings:'wdth' 116,'wght' 800;
  font-size:clamp(18px,2.2vw,26px); text-transform:uppercase; letter-spacing:-.01em; }
body.lang-km .sheet-top h2{ font-family:var(--f-khmer); font-weight:700; text-transform:none; letter-spacing:0; }
.sheet-close{ background:none; border:0; cursor:pointer; color:var(--bone-dim); padding:.55rem;
  display:grid; place-items:center; transition:color .3s; }
.sheet-close:hover{ color:var(--accent); }
.sheet-close svg{ width:18px; height:18px; }
.sheet-body{ overflow-y:auto; padding:clamp(16px,2.6vw,24px); display:grid; gap:14px; align-content:start; }
.sheet-foot{ padding:clamp(16px,2.6vw,24px); border-top:1px solid rgba(244,241,235,.10); display:grid; gap:12px; }

.line{ display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center; }
.line img{ width:64px; height:82px; object-fit:cover; }
.line .nm{ font-size:13.5px; font-weight:500; }
.line .sz{ font-family:var(--f-mono); font-size:11px; color:var(--bone-mute); }
.line .pr{ font-family:var(--f-mono); font-size:12.5px; color:var(--accent); }
.line .rm{ background:none; border:0; cursor:pointer; color:var(--bone-mute); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; transition:color .3s; padding:.4rem 0; }
.line .rm:hover{ color:#FF7A7A; }
.qty{ display:inline-flex; align-items:center; gap:8px; }
.qty button{ width:28px; height:28px; border:0; cursor:pointer; background:none; color:var(--bone-dim);
  box-shadow:inset 0 0 0 1px var(--ink-4); font-size:14px; line-height:1; transition:color .3s, box-shadow .3s; }
.qty button:hover{ color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.qty b{ font-family:var(--f-mono); font-size:12.5px; min-width:16px; text-align:center; }
.total{ display:flex; justify-content:space-between; align-items:baseline; }
.total .k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-mute); }
body.lang-km .total .k{ letter-spacing:0; text-transform:none; font-size:11.5px; }
.total .v{ font-family:var(--f-mono); font-size:clamp(16px,2vw,22px); color:var(--accent); }
.sheet-note{ font-size:11px; color:var(--bone-mute); line-height:1.55; }
body.lang-km .sheet-note{ font-family:var(--f-khmer); line-height:1.8; }
.empty{ padding:2.4rem 0; text-align:center; color:var(--bone-mute); font-size:13px; }

.checkout{ position:fixed; inset:0; z-index:96; visibility:hidden;
  background:#07070C; overflow-y:auto; opacity:0; transition:opacity .5s var(--e-out), visibility .5s; }
body.checkout-open .checkout{ visibility:visible; opacity:1; }
.co-inner{ min-height:100svh; padding:calc(var(--gut) + 4rem) var(--gut) calc(var(--gut) + 3rem);
  display:grid; gap:clamp(22px,3.6vh,40px); align-content:start; max-width:1100px; margin-inline:auto; }
.co-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.co-h{ font-family:var(--f-display); font-variation-settings:'wdth' 128,'wght' 900;
  font-size:clamp(30px,6vw,72px); line-height:.9; text-transform:uppercase; letter-spacing:-.035em; }
body.lang-km .co-h{ font-family:var(--f-khmer); font-weight:700; text-transform:none; letter-spacing:0; line-height:1.3; }
.co-grid{ display:grid; gap:clamp(18px,3vw,40px); }
@media(min-width:900px){ .co-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.co-block{ display:grid; gap:12px; align-content:start; }
.co-block h3{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-mute); font-weight:600; }
body.lang-km .co-block h3{ letter-spacing:0; text-transform:none; font-size:11.5px; }
.co-field input{ width:100%; background:rgba(12,12,18,.8); color:var(--bone); border:0;
  box-shadow:inset 0 0 0 1px var(--ink-3); padding:.95rem 1rem; font-size:15px; }
.co-field input:focus{ outline:none; box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.opts{ display:grid; gap:8px; }
.opt{ position:relative; display:flex; align-items:center; gap:.8rem; cursor:pointer; padding:.9rem 1rem;
  box-shadow:inset 0 0 0 1px var(--ink-3); background:rgba(12,12,18,.6);
  transition:box-shadow .3s var(--e-out), background .3s; }
.opt:hover{ box-shadow:inset 0 0 0 1px var(--ink-4); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt i{ width:16px; height:16px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1px var(--ink-4);
  display:grid; place-items:center; transition:box-shadow .3s; }
.opt i::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent);
  transform:scale(0); transition:transform .3s var(--e-back); }
.opt.on{ box-shadow:inset 0 0 0 1px var(--accent); background:rgba(20,20,28,.85); }
.opt.on i{ box-shadow:inset 0 0 0 1px var(--accent); }
.opt.on i::after{ transform:scale(1); }
.opt .t{ font-size:13.5px; }
.co-sum{ display:grid; gap:10px; padding:clamp(16px,2.4vw,22px);
  background:rgba(12,12,18,.7); box-shadow:inset 0 0 0 1px var(--ink-3); }
.co-lines{ display:grid; gap:7px; font-size:12.5px; color:var(--bone-dim); }
.co-lines div{ display:flex; justify-content:space-between; gap:1rem; }
.co-done{ display:grid; gap:1.1rem; justify-items:start; padding-block:clamp(30px,8vh,90px); }
.co-done h2{ font-family:var(--f-display); font-variation-settings:'wdth' 130,'wght' 900;
  font-size:clamp(30px,6.4vw,86px); line-height:.88; text-transform:uppercase; letter-spacing:-.04em; }
body.lang-km .co-done h2{ font-family:var(--f-khmer); font-weight:700; text-transform:none; letter-spacing:0; line-height:1.3; }