/* TG-UI3-1110 preview-only Studio UI (?tgui=p1110 or features-live.json "ui").
   Off switch: "ui":{"ids":[]}. Public pages must not load this file. */
html.tgui-on #tees-studio .ts-steps li:not(.tsf-qc){display:none!important}
html.tgui-on #tees-studio .ts-steps:not(:has(.tsf-qc)){display:none!important}
html.tgui-on #tees-studio .ts-steps:has(.tsf-qc){gap:0;margin:0;padding:0;flex:1;min-width:0;justify-content:center}
html.tgui-on #tees-studio .ts-steps .tsf-qc{padding:0;border-radius:0;list-style:none}

/* Boxed close / back → small plain icon, no box or bar */
html.tgui-on #tees-studio .ts-top > .ts-ib.ts-close,
html.tgui-on #tees-studio .ts-top > .ts-ib.ts-prev{
  width:28px!important;
  height:28px!important;
  min-width:28px;
  min-height:28px;
  padding:0!important;
  margin:0 2px 0 0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:inherit!important;
}
html.tgui-on #tees-studio .ts-top > .ts-ib.ts-close svg,
html.tgui-on #tees-studio .ts-top > .ts-ib.ts-prev svg{width:18px;height:18px}

/* Gradient combination swatches, in the same chips row as solid text colours */
html.tgui-on #tees-studio .tgui-grads{
  display:inline-flex;
  gap:6px;
  align-items:center;
  flex:none;
  margin-left:2px;
  padding-left:8px;
  border-left:1px solid var(--line,#e5e5e5);
}
html.tgui-on #tees-studio .ts-dot.tgui-grad{
  width:26px;
  height:26px;
  border-radius:999px;
  box-shadow:0 0 0 1px #d6d6d6;
  flex:none;
  cursor:pointer;
  border:0;
  padding:0;
  position:relative;
}
html.tgui-on #tees-studio .ts-dot.tgui-grad.is-on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #111}
html.tgui-on #tees-studio .ts-dot.tgui-grad::after{
  content:"";
  position:absolute;
  right:1px;bottom:1px;
  width:7px;height:7px;
  border-radius:99px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  background-image:linear-gradient(135deg,#fff 40%,#111 40%);
}

/* Inline 3D: stay on the stage, no separate window / fullscreen modal */
html.tgui-on #tees-studio .ts-stage > #tg3d,
html.tgui-on #tees-studio .ts-stage > #tg3d.tgui-inline{
  position:absolute!important;
  inset:0!important;
  z-index:40!important;
  display:flex!important;
  flex-direction:column;
  width:auto!important;
  height:auto!important;
  background:#eef0f2;
  font-family:inherit;
}
html.tgui-on #tees-studio .ts-stage > #tg3d .tg3d-hd{display:none!important}
html.tgui-on #tees-studio .tgui-3d-back{
  position:absolute;
  top:8px;
  left:8px;
  z-index:5;
  border:0;
  background:transparent;
  color:#111;
  font:600 13px/1 inherit;
  padding:4px 2px;
  cursor:pointer;
  box-shadow:none;
  border-radius:0;
}
html.tgui-on #tees-studio .ts-stage > #tg3d .tg3d-cv{flex:1;position:relative;min-height:0}
html.tgui-on #tees-studio .ts-stage > #tg3d .tg3d-ft{
  display:flex;gap:6px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:#fff;
  overflow-x:auto;
  flex:none;
}
html.tgui-on #tees-studio .ts-stage > #tg3d .tg3d-ft button{
  flex:1 0 auto;
  border:1px solid #ccc;
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  font:600 13px inherit;
  min-height:36px;
}
html.tgui-on #tees-studio .ts-stage > #tg3d .tg3d-ft button[aria-pressed=true]{background:#111;color:#fff;border-color:#111}
html.tgui-on #tees-studio.tgui-3d-open .tg3d-btn{visibility:hidden}

/* The 1-2-3 "Design — Options — Review" line (tg-zn), on the stage (mobile) or in the top bar (desktop).
   Add to cart already opens the Review checklist (ZN intercepts .ts-next). Do not edit tg-zn.js. */
html.tgui-on #tees-studio .tgzn-st{display:none!important}

/* Keep gradient swatches visible on a narrow colour row (do not leave them off-screen in the horizontal scroller). */
html.tgui-on #tees-studio .ts-tools .ts-chips{
  flex-wrap:wrap;
  overflow:visible;
  max-width:100%;
  row-gap:6px;
}