/* Print Buddy: styles for the product page. Split out of site.css on 19 Oct 2026 (speed: every shop page loaded all of it);
   linked right after site.css by product.html. New rules that only these pages use go here; see docs/STYLE-GUIDE.md. */
/* ---------- Header ---------- */
.hide-review{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;background:var(--attn-tint);font-size:12.5px}
.hide-review .hr-k{font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.hide-review .hr-on{font-weight:500}
.hide-review .hr-btn{border-radius:var(--tag-radius);corner-shape:var(--tag-shape);cursor:pointer}
.hide-review .hr-btn:hover{box-shadow:0 0 0 2px var(--attn-ring)}
.hide-review .hr-n{margin-left:auto;font-size:12px}
/* ---------- PDP (approved business-cards layout, generalised) ---------- */
.pdp-head{grid-area:head}
.pdp-gallery{grid-area:gallery;position:sticky;top:20px}
.pdp-buy{grid-area:buy}
.g-main{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:1/1;overflow:hidden}
.g-main img{position:absolute;inset:0;object-fit:cover;object-position:center;transition:transform .35s ease}
.g-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.g-thumb{padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);aspect-ratio:1/1;position:relative;cursor:pointer}
.g-thumb img{object-fit:cover}
.g-thumb span{position:absolute;inset:auto 0 0 0;background:rgba(255,255,255,.92);font-weight:500;padding:3px 0;text-align:center}
.g-thumb[aria-current="true"]{outline:2px solid var(--primary);outline-offset:1px}
.g-note{font-size:11px;color:var(--muted);text-align:center;margin:8px 0 0}
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.step-n{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:500}
.step-h h2{font-weight:500;line-height:1.2}
.step-h .step-sum{margin-left:auto;font-size:12px;text-align:right}
.inline-field{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inline-field p{font-weight:400}
.qmore{display:block;width:100%;margin-top:6px;border:1px dashed var(--input);border-radius:var(--radius-sm);background:#fff;padding:11px 14px;font:inherit;font-size:13px;font-weight:500;color:var(--primary);cursor:pointer;transition:border-color .15s,background .15s}
/* Size summary bar for custom-size (area-priced) products */
.sizebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(135deg,var(--panel),var(--tint));border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px}
.sizebar svg{flex:none}
.sizebar b{font-weight:500}
.sizebar .per{margin-left:auto;font-size:12px;font-weight:500;background:#fff;white-space:nowrap}
.sizebar small{color:var(--muted);flex-basis:100%}
.deliv{margin-top:16px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--line);overflow:hidden}
.deliv-main{display:flex;gap:12px;padding:14px 16px;align-items:flex-start}
.deliv-main svg{flex:none}
.deliv-main .lbl{font-weight:500;letter-spacing:1px;text-transform:uppercase}
.deliv-main .date{font-weight:500}
.deliv-main .sub{font-size:12px}
.how-body{padding:0 16px 14px;font-size:12px;color:var(--muted);line-height:1.6}
.sum-head{display:flex;gap:12px;align-items:center;margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.sum-head img{border-radius:var(--radius);object-fit:cover;flex:none}
.sum-head b{display:block;font-weight:500}
.sum-head small{color:var(--muted)}
.sum-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.sum-top .what{line-height:1.5}
.sum-top .what b{color:var(--ink);font-weight:500}
.break-t{display:grid;grid-template-columns:1fr auto;padding:2px 14px 12px;color:var(--muted)}
.break-t span{padding:6px 0;border-top:1px solid var(--panel)}
.break-t span:nth-child(-n+2){border-top:0}
.break-t span:nth-child(even){text-align:right;color:var(--ink);font-weight:500}
.q-reassure{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;font-size:12px;color:var(--muted)}
.q-reassure span{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;background:var(--panel);line-height:1.4}
.q-reassure svg{flex:none}
.q-reassure b{font-weight:500}
@media (max-width:560px){.q-reassure{grid-template-columns:1fr}}
/* Templates, spec tables, product story (from product resources) */
.template-grid{display:grid;gap:10px;margin-top:12px}
.more-templates{margin-top:10px}
.more-templates summary{cursor:pointer;font-weight:500;color:var(--primary)}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.spec-table th{font-weight:500;text-align:left;padding:8px 12px 8px 0;color:var(--muted);width:42%;vertical-align:top}
.spec-table td{padding:8px 0;color:var(--ink)}
.spec-table tr+tr th,.spec-table tr+tr td{border-top:1px solid var(--panel)}
.res-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.res-grid.even{grid-template-columns:1fr 1fr;gap:12px 36px}
.res-grid h4{font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--eyebrow-ink);margin:0 0 10px}
.res-grid .story-side p:first-of-type{color:var(--ink)}
/* Read more (Junaid, 16 Oct 2026: the boxed panel did not sit right): the rest of the story opens in place in the same
   type as the paragraph above it, under a quiet pill control with a thin chevron that turns over when open */
.story-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.story-more>div{overflow:hidden;min-height:0}
.story-more.open{grid-template-rows:1fr}
.res-grid .story-side .story-more p,.res-grid .story-side .story-more p:first-of-type{font-size:13px;line-height:1.7;color:inherit}
.story-toggle{display:inline-flex;align-items:center;gap:9px;margin:4px 0 2px;padding:8px 14px 8px 16px;min-height:38px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--primary);font:500 13px/1.2 inherit;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.story-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.story-toggle svg{flex:none;transition:transform .2s ease}
.story-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.story-more,.story-toggle svg{transition:none}}
.glance .spec-table{margin-top:0}
.glance .spec-table tr+tr th,.glance .spec-table tr+tr td{border-top-color:var(--line)}
.artwork-checklist{margin:0;padding-left:18px;font-size:13px;line-height:1.9}
@media (max-width:900px){.res-grid,.res-grid.even{grid-template-columns:1fr}}
/* Styled note + sub-disclosure */
.pnote{display:flex;gap:10px;align-items:flex-start;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:8px 11px;font-size:11.5px;color:var(--ink);margin-top:12px;line-height:1.5}
.pnote svg{flex:none;margin-top:1px}
.subdisc{border-radius:var(--radius);margin-top:12px;background:#fff}
.subdisc summary{list-style:none;cursor:pointer;justify-content:space-between;align-items:center;font-weight:500}
.subdisc summary::-webkit-details-marker{display:none}
.subdisc summary::after{content:""}
.subdisc .sd-body{line-height:1.65}
/* Print terms library */
.terms-dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 0}
.terms-dl > div{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.terms-dl dt{font-size:13px;font-weight:500;color:var(--ink);margin:0 0 3px}
.terms-dl dt small{font-weight:500;color:var(--muted);margin-left:5px}
.terms-dl dd{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
/* Structured order summary */
.sum-rows{display:flex;flex-direction:column;gap:8px}
.sum-rows .sr{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.sum-rows .sr svg{flex:none;margin-top:1px}
.sum-rows .sr b{color:var(--ink);font-weight:500}
.sum-rows .chiprow{display:flex;flex-wrap:wrap;gap:5px}
.sum-rows .chiprow span{font-size:11px;font-weight:500;background:#fff;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:3px 9px}
/* Per-file document cards */
.file-card{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:10px;background:#fff}
.file-card .fhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.file-card .fic{flex:none;width:34px;display:grid;place-items:center}
.file-card .fname{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card .fmeta{display:block}
.file-card .frm{font-size:12px;text-decoration:underline}
.file-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.file-opts.r1{grid-template-columns:.55fr .65fr 1.25fr 1.15fr .55fr}
.file-opts.r2{margin-top:8px}
.file-opts label{font-size:11px;font-weight:500;color:var(--muted)}
.pbadge{display:flex;align-items:center;justify-content:center;height:36px;background:var(--tint);font-size:14px;font-weight:500}
.fprice{margin-top:10px;padding-top:10px;border-top:1px solid var(--panel);display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.fprice b{font-weight:500}
@media (max-width:900px){.terms-dl{grid-template-columns:1fr}
.file-opts{grid-template-columns:repeat(2,1fr)}}
.acc .num{flex:none;width:30px;display:grid;place-items:center;font-size:12px;transition:background .15s,color .15s}
.acc[open] .num{background:var(--primary);color:#fff}
.acc-body{padding:18px 22px 22px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
/* ---------- Responsive ---------- */
@media (max-width:900px){.pdp-gallery{position:static;margin-bottom:22px}
.acc-body{padding-left:22px}}
@media (max-width:480px){.step-h .step-sum{display:none}}
/* ---------- Artwork engine: live proof, bleed options, 10-point check ---------- */
/* Document printing file cards: proof row */
.fart{margin-top:10px;display:flex;gap:12px;align-items:flex-start;border-top:1px solid var(--panel);padding-top:10px}
.fart .fthumb{flex:none;width:58px;background:#fff;line-height:0;min-height:40px;display:grid;place-items:center}
.fart .fthumb canvas{width:100%;height:auto}
.fart .fnotes{flex:1;font-size:12px;line-height:1.5}
.fart .fnotes b{color:var(--ink);font-weight:500}
.fart .fnotes a{color:var(--primary);font-weight:500;cursor:pointer}
.fart .fnotes .fn{display:flex;gap:6px;align-items:flex-start;margin-top:3px}
.fart .fnotes .fn .ic{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.doc-confirm{margin:14px 0 0;border-top:1px solid var(--line);padding-top:10px}
.doc-confirm .aw-checks-h{margin-bottom:2px}
.file-opts.r2{grid-template-columns:1.25fr 1fr 1.1fr 1fr}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
@media (max-width:900px){.rev-grid{grid-template-columns:1fr}}
.file-opts.r3{grid-template-columns:1fr;margin-top:8px}
.field.textfield .txt{width:100%;max-width:420px;border:1px solid var(--input);border-radius:var(--radius-sm);height:40px;padding:0 12px;font:inherit;font-size:14px;margin-top:6px}
/* ---- My Account (orders.html): sidebar shell, order timeline, panels ---- */
.files .fr .fic{flex:none;width:30px;height:30px;border-radius:var(--radius-sm);background:var(--tint);place-items:center;font-size:8.5px;font-weight:500}
/* ---- My Account: quotes ---- */
/* document printing: the proof button */
.proofbtn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--primary);background:var(--tint);color:var(--primary);border-radius:var(--radius-sm);padding:8px 14px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
/* ---- product page: estimated arrival card ---- */
.deliv.eta{background:#fff;box-shadow:var(--shadow-1);overflow:hidden}
.eta-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;padding:18px 20px 16px;align-items:center}
.eta-main{display:flex;gap:14px;align-items:center;min-width:0}
.eta-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.eta-main .lbl,.eta-cut .lbl{font-weight:500;letter-spacing:1px;text-transform:uppercase}
.eta-main .date{font-weight:500;line-height:1.2;letter-spacing:-.2px}
.eta-main .sub{font-size:12px;line-height:1.5}
.eta-cut{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;border-left:1px solid var(--line);padding-left:20px;min-width:150px}
.eta-cut b{display:block;font-weight:500;white-space:nowrap}
.eta-cut .clock{font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}
.eta-steps{list-style:none;margin:0;padding:14px 20px 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--line)}
.eta-steps li{position:relative;align-items:flex-start;font-size:12px;color:var(--muted);min-width:0}
.eta-steps li i{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--tint-dk);background:#fff;color:var(--muted);display:grid;place-items:center;position:relative;z-index:1}
.eta-steps li i svg{width:14px;height:14px}
.eta-steps li.on i{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 0 0 3px rgba(var(--prgb),.14)}
.eta-steps li:not(:last-child)::after{content:"";position:absolute;top:13px;left:36px;right:2px;height:1px;background:var(--tint-dk)}
.eta-steps li span{min-width:0;position:relative;z-index:1;padding-right:8px}
.eta-steps li b{display:block;font-weight:500;color:var(--ink);line-height:1.3}
.eta-steps li small{display:block;line-height:1.4}
.deliv.eta details.how summary{padding:10px 20px}
@media (max-width:600px){.eta-top{grid-template-columns:1fr;gap:12px;padding:16px 16px 14px}
.eta-ic{width:38px;height:38px}
.eta-cut{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;border-left:0;padding:12px 0 0;border-top:1px solid var(--line);min-width:0;gap:12px}
.eta-steps{grid-template-columns:1fr;gap:0;padding:6px 16px 12px}
.eta-steps li:not(:last-child)::after{top:34px;left:12.5px;right:auto;bottom:-8px;width:1px;height:auto}
.eta-steps li span{padding-right:0}}
/* ---- product page: Print Buddy templates ---- */
.pbtpl-h{display:block;margin-bottom:4px}
.pbtpl-t{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pbtpl-h b{display:block;font-weight:500}
.pbtpl-h small{display:block;color:var(--muted)}
.pbtpl-h .btn{flex:none;min-height:0}
/* ---- product page Step 3: artwork panels ---- */
.ap-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.ap-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.ap-h b{display:block;font-weight:500}
.ap-h small{display:block;color:var(--muted)}
.ap-confirm{display:flex;gap:10px;align-items:flex-start;border:1px solid #EAD3C4;background:var(--accent-tint);border-radius:var(--radius-sm);padding:11px 14px;margin:0 0 14px;font-size:12px;cursor:pointer;transition:box-shadow .15s}
.ap-confirm.need{box-shadow:0 0 0 3px rgba(152,96,72,.18)}
.ap-confirm input{margin:3px 0 0;accent-color:var(--primary);flex:none;width:16px}
.ap-confirm b{display:block;font-weight:500}
.ap-confirm small{display:block;color:var(--muted)}
.ap-confirm .linkbtn{text-decoration:underline;cursor:pointer}
.tplcard{display:grid;align-items:center;margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.tc-txt b{display:block;font-weight:500}
.tc-txt small{display:block;color:var(--muted)}
.tc-go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap;border:1px solid var(--primary);border-radius:var(--radius-sm)}
/* ---- upload on demand; service rule and picker in My Account ---- */
.ap-own .ap-h{align-items:center}
.ap-openbtn{margin-left:auto;height:40px;padding:0 16px;font-size:13px;gap:8px}
@media (max-width:600px){.ap-own .ap-h{flex-wrap:wrap}
.ap-openbtn{margin-left:0;width:100%;justify-content:center}}
/* ---- compact Step 3 panels ---- */
.ap-c{padding:12px 14px}
.ap-c .ap-h{margin-bottom:0;align-items:center}
.ap-ic.sm{width:34px}
.ap-c .ap-h b{font-size:13px}
.ap-c .ap-h small{font-size:12px}
.ap-openbtn.btn-ghost{gap:6px;flex:none}
.ap-hide{margin-left:auto;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer}
.ap-own #artNow{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
/* Upload artwork (Junaid, 16 Oct 2026: it blended in): the one solid button in the step, in the theme colour */
.ap-openbtn.btn-ghost.solid{background:var(--primary);border-color:var(--primary);color:#fff;height:38px;padding:0 15px;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ap-openbtn.btn-ghost.solid:hover{background:var(--primary-dk);border-color:var(--primary-dk);color:#fff}
.ap-own #artNow .aw-drop{padding:26px 16px}
.ap-confirm.c{align-items:center}
.ap-confirm.c b{font-size:12px;font-weight:500}
.ap-confirm.c .linkbtn{font-size:12px}
.ap-next{font-size:12px;color:var(--muted);line-height:1.55;margin:0}
.ap-next b{font-weight:500}
.ap-next .linkbtn{text-decoration:underline;cursor:pointer}
.ap-design .art-brief{margin-top:10px}
.ap-design .art-brief[hidden]{display:none}
@media (max-width:600px){.ap-c .ap-h{flex-wrap:wrap}
.ap-openbtn.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 ---- */
.eta-steps{background:var(--ground)}
/* ---- added to basket ---- */
.addedbox{position:fixed;right:20px;bottom:20px;z-index:400;width:min(420px,calc(100% - 40px));display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-3);padding:14px 16px;transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .25s,opacity .25s}
.addedbox.show{transform:none;opacity:1;pointer-events:auto}
.addedbox img{object-fit:cover;border-radius:var(--radius-sm);flex:none}
.ab-t{flex:1;min-width:0}
.ab-t .eyebrow{margin-bottom:2px}
.ab-t b{display:block;font-weight:500}
.ab-t small{color:var(--muted)}
.ab-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ab-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:var(--panel);border-radius:50%;cursor:pointer;color:var(--muted);font-size:16px;line-height:1}
#bkCount.pulse{animation:bkpulse .6s}
/* ---- templates card beside the picture; design checklist ---- */
.tplcard.side{margin-top:16px}
.tplcard.side .tc-txt small{font-size:11.5px}
.tplcard.side .tc-go{font-size:12px}
.ap-check{margin-top:10px;font-size:12px}
.ap-check summary{cursor:pointer;font-weight:500;color:var(--primary);list-style:none}
.ap-check summary::-webkit-details-marker{display:none}
.ap-check summary::before{content:"+";display:inline-block;width:14px;font-weight:500}
.ap-check[open] summary::before{content:"\2212"}
.ap-check ul{padding-left:18px;color:var(--muted)}
/* Step 3 (Junaid, 16 Oct 2026): the three ways are one height, the logo box clears the line above, the logo tiles follow */
.rc-group{display:grid;grid-auto-rows:1fr;gap:10px}
.rc-group .radio-card{margin-bottom:0}
/* ---- round nine ---- */
.eta-steps li span{background:var(--ground)}
html.pos-mode .pdp-buy{max-width:none}
html.pos-mode .pdp-head h1{font-size:22px}
html.pos-mode .step-h{margin-bottom:10px}
html.pos-mode .step-h h2{font-size:16px}
/* ---- till view: two columns, price pinned, nothing to scroll for ---- */
html.pos-mode .pdp-buy{grid-template-columns:1fr 1fr}
html.pos-mode .pdp-buy>.step:nth-of-type(1){grid-column:1}
html.pos-mode .pdp-buy>.step:nth-of-type(2){grid-column:2}
html.pos-mode .deliv.eta .eta-top{padding:12px 14px}
@media (max-width:900px){html.pos-mode .pdp-buy{grid-template-columns:1fr}
html.pos-mode .pdp-buy>.step{grid-column:auto!important}}
/* ---- audit fixes ---- */
.pdp-head .from{min-height:0}
.notfound{grid-column:1/-1;max-width:640px;padding:28px 0 40px}
.notfound .row{flex-wrap:wrap;margin-bottom:22px}
.nf-cats{display:flex;flex-wrap:wrap;gap:8px}
.nf-cats a{border:1px solid var(--line);font-size:13px;background:#fff}
/* ---- till summary bar: one compact strip, spec pills right, arrival left of the button ---- */
html.pos-mode .summary .sum-rows .sr:first-child{grid-area:what;font-size:14px;color:var(--ink)}
html.pos-mode .summary .sum-rows .sr:first-child b{font-size:15px}
html.pos-mode .summary .sum-rows .chiprow{grid-area:chips;justify-content:flex-end;margin:0;padding-left:0}
html.pos-mode .summary .sum-rows .sr:last-child{grid-area:eta;font-size:12.5px;color:var(--muted)}
html.pos-mode .summary .sum-rows .sr:last-child b{color:var(--ink)}
html.pos-mode .summary .sum-rows .sr svg{color:var(--muted)}
@media (max-width:760px){html.pos-mode .summary .sum-rows .chiprow{justify-content:flex-start}}
html.pos-mode .deliv.eta{display:none!important}
html.pos-mode .pdp-head{align-items:center;flex-wrap:wrap}
html.pos-mode .pdp-head h1{margin:0}
html.pos-mode .pdp-head #specChips{margin:0 0 0 auto}
/* ---- artwork confirm: text left, actions right ---- */
html.pos-mode .pdp-buy>.step:last-of-type{margin-bottom:0}
html.pos-mode .pdp-head{margin-bottom:14px}
/* ---- online designer (design.html) ---- */
/* product page: design it online row */
.ap-online{display:flex;gap:12px;align-items:center;border:1px solid var(--tint-dk);background:var(--tint);border-radius:var(--radius-sm);padding:12px 14px;margin:0 0 12px}
.ap-online .ap-ic{flex:none}
.ap-online b{display:block}
.ap-online small{display:block;color:var(--muted)}
.ap-online .btn-ghost{font-size:12px;white-space:nowrap}
@media (max-width:640px){.ap-online{flex-wrap:wrap}
.ap-online .btn-ghost{width:100%}}
/* ======================================================================
   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){.pdp-head{grid-area:head}
.pdp-head h1{font-size:28px;margin:0 0 6px}
.pdp-gallery{display:contents}
.g-main{grid-area:main;aspect-ratio:1/1}
.pdp-gallery:not(:has(.g-thumbs)) .g-main{grid-column:1/-1}
.g-thumbs{grid-area:thumbs;grid-template-columns:1fr;grid-auto-rows:62px;align-content:start;gap:8px;margin-top:0}
.g-thumb{aspect-ratio:1/1;height:62px}
.g-note{grid-area:note;margin:8px 0 16px}
.pdp-buy{grid-area:buy}
.tplcard.side{grid-area:tpl;margin-top:16px}
.tplcard.side .tc-txt small{display:none}}
@media (max-width:380px){.g-thumbs{grid-auto-rows:54px}
.g-thumb{height:54px}}
/* Templates card on the product page (design pass, 16 Oct 2026): a small template drawing, an eyebrow, the selection as a chip, one action.
   One flat colour, the order summary's panel colour and line (Junaid, 16 Oct 2026: no fade to white). */
.tplcard{gap:16px;padding:14px 16px;background:var(--panel);border-color:var(--line);position:relative;overflow:hidden}
.tplcard>*{position:relative}
.tc-art{display:block;width:76px;height:58px}
.tc-art svg{display:block}
.tc-eyebrow{display:block;font-size:10px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--eyebrow-ink);margin:0 0 3px}
.tc-txt b{line-height:1.3}
.tc-line{font-size:12px;color:var(--muted);line-height:1.45}
.tc-go{background:var(--primary);color:#fff;border-color:var(--primary);padding:9px 13px;transition:background .12s}
.tplcard.side{gap:12px}
.tplcard.side .tc-art{width:60px;height:46px}
.tplcard.side .tc-line{display:none}
.tplcard.side .tc-txt b{font-size:13px}
@media (max-width:600px){.tc-go{grid-column:2;justify-self:start}
.tc-line{display:none}}
/* Templates card (Junaid, 16 Oct 2026: fewer words, no big button): the whole card is the link; a small round download
   icon on the right instead of Get templates, at every width; the picture keeps the product shape */
.tplcard{grid-template-columns:auto minmax(0,1fr) auto}
.tplcard .tc-go{width:40px;display:grid;place-items:center;background:#fff;justify-self:end;grid-column:auto;transition:background .15s,color .15s,border-color .15s}
.tplcard:hover .tc-go{background:var(--primary);border-color:var(--primary);color:#fff}
.tplcard.side .tc-go{width:38px;height:38px;padding:0}
@media (max-width:600px){.tplcard{grid-template-columns:auto minmax(0,1fr) auto}
.tplcard .tc-go{grid-column:auto;justify-self:end}}
.art-now-wrap .ap-hide{position:absolute;top:11px;right:0;z-index:1;display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:12px}
.art-now-wrap .ap-hide[hidden]{display:none}
.art-now-wrap:has(.aw-inline:not([hidden])) .ap-hide{display:none}
@media (max-width:600px){.art-now-wrap .ap-hide{position:static;display:flex;width:max-content}}
/* I need a logo design too: text on the left, a switch on the right; on opens the two logo choices and the logo brief */
.logo-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.logo-row .lr-t b{font-size:13px;font-weight:500;line-height:1.3}
.logo-row .lr-t small{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.pb-switch{flex:none;position:relative;padding:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);border:1px solid var(--input);background:var(--panel);cursor:pointer;transition:background .2s,border-color .2s}
.pb-switch i{position:absolute;top:2px;left:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .2s ease}
.pb-switch:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.logo-more{margin:0 0 8px}
@media (prefers-reduced-motion:reduce){.pb-switch,.pb-switch i{transition:none}}
.lr-state{font-size:12px;font-weight:500;color:var(--muted);min-width:22px;text-align:right}
/* Template cards never wider than their column (audit 16 Oct 2026: at 344 px the 300 px minimum ran past the edge) */
.template-grid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
/* One brief, opened and closed with a plus / minus (Junaid, 16 Oct 2026) */
.brief-tg{display:flex;align-items:center;gap:8px;width:100%;margin:12px 0 0;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;line-height:1.3;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.brief-tg small{font-weight:500;color:var(--muted)}
.brief-tg i{position:relative;margin-left:auto;width:14px;height:14px;flex:none}
.brief-tg i::before,.brief-tg i::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;border-radius:var(--radius-sm);background:var(--primary);transition:transform .2s}
.brief-tg i::after{transform:rotate(90deg)}
.brief-tg[aria-expanded="true"] i::after{transform:rotate(0deg)}
.brief-tg+.art-brief{margin-top:0}
.ap-design .ap-check{margin-top:12px}
.ap.ap-design.ap-c{padding:0;overflow:hidden}
.dz-sec{padding:14px 16px}
.dz-k{margin:0 0 9px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dz-list{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.dz-t{flex:1;min-width:0}
.dz-t b{display:block;font-weight:500;line-height:1.3}
.dz-t small{display:block;color:var(--muted);line-height:1.4}
.dz-p{font-size:13px;font-weight:500;white-space:nowrap;color:var(--ink)}
.dz-row[aria-checked="false"] .dz-p{font-weight:500}
.dz-ic{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center}
.dz-logo .logo-row,.dz-logo .logo-row.on{display:flex;align-items:center;gap:12px;cursor:pointer}
.dz-logo .lr-t{flex:1;min-width:0}
.seg2-b{font-family:inherit;font-size:12.5px;line-height:1.2}
.seg2-b b,.seg2-b span{white-space:nowrap}
.seg2-b:hover{color:var(--ink)}
.seg2-b[aria-checked="true"]{box-shadow:0 1px 3px rgba(20,24,28,.12),0 0 0 .5px rgba(20,24,28,.06)}
.seg2-b:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.dz-logo .lo-desc{font-size:12px;line-height:1.45}
.dz-brief .brief-tg{width:100%;color:var(--ink);gap:12px}
.dz-brief .brief-tg:hover{border:0}
.dz-brief .brief-tg:hover span{text-decoration:underline;text-underline-offset:3px}
.dz-brief .brief-tg[aria-expanded="true"]{background:none}
.dz-brief .brief-tg i{order:-1;margin:0;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:#fff}
.dz-brief .brief-tg i::before,.dz-brief .brief-tg i::after{left:9.5px;top:14.25px;width:11px;background:var(--primary)}
.dz-brief .brief-tg+.art-brief{padding:0;border:0;border-radius:0;background:none}
.dz-brief .art-brief textarea{background:#fff}
.dz-foot{display:flex;gap:12px;padding:14px 16px;border-top:1px solid var(--line);background:#FAFAF9}
.dz-foot p b{color:var(--ink);font-weight:500}
.ap-design .dz-foot .ap-check{margin-top:6px}
@media (max-width:600px){.dz-sec,.dz-foot{padding:13px 14px}
.dz-foot .dz-ic{display:none}}
/* Need it by a certain date? */
.needby{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.nb-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nb-ic{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center}
.nb-t{flex:1;min-width:180px}
.nb-t b{display:block;font-weight:500}
.nb-t small{display:block;color:var(--muted);line-height:1.45}
.nb-dp{flex:none;width:210px}
.nb-dp .dp-pop{left:auto;right:0}
.nb-res{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:12.5px;line-height:1.5;flex-wrap:wrap}
.nb-res p{flex:1;min-width:200px}
.nb-res p b{color:var(--ink);font-weight:500}
.nb-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ok,var(--success))}
.nb-res.exp .nb-dot,.nb-res.tight .nb-dot{background:var(--attn,var(--warning))}
.nb-res.no .nb-dot{background:var(--danger)}
.nb-res .mini{margin-left:auto;align-self:center}
@media (max-width:600px){.nb-dp{width:100%}
.nb-dp .dp-pop{left:0;right:auto}}
.qt-l{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.qt{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}
.qt:disabled{opacity:.55}
.qt-wa{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--muted);font-size:12.5px;text-decoration:none;transition:border-color .15s}
.qt-wa svg{flex:none}
.qt-wa b{font-weight:500}
@media (max-width:600px){.qt-l{grid-column:1/-1}
.qt{justify-content:center}}
/* Design check of the new pieces (16 Oct 2026, evening) */
.deliv.eta .needby{margin:0;padding:14px 20px 16px;border-top:1px solid var(--line)}
.nb-res[hidden]{display:none}
.deliv.eta .nb-res{margin-top:12px}
.nb-res [data-nbexp]{font-family:inherit;white-space:nowrap}
.nb-res [data-nbexp]:hover{background:var(--primary)}
@media (max-width:900px){.deliv.eta .needby{padding:12px 16px 14px}}
/* Approve-by as a flip clock (optional, Store Settings > Product Pages): ink tiles split across the middle, the changed tile
   folds over on its top edge; reduced motion keeps them still */
.flipclock{display:inline-flex;align-items:center;gap:4px;margin-top:6px;perspective:300px}
.flipclock[hidden]{display:none}
.fc-day,.fc-ap{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:0 9px}
.fc-sep{font-style:normal;font-weight:500;font-size:17px;color:var(--ink);margin:0 -1px}
.eta-cut.flipmode .lbl{margin-bottom:2px}
/* Fixed specifications as a spec card: icon, small label, the value; two across, one on phones */
.specgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sg-item{display:flex;gap:12px;border:1px solid var(--line);background:#fff}
.specgrid>.sg-item:only-child{grid-column:1/-1}
.sg-t{min-width:0}
.sg-t small{display:block;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sg-t b{display:block;font-weight:500;color:var(--ink);line-height:1.35}
.sg-t em{display:block;font-style:normal;color:var(--muted)}
.hint.sg-hint{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
.hint.sg-hint a{font-weight:500}
@media (max-width:480px){.specgrid{grid-template-columns:1fr}}
/* A finish or printed sides set by a design made online (23 Oct 2026): a tinted line under the field, never a side bar */
.hint.from-design{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:7px 10px;border-radius:var(--radius);background:var(--tint,#F2F6F8);color:var(--ink);font-size:11.5px}
.hint.from-design svg{flex:none;margin-top:1px;color:var(--primary)}
/* What happens next, under the basket button: three steps joined by a hairline */
.nextsteps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.nextsteps li{position:relative;flex-direction:column;text-align:center;font-size:11.5px;font-weight:500;color:var(--ink);line-height:1.3}
.nextsteps li+li::before{content:"";position:absolute;top:15px;left:calc(-50% + 22px);right:calc(50% + 22px);height:1px;background:var(--line)}
.ns-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink)}
.nextsteps li:first-child .ns-ic{color:#fff}
@media (max-width:600px){.qt{white-space:nowrap;font-size:11.5px;gap:5px;padding:0 4px}
.qt svg{flex:none}}
/* Same-day products: the clock under the price; a live green dot on the icon while same-day or next-day is open */
.sdstat{flex-wrap:nowrap;margin:14px 0 20px}
.sd-ic{position:relative;flex:none;display:grid;place-items:center}
.sd-ic i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--success)}
@media (prefers-reduced-motion:no-preference){.sdstat.sd-now .sd-ic i{animation:hbPulse 2.4s ease-in-out infinite}}
/* Order summary: "1 flag" stands alone; designs and size sit beside it as quiet notes */
.sum-rows .sr-qty span{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.sum-rows .sr-qty b{font-size:14px}
.sum-rows .sr-qty em{font-style:normal;font-size:12px;color:var(--muted)}
/* ---- 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 ---- */
.res-grid .story-side p:first-of-type{font-size:13px;line-height:1.7}
/* ---- Fourth round (Junaid, 17 Oct 2026): contact cards in the figure layout, design options as tiles, social icons,
   My Account pill, a calmer main menu ---- */
/* Step 3 design options: the logo row as an option tile with the switch, the two logo levels as tiles with a round check */
.dz-logo .logo-row,.dz-logo .logo-row.on{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.dz-logo .logo-row.on{background:var(--panel);border-color:rgba(var(--prgb),.45)}
.dz-logo .logo-row:hover{border:1px solid rgba(var(--prgb),.35)}
.dz-logo .dz-ic{width:30px;height:30px}
.dz-logo .logo-more{margin:10px 0 0}
.pb-switch{width:40px;height:22px}
.pb-switch i{width:16px;height:16px}
.pb-switch[aria-checked="true"] i{transform:translateX(18px)}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;background:none;border-radius:0}
.seg2-b{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:48px;padding:9px 12px 9px 36px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.seg2-b::before{content:"";position:absolute;left:12px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--input);background:#fff;transition:border-color .15s}
.seg2-b:hover{border-color:rgba(var(--prgb),.35)}
.seg2-b[aria-checked="true"]{background:var(--panel);border-color:rgba(var(--prgb),.45);color:var(--ink)}
.seg2-b[aria-checked="true"]::before{border-color:var(--primary);background:radial-gradient(circle,var(--primary) 0 4px,#fff 4.5px)}
.seg2-b b{font-weight:500}
.seg2-b span{font-size:12px;font-weight:500;color:var(--muted)}
/* ---- Eleventh round (Junaid, 17 Oct 2026): hero facts balanced, product page notice and spec tiles tidied ---- */
/* product page: the same-day notice as a card in the fact-card family */
.sdstat{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.sd-ic{width:40px;height:40px;border-radius:var(--radius);border:0;background:var(--panel);color:var(--icon)}
.sd-ic i{top:-3px;right:-3px;box-shadow:0 0 0 2px #fff}
.sdstat .sd-t{display:flex;flex-direction:column;min-width:0}
.sdstat .sd-t b{font-size:13.5px;font-weight:500;line-height:1.3}
.sdstat .sd-t small{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px}
/* Standard on every order: tiles share a height and start at the top whether or not they carry a second line */
.sg-item{align-items:flex-start;padding:12px 14px;border-radius:var(--radius)}
.sg-t b{margin-top:3px}
.sg-t em{font-size:12px;margin-top:2px}
/* ---- Twelfth round (Junaid, 17 Oct 2026): the facts row runs the full hero width under both columns, each fact two
   lines (figure with its label beside it, then the line), spaced out; the product page notice is as wide as the rest ---- */
.sdstat{max-width:none}
/* ---- 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 ---- */
.pair-link{display:inline-flex;align-items:center;gap:12px;margin:2px 0 26px;padding:7px 14px 7px 7px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:12.5px;line-height:1.35;text-decoration:none;transition:box-shadow .15s,transform .15s}
.pair-link .pl-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius);background:var(--panel);color:var(--icon);flex:none}
.pair-link b{font-weight:500}
.pair-link .pl-go{color:var(--muted);flex:none}
.pair-link:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
@media (max-width:520px){.pair-link{display:flex}
.pair-link .pl-t{flex:1}}
/* ---- 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-note{flex-basis:100%;margin:0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.cs-note.bad{color:var(--attn)}
/* ---- Page count stepper (perfect and wire bound, 17 Oct 2026): any even number of pages, the count typed or stepped ---- */
.pg-step input{width:64px;text-align:center;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.pg-step input::-webkit-outer-spin-button,.pg-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pg-step input:focus{outline:none}
/* ---- Coded price reference in the small print under the product pictures (Junaid, 17 Oct 2026): looks like a product
   code to customers; in a browser signed in to HQ it opens to say where the price comes from ---- */
.pref{white-space:nowrap;font-size:10px;letter-spacing:.3px;opacity:.75}
.pref.staff{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.pref-open{margin:6px auto 0;max-width:420px;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}
/* ---- 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 ---- */
.qp-top{padding-bottom:14px;border-bottom:1px solid var(--line)}
.qp-top h2{font-weight:500;line-height:1.3}
.quote-panel .qp-top p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.qb-pane.qp-form{min-height:0}
.qp-form>.qb-field:first-child{margin-top:16px}
.qb-draw.qp-draw{display:flex;align-items:center;gap:18px;margin-top:10px;padding:12px 18px;text-align:left}
.qb-draw.qp-draw[hidden]{display:none}
.qp-draw svg{flex:none}
.qb-draw.qp-draw p{margin:0}
.qp-draw .qb-draw-0{display:flex;align-items:center;gap:12px;padding:10px 0;text-align:left}
.qp-go{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.qp-next{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px}
.qp-next ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.qp-next li{border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.qp-ni{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--panel);color:var(--icon)}
.qp-go .cta{text-decoration:none}
.quote-panel .qp-join{margin:10px 0 0;font-size:12px;line-height:1.5;text-align:center;color:var(--muted)}
.qp-quick{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:box-shadow .15s}
.qp-quick>summary{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;list-style:none;cursor:pointer;font-size:12.5px;line-height:1.35;color:var(--ink)}
.qp-quick>summary::-webkit-details-marker{display:none}
.qp-quick .pl-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:var(--radius);background:var(--panel);color:var(--icon)}
.qp-quick .pl-t{flex:1;min-width:0}
.qp-quick .pl-t b{display:block;font-weight:500}
.qp-quick .pl-t small{display:block;margin-top:1px;font-size:11.5px;color:var(--muted)}
.qp-quick .pl-go{flex:none;color:var(--muted);transition:transform .2s}
.qp-quick[open] .pl-go{transform:rotate(90deg)}
.qp-quick:not([open]):hover{box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28)}
.qp-quick .qb-form{margin:4px 14px 0;padding-top:14px;border-top:1px solid var(--line)}
.qp-quick .qp-send{height:44px;margin:12px 14px 14px;padding:0 20px;background:var(--primary)}
.qp .q-reassure{margin-top:16px}
.qp .q-reassure svg{width:15px;height:15px;color:var(--icon)}
.qp .q-reassure a{color:inherit;text-decoration:none}
.qp .qb-done{padding:2px 0}
.qp-how{margin-top:20px}
.qp-how h2{font-weight:500}
.qp-how .stepsrow{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
@media (min-width:901px){.qp-how .stepsrow>div>b{min-height:0}}
@media (max-width:520px){.qb-draw.qp-draw{flex-direction:column;gap:8px;text-align:center}
.qp-draw svg{max-width:280px}
.qp-draw .qb-draw-0{justify-content:center}
.qp-next{gap:8px}
.qp-next li{font-size:12px}
.qp-how .stepsrow{grid-template-columns:1fr}
.qp-quick .qb-form{margin:4px 12px 0}
.qp-quick .qp-send{width:calc(100% - 24px);margin:12px 12px 12px;justify-content:center}}
/* ---- Fold map (folded leaflets, 17 Oct 2026): a compact spec card under Pages. On one centre line: the flat sheet's outside (its flat size
   measured on it) and inside with every panel's page number, an arrow, the sheet folded; under a hairline the spec: Pages
   (with panels a side), Fold and Folded Size in a narrow first column, Flat Size and Artwork (two lines) beside them. Spec wording only (Junaid) ---- */
.fold-map{margin:-4px 0 22px;padding:14px 18px 12px;background:var(--panel);border-radius:var(--radius)}
.fm-dims{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pages flat" "fold art" "fsize art";gap:7px 30px;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line)}
.fm-dims .d-pages{grid-area:pages}
.fm-dims .d-flat{grid-area:flat}
.fm-dims .d-fold{grid-area:fold}
.fm-dims .d-art{grid-area:art}
.fm-dims .d-fsize{grid-area:fsize}
.fm-dims dd span{font-weight:500;color:var(--muted)}
.fm-dims div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px;align-items:baseline}
.fm-dims dt{font-size:11.5px;font-weight:500;color:var(--muted)}
.fm-dims dd{margin:0;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.fm-dims .d-art dd{font-weight:500;font-size:12px;color:var(--muted)}
.fm-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:14px 22px}
.fm-row figure{display:grid;justify-items:center;gap:6px;margin:0}
.fm-d{display:flex;align-items:center;justify-content:center;height:var(--fmh,100px)}
.fm-row figcaption{font-size:11px;font-weight:500;color:var(--muted)}
.fm-sheet{fill:#fff;stroke:var(--icon);stroke-width:1.2}
.fm-in .fm-sheet{fill:rgba(var(--prgb),.07)}
.fm-fold path{stroke:var(--icon);stroke-width:1;stroke-dasharray:3 2.5;opacity:.8}
.fm-pg{font:500 10px Montserrat,sans-serif;fill:var(--ink);opacity:.55}
.fm-dim path{stroke:var(--muted);stroke-width:.8;fill:none}
.fm-dimt{font:500 8.5px Montserrat,sans-serif;fill:var(--muted)}
.fm-arrow{display:flex;align-items:center;height:var(--fmh,100px);padding-bottom:24px;color:var(--muted)}
.fm-folded .fm-d{padding-bottom:24px}
.fm-folded{color:var(--icon)}
@media (max-width:600px){.fold-map{padding:14px 16px}
.fm-dims{grid-template-columns:minmax(0,1fr);grid-template-areas:"pages" "flat" "fold" "fsize" "art"}}
@media (max-width:520px){.fm-row{gap:12px 14px}
.fm-arrow{display:none}}
/* ---- 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 .pdp-buy{max-width:none}
/* ==== Product pictures (17 Oct 2026): any number of views in a strip that scrolls, arrows on desktop, a counter on the big
   picture; on phones the strip is the column beside the picture, as tall as the picture, scrolling down ==== */
.g-count{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:rgba(255,255,255,.9);font-size:11px;font-weight:500;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.g-strip{position:relative;margin-top:12px}
.g-strip .g-thumbs{display:flex;gap:10px;margin:0;padding:3px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.g-strip .g-thumbs::-webkit-scrollbar{display:none}
.g-strip .g-thumb{flex:0 0 calc((100% - 46px)/5);scroll-snap-align:start}
.g-nav{position:absolute;top:50%;z-index:2;width:32px;height:32px;margin-top:-16px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(20,24,28,.14)}
.g-nav[hidden]{display:none}
.g-nav.prev{left:-12px}
.g-nav.next{right:-12px}
.g-nav:hover{border-color:rgba(var(--prgb),.35)}
@media (max-width:900px){.g-strip{grid-area:thumbs;margin:0;height:0;min-height:100%}
.g-strip .g-thumbs{flex-direction:column;height:100%;box-sizing:border-box;gap:8px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;overscroll-behavior-y:contain}
.g-strip .g-thumb{flex:0 0 62px;width:100%;height:62px}
.g-nav{display:none}
.pdp-gallery:not(:has(.g-strip)) .g-main{grid-column:1/-1}}
@media (max-width:380px){.g-strip .g-thumb{flex-basis:54px;height:54px}}
/* ==== Product page buy bar, v2 (Junaid, 18 Oct 2026: "better design and text formatting"): the product with its picture,
   the quantity as a chip and the choices after it, estimated arrival between hairlines, the total with the price each,
   a bigger button with a basket ==== */
.bb-prod{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.bb-im{flex:none;width:50px;height:50px;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.bb-im img{display:block;object-fit:cover}
.bb-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.bb-t b{overflow:hidden;font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.buybar .bb-spec{display:flex;align-items:center;min-width:0;margin:0;padding:0;border:0;overflow:hidden;font-size:12.5px;line-height:1.2;color:var(--muted);white-space:nowrap}
.bb-spec .bb-q{display:inline-flex;align-items:center;flex:none;height:22px;margin-right:11px;padding:0 9px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--tint);font-size:12px;font-weight:500;color:var(--ink)}
.bb-spec .bb-o{flex:none}
.bb-spec .bb-o+.bb-o::before{content:"";display:inline-block;width:3px;height:3px;margin:0 9px;border-radius:50%;background:currentColor;opacity:.55;vertical-align:middle}
.bb-eta{display:flex;align-items:center;gap:11px;flex:none;height:44px;padding:0 24px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.bb-eta svg{color:var(--icon,var(--primary))}
.bb-eta small,.bb-price small{display:block;font-weight:500;line-height:1.25;color:var(--muted)}
.bb-eta b{display:block;font-weight:500;color:var(--ink);white-space:nowrap}
.bb-price{flex:none;text-align:right;line-height:1.15}
.bb-price b{display:block;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.bb-price span{display:block;font-size:11.5px;color:var(--muted)}
.buybar .bb-cta{display:inline-flex;align-items:center;gap:9px;width:auto;height:48px;margin:0;padding:0 24px 0 22px;border-radius:var(--radius);font-size:14.5px;font-weight:500}
.buybar .bb-cta svg{width:18px;height:18px;flex:none}
@media (max-width:1180px){.bb-eta{display:none}}
@media (max-width:900px){.bb-prod{display:none}
.bb-price{margin-right:auto;text-align:left}
.buybar .bb-cta{height:46px;padding:0 18px}}
/* ==== Order received (Junaid, 18 Oct 2026) ==== */
/* the thumbnail strip opens at its first picture, ring and all (18 Oct 2026: snapping hid the 3 px edge, so the strip looked
   scrolled); the snap keeps the same 3 px edge */
.g-strip .g-thumbs{scroll-padding-inline:3px}
/* ---- Print Materials hub (18 Oct 2026; materials.html, material.html, js/materials.js): our own guide to every paper, board,
   film and fabric we print on. Cards follow the journal card (.jn-card) and the fact-card pattern; pictures sit in #EBEDEF
   frames that matchFrame() tunes to each photo ---- */
/* product page: Materials Explained links under At a glance (pdp.js matLinks) */
.mat-links{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.mat-links .ml-k{font-size:10.5px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink)}
.mat-links .ml-list{display:flex;flex-wrap:wrap;gap:6px}
.mat-links a{display:inline-flex;align-items:center;padding:5px 11px;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;font-size:12.5px;text-decoration:none;transition:box-shadow .2s,border-color .15s}
.mat-links a:hover{border-color:rgba(var(--prgb),.3);box-shadow:0 0 0 2px rgba(var(--prgb),.1)}
.mat-links a.ml-c{background:var(--panel)}
/* ---- Gazebo plan (18 Oct 2026, pdp.js gzRefresh): the gazebo from above with a wall on each side, side tabs and one row of
   wall tiles with what each adds. The four wall fields stay hidden underneath. */
.field.gz-hide{display:none!important}
.gz-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:18px;align-items:start}
.gz-svg{background:var(--panel);border-radius:var(--radius);padding:8px 6px}
.gz-svg svg{display:block}
.gz-svg .roof{fill:#fff;stroke:var(--ink);stroke-width:1.2}
.gz-svg .ridge{stroke:var(--ink);stroke-width:1;opacity:.28;fill:none}
.gz-svg .leg{fill:var(--ink)}
.gz-svg .w{stroke:var(--primary);stroke-width:7;stroke-linecap:round}
.gz-svg .w.half{opacity:.42}
.gz-svg .w.win{stroke-width:3;opacity:.55}
.gz-svg .w.open{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:4 4;opacity:.8}
.gz-svg .gap{stroke:#fff;stroke-width:1.6}
.gz-svg .glow{stroke:rgba(var(--prgb),.16);stroke-width:20;stroke-linecap:round}
.gz-svg .hit{stroke:transparent;stroke-width:26;stroke-linecap:round}
.gz-svg text{font:500 9.5px Montserrat,system-ui,sans-serif;fill:var(--muted)}
.gz-svg .side.on text{fill:var(--ink);font-weight:500}
.gz-note{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.gz-sum{margin:9px 4px 0;font-size:12.5px;line-height:1.55;color:var(--ink)}
.gz-sum b{font-weight:500}
.gz-sum span{color:var(--muted)}
.gz-bar{margin:14px 0 0}
/* walls, 19 Oct 2026: small headings, popular layouts drawn as plans, then the four sides as a list */
.gz-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 8px;font-size:12.5px;font-weight:500;color:var(--ink)}
.gz-k span{font-size:11.5px;font-weight:500;color:var(--muted)}
.gz-lay{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:2px 0 16px}
.gz-lay .gz-own{border-style:dashed}
.gz-lay .gz-own[aria-pressed="true"]{border-style:solid}
.gz-own .pen{fill:var(--panel);stroke:none}
.gz-own .penp{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.gz-lay button{display:grid;justify-items:center;align-content:start;gap:4px;min-width:0;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.gz-lay svg{display:block}
.gz-lay .r{fill:#fff;stroke:var(--line);stroke-width:1}
.gz-lay .w{stroke:var(--primary);stroke-width:3.2;stroke-linecap:round}
.gz-lay .w.h{opacity:.42}
.gz-lay .o{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2;opacity:.7}
.gz-sides{border-top:1px solid var(--line)}
.gz-side{border-bottom:1px solid var(--line)}
.gz-sh{width:100%;display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.6fr) auto;align-items:center;gap:10px;padding:8px 8px;margin:2px 0;background:none;border:0;border-radius:var(--radius);font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.gz-sh:hover{background:rgba(var(--prgb),.04)}
.gz-side.on .gz-sh{background:rgba(var(--prgb),.08)}
.gz-sn b{display:block;font-weight:500}
.gz-sn small,.gz-sv small{display:block;margin-top:1px;font-weight:500;color:var(--muted)}
.gz-sv{font-size:13px;font-weight:500;min-width:0}
.gz-side.none .gz-sv{color:var(--muted)}
.gz-svt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.gz-sp{font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ink)}
.gz-ch{font-size:12px;font-weight:500;color:var(--primary);padding:5px 10px;border:1px solid rgba(var(--prgb),.3);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;white-space:nowrap}
.gz-sh:hover .gz-ch{border-color:var(--primary)}
.gz-side.on .gz-ch{background:var(--primary);border-color:var(--primary);color:#fff}
/* inside an open side its walls are a short list: picture, name and how it is printed, what it adds */
.gz-walls{display:grid;gap:4px;padding:4px 0 10px 8px}
.gz-w{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.gz-w:hover{border-color:rgba(var(--prgb),.35)}
.gz-w[aria-pressed="true"]{background:rgba(var(--prgb),.08);border-color:rgba(var(--prgb),.45)}
.gz-wi{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius);background:var(--panel);color:var(--icon)}
.gz-wt b{display:block;font-weight:500;line-height:1.3}
.gz-wt small{display:block;line-height:1.35;color:var(--muted)}
.gz-wp{font-size:12.5px;font-weight:500;white-space:nowrap}
@media (max-width:420px){.gz-walls{padding-left:0}}
@media (max-width:640px){.gz-lay{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.gz-lay{gap:5px}
.gz-sh{grid-template-columns:minmax(0,.6fr) minmax(0,1.6fr) auto;gap:8px}}
.gz-bar .gz-bar-t{grid-template-columns:repeat(2,minmax(0,1fr))}
.gz-bar-n{margin:7px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.gz-grid{grid-template-columns:minmax(0,1fr)}
.gz-svg{max-width:300px;margin:0 auto}
.gz-sum{text-align:center}}
/* ---- Template proofs (19 Oct 2026): a file made on our template, shown in 3D on the gazebo and as its printed pieces ---- */
/* See It in 3D from the walls panel (19 Oct 2026): a dialog with the 3D view and a side column of choices */
.gz-3dbtn{display:flex;align-items:center;gap:10px;width:100%;margin:10px 0 0;padding:10px 12px;border:1px solid rgba(var(--prgb),.3);border-radius:var(--radius);background:#fff;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.gz-3dbtn:hover{border-color:var(--primary);background:rgba(var(--prgb),.04)}
.gz-3dbtn svg{flex:none;color:var(--icon)}
.gz-3dbtn span{font-size:13px;font-weight:500}
.gz-3dbtn small{display:block;font-weight:500;color:var(--muted)}
.gz3d{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;background:rgba(20,24,28,.55)}
.gz3d[hidden]{display:none}
.gz3d-box{width:min(1080px,100%);max-height:calc(100vh - 36px);overflow:auto;background:#fff;border-radius:var(--radius);box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.gz3d-box header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.gz3d-box header b{display:block;font-size:17px;font-weight:500}
.gz3d-box header small{display:block;font-size:12px;color:var(--muted)}
.gz3d-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.gz3d-b{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;padding:18px 20px 20px}
.gz3d-view{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:300px}
.gz3d-k{margin:0 0 8px;font-size:12.5px;font-weight:500;color:var(--ink)}
.gz3d-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 16px}
.gz3d-cols button{aspect-ratio:1;border-radius:50%;border:1px solid rgba(20,24,28,.18);background:var(--c);cursor:pointer;padding:0}
.gz3d-cols button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.gz3d-logo{display:grid;gap:2px;margin:0 0 16px;padding:12px;border:1px dashed rgba(var(--prgb),.45);border-radius:var(--radius);cursor:pointer;text-align:center}
.gz3d-logo span{font-size:13px;font-weight:500;color:var(--primary);overflow-wrap:anywhere}
.gz3d-logo small{color:var(--muted)}
.gz3d-turn{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.gz3d-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}
.gz3d-n{margin:0;font-size:11.5px;line-height:1.55;color:var(--muted)}
label.gz3d-k{display:block}
.gz3d-name{display:block;width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font:inherit;font-size:13px;color:var(--ink)}
.gz3d-name:focus{outline:0;border-color:var(--field-line);box-shadow:var(--field-ring)}
.gz3d-hint{display:block;margin:5px 0 16px;font-size:11px;color:var(--muted)}
.gz3d-save{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 14px;font-size:12.5px}
@media (max-width:760px){.gz3d{padding:0;place-items:end stretch}
.gz3d-box{max-height:100vh;border-radius:var(--radius) var(--radius) 0 0}
.gz3d-b{grid-template-columns:minmax(0,1fr);padding:12px 14px 16px}
.gz3d-cols{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}}

/* Thumbnails show the whole picture (Junaid, 20 Oct 2026: "the thumbnails were getting cropped"): square boxes at every width and
   contain instead of cover; the frame takes each photo's own grey (matchFrame), so nothing shows round a plain-background photo */
.g-thumb img,.g-thumb.pic-full>img{object-fit:contain!important}
@media (max-width:900px){.g-strip .g-thumb{flex:0 0 auto;height:auto;aspect-ratio:1/1}}
/* ==== EVERY SCREEN (21 Oct 2026): the step headings on two-column widths around 900 px. The choices summary on the right
   ("450gsm Silk · Front and back · Matt lamination") used to push the heading onto two lines; the heading keeps one line and
   the summary wraps instead. ==== */
.step-h h2{white-space:nowrap}
.step-h .step-sum{flex:1 1 auto;min-width:0}

/* ---- a design made in Design Online, attached in Step 3 (23 Oct 2026): its picture, the file, Change / View / Upload instead ---- */
.ap-online.ap-attached{align-items:flex-start;gap:14px;padding:12px}
.ap-attached .ap-thumb{flex:none;width:112px;aspect-ratio:4/3;display:grid;place-items:center;background:#fff;border-radius:var(--radius-sm);box-shadow:0 0 0 1px rgba(25,32,38,.08),0 2px 8px rgba(25,32,38,.08);overflow:hidden}
.ap-attached .ap-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.ap-att-t{min-width:0;flex:1}
.ap-att-k{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#2F7A52;margin:0 0 3px}
.ap-attached .ap-att-t small{overflow-wrap:anywhere}
.ap-att-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:9px}
.ap-attached .ap-att-acts .btn-ghost{margin-left:0;height:34px}
.ap-att-acts .linkbtn{font-size:12.5px}
.ap-own.ap-hasdesign{display:none}
@media (max-width:640px){.ap-attached .ap-thumb{width:88px}.ap-attached .ap-att-acts .btn-ghost{width:auto}}

/* Garment colour swatches and the t-shirt size boxes (t-shirts, caps) */
.tiles.swt .tile{display:inline-flex;align-items:center;gap:8px}
.tiles.swt .swatch{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(42,42,51,.28)}
.sizefield .field-aside{font-weight:500}
.sizes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.sizes .sz{display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:center;font-size:13px;font-weight:500;color:var(--ink)}
.sizes .sz input{width:100%;min-width:0;padding:9px 4px;text-align:center;font:inherit;font-size:15px;border:1px solid var(--line,#d5dbe0);border-radius:var(--radius-sm,8px);background:var(--card,#fff);color:var(--ink)}
@media(max-width:520px){.sizes{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* an imported product still switched off, seen from a signed-in staff browser (supplier import, 23 Oct 2026; pdp.js DRAFT) */
.notice.imp-draft{margin:0 0 14px;background:var(--attn-tint);border-color:var(--attn-line);color:var(--ink)}
/* the same online design again: update the basket line or add another (pdp.js sameDesignAsk, 24 Oct 2026) */
.same-ask{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:16px;background:rgba(20,26,32,.42)}
.same-ask .sa-card{position:relative;width:min(440px,100%);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-3);padding:26px 24px 22px}
.same-ask .sa-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--primary-tint,#EEF3F5);color:var(--primary);margin:0 0 12px}
.same-ask h2{font-size:18px;font-weight:500;margin:0 0 6px}
.same-ask p{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.5}
.same-ask .sa-btns{display:grid;gap:8px}
.same-ask .sa-btns .btn,.same-ask .sa-btns .btn-ghost{width:100%;justify-content:center;height:46px}
.same-ask .sa-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:0;background:transparent;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%}
.same-ask .sa-x:hover{background:var(--panel,#F2F4F6)}
/* ---- proof view and the "design has changed" notice (24 Oct 2026) ---- */
.ap-attached button.ap-thumb{border:0;padding:0;cursor:zoom-in;font:inherit;color:inherit;transition:box-shadow .15s}
.ap-attached button.ap-thumb:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.35),0 2px 8px rgba(25,32,38,.08)}
.ap-changed{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:9px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--attn-tint);border:1px solid var(--attn-line);font-size:12.5px;line-height:1.5;color:var(--ink)}
.ap-changed svg{flex:none;color:var(--attn)}
.ap-changed span{flex:1 1 220px;min-width:0}
.ap-changed .btn.sm{flex:none}
#artProofBtn{margin-left:0}
#artProofBtn[hidden]{display:none}
@media (max-width:640px){#artProofBtn{width:100%;justify-content:center}.ap-changed .btn.sm{width:100%;justify-content:center;min-height:36px}}
/* Document Printing: why a batch of files was not taken (size, count, uploads an hour) */
.dz-msg{margin:10px 0 0;padding:10px 12px;border-radius:var(--radius);background:var(--attn-tint);font-size:13px;line-height:1.5}
.dz-msg[hidden]{display:none}

/* ---- NO LAYOUT SHIFT (31 Oct 2026): the product area keeps a screen's height until pdp.js has drawn it, so the Explained section and
   the footer never show at the top of the page and then jump down. The links under the price (guide, setup) are in the first drawing. */
.pdp:empty{min-height:100vh}

/* ---- READY-MADE DESIGNS (1 Nov 2026): a row of designs above the reviews (pdp.js renderReadyDesigns). Cards follow SHOP SKIN 2026:
   no outline, --card-sh, the picture on the page grey; a scrolling row on phones. */
.rd-intro{margin:4px 0 0;font-size:13px;color:var(--muted)}
.rd-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.rd-card{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:var(--radius);background:var(--card,#fff);box-shadow:var(--card-sh);color:var(--ink);text-decoration:none;min-width:0}
.rd-card:hover{box-shadow:var(--card-sh),0 0 0 2px var(--ring,var(--primary))}
.rd-im{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;margin-bottom:8px;border-radius:var(--radius-sm);background:var(--page-bg,#EBEDEF);overflow:hidden}
.rd-im img{max-width:88%;max-height:88%;object-fit:contain;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.rd-card b{font-size:13px;font-weight:500;line-height:1.3}
.rd-card small{font-size:12px;color:var(--muted);line-height:1.35}
@media (max-width:900px){.rd-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.rd-card{flex:0 0 42%;scroll-snap-align:start}}
@media (max-width:420px){.rd-card{flex-basis:62%}}
/* THREE DOORS AFTER ADD TO BASKET (Simple Studio round 3, 3 Nov 2026; Instant Print's "How would you like to supply your design?"): the Added
   box asks once, with three tiles, when the line has no artwork yet and the product can be designed online */
.addedbox.doors{flex-direction:column;width:min(560px,calc(100% - 40px))}
.addedbox.doors>img{display:none}
.ab-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.ab-door{display:grid;justify-items:center;text-align:center;gap:6px;padding:12px 8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;transition:background .15s,box-shadow .15s}
.ab-door:hover{background:var(--tint);box-shadow:var(--card-sh)}
.ab-door.rec{background:var(--tint);border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.ab-door svg{width:22px;height:22px;color:var(--primary)}
.ab-door b{font-size:12.5px;font-weight:500;line-height:1.25}
.ab-door small{font-size:11px;line-height:1.35;color:var(--muted)}
.ab-doors-h{display:block;margin-top:10px;font-size:13.5px;font-weight:500}
.ab-doors-s{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@media (max-width:560px){.ab-doors{grid-template-columns:1fr}.ab-door{grid-template-columns:28px 1fr;justify-items:start;text-align:left;align-items:center;column-gap:10px}.ab-door b,.ab-door small{grid-column:2}}
/* READY-MADE DESIGNS ON THE PRODUCT PAGE (Simple Studio round 3b, 3 Nov 2026; Vistaprint's and Instant Print's template rows): a colourful row of the
   product's own designs with Customise on each card, before Your Product, Explained; only for products with Design Online on */
.pdp-designs{margin:26px 0 8px}
.pdp-designs .sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.pdp-designs .sec-h h2{font-size:22px;font-weight:500;margin:0;letter-spacing:-.2px}
.pdp-designs .sec-h p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.pdp-designs .sec-h a{font-size:13px;font-weight:500;color:var(--primary);white-space:nowrap}
.pdp-dz-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:14px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.pdp-dz-card{scroll-snap-align:start;display:grid;gap:8px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;transition:box-shadow .15s,transform .15s}
.pdp-dz-card:hover{box-shadow:var(--card-sh);transform:translateY(-2px)}
.pdp-dz-card .im{display:grid;place-items:center;aspect-ratio:1.55;background:var(--panel);border-radius:var(--radius-sm);overflow:hidden}
.pdp-dz-card .im img{max-width:92%;max-height:92%;object-fit:contain;box-shadow:0 1px 2px rgba(25,32,38,.1),0 8px 20px rgba(25,32,38,.12)}
.pdp-dz-card b{font-size:12.5px;font-weight:500;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pdp-dz-card small{font-size:11px;color:var(--muted)}
.pdp-dz-card .cta{display:inline-flex;align-items:center;justify-content:center;height:32px;border-radius:var(--radius-sm);background:var(--tint);color:var(--primary);font-size:12.5px;font-weight:500}
.pdp-dz-card:hover .cta{background:var(--primary);color:#fff}
@media (max-width:700px){.pdp-dz-row{grid-auto-columns:minmax(170px,1fr)}.pdp-designs .sec-h h2{font-size:19px}}

/* a large text size on a phone: the step heading wraps instead of pushing the page sideways (7 Nov 2026) */
.step-h{min-width:0}
@media (max-width:600px){.step-h h2{white-space:normal;min-width:0;overflow-wrap:anywhere}}

/* ---- HELPFUL LINKS AS ONE PANEL, 8 Nov 2026 (Junaid: "organise these better, so not taking too much space"): the paired product,
   the free guide and the setup guide sit in one card as hairline rows instead of three separate boxes with big gaps. ---- */
.pdp-links:has(.pair-link){display:flex;flex-direction:column;width:fit-content;max-width:100%;margin:2px 0 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.pdp-links .pair-link{display:flex;margin:0;padding:6px 14px 6px 6px;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
.pdp-links .pair-link+.pair-link{border-top:1px solid var(--line)}
.pdp-links .pair-link .pl-ic{width:30px;height:30px}
.pdp-links .pair-link .pl-t{flex:1}
.pdp-links .pair-link:hover{background:var(--panel);box-shadow:none;transform:none}
@media (max-width:520px){.pdp-links:has(.pair-link){width:100%}}

/* a kept online design needing a change (9 Nov 2026, live QA N13): the designer is the way forward, the ordinary upload row steps aside */
.ap-own.ap-remake{display:none}
/* folder cutter guides (live QA N47) */
.pbdie{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 16px;background:var(--panel,#F8F7F4);border-radius:var(--radius);margin:4px 0 10px}
.pbdie-sel{display:flex;flex-direction:column;gap:2px;min-width:0}
.pbdie-k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pbdie-sel b{font-weight:500}
.pbdie-sel small{color:var(--muted)}
.pbdie .btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.pbdie-all{margin:8px 0 0;padding-left:18px;line-height:1.8;font-size:13.5px}
.pbdie-all small{color:var(--muted)}
/* the voice note line under the design brief (10 Nov 2026): voice notes open once the order is placed */
.dz-voice{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.dz-voice b{font-weight:500;color:var(--ink)}
.dz-voice svg{flex:none;margin-top:2px;color:var(--icon,var(--ink))}
/* the staff till never shows ready-made designs (live QA N52): the till configures and adds to the sale */
html.pos-mode #pdpDesigns,html.pos-mode #readyDesigns,html.pos-mode .rd-sec{display:none!important}
/* collection-only products (same-day printing; Junaid 10 Nov 2026) */
.pdp-collect{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:7px 10px;border-radius:var(--radius-sm);background:var(--panel,#F8F7F4);font-size:11.5px;line-height:1.45;color:var(--muted)}
.pdp-collect svg{flex:none;width:14px;height:14px;margin-top:1px;color:var(--icon,var(--ink))}.pdp-collect b{font-weight:500}
/* the speed choices' estimated dates (Junaid 10 Nov 2026: option B, always "Estimated") and the Fast Track note */
.svc-note,.fast-note{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.fast-note{padding:6px 9px;border-radius:var(--radius-sm);background:var(--panel,#F8F7F4)}
.fast-note b,.pdp-collect b{font-weight:500;color:var(--ink)}
.qrow.off{opacity:.5;cursor:not-allowed}

/* GUIDANCE TEXT SMALLER (10 Nov 2026, Junaid: "this text and all that type of warning or help or guidance text make it smaller, so it does not look overcrowded"):
   notes, hints and warnings on the product page are 11.5px, one step under the option text */
.pdp .hint,.pdp-buy .hint{font-size:11.5px;line-height:1.45}
/* NEED IT FAST? (10 Nov 2026): the switch above the options, the Fast Track tag on choices that can be made fast, and greyed choices
   when the switch is on (pdp.js fastMark) */
.fast-only{display:flex;align-items:center;gap:10px;margin:2px 0 14px;padding:9px 12px;border-radius:var(--radius-sm);background:var(--panel,#F8F7F4);cursor:pointer;font-size:12.5px;line-height:1.4;color:var(--muted)}
.fast-only[hidden]{display:none}
.fast-only input{position:absolute;opacity:0;width:1px;height:1px}
.fast-only b{font-weight:500;color:var(--ink)}
.fo-sw{flex:none;position:relative;width:34px;height:20px;border-radius:var(--knob-r,10px);background:var(--input,#C9CCD1);transition:background .15s}
.fo-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--knob-r,8px);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.fast-only input:checked+.fo-sw{background:var(--primary,#33333D)}
.fast-only input:checked+.fo-sw::after{transform:translateX(14px)}
.fast-only input:focus-visible+.fo-sw{outline:2px solid var(--primary,#33333D);outline-offset:2px}
.tile .ft-tag{display:block;width:max-content;margin-top:5px;padding:1px 6px;border-radius:var(--tag-radius-s,2px);background:var(--panel,#F2F1EC);color:var(--ink);font-size:10px;font-weight:500;letter-spacing:.02em;line-height:1.5}
.tile.ft-no{opacity:.5;cursor:not-allowed;background:#fff}
.tile.ft-no .ft-tag{background:none;padding:0;color:var(--muted);font-weight:400}