/* ==== PRINT BUDDY WEBSITE MINIMAL: THE FRAME (Step B; design/minimal-2026-11-14/website/components Header, Footer, Button).
   Linked right after pb-minimal-tokens.css on every shop page. Only the look changes: every link, button, field and word of the
   top strip, the header, the category row and the footer stays where it is (site.js renderChrome draws them).
   - Top strip: kept exactly as it was (the owner, 14 Nov 2026).
   - Header: its old height, logo size and sticky behaviour kept (the owner, 14 Nov 2026); a filled search with no outline, Help / My Account / Basket as soft hover tiles, the basket
     count a small pill (charcoal with something in it, grey when empty).
   - Category row: soft hover tiles, All Products in a light tile, the lime live dot kept beside Same-Day Printing.
   - Footer: the charcoal footer (--footer), the one dark area; more air, spaced-capital group names, a hairline base line.
   Corners: these parts take the system's corners now (control 12, nav tiles 10, pill), each x var(--pb-r-scale, var(--hq-r-scale, 1)). ==== */

/* ---------- Top strip (utility) ---------- */
/* The owner (14 Nov 2026): the top strip stays exactly as it was (charcoal grey, its own small words), so nothing here. */

/* ---------- Header ---------- */
.site-head{--radius-control:calc(12px * var(--pb-r-scale, var(--hq-r-scale, 1)))}
.mast{background:var(--surface);box-shadow:none}
.mainnav{background:var(--surface);border-bottom:1px solid var(--line)}
@media (min-width:901px){
  html .mast .wrap{gap:4px}
  html .mast .wrap>.search{margin-right:28px}
  html .mast .wrap>.mast-help{margin-left:auto}
  /* the filled search: no outline; while typing it keeps its grey fill with one 2 px charcoal ring (Codex A091 retest, 14 Nov 2026) */
  html .mast .search{height:44px;background:var(--field);box-shadow:none;border:0;border-radius:var(--radius-control);corner-shape:round;padding-left:6px;transition:background var(--duration-quick) ease,box-shadow var(--duration-quick) ease}
  html .mast .search:focus-within{background:var(--field);box-shadow:0 0 0 2px var(--focus)}
  html .mast .search input{font-size:15px;color:var(--ink)}
  html .mast .search input::placeholder{color:var(--muted)}
  /* Help, My Account and the Basket: soft tiles on hover, 4 px apart (the system's .pb-hlink) */
  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 .mast-link,html .mast .basket-btn{height:40px;min-height:40px;max-height:40px;border:0;padding:0 12px;gap:8px;border-radius:calc(10px * var(--pb-r-scale, var(--hq-r-scale, 1)));corner-shape:round;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;transition:background var(--duration-quick) ease}
  html .mast .mast-link:hover,html .mast .basket-btn:hover,html .mast .mast-link[aria-current="page"]{background:var(--tint);color:var(--ink);text-decoration:none}
  html .mast .wrap>.basket-btn{margin-right:0;padding-right:8px}
  html .mast .notif-btn{border-radius:calc(10px * var(--pb-r-scale, var(--hq-r-scale, 1)))}
  html .mast .notif-btn:hover{background:var(--tint)}
  /* the basket count as a small pill */
  html .mast .basket-btn i{min-width:20px;height:20px;padding:0 6px;border:0;border-radius:calc(10px * var(--pb-r-scale, var(--hq-r-scale, 1)));corner-shape:round;background:var(--primary);color:var(--on-primary);font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums}
  html .mast .basket-btn.bk-empty i{background:var(--tint);color:var(--muted)}
  html .mast .basket-btn.bk-empty:hover i{background:var(--surface)}
}
/* The owner (14 Nov 2026): the header keeps its old height, logo size and the way it hides and sticks; nothing here. */

/* ---------- Category row ---------- */
@media (min-width:901px){
  html .mainnav .wrap{height:var(--nav-height);gap:0}
  html .mainnav .wrap>a,html .mainnav .wrap>.nav-dd>.nav-dd-btn,html .mainnav .nav-all-btn{height:36px;padding:0 7px;border-radius:calc(10px * var(--pb-r-scale, var(--hq-r-scale, 1)));corner-shape:round;font-weight:500;transition:background var(--duration-quick) ease}
  html .mainnav .wrap>a:hover,html .mainnav .wrap>.nav-dd>.nav-dd-btn:hover,html .mainnav .wrap>.nav-dd.open>.nav-dd-btn,html .mainnav .wrap>.nav-dd>.nav-dd-btn[aria-expanded="true"]{background:var(--tint)}
  html .mainnav .wrap>a::after,html .mainnav .wrap>.nav-dd>.nav-dd-btn::after{display:none}
  /* All Products in a light tile, no divider */
  html .mainnav .nav-all{padding-right:0;margin-right:0;border-right:0}
  html .mainnav .nav-all-btn{background:var(--tint);padding:0 12px}
  html .mainnav .nav-all-btn:hover,html .mainnav .nav-all.open .nav-all-btn{background:var(--tint-hover)}
  html .mainnav :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
}

/* the tiles carry 7 px each side, so the row's own gap shrinks by the same: every item keeps its place at every width */
@media (min-width:901px) and (max-width:1240px){html .mainnav .wrap{gap:8px}}

/* ---------- Footer ---------- */
footer.ft2{--ink:var(--footer-ink);--muted:var(--footer-muted);--icon:var(--footer-muted);--primary:var(--footer-ink);--primary-hover:var(--footer-ink);--logo-ink:var(--footer-ink);
  background:var(--footer);color:var(--footer-muted);font-size:14px}
html footer.ft2 .ft-links.ft5{padding-top:64px;padding-bottom:40px}
footer.ft2 .tagline-f,footer.ft2 .ft-col summary,footer.ft2 p{color:var(--footer-muted)}
footer.ft2 h4,footer.ft2 .ft-col summary h4,footer.ft2 details summary h4{color:var(--footer-muted);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
footer.ft2 a,footer.ft2 .ft-col a,footer.ft2 .ft-nap a{color:var(--footer-ink)}
footer.ft2 .ft-col a{font-size:13.5px}
footer.ft2 a:hover{color:var(--footer-ink);text-decoration:underline;text-underline-offset:3px}
footer.ft2 .ft-nap,footer.ft2 .ft-nap a{font-size:13.5px}
footer.ft2 svg:not(.pblogo):not(.ft-paycard){color:var(--footer-muted)}
footer.ft2 .ft-brand svg.pblogo,footer.ft2 .ft-brand img{height:28px;width:auto}
footer.ft2 .hb.dark .hb-t small{color:var(--footer-muted)}
footer.ft2 .hb.dark .hb-t b,footer.ft2 .hb.dark .hb-go{color:var(--footer-ink)}
footer.ft2 .foot-bottom{background:var(--footer);border-top:0;color:var(--footer-muted);font-size:13px}
footer.ft2 .foot-bottom>.wrap{border-top:1px solid rgba(255,255,255,0.1);padding-top:20px;padding-bottom:32px}
footer.ft2 .foot-bottom .wrap,footer.ft2 .foot-bottom span{color:var(--footer-muted);font-size:13px}
footer.ft2 .foot-bottom a,footer.ft2 .foot-bottom button{color:var(--footer-muted)}
footer.ft2 .foot-bottom a:hover,footer.ft2 .foot-bottom button:hover{color:var(--footer-ink)}
footer.ft2 :focus-visible{outline:2px solid var(--footer-ink);outline-offset:2px;box-shadow:none}
@media (max-width:900px){
  html footer.ft2 .ft-links.ft5{padding-top:48px;padding-bottom:24px}
  /* 28 px, the phone logo's height before 14 Nov (owner's ruling: the logo size stays as before); 1ac3e74b2 (#341) had cut it to 22 px */
  .mast .wrap>.logo svg.pblogo,.mast .wrap>.logo img{max-height:28px}
  /* the logo on the icons' centre line (owner on his Galaxy Z Fold, 14 Nov 2026): .logo is a column (logo over its hidden tag line) whose
     align-items centres across; since the phone bar made the link 44 px tall for touch, the logo sat at the top of it, 11 px above the
     icons. justify-content centres it down the column too. Header height, logo size and the top strip are unchanged. */
  .mast .wrap>.logo{justify-content:center}
  footer.ft2 .ft-col summary h4{color:var(--footer-muted);font-size:12px}
  footer.ft2 .ft-col{border-color:rgba(255,255,255,0.1)}
  footer.ft2 .ft-col summary::after,footer.ft2 .ft-col summary svg{color:var(--footer-muted)}
}
/* a bigger logo on tablets and the Fold's inner screen (owner, 14 Nov 2026: "I think the logo is too small"): 36 px tall from 600 to 900 px,
   about 28% more than the phones' 28 px; it still fits the 44 px link, so the bar's height and the placeholder (.chrome-ph) are unchanged. */
@media (min-width:600px) and (max-width:900px){
  .mast .wrap>.logo{flex-basis:222px}
  .mast .wrap>.logo svg.pblogo,.mast .wrap>.logo img{max-width:222px;max-height:36px}
}