/* Montserrat, self-hosted (variable weight 100 to 900, latin subset, from Google Fonts). Preloaded by every page. */
[hidden]{display:none!important}   /* hidden always hides (20 Oct 2026 audit: component display rules kept beating it) */
@font-face{font-family:"Montserrat Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:113.91%;ascent-override:84.95%;descent-override:22.03%;line-gap-override:0%}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/montserrat-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Print Buddy, shared styles. Colours: the one theme, Zest Charcoal (Junaid, 7 Nov 2026, design/print-buddy-one-theme), written into
   the THEMES V3 block by tools/build_themes_v3.py. Montserrat, weights 300 to 500 only. */
:root{
  /* the colours come from the one theme below (THEMES V3); only shared, non-theme values stay here */
  --radius:6px; --radius-sm:4px;
  /* needs attention: --attn and --attn-tint are aliases of the pack's --warning and --warning-tint; the line and ring stay */
  --attn-line:#F0DAAE; --attn-ring:#FCE9C6;
  --star:var(--logo);   /* rating stars in the logo lime, as the pack draws them (7 Nov 2026; a graphic, not words) */
  --shadow-1:0 6px 18px rgba(42,42,51,.08); --shadow-2:0 14px 34px rgba(42,42,51,.1); --shadow-3:0 20px 50px rgba(42,42,51,.18);
}
/* ==== THEMES V3 (written by tools/build_themes_v3.py from design/print-buddy-one-theme/print-buddy-theme-charcoal.css;
   Junaid, 7 Nov 2026: one theme, Zest Charcoal. Change the pack, then rerun; never edit by hand). ==== */
:root,[data-theme]{--logo:#8CA527;--logo-ink:var(--ink);--ink:#2A2A33;--muted:#64626C;--icon:var(--muted);--icon-active:var(--primary);--primary:#33333D;--primary-hover:#22222A;--on-primary:var(--surface);--surface:#FFFFFF;--panel:#F8F7F4;--tint:#F1F1F3;--line:#E6E6EA;--line-strong:#CDCDD4;--focus:var(--primary);--warning:#9A5B0E;--warning-tint:#FFF7E9;--success:#3F7A5E;--uv:#5B43C9;--uv-tint:#EFEBFB;--bleed:#E5007E;--trim:var(--ink);--safe:#00A3E0;--shadow-page:0 1px 2px rgba(42,42,51,0.08), 0 8px 24px rgba(42,42,51,0.08);--shadow-menu:0 0 0 1px #E6E6EA, 0 10px 28px rgba(42,42,51,0.12);--shadow-float:0 0 0 1px #E6E6EA, 0 2px 6px rgba(42,42,51,0.08);--shadow-callout:0 0 0 1px #E6E6EA, 0 4px 12px rgba(42,42,51,0.1);--shadow-sheet:0 -6px 24px rgba(42,42,51,0.12);--focus-ring:0 0 0 2px #FFFFFF, 0 0 0 3.5px #33333D;--radius-card:16px;--space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;--space-16:16px;--space-18:18px;--space-22:22px;--radius-handle:2px;--radius-check:3px;--radius-thumb:4px;--radius-flag:5px;--radius-control:6px;--radius-sheet:16px;--border-hairline:1px;--border-rule:1px;--border-select:1.5px;--border-selected:1.5px;--border-focus:1.5px;--opacity-disabled:0.5;--icon-stroke:1.5px;--icon-xs:12px;--icon-sm:14px;--icon-md:18px;--icon-lg:24px;--font-sans:Montserrat, "Open Sans", Arial, Helvetica, sans-serif;--logo-dark:var(--logo);--chrome-dark:var(--ink);--danger:#B3261E;--danger-tint:#FCEEEC;--success-tint:var(--tint);--success-line:var(--line-strong);--pic-bg:var(--tint);--prgb:51,51,61}
/* old names the site still reads, kept as aliases of the new names */
:root,[data-theme]{--primary-dk:var(--primary-hover);--blue:var(--logo);--accent:var(--primary);--accent-tint:var(--tint);--tint-dk:var(--line-strong);--eyebrow:var(--muted);--input:var(--line-strong);--ok:var(--success);--attn:var(--warning);--attn-tint:var(--warning-tint);--eyebrow-ink:var(--muted);--second-ink:var(--primary);--accent-ink:var(--primary);--second:var(--logo);--second-tint:var(--tint);--field-line:var(--primary);--field-ring:var(--focus-ring);--ground:var(--panel);--ground-2:var(--tint)}
/* ==== END THEMES V3 ==== */

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-y:scroll}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.catcard:focus-visible{outline-offset:0}
.tile:focus-visible,.qrow:focus-visible{outline-offset:2px}   /* clear of the chosen tile's own dark border (audit 28 Oct 2026) */
body{margin:0;background:#fff;color:var(--ink);font:400 15px/1.6 Montserrat,"Montserrat Fallback",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
.wrap{max-width:var(--page-w,1240px);margin:0 auto;padding:0 24px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--eyebrow-ink)}
.muted{color:var(--muted)}
h1{font-size:26px;line-height:1.25;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:14px;font-weight:500;padding:0 22px;height:46px;text-decoration:none;transition:background .15s,box-shadow .15s,transform .15s}
.btn:hover{background:var(--primary-dk);box-shadow:0 6px 14px rgba(var(--prgb),.22);transform:translateY(-1px)}
.btn:active{transform:none;box-shadow:none}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--primary);color:var(--primary);background:#fff;border-radius:var(--radius-sm);padding:10px 16px;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s,border-color .15s}
.btn-ghost:hover{background:var(--tint)}

/* ---------- Header ---------- */
.topbar{background:var(--primary);color:var(--ink);font-weight:500}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center}
.topbar nav{display:flex;gap:22px}
.topbar a{text-decoration:none;opacity:.92}
.topbar a:hover{opacity:1}
.mast{box-shadow:0 1px 0 var(--line)}
.mast .wrap{display:flex;align-items:center;gap:28px;height:102px}
.logo{text-decoration:none;display:flex;flex-direction:column;align-items:center;flex:none;width:fit-content}
.logo img,.logo svg{height:37px;width:auto;display:block}.logo svg{aspect-ratio:847/137.5}
.logo small{display:block;font-size:7.2px;letter-spacing:1.1px;color:var(--muted);font-weight:500;margin-top:6px;text-align:center;white-space:nowrap}
.search{flex:1;max-width:470px;margin-left:auto;display:flex;align-items:center}
.search:focus-within{background:#fff}
.search input{flex:1;border:0;background:none;outline:none;font:inherit;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search .go{flex:none;border:0;display:grid;place-items:center;transition:color .15s}
.mast .phone{white-space:nowrap}
.mast .phone b{display:block;color:var(--ink)}
.basket-btn{display:flex;align-items:center;font-size:13px;background:none;text-decoration:none;white-space:nowrap;color:var(--ink)}
.basket-btn svg{color:var(--ink)}
.basket-btn:hover{color:var(--primary)}
.basket-btn:hover svg{color:var(--primary)}
.basket-btn i{font-style:normal}
.mainnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;position:relative;z-index:30}
.mainnav .wrap{display:flex;justify-content:space-between;gap:12px;height:48px;align-items:center;font-weight:500;white-space:nowrap}
.mainnav a{text-decoration:none;display:inline-flex;align-items:center;height:100%;position:relative;transition:color .15s}
.mainnav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);opacity:0;transition:opacity .15s}
.mainnav a:hover{color:var(--primary)}
.mainnav a:hover::after{opacity:1}
.mainnav a.hl{color:var(--accent-ink)}
.mainnav a.hl::after{background:var(--accent)}
.mainnav a[aria-current="page"]{color:var(--primary);font-weight:500}
.mainnav a[aria-current="page"]::after{opacity:1}
/* Shop by Product dropdown */
.nav-dd{position:relative;height:100%;display:inline-flex;align-items:center}
.nav-dd-btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:100%;font:inherit;color:inherit;transition:color .15s}
.nav-dd-btn .car{color:var(--muted);transition:transform .18s;margin-top:1px}
.nav-dd:hover .nav-dd-btn{color:var(--primary)}
.nav-dd:hover .car{transform:rotate(180deg)}
.nav-dd-panel{position:absolute;left:-16px;top:100%;background:#fff;border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);box-shadow:0 18px 44px rgba(42,42,51,.14);padding:18px;min-width:460px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s ease;z-index:40}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel{opacity:1;visibility:visible;transform:none}
.crumbs{margin:18px 0 22px}
/* TEMPORARY product review bar (product page, local preview and staff browsers only; pdp.js hideReview) */
.hide-review{margin:-10px 0 18px;padding:8px 10px 8px 14px;border:1px dashed var(--attn-line);border-radius:var(--radius);color:var(--ink)}
.hide-review .hr-k{font-size:11px;color:var(--attn)}
.hide-review .hr-on{color:var(--attn)}
.hide-review .hr-btn{font:inherit;font-weight:500;font-size:12.5px;padding:6px 14px;border:1px solid var(--attn-line);background:#fff;color:var(--ink)}
.hide-review .hr-hide{background:var(--attn);border-color:var(--attn);color:#fff}
.hide-review .hr-n{color:var(--muted)}

/* Demo banner */
.demo{background:var(--accent-tint);color:var(--accent-ink);font-size:11px;font-weight:500;text-align:center;padding:5px 16px;letter-spacing:.3px}

/* ---------- Home ---------- */
.hero{border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero h1{font-size:44px;line-height:1.12;margin:14px 0 16px}
.hero h1 b{font-weight:500;color:var(--primary)}
.hero p{margin:0 0 26px;font-size:16px;color:var(--muted);max-width:520px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps div{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.steps b{display:block;font-size:14px;font-weight:500;margin:6px 0 4px}
.steps .n{font-size:12px;color:var(--accent-ink);font-weight:500}
.steps p{margin:0;font-size:13px;color:var(--muted)}

.section{margin-top:72px}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.sec-h h2{font-size:26px;font-weight:400;margin:4px 0 0}
.sec-h p{margin:6px 0 0;color:var(--muted)}
.link-arrow{font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.catcard{border:1px solid var(--line);border-radius:var(--radius);padding:13px;text-decoration:none;transition:border-color .15s, box-shadow .2s, transform .2s;display:flex;flex-direction:column;background:#fff}
.catcard:hover{border-color:var(--primary);box-shadow:0 14px 34px rgba(42,42,51,.1);transform:translateY(-2px)}
.catcard .im{background:var(--panel);border-radius:var(--radius);aspect-ratio:1/1;overflow:hidden;margin-bottom:12px}
.catcard img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.catcard:hover img{transform:scale(1.04)}
.catcard:hover b span{transform:translateX(3px)}
.catcard b span{transition:transform .2s ease}
.catcard b{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:500;margin:0 4px 4px}
.catcard b span{font-weight:500}
.catcard:hover b span{color:var(--primary)}
.catcard p{margin:0 4px 10px;font-size:12px;color:var(--muted);line-height:1.5}
.cc-foot{display:flex;justify-content:space-between;align-items:center;margin:auto 4px 2px;padding-top:10px;border-top:1px solid var(--panel)}
.cc-foot .go{font-size:12px;font-weight:500;color:var(--primary)}
.catcard .count{font-size:10px;color:var(--eyebrow-ink);font-weight:500;letter-spacing:.3px}

.feature{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.feature.dark{background:var(--primary);color:#fff;border:0}
.feature .pad{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.feature.dark .eyebrow{color:#AFC2CC}
.feature h2{font-size:30px;font-weight:400;margin:10px 0 12px;line-height:1.2}
.feature p{margin:0 0 22px;font-size:14px;color:var(--muted);max-width:420px}
.feature.dark p{color:#C9D5DB}
.feature .im{min-height:320px;background:var(--panel)}
.feature .im img{width:100%;height:100%;object-fit:cover}
.feature .btn-ghost.on-dark{background:transparent;color:#fff;border-color:#fff}

.popular{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.trust3{grid-template-columns:repeat(3,1fr)}
.trust3 div{border-radius:var(--radius);padding:20px}
.trust3 .n{color:var(--accent-ink);font-weight:500}
.trust3 b{font-size:15px;margin:6px 0 4px}
.trust3 p{margin:0;font-size:13px;color:var(--muted)}

/* ---------- Homepage components ---------- */
.band{border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;background:linear-gradient(120deg,var(--ink) 0%,#3A5468 100%);color:#fff}
.band .pad{padding:44px 48px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.band .eyebrow{color:#AFC2CC}
.band h2{font-size:30px;font-weight:400;margin:10px 0 12px;line-height:1.2}
.band h2 b{font-weight:500}
.band p{margin:0 0 22px;font-size:14px;color:#C9D5DB;max-width:430px}
.band .im{min-height:300px}
.band .im img{width:100%;height:100%;object-fit:cover}
.band .btn{background:#fff;color:var(--ink)}
.band .btn:hover{background:var(--panel)}
.rev{display:flex;flex-direction:column;gap:10px}
.rev footer{margin:0;background:none;color:var(--muted);font-size:12px}
.rev footer b{color:var(--ink);font-weight:500}
.cta-band p{margin:0 auto 24px;color:var(--muted);font-size:14px}
.stripline b{font-size:13px}
.team{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.team h2{font-size:30px;font-weight:400;line-height:1.25;margin:10px 0 14px}
.team .lead{margin:0 0 20px;color:var(--muted);max-width:440px}
.team-list p{margin:0;font-size:13px;color:var(--muted)}

/* ---------- Catalogue page ---------- */
.filters{position:sticky;top:20px}
.filters h3{font-weight:500;text-transform:uppercase;color:var(--eyebrow-ink)}
.filters button{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;position:relative;transition:background .12s,color .12s}
.filters button[aria-pressed="true"]::before{content:"";position:absolute}
.filters .count{border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape)}
.filters .fhelp{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:12px;background:var(--panel);font-size:12px;line-height:1.5}
.filters .fhelp b{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
.filters .fhelp a{color:var(--primary);font-weight:500;text-decoration:none}
.prodgrid{grid-template-columns:repeat(4,1fr)}
.filters-mobile button{border:1px solid var(--input);background:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:7px 14px;font-size:12px}

/* ---------- PDP (approved business-cards layout, generalised) ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.3fr);grid-template-areas:"gallery head" "gallery buy";column-gap:44px;align-items:start}
.g-main img{width:100%;height:100%}
.g-tag{border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:4px 11px}
.g-thumb img{width:100%;height:100%}
.g-thumb span{font-size:10px}
.trust{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.trust div{border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px;display:flex;gap:11px;align-items:center;font-size:12px;line-height:1.35}
.trust b{font-weight:500;font-size:13px;margin-right:6px}
.trust svg{flex:none}
.tagline{margin:4px 0 12px;color:var(--muted)}
.rating{display:flex;align-items:center;gap:8px;font-size:13px;margin:-4px 0 14px}
.rating b{font-weight:500}
.starwrap{position:relative;display:inline-block;font-size:15px;letter-spacing:1.5px;line-height:1;color:#DCE2E6}
.starwrap::before{content:"★★★★★"}
.starwrap i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--star);font-style:normal}
.starwrap i::before{content:"★★★★★"}
.catcard .rating{margin:0 4px 8px;font-size:11px;gap:6px}
.catcard .starwrap{font-size:12px;letter-spacing:1px}
.from{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.from b{font-size:22px;font-weight:500}
.from span{font-size:13px;color:var(--muted)}
.chip{font-size:12px;font-weight:500;background:var(--panel);border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:4px 10px}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px;background:#fff}
.step-n{flex:none}
.step-h h2{font-size:20px;margin:0}
.step-h .step-sum{color:var(--muted)}
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.tiles{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.tile{position:relative;text-align:left;background:#fff;border:1px solid var(--input);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;font-weight:500;line-height:1.3;transition:border-color .15s,background .15s}
.tile small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}
.tile:hover{border-color:var(--primary)}
.tile[aria-pressed="true"]{border-color:var(--primary);background:var(--tint);box-shadow:inset 0 0 0 1px var(--primary)}
.tile[aria-pressed="true"]::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tile:disabled{opacity:.45;cursor:not-allowed;border-style:dashed}
.tile.static{cursor:default;background:var(--panel);border-color:var(--line)}
.hint{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--input);border-radius:var(--radius-sm);overflow:hidden}
.stepper button{width:38px;height:38px;border:0;background:var(--panel);font-size:16px}
.stepper output{min-width:44px;text-align:center;font-weight:500}
.inline-field .field-l{margin:0}
.inline-field p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.dims input,.dims select{width:100%;border:1px solid var(--input);height:40px;padding:0 12px;font:inherit;font-size:14px;background:#fff}
/* chevron + spacing come from the shared dropdown rule below */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
/* production speed tiles balance by how many there are (Junaid, 28 Oct 2026): one runs the full width, two share the row,
   three sit side by side (on phones two, then the third across the full width), four make two rows of two */
.seg:has(>button:only-child){grid-template-columns:1fr}
.seg:has(>button:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
@media (max-width:520px){.seg:has(>button:nth-child(3):last-child){grid-template-columns:1fr 1fr}.seg>button:nth-child(3):last-child{grid-column:1/-1}}
.seg button{border:1px solid var(--input);background:#fff;border-radius:var(--radius-sm);padding:10px 12px;text-align:left;font-size:13px;font-weight:500}
.seg button small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.seg button[aria-pressed="true"]{border-color:var(--primary);background:var(--tint);box-shadow:inset 0 0 0 1px var(--primary)}
.qty{display:flex;flex-direction:column;gap:6px}
.qrow:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(42,42,51,.07)}
.qmore:hover{border-color:var(--primary);background:var(--tint)}
.qrow .dot{height:16px;border-radius:50%;border:1.5px solid var(--input);display:grid;place-items:center}
.qrow[aria-checked="true"]{border-color:var(--primary);background:var(--tint);box-shadow:inset 0 0 0 1px var(--primary)}
.qrow .q{font-size:14px;display:flex;gap:8px}
.qrow .unit{font-size:11px;font-weight:500;color:var(--muted);background:var(--panel);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:3px 9px;justify-self:start;width:max-content;max-width:100%}
.qrow .p{font-size:15px}
/* Size summary bar for custom-size (area-priced) products */
.sizebar svg{color:var(--primary)}
.sizebar b{font-size:15px}
.sizebar .per{color:var(--primary);border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:4px 11px}
.sizebar small{font-size:12px}
.badge{font-size:11px;font-weight:500;letter-spacing:.2px;border-radius:var(--radius-sm);padding:2px 7px;background:var(--accent-tint);color:var(--accent-ink);line-height:1.5}
.badge.green{background:var(--success-tint);color:color-mix(in srgb,var(--ok) 82%,var(--ink))}
.vat{font-size:12px;color:var(--muted);margin:0 0 10px}
.deliv-main svg{color:var(--primary);margin-top:2px}
.deliv-main .lbl{font-size:11px;color:var(--eyebrow-ink)}
.deliv-main .date{font-size:16px;margin:1px 0 2px}
.deliv-main .sub{color:var(--muted)}
.cutoff{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding:10px 16px;font-size:12px}
.cutoff .clock{font-variant-numeric:tabular-nums;font-weight:500;color:var(--accent-ink);background:var(--accent-tint);border-radius:var(--radius-sm);padding:2px 8px}
details.how{border-top:1px solid var(--line)}
details.how summary{list-style:none;cursor:pointer;padding:10px 16px;font-size:12px;font-weight:500;display:flex;justify-content:space-between;align-items:center}
details.how summary::-webkit-details-marker{display:none}
details.how summary::after{content:"+";font-size:16px;color:var(--muted)}
details.how[open] summary::after{content:"–"}
.radio-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;width:100%;text-align:left;background:#fff;margin-bottom:8px}
.radio-card .dot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--input);flex:none;margin-top:1px;display:grid;place-items:center}
.radio-card[aria-checked="true"] .dot{border-color:var(--primary)}
.radio-card[aria-checked="true"] .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.radio-card b{font-size:13px;font-weight:500;display:block}
.radio-card small{font-size:12px;color:var(--muted)}
.radio-card .rc-price{margin-left:auto;font-size:12px;font-weight:500;white-space:nowrap}
.summary{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:var(--panel)}
.sum-head img{width:46px;height:46px}
.sum-head b{font-size:15px}
.sum-head small{font-size:11px}
.sum-top .what{font-size:13px;color:var(--muted)}
.total{text-align:right}
.total small{display:block;font-size:11px;color:var(--muted)}
.total b{font-size:28px;font-weight:500;line-height:1.1}
details.break{margin:12px 0 16px;font-size:13px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
details.break summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;color:var(--ink);font-weight:500;font-size:12px}
details.break summary::-webkit-details-marker{display:none}
details.break summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .18s;margin-right:2px}
details.break[open] summary::after{transform:rotate(-135deg)}
.cta{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;height:52px;border:0;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:15px;font-weight:500;transition:background .15s}
.cta:hover{background:var(--primary-dk)}
.next{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.next i{font-style:normal;color:var(--input)}
.added{display:none;margin-top:10px;font-size:13px;color:var(--ok);font-weight:500}
/* Document printing upload */
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--tint)}
.dropzone svg{color:var(--primary);margin:0 auto 10px}
.dropzone b{font-size:14px;margin-bottom:3px}

.quote-panel h2{font-size:19px;font-weight:500;margin:0 0 6px}
.quote-panel p{font-size:13px;color:var(--muted);margin:0 0 18px}
.qform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qform .full{grid-column:1 / -1}
.qform label{display:block;font-size:12px;font-weight:500;margin-bottom:6px}
.qform input,.qform textarea,.qform select{width:100%;border:1px solid var(--input);border-radius:var(--radius-sm);padding:11px 12px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.qform select{height:42px;padding:0 12px}
.qform input:focus,.qform textarea:focus,.qform select:focus{outline:none;border-color:var(--primary);box-shadow:var(--field-ring)}
/* Date fields styled to match the rest of the form family */
.qform input[type="date"]{height:42px;padding:0 12px;appearance:none;-webkit-appearance:none;color:var(--ink)}
.qform input[type="date"]::-webkit-calendar-picker-indicator{width:16px;height:16px;margin-right:2px;opacity:.55;cursor:pointer;transition:opacity .15s}
.qform input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}
.qform input[type="date"]:invalid,.qform input[type="date"]:not(:focus):placeholder-shown{color:var(--muted)}
/* Custom themed date picker (native popups cannot be styled) */
.dp-input{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:42px;border:1px solid var(--input);border-radius:var(--radius-sm);padding:0 12px;font:inherit;font-size:14px;background:#fff;color:var(--ink);cursor:pointer;text-align:left}
.dp-input .ph{color:var(--muted)}
.dp-input svg{flex:none;color:var(--muted)}
.dp.open .dp-input,.dp-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--field-ring)}
.dp-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 50px rgba(42,42,51,.18);padding:16px;width:264px;display:none}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-head b{font-size:14px;font-weight:500}
.dp-nav{width:28px;height:28px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;display:grid;place-items:center;color:var(--muted);transition:border-color .15s,color .15s}
.dp-nav:hover{border-color:var(--primary);color:var(--primary)}
.dp-nav:disabled{opacity:.3;cursor:default}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dow{font-size:10px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--eyebrow-ink);text-align:center;padding:4px 0 6px}
.dp-day{height:30px;border:0;border-radius:var(--radius-sm);background:none;font-size:13px;font-weight:500;color:var(--ink);transition:background .12s,color .12s}
.dp-day:hover:not(:disabled){background:var(--tint);color:var(--primary)}
.dp-day.sel{background:var(--primary);color:#fff;font-weight:500}
.dp-day.today:not(.sel){box-shadow:inset 0 0 0 1.5px var(--line);font-weight:500}
.dp-day:disabled{color:var(--input);cursor:default}
.dp-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--panel);font-size:12px}
.dp-foot button{background:none;border:0;color:var(--primary);font-weight:500;font-size:12px;padding:0}

/* One dropdown look everywhere: custom chevron, well clear of the edge */
.qform select,.dims select,.file-opts select,form.quote select,.tpl-form select{appearance:none;-webkit-appearance:none;padding-right:38px;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 14px center/12px}
.qform textarea{min-height:88px;resize:vertical}
.qform .cta{grid-column:1 / -1;margin-top:4px}
.fulfil-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fulfil-cards .radio-card{margin-bottom:0}
.post-reveal{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .25s ease,margin .3s ease;margin-top:0}
.post-reveal.open{opacity:1;margin-top:10px}
@media (max-width:560px){.fulfil-cards{grid-template-columns:1fr}}
.q-reassure b{color:var(--ink)}
.q-sent{display:none;text-align:center;padding:34px 20px}
.q-sent .tick{width:52px;height:52px;border-radius:50%;background:var(--success-tint);color:var(--ok);display:grid;place-items:center;margin:0 auto 14px;font-size:22px}
.q-sent b{display:block;font-size:17px;font-weight:500;margin-bottom:6px}
.q-sent p{font-size:13px;color:var(--muted);margin:0}
.template-card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(42,42,51,.08)}
button.template-card{width:100%;background:#fff;font:inherit}
button.template-card:disabled{opacity:.6;cursor:wait}
.template-card .tic{height:36px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center;font-size:10px;font-weight:500}
.template-card small{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45}
.template-card .dl{color:var(--muted)}
.template-card:hover .dl{color:var(--primary)}
.more-templates summary{font-size:12px}
.res-grid p{margin:0 0 10px;font-size:13px;line-height:1.7}
.story-toggle:hover{background:var(--tint);border-color:var(--tint-dk)}
.glance{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
/* Styled note + sub-disclosure */
.pnote svg{color:var(--primary)}
.subdisc{border:1px solid var(--line)}
.subdisc summary{display:flex;padding:11px 14px;font-size:13px}
.subdisc summary::after{width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .18s;margin-right:3px}
.subdisc[open] summary::after{transform:rotate(-135deg)}
.subdisc .sd-body{padding:0 14px 12px;font-size:13px;color:var(--muted)}
.terms-dl dt small{font-size:11px}
/* Structured order summary */
.sum-rows .sr{font-size:13px;color:var(--muted)}
.sum-rows .sr svg{color:var(--primary)}
.sum-rows .chiprow{padding-left:23px}
.file-card .fic{height:34px;border-radius:var(--radius);background:var(--tint);color:var(--primary);font-size:10px;font-weight:500}
.file-card .fname{font-size:13px}
.file-card .fmeta{font-size:11px;color:var(--muted);font-weight:400}
.file-card .frm{background:none;border:0;color:var(--accent-ink);padding:0}
.file-opts select,.file-opts input{width:100%;margin-top:4px;border:1px solid var(--input);border-radius:var(--radius-sm);height:36px;padding:0 10px;font:inherit;font-size:13px;background:#fff}
/* file-card selects share the global dropdown look */
.pbadge{margin-top:4px;border-radius:var(--radius-sm);color:var(--primary)}
.fprice b{color:var(--ink);font-size:14px}
.dims select.unit{border-radius:var(--radius-sm);padding:0 8px;background:#fff}

.acc{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;background:#fff;transition:border-color .15s, box-shadow .2s}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--radius);transition:background .12s}
.acc summary:hover{background:var(--panel)}
.acc summary::-webkit-details-marker{display:none}
.acc .num{height:30px;border-radius:50%;background:var(--panel);color:var(--muted);font-weight:500}
.acc .t{font-size:16px;font-weight:500}
.acc .s{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.acc .plus{margin-left:auto;width:26px;height:26px;border-radius:50%;background:var(--panel);display:grid;place-items:center;color:var(--muted);transition:transform .18s}
.acc[open]{box-shadow:0 10px 30px rgba(42,42,51,.07)}
.acc[open] summary{border-radius:var(--radius) var(--radius) 0 0;background:#fff}
.acc[open] .plus{transform:rotate(45deg)}
.related{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

/* ---------- Basket / quote ---------- */
.narrow{max-width:760px}
.empty{border:1px dashed var(--input);border-radius:var(--radius);padding:48px;text-align:center;color:var(--muted)}
form.quote label{display:block;font-size:12px;font-weight:500;margin:16px 0 6px}
form.quote input,form.quote textarea,form.quote select{width:100%;border:1px solid var(--input);border-radius:var(--radius-sm);padding:11px 12px;font:inherit;font-size:14px;background:#fff}
form.quote textarea{min-height:120px;resize:vertical}
.notice{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;font-size:12px;color:var(--muted);margin-top:14px}

/* ---------- Footer ---------- */
footer{margin-top:80px;background:var(--primary);color:var(--ink)}
footer .wrap{padding-top:48px;padding-bottom:40px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
footer img,footer svg.pblogo{height:24px;width:auto;aspect-ratio:847/137.5;display:block;margin-bottom:14px}
footer a{display:block;text-decoration:none;margin-bottom:8px}
footer a:hover{color:var(--primary)}
footer .tagline-f{font-size:16px;color:var(--ink);font-weight:500;line-height:1.4;margin:0 0 10px}
.foot-bottom{border-top:1px solid var(--line)}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:16px;padding:16px 24px;font-size:11px;grid-template-columns:none}
.foot-bottom a{display:inline;margin:0;color:inherit;opacity:.85}
.foot-bottom a:hover{opacity:1;text-decoration:underline}

/* ---------- Sticky buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(110%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar .wrap{display:flex;align-items:center}
.buybar .cta{width:auto;padding:0 22px;height:44px;margin-left:auto;font-size:14px}

/* Toast */
.toast{position:fixed;right:18px;bottom:84px;z-index:2600;background:var(--primary);color:#fff;border-radius:var(--radius);padding:12px 18px;font-size:13px;font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none}
.toast.show{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .catgrid,.popular{grid-template-columns:repeat(3,1fr)}
  .prodgrid{grid-template-columns:repeat(3,1fr)}
  .related{grid-template-columns:repeat(3,1fr)}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .wrap{padding:0 16px}
  .hero .wrap{grid-template-columns:1fr}

  .logo small{font-size:5.4px;letter-spacing:1.1px}
  .mainnav .wrap{overflow-x:auto;scrollbar-width:none;gap:22px;justify-content:flex-start}
  .nav-dd-panel{display:none}
  .team{grid-template-columns:1fr;gap:26px}

  .band{grid-template-columns:1fr}
  .band .im{min-height:200px;order:-1}
  .band .pad{padding:28px 24px}

  .mast .phone,.topbar .tb-left,.search{display:none}

  .filters{display:none}
  
  .catgrid,.popular,.prodgrid{grid-template-columns:repeat(2,1fr)}
  .steps,.trust3{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr}
  .feature .im{min-height:220px;order:-1}
  .feature .pad{padding:28px 24px}
  .related{grid-template-columns:repeat(2,1fr)}

  .qform{grid-template-columns:1fr}
  body{padding-bottom:70px}
  body:not(:has(.buybar)){padding-bottom:0}   /* the room is for the product page buy bar only (audit 28 Oct 2026: a white strip under every other footer) */

}
@media (max-width:480px){

  .step-h h2{font-size:18px}

  .sec-h{flex-direction:column;align-items:flex-start}
  
  .catgrid,.popular{grid-template-columns:1fr}
  .prodgrid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Artwork engine: live proof, bleed options, 10-point check ---------- */
.aw{margin-top:12px}
.aw .dropzone{padding:22px 18px}
.aw-bar i{height:100%;background:var(--primary)}
.aw-orient.portrait{height:44px}
.aw-pick p{font-size:13px;line-height:1.55;margin:4px 0 10px}
.aw-pickpg:hover{border-color:var(--primary)}
.aw-pickpg.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.aw-pickpg input{width:15px;height:15px}
.aw-pickpg small{color:var(--muted)}
.aw-pick.pending .aw-pickbar{color:var(--accent-ink)}
.aw-proof .aw-ol{height:100%}
.aw-legend span{display:inline-flex}
.aw-legend i{display:inline-block;height:0}
.aw-toggle input{width:14px;height:14px}
.aw-pg.on{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.aw-dims b{font-size:14px}
.aw-tile:hover{border-color:var(--input)}
.aw-tile.on{border-color:var(--primary);background:var(--tint);box-shadow:inset 0 0 0 1px var(--primary)}
.aw-tile b{font-size:12px;display:flex}
.aw-tile small{font-size:11px;color:var(--muted);line-height:1.4}
.aw-chk b{font-size:12px;margin-bottom:1px}
.aw-chk .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.aw-chk.ok{border-color:var(--success-line);background:#F5FAF7}.aw-chk.ok .ic{background:#DCEEE4;color:var(--ok)}
.aw-chk.fixed{border-color:var(--tint-dk);background:var(--tint)}.aw-chk.fixed .ic{background:var(--tint-dk);color:var(--primary)}
.aw-chk.warn{border-color:#EAD3C4;background:var(--accent-tint)}.aw-chk.warn .ic{background:#F0DED3;color:var(--accent-ink)}
.aw-chk.fail{border-color:#E8C4C4;background:#FBF1F1}.aw-chk.fail .ic{background:#F2D6D6;color:var(--danger)}
.aw-chk.info{border-color:var(--line);background:var(--panel)}.aw-chk.info .ic{background:#E3E9EC;color:var(--muted)}
.aw-c input{flex:none;width:15px;height:15px}
.aw-hint{flex-basis:100%}
.aw-done .ic{width:22px;height:22px;border-radius:50%;background:#DCEEE4;color:var(--ok);display:grid;place-items:center}
.aw-done a{color:var(--primary);font-weight:500}
/* Document printing file cards: proof row */
.fart .fthumb{border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}
.fart .fthumb canvas{display:block}
.fart .fnotes{color:var(--muted)}
.fart .fnotes .fn.ok .ic{background:#DCEEE4;color:var(--ok)}.fart .fnotes .fn.warn .ic{background:#F0DED3;color:var(--accent-ink)}.fart .fnotes .fn.info .ic{background:#E3E9EC;color:var(--muted)}.fart .fnotes .fn.fixed .ic{background:var(--tint-dk);color:var(--primary)}
.aw-cmpsvg{flex:none}
.aw-cmpt div{gap:8px}
.aw-cmpt span{flex:none}
.aw-cmpt b{color:var(--ink)}
.aw-bgrow label{display:inline-flex;gap:8px}
.aw-bgrow input[type=color]{width:34px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1px;background:#fff}
.aw-mini:hover{border-color:var(--primary)}
/* Customer reviews on product pages */
.reviews{margin:40px 0 10px}
.rev{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff;line-height:1.55}
.rev p{margin:8px 0 10px;color:var(--ink)}
.rev b{display:block;font-size:13px;font-weight:500}
.rev small{font-size:11px;color:var(--muted)}
.rev .starwrap{font-size:15px;display:inline-block;margin-bottom:2px}
.aw-thumb .aw-olthumb{height:100%}
.svc button:disabled{opacity:.45;cursor:not-allowed}
.art-addon small{display:block;color:var(--muted);font-size:12px}

/* ---- Help and advice pages (help, artwork guidelines, turnaround, delivery, terms) ---- */
.docpage{padding-top:18px;padding-bottom:64px}
.doc-hero{max-width:780px;margin:10px 0 30px}
.doc-hero h1{font-size:34px;margin:8px 0 10px}
.doc-hero .lead{font-size:16px;color:var(--muted);line-height:1.65;margin:0}
.doc-layout{display:grid;align-items:start}
.doc-nav{position:sticky;display:flex;flex-direction:column}
.doc-nav a{text-decoration:none;line-height:1.4}
.doc-nav a:hover,.doc-nav a.on{color:var(--primary);border-left-color:var(--primary)}
.doc{min-width:0}
.doc h2{font-weight:500;scroll-margin-top:24px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:15px;font-weight:500;margin:22px 0 6px}
.doc p,.doc li{line-height:1.7;color:var(--ink)}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{padding-left:20px;margin:6px 0 14px}
.doc li{margin-bottom:4px}
.doc a{color:var(--primary);font-weight:500}
.doc table{width:100%;font-size:13px;margin:10px 0 20px}
.doc th,.doc td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.doc th{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--eyebrow-ink);font-weight:500}
.doc td b{font-weight:500;color:var(--ink)}
.helpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 40px}
.helpgrid-9{grid-template-columns:repeat(3,1fr)}
.helpcard{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff;display:flex;flex-direction:column;gap:8px}
.helpcard .ic{width:36px;height:36px;border-radius:var(--radius);background:var(--tint);color:var(--primary);display:grid;place-items:center}
.helpcard b{font-size:15px;font-weight:500;color:var(--ink)}
.helpcard span{font-size:12px;color:var(--muted);line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq .a{padding:0 18px 16px;font-size:14px;line-height:1.65;color:var(--ink)}
.faq .a p{margin:0 0 8px;font-size:14px}
.contact-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:44px}
.contact-strip div{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;font-size:13px;line-height:1.6;color:var(--ink)}
.contact-strip b{display:block;font-size:14px;margin-bottom:4px;color:var(--ink)}
.key{display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.5;color:var(--ink)}
.key i{display:inline-block;width:14px;height:14px;border-radius:var(--radius-sm);margin-right:8px;vertical-align:-2px}
.stepsrow{display:grid;grid-template-columns:repeat(4,1fr);margin:8px 0 24px}
.stepsrow div{border:1px solid var(--line);border-radius:var(--radius);padding:14px;font-size:13px;line-height:1.5;color:var(--muted)}
.stepsrow .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:500;margin-bottom:8px}
.stepsrow b{display:block;color:var(--ink);font-size:13px;font-weight:500;margin-bottom:2px}
@media (max-width:900px){.doc-nav{flex-direction:row;flex-wrap:wrap}.helpgrid,.stepsrow{grid-template-columns:1fr 1fr}.contact-strip{grid-template-columns:1fr}.doc-hero h1{font-size:28px}}
@media (max-width:480px){.helpgrid,.stepsrow{grid-template-columns:1fr}}
/* ---- Templates and About pages ---- */
.tpl-form select,.tpl-form input{border-radius:var(--radius-sm);height:38px;padding:0 10px;font:inherit;font-size:13px;background:#fff}
.tpl-form select{padding-right:38px}
.tpl-preview .src{margin:0}
@media (max-width:900px){}
/* ---- Design service brief and content uploads ---- */
.art-brief label small{display:block;line-height:1.45;margin-top:2px}
.art-brief textarea{border-radius:var(--radius-sm);padding:10px 12px;font:inherit;font-size:13px;line-height:1.5}
.aw-done .brief{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.oitem .brief{color:var(--ink)}

/* ---- My Account (orders.html): sidebar shell, order timeline, panels ---- */
.acct{padding-bottom:64px}
.acct-avatar{flex:none}
.acct-who b{font-size:14px}
.acct-who small{font-size:12px}
.acct-nav a{display:flex;align-items:center;text-decoration:none;font-weight:500;color:var(--ink);padding:9px 12px;border-radius:var(--radius);transition:background .12s,color .12s}
.acct-nav a:hover{background:var(--panel)}
.acct-nav a[aria-current="page"]{background:var(--tint)}
.acct-help .eyebrow,.acct-contact .eyebrow{margin-bottom:2px}
.acct-help a{color:var(--ink);text-decoration:none;font-weight:500}
.acct-contact a{color:var(--primary);text-decoration:none}
@keyframes acctfade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.acct-ph p{margin:0;font-size:13px;line-height:1.55}
.acct-stats div{padding:12px 16px}
.acct-stats b{font-size:22px;color:var(--primary);line-height:1.1;margin-bottom:2px}
.acct-stats div.todo b{color:var(--accent-ink)}
.acct-todo{border:1px solid #EAD3C4;background:var(--accent-tint)}
.acct-todo b{font-size:13px;margin-bottom:4px}
.acct-todo a{display:block;color:var(--accent-ink);font-weight:500;text-decoration:none;padding:3px 0}
.acct-todo a small{font-weight:500}
.acct-todo a:hover{text-decoration:underline}
.acct .empty{background:#fff}
.ord{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:16px;overflow:hidden}
.ord-id .eyebrow{display:block;margin-bottom:1px}
.ord-id b{font-size:16px;line-height:1.2}
.ord-id .meta,.ord-mid .meta{color:var(--muted)}
.ord-tot b{font-size:16px;line-height:1.2}
.ord-tot small{font-size:12px}
.ord-acts .btn-ghost{padding:7px 12px;font-size:12px}
.ord-steps li{font-size:12px;color:var(--muted);padding-top:14px}
.ord-steps li.done::before{background:var(--ok)}
.ord-steps li b{color:var(--ink);font-size:12px}
.ord-steps li.todo b{color:var(--muted);font-weight:500}
.ord-steps li small{display:block;font-size:11px;line-height:1.4;margin-top:1px}
.oi-head img{width:52px;height:52px;border-radius:var(--radius);object-fit:cover;border:1px solid var(--line)}
.oi-head>span:first-of-type{flex:1}
.oi-head b{font-size:14px}
.oi-head .sp{color:var(--muted)}
.acct .status{white-space:nowrap}
.files{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.files .fr{display:flex;gap:10px;font-size:12px;border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px}
.files .fr .fic{color:var(--primary);display:grid}
.files .fr .nm small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.files .fr a{color:var(--primary);font-weight:500}
.replace{margin-top:10px;font-size:12px}
.replace button{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;font-size:12px;cursor:pointer}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--eyebrow-ink);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--panel);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl .mini{border:1px solid var(--line);background:#fff;border-radius:var(--radius-sm);padding:5px 10px;font-size:12px;font-weight:500;color:var(--primary);margin-right:6px;cursor:pointer}
.acct .form input:focus{border-color:var(--primary)}
.acct .form .row2{grid-template-columns:1fr 1fr}
.addr{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.addr>div{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;font-size:13px;line-height:1.5;position:relative;background:#fff}
.addr>div>button{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--accent-ink);font-size:12px;text-decoration:underline;cursor:pointer}
@media (max-width:860px){

  .ord-mid .status{white-space:normal}

  .ord-steps li small{display:none}
  
  .ord-steps li b{font-size:11px}
  .addr,.acct .form .row2{grid-template-columns:1fr}
}

/* ---- Messages (My Account and the Control Panel drawer) and the account dashboard ---- */
.thread{display:flex;flex-direction:column;gap:8px}
.thread-empty{font-size:13px;color:var(--muted);padding:14px;border:1px dashed var(--input);border-radius:var(--radius);text-align:center;line-height:1.5}
.thread-empty a{color:var(--primary);font-weight:500}
.msg{max-width:78%;border-radius:var(--radius);padding:10px 12px;font-size:13px;line-height:1.5}
.msg.theirs{align-self:flex-start;background:var(--panel);border-bottom-left-radius:var(--radius-sm)}
.msg.mine{align-self:flex-end;background:var(--tint);border-bottom-right-radius:var(--radius-sm)}
.msg small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.msg-compose textarea{border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:14px;line-height:1.5}
.dash-row b{font-size:14px}

/* ---- My Account: orders list (rows that open) and the open order ---- */
.ord-filters button{border:0;background:none;font:inherit;font-size:13px;font-weight:500;color:var(--muted);padding:7px 12px;border-radius:var(--radius-sm)}
.ord-filters button[aria-selected="true"]{background:var(--tint);color:var(--primary)}
.aorow:hover{border-color:var(--primary);box-shadow:0 10px 26px rgba(42,42,51,.08)}
.aorow-imgs{flex:none}
.aorow-imgs img,.aorow-imgs i{width:56px;height:56px;border-radius:var(--radius);object-fit:cover;border:2px solid #fff;background:#fff}
.aorow-imgs i{font-size:12px;color:var(--primary)}
.aorow-main b{font-size:14px}
.aorow-st small{font-size:12px;line-height:1.4}
.aorow-tot b{font-size:15px}
.aorow-tot small{font-size:12px}
.ord-hero .ord-id b{font-size:22px;font-weight:500}
.ord-facts>div{padding:14px 20px;font-size:12px;color:var(--muted);line-height:1.55}
.ord-facts>div:last-child{border-right:0}
.ord-facts span{display:block}
@media (max-width:860px){

  .ord-facts>div:last-child{border-bottom:0}
  .ord-hero .ord-id b{font-size:19px}
}

/* ---- My Account: quotes ---- */
.qc-head img,.qc-ph{width:52px;height:52px;border-radius:var(--radius);object-fit:cover;flex:none}
.qc-head>span:first-of-type{flex:1}
.qc-head b{font-size:15px}
.qc-head .meta{color:var(--muted)}
/* document printing: the proof button */
.proofbtn:hover,.proofbtn.on{background:var(--primary);color:#fff}

/* ---- My Account: proof viewer, row markers, sidebar cards ---- */
.proofview[hidden]{display:none}
.pv-h .eyebrow{display:block;margin-bottom:2px}
.pv-h b{font-size:16px}
.pv-h small{display:block;font-size:12px}
.pv-x:hover{color:var(--primary)}
.pv-acts .btn,.pv-acts .btn-ghost,.pv-f .btn-ghost{height:42px;padding:0 20px}
.pv-note{min-width:200px}
.pv-ask[hidden],.pv-acts[hidden]{display:none}
.pv-ask textarea{border-radius:var(--radius-sm);padding:10px 12px;font:inherit;font-size:13px;line-height:1.5}
.pv-ask>div{gap:10px}
.pv-ask .btn,.pv-ask .btn-ghost{height:42px;padding:0 20px}
.proof-acts .btn,.proof-acts .btn-ghost{height:42px;padding:0 20px;display:inline-flex;font-size:13px;font-weight:500}
.acct-contact .eyebrow,.acct-help .eyebrow{margin-bottom:6px}
.acct-contact small{font-size:12px;line-height:1.6}
.acct-contact .btn-ghost{padding:9px 12px;font-size:12px}
.acct-help a{display:flex;align-items:center;padding:7px 0}
/* ---- product page: estimated arrival card ---- */
.deliv.eta{border:1px solid var(--line)}
.eta-ic{background:var(--tint);color:var(--primary);flex:none}
.eta-main .lbl,.eta-cut .lbl{font-size:11px;color:var(--eyebrow-ink)}
.eta-main .date{font-size:21px;margin:2px 0}
.eta-main .sub{color:var(--muted)}
.eta-cut b{font-size:15px;margin-top:2px}
.eta-cut .clock{display:inline-block;font-weight:500;color:var(--accent-ink);background:var(--accent-tint);border-radius:var(--radius-sm);padding:4px 10px}
.eta-steps li{display:flex;gap:10px}
.eta-steps li b{font-size:12px}
.eta-steps li small{font-size:11px}
@media (max-width:600px){
  
  .eta-ic svg{width:19px;height:19px}
  .eta-main .date{font-size:19px}
  
  .eta-cut b{font-size:14px;margin:1px 0 0}
  
  .eta-steps li{padding:8px 0}

}
/* ---- product page: Print Buddy templates ---- */
.pbtpl-h b{font-size:15px;color:var(--ink)}
.pbtpl-h small{font-size:12px;line-height:1.5;margin-top:4px;max-width:72ch}
.pbtpl-h .btn{font-size:12px;padding:9px 14px}
.tpl-custom-h b{font-size:13px;color:var(--ink)}
.tpl-custom-h small{font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}
.tpl-custom-f input,.tpl-custom-f select{border:1px solid var(--input);border-radius:var(--radius-sm);height:38px;padding:0 10px;font:inherit;font-size:13px;background:#fff;width:96px}
.tpl-custom-f select{padding-right:28px}
.tpl-custom-f .x{font-size:16px;color:var(--muted);padding-bottom:10px}
.tpl-custom-f .btn-ghost{height:38px;padding:0 16px;font-size:12px}
/* ---- uploader: steps, sides question, twin slots, quiet checks ---- */
.aw-steps i{height:22px;border-radius:50%;display:grid;font-size:11px;color:var(--muted);background:#fff}
.aw-steps span.on{color:var(--primary)}
.aw-sideic svg{width:48px;height:34px}
.aw-slot:hover,.aw-slot.drag{border-color:var(--primary);background:var(--tint)}
.aw-slot svg{color:var(--primary)}
.aw-slot b{font-size:13px}
.aw-slot small{font-size:12px;color:var(--muted);line-height:1.4}
.aw-slot.filled{border-style:solid;border-color:var(--success-line);background:#F5FAF7;cursor:default}
.aw-slot.filled svg{color:var(--ok)}
.aw-slot .linkbtn{font-size:12px;color:var(--primary);margin-top:4px}
.aw-chk.quiet{padding:6px 11px}
.aw-chk.quiet b{margin:0}
.aw-wrong .linkbtn{color:var(--muted);font-size:12px;background:none;border:0;padding:0}
/* checkout: artwork gate */
.artgate{border:1px solid #EAD3C4;background:var(--accent-tint)}
.artgate p{margin:0 0 12px}
/* ---- uploader: folded options, verdict, one tick ---- */
.aw-adjust-s i{color:var(--input);padding:0 2px}
.aw-adjust summary b{font-size:12px}
.aw-adjust[open] summary{border-bottom:1px solid var(--panel)}
.aw-verdict .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.aw-verdict b{font-size:14px;line-height:1.3}
.aw-verdict small{font-size:12px;color:var(--muted);margin-top:2px}
.aw-verdict small .linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--primary);font-weight:500;text-decoration:underline}
.aw-verdict.ok{border-color:var(--success-line);background:#F5FAF7}.aw-verdict.ok .ic{background:#DCEEE4;color:var(--ok)}
.aw-verdict.fixed{border-color:var(--tint-dk);background:var(--tint)}.aw-verdict.fixed .ic{background:var(--tint-dk);color:var(--primary)}
.aw-verdict.warn{border-color:#EAD3C4;background:var(--accent-tint)}.aw-verdict.warn .ic{background:#F0DED3;color:var(--accent-ink)}
.aw-verdict.fail{border-color:#E8C4C4;background:#FBF1F1}.aw-verdict.fail .ic{background:#F2D6D6;color:var(--danger)}
.aw-c.one{border:1px solid var(--line);border-radius:var(--radius);align-items:flex-start}
.aw-c.one input{width:18px;margin-top:2px}
/* ---- uploader window and the one-line summary left on the page ---- */
.aw-modal[hidden]{display:none}
.aw-modal-h{flex:none}
.aw-modal-t .eyebrow{display:block}
.aw-modal-t b{font-size:16px}
.aw-modal-t small{font-size:12px;color:var(--muted)}
.aw-modal-h .aw-steps{margin:0}
.aw-modal-x{flex:none}
.aw-modal-x:hover{border-color:var(--primary);color:var(--primary)}
.aw-inline-row b{display:block}
.aw-inline-row small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.aw-inline-row svg{color:var(--ok)}
.aw-inline-ic{flex:none}
.aw-inline-ic svg{color:var(--accent-ink)}
.aw-inline-row .btn,.aw-inline-row .btn-ghost{height:38px;padding:0 16px;display:inline-flex;font-size:13px}
.aw-inline-row .linkbtn{background:none;border:0;padding:0;color:var(--muted);font-size:12px}
@media (max-width:860px){.aw-modal-h .aw-steps{display:none}}
/* ---- artwork window: card layout ---- */
.aw-modal .aw-grid{gap:18px}
.aw-modal .aw-stage,.aw-modal .aw-side{border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.aw-modal .aw-proofwrap{background:linear-gradient(135deg,#EEF2F4,#E2E8EC)}
.aw-modal .aw-dims{display:none}
.aw-modal .aw-actions{margin-top:6px}
.aw-modal .aw-wrong{margin:6px 0 0}
/* ---- My Account item states (no file names, actions on the row) ---- */
.oi-state .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:500}
.oi-state b{font-size:13px}
.oi-state small{display:block;font-size:12px;line-height:1.5;margin-top:1px}
.oi-state .brief{display:block;color:var(--muted)}
.oi-state.ok .ic{background:#DCEEE4;color:var(--ok)}
.oi-state.info .ic{background:var(--tint-dk);color:var(--primary)}
.oi-state.check .ic{background:#E3E9EC;color:var(--muted)}
.oi-state.warn .ic{background:#F0DED3;color:var(--accent-ink)}
.oi-acts .btn,.oi-acts .btn-ghost{height:38px;padding:0 14px;font-size:12px}
.fchip i{font-size:9px;font-weight:500;letter-spacing:.3px;background:var(--tint);color:var(--primary);border-radius:var(--radius-sm);padding:2px 5px}
/* contact card */
.ac-ic{flex:none}
.ac-rows svg{color:var(--muted);margin-top:2px}
.ac-rows b{font-size:12px}
/* artwork window: compact option rows, smaller page picker, proof stays put */
.aw-modal .aw-tile{display:grid;column-gap:10px;row-gap:1px;padding:7px 9px}
.aw-modal .aw-tile b{font-size:12px}
.aw-modal .aw-tile small{font-size:11px}
.aw-modal .aw-sideic{height:36px}
.aw-modal .aw-pickpg{padding:6px;font-size:11px}
.aw-modal .aw-stage{align-self:start}
#docProofCanvas canvas{max-height:60vh}
/* ---- artwork window: phones, button consistency, agree note ---- */
.aw .aw-actions .linkbtn{color:var(--muted)}
@media (max-width:860px){

  .aw-modal .aw-grid{display:flex;gap:12px}
  .aw-modal .aw-stage{padding:12px}
  .aw-modal .aw-side{padding:12px}
  .aw-modal .aw-proofwrap{padding:12px}

  .aw-modal .aw-actions{align-items:stretch}

}
/* ---- product page: short file chips on the artwork summary row ---- */
.aw-inline-row .fchips{margin-top:6px}
/* ---- product page Step 3: artwork panels ---- */
.ap{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 18px;margin-top:10px}
.ap[hidden]{display:none}
.ap-ic{background:var(--tint);color:var(--primary);flex:none}
.ap-h b{font-size:14px}
.ap-h small{font-size:12px;line-height:1.5;margin-top:2px}
.ap-own .aw{margin-top:0}
.ap-own .aw-drop{padding:34px 20px}
.ap-confirm.need{border-color:var(--accent)}
.ap-confirm input{height:16px}
.ap-confirm b{font-size:13px;line-height:1.35}
.ap-confirm small{line-height:1.5;margin-top:3px}
.ap-confirm .linkbtn{background:none;border:0;padding:0;color:var(--primary);font:inherit;font-size:12px}
.art-brief.need textarea{border-color:var(--accent);box-shadow:0 0 0 3px rgba(152,96,72,.18)}
.tplcard:hover{border-color:var(--primary);box-shadow:var(--shadow-1)}
.tc-txt small{font-size:12px;line-height:1.5;margin-top:2px}
@media (max-width:600px){.ap{padding:14px}}
/* ---- upload on demand; service rule and picker in My Account ---- */
.ap-openbtn{flex:none}
#artNow[hidden]{display:none}
.oi-rule .linkbtn{color:var(--primary);font:inherit;font-size:12px}
.svcpick[hidden]{display:none}
.svcpick-h b{font-size:13px}
.svcpick-h small{display:block;font-size:12px;line-height:1.5;margin:2px 0 10px}
.svcopt span:nth-child(2){flex:1}
.svcopt b{font-size:13px}
.svcopt small{display:block;margin-top:1px}
.svcpick .oi-acts{display:flex;gap:8px}
/* ---- compact Step 3 panels ---- */
.ap-ic.sm{height:34px}
.ap-openbtn.btn-ghost{height:34px;padding:0 12px;font-size:12px;margin-left:auto;border-radius:var(--radius-sm)}
.ap-hide{padding:0 4px;font:inherit;font-size:12px;flex:none}
.ap-confirm.c{padding:9px 12px;margin:0 0 8px}
.ap-confirm.c b{display:inline}
.ap-next b{color:var(--ink)}
.ap-next .linkbtn{background:none;border:0;padding:0;color:var(--primary);font:inherit;font-size:12px}
.briefbox textarea{padding:8px 10px}
.briefbox .btn-ghost{padding:0 12px}
@media (max-width:600px){.ap-openbtn.btn-ghost{margin-left:0}}
/* ---- phone width: nothing wider than the screen ---- */
.catgrid,.popular,.prodgrid{min-width:0}
.catgrid>*,.popular>*,.prodgrid>*{min-width:0}
.catcard .im,.catcard .im img{max-width:100%}
@media (max-width:600px){.catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.popular,.prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.catgrid,.popular{grid-template-columns:minmax(0,1fr)}}
.related>.catcard{min-width:0}
@media (max-width:600px){.related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.related{grid-template-columns:minmax(0,1fr)}}
/* ---- colour balance: --ground is the big-area background; neutral by default so the theme stays on buttons, links and pills ---- */
html:root{--ground:var(--panel);--ground-2:var(--panel)}   /* one calm ground (the old "neutral" tone, 7 Nov 2026: the tone setting is retired) */
.hero{background:linear-gradient(135deg,var(--ground) 0%,var(--ground-2) 100%)}
.hero[data-bg="white"]{background:#fff}
.hero[data-bg="theme"]{background:linear-gradient(135deg,var(--tint),var(--tint-dk))}
.eta-cut[hidden],.clock[hidden]{display:none}
/* ---- one dropdown style everywhere ---- */
select:not(.raw){appearance:none;-webkit-appearance:none;padding-right:34px;background-color:#fff;background-image: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");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;border:1px solid var(--input);border-radius:var(--radius-sm);height:40px;padding-left:12px;font:inherit;font-size:14px;color:var(--ink)}
select:not(.raw):focus{outline:none;border-color:var(--primary);box-shadow:var(--field-ring)}
.dims select.unit{padding-left:10px}
/* ---- header placeholder: no jump while the chrome renders ---- */
.chrome-ph{height:182px}
.chrome-ph.staff{height:52px}
@media (max-width:600px){.chrome-ph{height:158px}}
/* ---- added to basket ---- */
.addedbox img{width:64px;height:64px}
.ab-t .eyebrow{display:block;color:var(--ok)}
.ab-t b{font-size:14px}
.ab-t small{display:block;font-size:12px;margin-top:2px;line-height:1.45}
.ab-acts .btn,.ab-acts .btn-ghost{height:38px;padding:0 14px;font-size:13px}
@keyframes bkpulse{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
/* ---- account: calmer attention marker, things-we-need list as cards ---- */
.aorow.todo{box-shadow:none;border-color:var(--tint-dk)}
#acctTodo>b{display:block;margin-bottom:8px}
#acctTodo a{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:#fff;text-decoration:none;color:var(--ink);font-weight:500;margin-top:6px;font-size:13px;transition:border-color .15s}
#acctTodo a:hover{border-color:var(--primary)}
#acctTodo a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
#acctTodo a small{color:var(--muted);font-weight:400}
#acctTodo a::after{content:"\2192";margin-left:auto;color:var(--muted)}
/* ---- templates card beside the picture; design checklist ---- */
.ap-check ul{margin:8px 0 0;line-height:1.6}
/* 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 .radio-card{height:100%}
/* ---- send artwork for an order ---- */
.sendart-h b{font-size:16px;margin:4px 0 2px}
.sendart-h small{font-size:12.5px}
.sendart-f .btn{height:42px}
/* ---- help pages: lessons grid, figures, contact cards, terms numbering, back bar ---- */
.lessons a{display:flex;border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.lessons a:hover{border-color:var(--primary);box-shadow:var(--shadow-1);transform:translateY(-1px)}
.lessons small{font-size:11px}
.fig{margin:6px 0 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:10px 12px 8px}
.fig svg{display:block;width:100%;height:auto;font-family:Montserrat,Arial,sans-serif}
.fig figcaption{font-size:12px;color:var(--muted);margin:6px 2px 0;line-height:1.5}
.contact-cards{grid-template-columns:repeat(3,1fr)}
.ccard{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius);padding:14px 16px;color:var(--ink)}
.ccard:hover{border-color:var(--primary);box-shadow:var(--shadow-1)}
.ccard .ic{width:38px;height:38px;border-radius:50%;background:var(--tint);color:var(--primary)}
.ccard small{font-size:10.5px;letter-spacing:.6px;color:var(--eyebrow-ink)}
.ccard b{font-size:14px;margin:2px 0}
.ccard em{font-size:12px;line-height:1.45}
.docpage.terms .doc{counter-reset:tsec}
.docpage.terms .doc h2{counter-increment:tsec;padding-top:26px;border-top:1px solid var(--line)}
.docpage.terms .doc h2:first-child{border-top:0;padding-top:0}
.docpage.terms .doc h2::before{content:counter(tsec) ".";display:inline-block;width:38px;color:var(--muted);font-weight:400}
.docpage.terms .doc li{margin-bottom:8px}
.backbar a{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--primary);text-decoration:none}
.backbar button{border:0;background:#fff;height:26px;border-radius:50%;color:var(--muted);font-size:16px;line-height:1}
.stepsrow .n{background:var(--primary);color:#fff}

/* ---- download bar for framed previews ---- */
.dlbar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);z-index:450;display:flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:10px 12px 10px 18px;font-size:13px;box-shadow:var(--shadow-3);opacity:0;pointer-events:none;transition:transform .25s,opacity .25s;max-width:calc(100% - 32px)}
.dlbar.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.dlbar a{color:#fff;font-weight:500}
.dlbar button{border:0;background:rgba(255,255,255,.15);color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
/* ---- companion colour: a second hue that belongs to each theme, used for small accents so one colour never dominates ---- */
.catcard .go{color:var(--second-ink)}
.catcard b span{color:var(--second-ink)}
.eta-ic,.ap-ic,.as-ic,.ccard .ic,.lessons .lic{background:var(--second-tint);color:var(--second)}
.hero .eyebrow,.sec-h .eyebrow{color:var(--second-ink)}
.link-arrow{color:var(--second-ink)}
.trust svg{color:var(--second)}
/* ---- lessons with icons ---- */
.lessons-h small{font-size:13px}
.lessons a{align-items:center;padding:12px 14px}
/* ---- My Account to-do rows: the order number sits on the right ---- */
.acct-todo a,#acctTodo a{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;text-decoration:none;color:var(--ink);font-weight:400;margin:0;transition:border-color .15s}
.acct-todo a:hover,#acctTodo a:hover{border-color:var(--primary);text-decoration:none}
.acct-todo a::before,#acctTodo a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.acct-todo a small,#acctTodo a small{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-todo a::after,#acctTodo a::after{content:"\2192";color:var(--muted);margin-left:4px}
.acct-todo>b{font-size:14px;margin-bottom:2px}
/* ---- dashboard tiles ---- */
.dash-tiles b{margin:0}
.dash-ph a{color:var(--primary);text-decoration:none}

/* ---- Three Best Rated in the trust strip ---- */
@media (max-width:900px){.stripline div:nth-child(2n){border-left:1px solid var(--line)}.stripline div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:520px){.stripline div:first-child{border-top:0}}
/* ---- till mode: the product page inside the shop till ---- */
html.pos-mode .topbar,html.pos-mode .mast,html.pos-mode .mainnav,html.pos-mode footer,html.pos-mode .chrome-ph,html.pos-mode .crumbs,html.pos-mode #relatedSec,html.pos-mode .reviews,html.pos-mode .tplcard,html.pos-mode .addedbox{display:none!important}
html.pos-mode body{background:#fff}
html.pos-mode main.wrap{padding-top:14px}
/* ---- footer columns never push past the screen ---- */
footer .wrap>div{min-width:0}
/* ---- round nine ---- */
.acct-todo a,#acctTodo a{font-size:12.5px;gap:8px}
.co-item img,.summary .sum-head img,.bk-card .im img,.bk-card .im,.aorow-imgs img,.oi-head img,.dash-row img,.sa-ih img{background:#fff;border:1px solid var(--line);padding:3px;object-fit:contain;border-radius:var(--radius)}
.bk-card .im img{border:0;padding:4px}
.catcard .go,.catcard b span{color:var(--ink)}
/* till view of a product page: options, turnaround and price only */
html.pos-mode .pdp-gallery,html.pos-mode .pdp-head .tagline,html.pos-mode .pdp-head .stars,html.pos-mode .pdp-head .rating,html.pos-mode .pdp-head .badges,html.pos-mode .pdp-head .pills,html.pos-mode .step.pos-hide,html.pos-mode #accWrap,html.pos-mode details.how,html.pos-mode .summary .sum-head,html.pos-mode .buybar{display:none!important}
html.pos-mode #pdp{display:block}
html.pos-mode .step{padding:14px 16px;margin-bottom:10px}
html.pos-mode .tile{padding:8px 10px}
html.pos-mode .deliv.eta{box-shadow:none}
/* send artwork page */
.sendpage .doc-hero{margin-bottom:22px}
.sa-form .btn{height:44px}
.sa-head b{font-size:18px}
.sa-head small{display:block;font-size:12.5px}
.sa-ih img{width:56px;height:56px}
.sa-ih b{font-size:15px}
.sa-ih small{display:block;font-size:12px}
.sa-state.ok{color:var(--ok)}
/* ---- header balance: phone block and basket as two matching boxes ---- */
.mast .phone{text-transform:uppercase;line-height:1.2;border-radius:var(--radius-sm);display:flex;flex-direction:column;justify-content:center}
.mast .phone b{text-transform:none}
.basket-btn{height:46px;border:1px solid var(--line);border-radius:var(--radius-sm);font-weight:500;transition:border-color .15s,background .15s}
.basket-btn:hover{border-color:var(--primary);background:var(--ground)}
/* ---- till view: two columns, price pinned, nothing to scroll for ---- */
html.pos-mode .pdp-buy{display:grid;gap:12px;align-items:start}
html.pos-mode .summary{grid-column:1/-1;position:sticky;bottom:0;z-index:5;box-shadow:0 -8px 24px rgba(42,42,51,.08);border-color:var(--tint-dk)}
html.pos-mode .summary .chips,html.pos-mode .summary details.break,html.pos-mode .vat,html.pos-mode .notice,html.pos-mode .eta-steps,html.pos-mode .step-sum,html.pos-mode .tile small,html.pos-mode .qrow .each{display:none!important}
html.pos-mode .tile{font-size:13px}
html.pos-mode .qrow{padding:6px 12px}
html.pos-mode .seg button{padding:8px 10px}
/* ---- round eleven ---- */
.mast .phone{border:0;padding:0;height:auto;text-align:right;align-items:flex-end;gap:1px}
.acct-todo a,#acctTodo a{padding:6px 12px}
.acct-todo a,#acctTodo a{min-height:0}
html.pos-mode #explained,html.pos-mode .pdp-head .from{display:none!important}
/* ---- audit fixes ---- */
@media (max-width:900px){.mast .phone{display:none}.logo small{display:none}footer a{padding:4px 0;margin-bottom:2px}.foot-bottom a{display:inline-block;padding:6px 0}.crumbs a{display:inline-block;padding:4px 0}.link-arrow{display:inline-block;padding:6px 0}}
.notfound h1{margin:6px 0 10px}
.notfound p{color:var(--muted);line-height:1.6;margin:0 0 18px}
.notfound .row{display:flex;gap:10px}
.nf-cats a{border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:7px 14px;text-decoration:none;color:var(--ink)}
.nf-cats a:hover{border-color:var(--primary);color:var(--primary)}
/* ---- till summary bar: one compact strip, spec pills right, arrival left of the button ---- */
html.pos-mode .summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"what chips chips" "eta total buy";gap:8px 18px;align-items:center;padding:10px 16px}
html.pos-mode .summary .sum-top,html.pos-mode .summary .what,html.pos-mode .summary .sum-rows{display:contents}
html.pos-mode .summary .total{grid-area:total;text-align:right;display:flex;align-items:baseline;gap:8px}
html.pos-mode .summary .total small{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
html.pos-mode .summary .total b{font-size:22px}
html.pos-mode .summary .cta{grid-area:buy;width:auto;height:44px;padding:0 20px;font-size:14px;margin:0}
html.pos-mode .summary .added,html.pos-mode .summary details.break{display:none!important}
@media (max-width:760px){html.pos-mode .summary{grid-template-columns:1fr auto;grid-template-areas:"what what" "chips chips" "eta eta" "total buy"}}
html.pos-mode .pdp-head{display:flex;gap:14px}
/* ---- artwork confirm: text left, actions right ---- */
.aw-confirm .aw-actions{margin-top:0}
.aw-legend .lg-band{background:rgba(74,123,166,.25);border:1px solid var(--primary)}
.aw-legend .lg-fold{background:transparent;border-top:2px dashed var(--primary);height:0}
.cc-foot .count{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;margin-left:8px;min-width:0}
.cc-foot .go{white-space:nowrap}
html.pos-mode .pdp-buy{padding-bottom:14px}
html.pos-mode .summary{margin-top:6px}
/* buttons inside help and about articles keep their own colours (the article link colour was winning) */
.doc .btn,.docpage .btn,.doc a.btn,.docpage a.btn{color:#fff!important;text-decoration:none}
.doc .btn:hover,.docpage .btn:hover{color:#fff!important}
.doc .btn-ghost,.docpage .btn-ghost{color:var(--primary)!important;text-decoration:none}
/* ---- seasonal effects: light, on the home hero only ---- */
html[data-effect] .hero{position:relative;overflow:hidden}
html[data-effect="snow"] .hero::before,html[data-effect="sparkle"] .hero::before{content:"";position:absolute;inset:-10% 0 0 0;pointer-events:none;z-index:0;background-image:radial-gradient(circle,rgba(255,255,255,.9) 1.2px,transparent 1.8px),radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.55) 1.4px,transparent 2px);background-size:140px 140px,210px 210px,320px 320px;background-position:0 0,60px 90px,120px 30px;opacity:.75;animation:pbSnow 26s linear infinite}
html[data-effect="sparkle"] .hero::before{background-image:radial-gradient(circle,rgba(230,208,142,.95) 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.8) .8px,transparent 1.3px);background-size:180px 180px,260px 260px;animation:pbTwinkle 5s ease-in-out infinite alternate;opacity:.6}
html[data-effect="glow"] .hero::after{content:"";position:absolute;right:-10%;bottom:-30%;width:60%;height:90%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,rgba(224,112,42,.28),rgba(224,112,42,0));animation:pbGlow 6s ease-in-out infinite alternate}
html[data-effect] .hero>.wrap{position:relative;z-index:1}
@keyframes pbSnow{from{background-position:0 0,60px 90px,120px 30px}to{background-position:40px 700px,-30px 760px,80px 820px}}
@keyframes pbTwinkle{from{opacity:.35}to{opacity:.75}}
@keyframes pbGlow{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){html[data-effect] .hero::before,html[data-effect] .hero::after{animation:none}}
.bankbox>b{font-size:14px;margin-bottom:8px}
.bankbox .bk{display:grid;gap:4px 14px}
.bankbox .bk span:nth-child(odd){color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;padding-top:2px}
.bankbox p{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tile.unpriced{display:none!important}
.aw-pg.blank{border:1px dashed var(--input);background:var(--panel);color:var(--muted);cursor:default;font-size:11px}
.aw-pickbar .aw-team{margin-left:10px}
/* ---- tap targets: every link and button at least 28 px tall on a phone (WCAG 2.2 target size) ---- */
@media (max-width:640px){
  .doc-nav a,.doc a:not(.btn):not(.btn-ghost),.faq a,.helpcard a,.topbar nav a{display:inline-block;padding-top:5px;padding-bottom:5px;min-height:28px;line-height:18px}
  .doc p a,.doc li a{padding-top:3px;padding-bottom:3px}
}
/* the online designer's styles live in css/designer.css (Designer 3, 22 Oct 2026) */
.ap-online b{font-size:13px}.ap-online small{font-size:11.5px;line-height:1.45}
.ap-online .btn-ghost{margin-left:auto;height:36px;padding:0 14px}
.ap-online.done{background:var(--success-tint);border-color:#CFE3D7}
@media (max-width:640px){.ap-online .btn-ghost{margin-left:0}}
/* ---- tap targets 2: header links and small text buttons reach 24 px or more on phones ---- */
@media (max-width:640px){
  .mast nav a,.topbar nav a,.nav-dd-btn{display:inline-flex;align-items:center;min-height:30px}
  .mast .logo{display:inline-flex;align-items:center;min-height:30px}
  .linkbtn,.crumbs a,.breadcrumbs a,.bk-card .artbtn,.bk-card .acts a,.bk-card .acts button,.acct-nav a,.sa-item a{display:inline-block;padding-top:4px;padding-bottom:4px;min-height:24px;line-height:16px}
}

/* ---- narrow phones: Galaxy Z Fold cover screen and other 320 to 380 px viewports ---- */
.basket-btn .bk-word{margin-left:2px}
@media (max-width:480px){
  .wrap{padding:0 14px}
  .topbar .wrap{min-height:32px;padding:0 14px}
  .topbar nav{gap:16px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;max-width:100%;padding:8px 0}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{flex:none}
  .mast .wrap{gap:12px;height:66px}
  .logo img,.logo svg{height:24px}
  .basket-btn{height:40px;font-size:12px}
  .mainnav .wrap{gap:18px}
  .hero h1{font-size:28px}

  footer{overflow-wrap:anywhere}
  footer .wrap{grid-template-columns:1fr;gap:24px;padding-top:36px;padding-bottom:32px}
  footer .tagline-f{font-size:15px}
  .foot-bottom .wrap{flex-direction:column;gap:8px;padding:14px 14px}
  .doc table{display:block;max-width:100%;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .doc table td,.doc table th{white-space:normal;min-width:120px}
  .doc table td:first-child,.doc table th:first-child{min-width:110px} .stepsrow,.helpgrid,.contact-strip,.contact-cards{grid-template-columns:1fr}
  .how-body a,.acct-contact a,.contact-strip a{display:inline-block;padding:5px 0}
  .step{padding:14px}
  .seg button{padding:9px 8px;font-size:12px}
  .tile{padding:10px 12px}
}
@media (max-width:380px){
  .basket-btn .bk-word{display:none}

  .hero h1{font-size:26px}
  .catgrid,.popular,.prodgrid,.related{grid-template-columns:1fr}
}
/* inline links reach a comfortable tap height on phones */
@media (max-width:900px){.lead a,.src a,.dash-ph a,.contact-strip a,.hint a,.muted a,.aw-note a{display:inline-block;padding:4px 0;min-height:24px}}
/* stand-alone links on phones get a 32 px touch height (audit 19 Oct 2026: family-page part links, guide and material links) */
@media (max-width:900px){.fam-side-l a,.g-all,.mat-all,.g-start .g-pdf{display:inline-flex;align-items:center;min-height:32px}}
/* ======================================================================
   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.
   ====================================================================== */
.mob-btn{display:none}
.mdrawer{position:fixed;inset:0;z-index:500;display:none}
.mdrawer.open{display:block}
.md-scrim{position:absolute;inset:0;background:rgba(42,42,51,.45);animation:mdfade .2s ease}
@keyframes mdfade{from{opacity:0}to{opacity:1}}
@keyframes mdslide{from{transform:translateX(100%)}to{transform:none}}
.md-panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:#fff;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:0 0 22px;box-shadow:-10px 0 40px rgba(42,42,51,.22);animation:mdslide .22s ease}
.md-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.md-logo img{height:24px;width:auto;display:block}
.md-x{width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0}
.md-search{display:flex;align-items:center;margin:14px 16px 4px;border:1px solid var(--input);border-radius:var(--radius-sm);background:var(--panel);padding-left:12px}
.md-search:focus-within{border-color:var(--primary);background:#fff}
.md-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;height:44px;outline:none;color:var(--ink);margin:0;padding:0}
.md-search .go{flex:none;width:44px;height:44px;border:0;background:none;color:var(--primary);display:grid;place-items:center;cursor:pointer;padding:0}
.md-nav{display:flex;flex-direction:column;padding:6px 8px 2px}
.md-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:500;padding:12px 8px;border-bottom:1px solid var(--line);min-height:48px}
.md-nav a svg{color:var(--muted);flex:none}
.md-nav a.hl{color:var(--accent-ink)}
.md-nav a.md-cta{border:0;margin:12px 0 2px;background:var(--primary);color:#fff;border-radius:var(--radius-sm);justify-content:center;font-size:14px}
.md-sec{padding:14px 16px 2px}
.md-sec>b{display:block;font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--eyebrow-ink);margin-bottom:8px}
.md-links{display:flex;flex-direction:column}
.md-links a{text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;padding:11px 0;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
.md-foot{margin:auto 16px 0;padding-top:18px}
.md-foot .btn{width:100%;justify-content:center;gap:8px}
.md-foot small{display:block;text-align:center;color:var(--muted);font-size:12px;margin-top:8px}
body.menu-open{overflow:hidden}
@media (max-width:900px){
  /* one bar: logo left, search, basket and menu right; the top bar links and the long nav move into the drawer */
  .topbar,.mainnav{display:none}
  .mast{position:sticky;top:0;z-index:60;background:#fff}
  .mast .wrap{height:60px;gap:8px}
  /* a bigger logo on phones (Junaid, 18 Oct 2026, on a Galaxy Z Fold: "the top logo is a little bit small") */
  .logo img,.logo svg{height:28px}
  .mob-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);padding:0;cursor:pointer;flex:none}
  .mast .mob-search{margin-left:auto}
  .basket-btn{margin-left:0;height:44px;font-size:12px}
  .basket-btn .bk-word{display:none}
  .chrome-ph{height:60px}
  /* home hero: words, buttons, the picture, then the numbers */
  .hero .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero>.wrap>div:first-child{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;font-size:30px;margin:10px 0 12px}
  .hero>.wrap>div>p{order:3;font-size:15px;margin-bottom:18px}

  /* product page: picture and thumbnails side by side, then the options, then the trust points and templates card */
  .crumbs{margin:12px 0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdp{display:grid;grid-template-columns:minmax(0,1fr) 62px;grid-template-areas:"head head" "main thumbs" "note note" "buy buy" "trust trust" "tpl tpl";column-gap:10px;row-gap:0;align-items:start}

  .pdp-head .tagline{font-size:14px}
  .rating{margin:-2px 0 10px}

  .trust{grid-area:trust;margin-top:16px}
  .trust div{font-size:12px}

  /* listing cards: tidy ratings, two-line blurbs */
  .catcard p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prodgrid .catcard .rating .muted,.popular .catcard .rating .muted{display:none}
}
@media (max-width:860px){
  /* My Account: the sections as a tab grid, icons above the words; dashboard tiles two across */
  
  .acct-nav a{display:flex;align-items:center;border-radius:var(--radius-sm);white-space:normal;color:var(--ink)}
  
  .acct-nav a[aria-current="page"]{background:var(--tint)}
  .acct-nav a .acct-cnt{font-size:10px}

  .acct-stats b{font-size:20px}
}
@media (max-width:640px){
  footer a{padding:6px 0;min-height:30px;display:inline-flex;align-items:center}
}
@media (max-width:380px){
  .mast .wrap{gap:6px;padding:0 12px}
  .logo img,.logo svg{height:25px}
  .mob-btn{width:40px;height:40px}
  .basket-btn{height:40px}

  .pdp{grid-template-columns:minmax(0,1fr) 54px}

}

/* Breadcrumb on phones: the product name wraps instead of running off the screen (audit, 16 Oct 2026) */
@media (max-width:480px){.crumbs{white-space:normal;line-height:1.6}}

.tc-art{flex:none}
.tc-art svg{width:100%;height:100%}
.tc-txt b{font-size:14px}
.tplcard.side{padding:12px 14px}

.aw-confirm .aw-hint{color:var(--muted)}
.aw-c.one{padding:10px 12px;font-size:12.5px}
/* Approval panel: the text on top, the two buttons in one row under it, the note on its own line */
.aw-confirm .aw-actions{gap:8px}
.aw-confirm .aw-hint{flex-basis:100%;font-size:11px}
/* "Or have our team set it up" and other link-style actions in the uploader */
.aw .aw-actions .linkbtn,.aw .aw-actions .aw-team,.aw-team{color:var(--primary)}
/* Rotate artwork tiles for fixed-stance products */
.aw-turn.yes{height:44px}

.aw-inline-row b{font-size:14px}
.aw-inline-row .aw-inline-ic{height:40px;background:var(--attn-ring);color:var(--attn)}
.aw-inline-row .aw-inline-ic svg{color:inherit}
.aw-inline-row.ok{border-color:var(--success-line);background:#F5FAF7}
.aw-inline-row.ok .aw-inline-ic{color:var(--ok)}
.aw-inline-row .aw-inline-acts svg{color:currentColor}
.aw-inline-row .aw-inline-main{height:38px;padding:0 16px;gap:8px;font-size:13px}
.aw-inline-row .aw-inline-sec svg,.aw-inline-sec svg{color:var(--muted)}
.aw-inline-sec:hover{border-color:var(--accent);color:var(--accent-ink)}
.aw-inline-row .aw-inline-sec:hover svg,.aw-inline-sec:hover svg{color:var(--accent-ink)}
@media (max-width:560px){.aw-inline-acts>*{flex:1}}
/* Needs-attention states in the uploader, the proof and My Account share the honey colour */
.aw-pick.pending{border-color:var(--attn-line);background:var(--attn-tint)}
.aw-pick.pending .aw-checks-h{color:var(--attn)}
.aw-pick.has-ic{display:grid;gap:4px 14px;align-items:start}
.aw-chk.warn,.aw-verdict.warn,.oi-state.warn{border-color:var(--attn-line);background:var(--attn-tint)}
.aw-chk.warn .ic,.aw-verdict.warn .ic,.oi-state.warn .ic,.fart .fnotes .fn.warn .ic{color:var(--attn)}
.acct-todo,.artgate{border-color:var(--attn-line);background:var(--attn-tint)}
/* Option tile tick (Junaid, 16 Oct 2026: "slightly off"): it sat 9 px from the top, so single-line tiles had it 3 px
   high, 9 px from the right against 12 px of text padding, and long labels ran under it. A tile centres its label when
   the row stretches it, so the tick is centred on the right too, and every tile keeps room for it. */
.tiles .tile{padding-right:30px}
.tile[aria-pressed="true"]::after{right:11px;top:50%;margin-top:-7px}
html.pos-mode .tiles .tile{padding-right:26px}
html.pos-mode .tile[aria-pressed="true"]::after{right:9px}
/* "Have our team set it up" asks first: slower, turnaround starts at proof approval, fixing it here is the main button */
.aw-teamask b{display:block;font-size:14px;color:var(--ink);margin:2px 0 6px}
.aw-teamask ul{margin:0 0 10px;padding-left:18px}
.aw-teamask .aw-actions{margin:0;gap:8px}
/* Back to top (Junaid, 16 Oct 2026: small, minimal, stylish): a 42 px circle in the theme colour with a thin arrow and a
   hairline ring that fills as you read down the page; lifted above the product page buy bar on phones */
.totop{position:fixed;right:22px;bottom:22px;z-index:45;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(var(--prgb),.92);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);transition:opacity .22s,transform .22s,visibility 0s .22s,bottom .25s ease,background .15s}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .22s,visibility 0s,bottom .25s ease,background .15s}
.totop.on:hover{background:var(--primary-dk);transform:translateY(-2px)}
.totop:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.totop .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.totop .ring circle{fill:none;stroke:#fff;stroke-width:2.6}
.totop .ring .bg{opacity:.22}
.totop .ring .pg{opacity:.9;stroke-dasharray:119.4;stroke-dashoffset:119.4;stroke-linecap:round;transition:stroke-dashoffset .1s linear}
.totop .arr{position:relative}
@media (max-width:900px){.totop{width:40px;height:40px;right:14px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.totop,.totop.on,.totop .ring .pg{transition:none}}
html.pos-mode .totop{display:none}
/* Main nav between the phone menu and a wide screen: tighter, so fewer links need to hide (fitMainNav in site.js) */
@media (min-width:901px) and (max-width:1240px){.mainnav .wrap{padding-left:16px;padding-right:16px}}
.mainnav a[hidden]{display:none}
/* Selected cards and tiles (Junaid, 16 Oct 2026: the outline was too strong): one softened line, the tint and the dot or tick
   carry the selection */
.tile[aria-pressed="true"],.seg button[aria-pressed="true"],.qrow[aria-checked="true"],.radio-card[aria-checked="true"]{border-color:rgba(var(--prgb),.5);box-shadow: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 .tc-go{height:40px;padding:0;border-radius:50%;color:var(--primary);border:1px solid var(--line)}
/* 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 .ap-hide{margin:0;padding:4px 2px;color:var(--muted);font-weight:500}
.art-now-wrap .ap-hide:hover{color:var(--primary)}
.ap-openbtn[hidden]{display:none}
@media (max-width:600px){.art-now-wrap .ap-hide{margin:6px 0 -6px auto}}
/* 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:hover{border-color:rgba(var(--prgb),.35)}
.logo-row.on{background:var(--tint);border-color:rgba(var(--prgb),.5)}
.logo-row .lr-t b{display:block}
.logo-row .lr-t small{display:block}
.pb-switch[aria-checked="true"]{background:var(--primary);border-color:var(--primary)}
/* Your Product, Explained: an open card gets the same soft line as a selected option (Junaid: the solid outline was too strong) */
.acc[open]{border-color:rgba(var(--prgb),.5)}
/* Hero cards (Junaid, 16 Oct 2026: Three Best Rated and Same-Day redesigned, the same size): a matched pair of glass cards,
   an icon tile, title and one line, a quiet chevron; Same-Day shows a live dot (green open today, honey otherwise) */
.hb{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:66px;padding:10px 14px 10px 10px;border-radius:var(--radius);text-decoration:none;color:var(--ink);background:rgba(255,255,255,.88);border:1px solid rgba(var(--prgb),.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(20,25,30,.12),0 1px 2px rgba(20,25,30,.06);transition:transform .18s,box-shadow .18s,border-color .18s}
.hb:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(20,25,30,.16);border-color:rgba(var(--prgb),.22)}
.hb-ic{width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;background:var(--tint);color:var(--primary)}
.hb-tbr .hb-ic{background:var(--tint);color:var(--primary)}
.hb-t{display:flex;flex-direction:column;min-width:0}
.hb-t b{display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:500;line-height:1.25;letter-spacing:.1px}
.hb-t small{font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px}
.hb-go{color:var(--muted);opacity:.7;transition:transform .18s,opacity .18s}
.hb:hover .hb-go{transform:translateX(2px);opacity:1}
@keyframes hbPulse{0%,100%{box-shadow:0 0 0 3px rgba(63,157,107,.18)}50%{box-shadow:0 0 0 6px rgba(63,157,107,.05)}}
.hb.dark{margin-top:16px;background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hb.dark:hover{border-color:var(--line-strong);box-shadow:none}
.hb.dark .hb-ic{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.hb.dark .hb-t b{color:var(--ink)}
.hb.dark .hb-t small{color:var(--ink)}
.hb.dark .hb-go{color:var(--ink)}
/* Home steps (Junaid: short lines, subtle round icons): an icon tile with the step number on its corner */
.stripline.sl-icons div{gap:14px;padding:16px 20px;color:var(--muted);line-height:1.4}
.stripline.sl-icons b{color:var(--ink)}
/* Footer Three Best Rated (Junaid: not that wide, balanced with the text above): compact, as wide as its content */
.hb.dark{display:inline-grid;width:auto;max-width:300px;min-height:0;gap:10px;padding:8px 12px 8px 8px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape)}
.hb.dark .hb-ic{width:36px;height:36px;border-radius:var(--radius)}
.hb.dark .hb-ic svg{width:19px;height:19px}
.hb.dark .hb-t b{font-size:12.5px}
.hb.dark .hb-t small{font-size:11.5px}
/* Footer link lists on phones (found by the flags session, 16 Oct 2026): the tap-size rule made every link inline-flex,
   so the lists ran together ("Help CentreTurnaround Explained..."). Each list is a two-column grid: one link per cell,
   the 30 px tap height kept, clear space between. */
@media (max-width:640px){
  footer .wrap>div:has(>h4+a){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;align-content:start}
  footer .wrap>div:has(>h4+a)>h4{grid-column:1/-1}
  footer .wrap>div:has(>h4+a)>a{margin:0;line-height:1.3}
}
/* Address finder (js/addrfind.js): only on the page when switched on in Integrations */
.af{position:relative;margin:0 0 4px}
.af label{display:block}
.af label small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin:2px 0 6px;line-height:1.45}
.af-box{position:relative;display:flex;align-items:center}
.af-box>svg{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.af-box input{width:100%;padding-left:36px!important}
.af-spin{position:absolute;right:12px;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--primary);animation:afSpin .7s linear infinite}
@keyframes afSpin{to{transform:rotate(360deg)}}
.af-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-2);max-height:280px;overflow:auto}
.af-list li{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);font-size:13px;color:var(--ink);cursor:pointer}
.af-list li svg{flex:none;color:var(--muted)}
.af-list li:hover,.af-list li.on{background:var(--tint)}
.af-msg{margin:6px 0 0;font-size:12px;color:var(--muted)}
/* Breadcrumbs: house icon, thin chevrons, current page in ink */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:12px;font-weight:500;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .15s}
.crumbs a:hover{color:var(--primary)}
.crumbs .cr-home{display:inline-flex;align-items:center;gap:6px}
.crumbs .cr-home svg{flex:none}
.crumbs .cr-sep{flex:none;color:var(--line);opacity:1;color:rgba(var(--prgb),.35)}
.crumbs .cr-cur{color:var(--ink);font-weight:500}
.crumbs .cr-cur:empty{display:none}
.logo-row.on .lr-state{color:var(--primary)}
/* Tablet hero (Junaid, 16 Oct 2026: the picture sat tiny in the middle between 600 and 900 px): the picture becomes a large
   centred showcase with the Same-Day and Three Best Rated cards floating over its lower corners, staggered like the desktop
   composition; the headline grows; the 1-2-3 strip stacks each icon over its words so the three columns breathe */
@media (min-width:601px) and (max-width:900px){
  .hero h1{font-size:38px;margin:12px 0 14px}
  .hero>.wrap>div>p{font-size:16px;max-width:560px}

  .stripline.sl-icons div{align-items:flex-start;gap:10px;padding:16px 16px 18px}
}
/* breadcrumbs: thumb-sized links on touch screens (the audit asks 28 px; the trail keeps its look) */
@media (max-width:900px){.crumbs a,.crumbs a.cr-home{display:inline-flex;align-items:center;min-height:30px;padding-top:0;padding-bottom:0}.crumbs{row-gap:0}}
/* One brief, opened and closed with a plus / minus (Junaid, 16 Oct 2026) */
.brief-tg:hover{border-color:rgba(var(--prgb),.35)}
.brief-tg small{font-size:12px}
.brief-tg[aria-expanded="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0;background:var(--panel)}
.brief-tg+.art-brief{border-top:0;border-top-left-radius:0;border-top-right-radius:0}
/* Turnaround: the bank holiday switch under the closed periods (admin.css carries the switch look) */
.tn-bank small{font-weight:400;color:var(--muted)}
/* Step 3, designed properly (Junaid, 16 Oct 2026: "no green background", "too overcrowded"): white surfaces only. A chosen
   option shows a filled dot and a soft outline with a light lift, never a coloured fill. The Design it for me panel is
   one card cut into sections by hairlines: design level as a list, the logo switch with a two-way control, the brief,
   then the after-checkout note on a quiet foot. */
.radio-card{transition:border-color .15s,box-shadow .15s}
.radio-card small{display:block;line-height:1.5;margin-top:3px}
.radio-card:hover{border-color:rgba(var(--prgb),.4)}
.radio-card[aria-checked="true"]{background:#fff;border-color:rgba(var(--prgb),.55);box-shadow:0 1px 2px rgba(20,24,28,.04),0 10px 22px -14px rgba(20,24,28,.22)}
.dz-sec+.dz-sec{border-top:1px solid var(--line)}
.dz-row+.dz-row{border-top:1px solid var(--line)}
.dz-row:hover{background:#FAFAF9}
.dz-row .dot{height:16px;border-radius:50%;border:1.5px solid var(--input)}
.dz-t b{font-size:13px}
.dz-t small{font-size:12px;margin-top:2px}
.dz-row[aria-checked="false"] .dz-p{color:var(--muted)}
.dz-logo .logo-row,.dz-logo .logo-row.on{margin:0}
.dz-logo .lo-desc{margin:8px 0 0;padding:0;color:var(--muted)}
.dz-brief .brief-tg{margin:0;padding:0;border:0;border-radius:0;background:none}
.dz-brief .brief-tg+.art-brief{margin:12px 0 0 44px}
.dz-foot p{margin:0;font-size:12px;color:var(--muted);line-height:1.55}
@media (max-width:600px){.dz-logo .logo-more,.dz-brief .brief-tg+.art-brief{margin-left:0}}
/* Approved ideas (Junaid, 16 Oct 2026): need-by check, save this price, WhatsApp, sample pack, reorder reminder, rounds */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nb-t b{font-size:13px;line-height:1.3}
.nb-t small{font-size:12px;margin-top:1px}
.nb-dp .dp-input{height:38px;font-size:13px}
.nb-res p{margin:0;color:var(--muted)}
.nb-res a{color:var(--primary);font-weight:500}
.qt:hover{border-color:rgba(var(--prgb),.45)}
.qt:disabled{cursor:wait}
.qt svg{color:var(--primary)}
.qt-wa:hover{border-color:rgba(var(--prgb),.45)}
.qt-wa svg{color:var(--ink)}
.qt-wa b{color:var(--primary)}
html.pos-mode .qtools,html.pos-mode .qt-wa,html.pos-mode .needby{display:none}
.md-foot .md-wa{width:100%;justify-content:center;gap:8px;margin-top:8px}
.spk-card input,.spk-card select,.spk-card textarea{padding:10px 12px;background:#fff}
.spk-done p{color:var(--muted);line-height:1.6;font-size:14px}
.spk-done a{color:var(--primary)}
.rm-t b{font-size:13.5px}
.rm-t small{font-size:12px;margin-top:2px}
.remind select{padding:0 10px;background:#fff}
p.pv-rounds{margin:0 0 8px;font-size:12.5px}
.nb-res [data-nbexp]{margin-left:auto;align-self:center;height:32px;padding:0 13px;border:1px solid var(--ink);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;color:var(--ink);font-size:12px;font-weight:500;cursor:pointer}
.nb-res [data-nbexp]:hover{color:#fff}
#specChips[hidden]{display:none}
/* selects on the new pages carry the same chevron as the rest of the site */
.spk-card select,.remind select{appearance:none;-webkit-appearance:none;padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2365727C%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer}
/* remind me to reorder sits in the order card as a row, like the sections around it */
.ord .remind{margin:0}
/* Same-Day Printing in the main menu: a quiet pill with a live green dot (Junaid, 16 Oct 2026: "highlight that") */
.mainnav a.nav-sd{transition:border-color .15s,color .15s}
.mainnav a.nav-sd::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(63,157,107,.16)}
.md-nav a.nav-sd::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-right:8px;vertical-align:1px}
.fc{position:relative;display:inline-grid;place-items:center;min-width:26px;height:34px;padding:0 7px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.08) 0 50%,rgba(0,0,0,.1) 50% 100%),var(--ink);color:#fff;font-size:17px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 1px 0 rgba(0,0,0,.25),0 8px 16px -10px rgba(20,24,28,.55);transform-origin:50% 50%}
.fc::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.38);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.fc.go{animation:fcFlip .5s cubic-bezier(.3,.7,.4,1)}
@keyframes fcFlip{0%{transform:rotateX(0)}45%{transform:rotateX(-88deg)}55%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
@media (prefers-reduced-motion:reduce){.fc.go{animation:none}}
/* Editing a basket item: a quiet banner above Step 1, and the button says Update basket */
.editing svg{color:var(--ink)}
.editing a{color:var(--primary);font-weight:500}
.hint.sg-hint a{color:var(--primary)}
/* What happens next, under the basket button: three steps joined by a hairline */
.nextsteps li{display:flex;align-items:center;gap:6px}
.nextsteps li:first-child .ns-ic{border-color:var(--primary);background:var(--primary)}
html.pos-mode .nextsteps{display:none}
/* Products side menu (Junaid, 16 Oct 2026): the help card puts its icon beside the title so Request a quote shows without
   scrolling; the chosen category gets a neutral fill and a dot, never a bar down the side (standing design rule) */
.fhelp2 .fh-ic{color:var(--ink)}
.filters button[aria-pressed="true"]::before{left:10px;top:50%;bottom:auto;width:6px;height:6px;margin-top:-3px;border-radius:50%}
.filters button[aria-pressed="true"]{padding-left:24px}
/* phones: the three quote buttons stay on one line each */
@media (max-width:600px){.qt svg{width:13px;height:13px}}
/* products page: the side menu and its help card stay in view while the grid scrolls (desktop) */
@media (min-width:901px){.filters{position:sticky;top:16px;align-self:start}}
/* Icon cards, one design across the site (Junaid, 16 Oct 2026: "icon on the left in the same row, then the heading, and
   underneath the text"): help cards, account quick links, numbered steps, quote reasons and contact cards. The icon or
   number and the heading share the first row, the words run underneath at full width; white card, hairline border,
   neutral icon tile; link cards carry a small chevron that moves on hover */
.helpcard,.stepsrow>div,.trust3>div,.contact-strip>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:7px;align-items:center;align-content:start;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:12.5px;line-height:1.55;color:var(--muted)}
.helpcard>span:not(.ic),.stepsrow>div>.t,.trust3>div>p,.contact-strip>div>.t{grid-column:1/-1;margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.helpcard b,.stepsrow b,.trust3 b,.contact-strip b{display:block;margin:0;font-size:14px;font-weight:500;line-height:1.3;color:var(--ink)}
.helpcard .ic,.contact-strip .ic{width:34px;height:34px;margin:0;border-radius:var(--radius);border:1px solid var(--line);background:#F6F5F2;color:var(--ink);display:grid;place-items:center}
.stepsrow .n,.trust3 .n{width:28px;height:28px;margin:0;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:500;letter-spacing:0}
.helpcard{position:relative;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.helpcard::after{content:"";position:absolute;width:7px;height:7px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .15s,border-color .15s}
.helpcard:hover{border-color:rgba(var(--prgb),.45);box-shadow:0 10px 26px -14px rgba(20,24,28,.3);transform:translateY(-1px)}
.helpcard:hover::after{transform:translateX(3px) rotate(45deg);border-color:var(--primary)}
.contact-strip>div .t a{color:var(--primary);font-weight:500}
.stepsrow{gap:10px}
.trust3{gap:12px}
.sdstat.sd-paused .sd-ic i{background:var(--attn,#A5630F)}
.sd-t{min-width:0}
.sd-t b{display:block;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35}
.sd-t small{display:block;margin-top:2px;font-size:12px;color:var(--muted);line-height:1.45}
/* Notices strip above the top bar (weather and delivery in honey, closures and general notes in a quiet stone) */
.nbar{background:var(--warning-tint);border-bottom:1px solid rgba(185,133,47,.28);color:#4A3A1A;font-size:12.5px}
.nbar .wrap+.wrap .nbar-row{border-top:1px solid rgba(185,133,47,.2)}
.nbar-row{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 0}
.nbar-row.k-closure,.nbar-row.k-info{color:var(--ink)}
.nt-ic{flex:none;display:grid;place-items:center;color:#9A6B1F}
.nt-t{flex:1;min-width:0;line-height:1.45}
.nt-t a{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.nt-x{flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;opacity:.7}
.nt-x:hover{opacity:1;background:rgba(0,0,0,.05)}
@media (max-width:600px){.nbar{font-size:12px}.nbar-row{min-height:0;padding:7px 0}}
/* Questions and fold-out answers, one design on every page (Junaid, 16 Oct 2026): a white card, the question in ink, a
   round plus that turns into a minus, the answer under a hairline; opens smoothly where the browser can animate it */
.faq{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 8px;background:#fff;transition:border-color .15s,box-shadow .15s}
.faq:hover{border-color:rgba(var(--prgb),.3)}
.faq[open]{border-color:rgba(var(--prgb),.35);box-shadow:0 10px 26px -18px rgba(20,24,28,.35)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;font-size:14.5px;font-weight:500;line-height:1.4;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;margin:0;border:1px solid var(--line);border-radius:50%;transform:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M6 1.5v9M1.5 6h9%27 stroke=%27%232B2B28%27 stroke-width=%271.5%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") no-repeat center;transition:transform .2s,background-color .15s}
.faq[open] summary::after{transform:rotate(45deg);margin:0;background-color:#F4F3F0}
.faq summary:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:var(--radius)}
.faq>div,.faq .a{margin:0 18px;padding:14px 0 16px;border-top:1px solid var(--line);font-size:14px;line-height:1.7;color:var(--ink)}
.faq .a p,.faq>div p{margin:0 0 8px;font-size:14px;max-width:72ch}
.faq .a p:last-child,.faq>div p:last-child{margin-bottom:0}
@supports (interpolate-size:allow-keywords){.faq{interpolate-size:allow-keywords}.faq::details-content{block-size:0;overflow:hidden;transition:block-size .25s ease,content-visibility .25s allow-discrete}.faq[open]::details-content{block-size:auto}}
@media (prefers-reduced-motion:reduce){.faq::details-content{transition:none}}
/* the smaller fold-outs (How timing works, What we need from you) use the same round plus */
details.how summary::after,.deliv.eta details.how summary::after{content:"";width:22px;height:22px;border:1px solid var(--line);border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27M6 1.5v9M1.5 6h9%27 stroke=%27%232B2B28%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") no-repeat center;transition:transform .2s}
details.how[open] summary::after{transform:rotate(45deg)}
/* Social media icons: top bar (desktop), footer and phone menu */
.soc{display:inline-flex;align-items:center;gap:4px}
.soc a{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;color:inherit;opacity:.85;transition:opacity .15s,background .15s}
.soc a:hover{opacity:1;background:rgba(255,255,255,.08)}
.ft-soc{margin:14px 0 4px;gap:6px}
.md-soc{display:flex;justify-content:center;margin-top:10px;gap:6px}
.md-soc a{color:var(--ink)}

/* ---- Menu: Document Printing and Request a Quote as services (Junaid, 16 Oct 2026: "do some magic") ---- */
.nav-svc{position:relative}
.nav-svc .nav-svc-btn{gap:7px}
.nav-svc .svc-i{width:17px;height:17px;flex:none}
.nav-doc .nav-svc-btn .svc-i{color:var(--primary);transition:transform .25s ease}
.nav-doc .nav-svc-btn .svc-i path:nth-child(3){stroke-dasharray:20;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}
.nav-doc:hover .nav-svc-btn .svc-i{transform:translateY(-1px)}
.nav-doc:hover .nav-svc-btn .svc-i path:nth-child(3){animation:svcLines .9s ease}
@keyframes svcLines{0%{stroke-dashoffset:20}100%{stroke-dashoffset:0}}
.nav-doc .nav-svc-btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);opacity:0;transition:opacity .15s}
.nav-doc:hover .nav-svc-btn::after,.nav-doc .nav-svc-btn[aria-current="page"]::after{opacity:1}
.nav-doc .nav-svc-btn[aria-current="page"]{color:var(--primary);font-weight:500}
.mainnav .nav-quote .nav-svc-btn{align-self:center;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);position:relative;overflow:hidden;transition:background .15s,box-shadow .15s,transform .15s}
.mainnav .nav-quote .nav-svc-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;height:auto;opacity:1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:none}
.mainnav .nav-quote:hover .nav-svc-btn::after{left:130%;transition:left .7s ease}
.mainnav .nav-quote .svc-i{width:16px;height:16px}
.svc-panel{min-width:340px;max-width:360px;padding:18px 18px 16px;white-space:normal}
.nav-quote .svc-panel{left:auto;right:-8px}
.svc-hd{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.svc-hd .svc-ic{width:40px;height:40px;border-radius:var(--radius);background:var(--panel);display:grid;place-items:center;color:var(--primary);flex:none}
.svc-hd .svc-ic .svc-i{width:22px;height:22px}
.svc-hd b{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.25}
.svc-hd small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;line-height:1.4}
.svc-pts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.svc-pts li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--ink);font-weight:500}
.svc-pts li svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--ok)}
.svc-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.svc-from{font-size:12px;color:var(--muted);font-weight:500}
.svc-from b{color:var(--ink);font-size:15px;font-weight:500}
.mainnav .svc-cta{height:34px;padding:0 14px;border-radius:var(--radius);background:var(--primary);color:#fff;font-size:12.5px;font-weight:500;gap:6px;white-space:nowrap}
.mainnav .svc-cta::after{display:none}
.mainnav .svc-cta svg{width:15px;height:15px;transition:transform .15s}
.mainnav .svc-cta:hover{background:var(--primary-dk);color:#fff}
.mainnav .svc-cta:hover svg{transform:translateX(2px)}
@media (min-width:901px) and (max-width:1240px){.nav-svc .nav-svc-btn{gap:5px}.nav-svc .nav-svc-btn>.svc-i{width:15px;height:15px}}
@media (prefers-reduced-motion:reduce){.nav-doc:hover .nav-svc-btn .svc-i path:nth-child(3){animation:none}.mainnav .nav-quote:hover .nav-svc-btn::after{transition:none;left:-60%}}
.md-nav a.nav-doc{font-weight:500}

/* ---- Contact cards, About stats, why-cards, award callout, closing band (Junaid, 16 Oct 2026: "very basic") ---- */
.contact-strip a.cc{display:flex;gap:0;color:var(--ink)}
.contact-strip a.cc:hover{border-color:rgba(var(--prgb),.45);box-shadow:var(--shadow-1)}

/* ---- Send Artwork: send a link for big files ---- */
.sa-link[open]>summary{border-bottom:1px solid var(--line)}
.sa-linkb .btn-ghost{padding:0 16px}
.sa-link>.src{padding:8px 14px 0}
.sa-links li{font-size:12.5px}
.sa-links li .ct{margin-left:auto;color:var(--muted);font-size:11.5px}
.sa-link>:last-child{padding-bottom:14px}

/* ---- Artwork window approve bar: one compact row (Junaid, 16 Oct 2026: it covered a third of the screen) ---- */
.aw-confirm .aw-ct{display:block}
.aw-confirm .aw-cl{display:block}
.aw-modal .aw-confirm{display:grid;gap:10px 22px;margin:14px -22px -22px;box-shadow:0 -8px 20px rgba(42,42,51,.06)}
@media (max-width:860px){
  .aw-modal .aw-confirm{margin:12px -14px -14px;gap:8px;box-shadow:0 -8px 20px rgba(42,42,51,.08)}

}

/* ---- Top bar, organised (Junaid, 16 Oct 2026): smaller message on the left, social and quick links on the right ---- */
.topbar{letter-spacing:.2px}
.topbar .tb-left{display:flex;align-items:center;gap:8px;min-width:0}
.topbar .tb-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-right{display:flex;align-items:center;gap:0;flex:none}
.topbar .tb-soc{display:flex;border-right:1px solid var(--line)}
.topbar .tb-soc a{border-radius:50%;display:grid;place-items:center;opacity:.68;transition:opacity .15s,background .15s}
.topbar .tb-links{display:flex;align-items:center}
.topbar .tb-links a{display:inline-flex;align-items:center;gap:6px;height:26px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);color:var(--ink);opacity:1;font-weight:500;transition:background .15s,color .15s}
.topbar .tb-links a svg{opacity:.7;flex:none}
.topbar .tb-links a:hover{background:var(--tint);color:var(--primary)}
.topbar .tb-links a:hover svg{opacity:1}
.topbar .tb-links a.tb-acct{margin-left:6px;color:var(--ink)}
@media (max-width:1200px){.topbar .tb-links a:not(.tb-acct) svg{display:none}}
@media (max-width:1080px){.topbar .tb-soc{display:none}}
.hb.dark+.hb.dark{margin-top:10px}
footer .wrap>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.topbar .tb-soc a{width:22px;height:22px}
.topbar .tb-soc{margin-right:12px;padding-right:12px}
.topbar .tb-links{gap:2px}
.topbar .tb-links a{padding:0 8px}
footer .hb.dark{display:grid;width:100%;max-width:300px}

/* ---- Same-Day pill with its status card; products page banner and Show more (16 Oct 2026) ---- */
.mainnav .nav-sdw>a.nav-sd{height:32px}
.mainnav a.nav-sd.paused::before{background:var(--attn,#A5630F);box-shadow:0 0 0 3px rgba(165,99,15,.16)}
.nav-sdw .svc-panel{left:-40px}
.svc-hd small.sd-sub{display:flex;align-items:center;gap:6px;font-weight:500}
.svc-hd small.sd-sub::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(63,157,107,.16);flex:none}
.svc-hd small.sd-sub.later{color:var(--ink)}
.sdbanner .sdb-ic i{position:absolute;border-radius:50%;background:var(--success)}
.sdbanner.paused .sdb-ic i{background:var(--attn,#A5630F)}
.sdbanner small{margin-top:3px;font-size:12.5px}

/* ---- Chat with us (16 Oct 2026) ---- */
.chatw{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:flex-end;gap:12px;transition:bottom .25s ease}
.chat-fab{position:relative;display:inline-flex;align-items:center;border:0;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font:inherit;font-weight:500;cursor:pointer;transition:transform .15s,box-shadow .15s}
.chat-fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(20,25,30,.28)}
.chat-fab:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.chat-fab .cf-ic svg{display:block}
.chat-fab .cf-dot{position:absolute;border-radius:50%;background:var(--success);box-shadow:0 0 0 2px var(--ink)}
.chatw.away .chat-fab .cf-dot{background:#B8BEC3}
.chat-fab .cf-n{position:absolute;top:-4px;right:-4px;padding:0 6px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:#C2412D;color:#fff;font-weight:500;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.chatw.open .chat-fab .cf-t{display:none}
.chatw.open .chat-fab{padding:0 15px}
.chat-panel{width:360px;max-width:calc(100vw - 28px);height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);box-shadow:0 24px 60px rgba(20,25,30,.28);overflow:hidden;border:1px solid var(--line)}
.chat-panel[hidden]{display:none}
.cp-h{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:var(--primary);color:#fff}
.cp-av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:grid;place-items:center;font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--logo-dark,#C6D864);flex:none}
.cp-who{flex:1;min-width:0}
.cp-who b{display:block;font-size:14px;font-weight:500}
.cp-st{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.75);line-height:1.35;margin-top:1px}
.cp-st::before{content:"";width:7px;height:7px;border-radius:50%;background:#5BC08A;flex:none}
.chatw.away .cp-st::before{background:#B8BEC3}
.cp-x{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.cp-x svg{width:16px;height:16px}
.cp-x:hover{background:rgba(255,255,255,.16)}
.cp-body{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--panel)}
.cp-thread{flex:1;overflow:auto;padding:16px 14px 10px;display:flex;flex-direction:column;gap:10px}
.cp-msg{display:flex;flex-direction:column;max-width:86%}
.cp-msg.them{align-self:flex-start}
.cp-msg.me{align-self:flex-end;align-items:flex-end}
.cp-b{padding:10px 13px;border-radius:var(--radius);font-size:13px;line-height:1.5;background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:var(--radius-sm);overflow-wrap:anywhere}
.cp-msg.me .cp-b{background:var(--primary);color:#fff;border-color:var(--primary);border-radius:var(--radius);border-bottom-right-radius:var(--radius-sm)}
.cp-msg small{font-size:10.5px;color:var(--muted);margin-top:3px;padding:0 4px}
.cp-quick{display:flex;flex-wrap:wrap;gap:6px}
.cp-quick a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:#fff;border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--ink);text-decoration:none;transition:border-color .15s}
.cp-quick a:hover{border-color:var(--primary);color:var(--primary)}
.cp-live{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid rgba(var(--prgb),.3);border-radius:var(--radius);background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cp-live svg{width:22px;height:22px;color:var(--primary);flex:none}
.cp-live b{display:block;font-size:13px}
.cp-live small{display:block;font-size:11.5px;color:var(--muted)}
.cp-live:hover{border-color:var(--primary)}
.cp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
.cp-opt{display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.cp-opt svg{width:16px;height:16px;flex:none}
.cp-opt:hover{border-color:var(--primary);color:var(--primary)}
.cp-wait{margin:0;font-size:11.5px;color:var(--muted);text-align:center}
.cp-form{border-top:1px solid var(--line);padding:10px 12px 8px;background:#fff}
.cp-who-f{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.cp-who-f[hidden]{display:none}
.cp-who-f input{height:36px;border:1px solid var(--input);border-radius:var(--radius);padding:0 10px;font:inherit;font-size:12.5px;min-width:0}
.cp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cp-row{display:flex;align-items:flex-end;gap:8px}
.cp-row textarea{flex:1;min-width:0;resize:none;min-height:40px;max-height:120px;border:1px solid var(--input);border-radius:var(--radius);padding:10px 12px;font:inherit;font-size:13px;line-height:1.4}
.cp-row textarea:focus,.cp-who-f input:focus{outline:2px solid rgba(var(--prgb),.25);border-color:var(--primary)}
.cp-send{width:40px;height:40px;border-radius:var(--radius);border:0;background:var(--primary);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.cp-send svg{width:18px;height:18px}
.cp-send:hover{background:var(--primary-dk)}
.cp-note{margin:6px 2px 0;font-size:10.5px;color:var(--muted)}
body.has-chat .totop{right:auto;left:22px}
@media (max-width:900px){.chatw{right:14px;bottom:16px}.chat-fab .cf-t{display:none}.chat-fab{border-radius:50%;corner-shape:round}body.has-chat .totop{left:14px}
  .chatw.open{left:0;right:0;bottom:0!important;top:0;align-items:stretch;justify-content:flex-end;gap:0;background:rgba(20,25,30,.35)}
  .chatw.open .chat-fab{display:none}
  .chatw.open .chat-panel{width:100%;max-width:none;height:min(88vh,640px);border-radius:var(--radius) var(--radius) 0 0}}
html.pos-mode .chatw{display:none}
@media print{.chatw{display:none}}
.chatw{flex-direction:column-reverse}
.chat-fab .cf-n[hidden]{display:none}

/* ======== Help pages refresh (Junaid, 16 Oct 2026: "they look old, not part of our theme") ======== */
.docpage .doc-hero{position:relative}
.docpage .doc-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(var(--prgb),.07),transparent 70%);pointer-events:none}
.docpage .doc-hero h1{font-size:34px;letter-spacing:-.4px;margin:8px 0 10px}
.docpage .doc-hero .lead{max-width:760px}
.doc-layout{grid-template-columns:232px minmax(0,1fr);gap:40px}
.doc-nav{top:84px;gap:2px;border-left:0;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.doc-nav::before{content:"On this page";display:block;padding:6px 10px 8px;font-size:10.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--eyebrow-ink)}
.doc-nav a{display:flex;align-items:center;gap:9px;margin:0;padding:8px 10px;border:0;border-radius:var(--radius);corner-shape:round;font-size:13px;color:var(--muted);transition:background .15s,color .15s}
.doc-nav a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line);flex:none;transition:background .15s}
.doc-nav a:hover{background:var(--panel);color:var(--ink)}
.doc-nav a.on{background:var(--panel);color:var(--ink);font-weight:500}
.doc-nav a.on::before{background:var(--primary)}
.doc h2{font-size:23px;letter-spacing:-.2px;margin:46px 0 12px;padding-top:30px;border-top:1px solid var(--line)}
.doc h2:first-child{padding-top:0;border-top:0}
.doc ul:not([class]){list-style:none;padding-left:0}
.doc ul:not([class])>li{position:relative;padding-left:22px}
.doc ul:not([class])>li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:rgba(var(--prgb),.35)}
.doc table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.doc th{background:var(--panel);padding:11px 14px}
.doc td{padding:12px 14px}
.doc tr:last-child td{border-bottom:0}
.doc tbody tr:hover td{background:rgba(var(--prgb),.025)}
@media (max-width:900px){.doc-nav{padding:0;border:0;background:none}.doc-nav::before{display:none}.doc-nav a{border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:6px 12px;background:#fff}.doc-nav a::before{display:none}.doc-nav a.on{border-color:var(--primary);background:var(--tint)}.doc table{display:block;overflow-x:auto}}

.plp-intro p{color:var(--muted)}
.plp-guides a{font-weight:500;color:var(--ink)}
.plp-guides a:hover{color:var(--primary)}
.plp-guides a:hover svg{color:var(--primary)}
/* help pages on phones: one column (the refresh rule above must not win under 900 px) */
@media (max-width:900px){.doc-layout{grid-template-columns:minmax(0,1fr);gap:24px}.doc-nav{position:static;top:auto}}
.stepsrow.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.stepsrow.three{grid-template-columns:minmax(0,1fr)}}

/* ---- Fact cards everywhere (Junaid, 17 Oct 2026: "the About figures cards, I love those; apply that style wherever there is a
   card"). One pattern: an icon tile beside a small capitals label and the title, a hairline, the words underneath. Used by the
   About figures, the step cards (About, Help, Templates, Turnaround), the help and My Account quick-link cards, the quote
   reasons, the delivery contact cards and the 1-2-3 strip under the homepage hero. Markup: .as-ic, .as-k, b, .as-t ---- */
.stepsrow>div,.trust3>div,.helpcard,.stripline.sl-icons>div,.ccard{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic k" "ic v" "t t";column-gap:12px;row-gap:0;align-items:center;align-content:start;padding:18px 18px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--muted);font-size:12.5px;line-height:1.55;text-align:left}
.stepsrow .as-ic,.trust3 .as-ic,.helpcard>span.as-ic,.stripline.sl-icons .as-ic,.ccard .ic{grid-area:ic;width:44px;height:44px;margin:0;border-radius:var(--radius);border:0;background:var(--panel);color:var(--primary);display:grid;place-items:center;flex:none}
.stepsrow .as-ic svg,.trust3 .as-ic svg,.helpcard>span.as-ic svg,.stripline.sl-icons .as-ic svg,.ccard .ic svg{width:20px;height:20px}
.stepsrow .as-k,.trust3 .as-k,.helpcard>span.as-k,.stripline.sl-icons .as-k,.ccard small{grid-area:k;display:block;margin:0;align-self:end;font-size:11px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink);line-height:1.3}
.stepsrow>div>b,.trust3>div>b,.helpcard b,.stripline.sl-icons>div>b,.ccard b{grid-area:v;display:block;margin:2px 0 0;align-self:start;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.stepsrow .as-t,.trust3 .as-t,.helpcard>span.as-t,.stripline.sl-icons .as-t,.ccard em{grid-area:t;display:block;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.55;color:var(--muted);font-style:normal}
.helpcard{padding-right:44px}
/* four step cards across: a two-line title must not push its hairline below its neighbours */
@media (min-width:901px){.stepsrow:not(.three)>div>b{min-height:39px}}
.helpcard::after{top:36px;right:18px}
.ccard:hover,.helpcard:hover{border-color:rgba(var(--prgb),.45);box-shadow:0 10px 26px -14px rgba(20,24,28,.3)}
.stepsrow,.trust3{gap:14px}
.stripline.sl-icons>div:first-child{border-top:1px solid var(--line)}

/* ---- Styling audit (Junaid, 17 Oct 2026): sizes back to the theme's measure (intro lines under headings, home reviews),
   help page headers without the box (full width, a hairline under), headings a touch heavier, icons in the text colour
   (Look & Feel > Icon colour, data-icon on html), a wider gap between icon tiles and their words ---- */
h1{font-weight:500}
.hero h1{font-weight:400}
.sec-h h2,.doc h2,.docpage h2{font-weight:500}
.plp-intro p{font-size:13px;line-height:1.65}
.sec-h p{font-size:13.5px}
.team .lead{font-size:13.5px}
.rev{font-size:13px}
.rev p{font-size:13px;line-height:1.6}
.docpage .doc-hero{max-width:none;margin:6px 0 28px;padding:0 0 22px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;overflow:visible}
.docpage .doc-hero::after{display:none}
.docpage .doc-hero h1,.doc-hero h1{font-size:30px;font-weight:500;letter-spacing:-.3px;margin:6px 0 8px}
.docpage .doc-hero .lead,.doc-hero .lead{max-width:none;line-height:1.65}
@media (max-width:900px){.docpage .doc-hero{padding:0 0 18px;border-radius:0}.docpage .doc-hero h1{font-size:26px}}
/* icons follow the muted text colour (the one theme; the Icon colour setting is retired, 7 Nov 2026) */
:root .as-ic,:root .ac-ic,:root .ap-ic,:root .cc-ic,:root .ccard .ic,:root .helpcard .ic,:root .eta-ic,:root .fh-ic,:root .hb-ic,:root .sdb-ic,:root .svc-ic,:root .results-h .rcount svg,:root .trust svg,:root .deliv-main svg,:root .sum-rows .sr svg,:root .pnote svg,:root .sizebar svg,:root .dropzone svg,:root .aw-slot svg,:root .cp-live svg,:root .plp-guides a svg,:root .fhelp2 .fh-tel svg,:root .qt svg{color:var(--icon)} .stepsrow>div,.trust3>div,.helpcard,.stripline.sl-icons>div,.ccard{column-gap:16px}
/* top bar: social icons first on the left, then the short message; My Account alone on the right (Junaid, 17 Oct 2026) */
.topbar .tb-left .tb-soc{display:flex}
@media (max-width:1080px){.topbar .tb-left .tb-soc{display:none}}
/* phone menu: the Same-Day row keeps its words on the left like every other row (the live dot was a third flex item, so
   space-between centred the label; Junaid, 17 Oct 2026) */
.md-nav a.nav-sd{justify-content:flex-start}
.md-nav a.nav-sd svg{margin-left:auto}

/* ---- 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 ---- */
/* hover: a thicker, lighter ring instead of a dark border (the theme colour is near black in Lime & Charcoal) */
.catcard:hover,.helpcard:hover,.ccard:hover,.tplcard:hover,.template-card:hover,.lessons a:hover,.aorow:hover,.qrow:hover,.contact-strip a.cc:hover,.acct-todo a:hover,#acctTodo a:hover,.nf-cats a:hover{border-color:rgba(var(--prgb),.22);box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28)}
.catcard:hover,.helpcard:hover,.lessons a:hover{transform:translateY(-2px)}
.tile:hover,.aw-mini:hover,.aw-pickpg:hover,.qmore:hover,.dp-nav:hover,.basket-btn:hover{border-color:rgba(var(--prgb),.35)}
/* category sidebar: a dot marks the open range (no bar down the side), counts sit quietly on the right */
.filters h3{margin:0 12px 8px;font-size:11px;letter-spacing:.7px}
.filters button{justify-content:flex-start;gap:0;padding:9px 12px;border-radius:var(--radius);font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
.filters button::before{content:"";position:static;width:6px;height:6px;border-radius:50%;background:var(--line);flex:none;margin-right:10px;transition:background .15s}
.filters button:hover{background:var(--panel)}
.filters button:hover::before{background:var(--muted)}
.filters button[aria-pressed="true"]{background:var(--tint);color:var(--ink);font-weight:500}
.filters button[aria-pressed="true"]::before{background:var(--primary)}
.filters .count{margin-left:auto;padding:0 0 0 10px;background:none;font-size:11.5px;font-weight:500;color:var(--muted);min-width:24px;text-align:right}
.filters button[aria-pressed="true"] .count{background:none;color:var(--ink);font-weight:500}
/* description text on one size: the At a glance measure (13.5 px); already-smaller text is left alone */
.tagline,.pdp-head .tagline{font-size:13px}
.doc p,.doc li{font-size:13px}
.docpage .doc-hero .lead,.doc-hero .lead{font-size:13px}
.acc-body,.acc-body p,.explained .acc-body p{font-size:13px}
.story-side p,.res-grid .story-side p,.res-grid p,.res-grid li,.sd-body p{font-size:13px;line-height:1.7}
/* Chat with us: Buddy is typing */
.cp-typing .cp-b{display:inline-flex;gap:4px;align-items:center;padding:12px 14px}
.cp-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:cpBlink 1.2s infinite}
.cp-typing i:nth-child(2){animation-delay:.2s}
.cp-typing i:nth-child(3){animation-delay:.4s}
@keyframes cpBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.jn-article p{line-height:1.75}
/* ---- 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 ---- */
.seg2-b b{font-size:13px}
/* social icons: a clearer ring, a touch larger; My Account as a soft solid pill */
.ft-soc a{width:36px;height:36px;border:1.5px solid var(--line)}
.ft-soc a:hover{border-color:var(--line-strong);background:var(--tint)}
.md-soc a{width:38px;height:38px;border:1.5px solid rgba(var(--prgb),.3)}
.topbar .tb-soc{gap:4px}
.topbar .tb-soc a,.topbar .tb-left .tb-soc a{width:26px;height:26px;opacity:.9;border:1px solid var(--line)}
.topbar .tb-soc a:hover{border-color:var(--line-strong)}
.topbar .tb-links a.tb-acct{height:28px;padding:0 12px 0 10px;background:var(--surface);border:1px solid var(--line);font-weight:500;letter-spacing:.2px}
.topbar .tb-links a.tb-acct:hover{background:var(--tint);border-color:var(--line-strong)}
/* main menu, calmer: plain links, the Same-Day link keeps only its live dot, the services lose their icons, Request a
   Quote is an outlined pill */
.mainnav .wrap{font-size:13.5px}
.mainnav a.nav-sd{height:100%;align-self:stretch;padding:0;border:0;border-radius:0;font-weight:500;gap:8px;color:inherit}
.mainnav a.nav-sd::after{display:block;content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);opacity:0;transition:opacity .15s}
.mainnav a.nav-sd:hover::after,.mainnav a.nav-sd[aria-current="page"]::after{opacity:1}
.mainnav a.nav-sd:hover,.mainnav a.nav-sd[aria-current="page"]{color:var(--primary);border:0}
.nav-doc .nav-svc-btn .svc-i,.mainnav .nav-quote .svc-i{display:none}
.mainnav .nav-quote .nav-svc-btn{height:34px;padding:0 16px;background:transparent;color:var(--ink);border:1px solid rgba(var(--prgb),.35);box-shadow:none;font-weight:500}
.mainnav .nav-quote .nav-svc-btn::after{display:none}
.mainnav .nav-quote:hover .nav-svc-btn{background:var(--panel);color:var(--ink);box-shadow:none;border-color:rgba(var(--prgb),.6)}
.mainnav .nav-sdw{align-self:stretch;display:flex;align-items:stretch}
.mainnav .nav-sdw a.nav-sd{height:auto}
/* footer social row never wider than a narrow phone (344 px Z Fold cover): wrap, and smaller circles under 380 px */
.ft-soc{flex-wrap:wrap;max-width:100%}
@media (max-width:380px){.ft-soc{gap:5px}.ft-soc a{width:32px;height:32px}}
/* ---- Fifth round (Junaid, 17 Oct 2026): top bar without rings, spec icon tiles, catalogue looks, Show more, footer ---- */
.topbar{font-size:11px}
.topbar .wrap{height:38px;gap:24px}
.topbar .tb-soc a,.topbar .tb-left .tb-soc a,.topbar .tb-left .tb-soc a:hover{border:0;background:none;width:24px;height:24px;opacity:.72}
.topbar .tb-soc a:hover{opacity:1;background:none}
.topbar .tb-soc svg{width:14px;height:14px}
.topbar .tb-left .tb-soc{gap:6px;margin:0 14px 0 0;padding:0 14px 0 0;border-right:1px solid var(--line)}
.topbar .tb-left{font-size:11px;font-weight:500;letter-spacing:.2px;color:var(--muted)}
main[data-look="b"] .filters{display:none}
main[data-look="b"] .filters-mobile{display:flex;margin:0 0 18px;gap:8px}
main[data-look="b"] .prodgrid{gap:12px}
main[data-look="b"] .catcard{padding:10px}
main[data-look="b"] .catcard p,main[data-look="b"] .cc-foot .count{display:none}
main[data-look="b"] .catcard b{font-size:13.5px}
main[data-look="b"] .cc-foot{border-top:0;padding-top:6px}
main[data-look="c"] .catcard{padding:0;overflow:hidden}
main[data-look="c"] .catcard .im{border-radius:0;margin-bottom:12px}
main[data-look="c"] .catcard b,main[data-look="c"] .catcard p,main[data-look="c"] .catcard .rating{margin-left:14px;margin-right:14px}
main[data-look="c"] .cc-foot{margin:auto 14px 12px;border-top-color:var(--line)}
main[data-look="c"] .cc-foot .count{display:none}
/* footer: brand, Shop, Help & Advice, Print Buddy, Talk to Our Team; small-caps headings, calm link rhythm */
footer{font-size:12.5px}
footer h4{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot-bottom .wrap{align-items:center}
.ft-secure{display:inline-flex;align-items:center;gap:6px}
@media (max-width:1100px){footer .ft-brand{grid-column:1/-1}}
@media (max-width:900px){footer .ft-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-bottom .wrap{flex-direction:column;align-items:flex-start}}
/* ---- Sixth round (Junaid, 17 Oct 2026): compact step strip, search with suggestions, lighter phone, compact chat button ---- */
.mast .phone{font-size:9px;font-weight:500;letter-spacing:.5px;color:var(--muted)}
.search{height:44px;background:#fff;border:1px solid rgba(var(--prgb),.22);border-radius:var(--radius);padding:0 6px 0 12px;gap:8px;position:relative;box-shadow:0 1px 2px rgba(20,24,28,.04);transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--field-line);box-shadow:var(--field-ring)}
.search .s-ic{flex:none;color:var(--muted);display:grid;place-items:center}
.search input{font-size:13.5px}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search .go{width:32px;height:32px;border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.search .go:hover{background:var(--primary);color:#fff}
.srch-dd{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 40px -12px rgba(20,24,28,.25);padding:6px;z-index:60;display:none;text-align:left}
.search.open .srch-dd{display:block}
/* the list is never narrower than the words in it (Junaid, 25 Oct 2026: typing showed pictures and categories but no names at laptop widths,
   where the search box narrows): at least 360 px wide, and the category column goes when the box is under 1100 px */
.srch-dd{right:auto;width:max(calc(100% + 2px),360px);max-width:calc(100vw - 32px)}
@media (max-width:1100px){.srch-dd .sd-cat{display:none}}
@media (max-width:900px){.srch-dd{width:calc(100% + 2px);min-width:0}}
.srch-dd a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 8px;border-radius:var(--radius);text-decoration:none;color:var(--ink);font-weight:400}
.srch-dd a.on,.srch-dd a:hover{background:var(--panel)}
.srch-dd .sd-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius);background:var(--panel);color:var(--icon,var(--ink))}
.srch-dd img{width:40px;height:40px;border-radius:var(--radius);object-fit:cover;background:var(--panel)}
.srch-dd .sd-t{min-width:0}
.srch-dd b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-dd b mark{background:none;color:var(--primary)}
.srch-dd small{display:block;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-dd .sd-cat{font-size:10px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;color:var(--eyebrow-ink);white-space:nowrap}
.srch-dd .sd-all{display:flex;justify-content:center;gap:6px;padding:9px;margin-top:4px;border-top:1px solid var(--line);border-radius:0;font-size:12.5px;font-weight:500;color:var(--primary)}
.chat-fab{height:40px;padding:0 16px 0 12px;gap:8px;font-size:12.5px;box-shadow:0 8px 22px rgba(20,25,30,.22)}
.chat-fab .cf-ic svg{width:18px;height:18px}
.chat-fab .cf-dot{top:7px;left:25px;width:8px;height:8px}
.chat-fab .cf-n{min-width:18px;height:18px;font-size:10.5px}
@media (max-width:900px){.chat-fab{height:42px;width:42px;padding:0;justify-content:center}.chat-fab .cf-dot{left:26px;top:7px}.chatw.open .chat-fab{padding:0}}
/* ---- Seventh round (Junaid, 17 Oct 2026): illustrated journal, phone number weight, footer band ---- */
.mast .phone b{font-size:22px;font-weight:500;letter-spacing:-.2px;line-height:1.05}
.jn-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.jn-filters button{height:34px;padding:0 13px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);border:1px solid var(--line);background:#fff;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.jn-filters button span{color:var(--muted);font-weight:500;margin-left:4px}
.jn-filters button:hover{border-color:rgba(var(--prgb),.35)}
.jn-filters button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
.jn-filters button[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.jn-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.jn-card:hover{border-color:rgba(var(--prgb),.22);box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
.jn-cover{position:relative;aspect-ratio:16/9;background:var(--panel);display:grid;place-items:center;color:var(--ink);border-bottom:1px solid var(--line)}
.jn-cover svg{width:54%;height:72%}
.jn-cover .jn-chip{position:absolute;left:12px;top:12px;font-size:10px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--eyebrow-ink);background:#fff;border:1px solid var(--line);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);padding:4px 9px}
.jn-body{padding:14px 16px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.jn-body b{font-size:14.5px;font-weight:500;line-height:1.3}
.jn-body p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
.jn-body small{margin-top:auto;padding-top:10px;font-size:11.5px;color:var(--muted)}
.jn-ask p{margin:0 0 16px;font-size:13px;color:var(--muted)}
footer .ft-brand>p{max-width:280px}
@media (max-width:1100px){}
@media (max-width:900px){footer .ft-brand{grid-column:1/-1}}
@media (max-width:520px){}
/* narrow phones: Print Buddy and Talk to Our Team share a row (compact rows without the icon chips) */
@media (max-width:520px){}
/* ---- Eighth round (Junaid, 17 Oct 2026): account link plain, every icon in the icon colour, hero badges, footer band ---- */
.topbar .tb-links a.tb-acct,.topbar .tb-links a.tb-acct:hover{height:auto;padding:0;background:none;border:0;color:var(--primary);font-weight:500;letter-spacing:.2px;gap:6px}
.topbar .tb-links a.tb-acct:hover{text-decoration:underline;text-underline-offset:3px}
.topbar .tb-links a.tb-acct svg{opacity:.85} :root .lessons .lic,:root .lessons i,:root .spk-ic,:root .md-nav a svg,:root .fhelp .fh-ic{color:var(--icon)}
/* ---- Hero facts (Junaid, 17 Oct 2026, "do something about these cards, reduce the height"): the Same-Day and Three Best
   Rated cards leave the picture and join the figures row as three quiet facts with hairlines between them: icon tile,
   figure, line; the award and same-day facts are links. Hero padding and picture trimmed. ---- */
.hero .wrap{padding-top:26px}
/* ---- Eleventh round (Junaid, 17 Oct 2026): hero facts balanced, product page notice and spec tiles tidied ---- */
.sg-t small{font-size:10.5px}
.sg-t b{font-size:13.5px}
/* ---- 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 ---- */
@media (min-width:901px){
  .hero .wrap{align-items:center}

}
/* ---- Thirteenth round (Junaid, 17 Oct 2026): the hero facts live in the three strip cards (the 1-2-3 steps are told
   on the help and product pages); the chat and back-to-top buttons turn light over the footer ---- */
.hero .wrap{grid-template-rows:none;padding-bottom:44px}
.stripline.sl-icons>div:hover{border-color:rgba(var(--prgb),.22)}
.chat-fab,.totop{transition:background .2s,color .2s,transform .15s,box-shadow .15s}
body.over-footer .chat-fab{background:var(--surface);color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.35)}
body.over-footer .chat-fab .cf-dot{box-shadow:0 0 0 2px var(--line)}
body.over-footer .chat-fab:hover{box-shadow:0 14px 32px rgba(0,0,0,.4)}
body.over-footer .totop{background:var(--surface);color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.35)}
body.over-footer .totop.on:hover{background:#F2F3F4}
body.over-footer .totop .ring circle{stroke:var(--ink)}
/* ---- Same-day category banner (Junaid, 17 Oct 2026: improve): the product page notice layout with a label, a
   one-line title and the timing link as an outlined pill ---- */
.sdbanner .sdb-ic i{top:-3px;right:-3px;box-shadow:0 0 0 2px #fff}
.sdbanner.ok .sdb-ic i{background:var(--logo)}
.sdbanner small:not(.sdb-k){margin-top:3px}
/* ---- Minimal catalogue looks D to G (Junaid, 17 Oct 2026: "unique, minimal, elegant, not overcrowded"; he picks one
   tomorrow). Shared base: borderless cards, the picture on the panel grey with 14 px corners, the name under it, no
   rating or footer, the intro paragraph hidden; hover rings the picture only ---- */
main[data-look="d"] .catcard,main[data-look="e"] .catcard,main[data-look="g"] .catcard{border:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
main[data-look="d"] .catcard:hover,main[data-look="e"] .catcard:hover,main[data-look="g"] .catcard:hover{box-shadow:none;transform:none;border:0}
main[data-look="d"] .catcard .im,main[data-look="e"] .catcard .im,main[data-look="g"] .catcard .im{border-radius:var(--radius);margin-bottom:12px;transition:box-shadow .15s}
main[data-look="d"] .catcard:hover .im,main[data-look="e"] .catcard:hover .im,main[data-look="g"] .catcard:hover .im{box-shadow:0 0 0 2px rgba(var(--prgb),.14)}
main[data-look="d"] .catcard b,main[data-look="e"] .catcard b,main[data-look="g"] .catcard b{justify-content:flex-start;gap:6px;margin:0 2px 2px;font-size:14px}
main[data-look="d"] .catcard b span,main[data-look="e"] .catcard b span,main[data-look="g"] .catcard b span{display:none}
main[data-look="d"] .catcard .rating,main[data-look="e"] .catcard .rating,main[data-look="g"] .catcard .rating,main[data-look="d"] .catcard p,main[data-look="g"] .catcard p,main[data-look="e"] .cc-foot,main[data-look="g"] .cc-foot{display:none}
main[data-look="d"] .plp-intro,main[data-look="e"] .plp-intro,main[data-look="g"] .plp-intro,main[data-look="f"] .plp-intro{display:none}
main[data-look="d"] .prodgrid,main[data-look="g"] .prodgrid{gap:22px 18px}
/* E and G: no sidebar; the ranges are text tabs across the top */
main[data-look="e"] .filters,main[data-look="g"] .filters{display:none}
main[data-look="e"] .prodgrid{gap:28px 24px}
main[data-look="e"] .catcard b{font-size:15px}
main[data-look="e"] .catcard p{display:block;margin:0 2px;font-size:12.5px;line-height:1.5;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
/* F: a list, one product a row, picture left, name and line, a chevron on the right */
main[data-look="f"] .prodgrid{display:block}
main[data-look="f"] .catcard{display:grid;grid-template-columns:88px minmax(0,1fr) auto;grid-template-areas:"im t go" "im d go";column-gap:18px;row-gap:2px;align-items:center;padding:12px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
main[data-look="f"] .catcard:hover{box-shadow:none;transform:none;border:0;border-bottom:1px solid var(--line);background:var(--panel)}
main[data-look="f"] .catcard .im{grid-area:im;width:88px;aspect-ratio:1/1;border-radius:var(--radius);margin:0}
main[data-look="f"] .catcard b{grid-area:t;align-self:end;justify-content:flex-start;margin:0;font-size:14.5px}
main[data-look="f"] .catcard b span{display:none}
main[data-look="f"] .catcard p{grid-area:d;align-self:start;margin:0;font-size:12.5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
main[data-look="f"] .catcard .rating{display:none}
main[data-look="f"] .cc-foot{grid-area:go;margin:0;padding:0;border:0}
main[data-look="f"] .cc-foot .count{display:none}
main[data-look="f"] .cc-foot .go{font-size:0}
main[data-look="f"] .cc-foot .go::after{content:"";display:block;width:8px;height:8px;border-top:1.5px solid var(--muted);border-right:1.5px solid var(--muted);transform:rotate(45deg);margin-right:8px}
main[data-look="f"] .catcard:hover .cc-foot .go::after{border-color:var(--primary)}
main[data-look="f"] .catcard:hover img{transform:none}
@media (max-width:600px){main[data-look="f"] .catcard{grid-template-columns:64px minmax(0,1fr) auto}main[data-look="f"] .catcard .im{width:64px}}
/* ---- Range bar above the cards for looks E and G (Junaid, 17 Oct 2026: the plain text tabs looked basic): a white
   rounded track, the open range as an ink pill, the others quiet, counts as small muted figures; wraps to two rows ---- */
main[data-look="e"] .filters-mobile,main[data-look="g"] .filters-mobile{display:flex;gap:4px}
/* ---- Look D, plain and aligned (Junaid, 17 Oct 2026: the refinement was not wanted; alignment was off): picture,
   one-line name, the range under it at the same height on every card ---- */
main[data-look="d"] .catcard .im{border-radius:var(--radius);margin-bottom:10px}
main[data-look="d"] .catcard b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;text-wrap:balance}   /* two lines, never "Perforated Folded Le..." (audit 28 Oct 2026) */
main[data-look="d"] .cc-foot{border:0}
main[data-look="d"] .cc-foot .go{display:none}
main[data-look="d"] .cc-foot .count{font-size:11px;font-weight:500;letter-spacing:.2px;text-transform:none;color:var(--muted)}
main[data-look="d"] .catcard p,main[data-look="d"] .catcard .rating{display:none}
main[data-look="d"] .catcard:hover .im{box-shadow:0 0 0 2px rgba(var(--prgb),.14)}
main[data-look="d"] .cc-foot{display:block;margin:2px 0 0;padding:0}
main[data-look="d"] .cc-foot .count{display:block;padding:0 2px;margin:0;line-height:1.4}
main[data-look="d"] .catcard b{margin:0}
main[data-look="d"] .cc-foot{text-align:left}
main[data-look="d"] .cc-foot .count{margin-left:0;text-align:left;width:auto}
/* Look D: pictures sit inside the tile with a margin instead of filling it; more room between cards (Junaid, 17 Oct 2026) */
main[data-look="d"] .prodgrid{gap:36px 28px}
main[data-look="d"] .catcard .im{background:#EBEDEF;padding:9%}
main[data-look="d"] .catcard img{object-fit:contain;transform:none}
main[data-look="d"] .catcard:hover img{transform:none}
@media (max-width:600px){main[data-look="d"] .prodgrid{gap:24px 16px}}
/* Hero and closing-band button pairs share one size (Junaid, 17 Oct 2026: not the same size) */
.hero-ctas .btn,.hero-ctas .btn-ghost,.cta-band .row .btn,.cta-band .row .btn-ghost{height:46px}
/* Look D: name and range centred under the picture (Junaid, 17 Oct 2026) */
main[data-look="d"] .catcard b,main[data-look="d"] .cc-foot,main[data-look="d"] .cc-foot .count{text-align:center}
main[data-look="d"] .catcard b{padding:0 6px}
/* ---- 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 ---- */
.tiles.icons{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.icons.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.icons.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles[data-group="gap"]{grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.tiles[data-group="gap"] .tile{text-align:center;padding:10px 4px;font-size:12.5px}
.tiles[data-group="gap"] .tile::after,.tiles[data-group="gap"] .tile svg.tick{display:none}
@media (max-width:900px){.tiles[data-group="gap"]{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:520px){.tiles.icons:not(.n2){grid-template-columns:repeat(2,minmax(0,1fr))}

  }
/* ---- 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 ---- */
.tiles[data-group="finished_size"] .tile[data-v="Custom Size"]{grid-column:1/-1}
.cs-f input{height:40px;padding:0 40px 0 12px;font:inherit;font-size:14px;font-weight:500;border:1px solid var(--input)}
.cs-f input:disabled{background:var(--panel)}
.cs-f input.bad{border-color:var(--attn-line);box-shadow:0 0 0 3px var(--attn-ring)}
/* ---- Footer first column (Junaid, 17 Oct 2026): the Three Best Rated card and the social icons sit at the foot of the
   brand column; the band row and the sample pack card are gone; icons only for networks with a real address ---- */
footer .ft-brand .hb.dark{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;max-width:300px;margin:18px 0 0;padding:8px 12px 8px 8px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape)}
footer .ft-brand .hb.dark .hb-ic{width:34px;height:34px;border-radius:var(--radius)}
footer .ft-brand .hb.dark .hb-ic svg{width:18px;height:18px}
footer .ft-brand .hb.dark .hb-t{min-width:0}
footer .ft-brand .ft-soc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
footer .ft-brand .hb.dark .hb-t small{text-wrap:balance}

/* ---- Page count stepper (perfect and wire bound, 17 Oct 2026): any even number of pages, the count typed or stepped ---- */
.pg-step input{height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);font:inherit;font-size:15px;font-weight:500;background:#fff}
.pg-step input:focus{background:var(--panel)}
.pg-field p{margin:2px 0 0;font-size:12px;color:var(--muted)}

/* ---- 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 ---- */
/* step bar */
.qb-steps button{padding:4px 4px 4px 0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:500;line-height:1.25;color:var(--muted)}
.qb-steps small{font-size:10px;color:var(--eyebrow-ink)}
.qb-steps button.on{color:var(--ink)}
.qb-steps button.done{color:var(--ink)}
/* step heading and fields */
.qb-h h2{margin:4px 0 4px;font-size:20px}
.qb-h p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.qb-t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.qb-t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.qb-in,.qb-pane .qb-unit select{padding:0 12px;color:var(--ink);background:#fff;border:1px solid var(--input);border-radius:var(--radius)}
.qb-in:focus,.qb-pane .qb-unit select:focus,.qb-find input:focus{border-color:var(--field-line);box-shadow:var(--field-ring)}
.qb-pane .qb-unit select{padding-right:30px;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 11px center/11px}
/* products in the chosen range */
.qb-find svg{color:var(--muted)}
.qb-find input{height:40px;padding:0 12px 0 38px;font:inherit;font-size:13px;background:#fff;border:1px solid var(--input)}
.qb-draw svg{height:auto;margin:0 auto}
.qb-draw p{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.qb-step button{border:0;background:var(--panel);font:inherit;font-size:17px;line-height:1;color:var(--ink)}
.qb-step button:hover{background:rgba(var(--prgb),.1)}
.qb-step input{border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);font:inherit;font-size:14px;font-weight:500;background:#fff}
.qb-step input:focus{background:rgba(var(--prgb),.04)}
.qb-drop input{height:1px}
.qb-drop:focus-within{box-shadow:var(--field-ring)}
.qb-drop b{display:block;font-size:13px}
.qb-drop small{font-size:11.5px}
.qb-file small{font-size:11px}
.qb-file button{border:0;border-radius:var(--radius);background:var(--panel);font-size:15px;line-height:1;color:var(--muted)}
.qb-file button:hover{color:var(--ink)}

/* nav */
.qb-nav .btn,.qb-nav .btn-ghost{padding:0 20px}
.qs-item img,.qs-ph{width:44px;height:44px}
.qs-it b{display:flex;font-size:13.5px}
.qs-it small{font-size:11.5px}
.qs-acts button{border:0;border-radius:var(--radius);background:none;color:var(--muted)}
.qs-acts button:hover{background:var(--panel);color:var(--ink)}
.qs-acts svg{width:15px;height:15px}
.qb-addmore>svg{width:44px;height:44px}
.qb-addmore b{font-size:13.5px}
.qb-addmore small{font-size:12px}
.qs-draw svg{height:auto;margin:0 auto}
.qb-sheet.sent{box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 18px 40px -28px rgba(20,24,28,.35)}
.qb-done>p{line-height:1.6;color:var(--muted)}
.qb-next li{display:grid;gap:2px;padding:0 0 16px 28px}
.qb-next b{font-size:13.5px}
.qb-done-acts .btn,.qb-done-acts .btn-ghost{padding:0 20px}
/* below the builder */
.qb-how h2,.qb-faq h2{font-size:20px;margin:0 0 14px}
@media (max-width:900px){.qb-cats.tiles.icons.lr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qb-steps button{padding:4px 0}
  }
@media (max-width:640px){
  
  .qb-h h2{font-size:18px}.qb-nav .btn,.qb-nav .btn-ghost{padding:0 16px}
  }
/* ---- 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 h2{margin:4px 0 6px;font-size:20px}
.qp-draw svg{width:240px;height:auto;margin:0}
.qp-next li{display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape)}
.qp-ni svg{width:15px;height:15px}
.qp-how h2{margin:0 0 12px;font-size:17px}
@media (max-width:640px){.qp-top h2{font-size:18px}}
@media (max-width:520px){.qp-draw svg{width:100%}
  
  }
/* ---- 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) ---- */

.fm-folded svg{width:72px;height:52px;stroke-width:1}
/* ---- 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{display:block}
/* ---- Quote wizard, second round (Junaid, 17 Oct 2026): products as names, a listed product's own options in a frame,
   its listed price card, a field that still needs a choice ringed in honey, listed prices on the sheet and the thank-you ---- */
.qp-t b{font-size:15px}
.qp-t small{font-size:12px}
.qp-v b{font-size:24px}
.qp-a .btn-ghost{padding:0 16px}
.qs-order:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.08)}
.qs-order svg{width:13px;height:13px}
.qs-total b{font-size:15px}
.qb-listed li{display:grid;gap:4px 16px;align-items:center}
.qb-listed li b{font-size:13.5px}
.qb-lt b{font-size:15px}
/* ---- Menu families (Junaid, 17 Oct 2026, after WTTB, Instantprint, Solopress and Vistaprint): six families across the bar,
   each opening a full-width panel under it: groups as columns (small capitals heading over a hairline, product names),
   "N more" into the family page, and a foot row (all of the family, all products, Request a Quote). The phone drawer
   lists the same families as opening sections; the family page (products.html?g=) shows each group as a section ---- */
/* six families and three services in one bar: 13 px text and a 10 px minimum gap on desktop (the leftover spreads out);
   on a narrower desktop the bar drops families in order (Gifts & Weddings first), fitMainNav() in site.js */
@media (min-width:1241px){.mainnav .wrap{font-size:13px;gap:10px}}
@media (min-width:901px) and (max-width:1240px){.mainnav .wrap{font-size:12.5px;gap:22px}}
.mainnav [data-fit][hidden]{display:none!important}
.mainnav .nav-mega{position:static}
.mainnav .mm-panel{left:0;right:0;min-width:0;padding:0;border-left:0;border-right:0;border-radius:0 0 var(--radius) var(--radius);white-space:normal;box-shadow:0 26px 48px -20px rgba(42,42,51,.24)}
.mm-in{max-width:var(--page-w,1240px);margin:0 auto;padding:26px 24px 16px}
.mm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.mm-cols{display:grid;grid-template-columns:repeat(var(--mmc,4),minmax(0,1fr));align-content:start}
.mm-col b{display:flex;align-items:center;margin:0 0 8px;padding-bottom:10px;border-bottom:1px solid var(--line);line-height:1.3}
.mm-ic{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:var(--radius);background:var(--panel);color:var(--icon)}
.mm-ic svg{width:17px;height:17px}
.mainnav .mm-col a{height:auto}
.mainnav .mm-col a::after,.mainnav .mm-foot a::after,.mainnav .mm-feat::after{display:none}
.mainnav .mm-col a:hover{color:var(--primary);transform:translateX(2px)}
.mm-more svg{width:12px;height:12px}
.mainnav .mm-col a.mm-more:hover{color:var(--ink)}
.mainnav .mm-feat{display:flex;flex-direction:column;align-items:flex-start;height:auto;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s}
.mainnav .mm-feat:hover{box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
.mm-fim{display:block;width:100%;aspect-ratio:4/3;margin-bottom:12px;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
.mm-fim img{display:block;width:100%;height:100%;object-fit:cover}
.mm-fk{font-size:10px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink)}
.mm-feat b{margin-top:3px;font-size:14px;font-weight:500;line-height:1.3}
.mm-feat small{margin-top:4px;font-size:12px;line-height:1.45;color:var(--muted)}
.mm-fgo{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;font-weight:500;color:var(--ink)}
.mm-fgo svg{width:13px;height:13px;transition:transform .15s}
.mainnav .mm-feat:hover .mm-fgo svg{transform:translateX(3px)}
.mm-foot{display:flex;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line)}
.mainnav .mm-foot a{height:auto;font-size:12.5px;font-weight:500;color:var(--ink)}
.mainnav .mm-foot a:hover{color:var(--primary)}
.mainnav .mm-foot a.mm-q{gap:4px}
/* the bar in two calm groups: the product families, then a hairline, then the services */
.mainnav .nav-sdw{position:relative}
.mainnav .nav-sdw::before{content:"";position:absolute;left:-14px;top:50%;width:1px;height:20px;margin-top:-10px;background:var(--line)}
/* Request a Quote sits in the header beside the basket (moved from the menu bar so the bar breathes), the same outlined
   button the bar used: 46 px like the basket, a 35 per cent theme border, the panel grey on hover; phones use the drawer */
.mast-quote{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;flex:none;border:1px solid rgba(var(--prgb),.35);border-radius:var(--radius-sm);background:#fff;font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
.mast-quote svg{color:var(--icon);flex:none}
.mast-quote:hover,.mast-quote[aria-current="page"]{background:var(--panel);border-color:rgba(var(--prgb),.6)}
@media (max-width:900px){.mast-quote{display:none}}
@media (min-width:901px) and (max-width:1100px){.mast-quote svg{display:none}.mast-quote{padding:0 12px}}
/* HEADER ORDER (23 Oct 2026, Junaid: "Design Online... prominent... Request a Quote can move further to the right, closer to the basket,
   and number can go towards the left, search bar more towards the left and smaller"): the logo, search and phone sit together on the
   left; Design Online (the one solid button), Request a Quote and the basket sit together on the right. Design Online is not in the
   menu row; on phones it is a button at the foot of the menu, beside Request a Quote. */
.mast .search{margin-left:8px;max-width:380px}
.mast .phone{text-align:left;align-items:flex-start}
.mast-quote{margin-left:auto}
.mast-design{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;flex:none;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s,box-shadow .15s}
.mast-design:hover,.mast-design[aria-current="page"]{background:var(--primary-dk);color:#fff;box-shadow:0 6px 14px rgba(var(--prgb),.22)}
.mast-design+.mast-quote{margin-left:-18px}
.mast .wrap>.mast-quote~.basket-btn{margin-left:-14px}
@media (max-width:900px){.mast-design{display:none}}
@media (min-width:901px) and (max-width:1100px){.mast-design svg{display:none}.mast-design{padding:0 14px}.mast-design+.mast-quote{margin-left:-8px}.mast .wrap>.mast-quote~.basket-btn{margin-left:-6px}}
.md-nav a.md-design{border:1px solid rgba(var(--prgb),.35);margin:14px 0 0;border-radius:var(--radius-sm);justify-content:center;font-size:14px}
.md-nav a.md-design+a.md-cta{margin-top:8px}
.md-fams{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.md-fam{border-bottom:1px solid var(--line)}
.md-fam summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 4px;font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer}
.md-fam summary::-webkit-details-marker{display:none}
.md-fam summary span{margin-left:auto;font-size:11px;font-weight:500;color:var(--muted)}
.md-fam summary::after{content:"";width:7px;height:7px;flex:none;margin:0 4px 3px 2px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .18s}
.md-fam[open] summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.md-grp{padding:0 4px 8px}
.md-grp i{display:block;margin:8px 0 2px;font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--eyebrow-ink)}
.md-grp a{display:flex;align-items:center;min-height:38px;font-size:13.5px;color:var(--ink);text-decoration:none}
.md-famall{display:block;margin:2px 4px 14px;font-size:13px;font-weight:500;color:var(--primary);text-decoration:none}
.fam-grp h2{margin:0 0 14px;font-size:18px}

/* family page sidebar (products.html?g=): the family's groups sit under it, a step in and a touch smaller */
.filters button.sub{padding-left:28px;font-size:12.5px;font-weight:500;color:var(--muted)}
.filters button.sub::before{width:4px;height:4px}
.filters button.sub:hover{color:var(--ink)}

/* More (17 Oct 2026): on a smaller laptop screen the families that do not fit move into More, a short list with counts */
.mainnav .nav-more[hidden]{display:none!important}
.mainnav .nav-more .nav-dd-btn{background:none;border:0;padding:0;cursor:pointer;color:inherit}
.mainnav .more-panel{min-width:240px;padding:8px;left:-14px}
.mainnav .more-panel a{display:flex;justify-content:space-between;align-items:center;gap:16px;height:auto;padding:10px 12px;border-radius:var(--radius);font-size:13px;color:var(--ink)}
.mainnav .more-panel a::after{display:none}
.mainnav .more-panel a:hover{background:var(--panel)}
.mainnav .more-panel a span{font-size:11px;font-weight:500;color:var(--muted)}
/* small laptops: the header keeps the basket on screen (tighter gaps, the search may narrow) */
@media (min-width:901px) and (max-width:1100px){.mast .wrap{gap:16px}.mast .search{min-width:0}.mast .search input{min-width:0;width:100%}}
@media (min-width:901px) and (max-width:1000px){.mast .phone{font-size:0}.mast .phone b{font-size:18px}}

/* ---- Header and footer polish (Junaid, 17 Oct 2026, evening) ----
   Top bar at 80 per cent of its old 38 px: 30 px, the text still clear of the edges. */
@media (min-width:901px){.topbar .wrap{height:30px}}
/* The basket is an icon: a square button the height of the header buttons, the count a small ink badge on its corner
   (hidden at zero); the word stays for screen readers. */
.basket-btn{aspect-ratio:1;padding:0;gap:0;justify-content:center;position:relative}
.basket-btn svg{width:20px;height:20px}
.basket-btn .bk-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.basket-btn i{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;margin:0;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);display:grid;place-items:center;background:var(--primary);color:#fff;font-size:10.5px;font-weight:500;line-height:1;border:2px solid #fff;box-sizing:border-box}
.basket-btn.bk-empty i{display:none}
/* The cards we take, beside Secure card payments: white chips 38 x 24 in the brands' own colours */
.ft-secure{flex-wrap:wrap;row-gap:8px;opacity:1}
.ft-secure>svg,.ft-secure .ft-sec-t{opacity:.85}
.ft-pay{display:inline-flex;flex-direction:row;gap:6px;margin-left:10px}
.ft-paycard{width:38px;height:24px;display:block;background:var(--surface);border-radius:var(--radius-sm)}
@media (max-width:520px){.ft-pay{margin-left:0;flex-basis:100%}}

/* the theme preview bar (?theme=<key>): bottom left, small, ink */

/* ==== PRINT GUIDES (Junaid, 17 Oct 2026): guides.html (library), guide.html?g= (one guide), covers drawn in CSS + SVG
   from js/guides.js. Each guide brings its own colours (--gbg, --gink, --ghl, --gkick on the cover; --gacc and --gtint
   on its page). The site theme still owns buttons, type and cards. ==== */

.gcard p{font-size:13px;line-height:1.6;color:var(--muted);margin:6px 0 0}
.gcard .go{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--primary)}
.gl-news p{font-size:13px;color:var(--muted);margin:0;line-height:1.65}

.gg-done p,.gg-back p{font-size:12.5px;color:var(--muted);margin:6px 0 14px;line-height:1.6}
.g-n{font-size:22px;font-weight:500;color:var(--gacc);line-height:1.1}
.g-chaps p{font-size:13px;line-height:1.6;color:var(--muted);margin:4px 0 10px}
.g-prods a{color:var(--ink)}
/* drop-down panels, calmer (Junaid, 17 Oct 2026: "less congested"): one-line names (MENU_SHORT), a slimmer picture card,
   headings with a little less tracking and a smaller tile so they sit on one line, a touch more air between columns */
.mm-body.has-feat{grid-template-columns:minmax(0,1fr) 216px}
.mm-cols{gap:12px 32px}
.mm-col b{gap:9px}
/* drop-down group headings (Junaid, 17 Oct 2026: "too stretched and heavy"): plain Montserrat semibold in Title Case, normal
   letter spacing, ink colour; a step above the 13 px product links */
.mm-col b{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.mm-col b .mm-ic{width:28px;height:28px;border-radius:var(--radius)}
.mainnav .mm-col a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* drop-down links, balanced (Junaid, 17 Oct 2026: "diaries is too small... not too long, not too small", and "a nicer effect"
   on hover; then "the same size as the top menu text"): product names 13 px weight 500 like the bar, headings 14 px; hover = a soft tinted pill with a small arrow sliding in (never a
   bar down the side); "See 3 More" is a quiet text link; the foot links are icon chips with the same hover */
/* product names and the "See N More" link step in from the heading's icon tile, the hover tint starting at the tile's
   edge (Junaid, 19 Oct 2026: "move them slightly forward"); "See N More" is a quiet muted text link, no chip ("overpowering") */
.mainnav{--mm-ind:14px}
@media (max-width:1360px){.mainnav{--mm-ind:8px}}
.mainnav{--mm-arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.mm-col b{font-size:14px;margin-bottom:6px}
.mainnav .mm-col a{position:relative;display:block;margin:0 -10px 0 0;padding:6px 28px 6px var(--mm-ind);border-radius:var(--radius);font-size:13px;font-weight:500;line-height:1.4;color:var(--ink);transform:none;transition:background-color .18s ease,color .18s ease}
.mainnav .mm-col a::before{content:"";position:absolute;top:50%;width:13px;height:13px;margin-top:-6.5px;background:currentColor;-webkit-mask:var(--mm-arr) no-repeat center/contain;mask:var(--mm-arr) no-repeat center/contain;opacity:0;transform:translateX(-6px);transition:opacity .18s ease,transform .22s ease}
.mainnav .mm-col a:hover,.mainnav .mm-col a:focus-visible{background:rgba(var(--prgb),.08);color:var(--primary);transform:none;outline:0}
.mainnav .mm-col a:hover::before,.mainnav .mm-col a:focus-visible::before{opacity:1;transform:none}
.mainnav .mm-col a.mm-more{display:inline-flex;align-items:center;gap:5px;margin:4px 0 0;padding:5px 8px 5px var(--mm-ind);border-radius:var(--radius);background:none;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--muted);transition:color .18s ease}
.mainnav .mm-col a.mm-more::before{display:none}
.mainnav .mm-col a.mm-more svg{width:12px;height:12px;opacity:.7;transition:transform .2s ease,opacity .2s ease}
.mainnav .mm-col a.mm-more:hover,.mainnav .mm-col a.mm-more:focus-visible{background:none;color:var(--primary)}
.mainnav .mm-col a.mm-more:hover svg,.mainnav .mm-col a.mm-more:focus-visible svg{transform:translateX(3px);opacity:1}
/* group headings link to their section on the family page (Junaid, 19 Oct 2026: "they are categories, make them clickable"):
   on hover the name takes the theme colour, the icon tile gets the light 2 px ring and a small arrow slides in */
.mainnav .mm-col a.mm-h{display:flex;align-items:center;gap:inherit;height:auto;margin:0;padding:0;border-radius:0;background:none;font:inherit;color:inherit;white-space:normal;overflow:visible}
.mainnav .mm-col a.mm-h::before{display:none}
.mm-h .mm-ic{transition:box-shadow .18s ease}
.mm-h>svg{width:13px;height:13px;flex:none;margin-left:-3px;opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .22s ease}
.mainnav .mm-col a.mm-h:hover,.mainnav .mm-col a.mm-h:focus-visible{background:none;color:var(--primary)}
.mainnav .mm-col a.mm-h:hover .mm-ic,.mainnav .mm-col a.mm-h:focus-visible .mm-ic{box-shadow:0 0 0 2px rgba(var(--prgb),.14)}
.mainnav .mm-col a.mm-h:hover>svg,.mainnav .mm-col a.mm-h:focus-visible>svg{opacity:1;transform:none}
.mm-foot{gap:10px;margin-top:18px;padding-top:16px}
.mainnav .mm-foot a.mm-fl{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 13px 0 11px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:13px;font-weight:500;color:var(--ink);transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.mm-fl>svg{width:16px;height:16px;flex:none}
.mm-fl>svg:first-child{color:var(--icon,var(--primary))}
.mm-fl>svg:last-child{width:13px;height:13px;margin-left:1px;opacity:.5;transition:transform .2s ease,opacity .2s ease}
.mm-fl em{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 7px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--panel);font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.mainnav .mm-foot a.mm-fl:hover,.mainnav .mm-foot a.mm-fl:focus-visible{background:rgba(var(--prgb),.06);border-color:rgba(var(--prgb),.32);color:var(--primary);box-shadow:0 8px 18px -12px rgba(var(--prgb),.55)}
.mainnav .mm-foot a.mm-fl:hover>svg:last-child{transform:translateX(3px);opacity:1}
.mainnav .mm-foot a.mm-fl:hover em{background:rgba(var(--prgb),.12);color:var(--primary)}
.mainnav .mm-foot a.mm-q{margin-left:auto;font-weight:500;color:var(--muted)}
.mainnav .mm-foot a.mm-q b{font-weight:500;color:var(--ink);transition:color .18s ease}
.mainnav .mm-foot a.mm-q:hover b{color:var(--primary)}
/* five-column panels: a little less gap and a slimmer picture card so every heading stays on one line at 14 px (the
   longest, Bags, Wraps & Extras, needs 189 px); names keep 14 px */
.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr) 200px;gap:28px}
.mm-body[data-cols="5"] .mm-cols{gap:12px 24px}
.mm-body[data-cols="5"] .mm-col b{font-size:13.5px;gap:8px}
.mainnav .mm-col a{padding-right:24px}
.mainnav .mm-col a::before{right:8px}
.mainnav .mm-col a.mm-more{padding-right:8px}
/* smaller laptops: five-column panels tighten a little more (13.5 px); under 1180 px the picture card makes way for the columns */
@media (max-width:1360px){.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr) 184px;gap:24px}.mm-body[data-cols="5"] .mm-cols{gap:12px 20px}
  .mm-body[data-cols="5"] .mm-col b{font-size:13px}}
/* five-column panels give the picture card up a little sooner (1240 px), so the stepped-in names never clip */
@media (max-width:1240px){.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr)}.mainnav .mm-body[data-cols="5"] .mm-feat{display:none}}
@media (max-width:1180px){.mm-body.has-feat,.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr)}.mainnav .mm-body .mm-feat{display:none}}
@media (max-width:1060px){.mm-cols,.mm-body[data-cols="5"] .mm-cols{gap:22px 20px}.mm-col b,.mm-body[data-cols="5"] .mm-col b{font-size:13px}
.mm-body[data-cols="5"] .mm-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mainnav .mm-panel{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain}}
/* service hover cards near the right edge open leftwards (keepNavCardsOnScreen in site.js); Document Printing, last on the
   bar, does so from the start */
.nav-doc .svc-panel,.mainnav .nav-dd-panel.to-left{left:auto;right:-8px}
@media (prefers-reduced-motion:reduce){.mainnav .mm-col a::before,.mainnav .mm-col a.mm-more svg,.mm-h>svg,.mm-fl>svg:last-child{transition: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-nav svg{width:16px;height:16px}

/* ==== Home promo boxes, v2 (Junaid, 17 Oct 2026: "looking very basic", and the text colour setting must change their text).
   A tinted card (theme tint / accent tint, or Site Content's own colours), an icon tag, a bigger heading, quick links as
   chips, a solid button in the text colour, the picture behind a curved corner. Everything takes --promo-ink and
   --promo-bg, so a background or text colour chosen in HQ reaches every word in every theme. ==== */
.promo3 p{margin:0 0 16px;line-height:1.6;color:var(--promo-ink)}   /* full strength: at 78% the words fell under 4.5 to 1 on the bright boxes */
.p3-chips a{font-weight:500;color:inherit}
.p3-art img{object-fit:cover}
/* ==== Home free guides panel (Junaid, 17 Oct 2026: "make them smaller so they don't take more space, squeeze a few more in,
   design this panel better"): a tinted panel, the intro with three small facts and a button on the left, every guide as a
   small cover in a strip that scrolls with arrows (about five in view on a laptop) ==== */
.hg2-t p{margin:0 0 18px;font-size:13px;line-height:1.7;color:var(--muted)}

/* theme preview bar: Apply This Theme keeps the one on show (Junaid, 17 Oct 2026: "an option there to apply") */
/* a close-up or a scene with no plain background fills its picture frame edge to edge (matchFrame in site.js adds .pic-full);
   plain-background photos keep their margin and the frame takes their exact grey */
.pic-full{padding:0!important}
.pic-full>img{object-fit:cover!important}
/* ==== 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 ==== */
.buybar{border-top:0;background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 -1px 0 var(--line),0 -16px 32px -20px rgba(20,24,28,.38)}
.buybar .wrap{height:78px;gap:24px}
.bb-im img{width:100%;height:100%}
.bb-t b{font-size:14.5px}
.bb-eta svg{width:21px;height:21px}
.bb-eta small,.bb-price small{font-size:11px}
.bb-eta b{font-size:13px}
.bb-price b{font-size:22px}
@media (max-width:900px){.buybar .wrap{height:70px;gap:14px}.bb-price b{font-size:20px}}
/* ==== Home slider (Junaid, 18 Oct 2026): ChatGPT's ten panoramic pictures (2.4 to 1, products on the right, the left third
   kept clear for live words). A full-width band in the picture's own grey, the picture at the page width, the words on its
   left third, controls under the words; a crossfade between slides. Phones: the words, then the picture below them. ==== */

.hs-txt p{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--muted)}

@keyframes hsFill{from{width:0}to{width:100%}}
@media (max-width:1100px){.hs-txt p{font-size:14px;margin-bottom:18px}}
@media (max-width:760px){

  .hs-txt p{font-size:14px;margin-bottom:16px}

}
/* ==== Sticky header (Junaid, 18 Oct 2026; Look & Feel > Sticky header). The logo, search and menu bar stick to the top; past
   140 px the bar slides up 38 px (top:-38px) so only a slim 64 px of the masthead shows, its contents moved down to the middle
   of that strip and the logo a little smaller. Nothing changes size, so the page never jumps. Other sticky panels sit under
   it (--stick-h). Phones keep their one sticky bar either way. ==== */
@media (min-width:901px){
  html.sticky-head{--stick-h:112px;scroll-padding-top:124px}
  html.sticky-head .site-head{position:sticky;top:0;z-index:60;background:#fff;transition:top .25s ease,box-shadow .25s ease}
  html.sticky-head .site-head .mast .wrap>*{transition:transform .25s ease,opacity .2s ease}
  html.sticky-head .site-head.stuck{top:-38px;box-shadow:0 12px 26px -20px rgba(20,24,28,.4)}
  html.sticky-head .site-head.stuck .mast .wrap>*{transform:translateY(19px)}
  html.sticky-head .site-head.stuck .mast .logo{transform:translateY(22px) scale(.84);transform-origin:left center}
  html.sticky-head .site-head.stuck .logo small{opacity:0}
  html.sticky-head :is(.filters,.pdp-gallery,.doc-nav,.acct-side,.qb-sheet,.g-get){top:calc(var(--stick-h) + 16px)}
}
@media (max-width:900px){.site-head{position:sticky;top:0;z-index:60;background:#fff}}
@media (prefers-reduced-motion:reduce){html.sticky-head .site-head,html.sticky-head .site-head .mast .wrap>*{transition:none}}
/* ==== Home slider, designed look (Junaid, 18 Oct 2026: "clear background ... add some really nice effects in the background").
   The products are cut out (tools/cut_hero_slides.py: BiRefNet masks, natural shadows kept as black with alpha) and stand on
   a background drawn in the theme's own colours: a soft tint gradient, two slow-drifting light blobs (primary and accent), a
   pale floor under the products and a fine ring with an accent dot circling it. Every slide places them a little
   differently. The products are drawn about 15 per cent smaller. Store Settings > Site Content > Slider look: Plain shows the
   photos as shot. ==== */
@keyframes hsDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2%,1.5%,0)}}
@keyframes hsOrbit{to{transform:rotate(360deg)}}
/* ==== Quote builder polish (Junaid, 18 Oct 2026) ==== */
/* a missing answer: the ring sits 12 px outside the field, so the tiles never touch it */
.qb-pane .qb-need{box-shadow:none}
.qb-pane .qb-need::after{animation:qbNeed .35s ease}
@keyframes qbNeed{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.qb-note svg{width:20px;height:20px}
.pc-ic svg{width:19px;height:19px}
.pc-ok svg{width:13px;height:13px}
.pc-hint svg{width:16px;height:16px}
.post-reveal.open{max-height:260px}
.qs-reset svg{width:13px;height:13px}
.qbm-ic svg{width:24px;height:24px}
.qbm-card p{margin:0 0 20px;line-height:1.6;color:var(--muted)}
.qbm-acts .btn,.qbm-acts .btn-ghost{padding:0 18px}
@keyframes qbmIn{from{opacity:0}to{opacity:1}}
/* the finish screen: centred, the badge clear of the step ticks above */
.qb-done-ic{margin:0 0 18px}
.qb-done-ic svg{width:34px;height:34px}
@keyframes qbPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.qb-done h2{margin:6px 0 10px;font-size:26px}
.qb-done>p{margin:0 auto}
.qb-done .qb-next li{padding:14px 14px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.qb-done .qb-next li.ok{background:color-mix(in srgb,var(--ok,var(--success)) 6%,#fff)}
/* ==== Order received (Junaid, 18 Oct 2026) ==== */
.od-badge{margin:0 0 18px}
.od h2{margin:8px 0 8px;font-size:28px}
.od-sum small{font-size:11px}
.od-bh small{font-size:12.5px}
.od-steps li.ok .od-n{background:var(--ok,var(--success));color:#fff}
.od-steps small{font-size:11.5px}
@media (max-width:640px){.od h2{font-size:24px}.od-sum span:last-child{grid-column:1/-1}}
.qb-done-ic,.od-badge{margin-bottom:32px}
/* the chat button sits above the product page buy bar, never over Add to Basket (18 Oct 2026) */
body:has(.buybar.show) .chatw:not(.open){bottom:96px}
@media (max-width:900px){body:has(.buybar.show) .chatw:not(.open){bottom:84px}}

/* ===== Catalogue looks H to L (Junaid, 18 Oct 2026: more catalogue designs to pick from in Store Settings) =====
   Card tags (cardTags in site.js) are hidden unless a look shows them. */
.cc-tags{display:none}
.cc-tags i{font-style:normal;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);font-size:10.5px;font-weight:500;letter-spacing:.02em;background:var(--panel);color:var(--ink);border:1px solid var(--line);white-space:nowrap}
.cc-tags .t-sd{background:color-mix(in srgb,var(--primary) 12%,#fff);border-color:transparent;color:var(--primary-dk,var(--primary))}
.cc-tags .t-q{background:var(--accent-tint);border-color:transparent;color:var(--accent-ink)}
main[data-look="h"] .cc-tags,main[data-look="j"] .cc-tags,main[data-look="l"] .cc-tags{display:flex;flex-wrap:wrap;gap:5px}

/* H: showroom. A large feature card leads each range (and the full list), smaller tiles follow; names, range and tags */
main[data-look="h"] .prodgrid{gap:18px}
main[data-look="h"] .catcard{padding:10px;border-radius:var(--radius)}
main[data-look="h"] .catcard .im{border-radius:var(--radius);margin-bottom:10px;background:#EBEDEF}
main[data-look="h"] .catcard b{font-size:14px;margin:0 2px 6px}
main[data-look="h"] .catcard b span,main[data-look="h"] .catcard p,main[data-look="h"] .catcard .rating{display:none}
main[data-look="h"] .catcard .cc-tags{margin:0 2px 8px}
main[data-look="h"] .cc-foot{margin:auto 2px 0;padding-top:8px}
main[data-look="h"] .cc-foot .go{display:none}
main[data-look="h"] .cc-foot .count{margin-left:0;text-align:left}
@media (max-width:600px){main[data-look="h"] .prodgrid{gap:12px}}

/* I: shelves. Range chips across the top; on a range's page each group is a row that scrolls sideways (snap, swipe on phones) */
main[data-look="i"] .filters{display:none}
main[data-look="i"] .filters-mobile{display:flex;gap:8px}
main[data-look="i"] .plp-intro{display:none}
main[data-look="i"] .catcard{border:0;padding:0;background:transparent;border-radius:0;box-shadow:none}
main[data-look="i"] .catcard:hover{box-shadow:none;transform:none;border:0}
main[data-look="i"] .catcard .im{border-radius:var(--radius);margin-bottom:10px;background:#EBEDEF;transition:box-shadow .15s}
main[data-look="i"] .catcard:hover .im{box-shadow:0 0 0 2px rgba(var(--prgb),.14)}
main[data-look="i"] .catcard b{font-size:14px;margin:0 2px 2px}
main[data-look="i"] .catcard b span,main[data-look="i"] .catcard p,main[data-look="i"] .catcard .rating,main[data-look="i"] .cc-foot .go{display:none}
main[data-look="i"] .cc-foot{margin:0 2px;padding:0;border:0}
main[data-look="i"] .cc-foot .count{margin-left:0;text-align:left;font-size:11px;font-weight:500;letter-spacing:.2px;color:var(--muted)}
main[data-look="i"] .prodgrid{gap:22px 16px}
main[data-look="i"] .fam-grp .prodgrid{display:grid;padding:2px 2px 12px}

/* J: split cards. Two a row, the picture beside the name, a line of copy, tags and the range */
main[data-look="j"] .prodgrid{gap:16px}
main[data-look="j"] .catcard{display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-areas:"im t" "im d" "im tg" "im ft";grid-template-rows:auto auto auto 1fr;column-gap:18px;padding:12px;border-radius:var(--radius)}
main[data-look="j"] .catcard .im{grid-area:im;margin:0;border-radius:var(--radius);background:#EBEDEF}
main[data-look="j"] .catcard b{grid-area:t;margin:6px 0 6px;font-size:16px;font-weight:500;justify-content:flex-start;gap:8px}
main[data-look="j"] .catcard .rating{display:none}
main[data-look="j"] .catcard p{grid-area:d;margin:0 0 10px;font-size:12.5px;line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
main[data-look="j"] .catcard .cc-tags{grid-area:tg;margin:0 0 10px}
main[data-look="j"] .cc-foot{grid-area:ft;align-self:end;margin:0;padding-top:10px}
main[data-look="j"] .cc-foot .count{font-size:11px}
@media (max-width:760px){main[data-look="j"] .catcard{grid-template-columns:38% minmax(0,1fr)}}

/* K: index. A compact directory in three columns: small picture, the name and the range; quick to scan for trade buyers */
main[data-look="k"] .prodgrid{gap:0 28px}
main[data-look="k"] .catcard{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"im t" "im c";column-gap:12px;row-gap:1px;align-items:center;padding:9px 6px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
main[data-look="k"] .catcard:hover{box-shadow:none;transform:none;border:0;border-bottom:1px solid var(--line);background:var(--panel)}
main[data-look="k"] .catcard .im{grid-area:im;width:52px;margin:0;border-radius:var(--radius);background:#EBEDEF}
main[data-look="k"] .catcard:hover img{transform:none}
main[data-look="k"] .catcard b{grid-area:t;align-self:end;margin:0;font-size:13.5px;font-weight:500;justify-content:flex-start;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;text-wrap:balance}
main[data-look="k"] .catcard b span,main[data-look="k"] .catcard .rating,main[data-look="k"] .cc-foot{display:none}
main[data-look="k"] .catcard p{grid-area:c;align-self:start;margin:0;font-size:11.5px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
main[data-look="k"] .plp-intro{display:none}

/* L: poster tiles. Tall pictures, the name on a white label over the foot of the picture, tags on the picture */
main[data-look="l"] .filters{display:none}
main[data-look="l"] .plp-intro{display:none}
main[data-look="l"] .prodgrid{gap:22px 18px}
main[data-look="l"] .catcard{position:relative;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
main[data-look="l"] .catcard:hover{border:0;box-shadow:0 16px 34px rgba(20,28,36,.12);transform:translateY(-2px)}
main[data-look="l"] .catcard .im{aspect-ratio:4/5;margin:0;border-radius:0;background:transparent}
main[data-look="l"] .catcard img{object-fit:contain;object-position:center 28%}
main[data-look="l"] .catcard:hover img{transform:scale(1.03)}
main[data-look="l"] .catcard b{position:absolute;left:10px;right:10px;bottom:10px;display:block;margin:0;padding:11px 13px 27px;background:#fff;border-radius:var(--radius);font-size:14px;font-weight:500;line-height:1.3;box-shadow:0 6px 18px rgba(20,28,36,.08)}
main[data-look="l"] .catcard b span{display:none}
main[data-look="l"] .catcard p,main[data-look="l"] .catcard .rating,main[data-look="l"] .cc-foot .go{display:none}
main[data-look="l"] .cc-foot{position:absolute;left:23px;right:23px;bottom:20px;margin:0;padding:0;border:0}
main[data-look="l"] .cc-foot .count{margin-left:0;text-align:left;font-size:11px;font-weight:500;color:var(--muted)}
main[data-look="l"] .catcard .cc-tags{position:absolute;left:10px;top:10px;right:10px}
main[data-look="l"] .catcard .cc-tags i{background:rgba(255,255,255,.92);border-color:transparent}
@media (max-width:600px){main[data-look="l"] .prodgrid{gap:14px 12px}main[data-look="l"] .catcard b{font-size:13px;padding:9px 10px 24px}main[data-look="l"] .cc-foot{left:20px;bottom:16px}}
/* ---- 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 ---- */
.mat-jump a{color:var(--ink);font-weight:500}
.mat-gh p{font-size:13px;line-height:1.6;color:var(--muted)}
.mg-main img{object-fit:cover}
.mg-t img{object-fit:cover}
.mp-im img{object-fit:cover}
.mat-links a{font-weight:500;color:var(--ink)}
.fam-side h2{font-size:14px;margin:0 0 8px}
.fam-side-l a{color:var(--muted)}
.fam-side-l a:hover{color:var(--ink)}

/* ===== Catalogue menus and looks M to O (Junaid, 18 Oct 2026: "the side menu has to be redesigned... work on the top
   menu... mix and match"). Every range and group carries an icon (.ci) and its name (.cl); the old looks hide the icon.
   Icon rail (top menu): looks L and O, and every new look on phones. Range panel (side menu): looks M and N. ===== */
.filters .ci,.filters-mobile .ci{display:none}
.filters .cl,.filters-mobile .cl{min-width:0}

/* -- the icon rail: one row of ranges, each an icon tile with its name and count; scrolls sideways when it runs out of room */
main[data-look="l"] .filters-mobile,main[data-look="o"] .filters-mobile,main[data-look="m"] .filters-mobile,main[data-look="n"] .filters-mobile{
  display:flex
  }

/* the panel takes over from the rail on wider screens (the rail is the phone menu in M and N) */
@media (min-width:901px){main[data-look="m"] .filters-mobile,main[data-look="n"] .filters-mobile{display:none}}
/* -- the range panel (side menu): every look with a side menu (the audit, 18 Oct 2026, put it on A, C, D, F, H, J and K too). A sticky white panel; every range an icon tile, its name and a quiet count;
   the chosen range is tinted with an ink icon tile (never a coloured bar down the side); the help card below it */
main[data-look="a"] .cat-layout,main[data-look="c"] .cat-layout,main[data-look="d"] .cat-layout,main[data-look="f"] .cat-layout,main[data-look="h"] .cat-layout,main[data-look="j"] .cat-layout,main[data-look="k"] .cat-layout,main[data-look="m"] .cat-layout,main[data-look="n"] .cat-layout,main[data-look="p"] .cat-layout{gap:36px}
#plpMain .filters h3{margin:0 8px 12px;font-size:10.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--eyebrow-ink)}
#plpMain .filters button{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 8px;margin:0 0 2px;border-radius:var(--radius);font-size:13px;font-weight:500;color:var(--ink);line-height:1.3}
#plpMain .filters button::before{display:none}
#plpMain .filters .ci{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius);background:var(--panel);color:var(--icon,var(--ink));transition:background .15s,color .15s}
#plpMain .filters .ci svg{width:18px;height:18px}
#plpMain .filters .count{min-width:28px;padding:2px 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:transparent;color:var(--muted);font-size:11px;font-weight:500;text-align:center}
#plpMain .filters button:hover{background:var(--panel)}
#plpMain .filters button:hover .ci{background:#fff}
#plpMain .filters button[aria-pressed="true"]{background:rgba(var(--prgb),.07);color:var(--ink);font-weight:500}
#plpMain .filters button[aria-pressed="true"] .ci{background:var(--primary);color:#fff}
#plpMain .filters button[aria-pressed="true"] .count{background:#fff;color:var(--ink)}
#plpMain .filters button:first-child{margin-bottom:8px}
#plpMain .filters button:first-child::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;height:1px;background:var(--line)}
#plpMain .filters button.sub{grid-template-columns:30px minmax(0,1fr) auto;padding-left:16px;font-size:12.5px}
#plpMain .filters button.sub .ci{width:30px;height:30px;border-radius:var(--radius)}

/* -- M: the poster tiles of look L beside the range panel, three a row */
main[data-look="m"] .plp-intro{display:none}
main[data-look="m"] .prodgrid{gap:22px 18px}
main[data-look="m"] .catcard{position:relative;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:#EBEDEF}
main[data-look="m"] .catcard:hover{border:0;box-shadow:0 16px 34px rgba(20,28,36,.12);transform:translateY(-2px)}
main[data-look="m"] .catcard .im{aspect-ratio:4/5;margin:0;border-radius:0;background:transparent}
main[data-look="m"] .catcard img{object-fit:contain;object-position:center 28%}
main[data-look="m"] .catcard:hover img{transform:scale(1.03)}
main[data-look="m"] .catcard b{position:absolute;left:10px;right:10px;bottom:10px;display:block;margin:0;padding:11px 13px 27px;background:#fff;border-radius:var(--radius);font-size:14px;font-weight:500;line-height:1.3;box-shadow:0 6px 18px rgba(20,28,36,.08)}
main[data-look="m"] .catcard b span,main[data-look="m"] .catcard p,main[data-look="m"] .catcard .rating,main[data-look="m"] .cc-foot .go{display:none}
main[data-look="m"] .cc-foot{position:absolute;left:23px;right:23px;bottom:20px;margin:0;padding:0;border:0}
main[data-look="m"] .cc-foot .count{margin-left:0;text-align:left;font-size:11px;font-weight:500;color:var(--muted)}
main[data-look="m"] .cc-tags,main[data-look="n"] .cc-tags,main[data-look="o"] .cc-tags{display:flex;flex-wrap:wrap;gap:5px}
main[data-look="m"] .catcard .cc-tags{position:absolute;left:10px;top:10px;right:10px}
main[data-look="m"] .catcard .cc-tags i{background:rgba(255,255,255,.92);border-color:transparent}

/* -- N: framed cards beside the range panel. The picture in its grey frame inside a white card, the name, one line, tags,
   then the range and a round arrow that fills on hover */
main[data-look="n"] .plp-intro{display:none}
main[data-look="n"] .prodgrid{gap:20px}
main[data-look="n"] .catcard{display:flex;flex-direction:column;padding:10px 10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
main[data-look="n"] .catcard:hover{border-color:var(--line);box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
main[data-look="n"] .catcard .im{margin:0 0 13px;border-radius:var(--radius);background:#EBEDEF}
main[data-look="n"] .catcard b{margin:0 5px 5px;font-size:15px;font-weight:500;justify-content:flex-start;line-height:1.3}
main[data-look="n"] .catcard b span,main[data-look="n"] .catcard .rating{display:none}
main[data-look="n"] .catcard p{margin:0 5px 12px;font-size:12.5px;line-height:1.5;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
main[data-look="n"] .catcard .cc-tags{margin:0 5px 12px}
main[data-look="n"] .cc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 5px 0;padding-top:11px;border-top:1px solid var(--line)}
main[data-look="n"] .cc-foot .count{order:1;margin:0;font-size:11.5px;font-weight:500;color:var(--muted);text-align:left}
main[data-look="n"] .cc-foot .go{order:2;flex:none;width:32px;height:32px;padding:0;border-radius:50%;background:var(--panel);font-size:0;color:transparent;display:grid;place-items:center;transition:background .15s}
main[data-look="n"] .cc-foot .go::after{content:"";width:14px;height:14px;background:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
main[data-look="n"] .catcard:hover .cc-foot .go{background:var(--primary)}
main[data-look="n"] .catcard:hover .cc-foot .go::after{background:#fff}
/* the words inside the round arrow are hidden (font-size 0) but still took a grid row, so the arrow sat about 4 px low
   (Junaid, 19 Oct 2026: "looks off centre"): the arrow is pinned to the exact centre of its circle */
main[data-look="n"] .cc-foot .go,main[data-look="p"] .cc-foot .go{position:relative}
main[data-look="n"] .cc-foot .go::after,main[data-look="p"] .cc-foot .go::after{position:absolute;left:50%;top:50%;margin:-7px 0 0 -7px}

/* -- O: the icon rail over large editorial cards, three a row: a big picture, the range as an eyebrow, the name, two lines
   of copy and the tags; no box, the picture frame takes the hover ring */
main[data-look="o"] .filters{display:none}
main[data-look="o"] .plp-intro{display:none}
main[data-look="o"] .prodgrid{gap:34px 26px}
main[data-look="o"] .catcard{display:flex;flex-direction:column;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
main[data-look="o"] .catcard:hover{border:0;box-shadow:none;transform:none}
main[data-look="o"] .catcard .im{order:0;margin:0 0 16px;border-radius:var(--radius);background:#EBEDEF;transition:box-shadow .2s,transform .2s}
main[data-look="o"] .catcard:hover .im{box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 18px 36px -20px rgba(20,24,28,.35);transform:translateY(-2px)}
main[data-look="o"] .cc-foot{order:1;margin:0 2px 6px;padding:0;border:0}
main[data-look="o"] .cc-foot .go{display:none}
main[data-look="o"] .cc-foot .count{margin:0;text-align:left;font-size:10.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--eyebrow-ink)}
main[data-look="o"] .catcard b{order:2;margin:0 2px 6px;font-size:18px;font-weight:500;line-height:1.3;justify-content:flex-start}
main[data-look="o"] .catcard b span,main[data-look="o"] .catcard .rating{display:none}
main[data-look="o"] .catcard p{order:3;margin:0 2px 12px;font-size:13px;line-height:1.55;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
main[data-look="o"] .catcard .cc-tags{order:4;margin:0 2px}

/* -- section headings on family pages in the new looks */

@media (max-width:1100px){
  main[data-look="a"] .cat-layout,main[data-look="c"] .cat-layout,main[data-look="d"] .cat-layout,main[data-look="f"] .cat-layout,main[data-look="h"] .cat-layout,main[data-look="j"] .cat-layout,main[data-look="k"] .cat-layout,main[data-look="m"] .cat-layout,main[data-look="n"] .cat-layout,main[data-look="p"] .cat-layout{gap:26px}
  
  }
@media (max-width:600px){
  main[data-look="m"] .prodgrid{gap:14px 12px}
  main[data-look="m"] .catcard b{font-size:13px;padding:9px 10px 24px}
  main[data-look="m"] .cc-foot{left:20px;bottom:16px}
  main[data-look="n"] .prodgrid{gap:12px}
  main[data-look="n"] .catcard{padding:8px 8px 10px;border-radius:var(--radius)}
  main[data-look="n"] .catcard b{font-size:13.5px}
  main[data-look="n"] .catcard p{display:none}
  main[data-look="o"] .prodgrid{gap:28px}}

/* -- audit (18 Oct 2026): on phones every look with a side menu shows the icon rail as its menu, like M and N */
@media (max-width:900px){
  main[data-look="a"] .filters-mobile,main[data-look="c"] .filters-mobile,main[data-look="d"] .filters-mobile,main[data-look="f"] .filters-mobile,main[data-look="h"] .filters-mobile,main[data-look="j"] .filters-mobile,main[data-look="k"] .filters-mobile,main[data-look="p"] .filters-mobile{display:flex}

  }

/* -- audit: O's pictures a touch taller, so less of the product is cropped */
main[data-look="o"] .catcard .im{aspect-ratio:5/4}

/* ===== Menus you can always scroll to the end (Junaid, 18 Oct 2026: "we have to scroll all the way down... same issue on
   mobile") ===== */
/* the phone menu fills the visible screen (not the space under the browser's toolbars), keeps clear of the home bar, and the
   page behind it stays put */
.mdrawer{bottom:auto;height:100vh;height:100dvh}
.md-panel{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch}
html:has(body.menu-open){overflow:hidden}

/* -- P: look N with four products a row (the framed cards, a touch smaller), beside the range panel */
main[data-look="p"] .cc-tags{display:flex;flex-wrap:wrap;gap:5px}
main[data-look="p"] .plp-intro{display:none}
main[data-look="p"] .prodgrid{gap:18px}
main[data-look="p"] .catcard{display:flex;flex-direction:column;padding:10px 10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
main[data-look="p"] .catcard:hover{border-color:var(--line);box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
main[data-look="p"] .catcard .im{margin:0 0 13px;border-radius:var(--radius);background:#EBEDEF}
main[data-look="p"] .catcard b{margin:0 4px 5px;font-size:14px;font-weight:500;justify-content:flex-start;line-height:1.3}
main[data-look="p"] .catcard b span,main[data-look="p"] .catcard .rating{display:none}
main[data-look="p"] .catcard p{margin:0 4px 11px;font-size:12px;line-height:1.5;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
main[data-look="p"] .catcard .cc-tags{margin:0 5px 12px}
main[data-look="p"] .cc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 5px 0;padding-top:11px;border-top:1px solid var(--line)}
main[data-look="p"] .cc-foot .count{order:1;margin:0;font-size:11.5px;font-weight:500;color:var(--muted);text-align:left}
main[data-look="p"] .cc-foot .go{order:2;flex:none;width:32px;height:32px;padding:0;border-radius:50%;background:var(--panel);font-size:0;color:transparent;display:grid;place-items:center;transition:background .15s}
main[data-look="p"] .cc-foot .go::after{content:"";width:14px;height:14px;background:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
main[data-look="p"] .catcard:hover .cc-foot .go{background:var(--primary)}
main[data-look="p"] .catcard:hover .cc-foot .go::after{background:#fff}
@media (max-width:600px){main[data-look="p"] .prodgrid{gap:12px}main[data-look="p"] .catcard{padding:8px 8px 10px;border-radius:var(--radius)}main[data-look="p"] .catcard b{font-size:13.5px}main[data-look="p"] .catcard p{display:none}}

/* ---- 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. */
.gz-svg svg{width:100%;height:auto}
.gz-svg .side{cursor:pointer}
.g-ch>header .g-n{font-weight:500;color:var(--gacc,var(--primary))}
.g-cht p{margin:0 0 12px;font-size:14px;line-height:1.7}
/* Tip and Avoid are fact cards (the house card: icon tile, small label, title, hairline, words) */
.g-fc{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic k" "ic v" "t t";column-gap:12px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.g-fc .as-ic{grid-area:ic;width:44px;height:44px;border-radius:var(--radius);background:var(--panel);color:var(--icon);display:grid;place-items:center}
.g-fc .as-ic svg{width:20px;height:20px}
.g-fc .as-k{grid-area:k;align-self:end;font-size:11px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink);line-height:1.3}
.g-fc b{grid-area:v;align-self:start;margin:2px 0 0;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink)}
.g-fc .as-t{grid-area:t;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--muted)}
.g-fc.avoid .as-ic{background:var(--attn-tint,#FBF3E2);color:var(--attn,#9A6B12)}
.gz-lay button{padding:8px 4px 9px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font:inherit;font-size:11px;font-weight:500;line-height:1.25;color:var(--ink)}
.gz-lay button:hover{border-color:rgba(var(--prgb),.35)}
.gz-lay button[aria-pressed="true"]{background:rgba(var(--prgb),.08);border-color:rgba(var(--prgb),.45)}
.gz-lay svg{width:40px;height:34px}
.gz-sn b{font-size:13px}
.gz-sn small,.gz-sv small{font-size:11px}
.gz-wt b{font-size:12.5px}
.gz-wt small{font-size:11px}
@media (max-width:420px){.gz-lay button{font-size:10.5px;padding:7px 2px 8px}}

/* ---- Template proofs (19 Oct 2026): a file made on our template, shown in 3D on the gazebo and as its printed pieces ---- */
.tp-files li{border:1px solid var(--line);padding:10px 12px}
.tp-files b{font-size:13px}
.tp-files small{font-size:11.5px;color:var(--muted)}
.tp .aw-chk{margin:0 0 8px}
.tp-file figcaption{margin:0 0 8px}
.tp-cv img{max-height:300px;width:auto;height:auto}
.tp-map-h b{font-size:13.5px}
.tp-map-h .btn-ghost{padding:6px 12px;font-size:12px}
.gz-3dbtn small{font-size:11px}
.gz3d-logo small{font-size:11px}
.ht-tools{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.ht-search{display:flex;align-items:center;gap:8px;flex:1 1 320px;max-width:520px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--muted)}
.ht-search:focus-within{border-color:var(--field-line);box-shadow:var(--field-ring)}
.ht-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);height:38px}
.ht-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ht-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.ht-card:hover{border-color:rgba(var(--prgb),.22);box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
.ht-cv{display:block;background:var(--panel);padding:8px 10px 2px;border-bottom:1px solid var(--line)}
.ht-cv .as-ic{display:grid;place-items:center;aspect-ratio:16/9;color:var(--icon)}
.ht-cv.ph{padding:0}
.ht-cv.ph img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain}
.ht-cv.ph.ill{background:#fff}
.ht-cv.ph.ill img{padding:14px;box-sizing:border-box}
.ht-cb{display:flex;flex-direction:column;flex:1;padding:16px 18px 15px}
.ht-cb .as-k,.ht-sb .as-k,.ht-list .as-k{font-size:11px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink);line-height:1.3}
.ht-cb b{margin:6px 0 6px;font-size:15.5px;font-weight:500;line-height:1.35}
.ht-ci{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ht-cf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.ht-cf i{font-style:normal;padding:0 3px}
.ht-cf .go{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--primary)}
.ht-cf .go svg{transition:transform .2s}
.ht-card:hover .ht-cf .go svg{transform:translateX(3px)}
.ht-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center;margin:8px 0 34px;padding:30px 30px 30px 34px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#fff 0%,var(--panel) 100%)}
.ht-hero.solo{grid-template-columns:minmax(0,1fr)}
.ht-hero h1{font-size:34px;font-weight:500;line-height:1.18;margin:10px 0 12px}
.ht-hero .lead{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0;max-width:620px}
.ht-facts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.ht-fact{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.ht-fact .as-ic{flex:none;width:36px;height:36px;border-radius:var(--radius);background:var(--panel);color:var(--icon);display:grid;place-items:center}
.ht-fact small{display:block;font-size:10.5px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--eyebrow-ink);line-height:1.3}
.ht-fact b{display:block;font-size:13.5px;font-weight:500;line-height:1.35}
.ht-acts{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.ht-acts .btn{height:44px;background:var(--primary)}
.ht-acts .btn-ghost{height:44px;padding:0 16px;border-color:rgba(var(--prgb),.35);color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.ht-acts .btn-ghost:hover{background:var(--panel)}
.ht-photo{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--panel)}
.ht-photo img{display:block;width:100%;height:100%;object-fit:contain}
.ht-photo.art{display:grid;place-items:center;padding:14px}
.ht-layout{margin:0 0 10px}
.ht-main{min-width:0}
.ht-need{margin:0 0 40px;padding:20px 24px 22px;border-radius:var(--radius);background:var(--panel);scroll-margin-top:96px}
.ht-need h2{margin:0 0 12px;font-size:18px;font-weight:500}
.ht-need ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 28px}
.ht-need li,.ht-points li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55}
.ht-need li svg,.ht-points li svg{flex:none;margin-top:2px;color:var(--primary)}
.ht-sec{margin:0 0 46px;scroll-margin-top:96px}
.ht-sheets{margin:0 0 44px;scroll-margin-top:96px}
.ht-sheets h2{margin:0 0 8px;font-size:18px;font-weight:500}
.ht-dls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:780px}
.ht-dl{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.ht-dl:hover{border-color:rgba(var(--prgb),.22);box-shadow:0 0 0 2px rgba(var(--prgb),.1),0 14px 30px -16px rgba(20,24,28,.28);transform:translateY(-2px)}
.ht-dl .as-ic{flex:none;width:44px;height:44px;border-radius:var(--radius);background:var(--panel);color:var(--icon);display:grid;place-items:center}
.ht-dl b{display:block;font-size:14px;font-weight:500;line-height:1.35}.ht-dl small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.ht-dl .go{margin-left:auto;flex:none;color:var(--primary)}
.ht-sh{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.ht-sh .g-n{flex:none;font-weight:500;font-size:13px;color:var(--primary);background:rgba(var(--prgb),.09);border-radius:var(--radius);padding:7px 10px;line-height:1}
.ht-sh h2,.ht-sec>h2{margin:0;font-size:24px;font-weight:500;line-height:1.25}
.ht-sec>h2{margin:0 0 10px}
.ht-p{margin:0 0 14px;max-width:780px;font-size:15px;line-height:1.7;color:var(--ink)}
.ht-steps{list-style:none;margin:18px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ht-step,.ht-cardx{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.ht-art{margin:0;padding:6px 8px 0;background:var(--panel);border-bottom:1px solid var(--line)}
.ht-sb{padding:14px 16px 16px}
.ht-sb b{display:block;margin:4px 0 6px;font-size:15px;font-weight:500;line-height:1.35;color:var(--ink)}
.ht-sb p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink)}
.ht-cardx .ht-sb b{margin-top:0}
/* the maker's step drawings and product photos in step and picture cards (19 Oct 2026): click to see them large */
.ht-zoom{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:zoom-in}
.ht-art.img{padding:10px}
.ht-art.img img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
.ht-art.img.ill{background:#fff}
.ht-zi{position:absolute;right:4px;bottom:4px;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;opacity:.85;transition:opacity .15s,transform .15s}
.ht-zoom:hover .ht-zi,.ht-zoom:focus-visible .ht-zi{opacity:1;transform:scale(1.08)}
.ht-cards[data-n="8"],.ht-cards[data-n="6"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.ht-fig .ht-im{width:100%}
.ht-fig.ill{max-width:440px}
.ht-fig.ill .ht-im{background:#fff;border:1px solid var(--line);padding:10px}
.ht-photo .ht-zoom{width:100%;height:100%}
.ht-photo.ill{background:#fff;border:1px solid var(--line);padding:14px}
.pz{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(20,24,28,.72)}
html.pz-open{overflow:hidden}
.pz-box{position:relative;display:flex;flex-direction:column;max-width:min(1100px,94vw);max-height:92vh;padding:12px 18px 18px;border-radius:var(--radius);background:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.pz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 8px}
.pz-n{font-size:12px;font-weight:500;color:var(--muted)}
.pz-x,.pz-prev,.pz-next{display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.pz-x{width:38px;height:38px;border-radius:var(--radius)}
.pz-x:hover,.pz-prev:hover,.pz-next:hover{background:var(--panel)}
.pz figure{display:flex;flex-direction:column;align-items:center;min-height:0;margin:0}
.pz img{display:block;max-width:100%;max-height:calc(92vh - 130px);object-fit:contain}
.pz figcaption{max-width:720px;margin:12px 0 0;font-size:13px;line-height:1.55;text-align:center;color:var(--muted)}
.pz-prev,.pz-next{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.pz-prev{left:-22px}.pz-next{right:-22px}
@media (max-width:1100px){.ht-cards[data-n="8"],.ht-cards[data-n="6"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.pz{padding:10px}.pz-box{max-width:100%;padding:10px 10px 14px}.pz-prev{left:6px}.pz-next{right:6px}.pz-prev,.pz-next{top:auto;bottom:10px;margin:0}
  .pz figcaption{padding:0 52px}}
@media print{.pz,.ht-zi{display:none!important}}
.ht-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 24px}
.ht-list{list-style:none;margin:16px 0 22px;padding:0;max-width:780px}
.ht-list li{padding:12px 0;border-top:1px solid var(--line)}
.ht-list li:last-child{border-bottom:1px solid var(--line)}
.ht-list p{margin:4px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.ht-points{list-style:none;margin:12px 0 20px;padding:0;max-width:780px;display:grid;gap:9px}
.ht-points li{font-size:14.5px;color:var(--ink)}
.g-fc.ht-note{margin:18px 0 24px;max-width:780px}
.g-fc.ht-note .as-t{font-size:13.5px;color:var(--ink)}
.ht-fig{margin:22px 0 26px;max-width:600px}
.ht-im{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--panel)}
.ht-im img{display:block;width:100%;height:100%;object-fit:contain}
.ht-fig figcaption{margin:9px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ht-tbl{overflow-x:auto;margin:16px 0 24px;max-width:780px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.ht-tbl .tbl th{background:var(--panel)}
.ht-tbl .tbl td,.ht-tbl .tbl th{padding:10px 14px}
.ht-sec .faq{max-width:780px}
.ht-shop .catgrid{margin-top:16px}
.ht-help .contact-strip{margin-top:18px}
.ht-more{margin:16px 0 10px;padding-top:34px;border-top:1px solid var(--line)}
.ht-mh{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.ht-mh h2{margin:0;font-size:24px;font-weight:500}
.ht-all{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--primary);text-decoration:none}
.ht-ph{display:none}
@media (min-width:1101px){.ht-steps[data-n="4"],.ht-cards[data-n="4"],.ht-steps[data-n="7"],.ht-steps[data-n="8"],.ht-cards[data-n="7"],.ht-cards[data-n="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}.ht-steps[data-n="2"],.ht-cards[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px}}
@media (max-width:1100px){.ht-steps,.ht-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ht-dls{grid-template-columns:minmax(0,1fr)}.ht-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ht-hero{grid-template-columns:minmax(0,1fr);gap:22px;padding:22px 20px 24px}
  .ht-hero h1{font-size:28px}.ht-photo{aspect-ratio:16/10}.ht-need ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.ht-search{flex-basis:100%;max-width:none}.ht-grid,.ht-steps,.ht-cards{grid-template-columns:minmax(0,1fr)}
  .ht-hero{padding:14px 14px 18px;margin-bottom:24px;gap:16px}.ht-photo{order:-1;aspect-ratio:16/10}.ht-ht{padding:0 2px}.ht-hero h1{font-size:25px;margin:8px 0 10px}.ht-hero .lead{font-size:14.5px}
  .ht-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.ht-fact{padding:9px 10px;align-items:flex-start}.ht-fact .as-ic{display:none}.ht-fact b{font-size:12.5px}
  .ht-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}.ht-acts .btn,.ht-acts .btn-ghost{justify-content:center;padding:0 8px;font-size:13px;gap:6px}.ht-need{padding:16px 16px 18px}.ht-sh h2,.ht-sec>h2,.ht-mh h2{font-size:21px}.ht-sec{margin-bottom:38px}}
/* the setup guide's print layout lives in setup.css (20 Oct 2026: here it hid every page's chrome when printed) */
.hc-hit .hc-t b{display:block}
.hc-hit .hc-t small{display:block}
.hc-pop a{font-weight:500;color:var(--ink)}
.hc-br .as-ic{width:44px;height:44px;border-radius:var(--radius);background:var(--panel)}
.hc-br h2{margin:2px 0 4px;font-size:17px;font-weight:500}
.help-rel{margin:48px 0 8px;padding-top:32px;border-top:1px solid var(--line)}
.help-rel .hr-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.help-rel h2{margin:0;font-size:22px;font-weight:500}
.help-rel .hr-h a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--primary);text-decoration:none}
@media (max-width:900px){.help-rel .hr-h a{min-height:32px}}   /* a 32 px touch height on phones (audit 19 Oct 2026) */
.help-rel .helpgrid{margin:0}
.help-rel-after .help-rel{margin:0 0 56px}
.help-home{display:flex;align-items:center;gap:12px;max-width:780px;margin:0 0 26px;padding:12px 16px 12px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.help-home .as-ic{flex:none;width:38px;height:38px;border-radius:var(--radius);background:#fff;color:var(--icon);display:grid;place-items:center}
.help-home p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.help-home a{font-weight:500;color:var(--primary)}
.help-home small{font-size:12px;color:var(--muted)}
@media (max-width:700px){
  
  .hc-br li .hc-k{display:none}.help-rel h2{font-size:20px}}

/* ---- Print Journal, Print Materials and Free Print Guides on real photos (Junaid, 19 Oct 2026: "everything has to be built from
   the real illustrations... the more text we say, it just sounds better"). Photos sit whole (contain) on the frame matchFrame
   gives them (the photo's own grey); captions 12.5 px muted; the house list dots and details.faq. */
.jn-cover.ph{display:block;padding:0}
.jn-cover.ph img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.jn-im{display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:#EBEDEF}
.jn-im img{display:block;width:100%;height:100%;object-fit:contain}
.jn-fig figcaption,.mat-ph figcaption{margin:9px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media print{.jn-fig,.mat-ph{break-inside:avoid}}


/* ==== LIGHT AND CALM (Junaid, 20 Oct 2026: "I like light fonts, not too overcrowded pages, elegant and nice"). One pass over
   the whole shop. Weights: nothing customer-facing heavier than 600; buttons, card titles, product names and questions at 500;
   capitals labels at 600. Air: sections 84 px apart, cards with a touch more room inside, the footer further from the page.
   Corners (evening): one size everywhere, --radius 6 px, small parts --radius-sm 4 px; every hard-coded radius in the stylesheets now reads the token. Step numbers
   and figure chips sit on the panel grey instead of solid ink. Headings keep the 17 Oct measure (h1 and section h2 weight 500).
   Every colour here comes through the theme tokens. Numbered 1 to 9 in the worklog, so any one can go back on its own. ==== */
/* 1. tokens */
:root{--radius:6px;--radius-sm:4px}   /* one corner everywhere (Junaid, 20 Oct 2026, evening): 6 px, small parts 4 px */
/* 2. headings and section furniture */
h1{letter-spacing:-.01em}
.sec-h{margin-bottom:26px}
.sec-h h2{font-size:27px;letter-spacing:-.2px;line-height:1.2}
.sec-h p{font-size:13px}
.section{margin-top:84px}
.pdp-head h1{font-size:30px;letter-spacing:-.3px}
.step-h h2{font-size:19px}
/* 3. buttons and links at 500 */
.btn,.btn-ghost,.cta,.p3-cta,.mainnav a[aria-current="page"],.topbar .tb-links a.tb-acct{font-weight:500}
.btn,.btn-ghost,.cta{letter-spacing:.1px}
/* 4. titles at 500: catalogue cards, fact cards, help rows, guide and journal cards, accordions and questions */
.catcard b,.stepsrow>div>b,.trust3>div>b,.helpcard b,.stripline.sl-icons>div>b,.ccard b,.hc-br h2,.hc-br li .hc-t b,.gcard b,.acc .t,
.faq summary,.stepsrow b,.trust3 b,.contact-strip b,.steps b,.trust b,.hb-t b,.svc-hd b,.jn-body b,.catcard.dspcard b{font-weight:500}
.from b{font-weight:500;font-size:24px;letter-spacing:-.3px}
.catcard p{font-size:12.5px}
/* 5. capitals labels and small chips: 600, never 700 */
b,strong{font-weight:500}   /* prose bold too (audit, 24 Oct 2026): nothing customer-facing above 600 */
.eyebrow,.stepsrow .as-k,.trust3 .as-k,.helpcard>span.as-k,.stripline.sl-icons .as-k,.ccard small,footer h4,.md-sec>b,.mm-fk,.md-grp i,
#plpMain .filters h3,.doc-nav::before,.tbl th,.dp-dow,.jn-cover .jn-chip,.g-fc .as-k,.ht-cb .as-k,.ht-sb .as-k,.ht-list .as-k,
.ht-fact small,.gcard .gk,main[data-look="o"] .cc-foot .count,.steps .n,.trust3 .n,.stepsrow .n,.acc .num,.svc-from b,
.g-ch>header .g-n,.ht-sh .g-n,.template-card .tic,.file-card .fic,.fchip i,.bankbox .bk span:nth-child(odd){font-weight:500}
/* 6. cards breathe: fact cards, catalogue cards, product steps and the explained accordions */
.stepsrow>div,.trust3>div,.helpcard,.ccard{padding:20px 20px 18px;border-radius:var(--radius)}
.stepsrow .as-t,.trust3 .as-t,.helpcard>span.as-t,.stripline.sl-icons .as-t,.ccard em{margin-top:14px}
.catcard{padding:14px;border-radius:var(--radius)}
.catcard .im{border-radius:var(--radius)}
.step{padding:22px 24px;margin-bottom:16px;border-radius:var(--radius)}
.acc summary{padding:20px 24px}
/* 7. quiet numbers: step circles and the explained numbers on the panel grey, ink figures */
.step-n{background:var(--panel);color:var(--ink);font-size:12.5px}
.stepsrow .n,.trust3 .n{background:var(--panel);color:var(--ink)}
.acc .num{background:var(--panel);color:var(--muted)}
/* 8. footer: further from the page, lighter words */
footer{margin-top:96px} footer .wrap{padding-top:56px;padding-bottom:48px}
footer .tagline-f{font-weight:400}
footer h4{letter-spacing:1px;color:var(--muted)}
/* 9. one hover everywhere stays; the catalogue card hover takes the soft ring, never a dark border */
.catcard:hover{border-color:rgba(var(--prgb),.22)}
@media (max-width:900px){.section{margin-top:56px}footer{margin-top:64px}.stepsrow>div,.trust3>div,.helpcard,.ccard{padding:18px 18px 16px}}
/* ==== FOOTER 2026 (21 Oct 2026, Junaid: "the footer on every screen needs a restructure and redesign"): a brand band (logo,
   tagline, one line, Three Best Rated, socials) beside four contact tiles, three link columns on a hairline, the bottom bar.
   On phones the tiles sit two across and the columns fold into accordions (closed until tapped). Nothing boxed, no borders:
   translucent tiles on the ink, hairlines between bands. ==== */
footer.ft2{margin-top:96px;background:var(--primary);color:var(--muted);font-size:13px}
footer.ft2>.wrap{display:block;grid-template-columns:none;padding-top:0;padding-bottom:0}
footer.ft2 .ft-brand{display:flex;flex-direction:column;align-items:flex-start}
footer.ft2 .ft-brand img,footer.ft2 .ft-brand svg.pblogo{height:26px;width:auto;margin:0 0 18px}
footer.ft2 .tagline-f{font-size:20px;font-weight:400;color:var(--ink);line-height:1.35;margin:0 0 10px;max-width:420px;letter-spacing:-.2px}
footer.ft2 .ft-brand .hb.dark{margin-top:22px}
footer.ft2 .ft-brand .ft-soc{margin-top:16px}
footer.ft2 .ft-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;padding:36px 0 44px;border-top:1px solid var(--line)}
footer.ft2 .ft-col>summary{list-style:none;pointer-events:none;display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
footer.ft2 .ft-col>summary::-webkit-details-marker{display:none}
footer.ft2 .ft-col>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(45deg);display:none;margin-right:4px}
footer.ft2 .ft-col h4{margin:0;font-size:10.5px;font-weight:500;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
footer.ft2 .ft-col>div{display:flex;flex-direction:column}
footer.ft2 .ft-col a{display:block;margin:0;padding:5px 0;font-size:13px;color:var(--muted);text-decoration:none;transition:color .15s}
footer.ft2 .ft-col a:hover{color:var(--primary)}
footer.ft2 .foot-bottom{border-top:1px solid var(--line)}
footer.ft2 .foot-bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;padding:18px 24px;font-size:11.5px;color:var(--muted)}
footer.ft2 .foot-bottom a{display:inline;margin:0;color:inherit}
footer.ft2 .ft-secure{opacity:1}
footer.ft2 .ft-paycard{box-shadow:0 0 0 1px var(--line)}
@media (max-width:1100px){}
@media (max-width:700px){
  footer.ft2{margin-top:56px}
  footer.ft2 .tagline-f{font-size:18px}
  footer.ft2 .ft-links{display:block;padding:0 0 10px;border-top:0}
  footer.ft2 .ft-col{border-top:1px solid var(--line)}
  footer.ft2 .ft-col>summary{pointer-events:auto;cursor:pointer;margin:0;padding:15px 2px;min-height:48px}
  footer.ft2 .ft-col>summary::after{display:block;transition:transform .15s}
  footer.ft2 .ft-col[open]>summary::after{transform:rotate(-135deg)}
  footer.ft2 .ft-col h4{font-size:12px;letter-spacing:.9px;color:var(--ink)}
  footer.ft2 .ft-col>div{padding:0 0 10px}
  footer.ft2 .ft-col a{padding:9px 0;font-size:14px}
  footer.ft2 .foot-bottom .wrap{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 16px 22px}
}
@media (max-width:400px){}
@media (max-width:700px){}
@media (max-width:480px){}
/* ==== SHOP SKIN 2026 (21 Oct 2026, Junaid: "now you know how we have done the clean layout and styles on HQ, do something
   similar to the home page, the catalogue pages, the upload artwork pop-up and the online designer"). The HQ language on the
   shop: cards are white with NO outline on a soft shadow (--card-sh; --card-sh2 lifts them on hover), icon tiles are tinted
   squares, strips are tabs in the air, choices are quiet panel tiles that turn tint with a one-pixel ring (--ring) when
   chosen, lists separate rows with hairlines, work surfaces (the pop-up body, the design canvas) sit on --page-bg. The shared
   parts live here; home.css, catalogue.css, artwork.css and designer.css carry the rest. Nothing structural changes. ==== */
html{--card-sh:0 1px 2px rgba(25,32,38,.05),0 8px 20px -14px rgba(25,32,38,.18);--card-sh2:0 1px 2px rgba(25,32,38,.06),0 24px 44px -22px rgba(25,32,38,.32);--ring:0 0 0 1px rgba(var(--prgb),.45);--page-bg:#F2F4F6}
.catcard{border:0;background:#fff;box-shadow:var(--card-sh)}
.catcard:hover{border-color:transparent;box-shadow:var(--card-sh2);transform:translateY(-3px)}
.catcard .im{background:var(--panel)}
.cc-foot{border-top-color:var(--line)}
/* ==== EVERY SCREEN (21 Oct 2026): the quantity rows on narrow phones. A Popular or Best value badge used to fold the amount
   onto two lines ("250 / cards"); under 400 px the badge drops under the amount instead. ==== */
@media (max-width:400px){.qrow .q{flex-wrap:wrap;row-gap:4px}}
/* ==== EVERY SCREEN (21 Oct 2026), tap targets: the bottom bar links (Terms, Order Problems, Help Centre) were 26 px tall on
   phones; they stand 32 px now. ==== */
@media (max-width:700px){footer.ft2 .foot-bottom a,footer.ft2 .foot-bottom .ft-ck{display:inline-block;padding:6px 0}footer.ft2 .foot-bottom .ft-ck{padding:6px 0}}
/* ==== FOOTER 2026, COMPACT (21 Oct 2026, Junaid: "improved and compact, so the footer is not this bulky"): the brand column is
   the logo, the tagline at 16 px, Three Best Rated as a one-line pill and the socials; the second sentence went (it repeated
   the tagline). The contact tiles are 50 px rows two by two beside the brand; under 1100 px they take a row of four under it,
   under 900 two by two. The link columns and the bottom bar sit closer. The band is about half its old height. ==== */
footer.ft2{margin-top:72px}
footer.ft2 .ft-brand img,footer.ft2 .ft-brand svg.pblogo{height:22px;margin:0 0 12px}
footer.ft2 .tagline-f{font-size:16px;line-height:1.45;margin:0 0 2px;max-width:40ch;letter-spacing:0;color:var(--ink)}
footer.ft2 .ft-brand .hb.dark{margin-top:12px;min-height:0;padding:5px 12px 5px 5px;gap:10px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape)}
footer.ft2 .ft-brand .hb.dark .hb-ic{width:30px;height:30px;border-radius:50%}
footer.ft2 .ft-brand .hb.dark .hb-ic svg{width:17px;height:17px}
footer.ft2 .ft-brand .hb.dark .hb-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0 8px}
footer.ft2 .ft-brand .hb.dark .hb-t b{font-size:12.5px;font-weight:500}
footer.ft2 .ft-brand .hb.dark .hb-t small{font-size:11.5px;margin:0}
footer.ft2 .ft-brand .ft-soc{margin-top:12px}
footer.ft2 .ft-links{padding:22px 0 26px;gap:16px 36px}
footer.ft2 .ft-col>summary{margin:0 0 8px}
footer.ft2 .ft-col a{padding:4px 0;font-size:12.5px}
footer.ft2 .foot-bottom .wrap{padding:14px 24px}
@media (max-width:1100px){}
@media (max-width:900px){}
@media (max-width:700px){footer.ft2{margin-top:48px}
footer.ft2 .tagline-f{font-size:15px}
footer.ft2 .ft-links{padding:0 0 6px}
footer.ft2 .ft-col>summary{padding:13px 2px;min-height:44px}
footer.ft2 .ft-col a{padding:8px 0;font-size:13.5px}
footer.ft2 .foot-bottom .wrap{padding:14px 16px 18px;gap:10px}}
footer.ft2 .ft-brand .hb.dark{width:max-content;max-width:100%;grid-template-columns:auto minmax(0,1fr)}
footer.ft2 .ft-brand .hb.dark .hb-go{display:none}
footer.ft2 .ft-brand .hb.dark .hb-t b,footer.ft2 .ft-brand .hb.dark .hb-t small{white-space:nowrap}
@media (max-width:700px){footer.ft2 .ft-brand .hb.dark{width:auto}
footer.ft2 .ft-brand .hb.dark .hb-t b,footer.ft2 .ft-brand .hb.dark .hb-t small{white-space:normal}}
@media (max-width:480px){}

/* FOOTER, FIVE COLUMNS (Junaid, 21 Oct 2026, later: "make them five columns; the first is Print Buddy: the logo, Good ideas deserve
   beautiful print smaller, the Three Best Rated card underneath; the address cards go out"). The brand column keeps the address, phone
   and email as three small lines (the same name, address and phone on every page for local search; the only place Bradford shows
   besides the schema). Four link columns beside it; Contact Us leads Help & Advice. Phones: the brand column, then the accordions. */
footer.ft2 .ft-links.ft5{display:grid;flex-direction:row;grid-template-columns:minmax(220px,1.35fr) repeat(4,minmax(0,1fr));gap:24px 32px;padding:44px 0 34px;border-top:0;align-items:start}
footer.ft2 .ft5 .ft-brand{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:300px}
footer.ft2 .ft5 .ft-brand>img,footer.ft2 .ft5 .ft-brand>svg.pblogo{height:24px;width:auto;margin:0 0 10px}
footer.ft2 .ft5 .tagline-f{font-size:13.5px;line-height:1.45;margin:0;max-width:30ch;color:var(--muted)}
footer.ft2 .ft5 .ft-brand .hb.dark{margin:16px 0 0;width:auto;max-width:100%}
footer.ft2 .ft5 .ft-brand .hb.dark .hb-t b,footer.ft2 .ft5 .ft-brand .hb.dark .hb-t small{white-space:normal}
footer.ft2 .ft-nap{font-style:normal;display:flex;flex-direction:column;gap:2px;margin:16px 0 0}
footer.ft2 .ft-nap a{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;padding:4px 0;font-size:12.5px;line-height:1.45;color:var(--muted);text-decoration:none}
footer.ft2 .ft-nap a:hover{color:var(--primary)}
footer.ft2 .ft-nap svg{width:15px;height:15px;margin-top:1px;color:var(--muted)}
footer.ft2 .ft-nap span{min-width:0;overflow-wrap:anywhere}
footer.ft2 .ft5 .ft-brand .ft-soc{margin:14px 0 0}
@media (max-width:1100px){footer.ft2 .ft-links.ft5{grid-template-columns:repeat(4,minmax(0,1fr))}footer.ft2 .ft5 .ft-brand{grid-column:1/-1;max-width:none}}
@media (max-width:860px){footer.ft2 .ft-links.ft5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){footer.ft2 .ft-links.ft5{display:block;padding:30px 0 6px}footer.ft2 .ft5 .ft-brand{margin:0 0 18px}}

/* COOKIE BANNER AND SITE POP-UP (24 Oct 2026; js/consent.js, PBConsent in site.js). A slim card fixed at the foot, so it never
   moves the page (no layout shift); Reject All and Accept All share one style and size (ICO: equally easy); switches, never
   pre-ticked; the pop-up is a centred card on computers and a sheet from the foot on phones. */
footer .ft-ck{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:inherit;line-height:inherit}
footer .ft-ck:hover,footer .ft-ck:focus-visible{text-decoration:underline}
.ckb{position:fixed;left:22px;bottom:22px;z-index:470;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 44px);overflow:auto;background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 1px 2px rgba(25,32,38,.08),0 18px 44px -12px rgba(25,32,38,.32);padding:18px 18px 16px;font-size:13px;line-height:1.55;animation:ckIn .28s ease both}
@keyframes ckIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ckb{animation:none}}
.ckb-head{display:flex;gap:12px;align-items:flex-start}
.ckb-ic{flex:0 0 36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--tint);color:var(--icon,var(--ink))}
.ckb-ic svg{width:20px;height:20px}
.ckb-tx{min-width:0}
.ckb-t{font-size:15px;font-weight:500;margin:1px 0 4px;line-height:1.3;padding-right:26px}
.ckb-tx p{margin:0;color:var(--muted)}
.ckb-tx a{color:var(--primary);font-weight:500;white-space:nowrap}
.ckb-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ckb-b{height:42px;border:0;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .15s}
.ckb-b:hover{background:var(--primary-dk)}
.ckb-b:focus-visible,.ckb-link:focus-visible,.ckb-save:focus-visible,.ckb-x:focus-visible,.ckb-sw:focus-visible+.ckb-tg{outline:2px solid var(--primary);outline-offset:2px}
.ckb-link{grid-column:1/-1;justify-self:center;background:none;border:0;padding:6px 10px;font:inherit;font-size:13px;font-weight:500;color:var(--primary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ckb-save{grid-column:1/-1;height:42px;border:1px solid var(--primary);background:#fff;color:var(--primary);border-radius:var(--radius-sm);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.ckb-save:hover{background:var(--tint)}
.ckb-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;background:none;color:var(--muted);border-radius:var(--radius-sm);cursor:pointer;display:grid;place-items:center}
.ckb-x:hover{background:var(--panel);color:var(--ink)}
.ckb-x svg{width:18px;height:18px}
.ckb-rows{margin-top:14px;border-top:1px solid var(--line)}
.ckb-row{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
div.ckb-row{cursor:default}
.ckb-rt{min-width:0}
.ckb-rt b{display:block;font-size:13px;font-weight:500}
.ckb-rt small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}
.ckb-on{flex:none;font-size:11px;font-weight:500;color:var(--ok);white-space:nowrap}
.ckb-sw{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ckb-tg{flex:0 0 38px;height:22px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--input);position:relative;transition:background .15s}
.ckb-tg::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.ckb-sw:checked+.ckb-tg{background:var(--primary)}
.ckb-sw:checked+.ckb-tg::after{transform:translateX(16px)}
.ckb-ask .ckb-t{padding-right:0}
/* the chat button and the back-to-top button step aside while the card is up on phones */
@media (max-width:700px){
  .ckb{left:12px;right:12px;bottom:12px;width:auto;padding:16px 14px 14px;max-height:calc(100vh - 24px)}
  html.ck-open .chatw,html.ck-open .totop{visibility:hidden}
  .ckb-ic{flex-basis:32px;height:32px}
}
@media (max-width:360px){.ckb-head{gap:10px}.ckb-ic{display:none}.ckb-acts{gap:6px}}
.pbpop{position:fixed;inset:0;z-index:480;display:grid;place-items:center;padding:20px}
.pbpop-scrim{position:absolute;inset:0;background:rgba(20,26,32,.45);opacity:0;transition:opacity .2s}
.pbpop-card{position:relative;width:min(460px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 24px 60px -16px rgba(20,26,32,.45);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .2s,transform .2s}
.pbpop.on .pbpop-scrim{opacity:1}
.pbpop.on .pbpop-card{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pbpop-scrim,.pbpop-card{transition:none}}
.pbpop-img{aspect-ratio:16/9;background:var(--panel);overflow:hidden}
.pbpop-img img{width:100%;height:100%;object-fit:cover;display:block}
.pbpop-body{padding:24px 24px 22px}
.pbpop-body h2{font-size:20px;font-weight:500;line-height:1.3;margin:4px 30px 8px 0}
.pbpop.has-img .pbpop-body h2{margin-right:0}
.pbpop-body p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.pbpop-acts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:18px}
.pbpop-acts .btn{height:44px}
.pbpop-no{background:none;border:0;padding:8px 2px;font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pbpop-no:hover{color:var(--ink)}
.pbpop-x{position:absolute;top:10px;right:10px;z-index:1;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pbpop-x svg{width:18px;height:18px}
.pbpop-x:focus-visible,.pbpop-no:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
html.pop-open{overflow:hidden}
@media (max-width:600px){
  .pbpop{place-items:end center;padding:0}
  .pbpop-card{width:100%;border-radius:var(--radius) var(--radius) 0 0;max-height:88vh;transform:translateY(24px)}
  .pbpop-body{padding:20px 16px 18px}
  .pbpop-body h2{font-size:18px}
  .pbpop-acts .btn{flex:1 1 auto}
}
/* estimated dates on basket lines and under the basket total (basket.html etaLine / etaNote, 24 Oct 2026) */
.bk-eta{display:flex;align-items:flex-start;gap:7px;margin:2px 0 14px;line-height:1.55;font-size:13px;color:var(--muted)}   /* was -12px: it sat on the chips (28 Oct 2026) */
.bk-eta svg{flex:none;margin-top:2px;color:var(--icon,var(--ink))}
.bk-eta b{font-weight:500;color:var(--ink)}
.bk-eta-n{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}

/* NOTIFICATIONS (24 Oct 2026, js/notices.js; Junaid: "a notification icon or something"). The bell is a square header button the size of the
   basket's (shown only when a design has been shared for approval), the unread count a small copper badge on its corner; the panel is a
   white card on --card-sh with hairline rows, a tinted icon tile per reply (green for Approved, honey for a change), unread rows on a
   light tint with a dot on the tile. No bar down the side of a row. */
.notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;height:46px;aspect-ratio:1;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:none;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.notif-btn[hidden]{display:none}
.notif-btn svg{width:20px;height:20px}
.notif-btn:hover,.notif-btn[aria-expanded="true"]{border-color:var(--primary);background:var(--ground);color:var(--primary)}
.notif-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nf-badge{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);display:grid;place-items:center;background:var(--accent);color:#fff;font-size:10.5px;font-weight:500;line-height:1;border:2px solid #fff;box-sizing:border-box}
.nf-badge[hidden]{display:none}
.mast .wrap>.mast-quote~.notif-btn{margin-left:-14px}
@media (min-width:901px) and (max-width:1100px){.mast .wrap>.mast-quote~.notif-btn{margin-left:-6px}}
/* the quote link is hidden on phones, so nothing pulls the basket or the bell in (the basket used to overlap the search button by 6 px there) */
@media (max-width:900px){.mast .wrap>.mast-quote~.basket-btn,.mast .wrap>.mast-quote~.notif-btn{margin-left:0}}
@media (max-width:900px){.notif-btn{height:44px;background:#fff}}
@media (max-width:380px){.notif-btn{height:40px}}
/* with the bell in the bar, the phone buttons are 40 px and the gaps 6 px so the menu button still fits at 390, and the logo steps down at 344 */
@media (max-width:480px){.mast .wrap:has(.notif-btn:not([hidden])){gap:6px}.mast .wrap:has(.notif-btn:not([hidden])) .mob-btn,.mast .wrap:has(.notif-btn:not([hidden])) .basket-btn,.mast .wrap:has(.notif-btn:not([hidden])) .notif-btn{width:40px;height:40px}}
@media (max-width:380px){.mast .wrap:has(.notif-btn:not([hidden])) .logo img,.mast .wrap:has(.notif-btn:not([hidden])) .logo svg{height:22px}}
.nf-panel{position:fixed;z-index:2400;display:flex;flex-direction:column;background:var(--card,#fff);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line),0 24px 48px -16px rgba(20,24,28,.32);overflow:hidden;color:var(--ink);font-family:inherit;outline:0}
.nf-panel[hidden]{display:none}
.nf-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.nf-head b{font-size:15px;font-weight:500;margin-right:auto}
.nf-note{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.nf-note[hidden]{display:none}
.nf-note svg{animation:nfSpin 1.1s linear infinite}
@keyframes nfSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nf-note svg{animation:none}}
.nf-all{border:0;background:none;padding:6px 8px;margin:-6px -8px -6px 0;border-radius:var(--radius-sm);font:inherit;font-size:12.5px;font-weight:500;color:var(--primary);cursor:pointer}
.nf-all:hover{background:var(--tint)}
.nf-all:disabled{color:var(--muted);cursor:default;background:none;font-weight:500}
.nf-all:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.nf-list{overflow:auto;overscroll-behavior:contain;padding:6px}
.nf-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:12px 10px;border-radius:var(--radius-sm);text-decoration:none;color:inherit}
.nf-row+.nf-row{box-shadow:0 -1px 0 var(--line)}
.nf-row:hover,.nf-row:focus-visible{background:var(--panel);outline:0}
.nf-row.unread{background:rgba(var(--prgb),.06)}
.nf-row.unread:hover{background:rgba(var(--prgb),.1)}
.nf-ic{position:relative;width:36px;height:36px;border-radius:var(--radius);display:grid;place-items:center;background:var(--tint);color:var(--primary)}
.nf-row.ok .nf-ic{background:var(--success-tint);color:var(--ok,var(--success))}
.nf-row.chg .nf-ic{background:var(--attn-tint);color:var(--attn)}
.nf-row.unread .nf-ic::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-sizing:border-box}
.nf-t{min-width:0;display:grid;gap:3px}
.nf-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.nf-top b{font-size:13.5px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.nf-top time{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:none}
.nf-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.nf-chip{font-style:normal;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--tint);color:var(--primary);font-size:11px;font-weight:500;white-space:nowrap}
.nf-row.ok .nf-chip{background:var(--success-tint);color:var(--ok,var(--success))}
.nf-row.chg .nf-chip{background:var(--attn-tint);color:var(--attn);box-shadow:inset 0 0 0 1px var(--attn-line)}
.nf-des{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.nf-msg{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.nf-empty{margin:0;padding:28px 18px;text-align:center;font-size:13px;line-height:1.6;color:var(--muted)}

/* Chat layout from Buddy (24 Oct 2026): link lines become buttons, | rows | become a side-by-side comparison (site.js msgHtml) */
.cp-b p{margin:0}.cp-b p+p,.cp-b p+.cp-btns,.cp-b p+.cp-cmpw,.cp-b .cp-cmpw+p,.cp-b .cp-btns+p,.cp-b .cp-cmpw+.cp-btns{margin-top:9px}
.cp-btns{display:flex;flex-wrap:wrap;gap:7px}
.cp-btn{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-size:12.5px;font-weight:500;text-decoration:none;line-height:1.2;transition:filter .15s,transform .15s}
.cp-btn svg{width:15px;height:15px;flex:none}
.cp-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.cp-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cp-cmpw{overflow-x:auto;margin-inline:-4px;padding:2px 4px 4px;scroll-snap-type:x proximity}
.cp-cmp{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(128px,1fr);gap:10px}
.cp-card{position:relative;scroll-snap-align:start;padding:13px 13px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.cp-card h4{margin:0 0 10px;font-size:13px;font-weight:500;line-height:1.3}
.cp-card dl{margin:0}
.cp-card dt{font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#6b7a86)}
.cp-card dd{margin:2px 0 11px;font-size:13px;line-height:1.4}
.cp-card dd:last-child{margin-bottom:0}
.cp-card dd.pr{font-size:15px;font-weight:500;color:var(--ink)}
.cp-card.rec{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);background:color-mix(in srgb,var(--primary) 7%,#fff)}
.cp-card em{display:inline-block;margin-bottom:4px;padding:1px 7px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--primary);color:#fff;font-style:normal;font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.cp-msg:has(.cp-cmp){max-width:100%;width:100%}
.cp-new{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;margin-left:auto;margin-right:6px;border:1px solid rgba(255,255,255,.28);border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:transparent;color:inherit;font:500 12px/1 inherit;cursor:pointer;white-space:nowrap}
.cp-new svg{width:14px;height:14px}
.cp-new:hover{background:rgba(255,255,255,.12)}
.cp-new[hidden]{display:none}
.cp-h .cp-new+.cp-x{margin-left:0}
.cp-msg:has(.cp-cmp) .cp-b{width:100%;box-sizing:border-box}
/* a very narrow phone: the options stack, one card each, instead of squeezing side by side */
@media(max-width:379px){.cp-cmp{grid-auto-flow:row;grid-auto-columns:auto}}

/* LIVE CHAT 2026 (25 Oct 2026): Home / Messages / Help in the panel, Buddy always on (no away state) */
.chat-panel{border:0;height:min(640px,calc(100vh - 110px))}
.chat-panel[data-v=home] .cp-h,.chat-panel[data-v=home] .cp-body,.chat-panel[data-v=home] .cp-form,.chat-panel[data-v=help] .cp-h,.chat-panel[data-v=help] .cp-body,.chat-panel[data-v=help] .cp-form{display:none}
.chat-panel[data-v=chat] .cp-home,.chat-panel[data-v=chat] .cp-help,.chat-panel[data-v=help] .cp-home,.chat-panel[data-v=home] .cp-help{display:none}
.cp-home,.cp-help{flex:1;min-height:0;overflow:auto;background:var(--panel)}
.cp-hero{padding:18px 18px 74px;background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 80%,#fff));color:#fff}
.cp-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.cp-hero h3{margin:0;font-size:26px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.cp-cards{display:flex;flex-direction:column;gap:9px;padding:0 14px 14px;margin-top:-52px}
.cp-card2{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:0;border-radius:var(--radius);background:#fff;color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;box-shadow:0 2px 10px rgba(20,25,30,.09);transition:transform .15s,box-shadow .15s}
.cp-card2:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,25,30,.14)}
.cp-card2>svg:first-child{width:22px;height:22px;color:var(--primary);flex:none}
.cp-card2>svg:last-child{width:16px;height:16px;color:var(--muted);flex:none;margin-left:auto}
.cp-card2 span{display:block;min-width:0}.cp-card2 b{display:block;font-size:13.5px;font-weight:500}.cp-card2 small{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.cp-recent .cp-rt{flex:1}.cp-recent b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-status{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);background:#fff;box-shadow:0 2px 10px rgba(20,25,30,.09)}
.cp-status i{width:22px;height:22px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(63,157,107,.18);flex:none;transform:scale(.55)}
.cp-status b{display:block;font-size:13.5px;font-weight:500}.cp-status small{display:block;font-size:11.5px;color:var(--muted)}
.cp-qk,.cp-hl{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);box-shadow:0 2px 10px rgba(20,25,30,.09);overflow:hidden}
.cp-qk a,.cp-hl a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;font-size:13px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.cp-qk a:first-child,.cp-hl a:first-child{border-top:0}
.cp-qk a:hover,.cp-hl a:hover{background:var(--panel)}
.cp-qk svg,.cp-hl svg{width:16px;height:16px;color:var(--muted);flex:none}
.cp-hh{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;position:sticky;top:0;background:var(--panel)}
.cp-hh b{font-size:16px;font-weight:500}.cp-hh .cp-x{background:rgba(0,0,0,.06);color:var(--ink)}
.cp-hl{margin:0 14px 14px}
.cp-tabs{display:flex;border-top:1px solid var(--line);background:#fff}
.cp-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:500;cursor:pointer}
.cp-tabs button svg{width:22px;height:22px}
.cp-tabs button.on{color:var(--primary)}
.cp-tabs button:hover{color:var(--ink)}
.cp-st::before{background:#5BC08A!important}
.cp-note{display:none}

/* Buddy the kitten (25 Oct 2026) */
.cp-bud{width:40px;height:40px;border-radius:50%;flex:none;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.cp-hero{padding:16px 16px 70px}
.cp-hero-top{gap:12px;margin-bottom:0;align-items:center}
.cp-hero h3{flex:1;font-size:17px;line-height:1.3;font-weight:500;text-align:left}
.cp-hero .cp-bud{width:44px;height:44px}
.cp-cards{margin-top:-50px}
.cp-card2>img{width:30px;height:30px;border-radius:50%;flex:none}
.cp-recent2{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);box-shadow:0 2px 10px rgba(20,25,30,.09);overflow:hidden}
.cp-recent2>small{padding:11px 14px 6px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cp-conv{display:flex;align-items:center;gap:11px;padding:10px 14px;border:0;border-top:1px solid var(--line);background:none;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.cp-conv:hover{background:var(--panel)}
.cp-conv img{border-radius:50%;flex:none}
.cp-conv span{flex:1;min-width:0}.cp-conv b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cp-conv small{font-size:11px;color:var(--muted)}
.cp-conv>svg{width:16px;height:16px;color:var(--muted);flex:none}
.cp-list{display:none;flex:1;min-height:0;overflow:auto;background:var(--panel)}
.chat-panel[data-v=list] .cp-list{display:block}
.chat-panel[data-v=list] .cp-h,.chat-panel[data-v=list] .cp-body,.chat-panel[data-v=list] .cp-form,.chat-panel[data-v=list] .cp-home,.chat-panel[data-v=list] .cp-help{display:none}
.cp-cards2{margin-top:0}
.cp-empty{margin:6px 2px;font-size:12.5px;color:var(--muted);text-align:center}
.cp-team{margin:2px 0 0;font-size:11.5px;color:var(--muted);text-align:center}
.cp-team a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.cp-hl a.cp-quiet{color:var(--muted);font-size:12.5px}
.cp-mini{display:inline-block;vertical-align:-4px;margin-right:5px;border-radius:50%}
.cp-h .cp-bud{width:38px;height:38px}

.cp-bud,.cp-card2>img,.cp-conv img,.cp-mini{object-fit:cover;object-position:50% 50%}
.cp-bud{transform:none;background:#e3e3e4}

/* ---- SHARED STATES (audit 28 Oct 2026) ---- */
/* number steppers: the box shows the field ring while its number or a button has focus */
.qb-step:focus-within,.pg-step:focus-within,.stepper .grp:focus-within{border-color:var(--field-line);box-shadow:var(--field-ring)}
/* disabled controls look disabled everywhere, never hover-lit */
.btn:disabled,.btn[aria-disabled="true"],.btn-ghost:disabled,.btn-ghost[aria-disabled="true"],.cta:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
input:disabled,select:disabled,textarea:disabled{background:var(--panel);color:var(--muted);cursor:not-allowed}
/* invalid fields after the customer has typed: the honey warning line, never red alarm */
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--attn);box-shadow:0 0 0 3px var(--attn-ring)}
/* long words (emails, order numbers, product names) wrap instead of pushing a card wider than the screen */
h1,h2,h3,h4,p,li,dd,td,th,label,.btn,.btn-ghost{overflow-wrap:break-word}
/* headings and tile names break into even lines, never one orphaned word or a lone "&" */
h1,h2,h3,.tile b,.tile strong,.tile-tx{text-wrap:balance}
/* the line under a chosen tile sits on the tint: a shade deeper than --muted so it stays readable */
.tile[aria-pressed="true"] small,.tile[aria-checked="true"] small,.tile.on small{color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
/* stacking order (audit 28 Oct 2026): page 1 to 5, sticky header 60, chat 90, theme bar 80, cookie and pop-ups 470 to 480, phone drawer 500,
   picture zoom 1000, notifications 2400, toasts 2600 on top of everything so a message is never hidden behind a drawer or banner */
.chatw{z-index:90}
/* links inside the timing notes and the chosen service's line, a shade deeper for small type */
.how-body a{color:var(--accent-ink)}
[data-svc][aria-pressed="true"] small{color:color-mix(in srgb,var(--muted) 78%,var(--ink))}
/* text selection in the theme colour */
::selection{background:rgba(var(--prgb),.18)}

/* ---- REDUCED MOTION (audit 28 Oct 2026): one rule for every page. Movement stops for people who ask their device for less
   motion: animations and transitions finish at once, smooth scrolling is off. Colour and state changes still show. ---- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}html{scroll-behavior:auto}}
/* TICK BOXES AND RADIOS (28 Oct 2026, Junaid: "check boxes... style them properly"): every plain tick box and radio on the shop, My Account,
   the designer and HQ is drawn in the house style instead of the browser's own: an 18 px rounded square (a circle for a radio) with a hairline,
   ink when ticked with a white tick, the theme ring on focus. :where() keeps it at zero weight, so a component that draws its own control
   (switches, the studio tick, hidden inputs behind tiles) still wins; the size caps stop a broad "input{width:100%}" from stretching it. */
:where(input[type=checkbox]),:where(input[type=radio]){-webkit-appearance:none;appearance:none;box-sizing:border-box!important;padding:0!important;width:18px;height:18px;min-width:15px;max-width:20px;min-height:15px;max-height:20px;margin:0;flex:none;display:inline-block;vertical-align:-4px;border:1.5px solid var(--line-strong);border-radius:var(--radius-sm,4px);background:#fff no-repeat center/72%;cursor:pointer;transition:background-color .12s,border-color .12s,box-shadow .12s}
:where(input[type=radio]){border-radius:50%}
:where(input[type=checkbox]):checked{background-color:var(--ink,var(--ink))!important;border-color:var(--ink,var(--ink))!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.2 4.2 8.8-9.4'/%3E%3C/svg%3E")!important}
:where(input[type=checkbox]):indeterminate{background-color:var(--ink,var(--ink))!important;border-color:var(--ink,var(--ink))!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E")!important}
:where(input[type=radio]):checked{border-color:var(--ink,var(--ink))!important;background:radial-gradient(circle,var(--ink,var(--ink)) 0 38%,#fff 42%)!important}
:where(input[type=checkbox],input[type=radio]):hover:not(:disabled){border-color:rgba(var(--prgb,43,58,74),.6)}
:where(input[type=checkbox],input[type=radio]):focus-visible{outline:0;box-shadow:0 0 0 3px rgba(var(--prgb,43,58,74),.18)}
:where(input[type=checkbox],input[type=radio]):disabled{opacity:.45;cursor:default}

/* HELP-PAGE TABLES ON PHONES (28 Oct 2026, Junaid's audit): under 640 px a table with headings stacks each row as a hairline card: the first
   cell is the row's title, every other cell shows its column name (a small eyebrow) above the value; docs.js tags the cells (data-l). */
@media (max-width:640px){
  /* the stacked look applies from the first paint to any table with a heading row (:has), before docs.js adds .doc-stack and the
     column names: the page does not jump when the script runs (31 Oct 2026 audit) */
  .doc table:is(.doc-stack,:has(thead th+th)){display:block;white-space:normal;border:0;margin:10px 0 20px}
  .doc table:is(.doc-stack,:has(thead th+th)) thead{display:none}
  .doc table:is(.doc-stack,:has(thead th+th)) tbody{display:block}
  .doc table:is(.doc-stack,:has(thead th+th)) tr{display:block;margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
  .doc table:is(.doc-stack,:has(thead th+th)) tr:has(> th):not(:has(> td)){display:none}
  .doc table:is(.doc-stack,:has(thead th+th)) td,.doc table:is(.doc-stack,:has(thead th+th)) th{display:block;min-width:0!important;width:auto;padding:0;border:0;white-space:normal;text-align:left}
  .doc table:is(.doc-stack,:has(thead th+th)) td:first-child,.doc table:is(.doc-stack,:has(thead th+th)) tr>th:first-child{font-size:14px;font-weight:500;color:var(--ink);margin:0 0 6px}
  .doc table:is(.doc-stack,:has(thead th+th)) td+td{padding:7px 0 0;margin:7px 0 0;border-top:1px solid var(--panel)}
  .doc table:is(.doc-stack,:has(thead th+th)) td[data-l]+td[data-l]::before,.doc table:is(.doc-stack,:has(thead th+th)) td:not(:first-child)[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--eyebrow-ink);margin:0 0 2px}
}
/* empty message thread (28 Oct 2026): the same empty state as the other My Account panes, an icon, a name and one line */
.thread-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 16px;border-style:solid;border-color:var(--line);background:var(--panel)}
.thread-empty svg{color:var(--primary);margin-bottom:6px}.thread-empty b{color:var(--ink);font-weight:500;font-size:14px}.thread-empty span{font-size:12.5px}

/* ==== TAGS (NO PILLS), 31 Oct 2026 (Junaid: "I don't like the round edges on the pills... make them look advanced, different, unique").
   Every capsule pill on the site is a SQUARE TAG: crisp small corners (Junaid, 7 Nov 2026: "We will just keep the square ones and get rid of
   everything else. We don't need die cut or ticket stub."). The die-cut and ticket stub shapes and the Tag Style setting are retired; a saved
   settings.tagStyle stays in pb-store, unread. The shape lives in these tokens only. A rule uses: border-radius:var(--tag-radius);corner-shape:var(--tag-shape) (small badges 20 px and
   under: --tag-radius-s). Meters and progress lines: var(--bar-r). Switch knobs: --knob-r / --knob-shape. Circles (avatars, lights, round icon
   buttons, swatches) stay 50%. tools/radius_check.mjs refuses 99px / 999px / 9999px, so pills cannot come back. docs/STYLE-GUIDE.md "Tags". ==== */
:root{--tag-r:var(--radius-sm);--tag-cut:6px;--tag-cut-s:5px;--bar-r:1px;
  --tag-radius:var(--tag-r);--tag-radius-s:var(--tag-r);--tag-tr:var(--tag-r);--tag-shape:round;--knob-r:2px;--knob-shape:round;
  --tag-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --tag-on-bg:var(--ink);--tag-on-ink:#fff;--tag-on-sh:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.22);
  --tag-hover:0 0 0 2px rgba(var(--prgb),.14)}
}
/* switch knobs: a small squared knob (its top right cut in the die-cut style), still sliding like a switch */
html .pb-switch i,html .ckb-tg::after{border-radius:var(--knob-r);corner-shape:var(--knob-shape)}
/* count badges hold figures: the mono face, tabular */
/* a figure inside a tag ("110 files", "64,922 today"): <b class="tag-n">110</b> files, the figure in the mono face, the unit in the normal face */
.tag-n{font-family:var(--tag-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:500}
html :is(.acct-cnt,.ord-filters button span,.filters .count,.chat-fab .cf-n,.basket-btn i,.dsl .count,.mm-fl em,.mat-jump i,.dq-pill i,.nf-badge,.g-count,.jn-filters button span,.gl-levels button i,.dsp-chips a i){font-family:var(--tag-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* status tags on the shop side (My Account designs, the artwork finish steps): small capitals with tracking on a tint, a diamond mark in the state colour */
html :is(.myd-chip,.aw-fin-st){text-transform:uppercase;letter-spacing:.07em;font-size:10px;font-weight:500}
html :is(.myd-chip,.aw-fin-st)::before{content:"";flex:none;width:5px;height:5px;margin-right:7px;background:currentColor;transform:rotate(45deg)}
/* chosen filter chips: solid ink with a fine highlight along the top edge (pressed); hover is the house ring */
html :is(.jn-filters button[aria-pressed="true"],.gl-levels button[aria-pressed="true"],.dsp-chips a[aria-current="page"],.wsu-tabs button[aria-selected="true"]){background:var(--tag-on-bg);border-color:var(--tag-on-bg);color:var(--tag-on-ink);box-shadow:var(--tag-on-sh)}
html :is(.dsp-chips a[aria-current="page"] i,.wsu-tabs button[aria-selected="true"] i){color:rgba(255,255,255,.72)}
html :is(.jn-filters button,.gl-levels button,.dsp-chips a,.dsp-pills a,.hc-pop a,.plp-guides a,.cp-quick a,.nf-cats a,.p3-chips a,.mat-jump a,.wsu-tabs button,.filters-mobile button):not([aria-pressed="true"]):not([aria-current="page"]):not([aria-selected="true"]):hover{box-shadow:var(--tag-hover)}
html :is(main,main[data-look]) .filters-mobile button[aria-pressed="true"]{box-shadow:var(--tag-on-sh)}

/* ---- NO LAYOUT SHIFT (31 Oct 2026; Junaid: "so many pages, whenever you click on them you see a massive shift") ----
   Every box a script fills after the first paint reserves its final height while it is empty (:empty), so what sits under it is
   drawn in its final place: the product page (css/product.css), the catalogue's category list (catalogue.css), the Help Centre's
   branches (docs.css), the quote builder's pane (quote.css), the related-help block on help pages (here) and the header placeholder
   (.chrome-ph, 182 px = top bar 30 + masthead 102 + menu 50; 60 px on phones). The home page's classic hero stays hidden while the
   slider is on the page (home.css). "Montserrat Fallback" (the top of this file) gives Arial Montserrat's width and line metrics, so
   the words do not reflow when the real font arrives. Breadcrumbs on phones stay on one line and scroll sideways instead of wrapping
   onto a second line once the chevrons are drawn. Measure with tools/audit/cls.html. */
.help-rel:empty{min-height:215px}
@media (max-width:900px){.crumbs{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;text-overflow:clip;-webkit-overflow-scrolling:touch}
  .crumbs::-webkit-scrollbar{display:none}.crumbs>*{flex:none}}
@media (max-width:600px){.help-rel:empty{min-height:534px}}
/* The chat button sits over the footer's bottom-right links at the end of a page: leave them room beside it (31 Oct 2026 audit) */
@media (min-width:901px){body.has-chat .foot-bottom{padding-right:190px}}

/* ==== THEMES V3: LIGHT GROUNDS AND TYPE (Junaid, 6 Nov 2026: "Light grounds only; no dark backgrounds"; Montserrat 300 to 500,
   no 600, 700 or bold). The top bar, the footer and the other big areas sit on the theme's panel with ink words; actions are
   primary; text is ink or muted. ==== */
body{font-synthesis:none}
b,strong,h1,h2,h3,h4,h5,h6,th,dt,legend,optgroup{font-weight:500}
.topbar{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
.topbar a{color:var(--ink)}
footer,footer.ft2{background:var(--panel);color:var(--muted);border-top:1px solid var(--line)}
footer a,footer.ft2 .ft-col a,footer.ft2 .ft-nap a{color:var(--ink)}
footer a:hover,footer.ft2 .ft-col a:hover,footer.ft2 .ft-nap a:hover{color:var(--primary)}
footer.ft2 .foot-bottom{background:var(--surface)}
footer .hb.dark{background:var(--surface);border-color:var(--line);color:var(--ink)}
footer .hb.dark .hb-ic{background:var(--tint);color:var(--icon-active);box-shadow:none}
footer .hb.dark .hb-t b{color:var(--ink)}
.feature.dark{background:var(--tint);color:var(--ink)}
.cp-h{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)}
/* the header went light with the one theme but its close button, New chat edge and status line kept the white of the old dark header, so the
   close button could not be seen (Junaid, 8 Nov 2026: "it's not possible to close the chat"): ink on a tint, 44 px to tap */
.cp-h .cp-st{color:var(--muted)}
.cp-h .cp-x{width:44px;height:44px;background:var(--tint);color:var(--ink);border:1px solid var(--line)}
.cp-h .cp-x svg{width:20px;height:20px}
.cp-h .cp-x:hover{background:var(--line)}
.cp-h .cp-new{height:44px;border-color:var(--line);color:var(--ink)}
.cp-h .cp-new:hover{background:var(--tint)}
.toast,.dlbar{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-menu)}
/* SHOP BY IN THE MENUS (6 Nov 2026, Display and Categories; js/site.js waysCardsCol, waysDrawerHtml; the pages use css/ways.css) */
.pw-mmcol .mm-h{pointer-events:none}
.pw-mmk{display:block;font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:12px 0 2px}
.pw-mmcol b+.pw-mmk{margin-top:2px}

/* ==== ONE THEME CHROME (Junaid, 7 Nov 2026: Zest Charcoal; design/print-buddy-one-theme/print-buddy-site-reference.css and the PDF,
   docs/print-buddy/THEME-CLEANUP-PLAN.md step 5). The shared frame on every shop page: a charcoal top bar (30 px, white words at 80%),
   the white header (96 px, the logo 38 px, the search box 42 px and up to 520 px on the warm panel, our die-cut corner: decision 5b),
   the menu row (48 px), a charcoal footer (white words at 74%, the reversed logo 30 px, the address 12 px, the legal line 11 px),
   the big headings (H1 60 px, 62 px on the home hero, H2 38 px; phones 36 and 26) and the cards (16 px corners; photo frames keep
   matching each photo's grey: decision 5j). Dark only in the top bar and the footer (decision 5a). ==== */
/* inside the two dark bands the colour names turn light, so every older rule that reads --ink, --muted or --primary follows */
.topbar,footer.ft2{--ink:#FFFFFF;--muted:rgba(255,255,255,.74);--icon:rgba(255,255,255,.74);--primary:#FFFFFF;--primary-hover:#FFFFFF;--line:rgba(255,255,255,.16);--line-strong:rgba(255,255,255,.32);--tint:rgba(255,255,255,.08);--panel:rgba(255,255,255,.06);--logo-ink:#FFFFFF}
.topbar{--muted:rgba(255,255,255,.8);background:var(--chrome-dark);color:rgba(255,255,255,.8);border-bottom:1px solid var(--chrome-dark);font-size:11.5px;letter-spacing:.01em}
.topbar .wrap{min-height:30px}
.topbar a,.topbar .tb-txt,.topbar .tb-left,.topbar .tb-links a,.topbar .tb-acct,.topbar svg{color:rgba(255,255,255,.8)}
.topbar .tb-links a.tb-acct,.topbar .tb-links a.tb-acct:hover{color:rgba(255,255,255,.9)}
.topbar a:hover,.topbar a:hover svg,.topbar .tb-links a:hover{color:#fff;background:transparent}
.topbar :focus-visible{outline:1.5px solid #fff;outline-offset:2px;box-shadow:none}
.mast{background:var(--surface);box-shadow:0 1px 0 var(--line)}
@media (min-width:901px){.mast .wrap{min-height:96px}}
@media (min-width:901px){.mast .logo svg.pblogo,.mast .logo img{height:38px;width:auto}}
.mast .search{flex:0 1 520px;max-width:520px;height:42px;margin-left:auto;margin-right:auto;background:var(--panel);border:0;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--tag-radius);corner-shape:var(--tag-shape)}
.mast .search:focus-within{box-shadow:inset 0 0 0 1.5px var(--primary),var(--focus-ring)}
.mast .search input{font-size:13.5px;color:var(--ink)}
.mast .search input::placeholder{color:var(--muted)}
.mast .search .go{background:var(--surface)}
.mainnav{background:var(--surface);border-bottom:1px solid var(--line)}
.mainnav a,.mainnav .nav-dd-btn{font-size:13.5px;font-weight:500}
footer.ft2{background:var(--chrome-dark);color:rgba(255,255,255,.74);font-size:13px;border-top:0}
footer.ft2 .ft-brand svg.pblogo,footer.ft2 .ft-brand img{height:30px;width:auto}
footer.ft2 .tagline-f,footer.ft2 .ft-col summary,footer.ft2 p{color:rgba(255,255,255,.74)}
@media (max-width:900px){footer.ft2 .ft-col summary h4{color:#fff;font-size:12px}footer.ft2 .ft-col{border-color:rgba(255,255,255,.16)}footer.ft2 .ft-col summary::after,footer.ft2 .ft-col summary svg{color:rgba(255,255,255,.74)}}
footer.ft2 h4,footer.ft2 .ft-col summary h4,footer.ft2 details summary h4{color:rgba(255,255,255,.6);font-size:10.5px;font-weight:500;letter-spacing:.14em}
footer.ft2 a,footer.ft2 .ft-col a,footer.ft2 .ft-nap a{color:rgba(255,255,255,.9)}
footer.ft2 a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer.ft2 .ft-nap,footer.ft2 .ft-nap a{font-size:12px}
footer.ft2 svg:not(.pblogo):not(.ft-paycard){color:rgba(255,255,255,.74)}
footer.ft2 .hb.dark{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-color:transparent;color:#fff}
footer.ft2 .hb.dark .hb-t b,footer.ft2 .hb.dark .hb-go{color:#fff}
footer.ft2 .hb.dark .hb-t small{color:rgba(255,255,255,.74)}
footer.ft2 .hb.dark .hb-ic{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
footer.ft2 .hb.dark:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
footer.ft2 .foot-bottom{background:var(--chrome-dark);border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.6);font-size:11px}
footer.ft2 .foot-bottom .wrap,footer.ft2 .foot-bottom span{color:rgba(255,255,255,.6);font-size:11px}
footer.ft2 .foot-bottom a,footer.ft2 .foot-bottom button{color:rgba(255,255,255,.66)}
footer.ft2 .foot-bottom a:hover,footer.ft2 .foot-bottom button:hover{color:#fff}
footer.ft2 :focus-visible{outline:1.5px solid #fff;outline-offset:2px;box-shadow:none}
.hslider .hs-txt h1,.hslider .hs-txt h2{font-weight:500;font-size:clamp(36px,4.31vw,62px);line-height:1.03;letter-spacing:-.03em}
@media (min-width:1101px){.hslider .hs-txt{width:min(44%,600px)}}   /* room for the 62 px headline on two lines, as the PDF */
.docpage .doc-hero h1,.doc-hero h1,.docpage .hc-hero h1,.hc-hero h1,.ab-hero .ab-hero-t h1{font-size:60px;line-height:1.05;letter-spacing:-.03em;font-weight:500}
.pdp .pdp-head h1{font-size:40px;line-height:1.1;letter-spacing:-.025em;font-weight:500}   /* the product name, as the PDF draws it */
section .results-h h1,body.over-footer main.wrap>h1{font-size:38px;line-height:1.1;letter-spacing:-.02em;font-weight:500}   /* department and basket titles (no hero band) */
main h2.sec-h,main .sec-head h2,main .section-head h2{font-size:38px;line-height:1.1;letter-spacing:-.02em;font-weight:500}
.catcard .im,main[data-look] .catcard .im{border-radius:var(--radius-card)}
main[data-look="c"] .catcard{border-radius:var(--radius-card)}
.catcard b{font-size:15.5px;font-weight:500}
.catcard p{font-size:13px;line-height:1.45;color:var(--muted)}
.catcard .price,.catcard .from{font-size:15px;font-weight:500;color:var(--ink)}
@media (max-width:900px){
  .hslider .hs-txt h1,.hslider .hs-txt h2,.docpage .doc-hero h1,.doc-hero h1,.docpage .hc-hero h1,.hc-hero h1,.ab-hero .ab-hero-t h1{font-size:36px;letter-spacing:-.02em}
  .pdp .pdp-head h1{font-size:30px}
  section .results-h h1,body.over-footer main.wrap>h1{font-size:26px}
  main h2.sec-h,main .sec-head h2,main .section-head h2{font-size:26px}
}
/* the checkout keeps a focused header (Junaid's brief): no top bar and no menu row, the logo, Secure Checkout and the basket */
body.co-focus .topbar,body.co-focus .mainnav{display:none}
body.co-focus .mast .wrap>*:not(.logo):not(.basket-btn):not(.co-secure):not(.mob-btn){display:none}
body.co-focus .co-secure{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
@media (max-width:900px){body.co-focus .co-secure{font-size:12px;gap:6px;margin-right:8px}}
/* All Products menu (7 Nov 2026, Junaid: "combining both"): the first item in the bar, a three-part panel built from MENU. Left the
   departments, middle the one under the pointer, right today's same-day slot and help. site.js allHtml / wireAllProducts. */
.mainnav .nav-all-btn{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink)}
.mainnav .nav-all-btn svg{width:17px;height:17px;flex:none}
.mainnav .nav-all{padding-right:14px;margin-right:2px;border-right:1px solid var(--line)}
.ap-body{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:28px;align-items:start}
.ap-rail{display:flex;flex-direction:column;gap:2px;padding-right:20px;border-right:1px solid var(--line)}
.mainnav .ap-dep{display:flex;align-items:center;gap:10px;height:auto;padding:7px 8px;border-radius:var(--radius-sm);color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.3}
.mainnav .ap-dep::after{display:none}
.mainnav .ap-dep .mm-ic{width:28px;height:28px}
.ap-dn{flex:1;min-width:0}
.ap-dep em{font-style:normal;font-size:11.5px;color:var(--muted)}
.ap-dep>svg{width:14px;height:14px;flex:none;opacity:0;transition:opacity .15s}
.mainnav .ap-dep.on,.mainnav .ap-dep:hover,.mainnav .ap-dep:focus-visible{background:var(--panel);color:var(--ink)}
.ap-dep.on>svg,.ap-dep:hover>svg{opacity:1}
.ap-dep.on .mm-ic{background:var(--surface,#fff);box-shadow:inset 0 0 0 1px var(--line)}
.ap-sep{height:1px;background:var(--line);margin:8px 8px}
.ap-pane[hidden]{display:none}
.ap-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.ap-ph b{display:block;font-size:20px;font-weight:500;line-height:1.25;color:var(--ink)}
.ap-ph small{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:56ch}
.mainnav .ap-all{display:inline-flex;align-items:center;gap:6px;height:auto;padding:8px 14px;border-radius:var(--radius-sm);background:var(--primary);color:#fff;font-size:12.5px;font-weight:500;white-space:nowrap;text-decoration:none}
.mainnav .ap-all::after{display:none}
.mainnav .ap-all:hover{background:var(--primary-hover);color:#fff}
.ap-all svg{width:13px;height:13px}
.ap-grps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 24px}
.ap-grp{display:flex;flex-direction:column;gap:2px;min-width:0}
.mainnav .ap-grp a{height:auto;padding:3px 0;font-size:13px;line-height:1.4;color:var(--body,var(--ink));text-decoration:none}
.mainnav .ap-grp a::after{display:none}
.mainnav .ap-grp a.ap-gh{margin-bottom:4px;font-weight:500;color:var(--ink)}
.mainnav .ap-grp a.ap-more{font-size:12px;color:var(--muted)}
.mainnav .ap-grp a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.ap-side{display:flex;flex-direction:column;gap:14px}
.ap-sd,.ap-help{padding:16px;border-radius:var(--radius);background:var(--panel)}
.ap-k{display:block;font-size:10.5px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.ap-sd>b{display:block;margin-top:6px;font-size:17px;font-weight:500;color:var(--ink)}
.ap-sd>small{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.ap-sd>small b{color:var(--ink);font-weight:500}
.mainnav .ap-side a{display:flex;align-items:center;gap:8px;height:auto;margin-top:10px;font-size:12.5px;font-weight:500;color:var(--ink);text-decoration:none}
.mainnav .ap-side a::after{display:none}
.mainnav .ap-help a{margin-top:8px;font-weight:400}
.ap-side a svg{width:15px;height:15px;flex:none;color:var(--icon)}
.mainnav .ap-side a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1240px){.ap-body{grid-template-columns:220px minmax(0,1fr)}.ap-side{display:none}.ap-grps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The header as the PDF draws it (7 Nov 2026, Junaid: "match the header how it is in the pdf"): the top bar carries the line, the phone
   and the email on the left and the quick links on the right; the white row is the logo (no strapline), a wide search on the warm panel
   and three quiet links with icons (Help, Sign In, Basket with its count in a ring); the menu row in regular weight, the open page
   underlined in charcoal. The search keeps the die-cut corner (decision 5b, "no pills"). */
.topbar .wrap{min-height:30px;font-size:11.5px}
.topbar .tb-left{display:flex;align-items:center;gap:22px;min-width:0}
.topbar .tb-left a{text-decoration:none;white-space:nowrap}
.topbar .tb-links{gap:22px}
.topbar .tb-left,.topbar .tb-txt,.topbar .tb-left a,.topbar .tb-links a{font-size:11.5px}
.topbar .tb-links a[aria-current="page"]{color:#fff}
@media (max-width:1240px){.topbar .tb-mail{display:none}}
@media (max-width:1100px){.topbar .tb-txt{display:none}}
.mast .logo small{display:none}
.mast .search{flex:0 1 520px;max-width:520px;height:42px;padding-left:4px}
.mast .search .go{display:none}
.mast .search input{font-size:13.5px;padding-right:18px}
.mast-link{display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--ink);font-size:14px;font-weight:400;text-decoration:none;white-space:nowrap}
.mast-link svg{color:var(--ink)}
.mast-link:hover,.mast-link[aria-current="page"]{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
@media (min-width:901px){.mast .wrap>.mast-help{margin-left:auto}
.mast .wrap>.mast-link+.mast-link,.mast .wrap>.mast-link+.notif-btn,.mast .wrap>.mast-link~.basket-btn{margin-left:26px}}
.mast .basket-btn svg{width:18px;height:18px}
@media (min-width:901px){
  html .mast .basket-btn{position:relative;height:auto;padding:0;border:0;background:none;gap:8px;font-size:14px;font-weight:400}
  html .mast .basket-btn:hover{background:none;border:0;text-decoration:underline;text-underline-offset:4px}
  html .mast .basket-btn .bk-word{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin:0}
  html .mast .basket-btn i{position:static;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin:0;border:1px solid var(--line-strong);border-radius:50%;corner-shape:round;background:none;color:var(--ink);font-size:11px;font-weight:500;line-height:1;box-shadow:none}
}
.mainnav a,.mainnav .nav-dd-btn{font-weight:400}
.mainnav .nav-dd-btn[aria-current="page"],.mainnav a[aria-current="page"]{color:var(--ink);font-weight:500}
@media (max-width:900px){.mast-link{display:none}}
/* Pack match (7 Nov 2026, Junaid: "Have you used all the same colours and tints given in these guidelines?"; measured by
   tools/audit/pack-match-check.mjs): every number of the brief's "THE LOOK, IN PLAIN WORDS" and print-buddy-site-reference.css. */
.topbar .wrap{height:30px}
.topbar a,.topbar .tb-links a{padding-top:0;padding-bottom:0;line-height:30px}
@media (min-width:901px){.mast .wrap{min-height:96px;height:96px;padding-top:0;padding-bottom:0}}
.chrome-ph{height:177px}
@media (max-width:900px){.chrome-ph{height:96px}}
html .hslider,html .hslider.designed{background:var(--panel)}
.sec-h h2,main .sec-h h2{font-size:38px;font-weight:500;line-height:1.1;letter-spacing:-.02em}
.catcard{border-radius:var(--radius-card);background:var(--panel);border-color:transparent}
html footer.ft2 .ft-brand>svg.pblogo,html footer.ft2 .ft-brand>img,html footer.ft2 .ft5 .ft-brand>svg.pblogo,html footer.ft2 .ft5 .ft-brand>img{height:30px;width:auto}
@media (max-width:900px){.sec-h h2,main .sec-h h2{font-size:26px}}
/* the lime full stop on headings (site.js limeStops, decision l) */
.stop,i.stop{font-style:normal;color:var(--logo)}
/* a box with no line colour of its own takes the pack's firm line, never the browser's grey */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border-color:var(--line-strong)}
/* Phones and large phones with a bigger text size (7 Nov 2026, Junaid's phone screenshot): one compact bar, the icon buttons 44 px with
   equal gaps, the basket count a small tag inside the button's corner; Back to Top on the right, stacked above the chat button */
@media (max-width:900px){
  .mast .wrap{min-height:0;height:auto;padding-top:8px;padding-bottom:8px;gap:8px}
  .mast .wrap>.mob-btn,.mast .wrap>.notif-btn,.mast .wrap>.basket-btn{width:44px;height:44px;min-width:44px;margin:0;padding:0;flex:none;justify-content:center;aspect-ratio:auto}
  .mast .wrap>.mob-search{margin-left:auto}
  html .mast .basket-btn{position:relative}
  html .mast .basket-btn i{top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;line-height:1;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);box-shadow:none}
  .chrome-ph{height:60px}
}
.totop,html body.has-chat .totop{left:auto;right:22px;width:44px;height:44px}
body.has-chat .totop{bottom:74px}
.chat-fab{min-height:44px}
@media (max-width:900px){.totop,html body.has-chat .totop{right:14px;left:auto;width:44px;height:44px}body.has-chat .totop{bottom:72px}html .chat-fab{width:44px;height:44px}}
@media (max-width:900px){.mast .wrap>.logo{flex:0 1 173px;min-width:64px}.mast .wrap>.logo svg.pblogo,.mast .wrap>.logo img{display:block;width:100%;height:auto;max-width:173px;max-height:28px}}
/* Floating buttons and big text, round 3 (7 Nov 2026, Junaid's phone through the lead): Back to Top looks like the chat button (the same
   charcoal disc and shadow, 44 px, no progress ring), stacked 12 px above it; site.js hides it while it would sit over words, a link or a
   button. Section headings put their link under the words on phones and tablets, on the left, clear of the floating buttons, at 44 px. */
.totop{width:44px;height:44px;background:var(--primary);color:var(--on-primary);box-shadow:0 8px 22px rgba(20,25,30,.22);-webkit-backdrop-filter:none;backdrop-filter:none}
.totop .ring{display:none}
.totop.on:hover{background:var(--primary-hover)}
body.over-footer .totop{background:var(--surface);color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.35)}
:where(h1,h2,h3,h4,p,li,figcaption,small,b,.as-t){text-wrap:pretty}   /* no word left alone on a last line (Chromium; others ignore it) */
@media (max-width:900px){
  .sec-h{flex-direction:column;align-items:flex-start;gap:6px}
  .sec-h>a{display:inline-flex;align-items:center;min-height:44px}
  footer.ft2{padding-bottom:72px}
}
/* Touch screens: every link and button that stands on its own is at least 44 px to tap (7 Nov 2026, the big text audit,
   tools/audit/big-text-audit.mjs). Links inside a sentence keep the sentence's line. */
@media (pointer:coarse){
  html body footer.ft2 .ft-col div>a{display:flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0}
  html body footer.ft2 .ft-nap a,html body footer.ft2 .foot-bottom a,html body footer.ft2 .ft-brand>a{display:inline-flex;align-items:center;min-height:44px}
  html body .crumbs a,html body .doc-nav a,html body .hc-pop a,html body .p3-chips a,html body .ml-list>a,html body .gl-levels button,html body .hg2-cta,html body .g-all,html body .hr-h a,html body .dash-ph a,html body .thread-empty a,html body .story-toggle,html body .hint.fin-guide a,html body .how-body>a{display:inline-flex;align-items:center;min-height:44px}
  html body main .btn,html body main .btn-ghost,html body .stepper button,html body .acct-ph .btn-ghost{min-height:44px}
  html body .stepper button{min-width:44px}
  html body .crumbs .cr-home{min-height:44px;min-width:44px;justify-content:center}
  html body footer.ft2 .hb-tbr{min-height:46px}
  html body .dash-ph a,html body .hr-h a,html body .story-toggle,html body .gg-l input{min-height:44px}
}
/* the product page's main picture never takes more than about 60% of a phone's screen */
@media (max-width:900px){.pdp-gallery .g-main{aspect-ratio:auto;height:min(100vw,60svh)}}
.chatw{transition:bottom .25s ease,translate .25s ease}
.chatw.open{translate:none!important}
@media (max-width:900px){.pdp-gallery .g-main img{object-fit:contain}}
/* ==== END ONE THEME CHROME ==== */

/* ==== TRANSPARENT PRODUCT PICTURES ON THE THEME, 7 Nov 2026 (Junaid: pictures with a see-through background sit on the theme colour).
   A cut-out is a WebP whose path ends in -cut.webp (tools/import_cutouts.py): no pixels are read at run time. Its frame takes the
   theme's own tint (--tint, so it follows every theme and HQ colour edit) instead of the product grey #EBEDEF; matchFrame() in
   site.js leaves cut-outs alone. :has() follows the picture when the gallery swaps it. Photos with a grey background keep the grey. ==== */
:is(.im,.ct-im,.pc-im,.mm-fim,.pw-im,.g-main,.g-thumb,.rd-im,.bb-im,.dh-pic,.mc-pics>span,.mat-pic,.mg-main,.mg-t,.mp-im,.qs-item):has(>img[src*="-cut.webp"]){background:var(--pic-bg,var(--tint))!important}
img[src*="-cut.webp"]{background:transparent!important}
/* a clear picture shown on its own (search suggestions, the checkout list, the order summary) takes the same ground on the picture itself */
html .srch-dd a>img[src*="-cut.webp"],html .co-item>img[src*="-cut.webp"],html .sum-head>img[src*="-cut.webp"]{background:var(--pic-bg,var(--tint))!important}
/* ==== END TRANSPARENT PRODUCT PICTURES ==== */

/* ==== HEADER TIDY, 8 Nov 2026 (Junaid: "Help, My Account, notification and basket more towards the right... the top bar looks very
   messy... the search icon is before, move it towards the end"). Desktop only; the phone bar is untouched.
   Top bar: contact (phone and email with icons) left, the one line in the middle, quick links right with hairline dividers.
   Masthead: logo, a wider search with its magnifier button at the end, then one tight group of actions on the right (each a
   40 px item with the same hover tint; the bell is no longer a boxed square). ==== */
@media (min-width:901px){
  html .topbar .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:28px;height:34px;min-height:34px}
  html .topbar .tb-left{display:flex;align-items:center;gap:0;min-width:0}
  html .topbar .tb-left a{display:inline-flex;align-items:center;gap:7px;line-height:34px;padding:0}
  html .topbar .tb-left a+a{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.18);line-height:14px}
  html .topbar .tb-left svg{flex:none;opacity:.8}
  html .topbar .tb-txt{display:block;text-align:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.66)}
  html .topbar .tb-right{justify-self:end}
  html .topbar .tb-links{display:flex;align-items:center;gap:0}
  html .topbar .tb-links a{display:inline-flex;align-items:center;gap:6px;height:auto;line-height:14px;padding:0 14px;border-radius:0}
  html .topbar .tb-links a+a{border-left:1px solid rgba(255,255,255,.18)}
  html .topbar .tb-links a:last-child{padding-right:0}
  html .topbar .tb-links a.tb-acct,html .topbar .tb-links a.tb-staff{color:rgba(255,255,255,.9)}
  html .topbar .tb-links a:hover{text-decoration:underline;text-underline-offset:3px}
  html .topbar .tb-mail{display:inline-flex}
}
@media (min-width:901px) and (max-width:1400px){html .topbar .tb-txt{visibility:hidden}}
@media (min-width:901px) and (max-width:1180px){html .topbar .tb-mail{display:none}}
/* 9 Nov 2026 audit: at 1401 to 1600 px the message was cut 24 px short; the email link gives way so the whole message shows (the phone stays) */
@media (min-width:1401px) and (max-width:1600px){html .topbar .tb-left a.tb-mail{display:none}html .topbar .wrap{column-gap:22px}}

@media (min-width:901px){
  html .mast .wrap{gap:0;height:92px;min-height:92px}
  html .mast .search{flex:1 1 auto;max-width:640px;height:46px;margin:0 auto 0 48px;padding:0 4px 0 16px;gap:10px;background:var(--panel);border:0;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:var(--radius-sm)}
  html .mast .search:hover{box-shadow:inset 0 0 0 1px rgba(var(--prgb),.45)}
  html .mast .search:focus-within{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--primary),var(--focus-ring)}
  html .mast .search .s-ic{display:none}
  html .mast .search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font-size:14px;color:var(--ink);outline:none}
  html .mast .search .go{display:inline-flex;align-items:center;gap:7px;flex:none;width:auto;height:38px;padding:0 16px;border:0;border-radius:var(--radius-sm);background:var(--btn,#33333D);color:#fff;font:500 13px/1 inherit;font-family:inherit;cursor:pointer;transition:background .15s}
  html .mast .search .go:hover{background:var(--ink)}
  html .mast .search .go svg{width:16px;height:16px;color:#fff}
  html .mast .wrap>.mast-help{margin-left:40px}
  html .mast .wrap>.mast-link,html .mast .wrap>.notif-btn,html .mast .wrap>.basket-btn{height:42px;margin-left:4px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:none;font-size:14px;font-weight:400;color:var(--ink);text-decoration:none;transition:background .15s}
  html .mast .wrap>.mast-link+.mast-link,html .mast .wrap>.mast-link+.notif-btn,html .mast .wrap>.mast-link~.basket-btn{margin-left:4px}
  html .mast .wrap>.notif-btn{width:42px;padding:0;aspect-ratio:auto}
  html .mast .wrap>.mast-link:hover,html .mast .wrap>.mast-link[aria-current="page"],html .mast .wrap>.notif-btn:hover,html .mast .wrap>.notif-btn[aria-expanded="true"],html .mast .wrap>.basket-btn:hover{background:var(--panel);color:var(--ink);text-decoration:none}
  html .mast .wrap>.basket-btn{padding-right:10px}
  html .mast .wrap>.basket-btn:last-of-type{margin-right:-10px}
  html .mast .notif-btn .nf-badge{top:6px;right:6px}
}
@media (min-width:901px) and (max-width:1180px){html .mast .search{margin-left:24px}html .mast .wrap>.mast-help{margin-left:20px}html .mast .search .go span{display:none}html .mast .search .go{padding:0 12px}}
@media (min-width:901px) and (max-width:1040px){html .mast .wrap>.mast-link span{display:none}}
/* ==== END HEADER TIDY ==== */

/* ==== ALL PRODUCTS, SIMPLER, 8 Nov 2026 (Junaid: "too complicated, too messy"): two parts only, the departments on the left
   and the one department's groups on the right in four even columns; no intro paragraph, no side cards (same-day and help
   stay in the rail and the foot). ==== */
html .ap-body{grid-template-columns:300px minmax(0,1fr);gap:36px}
html .ap-rail{padding-right:24px}
html .mainnav .ap-dep{padding:8px 10px;font-size:14px}
html .ap-dn{white-space:nowrap}
html .ap-ph{align-items:center;padding-bottom:12px;margin-bottom:18px}
html .ap-ph b{font-size:18px}
html .mainnav .ap-all{padding:0;background:none;color:var(--ink);font-size:13px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
html .mainnav .ap-all:hover{background:none;color:var(--ink);text-decoration-color:currentColor}
html .ap-grps{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px}
html .mainnav .ap-grp a.ap-gh{font-size:13px;letter-spacing:.2px}
html .mainnav .ap-grp a{font-size:13.5px;padding:4px 0}
html .ap-side{display:none}
@media (max-width:1240px){html .ap-body{grid-template-columns:220px minmax(0,1fr)}html .ap-grps{grid-template-columns:repeat(3,minmax(0,1fr))}}
html .mast .basket-btn i{font-family:inherit}
/* ==== END ALL PRODUCTS ==== */

/* ==== CLEAR PICTURES ON WARM PANELS, 8 Nov 2026 (Junaid: on a panel the see-through pictures "look slightly off"; give them "a lighter
   subtle ground, closer to white, not white, so it looks like a picture placeholder"). Wherever a section's ground is the warm panel,
   the clear pictures' frames take --pic-bg-panel (a near-white warm tone) with a faint hairline; on white grounds they keep the tint. ==== */
:root{--pic-bg-panel:#FFFFFF}
:is(.pw-luxe,.pw-hero-luxe,.pc-card,.need-card,.promo3,.finishes,#homeGuides,.pw-trust,.mm-feat,.ap-panel,.ds-panel,.panel-ground){--pic-bg:var(--pic-bg-panel)}
:is(.pw-luxe,.pw-hero-luxe,.pc-card,.need-card,.promo3,.finishes,.panel-ground) :is(.im,.ct-im,.pc-im,.pw-im,.mp-im):has(>img[src*="-cut.webp"]){box-shadow:inset 0 0 0 1px rgba(42,42,51,.06)}
/* ==== END CLEAR PICTURES ON WARM PANELS ==== */
/* search: just the magnifier at the end, no filled button (Junaid, 8 Nov 2026) */
@media (min-width:901px){
  html .mast .search{padding:0 6px 0 18px;border-radius:var(--radius)}
  html .mast .search .go{width:38px;height:38px;padding:0;justify-content:center;background:none;border-radius:var(--radius-sm);color:var(--muted)}
  html .mast .search .go svg{width:19px;height:19px;color:currentColor}
  html .mast .search .go:hover,html .mast .search:focus-within .go{background:none;color:var(--ink)}
}

/* ==== PHONE HEADER, 8 Nov 2026 (Junaid's screenshot: four heavy outlined squares, a square basket count over the icon): the same
   quiet language as the desktop header, plain icons with a soft tint on press, the basket count a small round badge. ==== */
@media (max-width:900px){
  html .mast .wrap>.mob-btn,html .mast .wrap>.notif-btn,html .mast .wrap>.basket-btn{border:0!important;background:none!important;box-shadow:none!important;border-radius:var(--radius-sm)}
  html .mast .wrap>.mob-btn:active,html .mast .wrap>.notif-btn:active,html .mast .wrap>.basket-btn:active,html .mast .wrap>.mob-btn[aria-expanded="true"]{background:var(--panel)!important}
  html .mast .wrap>.mob-btn svg,html .mast .wrap>.notif-btn svg,html .mast .wrap>.basket-btn svg{width:22px;height:22px}
  html .mast .basket-btn i{position:absolute;top:5px;right:3px;min-width:17px;height:17px;padding:0 4px;border:2px solid var(--surface);border-radius:50%;corner-shape:round;background:var(--ink);color:#fff;font:500 10px/13px var(--font-sans);text-align:center;box-sizing:border-box}
  html .mast .basket-btn.bk-empty i{display:none}
  html .mast .wrap{gap:2px}
  html .mast .wrap>.mob-search{margin-left:auto}
}
/* ==== END PHONE HEADER ==== */

/* ==== CONTINUE ON ANOTHER DEVICE, 8 Nov 2026 (Junaid: "wherever this is, improve it"): under the quote builder and the basket it is a
   quiet card row, an icon tile, the title and a line saying what it does, an arrow; the footer and phone menu keep a plain link. ==== */
html .pbc-btn{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
html .pbc-btn:hover{border-color:var(--line-strong);box-shadow:0 6px 16px -12px rgba(42,42,51,.35);color:var(--ink)}
html .pbc-btn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
html .pbc-btn .pbc-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--tint);color:var(--ink)}
html .pbc-btn .pbc-ic svg{width:18px;height:18px}
html .pbc-btn .pbc-tx{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
html .pbc-btn .pbc-tx b{font-size:13.5px;font-weight:500}
html .pbc-btn .pbc-tx small{font-size:12px;line-height:1.4;color:var(--muted)}
html .pbc-btn .pbc-go{flex:none;color:var(--muted);transition:transform .15s}
html .pbc-btn:hover .pbc-go{transform:translateX(2px);color:var(--ink)}
/* ==== END CONTINUE ON ANOTHER DEVICE ==== */
/* the devices drawing (computer, tablet, phone, a sync arc) in place of the small icon */
html .pbc-btn{padding:12px 16px 12px 12px;gap:16px}
html .pbc-btn .pbc-ic{width:112px;height:60px;padding:6px 8px;border-radius:var(--radius-sm);background:var(--panel);box-sizing:border-box}
html .pbc-btn .pbc-ic svg.pbc-dev{width:96px;height:52px;display:block}
html .pbc-btn .pbc-tx b{font-size:14px}
@media (max-width:420px){html .pbc-btn .pbc-ic{width:88px;height:48px;padding:4px 5px}html .pbc-btn .pbc-ic svg.pbc-dev{width:78px;height:42px}}
html .pbc-btn .pbc-tx b{line-height:1.3}

/* ---- MEGA MENU, ONE THEME (9 Nov 2026, Junaid: "I want the drop-down menus designed better, well organised; the picture and the side cards
   are not part of the theme; work on the whole menu, a better layout"). Each department panel is two parts: the product groups on white
   (headings on one line beside a small icon tile, a hairline under each, products below) and a warm side panel (--panel) holding the
   featured product (picture on a white tile, a lime tag, a charcoal Shop Now button) and, for Business Cards, the Shop By links as tags.
   The foot is one quiet row of links on a hairline, Request a Quote at its end. Markup: site.js megaHtml / dispMega (.mm-side). ---- */
.mainnav .mm-panel .mm-in{padding-top:22px;padding-bottom:18px}
.mm-body.has-feat,.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr) 288px;gap:36px}
.mm-cols,.mm-body[data-cols="5"] .mm-cols{gap:22px 28px}
.mm-body[data-cols="5"] .mm-cols{gap:22px 22px}
.mainnav .mm-col b,.mm-body[data-cols="5"] .mm-col b{font-size:13.5px;font-weight:500;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.mainnav .mm-col a.mm-h{white-space:nowrap;gap:10px}
.mainnav .mm-col a.mm-h>svg:last-child{width:14px;height:14px;opacity:0;transform:translateX(-4px);transition:opacity .15s ease,transform .15s ease;flex:none}
.mainnav .mm-col a.mm-h:hover>svg:last-child{opacity:.7;transform:none}
.mainnav .mm-col .mm-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--panel);color:var(--ink)}
.mainnav .mm-col .mm-ic svg{width:16px;height:16px}
.mainnav .mm-col>a:not(.mm-more){padding-left:0;font-size:13.5px;color:var(--ink);font-weight:400}
.mainnav .mm-col a.mm-more{padding-left:0;font-size:12.5px;font-weight:500;color:var(--muted)}
.mainnav .mm-col a.mm-more:hover{color:var(--ink)}
/* the side panel */
.mm-side{display:flex;flex-direction:column;gap:18px;align-self:stretch;padding:16px;border-radius:var(--radius);background:var(--panel)}
.mainnav .mm-side .mm-feat{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
.mainnav .mm-side .mm-feat:hover{box-shadow:none;transform:none}
.mm-side .mm-fim{aspect-ratio:16/10;margin-bottom:12px;border-radius:var(--radius-sm);background:#fff!important;box-shadow:0 0 0 1px var(--line)}
.mm-side .mm-fim img{object-fit:contain;padding:8px;box-sizing:border-box;transition:transform .3s ease}
.mainnav .mm-side .mm-feat:hover .mm-fim img{transform:scale(1.04)}
.mm-side .mm-fk{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--tag-radius-s,var(--radius-sm));background:rgba(140,165,39,.16);color:#4D5C14;font-size:10px;letter-spacing:.8px}
.mm-side .mm-feat b{margin-top:8px;font-size:15px;color:var(--ink)}
.mm-side .mm-feat small{font-size:12.5px;line-height:1.5}
.mainnav .mm-side .mm-fgo{margin-top:12px;height:34px;padding:0 14px;border-radius:var(--radius);background:#33333D;color:#fff;font-size:12.5px}
.mainnav .mm-side .mm-feat:hover .mm-fgo{background:var(--ink)}
.mainnav .mm-side .mm-fgo svg{width:14px;height:14px}
.mm-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.mm-ways{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 20px;margin-top:auto;padding:14px 16px;border-radius:var(--radius);background:var(--panel)}
.mm-ways .mm-st{flex:0 0 100%;font-size:13px;font-weight:500;line-height:1.35;color:var(--ink)}
.mm-wg{display:grid;gap:6px}
.mm-wg>i{font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.mm-tags{display:flex;flex-wrap:nowrap;gap:5px}
.mainnav .mm-ways a.mm-tag{display:inline-flex;align-items:center;height:26px;padding:0 8px;border-radius:var(--tag-radius,var(--radius-sm));background:#fff;box-shadow:0 0 0 1px var(--line);font-size:12px;font-weight:400;color:var(--ink);white-space:nowrap}
.mainnav .mm-ways a.mm-tag:hover{box-shadow:0 0 0 1px var(--ink);color:var(--ink)}
.mainnav .mm-side .mm-feat{align-items:stretch}.mainnav .mm-side .mm-feat small{max-width:none!important;width:auto;text-wrap:wrap}.mainnav .mm-side .mm-feat :is(.mm-fk,.mm-fgo){align-self:flex-start}

/* the foot: one row of plain links */
.mm-foot{gap:6px 26px;margin-top:20px;padding-top:14px}
.mainnav .mm-foot a.mm-fl{height:30px;padding:0;border:0;background:transparent;box-shadow:none;font-size:13px;color:var(--ink)}
.mainnav .mm-foot a.mm-fl>svg:first-child{width:16px;height:16px;color:var(--muted)}
.mainnav .mm-foot a.mm-fl>svg:last-child{width:14px;height:14px;opacity:0;transition:opacity .15s ease,transform .15s ease}
.mainnav .mm-foot a.mm-fl:hover,.mainnav .mm-foot a.mm-fl:focus-visible{background:transparent;border:0;box-shadow:none;color:var(--ink);text-decoration:underline;text-decoration-color:var(--logo);text-decoration-thickness:2px;text-underline-offset:4px}
.mainnav .mm-foot a.mm-fl:hover>svg:last-child{opacity:.7}
.mainnav .mm-foot a.mm-fl em{background:var(--panel);color:var(--muted)}
.mainnav .mm-foot a.mm-fl:hover em{background:var(--panel);color:var(--ink)}
@media (max-width:1360px){.mm-body.has-feat,.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr) 252px;gap:28px}}
@media (max-width:1240px){.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr)}.mainnav .mm-body[data-cols="5"] .mm-side{display:none}}
@media (max-width:1180px){.mm-body.has-feat,.mm-body.has-feat[data-cols="5"]{grid-template-columns:minmax(0,1fr)}.mainnav .mm-body .mm-side{display:none}}

/* GET DIRECTIONS (9 Nov 2026, site.js pbDirectionsLink / [data-directions]): a quiet link with a map pin, the lime underline of the one theme */
.cf-dir{margin:-4px 0 10px 2px;font-size:13px}.cf-dir:empty{display:none}
.od-dir{margin-top:6px}
p[data-directions]:empty{display:none}

/* EMPTY BASKET (9 Nov 2026 audit: "Your basket is empty" sat alone in a dashed box): an icon tile, a heading, a line on how ordering works, the two
   ways in and a row of popular products. */
.bk-none{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px 40px;background:var(--card,#fff);border-radius:var(--radius);box-shadow:var(--card-sh,0 1px 2px rgba(0,0,0,.05))}
.bk-none .bk-n-ic{width:60px;height:60px;border-radius:var(--radius);background:var(--panel);color:var(--ink);display:grid;place-items:center;margin-bottom:4px}
.bk-none h2{margin:0;font-size:22px;font-weight:500;letter-spacing:0}
.bk-none>p{margin:0;max-width:440px;color:var(--muted);font-size:14px;line-height:1.6}
.bk-none .bk-n-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.bk-none .bk-n-pop{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin-top:14px;font-size:13px}
.bk-none .bk-n-pop span{color:var(--muted)}
.bk-none .bk-n-pop a{padding:6px 12px;border-radius:var(--tag-radius);corner-shape:var(--tag-shape);background:var(--panel);color:var(--ink);text-decoration:none}
.bk-none .bk-n-pop a:hover{background:var(--ink);color:#fff}
@media (max-width:480px){.bk-none{padding:36px 18px 30px}.bk-none .bk-n-btns{flex-direction:column;width:100%}.bk-none .bk-n-btns a{justify-content:center}}
/* 9 Nov 2026 audit: the link inside an empty list (My Account, Recent) was a 20 px tap target */
.thread-empty a{display:inline-flex;align-items:center;min-height:36px;padding:0 6px}

/* DIRECTIONS BUTTON (9 Nov 2026, Junaid: the underlined capitals link was "very, very basic"): one small action button wherever the shop's
   directions show (checkout's order received, My Account, delivery page, Help Centre). Specific enough to ignore label styles round it
   (My Account's capitals, the order received box's big icons). */
a.pb-dir:not(.btn):not(.btn-ghost):not(.pb-x){display:inline-flex;align-items:center;gap:10px;min-height:40px;margin-top:10px;padding:5px 12px 5px 5px;line-height:1.2;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card,#fff);color:var(--ink);font-size:13px;font-weight:500;line-height:1.2;letter-spacing:normal;text-transform:none;text-decoration:none;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
a.pb-dir:not(.btn):not(.btn-ghost):not(.pb-x):hover{color:var(--ink);text-decoration:none;border-color:var(--ink);box-shadow:0 0 0 2px var(--ring,rgba(42,42,51,.08))}
a.pb-dir:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a.pb-dir .pb-dir-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--logo) 16%,transparent);color:var(--ink);margin:0}
a.pb-dir .pb-dir-ic svg{width:16px;height:16px;margin:0;color:var(--ink)}
a.pb-dir span.pb-dir-t{display:inline;margin:0;white-space:nowrap;font-size:13px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--ink)}
a.pb-dir svg.pb-dir-go{flex:none;width:14px;height:14px;margin:0 0 0 2px;color:var(--muted);transition:transform .15s ease}
a.pb-dir:hover svg.pb-dir-go{transform:translate(1px,-1px);color:var(--ink)}
@media (prefers-reduced-motion:reduce){a.pb-dir,a.pb-dir svg.pb-dir-go{transition:none}}

/* APPROVAL IS FINAL (9 Nov 2026): the lock note beside every Approve button and on approved artwork */
.pb-lock{display:flex;gap:10px;align-items:flex-start;margin:12px 0;padding:10px 12px;border:1px solid var(--attn-line,#E8D9A8);border-radius:var(--radius-sm);background:var(--attn-tint,#FBF6E6);color:var(--ink);font-size:12.5px;line-height:1.5;text-align:left}
.pb-lock svg{flex:none;margin-top:1px;color:var(--attn,#8A6A12)}
.pb-lock span{min-width:0}
.pb-lock.after{border-color:var(--line);background:var(--panel,#F8F7F4)}
.pb-lock.after svg{color:var(--muted)}
@media (max-width:360px){.mast .wrap{gap:4px;padding:0 10px}.logo img,.logo svg{height:22px}}
/* collection-only products in the basket (same-day printing; Junaid 10 Nov 2026) */
.bk-collect{margin:0 0 12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel,#F8F7F4);font-size:13.5px;line-height:1.5;color:var(--ink)}
.bk-collect b{font-weight:500}.chip.co{font-weight:500}
.cf-collect-note{margin:8px 0 0;padding:10px 12px;border-radius:var(--radius-sm);background:var(--panel,#F8F7F4);font-size:13.5px;line-height:1.5;color:var(--ink)}
.cf-collect-note b{font-weight:500}