/* ============ The Custom Lab ============ */
.cl-hero{padding:2.4rem 0 1.2rem;border-bottom:1px solid var(--line)}
.cl-hero h1{font-family:'Oswald',sans-serif;font-size:2.6rem;margin:.4rem 0 .3rem;line-height:1}
.cl-hero p{color:var(--muted,#9aa0aa);max-width:620px;margin:0}

.cl-wrap{display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,440px);gap:2.2rem;align-items:start;margin:1.6rem 0 3rem}

/* ---- Milestone progress bar (Quality → Type → Size → Colour → Design) ----
   Spans the full builder width above both columns. The track sits behind the row of
   dots; each dot is centred in its fifth, so the fill (done/5) always reaches past a
   completed milestone's dot. 100% == the order is ready to place. */
.cl-progress{grid-column:1 / -1;position:relative;margin:.2rem 0 1.6rem}
.cl-progress-track{position:absolute;left:10%;right:10%;top:6px;height:4px;border-radius:999px;
  background:var(--line,#2a2d35);overflow:hidden}
.cl-progress-fill{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent,#c6ff00),var(--accent,#c6ff00));
  transition:width .55s cubic-bezier(.3,1.2,.4,1)}
.cl-progress-steps{list-style:none;display:flex;margin:0;padding:0;position:relative}
.cl-progress-step{flex:1;min-width:0;text-align:center}
.cl-progress-dot{display:block;width:16px;height:16px;margin:0 auto;border-radius:50%;
  background:var(--bg-soft,#14161c);border:2px solid var(--line,#2a2d35);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.cl-progress-lbl{display:block;margin-top:.55rem;font-size:.74rem;font-weight:600;
  color:var(--muted,#9aa0aa);transition:color .35s ease}
.cl-progress-step.done .cl-progress-dot{background:var(--accent,#c6ff00);border-color:var(--accent,#c6ff00)}
.cl-progress-step.done .cl-progress-lbl{color:var(--ink,#e9e9ee)}
.cl-progress-step.current .cl-progress-dot{border-color:var(--accent,#c6ff00);
  box-shadow:0 0 0 4px var(--accent-soft,rgba(198,255,0,.2));animation:clMsPulse 1.6s ease-in-out infinite}
.cl-progress-step.current .cl-progress-lbl{color:var(--ink,#e9e9ee)}
@keyframes clMsPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-soft,rgba(198,255,0,.2))}
  50%{box-shadow:0 0 0 7px var(--accent-soft,rgba(198,255,0,.08))}}
@media (prefers-reduced-motion:reduce){.cl-progress-step.current .cl-progress-dot{animation:none}}

/* ---- Preview stage ---- */
/* Steps 1-2 live in this column now, so it is far taller than the viewport —
   sticky would pin it and hide its lower half. */
.cl-stage-col{min-width:0}
.cl-stage{position:relative;width:100%;aspect-ratio:1/1.08;border:1.5px solid var(--line);border-radius:16px;
  background:radial-gradient(120% 120% at 50% 0%,#181b22,#0d0f13);overflow:hidden;display:flex;align-items:center;justify-content:center}
.cl-shirt{width:95%;height:95%;display:none;
  --sc:#e9e9ee;--sc2:#d7d7dd;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
/* Only the mockup matching the stage's current view AND style is shown. data-style is
   "standard" (regular/oversized) by default and "raglan" when the raglan fit is chosen. */
.cl-stage[data-view="front"][data-style="standard"] .cl-shirt[data-view="front"][data-style="standard"],
.cl-stage[data-view="back"][data-style="standard"]  .cl-shirt[data-view="back"][data-style="standard"],
.cl-stage[data-view="left"][data-style="standard"]  .cl-shirt[data-view="left"][data-style="standard"],
.cl-stage[data-view="right"][data-style="standard"] .cl-shirt[data-view="right"][data-style="standard"],
.cl-stage[data-view="front"][data-style="raglan"] .cl-shirt[data-view="front"][data-style="raglan"],
.cl-stage[data-view="back"][data-style="raglan"]  .cl-shirt[data-view="back"][data-style="raglan"],
.cl-stage[data-view="left"][data-style="raglan"]  .cl-shirt[data-view="left"][data-style="raglan"],
.cl-stage[data-view="right"][data-style="raglan"] .cl-shirt[data-view="right"][data-style="raglan"]{display:block}
/* Defensive fallback: if data-style is ever unset, show the standard mockup for the view. */
.cl-stage[data-view="front"]:not([data-style]) .cl-shirt[data-view="front"][data-style="standard"],
.cl-stage[data-view="back"]:not([data-style])  .cl-shirt[data-view="back"][data-style="standard"],
.cl-stage[data-view="left"]:not([data-style])  .cl-shirt[data-view="left"][data-style="standard"],
.cl-stage[data-view="right"]:not([data-style]) .cl-shirt[data-view="right"][data-style="standard"]{display:block}
.cl-shirt .cl-body{fill:var(--sc)}
.cl-shirt .cl-sleeve{fill:var(--sc2)}
.cl-shirt .cl-collar{fill:rgba(0,0,0,.16)}
.cl-shirt .cl-seam{fill:none;stroke:rgba(0,0,0,.16);stroke-width:1.4;stroke-linecap:round}
.cl-art-layer{position:absolute;inset:0;pointer-events:none}
.cl-art{position:absolute;transform:translate(-50%,-50%);cursor:grab;pointer-events:auto;touch-action:none;
  border:1.5px dashed transparent;border-radius:4px;user-select:none;-webkit-user-drag:none}
.cl-art img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.cl-art.active{border-color:var(--accent,#c6ff00);box-shadow:0 0 0 1px rgba(198,255,0,.25)}
.cl-art.dragging{cursor:grabbing}
.cl-stage-empty{position:absolute;color:var(--muted,#9aa0aa);font-size:.9rem;pointer-events:none}

/* Front/Back toggle now sits to the LEFT of the preview, stacked vertically */
.cl-stage-row{display:flex;gap:.6rem;align-items:center}
.cl-stage-row .cl-stage{flex:1;min-width:0}
.cl-view-toggle{display:flex;flex-direction:column;gap:.4rem;flex:none;margin:0}
.cl-view-toggle button{flex:0 0 auto;padding:.5rem .9rem;border-radius:999px;border:1.5px solid var(--line);
  background:transparent;color:var(--ink,#e9e9ee);font-weight:600;font-size:.85rem;cursor:pointer;transition:.15s}
.cl-view-toggle button.active{background:var(--accent,#c6ff00);color:#0d0f13;border-color:var(--accent,#c6ff00)}
.cl-tip{text-align:center;font-size:.78rem;color:var(--muted,#9aa0aa);margin:.4rem 0 0}
/* Corner resize handles on the active print */
.cl-handle{position:absolute;width:15px;height:15px;background:var(--accent,#c6ff00);
  border:2px solid #0d0f13;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.45);
  pointer-events:auto;touch-action:none;z-index:2}
.cl-h-nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}
.cl-h-ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}
.cl-h-sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}
.cl-h-se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}

/* ---- Controls ---- */
.cl-controls{min-width:0}
.cl-step{border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;margin-bottom:1.1rem;background:var(--bg-soft,#14161c)}
.cl-step h3{font-family:'Oswald',sans-serif;font-size:1.15rem;margin:0 0 .8rem;display:flex;align-items:center;gap:.55rem}
.cl-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent,#c6ff00);color:#0d0f13;font-size:.85rem;font-weight:800}
.cl-hint{font-size:.78rem;margin:.5rem 0 0}

/* Colour + size chips */
/* Two even columns: the colour list is long and a wrapping flex row left ragged
   half-rows. Grid items are blockified, so each chip fills its column. */
.cl-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.cl-color>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-color{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem .35rem .4rem;border:1.5px solid var(--line);
  border-radius:999px;cursor:pointer;font-size:.82rem;transition:.15s;background:#0f1116}
.cl-color:hover{border-color:#555}
.cl-color.active{border-color:var(--accent,#c6ff00);box-shadow:0 0 0 1px rgba(198,255,0,.3)}
.cl-color .sw{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex:none;display:inline-block}
.cl-color .sw.two{position:relative;overflow:hidden}
.cl-sizes{display:flex;flex-wrap:wrap;gap:.5rem}
.cl-size{min-width:44px;text-align:center;padding:.45rem .7rem;border:1.5px solid var(--line);border-radius:9px;
  cursor:pointer;font-weight:600;font-size:.85rem;transition:.15s;background:#0f1116}
.cl-size:hover{border-color:#555}
.cl-size.active{border-color:var(--accent,#c6ff00);background:var(--accent,#c6ff00);color:#0d0f13}
.cl-opt-block{margin-top:.9rem}
.cl-opt-block .opt-label{font-weight:700;font-size:.82rem;margin-bottom:.5rem}

/* Size chips on the left, Size Guide button pinned right, joined by an animated
   "marching" dashed connector that flows toward the button. */
.cl-size-row{display:flex;align-items:center;gap:.55rem;flex-wrap:nowrap}
.cl-size-row .cl-sizes{flex:0 1 auto}
.cl-size-connector{flex:1 1 22px;min-width:18px;height:2px;position:relative;align-self:center;
  background-image:linear-gradient(90deg,var(--line-strong,#555) 0 58%,transparent 58% 100%);
  background-size:11px 2px;background-repeat:repeat-x;
  animation:clSizeFlow .9s linear infinite}
.cl-size-connector::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;
  border-top:2px solid var(--accent,#c6ff00);border-right:2px solid var(--accent,#c6ff00);
  transform:translateY(-50%) rotate(45deg)}
@keyframes clSizeFlow{to{background-position:11px 0}}
@media (prefers-reduced-motion:reduce){.cl-size-connector{animation:none}}
/* Guide button now lives inline in the size row — drop its stacked margin, keep it from shrinking */
.cl-size-row .cl-guide-btn{margin:0;flex:none}
.cl-size-row .cl-guide-btn[hidden]{display:none}
/* Hide the connector when the guide button isn't shown yet */
.cl-size-row:has(.cl-guide-btn[hidden]) .cl-size-connector{display:none}
/* Narrow screens: let the row wrap and drop the connector; keep the button to the right */
@media (max-width:560px){
  .cl-size-row{flex-wrap:wrap}
  .cl-size-connector{display:none}
  .cl-size-row .cl-guide-btn{margin-left:auto}
}

/* Qty: the −/+ buttons are the control, so drop the native number spinners (scroll works too) */
.cl-controls .qty input[type=number]{-moz-appearance:textfield;appearance:textfield}
.cl-controls .qty input::-webkit-outer-spin-button,
.cl-controls .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Prints — one card per placement, each with an on/off switch + its own image */
/* One print spot per row: a single calm column reads far better than a dense grid,
   and the wider gap keeps each spot feeling separate. */
.cl-prints{display:grid;grid-template-columns:1fr;gap:1.1rem}
.cl-print-card{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:.6rem .7rem;
  border:1.5px solid var(--line);border-radius:12px;background:#0f1116;transition:.15s}
.cl-print-card.has{border-color:rgba(198,255,0,.5)}
.cl-print-card.active{border-color:var(--accent,#c6ff00);box-shadow:0 0 0 1px rgba(198,255,0,.3)}
.cl-print-card.off{opacity:.5}
.cl-print-card.off .cl-print-body{display:none}
.cl-print-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.cl-print-label{font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-print-body{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.cl-print-thumb{width:44px;height:44px;flex:none;border-radius:8px;background:#07080b;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.cl-print-thumb img{width:100%;height:100%;object-fit:contain}
.cl-print-plus{display:none}
.cl-print-state{font-size:.72rem;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Empty card → a clear, prominent "＋ Add art" button (a plain thumbnail was too subtle) */
.cl-print-card:not(.has) .cl-print-body{align-self:stretch;margin-right:2.15rem;justify-content:center;gap:.45rem;
  padding:.35rem .85rem;border:1px solid var(--accent,#c6ff00);border-radius:9px;
  background:rgba(198,255,0,.08);transition:.15s}
.cl-print-card:not(.has) .cl-print-body:hover{background:rgba(198,255,0,.16)}
.cl-print-card:not(.has) .cl-print-thumb{width:auto;height:auto;background:transparent;border:none}
.cl-print-card:not(.has) .cl-print-state{line-height:1.2}
.cl-print-card:not(.has) .cl-print-state{flex:none;font-size:.82rem;font-weight:700;color:var(--accent,#c6ff00)}
.cl-print-card.has .cl-print-plus{display:none}
.cl-print-remove{position:absolute;right:.7rem;top:2.4rem;width:26px;height:26px;flex:none;
  border-radius:50%;border:1px solid var(--line);background:transparent;color:#e5484d;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.cl-print-remove svg{width:14px;height:14px;pointer-events:none}
.cl-print-remove:hover{background:#e5484d;border-color:#e5484d;color:#fff}
.cl-print-remove:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(229,72,77,.35)}
/* Stylish on/off toggle */
.cl-switch{position:relative;display:inline-block;width:40px;height:22px;flex:none}
.cl-switch input{position:absolute;opacity:0;width:0;height:0}
.cl-slider{position:absolute;inset:0;background:#2a2d35;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:.2s}
.cl-slider::before{content:"";position:absolute;height:16px;width:16px;left:2px;top:2px;border-radius:50%;background:#8b8f98;transition:.2s}
.cl-switch input:checked + .cl-slider{background:rgba(198,255,0,.28);border-color:var(--accent,#c6ff00)}
.cl-switch input:checked + .cl-slider::before{transform:translateX(18px);background:var(--accent,#c6ff00)}
.cl-switch input:focus-visible + .cl-slider{box-shadow:0 0 0 2px rgba(198,255,0,.4)}

/* Upload progress overlay (Place Custom Order) */
.cl-overlay{position:fixed;inset:0;z-index:2000;background:rgba(8,9,12,.86);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:1.5rem}
.cl-overlay[hidden]{display:none}
.cl-overlay-card{width:100%;max-width:420px;text-align:center;background:var(--bg-soft,#14161c);
  border:1.5px solid var(--accent,#c6ff00);border-radius:16px;padding:2rem 1.6rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cl-overlay-card h3{font-family:'Oswald',sans-serif;margin:.6rem 0 1rem;font-size:1.25rem}
.cl-ov-spinner{width:38px;height:38px;margin:0 auto;border:3px solid rgba(198,255,0,.25);
  border-top-color:var(--accent,#c6ff00);border-radius:50%;animation:clOvSpin .8s linear infinite}
@keyframes clOvSpin{to{transform:rotate(360deg)}}
.cl-ov-bar{height:12px;border-radius:999px;background:#22252d;overflow:hidden;margin:.4rem 0}
.cl-ov-bar span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#9ad600,var(--accent,#c6ff00));transition:width .3s ease}
.cl-ov-pct{font-weight:800;font-size:1.1rem}
/* Order-confirmed state of the same overlay (delivery-details step) */
.cl-ov-tick{width:64px;height:64px;margin:0 auto .4rem;border-radius:50%;background:var(--accent,#c6ff00);
  color:#0d0f13;font-size:2rem;font-weight:900;display:flex;align-items:center;justify-content:center;
  animation:clOvPop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes clOvPop{from{transform:scale(0)}to{transform:scale(1)}}
.cl-ov-proud{color:var(--accent,#c6ff00);font-weight:700;margin:.5rem 0 0}
@media (prefers-reduced-motion:reduce){.cl-ov-spinner{animation:none}.cl-ov-tick{animation:none}}

/* Summary */
.cl-summary{border:1.5px solid var(--accent,#c6ff00);border-radius:14px;padding:1.1rem 1.2rem;background:var(--bg-soft,#14161c)}
.cl-price-row{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;padding:.25rem 0}
.cl-price-row.cl-total{font-size:1.15rem;font-weight:800;border-top:1px solid var(--line);margin-top:.4rem;padding-top:.6rem}
.cl-summary .btn{margin-top:.9rem}
/* "Place Custom Order" stays inactive until every milestone is complete */
.cl-summary .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:saturate(.35)}
.cl-summary .btn:disabled:hover{background:var(--accent,#c6ff00)}
.cl-submit-hint{font-size:.78rem;text-align:center;margin:.55rem 0 0}
.cl-submit-hint[hidden]{display:none}

/* Size guide — tucked behind a button under the Chart step; opens the modal below.
   Explicit light text so it never goes dark-on-dark; Theme 2 re-skins it to a cream pill. */
.cl-guide-btn{display:inline-flex;align-items:center;gap:.45rem;margin:.9rem 0 .2rem;
  padding:.5rem .9rem;border:1.5px solid var(--line,#2E313C);border-radius:10px;background:#1B1D24;
  color:#F3F4F6;font-weight:700;font-size:.82rem;cursor:pointer;transition:.15s}
.cl-guide-btn:hover{border-color:var(--accent,#c6ff00);color:var(--accent,#c6ff00)}
.cl-guide-btn svg{flex:none}

/* Size guide modal — SELF-CONTAINED and always dark (a dark dialog over a dimmed
   backdrop reads fine on any theme, so it never inherits the page's theme colours;
   this is why nothing here uses --ink/--bg-soft, which flip to dark text on Theme 2). */
.cl-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;background:rgba(0,0,0,.66);backdrop-filter:blur(2px)}
.cl-modal[hidden]{display:none}
.cl-modal-card{position:relative;width:100%;max-width:480px;max-height:88vh;overflow:auto;
  background:#1B1D24;color:#F3F4F6;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:1.3rem 1.4rem;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.cl-modal-card h3{color:#F3F4F6}
.cl-modal-card .muted{color:#9aa0ad}
.cl-modal-close{position:absolute;top:.6rem;right:.7rem;width:34px;height:34px;border:0;border-radius:50%;
  background:transparent;color:#F3F4F6;font-size:1.5rem;line-height:1;cursor:pointer;transition:.15s}
.cl-modal-close:hover{background:rgba(255,255,255,.08)}
body.cl-modal-lock{overflow:hidden}
.cl-unit-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.cl-unit-toggle button{border:0;background:transparent;color:#F3F4F6;font-size:.72rem;font-weight:700;
  padding:.26rem .72rem;cursor:pointer;transition:.15s}
.cl-unit-toggle button.active{background:#C6FF00;color:#0d0f13}
.cl-guide-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:.3rem;color:#F3F4F6}
.cl-guide-table th,.cl-guide-table td{padding:.4rem .5rem;text-align:center;border-bottom:1px solid rgba(255,255,255,.12)}
.cl-guide-table th:first-child,.cl-guide-table td:first-child{text-align:left}
.cl-guide-table thead th{font-weight:700;white-space:nowrap}
.cl-guide-table tbody tr:last-child td{border-bottom:0}

@media (max-width:860px){
  .cl-wrap{grid-template-columns:1fr;gap:1.4rem}
  .cl-stage-col{position:static}
  .cl-stage{max-width:420px;margin:0 auto}
}