/* THE LIGHTBOX: START PAGE, PREVIEW, CHECK AND ORDER AND THE PRINT LENS (5 Nov 2026; js/designs/x-lb-finish.js; docs/DESIGNER-LIGHTBOX-PLAN-2026-11-05.md).
   Linked after css/designer-lightbox.css. Scope every rule to html.dzlb (the Lightbox) and use its tokens (--lb-ink, --lb-sel, --lb-sel-line,
   --lb-lime, --lb-line, --lb-focus...; css/designer-lightbox.css defines them). Corners are tokens, never pills; nothing under 12 px.
   Blocks: 1 the start page, 2 Preview, 3 Check and Order (desktop, then phones), 4 the Print Lens. The proof watermark of design.html's
   pictures (css/designer.css "DESIGNS STAY WITH US") is kept on every picture here, and the Print Lens's print side carries it too. */

/* ===================== 1. THE START PAGE (x-easy.js draws it; the bright look) ===================== */
html.dzlb body.dz-app:has(#dzPick:not([hidden])){background:#fff}
html.dzlb #dzPick{color:var(--lb-ink)}
html.dzlb #dzPick .dze-hero{background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line);border-radius:var(--radius)}
html.dzlb #dzPick .dze-hero::before{background:radial-gradient(closest-side,rgba(140,165,39,.16),transparent 72%)}
html.dzlb #dzPick .dz-intro .eyebrow{color:var(--lb-primary);font-size:12px;font-weight:500;letter-spacing:.08em}
html.dzlb #dzPick .dz-intro h1{color:var(--lb-ink);font-weight:500}
html.dzlb #dzPick .dz-intro>p{color:var(--lb-ink-2)}
html.dzlb #dzPick .dze-hero-find{background:#fff;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--lb-line-field);color:var(--lb-ink-3)}
html.dzlb #dzPick .dze-hero-find:focus-within{box-shadow:inset 0 0 0 1px var(--lb-primary),var(--lb-focus)}
html.dzlb #dzPick .dze-hero-find svg{color:var(--lb-ink)}
html.dzlb #dzPick .dze-hero-find input::placeholder{color:var(--lb-ink-3)}
html.dzlb #dzPick .dz-bc-ic{background:var(--lb-sel);color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
html.dzlb #dzPick .dz-bc .btn{background:#fff;color:var(--lb-ink);border:1px solid var(--lb-line-firm);box-shadow:none;border-radius:var(--radius-sm)}
html.dzlb #dzPick .dz-bc .btn:hover{background:var(--lb-raised);border-color:var(--lb-line-strong)}
html.dzlb #dzPick .dze-ha{box-shadow:var(--lb-sh-paper),0 0 0 4px #fff}
/* the families: quiet tabs, the chosen one on the soft lime tint with a deep lime edge */
html.dzlb #dzPick .dz-famnav{background:var(--lb-soft);box-shadow:none;border-radius:var(--radius);padding:3px}
html.dzlb #dzPick .dz-famnav button{color:var(--lb-ink-2);min-height:36px}
html.dzlb #dzPick .dz-famnav button span{color:var(--lb-sub);font-size:var(--lb-sub-size)}
html.dzlb #dzPick .dz-famnav button:hover{color:var(--lb-ink);background:transparent}
html.dzlb #dzPick .dz-famnav button{height:36px;min-height:36px;border-radius:var(--radius)}
/* the chosen family raised white like every switch in the designer, no lime, no outline, the same weight and size as the others so the row never
   shifts (5 Nov 2026, Junaid: the Easy Studio's start page "was matching the designer... really nice, no tab shifting") */
html.dzlb #dzPick .dz-famnav button[aria-selected="true"]{background:#fff;color:var(--lb-ink);box-shadow:0 1px 2px rgba(42,42,51,.10),0 0 0 .5px rgba(42,42,51,.08)}
html.dzlb #dzPick .dz-famnav button:focus-visible,html.dzlb #dzPick .dz-start:focus-visible{outline:0;box-shadow:var(--lb-focus)}
html.dzlb #dzPick .dz-sec-h{border-bottom-color:var(--lb-line)}
html.dzlb #dzPick .dz-sec-h h2{font-size:18px;font-weight:500;color:var(--lb-ink)}
html.dzlb #dzPick .dz-sec-h span{color:var(--lb-ink-3);font-size:12.5px}
/* the product cards: the picture on the workspace grey in a hairline frame, the words under it */
html.dzlb #dzPick .dz-prod-im{background:var(--lb-ws);box-shadow:inset 0 0 0 1px var(--lb-line);border-radius:var(--radius-sm)}
html.dzlb #dzPick .dz-prod:hover .dz-prod-im{box-shadow:inset 0 0 0 1px var(--lb-line-firm),0 10px 24px -10px rgba(42,42,51,.28)}
html.dzlb #dzPick .dz-prod:focus-visible .dz-prod-im{box-shadow:var(--lb-focus)}
html.dzlb #dzPick .dz-prod-t b{font-weight:500;color:var(--lb-ink)}
html.dzlb #dzPick .dz-prod-t small{color:var(--lb-ink-3)}
html.dzlb #dzPick .dz-prod-n{color:var(--lb-primary);font-weight:500}
html.dzlb #dzPick .dz-prod-soon{color:var(--lb-ink-3);font-weight:500}
/* Other Ways to Start: outlined doors with ink icon tiles */
html.dzlb #dzPick .dze-start .dz-start,html.dzlb #dzPick.dze-start .dz-start{background:#fff;color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-line-firm);border-radius:var(--radius-sm)}
html.dzlb #dzPick.dze-start .dz-start:hover{background:var(--lb-raised);box-shadow:inset 0 0 0 1px var(--lb-line-strong)}
html.dzlb #dzPick.dze-start .dz-start-ic{background:var(--lb-raised);color:var(--lb-ink)}
html.dzlb #dzPick .dz-mine-card,html.dzlb #dzPick .dz-mine a{border-radius:var(--radius-sm)}

/* ===================== 2. PREVIEW (#dzQL) ===================== */
html.dzlb .dz-ql.lbf-ql{grid-template-columns:minmax(0,1fr);background:var(--lb-ws);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--lb-ink)}
html.dzlb .lbf-ql .dz-ql-top.lbf-qlh{min-width:0;display:flex;align-items:center;gap:16px;min-height:64px;padding:8px 16px 8px 24px;background:#fff;border-bottom:1px solid var(--lb-line)}
html.dzlb .lbf-ql .lbf-qlh>div:first-child{min-width:0}
html.dzlb .lbf-ql .lbf-qlh b{display:block;font-size:16px;font-weight:500;color:var(--lb-ink)}
html.dzlb .lbf-ql .lbf-qlh span{font-size:13px;color:var(--lb-ink-3)}
html.dzlb .lbf-ql .lbf-qlc{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
html.dzlb .lbf-ql .dz-ql-modes{margin:0}
html.dzlb .lbf-ql .dz-seg{background:var(--lb-raised);box-shadow:inset 0 0 0 1px var(--lb-line);border-radius:var(--radius);padding:3px;gap:2px}
html.dzlb .lbf-ql .dz-seg>button{height:34px;padding:0 14px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--lb-ink-2);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
html.dzlb .lbf-ql .dz-seg>button:hover{color:var(--lb-ink);background:#fff}
html.dzlb .lbf-ql .dz-seg>button[aria-selected="true"]{background:var(--lb-sel);color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
html.dzlb .lbf-ql button:focus-visible{outline:0;box-shadow:var(--lb-focus)}
html.dzlb .lbf-ql .dz-ql-x.lbf-qlx{width:auto;height:40px;padding:0 12px;gap:6px;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;font-size:14px;font-weight:500;display:inline-flex;align-items:center}
html.dzlb .lbf-ql .dz-ql-x.lbf-qlx span{font-size:14px;color:var(--lb-ink)}
html.dzlb .lbf-ql .dz-ql-x.lbf-qlx:hover{background:var(--lb-raised)}
html.dzlb .lbf-ql .dz-ql-load{color:var(--lb-ink-3)}
html.dzlb .lbf-ql .dz-ql-stage{padding:28px 32px 12px}
html.dzlb .lbf-ql .dz-ql-face{box-shadow:var(--lb-sh-paper);background:#fff}
html.dzlb .lbf-ql .dz-ql-card.round .dz-ql-face{background:transparent;box-shadow:none;filter:drop-shadow(0 6px 14px rgba(42,42,51,.18))}
/* both sides side by side (desktop, two-sided designs) */
html.dzlb .lbf-ql .lbf-both{display:none}
html.dzlb .lbf-ql.lbf-qboth .lbf-both{display:flex;align-items:center;justify-content:center;gap:56px;width:100%;height:100%;min-height:0}
html.dzlb .lbf-ql.lbf-qboth .lbf-both.stack{flex-direction:column;gap:28px}
html.dzlb .lbf-ql.lbf-qboth .dz-ql-stage>.dz-ql-card:not(.lbf-one){display:none}
html.dzlb .lbf-ql.lbf-qboth [data-qlflip]{display:none}
html.dzlb .lbf-ql .lbf-bf{margin:0;display:grid;justify-items:center;gap:10px}
html.dzlb .lbf-ql .lbf-bf figcaption{font-size:13px;font-weight:500;color:var(--lb-ink-2)}
html.dzlb .lbf-ql .dz-ql-card.lbf-one{cursor:default}
/* the foot: the honest note, Flip It Over and Check and Order */
html.dzlb .lbf-ql .dz-ql-bar{padding:4px 24px 20px;gap:12px}
html.dzlb .lbf-ql .lbf-qln{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 4px;font-size:13px;color:var(--lb-ink-2)}
html.dzlb .lbf-ql .lbf-qln svg{color:var(--lb-ink-3);flex:none}
html.dzlb .lbf-ql .dz-btn2.dark{background:#fff;color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-line-firm);height:40px;font-size:13px;border-radius:var(--radius-sm)}
html.dzlb .lbf-ql .dz-btn2.dark svg{color:var(--lb-ink)}
html.dzlb .lbf-ql .dz-btn2.dark:hover{background:var(--lb-raised)}
html.dzlb .lbf-ql .btn.lbf-cta{height:40px;padding:0 18px;border:0;border-radius:var(--radius);background:var(--lb-lime);color:var(--on-primary);font-size:14px;font-weight:500;box-shadow:none}
html.dzlb .lbf-ql .btn.lbf-cta svg{color:var(--lb-ink)}
html.dzlb .lbf-ql .btn.lbf-cta:hover{background:var(--lb-lime-hover);color:var(--on-primary)}
/* the plug-in views were written for a dark room: their words on the pale workspace */
html.dzlb .lbf-ql .dzx-e-cutpv p,html.dzlb .lbf-ql .dzx-f-pvhint,html.dzlb .lbf-ql .dzx-f-pvsum,html.dzlb .lbf-ql .dzx-spot-pvnote,html.dzlb .lbf-ql .dzx-gar-pvnote,html.dzlb .lbf-ql .dzx-f-rlname,html.dzlb .lbf-ql .dzx-f-rlnote,html.dzlb .lbf-ql .dzx-f-fsl,html.dzlb .lbf-ql .dzx-f-fcap{color:var(--lb-ink-2)}
html.dzlb .lbf-ql .dzx-f-rlnote,html.dzlb .lbf-ql .dzx-f-fsl{font-size:12px}
html.dzlb .lbf-ql .dzx-f-fname{color:var(--lb-ink)}
html.dzlb .lbf-ql .dzx-f-fsl input{accent-color:var(--lb-primary)}
html.dzlb .lbf-ql .dzx-e-cutpv img{filter:drop-shadow(0 6px 14px rgba(42,42,51,.22))}
html.dzlb .lbf-ql.dz-ql-xview .lbf-qls,html.dzlb .lbf-ql.dz-ql-xview [data-qlflip]{display:none}
@media (max-width:860px){
  html.dzlb .lbf-ql .dz-ql-top.lbf-qlh{flex-wrap:wrap;padding:8px 8px 8px 16px;gap:8px 12px}
  html.dzlb .lbf-ql .lbf-qlc{order:3;margin:0;width:100%;overflow-x:auto;padding:0 0 2px}
  html.dzlb .lbf-ql .lbf-qlx{margin-left:auto}
  html.dzlb .lbf-ql .dz-ql-x.lbf-qlx span{display:none}
  html.dzlb .lbf-ql .dz-ql-x.lbf-qlx{width:44px;height:44px;padding:0;justify-content:center}
  html.dzlb .lbf-ql .dz-seg>button{min-height:40px}
  html.dzlb .lbf-ql .dz-ql-stage{padding:16px}
  html.dzlb .lbf-ql .dz-ql-bar .btn,html.dzlb .lbf-ql .dz-ql-bar .dz-btn2{min-height:44px}
}

/* ===================== 3. CHECK AND ORDER (#dzFinishModal.lbf-rvm) ===================== */
html.dzlb #dzFinishModal.lbf-rvm{padding:0;place-items:stretch;background:var(--lb-ws);-webkit-backdrop-filter:none;backdrop-filter:none;z-index:145}
html.dzlb #dzFinishModal.lbf-rvm>.dz-modal-box{width:100%;height:100%;min-width:0;min-height:0;max-height:none;border-radius:0;box-shadow:none;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;overflow:clip;background:var(--lb-ws);color:var(--lb-ink)}
html.dzlb #dzFinishModal.lbf-rvm #dzFinishClose{display:none}
html.dzlb #dzFinishModal.lbf-rvm #dzFinishBody{min-height:0;height:100%}
html.dzlb #dzFinishModal.lbf-rvm .dz-fin-load{height:100%;display:grid;place-items:center;color:var(--lb-ink-3);font-size:14px}
html.dzlb #dzFinishModal:not(.lbf-rvm) .lbf-rvh{display:none}
html.dzlb .lbf-rvh{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;min-height:64px;padding:8px 24px 8px 16px;background:#fff;border-bottom:1px solid var(--lb-line)}
html.dzlb .lbf-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
html.dzlb .lbf-back:hover{background:var(--lb-raised)}
html.dzlb .lbf-rvh button:focus-visible,html.dzlb .lbf-rv button:focus-visible,html.dzlb .lbf-rv summary:focus-visible{outline:0;box-shadow:var(--lb-focus)}
html.dzlb .lbf-rvt{text-align:center;min-width:0}
html.dzlb .lbf-rvt h2{margin:0;font-size:17px;font-weight:500;letter-spacing:-.005em;color:var(--lb-ink)}
html.dzlb .lbf-rvt span{display:block;font-size:13px;color:var(--lb-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.dzlb .lbf-steps{justify-self:end;display:flex;gap:18px;margin:0;padding:0;list-style:none}
html.dzlb .lbf-steps li{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--lb-ink-3)}
html.dzlb .lbf-steps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:var(--lb-sub-size);font-weight:500;box-shadow:inset 0 0 0 1px var(--lb-line-firm);color:var(--lb-sub)}
html.dzlb .lbf-steps li.on{color:var(--lb-ink);font-weight:500}
html.dzlb .lbf-steps li.on i{background:var(--lb-ink);color:#fff;box-shadow:none}
html.dzlb .lbf-steps li.done{color:var(--lb-ink-2)}
html.dzlb .lbf-steps li.done i{background:var(--lb-sel);color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
/* the body: the sides on the workspace, the aside on the right */
html.dzlb .dz-fin.lbf-rv{display:grid;grid-template-columns:minmax(0,1fr) 400px;height:100%;min-height:0}
html.dzlb .lbf-rv .dz-fin-pv.lbf-pv{position:relative;display:grid;grid-template-columns:repeat(var(--lbf-cols,2),max-content);justify-content:center;align-content:center;gap:28px 36px;padding:32px 40px 20px;background:var(--lb-ws);overflow:auto;min-height:0}
html.dzlb .lbf-rv .dz-fin-pv figure{width:max-content;justify-self:center;margin:0;display:grid;justify-items:center;gap:8px;position:relative}
html.dzlb .lbf-rv .dz-fin-pv img{display:block;max-width:none;max-height:none;background:#fff;box-shadow:var(--lb-sh-paper)}
html.dzlb .lbf-rv .dz-fin-pv figcaption{display:flex;align-items:center;gap:10px;height:20px;line-height:20px;font-size:13px;color:var(--lb-ink-2)}
html.dzlb .lbf-rv .dz-fin-pv figcaption b{font-weight:500;color:var(--lb-ink)}
html.dzlb .lbf-cs{display:inline-flex;align-items:center;gap:6px;color:var(--lb-ink-3);font-weight:500}
html.dzlb .lbf-cs i{width:7px;height:7px;border-radius:50%;background:var(--success)}
html.dzlb .lbf-cs.warn{color:var(--lb-warn)}
html.dzlb .lbf-cs.warn i{background:var(--lb-warn-icon)}
html.dzlb .lbf-pin{position:absolute;z-index:3;width:28px;height:28px;margin:0;padding:0;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:var(--lb-warn);color:#fff;font:500 12px/1 Montserrat,Arial,sans-serif;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(27,39,51,.28)}
html.dzlb .lbf-pin.kept{background:var(--lb-ink-3)}
html.dzlb .lbf-pin:hover{transform:translate(-50%,-50%) scale(1.08)}
html.dzlb .lbf-safe{position:absolute;z-index:3;pointer-events:none;border:1px dashed rgba(42,42,51,.55)}
html.dzlb .lbf-pv.lbf-noguides .lbf-safe{display:none}
html.dzlb .lbf-pvbar{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;min-height:44px;padding:4px 16px;background:#fff;border-radius:var(--radius);box-shadow:var(--lb-sh-float),inset 0 0 0 1px var(--lb-line)}
html.dzlb .lbf-legend{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--lb-ink-2)}
html.dzlb .lbf-legend i{width:22px;height:0;border-top:1px dashed rgba(42,42,51,.7)}
html.dzlb .lbf-pv.lbf-noguides .lbf-legend:not(.lbf-legend-cut){display:none}
/* Show Guides: the house switch (dz-swrow / dz-switch), primary when on */
html.dzlb .lbf-sw{justify-content:flex-start;gap:10px;min-height:36px;font-size:13px;color:var(--lb-ink)}
html.dzlb .lbf-sw input:checked+.dz-switch{background:var(--lb-primary)}
html.dzlb .lbf-sw input:focus-visible+.dz-switch{box-shadow:var(--lb-focus)}
/* the aside: a scrolling body over the pinned foot */
html.dzlb .lbf-rv .dz-fin-r.lbf-aside{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;padding:0;background:#fff;border-left:1px solid var(--lb-line)}
html.dzlb .lbf-rvb{overflow:auto;padding:24px 28px 20px;min-height:0;overscroll-behavior:contain}
html.dzlb .lbf-rvb .lbf-orig{display:none!important}
html.dzlb .lbf-sec+.lbf-sec{margin-top:22px;padding-top:20px;border-top:1px solid var(--lb-line)}
html.dzlb .lbf-sec h3{margin:0 0 6px;font-size:15px;font-weight:500;color:var(--lb-ink)}
html.dzlb .lbf-lead{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--lb-ink-2)}
html.dzlb .lbf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
html.dzlb .lbf-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);font-size:12.5px;font-weight:500;background:var(--lb-raised);color:var(--lb-ink)}
html.dzlb .lbf-chip.warn{background:var(--lb-warn-bg);color:var(--lb-warn)}
html.dzlb .lbf-chip.warn svg{color:var(--lb-warn-icon)}
html.dzlb .lbf-notes{list-style:none;margin:0;padding:0}
html.dzlb .lbf-note{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--lb-line);border-radius:var(--radius-sm)}
html.dzlb .lbf-note.lbf-flash{animation:lbfFlash 1.2s ease}
@keyframes lbfFlash{0%,40%{background:var(--lb-warn-bg)}100%{background:transparent}}
html.dzlb .lbf-nn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lb-warn);color:#fff;font-size:12.5px;font-weight:500}
html.dzlb .lbf-note.kept .lbf-nn{background:var(--lb-ink-3)}
html.dzlb .lbf-note.fixed .lbf-nn{background:var(--lb-sel);color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
html.dzlb .lbf-nb{min-width:0}
html.dzlb .lbf-nb>b{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:500;line-height:1.35;color:var(--lb-ink)}
html.dzlb .lbf-nb>b small{font-size:var(--lb-sub-size);font-weight:500;color:var(--lb-sub)}
html.dzlb .lbf-nb>p{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--lb-ink-2);overflow-wrap:anywhere}
html.dzlb .lbf-nact{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
html.dzlb .lbf-b1,html.dzlb .lbf-b2{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px;border:1px solid var(--lb-line-firm);border-radius:var(--radius-sm);background:#fff;color:var(--lb-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
html.dzlb .lbf-b1{font-weight:500;border-color:var(--lb-line-strong)}
html.dzlb .lbf-b1:hover,html.dzlb .lbf-b2:hover{background:var(--lb-raised)}
html.dzlb .lbf-b1:disabled{opacity:.6;cursor:progress}
html.dzlb .lbf-b1 .dzx-b-swp{width:14px;height:14px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
html.dzlb .lbf-kept{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--lb-raised);font-size:12.5px;font-weight:500;color:var(--lb-ink)}
html.dzlb .lbf-link{min-height:36px;padding:0 8px;border:0;background:none;color:var(--lb-primary);font:inherit;font-size:13px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm)}
html.dzlb .lbf-link:hover{text-decoration:underline}
html.dzlb .lbf-allin{margin:12px 0 0}
html.dzlb .lbf-allok{display:flex;gap:10px;align-items:flex-start;margin:6px 0 0;padding:12px 14px;border-radius:var(--radius-sm);background:var(--lb-raised);font-size:13px;line-height:1.5;color:var(--lb-ink)}
html.dzlb .lbf-allok svg{color:var(--success);flex:none}
html.dzlb .lbf-passed{margin:12px 0 0}
html.dzlb .lbf-passed summary{display:grid;grid-template-columns:18px minmax(0,1fr) 16px;gap:12px;align-items:start;padding:10px 0;cursor:pointer;list-style:none;border-radius:var(--radius-sm)}
html.dzlb .lbf-passed summary::-webkit-details-marker{display:none}
html.dzlb .lbf-passed summary>svg:first-child{color:var(--lb-ink-3);margin-top:1px}
html.dzlb .lbf-passed summary b{display:block;font-size:14px;font-weight:500}
html.dzlb .lbf-passed summary small{display:block;font-size:13px;color:var(--lb-ink-2);line-height:1.5}
html.dzlb .lbf-passed[open] summary>svg:last-child{transform:rotate(180deg)}
html.dzlb .lbf-passed ul{margin:0 0 0 30px;padding:0;list-style:disc;font-size:13px;line-height:1.5;color:var(--lb-ink-2)}
html.dzlb .lbf-spec{margin:6px 0 0;display:grid;gap:6px}
html.dzlb .lbf-spec>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;font-size:13px;line-height:1.45}
html.dzlb .lbf-spec dt{color:var(--lb-ink-3)}
html.dzlb .lbf-spec dd{margin:0;font-weight:500;color:var(--lb-ink)}
html.dzlb .lbf-more .dz-fin-x{margin:12px 0 0}
html.dzlb .lbf-more .dz-fin-x .dz-btn2{background:#fff;color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-line-firm);border-radius:var(--radius-sm)}
html.dzlb .lbf-more .dz-fin-x .dz-btn2:hover{background:var(--lb-raised)}
html.dzlb .lbf-more .dz-fin-acct{margin:12px 0 0}
/* the pinned foot: the approval, the price, Order This Design */
html.dzlb .lbf-rvf{display:grid;gap:10px;padding:16px 28px 20px;border-top:1px solid var(--lb-line);background:#fff}
html.dzlb .lbf-rvf .dz-confirm{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--lb-line-firm);font-size:13px;line-height:1.5;font-weight:500;color:var(--lb-ink);cursor:pointer}
html.dzlb .lbf-rvf .dz-confirm input{width:20px;height:20px;margin:0;accent-color:var(--lb-primary);flex:none;cursor:inherit}
html.dzlb .lbf-rvf .dz-confirm:has(input:checked){background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
html.dzlb .lbf-rvf .dz-confirm:has(input:focus-visible){box-shadow:var(--lb-focus)}
html.dzlb .lbf-rvf .dz-confirm.locked{cursor:not-allowed;background:var(--lb-raised);color:var(--lb-ink-3);box-shadow:inset 0 0 0 1px var(--lb-line)}
html.dzlb .lbf-lock{margin:-2px 0 0;font-size:12.5px;line-height:1.45;color:var(--lb-warn)}
html.dzlb .lbf-lock[hidden]{display:none}
html.dzlb .lbf-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px;color:var(--lb-ink-2)}
html.dzlb .lbf-price b{font-size:17px;font-weight:500;color:var(--lb-ink)}
html.dzlb .lbf-price small{font-size:12.5px;color:var(--lb-ink-3)}
html.dzlb .lbf-price em{flex-basis:100%;font-style:normal;font-size:12.5px;color:var(--lb-ink-3)}
html.dzlb .lbf-price:empty{display:none}
html.dzlb .lbf-rvf .dz-fin-btns{margin:0;display:grid;gap:8px}
html.dzlb .lbf-rvf .btn.lbf-cta{width:100%;height:48px;justify-content:center;gap:8px;border:0;border-radius:var(--radius);background:var(--lb-lime);color:var(--on-primary);font-size:15px;font-weight:500;box-shadow:none}
html.dzlb .lbf-rvf .btn.lbf-cta svg{color:var(--lb-ink)}
html.dzlb .lbf-rvf .btn.lbf-cta:hover:not(:disabled){background:var(--lb-lime-hover)}
html.dzlb .lbf-rvf .btn.lbf-cta:disabled{opacity:1;background:var(--lb-raised-2);color:var(--lb-ink-3);cursor:not-allowed}
html.dzlb .lbf-rvf .btn.lbf-cta:disabled svg{color:var(--lb-ink-3)}
html.dzlb .lbf-rvf .btn.lbf-cta.dz-busy:disabled{background:var(--lb-lime);color:var(--on-primary);cursor:progress}
html.dzlb .lbf-rvf .lbf-edit{display:none}
html.dzlb .lbf-rvf .dz-fin-msg{margin:0;font-size:12.5px;color:var(--lb-ink-2)}
html.dzlb .lbf-rvf .dz-fin-msg:empty{display:none}
@media (max-width:1279px) and (min-width:861px){
  html.dzlb .dz-fin.lbf-rv{grid-template-columns:minmax(0,1fr) 360px}
  html.dzlb .lbf-rv .dz-fin-pv.lbf-pv{padding:24px 28px 16px}
  html.dzlb .lbf-rvb{padding:20px 22px 16px}
  html.dzlb .lbf-rvf{padding:14px 22px 16px}
  html.dzlb .lbf-steps{gap:12px}
}
@media (max-width:1100px) and (min-width:861px){ html.dzlb .lbf-steps span{display:none} html.dzlb .lbf-steps li.on span{display:inline} }
/* phones: one column that scrolls, the sides at the top, the foot pinned */
@media (max-width:860px){
  html.dzlb .lbf-rvh{grid-template-columns:auto minmax(0,1fr);padding:4px 12px 4px 4px;min-height:56px;gap:4px}
  html.dzlb .lbf-back span{display:none}
  html.dzlb .lbf-back{width:44px;justify-content:center;padding:0}
  html.dzlb .lbf-rvt{text-align:left}
  html.dzlb .lbf-steps{display:none}
  html.dzlb #dzFinishModal.lbf-rvm #dzFinishBody{overflow:auto;-webkit-overflow-scrolling:touch}
  html.dzlb .dz-fin.lbf-rv{display:block;height:auto}
  html.dzlb .lbf-rv .dz-fin-pv.lbf-pv{height:min(48vh,440px);padding:16px 16px 10px;gap:14px 16px;grid-auto-flow:row}
  html.dzlb .lbf-pvbar{padding:2px 12px;gap:10px}
  html.dzlb .lbf-pvbar .lbf-legend-cut{display:none}
  /* 344 px (live QA N36): the guide bar wraps inside the panel, never wider than it */
  html.dzlb .lbf-rv .dz-fin-pv.lbf-pv{grid-template-columns:repeat(var(--lbf-cols,2),minmax(0,max-content));overflow-x:hidden}
  html.dzlb .lbf-pvbar{min-width:0;max-width:100%;box-sizing:border-box}
  html.dzlb .lbf-pvbar .lbf-legend{flex:1 1 160px;min-width:0;white-space:normal;line-height:1.35}
  html.dzlb .lbf-rv .dz-fin-r.lbf-aside{display:block;border-left:0;border-top:1px solid var(--lb-line)}
  html.dzlb .lbf-rvb{overflow:visible;padding:18px 16px 16px}
  html.dzlb .lbf-rvf{position:sticky;bottom:0;z-index:2;padding:12px 16px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -8px 18px -12px rgba(27,39,51,.25)}
  html.dzlb .lbf-b1,html.dzlb .lbf-b2,html.dzlb .lbf-link,html.dzlb .lbf-more button,html.dzlb .lbf-more .dz-btn2,html.dzlb .lbf-more .btn{min-height:44px}
  html.dzlb .lbf-appr .dz-confirm{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);box-shadow:inset 0 0 0 1px var(--lb-line-firm);font-size:13px;line-height:1.5;font-weight:500;color:var(--lb-ink);cursor:pointer}
  html.dzlb .lbf-appr .dz-confirm input{width:22px;height:22px;margin:0;accent-color:var(--lb-primary);flex:none}
  html.dzlb .lbf-appr .dz-confirm:has(input:checked){background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
  html.dzlb .lbf-appr .dz-confirm.locked{cursor:not-allowed;background:var(--lb-raised);color:var(--lb-ink-3);box-shadow:inset 0 0 0 1px var(--lb-line)}
  html.dzlb .lbf-appr .lbf-lock{margin:8px 0 0}
  html.dzlb .lbf-rvf .lbf-price em{display:none}
  html.dzlb .lbf-pin{width:30px;height:30px}
  html.dzlb .lbf-pin::before{content:"";position:absolute;inset:-8px}
  html.dzlb .lbf-sw{min-height:44px}
}
@media (pointer:coarse){ html.dzlb .lbf-b1,html.dzlb .lbf-b2,html.dzlb .lbf-link,html.dzlb .lbf-back,html.dzlb .lbf-more button,html.dzlb .lbf-more .dz-btn2{min-height:44px} html.dzlb .lbf-pin::before{content:"";position:absolute;inset:-8px} }
@media (prefers-reduced-motion:reduce){ html.dzlb .lbf-note.lbf-flash{animation:none} }

/* ===================== 4. THE PRINT LENS ===================== */
html.dzlb .dz-bar .lbf-lensbtn{height:40px;padding:0 12px;gap:7px;background:transparent;box-shadow:none;color:var(--lb-ink);font-size:13px;font-weight:500;border-radius:var(--radius)}
html.dzlb .dz-bar .lbf-lensbtn:hover{background:var(--lb-raised)}
html.dzlb .dz-bar .lbf-lensbtn.on{background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line)}
html.dzlb .dz-bar .lbf-lensbtn[hidden]{display:none}
@media (max-width:1279px){ html.dzlb .dz-bar .lbf-lensbtn{width:40px;padding:0;justify-content:center} html.dzlb .dz-bar .lbf-lensbtn span{display:none} }
@media (max-width:860px){ html.dzlb .dz-bar .lbf-lensbtn{display:none} }
/* while the lens is on, the editing chrome on the stage steps back */
html.dzlb .dz3.lbf-lens .lb-ctx,html.dzlb .dz3.lbf-lens #dzFloat,html.dzlb .dz3.lbf-lens #dzHandles,html.dzlb .dz3.lbf-lens .dz-ov-check,html.dzlb .dz3.lbf-lens #dzxbPop,html.dzlb .dz3.lbf-lens #dzEdge,html.dzlb .dz3.lbf-lens .dz-fill{visibility:hidden!important}
html.dzlb .lbf-lensbar{position:absolute;z-index:14;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100% - 24px);height:var(--lb-ctx-h,44px);padding:0 6px 0 14px;background:#fff;border-radius:var(--radius);box-shadow:var(--lb-sh-float),inset 0 0 0 1px var(--lb-line);white-space:nowrap;color:var(--lb-ink)}
html.dzlb .lbf-lensbar[hidden]{display:none}
html.dzlb .dz3.lb-right-open .lbf-lensbar{left:calc((100% - var(--dz-iw) - 12px) / 2)}
html.dzlb .lbf-lb-t{display:inline-flex;align-items:center;gap:8px;font-size:14px}
html.dzlb .lbf-lb-t b{font-weight:500}
html.dzlb .lbf-lb-k{display:inline-flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid var(--lb-line);font-size:13px;color:var(--lb-ink-2)}
html.dzlb .lbf-lb-k svg{color:var(--lb-ink-3)}
html.dzlb .lbf-lb-x{min-height:34px}
@media (max-width:860px){ html.dzlb .lbf-lb-k{display:none} html.dzlb .lbf-lb-x{min-height:40px} }
html.dzlb .dz-ov-lblens{position:absolute;left:0;top:0}
html.dzlb .dz-ov-lblens[hidden]{display:none}
html.dzlb .lbf-lens-pv{position:absolute;background:var(--lb-ws);pointer-events:none}
html.dzlb .lbf-lens-paper{position:absolute;background:#fff;box-shadow:var(--lb-sh-paper);overflow:hidden}
html.dzlb .lbf-lens-paper.round{border-radius:50%;background:transparent}
html.dzlb .lbf-lens-paper img{display:block;width:100%;height:100%;object-fit:fill;-webkit-user-drag:none;user-select:none}
html.dzlb .lbf-lens-paper img:not([src]){visibility:hidden}
/* the proof watermark of every picture of a design (css/designer.css "DESIGNS STAY WITH US") */
html.dzlb .lbf-lens-paper::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160'%3E%3Cg font-family='Montserrat,Arial,sans-serif' font-size='17' font-weight='400' letter-spacing='1' fill='%23838B93' fill-opacity='.13' text-anchor='middle'%3E%3Ctext x='50' y='46' transform='rotate(-35 50 40)'%3EPROOF%3C/text%3E%3Ctext x='150' y='126' transform='rotate(-35 150 120)'%3EPROOF%3C/text%3E%3C/g%3E%3C/svg%3E");background-size:200px 160px}
html.dzlb .lbf-lens-hit{position:absolute;pointer-events:auto;cursor:ew-resize;touch-action:none;background:transparent}
html.dzlb .lbf-lens-div{position:absolute;width:2px;margin-left:-1px;background:var(--lb-ink);pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.7)}
html.dzlb .lbf-lens-knob{position:absolute;width:32px;height:56px;margin:-28px 0 0 -16px;display:grid;place-items:center;background:#fff;color:var(--lb-ink);border-radius:var(--radius);box-shadow:inset 0 0 0 1.5px var(--lb-ink),var(--lb-sh-float);cursor:ew-resize;pointer-events:auto;touch-action:none}
html.dzlb .lbf-lens-knob::before{content:"";position:absolute;top:6px;left:50%;width:12px;height:3px;margin-left:-6px;border-radius:var(--bar-r);background:var(--lb-lime)}
html.dzlb .lbf-lens-knob::after{content:"";position:absolute;inset:-6px -8px}
html.dzlb .lbf-lens-knob:focus-visible{outline:0;box-shadow:inset 0 0 0 1.5px var(--lb-ink),var(--lb-focus)}
html.dzlb .lbf-lens-tag{position:absolute;height:26px;padding:0 10px;display:inline-flex;align-items:center;border-radius:var(--radius-sm);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;background:#fff;color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-line-firm)}
html.dzlb .lbf-lens-tr{background:var(--lb-ink);color:#fff;box-shadow:none}
html.dzlb .lbf-lens-trim{position:absolute;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--radius-sm);background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line);font-size:12px;font-weight:500;color:var(--lb-ink);white-space:nowrap;pointer-events:none}
html.dzlb .lbf-lens-trim i{width:10px;height:10px;border-left:1.5px solid var(--lb-ink);border-bottom:1.5px solid var(--lb-ink);transform:translateY(5px)}
html.dzlb .lbf-lens-tag[hidden],html.dzlb .lbf-lens-trim[hidden],html.dzlb .lbf-lens-note[hidden]{display:none}
html.dzlb .lbf-lens-note{position:absolute;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:6px 12px;border-radius:var(--radius-sm);background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px var(--lb-line);font-size:12.5px;line-height:1.4;color:var(--lb-ink-2);pointer-events:none;text-align:center}
html.dzlb .lbf-lens-note svg{color:var(--lb-ink-3);flex:none}
@media (max-width:860px){ html.dzlb .lbf-lens-knob{width:40px;height:60px;margin:-30px 0 0 -20px} }


/* ---- PREVIEW BAR BUTTONS (9 Nov 2026, Junaid: "look at the button on top"): the chosen tab was a heavy dark outline and Both Sides was squeezed
   until its words touched the edge; now every tab keeps its padding (never shrinks) and the chosen one is a white tile lifted by a soft shadow,
   the same as the designer's other switches. The arrow on Check and Order follows the button's word colour (it was charcoal on charcoal). ---- */
html.dzlb .lbf-ql .dz-seg{display:inline-flex;flex:none}
html.dzlb .lbf-ql .dz-seg>button{flex:none;min-width:max-content;padding:0 14px}
html.dzlb .lbf-ql .dz-seg>button[aria-selected="true"]{background:#fff;color:var(--lb-ink);box-shadow:0 1px 2px rgba(42,42,51,.12),0 0 0 .5px rgba(42,42,51,.10)}
html.dzlb .lbf-ql .dz-seg>button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--ring)}
html.dzlb .lbf-ql .btn.lbf-cta svg{color:currentColor}
/* 344 px (live QA N36 follow-up): the wrapped guide bar keeps its words inside the white bar */
@media (max-width:400px){
  html.dzlb .lbf-pvbar{min-height:0;height:auto;padding:6px 10px;gap:4px 10px;align-self:end}
  html.dzlb .lbf-pvbar .lbf-legend{font-size:11.5px;line-height:1.3;gap:6px;justify-content:center;text-align:center}
}