/* Print Lab · customer page, v12: the user's v12 edit of the layout (their v11 file + product card text and links, darker text,
   lighter control fills, new empty-state copy). Measured from their file (1 pt = 1 CSS px; their y - 0.135 = artboard y).
   Loaded after lab-v11.css; overrides only. Everything not listed here is exactly v11. */
:root { --v12-ink: #231F20; --v12-fill: #FCF7F5; --v12-fill2: #FDF9F8; --v12-track: #E4E0DA; --v12-card-text: #2C2F3A; --v12-link: #4151A1; }

/* ---------- frame and header ---------- */
.r-outer { box-shadow: inset 0 0 0 .8px var(--v12-ink); }                       /* outer frame now #231F20 (was #C6C5C3) */
.t-brand { color: #FCF7F5; }
.hdr .hdr-search { background: var(--v12-fill2); }
.hdr .hdr-search input { font-size: 13.8px; padding-left: 2px; }                /* placeholder 2 px right, 13.8 */
.hdr .hdr-search input::placeholder { font-size: 13.8px; }

/* ---------- upload panel ---------- */
.box-left .side-pill, .box-left .count-pill:not(.has) { background: var(--v12-fill); color: var(--v12-ink); }
.box-left .count-pill { transform: translate(2px, -2px); }                       /* "0 INKS" pill 2 right, 2 up */
.box-left .dz-icon { left: 130.67px; top: 12.0px; width: 44px; height: 44px; box-sizing: border-box; padding: 5.03px 6.03px 7.03px; color: var(--v12-ink);
  background: var(--v12-fill); box-shadow: inset 0 0 0 .5px rgba(35,31,32,.8); }   /* outline circle (0.4) with the arrow 1.331x, no glow */
.box-left .dz-empty strong { top: 55.99px; }                                     /* "Drop your artwork" 7 px higher */
.box-left .dz-empty .dz-formats { left: 23.11px; right: auto; top: 83.0px; text-align: left; font-size: 12.5px; color: var(--v12-ink); }
.box-left .dz-empty em { left: 34.13px; right: auto; top: 105.99px; text-align: left; font-size: 13px; font-weight: 500; color: var(--v12-ink); }
.box-left .dz-empty .dz-browse { left: 223.75px; top: 10.32px; font-weight: 600; color: var(--v12-ink); }
.box-left .samples, .box-left .size-inputs { color: var(--v12-ink); }
.box-left .samples button { border-color: var(--v12-ink); }
.box-left .size-inputs input, .box-left .merge-row select { background-color: var(--v12-fill); border: 0; box-shadow: inset 0 0 0 .6px #2B2420; }
.box-left .size-inputs input { padding: 6px 7px; }          /* the 1 px border became a 0.6 ring: padding +1 keeps the v11 box */
.box-left .merge-row select { padding: 5px; }
/* switches: light track with a 0.5 outline, dark 11.9 knob */
.box-left .switch span { background: var(--v12-fill); box-shadow: inset 0 0 0 .5px var(--v12-ink); }
.box-left .switch span::after { top: 3.05px; left: 2.05px; width: 11.9px; height: 11.9px; background: var(--v12-ink); box-shadow: none; }
.box-left .switch input:checked + span { background: var(--v12-ink); }
.box-left .switch input:checked + span::after { left: 18.05px; background: var(--v12-fill); }
.box-left .switch input:disabled + span { opacity: 1; }

/* ---------- ink colors: heading centered; empty state copy centered, no Pantone note until there are inks ---------- */
.box-left .inks-panel .panel-head h3 { transform: translate(116.84px, -1.99px); }
.box-left .inks-panel.is-empty { box-sizing: border-box; height: 115.532px; }
.box-left .inks-panel.is-empty .disclaimer { display: none; }
.box-left .inks-panel .ink-list li.empty { padding: 0; margin: 0; text-align: center; font-size: 12.4px; line-height: 14.88px; color: var(--v12-ink); white-space: pre-line; transform: translate(-.75px, 4.35px); }

/* ---------- underbase box, empty state: icon top left, title and text centered ---------- */
.box-left .advisory.is-empty { display: block; position: relative; box-sizing: border-box; height: 82.876px; }
.box-left .advisory.is-empty > div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.box-left .advisory.is-empty #advIcon { position: absolute; left: 7.754px; top: 6.455px; width: 18px; height: 18px; background: none; color: #2B2420; display: block; }
.box-left .advisory.is-empty #advIcon svg { width: 18px; height: 18px; display: block; }
.box-left .advisory.is-empty #advTitle { position: absolute; left: 0; right: 0; top: 11.005px; margin: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .07em;
  line-height: 1.2; text-transform: uppercase; color: var(--v12-ink); white-space: nowrap; }
.box-left .advisory.is-empty #advText { position: absolute; left: 0; right: 0; top: 28.1px; margin: 0; text-align: center; font-size: 12.4px; line-height: 14.88px; color: var(--v12-ink); white-space: pre-line; }

/* ---------- edit colors ---------- */
.box-left #btnAuto { position: relative; left: -4.27px; top: -2.5px; line-height: 16px; height: 16px; font-size: 15px; font-weight: 500; color: var(--v12-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2.72px; }
.box-left .ticks { color: var(--v12-ink); }
.box-left .edit-panel .panel-head { height: 16px; }   /* the larger Auto keeps the v11 head height */

/* range sliders (Max colors, Rotation): flat 4 px #E4E0DA track, dark round thumb */
.box-left #maxColors, .box-bottom #rotation { -webkit-appearance: none; appearance: none; background: transparent; accent-color: auto; height: 16px; --track: rgb(228,224,218); --ink: rgb(35,31,32); }
.box-left #maxColors { --thumb: 12.96px; } .box-bottom #rotation { --thumb: 11.66px; }
.box-left #maxColors::-webkit-slider-runnable-track, .box-bottom #rotation::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--v12-track); border: 0; }
.box-left #maxColors::-moz-range-track, .box-bottom #rotation::-moz-range-track { height: 4px; border-radius: 2px; background: var(--v12-track); border: 0; }
.box-left #maxColors::-webkit-slider-thumb { -webkit-appearance: none; width: 12.96px; height: 12.96px; margin-top: -4.48px; border-radius: 50%; background: var(--v12-ink); border: 0; }
.box-left #maxColors::-moz-range-thumb { width: 12.96px; height: 12.96px; border-radius: 50%; background: var(--v12-ink); border: 0; }
.box-bottom #rotation::-webkit-slider-thumb { -webkit-appearance: none; width: 11.66px; height: 11.66px; margin-top: -3.83px; border-radius: 50%; background: var(--v12-ink); border: 0; }
.box-bottom #rotation::-moz-range-thumb { width: 11.66px; height: 11.66px; border-radius: 50%; background: var(--v12-ink); border: 0; }

/* ---------- center window ---------- */
.box-stage .icon-btn { background: var(--v12-fill2); }
.box-stage #btnDownload svg { transform: translate(-.5px, -.43px); }
.box-stage .seg { background: var(--v12-fill); }
.box-stage .seg button { color: var(--v12-ink); }
.box-stage .seg button.active { color: #fff; }
.box-stage .seg button[data-view=original] { padding: 3px 12px 5px 10px; }     /* text 1 left, 1 up (the dark pill stays) */
.box-stage .seg button[data-view=separated] { padding-left: 14px; padding-right: 8px; } /* text 3 right */
.box-stage .stage-meta { background: var(--v12-fill2); color: var(--v12-ink); }
.box-stage .stage-meta b { color: #2B2420; }
.box-stage .empty-hint { background: #F7F7F7; color: var(--v12-ink); }
.stage-sides .side-btn { color: var(--v12-ink); }
.stage-sides .side-btn.active[data-side=front], .stage-sides .side-btn.active[data-side=back] { color: #2B2420; }
.stage-sides .side-btn.active { background: var(--v12-fill); }
.stage-sides .side-btn img { background: none; }
.stage-sides .side-btn[data-side=front] span, .stage-sides .side-btn[data-side=back] span { position: absolute; left: 0; right: 0; top: 46.75px; font-size: 12px; line-height: 1.2; text-align: center; }
/* Sleeve Design: the user's larger sleeve icon (1.49x, 0.83 line) and 11 px label */
.stage-sides .side-btn.sleeve svg { position: absolute; left: 9.17px; top: -2.69px; width: 35.76px; height: 35.76px; margin: 0; transform: none; }
.stage-sides .side-btn.sleeve span { position: absolute; left: 0; right: 0; top: 26.755px; font-size: 11px; line-height: 11.55px; text-align: center; }
.stage-tools .tool, .stage-tools .tool:disabled, .stage-tools .tool-label, .stage-tools .zoom-val { color: var(--v12-ink); opacity: 1; }
.stage-tools .tool.sq { border-color: var(--v12-ink); }

/* ---------- bottom bar ---------- */
.box-bottom .rotation { box-shadow: inset 0 0 0 .8px var(--v12-ink); }
.box-bottom .rotation span, .box-bottom .btn, .box-bottom .btn:disabled, .box-bottom #btnCrop:disabled { color: var(--v12-ink); opacity: 1; }

/* ---------- right column: product cards ---------- */
.box-right .cards .card { background: var(--v12-fill); }
.box-right .cards .card:hover { background: #F8F0EC; }
.box-right .t-btn { background: var(--v12-fill); }
/* picture frame 62.46 x 79.52, 0.3 outline (drawn 0.5 at 60% so Safari keeps it) */
.box-right .card .p-img, .box-right .card .p-img.empty { left: 3.28px; top: 3.54px; width: 62.76px; height: 79.82px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 .5px rgba(35,31,32,.6); }
/* brand (or product name) / Style / color: 13 px, lines 15.6 apart */
.box-right .card .c-info { position: absolute; left: 72.06px; top: 9.71px; width: 240px; display: block; font-weight: 500; font-size: 13px; line-height: 15.6px; color: var(--v12-card-text); }
.box-right .card .c-info span { font-size: 13px; letter-spacing: 0; text-transform: none; color: inherit; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the two links: 15 px, blue */
.box-right .card .c-change, .box-right .card .c-product { position: absolute; padding: 0; margin: 0; border: 0; background: none; font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1.2;
  color: var(--v12-link); text-decoration: none; cursor: pointer; white-space: nowrap; }
.box-right .card .c-change { left: 72.06px; top: 58.04px; }
.box-right .card .c-product { left: 219.37px; top: 60.05px; }
.box-right .card .c-change:hover, .box-right .card .c-product:hover { text-decoration: underline; }
.box-right .card.replacing .c-product { text-decoration: underline; }
.box-right .card .c-x { left: 313.27px; }
.box-right .card .colors { left: 72.65px; right: 30px; top: 6px; z-index: 1; gap: 3px; padding-bottom: 2px; background: inherit; }
.box-right .card .colors .cdot { width: 15px; height: 15px; }   /* all garment colors on one row above the color name */