/* ==========================================================================
   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
   ========================================================================== */

/* ---------- 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; }
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);
}

.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; }

.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;
}
.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;
}
.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); }

.site-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
/* 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 > 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-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;
}
.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; }
.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;
}
.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); }
.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); }

.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); }
  .chat-button-label { display: none; }
  .chat-button { 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;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.about-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.about-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about-card-body { 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); }
.about-card p { color: var(--ink-mute); font-size: 0.94rem; margin: 0; }

/* 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);
}
.product-detail-image {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.product-detail-image 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; }

/* dark info panel */
.contact-info-col {
  background: var(--ink-deep);
  color: #cbd5e1;
  border-radius: var(--r-lg);
  padding: var(--space-6);
}
.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; }

/* 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);
}
.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-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; }
}

/* ---------- 15. responsive ---------- */
/* The container tops out at 1140px, and seven nav items plus the brand plus
   the cart already fill 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: 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 wrapping, so the whole nav becomes the menu button. The
   header itself stays one row: only the search moves, and only on a phone. */
@media (max-width: 1080px) {
  .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;
    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; }
}

@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); }
}