/* Print Lab · customer page v21: the user's layout "PRINT LAB 10-14-26" (Illustrator, 1512.81 x 913.49 pt; 1 pt = 1 CSS px).
   Every number below is measured from that file. Text boxes use line-height 1.2em, so top = baseline - font size (Barlow ascent 1.0, descent 0.2).
   Loaded last; the earlier lab-v7 / v11 / v12 / v14 sheets only supply inner component styles (ink rows, modals, popovers, toasts).
   The thin red rectangle in the file (475.75, 240.63, 546.82 x 593.27) is a GUIDE ONLY: it is never drawn. It is where a product photo is fitted (js/artboard.js PHOTO_BOX). */
body.lab-v21 { --c-ink: #231F20; --c-ink2: #2B2521; --c-fill: #FBF7F5; --c-blue: #4252A1; --c-red: #ED1C24; background: #131110; }
body.lab-v21 .lab { width: 1512.81px; height: 913.49px; background: #131110; }
body.lab-v21 .lab, body.lab-v21 .lab * { font-kerning: normal; font-feature-settings: 'kern' 1; } /* Illustrator set this file with Metrics kerning */
body.lab-v21 .lab button { font-family: 'Barlow', sans-serif; }

/* ---------- header ---------- */
body.lab-v21 .hdr { left: 0; top: 0; width: 1512.81px; height: 100px; background: none; }
body.lab-v21 .hdr-logo { left: 0; top: 0; width: 260px; height: 100px; }
body.lab-v21 .hdr-logo img { left: 18.92px; top: 10.88px; width: 87.66px; height: 87.9px; }
body.lab-v21 .t-brand { left: 115.95px; top: 37.67px; font-weight: 800; font-size: 25.67px; letter-spacing: .03em; color: var(--c-fill); }
body.lab-v21 .hdr .t-signin { left: 891.83px; top: 41.66px; font-weight: 500; font-size: 21px; letter-spacing: .02em; color: var(--c-fill); }
body.lab-v21 .hdr .hdr-search { left: 976.99px; top: 39.94px; width: 226.39px; height: 29.81px; box-sizing: border-box; border: .5px solid #000; border-radius: 12.23px; background: var(--c-fill); }
body.lab-v21 .hdr .hdr-search input { left: 8.45px; top: 4.6px; width: 196px; height: 16.56px; font-size: 13.8px; line-height: 16.56px; font-weight: 500; color: #010101; }
body.lab-v21 .hdr .hdr-search input::placeholder { color: #010101; }
body.lab-v21 .hdr .hdr-search .mag { transform: translate(203.39px, 6.3px); }
body.lab-v21 .hdr .t-nav { top: 40.53px; font-weight: 700; font-size: 22.13px; letter-spacing: .02em; color: #F8991D; }
body.lab-v21 .hdr .t-brands { left: 1227.36px; } body.lab-v21 .hdr .t-products { left: 1331.30px; }
/* category row: Barlow Bold 17, baseline 132.34; the first name is yellow in the layout */
body.lab-v21 .cat-nav { left: 0; top: 0; width: 0; height: 0; z-index: 19; }
body.lab-v21 .cat-nav .cat { position: absolute; top: 115.34px; font-weight: 700; font-size: 17px; line-height: 1.2; color: var(--c-fill); text-decoration: none; white-space: nowrap; }
body.lab-v21 .cat-nav .cat:hover { color: #F7EC36; text-decoration-color: #F7EC36; }
body.lab-v21 .cat-nav .cat:hover, body.lab-v21 .hdr a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

/* ---------- left panels (white, no outline) ---------- */
body.lab-v21 .p21 { left: 18.92px; width: 382.79px; background: #fff; border-radius: 7px; color: var(--c-ink); overflow: hidden; }
body.lab-v21 .p21 > * { position: absolute; margin: 0; white-space: nowrap; line-height: 1.2; }
body.lab-v21 .p21 .p-title { left: 0; right: 0; top: 5.6px; text-align: center; font-weight: 700; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink); }
/* upload (18.92, 170.82, 382.79 x 259.23, r 9.8) */
body.lab-v21 .upload-panel { top: 170.82px; height: 259.23px; border-radius: 9.8px; }
body.lab-v21 .upload-panel .p-title { left: 14.82px; right: auto; top: 7px; color: #EE3324; text-align: left; }
body.lab-v21 .p21 .side-pill { left: 319.21px; top: 7.68px; width: 48.79px; height: 20.56px; box-sizing: border-box; padding: 0; border: .5px solid var(--c-ink); border-radius: 7px; background: var(--c-fill);
  font-weight: 600; font-size: 11px; line-height: 19.56px; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--c-ink); }
body.lab-v21 .upload-panel .dropzone { left: 35.84px; top: 34.49px; width: 309.36px; height: 132.66px; box-sizing: border-box; padding: 0; border: 2px dashed #CDB9A7; border-radius: 8.28px; background: #fff; cursor: pointer; display: block; }
body.lab-v21 .upload-panel .dropzone.drag { background: var(--c-fill); }
body.lab-v21 .upload-panel .dz-empty { position: absolute; inset: 0; display: block; }
body.lab-v21 .upload-panel .dz-empty > * { position: absolute; margin: 0; line-height: 1.2; white-space: nowrap; }
body.lab-v21 .upload-panel .dz-icon { left: 129.15px; top: 11.51px; width: 49px; height: 49px; }
body.lab-v21 .upload-panel .dz-empty strong { left: 46.35px; top: 66.74px; font-weight: 600; font-size: 21px; color: var(--c-ink2); }
body.lab-v21 .upload-panel .dz-empty .dz-formats { left: 9.23px; top: 98.76px; font-weight: 500; font-size: 14px; color: var(--c-ink); }
body.lab-v21 .upload-panel .dz-empty .dz-browse { left: 224.75px; top: 8.81px; font-weight: 600; font-size: 12.5px; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2.5px; }
body.lab-v21 .upload-panel .dz-file { position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; gap: 12px; }
body.lab-v21 .upload-panel .dz-file[hidden] { display: none; }
body.lab-v21 .upload-panel .dz-file img { width: 64px; height: 64px; object-fit: contain; flex: none; }
body.lab-v21 .upload-panel .dz-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; color: var(--c-ink); }
body.lab-v21 .upload-panel .dz-file strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
body.lab-v21 .upload-panel .dz-file .link { text-decoration: underline; }
body.lab-v21 .upload-panel .dz-file .quality { position: static; display: block; margin: 2px 0 0; padding: 0; background: none; font-size: 12px; white-space: normal; }
body.lab-v21 .upload-panel .dz-file .quality[hidden] { display: none; }
body.lab-v21 .upload-panel .layer-note { left: 35.84px; top: 167.6px; width: 309px; font-size: 10.5px; white-space: normal; background: none; padding: 0; z-index: 2; }
body.lab-v21 .upload-panel .layer-note[hidden] { display: none; }
body.lab-v21 .upload-panel .size-label { left: 57.33px; top: 187.22px; font-weight: 600; font-size: 15px; color: var(--c-ink2); }
body.lab-v21 .upload-panel #sizeW, body.lab-v21 .upload-panel #sizeH { top: 179.8px; width: 75.9px; height: 33.35px; box-sizing: border-box; padding: 0 6px; border: .5px solid var(--c-ink2); border-radius: 6.9px;
  background: var(--c-fill); font-family: inherit; font-weight: 500; font-size: 15px; color: var(--c-ink); text-align: center; -moz-appearance: textfield; }
body.lab-v21 .upload-panel #sizeW { left: 135.7px; } body.lab-v21 .upload-panel #sizeH { left: 232.34px; }
body.lab-v21 .upload-panel #sizeW::-webkit-inner-spin-button, body.lab-v21 .upload-panel #sizeH::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.lab-v21 .upload-panel .size-x { left: 217.55px; top: 182.77px; font-weight: 500; font-size: 22px; }
body.lab-v21 .upload-panel .size-in { left: 314.14px; top: 187.22px; font-weight: 500; font-size: 15px; }
/* Remove background switch: track 36.8 x 20.7 at (76.93, 394.72), knob r 6.84 */
body.lab-v21 .upload-panel .bg-switch { left: 58.01px; top: 223.9px; height: 20.7px; display: block; padding: 0 0 0 47.15px; font-weight: 500; font-size: 16.1px; line-height: 20.7px; color: var(--c-ink2); cursor: pointer; }
body.lab-v21 .upload-panel .bg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
body.lab-v21 .upload-panel .bg-switch span { position: absolute; left: 0; top: 0; width: 36.8px; height: 20.7px; box-sizing: border-box; margin: 0; border: .5px solid var(--c-ink); border-radius: 10.35px; background: var(--c-fill); }
body.lab-v21 .upload-panel .bg-switch span::after { content: ''; position: absolute; left: 1.86px; top: 2.89px; width: 13.68px; height: 13.68px; border-radius: 50%; background: var(--c-ink); transform: none; box-shadow: none; transition: left .12s; }
body.lab-v21 .upload-panel .bg-switch input:checked + span { background: var(--c-ink); }
body.lab-v21 .upload-panel .bg-switch input:checked + span::after { left: 20.76px; background: #fff; }
body.lab-v21 .upload-panel .bg-switch input:disabled ~ * { cursor: default; }
body.lab-v21 .upload-panel #bgInfo { left: 105.16px; top: 244.5px; font-size: 11px; color: #6B625D; }
body.lab-v21 .upload-panel #bgInfo.warn { color: #9A5B12; }

/* colors in your design (18.92, 436.57, 382.79 x 132.86) */
body.lab-v21 .inks-panel { top: 436.57px; height: 132.86px; }
body.lab-v21 .p21 .count-pill { left: 336px; top: 6.56px; width: 31.76px; height: 20.56px; box-sizing: border-box; padding: 0; border: .4px solid var(--c-ink); border-radius: 7px; background: var(--c-fill);
  font-weight: 600; font-size: 12.65px; line-height: 19.76px; letter-spacing: .06em; text-align: center; color: var(--c-ink); }
body.lab-v21 .inks-panel .inks-scroll { left: 6px; right: 6px; top: 30px; bottom: 4px; overflow-y: auto; overflow-x: hidden; white-space: normal; scrollbar-width: thin; }
body.lab-v21 .inks-panel.is-empty .inks-scroll { overflow: hidden; }
body.lab-v21 .inks-panel .ink-list { margin: 0; padding: 0; }
body.lab-v21 .inks-panel.is-empty .ink-list li.empty { position: absolute; left: 0; right: 0; top: 18.67px; margin: 0; padding: 0; border: 0; background: none; text-align: center;
  font-weight: 500; font-size: 15px; line-height: 17.11px; color: var(--c-ink); white-space: pre-line; }
/* white underbase ink (18.92, 576.96, 382.79 x 95.31) */
body.lab-v21 .advisory { top: 576.96px; height: 95.31px; display: block; padding: 0; border: 0; box-shadow: none; }
body.lab-v21 .advisory .adv-i { left: 15.85px; top: 7.93px; width: 18px; height: 18px; }
body.lab-v21 .advisory .p-title { top: 5.3px; }
body.lab-v21 .advisory #advText { left: 4px; right: 4px; top: 30.4px; text-align: center; font-weight: 500; font-size: 15px; line-height: 17.11px; color: var(--c-ink); white-space: pre-line; }
body.lab-v21 .advisory:not(.is-empty) #advText { font-size: 13.5px; line-height: 15.5px; white-space: normal; }
body.lab-v21 .advisory .adv-note { left: 10px; right: 10px; bottom: 3px; text-align: center; font-size: 11px; color: #6B625D; white-space: normal; }
/* edit ink colors (17.98, 679.8, 382.79 x 233.69, r 5.81; runs to the bottom of the page) */
body.lab-v21 .edit-panel { left: 17.98px; top: 679.8px; height: 233.69px; border-radius: 5.81px; padding: 0; box-shadow: none; }
body.lab-v21 .edit-panel .p-title { top: 5.22px; }
body.lab-v21 .edit-panel .hint { left: 0; right: 0; top: 38.25px; text-align: center; font-weight: 500; font-size: 15px; color: var(--c-ink); }
body.lab-v21 .edit-panel .reduce { left: 0; right: 0; top: 77.67px; text-align: center; font-weight: 600; font-size: 14.38px; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink); }
body.lab-v21 .edit-panel .m-lbl { left: 13.59px; top: 111.91px; font-weight: 600; font-size: 15.01px; color: var(--c-ink2); }
body.lab-v21 .edit-panel .m-into { left: 203.58px; top: 112.49px; font-weight: 500; font-size: 14.43px; color: var(--c-ink2); }
body.lab-v21 .edit-panel select { top: 106.14px; width: 135.57px; height: 30.02px; box-sizing: border-box; padding: 0 24px 0 8px; border: .5px solid var(--c-ink2); border-radius: 6.93px; font-family: inherit; font-weight: 500; font-size: 13px; color: var(--c-ink);
  -webkit-appearance: none; appearance: none; background: var(--c-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1.38.75l4.62 4.62 4.62-4.62' fill='none' stroke='%232B2521' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8.6px center / 12px 7px; }
body.lab-v21 .edit-panel #mergeA { left: 61.08px; } body.lab-v21 .edit-panel #mergeB { left: 235.18px; }
body.lab-v21 .edit-panel .m-btn { left: 302.62px; top: 144.09px; width: 64.17px; height: 25.49px; box-sizing: border-box; padding: 0 0 1px; border: .46px solid var(--c-ink); border-radius: 7px; background: var(--c-fill);
  font-weight: 600; font-size: 16px; line-height: 23px; color: var(--c-ink); text-align: center; cursor: pointer; }
body.lab-v21 .edit-panel .m-btn:disabled { cursor: default; color: var(--c-ink); opacity: 1; }
body.lab-v21 .edit-panel .restore-row { left: 10px; right: 10px; top: 176px; display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
body.lab-v21 .edit-panel .restore-row[hidden] { display: none; }

/* ---------- center window (456.87, 169.92, 584.56 x 732.66, r 7) ---------- */
body.lab-v21 .box-stage { left: 456.87px; top: 169.92px; width: 584.56px; height: 732.66px; border-radius: 7px; background: #fff; overflow: visible; box-shadow: none; border: 0; }
body.lab-v21 .box-stage > * { position: absolute; }
body.lab-v21 .box-stage .canvas-wrap { inset: 0; border-radius: 7px; overflow: hidden; background: #fff; }
body.lab-v21 .box-stage .icon-btn { left: 19.38px; top: 18.24px; width: 43.34px; height: 43.34px; box-sizing: border-box; padding: 0; border: .5px solid var(--c-ink); border-radius: 10.84px; background: #FDF9F8; box-shadow: none; z-index: 7; }
body.lab-v21 .box-stage .icon-btn svg, body.lab-v21 .box-stage #btnDownload svg { position: absolute; left: -.5px; top: -.5px; width: 43.34px; height: 43.34px; transform: none; }
body.lab-v21 .box-stage .del-btn { left: 77.42px; top: 18.53px; width: 59.88px; height: 42.69px; box-sizing: border-box; padding: 2.18px 0 0; margin: 0; border: .5px solid #000; border-radius: 7.02px; background: var(--c-fill);
  font-weight: 600; font-size: 14.55px; line-height: 17.46px; color: var(--c-ink2); text-align: center; cursor: pointer; z-index: 7; }
body.lab-v21 .box-stage .del-btn:disabled { cursor: default; opacity: 1; color: var(--c-ink2); }
body.lab-v21 .box-stage .img-scale { left: 308.52px; top: 27.33px; width: 251.4px; height: 24.6px; box-sizing: border-box; border-radius: 8.26px; background: var(--c-fill); box-shadow: inset 0 0 0 .5px var(--c-ink); z-index: 7; }
body.lab-v21 .box-stage .img-scale .is-label { left: 6.64px; top: 2.14px; font-size: 14.88px; font-weight: 600; color: var(--c-ink2); }
body.lab-v21 .box-stage .img-scale output { left: 214.11px; top: 3.3px; font-size: 14.88px; font-weight: 500; color: var(--c-ink); }
body.lab-v21 .box-stage #artScale { left: 79.93px; top: 4.29px; width: 133.69px; height: 16px; --thumb: 13.36px; --trackh: 4.58px; }
body.lab-v21 .box-stage #artScale::-webkit-slider-runnable-track { height: 4.58px; border-radius: 2.29px; background: #E4E0DA; }
body.lab-v21 .box-stage #artScale::-moz-range-track { height: 4.58px; border-radius: 2.29px; background: #E4E0DA; }
body.lab-v21 .box-stage #artScale::-webkit-slider-thumb { width: 13.36px; height: 13.36px; margin-top: -4.39px; background: var(--c-ink); }
body.lab-v21 .box-stage #artScale::-moz-range-thumb { width: 13.36px; height: 13.36px; background: var(--c-ink); }
/* close X: Barlow Medium 28.2 "×", baseline 190.53 at x 1023.38 */
body.lab-v21 .box-stage .stage-x { left: 566.51px; top: -7.59px; padding: 0; font-weight: 500; font-size: 28.2px; line-height: 1.2; transform: none; color: var(--c-ink); background: none; z-index: 8; }
body.lab-v21 .box-stage .stage-x.idle:hover { color: var(--c-ink); }
body.lab-v21 .box-stage .confirm-over { top: 34px; right: 10px; left: auto; z-index: 9; }
/* empty state (Step 1 shows only while no product is loaded; Step 2 until art is on this print location) */
body.lab-v21 .step1, body.lab-v21 .step2 { left: 0; top: 0; width: 0; height: 0; z-index: 5; }
body.lab-v21 .step1[hidden], body.lab-v21 .step2[hidden] { display: none; }
body.lab-v21 .step1 > *, body.lab-v21 .step2 > * { position: absolute; margin: 0; padding: 0; white-space: nowrap; line-height: 1.2; font-size: 25px; }
body.lab-v21 .s-red { font-weight: 500; color: var(--c-red); }
body.lab-v21 .step1 .s-red { left: 255.4px; top: 131.77px; }
body.lab-v21 .step1 .s-add { left: 214.94px; top: 161.77px; border: 0; background: none; font-weight: 600; color: var(--c-blue); cursor: pointer; }
body.lab-v21 .step1 .s-add:hover { text-decoration: underline; text-underline-offset: 4px; }
body.lab-v21 .step2 .up-icon { left: 267.45px; top: 238.96px; width: 49px; height: 49px; }
body.lab-v21 .step2 .s2r { left: 122.52px; top: 297.81px; }
body.lab-v21 .step2 .s2t { left: 207.29px; top: 297.81px; font-weight: 600; color: var(--c-ink2); }
body.lab-v21 .step2 .s2f { left: 126.43px; top: 336.53px; font-weight: 500; font-size: 16px; color: var(--c-ink); }
body.lab-v21 .step2 { pointer-events: none; }
body.lab-v21 .box-stage .busy { z-index: 6; }
/* Front / Back / Sleeve (left, inside the window) */
body.lab-v21 .stage-sides { left: 19.39px; top: 429.25px; width: 56.3px; height: 241.6px; z-index: 7; }
body.lab-v21 .stage-sides .side-btn { left: 0; width: 55.94px; height: 78.22px; padding: 0; border: 0; border-radius: 9.4px; background: none; box-shadow: none; color: var(--c-ink); }
body.lab-v21 .stage-sides .side-btn.active { background: var(--c-fill); box-shadow: inset 0 0 0 .5px var(--c-ink); }
body.lab-v21 .stage-sides .side-btn[data-side=front] { top: 0; } body.lab-v21 .stage-sides .side-btn[data-side=back] { top: 82.47px; }
body.lab-v21 .stage-sides .side-btn img { position: absolute; left: 6.12px; top: 4.24px; width: 43.2px; height: 50.35px; object-fit: contain; background: none; }
body.lab-v21 .stage-sides .side-btn[data-side=front] span, body.lab-v21 .stage-sides .side-btn[data-side=back] span { position: absolute; left: 0; right: 0; top: 56.7px; font-size: 14.55px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--c-ink2); }
body.lab-v21 .stage-sides .side-btn[data-side=back] span { color: var(--c-ink); }
body.lab-v21 .stage-sides .side-btn.sleeve { left: .3px; top: 173.48px; width: 55.34px; height: 66.19px; border-radius: 8.4px; box-shadow: inset 0 0 0 .5px var(--c-ink); padding: 0; }
body.lab-v21 .stage-sides .side-btn.sleeve.active { background: var(--c-fill); box-shadow: inset 0 0 0 .5px var(--c-ink); }
body.lab-v21 .stage-sides .side-btn.sleeve svg { position: absolute; left: 0; top: 0; width: 55.34px; height: 66.19px; margin: 0; transform: none; }
body.lab-v21 .stage-sides .side-btn.sleeve span { position: absolute; left: 0; right: 0; top: 41.72px; font-size: 14.55px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--c-ink); }
body.lab-v21 .stage-sides .side-btn .dot { top: 4px; right: 4px; }
/* Undo / Redo / Zoom (963.1, 599.18, 58.78 x 239.64, r 12.63) */
body.lab-v21 .stage-tools { left: 506.23px; top: 429.26px; width: 58.78px; height: 239.64px; box-sizing: border-box; border: 0; border-radius: 12.63px; background: #fff; box-shadow: inset 0 0 0 .5px var(--c-ink); z-index: 7; padding: 0; }
body.lab-v21 .stage-tools > * { position: absolute; margin: 0; }
body.lab-v21 .stage-tools .tool { left: 1px; width: 56.78px; height: 46px; padding: 0; border: 0; background: none; color: var(--c-ink); }
body.lab-v21 .stage-tools #btnUndo { top: 1px; } body.lab-v21 .stage-tools #btnRedo { top: 50.24px; }
body.lab-v21 .stage-tools .tool svg, body.lab-v21 .stage-tools #btnRedo svg { left: 15px; top: 3.01px; width: 24px; height: 24px; }
body.lab-v21 .stage-tools .tool span { top: 27.71px; font-size: 13.98px; font-weight: 600; color: var(--c-ink); }
body.lab-v21 .stage-tools .tool-label, body.lab-v21 .stage-tools .zoom-val { left: 0; width: 58.78px; padding: 0; text-align: center; font-size: 13.98px; font-weight: 600; line-height: 1.2; color: var(--c-ink); }
body.lab-v21 .stage-tools .tool-label { top: 114.91px; } body.lab-v21 .stage-tools .zoom-val { top: 174.81px; }
body.lab-v21 .stage-tools .tool.sq { left: 9.39px; width: 39.93px; height: 34.59px; box-sizing: border-box; padding: 0 0 2px; border: .5px solid var(--c-ink); border-radius: 9.32px; background: var(--c-fill);
  font-weight: 600; font-size: 22.63px; line-height: 1; display: grid; place-items: center; color: var(--c-ink); }
body.lab-v21 .stage-tools #zoomIn { top: 135.51px; } body.lab-v21 .stage-tools #zoomOut { top: 196.73px; }
/* bottom row inside the window: Rotation, Center, Crop, Reset to Original */
body.lab-v21 .bottombar { left: 0; top: 0; width: 0; height: 0; z-index: 7; }
body.lab-v21 .bottombar > * { position: absolute; margin: 0; }
body.lab-v21 .bottombar .rotation { left: 21.19px; top: 689.58px; width: 207.05px; height: 21.8px; box-sizing: border-box; padding: 0; border-radius: 7.16px; background: #fff; box-shadow: inset 0 0 0 .5px var(--c-ink); display: block; }
body.lab-v21 .bottombar .rotation > * { position: absolute; margin: 0; line-height: 1.2; white-space: nowrap; }
body.lab-v21 .bottombar .rotation label { left: 5.07px; top: 2.9px; font-size: 13px; font-weight: 600; color: var(--c-ink2); }
body.lab-v21 .bottombar .rotation span { left: 190.12px; top: 2.9px; font-size: 13px; font-weight: 500; color: var(--c-ink); }
body.lab-v21 .bottombar #rotation { left: 58.06px; top: 2.89px; width: 128px; height: 16px; padding: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
body.lab-v21 .bottombar #rotation::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #E4E0DA; border: 0; }
body.lab-v21 .bottombar #rotation::-moz-range-track { height: 4px; border-radius: 2px; background: #E4E0DA; border: 0; }
body.lab-v21 .bottombar #rotation::-webkit-slider-thumb { -webkit-appearance: none; width: 11.66px; height: 11.66px; margin-top: -3.83px; border-radius: 50%; background: var(--c-ink); border: 0; }
body.lab-v21 .bottombar #rotation::-moz-range-thumb { width: 11.66px; height: 11.66px; border-radius: 50%; background: var(--c-ink); border: 0; }
body.lab-v21 .bottombar .bb { padding: 0; border: 0; background: none; font-weight: 600; font-size: 16.8px; line-height: 1.2; color: var(--c-ink); white-space: nowrap; cursor: pointer; opacity: 1; }
body.lab-v21 .bottombar .bb:disabled { cursor: default; color: var(--c-ink); opacity: 1; }
body.lab-v21 .bottombar .bb svg { position: absolute; width: 18px; height: 18px; }
body.lab-v21 .bottombar #btnCenter { left: 278.98px; top: 689.95px; } body.lab-v21 .bottombar #btnCenter svg { left: -25.19px; top: .99px; }
body.lab-v21 .bottombar #btnCrop { left: 383.56px; top: 689.42px; } body.lab-v21 .bottombar #btnCrop svg { left: -28.11px; top: .66px; }
body.lab-v21 .bottombar #btnReset { left: 442.1px; top: 689.87px; }

/* ---------- right column: 6 product cards (1096.78, 169.41 + n x 113.0, 396.87 x 103.13), Save/Share, Get Price ---------- */
body.lab-v21 .box-right { left: 1096.78px; top: 169.41px; width: 396.87px; height: 728.52px; background: none; border: 0; }
body.lab-v21 .box-right .cards { left: 0; top: 0; width: 396.87px; height: 668.12px; padding: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
body.lab-v21 .box-right .cards::-webkit-scrollbar { display: none; }
body.lab-v21 .box-right .cards .card { position: relative; width: 396.87px; height: 103.13px; margin: 0 0 9.87px; padding: 0; border: 0; border-radius: 0; background: var(--c-fill); box-shadow: none; overflow: hidden; }
body.lab-v21 .box-right .cards .card:hover { background: var(--c-fill); }
body.lab-v21 .box-right .cards .card.active { box-shadow: none; }
body.lab-v21 .box-right .cards .card.slot { cursor: default; }
body.lab-v21 .box-right .card .p-img, body.lab-v21 .box-right .card .p-img.empty { left: 5.02px; top: 5.32px; width: 73.79px; height: 93.86px; box-sizing: border-box; border: .59px solid #7C7A7A; border-radius: 0; background: #fff; box-shadow: none; object-fit: contain; }
body.lab-v21 .box-right .card .c-info { left: 86.41px; top: 3.24px; width: 280px; font-weight: 500; font-size: 15.29px; line-height: 22px; color: #2C2F3B; }
body.lab-v21 .box-right .card .c-info span { font-size: 15.29px; font-weight: 500; color: #2C2F3B; }
body.lab-v21 .box-right .card .c-change, body.lab-v21 .box-right .card .c-product { font-weight: 500; font-size: 17.64px; line-height: 1.2; color: var(--c-blue); }
body.lab-v21 .box-right .card .c-change { left: 86.91px; top: 71.41px; } body.lab-v21 .box-right .card .c-product { left: 260.14px; top: 73.79px; }
body.lab-v21 .box-right .card.slot .c-change, body.lab-v21 .box-right .card.slot .c-product, body.lab-v21 .box-right .card.slot .c-x { cursor: default; }
body.lab-v21 .box-right .card.slot .c-change:hover, body.lab-v21 .box-right .card.slot .c-product:hover { text-decoration: none; }
body.lab-v21 .box-right .card .c-x { left: 379.5px; top: -8.08px; padding: 0; font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 28.2px; line-height: 1.2; transform: none; color: var(--c-ink); }
body.lab-v21 .box-right .card .colors { left: 86.41px; right: 30px; top: 4px; background: var(--c-fill); }
body.lab-v21 .box-right .t-btn { top: 683.72px; width: 187.92px; height: 44.8px; box-sizing: border-box; padding: 0 0 2.6px; border: 0; border-radius: 5px; background: #305AA9;
  font-weight: 600; font-size: 25px; line-height: 30px; color: var(--c-fill); -webkit-text-stroke: .3px #231F20; text-align: center; vertical-align: top; display: block; }
body.lab-v21 .box-right .t-btn:hover { background: #2A4F95; } body.lab-v21 .box-right .t-btn:active { background: #244585; }
body.lab-v21 .box-right .t-save { left: 0; } body.lab-v21 .box-right .t-price { left: 208.95px; }
body.lab-v21 .hdr .search-results { left: -60px; width: 340px; }
/* fixes after the overlay check against the layout render */
body.lab-v21 .upload-panel .dz-icon { padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: var(--c-ink); box-shadow: none; }
body.lab-v21 .bottombar .rotation #rotVal { width: auto; min-width: 0; text-align: left; }

/* v21.1: print-quality warning centered over the product photo (photo box center 749.16, 537.27 on the artboard) */
body.lab-v21 .box-stage #quality { position: absolute; left: 292.29px; top: 367.35px; transform: translate(-50%, -50%); z-index: 6; display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; white-space: nowrap; margin: 0; padding: 7px 11px; border-radius: 8px; background: #fff; color: #1a1a1a; font-size: 13px; font-weight: 600; box-shadow: 0 0 0 .5px #000; }
body.lab-v21 .box-stage #quality[hidden] { display: none; }
body.lab-v21 .box-stage #quality .link-btn { margin-left: 4px; }

/* v21.3: the left column (17.98, 170.82 to the page bottom) scrolls as one group; panels are in normal flow with the layout's
   gaps, their layout heights are minimums (js/artboard.js grows them to fit). No scrollbar inside a panel or a card. */
body.lab-v21 .left-col21 { position: absolute; left: 17.98px; top: 170.82px; width: 395px; height: 742.67px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
body.lab-v21 .left-col21 > .p21 { position: relative; left: .94px; top: auto; flex: none; }
body.lab-v21 .left-col21 > .inks-panel { margin-top: 6.52px; }
body.lab-v21 .left-col21 > .advisory { margin-top: 7.53px; }
body.lab-v21 .left-col21 > .edit-panel { left: 0; margin-top: 7.53px; }
body.lab-v21 .inks-panel .inks-scroll { bottom: auto; overflow: visible; }
body.lab-v21 .box-right .cards .card { flex: none; }
/* v21.3 fix: the centered quality box must not block dragging the art handles beneath it; only its link takes clicks */
body.lab-v21 .box-stage #quality { pointer-events: none; }
body.lab-v21 .box-stage #quality .link-btn { pointer-events: auto; }
/* v21.4: the quality note sits at the bottom of the product photo (photo bottom 833.90 on the artboard = 663.98 in the window),
   centered horizontally, above the bottom tool bar; its X hides it. Drags pass through; the link and the X take clicks. */
body.lab-v21 .box-stage #quality { top: 659.98px; transform: translate(-50%, -100%); padding-right: 6px; }
body.lab-v21 .box-stage #quality .q-x { pointer-events: auto; margin: 0 0 0 2px; padding: 0 4px; border: 0; background: none; font-family: inherit; font-size: 17px; line-height: 1; font-weight: 500; color: #1a1a1a; cursor: pointer; }
body.lab-v21 .box-stage #quality .q-x:hover { color: #000; }
/* v21.5: no artwork can be uploaded until a product has been added — the dropzone dims until then */
body.upload-locked .upload-panel .dropzone { opacity: .45; }
body.upload-locked .upload-panel .dropzone:hover { opacity: .45; }
/* v21.5 (#6): the Edit ink colors Merge button joins the solid #305aa9 buttons */
body.lab-v21 .edit-panel .m-btn { background: #305AA9; border-color: #305AA9; color: #fff; }
body.lab-v21 .edit-panel .m-btn:hover:not(:disabled) { background: #2A4F95; }
body.lab-v21 .edit-panel .m-btn:disabled { opacity: .45; color: #fff; }
/* v21.5 (#6): the Quantity / price window action buttons join the solid #305aa9 buttons */
body.lab-v21 .modal #toOptions, body.lab-v21 .modal #addCart, body.lab-v21 .modal #backQty { border-color: #305AA9; background: #305AA9; color: #fff; }
body.lab-v21 .modal #toOptions:hover, body.lab-v21 .modal #addCart:hover:not(:disabled), body.lab-v21 .modal #backQty:hover { background: #2A4F95; }
body.lab-v21 .modal #addCart:disabled { opacity: .45; }

/* v24: Step 1 lives in the right rail as the "Add a product" card (PrintLab-Lab-Layout-v24.svg / ADD_PRODUCT_CARD.svg) */
body.lab-v21 .step1 { display: none !important; }
body.lab-v21 .box-right .cards .card.add-card { cursor: pointer; font-family: 'Barlow', sans-serif; }
body.lab-v21 .box-right .card.add-card > span { position: absolute; margin: 0; white-space: nowrap; line-height: 1; }
body.lab-v21 .box-right .card.add-card .ac-step { left: 164.49px; top: 23.6px; font-size: 23px; font-weight: 500; color: #ed1c24; }
body.lab-v21 .box-right .card.add-card .ac-add { left: 124.13px; top: 48.6px; font-size: 23px; font-weight: 600; color: #4252a1; }
body.lab-v21 .box-right .card.add-card .ac-add.ac-only { left: 128.05px; top: 34.5px; font-size: 22px; font-weight: 500; color: #4353a1; }
body.lab-v21 .box-right .card.add-card:hover .ac-add { text-decoration: underline; text-underline-offset: 4px; }
/* v24 Step 2 type: 23px headline, 15px file list */
body.lab-v21 .step2 .s2r { left: 134.53px; top: 299.7px; font-size: 23px; }
body.lab-v21 .step2 .s2t { left: 212.28px; top: 299.7px; font-size: 23px; }
body.lab-v21 .step2 .s2f { left: 136.37px; top: 337.5px; font-size: 15px; }
body.pl-landing .box-stage > :not(.canvas-wrap):not(#emptyHint):not(.step1) { visibility: hidden !important; }

/* sleeve view: the pill reads RIGHT SLEEVE / LEFT SLEEVE and switches the active sleeve; grows leftward from the same right edge */
body.lab-v21 .p21 .side-pill.wide { width: auto; padding: 0 7px; transform: translateX(calc(-100% + 48.79px)); cursor: pointer; text-transform: uppercase; white-space: nowrap; }