/* ==== PRINT BUDDY WEBSITE MINIMAL: SHARED CONTROLS (design/minimal-2026-11-14/website/components Button, and the README's
   field rules). Linked after pb-minimal-chrome.css on every shop page, so every page's buttons and fields share one finish.
   Only the look changes: sizes, words and places stay as each page sets them.
   - .btn (primary, charcoal): the system's 12 px corner, a darker charcoal under the pointer, a small press; no lift, no glow.
   - .btn-ghost (was outlined): the system has no outlined buttons, so it is the secondary grey (--tint, --tint-hover), same size.
   - Fields with no finish of their own: filled grey (--field), no outline; white with a 2 px charcoal ring while typing.
   - Tags stay square (owner's ruling). The chat button: white with the green online dot, its shape unchanged.
   - The cookie card: white, 20 px corners, the menu shadow, no outline (its two buttons stay equal, as the law asks).
   Corners x var(--pb-r-scale, var(--hq-r-scale, 1)) (Corner Roundness). Motion --duration-quick, none under reduced motion. ==== */
:root{--pbm-r-control:calc(12px * var(--pb-r-scale, var(--hq-r-scale, 1)))}

/* ---------- Buttons ---------- */
.btn,.btn-ghost{border-radius:var(--pbm-r-control);corner-shape:round;transition:background var(--duration-quick) ease,color var(--duration-quick) ease,transform var(--duration-quick) ease}
/* the system's size (Button: --button-height 48 px, 15.5 px words); a page or row that sets its own height keeps it */
.btn:not(.sm){height:var(--button-height);font-size:15.5px}
.btn-ghost:not(.sm):not(.quiet){min-height:var(--button-height);padding:0 22px;font-size:15.5px;justify-content:center}
.btn:hover{background:var(--primary-hover);box-shadow:none;transform:none}
.btn:active{transform:scale(0.98)}
.btn-ghost{background:var(--tint);color:var(--ink);border-color:transparent}
.btn-ghost:hover{background:var(--tint-hover);color:var(--ink)}
.btn-ghost:active{transform:scale(0.98)}
.btn-ghost.danger{color:var(--danger)}
.btn-ghost.danger:hover{background:var(--danger-tint)}
/* on a dark picture or the footer it stays a light outline (the one place a ghost sits on dark) */
.feature .btn-ghost.on-dark{background:transparent;color:#fff;border-color:#fff}
.btn:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.btn:active,.btn-ghost:active{transform:none}}

/* ---------- Fields (only where a page has not given a field its own finish) ---------- */
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=password],input[type=url],input[type=date],input:not([type]),select,textarea){
  background-color:var(--field);border-color:transparent;transition:background-color var(--duration-quick) ease,box-shadow var(--duration-quick) ease}
:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=password],input[type=url],input[type=date],input:not([type]),select,textarea):focus{
  background-color:var(--surface);border-color:transparent;outline:none;box-shadow:0 0 0 2px var(--focus)}
/* the header search draws its own fill on its box */
.mast .search input,.mast .search input:focus{background-color:transparent;box-shadow:none}
/* the same for every search box that draws its own fill and focus ring on a wrapper (phone menu, Help Centre, Setup Guides): the field inside
   stays clear, so focus shows one ring, the wrapper's (QA 14 Nov 2026: two rings on these three) */
.md-search input,.md-search input:focus,.hc-field input,.hc-field input:focus,.ht-search input,.ht-search input:focus{background-color:transparent;box-shadow:none}
/* the phone menu's Design Online beside the one charcoal Request a Quote: a grey secondary button, never an outline (owner's system) */
.md-nav a.md-design{border-color:transparent;background:var(--tint);color:var(--ink)}
.md-nav a.md-design:hover{background:var(--tint-hover)}
@media (pointer:coarse){:where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=password],input[type=url],input:not([type]),select){min-height:44px;font-size:16px}}

/* ---------- Tags: the owner's ruling stands (7 Nov 2026, again 14 Nov): every tag square; only Corner Roundness rounds them (--tag-r as site.css) ---------- */

/* ---------- The chat button (Phone, Home: "white floating pill with a green online dot"; its place on the page is site.js's) ---------- */
html .chat-fab{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-menu)}   /* its shape stays site.css's (the owner's square-tag ruling) */
html .chat-fab:hover{background:var(--surface);box-shadow:0 0 0 .5px rgba(42,42,51,.08),0 16px 40px rgba(42,42,51,.2)}
html .chat-fab .cf-dot{background:var(--success);box-shadow:0 0 0 2px var(--surface)}
html .chatw.away .chat-fab .cf-dot{background:var(--line-strong)}
html .chat-fab .cf-n{background:var(--danger);box-shadow:0 0 0 2px var(--surface)}
html .chat-fab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- The cookie card (a white card, no outline, the menu shadow) ---------- */
html .ckb{border:0;border-radius:calc(20px * var(--pb-r-scale, var(--hq-r-scale, 1)));box-shadow:var(--shadow-menu)}
html .ckb-ic{border-radius:calc(12px * var(--pb-r-scale, var(--hq-r-scale, 1)));background:var(--tint)}

/* ---------- Cards: help cards, product tiles (category pages, All Products, search, You May Also Like) ---------- */
/* white, 20 px corners, the soft card shadow, no outline; a gentle lift on hover (the system's .pb-topic and .pb-product) */
html .helpcard,html .catcard,html main[data-look] .catcard,html main[data-look="c"] .catcard{background:var(--surface);border:0;border-color:transparent;border-radius:calc(20px * var(--pb-r-scale, var(--hq-r-scale, 1)));box-shadow:var(--shadow-card);transition:box-shadow 200ms ease,transform 200ms ease}
html .helpcard:hover,html .catcard:hover,html main[data-look] .catcard:hover{border-color:transparent;box-shadow:var(--shadow-lift);transform:translateY(-2px)}
html .helpcard .ic,html .contact-strip .ic{border:0;border-radius:calc(12px * var(--pb-r-scale, var(--hq-r-scale, 1)));background:var(--tint)}
html .catcard .im,html main[data-look] .catcard .im{border-radius:calc(14px * var(--pb-r-scale, var(--hq-r-scale, 1)))}
@media (prefers-reduced-motion:reduce){html .helpcard:hover,html .catcard:hover{transform:none}}

/* ---------- Questions answered (.faq): soft paper rows, no outline (the system's accordion) ---------- */
html .faq{border:0;border-radius:calc(14px * var(--pb-r-scale, var(--hq-r-scale, 1)));background:var(--panel);box-shadow:none}
html .faq:hover{border-color:transparent;background:var(--tint)}
html .faq[open]{background:var(--panel)}

/* ---------- One height a row (a button beside a field or a button of another size takes the row's height) ---------- */
html .disc .btn-ghost:not(.sm):not(.quiet){height:auto;min-height:0;align-self:stretch}
html .nf-form .btn:not(.sm){height:auto;min-height:44px;align-self:stretch}
html .pw-btns .btn,html .pw-btns .btn-ghost,html .ab-ctas .btn,html .ab-ctas .btn-ghost,html .pw-luxe .pw-btns a.btn-ghost:last-child{height:var(--button-height);min-height:var(--button-height)}
/* ---------- Product tiles: the words keep the card's padding (owner on his phone, 14 Nov 2026: "Cards & Stationery" sat on the card's foot,
   the name strip glued to the picture). The system's product text is 18 px 20 px 20 px; here 16 px at the sides and the foot and 14 px under
   the picture, at every width (tools/card_padding_check.mjs: no line closer than 12 px to a card's edge). ---------- */
/* the picture sits inset with a little air all round it (owner, 14 Nov 2026: "add little padding around the images too"): 10 px from the card's
   top and sides, then the words 16 px from the card's edges (10 px card + 6 px words) */
html .catcard,html main[data-look] .catcard{padding:10px 10px 16px}
html .catcard>.im,html main[data-look] .catcard>.im{margin-bottom:14px;border-radius:calc(12px * var(--pb-r-scale, var(--hq-r-scale, 1)))}
html .catcard>b,html .catcard>.rating,html .catcard>p,html .catcard>.cc-tags,html .catcard>.cc-foot,
html main[data-look] .catcard>b,html main[data-look] .catcard>.rating,html main[data-look] .catcard>p,html main[data-look] .catcard>.cc-tags,html main[data-look] .catcard>.cc-foot{padding-left:6px;padding-right:6px}
/* a long range name under a tile ("Documents & Photocopies") wraps inside the card instead of running past its edge or being cut */
html .catcard .cc-foot .count{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
/* the cookie card (Codex A087 / A090, 14 Nov 2026): Reject All and Accept All (and Not Now / Allow) are equal grey peers, never
   favouring either; Save My Choices is the one charcoal button with no outline; every button and the close are 44 px; the Cookie
   Policy link inside the words gets a 44 px pad that moves no text */
html .ckb-b{height:44px;background:var(--tint);color:var(--ink)}
html .ckb-b:hover{background:var(--tint-hover);color:var(--ink)}
html .ckb-save{height:44px;border:0;background:var(--primary);color:var(--on-primary,#fff)}
html .ckb-save:hover{background:var(--primary-hover,var(--primary-dk))}
html .ckb-x{width:44px;height:44px;top:4px;right:4px}
html .ckb-tx p a{position:relative}
html .ckb-tx p a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
/* the phone menu's search (Codex A091): the shared filled field, no outline; it keeps its grey fill with the one 2 px ring while typing (A091 retest) */
html .md-search{border:0;background:var(--field);border-radius:var(--radius-control);corner-shape:round;transition:background var(--duration-quick) ease,box-shadow var(--duration-quick) ease}
html .md-search:focus-within{background:var(--field);box-shadow:0 0 0 2px var(--focus)}
html .md-search .go{color:var(--muted)}
html .md-search input::placeholder{color:var(--muted)}

/* CODEX FORMS AUDIT (14 Nov 2026). A107: the instruction under the heading on Track Your Order, Send Artwork and Contact reads as the main
   instruction, 16 px (15 on phones) at a 68 character measure, not 13 px fine print across the page. A108 / A109: a field's own error
   (site.js pbFieldErr) sits under it in the danger colour; the field takes a danger ring while it is wrong. */
.trkpage .doc-hero .lead,.sendpage .doc-hero .lead,.contactpage .doc-hero .lead{font-size:16px;line-height:1.6;max-width:68ch}
@media (max-width:700px){ .trkpage .doc-hero .lead,.sendpage .doc-hero .lead,.contactpage .doc-hero .lead{font-size:15px} }
.f-err{display:block;font-size:13.5px;line-height:1.45;font-weight:400;color:var(--danger,#B3261E)}
.f-err[hidden]{display:none}
main input[aria-invalid="true"]{box-shadow:0 0 0 2px var(--danger,#B3261E)}
main input[aria-invalid="true"]:focus{box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px var(--danger,#B3261E)}
.sendpage #saMsg{font-size:14px;line-height:1.55;color:var(--muted)}
.sendpage #saMsg.bad{color:var(--danger,#B3261E)}
/* ---------- Questions and accordions: the answer under its question (the owner, 14 Nov 2026, guide FAQ cards at 1920) ----------
   The system's accordion (design/minimal-2026-11-14/website .pb-acc): no line between a question and its answer; the answer starts 8 px
   under the question's words, at the question's own left edge; a line only BETWEEN items, inset to the words. Before: a full-width line with
   the answer 4 px under it and 18 px further in than the question. tools/accordion_spacing_check.mjs measures every open question. */
html body main details.faq summary{padding:18px 22px}
html body main details.faq[open] summary{padding-bottom:8px}
html body main details.faq.faq>:not(summary){margin:0;padding:0 22px 20px;border-top:0}
/* the product page's numbered sections: the line under the heading is inset to the words, never edge to edge */
html body .acc-body{border-top:0;position:relative}
html body .acc-body::before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;background:var(--line)}
html body .acc-body{padding-top:20px}
/* "How timing works" (product page delivery card): the words under the question start where the question starts (20 px), 8 px under it */
html body details.how>.how-body{padding:2px 20px 14px}