/* =============================================================
   Inter, self-hosted
   Confirmed as the typeface Workwear Express use (400/500/600/700).
   Served from our own origin rather than Google's CDN: one less
   connection to open, no third-party request, and nothing to explain
   in the privacy policy.
   One variable file per subset covers every weight from 400 to 900.
   ============================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.1ad231aa.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.260c81a4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   Pash London site styles
   Tokens first, then layout primitives, then components.
   ============================================================= */

/* Component display rules must not expose panels marked hidden. */
[hidden] { display: none !important; }

:root {
  /* Brand palette sampled from the Pash London logo (CMYK process colours). */
  --brand: #FF008E;          /* magenta, primary action colour */
  --brand-dark: #D60077;
  --brand-tint: #fff0f8;
  /* #FF008E is only 3.7:1 on white, below AA. Use --brand-ink for text and
     small UI, and keep the bright magenta for fills and large graphic accents. */
  --brand-ink: #C1006B;
  --cyan: #00B0F6;
  --yellow: #FFF400;
  --ink: #2B2A29;            /* the logo's black */
  --ink-2: #33322F;
  --ink-3: #4A4845;
  --muted: #646d7a;
  --line: #e3e6ea;
  --line-2: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --surface-3: #eef0f3;
  --hivis: #e8f24a;
  --ok: #157f54;

  --wrap: 1280px;
  --gap: 24px;
  /* One size for a panel, card or form-step heading. It was 18, 19, 20
     and 21px in four places doing the same job. */
  --h-panel: 1.25rem;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(17, 20, 24, .06), 0 2px 8px rgba(17, 20, 24, .05);
  --shadow-md: 0 8px 28px rgba(17, 20, 24, .10);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

.wrap {
  --page-gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  width: min(calc(100% - var(--page-gutter) - var(--page-gutter)), var(--wrap));
  margin-inline: auto;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 2px solid transparent; border-radius: var(--radius);
  font-weight: 700; font-size: .95rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

.enquiry__record { margin-top: 22px; padding: 24px; border: 1px solid var(--line, #e3e5e8); border-radius: 16px; background: #fafbfc; }
.enquiry__record-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 1px solid #e3e5e8; padding-bottom: 16px; }
.enquiry__record-head h3, .enquiry__record h4 { margin: 0 0 6px; }
.enquiry__record-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 20px; }
.enquiry__record-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.enquiry__record-facts dt { color: #697386; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.enquiry__record-facts dd { margin: 3px 0 0; font-weight: 700; }
.enquiry__activity { padding: 10px 0; border-bottom: 1px solid #e3e5e8; }
.enquiry__activity time { color: #697386; margin-left: 8px; font-size: .85rem; }
.enquiry__activity p { margin: 5px 0 0; }
.enquiry__actions { display: flex; justify-content: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.enquiry__record-manage { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.enquiry__record-order { margin: 18px 0 0; padding: 11px 14px; border-radius: var(--radius); background: #eaf6f0; color: #11553a; }
.enquiry__record-next { margin: 18px 0 10px; padding: 12px 14px; border-left: 3px solid var(--brand); border-radius: 6px; background: var(--brand-tint); color: var(--ink); }
.enquiry__record-next strong { display: block; margin-bottom: 2px; color: var(--brand-ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 700px) { .enquiry__record-grid { grid-template-columns: 1fr; } .enquiry__record-head { flex-direction: column; } }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand-dark); color: #fff; }
.btn--primary:hover { background: #A8005C; color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); color: #fff; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--lg { padding: 15px 28px; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- topbar ---------- */

.topbar { background: var(--ink); color: #c9cfd8; font-size: .82rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar__item { margin: 0; display: flex; align-items: center; gap: 8px; }
.topbar strong { color: #fff; }
.stars { color: var(--hivis); letter-spacing: 1px; }
.topbar__list { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.topbar__list a { color: #fff; font-weight: 700; }
@media (max-width: 860px) {
  .topbar__list li:not(:last-child) { display: none; }
}
@media (max-width: 520px) {
  .topbar__item--rating span:last-child { display: none; }
}

/* ---------- masthead ---------- */

.masthead { background: #fff; box-shadow: var(--shadow-sm); }
.masthead__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 28px;
  padding: 14px 0;
}

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo__mark { flex: none; }
.logo__img { width: auto; height: 52px; flex: none; }
.logo--light .logo__img { height: 60px; }
@media (max-width: 860px) { .logo__img { height: 42px; } }

.search { display: flex; max-width: 520px; width: 100%; }
.search input {
  flex: 1; min-width: 0;
  padding: 11px 16px;
  border: 2px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  font: inherit; font-size: .93rem; color: var(--ink); background: var(--surface-2);
}
.search input:focus { outline: none; border-color: var(--ink); background: #fff; }
.search button {
  border: 0; border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--ink); color: #fff; padding: 0 18px; cursor: pointer;
  display: grid; place-items: center;
}
.search button:hover { background: var(--brand); }

.masthead__actions { display: flex; align-items: center; gap: 14px; }
.callout { display: flex; flex-direction: column; line-height: 1.2; color: var(--ink); text-decoration: none; }
.callout:hover { text-decoration: none; color: var(--brand-ink); }
.callout__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.callout__value { font-weight: 800; font-size: 1rem; }

.burger { display: none; width: 44px; height: 40px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; padding: 10px 9px; }
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); }
.burger[aria-expanded="true"] span { background: #fff; }

/* ---------- primary nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.nav__list { display: flex; margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__link {
  display: flex; align-items: center; gap: 6px;
  padding: 13px 14px;
  color: #eef0f3; font-weight: 700; font-size: .92rem; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav__link:hover, .nav__link[aria-current="page"] {
  background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; border-bottom-color: var(--brand);
}
.nav__caret { width: 10px; height: 6px; opacity: .7; }
/* The highlighted end item, echoing Workwear Express's "Clearance" block. */
.nav__item--flag { margin-left: auto; }
.nav__item--flag .nav__link { background: var(--brand); color: #fff; border-bottom-color: var(--brand); }
.nav__item--flag .nav__link:hover { background: var(--brand-dark); border-bottom-color: var(--brand-dark); }

/* Secondary links: in the top bar on desktop, inside the drawer on mobile. */
.topbar__list--nav { gap: 18px; }
.topbar__list--nav a { color: #c9cfd8; font-weight: 600; }
.topbar__list--nav a:hover { color: #fff; }
.topbar__list--nav li:last-child a { color: #fff; font-weight: 700; }
.nav__utility { display: none; }

.nav__menu {
  position: absolute; top: 100%; left: 0; z-index: 90;
  min-width: 340px;
  background: #fff; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu ul { list-style: none; margin: 0; padding: 0; }
.nav__menu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.nav__menu a:hover { background: var(--surface-2); text-decoration: none; }
.nav__menu strong { display: block; font-size: .95rem; }
.nav__menu span { display: block; font-size: .82rem; color: var(--muted); }

@media (max-width: 1080px) {
  .masthead__inner { grid-template-columns: auto 1fr auto; gap: 16px; }
  .callout { display: none; }
}
@media (max-width: 900px) {
  .masthead__inner { grid-template-columns: auto 1fr; row-gap: 12px; }
  .masthead__actions { justify-content: flex-end; }
  .search { grid-column: 1 / -1; order: 3; max-width: none; }
  .burger { display: block; }
  .nav { display: none; position: static; box-shadow: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; padding-bottom: 10px; }
  .nav__item--flag { margin-left: 0; }
  .nav__item--flag .nav__link { background: transparent; border-bottom-color: rgba(255, 255, 255, .08); }
  .nav__utility { display: block; list-style: none; margin: 0; padding: 10px 0 14px; }
  .nav__utility li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav__utility a { display: block; padding: 12px 4px; color: #c9cfd8; font-weight: 600; font-size: .92rem; }
  .nav__link { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: transparent; padding: 0 0 8px 12px;
  }
  .nav__menu a { color: #c9cfd8; padding: 8px 4px; }
  .nav__menu a:hover { background: transparent; color: #fff; }
  .nav__menu strong { font-weight: 600; font-size: .9rem; color: inherit; }
  .nav__menu span { display: none; }
}

/* ---------- hero ---------- */

/* The homepage follows the customer's decision, not the order in which
   sections were added: understand Pash, choose a garment, see the finish,
   understand the process, then look at promotions and proof. Keeping the
   order here also lets campaign content remain editable without putting it
   ahead of the explanation a first-time visitor needs. */
.home-flow { display: flex; flex-direction: column; }
.home-flow__hero { order: 1; }
.home-flow__proof { order: 2; }
.home-flow__offer { order: 3; }
.home-flow > .usps { order: 4; }
.home-flow__categories { order: 5; }
.home-flow__methods { order: 6; }
.home-flow__process { order: 7; }
.home-flow__logo-setup { order: 8; }
.home-flow__industries { order: 9; }
.home-flow__bestsellers { order: 10; }
.home-flow__brands { order: 11; }
.home-flow__campaigns { order: 12; }
.home-flow__offers { order: 13; }
.home-flow__reviews { order: 14; }

.hero {
  background-color: #15191f;
  /* The build picks which photograph and sets --hero-webp/--hero-png on the
     section. The fallback is the original, so a page that somehow renders
     without them still has a backdrop. */
  background-image: var(--hero-png, url('/assets/img/hero-workshop.png'));
  background-image: image-set(
    var(--hero-webp, url('/assets/img/hero-workshop.webp')) type('image/webp'),
    var(--hero-png, url('/assets/img/hero-workshop.png')) type('image/png')
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* A flat 20% wash was not enough to read white text over a photograph of a
     clothes rail: the lede and the tick list sat on whatever happened to be
     behind them. This darkens the left, where the copy is, and lets the
     right stay bright where the panel and the garments are. */
  background:
    linear-gradient(100deg, rgba(8, 11, 15, .88) 0%, rgba(8, 11, 15, .72) 38%, rgba(8, 11, 15, .28) 66%, rgba(8, 11, 15, .34) 100%),
    linear-gradient(to top, rgba(8, 11, 15, .45), transparent 42%);
}
.hero::after {
  content: ""; position: absolute; inset: auto -10% -45% 55%;
  height: 420px; background: radial-gradient(closest-side, rgba(216, 30, 63, .45), transparent);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  padding: 64px 0 72px;
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  padding: 6px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 20px;
}
.hero__eyebrow b { color: var(--hivis); }
.hero__lede { font-size: 1.12rem; color: #e6eaf0; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 24px; }
.hero__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: .92rem; color: #e6eaf0; }
.hero__points li { display: flex; align-items: center; gap: 7px; }
.hero__points li::before { content: "✓"; color: var(--hivis); font-weight: 900; }

.hero__panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  padding: 22px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__panel h2 { color: #fff; font-size: var(--h-panel); }
.hero__panel p { color: #b7bfca; font-size: .9rem; }
.hero__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero__tile {
  position: relative; display: flex; align-items: end; min-height: 104px; overflow: hidden;
  background: #1a1b1d; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius);
  padding: 15px; color: #fff; text-decoration: none; font-weight: 700; font-size: .96rem;
  isolation: isolate; transition: border-color .2s ease, transform .2s ease;
}
.hero__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 15, 18, .05) 20%, rgba(13, 15, 18, .86) 100%); }
.hero__tile:hover { border-color: var(--hivis); color: #fff; text-decoration: none; transform: translateY(-2px); }
.hero__tile span { position: relative; z-index: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.hero__tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; border-radius: 0; object-fit: cover; opacity: .74; filter: saturate(.82) brightness(.72); }

/* Homepage campaign layer */
.campaign-strip { background: var(--brand); color: #fff; }
.campaign-strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
.campaign-strip__inner > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
.campaign-strip .eyebrow { color: #fff; margin: 0; }
.campaign-strip strong { font-size: 1.05rem; }
.campaign-strip span:last-child { color: #ffd7ed; font-size: .9rem; }
.campaign-countdown { color: #fff !important; font-variant-numeric: tabular-nums; font-weight: 800; }
.quote-promotion-note { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--brand); border-radius: var(--radius); background: #fff1f8; color: var(--brand-ink); font-weight: 700; }
.btn--light { background: #fff; color: var(--brand-ink); border-color: #fff; }
.btn--light:hover { background: var(--hivis); color: var(--ink); border-color: var(--hivis); }
.section--tight { padding-top: 52px; padding-bottom: 52px; }
.carousel-controls { display: flex; gap: 8px; align-self: end; }
.carousel-control { min-width: 42px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: .78rem; font-weight: 700; cursor: pointer; }
.carousel-control:hover, .carousel-control:focus-visible { background: var(--ink); color: #fff; }
.campaign-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(82%, 1fr); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
.campaign-carousel::-webkit-scrollbar { display: none; }
.campaign-card { min-height: 330px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(240px, 1.1fr); gap: 22px; align-items: end; padding: 32px; border-radius: var(--radius-lg); overflow: hidden; color: #fff; scroll-snap-align: start; }
.campaign-card > div { position: relative; z-index: 1; align-self: center; max-width: 34ch; }
.campaign-card h3 { margin: 10px 0 8px; color: #fff; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.campaign-card p { color: rgba(255,255,255,.8); }
.campaign-card img { width: 100%; height: 250px; object-fit: cover; border-radius: var(--radius); opacity: .9; mix-blend-mode: screen; }
.campaign-card--dark { background: #171b20; }
.campaign-card--pink { background: var(--brand); }
.campaign-card--green { background: #145d45; }
.campaign-card__tag { display: inline-block; color: var(--hivis); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.offer-card__label { display: inline-block; color: #5b4f00; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.proof-strip { overflow: hidden; border-bottom: 1px solid var(--line); background: #f5f6f7; }
.proof-strip__inner { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.8fr); gap: 28px; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.proof-strip__heading h2 { margin: 4px 0 5px; font-size: clamp(1.15rem, 1rem + .65vw, 1.65rem); }
.proof-strip__heading p { margin: 0; max-width: 34ch; color: var(--muted); font-size: .86rem; }
.proof-strip__viewport { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.proof-strip__track { display: flex; width: max-content; align-items: center; gap: 14px; animation: proof-roll 28s linear infinite; }
.proof-logo { display: grid; place-items: center; min-width: 150px; height: 72px; padding: 12px 22px; border: 1px solid #dfe2e6; border-radius: var(--radius); background: #fff; color: var(--ink); font-size: 1.15rem; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; box-shadow: 0 5px 14px rgba(43,42,41,.06); }
.proof-logo img { display: block; width: auto; max-width: 124px; height: 34px; max-height: 42px; object-fit: contain; }
.proof-logo:nth-child(2), .proof-logo:nth-child(8) { color: #e52436; }
.proof-logo:nth-child(3), .proof-logo:nth-child(9) { letter-spacing: .08em; }
.proof-logo:nth-child(4), .proof-logo:nth-child(10) { color: #24704d; }
.proof-logo:nth-child(5), .proof-logo:nth-child(11) { color: #5b2d91; }
.proof-logo:nth-child(6), .proof-logo:nth-child(12) { color: #0675ce; }
.proof-strip__controls { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: .76rem; }
.proof-strip__controls .carousel-control { min-height: 34px; padding: 6px 12px; }
@keyframes proof-roll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .proof-strip__track { animation: none; } }
@media (max-width: 760px) {
  .proof-strip__inner { grid-template-columns: 1fr; gap: 16px; }
  .proof-strip__controls { grid-column: auto; }
  .proof-logo { min-width: 132px; height: 62px; font-size: 1rem; }
}
.process-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.process-tab { display: grid; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: left; color: var(--ink); font-weight: 800; cursor: pointer; }
.process-tab span { color: var(--brand-ink); font-size: .76rem; letter-spacing: .08em; }
.process-tab.is-active, .process-tab:hover { border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.process-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 26px; align-items: center; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.process-panel[hidden] { display: none !important; }
.process-panel h3 { margin-top: 0; }
.process-panel img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius); }
.offer-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offer-card { min-height: 220px; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.offer-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-md); }
.offer-card h3 { margin: 12px 0 6px; }
.offer-card p { color: var(--muted); }
.offer-card .tile__more { margin-top: auto; }
@media (max-width: 760px) {
  .campaign-strip__inner { align-items: flex-start; flex-direction: column; gap: 14px; }
  .campaign-carousel { grid-auto-columns: 92%; }
  .campaign-card { grid-template-columns: 1fr; min-height: 470px; padding: 24px; }
  .campaign-card img { height: 190px; }
  .process-tabs { display: flex; overflow-x: auto; }
  .process-tab { min-width: 155px; }
  .process-panel { grid-template-columns: 1fr; }
  .process-panel img { height: 210px; }
  .offer-cards { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .hero { background-position: 70% center; }
  .hero::before { background: rgba(8, 11, 15, .48); }
  .hero__inner { grid-template-columns: 1fr; gap: 32px; padding: 44px 0 52px; }
}

/* ---------- usp bar ---------- */

.usps { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.usps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: 22px 0; }
.usp { display: flex; gap: 12px; align-items: flex-start; }
.usp__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 50%; color: var(--brand-ink); }
.usp h3 { font-size: .95rem; margin: 0 0 2px; }
.usp p { margin: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 900px) { .usps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .usps__grid { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- generic section ---------- */

.section { padding: 64px 0; }
.section--tight { padding: 44px 0; }
.section--alt { background: var(--surface-2); }
.section--ink { background: var(--ink); color: #c9cfd8; }
.section--ink h2, .section--ink h3 { color: #fff; }

.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section__head p { margin: 0; color: var(--muted); max-width: 60ch; }
.section__head h2 { margin-bottom: .25em; }
.section--ink .section__head p { color: #97a0ad; }
.section__link { font-weight: 700; white-space: nowrap; }
@media (max-width: 720px) { .section__head { flex-direction: column; align-items: flex-start; } }

.eyebrow {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px;
}

/* ---------- category tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tile:hover { border-color: var(--brand-ink); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(43,42,41,.13); text-decoration: none; }
.tile__media { background: var(--surface-3); aspect-ratio: 1.42 / 1; display: grid; place-items: center; padding: 8px; }
.tile__media img { width: 82%; height: auto; transition: transform .25s ease; }
.tile:hover .tile__media img { transform: scale(1.04); }
/* Tiles stretch to the row height, so the body has to be a column with the
   call to action pushed down. Otherwise a one-line description leaves its
   "View range" floating well above its neighbours'. */
.tile { display: flex; flex-direction: column; }
.tile__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.tile__body h3 { margin: 0 0 6px; font-size: 1.08rem; letter-spacing: -.01em; }
.tile__body p { margin: 0; font-size: .85rem; color: var(--muted); }
.tile__more { display: inline-block; margin-top: auto; padding-top: 10px; font-size: .85rem; font-weight: 700; color: var(--brand-ink); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ---------- services ---------- */

.section--methods .section__head { align-items: end; }
.section--methods .section__head h2 { margin-bottom: .08em; }
.methods-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.method-row {
  --method-accent: var(--brand-ink);
  --method-wash: var(--brand-tint);
  position: relative; display: block; min-height: 238px; padding: 22px 22px 20px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--method-accent) 24%, var(--line));
  border-left: 3px solid var(--method-accent); border-radius: 14px;
  background: var(--ink-2); color: #fff; text-decoration: none;
  box-shadow: 0 1px 0 rgba(17,20,24,.03);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
  grid-column: span 2;
}
.method-row:nth-child(2) { --method-accent: #007fb4; --method-wash: #eefaff; }
.method-row:nth-child(3) { --method-accent: #8f8500; --method-wash: #fffde6; }
.method-row:nth-child(4) { --method-accent: #6c4f9e; --method-wash: #f7f1ff; }
.method-row:nth-child(5) { --method-accent: #157f54; --method-wash: #eefaf4; }
.method-row:nth-child(4), .method-row:nth-child(5) { grid-column: span 3; }
.method-row:hover,
.method-row:focus-visible {
  border-color: var(--method-accent); background: var(--ink-2); text-decoration: none;
  transform: translateY(-3px); box-shadow: 0 10px 22px rgba(43,42,41,.12);
}
.method-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--method-accent) 42%, transparent); outline-offset: 3px; }
.method-row::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18, 19, 23, .18) 0%, rgba(18, 19, 23, .22) 30%, rgba(18, 19, 23, .9) 100%); pointer-events: none; }
.method-row__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; background: var(--surface-2); }
.method-row__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.method-row:hover .method-row__media img, .method-row:focus-visible .method-row__media img { transform: scale(1.06); filter: saturate(1.15); }
.method-row__number { color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.method-row__head { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.method-row__head strong { color: #fff; font-size: 1.12rem; letter-spacing: -.02em; }
.method-row__meta { position: absolute; z-index: 2; right: 22px; bottom: 20px; left: 22px; display: grid; gap: 4px; }
.method-row__meta small { color: color-mix(in srgb, var(--method-accent) 75%, #fff); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.method-row__meta span { color: #fff; font-size: .9rem; line-height: 1.35; }
.method-row__meta em { color: rgba(255, 255, 255, .82); font-size: .76rem; line-height: 1.35; font-style: normal; }
.method-row__arrow { position: absolute; z-index: 2; top: 20px; right: 22px; color: #fff; font-size: 1.35rem; font-weight: 400; text-align: right; transition: transform .2s ease; }
.method-row:hover .method-row__arrow, .method-row:focus-visible .method-row__arrow { transform: translate(2px, -2px); }
.section--methods + .section { border-top: 1px solid var(--line); }
@media (max-width: 1000px) {
  .methods-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-row, .method-row:nth-child(4), .method-row:nth-child(5) { grid-column: auto; }
}
@media (max-width: 720px) {
  .methods-list { grid-template-columns: 1fr; gap: 10px; }
  .method-row { min-height: 210px; padding: 18px; }
  .method-row__media { width: 100%; height: 100%; }
  .method-row__meta { right: 18px; bottom: 18px; left: 18px; }
  .method-row__arrow { top: 17px; right: 18px; }
  .method-row__meta span { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .method-row, .method-row__media img, .method-row__arrow { transition: none; }
}

.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: var(--gap); }
.service {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px 28px; display: flex; flex-direction: column;
}
.service__icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius); background: var(--brand-tint); color: var(--brand-ink); margin-bottom: 16px; }
.service h3 { font-size: 1.08rem; }
.service p { font-size: .92rem; color: var(--ink-3); }
.service ul { margin: 0 0 20px; padding: 0 0 0 18px; font-size: .88rem; color: var(--muted); }
.service ul li { margin-bottom: 4px; }
.service .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services { grid-template-columns: 1fr; } }

/* ---------- product grid ---------- */

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.product-cell { display: contents; }
.product-cell[hidden] { display: none; }
.product-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.product-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-md); }
.product-card__media { position: relative; display: block; background: var(--surface-3); }
.product-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-card__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--brand-dark); color: #fff; font-size: .7rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}
.product-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.product-card__brand { margin: 0 0 3px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.product-card__title { margin: 0 0 6px; font-size: 1rem; }
.product-card__title a { color: var(--ink); }
.product-card__title a:hover { color: var(--brand-ink); }
.product-card__meta { margin: 0 0 10px; font-size: .82rem; color: var(--muted); }
.product-card__price { margin: 0 0 12px; font-size: 1.22rem; font-weight: 800; color: var(--ink); }
/* The muted treatment is for the "Get a quote" caption. An actual price is
   the thing people are comparing, so it keeps the parent's size and weight. */
.product-card__price span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.product-card__price .product-card__amount { font-size: inherit; font-weight: inherit; color: inherit; }
.product-card__price small { font-size: .7rem; font-weight: 600; color: var(--muted); }
.product-card__decoration { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.product-card__decoration span {
  font-size: .7rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
@media (max-width: 1000px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ---------- filter chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  border: 2px solid var(--line); background: #fff; color: var(--ink-3);
  padding: 8px 16px; border-radius: 999px; font: inherit; font-size: .86rem; font-weight: 700;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--ink-3); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalogue__empty { text-align: center; padding: 40px 0; color: var(--muted); }

/* ---------- steps ---------- */

.process-photo { margin: 0 0 40px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-3); }
.process-photo img { display: block; width: 100%; aspect-ratio: 16 / 6; object-fit: cover; object-position: center 58%; }
.service-photo { margin-bottom: 48px; }
.about-photo { margin-bottom: 32px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: step; }
.step { position: relative; padding-top: 12px; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 50%; background: var(--brand-dark); color: #fff; font-weight: 900; font-size: 1.05rem;
}
.step h3 { font-size: 1.08rem; }
.step p { font-size: .9rem; color: var(--muted); margin: 0; }
.section--ink .step p { color: #97a0ad; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ---------- split feature ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--flip .split__media { order: -1; }
.split__media { background: var(--surface-3); border-radius: var(--radius-lg); padding: 28px; }
.split__media .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.split__media--feature { padding: 0; overflow: hidden; }
.split__media--feature picture { display: block; height: 100%; }
.industry-feature-photo { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; border-radius: var(--radius-lg); }
.industry-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; }
.split ul.ticks { list-style: none; margin: 0 0 24px; padding: 0; }
.split ul.ticks li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.split ul.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink);
  display: grid; place-items: center; font-size: .75rem; font-weight: 900;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--flip .split__media { order: 0; }
  .industry-feature-photo { min-height: 360px; aspect-ratio: 4 / 3; }
}

/* ---------- industries ---------- */

.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.industry {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; display: flex; flex-direction: column; gap: 6px;
}
.industry-photo { margin: 0 0 12px; aspect-ratio: 16 / 8.5; border-radius: 0; transition: transform .35s ease, filter .35s ease; }
.industry:hover .industry-photo { transform: scale(1.03); filter: saturate(1.08); }
.industry h3, .industry p, .industry ul { margin-left: 24px; margin-right: 24px; }
.industry h3 { margin-top: 0; font-size: 1.08rem; }
.industry p { margin-top: 0; font-size: .9rem; color: var(--muted); }
.industry ul { margin-top: 6px; margin-bottom: 24px; padding-left: 18px; font-size: .86rem; color: var(--ink-3); }
@media (max-width: 900px) { .industries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industries { grid-template-columns: 1fr; } }

/* ---------- brands strip ---------- */

.brands {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  background: #fff; text-align: center;
}
.brand-mark {
  min-width: 0; overflow-wrap: anywhere; min-height: 116px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 16px 10px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: .74rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.brand-mark img { width: 36px; height: 36px; object-fit: contain; filter: grayscale(1); opacity: .78; }
@media (max-width: 760px) {
  .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-mark { min-height: 104px; }
}

/* ---------- reviews ---------- */

.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.review .stars { color: #f2a03d; font-size: 1.05rem; }
.review blockquote { margin: 10px 0 16px; font-size: 1rem; color: var(--ink-2); }
.review cite { font-style: normal; font-weight: 700; font-size: .9rem; color: var(--ink); }
.review cite span { display: block; font-weight: 500; font-size: .82rem; color: var(--muted); }
@media (max-width: 760px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; }
.stat strong { display: block; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 900; color: #fff; line-height: 1; }
.stat span { font-size: .88rem; color: #97a0ad; }
@media (max-width: 680px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ---------- page header / breadcrumbs ---------- */

.page-head { background: var(--ink); color: #c9cfd8; padding: 44px 0; }
.page-head h1 { color: #fff; max-width: 20ch; }
.page-head p { max-width: 62ch; font-size: 1.05rem; margin-bottom: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; font-size: .82rem; color: #8b94a1; }
.crumbs a { color: #c9cfd8; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #5c6572; }

/* ---------- prose ---------- */

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; font-size: .92rem; }
/* A table that cannot shrink below its content scrolls within its own box
   rather than dragging the whole page sideways. */
.prose .table-scroll { overflow-x: auto; margin: 20px 0 28px; -webkit-overflow-scrolling: touch; }
.prose .table-scroll table { margin: 0; min-width: 520px; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose th { background: var(--surface-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

.layout-2col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .layout-2col { grid-template-columns: 1fr; gap: 32px; } }

.sidecard { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 140px; }
.sidecard h3 { font-size: 1.08rem; }
.sidecard p { font-size: .9rem; color: var(--muted); }
.sidecard ul { list-style: none; margin: 0 0 18px; padding: 0; font-size: .9rem; }
.sidecard ul li { padding: 8px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .sidecard { position: static; } }

/* ---------- faq accordion ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-weight: 700; color: var(--ink); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--brand-ink); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 20px; color: var(--ink-3); font-size: .95rem; max-width: 76ch; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- forms ---------- */

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 6px; color: var(--ink); }
.field .hint { font-weight: 500; color: var(--muted); font-size: .82rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem;
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 130px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--brand-ink); }
.field__error { display: none; color: var(--brand-ink); font-size: .82rem; font-weight: 700; margin-top: 5px; }
.field--error .field__error { display: block; }
.form-errors { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #d99; border-radius: var(--radius); background: #fff5f5; color: #7e1717; }
.form-errors ul { margin: 6px 0 0; padding-left: 18px; }
.form-errors a { color: inherit; text-decoration: underline; }
.checkline { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--ink-3); }
.checkline input { width: auto; margin-top: 3px; }
.form__note { font-size: .82rem; color: var(--muted); margin: 14px 0 0; }
.quote-config-summary { display: grid; gap: 4px; margin: 14px 0 24px; padding: 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); background: var(--brand-tint); }
.quote-config-summary strong { font-size: 1rem; }
.quote-config-summary span { color: var(--ink); }
.quote-config-summary small { color: var(--muted); }
.quote-basket-line { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.08); }
.quote-basket-line strong, .quote-basket-line span { grid-column: 1; }
.quote-basket-line span { font-size: .88rem; color: var(--muted); }
.quote-basket-line b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: .9rem; }
.form-success {
  display: none; background: #eaf6f0; border: 1px solid #b9e0cd; color: #11553a;
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px;
}
.form-success.is-visible { display: block; }
.form-success :is(h2, h3) { color: #11553a; margin-bottom: 4px; font-size: 1.08rem; }
.form-success p { margin: 0; font-size: .92rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; gap: 0; } }

.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 18px; }
.contact-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.contact-card p { margin: 0; font-size: .95rem; color: var(--ink-3); }
.contact-card a { font-weight: 700; }

/* ---------- pricing table ---------- */

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.price-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; background: #fff; display: flex; flex-direction: column; }
.price-card--feature { border-color: var(--ink); box-shadow: var(--shadow-md); }
.price-card__tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--brand-ink); }
.price-card strong.amount { display: block; font-size: 2rem; font-weight: 900; color: var(--ink); margin: 8px 0 2px; }
.price-card span.per { font-size: .85rem; color: var(--muted); }
.price-card ul { list-style: none; margin: 18px 0 22px; padding: 0; font-size: .9rem; }
.price-card ul li { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.price-card .btn { margin-top: auto; }
@media (max-width: 860px) { .pricing { grid-template-columns: 1fr; } }

/* ---------- cta band ---------- */

.cta-band { background: var(--brand-dark); color: #fff; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 34px 0; }
.cta-band h2 { color: #fff; margin-bottom: .2em; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 48ch; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn--primary { background: #fff; color: var(--brand-ink); }
.cta-band .btn--primary:hover { background: var(--ink); color: #fff; }
.cta-band__phone { color: #fff; font-weight: 700; padding: 12px 0; white-space: nowrap; }
.cta-band__phone:hover { color: #fff; text-decoration: underline; }
@media (max-width: 860px) { .cta-band__inner { flex-direction: column; align-items: flex-start; padding: 34px 0; } }

/* ---------- footer ---------- */

.footer { background: var(--ink); color: #97a0ad; padding: 32px 0 20px; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)); gap: 44px; }
.footer h3, .footer__group summary { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 7px; }
.footer a { color: #c9cfd8; }
.footer a:hover { color: #fff; }
.footer__blurb { margin: 10px 0 14px; max-width: 32ch; }
.footer__address { font-style: normal; line-height: 1.55; }
.footer__social { margin: 8px 0 0; }
.footer__group { min-width: 0; }
.footer__group summary { cursor: default; list-style: none; }
.footer__group summary::-webkit-details-marker { display: none; }
.footer__group summary::after { display: none; }
.footer__hours { color: #7d8794; font-size: .85rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem;
}
.footer__bottom p { margin: 0; }
.footer__credit {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #7d8794; font-size: .8rem;
}
.footer__credit a { color: #b6bec9; text-decoration: underline; text-underline-offset: 2px; }
.footer__credit a:hover { color: #fff; }
.footer__legal { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 560px) {
  .footer { padding: 26px 0 16px; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; }
  .footer__col--brand { margin-bottom: 4px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .footer__group { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .footer__group summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 13px 0; cursor: pointer; }
  .footer__group summary::after { display: block; content: '+'; color: var(--brand); font-size: 1.1rem; line-height: 1; }
  .footer__group[open] summary::after { content: '−'; }
  .footer__group > ul { padding: 0 0 12px; }
  .footer__group li { margin-bottom: 6px; }
  .footer__bottom { gap: 10px; margin-top: 16px; padding-top: 16px; }
  .footer__legal { flex-wrap: wrap; gap: 6px 14px; }
}

/* =============================================================
   Order configurator (prototype)
   ============================================================= */

.proto-banner { background: #fff8e6; border-bottom: 1px solid #f0d9a0; color: #6b5312; font-size: .88rem; }
.proto-banner .wrap { padding: 12px 16px; }

.configurator { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
@media (max-width: 980px) { .configurator { grid-template-columns: 1fr; gap: 32px; } }

.config__step { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.config__step:last-child { border-bottom: 0; margin-bottom: 0; }
.config__step h2 { display: flex; align-items: center; gap: 12px; font-size: var(--h-panel); margin-bottom: 16px; }
.config__num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: .9rem; font-weight: 800;
}
.config__hint { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.config__note {
  font-size: .86rem; background: var(--brand-tint); border-left: 3px solid var(--brand);
  padding: 10px 14px; border-radius: 0 6px 6px 0; margin-bottom: 16px; color: var(--ink-3);
}
.config__selected { font-size: .9rem; color: var(--muted); margin: 12px 0 0; }
.config__total-qty { font-size: 1rem; margin: 16px 0 0; }
.config__total-qty strong { font-size: 1.3rem; }

.config__chosen { display: flex; gap: 18px; align-items: center; background: var(--surface-2); border-radius: var(--radius-lg); padding: 16px; }
.config__chosen img { border-radius: var(--radius); background: #fff; }
.config__brand { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.config__name { margin: 2px 0 4px; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.config__from { margin: 0; font-size: .88rem; color: var(--muted); }

/* colour swatches */
/* Swatches carry their colour name. A tooltip is no use on a phone, where
   there is no hover, and "Aqua" and "Sky" are not guessable from a dot. */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px 10px; }
.swatch {
  display: grid; gap: 6px; justify-items: center; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: center;
}
.swatch__chip {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--swatch); border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: transform .12s ease, border-color .12s ease;
}
.swatch__name {
  color: var(--muted); font-size: .74rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.swatch:hover .swatch__chip { transform: scale(1.08); }
.swatch.is-active .swatch__chip { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.swatch.is-active .swatch__name { color: var(--ink); font-weight: 700; }
.swatch:focus-visible { outline: none; }
.swatch:focus-visible .swatch__chip { outline: 2px solid var(--ink); outline-offset: 3px; }
.swatch--light .swatch__chip { box-shadow: 0 0 0 1px var(--muted) inset; }

/* size matrix */
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.size-cell { display: flex; flex-direction: column; gap: 4px; }
.size-cell span { font-size: .8rem; font-weight: 700; color: var(--ink-3); text-align: center; }
.size-cell input {
  width: 100%; padding: 9px 6px; text-align: center; font: inherit; font-weight: 700;
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.size-cell input:focus { outline: none; border-color: var(--ink); }

/* logo positions */
/* The position picker: a drawing of the garment with each print area marked.
   A dropdown reading "Nape of neck" assumes the customer knows the trade's
   word for it. A picture does not. */
.position-picker {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  margin-bottom: 20px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface-2);
}
.position-view { flex: 1 1 150px; max-width: 220px; margin: 0; text-align: center; }
.position-view svg { width: 100%; height: auto; max-height: 300px; overflow: visible; }
.position-view figcaption { margin-top: 6px; color: var(--muted); font-size: .84rem; font-weight: 600; }
.position-picker__hint { flex: 1 0 100%; margin: 0; color: var(--muted); font-size: .84rem; }

.garment { fill: #fff; stroke: var(--ink-3); stroke-width: 1.6; stroke-linejoin: round; }
/* The collar band on a front view and the yoke across a back one. Without
   them the two silhouettes differ by a few pixels of neckline and nobody
   can tell which is which — which is exactly how they came to be drawn the
   wrong way round. */
.garment__seam { fill: none; stroke: var(--ink-3); stroke-width: 1.1; stroke-linecap: round; opacity: .7; }

.hotspot { cursor: pointer; }
/* Invisible and padded: the tap target. A left breast badge is 10cm on a
   52cm chest, which is under 30px on a phone — too small to aim at. */
.hotspot__hit { fill: transparent; stroke: none; }
/* Visible and true to size: what will actually be printed. */
.hotspot__area {
  fill: rgba(10, 13, 18, .06); stroke: var(--ink-3); stroke-width: 1;
  stroke-dasharray: 3 2; transition: fill .12s ease, stroke .12s ease;
  pointer-events: none;
}
.hotspot:hover .hotspot__area { fill: rgba(255, 0, 142, .14); stroke: var(--brand-ink); }
.hotspot.is-on .hotspot__area {
  fill: rgba(255, 0, 142, .22); stroke: var(--brand-ink);
  stroke-width: 1.8; stroke-dasharray: none;
}
.hotspot__tick { fill: none; stroke: var(--brand-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible .hotspot__area { stroke: var(--ink); stroke-width: 2.4; stroke-dasharray: none; }

.positions__empty { margin: 0 0 14px; color: var(--muted); }

/* On a phone two garment views side by side leave each about 150px wide,
   which makes a sleeve print area a 17px tap target. Stacked and wider,
   the same diagram is twice the size and the small areas become usable. */
@media (max-width: 700px) {
  .position-picker { gap: 24px; padding: 16px 12px; }
  .position-view { flex: 1 1 100%; max-width: 300px; margin: 0 auto; }
  .position-view svg { max-height: none; }
}
.position-row__name { align-self: center; }
/* The maximum print size, said in centimetres next to the position it
   belongs to. "Left breast" tells a customer where; it does not tell them
   whether their logo will fit. */
.position-row__size { display: block; margin-top: 2px; color: var(--muted); font-size: .8rem; font-weight: 500; }
.position-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; margin-bottom: 14px; }
.position-row .field { margin-bottom: 0; }
.position-remove {
  width: 40px; height: 44px; border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.position-remove:hover { border-color: var(--brand); color: var(--brand); }
.btn--sm { padding: 8px 14px; font-size: .86rem; }
@media (max-width: 560px) { .position-row { grid-template-columns: 1fr auto; } }

/* live basket */
.config__basket { position: sticky; top: 140px; }
@media (max-width: 980px) { .config__basket { position: static; } }
.basket { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.basket h2 { font-size: var(--h-panel); margin-bottom: 16px; }
.basket__item { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.basket__item img { border-radius: 8px; background: var(--surface-3); }
.basket__intro { margin: -6px 0 16px; font-size: .86rem; color: var(--muted); }
.basket__empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: .86rem; }
.basket__lines { display: grid; gap: 10px; margin-bottom: 16px; }
.basket-line { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.basket-line__top { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; }
.basket-line__top img { width: 48px; height: 48px; object-fit: contain; border-radius: 7px; background: #fff; }
.basket-line__top strong, .basket-line__top span { display: block; }
.basket-line__top strong { font-size: .84rem; color: var(--ink); }
.basket-line__top span, .basket-line > p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.basket-line__top b { align-self: start; color: var(--ink); font-size: .85rem; }
.basket-line__actions { display: flex; gap: 8px; margin-top: 10px; }
.basket-line__actions .btn { min-height: 34px; }
.basket__title { margin: 0; font-weight: 800; font-size: .95rem; color: var(--ink); }
.basket__meta { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }

.basket__customisations { padding: 14px 0; border-bottom: 1px solid var(--line); }
.basket__custom-head { margin: 0 0 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.basket__custom-head--empty { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .85rem; margin: 0; }
.basket__custom { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: .85rem; margin-bottom: 8px; }
.basket__custom strong { color: var(--ink); }
.basket__custom span { grid-column: 1; color: var(--muted); font-size: .8rem; }
.basket__custom em { grid-column: 2; grid-row: 1 / 3; font-style: normal; align-self: center; color: var(--ink-3); font-size: .8rem; }

.basket__totals { margin: 16px 0 0; }
.basket__totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .92rem; }
.basket__totals dt { color: var(--muted); margin: 0; }
.basket__totals dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.basket__sub { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px !important; }
.basket__grand { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 12px !important; align-items: baseline; }
.basket__grand dt { color: var(--ink); font-weight: 800; }
.basket__grand dd { font-size: 1.5rem; font-weight: 900; color: var(--ok); }

.basket__unit { margin: 14px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
.basket__break {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--brand-tint); color: var(--ink-2); font-size: .86rem; text-align: center;
}
.basket .btn { margin-top: 18px; }
.basket .btn:disabled { opacity: .45; cursor: not-allowed; }
.basket__reassure {
  margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius);
  background: #eaf6f0; color: #11553a; font-size: .84rem;
}
.basket__reassure strong { display: block; }

.basket__breakdown { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.basket__breakdown summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--brand); }
.basket__breakdown table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .8rem; }
.basket__breakdown th, .basket__breakdown td { text-align: right; padding: 6px 4px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.basket__breakdown th:first-child, .basket__breakdown td:first-child { text-align: left; }
.basket__breakdown th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* =============================================================
   Admin, internal enquiry management
   ============================================================= */

.admin-login { max-width: 420px; margin: 40px auto; }
.admin-login h1 { font-size: 1.6rem; }
.admin-login p { color: var(--muted); margin-bottom: 24px; }

.admin__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 24px;
  border-bottom: 1px solid var(--line-2);
}
.admin__head > div:first-child { min-width: 240px; }
.admin__head h1 { margin-bottom: 4px; }
.admin__count { margin: 0; color: var(--muted); font-size: .92rem; }
.admin__actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.admin__actions-divider { width: 1px; height: 24px; margin: 0 3px; background: var(--line); }
.admin__notice { margin: -6px 0 18px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font-size: .9rem; }
.admin__notice[data-tone="success"] { border-color: #b8dfca; background: #eaf6f0; color: #11553a; }
.admin__notice[data-tone="error"] { border-color: #edbcbc; background: #fdeaea; color: #8f1f1f; }
.page-admin .topbar, .page-admin .masthead, .page-admin .nav, .page-admin .cta-band, .page-admin > .footer { display: none; }
.page-admin [hidden] { display: none !important; }
.admin__shell { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.admin__brand { display: inline-flex; align-items: center; }
.admin__brand img { width: 72px; height: 49px; object-fit: contain; }
.admin__shell-label { color: var(--muted); font-size: .88rem; font-weight: 700; letter-spacing: .02em; text-transform: none; }

/* At-a-glance: what needs doing before anything else. */
.admin__stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.stat-tile {
  flex: 1 1 150px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 18px; background: #fff;
}
.stat-tile strong { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.stat-tile span { font-size: .82rem; color: var(--muted); }
.stat-tile--urgent { border-color: var(--brand); background: var(--brand-tint); }
.stat-tile--urgent strong { color: var(--brand-ink); }
.stat-tile--good strong { color: var(--ok); }

.admin__toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 16px; align-items: start; margin-bottom: 20px;
}
.admin__toolbar .chips { margin-bottom: 0; }
.admin__views { display: flex; gap: 22px; align-items: end; margin: 0 0 18px; padding: 0 0 12px; border-bottom: 1px solid var(--line-2); overflow-x: auto; }
.admin__nav-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 22px; border-right: 1px solid var(--line-2); }
.admin__nav-group:last-child { padding-right: 0; border-right: 0; }
.admin__nav-label { width: 100%; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; list-style: none; }
.admin__nav-label::-webkit-details-marker { display: none; }
.admin__nav-label::marker { content: ''; }
.admin__nav-label::after { display: none; }
.admin__views .chip { flex: none; }
.admin__views .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 4px #fff; }
.admin__filter-groups { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.admin__stage-filter { display: grid; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.admin__stage-filter > span { color: var(--ink-muted); font-size: .85rem; font-weight: 700; }
.admin__stage-filter select {
  width: 100%; padding: 10px 14px; font: inherit; font-size: .95rem;
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.admin__stage-filter select:focus { outline: none; border-color: var(--ink); }
.admin__search { width: 100%; max-width: none; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.admin__search input {
  width: 100%; padding: 10px 14px; font: inherit; font-size: .92rem;
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.admin__search input:focus { outline: none; border-color: var(--ink); }
.admin__none { text-align: center; padding: 40px 0; color: var(--muted); }
.admin__empty-state { margin: 16px 0; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--muted); }
.admin__empty-state h3 { margin: 0 0 6px; color: var(--ink); font-size: 1rem; }
.admin__empty-state p { margin: 0; }
.admin__report-block { margin-top: 24px; }
.admin__report-block h3 { margin-bottom: 8px; }
.admin-dashboard { padding: 8px 0 28px; }
.admin-dashboard__intro { margin-bottom: 18px; }
.admin-dashboard__intro h2 { margin-bottom: 4px; }
.admin-dashboard__intro p { margin: 0; color: var(--muted); }
.admin-dashboard__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-dashboard__queues { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.admin-dashboard__queues article { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; background: var(--surface-2); }
.admin-dashboard__queue { display: flex; flex-direction: column; min-width: 0; }
.admin-dashboard__queue header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-dashboard__queue h3 { margin-bottom: 6px; font-size: 1rem; }
.admin-dashboard__queue header > strong { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 999px; background: #fff; color: var(--brand-ink); font-size: 1rem; }
.admin-dashboard__queue [data-dashboard-queue-list] { flex: 1; margin: 10px 0 14px; }
.admin-dashboard__queue [data-dashboard-queue-list] p { margin: 0 0 10px; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.admin-dashboard__queue [data-dashboard-queue-list] p:last-child { margin-bottom: 0; }
.admin-dashboard__queue [data-dashboard-queue-list] strong { color: var(--ink); }
.admin-dashboard__queue-empty { opacity: .8; }
.admin-dashboard__queue-error { color: #8a5a00 !important; }
@media (max-width: 1100px) { .admin-dashboard__queues { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .admin-dashboard__queues { grid-template-columns: 1fr; } }
.admin__subviews { display: flex; gap: 8px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.admin__section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.marketing__layout { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 18px; align-items: start; }
.marketing__list { display: grid; gap: 10px; }
.marketing__item { display: grid; gap: 5px; width: 100%; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.marketing__item:hover, .marketing__item:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(221, 0, 113, .12); }
.marketing__item.is-disabled { opacity: .62; }
.marketing__item strong { font-size: 1rem; }
.marketing__item span:not(.marketing__item-status), .marketing__item small { color: var(--muted); }
.marketing__item-status { justify-self: start; color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.marketing__editor { padding: 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; }
.marketing__editor-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.marketing__editor h3 { margin: 0; }
.admin__section-heading h2 { margin-bottom: 4px; }
.admin__section-heading p:not(.eyebrow) { margin: 0; color: var(--muted); }
.admin__section-actions { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.admin__customer-search { max-width: 520px; margin-bottom: 16px; }
.admin__customer-search label { display: block; margin-bottom: 5px; color: var(--muted); font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.admin__customer-search input { width: 100%; padding: 10px 14px; font: inherit; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.admin__customer-search input:focus { outline: none; border-color: var(--ink); }
.admin__customer-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.admin__customer-form { margin: 0; }
.admin__customer-form h3 { margin-bottom: 14px; font-size: 1rem; }
.admin__form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.field__hint { color: var(--muted); font-size: .8em; font-weight: 500; letter-spacing: 0; text-transform: none; }
.customer-card { margin-bottom: 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.customer-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.customer-card__head h3 { margin: 0 0 4px; font-size: 1.05rem; }
.customer-card__counts { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.customer-card__summary { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 14px; color: var(--muted); font-size: .84rem; }
.customer-card__summary strong { color: var(--ink); }
.customer-card__balance { color: #8f1f1f; }
.customer-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.customer-record, .order-record { margin-top: 18px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); }
.customer-record__head, .order-record__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.customer-record__head h4, .order-record__head h4 { margin: 0 0 4px; }
.customer-record__head p, .order-record__head p { margin: 0; color: var(--muted); }
.customer-record__metrics, .order-record__metrics { display: flex; flex-wrap: wrap; gap: 8px; }
.customer-record__metrics span, .order-record__metrics span { display: grid; gap: 2px; min-width: 104px; padding: 9px 11px; border-radius: var(--radius); background: #fff; color: var(--muted); font-size: .76rem; }
.customer-record__metrics strong, .order-record__metrics strong { color: var(--ink); font-size: .95rem; }
.order-record__next { margin-top: 16px; padding: 16px 18px; border-left: 4px solid var(--brand); border-radius: var(--radius); background: var(--brand-tint); }
.order-record__next .eyebrow { margin-bottom: 4px; color: var(--brand-ink); }
.order-record__next strong { display: block; color: var(--ink); font-size: 1rem; }
.order-record__next p:last-child { margin: 5px 0 0; }
.order-record__next-step { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.order-record__next-step label { font-weight: 800; }
.order-record__next-step select { margin-top: 8px; }
.order-record__next-step p { margin: 7px 0 0; }
.order-record__balance strong { color: #8f1f1f; }
.customer-record__grid, .order-record__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.customer-record h5, .order-record h5 { margin: 0 0 10px; font-size: 1.02rem; letter-spacing: 0; text-transform: none; }
/* Record headings, eyebrows and status pills stay in sentence case: all-caps
   strips the word shape readers rely on, and the workshop reads these daily. */
[data-admin] .eyebrow { letter-spacing: .02em; text-transform: none; font-size: .86rem; font-weight: 700; }
.customer-record .pill, .order-record .pill, .enquiry__record-head .pill { font-size: .82rem; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 6px 12px; }
.customer-record p, .order-record p { color: var(--muted); font-size: .85rem; }
.customer-record__contact, .customer-record__order, .customer-record__activity, .order-record__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: .84rem; }
.customer-record__contact:last-child, .customer-record__order:last-child, .customer-record__activity:last-child, .order-record__row:last-child { border-bottom: 0; }
.customer-record__contact div, .customer-record__order div { display: grid; gap: 3px; }
.customer-record__contact small { color: var(--muted); }
.customer-record__order span { color: var(--brand-ink); font-weight: 700; }
.customer-record__activity { display: block; }
.enquiry__activity .activity__head, .customer-record__activity .activity__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-record__activity time, .order-record__row time { color: var(--muted); font-size: .76rem; }
.customer-record__activity p { margin: 5px 0 0; }
.activity__complete { margin-left: auto; white-space: nowrap; }
.activity-composer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.activity-composer summary { cursor: pointer; color: var(--brand-ink); font-weight: 800; }
.activity-composer .activity-form { margin-top: 10px; }
.customer-record__preference { margin-top: 12px; }
.order-record__row { align-items: center; flex-wrap: wrap; }
.order-record__row select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; }
.order-record__items { min-width: 720px; }
.order-record .table-scroll { margin-top: 8px; overflow-x: auto; }
.order-item-composer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.order-item-composer summary { cursor: pointer; color: var(--brand-ink); font-weight: 800; }
.order-item-composer summary::after { content: ' +'; }
.order-item-composer[open] summary::after { content: ' −'; }
.order-item-form { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.order-item-form .form__row { margin-bottom: 10px; }
.quote-editor { flex-basis: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.quote-editor summary { cursor: pointer; color: var(--brand-ink); font-size: .8rem; font-weight: 800; }
.quote-editor summary::after { content: ' +'; }
.quote-editor[open] summary::after { content: ' −'; }
.quote-editor form { margin: 10px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.quote-editor .form__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.quote-editor .form__row:last-of-type { grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); }
.quote-editor .field--wide { min-width: 0; }
.quote-editor input, .quote-editor textarea { width: 100%; padding: 8px 10px; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.enquiry__triage { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: .82rem; }
.enquiry__triage strong { color: var(--ink); }
.priority { font-weight: 800; }
.priority--high, .priority--urgent { color: #8f1f1f; }
.reporting__empty { margin-top: 24px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.reporting__empty h3 { margin-bottom: 6px; }
.reporting__empty > p:not(.eyebrow) { max-width: 640px; margin: 0; color: var(--muted); }
.reporting__empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.order-card { gap: 14px; }
.order-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.order-card__head h3 { margin: 0 0 4px; font-size: 1.08rem; }
.order-card__head p { margin: 0; color: var(--muted); }
.order-card__summary { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(120px, 1fr)); gap: 10px 18px; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: .84rem; }
.order-card__summary span { display: grid; gap: 3px; min-width: 0; }
.order-card__summary strong { color: var(--ink); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.order-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.order-record__manage, .order-record__tools { margin-top: 20px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.section-heading h5 { margin-bottom: 0; }
.section-heading p { margin: 0; }
.order-record__manage .form__row, .order-record__tools .form__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.order-record__manage .field, .order-record__tools .field { min-width: 0; }
.order-record__manage label, .order-record__tools label { display: grid; gap: 6px; color: var(--ink-muted); font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.order-record__manage input, .order-record__manage textarea, .order-record__manage select, .order-record__tools input, .order-record__tools textarea, .order-record__tools select { width: 100%; padding: 11px 12px; color: var(--ink); font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.order-record__manage textarea, .order-record__tools textarea { resize: vertical; }
.order-record__manage .field--wide, .order-record__tools .field--wide { grid-column: span 2; }
/* One height for every control in the row. Selects, text inputs and date
   inputs each size themselves differently, which left the row ragged. */
.order-record__manage input, .order-record__manage select,
.order-record__tools input, .order-record__tools select { height: 46px; }
.order-record__manage textarea, .order-record__tools textarea { min-height: 92px; }
.order-record__manage-title { margin-bottom: 14px; }
.order-guide { display: grid; grid-template-columns: minmax(220px, .7fr) 1.3fr; gap: 24px; align-items: center; margin: 0 0 20px; padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius-lg); background: var(--surface-2); }
.order-guide h3 { margin: 0 0 4px; }
.order-guide p { margin: 0; color: var(--muted); }
.order-guide__steps, .order-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.order-guide__steps li { display: grid; gap: 6px; text-align: center; color: var(--muted); font-size: .78rem; font-weight: 700; }
.order-guide__steps strong { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; background: var(--ink); color: #fff; }
.order-flow { margin-bottom: 14px; }
.order-flow li { display: grid; gap: 7px; align-content: start; color: var(--muted); font-size: .72rem; font-weight: 700; }
.order-flow li span { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--line); border-radius: 50%; background: #fff; }
.order-flow li.is-done span { border-color: var(--ok); background: var(--ok); color: #fff; }
.order-flow li.is-current { color: var(--ink); }
.order-flow li.is-current span { border-color: var(--brand); background: var(--brand); color: #fff; }
.order-flow__hint { margin: 0 0 14px; color: var(--muted); }
.order-record__next-action { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); background: var(--surface-2); }
.order-record__next-action p { margin: 0; color: var(--muted); font-size: .9rem; }
.order-record__next-action--done { color: var(--ok); font-weight: 700; }
.order-record__full-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); list-style: none; color: var(--muted); font-size: .84rem; font-weight: 700; }
.order-record__full-flow li { display: flex; gap: 7px; align-items: center; }
.order-record__full-flow span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: .75rem; }
.order-record__full-flow li.is-done span { border-color: var(--ok); background: var(--ok); color: #fff; }
.order-record__full-flow li.is-current { color: var(--ink); }
.order-record__full-flow li.is-current span { border-color: var(--brand); background: var(--brand); color: #fff; }

/* ---------- order record tabs ----------
   The record was one continuous scroll: workflow, garments, every commercial
   field, payments, quotes, the Stripe link, delivery, documents and the
   timeline. On a phone that is a minute of scrolling to reach the thing you
   opened it for. One panel at a time instead. */
.order-tabs {
  display: flex; gap: 4px; margin: 18px 0 0; padding: 0 0 0 2px;
  border-bottom: 2px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.order-tabs::-webkit-scrollbar { display: none; }
.order-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: -2px; padding: 11px 16px; border: 0;
  border-bottom: 2px solid transparent;
  background: transparent; color: var(--ink-muted); cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.order-tab:hover { color: var(--ink); }
.order-tab.is-active { color: var(--ink); border-bottom-color: var(--brand-ink); font-weight: 700; }
.order-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.order-tab__count {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--line-2); color: var(--ink-3); font-size: .78rem; font-weight: 700;
}
.order-tab.is-active .order-tab__count { background: var(--brand-tint); color: var(--brand-ink); }
.order-panel { padding-top: 18px; }
/* These sections carried their own top rule when they sat in one long
   scroll. Inside a tab panel that doubles up with the tab bar's rule. */
.order-panel > *:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.order-panel[hidden] { display: none; }
.order-record__at-a-glance { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.order-record__at-a-glance p { margin: 0 0 6px; color: var(--ink-muted); }
.order-record__at-a-glance strong { display: inline-block; min-width: 130px; color: var(--ink); font-weight: 600; }
.order-record__paid { margin: 0 0 12px; }
.order-record__tools h5 { margin-top: 22px; }
.order-record__tools > h5:first-child { margin-top: 0; }
.order-record__manage .form__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-record__manage .form__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.order-record__tools .form__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order-record__tools .form__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.order-record__tools .form__row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.order-record__more { margin-bottom: 14px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.order-record__more > summary { padding: 12px 16px; color: var(--ink); cursor: pointer; font-size: .95rem; font-weight: 600; list-style: none; }
.order-record__more > summary::-webkit-details-marker { display: none; }
.order-record__more > summary::after { content: '+'; margin-left: 8px; color: var(--brand-ink); font-weight: 800; }
.order-record__more[open] > summary::after { content: '\2212'; }
.order-record__more[open] > summary { border-bottom: 1px solid var(--line); }
.order-record__more > .form__row, .order-record__more > .field { padding: 0 16px; }
.order-record__more > .form__row { padding-top: 14px; }
.order-record__more > .field { padding-bottom: 16px; }
.order-record__manage .admin__form-actions { align-items: center; }
.order-record__manage-hint { margin: 0; color: var(--muted); font-size: .9rem; }
/* The next section heading sat flush against the save button. */
.order-record__manage { padding-bottom: 22px; }
.order-record__tools .admin__form-actions { align-items: center; margin-bottom: 12px; }
.order-record__tools .admin__form-actions > input, .order-record__tools .admin__form-actions > select { width: auto; min-width: 130px; }
.order-record__tools .admin__form-actions > span { margin-right: auto; }
.production-board { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 12px; }
.production-board__help { display: flex; gap: 8px; align-items: baseline; margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.production-board__help strong { color: var(--ink); }
.production-column { min-height: 240px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.production-column.is-drop-target { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.production-column > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.production-column h3 { margin: 0; font-size: .85rem; }
.production-column > header span { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 999px; background: #fff; color: var(--muted); font-size: .75rem; font-weight: 800; }
.production-card { padding: 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 2px 8px rgba(17, 20, 24, .04); }
.production-card[draggable="true"] { cursor: grab; }
.production-card.is-dragging { opacity: .45; }
.production-card.is-moving { opacity: .6; pointer-events: none; }
.production-card__top { display: flex; justify-content: space-between; gap: 8px; color: var(--brand-ink); font-size: .78rem; }
.production-card__top time { color: var(--muted); font-weight: 600; }
.production-card h4 { margin: 8px 0 4px; font-size: .88rem; }
.production-card p { margin: 0 0 8px; color: var(--muted); font-size: .82rem; }
.production-card small { display: block; min-height: 30px; margin-bottom: 8px; color: var(--muted); font-size: .74rem; }
.production-card__move { display: grid; gap: 5px; margin-bottom: 8px; color: var(--muted); font-size: .74rem; font-weight: 700; }
.production-card__move select { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; }
.production-card .btn { width: 100%; }
.production-column__empty { color: var(--muted); font-size: .8rem; }

/* --- enquiry card: artwork first, because that is what the job needs --- */

.enquiry {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 20px; margin-bottom: 12px; background: #fff;
}
.enquiry--with-artwork { grid-template-columns: 104px 1px minmax(0, 1fr); }
.enquiry__main { min-width: 0; }
.enquiry__divider { width: 1px; height: 100%; min-height: 104px; background: var(--line); }

.enquiry__artwork {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--muted);
}
.enquiry__artwork img,
.enquiry__artwork-file {
  width: 104px; height: 104px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2);
  object-fit: contain; display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; letter-spacing: .04em; color: var(--ink-3);
}
.enquiry__artwork-name {
  font-size: .72rem; text-align: center; word-break: break-all;
  max-width: 104px; line-height: 1.3;
}
.enquiry__artwork:hover .enquiry__artwork-name { color: var(--brand-ink); text-decoration: underline; }
.enquiry__artwork--none span {
  width: 104px; height: 104px; border-radius: var(--radius);
  border: 1px dashed var(--line); display: grid; place-items: center;
  font-size: .76rem; color: var(--muted); text-align: center;
}

.enquiry__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.enquiry__head h2 { font-size: 1.05rem; margin: 0 0 3px; }
.enquiry__company { font-weight: 500; color: var(--muted); font-size: .92rem; }
.enquiry__meta { margin: 0; font-size: .84rem; color: var(--muted); }
.enquiry__flags { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.pill {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
.pill--new { background: var(--brand-tint); color: var(--brand-ink); border-color: transparent; }
.pill--in_progress { background: #fff4e0; color: #8a5a00; border-color: transparent; }
.pill--quoted { background: #e7f0fb; color: #14538f; border-color: transparent; }
.pill--won { background: #eaf6f0; color: #11553a; border-color: transparent; }
.pill--lost { background: var(--surface-3); color: var(--muted); border-color: transparent; }

.due {
  font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3);
}
.due--soon { background: #fff4e0; color: #8a5a00; }
.due--overdue { background: #fdeaea; color: #a11; }

.enquiry__details {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 20px; margin: 14px 0 0;
}
.enquiry__details dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.enquiry__details dd { margin: 1px 0 0; font-size: .9rem; font-weight: 600; color: var(--ink); }

.enquiry__message {
  margin: 14px 0 0; padding: 11px 14px; background: var(--surface-2);
  border-radius: var(--radius); font-size: .9rem; white-space: pre-wrap;
}
.enquiry__controls {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end; gap: 14px 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.enquiry__controls label { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
/* input was missing from this list, so Owner, Next action and Follow up got
   no padding, a 1px browser border, square corners and a different height
   from the selects beside them. With the row bottom-aligned, that left every
   label sitting at its own height — the row read as broken. */
.enquiry__controls select,
.enquiry__controls input,
.enquiry__controls textarea {
  font: inherit; font-size: .9rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  padding: 8px 10px; color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius); background: #fff;
  width: 100%; box-sizing: border-box;
}
.enquiry__controls select,
.enquiry__controls input { height: 42px; }
.enquiry__controls textarea { min-height: 76px; padding-top: 10px; }
.enquiry__controls select:focus,
.enquiry__controls input:focus,
.enquiry__controls textarea:focus { outline: none; border-color: var(--ink); }
.enquiry__notes { grid-column: 1 / -1; }
.enquiry__notes textarea { resize: vertical; width: 100%; }
.admin__orders-list .enquiry__controls { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); align-items: end; }
.admin__orders-list .enquiry__controls > span,
.admin__orders-list .enquiry__controls > button:last-of-type { grid-column: span 2; }
.company-edit, .contact-row form, .activity-form { display: grid; gap: 8px; margin: 12px 0; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface-2); }
.company-edit input, .company-edit textarea, .contact-row input, .contact-row textarea, .contact-row select, .activity-form input, .activity-form textarea, .activity-form select { width: 100%; padding: 8px 10px; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.enquiry__saved { font-size: .82rem; font-weight: 700; color: var(--ok); align-self: center; }
.enquiry__reply, .enquiry__delete {
  align-self: center; border: 0; background: none; padding: 8px 4px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--muted);
}
.enquiry__reply { color: var(--brand-ink); text-decoration: none; }
.enquiry__reply:hover { text-decoration: underline; }
.enquiry__delete { margin-left: auto; }
.enquiry__delete:hover { color: #a11; text-decoration: underline; }
.reply-form { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; }
.reply-form p { margin: 0; color: var(--muted); font-size: .88rem; }
.reply-form label { display: grid; gap: 4px; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.reply-form input, .reply-form textarea { width: 100%; padding: 8px 10px; font: inherit; font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.reply-form textarea { resize: vertical; }
.reply-form__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.admin__empty {
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  padding: 32px 24px; text-align: center; background: var(--surface-2);
}
.admin__empty p { margin: 0 0 16px; color: var(--muted); }
.admin__empty-note { font-size: .82rem; margin: 14px 0 0 !important; }

@media (max-width: 720px) {
  .admin--view-dashboard .admin__stats,
  .admin--view-enquiries .admin__stats { display: none; }
  .admin__head { gap: 18px; margin-bottom: 24px; padding-bottom: 20px; }
  .admin__head > div:first-child { width: 100%; min-width: 0; }
  .admin__actions { width: 100%; margin-left: 0; }
  .admin__actions .btn { flex: 1 1 auto; }
  .admin__actions-divider { display: none; }
  .admin__toolbar { grid-template-columns: 1fr; gap: 14px; }
  .admin__search { order: -1; }
  .admin__stage-filter { padding: 12px 14px; }
  .admin__views { margin-right: 0; padding-right: 0; overflow: visible; flex-wrap: wrap; gap: 12px; align-items: stretch; }
  .admin__nav-group { display: block; flex: 1 1 100%; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .admin__nav-group > .admin__nav-label { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; }
  .admin__nav-group > .admin__nav-label::after { display: block; content: '+'; color: var(--brand-ink); font-size: 1.2rem; letter-spacing: 0; }
  .admin__nav-group[open] > .admin__nav-label::after { content: '−'; }
  .admin__nav-group > .chip { margin: 0 6px 8px 0; }
  .admin__nav-group:last-child { padding-bottom: 0; border-bottom: 0; }
  .admin__section-heading { align-items: stretch; flex-direction: column; gap: 12px; }
  .marketing__layout { grid-template-columns: 1fr; }
  .admin__section-actions { width: 100%; }
  .admin__section-actions .btn { flex: 1; }
  .admin__customer-forms { grid-template-columns: 1fr; }
  .customer-record__grid, .order-record__grid { grid-template-columns: 1fr; }
  .customer-record__head, .order-record__head { flex-direction: column; }
  .customer-record__metrics, .order-record__metrics { width: 100%; }
  .customer-record__metrics span, .order-record__metrics span { flex: 1 1 120px; }
  .customer-record__contact, .customer-record__order { flex-direction: column; gap: 5px; }
  .order-record { margin-left: -4px; margin-right: -4px; padding: 14px; }
  .customer-card__head { flex-direction: column; gap: 6px; }
  .customer-card__counts { white-space: normal; }
  .order-card__head { flex-direction: column; gap: 8px; }
  .order-card__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .section-heading { flex-direction: column; gap: 5px; }
  .order-record__manage .form__row, .order-record__tools .form__row,
  .order-record__manage .form__row--two, .order-record__manage .form__row--three,
  .order-record__tools .form__row--two, .order-record__tools .form__row--three,
  .order-record__tools .form__row--four { grid-template-columns: 1fr; }
  .order-tabs { margin-left: -4px; margin-right: -4px; }
  .order-tab { flex: 0 0 auto; padding: 10px 14px; }
  .order-record__at-a-glance strong { display: block; min-width: 0; }
  .order-record__manage .field--wide, .order-record__tools .field--wide { grid-column: auto; }
  .order-record__next-action { display: grid; gap: 8px; align-items: stretch; }
  .order-record__next-action .btn { width: 100%; }
  .order-record__tools .admin__form-actions > input, .order-record__tools .admin__form-actions > select { width: 100%; }
  .order-record__tools .admin__form-actions > span { width: 100%; margin-right: 0; }
  .enquiry { gap: 14px; }
  .enquiry--with-artwork { grid-template-columns: 78px 1px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .enquiry--with-artwork .enquiry__divider { min-height: 78px; }
  .enquiry__artwork img, .enquiry__artwork-file,
  .enquiry__artwork--none span { width: 78px; height: 78px; }
  .enquiry__artwork-name { max-width: 78px; }
  .enquiry__head { flex-direction: column; }
  .enquiry__flags { justify-content: flex-start; }
  .enquiry__controls { flex-direction: column; align-items: stretch; }
  .enquiry__delete { margin-left: 0; }
  .admin__orders-list .enquiry__controls { display: flex; }
  .production-board { display: block; overflow: visible; }
  .production-column { min-height: 0; margin-bottom: 10px; }
  .production-column:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   Mobile pass
   --------------------------------------------------------------------------
   Measured on an iPhone 13 viewport (390px) walking the customer's route:
   home, catalogue, personaliser, quote. Everything below fixes something that
   was found there rather than something that looked plausible in a desktop
   window narrowed down.
   ========================================================================== */

@media (max-width: 760px) {
  .order-guide { grid-template-columns: 1fr; gap: 16px; }
  .order-guide__steps { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .order-flow { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
  .order-record__full-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- Form fields ------------------------------------------------------
     Safari zooms the page when a field under 16px takes focus, and does not
     zoom back out. On the quote form that means every tap on a field leaves
     the customer scrolled sideways on a page they now have to pinch. 16px is
     the threshold, so these are exactly 16px rather than nearly. */
  .field input, .field select, .field textarea,
  .search input, .admin__stage-filter select,
  .size-matrix input, .position-row select {
    font-size: 16px;
  }

  /* Labels and hints kept legible with it. */
  .field label { font-size: .95rem; }
  .field .hint, .field__hint, .field__error { font-size: .88rem; }

  /* The consent checkbox is 13x13 by default, which is a miss waiting to
     happen. The label carries the tap area so the whole line works. */
  .checkline { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; }
  .checkline input[type="checkbox"] {
    width: 22px; height: 22px; min-width: 22px; margin-top: 1px; accent-color: var(--brand-ink);
  }
  /* Disclosure toggles were 22px of tappable height. */
  summary { min-height: 44px; display: flex; align-items: center; }
  /* Standalone nav links, which are targets rather than prose. */
  .footer__col ul a, .footer__legal a, .footer__social a,
  .topbar__list a, .crumbs a {
    display: flex; align-items: center; min-height: 44px; padding: 0;
  }
  .footer__legal, .topbar__list { align-items: center; }
  .btn { min-height: 44px; }

  /* --- Small type -------------------------------------------------------
     Nothing below 12.5px. The product cards were running 11.2px on the
     decoration tags and the "ex VAT" note, which is fine print on a desktop
     and unreadable on a phone. */
  .product-card__brand { font-size: .8rem; }
  .product-card__decoration span { font-size: .78rem; padding: 5px 10px; }
  .product-card__price small { font-size: .78rem; }
  .eyebrow { font-size: .82rem; }
  .prose table th, .prose table td { font-size: .85rem; }
  .config__brand { font-size: .8rem; }
  .size-matrix span { font-size: .85rem; }

  /* --- Tap targets ------------------------------------------------------ */

  /* Colour swatches were 40px. 44 is the smallest a thumb reliably hits. */
  .swatch { width: 44px; height: 44px; }
  .swatches { gap: 12px; }

  /* Footer and utility links sat at 17px tall. Padding gives them a target
     without moving them apart visually. */
  .footer__col ul a, .footer__legal a, .footer__social a, .footer__address a {
    display: inline-block; padding: 7px 0;
  }
  .topbar__list a { display: inline-block; padding: 4px 0; }
  .section__link { display: inline-block; padding: 8px 0; }
  .crumbs a { display: inline-block; padding: 6px 0; }

  /* --- Catalogue filters ------------------------------------------------
     Ten categories wrapped to five rows and pushed the first product off the
     screen entirely. One swipeable row instead, which is what a phone
     expects. The negative margin lets it bleed to the screen edge so it
     reads as scrollable rather than clipped. */
  .catalogue .chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-left: -16px; margin-right: -16px; /* .wrap's gutter, so it bleeds to the edge */
    padding: 2px 16px 10px; margin-bottom: 18px;
    scrollbar-width: none;
  }
  .catalogue .chips::-webkit-scrollbar { display: none; }
  .catalogue .chip { flex: 0 0 auto; padding: 10px 16px; }

  /* --- Vertical rhythm --------------------------------------------------
     64px section padding is right on a desktop and leaves a phone scrolling
     past empty space between every band. */
  .section { padding: 40px 0; }
  .section--tight { padding: 30px 0; }
  .page-head { padding-bottom: 28px; }
  .section__head { margin-bottom: 22px; }
  .usps { padding: 22px 0; }
}

/* Very narrow phones: the product grid at two columns leaves the longer
   Ralawise names stacked four lines deep. */
@media (max-width: 380px) {
  .product-card__title { font-size: .95rem; }
  .product-card__meta { font-size: .82rem; }
}

/* The colour count beside "Pick a colour". */
.config__count { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

/* Some Ralawise styles carry 101 colourways. Left to wrap, that is fifteen
   rows of solid circles on a phone and the size picker below it is lost.
   Capped to roughly four rows and scrolled, with the count in the heading
   saying there is more. */
@media (max-width: 760px) {
  .swatches {
    max-height: 232px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 2px 4px; margin: 0 -2px;
    overscroll-behavior: contain;
  }
}

@media (max-width: 760px) {
  .burger { width: 44px; height: 44px; }
  /* The price is what this business competes on. It should not be the
     smallest thing on the card. */
  .product-card__price { font-size: 1.15rem; margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   Product card alignment

   Real supplier names vary wildly in length: "Cool T" next to "Unisex Cruiser
   2.0 iconic hoodie sweatshirt (STSU177)", and brands from "Gildan" to "AWDis
   Just Hoods". Left to flow, the brand wraps on one card and not the next, so
   the title, the meta line and the price all sit at different heights across a
   row. Nothing is broken and the whole grid reads as unfinished.

   So each part of the card body gets a fixed number of lines.
   -------------------------------------------------------------------------- */

.product-card__brand {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.product-card__title {
  /* An explicit two-line box. -webkit-line-clamp alone is not enough: some
     engines normalise display:-webkit-box back to flow-root and the clamp is
     silently dropped, which is how a three-line title got through. The height
     is the guarantee; the clamp is what makes the cut an ellipsis where it
     is honoured. */
  line-height: 1.3; height: 2.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.product-card__meta {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The decoration tags are the last row, so they can pin to the bottom and let
   the tallest card in a row set the height without dragging the rest out. */
.product-card__body { display: flex; flex-direction: column; }

@media (max-width: 760px) {
  /* Two columns at 390px leaves about 144px of text. "52 colours · XS to 5XL"
     needs every pixel of it, and truncating to "XS to 5..." reads as broken
     rather than abbreviated. */
  .product-card__meta { font-size: .76rem; }
  .product-card__price { white-space: nowrap; }
}

@media (max-width: 760px) {
  /* Uppercase at .08em tracking is expensive in a 144px column: it cut
     "AWDis Just Cool" for the sake of two pixels. Tightened so the ordinary
     brand names fit and only the genuinely long ones ellipsis. */
  .product-card__brand { font-size: .74rem; letter-spacing: .04em; }
}

/* --------------------------------------------------------------------------
   Category tiles carrying a photograph

   .tile__media sizes its image to 82% width with natural height, centred in a
   1.42:1 box. That is right for a garment drawing: a square canvas with its
   own padding, sitting inset. A supplier photograph is a different thing —
   often a portrait shot of someone wearing the garment — and at 82% width with
   auto height it would tower out of a landscape box.

   So a tile that got a photograph fills instead of insets.
   -------------------------------------------------------------------------- */
.tile__media--photo {
  /* Not grid. A grid item's automatic minimum size is its content, so a tall
     photograph overrode the container's aspect-ratio and grew the box: a
     420x840 portrait made its tile 593px against the others' 209px. Block
     plus overflow keeps the ratio and clips.

     Square, not the 1.42:1 the drawings used. The supplier's shots are
     portraits of someone wearing the garment, and a landscape box cropped
     them to a midriff: collar gone off the top, hem off the bottom. */
  display: block; padding: 0; overflow: hidden; aspect-ratio: 1;
}
.tile__media--photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Bias the crop upward. The garment is on the torso; dead centre gives up
     the collar to show trousers. */
  object-position: center 22%;
}

/* --------------------------------------------------------------------------
   Photographs in the homepage's fixed grids

   The garment drawings were all 420x420, so nothing ever needed to say what
   shape an image was. Supplier photography is not: the same four slots drew
   592px, 117px, 263px and 395px tall from real shots, which is a 2x2 grid
   that looks broken rather than arranged.

   Both grids now declare their shape and crop to it.
   -------------------------------------------------------------------------- */
.split__media .product-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); display: block;
}

/* The hero panel's 40px thumbnails, which would otherwise squash a colour
   shot that is not square. */
.hero__tile img { object-fit: cover; }

@media (max-width: 860px) {
  /* The hero's scrim is angled, which works while the copy is in a left-hand
     column. Stacked, the copy runs the full width and the angle leaves the
     buttons and the tick list sitting on whatever the photograph is doing
     there — a white shirt, in one of them. Vertical instead. */
  .hero::before {
    background:
      linear-gradient(to bottom, rgba(8, 11, 15, .86) 0%, rgba(8, 11, 15, .78) 55%, rgba(8, 11, 15, .62) 100%);
  }
}

/* --------------------------------------------------------------------------
   Headings that were sized inline

   The quote and contact forms set font-size:1.3rem on their step headings in
   the markup, so the same job — the heading of a panel, a card or a form step
   — was being done at 1.15rem, 1.2rem, 1.25rem and 1.3rem in four places. An
   inline style cannot be overridden from here, which is how it drifted
   without anyone touching the stylesheet.
   -------------------------------------------------------------------------- */
.form__heading { font-size: var(--h-panel); }
.form__heading--spaced { margin-top: 32px; }

/* Supporting notes that were also sized inline. */
.note { font-size: .88rem; color: var(--muted); }

/* The save and reply actions were direct children of the controls grid, so
   each took a column of its own and the four of them spread edge to edge
   across the panel. Grouped: save on the left, the rest beside it, delete
   pushed away from them so it is not hit by accident. */
.enquiry__controls-actions {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 2px;
}
.enquiry__controls-actions .enquiry__delete { margin-left: auto; }

/* Same again in the record forms: the rule set padding but not height, so a
   select rendered 46px and a datetime-local 44 against a text input's 40. */
.company-edit input:not([type=hidden]), .company-edit select,
.contact-row input:not([type=hidden]), .contact-row select,
.activity-form input:not([type=hidden]), .activity-form select {
  height: 42px; box-sizing: border-box;
}

@media (max-width: 760px) {
  /* The admin's own controls were left out of the 16px rule, so opening an
     enquiry on a phone and tapping any field zoomed the page and left it
     scrolled sideways — on the screen a person triages from. */
  .admin input:not([type=hidden]), .admin select, .admin textarea,
  .enquiry__controls input, .enquiry__controls select, .enquiry__controls textarea,
  .admin__search input {
    font-size: 16px;
  }
  .enquiry__controls select, .enquiry__controls input { height: 46px; }

  /* The enquiry record was two fixed columns with no mobile rule, so it ran
     53px past the edge of the screen and took the page with it. */
  .enquiry__record { padding: 16px; }
  .enquiry__record-grid { grid-template-columns: 1fr; gap: 22px; padding-top: 16px; }
  .enquiry__record-facts { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .enquiry__record-head { flex-direction: column; gap: 10px; }
  .enquiry__record-head .eyebrow,
  .enquiry__record-head h3,
  .enquiry__record-head p { overflow-wrap: anywhere; }
  .enquiry__record-head .eyebrow { letter-spacing: .04em; }
}

/* --------------------------------------------------------------------------
   Setup card

   An optional integration the client wires themselves. It states what to do,
   where to do it, and proves whether it worked — then disappears once it has.
   -------------------------------------------------------------------------- */
.setup-card {
  margin: 0 0 24px; padding: 20px 22px;
  border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg); background: #fff;
}
.setup-card__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; }
.setup-card__summary::-webkit-details-marker { display: none; }
.setup-card__summary > span:first-child { display: grid; gap: 3px; }
.setup-card__summary .eyebrow { margin: 0; }
.setup-card__summary strong { font-size: 1.05rem; }
.setup-card__summary::after { content: '+'; color: var(--brand-ink); font-size: 1.5rem; font-weight: 700; }
.setup-card[open] .setup-card__summary::after { content: '−'; }
.setup-card__content { padding-top: 18px; }
.setup-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.setup-card__head h3 { margin: 0; }
.setup-card__state {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 800; letter-spacing: .03em;
  background: var(--surface-2); color: var(--muted);
}
.setup-card__state.is-live { background: #e7f6ee; color: #11553a; }
.setup-card__state.is-test { background: #fdf3d9; color: #7a5a00; }
.setup-card__steps { margin: 14px 0; padding-left: 20px; display: grid; gap: 8px; }
.setup-card__steps code {
  padding: 2px 6px; border-radius: 6px; background: var(--surface-2);
  font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.setup-card__warn { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius); background: #fdf3d9; color: #7a5a00; font-size: .9rem; }
.setup-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

@media (max-width: 760px) {
  .setup-card { padding: 16px; }
  .setup-card__summary { align-items: flex-start; }
  .setup-card__head { flex-direction: column; gap: 8px; }
}

/* --------------------------------------------------------------------------
   Admin masthead

   This is the screen someone opens at eight in the morning and leaves open
   until they lock up. It was a white page with three white boxes on it, which
   is honest but joyless, and it gave the eye nothing to anchor to.

   The workshop photograph goes here and only here. A photograph behind a
   working dashboard would be a nice screenshot and a bad tool: the numbers
   people read all day need to sit on flat white. So the character lives in
   the band across the top, and everything below it stays as plain as it was.
   -------------------------------------------------------------------------- */

.admin__masthead {
  position: relative; isolation: isolate;
  margin: 0 0 24px; padding: 26px 28px 24px;
  border-radius: var(--radius-lg);
  background-color: #14181e;
  /* The PNG first, so every browser gets the photograph; image-set() then
     upgrades to WebP where it is understood. Without this line Safari 16 and
     earlier showed the band as a flat dark rectangle. */
  background-image: url('/assets/img/about-workshop.png');
  background-image: image-set(
    url('/assets/img/about-workshop.webp') type('image/webp'),
    url('/assets/img/about-workshop.png') type('image/png')
  );
  background-size: cover;
  background-position: center 38%;
  color: #fff;
  overflow: hidden;
}

/* The scrim. Dark enough to read white text over a photograph of a workshop,
   with the brand colour bled in from the right so it is Pash's rather than
   anyone's. */
.admin__masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(104deg, rgba(12, 15, 20, .95) 0%, rgba(12, 15, 20, .88) 46%, rgba(12, 15, 20, .78) 100%),
    radial-gradient(120% 140% at 100% 0%, rgba(255, 0, 142, .30), transparent 60%);
}

.admin__masthead .admin__shell { border-bottom-color: rgba(255, 255, 255, .16); }
.admin__masthead .admin__shell-label { color: rgba(255, 255, 255, .72); }
.admin__masthead .admin__head { border-bottom: 0; margin-bottom: 18px; padding-bottom: 0; }
.admin__masthead .admin__head h1 { color: #fff; }
.admin__masthead .admin__count { color: rgba(255, 255, 255, .76); }

/* The greeting: time of day and today's date, so the page reads as running
   rather than as a screenshot of itself. */
.admin__greeting {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin: 0 0 6px;
  font-size: .88rem; font-weight: 700; letter-spacing: .02em; text-transform: none;
  color: var(--hivis);
}
.admin__date { color: rgba(255, 255, 255, .62); font-weight: 600; letter-spacing: 0; }

/* Buttons sitting on the photograph rather than on white.
   Solid rather than translucent: a glass button over a photograph reads
   however the photograph feels that day, and behind these it is a brightly
   lit machine — Export, Refresh and Sign out all but vanished. */
.admin__masthead .btn--outline {
  background: rgba(10, 13, 18, .72); border-color: rgba(255, 255, 255, .34); color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.admin__masthead .btn--outline:hover {
  background: rgba(10, 13, 18, .88); border-color: #fff;
}
.admin__masthead .admin__actions {
  background: transparent; border-color: rgba(255, 255, 255, .18);
}
.admin__masthead .admin__actions-divider { background: rgba(255, 255, 255, .2); }

/* Stat tiles become glass on the band instead of bordered white boxes. */
.admin__masthead .admin__stats { margin-bottom: 0; }
.admin__masthead .stat-tile {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.admin__masthead .stat-tile strong { color: #fff; }
.admin__masthead .stat-tile span { color: rgba(255, 255, 255, .78); }
.admin__masthead .stat-tile--urgent { background: rgba(255, 0, 142, .24); border-color: rgba(255, 0, 142, .55); }
.admin__masthead .stat-tile--good { background: rgba(60, 200, 140, .2); border-color: rgba(60, 200, 140, .45); }

@media (max-width: 760px) {
  .admin__masthead { padding: 18px 16px; }
}

/* ---------- the feedback widget ----------
   Discreet by default: a small, low-contrast tab in the corner that reads as
   part of the furniture. It only asserts itself on hover or focus. Staff who
   never need it should barely notice it; staff who do should find it without
   being told where it is. */
.feedback { position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.feedback__open {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(255, 255, 255, .86);
  color: var(--muted); cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 600;
  box-shadow: 0 1px 4px rgba(10, 13, 18, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: .62; transition: opacity .15s ease, color .15s ease, box-shadow .15s ease;
}
.feedback__open > span[aria-hidden] {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 1px solid currentColor; border-radius: 50%; font-size: .72rem; font-weight: 800;
}
.feedback__open:hover, .feedback__open:focus-visible {
  opacity: 1; color: var(--ink); box-shadow: 0 4px 14px rgba(10, 13, 18, .16);
}
.feedback__open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.feedback--open .feedback__open { opacity: 1; color: var(--ink); }

.feedback__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(340px, calc(100vw - 32px));
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; box-shadow: 0 12px 40px rgba(10, 13, 18, .2);
}
.feedback__panel[hidden] { display: none; }
.feedback__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.feedback__close {
  padding: 0 6px; border: 0; background: none; color: var(--muted);
  cursor: pointer; font-size: 1.4rem; line-height: 1;
}
.feedback__close:hover { color: var(--ink); }
.feedback__field { display: grid; gap: 6px; margin-bottom: 12px; }
.feedback__field > span { color: var(--ink-muted); font-size: .88rem; font-weight: 600; }
.feedback__field select, .feedback__field input, .feedback__field textarea {
  width: 100%; padding: 10px 12px; color: var(--ink); font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.feedback__field textarea { resize: vertical; min-height: 84px; }
.feedback__file-note { color: var(--muted); font-size: .78rem; }
.feedback__note { margin: 0 0 12px; color: var(--muted); font-size: .82rem; }
.feedback__actions { display: flex; align-items: center; gap: 10px; }
.feedback__status { color: var(--muted); font-size: .85rem; }

/* The widget sits over the page, so on a phone keep it clear of the very
   bottom edge where browser chrome lives. */
@media (max-width: 760px) {
  .feedback { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .feedback__open-text { display: none; }
  .feedback__open { padding: 11px; }
}

/* ---------- how the admin is used ---------- */
.usage__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.usage__block { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.usage__block h5 { margin: 0 0 10px; font-size: 1rem; }
.usage__block p { margin: 0 0 6px; }
.usage__list { margin: 0; padding: 0; list-style: none; }
.usage__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.usage__list li:last-child { border-bottom: 0; }
.usage__list span { color: var(--ink-muted); min-width: 0; overflow-wrap: anywhere; }
.usage__list strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.usage__never { color: var(--muted); font-size: .85rem; font-weight: 600; }
.usage__footnote { margin-top: 4px; font-size: .88rem; }

/* The server-error banner. Deliberately loud: it exists because a silent
   failure once ran in production for hours while every screen looked fine. */
.admin__alert {
  display: grid; gap: 8px; justify-items: start;
  margin: 0 0 20px; padding: 16px 18px;
  border: 1px solid rgba(200, 32, 47, .35); border-left: 4px solid #c8202f;
  border-radius: var(--radius-lg); background: #fff5f5; color: var(--ink);
}
.admin__alert[hidden] { display: none; }
.admin__alert-detail { margin: 0; color: var(--ink-muted); font-size: .9rem; }
.admin__alert--warn { border-color: rgba(190, 120, 0, .4); border-left-color: #c07a00; background: #fff8ec; }
.usage__block--alert { border-color: rgba(200, 32, 47, .35); background: #fff5f5; }
.usage__block--alert code {
  padding: 1px 5px; border-radius: 4px;
  background: rgba(200, 32, 47, .12); font-size: .82rem;
}
.usage__list small { color: var(--muted); }

.feedback-item { padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.feedback-item--closed { opacity: .58; }
.feedback-item__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.feedback-item__head time { color: var(--muted); font-size: .88rem; }
.feedback-item__head select {
  margin-left: auto; padding: 7px 10px; font: inherit; font-size: .88rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.feedback-item p { margin: 0 0 6px; }
.feedback-item__meta { font-size: .88rem; }
.feedback-item__steps summary { cursor: pointer; color: var(--brand-ink); font-size: .88rem; font-weight: 600; }
.feedback-item__steps ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: .88rem; }
.feedback-item__screenshot { margin-top: 10px; }
.feedback-item__screenshot summary { cursor: pointer; color: var(--brand-ink); font-size: .88rem; font-weight: 600; }
.feedback-item__screenshot img { display: block; width: min(100%, 720px); max-height: 520px; object-fit: contain; object-position: left top; margin: 10px 0 8px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--wash); }
.feedback-item__screenshot a { color: var(--brand-ink); font-size: .88rem; font-weight: 600; }

/* Commerce uses the existing type, colour and spacing system. */
.basket-link {display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap;min-height:44px;text-decoration:none}
.basket-link__count {background:var(--ink);color:#fff;border-radius:50%;min-width:24px;text-align:center;font-size:12px;padding:3px}
.shop-tools {display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.shop-tools label {font-size:13px;font-weight:700;display:grid;gap:7px;min-width:0}
.shop-tools input,.shop-tools select {width:100%;min-height:46px;border:1px solid #d9d9d9;border-radius:6px;padding:10px;font:inherit;background:#fff}
.shop-results,.product-card__basis {font-size:12px;color:#626262}
.product-detail {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:28px;align-items:start}
.product-detail__photo {background:#f5f5f3;border-radius:12px;overflow:hidden}
.product-detail__photo img {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.product-detail h1 {font-size:clamp(28px,3.2vw,46px);line-height:1.12;margin:12px 0 20px}
.product-detail__price {font-size:30px;font-weight:800;margin:0}
.product-detail__copy {white-space:pre-line;margin:24px 0;line-height:1.7}
.product-facts {display:grid;gap:12px;margin:24px 0}
.product-facts div {display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid #e4e4e4}
.product-facts dt {font-weight:700}.product-facts dd {margin:0}
.product-detail__label {font-size:17px;margin-top:26px}
.product-colours {list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 28px;max-height:180px;overflow:auto}
.product-colours li {display:flex;align-items:center;gap:6px;border:1px solid #dedede;border-radius:4px;padding:5px 8px;font-size:12px}
.product-colours span {width:16px;height:16px;border-radius:50%;border:1px solid #bbb}
.product-detail__help {border-top:1px solid #ddd;margin-top:30px;padding-top:24px;font-size:14px;line-height:1.6}
.product-detail__help h2 {font-size:19px}
.commerce-layout {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:36px;align-items:start}
.commerce-summary {border:1px solid #dedede;border-radius:10px;padding:28px;background:#fafaf8;position:sticky;top:24px}
.commerce-summary h2 {font-size:23px;margin:0 0 20px}.commerce-summary .btn {margin:12px 0}
.commerce-summary p {font-size:14px;line-height:1.6}
.commerce-line {display:flex;gap:22px;padding:24px 0;border-bottom:1px solid #ddd}
.commerce-line:first-child {padding-top:0}.commerce-line img {flex:0 0 100px;object-fit:contain;align-self:start;background:#f6f6f4;border-radius:6px}
.commerce-line h2 {font-size:20px;margin:0 0 8px}.commerce-line p {font-size:14px;margin:5px 0;overflow-wrap:anywhere}
.commerce-line__actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.commerce-empty {background:#f7f7f5;border-radius:10px;padding:30px;margin-bottom:24px}
.commerce-consent {display:flex;align-items:start;gap:12px;margin:24px 0;line-height:1.6;font-size:14px}
.commerce-consent input {margin-top:5px;width:20px;height:20px;flex-shrink:0}
.order-view {max-width:850px}.order-status {background:#f6f6f3;border-radius:10px;padding:28px;margin-bottom:30px}
.order-proof {border:1px solid #ddd;border-radius:10px;padding:24px;margin:28px 0}
[data-commerce-checkout-form] {margin-top:36px}
@media(max-width:900px) {.shop-tools {grid-template-columns:1fr 1fr}.product-detail {gap:28px}.commerce-layout {grid-template-columns:1fr}.commerce-summary {position:static}.masthead__actions .basket-link {font-size:12px;gap:4px}}
@media(max-width:560px) {.shop-tools {gap:12px}.shop-tools label:first-child {grid-column:1/-1}.product-detail {grid-template-columns:1fr;gap:24px}.product-detail__photo {max-height:360px}.product-detail__photo img {max-height:360px}.commerce-line {gap:14px}.commerce-line img {width:72px;flex-basis:72px;height:90px}.commerce-line h2 {font-size:17px}.commerce-summary {padding:22px}.masthead__actions .basket-link {min-width:54px}.product-detail__info>.btn {display:flex;justify-content:center;white-space:normal}}

.shop-results {display:flex;align-items:center;justify-content:space-between;gap:16px}

[data-checkout-page] {grid-template-areas:"lines summary" "form summary"}
.checkout-lines {grid-area:lines}.checkout-form {grid-area:form;margin-top:0!important}.checkout-summary {grid-area:summary}
@media(max-width:900px) {[data-checkout-page] {grid-template-areas:"lines" "summary" "form"}}
.product-detail__info>.btn--primary {margin-top:20px}.commerce-line__price {display:block;margin-top:10px;font-size:16px}

/* Mobile shopping actions stay reachable without covering the content. */
.nav__quote { display: none; }
.basket-link { min-width: 100px; min-height: 48px; padding: 8px 12px; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-size: 16px; }
.basket-link:hover, .basket-link[aria-current="page"] { background: var(--surface-2); border-color: var(--ink); text-decoration: none; }
.basket-link__count { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; }
.commerce-head { padding: 28px 0; }
.commerce-head h1 { margin-bottom: 12px; }
.commerce-count { margin: 0 0 16px; color: var(--muted); font-size: .95rem; }
.commerce-layout.is-empty { grid-template-columns: 1fr; }
.commerce-empty { max-width: 660px; padding: 32px; }
.commerce-empty h2 { margin-top: 0; }
.commerce-line { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 20px; padding: 24px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.commerce-line:first-child { padding-top: 24px; }
.commerce-line img { width: 88px; height: 110px; object-fit: contain; }
.commerce-line h2 { overflow-wrap: anywhere; }
.commerce-line__actions .btn { min-height: 48px; }
.commerce-line__actions .btn--text { color: var(--muted); background: transparent; border-color: transparent; }
.commerce-undo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; margin: 12px 0 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.commerce-undo .btn { min-height: 48px; margin-left: auto; }
.commerce-back { display: inline-flex; align-items: center; min-height: 48px; }
.commerce-consent { min-height: 48px; padding: 10px 0; }
.commerce-consent input { accent-color: var(--brand-ink); }
.page-basket .cta-band, .page-checkout .cta-band { display: none; }
.mobile-actions { display: none; }
.position-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.position-choice { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; min-height: 48px; border: 2px solid var(--line); border-radius: var(--radius); font: inherit; font-size: .9rem; font-weight: 600; text-align: left; color: var(--ink); background: #fff; cursor: pointer; }
.position-choice[aria-pressed="true"] { border-color: var(--brand-ink); background: var(--brand-tint); }
.position-choice span { color: var(--muted); font-size: .78rem; }
.position-remove { width: 48px; height: 48px; }
.position-row select { min-height: 48px; }
.basket-line__actions .btn { min-height: 48px; margin-top: 0; }
#cfg-feedback:empty { display: none; }
#cfg-feedback { margin: 16px 0; font-weight: 600; color: var(--ink); }
#cfg-add { min-height: 48px; }
@media (max-width: 900px) {
  html { scroll-padding-top: calc(var(--masthead-height, 144px) + 16px); }
  .js .masthead { position: sticky; top: 0; z-index: 110; }
  .masthead__inner { padding: 10px 0; row-gap: 8px; }
  .masthead .logo { min-width: 56px; min-height: 48px; }
  .masthead__actions { gap: 10px; }
  .masthead__quote { display: none; }
  .masthead__actions .basket-link { min-width: 108px; font-size: 16px; gap: 10px; }
  .burger { width: 48px; height: 48px; }
  .search input { font-size: 16px; }
  .search button { min-width: 48px; min-height: 48px; }
  .nav { display: block; }
  .js .nav { position: fixed; top: var(--nav-top, 144px); left: 0; right: 0; max-height: calc(100vh - var(--nav-top, 144px)); max-height: calc(100dvh - var(--nav-top, 144px)); overflow-y: auto; overscroll-behavior: contain; z-index: 109; }
  .js .nav:not(.is-open) { display: none; }
  .nav__quote { display: flex; justify-content: center; margin: 16px 0; min-height: 48px; }
  .nav__link, .nav__menu a, .nav__utility a { min-height: 48px; display: flex; align-items: center; }
  .nav-open { overflow: hidden; }
  .nav-open .mobile-actions, .keyboard-open .mobile-actions { visibility: hidden; pointer-events: none; }
  .commerce-head { padding: 16px 0 24px; }
  .commerce-head h1 { font-size: 30px; }
  .commerce-head p { font-size: 16px; }
  .page-basket .section, .page-checkout .section { padding: 24px 0 40px; }
  .commerce-layout { gap: 24px; }
  .commerce-summary { padding: 22px; }
  .commerce-summary .btn { min-height: 48px; white-space: normal; }
  .commerce-summary h2 { margin-bottom: 16px; }
  .commerce-line { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .commerce-line:first-child { padding-top: 16px; }
  .commerce-line img { width: 64px; height: 80px; }
  .commerce-line__actions { margin-left: -78px; gap: 12px; padding-top: 4px; }
  .commerce-line__actions .btn { flex: 1; }
  .commerce-line h2 { font-size: 17px; }
  .commerce-items > .btn { min-height: 48px; }
  .commerce-count { font-size: 14px; }
  body.has-mobile-actions { padding-bottom: var(--mobile-actions-height, 142px); }
  .mobile-actions { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.5fr); align-items: center; gap: 12px; position: fixed; z-index: 105; bottom: 0; left: 0; right: 0; padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); }
  .mobile-actions__meta { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
  .mobile-actions__meta strong { font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .mobile-actions .btn { min-height: 48px; margin: 0; white-space: normal; text-align: center; }
  .mobile-actions--config { grid-template-columns: 1fr; gap: 8px; }
  .mobile-actions--config .mobile-actions__meta { display: flex; align-items: center; justify-content: space-between; }
  .mobile-actions__buttons { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
  .mobile-actions p { margin: 0; font-size: 12px; color: var(--muted); }
  .shop-tools input, .shop-tools select, .size-cell input { font-size: 16px; min-height: 48px; }
  .swatch { min-height: 56px; }
  .size-cell { min-width: 0; }
  .form { padding: 20px; }
  .field input, .field select, .field textarea { min-height: 48px; font-size: 16px; }
  .config__chosen img { width: 88px; height: 88px; }
  .config__chosen > div { min-width: 0; }
  .config__name { overflow-wrap: anywhere; }
  .product-detail__info > .btn { min-height: 48px; }
  .product-detail__info > .btn--primary { width: 100%; }
}
@media (max-width: 360px) {
  .position-options { grid-template-columns: 1fr; }
  .commerce-line { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .commerce-line img { width: 56px; height: 72px; }
  .commerce-line__actions { margin-left: -68px; }
  .mobile-actions { grid-template-columns: 1fr 1.25fr; }
  .mobile-actions--config { grid-template-columns: 1fr; }
  .mobile-actions__meta strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.commerce-legal { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 18px 0 0; }
.commerce-legal a { display: inline-flex; align-items: center; min-height: 48px; }

.position-diagram { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; margin: 16px 0 24px; }
.position-diagram > summary { min-height: 48px; cursor: pointer; font-size: .9rem; font-weight: 600; }
@media (max-width: 900px) { .hotspot { pointer-events: none; } }

@media (max-width: 900px) { body:not(.page-admin) button { min-width: 44px; min-height: 48px; } }

@media (max-width: 900px) {
  .footer__col { min-width: 0; overflow-wrap: anywhere; }
  .footer__address a { overflow-wrap: anywhere; }
  .commerce-items > .btn, .commerce-empty .btn { max-width: 100%; white-space: normal; text-align: center; }
}
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.mobile-actions .btn:disabled { background: var(--surface-2); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.order-proof .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }