/* ==========================================================================
   The Print Shop Tunstall — site styles
   1 tokens · 2 base · 3 layout · 4 buttons · 5 header · 6 hero · 7 sections
   8 cards · 9 product · 10 gallery · 11 forms · 12 cart · 13 footer
   14 motion · 15 responsive · 16 listings, prices and product pictures
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  /* ink */
  --ink: #16202b;
  --ink-soft: #3a4a5a;
  --ink-mute: #5e6b79;
  --ink-deep: #111a24;

  /* brand slate */
  --brand: #3c4a57;
  --brand-soft: #55677a;

  /* accent — press orange */
  --accent: #c2410c;
  --accent-dark: #9a3412;
  --accent-tint: #fdf2ec;
  --accent-line: #f0c9b0;
  --accent-lift: #f5a26b;

  /* surfaces */
  --bg: #ffffff;
  --bg-paper: #faf9f7;
  --bg-alt: #f3f1ed;
  --line: #e4e1db;
  --line-strong: #cfcbc3;

  /* status */
  --danger: #b3372f;
  --ok-bg: #e9f5ec;
  --ok-ink: #1f6b36;
  --ok-line: #bcdfc6;

  /* type */
  --font-head: 'Cabin', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Lato', 'Segoe UI', Arial, sans-serif;
  --step--2: 0.75rem;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: clamp(1.05rem, 1rem + 0.25vw, 1.19rem);
  --step-2: clamp(1.22rem, 1.12rem + 0.5vw, 1.5rem);
  --step-3: clamp(1.45rem, 1.28rem + 0.85vw, 2rem);
  --step-4: clamp(1.85rem, 1.5rem + 1.7vw, 3rem);

  /* space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* elevation */
  --sh-1: 0 1px 2px rgba(22, 32, 43, .05), 0 1px 3px rgba(22, 32, 43, .05);
  --sh-2: 0 2px 6px rgba(22, 32, 43, .05), 0 10px 22px rgba(22, 32, 43, .07);
  --sh-3: 0 10px 24px rgba(22, 32, 43, .09), 0 24px 50px rgba(22, 32, 43, .10);

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .16s var(--ease);
  --t-med: .28s var(--ease);
  --t-slow: .5s var(--ease);
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-stack, 110px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* short pages should still push the footer to the bottom of the viewport */
main { flex: 1 0 auto; }
.site-footer { flex: none; }

[hidden] { display: none !important; }

img { max-width: 100%; height: auto; display: block; }
/* <picture> only chooses a file. With no box of its own, the <img> inside lays
   out as if it were alone, so every rule written for `.thumb img` still holds. */
picture { display: contents; }
p, li, td, th, dd, figcaption { overflow-wrap: anywhere; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.55em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: #fff; }

/* ---------- 3. layout primitives ---------- */
.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-5); }
.container.narrow { max-width: 780px; }
.center { text-align: center; }
.muted { color: var(--ink-mute); }
.small { font-size: var(--step--1); }
.strong { font-weight: 700; color: var(--ink); }

.eyebrow {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
  /* the hero's runs to two lines on a phone: even halves, not one word left over */
  text-wrap: balance;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--accent);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 700;
  text-decoration: none;
  z-index: 200;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- 4. buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-med), transform var(--t-fast);
}
.btn svg { flex: none; }
/* A long label on a phone wraps rather than pushing the page sideways:
   "Ask us for anything you don't see" was wider than the screen. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--sh-1);
}
.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); box-shadow: var(--sh-1); }

.btn-secondary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-secondary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

.btn-on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.btn-on-dark:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn[disabled] { opacity: .6; cursor: default; transform: none; }

.btn-sm { min-height: 40px; padding: var(--space-2) var(--space-5); font-size: var(--step--2); }

/* text link with arrow */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}
.link-more svg { transition: transform var(--t-fast); }
.link-more:hover svg { transform: translateX(4px); }

/* ---------- 5. header ---------- */
.top-bar {
  position: relative;
  z-index: 60;
  background: var(--ink-deep);
  color: #cbd5e1;
  font-size: var(--step--2);
  letter-spacing: 0.05em;
}
/* The header runs wider than the 1140px content column. Brand, seven nav
   items, search, quote button and cart need about 1150px to sit apart, and
   inside 1140 the nav spilled into the brand on one side and the search on
   the other. The top bar matches it, so the tagline stays over the brand. */
.top-bar-inner,
.header-inner { max-width: 1280px; }

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 38px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
.top-bar-tag {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-lift);
  font-weight: 700;
}
.top-bar-contact { display: flex; align-items: center; gap: var(--space-5); }
.top-bar a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 700;
  transition: color var(--t-fast);
}
.top-bar a:hover { color: #fff; }
/* opening-hours tag: whether the shop is open right now, with the whole
   week on hover, focus or tap. Everything comes from src/hours.js. */
.hours-tag { position: relative; }
.hours-tag-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: #cbd5e1;
  cursor: pointer;
}
.hours-tag-btn:hover { color: #fff; }
.hours-tag-label { font-weight: 700; }
.hours-tag-detail { color: #94a3b8; }
.hours-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
}
.hours-tag.is-open .hours-dot,
.hours-tag.is-closing .hours-dot { animation: hours-pulse 2.6s ease-out infinite; }
.hours-tag.is-open .hours-dot { background: #34d399; color: rgba(52, 211, 153, .6); }
.hours-tag.is-closing .hours-dot { background: #fbbf24; color: rgba(251, 191, 36, .6); }
.hours-tag.is-open .hours-tag-label { color: #6ee7b7; }
.hours-tag.is-closing .hours-tag-label { color: #fcd34d; }

@keyframes hours-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.hours-week {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 70;
  min-width: 244px;
  padding: var(--space-4);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  letter-spacing: normal;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.hours-tag:hover .hours-week,
.hours-tag:focus-within .hours-week,
.hours-tag.is-showing .hours-week {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Escape closes it even while hovered or focused (main.js). */
.hours-tag.is-dismissed .hours-week {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}
.hours-week-head {
  margin: 0 0 var(--space-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
}
.hours-week table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.hours-week th { padding: 3px 0; text-align: left; font-weight: 400; color: var(--ink-soft); }
.hours-week td { padding: 3px 0; text-align: right; font-variant-numeric: tabular-nums; }
.hours-week tr.is-today th,
.hours-week tr.is-today td { font-weight: 700; color: var(--ink); }
.hours-today-flag {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-med), background var(--t-med);
}
.site-header.is-scrolled { box-shadow: var(--sh-2); background: rgba(255, 255, 255, .98); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 68px;
}

/* wordmark */
.brand-mark {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  line-height: 1;
  padding: var(--space-2) 0;
  flex: none;
}
.brand-mark-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  transition: color var(--t-fast);
}
.brand-mark-place {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  text-transform: uppercase;
  color: var(--accent);
}
.brand-mark:hover .brand-mark-name { color: var(--accent); }

/* the margin keeps clear space either side of the nav even when it is full */
.site-nav { flex: 1; display: flex; justify-content: center; min-width: 0; margin: 0 var(--space-3); }
/* Never wrap: a nav that spills onto a second line doubles the height of the
   header and pushes everything on every page down with it. Below the width
   where these items genuinely fit, the whole nav becomes the menu button
   instead -- see the breakpoint at the bottom of this file. */
.site-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2px;
}
.site-nav a,
.site-nav .has-dropdown > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 22px 11px;
  font-family: var(--font-body);
  /* a <button> does not inherit line-height from the <a> beside it, and the
     two sat three pixels apart until this said so */
  line-height: 1.2;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast);
}
.site-nav > ul > li > a::after,
.site-nav .has-dropdown > button::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px;
  bottom: 16px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med);
}
.site-nav > ul > li > a:hover,
.site-nav > ul > li > a.active,
.site-nav .has-dropdown > button:hover,
.site-nav .has-dropdown.open > button { color: var(--accent); }
.site-nav .nav-quote { display: none; }
.site-nav > ul > li > a:hover::after,
.site-nav > ul > li > a.active::after,
.site-nav .has-dropdown > button:hover::after,
.site-nav .has-dropdown.open > button::after { transform: scaleX(1); }

.caret {
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 3px;
  transition: transform var(--t-med);
}
.has-dropdown.open .caret { transform: rotate(-135deg) translateY(-2px) translateX(-2px); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  min-width: 244px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block;
  padding: 10px 20px;
  letter-spacing: 0.04em;
  font-size: 0.79rem;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.dropdown a:hover { background: var(--accent-tint); color: var(--accent); border-left-color: var(--accent); }
.dropdown a[aria-current="page"] { color: var(--accent-dark); font-weight: 700; border-left-color: var(--accent); }
.dropdown-label {
  padding: 12px 20px 5px;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.dropdown-label + li a { border-top: 0; }

.header-icons { display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* search: a plain GET form that works without JS, upgraded with suggestions.
   The wrapper keeps a fixed height of its own: above the mobile breakpoint the
   input lifts out of flow when it opens, and without a height here the wrapper
   would collapse to nothing and the suggestions -- which hang off its bottom
   edge -- would appear behind the open input rather than under it. */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 220px;
  min-width: 0;
  height: 40px;
}
.header-search-icon {
  position: absolute;
  left: 11px;
  color: var(--ink-mute);
  pointer-events: none;
  transition: color var(--t-fast);
}
.header-search:focus-within .header-search-icon { color: var(--accent); }
.header-search input {
  width: 100%;
  min-width: 0;
  padding: 9px var(--space-3) 9px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-paper);
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.header-search input::placeholder { color: var(--ink-mute); }
.header-search input:focus {
  background: var(--bg);
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-line);
}
.header-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Above the open input (z-index 65), never behind it. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  min-width: 260px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
.search-suggestions a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
}
.search-suggestions a:hover,
.search-suggestions li.is-active a { background: var(--accent-tint); color: var(--accent-dark); }
.search-suggestions img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  flex: none;
}
.suggestion-text { min-width: 0; }
.suggestion-name {
  display: block;
  font-weight: 700;
  font-size: var(--step--1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-meta { display: block; font-size: var(--step--2); color: var(--ink-mute); }
.suggestion-all a { justify-content: center; font-weight: 700; color: var(--accent); }

/* search on the shop page itself */
.shop-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.shop-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 0;
}
.shop-search-icon {
  position: absolute;
  left: 14px;
  color: var(--ink-mute);
  pointer-events: none;
}
.shop-search input {
  width: 100%;
  min-width: 0;
  padding: 12px var(--space-4) 12px 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg);
  font: inherit;
  color: var(--ink);
}
.shop-search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-line); }
.shop-search-clear { font-size: var(--step--1); color: var(--ink-mute); }
.search-summary { margin: 0 0 var(--space-3); color: var(--ink-soft); }
.search-cats { margin: 0 0 var(--space-4); font-size: var(--step--1); color: var(--ink-soft); }
.header-cta { display: inline-flex; }
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  color: var(--ink);
  transition: background var(--t-fast), color var(--t-fast);
}
.cart-link:hover { background: var(--accent-tint); color: var(--accent); }
.cart-count {
  position: absolute;
  top: 4px; right: 2px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 0 0 2px var(--bg);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-med), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. hero ---------- */
.hero {
  padding: var(--space-8) 0 var(--space-5);
  background:
    radial-gradient(900px 340px at 50% -60px, var(--accent-tint), transparent 70%),
    var(--bg);
}
.hero-copy { text-align: center; max-width: 780px; margin: 0 auto var(--space-6); }
.hero-title { margin: 0 0 var(--space-5); display: block; }
.hero-title-name {
  display: block;
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero-title-tag {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--ink-mute);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.hero-banner {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--bg-alt);
}
.hero-banner img { width: 100%; }

/* services strip */
.hero-strip {
  list-style: none;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.hero-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: left;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.hero-strip-item svg { color: var(--accent); flex: none; }

/* ---------- 7. sections ---------- */
.page-section, .featured, .about, .contact { padding: var(--space-9) 0; }
/* Featured products belong to the hero above them, so they sit closer to it. */
.featured { padding-top: var(--space-5); }
.featured .section-head { margin-bottom: var(--space-5); }
.page-section { padding: var(--space-8) 0 var(--space-9); }
.alt { background: var(--bg-alt); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.section-head-text { max-width: 620px; }
.section-head .section-title { margin: 0; text-align: left; }
.section-head .section-title::after { left: 0; transform: none; }

.section-title, .page-title {
  font-size: var(--step-3);
  letter-spacing: -0.005em;
  position: relative;
  padding-bottom: var(--space-4);
  margin: 0 0 var(--space-6);
  text-align: center;
}
.section-title::after, .page-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.page-head { text-align: center; margin-bottom: var(--space-7); }
.page-head .page-title { margin-bottom: var(--space-4); }
.page-intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  color: var(--ink-mute);
  font-size: var(--step-1);
}
.section-head .page-intro, .section-head-text .page-intro { text-align: left; margin: var(--space-4) 0 0; }

/* ---------- 8. cards & grids ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--space-5);
}
.product-grid-few {
  grid-template-columns: repeat(auto-fit, minmax(232px, 276px));
  justify-content: center;
}

.product-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: var(--accent-line);
}
.product-thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-alt);
}
.product-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 32, 43, .18), transparent 45%);
  opacity: 0;
  transition: opacity var(--t-med);
}
.product-card:hover .product-thumb::after { opacity: 1; }

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-5);
  text-align: center;
}
.product-card h3 {
  font-size: var(--step-0);
  margin: 0;
  transition: color var(--t-fast);
}
.product-card:hover h3 { color: var(--accent); }
.card-cat {
  color: var(--ink-mute);
  font-size: 0.7rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  order: -1;
}
.price { color: var(--accent); font-weight: 700; margin: 0; font-size: var(--step-1); }
.price.big { font-size: 1.7rem; letter-spacing: -0.01em; }

.thumb-placeholder {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg, #eceae5, #eceae5 14px, #f6f4f1 14px, #f6f4f1 28px);
}
.thumb-placeholder.large { aspect-ratio: 1; border-radius: var(--r-lg); }

.empty-note {
  padding: var(--space-7) var(--space-5);
  background: var(--bg-paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  max-width: 560px;
  margin: 0 auto;
}

/* category chips */
/* Shop by category: a picture grid instead of a wall of thirty-odd pills.
   The thumbnail is contained rather than cropped because for most of this
   shop's categories the picture *is* the price list. */
.category-browse { margin-bottom: var(--space-7); }
.section-title-sm {
  font-family: var(--font-head);
  font-size: var(--step-1);
  margin: 0 0 var(--space-4);
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-4);
}
.category-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.category-tile:hover {
  border-color: var(--accent-line);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
/* A flex item's min-height is `auto`, which means "no smaller than my
   content". A portrait photo is taller than the square this asks for, so
   without min-height:0 the tile ignores the aspect-ratio, grows to fit the
   picture, and drags every other tile in that grid row up to its height. */
.category-tile-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.category-tile-thumb img,
.category-tile-thumb .thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.category-tile-body { display: block; padding: var(--space-3); flex: 1; }
.category-tile-name {
  display: block;
  font-weight: 700;
  font-size: var(--step--1);
  line-height: 1.25;
}
.category-tile-meta {
  display: block;
  margin-top: 3px;
  font-size: var(--step--2);
  color: var(--ink-mute);
}
.category-tile:hover .category-tile-name { color: var(--accent-dark); }

.category-more { margin-top: var(--space-4); }
.category-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.category-more > summary::-webkit-details-marker { display: none; }
.category-more > summary:hover { border-color: var(--accent); color: var(--accent); }
.category-more[open] .category-more-open,
.category-more:not([open]) .category-more-close { display: none; }
.category-more .category-grid { margin-top: var(--space-4); }

/* product options: quantity buckets, the shop's own questions, and artwork */
.price-from { font-size: 0.6em; font-weight: 400; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.price-enquiry { font-size: 0.7em; color: var(--ink-soft); }

/* A file input has a wide intrinsic minimum -- the "Choose file / no file
   chosen" furniture -- and a grid item defaults to min-width:auto, so one of
   them inside a card pushes the card past the viewport on a phone. */
input[type="file"] { max-width: 100%; min-width: 0; }
.contact-card, .contact-form, .contact-grid > * { min-width: 0; }

.product-options { margin: var(--space-5) 0; display: grid; gap: var(--space-4); }
.option-group { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.option-group > legend,
.option-group > label {
  padding: 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-soft);
}
.option-group input[type="text"],
.option-group select,
.option-group textarea,
.option-group input[type="file"] {
  width: 100%;
  padding: 11px var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  font: inherit;
  color: var(--ink);
}
.option-group input:focus, .option-group select:focus, .option-group textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-line);
}
.option-check { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }

.tier-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tier-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 46px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tier-pill input { position: absolute; opacity: 0; pointer-events: none; }
.tier-pill:hover { border-color: var(--accent-line); }
.tier-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.tier-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tier-pill-label { font-weight: 700; font-size: var(--step--1); }
.tier-pill-price { font-size: var(--step--1); color: var(--accent-dark); }

/* Colour questions as chips: a dot of the colour and its name. The dot's
   colour arrives as data-swatch and main.js sets it as --swatch, because the
   Content-Security-Policy allows no inline styles. The inset ring keeps white
   and cream visible on a white page. */
.colour-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.colour-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 6px var(--space-3) 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.colour-chip input { position: absolute; opacity: 0; pointer-events: none; }
.colour-chip:hover { border-color: var(--accent-line); }
.colour-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.colour-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.colour-dot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--swatch, var(--bg-alt));
  box-shadow: inset 0 0 0 1px rgba(22, 32, 43, .22);
}
.colour-dot-none { display: none; }
.colour-chip:has(.colour-dot-none) { padding-left: var(--space-3); }
.colour-chip-extra { font-weight: 400; color: var(--accent-dark); }
/* "charcoal" as typed in the admin reads as "Charcoal" beside the others. */
.colour-chip-name { display: inline-block; }
.colour-chip-name::first-letter { text-transform: uppercase; }

/* Design it here, or bring your own artwork: whichever is chosen, the other
   way's controls are put away. A browser without :has() shows both. */
.order-route { margin: var(--space-5) 0 0; padding: 0; border: 0; min-width: 0; }
.order-route > legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-soft);
}
.order-route-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-2); }
.order-route-choice {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  padding: var(--space-3) var(--space-4) var(--space-3) 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.order-route-choice input {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-3) + 3px);
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.order-route-choice:hover { border-color: var(--accent-line); }
.order-route-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.order-route-name { font-weight: 700; color: var(--ink); }
.order-route-blurb { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.5; }
.order-route-go { margin: var(--space-4) 0 var(--space-5); }
main:has(input[name="order-route"][value="design"]:checked) [data-route="own"],
main:has(input[name="order-route"][value="own"]:checked) [data-route="design"] { display: none; }

.artwork-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.artwork-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-alt);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
}
.artwork-list .linklike {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--danger);
  cursor: pointer;
  text-decoration: underline;
}
.option-error, .error-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: var(--step--1);
}
/* chat bubble: the contact form, following you around the site */
.chat { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 80; }
.chat-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-5);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  box-shadow: var(--sh-3, 0 10px 30px rgba(0, 0, 0, .22));
  transition: background var(--t-fast), transform var(--t-fast);
}
.chat-button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.chat.is-open .chat-button { background: var(--ink); }

.chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-3));
  width: min(370px, calc(100vw - var(--space-5) * 2));
  max-height: min(560px, calc(100dvh - 140px));
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-paper);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.chat-title { margin: 0; font-family: var(--font-head); font-weight: 700; }
.chat-sub { margin: 2px 0 0; font-size: var(--step--2); color: var(--ink-mute); }
.chat-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.chat-close:hover { background: var(--bg-alt); color: var(--ink); }
.chat-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.chat-body .contact-form { gap: var(--space-2); }
.chat-alt { margin: var(--space-3) 0 0; font-size: var(--step--1); color: var(--ink-mute); }

@media (max-width: 560px) {
  .chat { right: var(--space-3); bottom: var(--space-3); }
  /* Hidden from sight only. display:none would take the words away from a
     screen reader too, and leave a round orange button that says nothing. */
  .chat-button-label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap;
  }
  .chat-button { position: relative; width: 52px; padding: 0; justify-content: center; }
  .chat-panel {
    position: fixed;
    right: var(--space-3);
    left: var(--space-3);
    bottom: calc(52px + var(--space-5));
    width: auto;
  }
}

.pay-block { margin: var(--space-4) 0; }
.pay-intro { margin: 0 0 var(--space-3); font-size: var(--step--1); color: var(--ink-soft); }
.pay-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pay-buttons .btn { flex: 1 1 180px; }
.pay-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}
.pay-or::before, .pay-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.cart-item-spec.is-enquiry { color: var(--accent-dark); font-weight: 700; }
.cart-item-spec.is-problem { color: var(--danger); font-weight: 700; }
.cart-row-problem { background: #fdf6f5; }

/* share: plain links, no third-party SDKs, so the CSP stays as tight as it is */
.product-share {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  flex-wrap: wrap;
}
.product-share-label {
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-right: var(--space-1);
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.share-btn:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-tint);
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--space-2) var(--space-4);
  transition: border-color var(--t-fast), color var(--t-fast),
              background var(--t-fast), transform var(--t-fast);
}
.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.chip-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip-active:hover { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }

/* about / feature cards */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.about-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.about-card:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--accent-line); }
.about-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about-card-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: var(--space-5); }
.about-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: var(--space-3);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent);
}
.about-card h3 { font-size: var(--step-1); margin-bottom: var(--space-2); transition: color var(--t-fast); }
.about-card p { color: var(--ink-mute); font-size: 0.94rem; margin: 0; }
.about-card:hover h3 { color: var(--accent); }
/* the same look as the "View all" links, pinned to the foot so the three line up */
.about-card-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.about-card-more svg { transition: transform var(--t-fast); }
.about-card:hover .about-card-more svg { transform: translateX(4px); }

/* colour swatch cards */
.colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.colour-card {
  margin: 0;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.colour-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.colour-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.colour-card figcaption {
  padding: var(--space-3);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}

/* ---------- 9. product detail ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  margin-bottom: var(--space-6);
  color: var(--ink-mute);
}
.breadcrumb a { text-decoration: none; color: var(--ink-mute); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .breadcrumb-current { color: var(--ink); font-weight: 700; }
.breadcrumb-sep { color: var(--line-strong); }

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
  margin-bottom: var(--space-9);
}
/* The frame is on the picture itself, so the thumbnail strip can sit under it. */
.product-main-picture,
.product-detail-image > .thumb-placeholder {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.product-main-picture img { width: 100%; }
.product-detail-info h1 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.product-detail-info .price.big { margin-bottom: var(--space-5); }
.product-desc { margin: 0 0 var(--space-5); color: var(--ink-soft); }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
  flex: none;
}
.qty-btn {
  width: 44px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-paper);
  border: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.qty-btn:hover { background: var(--accent-tint); color: var(--accent); }
.qty-stepper input {
  width: 58px;
  height: 46px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--bg);
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.add-to-cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.add-to-cart-row .qty-label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.add-to-cart-row .btn { flex: 1 1 190px; }

.product-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.product-note svg { flex: none; color: var(--accent); margin-top: 3px; }
.product-note p { margin: 0; }

/* ---------- 10. gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--space-3);
}
.gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--bg-alt);
  cursor: zoom-in;
  border-radius: var(--r-md);
  overflow: hidden;
  display: block;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 32, 43, .42);
  opacity: 0;
  transition: opacity var(--t-med);
}
.gallery-zoom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--t-med), transform var(--t-med);
  z-index: 1;
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.07); }
.gallery-item:hover::after,
.gallery-item:focus-visible::after { opacity: 1; }
.gallery-item:hover .gallery-zoom,
.gallery-item:focus-visible .gallery-zoom { opacity: 1; transform: scale(1); }

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(11, 16, 22, .93);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-8) var(--space-7);
}
.lightbox img {
  max-width: min(1100px, 86vw);
  max-height: 76vh;
  width: auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
.lightbox-caption {
  color: #cbd5e1;
  margin: var(--space-4) 0 0;
  text-align: center;
  max-width: 60ch;
  font-size: var(--step--1);
}
.lightbox-counter {
  position: absolute;
  top: var(--space-5);
  left: var(--space-6);
  color: #94a3b8;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.lightbox-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .24); }
.lightbox-close { top: var(--space-4); right: var(--space-5); }
.lightbox-prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:hover { transform: translateY(-50%) translateX(2px); }
body.is-locked { overflow: hidden; }

/* ---------- 11. forms & feedback ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-6);
  align-items: start;
}
.contact-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--sh-1);
}
.contact-card h3 { font-size: var(--step-2); margin-bottom: var(--space-2); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-1); }
.contact-form label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--space-4);
}
.contact-form input,
.contact-form textarea {
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font: inherit;
  color: var(--ink);
  background: var(--bg-paper);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-mute); }
.contact-form input:hover,
.contact-form textarea:hover { border-color: var(--ink-mute); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-line);
}
.contact-form textarea { resize: vertical; min-height: 130px; }

/* Attach artwork. A bare file input is a grey "Choose file / No file chosen"
   that reads as browser furniture rather than part of the form, and gets
   missed -- so it gets the same border as the other fields and a button that
   says what it does. */
.contact-form input[type="file"],
#artwork-file {
  padding: 10px 12px;
  cursor: pointer;
  border-style: dashed;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.contact-form input[type="file"]:hover,
#artwork-file:hover { border-color: var(--accent); background: var(--accent-tint); }
.contact-form input[type="file"]::file-selector-button,
#artwork-file::file-selector-button {
  margin-right: var(--space-3);
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.contact-form input[type="file"]::file-selector-button:hover,
#artwork-file::file-selector-button:hover { background: var(--accent-dark); }
.contact-form button { margin-top: var(--space-5); align-self: flex-start; }
.form-hint { font-size: var(--step--2); color: var(--ink-mute); margin: var(--space-3) 0 0; }
.hp-field { position: absolute; left: -9999px; }

/* "these have prices online", above the contact form and, when the message
   names one of them, under it */
.form-shortcut {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.contact-hint {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink);
}
.contact-hint a { font-weight: 700; }
/* empty until there is something to say, but kept in the page as a live region */
.contact-hint:empty { margin: 0; padding: 0; border: 0; }

/* dark info panel */
.contact-info-col {
  background: var(--ink-deep);
  color: #cbd5e1;
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.contact-info-col h2,
.contact-info-col h3 { color: #fff; font-size: var(--step-2); margin-bottom: var(--space-2); }
.contact-info-col h4 {
  color: #fff;
  margin: var(--space-6) 0 var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}
.contact-info-col > p { color: #94a3b8; }
.contact-info-col a:not(.btn) { color: var(--accent-lift); }
.contact-info-col a:not(.btn):hover { color: #fff; }
.contact-info-col .btn-on-dark { margin-top: var(--space-6); width: 100%; }

.info-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.info-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.info-list svg { flex: none; color: var(--accent-lift); margin-top: 3px; }
.info-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2px;
}
.info-value { color: #fff; display: block; }
a.info-value { color: var(--accent-lift); text-decoration: none; }
a.info-value:hover { color: #fff; text-decoration: underline; }
.hours { white-space: pre-line; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--ok-bg);
  color: var(--ok-ink);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-weight: 700;
}
.notice svg { flex: none; margin-top: 3px; }
/* the same shape in the shop's own colour, for news that is not good news:
   a payment cancelled, say */
.notice.is-warn {
  background: var(--accent-tint);
  color: var(--accent-dark);
  border-color: var(--accent-line);
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ink-deep);
  color: #fff;
  /* outlined so it still reads as a separate surface over the dark footer */
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  padding: var(--space-3) var(--space-5);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  font-size: var(--step--1);
  font-weight: 700;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { color: #6ee7a8; flex: none; }
.toast a { color: var(--accent-lift); }

/* ---------- 12. cart ---------- */
.cart-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-3) var(--space-5) var(--space-4);
  margin-bottom: var(--space-7);
  box-shadow: var(--sh-1);
}
.cart-step { margin: var(--space-3) var(--space-3) var(--space-2); }
/* the cart is the widest thing on the site: let it scroll, not the page */
.cart-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cart-table {
  width: 100%;
  border-collapse: collapse;
}
.cart-table th,
.cart-table td {
  text-align: left;
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
/* Only the item description is allowed to wrap. A price broken across two
   lines as "£5." / "00", or a heading as "PRI" / "CE", is never what was
   wanted -- the columns should hold their content and the item cell should
   give up the width. */
.cart-table th:not(:first-child),
.cart-table td:not(:first-child) { white-space: nowrap; width: 1%; }
.cart-table th:first-child,
.cart-table td:first-child { padding-left: 0; width: auto; }
.cart-table th:last-child,
.cart-table td:last-child { padding-right: 0; text-align: right; }
.cart-table tbody tr:last-child td { border-bottom: 0; }
.cart-table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  font-weight: 700;
}
.cart-table tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--line);
  padding-top: var(--space-5);
}
.cart-item-cell { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cart-item-cell > div { min-width: 0; }

/* custom sticker lines carry a proof thumbnail and a spec summary */
.cart-item-cell img.cart-sticker-thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.cart-item-spec { display: block; font-size: var(--step--2); color: var(--ink-mute); line-height: 1.45; }
.cart-item-cell img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
/* The customer's own card, whole: a card is wider than it is tall, and
   cropping it square would cut their name off. */
.cart-item-cell img.cart-card-thumb {
  width: 84px;
  height: auto;
  aspect-ratio: 92 / 60;
  object-fit: contain;
  flex: none;
  border-radius: 2px;
  background: #fff;
}
.cart-item-cell a { color: var(--ink); font-weight: 700; text-decoration: none; }
.cart-item-cell a:hover { color: var(--accent); }
.cart-qty {
  width: 64px;
  padding: 9px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  text-align: center;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
}
.cart-qty:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line); }
.cart-total-label { text-align: right; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step--1); }
#cart-total { font-weight: 700; color: var(--accent); font-size: var(--step-2); white-space: nowrap; }
.cart-remove {
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: var(--step--1);
  white-space: nowrap;
  padding: var(--space-2);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.cart-remove:hover { color: var(--danger); background: #fdf0ef; }

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--bg-paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.empty-state svg { color: var(--line-strong); margin: 0 auto var(--space-4); }
.empty-state p { color: var(--ink-mute); margin-bottom: var(--space-5); }

.plain-list { padding-left: var(--space-5); }
.plain-list li { margin-bottom: var(--space-2); }

.prose h2 { font-size: var(--step-2); margin-top: var(--space-7); }
.prose p, .prose li { color: var(--ink-soft); }

/* ---------- 13. footer ---------- */
.site-footer {
  background: var(--ink-deep);
  color: #94a3b8;
  padding: var(--space-9) 0 0;
  font-size: 0.92rem;
  margin-top: var(--space-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}
.footer-brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 var(--space-2);
}
.footer-brand-place {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin: 0 0 var(--space-4);
}
.footer-tagline { color: #94a3b8; max-width: 34ch; margin: 0 0 var(--space-5); }
.footer-col h2 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--space-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.footer-col a:not(.btn) { color: #cbd5e1; text-decoration: none; transition: color var(--t-fast); }
.footer-col a:not(.btn):hover { color: var(--accent-lift); }
.footer-col ul a { display: inline-block; padding: var(--space-1) 0; }
.footer-col p { margin: 0 0 var(--space-3); }
.footer-col .hours { color: #cbd5e1; }
.footer-social { margin: var(--space-4) 0 0; }
.footer-social a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: var(--space-5) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.8rem;
}
.footer-bottom p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.footer-links a:hover { color: #fff; }

/* ---------- 14. motion ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
.js .reveal-stagger.is-visible > *:nth-child(n+7) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* Moving between pages: a short crossfade instead of a blank flash, with the
   header and the message button held still. Browsers without cross-document
   view transitions just load the page as before. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.chat { view-transition-name: chat; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Windows High Contrast and other forced-colour modes throw away background
   colours and repaint every border in one system colour, so a "selected" state
   made of an orange edge and a tint disappears. Give it back as an outline,
   which those modes do keep. */
@media (forced-colors: active) {
  .tier-pill:has(input:checked),
  .chip-active,
  .site-nav a[aria-current="page"],
  .search-suggestions li.is-active a {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
  /* .btn already carries a transparent border, which these modes paint in. */
  .chat-button, .cart-count { border: 1px solid ButtonText; }
  .hours-dot { forced-color-adjust: none; }
}

/* ---------- 15. responsive ---------- */
/* The header tops out at 1280px, and seven nav items plus the brand plus
   the cart already fill most of it, so there is never room for a permanently
   open search box. Above the mobile breakpoint the search is a round icon button
   until it is used, and then it opens over the nav. */
@media (min-width: 641px) {
  .header-search { flex: 0 0 40px; }
  .header-search input {
    padding-right: var(--space-2);
    border-color: transparent;
    background: transparent;
    cursor: pointer;
  }
  .header-search input::placeholder { color: transparent; }
  .header-search:hover input { background: var(--bg-alt); }
  /* Open over the nav rather than pushing it onto a second line. */
  .header-search:focus-within input {
    position: absolute;
    right: 0;
    top: 50%;
    width: 300px;
    transform: translateY(-50%);
    z-index: 65;
    background: var(--bg);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-line), var(--sh-2);
    cursor: text;
  }
  .header-search:focus-within input::placeholder { color: var(--ink-mute); }
  /* Same width as the open input, and aligned with it, so the two read as one
     control instead of a panel that has slipped out from under the box. */
  .search-suggestions { left: auto; right: 0; width: 300px; }
}

/* the last band where the full nav still fits: trim it rather than wrap it */
@media (max-width: 1240px) {
  .site-nav a,
  .site-nav .has-dropdown > button { padding: 22px 8px; font-size: 0.68rem; letter-spacing: 0.07em; }
  .site-nav > ul > li > a::after,
  .site-nav .has-dropdown > button::after { left: 8px; right: 8px; }
}

@media (max-width: 960px) {
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid, .product-detail { grid-template-columns: 1fr; }
  .product-detail { gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* Below this the seven nav items cannot fit beside the brand, the search and
   the cart without crowding them, so the whole nav becomes the menu button.
   (Trimmed, the row needs about 1060px of the 1072 left at 1120.) The header
   itself stays one row: only the search moves, and only on a phone.
   main.js closes the menu when the window grows past this; keep the two in step. */
@media (max-width: 1120px) {
  .nav-toggle { display: flex; order: 3; }
  /* brand left, then cart and the menu button grouped at the right edge */
  .header-inner { justify-content: flex-start; gap: var(--space-2); flex-wrap: nowrap; }
  .brand-mark { margin-right: auto; }
  .header-search { order: 1; }
  .header-icons { order: 2; }
  .site-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-3);
    max-height: calc(100dvh - var(--header-stack, 110px));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav > ul { flex-direction: column; gap: 0; padding: var(--space-2) 0 var(--space-4); align-items: stretch; }
  .site-nav > ul > li { border-bottom: 1px solid var(--line); }
  .site-nav > ul > li:last-child { border-bottom: 0; }
  .site-nav a,
  .site-nav .has-dropdown > button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    text-align: left;
    padding: 15px var(--space-5);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
  }
  .site-nav > ul > li > a::after,
  .site-nav .has-dropdown > button::after { display: none; }
  .site-nav > ul > li > a.active,
  .site-nav > ul > li > a:hover { background: var(--accent-tint); }
  .dropdown {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-paper);
    min-width: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: var(--space-2) 0;
  }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown a { padding-left: var(--space-6); }
  .hours-tag-detail { display: none; }
}

/* A phone has no room for the brand, the cart, the menu button *and* a search
   box on one line, so here -- and only here -- the search takes a row of its
   own. Anchors and the nav panel need to know the header grew: --header-stack. */
@media (max-width: 640px) {
  :root { --header-stack: 158px; }
  .header-inner { flex-wrap: wrap; gap: var(--space-1); }
  .header-search {
    order: 4;
    flex: 1 0 100%;
    margin-bottom: var(--space-2);
  }
  .search-suggestions { min-width: 0; }
}

/* the header CTA is the main conversion path — keep it until the bar is genuinely tight */
@media (max-width: 520px) {
  .header-cta { display: none; }
  /* ...and once it has gone, the menu carries it instead */
  .site-nav .nav-quote { display: block; }
  .site-nav .nav-quote a { color: var(--accent); }
}

@media (max-width: 700px) {
  :root { --space-9: 64px; --space-8: 48px; }
  .about-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* two up on phones: a single column of four makes the strip needlessly tall */
  .hero-strip { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .hero-strip-item { justify-content: flex-start; gap: var(--space-2); font-size: var(--step--2); line-height: 1.35; }
  .hero { padding-top: var(--space-7); }
  .featured { padding-top: var(--space-5); }
  .hero-actions .btn { flex: 1 1 100%; }
  .contact-card, .contact-info-col { padding: var(--space-5); }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
  .lightbox { padding: var(--space-8) var(--space-3) var(--space-6); }
  .lightbox-prev { left: var(--space-2); }
  .lightbox-next { right: var(--space-2); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* The cart lives in the narrow container (780px), so five columns run out of
   room well before a phone: at that point each line becomes its own card
   rather than a table squeezed until the headings break mid-word. */
@media (max-width: 720px) {
  .cart-panel { padding: var(--space-2) var(--space-4) var(--space-4); }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tbody tr {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
  }
  .cart-table tbody td { border-bottom: 0; padding: var(--space-2) var(--space-1); }
  /* thead is hidden here, so each cell says what it is */
  .cart-table tbody td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--ink-mute);
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .cart-table tbody td:first-child::before,
  .cart-table tbody td:not([data-label])::before { content: none; }
  .cart-table-wrap { overflow-x: visible; }
  .cart-table tfoot { display: block; }
  .cart-table tfoot tr { display: flex; justify-content: space-between; align-items: center; }
  .cart-table tfoot td { border-top: 0; padding: var(--space-3) var(--space-1); }
  .cart-table tfoot td:empty { display: none; }
  .cart-table th:not(:first-child),
  .cart-table td:not(:first-child) { width: auto; }
  .cart-table td:last-child { text-align: left; }
  .cart-total-label { text-align: left; }
}

@media (max-width: 560px) {
  .top-bar-inner { justify-content: center; }
  .top-bar-tag { display: none; }
  /* the bar centres at this width, so centre the panel under it too */
  .hours-week { right: auto; left: 50%; margin-left: -122px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
  .colour-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-4); }
  .category-chips { gap: var(--space-2); }
}

/* ---------- sticker builder promo (home) ---------- */
.sticker-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.sticker-cta-text p { margin: 0 0 var(--space-5); max-width: 56ch; }
.sticker-cta-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.sticker-cta-points li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-soft);
}
.sticker-cta-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 800px) {
  .sticker-cta { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
}

/* ---------- 16. listings, prices and product pictures ---------- */

/* prices: "from", "was" and "guide" all read smaller than the figure itself */
.price-was {
  margin-left: var(--space-2);
  font-size: 0.72em;
  font-weight: 400;
  color: var(--ink-mute);
  white-space: nowrap;
}
.price-was s { text-decoration-thickness: 1.5px; }
.price-guide {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  vertical-align: middle;
}
.product-detail-info .price.big:has(+ .price-guide-note) { margin-bottom: var(--space-2); }
.price-guide-note { margin: 0 0 var(--space-5); font-size: var(--step--1); color: var(--ink-soft); }

/* home: categories first, then the few the shop has picked */
/* eight tiles: four across, or two, so neither row is left short */
.home-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--space-8); }
@media (max-width: 960px) {
  .home-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the count and the sort, above a listing */
.listing-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.listing-count { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.listing-sort, .category-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.listing-sort label, .category-switch label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.listing-sort select, .category-switch select {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
}
.listing-sort select:focus, .category-switch select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-line);
}
/* thirty chips wrap into a wall taller than a phone screen; a select does not */
.category-switch { display: none; margin-bottom: var(--space-5); }
.category-switch select { flex: 1 1 auto; min-width: 0; }

/* pages of products */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.pager-pages { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.pager a, .pager-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--bg);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-gap { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1); color: var(--ink-mute); }

/* product pictures: the main one opens full size, the strip swaps it */
.product-main-picture { cursor: zoom-in; }
.product-zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: rgba(17, 26, 36, .72);
  color: #fff;
  transition: transform var(--t-fast);
}
.product-main-picture:hover .product-zoom,
.product-main-picture:focus-visible .product-zoom { transform: scale(1.1); }
.product-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.product-thumb-link {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
}
.product-thumb-link img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb-link:hover { border-color: var(--accent-line); }
/* the one showing is outlined as well as coloured, so it never rests on colour alone */
.product-thumb-link[aria-current="true"] { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }

/* after adding: the way to the cart stays on the page */
.added-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-sm);
  background: var(--ok-bg);
  color: var(--ok-ink);
  font-size: var(--step--1);
  font-weight: 700;
}
.added-note svg { flex: none; }
.added-note a { color: var(--ok-ink); }

/* the toast's link */
.toast-action { font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
  .category-chips { display: none; }
  .category-switch { display: flex; }
  .listing-bar { align-items: stretch; }
  .listing-sort { flex: 1 1 100%; }
  .listing-sort select { flex: 1 1 auto; min-width: 0; }
}

@media (forced-colors: active) {
  .pager-current { outline: 2px solid CanvasText; }
  .product-thumb-link[aria-current="true"] { outline-color: Highlight; }
}

/* ---------- staging banner ---------- */
/* Only a staging copy renders it (views/partials/env-banner.ejs). Loud on
   purpose: the two copies look identical otherwise. */
.env-banner {
  background: #fff4d6;
  color: #3d2c00;
  border-bottom: 2px solid #c99a1e;
  padding: 6px 16px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
/* Two promos in one section: the sticker builder, then the card designer. */
.sticker-cta + .sticker-cta { margin-top: var(--space-6); }