/* ============ The Custom Lab — v4 "Studio" friendly skin ============
   Layered OVER base custom-lab.css (which supplies all structure + component behaviour +
   the shirt view×style display rules). Where v3 (custom-lab-kinetic.css) re-skins the base
   dark/industrial, THIS sheet re-skins it warm, light and playful — a welcoming design-your-
   own-tee studio for everyday shoppers. It (a) re-vars the palette on .cl-lab so base var()
   consumers render cream/sage, (b) overrides every hardcoded DARK fallback the base carries
   (chips/stage/print-cards/handles/view-toggle/num — those aren't var-driven, so a light
   theme must flip them explicitly, exactly as custom-lab-theme2.css does for v1/v2), and
   (c) adds the friendly two-column customizer + soft preview layout. Scoped to .cl-lab.
   Font (Plus Jakarta Sans) is loaded by themes/theme2/lab.php. Built to the Stitch friendly
   "Studio / Artisan Press" direction. NO monospace, NO ALL-CAPS, NO HUD chips, NO sharp corners. */

.cl-lab{
  /* Warm studio palette — feeds the base custom-lab.css var() consumers.
     Kept in step with the storefront's Theme 2 (Estética) cream+sage so the builder
     blends with the real nav/footer instead of clashing. */
  --line:#E7E4DD; --line-strong:#CFCCC3;
  --accent:#51684F; --accent-soft:#DCE8D6;
  --bg-soft:#FBF9F4; --ink:#26251F; --muted:#6B685F;
  /* Studio-only tokens */
  --s-canvas:#F6F3EC;        /* page-ish warm paper */
  --s-card:#FBF9F4;          /* panel / step surface */
  --s-sand:#F0ECE2;          /* inputs / chips / thumbs */
  --s-white:#FFFFFF;
  --s-coral:#E0795C;         /* small delight accent */
  --s-coral-soft:#F7E2DA;
  --s-sage-2:#6A8267;        /* hover sage */
  --s-shadow:0 10px 30px rgba(48,49,46,.08);
  --s-shadow-lg:0 20px 55px rgba(48,49,46,.13);
  --s-font:'Plus Jakarta Sans','Inter',system-ui,sans-serif;

  font-family:var(--s-font); color:var(--ink);
  max-width:1420px; margin:0 auto; padding:1.4rem clamp(16px,4vw,48px) 3.5rem;
}

/* ---------- Two-column grid ---------- */
.cl-lab-grid{display:grid;grid-template-columns:minmax(340px,0.92fr) minmax(0,1.08fr);gap:1.8rem;align-items:start}

/* ---------- Left · customizer panel ---------- */
.cl-lab-panel{display:flex;flex-direction:column;gap:1.4rem;
  background:var(--s-card);border:1px solid var(--line);border-radius:28px;
  padding:1.7rem 1.7rem 1.6rem;box-shadow:var(--s-shadow)}

/* Friendly header (no HUD / no status readout) */
.cl-lab-head{display:flex;align-items:center;gap:.85rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.cl-lab-head-ico{width:44px;height:44px;flex:none;border-radius:14px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center}
.cl-lab-head-ico svg{width:24px;height:24px}
.cl-lab-title{font-family:var(--s-font);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  margin:0;color:var(--ink);line-height:1.1}
.cl-lab-sub{font-size:.9rem;color:var(--muted);margin:.15rem 0 0}

/* Progress bar (base supplies the track/dots) → friendly sage, sentence-case labels */
.cl-lab .cl-progress{margin:.1rem 0 .3rem}
.cl-lab .cl-progress-lbl{font-family:var(--s-font);font-size:.72rem;font-weight:600;letter-spacing:0;text-transform:none}
.cl-lab .cl-progress-track{background:var(--s-sand)}
.cl-lab .cl-progress-dot{background:var(--s-white);border-color:var(--line-strong)}

.cl-lab-steps{display:flex;flex-direction:column;gap:1.15rem}

/* Each step is its own soft card so the panel reads as friendly grouped sections */
.cl-lab-step{background:var(--s-white);border:1px solid var(--line);border-radius:20px;padding:1.15rem 1.2rem}
.cl-step-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.cl-step-no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--s-coral-soft);color:var(--s-coral);
  font-family:var(--s-font);font-size:.95rem;font-weight:800;transition:background .2s,color .2s}
/* "You are here" — the current step's badge glows (sage fill + pulsing halo); it hops to the next
   step as each one completes (JS toggles .glow on exactly one badge). */
.cl-lab .cl-step-no.glow{background:var(--accent);color:#fff;animation:clStepGlow 1.5s ease-in-out infinite}
@keyframes clStepGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(81,104,79,.34)}
  50%{box-shadow:0 0 0 6px rgba(81,104,79,.10),0 0 14px 3px rgba(81,104,79,.45)}
}
@media (prefers-reduced-motion:reduce){.cl-lab .cl-step-no.glow{animation:none;box-shadow:0 0 0 4px var(--accent-soft)}}
.cl-step-head h3{font-family:var(--s-font);font-size:1.12rem;font-weight:700;letter-spacing:-.01em;
  text-transform:none;margin:0;color:var(--ink)}

.cl-field{margin-bottom:1rem}
.cl-field>label,.cl-opt-block .opt-label,.cl-qty-row .opt-label{
  display:block;font-family:var(--s-font);font-size:.86rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--muted);margin-bottom:.55rem}

/* Native + upgraded c23-select → soft rounded pill, cream, sentence-case */
.cl-lab select{width:100%;background:var(--s-sand);border:1px solid transparent;color:var(--ink);
  font-family:var(--s-font);font-size:.95rem;padding:.95rem 1.15rem;border-radius:16px;appearance:none;text-transform:none}
.cl-lab .c23-select{width:100%}
.cl-lab .c23-select__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:var(--s-sand);border:1px solid transparent;color:var(--ink);
  font-family:var(--s-font);font-size:.95rem;letter-spacing:0;text-transform:none;
  padding:.95rem 1.15rem;border-radius:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.cl-lab .c23-select__btn:hover{background:#ECE7DC}
.cl-lab .c23-select.is-open .c23-select__btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--s-white)}
.cl-lab .c23-select__label.is-placeholder{color:var(--muted)}
.cl-lab .c23-select__chev{width:18px;height:18px;color:var(--muted);flex:none}
.cl-lab .c23-select__menu{background:var(--s-white);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--s-shadow-lg);margin-top:6px;z-index:60;max-height:280px;overflow:auto;padding:.35rem}
.cl-lab .c23-select__opt{padding:.7rem .9rem;font-family:var(--s-font);font-size:.92rem;letter-spacing:0;
  text-transform:none;color:var(--ink);cursor:pointer;border-radius:12px}
.cl-lab .c23-select__opt:hover{background:var(--s-sand)}
.cl-lab .c23-select__opt.is-selected{color:var(--accent);background:var(--accent-soft);font-weight:600}

/* Colour + size chips — flip the base darks to cream, sage active state */
.cl-lab .cl-color,.cl-lab .cl-size{background:var(--s-sand);border-color:transparent;color:var(--ink);border-radius:999px}
.cl-lab .cl-color:hover,.cl-lab .cl-size:hover{border-color:var(--line-strong)}
/* Colours match the design pages (theme2 .color-box): OVAL pill swatches, no text label; a
   two-tone (raglan) colour splits the oval in half. Overrides the base 2-col text-chip grid. */
.cl-lab .cl-colors{display:flex;flex-wrap:wrap;gap:.6rem}
.cl-lab .cl-color{width:56px;height:32px;padding:0;gap:0;overflow:hidden;background:transparent;
  border:1px solid var(--line);border-radius:999px}
.cl-lab .cl-color .sw{flex:1 1 0;width:auto;height:100%;border:none;border-radius:0}
.cl-lab .cl-color.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.cl-lab .cl-size{border-radius:14px}
.cl-lab .cl-size.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
.cl-lab .cl-size-connector{background-image:linear-gradient(90deg,var(--line-strong) 0 58%,transparent 58% 100%)}
.cl-lab .cl-size-connector::after{border-top-color:var(--accent);border-right-color:var(--accent)}

/* Prints — cream cards, sage/coral affordances */
.cl-lab .cl-print-card{background:var(--s-sand);border-color:transparent;border-radius:18px}
.cl-lab .cl-print-card.has{border-color:rgba(81,104,79,.45)}
.cl-lab .cl-print-card.active{box-shadow:0 0 0 2px var(--accent-soft);border-color:var(--accent)}
.cl-lab .cl-print-thumb{background:var(--s-white);border-color:transparent;border-radius:12px}
.cl-lab .cl-print-plus{color:var(--accent)}
.cl-lab .cl-print-card:not(.has) .cl-print-body{border:1.5px dashed var(--accent);border-radius:14px;background:var(--accent-soft)}
.cl-lab .cl-print-card:not(.has) .cl-print-body:hover{background:#CFE0C8}
.cl-lab .cl-print-card:not(.has) .cl-print-state{color:var(--accent)}
.cl-lab .cl-print-remove{border-color:var(--line);color:#BA1A1A;background:var(--s-white)}
.cl-lab .cl-print-remove:hover{background:#BA1A1A;border-color:#BA1A1A;color:#fff}
/* On/off switch → sage */
.cl-lab .cl-slider{background:#D9D5CC;border-color:transparent}
.cl-lab .cl-slider::before{background:#fff}
.cl-lab .cl-switch input:checked + .cl-slider{background:var(--accent-soft);border-color:var(--accent)}
.cl-lab .cl-switch input:checked + .cl-slider::before{background:var(--accent)}

/* Single-row print card: label + "tap to add" affordance + on/off toggle all on the FIRST row.
   (v4 markup nests .cl-print-body INSIDE .cl-print-head; base assumes a stacked 2nd row, so we
   flatten it here.) The body grows to fill the middle; the remove button goes inline. */
.cl-lab .cl-print-card{padding:.5rem .7rem .5rem .95rem}
.cl-lab .cl-print-head{gap:.7rem;flex-wrap:nowrap}
/* Fixed-width label column so EVERY "Tap to add art" button starts at the same x and shares one
   width (labels vary "Left Sleeve"…"Right Chest (logo)" = 139px, so 144px fits all, no ellipsis). */
.cl-lab .cl-print-label{flex:0 0 144px;width:144px}
.cl-lab .cl-print-head .cl-print-body{flex:1;min-width:0}
.cl-lab .cl-print-remove{position:static;right:auto;top:auto;flex:none}
/* The delete button only appears once an image is chosen — its display:flex was overriding the
   `hidden` attribute, so gate it on the card's .has state instead. */
.cl-lab .cl-print-card:not(.has) .cl-print-remove{display:none}
/* Empty "＋ Tap to add art" pill: no absolute-remove gap to reserve any more */
.cl-lab .cl-print-card:not(.has) .cl-print-body{align-self:auto;margin-right:0}

/* Quantity stepper — cream rounded pill (theme2.css paints .qty cream for .cl-wrap only) */
.cl-qty-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.cl-qty-row .opt-label{margin-bottom:0}
.cl-lab .qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:var(--s-sand)}
.cl-lab .qty button{width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);
  font-size:1.15rem;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.cl-lab .qty button:hover{background:#E6E1D6;color:var(--accent)}
.cl-lab .qty input{width:52px;background:transparent;border:0;color:var(--ink);text-align:center;font-weight:700;
  font-family:var(--s-font);font-size:1rem;-moz-appearance:textfield;appearance:textfield}
.cl-lab .qty input::-webkit-outer-spin-button,.cl-lab .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.cl-lab textarea{width:100%;background:var(--s-sand);border:1px solid transparent;color:var(--ink);
  font-family:var(--s-font);font-size:.95rem;padding:.9rem 1.1rem;border-radius:16px;resize:vertical}
.cl-lab textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--s-white)}
.cl-lab textarea::placeholder{color:#9a978d;text-transform:none;font-size:.9rem;letter-spacing:0}
.cl-lab .cl-hint{font-family:var(--s-font);font-size:.84rem;color:var(--muted);line-height:1.45}

/* Docked action — soft cream card, big rounded-full sage CTA */
.cl-lab-dock{margin-top:.1rem;padding:1.3rem 1.35rem;border:1px solid var(--line);border-radius:22px;
  background:var(--accent-soft)}
.cl-dock-unit{display:flex;justify-content:space-between;font-family:var(--s-font);font-size:.86rem;
  color:var(--muted);margin-bottom:.45rem}
.cl-dock-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.1rem}
.cl-dock-total span:first-child{font-family:var(--s-font);font-size:.9rem;font-weight:600;color:var(--ink)}
.cl-dock-total span:last-child{font-family:var(--s-font);font-size:1.7rem;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.cl-order-btn{width:100%;border:0;border-radius:999px;background:var(--accent);color:#fff;
  font-family:var(--s-font);font-size:1.02rem;font-weight:700;letter-spacing:.01em;padding:1.15rem;
  cursor:pointer;transition:background .15s,transform .08s,box-shadow .15s;box-shadow:0 8px 20px rgba(81,104,79,.28)}
.cl-order-btn:hover{background:var(--s-sage-2)}
.cl-order-btn:active{transform:scale(.985)}
.cl-order-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;background:#B7BEB2}
.cl-order-btn:disabled:hover{background:#B7BEB2}
.cl-lab .cl-submit-hint{font-family:var(--s-font);font-size:.82rem;letter-spacing:0;color:var(--muted);
  text-align:center;margin:.65rem 0 0}
.cl-lab .cl-submit-hint[hidden]{display:none}

/* ---------- Right · friendly preview ---------- */
.cl-lab-preview{position:sticky;top:84px;display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:2.2rem 1.7rem 1.7rem;min-height:560px;overflow:hidden;border:1px solid var(--line);border-radius:28px;
  background:linear-gradient(180deg,#FFFFFF,var(--s-canvas));box-shadow:var(--s-shadow)}

/* Friendly "live preview" label instead of HUD chips */
.cl-hud{position:absolute;display:flex;align-items:center;gap:.4rem;pointer-events:none;z-index:5}
.cl-hud-tl{top:1.15rem;left:1.15rem}
.cl-hud-chip{font-family:var(--s-font);font-size:.72rem;font-weight:600;letter-spacing:0;color:var(--muted);
  background:var(--s-white);border:1px solid var(--line);border-radius:999px;padding:.32rem .7rem;text-transform:none}
.cl-hud-chip--accent{color:var(--accent);border-color:transparent;background:var(--accent-soft)}
.cl-hud-live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:clSPulse 1.6s ease-in-out infinite}
@keyframes clSPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.cl-hud-live-dot{animation:none}}

/* Zoom — friendly vertical slider with a little shirt icon */
.cl-zoom{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  align-items:center;gap:.6rem;z-index:6}
.cl-zoom-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--s-white);
  color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.15s;box-shadow:0 2px 6px rgba(48,49,46,.08)}
.cl-zoom-btn:hover{color:var(--accent);border-color:var(--accent)}
.cl-zoom-track{height:120px;width:34px;display:flex;align-items:center;justify-content:center}
.cl-zoom-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;border-radius:999px;background:var(--s-sand);
  outline:none;transform:rotate(-90deg);cursor:pointer}
.cl-zoom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(48,49,46,.25);cursor:pointer}
.cl-zoom-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;cursor:pointer}
.cl-zoom-ico{color:var(--muted)}
.cl-zoom-ico svg{width:18px;height:18px;display:block}

.cl-stage-wrap{position:relative;width:100%;max-width:440px;display:flex;align-items:center;justify-content:center;
  cursor:grab}
/* Grabbing (closed) hand the moment a spin/pan drag starts anywhere on the garment. */
.cl-stage-wrap.cl-grabbing,.cl-stage-wrap.cl-grabbing .cl-art,.cl-stage-wrap.cl-grabbing *{cursor:grabbing !important}
/* Base gives .cl-stage its aspect/border; here we soften it, lighten it, and scale + pan for zoom.
   Translate is listed BEFORE scale so its px value reads in on-screen pixels. */
.cl-lab .cl-stage{transform:translate(var(--cl-pan-x,0px),var(--cl-pan-y,0px)) scale(var(--cl-zoom,1));
  transition:transform .18s ease;
  border:none;border-radius:26px;background:radial-gradient(120% 120% at 50% 0%,#FFFFFF,var(--s-sand))}
.cl-lab .cl-stage.cl-panning{transition:none}   /* immediate response while dragging */
.cl-lab .cl-shirt{filter:drop-shadow(0 16px 30px rgba(48,49,46,.14))}
.cl-lab .cl-shirt .cl-collar{fill:rgba(0,0,0,.09)}
.cl-lab .cl-shirt .cl-seam{stroke:rgba(0,0,0,.11)}
.cl-lab #clStageEmpty{display:none}   /* the friendly drag hint is the empty-state affordance */
/* Art selection: no boxes when idle. Faint sage outline on hover signals it's editable; the
   full sage border + corner handles show only while the print is SELECTED (engine adds .active
   on click; clicking the garment deselects). */
.cl-lab .cl-art{cursor:pointer}
.cl-lab .cl-art:hover{border-color:rgba(81,104,79,.45)}
.cl-lab .cl-art.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cl-lab .cl-handle{background:var(--accent);border-color:#fff;border-radius:50%}

.cl-drag-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;color:var(--accent);pointer-events:none;transition:opacity .6s ease,visibility .6s ease;z-index:3}
.cl-drag-hint svg{animation:clSBob 1.7s ease-in-out infinite}
.cl-drag-hint span{font-family:var(--s-font);font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--muted)}
.cl-drag-hint.gone{opacity:0;visibility:hidden}
@keyframes clSBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.cl-drag-hint svg{animation:none}}

/* Floating control bar (reset-to-front) */
.cl-preview-bar{display:flex;gap:.5rem;align-items:center;padding:.35rem .45rem;border-radius:999px;margin-top:.1rem;
  background:var(--s-white);border:1px solid var(--line);box-shadow:0 4px 14px rgba(48,49,46,.08)}
.cl-hud-icon{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.cl-hud-icon:hover{color:var(--accent);background:var(--accent-soft)}

/* View toggle → friendly rounded pill tabs, horizontal */
.cl-lab .cl-view-toggle{flex-direction:row;gap:.5rem;margin:.3rem 0 0;justify-content:center;flex-wrap:wrap}
.cl-lab .cl-view-toggle button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:var(--s-white);
  padding:.5rem 1.15rem;font-family:var(--s-font);font-size:.86rem;font-weight:600;letter-spacing:0;color:var(--muted);
  transition:color .15s,background .15s,border-color .15s}
.cl-lab .cl-view-toggle button:hover{color:var(--ink);border-color:var(--line-strong)}
.cl-lab .cl-view-toggle button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cl-lab .cl-tip{font-family:var(--s-font);font-size:.84rem;letter-spacing:0;color:var(--muted);text-transform:none;margin-top:.2rem;text-align:center}

/* Measurement rulers — on/off switch (in the panel's white area, top-left, above the shirt),
   corner readout chip, legible SVG numbers */
.cl-ruler-row{align-self:flex-start;display:flex;align-items:center;gap:.5rem;margin:0 0 .2rem;
  background:var(--s-white);border:1px solid var(--line);border-radius:999px;padding:.34rem .62rem .34rem .72rem;
  box-shadow:0 1px 5px rgba(48,49,46,.08)}
.cl-ruler-row[hidden]{display:none}
.cl-ruler-lbl{font-family:var(--s-font);font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:0}
.cl-unit-wrap{display:inline-flex;align-items:center;gap:.5rem}
.cl-unit-wrap[hidden]{display:none}
.cl-ruler-div{width:1px;height:16px;background:var(--line);margin:0 .05rem}
/* in / cm unit switch — compact segmented pill, defaults to "in" */
.cl-unit-seg{display:inline-flex;background:var(--s-sand);border:1px solid var(--line);border-radius:999px;padding:2px;flex:0 0 auto}
.cl-unit-seg button{border:0;background:transparent;border-radius:999px;padding:.15rem .5rem;cursor:pointer;
  font-family:var(--s-font);font-size:.74rem;font-weight:700;line-height:1;color:var(--muted);transition:background .15s,color .15s}
.cl-unit-seg button.active{background:var(--accent);color:#fff}
.cl-ruler-sw{position:relative;display:inline-block;width:40px;height:23px;flex:0 0 auto;cursor:pointer}
.cl-ruler-sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cl-ruler-sw .tk{position:absolute;inset:0;background:var(--s-sand,#e7e4dc);border:1px solid var(--line);border-radius:999px;transition:background .18s,border-color .18s}
.cl-ruler-sw .tk::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(48,49,46,.28);transition:transform .18s}
.cl-ruler-sw input:checked + .tk{background:var(--accent);border-color:var(--accent)}
.cl-ruler-sw input:checked + .tk::after{transform:translateX(17px)}
/* white halo so ruler numbers stay readable over any shirt colour */
.cl-lab .cl-ruler-svg text{paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:2.4px;stroke-linejoin:round;font-family:var(--s-font)}

/* Guide button → cream pill; modal headings/overlay → sage/friendly */
.cl-lab .cl-guide-btn{background:var(--s-sand);border-color:transparent;border-radius:999px;color:var(--ink);
  font-family:var(--s-font);font-weight:600;font-size:.86rem;letter-spacing:0;text-transform:none}
.cl-lab .cl-guide-btn:hover{border-color:var(--accent);color:var(--accent)}
.cl-lab .cl-overlay-card,.cl-lab .cl-modal-card{border-radius:26px}
.cl-lab .cl-overlay-card{background:#FBF9F4;border:none;color:var(--ink);box-shadow:var(--s-shadow-lg)}
.cl-lab .cl-overlay-card h3{font-family:var(--s-font);font-weight:700}
.cl-lab .cl-ov-spinner{border-color:rgba(81,104,79,.2);border-top-color:var(--accent)}
.cl-lab .cl-ov-bar{background:var(--s-sand)}
.cl-lab .cl-ov-bar span{background:linear-gradient(90deg,var(--s-sage-2),var(--accent))}
.cl-lab .cl-ov-pct{color:var(--accent)}
.cl-lab .cl-ov-tick{background:var(--accent);color:#fff}
.cl-lab .cl-ov-proud{color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .cl-lab-grid{grid-template-columns:minmax(0,1fr)}
  .cl-lab-panel,.cl-lab-preview{min-width:0}
  .cl-lab-preview{position:static;order:-1;min-height:auto;padding-top:2.2rem}
  .cl-stage-wrap{max-width:380px}
  /* keep the placement rows inside their column (they don't shrink otherwise) */
  .cl-prints{grid-template-columns:minmax(0,1fr)}
  .cl-print-card{min-width:0;max-width:100%}
  .cl-print-head{min-width:0}
}
@media (max-width:560px){
  .cl-zoom{display:none}
  .cl-lab-title{font-size:1.3rem}
  .cl-lab-panel{padding:1.25rem}
  .cl-lab-step{padding:1rem}
  /* Too narrow for the fixed label column — drop the "Tap to add art" button onto its own
     full-width row so every button is still identical, aligned and comfortably tappable. */
  .cl-lab .cl-print-head{flex-wrap:wrap;row-gap:.5rem}
  .cl-lab .cl-print-label{flex:1 1 auto;width:auto;order:1}
  .cl-lab .cl-switch{order:2}
  .cl-lab .cl-print-remove{order:3}
  .cl-lab .cl-print-head .cl-print-body{order:4;flex:1 0 100%}
}

/* ---- Custom Lab modal: delete confirm + order summary (2026-07-26) ---- */
.cl-modal-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(48,49,46,.42);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s;overscroll-behavior:contain}
.cl-modal-ov.show{opacity:1}
.cl-modal{position:relative;inset:auto;display:block;width:min(440px,100%);max-height:88vh;overflow:auto;background:var(--s-white,#fbf9f4);color:var(--ink);
  border:1px solid var(--line);border-radius:24px;padding:1.4rem 1.4rem 1.2rem;
  box-shadow:var(--s-shadow-lg,0 20px 60px rgba(48,49,46,.28));transform:translateY(10px) scale(.98);transition:transform .2s}
.cl-modal-ov.show .cl-modal{transform:none}
.cl-modal-title{margin:0 0 .8rem;font-family:var(--s-font);font-size:1.25rem;font-weight:700}
.cl-modal-actions{display:flex;gap:.6rem;margin-top:1.1rem}
.cl-modal-btn{flex:1;border-radius:999px;padding:.72rem 1rem;font:600 .95rem/1 var(--s-font);cursor:pointer;
  border:1px solid var(--line);transition:background .15s,border-color .15s,color .15s,filter .15s}
.cl-modal-cancel{background:transparent;color:var(--ink)}
.cl-modal-cancel:hover{background:var(--s-sand)}
.cl-modal-ok{background:var(--accent);border-color:var(--accent);color:#fff}
.cl-modal-ok:hover{filter:brightness(.95)}
.cl-modal-ok.danger{background:#BA1A1A;border-color:#BA1A1A}
.cl-sum-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}
.cl-sum-thumb{width:64px;text-align:center}
.cl-sum-thumb img{width:64px;height:64px;object-fit:contain;background:var(--s-sand);border:1px solid var(--line);border-radius:12px;display:block}
.cl-sum-thumb span{display:block;font-size:.6rem;line-height:1.2;margin-top:.2rem;color:var(--ink);opacity:.7}
.cl-sum-rows{display:flex;flex-direction:column;gap:.32rem;font-size:.9rem}
.cl-sum-row{display:flex;justify-content:space-between;gap:1rem}
.cl-sum-row>span:first-child{opacity:.66}
.cl-sum-row>span:last-child{font-weight:600;text-align:right}
.cl-sum-charges{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line)}
.cl-sum-unit{margin-top:.15rem}
.cl-sum-total{margin-top:.35rem;padding-top:.45rem;border-top:1px solid var(--line);font-size:1.02rem}
.cl-sum-total>span{font-weight:800!important;opacity:1!important}
.cl-sum-note{margin:.9rem 0 0;font-size:.76rem;line-height:1.45;opacity:.7}
@media (prefers-reduced-motion: reduce){.cl-modal-ov,.cl-modal{transition:none}}
/* compact yes/no confirm — small centred popup (2026-07-26) */
.cl-modal--sm{width:min(280px,92vw);padding:1.1rem 1.15rem 1rem;text-align:center;border-radius:20px}
.cl-modal--sm .cl-modal-title{margin:.05rem 0 .95rem;font-size:1rem}
.cl-modal--sm .cl-modal-actions{margin-top:.85rem;gap:.5rem}
.cl-modal--sm .cl-modal-btn{padding:.55rem .8rem;font-size:.88rem}

/* Modal is appended to <body>, OUTSIDE .cl-lab, so re-declare the palette here or var() consumers (button borders/accent) render invisible */
.cl-modal-ov{--line:#E7E4DD;--line-strong:#CFCCC3;--accent:#51684F;--accent-soft:#DCE8D6;--bg-soft:#FBF9F4;--ink:#26251F;--muted:#6B685F;--s-canvas:#F6F3EC;--s-card:#FBF9F4;--s-sand:#F0ECE2;--s-white:#FFFFFF;--s-coral:#E0795C;--s-coral-soft:#F7E2DA;--s-sage-2:#6A8267;--s-shadow:0 10px 30px rgba(48,49,46,.08);--s-shadow-lg:0 20px 55px rgba(48,49,46,.13);--s-font:Plus

/* Modal is appended to <body>, OUTSIDE .cl-lab, so re-declare the palette here or var() consumers (button borders/accent) render invisible */
Jakarta

/* Modal is appended to <body>, OUTSIDE .cl-lab, so re-declare the palette here or var() consumers (button borders/accent) render invisible */
Sans,Inter,system-ui,sans-serif}