/* Print Lab · customer page, v7: the layout is LOCKED to the Illustrator template "LAB LAYOUT 10-10-26".
   Every box below uses the template's numbers (1 pt = 1 CSS px, artboard 1366.37 x 881.73). js/lab-fit.js scales the whole
   artboard to the window (same aspect, centered); content never moves the boxes. Numbers: layout-spec.json. */
:root { --tpl-black: #110F0D; --tpl-line: #231F20; --tpl-card: #FBF5F3; --tpl-outer: #C6C5C3; --tpl-hdr-text: #FDF9F8; }
html, body { width: 100%; height: 100%; }
body.lab-v7 { background: var(--tpl-black); overflow: hidden; font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; }
.lab { position: absolute; left: 0; top: 0; width: 1366.37px; height: 881.73px; transform-origin: 0 0; background: var(--tpl-black); overflow: hidden; }
.lab > * { position: absolute; box-sizing: border-box; }

/* ---------- header (0,0 1366.37 x 95.87) ---------- */
.hdr { left: 0; top: 0; width: 1366.37px; height: 95.87px; background: var(--tpl-black); z-index: 20; }
.hdr > * { position: absolute; margin: 0; padding: 0; white-space: nowrap; }
/* Illustrator set these words with the font's own advance widths (no pair kerning): match that */
.hdr, .t-btn, .xg, .stage-x, .col-x, .c-x, .c-label { font-kerning: none; font-feature-settings: 'kern' 0; }
/* text boxes use line-height 1.2em, so the baseline sits exactly 1 font-size below the box top (Barlow: ascent 1000, descent 200) */
.hdr a, .hdr button.t-nav { color: var(--tpl-hdr-text); text-decoration: none; background: none; border: 0; cursor: pointer; line-height: 1.2; }
.hdr-logo { left: 0; top: 0; width: 230px; height: 95.87px; }
.hdr-logo img { position: absolute; left: 20.58px; top: 7.72px; width: 78.53px; height: 79.24px; }
.t-brand { position: absolute; left: 109.30px; top: 34.41px; font-weight: 800; font-size: 23.1975px; line-height: 1.2; letter-spacing: .025em; color: var(--tpl-hdr-text); }
.hdr .t-signin { left: 323.60px; top: 38.61px; font-weight: 500; font-size: 18px; letter-spacing: .02em; color: #fff; }
.hdr .t-artboard { left: 471.02px; top: 29.77px; font-weight: 600; font-size: 25px; line-height: 1.2; letter-spacing: .0115em; color: var(--tpl-hdr-text); }
.hdr .t-nav { top: 34.27px; font-family: inherit; font-weight: 700; font-size: 20px; letter-spacing: .017em; }
.hdr .t-new { left: 999.69px; } .hdr .t-brands { left: 1152.77px; } .hdr .t-products { left: 1249.79px; }
.hdr a:hover, .hdr button.t-nav:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* search pill: 752.29,32.63 226.0 x 29.42, corner radius 12.03, white, 0.4 outline */
.hdr .hdr-search { left: 752.09px; top: 32.43px; width: 226.4px; height: 29.82px; border: .4px solid var(--tpl-line); border-radius: 12.23px; background: #fff; }
.hdr .hdr-search input { position: absolute; left: 5.96px; top: 4.0px; width: 195px; height: 16.8px; padding: 0; margin: 0; border: 0; border-radius: 0; outline: none;
  background: transparent; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 16.8px; color: #000; -webkit-appearance: none; appearance: none; }
.hdr .hdr-search input::placeholder { color: #000; opacity: 1; }
.hdr .hdr-search input::-webkit-search-cancel-button { display: none; }
.hdr .hdr-search:focus-within { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.hdr .hdr-search .mag { position: absolute; left: 0; top: 0; width: 20px; height: 20px; transform: translate(202.89px, 5.80px); pointer-events: none; color: var(--tpl-line); }
.hdr .hdr-search > svg.mag { right: auto; }
.hdr .search-results { top: calc(100% + 6px); bottom: auto; left: -40px; right: auto; width: 320px; max-height: 420px; z-index: 40; font-size: 13px; color: var(--ink); }
.hdr .search-results li { font-weight: 500; }

/* ---------- white work area + the template's lines ---------- */
.box-left, .box-tools, .box-stage, .box-bottom, .box-right { background: #fff; }
.rule { pointer-events: none; z-index: 15; }
.r-outer { left: 10.12px; top: 95.93px; width: 1346.12px; height: 775.68px; border: .304px solid var(--tpl-outer); }
.r-v1 { left: 361.43px; top: 95.87px; width: .404px; height: 713.69px; background: var(--tpl-line); }
.r-v2 { left: 426.06px; top: 96.08px; width: .396px; height: 713.48px; background: var(--tpl-line); }
.r-v3 { left: 1001.45px; top: 95.87px; width: .396px; height: 713.69px; background: var(--tpl-line); }
.r-bottom { left: 10.07px; top: 809.36px; width: 992.10px; height: 62.30px; border: .404px solid var(--tpl-line); }

/* ---------- left panel (10.27..361.63 x 95.87..809.56) ---------- */
.box-left { left: 10.27px; top: 95.87px; width: 351.36px; height: 713.69px; overflow-y: auto; overflow-x: hidden; padding: 9px 9px 12px 9px;
  display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; border: 0; }
.box-left .panel { background: #fff; border: 1px solid #E4E0DA; border-radius: 8px; box-shadow: none; padding: 10px 11px; flex: none; }
.box-left h3 { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; color: var(--tpl-line); }
.box-left .panel-head { margin-bottom: 8px; }
.box-left .dropzone { padding: 14px 10px; border-radius: 9px; }
.box-left .ink-list { margin: 0; }

/* ---------- tool column (361.63..426.26) ---------- */
.box-tools { left: 361.63px; top: 95.87px; width: 64.63px; height: 713.69px; padding: 10px 5px; gap: 10px; border: 0; background: #fff; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.box-tools .tool-group { padding: 3px; gap: 3px; border-radius: 8px; border-color: #E4E0DA; }
.box-tools .tool { font-size: 10.5px; font-weight: 600; padding: 5px 0; }
.box-tools .tool svg { width: 18px; height: 18px; }
.box-tools .side-btn { font-size: 10.5px; font-weight: 600; padding: 3px 0 4px; }
.box-tools .side-btn img { width: 42px; height: 42px; }
.box-tools .side-btn svg { width: 26px; height: 26px; }
.box-tools .side-btn .dot { top: 3px; right: 3px; }
.box-tools .tool-label, .box-tools .zoom-val { font-size: 10.5px; font-weight: 600; }
.box-tools .tool.sq { width: 30px; height: 26px; font-size: 17px; }

/* ---------- center window (426.26..1001.97 x 95.87..809.56) ---------- */
.box-stage { left: 426.26px; top: 95.87px; width: 575.71px; height: 713.69px; overflow: hidden; display: block; min-width: 0; }
.box-stage .canvas-wrap { position: absolute; inset: 0; display: block; overflow: hidden; background: #fff; padding: 0 !important; }
.box-stage #stageCanvas { position: absolute; left: 0; top: 0; }
.box-stage .stage-top { top: 8px; left: 9px; right: 40px; justify-content: flex-start; gap: 7px; align-items: flex-start; }
.box-stage .icon-btn { width: 28px; height: 28px; border-radius: 7px; box-shadow: none; }
.box-stage .icon-btn svg { width: 17px; height: 17px; }
.box-stage .seg { padding: 2px; box-shadow: none; }
.box-stage .seg button { padding: 4px 11px; font-size: 12px; font-weight: 600; }
.box-stage .stage-meta { font-size: 11px; min-width: 0; text-align: left; background: rgba(255,255,255,.85); font-weight: 500; }
/* the template's X (Barlow Medium "X", 28.72 x 16 text matrix = 16px, stretched 1.795 wide), baseline 976.04, 116.78 */
.stage-x, .col-x, .card .c-x { position: absolute; border: 0; background: none; box-shadow: none; border-radius: 0; padding: 4px; margin: 0; width: auto; height: auto;
  display: block; right: auto; bottom: auto; font-family: 'Barlow', sans-serif; font-weight: 500; line-height: 1.2; color: var(--tpl-black); transform-origin: 0 0; cursor: pointer; text-align: left; }
.box-stage .stage-x { left: 541.60px; top: -.1px; font-size: 16px; transform: scaleX(1.7948); z-index: 8; }
.stage-x:hover, .col-x:hover, .card .c-x:hover { color: #B8452B; background: none; border: 0; }
.stage-x.idle { cursor: default; }
.stage-x.idle:hover { color: var(--tpl-black); }
.box-stage .confirm-over { top: 30px; right: 10px; }
.box-stage .empty-hint { bottom: 10px; font-size: 12.5px; font-weight: 500; padding: 5px 12px; }
.box-stage .screen-strip { bottom: 8px; max-width: calc(100% - 16px); overflow-x: auto; padding: 6px 8px; scrollbar-width: thin; }
.box-stage .films { position: absolute; inset: 0; padding: 46px 16px 16px; }
.box-stage .busy { z-index: 6; }

/* ---------- bottom bar (10.27..1001.97 x 809.56..871.46) ---------- */
.box-bottom { left: 10.27px; top: 809.56px; width: 991.70px; height: 61.90px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 0; background: #fff; }
.box-bottom .btn { font-weight: 600; font-size: 14px; }
.box-bottom .rotation { margin-left: 8px; }
.box-bottom .rotation label { font-weight: 600; }
.box-bottom .staff-link { margin-left: auto; margin-right: 4px; font-weight: 500; font-size: 12px; }

/* ---------- right column (1001.97..1356.09 x 95.87..871.46) ---------- */
.box-right { left: 1001.97px; top: 95.87px; width: 354.12px; height: 775.59px; display: block; border: 0; background: #fff; }
.box-right > * { position: absolute; }
/* column X: 19.60 x 10.92 text matrix, baseline 1330.21, 111.34 */
.box-right .col-x { left: 321.06px; top: .55px; font-size: 10.92px; transform: scaleX(1.7948); z-index: 3; }
.box-right .confirm-cards { top: 22px; right: 8px; left: auto; z-index: 6; width: 230px; }
/* cards: 337.09 x 87.31 at x 1010.60, tops 120.29 + n x 97.74 (gap 10.43). The list scrolls when there are more than 7. */
.box-right .cards { left: 0; top: 20px; width: 354.12px; height: 682.1px; padding: 4.42px 0 0 8.43px; display: block; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; gap: 0; }
.box-right .cards .card { position: relative; width: 337.49px; height: 87.71px; margin: 0 0 10.03px 0; padding: 0; display: block; background: var(--tpl-card);
  border: .4px solid var(--tpl-line); border-radius: 0; box-shadow: none; cursor: pointer; overflow: hidden; transition: none; }
.box-right .cards .card:hover { border-color: var(--tpl-line); background: #F8F0EC; }
.box-right .cards .card.active { box-shadow: inset 0 0 0 1.6px var(--tpl-line); }
.card .c-label { position: absolute; left: 3.86px; top: 2.42px; font-weight: 600; font-size: 9.1427px; line-height: 1.2; color: var(--tpl-line); transform: scaleX(1.038); transform-origin: 0 0; white-space: nowrap; letter-spacing: .01em; }
.box-right .card .p-img { position: absolute; left: 6px; top: 17px; width: 64px; height: 64px; box-sizing: border-box; background: #fff; border-radius: 4px; border: 1px solid #EEE6E1; object-fit: contain; display: block; }
.box-right .card .p-img.empty { background: rgba(255,255,255,.55); border: 1px dashed #E2D6CF; }
.hdr .search-results .p-img { width: 30px; height: 30px; flex: none; box-sizing: border-box; border-radius: 4px; object-fit: contain; display: block; }
.hdr .search-results .p-img.empty { border: 1px dashed #E2D6CF; background: #FBF8F6; }
.box-right .card .c-body { position: absolute; left: 80px; top: 17px; right: 10px; bottom: 6px; display: block; padding: 0; }
.box-right .card .c-name { display: block; font-weight: 600; font-size: 15px; line-height: 18px; color: var(--tpl-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-right .card .c-color { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; line-height: 16px; margin-top: 4px; color: #4A4340; }
.box-right .card .c-color i { width: 12px; height: 12px; }
.box-right .card .c-change { position: absolute; left: 0; top: 46px; font-family: inherit; font-weight: 600; font-size: 12.5px; color: #8B4A31; }
/* card X: same glyph as the column X, baseline 13.82 below the card top, 320.65 from its left */
.box-right .card .c-x { left: 312.27px; top: -2.1px; font-size: 10.92px; transform: scaleX(1.7948); width: auto; height: auto; }
.box-right .card .colors { position: absolute; left: 80px; right: 8px; top: 39px; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; background: var(--tpl-card); }
.box-right .card .colors .cdot { width: 17px; height: 17px; }
.box-right .cards .empty-cards { margin: 30px 18px; color: #6B625D; font-size: 14px; line-height: 1.4; }
/* Save/Share 1035.28 and Get Price 1194.49, 809.56, 138.45 x 44.41: Barlow SemiBold 21, baseline 838.44 */
.box-right .t-btn { top: 713.49px; width: 138.85px; height: 44.81px; padding: 0 0 3.7px; margin: 0; background: var(--tpl-card); border: .4px solid var(--tpl-line); border-radius: 0;
  font-family: inherit; font-weight: 600; font-size: 21px; line-height: 25.2px; color: var(--tpl-line); text-align: center; cursor: pointer; display: block; }
.box-right .t-save { left: 33.11px; } .box-right .t-price { left: 192.32px; }
.box-right .t-btn:hover { background: #F3E7E1; }
.box-right .t-btn:active { background: #EADBD3; }

/* overlays live outside the scaled artboard */
.lab-v7 .toast { bottom: 40px; }
/* v8: Front/Back buttons show the tee pictures as-is (not square), fitted */
.box-tools .side-btn img { object-fit: contain; background: #fff; }
/* Quantity / price window action buttons match Save/Share + Get Price */
.modal #toOptions, .modal #addCart, .modal #backQty { font-family: Barlow, sans-serif; font-weight: 600; font-size: 21px; line-height: 1; min-width: 138.85px; height: 44.81px; justify-content: center; padding: 0 18px; border-radius: 0; border: .4px solid var(--tpl-line, #2B2420); background: var(--tpl-card, #F9F6F3); color: var(--tpl-line, #2B2420); }
.modal #toOptions:hover, .modal #addCart:hover:not(:disabled), .modal #backQty:hover { background: #F3E7E1; }
.modal #toOptions:active, .modal #addCart:active, .modal #backQty:active { background: #EADBD3; }

/* v21.5 (#6): every button in the Lab is solid #305aa9 with white text; disabled states dim but keep the hue */
body.lab-v7 .btn { border-color: #305AA9; background: #305AA9; color: #fff; }
body.lab-v7 .btn:hover { border-color: #2A4F95; background: #2A4F95; }
body.lab-v7 .btn:active { background: #244585; }
body.lab-v7 .btn:disabled { opacity: .45; cursor: default; background: #305AA9; border-color: #305AA9; }
body.lab-v7 .btn.primary { background: #305AA9; border-color: #305AA9; }
body.lab-v7 .btn.primary:hover { background: #2A4F95; }
body.lab-v7 .merge-row .btn, body.lab-v7 .edit-panel .m-btn { background: #305AA9; border-color: #305AA9; color: #fff; }
body.lab-v7 .edit-panel .m-btn:hover:not(:disabled) { background: #2A4F95; }
body.lab-v7 .edit-panel .m-btn:disabled { opacity: .45; }

/* v21.5 (#3): the price window (heading, price, chips, ink note, Your Order) is 20% larger */
body.lab-v7 .modal h2 { font-size: 26.4px; }
body.lab-v7 .modal .price { font-size: 19.2px; margin: 8px 0 12px; }
body.lab-v7 .modal .price .placeholder { font-size: 12px; }
body.lab-v7 .modal .chips .chip { padding: 4.2px 12px; font-size: 14.4px; }
body.lab-v7 .modal .note { font-size: 15px; }
body.lab-v7 .modal h3 { font-size: 19.2px; margin: 14px 0 8px; }
body.lab-v7 .modal .osum { font-size: 15.6px; }
body.lab-v7 .modal .osum i { width: 14px; height: 14px; }