/* Print Buddy: styles for the artwork uploader, proof and check (js/artwork.js) and the tools that share it. Split out of site.css on 19 Oct 2026 (speed: every shop page loaded all of it);
   linked right after site.css by every page that loads js/artwork.js. New rules that only these pages use go here; see docs/STYLE-GUIDE.md. */
/* ---------- Home ---------- */
.trust3{display:grid}
.trust3 div{border:1px solid var(--line)}
.trust3 b{display:block;font-weight:500}
/* ---------- PDP (approved business-cards layout, generalised) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.field-l{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:500;margin-bottom:8px}
.dims{display:grid;gap:10px}
.dims label{font-size:12px;font-weight:500}
.dims input,.dims select{margin-top:6px;border-radius:var(--radius-sm)}
.qrow{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;background:#fff;text-align:left;width:100%;transition:border-color .15s,background .15s,box-shadow .15s}
.qrow .dot{width:16px}
.qrow[aria-checked="true"] .dot{border-color:var(--primary)}
.qrow[aria-checked="true"] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.qrow .q{font-weight:500;align-items:center}
.qrow .unit{white-space:nowrap}
.qrow[aria-checked="true"] .unit{background:#fff}
.qrow .p{font-weight:500;min-width:66px;text-align:right}
/* Document printing upload */
.dropzone{border:1.5px dashed var(--input);border-radius:var(--radius);padding:30px 20px;text-align:center;cursor:pointer;transition:border-color .15s, background .15s;background:var(--panel)}
.dropzone svg{display:block}
.dropzone b{display:block;font-weight:500}
.dropzone span{font-size:12px;color:var(--muted)}
.quote-panel{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff}
/* Custom themed date picker (native popups cannot be styled) */
.dp{position:relative}
.dp.open .dp-pop{display:block}
.template-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;text-decoration:none;transition:border-color .15s, box-shadow .15s;background:#fff}
button.template-card{text-align:left;cursor:pointer}
.template-card>span:not(.tic){flex:1;min-width:0}
.template-card .tic{flex:none;width:36px;letter-spacing:.5px}
.template-card strong{display:block;font-size:13px;font-weight:500;line-height:1.3;color:var(--ink)}
.template-card small{display:block;text-wrap:balance}
.template-card .dl{margin-left:auto;flex:none}
.dims select.unit{margin-top:6px;border:1px solid var(--input);height:40px;font:inherit;font-size:13px}
/* ---------- Responsive ---------- */
@media (max-width:480px){.qrow{grid-template-columns:18px 1fr auto;gap:10px}
.qrow .unit{grid-column:2;grid-row:2;margin-top:-4px}
.qrow .p{grid-column:3;grid-row:1 / span 2}}
/* ---------- Artwork engine: live proof, bleed options, 10-point check ---------- */
.aw-prog{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}
.aw-bar{flex:1;height:6px;border-radius:var(--bar-r);background:var(--panel);overflow:hidden;border:1px solid var(--line)}
.aw-bar i{display:block;width:0;transition:width .25s}
.aw-tiles2{grid-template-columns:1fr 1fr}
.aw-orient{display:block;width:44px;height:30px;border:1.5px solid var(--primary);border-radius:var(--radius-sm);margin:2px 0 4px}
.aw-orient.portrait{width:30px}
.aw-pick{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:4px 0 14px;background:#fff}
.aw-pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.aw-pickpg{border:1px solid var(--line);border-radius:var(--radius);padding:8px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-size:12px;position:relative;transition:border-color .12s,box-shadow .12s}
.aw-pickpg input{position:absolute;top:10px;left:10px;accent-color:var(--primary);z-index:1}
.aw-pickpg b{font-weight:500}
.aw-pickpg small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-pickthumb{display:grid;place-items:center;background:var(--panel);border-radius:var(--radius-sm);overflow:hidden;min-height:64px}
.aw-pickthumb canvas{max-width:100%;height:auto;display:block}
.aw-pickbar{margin-top:8px;font-size:12px;font-weight:500;color:var(--primary)}
.aw-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr);gap:22px;align-items:start;margin-top:4px}
.aw-proofwrap{background:linear-gradient(135deg,#F5F7F8,#E6ECEF);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:grid;place-items:center;min-height:200px}
.aw-proof{position:relative;max-width:100%;max-height:420px;width:auto;height:auto;box-shadow:0 14px 34px rgba(42,42,51,.22);background:#fff;line-height:0}
.aw-proof canvas{display:block;width:100%;height:100%;max-height:420px;object-fit:contain}
.aw-proof .aw-ol{position:absolute;inset:0;width:100%;pointer-events:none;transition:opacity .15s}
.aw-proof .aw-ol.off{opacity:0}
.aw-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:10px;font-size:11px;font-weight:500;color:var(--muted)}
.aw-legend span{align-items:center;gap:6px}
.aw-legend span{border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 9px;background:#fff}
.aw-legend i{width:18px;border-top:2px solid var(--accent)}
.aw-legend i.lg-safe{border-top:2px dashed var(--primary)}
.aw-legend i.lg-bleed{height:10px;border:0;background:repeating-linear-gradient(45deg,rgba(152,96,72,.55) 0 2px,rgba(152,96,72,.18) 2px 5px)}
.aw-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;margin-left:auto}
.aw-toggle input{accent-color:var(--primary);margin:0}
.aw-pages{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.aw-pg{position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:4px;cursor:pointer;line-height:0}
.aw-pg canvas{display:block;width:48px;height:auto;border:1px solid var(--panel)}
.aw-pgn{position:absolute;left:-4px;top:-6px;font-size:10px;font-weight:500;background:var(--primary);color:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:1px 6px;line-height:1.4}
.aw-note{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.5}
.aw-dims{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.aw-dims b{font-weight:500}
.aw-dims span{font-size:12px;color:var(--muted)}
.aw-opt{margin-bottom:14px}
.aw-optl{font-size:12px;font-weight:500;color:var(--ink);margin-bottom:8px;line-height:1.45}
.aw-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aw-tiles.two .aw-tile{padding:10px 12px}
.aw-tile{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:10px;text-align:left;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .15s,background .15s}
.aw-tile b{font-weight:500;align-items:center;gap:6px}
.aw-thumb{display:block;height:50px;border-radius:var(--radius-sm);background:var(--panel);overflow:hidden;display:grid;place-items:center;margin-bottom:2px}
.aw-thumb canvas{max-width:100%;max-height:58px;width:auto;height:auto;box-shadow:0 2px 8px rgba(42,42,51,.18)}
.aw-sw{font-style:normal}
.aw-checks{display:flex;flex-direction:column}
.aw-checks-h{font-size:11px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:var(--eyebrow-ink);margin:4px 0 6px}
.aw-chk{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.45;border:1px solid var(--line);border-radius:var(--radius);padding:8px 11px;background:#fff}
.aw-chk b{display:block;font-weight:500}
.aw-chk .ic{flex:none;margin-top:1px}
.aw-c{display:flex;gap:10px;align-items:center;font-size:12px;line-height:1.5;padding:7px 0;cursor:pointer}
.aw-c input{margin:3px 0 0;accent-color:var(--primary)}
.aw-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.aw-actions .btn:disabled{opacity:.45;cursor:not-allowed}
.aw-hint{font-size:11px;color:var(--muted)}
.aw-done{display:flex;gap:10px;align-items:flex-start;margin-top:16px;border:1px solid var(--success-line);background:#F3F9F5;border-radius:var(--radius);padding:12px 14px;font-size:13px;line-height:1.5}
.aw-done .ic{flex:none}
@media (max-width:860px){.aw-grid{grid-template-columns:1fr}
.aw-proof{max-height:320px}
.aw-proof canvas{max-height:320px}}
/* Artwork tool: bleed select, placement extras, file-vs-product comparison */
.aw-sel{width:100%;border:1px solid var(--input);border-radius:var(--radius-sm);height:38px;padding:0 34px 0 10px;font:inherit;font-size:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365727C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/12px;appearance:none}
.aw-cmp{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;background:var(--panel)}
.aw-cmpsvg{width:120px;height:72px}
.aw-cmpt{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0}
.aw-cmpt div{display:flex;align-items:baseline}
.aw-cmpt span{width:78px;color:var(--muted);font-weight:500;font-size:11px;letter-spacing:.4px;text-transform:uppercase}
.aw-cmpt b{font-weight:500}
.aw-bgrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:12px;font-weight:500;color:var(--muted)}
.aw-bgrow label{align-items:center}
.aw-bgrow input[type=color]{height:26px}
.aw-mini{border:1px solid var(--line);background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:4px 10px;font-size:11px;font-weight:500;color:var(--primary)}
.aw-legend i.lg-band{height:10px;border:0;background:repeating-linear-gradient(45deg,rgba(74,123,166,.5) 0 2px,rgba(74,123,166,.15) 2px 5px)}
.aw-thumb{position:relative}
.aw-thumb .aw-olthumb{position:absolute;inset:0;width:100%;pointer-events:none}
.aw-thumb canvas{position:relative}
.art-addon{display:flex;gap:10px;align-items:flex-start;border:1px dashed var(--input);border-radius:var(--radius-sm);padding:10px 14px;margin:0 0 10px;font-size:13px;cursor:pointer;background:var(--panel)}
.art-addon input{margin-top:2px;accent-color:var(--primary)}
.art-addon b{font-weight:500}
/* ---- Templates and About pages ---- */
.tpl-box{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:#fff;margin:6px 0 10px}
.tpl-form label{display:block;font-size:12px;font-weight:500;margin:0 0 12px}
.tpl-form select,.tpl-form input{display:block;width:100%;margin-top:5px;border:1px solid var(--input)}
.tpl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tpl-form .btn{width:100%;margin-top:4px}
.tpl-form label small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
.tpl-form input[readonly]{background:var(--panel);color:var(--muted)}
.tpl-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--panel);border-radius:var(--radius);padding:16px;min-height:220px}
.tpl-preview svg{max-width:100%;height:auto;box-shadow:0 6px 20px rgba(42,42,51,.12);background:#fff}
.tpl-preview .src{text-align:center}
@media (max-width:900px){.tpl-box{grid-template-columns:1fr}
.tpl-row{grid-template-columns:1fr 1fr}}
/* finish templates (23 Oct 2026, js/templates.js buildSet): the finish layer and sides side by side, sides greyed until a layer is
   chosen, and the preview as one small page per page of the PDF with its number and name */
.tpl-row.two{grid-template-columns:1fr 1fr}
.tpl-form label.off{color:var(--muted)}
.tpl-form select:disabled{background:var(--panel);color:var(--muted);cursor:not-allowed}
.tpl-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 10px}
.tpl-pages figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:132px}
.tpl-pages figcaption{font-size:11px;line-height:1.35;color:var(--muted);text-align:center}
.tpl-pages figcaption b{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:50%;background:#fff;color:var(--ink);font-size:10px;font-weight:500;margin-right:3px}
@media (max-width:480px){.tpl-row.two{grid-template-columns:1fr}}
/* ---- Design service brief and content uploads ---- */
.art-brief{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;background:var(--panel)}
.art-brief label{display:block;font-size:12px;margin-bottom:6px}
.art-brief label b{display:block;font-weight:500}
.art-brief label small{color:var(--muted)}
.art-brief textarea{width:100%;border:1px solid var(--input);background:#fff;resize:vertical}
/* ---- My Account (orders.html): sidebar shell, order timeline, panels ---- */
.files .fr{align-items:center;background:#fff}
.files .fr .nm{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .fr a{white-space:nowrap}
/* ---- My Account: proof viewer, row markers, sidebar cards ---- */
.proof-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.proof-acts .btn,.proof-acts .btn-ghost{align-items:center}
/* ---- product page: Print Buddy templates ---- */
.template-card.pb .tic{background:var(--primary);color:#fff}
.tpl-custom{margin-top:14px;border:1px dashed var(--input);border-radius:var(--radius);padding:14px 16px;background:#fff}
.tpl-custom-h b{display:block;font-weight:500}
.tpl-custom-h small{display:block}
.tpl-custom-f{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.tpl-custom-f label{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.tpl-custom-f input,.tpl-custom-f select{display:block;margin-top:4px}
.tpl-custom-f select{width:auto}
/* ---- uploader: steps, sides question, twin slots, quiet checks ---- */
.aw-steps{display:flex;align-items:center;gap:0;margin:0 0 12px;font-size:12px;font-weight:500;color:var(--muted)}
.aw-steps span{display:flex;align-items:center;gap:8px;position:relative;padding-right:28px;margin-right:8px}
.aw-steps span:not(:last-child)::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:1px;background:var(--line)}
.aw-steps i{width:22px;border:1.5px solid var(--input);place-items:center;font-style:normal;font-weight:500}
.aw-steps span.on i{background:var(--primary);border-color:var(--primary);color:#fff}
.aw-steps span.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.aw-sides{margin:0 0 12px}
.aw-sideic{display:flex;height:44px;align-items:center;margin:2px 0 4px;color:var(--primary)}
.aw-sideic svg{display:block}
.aw-sideic .fl{fill:var(--tint)}
.aw-twingrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aw-slot{border:1.5px dashed var(--input);border-radius:var(--radius);padding:18px 14px;text-align:center;cursor:pointer;background:var(--panel);display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color .15s,background .15s}
.aw-slot b{font-weight:500}
.aw-slot small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-chk.quiet b{font-weight:500;color:var(--muted)}
.aw-wrong{margin:8px 0 0;font-size:12px}
.aw-wrong .linkbtn{text-decoration:underline;cursor:pointer}
.aw-wrongbox{margin-top:8px;border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:#fff}
.aw-wrongbox textarea{width:100%;border:1px solid var(--input);border-radius:var(--radius-sm);padding:8px 10px;font:inherit;font-size:13px;line-height:1.5;resize:vertical}
@media (max-width:600px){.aw-twingrid{grid-template-columns:1fr}}
/* ---- uploader: folded options, verdict, one tick ---- */
.aw-adjust{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin:0 0 12px}
.aw-adjust summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:12px;color:var(--ink)}
.aw-adjust summary::-webkit-details-marker{display:none}
.aw-adjust-s{flex:1;min-width:0;font-weight:500;line-height:1.5}
.aw-adjust-s i{font-style:normal}
.aw-adjust summary b{flex:none;font-weight:500;color:var(--primary);border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 10px;background:#fff}
.aw-adjust summary:hover b{border-color:var(--primary);background:var(--tint)}
.aw-adjust-b{padding:12px 12px 2px}
.aw-adjust-b .aw-opt:last-child{margin-bottom:10px}
.aw-verdict{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:0 0 10px;background:#fff}
.aw-verdict .ic{flex:none}
.aw-verdict b{display:block;font-weight:500}
.aw-verdict small{display:block}
.aw-verdict small .linkbtn{cursor:pointer}
.aw-c.one{background:#fff}
.aw-c.one input{height:18px}
.aw-confirm{border-top:0;padding-top:4px;margin-top:12px}
/* ---- uploader window and the one-line summary left on the page ---- */
.aw-modal{position:fixed;inset:0;background:rgba(42,42,51,.55);z-index:210;display:flex;align-items:center;justify-content:center;padding:20px}
.aw-modal-box{background:#fff;border-radius:var(--radius);width:min(1180px,100%);max-height:min(94vh,980px);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.aw-modal-h{display:flex;align-items:center;gap:20px;padding:14px 20px;border-bottom:1px solid var(--line)}
.aw-modal-t{min-width:0;flex:1}
.aw-modal-t .eyebrow{margin-bottom:2px}
.aw-modal-t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-modal-t small{display:block}
.aw-modal-x{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.aw-modal-b{overflow:auto;padding:18px 22px 22px;flex:1;min-height:0}
.aw-modal .aw-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}
.aw-modal .aw-proofwrap{min-height:320px}
.aw-modal .aw-tiles2{grid-template-columns:1fr 1fr}
.aw-inline{margin-top:4px}
.aw-inline-row{border-radius:var(--radius);font-size:13px;flex-wrap:wrap}
.aw-inline-row>div{flex:1;min-width:200px}
.aw-inline-row b{font-weight:500}
.aw-inline-row svg{flex:none}
.aw-inline-ic{width:28px;height:28px;border-radius:50%;background:#F0DED3;color:var(--accent-ink);display:grid;place-items:center}
.aw-inline-row .btn,.aw-inline-row .btn-ghost{align-items:center}
.aw-inline-row .linkbtn{text-decoration:underline;cursor:pointer}
@media (max-width:860px){.aw-modal{padding:0}
.aw-modal .aw-grid{grid-template-columns:1fr}}
/* ---- artwork window: card layout ---- */
.aw-modal-b{background:var(--panel)}
.aw-modal .aw-stage,.aw-modal .aw-side{background:#fff}
.aw-modal .aw-cmp{background:#fff}
.aw-modal .aw-pick{margin-top:0}
.aw-modal .aw-c.one{border:0;padding:0 0 8px;background:transparent}
.aw-modal .aw-note{margin-top:8px}
.aw-modal .aw-verdict{margin-top:12px}
/* ---- My Account item states (no file names, actions on the row) ---- */
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:3px 8px 3px 4px;font-size:12px;font-weight:500;color:var(--ink)}
.fchip i{font-style:normal}
.aw-modal .aw-tile{grid-template-columns:62px minmax(0,1fr);align-items:center}
.aw-modal .aw-tile .aw-thumb{grid-row:1/3;width:62px;height:42px;margin:0}
.aw-modal .aw-tile small{line-height:1.3}
.aw-modal .aw-tiles{grid-template-columns:1fr 1fr;gap:6px}
.aw-modal .aw-pickgrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.aw-modal .aw-pickthumb{min-height:48px}
.aw-modal .aw-stage{position:sticky;top:0}
.aw-modal .aw-opt{margin-bottom:10px}
.aw-modal .aw-optl{margin-bottom:6px}
/* ---- artwork window: phones, button consistency, agree note ---- */
.aw-agree{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.aw .aw-actions .btn,.aw .aw-actions .btn-ghost,.aw-pick .aw-actions .btn,.aw-pick .aw-actions .btn-ghost{height:40px;padding:0 16px;display:inline-flex;align-items:center;font-size:13px;font-weight:500;border-radius:var(--radius-sm)}
.aw .aw-actions .linkbtn{height:40px;display:inline-flex;align-items:center;padding:0 10px;font-size:13px;background:none;border:0;text-decoration:underline;cursor:pointer}
.aw-twin .aw-actions .btn-ghost{height:40px;padding:0 16px;display:inline-flex;align-items:center;font-size:13px;font-weight:500}
@media (max-width:860px){.aw-modal{align-items:stretch}
.aw-modal-box{height:100dvh;max-height:100dvh;border-radius:0}
.aw-modal-h{padding:12px 14px;gap:12px}
.aw-modal-b{padding:12px 14px 14px}
.aw-modal .aw-grid{flex-direction:column}
.aw-modal .aw-stage{position:static}
.aw-modal .aw-proofwrap{min-height:0}
.aw-modal .aw-tiles{grid-template-columns:1fr}
.aw-modal .aw-actions{flex-direction:column}
.aw-modal .aw-actions .btn,.aw-modal .aw-actions .btn-ghost{width:100%;justify-content:center}
.aw-modal .aw-hint{width:100%}
.aw-twingrid{grid-template-columns:1fr}
.aw-tiles2{grid-template-columns:1fr}}
/* ---- product page: short file chips on the artwork summary row ---- */
.aw-inline-row .fchips{align-items:center;gap:6px}
.aw-inline-note{display:block;width:100%;font-size:12px;color:var(--muted);margin-top:2px}
/* ---- product page Step 3: artwork panels ---- */
/* Step 3 is one stack of cards with one rhythm (Junaid, 28 Oct 2026: the gaps were 8, 8, 2 and 12 px): the choice cards, the
   Design Online row and the upload card all sit 10 px apart, the same as .rc-group; children carry no margins of their own */
.art-panel{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.art-panel>.ap,.art-panel>#apOnlineBox>.ap-online{margin:0}
.art-panel>#apOnlineBox:empty{display:none}
.ap .art-brief{margin-top:12px}
/* ---- compact Step 3 panels ---- */
.briefbox{display:flex;gap:8px;align-items:flex-start;margin-top:8px;width:100%}
.briefbox textarea{flex:1;min-width:0;border:1px solid var(--input);border-radius:var(--radius-sm);font:inherit;font-size:12px;line-height:1.5;resize:vertical;background:#fff}
.briefbox .btn-ghost{height:36px;font-size:12px;white-space:nowrap}
@media (max-width:600px){.briefbox{flex-direction:column}
.briefbox .btn-ghost{width:100%;justify-content:center}}
/* ---- colour balance: --ground is the big-area background; neutral by default so the theme stays on buttons, links and pills ---- */
.dropzone,.aw-drop{background:var(--ground)}
/* ---- one dropdown style everywhere ---- */
.dims{grid-template-columns:1fr 1fr 118px}
.dims select.unit{width:100px}
/* ---- round nine ---- */
.bk-card .im{padding:0;overflow:hidden}
.bk-card .im img{width:100%;height:100%}
.sa-find{max-width:760px}
.sa-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}
.sa-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--muted)}
.sa-form input{height:44px;border:1px solid var(--input);border-radius:var(--radius-sm);padding:0 12px;font:inherit;font-size:14px;color:var(--ink)}
.sa-find .src.bad{color:var(--accent-ink)}
.sa-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.sa-head b{display:block;font-weight:500}
.sa-head small{color:var(--muted)}
.sa-head .btn-ghost{margin-left:auto}
.sa-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 18px;margin-bottom:12px;max-width:900px}
.sa-ih{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sa-ih img{flex:none}
.sa-ih>span{flex:1;min-width:0}
.sa-ih b{display:block;font-weight:500}
.sa-ih small{color:var(--muted)}
.sa-state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--primary);background:var(--tint);border-radius:var(--radius-sm);padding:5px 10px;margin-bottom:10px}
.sa-state.ok{background:var(--success-tint)}
.sa-up{cursor:pointer;height:38px;display:inline-flex;align-items:center}
.sa-design .briefbox{max-width:620px}
@media (max-width:700px){.sa-form{grid-template-columns:1fr}}
/* ---- till view: two columns, price pinned, nothing to scroll for ---- */
html.pos-mode .qrow{font-size:13px}
/* ---- artwork confirm: text left, actions right ---- */
.aw-confirm{display:grid;align-items:start}
.aw-confirm .aw-c.one{margin:0}
.aw-confirm .aw-actions .btn,.aw-confirm .aw-actions .btn-ghost{justify-content:center}
/* ---- seasonal effects: light, on the home hero only ---- */
.aw-pages .aw-pg .aw-pgn{white-space:nowrap;font-size:11px;padding:0 6px}
.aw-pages.sortable .aw-pg[draggable]{cursor:grab}
.aw-pages .aw-pg.dragging{opacity:.4}
.aw-pages .aw-pg.over{outline:2px solid var(--primary);outline-offset:1px}
/* ---- online designer (design.html) ---- */
.dz-row{grid-template-columns:1fr 1fr}
/* ---- designer v2: rail, canvas stage, properties ---- */
.dz-row input[type=range]{width:100%}
/* ---- narrow phones: Galaxy Z Fold cover screen and other 320 to 380 px viewports ---- */
@media (max-width:480px){.tpl-row{grid-template-columns:1fr}}
/* ======================================================================
   PHONES FIRST (Junaid, 15 Oct 2026): one sticky bar, a menu drawer, the product page in money-making order
   (picture, options, price, basket; the trust points and templates card after), the hero picture back, account tabs.
   ====================================================================== */
@media (max-width:900px){.chips{margin-bottom:14px}}
.aw-confirm .aw-hint{line-height:1.4}
.aw-c.one{line-height:1.5}
/* Approval panel: the text on top, the two buttons in one row under it, the note on its own line */
.aw-confirm{grid-template-columns:1fr;gap:10px}
.aw-confirm .aw-actions{flex-direction:row;align-items:center;flex-wrap:wrap;min-width:0}
.aw-confirm .aw-actions .btn,.aw-confirm .aw-actions .btn-ghost{width:auto;height:38px;font-size:12.5px;padding:0 16px;white-space:nowrap}
.aw-confirm .aw-hint{margin-top:2px}
.aw .aw-actions .linkbtn,.aw .aw-actions .aw-team,.aw-team{background:none;border:0;padding:0 4px;font:inherit;font-size:12.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;height:auto}
.aw .aw-actions .linkbtn:hover{color:var(--primary-dk)}
/* Rotate artwork tiles for fixed-stance products */
.aw-turn{display:block;width:44px;height:30px;border:1.5px solid var(--primary);border-radius:var(--radius-sm);margin:2px 0 4px;position:relative}
.aw-turn.yes{width:30px}
.aw-turn::after{content:"";position:absolute;left:6px;top:6px;width:10px;height:5px;border-radius:var(--radius-sm);background:var(--primary);opacity:.8}
.aw-turn.yes::after{left:6px;top:8px;width:5px;height:10px}
/* Proof strip under the uploader (Junaid, 16 Oct 2026): Remove was a grey underlined word beside a solid button, the
   buttons drifted left of the edge, and the warning shared the panel beige. Now a three-column grid (icon tile, text,
   actions flush right), a state icon in a 40 px tile, the honey attention colour, and one action group: the main button
   plus an outlined secondary of the same height with a thin icon. */
.aw-inline-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:14px 16px;border:1px solid var(--attn-line);background:var(--attn-tint)}
.aw-inline-row>.aw-inline-txt{min-width:0}
.aw-inline-row>.aw-inline-acts{min-width:0;justify-self:end}
.aw-inline-row .aw-inline-ic{width:40px}
.aw-inline-row .aw-inline-ic svg{width:20px;height:20px}
.aw-inline-row.ok .aw-inline-ic{background:#DCEEE4}
.aw-inline-acts{display:flex;align-items:center;gap:8px}
.aw-inline-sec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.aw-inline-row .aw-inline-sec svg,.aw-inline-sec svg{transition:color .15s}
.aw-inline-row.ok .aw-inline-sec:hover{border-color:var(--primary);color:var(--primary)}
.aw-inline-row.ok .aw-inline-sec:hover svg{color:var(--primary)}
.aw-inline-sec:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:560px){.aw-inline-row{grid-template-columns:auto minmax(0,1fr)}
.aw-inline-row>.aw-inline-acts{grid-column:1/-1;justify-self:stretch}}
.aw-pick.has-ic{grid-template-columns:auto minmax(0,1fr)}
.aw-pick-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--attn-ring);color:var(--attn);margin-top:2px}
.aw-pick-b{min-width:0}
.aw-pick .aw-actions .aw-inline-sec{height:40px}
.aw-chk.warn .ic,.aw-verdict.warn .ic,.oi-state.warn .ic,.fart .fnotes .fn.warn .ic{background:var(--attn-ring)}
@media (max-width:480px){.aw-pick.has-ic{grid-template-columns:1fr}
.aw-pick-ic{width:34px;height:34px}}
/* "Have our team set it up" asks first: slower, turnaround starts at proof approval, fixing it here is the main button */
.aw-teamask{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;border:1px solid var(--attn-line);background:var(--attn-tint);border-radius:var(--radius);padding:14px 16px;margin:10px 0 4px;font-size:13px}
.aw-teamask b{font-weight:500}
.aw-teamask ul{color:var(--muted);line-height:1.55}
.aw-teamask li{margin:1px 0}
@media (max-width:480px){.aw-teamask{grid-template-columns:1fr}}
/* Uploader polish (Junaid, 16 Oct 2026): even gaps between the verdict and the check cards; the paper drawing on the
   orientation and turn tiles is a white sheet with two faint lines, so it never melts into a selected tile; the
   Fit + Background swatch is a small round dot, shown only once a colour is chosen. */
.aw-checks{gap:8px}
.aw-verdict{margin-bottom:8px}
.aw-orient{background:linear-gradient(rgba(var(--prgb),.55),rgba(var(--prgb),.55)) 5px 6px/52% 2px no-repeat,linear-gradient(rgba(var(--prgb),.28),rgba(var(--prgb),.28)) 5px 11px/34% 2px no-repeat,#fff;box-shadow:2px 2px 0 rgba(var(--prgb),.14)}
.aw-turn{background:#fff;box-shadow:2px 2px 0 rgba(var(--prgb),.14)}
.aw-sw{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.18);vertical-align:-1px;margin-left:4px}
/* Upload artwork: Hide sits in the top right corner of the opened panel, level with the Artwork, Check, Approve steps,
   and steps aside once a file is in (the strip has its own Change and Remove) */
.art-now-wrap{position:relative}
.template-card{min-width:0;max-width:100%}
.dz-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;background:#fff;font-family:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s}
.dz-row .dot{width:16px;flex:none;display:grid;place-items:center;transition:border-color .15s}
.dz-row[aria-checked="true"] .dot{border-color:var(--primary)}
.dz-row[aria-checked="true"] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
/* Save this price: quote PDF, email, link; WhatsApp under it */
.qtools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:600px){.qtools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
/* My Account: remind me to reorder; the proof screen counts the rounds */
.remind{display:flex;align-items:center;gap:14px;margin:16px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;flex-wrap:wrap}
.remind select{height:38px;border:1px solid var(--input);border-radius:var(--radius-sm);font-family:inherit;font-size:13px;color:var(--ink);min-width:150px}
.ord .remind{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 20px;background:#fff}
@media (max-width:600px){.ord .remind{padding:14px 16px}
.remind select{width:100%}}
/* Editing a basket item: a quiet banner above Step 1, and the button says Update basket */
.editing{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:13px;color:var(--muted)}
.editing svg{flex:none}
.editing span{flex:1;min-width:200px}
.editing b{color:var(--ink);font-weight:500}
.sg-ic{flex:none;display:grid;place-items:center}
.sg-note{margin:8px 0 0;font-size:12px;color:var(--muted)}
.trust3 .n{font-size:11px}
/* ---- Send Artwork: send a link for big files ---- */
.sa-link{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.sa-link>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px}
.sa-link>summary::-webkit-details-marker{display:none}
.sa-link>summary svg{width:20px;height:20px;flex:none;color:var(--primary)}
.sa-link>summary b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.sa-link>summary small{display:block;font-size:12px;color:var(--muted)}
.sa-linkb{display:flex;gap:8px;padding:12px 14px 0}
.sa-linkb input{flex:1;min-width:0;height:40px;border:1px solid var(--input);border-radius:var(--radius-sm);padding:0 12px;font:inherit;font-size:13px}
.sa-linkb .btn-ghost{height:40px;white-space:nowrap}
.sa-link>.src{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.sa-links{list-style:none;margin:10px 14px 0;padding:0;display:grid;gap:6px}
.sa-links li{display:flex;align-items:center;gap:8px}
.sa-links li svg{color:var(--ok);flex:none}
@media (max-width:520px){.sa-linkb{flex-direction:column}
.sa-linkb .btn-ghost{width:100%;justify-content:center}}
/* ---- Artwork window approve bar: one compact row (Junaid, 16 Oct 2026: it covered a third of the screen) ---- */
.aw-confirm .aw-ct{min-width:0}
.aw-also{display:flex;align-items:baseline;gap:8px;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.aw-also-t{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.aw-also.open .aw-also-t{display:block;-webkit-line-clamp:unset}
.aw-also-more{flex:none;border:0;background:none;padding:0;font:inherit;font-size:11.5px;font-weight:500;color:var(--primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.aw-modal .aw-confirm{position:sticky;bottom:-22px;z-index:3;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px 22px;border-top:1px solid var(--line);background:#fff}
.aw-modal .aw-confirm .aw-c.one{display:flex;gap:11px;align-items:flex-start;margin:0;padding:0;border:0;background:none;font-size:12.5px;line-height:1.45;cursor:pointer}
.aw-modal .aw-confirm .aw-c.one input{width:18px;height:18px;margin:1px 0 0;flex:none}
.aw-modal .aw-confirm .aw-actions{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:8px;margin:0;min-width:0}
.aw-modal .aw-confirm .aw-actions .btn,.aw-modal .aw-confirm .aw-actions .btn-ghost{width:auto;height:40px;padding:0 18px;font-size:13px;font-weight:500;white-space:nowrap;justify-content:center}
.aw-modal .aw-confirm .aw-actions .btn{min-width:168px}
.aw-modal .aw-confirm.blocked{grid-template-columns:1fr}
.aw-modal .aw-confirm.blocked .aw-actions{justify-content:flex-end;flex-wrap:wrap}
.aw-modal .aw-confirm.blocked .aw-hint{order:-1;flex:1;flex-basis:auto;margin-right:auto}
/* the proof always fits between the header and the bar */
.aw-modal .aw-proof,.aw-modal .aw-proof canvas{max-height:min(60vh,calc(94vh - 330px))}
/* orientation and turn tiles: picture on the left, words beside it */
.aw-modal .aw-tile .aw-orient,.aw-modal .aw-tile .aw-turn{grid-row:1/3;justify-self:center;margin:0}
.aw-modal .aw-tiles2 .aw-tile{grid-template-columns:52px minmax(0,1fr);min-height:58px}
@media (max-width:860px){.aw-modal .aw-confirm{position:sticky;bottom:-14px;padding:10px 14px 12px;grid-template-columns:1fr;border-top:1px solid var(--line)}
.aw-modal .aw-confirm .aw-actions{flex-direction:row}
.aw-modal .aw-confirm .aw-actions .btn,.aw-modal .aw-confirm .aw-actions .btn-ghost{flex:1 1 0;min-width:0;padding:0 10px;font-size:12.5px}
.aw-modal .aw-confirm .aw-actions .btn{order:2}}
@media (max-width:380px){.aw-modal .aw-confirm .aw-actions .btn-ghost{font-size:12px}}
.aw-l-short{display:none}
@media (max-width:480px){.aw-modal .aw-confirm .aw-l-long{display:none}
.aw-modal .aw-confirm .aw-l-short{display:inline}}
/* ---- Detail pass (Junaid, 17 Oct 2026, "corporate, clean"): one hover for every card, the category sidebar, description
   text on one size, dark compact hero cards aligned with the strip, the chat typing line, the Print Journal ---- */
@media (min-width:901px){.trust3>div>b{min-height:39px}}
/* ---- Fifth round (Junaid, 17 Oct 2026): top bar without rings, spec icon tiles, catalogue looks, Show more, footer ---- */
.sg-ic{border-radius:var(--radius);border:0;background:var(--panel);color:var(--icon)}
/* ---- Eleventh round (Junaid, 17 Oct 2026): hero facts balanced, product page notice and spec tiles tidied ---- */
.sg-ic{width:36px;height:36px;margin-top:1px}
/* ---- Icon option tiles (Junaid, 17 Oct 2026: compact and in our own look, not the supplier's; labels, then banner
   finishing). Each tile carries a small drawing at its real size above the name, four across (shape, leading edge),
   three across for three or six choices (banner finishing), or beside it when there are only two (winding); a quiet aside after the field name explains it; the gap is small centred tiles; the sister-product link
   (.pair-link) sits under the spec chips in the heading ---- */
.field-aside{font-weight:400;font-size:12px;color:var(--muted);margin:0 auto 0 8px}
.tiles.icons .tile.ico{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px 11px;text-align:center}
.tile.ico .tile-ico{display:flex;align-items:center;justify-content:center;height:36px;color:var(--icon)}
.tile.ico .tile-ico svg{display:block;flex:none}
.tile.ico .tile-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tile.ico small{margin-top:0}
.tiles.icons .tile.ico[aria-pressed="true"]::after{top:8px;right:8px;margin-top:0}
.tiles.icons.n2 .tile.ico{flex-direction:row;justify-content:flex-start;text-align:left;gap:16px;padding:12px 36px 12px 14px}
.tiles.icons.n2 .tile.ico[aria-pressed="true"]::after{top:50%;right:12px;margin-top:-7px}
@media (max-width:520px){.tiles.icons.n2 .tile.ico{flex-direction:column;justify-content:center;text-align:center;gap:8px;padding:14px 8px 11px}
.tiles.icons.n2 .tile.ico[aria-pressed="true"]::after{top:8px;right:8px;margin-top:0}
.field-l:has(.field-aside){flex-wrap:wrap;justify-content:flex-start;row-gap:2px}
.field-aside{flex-basis:100%;margin:0}
.tiles.icons .tile.ico{padding:12px 6px 10px;gap:6px}}
/* ---- Custom label sizes (Junaid, 17 Oct 2026): the Custom Size tile runs the width of the size grid; width and height
   boxes sit on a soft panel under the tiles; a size outside the range shows its note in the honey warning colour ---- */
.cs-box{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin-top:10px;padding:12px 14px 10px;background:var(--panel);border-radius:var(--radius)}
.cs-box[hidden]{display:none}
.cs-in{display:flex;flex-direction:column;gap:5px;flex:1 1 120px;min-width:0}
.cs-in label{font-size:11.5px;font-weight:500;color:var(--muted)}
.cs-f{position:relative;display:block}
.cs-f input{width:100%;color:var(--ink);background:#fff;border-radius:var(--radius);-moz-appearance:textfield;appearance:textfield}
.cs-f input::-webkit-outer-spin-button,.cs-f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cs-f input:focus{outline:none;border-color:var(--field-line);box-shadow:var(--field-ring)}
.cs-f input:disabled{color:var(--muted)}
.cs-f>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);pointer-events:none}
.cs-x{height:40px;display:grid;place-items:center;color:var(--muted);font-size:14px}
/* ---- Option pictures everywhere (Junaid, 17 Oct 2026: "wherever we can have icons... it looks premium"; js/opticons.js).
   Sizes sit side by side: the size drawn to scale on the left, the name on the right, four across (two on phones) ---- */
.tiles.icons.lr .tile.ico{flex-direction:row;justify-content:flex-start;text-align:left;min-height:50px}
.tiles.icons.lr .tile.ico .tile-ico{flex:none;width:32px;height:32px}
.tiles.icons:not(.lr) .tile.ico .tile-tx{align-items:center}
@media (max-width:520px){.tiles.icons.lr .tile.ico{flex-direction:row;justify-content:flex-start;text-align:left}}
/* size tiles: as many across as fit (150 px each, so three long names share the row), the tick in the corner */
.tiles.icons.lr{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tiles.icons.lr .tile.ico{gap:9px;padding:9px 24px 9px 9px}
.tiles.icons.lr .tile.ico[aria-pressed="true"]::after{top:8px;right:8px;margin-top:0}
@media (max-width:520px){.tiles.icons.lr{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.icons.lr .tile.ico{padding:9px 22px 9px 8px}
.tiles.icons.lr .tile.ico[aria-pressed="true"]::after{top:7px;right:7px;margin-top:0}}
/* ---- Request a Quote: the quote builder (Junaid, 17 Oct 2026: "interactive, detailed, so customers feel like they're
   requesting a quote rather than filling just a form"). Five steps in a white card (icon step bar with an ink progress
   line), the shared option tiles, a to-scale size drawing, and the Quote Sheet beside it that fills in as they choose ---- */
.qb{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.qb-k{display:block;font-size:10.5px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink);line-height:1.3}
.qb-pane{min-height:320px}
.qb-pane .qb-field{margin:20px 0 0}
.qb-pane .qb-field .field-l{margin-bottom:9px}
.qb-pane .tiles.icons.lr .tile.ico .tile-tx{align-items:flex-start;text-align:left}
@media (min-width:521px){.qb-pane .tiles.icons.n2 .tile.ico .tile-tx{align-items:flex-start;text-align:left}}
.qb-t6{grid-template-columns:repeat(6,minmax(0,1fr))}
.qb-t6 .tile{text-align:center;padding:10px 6px}
.qb-t6 .tile[aria-pressed="true"]::after{display:none}
.qb-in,.qb-pane .qb-unit select{width:100%;height:40px;font:inherit;font-size:13px}
.qb-in:focus,.qb-pane .qb-unit select:focus,.qb-find input:focus{outline:none}
.qb-row{margin-top:10px;max-width:220px}
.qb-num{font-weight:500}
.qb-pane .qb-unit{flex:0 1 96px}
.qb-pane .qb-unit select{appearance:none;-webkit-appearance:none}
.qb-draw{margin-top:20px;padding:16px 14px 12px;background:var(--panel);border-radius:var(--radius);text-align:center;color:var(--icon)}
.qb-draw svg{display:block;max-width:100%}
.qb-draw p b{display:block;font-size:13.5px;font-weight:500;color:var(--ink)}
.qb-draw p span{display:block;text-wrap:balance}
.qb-draw-0{display:grid;justify-items:center;gap:10px;padding:34px 10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.qb-draw-0 svg{color:var(--icon);opacity:.7}
.sz-job{fill:currentColor;fill-opacity:.09;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.sz-side{fill-opacity:.04}
.sz-ref{fill:var(--muted);fill-opacity:.2;stroke:none}
.sz-ref.sz-sheet{fill:#fff;fill-opacity:1;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3;opacity:.8}
.sz-base{stroke:var(--line);stroke-width:1}
.qb-date{margin-top:10px;max-width:300px}
.qb-date[hidden]{display:none}
/* details */
.qb-form{margin-top:18px}
.qb-form input{height:40px;padding:0 12px;font-size:13px}
.qb-form textarea{font-size:13px;min-height:96px}
.qb-form input:focus,.qb-form textarea:focus{border-color:var(--field-line);box-shadow:var(--field-ring)}
.qb-opt{font-weight:400;color:var(--muted);margin-left:4px}
.qb-done-ic{display:grid;place-items:center}
.qb-done h2{font-weight:500}
.qb-done>p{max-width:560px;font-size:13.5px}
.qb-done>p b{color:var(--ink)}
.qb-next{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0}
.qb-next li{position:relative}
.qb-next li::before{content:"";position:absolute;left:4px;top:4px;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--input);background:#fff}
.qb-next li::after{content:"";position:absolute;left:9px;top:18px;bottom:2px;width:1.5px;background:var(--line)}
.qb-next li:last-child::after{display:none}
.qb-next li.ok::before{border-color:var(--primary);background:var(--primary);box-shadow:0 0 0 3px rgba(var(--prgb),.12)}
.qb-next b{font-weight:500}
.qb-next span{font-size:12px;color:var(--muted)}
.qb-done-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.qb-done-acts .btn,.qb-done-acts .btn-ghost{height:44px;display:inline-flex;align-items:center}
@media (max-width:1100px){.qb{grid-template-columns:minmax(0,1fr) 300px}
.qb-draw{max-width:420px}}
@media (max-width:900px){.qb{grid-template-columns:minmax(0,1fr)}
.qb-t6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.qb-draw{max-width:none}}
@media (max-width:520px){.qb-t3,.qb-cats.tiles.icons.lr{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the security range asks "when" with three tiles (no "Within Two Weeks"): three across at every width */
.qb-when3.tiles.icons{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Turnaround (19 Oct 2026): Standard and Faster If Possible, two across */
.qb-when2.tiles.icons{grid-template-columns:repeat(2,minmax(0,1fr))}
.qb-when1.tiles.icons{grid-template-columns:minmax(0,1fr);max-width:420px}
@media (max-width:420px){.qb-when3.tiles.icons{grid-template-columns:minmax(0,1fr)}}
/* ---- Quote-led product pages (17 Oct 2026, pdp.js + js/quotekit.js): the quote builder's first step in the buy column
   (size tiles with the to-scale drawing beside its caption, quantity, when, delivery), a "Next in Your Quote" row of
   icon pills, Build the Full Quote, a hairline "Send Just These Details" card that opens the contact fields, and the
   four How a Quote Works step cards two across ---- */
.quote-panel.qp{padding:22px 24px 20px;border-radius:var(--radius)}
.quote-panel.qp.sent{box-shadow:0 0 0 2px rgba(var(--prgb),.1)}
@media (max-width:640px){.quote-panel.qp{padding:16px 14px 14px;border-radius:var(--radius)}}
/* ---- Quote mode: a listed product's options and price inside the Request a Quote wizard (product.html?qmode=1). The page
   keeps its own look; everything around the options and price is hidden ---- */
html.qmode .topbar,html.qmode .mast,html.qmode .mainnav,html.qmode .nbar,html.qmode footer,html.qmode .chrome-ph,html.qmode .crumbs,html.qmode #relatedSec,html.qmode .reviews,html.qmode .tplcard,html.qmode .addedbox,html.qmode .chatw,html.qmode .totop,html.qmode .buybar,html.qmode .pdp-gallery,html.qmode .pdp-head,html.qmode .step.pos-hide,html.qmode #accWrap,html.qmode details.how,html.qmode #explained,html.qmode .qtools,html.qmode .qt-wa,html.qmode .needby,html.qmode .nextsteps,html.qmode .trust,html.qmode .pair-link,html.qmode .mdrawer{display:none!important}
html.qmode body{background:#fff}
html.qmode main.wrap{max-width:none;padding:2px 6px 6px}
/* ==== Quote builder polish (Junaid, 18 Oct 2026) ==== */
/* delivery postcode */
.pc-box{margin-top:12px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.pc-box>label{display:block;margin:0 0 8px;font-size:13px;font-weight:500;color:var(--ink)}
.pc-in{position:relative;display:flex;align-items:center;max-width:280px;height:50px;border:1px solid var(--input);border-radius:var(--radius);background:#fff;transition:border-color .15s,box-shadow .15s}
.pc-in:focus-within{border-color:var(--primary);box-shadow:var(--field-ring)}
.pc-ic{display:grid;place-items:center;flex:none;width:44px;color:var(--icon,var(--primary))}
.pc-in input{flex:1;min-width:0;height:100%;padding:0 40px 0 0;border:0;background:none;box-shadow:none;outline:0;font:inherit;font-size:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.pc-in input::placeholder{font-weight:500;letter-spacing:.06em;color:#A3ACB4}
.pc-ok{position:absolute;right:12px;top:50%;display:grid;place-items:center;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--ok,var(--success));color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.pc-in.ok .pc-ok{opacity:1;transform:none}
.pc-hint{display:flex;gap:9px;align-items:flex-start;margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.pc-hint svg{flex:none;margin-top:1px}
/* the finish screen: centred, the badge clear of the step ticks above */
.qb-done{display:flex;flex-direction:column;align-items:center;padding:30px 4px 8px;text-align:center}
.qb-done-ic{position:relative;width:76px;height:76px;border-radius:50%;background:var(--ok,var(--success));color:#fff;box-shadow:0 0 0 10px color-mix(in srgb,var(--ok,var(--success)) 14%,transparent),0 0 0 22px color-mix(in srgb,var(--ok,var(--success)) 7%,transparent);animation:qbPop .5s cubic-bezier(.2,1.4,.4,1)}
.qb-done-ic svg{stroke-width:2}
.qb-done .qb-next{width:100%;max-width:640px;margin:26px auto 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;text-align:left}
.qb-done .qb-next li::before{position:static;display:block;margin:0 0 8px}
.qb-done .qb-next li::after{display:none}
.qb-done .qb-next li.ok{border-color:color-mix(in srgb,var(--ok,var(--success)) 40%,var(--line))}
.qb-done .qb-next li.ok::before{border-color:var(--ok,var(--success));background:var(--ok,var(--success));box-shadow:0 0 0 3px color-mix(in srgb,var(--ok,var(--success)) 16%,transparent)}
.qb-done .qb-done-acts{justify-content:center;margin-top:22px}
@media (max-width:700px){.qb-done .qb-next{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.qb-done-ic,.qb-pane .qb-need::after,.qb-modal.open{animation:none}}
/* ==== Order received (Junaid, 18 Oct 2026) ==== */
.qb-done .qb-next li{align-content:start}
/* ---- Template proofs (19 Oct 2026): a file made on our template, shown in 3D on the gazebo and as its printed pieces ---- */
.tp-tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 12px;background:#EEF0F1;border-radius:var(--radius)}
.tp-tabs button{border:0;background:none;padding:8px 14px;border-radius:var(--radius);font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer}
.tp-tabs button[aria-selected="true"]{background:var(--primary);color:#fff}
.tp-view{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:240px}
.tp-3d{display:block;width:100%;cursor:grab;touch-action:none}
.tp-3d:active{cursor:grabbing}
.tp-load{display:grid;place-items:center;height:320px;font-size:13px;color:var(--muted)}
.tp-turn{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 14px;font-size:12px;color:var(--muted)}
.tp-turn span{margin-right:6px}
.tp-turn button{border:1px solid var(--line);background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:5px 12px;font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.tp-turn button:hover{border-color:rgba(var(--prgb),.4)}
.tp-files{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:6px}
.tp-files li{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:var(--radius)}
.tp-files svg{flex:none;width:18px;height:18px;margin-top:1px}
.tp-files li.ok svg{color:var(--ok)}
.tp-files li.warn svg{color:var(--attn)}
.tp-files b{display:block;font-weight:500}
.tp-files small{display:block}
.tp-flat{display:grid;gap:16px;padding:14px}
.tp-file{margin:0}
.tp-file figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.tp-file figcaption b{font-size:13px;font-weight:500}
.tp-file figcaption small{font-size:11.5px;color:var(--muted)}
.tp-pcs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.tp-pc{flex:1 1 200px;max-width:100%;display:grid;justify-items:center;gap:8px;padding:14px;border-radius:var(--radius);background:var(--panel)}
.tp-cv img{display:block;max-width:100%;filter:drop-shadow(0 4px 10px rgba(20,24,28,.16))}
.tp-pn{font-size:12px;text-align:center}
.tp-pn b{font-weight:500}
.tp-pn i{font-style:normal;color:var(--muted)}
/* which design goes where (19 Oct 2026): each canopy side and each wall picks one of the files uploaded */
.tp-map{margin:12px 0 0;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.tp-map-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.tp-map-h b{font-weight:500}
.tp-map-n{margin:0 0 8px;font-size:12px;line-height:1.5;color:var(--muted)}
.tp-map-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.tp-row{display:grid;gap:4px;font-size:12px;font-weight:500;color:var(--ink);min-width:0}
.tp-row select{width:100%;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink)}
.tp-row select:focus{outline:none;border-color:var(--field-line);box-shadow:var(--field-ring)}
@media (max-width:560px){.tp-map-rows{grid-template-columns:minmax(0,1fr)}}
/* ==== SHOP SKIN 2026: the uploader and the Check your artwork pop-up (21 Oct 2026). The drop zone is a tint-dashed panel
   with an icon tile; choice tiles are panel squares, tint with a ring when chosen; in the pop-up the header carries the steps
   as pills, the body sits on --page-bg with the proof and the facts as white cards on a shadow, the checks are hairline
   rows, the verdict a tinted card (green, honey or rose), the approve bar floats on a shadow. ==== */
.aw .aw-drop,.dropzone{border:1.5px dashed var(--tint-dk);background:var(--panel)}
.aw .aw-drop:hover,.aw .aw-drop.drag,.dropzone:hover,.dropzone.drag{border-color:rgba(var(--prgb),.45);background:var(--tint)}
.aw .aw-drop>svg{box-sizing:content-box;width:22px;height:22px;padding:11px;margin:0 auto 10px;border-radius:var(--radius);background:var(--tint);color:var(--icon,var(--primary))}
.aw .aw-tile{border:0;background:var(--panel)}
.aw .aw-tile:hover{background:var(--tint)}
.aw .aw-tile.on,.aw .aw-tile[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring)}
.aw-inline-row{border:0;box-shadow:var(--card-sh)}
.aw-inline-sec{border:0;box-shadow:var(--card-sh)}
.aw-bar{border:0}
.aw-modal{background:rgba(25,32,38,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.aw-modal-box{box-shadow:0 40px 90px rgba(0,0,0,.4)}
.aw-modal-h{padding:14px 22px}
.aw-modal-t .eyebrow{font-size:10.5px;letter-spacing:1.1px}
.aw-modal-t b{font-size:15px;font-weight:500}
.aw-modal-h .aw-steps{margin:0;gap:4px}
.aw-modal-h .aw-steps span{height:32px;margin:0;padding:0 12px 0 5px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-weight:500;color:var(--muted)}
.aw-modal-h .aw-steps span::after{display:none}
.aw-modal-h .aw-steps span.on{background:var(--tint);color:var(--ink)}
.aw-modal-h .aw-steps i{width:22px;height:22px;border:0;border-radius:50%;background:#fff;color:var(--muted);font-size:11px;font-weight:500;display:grid}
.aw-modal-h .aw-steps span.on i{background:var(--primary);color:#fff}
.aw-modal-h .aw-steps span.done i{background:var(--ok);color:#fff}
.aw-modal-x{border:0;background:var(--panel)}
.aw-modal-x:hover{background:var(--tint)}
.aw-modal-b{background:var(--page-bg)}
.aw-modal .aw-stage,.aw-modal .aw-side,.aw-modal .aw-pick{border:0;box-shadow:var(--card-sh)}
.aw-modal .aw-proofwrap{border:0;background:var(--panel)}
.aw-modal .aw-legend span{border:0;background:var(--panel)}
.aw-modal .aw-cmp{border:0}
.aw-modal .aw-adjust{border:0;background:var(--panel)}
.aw-modal .aw-adjust summary b{border:0;background:#fff;box-shadow:var(--card-sh)}
.aw-modal .aw-adjust summary:hover b{background:var(--tint)}
.aw-modal .aw-adjust .aw-tile{background:#fff;box-shadow:var(--card-sh)}
.aw-modal .aw-adjust .aw-tile:hover{background:var(--tint)}
.aw-modal .aw-adjust .aw-tile.on,.aw-modal .aw-adjust .aw-tile[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring),var(--card-sh)}
.aw-modal .aw-checks{gap:0}
.aw-modal .aw-chk{border:0;border-radius:0;background:transparent;padding:9px 0;border-top:1px solid var(--line)}
.aw-modal .aw-chk:first-child,.aw-modal .aw-checks-h+.aw-chk{border-top:0}
.aw-modal .aw-verdict{border:0;background:var(--panel)}
.aw-modal .aw-verdict.ok,.aw-modal .aw-verdict.pass,.aw-modal .aw-verdict.ready{background:var(--success-tint)}
.aw-modal .aw-verdict.warn{background:var(--attn-tint)}
.aw-modal .aw-verdict.fail,.aw-modal .aw-verdict.stop{background:#FBF3F1}
.aw-modal .aw-mini{border:0;background:var(--panel)}
.aw-modal .aw-pickpg,.aw-modal .aw-pg{border:0;box-shadow:var(--card-sh)}
.aw-modal .aw-pickpg.on,.aw-modal .aw-pg.on{box-shadow:var(--ring),var(--card-sh)}
.aw-modal .aw-wrongbox{border:0;background:var(--panel)}
.aw-modal .aw-confirm{border-top:0;box-shadow:0 -12px 28px -20px rgba(25,32,38,.4)}
@media (max-width:700px){.aw-modal-h .aw-steps span{height:28px;padding:0 9px 0 4px;font-size:11.5px}
.aw-modal-h .aw-steps i{width:20px;height:20px}}
/* ==== EVERY SCREEN (21 Oct 2026): narrow phones. The Your file / This product / Result facts beside the comparison drawing
   squeezed into a column a few characters wide (Galaxy Z Fold cover screen); under 480 px the drawing sits above the facts. ==== */
@media (max-width:480px){
  .aw-cmp{flex-direction:column;align-items:flex-start;gap:10px}
  .aw-cmpt{width:100%}
  .aw-cmpt div{gap:8px}
  .aw-cmpt span{flex:none;width:92px}
  .aw-cmpt b{min-width:0}}
/* ==== FINISH LAYERS (23 Oct 2026): spot UV, foil and white ink on a customer's own file. A white card under the proof per
   finish ("Your Spot UV Layer"): a tinted icon tile, the plain-words intro, then one slot per side the finish covers with three
   panel tiles (a page of the file, a file of its own, make it from my design) that turn tint with the ring when chosen, the
   layer as we read it in black and white beside its facts, warnings in the honey --attn tokens. On the proof the finish shows
   as a gloss or metal layer over the artwork (.aw-finol) with a Show the Finish switch. ==== */
.aw-fin{margin:16px 0 0;padding:18px 20px;background:#fff;border-radius:var(--radius);box-shadow:var(--card-sh)}
.aw-fin+.aw-fin{margin-top:12px}
.aw-fin-h{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.aw-fin-ic{width:40px;height:40px;border-radius:var(--radius);display:grid;place-items:center;background:var(--tint);color:var(--icon,var(--primary))}
.aw-fin-h h4{margin:1px 0 4px;font-size:15px;font-weight:500;color:var(--ink)}
.aw-fin-h p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.aw-fin-h p b{font-weight:500;color:var(--ink)}
.aw-fin-pgs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0}
.aw-fin-pgs>span{font-size:11.5px;font-weight:500;color:var(--muted);margin-right:4px}
.aw-fin-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);font-size:12px;font-weight:500;color:var(--ink);cursor:pointer}
.aw-fin-chip input{margin:0;accent-color:var(--primary)}
.aw-fin-chip.on{background:var(--tint);box-shadow:var(--ring)}
.aw-fin-slot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.aw-fin-sh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aw-fin-sh b{font-size:13px;font-weight:500;color:var(--ink)}
.aw-fin-st{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);font-size:11px;font-weight:500;background:var(--tint);color:var(--primary)}
.aw-fin-st.ok{background:var(--success-tint);color:var(--ok)}
.aw-fin-st.need,.aw-fin-st.warn{background:var(--attn-tint);color:var(--attn);box-shadow:inset 0 0 0 1px var(--attn-line)}
.aw-fin-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0}
.aw-fin-ways.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.aw-fin-way{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:center;padding:10px 12px;border:0;border-radius:var(--radius);background:var(--panel);font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:background .15s,box-shadow .15s}
.aw-fin-way:hover{background:var(--tint)}
.aw-fin-way[aria-pressed="true"]{background:var(--tint);box-shadow:var(--ring)}
.aw-fin-way:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.aw-fin-wic{width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;background:#fff;color:var(--icon,var(--primary))}
.aw-fin-wt{min-width:0}
.aw-fin-wt b{display:block;font-size:12.5px;font-weight:500;line-height:1.3}
.aw-fin-wt small{display:block;font-size:11.5px;line-height:1.35;color:var(--muted)}
.aw-fin-pick{margin-top:10px}
.aw-fin .aw-pickpg.dis{opacity:.5;cursor:not-allowed}
.aw-fin .aw-pickpg small{color:var(--muted)}
.aw-fin .aw-pickpg.on small{color:var(--primary);font-weight:500}
.aw-fin-drop{display:flex;align-items:center;gap:12px;margin-top:10px;padding:14px 16px;border:1.5px dashed var(--tint-dk);border-radius:var(--radius);background:var(--panel);cursor:pointer;transition:background .15s,border-color .15s}
.aw-fin-drop>svg{flex:none;box-sizing:content-box;padding:9px;border-radius:var(--radius);background:var(--tint);color:var(--icon,var(--primary))}
.aw-fin-drop:hover,.aw-fin-drop.drag{background:var(--tint);border-color:rgba(var(--prgb),.45)}
.aw-fin-drop:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.aw-fin-drop b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.aw-fin-drop small{display:block;font-size:11.5px;color:var(--muted)}
.aw-fin-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.aw-fin-file .fchip{margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-fin-file .fchip i{display:grid;place-items:center;color:var(--icon,var(--primary))}
.aw-fin .linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:500;color:var(--primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.aw-fin-note{display:grid;gap:6px;margin-top:10px}
.aw-fin-note>span{font-size:12px;font-weight:500;color:var(--ink)}
.aw-fin-note textarea{width:100%;min-height:64px;box-sizing:border-box;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font:inherit;font-size:13px;line-height:1.45;color:var(--ink);resize:vertical}
.aw-fin-note textarea:focus{outline:0;border-color:var(--field-line);box-shadow:var(--field-ring)}
.aw-fin-n{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.aw-fin-res{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:start;margin-top:10px;padding:12px;border-radius:var(--radius);background:var(--panel)}
.aw-fin-th{display:grid;place-items:center;padding:6px;border-radius:var(--radius-sm);background:#fff;box-shadow:var(--card-sh)}
.aw-fin-th img{display:block;max-width:100%;max-height:120px;height:auto}
.aw-fin-rt{min-width:0}
.aw-fin-rt>b{display:block;font-size:13px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.aw-fin-rt>small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}
.aw-fin-rt .aw-chk{margin-top:8px}
.aw-fin-acts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:10px}
.aw-fin-acts small{font-size:11.5px;color:var(--muted)}
.aw-fin-slot>.aw-chk{margin-top:10px}
.aw-fin-under{display:flex;gap:10px;align-items:center;margin:14px 0 0;padding:10px 12px;border-radius:var(--radius);background:var(--page-bg,#F5F6F7);cursor:pointer}
.aw-fin-under input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--primary)}
.aw-fin-under b{display:block;font-size:12.5px;font-weight:500;color:var(--ink)}
.aw-fin-under small{display:block;margin-top:2px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.aw-fin-how{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.aw-fin-how svg{flex:none;margin-top:1px;color:var(--icon,var(--primary))}
.aw-confirm .aw-finneed{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12px;font-weight:500;color:var(--attn)}
.aw-confirm .aw-finneed svg{flex:none;margin-top:1px}
.aw-proof .aw-finol{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .15s}
.aw-proof .aw-finol.off{opacity:0}
.aw-legend i.lg-fin{height:10px;border:0;border-radius:var(--radius-sm);background:linear-gradient(135deg,#C6DBEA,#FFFFFF 50%,#B6CFE2);box-shadow:inset 0 0 0 1px rgba(42,42,51,.18)}
.aw-legend i.lg-fin.gold{background:linear-gradient(135deg,#8B6B2E,#F6E3A1 50%,#A8823A)}
.aw-legend i.lg-fin.silver{background:linear-gradient(135deg,#7C838A,#F8FAFB 50%,#8C939A)}
.aw-legend i.lg-fin.rose{background:linear-gradient(135deg,#9A5A5C,#F9DCD3 50%,#A66A68)}
.aw-legend i.lg-fin.copper{background:linear-gradient(135deg,#87481F,#F3BC8E 50%,#93522A)}
.aw-legend i.lg-fin.white{background:#fff}
@media (max-width:700px){.aw-fin{padding:14px}
.aw-fin-ways,.aw-fin-ways.two{grid-template-columns:minmax(0,1fr)}
.aw-fin-res{grid-template-columns:76px minmax(0,1fr);gap:10px}}
@media (max-width:420px){.aw-fin-h{grid-template-columns:minmax(0,1fr)}
.aw-fin-ic{width:34px;height:34px}}
/* See the proof anywhere (Artwork.proofView, 24 Oct 2026): a white card on a dark backdrop, the pages on a work surface, zoom and
   the proof download in one bar. Full screen on a phone. */
body.pvw-open{overflow:hidden}
.pvw-back{position:fixed;inset:0;z-index:260;background:rgba(42,42,51,.58);display:flex;align-items:center;justify-content:center;padding:20px}
.pvw-card{background:#fff;border-radius:var(--radius);width:min(1100px,100%);height:min(92vh,900px);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.pvw-head{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 20px;border-bottom:1px solid var(--line)}
.pvw-t{min-width:0;flex:1}
.pvw-t b{display:block;font-weight:500;font-size:15px;color:var(--ink)}
.pvw-t small{display:block;margin-top:1px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvw-x,.pvw-ib{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0;flex:none}
.pvw-x:hover,.pvw-ib:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.35)}
.pvw-ib{width:34px;height:34px}
.pvw-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 20px;border-bottom:1px solid var(--line)}
.pvw-pages{display:flex;gap:6px;overflow-x:auto;max-width:100%;flex:1 1 auto;min-width:0;padding:2px}
.pvw-pages[hidden]{display:none}
.pvw-pg{flex:none;height:34px;padding:0 14px;border:1px solid var(--line);background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);font:500 12.5px/1 inherit;font-family:inherit;color:var(--ink);cursor:pointer;white-space:nowrap}
.pvw-pg.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pvw-zoom{display:flex;align-items:center;gap:6px;margin-left:auto}
.pvw-pct{min-width:46px;text-align:center;font-size:12.5px;font-weight:500;color:var(--ink)}
.pvw-dl{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pvw-gd{white-space:nowrap}
.pvw-gd[hidden]{display:none}
.pvw-gd[aria-pressed="true"]{background:var(--tint,#EAF0F3);border-color:var(--primary)}
.pvw-dl:disabled{opacity:.5}
.pvw-stage{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable;display:flex;padding:20px;background:var(--page-bg,#F2F4F6);overscroll-behavior:contain;-webkit-user-select:none;user-select:none;outline:none}
.pvw-sheet{margin:auto;flex:none;width:100%;background:#fff;box-shadow:0 1px 2px rgba(25,32,38,.08),0 14px 34px -16px rgba(25,32,38,.4);line-height:0;position:relative}
.pvw-sheet.busy{opacity:.55}
.pvw-canvas{display:block;width:100%;height:auto;-webkit-touch-callout:none}
.pvw-load{margin:0;padding:48px 20px;text-align:center;font-size:13px;line-height:1.5;color:var(--muted)}
.pvw-note{margin:0;padding:10px 20px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5;color:var(--muted)}
@media (max-width:700px){
.pvw-back{padding:0;align-items:stretch}
.pvw-card{width:100%;height:100%;height:100dvh;border-radius:0}
.pvw-head{padding:10px 12px 10px 16px}
.pvw-x{width:44px;height:44px}
.pvw-bar{padding:8px 12px;gap:8px}
.pvw-pages{flex:1 1 100%;order:1}
.pvw-zoom{margin-left:0;order:2}
.pvw-gd{order:3;min-height:36px}
.pvw-dl{order:4;margin-left:auto;min-height:36px}
.pvw-ib{width:40px;height:40px}
.pvw-stage{padding:10px}
.pvw-note{padding:8px 14px;font-size:11px}}
/* Quote mode, 8 Nov 2026 (Junaid: step 2 "shows a full product page where I can order, then I scroll all the way to the end to find
   Next"): only the options and quantities stay. The order summary with its own button, the arrival card, the template card and the
   cookie notice go; the quote already takes every choice as it is made (pb-quote-live) and the builder's Continue moves on. */
html.qmode #summaryBox,html.qmode .deliv.eta,html.qmode .tplcard,html.qmode .ckb,html.qmode .pbpop,html.qmode #pdpLinks,html.qmode .pdp-links{display:none!important}
html.qmode .pdp-buy .step{margin-bottom:12px}
/* Quote mode, compact (8 Nov 2026, Junaid: "not a full product page, a compact or minimal view, so it feels like requesting a quote
   rather than an order page"): no ready-made designs, no fixed-spec box, no guide links or price notes; the steps lose their cards and
   numbers; option tiles become small text chips (no pictures), four or more across; quantities are slim rows. The page is see-through,
   so it sits on the builder's warm panel. */
html.qmode,html.qmode body{background:transparent!important}
html.qmode #pdpDesigns,html.qmode .specfield,html.qmode .fin-guide,html.qmode p.vat,html.qmode .pw-date,html.qmode .qty-more+.hint{display:none!important}
html.qmode main.wrap{padding:0 2px 4px}
html.qmode .pdp-buy .step{margin:0 0 18px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html.qmode .step-h{margin:0 0 10px;padding:0;border:0}
html.qmode .step-h .step-n{display:none}
html.qmode .step-h h2{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html.qmode .step-h .step-sum{display:none}
html.qmode .field{margin:0 0 12px}
html.qmode .field-l{margin:0 0 6px;font-size:12.5px;font-weight:500;color:var(--ink)}
html.qmode .tiles{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))!important;gap:6px!important}
html.qmode .tile{min-height:0;padding:8px 26px 8px 10px!important;border:1px solid transparent;border-radius:var(--radius-sm);background:#fff;box-shadow:0 1px 2px rgba(42,42,51,.06);font-size:12.5px;text-align:left}
html.qmode .tile.ico{flex-direction:row;justify-content:flex-start}
html.qmode .tile .tile-ico,html.qmode .tile>svg{display:none!important}
html.qmode .tile small{font-size:11px;line-height:1.35}
html.qmode .tile[aria-pressed="true"]{border-color:transparent;background:#fff;box-shadow:0 0 0 1.5px var(--primary)}
html.qmode .tile[aria-pressed="true"]::after{width:12px;height:12px;right:8px}
html.qmode .qty{gap:4px}
html.qmode .qrow{min-height:38px;padding:6px 12px;border-color:transparent;background:#fff;box-shadow:0 1px 2px rgba(42,42,51,.06);font-size:13px}
html.qmode .qrow[aria-checked="true"]{box-shadow:0 0 0 1.5px var(--primary);background:#fff}
html.qmode .tile[aria-pressed="true"],html.qmode .qrow[aria-checked="true"]{border-color:transparent!important;box-shadow:0 0 0 1px var(--primary)!important;background:#fff!important}
html.qmode .pdp-buy .tiles button:not(.tile)[aria-pressed]{min-height:0;padding:8px 12px;border-color:transparent;background:#fff;box-shadow:0 1px 2px rgba(42,42,51,.06)}
html.qmode .pdp-buy .tiles button:not(.tile)[aria-pressed="true"]{box-shadow:0 0 0 1px var(--primary)!important;background:#fff!important;border-color:transparent!important}
html.qmode .seg button{min-height:0;padding:8px 12px;border-color:transparent!important;background:#fff!important;box-shadow:0 1px 2px rgba(42,42,51,.06)}html.qmode .seg button[aria-pressed="true"]{box-shadow:0 0 0 1px var(--primary)!important}

/* APPROVAL IS FINAL note in the checker (9 Nov 2026, live QA N21): the note takes its own full row above the tick and the buttons; in the
   modal's two-column bar it had taken the tick's narrow column and squeezed the words to one letter a line */
.aw-confirm>.pb-lock{grid-column:1/-1;order:-1;margin:0}
/* Page captions under the thumbnails, wrapped in their own box (live QA N40: "Inside back cover" and "Outside (back and front)" ran into each other) */
.aw-pages{gap:10px;align-items:flex-start}
.aw-pages .aw-pg{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;padding:4px 4px 6px;line-height:1.25}
.aw-pages .aw-pg .aw-pgn{position:static;white-space:normal;text-align:center;font-size:10.5px;padding:1px 4px;max-width:100%;overflow-wrap:anywhere}
.aw-pages .aw-pg.blank{justify-content:center;min-height:64px;border-style:dashed;color:var(--muted)}
.aw-pages .aw-pg.blank .aw-pgn{background:none;color:var(--muted)}
/* document proof pages (live QA N46) */
.aw-docnav{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.aw-docnav .btn-ghost{min-height:36px;padding:6px 14px}
/* a file that has not reached the server: the approval is not saved until it has (live QA N50) */
.sa-sending{margin:10px 0 0}
.sa-notsent{margin:12px 0 0;padding:12px 14px;border-radius:var(--radius-sm);background:var(--attn-tint,#FFF4DC);color:var(--ink)}
.sa-notsent p{margin:0 0 8px;font-size:14px;line-height:1.5}.sa-notsent b{font-weight:500}
/* ASKED AGAIN (10 Nov 2026): the apology at the top of Send Artwork when the customer comes from "Please Send Your Artwork Again" */
.sa-sorry{scroll-margin-top:96px;margin:0 0 16px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--panel,#F8F7F4);border-left:0;font-size:14px;line-height:1.55;color:var(--ink)}
.sa-sorry b{display:block;margin-bottom:4px;font-weight:500;font-size:15px}