/* Print Lab · customer page, v11: the user's own edit of the layout (PrintLab-Lab-Layout-v10.svg, edited in Illustrator and sent back).
   Every number here is measured from that file (1 pt = 1 CSS px). Their file's coordinates sit 0.135 px lower than the artboard's
   (the page is centered vertically in a 1366 x 882 window), so tops below = their y - 0.135. Loaded after lab-v7.css; overrides only. */

/* ---------- template lines: only the outer frame (0.8 #C6C5C3) is left; the center window and the bottom bar have their own 0.5 outline ---------- */
.r-outer { left: 10.21px; top: 96.015px; width: 1345.91px; height: 775.47px; border: 0; box-shadow: inset 0 0 0 .8px var(--tpl-outer); }
.r-stage { left: 426.0px; top: 95.605px; width: 576.2px; height: 719.56px; border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); }
.r-bottom { left: 426.0px; top: 814.665px; width: 576.21px; height: 57.02px; border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); background: none; }

/* ---------- header ---------- */
.hdr .t-signin { left: 291.56px; }
.hdr .t-artboard { left: 427.99px; top: 34.765px; font-weight: 700; font-size: 20px; letter-spacing: .01em; }
.hdr .t-nav { top: 34.765px; }

/* ---------- left panel: now runs to the bottom of the page (10.27, 95.87, 351.36 x 775.22) ---------- */
.box-left { height: 775.215px; padding: 9.25px 11px 12px 7.25px; gap: 0; }
/* panels: 0.5 outline (#231F20) drawn as an inset ring, so Chrome does not widen it to a full pixel */
.box-left .panel { width: 332.86px; border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); padding: 10.75px 11.75px; }
.box-left .upload-panel { padding-bottom: 4.07px; }
.box-left .advisory.need { box-shadow: inset 0 0 0 .5px #E9CFA6; }
.box-left .inks-panel { margin-top: 7.77px; }
.box-left .advisory { margin-top: 7.5px; }
.box-left .edit-panel { margin-top: 8.35px; margin-left: -.505px; width: 333.87px; min-height: 229.04px; box-shadow: inset 0 0 0 .51px var(--tpl-line); padding: 11.27px 12.255px 9.765px; }
.box-left .side-pill, .box-left .count-pill { border-color: var(--tpl-line); }
.box-left .count-pill.has { border-color: var(--espresso); }
/* drop zone: 307.36 x 130.67 dashed outline (1.82, corner 7.28); "browse files" at its top left */
.box-left .dropzone { position: relative; box-sizing: border-box; width: 309.36px; height: 132.67px; margin: 0; padding: 0; border-width: 2px; border-radius: 8.28px; }
.box-left .dz-empty { display: block; position: absolute; inset: 0; }
.box-left .dz-empty > * { position: absolute; margin: 0; line-height: 1.2; white-space: nowrap; }
.box-left .dz-icon { left: 130.67px; top: 14.0px; margin: 0; }
.box-left .dz-empty strong { left: 0; right: 0; top: 63.0px; text-align: center; }
.box-left .dz-empty .dz-formats { left: 0; right: 0; top: 86.5px; text-align: center; }
.box-left .dz-empty em { left: 0; right: 0; top: 108.99px; margin: 0; text-align: center; }
.box-left .dz-empty .dz-browse { left: 16.46px; top: 10.32px; font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.box-left .dz-file { position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; }
.box-left .dropzone.has-art { padding: 0; border-width: 2px; }
.box-left .samples { margin-top: 9.4px; }

/* ---------- SCREENS column (357.42, 96.42, 69.02 x 774.67): label + 10 boxes 63.7 x 73.98, 0.32 outline, every 75.53 ----------
   (Safari drops rings thinner than 0.5 px, so the 0.32 #231F20 line is drawn 0.5 wide at 64% strength: the same amount of ink) */
.box-screens { left: 357.42px; top: 96.415px; width: 69.02px; height: 774.67px; background: #fff; overflow: visible; z-index: 2; }
.box-screens .sc-label { position: absolute; left: 2.24px; top: 3.59px; margin: 0; font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; color: var(--tpl-line); white-space: nowrap; }
.box-screens .sc-label b { font-weight: 700; }
.box-screens .sc-list { position: absolute; left: -1.13px; top: 19.02px; width: 64.02px; }
.box-screens .sc-box { position: absolute; left: 0; width: 64.02px; height: 74.30px; box-sizing: border-box; border: 0; box-shadow: inset 0 0 0 .5px rgba(35,31,32,.64); background: #fff; padding: 0; margin: 0;
  font: inherit; color: var(--ink-2); overflow: hidden; display: block; }
.box-screens .sc-box:nth-child(1) { top: 0; } .box-screens .sc-box:nth-child(2) { top: 75.53px; } .box-screens .sc-box:nth-child(3) { top: 151.06px; }
.box-screens .sc-box:nth-child(4) { top: 226.59px; } .box-screens .sc-box:nth-child(5) { top: 302.12px; } .box-screens .sc-box:nth-child(6) { top: 377.65px; }
.box-screens .sc-box:nth-child(7) { top: 453.18px; } .box-screens .sc-box:nth-child(8) { top: 528.71px; } .box-screens .sc-box:nth-child(9) { top: 604.24px; }
.box-screens .sc-box:nth-child(10) { top: 679.77px; }
.box-screens .sc-box:nth-child(n+11) { display: none; }
/* a box with a screen in it: the screen's film (ink coverage) on top, its number and ink below */
.box-screens button.sc-box { cursor: pointer; }
.box-screens button.sc-box:hover { background: #FBF8F4; }
.box-screens .sc-box canvas { position: absolute; left: 3px; top: 3px; width: 57.38px; height: 50px; object-fit: contain; }
.box-screens .sc-box span { position: absolute; left: 2px; right: 2px; bottom: 3px; font-size: 9px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--tpl-line);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.box-screens .sc-box span i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 2px; vertical-align: 0; box-shadow: 0 0 0 .5px rgba(0,0,0,.35); }

/* ---------- center window (426.26, 95.87, 575.71 x 719.06) ---------- */
.box-stage { height: 719.06px; }
.box-stage .stage-top { top: 5px; }
.box-stage .icon-btn { border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); }
.box-stage #btnDownload svg { transform: translateX(-1px); } /* the user moved the arrow 2 px left in its box */
.box-stage .seg { border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); padding: 3px; }
/* "Short Sleeve T-Shirt · Black · Front" in a white box with a 0.5 outline (778.34, 104.99, 175.2 x 20.3, corners 6) */
.box-stage .stage-meta { position: absolute; left: 342.83px; top: 3.735px; box-sizing: border-box; min-width: 175.7px; min-height: 20.8px; height: auto; padding: 3.25px 2px 3.1px 5.2px;
  border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); border-radius: 6.25px; background: #fff; line-height: 1.2; white-space: nowrap; }
.box-stage .stage-meta b { margin-right: 4.72px; } /* the user set "· Black · Front" 4.72 further right */
.box-stage .empty-hint { bottom: 18.37px; }
.box-stage .films { padding-left: 74px; padding-right: 74px; }
/* Front / Back / Sleeve Design: bottom left of the window */
.stage-sides { position: absolute; left: 18.41px; top: 501.855px; width: 46.13px; height: 197.89px; z-index: 7; }
.stage-sides .side-btn { position: absolute; left: 0; width: 46.13px; height: 64.5px; box-sizing: border-box; margin: 0; padding: 3.5px 0 4px; border: 0; border-radius: 7.75px;
  font-size: 10.5px; font-weight: 600; gap: 1px; }
.stage-sides .side-btn.active { border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); background: #FAF8F4; }
.stage-sides .side-btn[data-side=front] { top: 0; }
.stage-sides .side-btn[data-side=back] { top: 68px; }
.stage-sides .side-btn img { width: 42px; height: 42px; object-fit: contain; background: #fff; flex: none; }
.stage-sides .side-btn.sleeve { top: 142.81px; height: 55.08px; padding: .5px 0 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); border-radius: 7.18px; gap: 0; justify-content: flex-start; }
.stage-sides .side-btn.sleeve.active { background: #FAF8F4; box-shadow: inset 0 0 0 1px var(--tpl-line); }
/* the user centered the sleeve icon in its box (+4.89) and moved its small square (+1.96, -1.47) */
.stage-sides .side-btn.sleeve svg { width: 26px; height: 26px; margin-top: -.57px; flex: none; transform: translateX(4.89px); }
.stage-sides .side-btn .dot { top: 3px; right: 3px; }
/* Undo / Redo / Zoom: one box at the bottom right (935.73, 598.11, 48.08 x 197.55, corners 10.19), the old tool sizes x 1.1 */
.stage-tools { position: absolute; left: 509.22px; top: 501.855px; width: 48.58px; height: 198.05px; box-sizing: border-box; border: 0; box-shadow: inset 0 0 0 .5px var(--tpl-line); border-radius: 10.44px; background: #fff; z-index: 7; }
.stage-tools > * { position: absolute; margin: 0; }
.stage-tools .tool { left: .5px; width: 47.58px; height: 40px; padding: 0; display: block; border-radius: 7px; font-size: 11.55px; font-weight: 600; }
.stage-tools #btnUndo { top: .5px; } .stage-tools #btnRedo { top: 41.19px; }
.stage-tools #btnRedo svg { left: 13.31px; } /* user: Redo arrow lined up with Undo (left edge 953.27) */
.stage-tools .tool svg { position: absolute; left: 13.89px; top: 3.67px; width: 19.8px; height: 19.8px; }
.stage-tools .tool span { position: absolute; left: 0; right: 0; top: 24.6px; text-align: center; line-height: 1.2; }
.stage-tools .tool-label, .stage-tools .zoom-val { left: .5px; width: 47.58px; text-align: center; font-size: 11.55px; font-weight: 600; line-height: 1.2; }
.stage-tools .tool-label { top: 95.52px; } .stage-tools .zoom-val { top: 145.02px; padding-left: 1.46px; box-sizing: border-box; }
.stage-tools .tool.sq { left: 7.78px; width: 33.0px; height: 28.6px; box-sizing: border-box; border: 1.1px solid #E2DCD1; border-radius: 7.7px; font-size: 18.7px; line-height: 1; display: grid; place-items: center; padding: 0; }
.stage-tools #zoomIn { top: 111.99px; } .stage-tools #zoomOut { top: 162.59px; padding-bottom: 2.18px; } /* user set the minus 1.09 higher in its box */

/* ---------- bottom bar: under the center window only (426.26, 815.05, 575.71 x 56.52); Rotation, Center, Crop, Reset to Original ---------- */
.box-bottom { left: 426.26px; top: 814.915px; width: 575.71px; height: 56.52px; display: block; padding: 0; gap: 0; }
.box-bottom > * { position: absolute; margin: 0; }
.box-bottom .rotation { left: 17.39px; top: 16.0px; width: 207.05px; height: 21.8px; box-sizing: border-box; padding: 0; margin: 0; border: 0; box-shadow: inset 0 0 0 .8px #E2DCD1; border-radius: 7.16px; display: block; background: #fff; }
.box-bottom .rotation > * { position: absolute; margin: 0; }
.box-bottom .rotation label { left: 5.08px; top: 3.92px; font-size: 13px; line-height: 1.2; }
.box-bottom .rotation input { left: 58.07px; top: 2.9px; width: 128px; height: 16px; margin: 0; padding: 0; }
.box-bottom .rotation span { left: 191.14px; top: 3.92px; width: auto; text-align: left; line-height: 1.2; }
.box-bottom .btn { padding: 0; border: 0; border-radius: 6px; background: none; font-size: 16.8px; font-weight: 600; line-height: 1.2; display: block; height: 20.16px; }
.box-bottom .btn svg { position: absolute; width: 20.4px; height: 20.4px; }
.box-bottom #btnCenter { left: 248.79px; top: 16.18px; padding-left: 26.4px; } .box-bottom #btnCenter svg { left: 0; top: 0; }
.box-bottom #btnCrop { left: 350.95px; top: 15.65px; padding-left: 28.82px; } .box-bottom #btnCrop svg { left: 0; top: 0; width: 20.41px; height: 20.41px; }
.box-bottom #btnReset { left: 438.29px; top: 16.1px; }
.box-bottom .btn[aria-pressed=true] { background: none; border: 0; }
.box-bottom #btnCrop:disabled { opacity: 1; color: rgb(156,152,148); } /* the user's Crop grey */
.box-bottom .btn.ghost:hover:not(:disabled) { background: none; color: var(--ink); }

/* ---------- right column ---------- */
.box-right .cards { padding-left: 3.43px; }
.box-right .cards .card.active { box-shadow: none; }
.card .c-label { letter-spacing: 0; }
.box-right .t-save { left: 23.10px; } .box-right .t-price { left: 182.31px; }
/* Delete Design (delete_design_button.svg): 54.43 x 38.81 box at (0.25, 0.25), tools box at (3.21, 59.58) */
.stage-tools #btnDeleteDesign { left: -2.96px; top: -59.33px; width: 54.43px; height: 38.81px; box-sizing: border-box; border: .5px solid #000; border-radius: 6.38px; background: #fbf7f5; color: #2b2521; font-family: Barlow, sans-serif; font-size: 13.23px; font-weight: 600; }
.stage-tools #btnDeleteDesign span { top: 4.4px; line-height: 15.88px; }