/* t1233 — Part B + editor white theme, colourway rail, scrollbar cleanup.
   Landing/hub stays dark with the 16:9 hero. Editors go premium white.
   Official lockup is not swapped in this build. */

/* ========== Shop link (hub + editors) ========== */
a.shopBack{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:8px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  color:#fff!important;
  background:rgba(255,255,255,.06);
  font-family:Barlow,Inter,system-ui,sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.03em;
  text-transform:none;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  min-height:36px;
  box-sizing:border-box;
  transition:background .2s,border-color .2s,color .2s;
}
a.shopBack:hover,
a.shopBack:focus-visible{
  background:rgba(255,26,26,.18);
  border-color:var(--red,#ff1a1a);
  color:#fff!important;
  outline:none;
}
a.shopBack .shopBack-short{display:none}
@media(max-width:700px){
  a.shopBack{padding:7px 10px;font-size:11px;letter-spacing:.06em;margin-right:4px}
  a.shopBack .shopBack-long{display:none}
  a.shopBack .shopBack-short{display:inline}
}

/* ========== Hub: native 16:9 hero, glassy overlapping tiles, one scrollbar ========== */
html.studio1208:has(#tkHub:not(.tk-hide)),
html.studio1208:has(#tkHub:not(.tk-hide)) body{
  overflow:hidden!important;
  height:100%!important;
  max-height:100%!important;
}
html.studio1208 #tkHub{
  --tk-hero-h:auto;
  --tk-hero-min:0px;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  scrollbar-color:#2a2a30 transparent;
}
/* Full 16:9 video lives in its own panel. The bar and hub tiles never
   cover the picture, so faces stay in frame on every clip. */
html.studio1208 #tkHub .tkbar{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:6;
}
html.studio1208 #tkHub .tkhero{
  aspect-ratio:auto!important;
  width:100%;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);
  align-items:center;
  gap:24px 40px;
  padding:18px 28px 10px;
  box-sizing:border-box;
}
html.studio1208 #tkHub .tkhero-media,
html.studio1208 #tkHub .tkhero-media.tkhero-vid{
  position:relative!important;
  inset:auto!important;
  /* Width is capped so the 16:9 box never exceeds the leftover viewport
     under the bar and above the tiles. Height follows aspect-ratio. */
  width:min(100%, calc((100dvh - 65px - 270px) * 16 / 9));
  max-width:100%;
  height:auto!important;
  aspect-ratio:16/9;
  max-height:none;
  background:#000 center / contain no-repeat!important;
  border-radius:4px;
  overflow:hidden;
  justify-self:start;
  align-self:center;
}
html.studio1208 #tkHub .tkhero-vid::after{display:none} /* no extra dimming over faces */
html.studio1208 #tkHub .tkhero-shade{
  display:none!important; /* vignette would sit on the panel; keep the frame clean */
}
html.studio1208 #tkHub .tkhero-vid video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#000;
  display:block!important;
}
html.studio1208 #tkHub .tkhero-copy{
  position:relative;
  padding:8px 8px 8px 0!important;
  width:100%;
  box-sizing:border-box;
  z-index:2;
}
html.studio1208 #tkHub .tkhero-copy .tkhero-inner{
  margin-left:0!important;
  max-width:36em;
}
html.studio1208 #tkHub .tksec{
  margin-top:0!important;
  position:relative;
  z-index:3;
  padding:8px 28px 20px!important;
}
html.studio1208 #tkHub .tksec h2{
  text-shadow:0 2px 16px rgba(0,0,0,.85);
  color:#fff!important;
}
html.studio1208 #tkHub .tkgrid{
  overflow:visible!important;
  scrollbar-width:none!important;
}
html.studio1208 #tkHub .tkgrid::-webkit-scrollbar{display:none!important;width:0;height:0}

/* Glassy tiles over the video */
html.studio1208 #tkHub .tkcard,
html.studio1208 #tkHub .peopleTile934,
html.studio1208 #tkHub .coming934{
  background:linear-gradient(180deg,rgba(16,16,20,.42),rgba(8,8,10,.58))!important;
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.7);
}
html.studio1208 #tkHub .tkcard .ph,
html.studio1208 #tkHub .matching934{
  background-color:transparent!important;
}
html.studio1208 #tkHub .underMini1088{
  background:rgba(10,10,12,.55)!important;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12)!important;
  color:#f4f4f6!important;
}
html.studio1208 #tkHub .tkfoot{
  position:relative;
  z-index:3;
  text-shadow:0 1px 10px #000;
  color:#c9cad1!important;
}

@media(max-width:800px){
  html.studio1208 #tkHub .tkbar{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    gap:6px;
    padding:8px 8px!important;
  }
  html.studio1208 #tkHub .tkbar .studioLogo{height:22px!important}
  html.studio1208 #tkHub .tkskip{
    font-size:9px!important;
    letter-spacing:.04em;
    padding:5px 8px!important;
    min-height:32px!important;
    max-width:42vw;
    white-space:normal;
    line-height:1.15;
    text-align:center;
  }
  html.studio1208 #tkHub .tkhero{
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    aspect-ratio:auto!important;
    height:auto!important;
    padding:0;
    gap:0;
  }
  html.studio1208 #tkHub .tkhero-media,
  html.studio1208 #tkHub .tkhero-media.tkhero-vid{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none;
    aspect-ratio:16/9;
    min-height:0;
    border-radius:0;
    justify-self:stretch;
  }
  html.studio1208 #tkHub .tkhero-vid video{
    position:absolute!important;
    inset:0!important;
  }
  html.studio1208 #tkHub .tkhero-copy{
    padding:14px 14px 16px!important;
  }
  html.studio1208 #tkHub .tkhero-copy h1{font-size:clamp(26px,8vw,36px)!important}
  html.studio1208 #tkHub .tkhero-copy p{font-size:12px!important;margin-bottom:10px!important}
  html.studio1208 #tkHub .tksec{
    margin-top:0!important;
    padding:0 0 24px!important;
  }
}

/* ========== White theme: race + people editors (hub stays dark) ========== */
html.studio1208 body[data-hub-spoke=race],
html.studio1208 body[data-hub-spoke=people],
html.studio1208 body[data-hub-spoke=clothing]{
  --bg:#f4f4f6;
  --bg2:#ececee;
  --card:#ffffff;
  --line:rgba(0,0,0,.08);
  --line2:rgba(0,0,0,.16);
  --tx:#141416;
  --mut:#5c5e66;
  --ac:var(--red,#ff1a1a);
  background:
    radial-gradient(1000px 480px at 80% -8%,rgba(255,26,26,.06),transparent 60%),
    var(--bg)!important;
  color:var(--tx)!important;
}
html.studio1208 body[data-hub-spoke=race] header,
html.studio1208 body[data-hub-spoke=people] header,
html.studio1208 body[data-hub-spoke=clothing] header{
  background:rgba(255,255,255,.9)!important;
  border-bottom:1px solid var(--line)!important;
  color:var(--tx);
}
html.studio1208 body[data-hub-spoke=race] header .studioLogo,
html.studio1208 body[data-hub-spoke=people] header .studioLogo,
html.studio1208 body[data-hub-spoke=clothing] header .studioLogo,
html.studio1208 body[data-hub-spoke=race] header h1 img.studioLogo,
html.studio1208 body[data-hub-spoke=people] header h1 img.studioLogo,
html.studio-editor header h1 img.studioLogo{
  filter:invert(1)!important;
}
html.studio1208 body[data-hub-spoke=race] a.shopBack,
html.studio1208 body[data-hub-spoke=people] a.shopBack,
html.studio1208 body[data-hub-spoke=clothing] a.shopBack,
html.studio-editor a.shopBack{
  color:#111!important;
  border-color:rgba(0,0,0,.16);
  background:#fff;
}
html.studio1208 body[data-hub-spoke=race] a.shopBack:hover,
html.studio1208 body[data-hub-spoke=people] a.shopBack:hover,
html.studio-editor a.shopBack:hover{
  color:#111!important;
  background:rgba(255,26,26,.1);
  border-color:var(--red,#ff1a1a);
}

html.studio1208 body[data-hub-spoke=race] .step,
html.studio1208 body[data-hub-spoke=people] .step,
html.studio1208 body[data-hub-spoke=race] .card,
html.studio1208 body[data-hub-spoke=people] .card,
html.studio1208 body[data-hub-spoke=people] .peopleProduct933,
html.studio1208 body[data-hub-spoke=people] .catalogueProduct,
html.studio1208 body[data-hub-spoke=people] .productTile941,
html.studio1208 body[data-hub-spoke=people] #everything934,
html.studio1208 body[data-hub-spoke=people] .chosenVisualGrid934 article{
  background:#fff!important;
  border:1px solid var(--line)!important;
  color:var(--tx)!important;
  box-shadow:0 8px 28px -18px rgba(0,0,0,.25);
}
html.studio1208 body[data-hub-spoke=race] .stick,
html.studio1208 body[data-hub-spoke=race] .stage,
html.studio1208 body[data-hub-spoke=race] #styleBar,
html.studio1208 body[data-hub-spoke=people] #styleBar{
  background:transparent!important;
  border-color:var(--line)!important;
  color:var(--tx);
}
html.studio1208 body[data-hub-spoke=race] #pname,
html.studio1208 body[data-hub-spoke=race] #vl,
html.studio1208 body[data-hub-spoke=race] #vl span{
  color:var(--mut)!important;
}
html.studio1208 body[data-hub-spoke=race] .stept,
html.studio1208 body[data-hub-spoke=people] .stept,
html.studio1208 body[data-hub-spoke=race] .steph,
html.studio1208 body[data-hub-spoke=people] .steph,
html.studio1208 body[data-hub-spoke=people] #everything934 p,
html.studio1208 body[data-hub-spoke=people] .flowNote,
html.studio1208 body[data-hub-spoke=people] .peopleRecommend933{
  color:var(--tx)!important;
}
html.studio1208 body[data-hub-spoke=race] .steph,
html.studio1208 body[data-hub-spoke=people] .steph{
  color:var(--mut)!important;
}

html.studio1208 body[data-hub-spoke=race] input,
html.studio1208 body[data-hub-spoke=race] select,
html.studio1208 body[data-hub-spoke=race] textarea,
html.studio1208 body[data-hub-spoke=people] input,
html.studio1208 body[data-hub-spoke=people] select,
html.studio1208 body[data-hub-spoke=people] textarea{
  background:#fff!important;
  color:var(--tx)!important;
  border:1px solid var(--line2)!important;
}
html.studio1208 body[data-hub-spoke=race] button:not(.shopBack):not(.on):not(.p):not(#bSubmit):not(#raceNext941):not(#designNext933):not(#toReview933):not(#tkBuild),
html.studio1208 body[data-hub-spoke=people] button:not(.shopBack):not(.on):not(.p):not(#bSubmit):not(#designNext933):not(#toReview933):not(.peopleModes933 button.on){
  color:var(--tx);
}
html.studio1208 body[data-hub-spoke=race] #dsgTabs button,
html.studio1208 body[data-hub-spoke=race] .flowChoice,
html.studio1208 body[data-hub-spoke=race] .flowProduct,
html.studio1208 body[data-hub-spoke=race] .flowSlot,
html.studio1208 body[data-hub-spoke=race] .flowRecommendation{
  background:#fff!important;
  color:var(--tx)!important;
  border-color:var(--line2)!important;
}
html.studio1208 body[data-hub-spoke=race] #dsgTabs button.on,
html.studio1208 body[data-hub-spoke=people] .peopleModes933 button.on{
  background:rgba(255,26,26,.1)!important;
  border-color:var(--red)!important;
  color:#111!important;
}
html.studio1208 body[data-hub-spoke=race] .dcentry,
html.studio1208 body[data-hub-spoke=race] .dcrow,
html.studio1208 body[data-hub-spoke=race] .dct{
  color:var(--tx);
}

/* Kill the old inner colourway scrollbar — rail lives under the preview */
html.studio1208 .palbox{
  max-height:none!important;
  overflow:visible!important;
  border:0!important;
  padding:0!important;
}
html.studio1208 .palbox.cwRailMoved{
  display:none!important;
}

/* ========== Colourway army row (t1250) — full-height cutouts, no tiles ========== */
#cwRail{
  width:100%;
  margin:0 0 8px;
  min-width:0;
  position:relative;
  z-index:4;
}
#cwRail .cwRailHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 2px 0;
}
#cwRail .cwRailHead b{
  font-family:Barlow,Inter,sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--tx,#141416);
}
#cwRail .cwRailHint{
  font-size:11px;
  color:var(--mut,#5c5e66);
  letter-spacing:.02em;
}
#cwRail .cwRailShelf{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:4px;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}
#cwRail .cwRailTrackWrap{
  position:relative;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
/* Shared floor shadow under the lineup */
#cwRail .cwRailTrackWrap::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:34px;
  height:14px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.16) 0%, rgba(0,0,0,.05) 40%, transparent 72%);
  pointer-events:none;
  z-index:0;
}
#cwRail #pal.pal{
  display:flex!important;
  flex-wrap:nowrap!important;
  grid-template-columns:none!important;
  align-items:flex-end;
  gap:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:none;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none!important;
  cursor:grab;
  padding:36px 28px 8px!important;
  margin:0;
  touch-action:pan-x;
  background:transparent!important;
  position:relative;
  z-index:1;
}
#cwRail #pal.pal::-webkit-scrollbar{display:none!important;height:0;width:0}
#cwRail #pal.pal.is-dragging{
  cursor:grabbing;
  user-select:none;
}

/* Full-height figures (sprite cells 200×420), slight overlap, no tile boxes */
#cwRail #pal button{
  flex:0 0 142px;
  width:142px;
  max-width:142px;
  height:auto;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 -44px 0 0!important;
  position:relative;
  z-index:1;
  color:var(--tx,#141416)!important;
  text-align:center;
  font-size:10px;
  line-height:1.2;
}
#cwRail #pal button:hover{z-index:4}
#cwRail #pal button.on{z-index:6}
#cwRail #pal button::before{content:none!important;display:none!important}
#cwRail #pal button .th{
  display:block;
  width:142px;
  height:300px;
  aspect-ratio:auto!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:url(pal/thumbs-full.webp?v=t1516v08)!important;
  background-size:1000% 2200%!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  filter:saturate(.92) brightness(.96);
  opacity:.8;
  transform:scale(.96);
  transform-origin:center bottom;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s, filter .28s;
}
#cwRail #pal button>div,
#cwRail #pal button span:not(.th),
#cwRail #pal button small,
#cwRail #pal button b{
  color:var(--tx,#141416);
  margin-top:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
  letter-spacing:.02em;
  opacity:0;
  height:1.3em;
}
#cwRail #pal button:hover .th{
  opacity:.96;
  filter:none;
  transform:scale(1.02);
}
#cwRail #pal button.on .th{
  opacity:1;
  filter:none;
  transform:scale(1.14);
}
#cwRail #pal button.on>div,
#cwRail #pal button.on span:not(.th),
#cwRail #pal button.on small,
#cwRail #pal button.on b{
  color:var(--tx,#141416);
  font-weight:700;
  opacity:1;
}
#cwRail #pal button.on::after{
  content:"";
  display:block;
  width:36px;
  height:3px;
  margin:4px auto 0;
  border-radius:99px;
  background:var(--red,#ff1a1a);
  box-shadow:0 0 10px rgba(255,26,26,.7);
}

#cwRail .cwRailBtn{
  flex:0 0 34px;
  width:34px;
  align-self:center;
  margin-bottom:28px;
  height:54px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  border-radius:10px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  z-index:6;
}
#cwRail .cwRailBtn:hover{border-color:var(--red,#ff1a1a);color:var(--red,#ff1a1a)}
#cwRail .cwRailBtn:disabled{opacity:.28;cursor:default;border-color:rgba(0,0,0,.08);color:#999}
@media(max-width:700px){
  #cwRail .cwRailBtn{display:none}
  #cwRail #pal button{flex-basis:104px;width:104px;max-width:104px;margin:0 -32px 0 0!important}
  #cwRail #pal button .th{width:104px;height:220px}
  #cwRail .cwRailHint{display:none}
  #cwRail #pal.pal{padding:24px 16px 6px!important}
  #cwRail .cwRailTrackWrap::after{bottom:28px}
}

/* ========== Off-ice / team clothing white theme ========== */
html.studio-editor,
html.studio-editor body{
  --bg:#f4f4f6;
  --bg2:#ececee;
  --card:#ffffff;
  --line:rgba(0,0,0,.08);
  --line2:rgba(0,0,0,.16);
  --tx:#141416;
  --mut:#5c5e66;
  --ac:var(--red,#ff1a1a);
  background:var(--bg)!important;
  color:var(--tx)!important;
}
html.studio-editor body{
  background:
    radial-gradient(1000px 480px at 80% -8%,rgba(255,26,26,.06),transparent 60%),
    var(--bg)!important;
}
html.studio-editor header{
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid var(--line)!important;
  color:var(--tx)!important;
}
html.studio-editor header h1,
html.studio-editor header h1 a,
html.studio-editor header h1 b{color:#111!important}
html.studio-editor header .x,
html.studio-editor #close,
html.studio-editor #backProducts{
  background:#fff!important;
  color:#111!important;
  border:1px solid var(--line2)!important;
}
html.studio-editor main,
html.studio-editor #browseWrap,
html.studio-editor #kBrowse,
html.studio-editor #pvs,
html.studio-editor #settings,
html.studio-editor #items,
html.studio-editor .card,
html.studio-editor #tgC,
html.studio-editor .kBrowse,
html.studio-editor .kDetail{
  background:transparent;
  color:var(--tx);
}
html.studio-editor .card,
html.studio-editor #kBrowse .card,
html.studio-editor .catalogueProduct,
html.studio-editor .productTile941,
html.studio-editor #tgC{
  background:#fff!important;
  border:1px solid var(--line)!important;
  color:var(--tx)!important;
  box-shadow:0 8px 28px -18px rgba(0,0,0,.25);
}
html.studio-editor footer#clothingFloat960,
html.studio-editor footer{
  background:rgba(255,255,255,.94)!important;
  border-top:1px solid var(--line)!important;
  color:var(--tx)!important;
}
html.studio-editor input,
html.studio-editor select,
html.studio-editor textarea{
  background:#fff!important;
  color:var(--tx)!important;
  border:1px solid var(--line2)!important;
}
html.studio-editor .szg input,
html.studio-editor .nm input{
  background:#fff!important;
  color:#111!important;
  border:1px solid var(--line2)!important;
}

/* Off-ice stray inner scroll: let the document scroll, don't double-scroll the browse pane at desktop */
@media(min-width:821px){
  html.studio-editor #pvs{
    overflow:visible!important;
    max-height:none!important;
  }
}


/* White theme: leftover dark chrome in the race/people panel */
html.studio1208 body[data-hub-spoke=race] .dcentry,
html.studio1208 body[data-hub-spoke=race] .dcrow,
html.studio1208 body[data-hub-spoke=race] .stephd,
html.studio1208 body[data-hub-spoke=people] .stephd,
html.studio1208 body[data-hub-spoke=race] .nomask,
html.studio1208 body[data-hub-spoke=people] .nomask,
html.studio1208 body[data-hub-spoke=race] .acc,
html.studio1208 body[data-hub-spoke=people] .acc{
  background:#fff!important;
  color:var(--tx)!important;
  border-color:var(--line)!important;
}
html.studio1208 body[data-hub-spoke=race] .stephd,
html.studio1208 body[data-hub-spoke=people] .stephd,
html.studio1208 body[data-hub-spoke=race] .dcentry,
html.studio1208 body[data-hub-spoke=race] .dct,
html.studio1208 body[data-hub-spoke=race] .acch,
html.studio1208 body[data-hub-spoke=people] .acch{
  color:var(--tx)!important;
}

/* Keep the 4-view + hanger rail on the first screen at desktop.
   #raceFooter941 lives inside .stick — do not max-height the stick or the
   Next button overflows onto the rail. */
@media(min-width:981px){
  html.studio1208 body[data-hub-spoke=race] #cv{
    max-height:calc(100vh - 620px)!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    margin-left:auto;
    margin-right:auto;
  }
  html.studio1208 body[data-hub-spoke=race] .stick{
    max-height:none!important;
    padding-bottom:0!important;
  }
  html.studio1208 body[data-hub-spoke=race] .wrap{
    padding-bottom:16px!important;
  }
  html.studio1208 body[data-hub-spoke=race] #raceFooter941{
    position:relative!important;
    inset:auto!important;
    margin:8px 0 6px auto!important;
    z-index:5;
  }
}

/* Off-ice selected filter: black/red, not leftover green */
html.studio-editor .filters button.on,
html.studio-editor [data-layer].on,
html.studio-editor .kBrowse .on,
html.studio-editor button.filter.on,
html.studio-editor #kBrowse button.on,
html.studio-editor .chip.on,
html.studio-editor [aria-pressed=true]{
  background:#111!important;
  color:#fff!important;
  border-color:#111!important;
}

html.studio1208 body[data-hub-spoke=people] .dcentry,
html.studio1208 body[data-hub-spoke=people] .dcrow,
html.studio1208 body[data-hub-spoke=people] .dct{
  background:#fff!important;
  color:var(--tx)!important;
  border-color:var(--line)!important;
}