/* ADD_PRODUCT_OVERLAY_PRODUCT_SELECTION_FEILD_10-12-26.svg — exact 1179.67 × 752.86 master,
   centered over the 1366.37 Lab body below the black header. 1 SVG unit = 1 CSS px. */
.add-product-overlay {
  position: absolute;
  left: 93.35px;
  top: 112.4px;
  width: 1179.67px;
  height: 752.86px;
  z-index: 30;
  font-family: 'Barlow', sans-serif;
  color: #010101;
}
.add-product-overlay[hidden] { display: none; }
.add-product-overlay button { font-family: inherit; }
/* st3 (8.53 stroke) + st2 (white fill, .95 stroke), both on the same rounded rect */
.apo-frame {
  position: absolute; left: 4.26px; top: 4.26px; width: 1171.14px; height: 744.33px;
  box-sizing: border-box; border-radius: 11.28px; background: #fff;
  box-shadow: 0 0 0 4.265px #231f20;
}
.apo-close {
  position: absolute; left: 1144px; top: 12px; width: 22px; height: 22px; padding: 0;
  border: 0; background: transparent; cursor: pointer; z-index: 6;
}
.apo-close svg { width: 22px; height: 22px; display: block; }
/* top line: st4 (Barlow Bold 19) links, st7 (Barlow 16.44) filters; baselines y=40.71 / 40.53 */
.apo-link, .apo-filter {
  position: absolute; padding: 0; border: 0; background: transparent; color: #231f20;
  white-space: nowrap; cursor: pointer; z-index: 5; line-height: 1;
}
.apo-link { top: 27.82px; font-size: 17.1px; font-weight: 700; }
.apo-filter { top: 29.85px; font-size: 14.79px; font-weight: 400; }
.apo-link[data-active="true"], .apo-filter[data-active="true"] { text-decoration: underline; text-underline-offset: 3px; }
.apo-filter .apo-badge { font-size: 11px; font-weight: 700; margin-left: 2px; }
.apo-pop {
  position: absolute; top: 48px; z-index: 7; width: 240px; max-height: 360px; overflow: auto;
  background: #fff; border: 1px solid #231f20; border-radius: 6px; padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 14px;
}
.apo-pop[hidden] { display: none; }
.apo-pop label { display: flex; align-items: center; gap: 6px; padding: 3px 2px; cursor: pointer; }
.apo-pop label[data-disabled="true"] { opacity: .4; cursor: default; }
.apo-pop .apo-count { margin-left: auto; color: #797979; font-size: 12px; }
.apo-pop .apo-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #bbb; }
.apo-pop .apo-clear { margin-top: 6px; border: 0; background: none; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 2px; }
.apo-pop p { margin: 4px 2px; color: #797979; }
/* product field area: the SVG's 8 × 3 grid, scrolling for more results */
.apo-scroll {
  position: absolute; left: 4.26px; top: 56px; width: 1171.14px; height: 620px;
  overflow-y: auto; overflow-x: hidden; z-index: 2;
}
.apo-cards { position: relative; }
.apo-card {
  position: absolute; width: 119.82px; height: 186px; padding: 0; border: 0;
  background: transparent; color: #010101; text-align: left; cursor: pointer;
}
.apo-card:disabled { cursor: default; }
.apo-photo {
  position: absolute; left: 0; top: 0; width: 119.82px; height: 152.54px; box-sizing: border-box;
  overflow: hidden; border: .5px solid #bbb; border-radius: 4px; background: #f3f3f3;
}
.apo-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.apo-card[aria-selected="true"] .apo-photo { box-shadow: 0 0 0 2px #231f20; }
.apo-brand, .apo-name {
  position: absolute; left: -.92px; width: 121px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1;
}
.apo-brand { top: 160.6px; color: #010101; font-size: 9px; font-weight: 400; }
.apo-name { top: 171.4px; color: #010101; font-size: 9px; font-weight: 500; }
.apo-status { position: absolute; left: 46.62px; top: 4px; font-size: 13px; color: #797979; }
/* directory panels (Brands / All Products) inside the field */
.apo-dir { position: absolute; left: 46.62px; top: 0; width: 1080px; padding-bottom: 20px; }
.apo-dir h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; text-transform: uppercase; color: #231f20; }
.apo-dir-box { display: grid; border: 1px solid #231f20; padding: 16px 12px; gap: 0 22px; }
.apo-dir-box.products { grid-template-columns: repeat(5, 1fr); gap: 0 28px; }
.apo-dir-box.brands { grid-template-columns: repeat(7, 1fr); }
.apo-dir-col > div { margin-bottom: 18px; }
.apo-dir-head {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 0 0 4px; border: 0;
  border-bottom: 1px solid #231f20; background: none; text-align: left; cursor: pointer;
  font-size: 13px; font-weight: 700; text-transform: uppercase; color: #2c4f9e;
}
.apo-dir ul { list-style: none; margin: 8px 0 0; padding: 0; }
.apo-dir li button {
  border: 0; background: none; padding: 1px 0; text-align: left; cursor: pointer;
  font-size: 15px; line-height: 20px; color: #231f20;
}
.apo-dir li button.em { font-weight: 600; }
.apo-dir li button:hover, .apo-dir-head:hover { text-decoration: underline; }
/* st10 / st6: Add Product button, 154.84 × 32.1 at (512.26, 685.2) */
.apo-action {
  position: absolute; left: 512.26px; top: 685.2px; width: 154.84px; height: 32.1px;
  box-sizing: border-box; padding: 0; border: .82px solid #221f1f; border-radius: 0;
  background: rgba(228,224,218,.25); color: #221f1f; font-size: 22.37px; font-weight: 600;
  line-height: 1; cursor: pointer; z-index: 3;
}
.apo-action:disabled { cursor: default; }
/* step 2: color(s) + sizes view inside the product field */
.apd { position: relative; min-height: 600px; padding: 0 0 24px; }
.apd-back { position: absolute; left: 46.62px; top: 0; border: 0; background: none; padding: 0; font-size: 16px; text-decoration: underline; cursor: pointer; color: #231f20; }
.apd-photo { position: absolute; left: 46.62px; top: 28px; width: 300px; height: 360px; border: .5px solid #bbb; border-radius: 4px; overflow: hidden; background: #f3f3f3; }
.apd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apd-brand { position: absolute; left: 46.62px; top: 400px; font-size: 13px; color: #797979; }
.apd-name { position: absolute; left: 46.62px; top: 420px; font-size: 18px; font-weight: 500; width: 300px; }
.apd-right { margin-left: 370px; width: 760px; }
.apd-right h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #231f20; }
.apd-sel { margin: 0 0 10px; font-size: 15px; }
/* color boxes at 75% of the earlier size (width and height) */
.apd-grid { display: grid; grid-template-columns: repeat(8, 69px); gap: 3px; }
.apd-sw { height: 34.5px; border: 1px solid rgba(0,0,0,.12); padding: 3px 4px; text-align: left; font-size: 8.6px; font-weight: 600; line-height: 1.1; cursor: pointer; overflow: hidden; }
.apd-sw.sel { outline: 2px solid #231f20; outline-offset: -2px; }
.apd-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.apd-row { display: flex; align-items: flex-end; gap: 8px; }
.apd-rlabel { width: 90px; text-align: right; font-size: 14px; line-height: 1.1; }
.apd-rsw { width: 45px; height: 36px; flex: none; border: 1px solid #231f20; border-radius: 2px; font-size: 7px; font-weight: 600; padding: 2px 3px; box-sizing: border-box; overflow: hidden; }
/* delete_icon.svg: trash 14.6 × 18.2, 11.45 right of the size box, vertically centered on it */
.apd-del { flex: none; width: 14.6px; height: 18.2px; margin: 0 0 7px 3.45px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.apd-del img { width: 100%; height: 100%; display: block; }
.apd-sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.apd-sizes label { display: flex; flex-direction: column; align-items: center; font-size: 13px; font-weight: 600; }
.apd-sizes input { width: 52px; height: 32px; border: 1px solid #231f20; border-radius: 4px; text-align: center; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.apd-total { margin: 4px 0 0; font-weight: 700; font-size: 15px; }

/* v2 search box: st16 fill rect 51.36,21.34 193.56x25.49 rx10.46 + st9 .5 stroke; st0 Barlow Medium 11.8 placeholder at 59.01/37.5 */
.apo-search { position: absolute; left: 51.36px; top: 21.34px; width: 193.56px; height: 25.49px; z-index: 8; }
.apo-search input { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; margin: 0;
  padding: 0 22px 0 7.65px; border: .5px solid #231f20; border-radius: 10.46px; background: #fdf9f8; outline: none;
  font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 11.8px; color: #010101; -webkit-appearance: none; appearance: none; }
.apo-search input::placeholder { color: #010101; opacity: 1; }
.apo-search input::-webkit-search-cancel-button { display: none; }
.apo-mag { position: absolute; left: -51.36px; top: -21.34px; width: 1179.67px; height: 752.86px; pointer-events: none; overflow: visible; }
.apo-suggest { position: absolute; left: 0; top: 29px; width: 320px; max-height: 380px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid #231f20; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.apo-suggest[hidden] { display: none; }
.apo-suggest li { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.apo-suggest li.hl, .apo-suggest li:hover { background: #EDDAD3; }
.apo-suggest li b { font-weight: 700; white-space: nowrap; }
.apo-suggest li span { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== v21 Add Product windows (ADD_PRODUCT_PAGE_OVERLAY_1.svg 1445.73 × 900.2 — list;
   ADD_PRODUCT_PAGE_OVERLAY_2.svg 1445.07 × 788.82 — product colors + sizes), centered on the 1512.81 × 913.49 Lab. 1 unit = 1 CSS px. ===== */
.add-product-overlay.apo21 { z-index: 200; box-shadow: 0 0 0 3000px rgba(19,17,16,.6); left: 33.54px; top: 6.65px; width: 1445.73px; height: 900.2px; color: #231f20; }
.add-product-overlay.apo21[data-view="detail"] { top: 62.34px; height: 788.82px; }
.apo21 .apo-frame { left: 2.6px; top: 2.6px; width: calc(100% - 5.2px); height: calc(100% - 5.2px); border-radius: 14px; box-shadow: 0 0 0 5.16px #231f20; }
.apo21 .apo-close { left: 17px; top: 13px; width: 22px; height: 18px; }
.apo21 .apo-close svg { width: 22px; height: 18px; }
.apo21 .apo-cats { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; }
.apo21 .apo-cat { position: absolute; top: 42.4px; padding: 0 0 4px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 16.21px; line-height: 1.2; color: #231f20; }
.apo21 .apo-cat[data-active="true"] { box-shadow: inset 0 -1.2px 0 #ed1c24; }
.apo21 .apo-cat:hover { box-shadow: inset 0 -1.2px 0 #ed1c24; }
.apo21 .apo-search { position: absolute; left: 195.3px; top: 76.3px; width: 226px; height: 28.4px; box-sizing: border-box; border: .9px solid #231f20; border-radius: 12px; background: #fdf9f8; z-index: 6; }
.apo21 .apo-search input { position: absolute; left: 8px; top: 4px; width: 190px; height: 19px; border: 0; padding: 0; background: transparent; outline: none;
  font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 13.79px; color: #010101; }
.apo21 .apo-search input::placeholder { color: #010101; }
.apo21 .apo-search .apo-mag { position: absolute; left: 203px; top: 5px; width: 17px; height: 17px; }
.apo21 .apo-suggest { top: 30px; left: 0; width: 360px; }
.apo21 .apo-filter { top: 81.9px; font-size: 17px; font-weight: 400; line-height: 1.2; color: #231f20; }
.apo21 .apo-filter .apo-chevron { position: absolute; left: var(--chevron-x); top: 0; font-family: 'Myriad Pro', sans-serif; font-size: 17px; font-weight: 400; }
.apo21 .apo-filter .apo-badge { position: absolute; top: 20px; left: 0; margin: 0; }
.apo21 .apo-pop { top: 110px; max-height: calc(100% - 118px); }
.apo21 .apo-scroll { left: 8px; top: 112px; width: calc(100% - 22px); height: 698px; }
.apo21[data-view="detail"] .apo-scroll { top: 112px; height: 590px; }
.apo21 .apo-card { width: 141px; height: 214px; }
.apo21 .apo-photo { width: 141px; height: 178.4px; border: .58px solid #bbb; border-radius: 4px; background: #f3f3f3; }
.apo21 .apo-photo img { object-fit: contain; background: #fff; }
/* v21.5 (#7): all text under the Overlay 1 product cards is the same — black, Barlow Medium, 12px */
.apo21 .apo-brand { left: 0; top: 187px; width: 141px; font-size: 12px; font-weight: 500; color: #231f20; }
.apo21 .apo-name { left: 0; top: 202px; width: 141px; font-size: 11px; font-weight: 500; color: #231f20; }
.apo21 .apo-status { left: 68.3px; top: 8px; font-size: 15px; }
.apo21 .apo-dir { left: 68.3px; width: 1310px; }
.apo21 .apo-action { left: 628.9px; top: 826.2px; width: 188.1px; height: 44.6px; box-sizing: border-box; padding: 0 0 3px; border: 0; border-radius: 3px;
  background: #305aa9; color: #fbf7f5; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 28px; line-height: 1; cursor: pointer; z-index: 6; }
.apo21[data-view="detail"] .apo-action { top: 717.6px; }
.apo21 .apo-action:hover:not(:disabled) { background: #2a4f95; }
.apo21 .apo-action:disabled { opacity: .55; cursor: default; }

/* window 2: product info, photo box, manufacturer color grid, one size row per picked color */
.apd21 { position: relative; width: 100%; font-family: 'Barlow', sans-serif; color: #231f20; }
.apd21 > * { position: absolute; margin: 0; white-space: nowrap; line-height: 1.2; }
.apd21 .d-brand { left: 40.6px; top: 25.5px; font-weight: 700; font-size: 11.23px; text-decoration: underline; text-underline-offset: 2px; }
.apd21 .d-title { left: 40.6px; top: 52px; font-weight: 600; font-size: 17px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.apd21 .d-title b { font-weight: 700; }
.apd21 .d-sizes { left: 40.6px; top: 81px; font-size: 13.48px; font-weight: 500; }
.apd21 .d-sizes b { font-weight: 600; }
.apd21 .d-desc { left: 40.6px; top: 107.7px; height: 20.6px; padding: 0; border: 0; background: transparent;
  font-family: inherit; font-size: 13.48px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; color: #231f20; }
.apd21 .d-count { left: 40.6px; top: 136.5px; font-size: 12.5px; font-weight: 500; }
.apd21 .d-count b { font-weight: 700; }
.apd21 .d-inv { left: 40.6px; top: 157px; font-size: 10.5px; }
/* v21.5 (#1): clean supplier descriptions — real lists and paragraphs; the box stays clear of the product photo and its color name */
.apd21 .d-desc-text { left: 40.6px; top: 176px; width: 275px; overflow: visible; white-space: normal; font-size: 12.5px; line-height: 1.35;
  background: #fff; border: 0; padding: 0 0 8px; z-index: 3; box-sizing: border-box; }
.apd21 .d-desc-text ul, .apd21 .d-desc-text ol { margin: 4px 0 4px 18px; padding: 0 0 0 4px; }
.apd21 .d-desc-text ul { list-style: disc; }
.apd21 .d-desc-text ol { list-style: decimal; }
.apd21 .d-desc-text li { margin: 2px 0; }
.apd21 .d-desc-text p { margin: 5px 0; }
.apd21 .d-desc-text b, .apd21 .d-desc-text strong { font-weight: 700; }
.apd21 .d-photo { left: 331.6px; top: 35.3px; width: 119.8px; height: 129.7px; box-sizing: border-box; border: .9px solid #231f20; background: #fff; overflow: hidden; }
.apd21 .d-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.apd21 .d-photo-name { left: 331.6px; width: 119.8px; top: 166.5px; text-align: center; font-weight: 700; font-size: 11.98px; overflow: hidden; text-overflow: ellipsis; }
.apd21 .d-grid { left: 488px; top: 37.3px; width: 920px; display: grid; grid-template-columns: repeat(10, 89px); grid-auto-rows: 44px; gap: 3px; white-space: normal; }
.apd21 .d-sw { position: relative; width: 89px; height: 44px; padding: 4px 5px; box-sizing: border-box; border: 1px solid rgba(0,0,0,.12); outline: none; border-radius: 0; cursor: pointer; text-align: left; vertical-align: top; overflow: hidden; font-family: inherit; }
.apd21 .d-sw span { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.1; overflow: hidden; max-height: 35px; word-break: normal; overflow-wrap: break-word; }
.apd21 .d-sw.sel::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: #ed1c24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.apd21 .d-sw:hover { box-shadow: inset 0 0 0 2px #231f20; }
.apd21 .d-rows { left: 0; width: 100%; height: 0; }
.apd21 .d-row { position: absolute; left: 0; width: 100%; height: 34px; }
.apd21 .d-row > * { position: absolute; }
.apd21 .d-rlabel { left: 60px; width: 52px; top: 1px; text-align: center; font-size: 13.48px; line-height: 1.1; }
.apd21 .d-rsw { left: 122px; top: 1.5px; width: 51px; height: 33px; padding: 2px 4px; box-sizing: border-box; font-size: 11.23px; line-height: 1.1; overflow: hidden; border: .5px solid #231f20; }
.apd21 .d-row label { top: 0; width: 52px; margin-left: 75px; }
.apd21 .d-row label span { position: absolute; left: 0; width: 52px; top: -22px; text-align: center; font-weight: 600; font-size: 11.98px; }
.apd21 .d-row input { width: 51.9px; height: 33.8px; box-sizing: border-box; border: .5px solid #231f20; border-radius: 3px; background: #fff; text-align: center;
  font-family: inherit; font-size: 14px; -moz-appearance: textfield; }
.apd21 .d-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.apd21 .d-row .apd-del { top: 6px; width: 22px; height: 22px; margin-left: 75px; padding: 0; border: 0; background: none; cursor: pointer; }
.apd21 .d-row .apd-del img { width: 18px; height: 20px; }
.apd21 .apd-total { position: absolute; left: 185px; font-size: 13px; font-weight: 600; color: #231f20; }

/* REVISED_SEARCH_BAR.svg (226.38 x 29.8) used as-is for every Lab search bar; the × (x 189-204) clears the field */
.pq-sbar, .apo21 .pq-sbar, body.lab-v21 .hdr .pq-sbar, .hdr .pq-sbar { width: 226.38px !important; height: 29.8px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.pq-sbar .sb-art { position: absolute; left: 0; top: 0; width: 226.38px; height: 29.8px; pointer-events: none; z-index: 0; transform: none; }
.pq-sbar input, .apo21 .pq-sbar input, body.lab-v21 .hdr .pq-sbar input, .hdr .pq-sbar input { position: absolute !important; left: 7.44px !important; top: 6px !important; width: 181px !important; height: 18px !important; padding: 0 !important; margin: 0; border: 0 !important; background: transparent !important; outline: none;
  font-family: 'Barlow', sans-serif !important; font-weight: 500 !important; font-size: 12.8px !important; line-height: 18px; color: #020202; z-index: 1; }
.pq-sbar input::placeholder { color: #020202 !important; opacity: 1; font-size: 12.8px !important; }
.pq-sbar input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.pq-sbar .sb-x { position: absolute; left: 187px; top: 2px; width: 16px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; }

/* aligned rows: Brand/Style # start at the color grid's left edge (488) so the description never covers them */
.apd21 .d-rows { left: 428px; width: calc(100% - 428px); }
.apd21 .d-rlabel { text-align: left; width: 60px; }
/* REVISED_LEFT_SIDE_SECTIONS.svg: no Alt swatches, edit panel per SVG */
body.lab-v21 .inks-panel .alts { display: none !important; }
body.lab-v21 .edit-panel .reduce { top: 37.2px; }
body.lab-v21 .edit-panel .m-lbl { top: 71.9px; }
body.lab-v21 .edit-panel .m-into { top: 72px; }
body.lab-v21 .edit-panel select { top: 66.1px; }
body.lab-v21 .edit-panel .m-btn { top: 104.05px; }
body.lab-v21 .edit-panel .restore-row { top: 136px; }
.apo21 .apo-search.pq-sbar { left: 150.18px !important; }

/* selected-color rows: brand/style wrap inside their own column so they never run under the color box */
.apd21 .d-rlabel { left: 0; width: 112px; top: -2px; font-size: 12px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.apd21 .d-rsw { font-size: 10px; overflow-wrap: anywhere; }