/* t1208 ONE|11 Studio visual overhaul — styling only. Matches the one11meters.com store theme.
   Do not change editors, order intake, export, or data. */
@font-face{font-family:Inter;src:url(fonts-studio/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts-studio/BarlowCondensed-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:BarlowX;src:url(fonts-studio/BarlowCondensed-BlackItalic.woff2) format("woff2");font-weight:900;font-style:italic;font-display:swap}

:root{
  --bg:#050506;
  --bg2:#0b0b0e;
  --card:#0e0e12;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.16);
  --tx:#f4f4f6;
  --mut:#8d8f99;
  --red:#ff1a1a;
  --red2:#c4000a;
  --gold:#d8b46a;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ac:var(--red);
  /* keep t1013 logo box tokens; studio lockup uses its own height below */
  --o11-studio-logo-h:28px;
  --o11-studio-logo-h-sm:22px;
}

html,body{background:var(--bg);color:var(--tx)}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  letter-spacing:-.005em;
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(255,26,26,.07),transparent 60%),
    var(--bg);
}

/* Display / eyebrow type */
.disp, #tkHub .tkhero-copy h1, #tkHub .tksec h2, .stept, header h1, #tkHub .tkcard b{
  font-family:BarlowX,Barlow,Impact,sans-serif;
  font-style:italic;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
#tkHub .tksec h2, #tkHub .tkcard b, .stept, header h1, .htitle{
  letter-spacing:.04em;
}
.eyebrow, #tkHub .tkbar b, #tkHub .tkskip, #tkHub .hubTag934, #tkHub .tkfoot,
#tkHub .tkhero-copy p, .steph{
  font-family:Barlow,Inter,sans-serif;
}

/* --------- Header / nav --------- */
header, #tkHub .tkbar{
  background:rgba(5,5,6,.78)!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line)!important;
}
#tkHub .tkbar{padding:10px 18px!important}
header .htitle, #tkHub .tkbar b{display:none!important} /* replaced by the Studio lockup */
img.studioLogo,
header .studioLogo,
#tkHub .tkbar img.studioLogo,
[data-brand-home985] img.studioLogo,
[data-brand-home985] > img.studioLogo{
  height:var(--o11-studio-logo-h)!important;
  max-height:var(--o11-studio-logo-h)!important;
  width:auto!important;
  filter:none!important; /* lockup is already white; do not invert */
  object-fit:contain;
  flex:none;
  display:block;
}
@media(max-width:700px){
  :root{--o11-studio-logo-h:var(--o11-studio-logo-h-sm)}
}
[data-brand-home985]:focus-visible{
  outline:2px solid var(--red)!important;
  outline-offset:3px;
}

/* Ghost / skip control — store .cust / .btn.ghost */
#tkHub .tkskip,
header .x,
#close, #tkHome, #raceBack941, #backProducts933, #backProducts{
  font-family:Barlow,sans-serif!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.14em;
  border:1px solid var(--line2)!important;
  background:transparent!important;
  color:#c9cad1!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
#tkHub .tkskip:hover, #close:hover, #tkHome:hover, #raceBack941:hover{
  border-color:var(--red)!important;
  box-shadow:0 0 20px rgba(255,26,26,.3)!important;
  color:#fff!important;
}

/* --------- Primary CTAs — store .btn --------- */
#tkHub .tkcta,
#tkBuild,
#raceNext941,
#designNext933,
#toReview933,
#bPdf,
#add,
button.b.p,
#bSubmit{
  position:relative;
  font-family:Barlow,sans-serif!important;
  font-weight:700!important;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#fff!important;
  background:linear-gradient(180deg,#ff2a2a,#c4000a)!important;
  border:0!important;
  border-radius:2px!important;
  box-shadow:0 10px 40px -10px rgba(255,26,26,.6),inset 0 1px 0 rgba(255,255,255,.3)!important;
  overflow:hidden;
}
#tkHub .tkcta:hover,
#tkBuild:hover,
#raceNext941:hover,
#designNext933:hover,
#toReview933:hover,
#add:hover,
button.b.p:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 60px -12px rgba(255,26,26,.85),inset 0 1px 0 rgba(255,255,255,.3)!important;
}
/* Submit stays visually primary but we never auto-click it in QA; style only. */
#bSubmit{letter-spacing:.14em}

/* Secondary buttons */
button.b:not(.p):not(.on){
  font-family:Barlow,sans-serif;
  letter-spacing:.06em;
}

/* --------- Hub landing --------- */
#tkHub{background:transparent}
#tkHub .tkhero-copy h1{
  font-size:clamp(42px,6vw,84px);
  line-height:.88;
  color:#fff;
}
#tkHub .tkhero-copy p{
  color:#b9bbc4!important;
  font-size:16px;
  letter-spacing:.02em;
  text-transform:none;
  font-style:normal;
  font-weight:400;
  font-family:Inter,system-ui,sans-serif!important;
}
#tkHub .tksec h2{
  font-size:clamp(22px,3vw,36px);
  color:#fff;
}
#tkHub .tkfoot{color:var(--mut)!important;letter-spacing:.04em}

/* Hub tiles — store product cards */
#tkHub .tkgrid{gap:18px!important}
#tkHub .tkcard{
  background:linear-gradient(180deg,#101015,#09090b)!important;
  border:1px solid var(--line)!important;
  border-radius:4px!important;
  overflow:hidden;
  transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;
  isolation:isolate;
}
#tkHub .tkcard:hover{
  border-color:rgba(255,40,40,.45)!important;
  transform:translateY(-4px);
  box-shadow:0 30px 80px -30px rgba(255,26,26,.45);
}
#tkHub .tkcard .ph,
#tkHub .matching934{
  position:relative;
  background-color:#09090b!important;
  isolation:isolate;
}
/* reddish shadow / glow under the garment, like store .card .ph:before */
#tkHub .tkcard .ph::after,
#tkHub .matching934::after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:4%;
  height:16%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,30,30,.32),transparent);
  filter:blur(6px);
  opacity:.75;
  pointer-events:none;
  z-index:1;
}
#tkHub .tkcard canvas,
#tkHub .matching934 canvas{position:relative;z-index:2}
#tkHub .hubNumber934{
  background:#0b0b0e!important;
  color:#fff!important;
  border:1px solid var(--line2)!important;
  border-radius:4px!important;
  font-family:BarlowX,Barlow,sans-serif!important;
  font-style:italic;
  font-weight:900!important;
}
#tkHub .hubTag934{
  background:#16161b!important;
  color:#c9cad1!important;
  border-radius:2px!important;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#tkHub .next934{
  border:1px solid rgba(255,26,26,.7)!important;
  box-shadow:0 0 0 3px rgba(255,26,26,.18),0 20px 50px -24px rgba(255,26,26,.55)!important;
}
#tkHub .next934 .hubNumber934,
#tkHub .next934 .hubTag934{
  background:var(--red)!important;
  color:#fff!important;
  border-color:var(--red)!important;
}
#tkHub .underMini1088{
  background:#101015!important;
  border:1px solid var(--line)!important;
  border-radius:4px!important;
  color:var(--tx)!important;
}
#tkHub .raceCaption952,
#matchStatus953{
  background:#0b0b0e!important;
  color:#d6d7dd!important;
}

/* People / final specs tile had a tall empty body — keep it on-theme */
#tkHub .peopleTile934{background:linear-gradient(180deg,#101015,#09090b)!important}

/* --------- Editor chrome --------- */
.panel, .step, .wrap .panel, #peopleStep933, #designStep933, .stepbd{
  background:transparent;
}
.step{
  background:linear-gradient(180deg,#101015,#09090b)!important;
  border:1px solid var(--line)!important;
  border-radius:4px!important;
}
.stepn{
  background:var(--red)!important;
  color:#fff!important;
  border-radius:2px!important;
  font-family:BarlowX,Barlow,sans-serif!important;
  font-style:italic;
}
.stick, .stage, #styleBar{
  background:rgba(5,5,6,.88)!important;
  border-color:var(--line)!important;
}
#styleBar{backdrop-filter:blur(12px)}

/* Palette / chips stay usable; only the frame is themed */
.pal, .palbox, .card, .catalogueProduct, .productTile941, .peopleProduct933{
  border-color:var(--line)!important;
}
.card, .catalogueProduct, .productTile941, article.card, .peopleProduct933{
  background:linear-gradient(180deg,#101015,#09090b)!important;
  border-radius:4px!important;
}
/* reddish glow behind off-ice / catalogue garment tiles */
.catalogueProduct .ph,
.card .ph,
#kBrowse .card,
#focusCanvas, #pvs canvas, #cv{
  /* canvas itself is the preview; wrap glow on parent when possible */
}
#kBrowse .card, .catalogueProduct, .productTile941{
  position:relative;
  isolation:isolate;
}
#kBrowse .card::after,
.catalogueProduct::after,
.productTile941::after{
  content:"";
  position:absolute;
  left:12%;right:12%;bottom:18%;
  height:12%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,30,30,.28),transparent);
  filter:blur(8px);
  pointer-events:none;
  z-index:0;
}

/* Selected / on states: red instead of green/orange */
.pal button.on, .chips button.on, button.on, .dsg button.on, #dsgTabs button.on,
.peopleModes933 button.on, [aria-pressed=true].on{
  border-color:var(--red)!important;
  box-shadow:0 0 0 2px rgba(255,26,26,.25)!important;
}
.productTile941.inKit941{border-color:var(--red)!important;box-shadow:0 0 0 2px rgba(255,26,26,.2)!important}
.inKit941 .tileCheck941{background:#2a0a0c!important;color:#ffb3b3!important}

/* Focus / links */
a{color:inherit}
:focus-visible{outline-color:var(--red)}

/* Splash stays black */
#o11splash, #o11load, #kld{background:#050506}

/* Off-ice header */
header h1 a, header h1 b{color:#fff}
header h1 img.studioLogo{filter:none!important}

/* Size / review typography */
#everything934, #peopleErrors933, .flowNote, .peopleRecommend933{
  color:#c9cad1;
}
#peopleErrors933, .fixIssue941{color:#ffdfa5}

/* Don't restyle print/PDF output documents */
@media print{
  body{background:#fff;color:#000}
}


/* --- t1208 specificity: win over hub-v934.js injected !important greens --- */
html.studio1208 #tkHub .tkcard.next934{
  border:1px solid rgba(255,26,26,.75)!important;
  box-shadow:0 0 0 3px rgba(255,26,26,.2),0 20px 50px -24px rgba(255,26,26,.55)!important;
}
html.studio1208 #tkHub .tkcard.next934 .hubNumber934,
html.studio1208 #tkHub .tkcard.next934 .hubTag934{
  background:var(--red)!important;
  color:#fff!important;
  border-color:var(--red)!important;
}
/* Keep tile titles visible in the 3-column hub at 1440x900 */
html.studio1208 #tkHub .tkcard .ph,
html.studio1208 #tkHub .matching934{
  height:190px!important;
  max-height:22vh;
}
@media(max-width:800px){
  html.studio1208 #tkHub .tkcard .ph,
  html.studio1208 #tkHub .matching934{height:130px!important;max-height:none}
}
/* Selected filter / mode / style chips: red instead of leftover green fills */
html.studio1208 #dsgTabs button.on,
html.studio1208 .peopleModes933 button.on,
html.studio1208 [data-recipient934].on,
html.studio1208 .kBrowse .on,
html.studio1208 button.filter.on,
html.studio1208 .filters button.on,
html.studio1208 [data-layer].on{
  background:rgba(255,26,26,.16)!important;
  border-color:var(--red)!important;
  color:#fff!important;
}

#tkHub .tkcard.next934.tkcard{
  border:1px solid rgba(255,26,26,.75)!important;
  box-shadow:0 0 0 3px rgba(255,26,26,.2),0 20px 50px -24px rgba(255,26,26,.55)!important;
}