/* CUSTOM LAB — multi-step kit configurator */

.lab-hero{ background: var(--tt-black); padding-block: var(--sp-8) var(--sp-7); }
.lab-hero .t-display{ color: var(--tt-white); }

.lab-layout{
  display:grid; grid-template-columns: 1fr; gap: var(--sp-7);
  padding-block: var(--sp-7) var(--sp-9);
}
@media(min-width:1100px){
  .lab-layout{ grid-template-columns: 200px minmax(0,1fr) 280px; align-items:start; }
}

/* ---- Step rail ---- */
.lab-steps{
  display:flex; gap: var(--sp-2); overflow-x:auto; padding-bottom: var(--sp-2);
}
@media(min-width:1100px){
  .lab-steps{ flex-direction:column; position:sticky; top:calc(var(--header-h) + var(--sp-5)); overflow-x:visible; }
}
.lab-step{
  display:flex; align-items:center; gap:10px; padding: var(--sp-3); flex-shrink:0;
  border:1px solid var(--c-border); text-align:left; min-width:150px;
}
@media(min-width:1100px){ .lab-step{ min-width:0; } }
.lab-step__num{ font-family: var(--font-display); font-weight:700; font-size:0.85rem; color: var(--c-text-muted); }
.lab-step__label{ font-family: var(--font-display); font-weight:600; letter-spacing: var(--ls-cap); text-transform:uppercase; font-size:0.82rem; }
.lab-step.is-active{ border-color: var(--tt-black); background: var(--tt-black); }
.lab-step.is-active .lab-step__num, .lab-step.is-active .lab-step__label{ color: var(--tt-white); }
.lab-step.is-complete .lab-step__num{ color: var(--tt-red); }
.lab-step:disabled{ opacity:.45; cursor:not-allowed; }

/* ---- Panels ---- */
.lab-panel{ display:none; }
.lab-panel.is-active{ display:block; animation: lab-fade-in var(--dur-slow) var(--ease); }
@keyframes lab-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.lab-nav{ display:flex; gap: var(--sp-3); margin-top: var(--sp-8); flex-wrap:wrap; }

/* ---- Selectable tile grids ---- */
.lab-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
@media(min-width:640px){ .lab-grid--sport{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media(min-width:640px){ .lab-grid--product{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media(min-width:640px){ .lab-grid--fabric{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.lab-tile{
  border:1.5px solid var(--c-border); padding: var(--sp-4); text-align:left;
  display:flex; flex-direction:column; gap:6px; transition: border-color var(--dur-fast) var(--ease);
}
.lab-tile:hover{ border-color: var(--tt-gray-400); }
.lab-tile.is-selected{ border-color: var(--tt-black); background: var(--c-surface); }
.lab-tile--sport{ align-items:center; justify-content:center; text-align:center; min-height:72px; font-family: var(--font-display); font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:0.9rem; }
.lab-tile--product .ph,
.lab-tile--product img{ aspect-ratio: 3/4; width:100%; object-fit:cover; margin-bottom: var(--sp-2); }
.lab-tile__title{ font-family: var(--font-display); font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:0.95rem; }
.lab-tile__price{ font-size: var(--fs-body-sm); color: var(--c-text-muted); }
.lab-tile.is-selected .lab-tile__price{ color: var(--tt-red); font-weight:600; }
.lab-tile--fabric{ padding: var(--sp-5); }

/* ---- Segmented toggle (single/team, preview angle) ---- */
.lab-toggle{ display:inline-flex; border:1.5px solid var(--c-border); width:fit-content; }
.lab-toggle__opt{
  padding: 10px 20px; font-family: var(--font-display); font-weight:600; font-size:0.85rem;
  letter-spacing: var(--ls-cap); text-transform:uppercase;
}
.lab-toggle__opt.is-active{ background: var(--tt-black); color: var(--tt-white); }
.lab-toggle__opt + .lab-toggle__opt{ border-left:1.5px solid var(--c-border); }

/* ---- Roster table (team order) ---- */
.lab-roster{ width:100%; border-collapse:collapse; }
.lab-roster th{ text-align:left; font-family: var(--font-display); font-weight:600; letter-spacing: var(--ls-wide); text-transform:uppercase; font-size:0.72rem; color: var(--c-text-muted); padding-bottom: var(--sp-2); }
.lab-roster td{ padding: 6px 6px 6px 0; vertical-align:middle; }
.lab-roster__remove{ width:32px; height:32px; border:1px solid var(--c-border); }
.lab-roster__remove:hover{ border-color: var(--tt-red); color: var(--tt-red); }

/* ---- Form fields ---- */
.lab-field-row{ display:grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
@media(min-width:560px){ .lab-field-row{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.lab-field{ display:flex; flex-direction:column; gap: var(--sp-2); }
.lab-check-row{ display:flex; flex-wrap:wrap; gap: var(--sp-4); margin-top: var(--sp-3); }
.lab-link{ text-decoration:underline; font-size: inherit; }
.lab-custom-size{ margin-top: var(--sp-4); }

/* ---- Upload dropzone ---- */
.lab-upload{
  margin-top: var(--sp-5); border:1.5px dashed var(--c-border); padding: var(--sp-8) var(--sp-5);
  text-align:center; cursor:pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lab-upload:hover, .lab-upload.is-dragover{ border-color: var(--tt-black); background: var(--c-surface); }
.lab-upload svg{ margin-inline:auto; color: var(--c-text-muted); }
.lab-upload[data-has-file] [data-upload-empty]{ display:none; }
.lab-upload [data-upload-result] img{ max-width:220px; max-height:220px; margin-inline:auto; border:1px solid var(--c-border); }

.lab-templates{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.lab-template{ border:1.5px solid var(--c-border); }
.lab-template .ph{ aspect-ratio: 3/4; }
.lab-template.is-selected{ border-color: var(--tt-black); }

/* ---- Mockup preview ---- */
.lab-mockup{ margin-top: var(--sp-6); display:flex; justify-content:center; }
.lab-mockup__garment{ position:relative; width:min(280px, 80vw); text-align:center; }
.lab-mockup__silhouette{ width:100%; height:auto; }
.lab-mockup__art-slot{
  position:absolute; left:32%; top:28%; width:36%; height:38%;
  border:1px dashed var(--tt-gray-400); display:flex; align-items:center; justify-content:center;
  overflow:hidden; background: rgba(255,255,255,.6);
}
.lab-mockup__art-slot img{ width:100%; height:100%; object-fit:contain; }
.lab-mockup__team{ margin-top: var(--sp-4); font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.lab-mockup__number{ font-family: var(--font-display); font-weight:800; font-size:2.5rem; }

/* ---- Team quote request form (step 9) ---- */
.lab-quote-form{ max-width:520px; }

/* ---- Order summary (step 9) ---- */
.lab-summary-table{ margin-top: var(--sp-5); border-top:1px solid var(--c-border); }
.lab-summary-row{ display:flex; justify-content:space-between; padding: var(--sp-3) 0; border-bottom:1px solid var(--c-border); font-size:0.92rem; }
.lab-summary-row--total{ font-weight:700; font-size:1.1rem; }

/* ---- Live rail (full detail — desktop sidebar) ---- */
.lab-rail{ background: var(--c-surface); padding: var(--sp-5); display:none; }
.lab-rail__list{ margin-top: var(--sp-4); display:flex; flex-direction:column; gap: var(--sp-2); }
.lab-rail__list > div{ display:flex; justify-content:space-between; font-size:0.85rem; }
.lab-rail__list dt{ color: var(--c-text-muted); }
.lab-rail__list dd{ margin:0; font-weight:600; }
@media(min-width:1100px){ .lab-rail{ display:block; } }

/* ---- Compact live price bar (mobile/tablet — fixed to viewport bottom) ---- */
.lab-price-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background: var(--tt-white); border-top:1px solid var(--c-border);
  padding: var(--sp-3) var(--sp-4);
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
}
.lab-price-bar .t-price{ font-size:1.15rem; }
.lab-price-bar[hidden]{ display:none; }
@media(min-width:1100px){ .lab-price-bar{ display:none; } }
/* room so the fixed bar never covers the step's Continue/Back buttons */
@media(max-width:1099px){ .lab-layout{ padding-bottom: calc(var(--sp-9) + 56px); } }

/* ---- WhatsApp handoff on the team-quote success state ----
   Uses the `hidden` attribute, so it needs the explicit override below:
   an author rule that sets `display` always beats the browser's default
   [hidden]{display:none} regardless of specificity. */
.lab-quote-whatsapp{ display:flex; margin-top: var(--sp-4); }
.lab-quote-whatsapp[hidden]{ display:none; }

/* ---------------------------------------------------------
   Advance-payment terms modal
   Shown before a custom kit can reach the bag. The add-to-cart
   endpoint refuses a request without the acknowledgement, so this
   is a real gate rather than a dismissible notice.
   --------------------------------------------------------- */
.lab-advance{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding: var(--sp-4);
}
/* The native [hidden] attribute loses to any author rule that also sets
   display — which the line above does. Without this override the modal is
   visible on page load. (Fifth time this theme has hit it; see the README.) */
.lab-advance[hidden]{ display:none; }

.lab-advance__scrim{ position:absolute; inset:0; background: rgba(10,10,10,.72); }
.lab-advance__panel{
  position:relative;
  width:min(520px, 100%);
  max-height: calc(100vh - 2 * var(--sp-4));
  overflow-y:auto;
  background: var(--c-bg);
  border-top:4px solid var(--tt-red);
  padding: var(--sp-6);
}
.lab-advance__eyebrow{ color: var(--tt-red); }
.lab-advance__panel h3{ margin-top: var(--sp-2); }

.lab-advance__figures{
  display:grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: var(--sp-5);
}
.lab-advance__figure{
  border:1px solid var(--c-border); padding: var(--sp-4);
  display:flex; flex-direction:column; gap:4px;
}
.lab-advance__figure strong{
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
}
.lab-advance__figure--accent{ border-color: var(--tt-red); background: var(--tt-red-tint); }
.lab-advance__figure--accent strong{ color: var(--tt-red-dark); }

.lab-advance__list{ list-style:none; padding:0; margin: var(--sp-5) 0 0; }
.lab-advance__list li{
  position:relative; padding-left: var(--sp-5); margin-top: var(--sp-3);
  font-size: var(--fs-body-sm); line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
}
.lab-advance__list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; background: var(--tt-red);
}
.lab-advance__actions{
  display:flex; flex-wrap:wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.lab-advance__actions .btn{ flex:1 1 auto; }

@media (max-width: 480px){
  .lab-advance__panel{ padding: var(--sp-5); }
}