/* kit.css — the CP52 website-kit component styles.
   A premium creative-studio aesthetic, fully driven by brand tokens (--kit-*)
   injected per build. Re-skinning a site = editing brand.json, never this file.
   Responsive (mobile-first), accessible (focus states, reduced-motion, contrast).

   Sections:
     1. Reset + base typography
     2. Layout primitives + buttons + eyebrow
     3. Header / nav (+ mobile)
     4. Hero
     5. Section / richtext
     6. Featured work + cards
     7. Gallery
     8. Feature grid
     9. Stat band
    10. Testimonials
    11. About (split)
    12. CTA band
    13. Contact + form
    14. SDK blocks (events / LMS)
    15. Footer
    16. Motion (reveal) + reduced-motion + print
*/

/* ============ 1. reset + base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--kit-font-body, system-ui, sans-serif);
  color: var(--kit-fg);
  /* The OUTER ground — what shows either side of the content column. Defaults
     to --kit-bg, so a site that never sets it looks exactly as it did. */
  background: var(--kit-page-bg, var(--kit-bg));
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  /* NO -webkit-font-smoothing HERE, deliberately (2026-08-30).
     `antialiased` switches macOS/Chrome from SUBPIXEL to GREYSCALE
     antialiasing. On dark-on-light body copy that thins every stroke, and at
     small sizes and regular weight the result reads as soft, furry, slightly
     out of focus — Damian on the blog's Featured Posts rail: "the text looks
     'frosty' and little furry/blurred". It is not font loading: Archivo and
     Jost were both loaded when it was measured. Big bold headings survive it
     because they have the mass to spare, which is why the same page can look
     crisp on the left and frosty on the right.
     The property is a no-op off macOS, so removing it changes nothing on
     Windows or Linux and restores the browser's own crisper default on a Mac.
     `antialiased` is genuinely useful for LIGHT text on a DARK ground — if a
     dark section ever wants it, it belongs on that section, not on body. */
  text-rendering: optimizeLegibility;
  /* keep UA form controls / scrollbars in step with the brand bg/fg, incl. the
     optional dark palette — the body bg/fg derive from --kit-bg/--kit-fg above. */
  color-scheme: light;
}

/* ── OPT OUT OF THE BROWSER'S OWN DARKENING ─────────────────────────────────
   `color-scheme: light` says "I prefer light". `only light` says "do NOT apply
   your automatic dark treatment to me", and it is the strongest signal a page
   can send. Chrome on macOS (and Chrome's auto-dark on Android) will otherwise
   re-render a light page dark on its own initiative, darkening PAINTED
   elements as it goes — Damian's demo showed a #ff9933 announcement bar as
   brown, a #2b6cb0 header as navy and white as grey, all dimmed by about the
   same amount, with the browser chrome untouched.
   It is invisible on Linux and in headless Chromium, so it cannot be caught
   here — only on the machine that shows it (2026-08-30).
   A brand WITH a real dark palette overrides this from brand.mjs, where it
   declares `light dark` beside its own dark tokens. */
:root { color-scheme: only light; }
/* NO `color-scheme: light dark` HERE. It used to be declared unconditionally
   under prefers-color-scheme: dark, with a comment calling it "cosmetically
   inert" when a brand had no dark palette. It is not inert: it TELLS the
   browser this page supports dark mode. On macOS, Chrome takes that at its
   word and applies its own dark treatment — which darkens painted elements
   too, so a #ff9933 announcement bar renders brown and a white page renders
   grey. That is the "super dark overlay" (Damian, 2026-08-30), and it is
   invisible on Linux/headless, which is why three passes of measuring the DOM
   found nothing: there was nothing in the DOM to find.
   A site only advertises dark support when it actually HAS a dark palette —
   brand.mjs emits this alongside those tokens, and nowhere else. */

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

h1, h2, h3, h4 {
  font-family: var(--kit-font-heading, var(--kit-font-body));
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  font-weight: 600;
}
h1 { font-size: var(--kit-heading-size, clamp(2.25rem, 1.6rem + 3vw, 3.75rem)); color: var(--kit-heading-color, inherit); }
h2 { font-size: var(--kit-subheading-size, clamp(1.65rem, 1.3rem + 1.6vw, 2.5rem)); color: var(--kit-subheading-color, inherit); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); }
p { margin: 0 0 1rem; }

a { color: var(--kit-accent); text-underline-offset: 0.15em; }

/* visible, brand-aware focus ring for keyboard users */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kit-accent) 60%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

.kit-skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--kit-accent);
  color: var(--kit-accent-contrast);
  border-radius: var(--kit-radius);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.18s ease;
}
.kit-skip-link:focus { top: 0.75rem; }

/* ============ 2. primitives ============ */
.kit-section-inner,
.kit-header-inner,
.kit-hero-inner,
.kit-footer-inner,
.kit-cta-inner,
.kit-stat-inner {
  width: 100%;
  max-width: var(--kit-max-width, 1120px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.kit-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kit-accent);
  margin: 0 0 0.75rem;
}
.kit-eyebrow--on-accent { color: color-mix(in srgb, var(--kit-accent-contrast) 85%, transparent); }

.kit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--kit-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.975rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  line-height: 1.2;
}
.kit-btn:hover { transform: translateY(-2px); }
.kit-btn:active { transform: translateY(0); }

.kit-btn-primary {
  background: var(--kit-accent);
  color: var(--kit-accent-contrast);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--kit-accent) 70%, transparent);
}
.kit-btn-primary:hover { box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--kit-accent) 75%, transparent); }

.kit-btn-ghost {
  background: transparent;
  color: var(--kit-fg);
  border-color: var(--kit-border);
}
.kit-btn-ghost:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
/* brand-emphasis ghost: blue outline at rest, fills blue on hover */
.kit-btn-ghost--brand { border-color: var(--kit-accent); color: var(--kit-accent); }
.kit-btn-ghost--brand:hover { background: var(--kit-accent); color: var(--kit-accent-contrast); }

.kit-btn-on-accent {
  background: var(--kit-accent-contrast);
  color: var(--kit-accent);
}
.kit-btn-ghost-on-accent {
  background: transparent;
  color: var(--kit-accent-contrast);
  border-color: color-mix(in srgb, var(--kit-accent-contrast) 55%, transparent);
}
.kit-btn-ghost-on-accent:hover { border-color: var(--kit-accent-contrast); }

/* ============ 3. header ============
   The header is a faithful copy of the live damiansemonin.art three-row stack:
   ROW 1 (utilbar)  — categories left, social + search + account + basket right
   ROW 2 (brandbar) — small CCS mark left | big Sémonin wordmark CENTRED | CTA right
   ROW 3 (pagebar)  — primary page nav, right-aligned, uppercase
   Single-logo clients (no subLogo) collapse to a left-aligned wordmark with the
   page nav on the same row, so the kit still reads well without the twin lockup. */
.kit-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kit-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kit-header.is-scrolled {
  border-bottom-color: var(--kit-border);
  box-shadow: 0 6px 20px -16px rgba(0, 0, 0, 0.5);
}

/* ROW 2 — brand lockup bar (cream surface, like the live e4e2dd row) */
.kit-brandbar { background: var(--kit-surface); }
.kit-brandbar-inner {
  width: 100%; max-width: var(--kit-max-width, 1120px); margin-inline: auto;
  padding: 0.55rem clamp(1.25rem, 5vw, 3.75rem);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem;
}
.kit-brandbar-left { display: flex; align-items: center; justify-content: flex-start; }
.kit-brandbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.kit-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--kit-fg);
}
.kit-sublogo-link { display: inline-flex; }
/* Sémonin wordmark — BIG + centred (enlarged ~50% to match live presence). CCS mark sized to its native 90×120. */
.kit-logo { width: 280px; max-width: 48vw; height: auto; display: block; }
.kit-sublogo { width: 96px; height: auto; display: block; }
.kit-wordmark {
  font-family: var(--kit-font-heading, var(--kit-font-body));
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
/* the soft (woad/clay) subscribe button used in the brand bar — matches live */
.kit-btn-soft { background: var(--kit-accent-2, var(--kit-accent)); color: #fff; border: 1px solid transparent; border-radius: 999px; padding: 0.5rem 1.4rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
.kit-btn-soft:hover { filter: brightness(0.94); color: #fff; }

/* ROW 3 — page-nav bar (same cream surface) */
/* The nav row's ground is a TOKEN with the old literal as its fallback, so every
   existing site renders byte-identically. It had to become one on 2026-08-31:
   `background: #ffffff` is right on a light site and catastrophic on a dark one
   — the dark starter rendered a white strip carrying near-white nav links,
   which is an unreadable menu on the very first thing anybody looks at. */
.kit-pagebar { background: var(--kit-pagebar-bg, #ffffff); border-top: 1px solid color-mix(in srgb, var(--kit-border) 60%, transparent); }
.kit-pagebar-inner {
  width: 100%; max-width: var(--kit-max-width, 1120px); margin-inline: auto;
  padding: 0.15rem clamp(1.25rem, 5vw, 3.75rem) 0.45rem;
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
}
/* search now lives at the LEFT of the white nav row; nav stays right */
.kit-pagebar-search { margin-right: auto; }

/* single-logo clients (no twin lockup): left-align the wordmark + put nav inline */
.kit-header:not(.kit-header--twotier) .kit-brandbar-inner { grid-template-columns: auto 1fr; }
.kit-header:not(.kit-header--twotier) .kit-brand { justify-content: flex-start; }
.kit-header:not(.kit-header--twotier) .kit-brandbar-left { display: none; }
.kit-header:not(.kit-header--twotier) .kit-logo { width: auto; height: 44px; }

@media (max-width: 768px) {
  .kit-logo { width: 210px; }
  .kit-sublogo { width: 76px; }
  .kit-wordmark { font-size: 1.25rem; }
}
.kit-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  flex-wrap: wrap;
}
.kit-nav a {
  text-decoration: none;
  color: var(--kit-fg);
  font-weight: 500;
  font-size: 0.975rem;
  position: relative;
}
.kit-nav a:not(.kit-btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--kit-accent);
  transition: right 0.2s ease;
}
.kit-nav a:not(.kit-btn):hover { color: var(--kit-accent); }
.kit-nav a:not(.kit-btn):hover::after { right: 0; }
/* current page — persistent underline + accent text (accessible: aria-current) */
.kit-nav a.is-active:not(.kit-btn) { color: var(--kit-accent); }
.kit-nav a.is-active:not(.kit-btn)::after { right: 0; }
/* ---- utility/category bar (categories left · social + search + account + basket right)
   Light strip with dark text, like the live dh_top row (#f5f0e9). ---- */
.kit-utilbar { background: var(--kit-util-bg, #f5f0e9); color: var(--kit-fg); font-size: 0.82rem; border-bottom: 1px solid color-mix(in srgb, var(--kit-border) 50%, transparent); }
.kit-utilbar-inner {
  width: 100%; max-width: var(--kit-max-width, 1120px); margin-inline: auto;
  padding: 0.25rem clamp(1.25rem, 5vw, 3.75rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* category nav living in the top strip */
.kit-utilnav { display: flex; align-items: center; gap: clamp(0.8rem, 1.8vw, 1.5rem); }
@media (max-width: 900px) { .kit-utilnav { display: none; } }
.kit-util-social { display: flex; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.kit-util-social a, .kit-util-link, .kit-util-search button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 6px;
  color: var(--kit-fg); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.kit-util-link:hover, .kit-util-search button:hover { background: color-mix(in srgb, var(--kit-accent) 12%, transparent); color: var(--kit-accent); }
/* social icons = circular dark-filled (matches live); search/account/basket stay plain */
.kit-util-social a { background: var(--kit-fg); color: var(--kit-bg); border-radius: 50%; width: 2.35rem; height: 2.35rem; }
.kit-util-social a:hover { background: var(--kit-accent); color: #fff; }
/* the GLYPH inside each social circle reads too small at 17px — grow it
   noticeably while the circle stays the same size (Damian, 2026-06-29). */
.kit-util-social .kit-util-ico { width: 23px; height: 23px; }
.kit-util-actions { display: flex; align-items: center; gap: 0.25rem; }
.kit-util-ico {
  width: 17px; height: 17px; display: inline-block;
  background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}
.kit-util-ico[data-ico="substack"]  { -webkit-mask-image: var(--ico-substack); mask-image: var(--ico-substack); }
.kit-util-ico[data-ico="instagram"] { -webkit-mask-image: var(--ico-instagram); mask-image: var(--ico-instagram); }
.kit-util-ico[data-ico="youtube"]   { -webkit-mask-image: var(--ico-youtube); mask-image: var(--ico-youtube); }
.kit-util-ico[data-ico="facebook"]  { -webkit-mask-image: var(--ico-facebook); mask-image: var(--ico-facebook); }
.kit-util-ico[data-ico="search"]    { -webkit-mask-image: var(--ico-search); mask-image: var(--ico-search); }
.kit-util-ico[data-ico="user"]      { -webkit-mask-image: var(--ico-user); mask-image: var(--ico-user); }
.kit-util-ico[data-ico="cart"]      { -webkit-mask-image: var(--ico-cart); mask-image: var(--ico-cart); }
/* Round 14 (2026-08-17): two more social icons joined the set,
   and an entry with NO icon hides instead of painting a blank mask box —
   five empty white squares wore the footer until this. */
.kit-util-ico[data-ico="pinterest"] { -webkit-mask-image: var(--ico-pinterest); mask-image: var(--ico-pinterest); }
.kit-util-ico[data-ico="etsy"]      { -webkit-mask-image: var(--ico-etsy); mask-image: var(--ico-etsy); }
.kit-util-ico[data-ico=""] { display: none; }
:root {
  --ico-substack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18v2.6H3zM3 9.1h18V24l-9-5-9 5zM3 13.9V11.7h18v2.2z'/%3E%3C/svg%3E");
  --ico-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.17.4.37 1 .42 2.2.06 1.3.07 1.7.07 4.9s0 3.6-.07 4.9c-.05 1.2-.25 1.8-.42 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.17-1 .37-2.2.42-1.3.06-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.05-1.8-.25-2.2-.42-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.17-.4-.37-1-.42-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.9c.05-1.2.25-1.8.42-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.17 1-.37 2.2-.42C8.4 2.2 8.8 2.2 12 2.2m0 5a4.8 4.8 0 100 9.6 4.8 4.8 0 000-9.6m0 7.9a3.1 3.1 0 110-6.2 3.1 3.1 0 010 6.2m6.1-8.1a1.1 1.1 0 11-2.2 0 1.1 1.1 0 012.2 0'/%3E%3C/svg%3E");
  --ico-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23 7.5a3 3 0 00-2.1-2.1C19 5 12 5 12 5s-7 0-8.9.4A3 3 0 001 7.5 31 31 0 00.6 12 31 31 0 001 16.5a3 3 0 002.1 2.1C5 19 12 19 12 19s7 0 8.9-.4a3 3 0 002.1-2.1A31 31 0 0023.4 12 31 31 0 0023 7.5M9.8 15.3V8.7l5.7 3.3z'/%3E%3C/svg%3E");
  --ico-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M4 21a8 8 0 0116 0M12 11a4 4 0 100-8 4 4 0 000 8z'/%3E%3C/svg%3E");
  --ico-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 4h2l2.4 12.3a1 1 0 001 .8h9.8a1 1 0 001-.8L21 8H6M9 21a1 1 0 100-2 1 1 0 000 2zm9 0a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E");
  --ico-pinterest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-3.7 19.3c-.1-.8-.2-2 0-2.9l1.3-5.4s-.3-.6-.3-1.6c0-1.5.9-2.6 1.9-2.6.9 0 1.4.7 1.4 1.5 0 .9-.6 2.3-.9 3.5-.3 1.1.5 1.9 1.6 1.9 1.9 0 3.3-2 3.3-4.9 0-2.5-1.8-4.3-4.4-4.3a4.6 4.6 0 0 0-4.8 4.6c0 .9.3 1.9.8 2.4a.3.3 0 0 1 .1.3l-.3 1.1c0 .2-.2.3-.4.2-1.3-.6-2.1-2.5-2.1-4 0-3.3 2.4-6.3 6.9-6.3 3.6 0 6.4 2.6 6.4 6 0 3.6-2.3 6.5-5.4 6.5-1 0-2-.5-2.4-1.2l-.6 2.5c-.2.9-.9 2.1-1.3 2.8A10 10 0 1 0 12 2z'/%3E%3C/svg%3E");
  --ico-etsy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3.5c1.6.1 2 .3 2 1.9v13.2c0 1.6-.4 1.8-2 1.9V22h11.6l.5-4.2h-1.5c-.5 1.7-.9 2.3-2.7 2.3h-3.2c-.5 0-.7-.2-.7-.7v-6.2h3.4c1.3 0 1.6.5 1.9 1.8h1.4v-5.4h-1.4c-.3 1.3-.6 1.8-1.9 1.8h-3.4V4.6c0-.5.2-.7.7-.7h2.9c1.8 0 2.2.6 2.6 2.2h1.5L17.3 2H6v1.5z'/%3E%3C/svg%3E");
}
.kit-util-search { display: flex; align-items: center; gap: 0.2rem; }
.kit-util-search input {
  width: 0; padding: 0; border: none; background: color-mix(in srgb, var(--kit-fg) 8%, transparent); color: var(--kit-fg);
  border-radius: 6px; font: inherit; font-size: 0.82rem; height: 1.7rem; opacity: 0;
  transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}
.kit-util-search input::placeholder { color: var(--kit-muted); }
.kit-util-search:focus-within input, .kit-util-search input:not(:placeholder-shown) { width: 9rem; opacity: 1; padding: 0 0.5rem; }
.kit-util-cart { position: relative; }
.kit-util-cartcount {
  position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
  font-size: 0.62rem; font-weight: 800; line-height: 15px; text-align: center;
  background: var(--kit-accent); color: var(--kit-accent-contrast); border-radius: 999px;
}
/* collapse the hover-expand utilbar search on small screens, but NOT the
   always-visible pill search (.kit-brand-search) that lives in the white nav row */
@media (max-width: 600px) { .kit-util-search:not(.kit-brand-search) input { display: none; } }

/* the site search now lives at the LEFT of the white page-nav row.
   Visible + usable by default (a bordered pill), not a hover-expand. */
.kit-brand-search { gap: 0; border: 1px solid var(--kit-border); border-radius: 999px; background: var(--kit-bg); padding: 0.1rem 0.1rem 0.1rem 0.6rem; }
.kit-brand-search input {
  width: 7.5rem; opacity: 1; height: 1.7rem; padding: 0 0.25rem;
  background: transparent; border: none; color: var(--kit-fg); font: inherit; font-size: 0.82rem;
  transition: width 0.2s ease;
}
.kit-brand-search:focus-within input { width: 9.5rem; }
.kit-brand-search input::placeholder { color: var(--kit-muted); }
.kit-brand-search button { width: 1.9rem; height: 1.9rem; border-radius: 50%; }
@media (max-width: 768px) { .kit-brand-search input { width: 6rem; } }
/* keep search visible + reachable on phones (it sits in the white bar beside the burger) */
@media (max-width: 480px) { .kit-brand-search input { width: 5rem; } }

/* ---- page nav (row 3) ---- */
.kit-navwrap { display: flex; align-items: center; justify-content: flex-end; gap: clamp(0.6rem, 1.5vw, 1.2rem); }
/* account + basket icons, moved DOWN into the primary white nav (right side) */
.kit-nav-icons { display: flex; align-items: center; gap: 0.3rem; }
.kit-nav-icons .kit-nav-icon-label { display: none; } /* icon-only on desktop */
/* these read as tiny — bump the tap target + the glyph (Damian, 2026-06-29) */
.kit-nav-icons .kit-util-link { width: 2.5rem; height: 2.5rem; }
.kit-nav-icons .kit-util-ico { width: 24px; height: 24px; }
/* keep the basket count badge proportional to the larger basket glyph */
.kit-nav-icons .kit-util-cartcount { top: 3px; right: 3px; }
.kit-nav--pages { gap: clamp(0.9rem, 2vw, 1.7rem); }
.kit-nav--pages .kit-nav-link {
  font-family: var(--kit-font-heading, inherit);
  font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--kit-fg); padding-block: 0.35rem;
}
.kit-nav--pages .kit-nav-link.is-active { color: var(--kit-accent); border-bottom: 3px solid var(--kit-accent); }
.kit-nav--pages .kit-nav-link.is-active::after { display: none; }
/* mark the dropdown open when one of its children is the current page */
.kit-nav--pages .kit-nav-ddlink.is-active { color: var(--kit-accent); font-weight: 700; }

/* the magnifier search ICON (replaces the oblong input pill); stays in the
   white nav, left. Clicking it goes to /search/ (which works). */
.kit-search-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  color: var(--kit-fg); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.kit-search-icon:hover { background: color-mix(in srgb, var(--kit-accent) 12%, transparent); color: var(--kit-accent); }
.kit-search-icon .kit-util-ico { width: 22px; height: 22px; }

/* The sub-link style is all that survives of the old dropdown: the renderer
   still puts `.kit-nav-ddlink` on every sub-link so a pinned lineage keeps its
   link styling. Everything else that was here — `.kit-nav-dd`, `.kit-nav-ddbtn`,
   `.kit-nav-ddcaret(btn)`, `.kit-nav-ddmenu`, `.kit-nav-dd--split`,
   `.kit-nav-ddlabel` — was deleted on 2026-09-07 with the navigation rebuild
   (SPEC §6.3). No component emits any of those classes, and the hover/
   focus-within rule that used to sit here showed a menu with no `[hidden]`
   hide anywhere able to defeat it — the shape
   smoke/menus-are-closed-at-rest.test.mjs now forbids. The menu is
   kit/styles/kit-nav.css. */
.kit-nav-ddlink { padding: 0.5rem 0.7rem; border-radius: 7px; text-decoration: none; color: var(--kit-fg); font-size: 0.92rem; font-weight: 500; }
.kit-nav-ddlink:hover { background: color-mix(in srgb, var(--kit-accent) 12%, transparent); color: var(--kit-accent); }

@media (max-width: 900px) {
  .kit-header { position: relative; }
  /* mobile: the page-nav links live in the toggle drawer; the white bar keeps
     the search pill (left) visible + reachable. */
  .kit-pagebar { border-top: none; }
  .kit-pagebar-inner { padding-block: 0.3rem; min-height: 0; }
  .kit-pagebar-search { margin-right: auto; }
  .kit-navwrap {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    background: var(--kit-bg);
    border-bottom: 1px solid var(--kit-border);
    box-shadow: 0 16px 30px -20px rgba(0, 0, 0, 0.5);
    padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.25rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    z-index: 55;
  }
  .kit-navwrap.is-open { max-height: 85vh; overflow-y: auto; opacity: 1; pointer-events: auto; }
  .kit-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  /* the PRIMARY nav is first in source -> it reveals at the TOP of the drawer */
  .kit-nav--pages { order: 0; }
  /* account/basket icons sit between primary and secondary, as a labelled row */
  .kit-nav-icons { order: 1; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .kit-nav-icons .kit-util-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0; border-bottom: 1px solid var(--kit-border); border-radius: 0; width: auto; height: auto; justify-content: flex-start; text-transform: uppercase; font-weight: 600; font-size: 0.85rem; }
  .kit-nav-icons .kit-nav-icon-label { display: inline; }
  .kit-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--kit-border); text-transform: uppercase; }
  .kit-nav a:not(.kit-btn)::after { display: none; }
  .kit-nav--pages .kit-nav-link.is-active { border-bottom: 1px solid var(--kit-border); }
  .kit-nav-ddlink { border-bottom: 1px solid var(--kit-border); border-radius: 0; }
}
@media (max-width: 900px) { .kit-brandbar-cta { display: none; } }

/* ============ 4. hero ============ */
.kit-hero {
  position: relative;
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--kit-accent) 12%, transparent) 0%, transparent 55%),
    var(--kit-surface);
  overflow: hidden;
}
.kit-hero-inner { text-align: center; max-width: 820px; }
.kit-hero-copy h1 { margin-bottom: 0.3em; }
.kit-hero-sub {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--kit-muted);
  margin: 0 auto 1.2rem;
  max-width: 60ch;
}
.kit-hero-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

/* split hero with media */
.kit-hero--split .kit-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
  max-width: var(--kit-max-width, 1120px);
}
.kit-hero--split .kit-hero-sub { margin-inline: 0; }
.kit-hero--split .kit-hero-actions { justify-content: flex-start; }
.kit-hero-media img {
  width: 100%;
  border-radius: calc(var(--kit-radius) * 1.6);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.4);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 820px) {
  .kit-hero--split .kit-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .kit-hero--split .kit-hero-sub { margin-inline: auto; }
  .kit-hero--split .kit-hero-actions { justify-content: center; }
  .kit-hero-media { order: -1; max-width: 420px; margin-inline: auto; }
}

/* ============ 5. section / richtext ============
   Spacing tightened (Damian: "masses of too much space around elements") —
   sections, intros, CTAs and gaps pulled in for a compact, professional feel. */
.kit-section { padding-block: clamp(1.25rem, 2.4vw, 1.9rem); }
.kit-section > .kit-section-inner > h2 { max-width: 24ch; margin-bottom: 0.4em; }
.kit-section-intro {
  color: var(--kit-muted);
  max-width: 62ch;
  font-size: 1.04rem;
  margin-bottom: 1.3rem;
}
.kit-richtext { max-width: 68ch; }
/* a richtext section directly after an article body (e.g. a post split around a
   video embed) keeps the article's narrow, centred measure so the text aligns. */
.kit-article + .kit-section .kit-richtext,
.kit-section:has(> .kit-section-inner > .kit-richtext) > .kit-section-inner { max-width: 46rem; }
.kit-richtext p { margin-bottom: 1.1rem; }
.kit-richtext a { font-weight: 500; }

/* --- code blocks + tables inside prose (added 2026-08-30) ---------------
   No blog post had ever used <pre> or <table>, so nothing styled them: a
   technical article rendered as bare browser defaults and, worse, a long
   command line pushed the whole PAGE into horizontal scroll on a phone. The
   overflow belongs to the block, never to the body. */
.kit-richtext pre {
  background: var(--kit-field-bg, #f5f7f8);
  border: 1px solid var(--kit-border);
  border-radius: var(--kit-radius, 6px);
  padding: 0.9rem 1rem;
  overflow-x: auto;               /* the block scrolls, the page does not */
  font-size: 0.86rem;
  line-height: 1.55;
  margin-bottom: 1.2rem;
  -webkit-overflow-scrolling: touch;
}
.kit-richtext pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  white-space: pre;               /* commands must not re-wrap mid-flag */
}
.kit-richtext code {
  background: var(--kit-field-bg, #f5f7f8);
  border: 1px solid var(--kit-border);
  border-radius: 4px;
  padding: 0.08em 0.34em;
  font-size: 0.9em;
  overflow-wrap: break-word;      /* a long inline path wraps, never overflows */
}
.kit-richtext table {
  display: block;                 /* so overflow-x applies; the standard markdown-table fix */
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-bottom: 1.3rem;
  font-size: 0.94rem;
}
.kit-richtext th,
.kit-richtext td {
  border: 1px solid var(--kit-border);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.kit-richtext th {
  background: var(--kit-field-bg, #f5f7f8);
  font-weight: 600;
}

.kit-section-cta { margin-top: 1.5rem; }
.kit-section-cta--left { text-align: left; }
.kit-section-cta--right { text-align: right; }

/* ============ 6. featured work + cards ============ */
.kit-card {
  background: var(--kit-bg);
  border: 1px solid var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.3);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.kit-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--kit-accent) 35%, var(--kit-border));
  box-shadow: 0 24px 44px -28px rgba(0, 0, 0, 0.45);
}

.kit-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.kit-featured-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.kit-featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.kit-featured-card:hover .kit-featured-media img { transform: scale(1.04); }
.kit-card-body { padding: 1.25rem 1.4rem 1.5rem; }
.kit-card-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kit-accent);
  margin: 0 0 0.4rem;
}
.kit-card-title { margin: 0 0 0.4rem; }
.kit-card-title a { color: inherit; text-decoration: none; }
.kit-card-title a:hover { color: var(--kit-accent); }
.kit-card-summary { color: var(--kit-muted); margin: 0; font-size: 0.97rem; }

/* empty state — calm, branded, never a broken-looking blank grid */
.kit-empty {
  grid-column: 1 / -1;
  list-style: none;
  text-align: center;
  color: var(--kit-muted);
  background: var(--kit-surface);
  border: 1.5px dashed var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.2);
  padding: 2.5rem 1.5rem;
  margin: 0;
}

/* ============ 7. gallery ============ */
.kit-gallery { list-style: none; margin: 0; padding: 0; }
.kit-gallery--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
.kit-gallery--wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: clamp(0.85rem, 2vw, 1.5rem);
}
/* masonry via CSS columns — graceful, no JS */
.kit-gallery--masonry { columns: 3 240px; column-gap: clamp(0.85rem, 2vw, 1.25rem); }
.kit-gallery--masonry .kit-gallery-item { break-inside: avoid; margin-bottom: clamp(0.85rem, 2vw, 1.25rem); }

.kit-gallery-item { margin: 0; }
.kit-gallery figure {
  margin: 0;
  position: relative;
  border-radius: var(--kit-radius);
  overflow: hidden;
  background: var(--kit-surface);
}
.kit-gallery--grid figure img,
.kit-gallery--wide figure img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.kit-gallery--wide figure img { aspect-ratio: 4 / 3; }
.kit-gallery figure img { transition: transform 0.4s ease; }
.kit-gallery figure:hover img { transform: scale(1.05); }
.kit-gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1rem 0.85rem;
  background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.kit-gallery figure:hover figcaption,
.kit-gallery figure:focus-within figcaption { opacity: 1; transform: translateY(0); }
.kit-gallery-title { font-weight: 600; }
.kit-gallery-meta { font-size: 0.85rem; opacity: 0.85; }
.kit-gallery-link { display: block; cursor: zoom-in; }
.kit-gallery-link:focus-visible { outline: 3px solid var(--kit-accent); outline-offset: 2px; }

/* lightbox dialog (A5) — only used when JS is on; degrades to a plain image link */
.kit-lightbox {
  border: none;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  padding: 0;
  margin: auto;
  color: #fff;
}
.kit-lightbox::backdrop { background: rgba(0, 0, 0, 0.86); }
.kit-lightbox[open] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}
.kit-lightbox-figure { margin: 0; text-align: center; }
.kit-lightbox-figure img {
  max-width: 88vw;
  max-height: 84vh;
  border-radius: var(--kit-radius);
  display: block;
  margin: 0 auto;
}
.kit-lightbox-figure figcaption { margin-top: 0.6rem; font-size: 0.95rem; opacity: 0.9; }
.kit-lightbox-close,
.kit-lightbox-nav {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.kit-lightbox-close { position: fixed; top: 1rem; right: 1rem; }
.kit-lightbox-close:hover,
.kit-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.kit-lightbox-close:focus-visible,
.kit-lightbox-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  .kit-lightbox[open] { grid-template-columns: 1fr; }
  .kit-lightbox-nav { position: fixed; bottom: 1rem; }
  .kit-lightbox-prev { left: 1rem; }
  .kit-lightbox-next { right: 1rem; }
}

/* ============ 7b. blog / article (A6) ============ */
.kit-article-inner { max-width: 46rem; }
.kit-article-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0.25rem 0 0.5rem; }
.kit-article-meta { color: var(--kit-muted); font-size: 0.9rem; margin: 0 0 1.25rem; }
.kit-article-cover { width: 100%; border-radius: var(--kit-radius); margin-bottom: 1.5rem; }
.kit-article-body { font-size: 1.05rem; line-height: 1.7; }
.kit-article-tags, .kit-post-card .kit-article-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.5rem 0 0; }
.kit-tag {
  font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-weight: 600;
  background: color-mix(in srgb, var(--pill, var(--kit-accent)) 15%, transparent);
  color: color-mix(in srgb, var(--pill, var(--kit-accent)) 78%, #2a2622);
}
/* per-category pill colours (CCS = brand cyan); unmatched tags fall back to accent */
.kit-tag[data-tag="Cornish Cycling Sketcher"] { --pill: #2196c9; }
.kit-tag[data-tag="Mind, Body & Soul"]        { --pill: #5f8a6f; }
.kit-tag[data-tag="Reads"]                    { --pill: #b8893f; }
.kit-tag[data-tag="Studio"]                   { --pill: #b9614a; }
/* Art pill = solid fill matching the Subscribe button (--kit-accent-2), so it stands out */
.kit-tag[data-tag="Art"] { background: var(--kit-accent-2, #8f8074); color: #fff; }
.kit-post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.kit-post-card {
  border: 1px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2);
  background: var(--kit-surface); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.kit-post-title { margin: 0.1rem 0 0.4rem; font-size: 1.3rem; }
.kit-post-title a { color: var(--kit-fg); text-decoration: none; }
.kit-post-title a:hover { color: var(--kit-accent); }
.kit-post-summary { margin: 0; color: var(--kit-muted); }

/* optional cover image on a post card (carousel + grid) */
.kit-post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.kit-post-card > article { display: flex; flex-direction: column; height: 100%; }
.kit-post-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--kit-accent) 10%, var(--kit-surface)); }
/* show the whole cover (e.g. the square PITSO splash) instead of a 16:9 crop */
.kit-post-cover--contain img { object-fit: contain; }
.kit-post-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.kit-post-card:hover .kit-post-cover img { transform: scale(1.04); }
.kit-post-body { padding: clamp(1.1rem, 3vw, 1.6rem); display: flex; flex-direction: column; flex: 1; }
.kit-post-body .kit-article-tags { margin-top: auto; padding-top: 1rem; }

/* ---- blog carousel (the live homepage journal strip) ---- */
.kit-carousel { position: relative; }
.kit-carousel-track {
  display: flex; gap: clamp(1rem, 2.5vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 0.5rem 0.25rem 1.25rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.kit-carousel-slide {
  flex: 0 0 calc((100% - clamp(1rem, 2.5vw, 1.6rem)) / 2);
  scroll-snap-align: start;
}
@media (max-width: 760px) { .kit-carousel-slide { flex-basis: 88%; } }
@media (min-width: 1100px) { .kit-carousel-slide { flex-basis: calc((100% - 2 * clamp(1rem, 2.5vw, 1.6rem)) / 3); } }
.kit-carousel-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  z-index: 3; width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--kit-border); background: color-mix(in srgb, var(--kit-bg) 85%, transparent);
  backdrop-filter: blur(4px); color: var(--kit-fg);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 6px 18px -8px rgba(16,24,40,.3);
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.kit-carousel-arrow:hover { background: var(--kit-accent); color: var(--kit-accent-contrast); border-color: var(--kit-accent); }
.kit-carousel-arrow[hidden] { display: none; }
.kit-carousel-prev { left: -8px; }
.kit-carousel-next { right: -8px; }
@media (max-width: 760px) { .kit-carousel-arrow { display: none; } }
.kit-carousel-track:focus-visible { outline: 3px solid color-mix(in srgb, var(--kit-accent) 60%, transparent); outline-offset: 3px; border-radius: var(--kit-radius); }

/* ---- image carousel (the "Carousel" element) ----
   A horizontal strip of image cards built on the generic .kit-carousel scroll
   behaviour above, reusing the gallery lightbox (a[data-lightbox]). Shows ~4
   cards on desktop, ~3 on tablet, ~1.4 on mobile (swipe; arrows hidden < 760px
   like the blog carousel). */
.kit-carousel-strip { list-style: none; margin: 0; }
.kit-carousel-gallery .kit-carousel-slide {
  flex-basis: calc((100% - 3 * clamp(1rem, 2.5vw, 1.6rem)) / 4);
}
@media (max-width: 1099px) {
  .kit-carousel-gallery .kit-carousel-slide { flex-basis: calc((100% - 2 * clamp(1rem, 2.5vw, 1.6rem)) / 3); }
}
@media (max-width: 760px) {
  .kit-carousel-gallery .kit-carousel-slide { flex-basis: 72%; }
}
.kit-carousel-figure { margin: 0; }
.kit-carousel-link {
  display: block; cursor: zoom-in; overflow: hidden;
  border-radius: var(--kit-radius);
  background: color-mix(in srgb, var(--kit-fg) 6%, transparent);
}
.kit-carousel-link img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.kit-carousel-figure:hover .kit-carousel-link img { transform: scale(1.05); }
.kit-carousel-link:focus-visible { outline: 3px solid var(--kit-accent); outline-offset: 2px; }
.kit-carousel-caption { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
@media (prefers-reduced-motion: reduce) {
  .kit-carousel-link img { transition: none; }
  .kit-carousel-figure:hover .kit-carousel-link img { transform: none; }
}

/* ============ 8. feature grid ============ */
.kit-feature-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
}
.kit-feature {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.2);
  background: var(--kit-surface);
}
.kit-feature-icon {
  display: inline-flex;
  font-size: 1.35rem;
  width: 2.4rem; height: 2.4rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kit-accent) 14%, transparent);
  margin-bottom: 0.6rem;
}
.kit-feature-title { margin: 0 0 0.3rem; font-size: 1.12rem; }
.kit-feature-body { margin: 0; color: var(--kit-muted); font-size: 0.97rem; }

/* ============ 8a. explore-by-medium image tiles (live hallmark) ============ */
.kit-medium-section { background: var(--kit-bg); }
.kit-medium-h { text-align: center; }
.kit-medium-intro { text-align: center; margin-inline: auto; }
.kit-medium-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 991px) { .kit-medium-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .kit-medium-grid { grid-template-columns: 1fr; } }
.kit-medium-card {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 260px; padding: 36px 24px; border-radius: calc(var(--kit-radius) * 1.4);
  overflow: hidden; text-decoration: none;
  background-color: var(--kit-accent-2, #8f8074); background-size: cover; background-position: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 12px 30px -22px rgba(0,0,0,0.55);
}
.kit-medium-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(0,0,0,0.6); }
.kit-medium-card-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem;
}
.kit-medium-title { font-family: var(--kit-font-heading); font-weight: 600; font-size: 1.5rem; color: #fff; }
.kit-medium-body { font-size: 0.95rem; color: #f5f0e9; line-height: 1.5; max-width: 22ch; }
.kit-medium-btn {
  margin-top: 0.35rem; display: inline-block; background: #fff; color: var(--kit-fg);
  font-family: var(--kit-font-heading); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 0.5rem 1.25rem; border-radius: 999px;
}
.kit-medium-card:hover .kit-medium-btn { background: var(--kit-accent); color: var(--kit-accent-contrast); }

/* ============ 8a2. shop category tiles ============ */
.kit-cattiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(0.85rem, 1.8vw, 1.35rem); }
.kit-cattile {
  display: flex; flex-direction: column; text-decoration: none; color: var(--kit-fg);
  border: 1px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2);
  overflow: hidden; background: var(--kit-surface); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kit-cattile:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -22px rgba(0,0,0,0.5); }
.kit-cattile-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--kit-accent) 10%, var(--kit-surface)); }
.kit-cattile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.kit-cattile:hover .kit-cattile-media img { transform: scale(1.05); }
.kit-cattile-body { padding: 0.75rem 0.9rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.kit-cattile-title { font-family: var(--kit-font-heading); font-weight: 600; font-size: 1rem; }
.kit-cattile-count { font-size: 0.78rem; color: var(--kit-muted); }
/* round 11 (2026-08-16): editorial tile rows — summary blurb, unlinked cells,
   larger tracks. New classes only; existing tile markup is unchanged. */
.kit-cattile-body { flex-wrap: wrap; }
.kit-cattile-summary { flex-basis: 100%; font-size: 0.85rem; line-height: 1.45; color: var(--kit-muted); margin-top: 0.2rem; }
.kit-cattile--plain { cursor: default; }
.kit-cattile--plain:hover { transform: none; box-shadow: none; }
.kit-cattile--plain:hover .kit-cattile-media img { transform: none; }
.kit-cattiles--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.kit-cattiles--large .kit-cattile-title { font-size: 1.1rem; }

/* ============ 8a3. reads (book grid + book detail page) ============ */
.kit-reads-section .kit-reads-h { text-align: center; }
.kit-reads-intro { margin-left: auto; margin-right: auto; }
.kit-reads-grid {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
}
@media (max-width: 560px) { .kit-reads-grid { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } }
.kit-read-card { display: flex; }
.kit-read-link {
  display: flex; flex-direction: column; gap: 0.55rem; width: 100%;
  text-decoration: none; color: var(--kit-fg);
}
.kit-read-cover {
  display: block; position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: calc(var(--kit-radius) * 0.8);
  background: color-mix(in srgb, var(--kit-accent) 8%, var(--kit-surface));
  box-shadow: 0 12px 26px -16px rgba(0,0,0,0.55);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.kit-read-link:hover .kit-read-cover { transform: translateY(-4px); box-shadow: 0 20px 38px -18px rgba(0,0,0,0.6); }
.kit-read-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-read-cover--type { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--kit-accent) 80%, #000), var(--kit-accent)); }
.kit-read-cover-type { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; text-align: center; color: #fff; }
.kit-read-cover-title { font-family: var(--kit-font-heading); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.kit-read-cover-author { font-size: 0.78rem; opacity: 0.85; }
.kit-read-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.kit-read-title { font-family: var(--kit-font-heading); font-weight: 600; font-size: 0.98rem; line-height: 1.25; }
.kit-read-link:hover .kit-read-title { color: var(--kit-accent); }
.kit-read-author { font-size: 0.82rem; color: var(--kit-muted); }
.kit-read-hook { font-size: 0.82rem; color: var(--kit-muted); margin-top: 0.2rem; }

/* Unified "read & listened to" shelf: cover grid LEFT + a sticky right-hand
   theme filter (mirrors the workshops eventsList sidebar). The grid is visible
   by default; the filter is pure progressive enhancement (kit.js). */
.kit-reads-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 22%, 272px);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  margin-top: 1.6rem;
}
.kit-reads-layout .kit-reads-grid { margin-top: 0; }
.kit-reads-side {
  position: sticky; top: 1.5rem;
  background: var(--kit-surface);
  border: 1px solid var(--kit-border);
  border-radius: var(--kit-radius);
  padding: 1.1rem 1.15rem 1.25rem;
  box-shadow: 0 12px 26px -20px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.kit-reads-side-h {
  margin: 0; font-family: var(--kit-font-heading, inherit);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kit-muted);
}
.kit-reads-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.kit-reads-cat {
  width: 100%; text-align: left; font: inherit; font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.48rem 0.6rem; border: 1px solid transparent;
  border-radius: calc(var(--kit-radius) * 0.7);
  background: none; color: var(--kit-fg);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kit-reads-cat:hover { background: color-mix(in srgb, var(--kit-accent) 8%, transparent); }
.kit-reads-cat.is-on {
  background: color-mix(in srgb, var(--kit-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--kit-accent) 40%, transparent);
  color: var(--kit-accent); font-weight: 600;
}
.kit-reads-cat:focus-visible {
  outline: none; border-color: var(--kit-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-accent) 22%, transparent);
}
.kit-reads-cat-n {
  font-size: 0.74rem; color: var(--kit-muted); font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--kit-accent) 9%, var(--kit-bg));
  padding: 0.05rem 0.42rem; border-radius: 999px; min-width: 1.5rem; text-align: center;
}
.kit-reads-cat.is-on .kit-reads-cat-n { color: var(--kit-accent); }
.kit-reads-reset {
  align-self: flex-start; font: inherit; font-size: 0.82rem; cursor: pointer;
  background: none; border: none; padding: 0; color: var(--kit-accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.kit-reads-count { margin: 0; font-size: 0.8rem; color: var(--kit-muted); }
.kit-reads-empty { margin: 0; font-size: 0.85rem; color: var(--kit-muted); }
.kit-reads-filtered .kit-reads-h,
.kit-reads-filtered .kit-reads-intro { text-align: center; }
/* Narrow: drop the filter below the grid, full width, non-sticky, chips wrap */
@media (max-width: 760px) {
  .kit-reads-layout { grid-template-columns: 1fr; }
  .kit-reads-side { position: static; }
  .kit-reads-cats { flex-direction: row; flex-wrap: wrap; }
  .kit-reads-cat { width: auto; }
}

/* Reads as a one-line carousel (the MBS shelf above the Essays list). The strip
   is left-aligned (not centred like the grid) and constrained to the Essays
   main-column width via .kit-reads-essayswidth, so it sits flush above it. */
.kit-reads-carousel .kit-reads-h,
.kit-reads-carousel .kit-reads-intro { text-align: left; margin-left: 0; margin-right: 0; }
/* let the shelf intro run the full carousel/strip width, not the 62ch measure */
.kit-reads-carousel .kit-reads-intro { max-width: none; }
@media (min-width: 901px) {
  /* Essays uses .kit-blog-layout--sidebar = 1fr main + 19rem rail with a
     clamp(1.5rem,3.5vw,2.75rem) gap. Reserve rail+gap on the right (on top of
     the inner's own clamp padding) so the shelf strip lines up above the essay
     main column. */
  .kit-reads-essayswidth .kit-section-inner {
    padding-right: calc(19rem + clamp(1.5rem, 3.5vw, 2.75rem) + clamp(1.25rem, 5vw, 2.5rem));
  }
}
.kit-reads-strip {
  list-style: none; margin: 1.4rem 0 0; padding: 0.4rem 0 0.8rem;
  display: flex; gap: clamp(0.9rem, 2vw, 1.4rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.kit-reads-strip .kit-read-card {
  flex: 0 0 auto; width: clamp(120px, 22%, 150px); scroll-snap-align: start;
}
.kit-reads-librarylink { margin-top: 0.4rem; }
/* tighten the gap below the shelf: drop its bottom padding */
.kit-reads-carousel { padding-bottom: 0; }
/* shelf folded into the blog main column: strip its section padding + max-width to fill */
.kit-blog-main > .kit-reads-section { padding: 0; margin: 0 0 clamp(1.5rem, 3vw, 2.2rem); }
.kit-blog-main > .kit-reads-section > .kit-section-inner { padding: 0; max-width: none; }
.kit-blog-mainhead { margin-top: 0; }
@media (max-width: 900px) {
  .kit-reads-strip .kit-read-card { width: clamp(120px, 40%, 150px); }
}

.kit-book-inner.kit-book-inner {
  display: grid; grid-template-columns: minmax(200px, 280px) 1fr;
  gap: clamp(1.6rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 640px) { .kit-book-inner.kit-book-inner { grid-template-columns: 1fr; max-width: 420px; } }
.kit-book-cover {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: calc(var(--kit-radius) * 0.9);
  background: color-mix(in srgb, var(--kit-accent) 8%, var(--kit-surface));
  box-shadow: 0 20px 44px -20px rgba(0,0,0,0.6);
}
.kit-book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-book-cover--type { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--kit-accent) 80%, #000), var(--kit-accent)); }
.kit-book-cover-type { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; text-align: center; color: #fff; }
.kit-book-cover-title { font-family: var(--kit-font-heading); font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.kit-book-cover-author { font-size: 0.9rem; opacity: 0.85; }
.kit-book-eyebrow { margin-top: 0; }
.kit-book-title { margin: 0.2rem 0 0.3rem; }
.kit-book-author { font-size: 1.05rem; color: var(--kit-muted); margin: 0 0 1rem; }
.kit-book-hook { font-size: 1.12rem; font-weight: 600; line-height: 1.45; margin: 0 0 1rem; }
.kit-book-take { color: var(--kit-fg); line-height: 1.7; }
.kit-book-take p { margin: 0 0 0.9rem; }
.kit-book-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0 0.8rem; }
.kit-book-buynote { font-size: 0.8rem; color: var(--kit-muted); margin: 0; }

/* ============ 8a4. podcast show grid ============ */
.kit-shows-section .kit-shows-h { text-align: center; }
.kit-shows-intro { margin-left: auto; margin-right: auto; }
.kit-shows-grid {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
}
.kit-show-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2);
  background: var(--kit-surface); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kit-show-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(0,0,0,0.5); }
.kit-show-cover {
  position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--kit-accent) 12%, var(--kit-surface));
}
.kit-show-cover--type {
  display: flex; align-items: center; justify-content: center; padding: 1.4rem; text-align: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--kit-accent) 80%, #000), var(--kit-accent));
}
.kit-show-cover-type { font-family: var(--kit-font-heading); font-weight: 700; font-size: 1.3rem; color: #fff; }
.kit-show-status {
  position: absolute; top: 0.7rem; left: 0.7rem; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.6rem;
  border-radius: 999px; background: rgba(20,18,16,0.78); color: #fff;
}
.kit-show-status--live { background: var(--kit-accent); color: var(--kit-accent-contrast, #fff); }
.kit-show-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.kit-show-title { margin: 0; font-size: 1.15rem; }
.kit-show-host { margin: 0; font-size: 0.82rem; color: var(--kit-muted); font-style: italic; }
.kit-show-blurb { margin: 0; color: var(--kit-muted); line-height: 1.55; flex: 1; }
.kit-show-cta { align-self: flex-start; margin-top: 0.4rem; }

/* ============ 8a5. product showcase (with colourways) ============ */
.kit-product-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 720px) { .kit-product-inner { grid-template-columns: 1fr; } }
.kit-product-hero {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: calc(var(--kit-radius) * 1.2); box-shadow: 0 20px 44px -22px rgba(0,0,0,0.5);
}
.kit-product-swatches { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.kit-product-swatch-link {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 76px;
  text-decoration: none; color: var(--kit-muted); font-size: 0.74rem; text-align: center;
}
.kit-product-swatch-img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid var(--kit-border); transition: border-color 0.18s ease; }
.kit-product-swatch-dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--kit-border); display: block; }
.kit-product-swatch-link:hover .kit-product-swatch-img,
.kit-product-swatch-link:hover .kit-product-swatch-dot { border-color: var(--kit-accent); }
.kit-product-swatch-link:hover { color: var(--kit-accent); }
.kit-product-title { margin: 0 0 0.4rem; }
.kit-product-price { font-family: var(--kit-font-heading); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.8rem; }
.kit-product-pricenote { font-weight: 400; font-size: 0.85rem; color: var(--kit-muted); }
.kit-product-desc { color: var(--kit-muted); line-height: 1.6; margin: 0 0 1.1rem; }
.kit-product-actions { margin-top: 1rem; }

/* ============ 8a6. tabbed blog (tab-topped, all-visible) ============ */
.kit-tabblog-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 2px solid var(--kit-border); margin: 1.4rem 0 0; }
.kit-tabblog-tab {
  text-decoration: none; font-family: var(--kit-font-heading); font-weight: 600; font-size: 0.92rem;
  color: var(--kit-muted); padding: 0.55rem 1.15rem; border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--kit-fg) 6%, transparent);
  border: 1px solid transparent; border-bottom: none; margin-bottom: -2px;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.kit-tabblog-tab:hover, .kit-tabblog-tab:focus-visible { color: var(--kit-accent); background: color-mix(in srgb, var(--kit-accent) 14%, var(--kit-surface)); }
.kit-tabblog-tab.is-active { color: var(--kit-accent-contrast); background: var(--kit-accent); border-color: var(--kit-accent); }
.kit-tabblog-panel { margin: 1.7rem 0 2.4rem; scroll-margin-top: 90px; }
.kit-tabblog-panel-h { font-size: 1.2rem; margin: 0 0 1rem; }
.kit-tabblog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.kit-tabblog-item { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
.kit-tabblog-item:has(.kit-tabblog-thumb) { grid-template-columns: 88px 1fr; }
@media (max-width: 480px) { .kit-tabblog-item:has(.kit-tabblog-thumb) { grid-template-columns: 1fr; } }
.kit-tabblog-thumb img { width: 88px; height: 66px; object-fit: cover; border-radius: 8px; border: 1px solid var(--kit-border); }
.kit-tabblog-title { font-family: var(--kit-font-heading); font-weight: 600; text-decoration: none; color: var(--kit-fg); }
.kit-tabblog-title:hover { color: var(--kit-accent); }
.kit-tabblog-date { display: block; font-size: 0.78rem; color: var(--kit-muted); margin-top: 0.15rem; }
.kit-tabblog-summary { margin: 0.35rem 0 0; color: var(--kit-muted); font-size: 0.9rem; line-height: 1.5; }

/* ============ 8b. onboarding steps (guided self-serve) ============ */
.kit-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.kit-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.1rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.2);
  background: var(--kit-surface);
}
.kit-step-num {
  display: inline-flex;
  width: 2.4rem; height: 2.4rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  background: var(--kit-accent);
  color: var(--kit-accent-contrast);
}
.kit-step-title { margin: 0.25rem 0 0.4rem; font-size: 1.15rem; }
.kit-step-text { margin: 0 0 0.5rem; color: var(--kit-muted); }
.kit-step-note {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--kit-muted);
  padding: 0.5rem 0.7rem;
  border-left: 3px solid color-mix(in srgb, var(--kit-accent) 50%, var(--kit-border));
  background: color-mix(in srgb, var(--kit-accent) 6%, transparent);
  border-radius: 0 6px 6px 0;
}
.kit-step-link { margin: 0; font-weight: 600; }

/* ============ 8c. pricing tiers (3-tier offering shape) ============ */
.kit-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 3vw, 1.75rem);
  align-items: stretch;
}
.kit-tier {
  display: flex; flex-direction: column;
  padding: 1.75rem 1.6rem;
  border: 1px solid var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.3);
  background: var(--kit-surface);
}
.kit-tier--featured {
  border-color: var(--kit-accent);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--kit-accent) 60%, transparent);
}
.kit-tier-badge {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--kit-accent);
  color: var(--kit-accent-contrast);
}
.kit-tier-name { margin: 0 0 0.3rem; font-size: 1.35rem; }
.kit-tier-summary { margin: 0 0 1rem; color: var(--kit-muted); font-size: 0.97rem; }
.kit-tier-price { margin: 0 0 0.15rem; }
.kit-tier-amount { font-size: 2rem; font-weight: 700; }
.kit-tier-suffix { color: var(--kit-muted); font-size: 0.95rem; }
.kit-tier-pricenote { margin: 0 0 1.1rem; font-size: 0.82rem; color: var(--kit-muted); font-style: italic; }
.kit-tier-features { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.55rem; }
.kit-tier-features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
}
.kit-tier-features li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--kit-accent);
  font-weight: 700;
}
.kit-tier-cta { margin: auto 0 0; }
.kit-tier-cta .kit-btn { width: 100%; text-align: center; }
.kit-pricing-footnote { margin: 1.5rem 0 0; text-align: center; color: var(--kit-muted); font-size: 0.88rem; }

/* ============ 9. stat band ============ */
.kit-stat-band { background: var(--kit-surface); border-block: 1px solid var(--kit-border); }
.kit-stat-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.kit-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.kit-stat-value {
  font-family: var(--kit-font-heading, var(--kit-font-body));
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  color: var(--kit-accent);
  line-height: 1;
}
.kit-stat-label { color: var(--kit-muted); font-size: 0.95rem; }

/* ============ 10. testimonials ============ */
.kit-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.kit-testimonial { padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.kit-quote {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.55;
  font-family: var(--kit-font-heading, var(--kit-font-body));
}
.kit-quote::before { content: "\201C"; color: var(--kit-accent); font-size: 1.4em; line-height: 0; vertical-align: -0.3em; margin-right: 0.05em; }
.kit-quote-by { display: flex; flex-direction: column; }
.kit-quote-name { font-weight: 600; }
.kit-quote-role { color: var(--kit-muted); font-size: 0.9rem; }

/* ============ 11. about (split) ============ */
.kit-about--split .kit-about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.kit-about-media img {
  width: 100%;
  border-radius: calc(var(--kit-radius) * 1.5);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.45);
}
/* Picture on the right: the copy leads, the portrait follows — the shape a
   source page declares by putting its words before its picture (round 15). The
   column widths swap with the order so the TEXT keeps the wider column. */
.kit-about--media-right .kit-about-inner { grid-template-columns: 1.15fr 0.85fr; }
.kit-about--media-right .kit-about-media { order: 2; }
.kit-about--media-right .kit-about-copy { order: 1; }
@media (max-width: 820px) {
  .kit-about--split .kit-about-inner { grid-template-columns: 1fr; }
  .kit-about--media-right .kit-about-inner { grid-template-columns: 1fr; }
  .kit-about-media { max-width: 380px; }
}

/* ---- about-scope: "the range of my creative capacity" homepage block ---- */
.kit-aboutscope-inner {
  display: grid;
  /* left floored so it can't collapse; right capped at minmax(0,…) so its long
     card text can't steal the left column's width */
  grid-template-columns: minmax(340px, 1.1fr) auto minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.kit-aboutscope-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.8rem, 1.8vw, 1.1rem);
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.kit-aboutscope-photo { margin: 0; }
.kit-aboutscope-photo img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: calc(var(--kit-radius) * 1.4);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,0.45);
}
.kit-aboutscope-copy h2 { margin-top: 0; }
/* central circular motif linking the two manifesto blocks */
.kit-aboutscope-motif {
  position: relative; align-self: stretch; width: 2px; justify-self: center;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--kit-accent) 45%, transparent), transparent);
  min-height: 100%;
}
.kit-aboutscope-motif::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px);
  transform: translate(-50%, -50%);
  border: 2px solid color-mix(in srgb, var(--kit-accent) 55%, transparent);
  border-radius: 50%;
}
.kit-aboutscope-motif-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--kit-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--kit-accent) 18%, transparent);
}
.kit-aboutscope-right { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2.2rem); }
.kit-aboutscope-block {
  display: grid;
  grid-template-columns: minmax(104px, 0.4fr) 1fr;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: start;
  background: var(--kit-surface);
  border: 1px solid var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.2);
  padding: clamp(1.2rem, 2.6vw, 1.85rem);
}
.kit-aboutscope-block-logo { display: flex; align-items: flex-start; justify-content: center; padding-top: 0.15rem; }
.kit-aboutscope-logo { width: 100%; max-width: 150px; height: auto; }
.kit-aboutscope-logo--text {
  font-family: var(--kit-font-heading); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1;
  letter-spacing: 0.01em; color: var(--kit-accent); text-align: center;
}
.kit-aboutscope-block-text { min-width: 0; }
.kit-aboutscope-kicker { margin: 0 0 0.5rem; font-weight: 600; color: var(--kit-fg); }
.kit-aboutscope-block-body { font-size: 0.96rem; }
@media (max-width: 900px) {
  .kit-aboutscope-inner { grid-template-columns: 1fr; }
  .kit-aboutscope-motif { display: none; }
  .kit-aboutscope-photos { max-width: 520px; }
  .kit-aboutscope-block { grid-template-columns: minmax(84px, 0.3fr) 1fr; }
}

/* ============ 12. cta band ============ */
.kit-cta-band {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--kit-accent-2) 75%, black 0%) 0%, transparent 60%),
    var(--kit-accent);
  color: var(--kit-accent-contrast);
}
.kit-cta-inner {
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
  max-width: 720px;
}
.kit-cta-heading { color: var(--kit-accent-contrast); margin-bottom: 0.5rem; }
.kit-cta-body { color: color-mix(in srgb, var(--kit-accent-contrast) 88%, transparent); font-size: 1.1rem; margin-bottom: 1.75rem; }
.kit-cta-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }

/* ============ 13. contact + form ============ */
.kit-contact-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 768px) { .kit-contact-inner { grid-template-columns: 1fr; } }
.kit-contact-details { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.kit-contact-detail { display: flex; flex-direction: column; gap: 0.15rem; }
.kit-contact-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kit-muted); }
.kit-contact-detail a { font-weight: 500; }

.kit-form {
  background: var(--kit-surface);
  border: 1px solid var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.3);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.kit-form-note { font-size: 0.88rem; color: var(--kit-muted); margin-bottom: 1.25rem; }
.kit-field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.kit-field label { font-weight: 600; font-size: 0.92rem; }
.kit-field input,
.kit-field textarea {
  font: inherit;
  color: var(--kit-fg);
  background: var(--kit-bg);
  border: 1.5px solid var(--kit-border);
  border-radius: var(--kit-radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kit-field input:focus,
.kit-field textarea:focus {
  outline: none;
  border-color: var(--kit-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-accent) 22%, transparent);
}
.kit-field textarea { resize: vertical; }
/* honeypot: removed from layout + a11y tree; only bots reach it */
.kit-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============ 14. SDK blocks (events / LMS) ============ */
.kit-sdk-block {
  position: relative;
  margin: 1.5rem 0 0;
  padding: 1.25rem;
  border: 1px solid var(--kit-border);
  border-radius: calc(var(--kit-radius) * 1.2);
  background: var(--kit-surface);
}
.kit-test-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #f0a000;
  color: #1a1300;
}
.kit-sdk-placeholder {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--kit-muted);
  border: 1.5px dashed var(--kit-border);
  border-radius: var(--kit-radius);
}
.kit-sdk-placeholder span { font-weight: 700; color: var(--kit-fg); }

/* Visitor-facing LMS loading/empty state (replaces the old debug-string
   placeholder). A calm, on-brand card with a subtle shimmer skeleton + an honest
   line — what a polished creator site shows before an embed mounts or before the
   member signs in. Light/cream theme only. */
.kit-sdk-empty {
  padding: 2.25rem 1.5rem;
  text-align: center;
  border: 1px solid var(--kit-border);
  border-radius: var(--kit-radius);
  background: var(--kit-surface);
}
.kit-sdk-empty-title { margin: 0.9rem 0 0.3rem; font-weight: 700; color: var(--kit-fg); font-size: 1.05rem; }
.kit-sdk-empty-body { margin: 0 auto; max-width: 46ch; color: var(--kit-muted); font-size: 0.95rem; line-height: 1.5; }
.kit-sdk-skeleton { display: flex; flex-direction: column; gap: 0.6rem; max-width: 22rem; margin: 0 auto; }
.kit-sdk-skeleton span {
  display: block; height: 0.85rem; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--kit-border) 60%, transparent) 25%,
    color-mix(in srgb, var(--kit-border) 30%, transparent) 37%,
    color-mix(in srgb, var(--kit-border) 60%, transparent) 63%);
  background-size: 400% 100%;
  animation: kit-shimmer 1.4s ease-in-out infinite;
}
.kit-sdk-skeleton span:nth-child(1) { width: 80%; }
.kit-sdk-skeleton span:nth-child(2) { width: 100%; }
.kit-sdk-skeleton span:nth-child(3) { width: 60%; }
@keyframes kit-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .kit-sdk-skeleton span { animation: none; } }

/* Events stub — deliberately distinct from the LMS TEST badge so it reads as
   "not wired yet", not "test mode". Neutral, not amber. */
.kit-events-stub { background: var(--kit-surface); }
.kit-stub-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kit-muted) 22%, transparent);
  color: var(--kit-muted);
  border: 1px dashed var(--kit-border);
}
.kit-sdk-placeholder.kit-stub { text-align: left; padding: 1.75rem 1.5rem; }
.kit-sdk-placeholder.kit-stub p { margin: 0 0 0.75rem; }
.kit-stub-note { font-weight: 500; color: var(--kit-fg); }
.kit-stub-code {
  margin: 0.5rem 0 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.78rem;
  line-height: 1.5;
  background: var(--kit-bg);
  border: 1px solid var(--kit-border);
  border-radius: var(--kit-radius);
  color: var(--kit-fg);
}
.kit-sdk-placeholder.kit-stub code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ============ 14b. booking — the appointment widget ============
   Cosmetic only. The two-column/one-column STRUCTURE is in kit-layout.css so a
   pinned lineage cannot strand it (E3's rule); everything here is the look of
   the widget itself: the face row, the service list, the day strip, the time
   chips, the details form and the booked state. Every control is a real
   <button> with aria-pressed, so the widget is keyboard-first without a
   script's help. */
.kit-book-col--widget { display: flex; flex-direction: column; gap: 1rem; }
.kit-book-copy h1, .kit-book-copy h2 { margin: 0 0 0.35rem; }
.kit-book-intro { margin: 0; color: var(--kit-muted); max-width: 52ch; }
.kit-book-picture {
  display: block; width: 100%; height: 100%; min-height: 18rem;
  object-fit: cover; border-radius: calc(var(--kit-radius) * 1.4);
}
.kit-book-mount, .kit-book-stub { border: 1px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2); background: var(--kit-surface); padding: 1.1rem; }
.kit-book-stub { position: relative; margin: 0; }
.kit-book-mount { display: flex; flex-direction: column; gap: 1rem; }
.kit-book-h { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kit-muted); }
.kit-book-hint, .kit-book-empty, .kit-book-msg, .kit-book-note, .kit-book-ring, .kit-book-policy { margin: 0; font-size: 0.92rem; color: var(--kit-muted); }
.kit-book-msg { color: var(--kit-accent); font-weight: 600; }
.kit-book-ring a { color: var(--kit-fg); font-weight: 600; }

/* the face row — profile circles, "first available" first */
.kit-book-faces { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; margin: 0; padding: 0; }
.kit-book-face {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem;
  width: 4.6rem; padding: 0.2rem 0; border: 0; background: none; font: inherit; color: var(--kit-fg); cursor: pointer;
  border-radius: var(--kit-radius);
}
.kit-book-faces--static .kit-book-face { cursor: default; }
.kit-book-face-pic {
  display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover;
  background: color-mix(in srgb, var(--kit-accent) 14%, var(--kit-bg)); color: var(--kit-accent);
  font-weight: 700; font-size: 1rem; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--kit-border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.kit-book-face-pic--any { font-size: 1.3rem; }
.kit-book-face:hover .kit-book-face-pic, .kit-book-face:focus-visible .kit-book-face-pic { transform: translateY(-2px); }
.kit-book-face.is-selected .kit-book-face-pic { border-color: var(--kit-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-accent) 30%, transparent); }
.kit-book-face.is-offline { opacity: 0.55; cursor: not-allowed; }
.kit-book-face-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; text-align: center; }
.kit-book-face-role { font-size: 0.7rem; color: var(--kit-muted); line-height: 1.1; text-align: center; }

/* the service list */
.kit-book-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.kit-book-service {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%;
  padding: 0.65rem 0.85rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  background: var(--kit-bg); color: var(--kit-fg); font: inherit; text-align: left; cursor: pointer;
}
.kit-book-service:hover, .kit-book-service:focus-visible { border-color: var(--kit-accent); }
.kit-book-service.is-selected { border-color: var(--kit-accent); box-shadow: inset 0 0 0 1px var(--kit-accent); }
.kit-book-service-name { font-weight: 600; }
.kit-book-service-meta { font-size: 0.85rem; color: var(--kit-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the day strip and the time chips */
.kit-book-days { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: thin; }
.kit-book-day {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 5.2rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  background: var(--kit-bg); color: var(--kit-fg); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.kit-book-day small { font-weight: 500; font-size: 0.72rem; color: var(--kit-muted); }
.kit-book-day.is-selected { background: var(--kit-accent); color: var(--kit-accent-contrast, #fff); border-color: var(--kit-accent); }
.kit-book-day.is-selected small { color: inherit; opacity: 0.85; }
.kit-book-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.45rem; margin-top: 0.7rem; }
.kit-book-time {
  padding: 0.55rem 0.4rem; border: 1.5px solid var(--kit-accent); border-radius: var(--kit-radius);
  background: var(--kit-bg); color: var(--kit-accent); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.kit-book-time:hover, .kit-book-time:focus-visible, .kit-book-time.is-selected { background: var(--kit-accent); color: var(--kit-accent-contrast, #fff); }

/* the details form and the booked state */
.kit-book-details { display: grid; gap: 0.7rem; }
.kit-book-details label { display: grid; gap: 0.25rem; font-size: 0.88rem; font-weight: 600; }
.kit-book-details label small { font-weight: 500; color: var(--kit-muted); }
.kit-book-details input, .kit-book-details textarea {
  width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  background: var(--kit-bg); color: var(--kit-fg); font: inherit; font-weight: 400;
}
.kit-book-chosen { margin: 0; font-size: 0.92rem; }
.kit-book-change { border: 0; background: none; padding: 0; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--kit-accent); cursor: pointer; text-decoration: underline; }
.kit-book-go { justify-self: start; }
.kit-book-done { text-align: center; padding: 1rem 0; }
.kit-book-done-tick { margin: 0; font-size: 2rem; color: var(--kit-accent); }
.kit-book-done-h { margin: 0.2rem 0 0.4rem; }
.kit-book-done-line { margin: 0 0 0.3rem; font-weight: 600; }
.kit-book-done-sub { margin: 0 0 0.8rem; color: var(--kit-muted); font-size: 0.92rem; }

/* ============ 14a. events-list (like-for-like with live cp52-events grid) ===
   A faithful port of the live damiansemonin.art /events-list/ card grid. All
   rules are scoped under `.cp52ev` (the wrapper carries `--accent` inline from
   the brand) so nothing leaks into the rest of the kit page — exactly like the
   plugin's own self-contained stylesheet. Tokens mirror the plugin defaults but
   take the brand surface/ink/line for coherence with the rest of the site. */
.cp52ev {
  --accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
  --ink: var(--kit-fg);
  --muted: var(--kit-muted);
  --faint: color-mix(in srgb, var(--kit-fg) 45%, transparent);
  --line: var(--kit-border);
  --surface: #fff;
  --ok: #2f8f5b; --warn: #c1762a; --danger: #b4503f;
  --radius: calc(var(--kit-radius) * 1.4);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.08);
  color: var(--ink);
  line-height: 1.5;
}
.cp52ev .ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  padding: 4px;
}
.cp52ev .ev-card[hidden] { display: none; }
/* filter toolbar (by medium + by time) */
.cp52ev .ev-filters { display: flex; flex-direction: column; gap: 0.8rem; margin: 0 4px 1.4rem; }
.cp52ev .ev-filter-group { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.cp52ev .ev-filter-label { font-family: var(--kit-font-heading, inherit); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); min-width: 3.6rem; }
.cp52ev .ev-filter-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.cp52ev .ev-filter-btn {
  font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.4rem 0.95rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cp52ev .ev-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.cp52ev .ev-filter-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cp52ev .ev-filter-empty { color: var(--muted); font-size: 0.95rem; margin: 0.4rem 0 0; }
.cp52ev .ev-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.cp52ev .ev-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.cp52ev .ev-card.is-past { opacity: .66; filter: saturate(.65); }
.cp52ev .ev-card.is-past:hover { transform: none; box-shadow: var(--shadow-sm); }
.cp52ev .ev-img {
  height: 172px;
  position: relative;
  overflow: hidden;
  display: block;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep, var(--accent)));
}
.cp52ev .ev-img::after {
  content: ""; position: absolute; inset: 0; opacity: .16;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 64%, rgba(255,255,255,.7) 0 6px, transparent 8px),
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.25) 41% 44%, transparent 45%);
}
.cp52ev .ev-img img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.cp52ev .ev-date {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #fff; border-radius: 9px; overflow: hidden;
  text-align: center; line-height: 1; min-width: 46px;
  box-shadow: 0 3px 10px rgba(0,0,0,.24); font-family: inherit;
}
.cp52ev .ev-date--right { left: auto; right: 10px; }
.cp52ev .ev-date .m {
  display: block; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 8px;
}
.cp52ev .ev-date .d { display: block; font-size: 22px; font-weight: 800; color: #23303a; padding: 4px 8px 5px; }
.cp52ev .ev-card.is-past .ev-date .m { background: #9aa3ab; }
.cp52ev .ev-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cp52ev .ev-card h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.cp52ev .ev-card h3 a { color: var(--ink); text-decoration: none; }
.cp52ev .ev-card h3 a:hover { color: var(--accent); }
.cp52ev .ev-meta { display: flex; flex-direction: column; gap: 7px; }
.cp52ev .ev-meta .row { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 14px; }
.cp52ev .ev-meta .row svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.cp52ev .ev-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.cp52ev .ev-price { font-weight: 800; color: var(--ink); font-size: 17px; }
.cp52ev .ev-price .per { font-weight: 600; color: var(--muted); font-size: .78em; }
.cp52ev .ev-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 5px 10px;
  border-radius: 999px; line-height: 1; white-space: nowrap;
}
.cp52ev .ev-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cp52ev .ev-badge--ok { background: rgba(47,143,91,.12); color: var(--ok); }
.cp52ev .ev-badge--low { background: rgba(193,118,42,.14); color: var(--warn); }
.cp52ev .ev-badge--out { background: rgba(180,80,63,.13); color: var(--danger); }
.cp52ev .ev-badge--past { background: #eef0f2; color: var(--faint); }
/* sold-out tiles stack a Waitlist pill ABOVE the Sold out pill (Damian 4 Aug):
   covers both queues — a freed place on THIS run, and first-to-hear on the next. */
.cp52ev .ev-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* ── WHOLE TILE CLICKABLE (stretched link) ───────────────────────────────────
   Only the image and title used to be links, leaving most of the card — date,
   price, the empty space a thumb lands on — inert. The title's anchor now
   stretches over the whole card via ::after, which keeps ONE properly-named
   link per tile for screen readers and keyboard users instead of the three a
   wrapping <a> would create.
   Anything that must stay separately clickable (the Waitlist badge) is lifted
   above the overlay with position+z-index. */
.cp52ev .ev-card--linked { position: relative; }
.cp52ev .ev-card--linked .ev-stretch::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
}
.cp52ev .ev-card--linked .ev-badge--waitlist { position: relative; z-index: 3; }
/* The card is the hit area, so give it the pointer and a visible keyboard ring
   driven by focus INSIDE it — the focusable element is the title link. */
.cp52ev .ev-card--linked { cursor: pointer; }
.cp52ev .ev-card--linked:focus-within {
  outline: 2px solid var(--accent, #1e6f8c); outline-offset: 3px;
}
.cp52ev .ev-card--linked .ev-stretch:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .cp52ev .ev-card--linked { transition: none; }
}
.cp52ev .ev-badge--waitlist { background: rgba(30,111,140,.12); color: var(--accent, #1e6f8c); text-decoration: none; cursor: pointer; }
.cp52ev .ev-badge--waitlist:hover { filter: brightness(.92); }
/* A SERIES — one place across every date. Orange, so it reads as a different
   kind of thing from availability (green/amber/red) and the waitlist (blue).
   Sites tint it with --series on the palette. */
.cp52ev .ev-badge--series { background: rgba(224,123,26,.14); color: var(--series, #c2620c); }
.cp52ev .ev-badge--series .dot { background: var(--series, #e07b1a); }

/* ---- sidebar layout (29-Jun workshops redesign): grid LEFT + filter RHS ---- */
.cp52ev--sidebar .ev-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 22%, 280px);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
/* 3-per-row event grid (the redesign asks for 3, not 4) */
.cp52ev .ev-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp52ev .ev-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .cp52ev .ev-grid--3, .cp52ev .ev-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cp52ev .ev-grid--3, .cp52ev .ev-grid--2 { grid-template-columns: 1fr; }
}
/* the right-hand filter rail */
.cp52ev .ev-sidebar {
  position: sticky; top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.cp52ev .ev-sidebar-h {
  margin: 0; font-family: var(--kit-font-heading, inherit);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.cp52ev .ev-sidebar-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cp52ev .ev-sidebar-label {
  font-size: 0.82rem; font-weight: 700; color: var(--ink);
}
.cp52ev .ev-select-wrap { position: relative; }
.cp52ev .ev-select-wrap::after {
  content: "▾"; position: absolute; right: 0.7rem; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  color: var(--accent); font-size: 0.7rem;
}
.cp52ev .ev-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; font: inherit; font-size: 0.92rem;
  padding: 0.55rem 2rem 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: calc(var(--kit-radius) * 0.9);
  background: #fff; color: var(--ink); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cp52ev .ev-select:hover { border-color: var(--accent); }
.cp52ev .ev-select:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cp52ev .ev-sidebar-reset {
  align-self: flex-start; font: inherit; font-size: 0.82rem; cursor: pointer;
  background: none; border: none; padding: 0; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.cp52ev .ev-sidebar-reset:hover { color: var(--accent-deep, var(--accent)); }
.cp52ev .ev-sidebar-count { margin: 0; font-size: 0.8rem; color: var(--muted); }
.cp52ev--sidebar .ev-filter-empty { margin: 0; }
/* On narrow screens drop the sidebar below the grid, full width, non-sticky */
@media (max-width: 760px) {
  .cp52ev--sidebar .ev-layout { grid-template-columns: 1fr; }
  .cp52ev .ev-sidebar { position: static; }
}

/* ============ 14b. storefront (CP52 eCommerce engine, REST) ============ */
.kit-storefront { padding: 1.5rem; }
.kit-storefront .kit-test-badge { position: static; display: inline-block; margin-bottom: 1rem; }
.kit-store-toolbar { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.kit-store-q { flex: 1; min-width: 12rem; padding: 0.55rem 0.8rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); }
.kit-store-search, .kit-store-clear, .kit-store-add, .kit-store-checkout, .kit-store-ordersbtn, .kit-store-refund {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--kit-radius);
  border: 1px solid var(--kit-border); background: var(--kit-bg); color: var(--kit-fg); padding: 0.5rem 0.9rem;
}
.kit-store-add, .kit-store-checkout, .kit-store-ordersbtn, .kit-store-search { background: var(--kit-accent); color: var(--kit-accent-contrast); border-color: transparent; }
.kit-store-add:hover, .kit-store-checkout:hover, .kit-store-search:hover { filter: brightness(1.05); }
.kit-store-add:disabled, .kit-store-checkout:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
/* Merchandising rows on the FACETED storefront (2026-08-04). Additive: the
   sidebar, price slider, facets and drawer below are untouched. */
.kit-tax-front { margin-bottom: 2rem; }
.kit-tax-row { margin-bottom: 1.85rem; }
.kit-tax-rowhd { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.8rem; }
.kit-tax-rowhd h3 { margin: 0; font-size: 1.15rem; }
.kit-tax-rownote { font-size: 0.85rem; color: var(--kit-muted); }
.kit-tax-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px);
  gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; }
.kit-tax-strip > * { scroll-snap-align: start; }
.kit-tax-strip::-webkit-scrollbar { height: 8px; }
.kit-tax-strip::-webkit-scrollbar-thumb { background: var(--kit-border); border-radius: 99px; }

/* SHOP FRONT (2026-08-04). The grid no longer reserves a column for the cart:
   the basket is a drawer, so the catalogue gets the full width at every size. */
.kit-store-grid-wrap { display: block; }

/* ── merchandising rows ── */
.kit-store-front { margin-bottom: 2.25rem; }
.kit-store-catshd, .kit-store-rowhd h3 { font-size: 1.15rem; margin: 0; }
.kit-store-cats { margin-bottom: 1.75rem; }
.kit-store-catrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.kit-store-cat { font: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.42rem 0.9rem;
  border-radius: 99px; border: 1px solid var(--kit-border); background: var(--kit-bg);
  color: inherit; transition: border-color .15s ease, background .15s ease; }
.kit-store-cat:hover { border-color: var(--kit-accent); }
.kit-store-cat.is-on { background: var(--kit-accent); border-color: var(--kit-accent);
  color: var(--kit-accent-contrast); }
.kit-store-row { margin-bottom: 2rem; }
.kit-store-rowhd { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.85rem; }
.kit-store-rownote { font-size: 0.85rem; color: var(--kit-muted); }
/* A horizontal shelf: scrolls rather than wrapping, so a row of eight reads as
   "there is more this way" instead of becoming a second grid. */
.kit-store-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 250px);
  gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x proximity; }
.kit-store-strip > * { scroll-snap-align: start; }
.kit-store-strip::-webkit-scrollbar { height: 8px; }
.kit-store-strip::-webkit-scrollbar-thumb { background: var(--kit-border); border-radius: 99px; }

.kit-store-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kit-store-alllbl { font-size: 1.15rem; font-weight: 600; font-family: var(--kit-font-heading, inherit); }
.kit-store-tbspacer { flex: 1; }

/* ── basket: a button, then a drawer ── */
.kit-store-cartbtn { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font: inherit; font-weight: 700; padding: 0.7rem 1.15rem; border: 0; border-radius: 99px;
  background: var(--kit-accent); color: var(--kit-accent-contrast);
  box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.kit-store-cartcount { background: rgba(255,255,255,.24); border-radius: 99px;
  padding: 0.05rem 0.5rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.kit-store-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.34); z-index: 41; }
.kit-store-cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
  z-index: 42; overflow: auto; border: 0; border-left: 1px solid var(--kit-border);
  border-radius: 0; padding: 1.25rem; background: var(--kit-surface);
  box-shadow: -12px 0 34px rgba(0,0,0,.2); }
.kit-store-cartclose { position: absolute; top: 0.75rem; right: 0.9rem; cursor: pointer;
  border: 0; background: none; font-size: 1.15rem; line-height: 1; color: var(--kit-muted); }
.kit-store-cartclose:hover { color: var(--kit-fg); }
@media (prefers-reduced-motion: no-preference) {
  .kit-store-cart-panel.is-open { animation: kit-store-slide .18s ease-out; }
  @keyframes kit-store-slide { from { transform: translateX(100%); } to { transform: none; } }
}
.kit-store-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.kit-store-card { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 1rem; background: var(--kit-bg); display: flex; flex-direction: column; gap: 0.4rem; }
.kit-store-card h4 { margin: 0.2rem 0; font-size: 1rem; }
.kit-store-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.kit-store-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.18rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--kit-muted) 18%, transparent); color: var(--kit-muted); text-transform: uppercase; }
.kit-store-tag-digital { background: color-mix(in srgb, var(--kit-accent) 18%, transparent); color: var(--kit-accent); }
.kit-store-tag-sale { background: #f0a000; color: #1a1300; }
.kit-store-desc { font-size: 0.85rem; color: var(--kit-muted); margin: 0; flex: 1; }
.kit-store-price { font-weight: 800; font-size: 1.05rem; }
.kit-store-rrp { font-weight: 500; color: var(--kit-muted); text-decoration: line-through; margin-left: 0.4rem; font-size: 0.9rem; }
.kit-store-add { margin-top: 0.5rem; }
/* product card image + clickable card link */
.kit-store-cardlink { display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: inherit; }
.kit-store-cardlink:hover .kit-store-media img { transform: scale(1.03); }
.kit-store-cardlink:hover h4 { color: var(--kit-accent); }
.kit-store-card { padding: 0; overflow: hidden; }
.kit-store-card .kit-store-tags, .kit-store-card h4, .kit-store-card .kit-store-desc, .kit-store-card .kit-store-price { padding-left: 1rem; padding-right: 1rem; }
.kit-store-card > .kit-store-add { margin: 0.5rem 1rem 1rem; }
.kit-store-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--kit-surface); }
.kit-store-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.kit-store-media-none { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kit-accent) 12%, var(--kit-surface)); }
.kit-store-media-none span { font-family: var(--kit-font-heading, inherit); font-size: 2.4rem; font-weight: 700; color: color-mix(in srgb, var(--kit-accent) 60%, var(--kit-muted)); }
/* ── single product page (PDP) ── */
.kit-store-pdp { margin: 0 0 0.5rem; }
.kit-pdp-back { display: inline-block; margin-bottom: 1.2rem; color: var(--kit-accent); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.kit-pdp-back:hover { text-decoration: underline; }
.kit-pdp-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; align-items: start; }
@media (max-width: 760px) { .kit-pdp-cols { grid-template-columns: 1fr; gap: 1.4rem; } }
.kit-pdp-figure { margin: 0; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); overflow: hidden; background: var(--kit-surface); }
.kit-pdp-figure img { width: 100%; display: block; object-fit: cover; }
.kit-pdp-figure-none { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kit-accent) 12%, var(--kit-surface)); }
.kit-pdp-figure-none span { font-family: var(--kit-font-heading, inherit); font-size: 4rem; font-weight: 700; color: color-mix(in srgb, var(--kit-accent) 60%, var(--kit-muted)); }
.kit-pdp-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.kit-pdp-thumb { width: 4.2rem; height: 4.2rem; padding: 0; border: 2px solid transparent; border-radius: calc(var(--kit-radius) - 2px); overflow: hidden; cursor: pointer; background: var(--kit-surface); }
.kit-pdp-thumb.is-active { border-color: var(--kit-accent); }
.kit-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-pdp-title { margin: 0 0 0.6rem; font-size: 1.7rem; line-height: 1.15; }
.kit-pdp-pricerow { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kit-pdp-price { font-weight: 800; font-size: 1.5rem; }
.kit-pdp-rrp { color: var(--kit-muted); text-decoration: line-through; font-size: 1.05rem; }
.kit-pdp-stock { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--kit-muted) 18%, transparent); color: var(--kit-muted); }
.kit-pdp-stock-digital { background: color-mix(in srgb, var(--kit-accent) 18%, transparent); color: var(--kit-accent); }
.kit-pdp-stock-out { background: #f3d2d2; color: #7a1d1d; }
.kit-pdp-desc { font-size: 0.98rem; line-height: 1.65; color: var(--kit-fg); margin-bottom: 1.4rem; }
.kit-pdp-imgnote { font-size: 0.8rem; color: var(--kit-muted); font-style: italic; margin: 0 0 1rem; }
/* Proper buy-button chrome (round 8). The taxonomy PDP's Add to cart carried
   only this class — no background, no colour — so the single most important
   button on a product page rendered as the browser's grey default (visible on
   the live bobbinandbrush PDP too). The flat storefront's PDP button also
   wears .kit-store-add, whose rules say the same thing — no drift. */
.kit-pdp-add { display: inline-block; font-size: 1rem; font-weight: 600; padding: 0.7rem 1.6rem; background: var(--kit-accent); color: var(--kit-accent-contrast); border: 1px solid transparent; border-radius: var(--kit-radius); cursor: pointer; }
.kit-pdp-add:hover { filter: brightness(1.05); }
.kit-pdp-add:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.kit-pdp-cartmsg { font-size: 0.85rem; color: var(--kit-accent); margin: 0.6rem 0 0; min-height: 1.1em; }
/* (was a sticky sidebar column — now a drawer, styled above) */
.kit-store-cart-panel h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.kit-store-empty, .kit-store-loading, .kit-store-orderslook { color: var(--kit-muted); font-size: 0.88rem; margin: 0.3rem 0; }
.kit-store-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--kit-border); }
.kit-store-line-name { flex: 1; font-size: 0.88rem; }
.kit-store-line-price { font-weight: 700; }
.kit-store-rm { border: none; background: none; cursor: pointer; color: var(--kit-muted); font-size: 1.1rem; line-height: 1; padding: 0 0.3rem; }
.kit-store-trow { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--kit-muted); margin-top: 0.35rem; }
.kit-store-total { font-weight: 800; font-size: 1rem; color: var(--kit-fg); margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--kit-border); }
.kit-store-emailwrap { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.kit-store-emailwrap input, .kit-store-orderswrap input { padding: 0.5rem 0.7rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); }
.kit-store-emailnote { color: var(--kit-muted); font-weight: 400; }
.kit-store-checkout { width: 100%; margin-top: 0.9rem; }
.kit-store-msg { font-size: 0.85rem; margin: 0.6rem 0 0; min-height: 1em; }
.kit-store-orders { margin-top: 1.1rem; border-top: 1px solid var(--kit-border); padding-top: 0.8rem; }
.kit-store-orders summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.kit-store-orderswrap { display: flex; gap: 0.4rem; margin: 0.5rem 0; }
.kit-store-orderswrap input { flex: 1; }
.kit-store-order { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 0.7rem; margin-top: 0.6rem; background: var(--kit-bg); font-size: 0.82rem; }
.kit-store-order-head { display: flex; justify-content: space-between; align-items: center; }
.kit-store-order-status { color: var(--kit-muted); font-size: 0.78rem; }
.kit-store-order-items { margin: 0.4rem 0; padding-left: 1.1rem; color: var(--kit-muted); }
.kit-store-order-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.kit-store-refund { padding: 0.35rem 0.7rem; font-size: 0.8rem; background: var(--kit-bg); color: var(--kit-fg); }
.kit-storefront-stub { background: var(--kit-surface); }

/* ============ 14c. taxonomy storefront (Catalog+ browsing) ============ */
.kit-taxstore { padding: 1.5rem; }
.kit-taxstore .kit-test-badge { position: static; display: inline-block; margin-bottom: 1rem; }
.kit-tax-topbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.kit-tax-search { display: flex; gap: 0.5rem; flex: 1; min-width: 14rem; }
.kit-tax-q { flex: 1; padding: 0.55rem 0.8rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); }
.kit-tax-sortwrap { display: flex; align-items: center; gap: 0.4rem; }
.kit-tax-sortlabel { font-size: 0.82rem; color: var(--kit-muted); font-weight: 600; }
.kit-tax-sort { font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); }
.kit-tax-searchbtn, .kit-tax-add, .kit-tax-checkout { font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--kit-radius); border: 1px solid transparent; background: var(--kit-accent); color: var(--kit-accent-contrast); padding: 0.5rem 0.9rem; }
.kit-tax-searchbtn:hover, .kit-tax-add:hover, .kit-tax-checkout:hover { filter: brightness(1.05); }
.kit-tax-add:disabled, .kit-tax-checkout:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.kit-tax-crumbs { font-size: 0.85rem; color: var(--kit-muted); margin-bottom: 0.4rem; }
.kit-tax-crumbs a { color: var(--kit-accent); text-decoration: none; }
.kit-tax-crumbs .kit-tax-sep { color: var(--kit-muted); margin: 0 0.15rem; }
.kit-tax-active { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.kit-tax-active:empty { margin: 0; }
.kit-tax-chip { font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--kit-accent); background: color-mix(in srgb, var(--kit-accent) 12%, transparent); color: var(--kit-accent); border-radius: 999px; padding: 0.25rem 0.6rem; }
/* Two columns, not three. The cart became a slide-over DRAWER (position:fixed,
   out of flow) but the grid kept reserving its old 18rem column — a permanent
   dead stripe down the right of every faceted shop, and the reason the product
   page rendered cramped beside it (Damian, round 8: "uncramped two-column…
   like DSA/bobbinandbrush"). The browse grid and the PDP now get the full
   width beside the category rail. */
.kit-tax-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 960px) { .kit-tax-layout { grid-template-columns: 13rem 1fr; } .kit-tax-cartpanel { grid-column: 1 / -1; } }
@media (max-width: 680px) { .kit-tax-layout { grid-template-columns: 1fr; } }
.kit-tax-side { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 1rem; background: var(--kit-surface); display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 1rem; }
/* Facet headings (CATEGORIES, PRICE, AVAILABILITY) were 0.82rem uppercase in
   muted grey — legible on a design mock, not on a shop. Larger, darker, less
   tracked: they are the labels a customer navigates by. */
.kit-tax-side h4 { margin: 0 0 0.55rem; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kit-fg); }
.kit-tax-cattree { display: flex; flex-direction: column; }
.kit-tax-catrow { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.2rem 0; }
.kit-tax-catrow a { color: var(--kit-fg); text-decoration: none; font-size: 0.9rem; }
.kit-tax-catdot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 7px; vertical-align: 1px; }
.kit-tax-ship { border-top: 1px solid var(--kit-border); margin-top: 0.7rem; padding-top: 0.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
.kit-tax-ship-h { margin: 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kit-muted); }
.kit-tax-shipcountry { font: inherit; font-size: 0.88rem; padding: 0.4rem 0.5rem; border: 1px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 0.6); background: var(--kit-bg); color: var(--kit-fg); }
.kit-tax-shiprate { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; }
.kit-tax-shiprate span:first-of-type { flex: 1; }
.kit-tax-shipamt { font-weight: 600; font-variant-numeric: tabular-nums; }
.kit-tax-catrow.is-active > a, .kit-tax-catrow.in-path > a { color: var(--kit-accent); font-weight: 700; }
.kit-tax-catrow a:hover { color: var(--kit-accent); }
.kit-tax-cnt { font-size: 0.72rem; color: var(--kit-muted); background: color-mix(in srgb, var(--kit-muted) 14%, transparent); border-radius: 999px; padding: 0.05rem 0.4rem; min-width: 1.3rem; text-align: center; }
.kit-tax-facet { border-top: 1px solid var(--kit-border); padding-top: 0.8rem; }
.kit-tax-opt { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; padding: 0.18rem 0; cursor: pointer; }
.kit-tax-opt span:first-of-type { flex: 1; }
.kit-tax-opt input { accent-color: var(--kit-accent); }
.kit-tax-pricebox { display: flex; flex-direction: column; gap: 0.3rem; }
.kit-tax-pricevals { font-size: 0.85rem; font-weight: 600; color: var(--kit-fg); }
.kit-tax-prange { width: 100%; accent-color: var(--kit-accent); }
.kit-tax-clear { font: inherit; font-weight: 600; font-size: 0.82rem; cursor: pointer; border: 1px solid var(--kit-border); background: var(--kit-bg); color: var(--kit-fg); border-radius: var(--kit-radius); padding: 0.45rem 0.7rem; }
.kit-tax-clear:hover { border-color: var(--kit-accent); color: var(--kit-accent); }
.kit-tax-count { font-size: 0.85rem; color: var(--kit-muted); margin-bottom: 0.7rem; }
.kit-tax-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }
.kit-tax-card { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 1rem; background: var(--kit-bg); display: flex; flex-direction: column; gap: 0.35rem; }
/* Product picture on a faceted-shop card. It bleeds to the card edge (negative
   margins cancel the card's padding) so the grid reads as a shop rather than a
   list of boxes. Same 4:3 as the flat storefront, so the two never disagree. */
.kit-tax-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--kit-surface); margin: -1rem -1rem 0.5rem; border-radius: var(--kit-radius) var(--kit-radius) 0 0; }
.kit-tax-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-tax-media-none { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kit-accent) 12%, var(--kit-surface)); }
.kit-tax-media-none span { font-family: var(--kit-font-heading, inherit); font-size: 2.2rem; font-weight: 700; color: color-mix(in srgb, var(--kit-accent) 60%, var(--kit-muted)); }
.kit-tax-card-cat { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kit-accent); }
/* The TITLE must outrank the description. It did not: the heading font renders
   optically small at 0.98rem, so a 0.82rem grey description read as the louder
   element and the product name was the hardest thing on the card to find. */
.kit-tax-card h4 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: var(--kit-fg); }
/* Clamped to three lines so every card's body is the same height. Without this
   the descriptions ran to different lengths, so the price/Add row sat at a
   different height on every card and the grid looked randomly aligned. */
.kit-tax-card-desc {
  font-size: 0.82rem; color: var(--kit-muted); margin: 0; flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}
/* `margin-top: auto` pins the footer to the bottom of the card whatever the
   body does, so price and Add line up across the whole row. */
.kit-tax-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.55rem; }
.kit-tax-price { font-weight: 800; font-size: 1.02rem; }
.kit-tax-cartpanel { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 1.1rem; background: var(--kit-surface); position: sticky; top: 1rem; }
.kit-tax-cartpanel h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.kit-tax-empty, .kit-tax-loading { color: var(--kit-muted); font-size: 0.88rem; margin: 0.3rem 0; }
.kit-tax-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--kit-border); font-size: 0.86rem; }
.kit-tax-line span:first-child { flex: 1; }
.kit-tax-rm { border: none; background: none; cursor: pointer; color: var(--kit-muted); font-size: 1.1rem; line-height: 1; padding: 0 0.3rem; }
.kit-tax-trow { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--kit-muted); margin-top: 0.35rem; }
.kit-tax-total { font-weight: 800; font-size: 1rem; color: var(--kit-fg); margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--kit-border); }
.kit-tax-emailwrap { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.kit-tax-emailwrap input { padding: 0.5rem 0.7rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); }
.kit-tax-codewrap { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; }
.kit-tax-coderow { display: flex; gap: 0.4rem; }
.kit-tax-code { flex: 1; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); text-transform: uppercase; }
.kit-tax-codeapply { padding: 0.5rem 0.9rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.kit-tax-codeapply:hover { border-color: var(--kit-accent, #1e6f8c); }
.kit-tax-codemsg { margin: 0.15rem 0 0; font-size: 0.78rem; }
.kit-tax-emailnote { color: var(--kit-muted); font-weight: 400; }
.kit-tax-checkout { width: 100%; margin-top: 0.9rem; }
.kit-tax-msg { font-size: 0.85rem; margin: 0.6rem 0 0; min-height: 1em; }

/* ============ 15. footer ============
   Dark, brand-reinforced footer (like the live site's #3e3732 bar): the Sémonin
   wordmark + the CCS mark, the tagline, page nav, and round social icons. */
.kit-footer {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 0;
  background: var(--kit-footer-bg, #3e3732);
  /* Tokenised alongside --kit-footer-bg for the same reason (2026-08-31): a
     brand that sets a dark footer ground had no way to say what colour the
     text on it should be, so a dark starter got warm cream on near-black by
     accident and a light-footer brand had no route to dark text at all. The
     fallback is the old literal. */
  color: var(--kit-footer-fg, #f5f0e9);
}
.kit-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.kit-footer-brand { max-width: 40ch; display: flex; flex-direction: column; gap: 0.85rem; align-items: flex-start; }
.kit-footer-lockup { display: flex; align-items: center; gap: 1rem; }
.kit-footer-logolink { display: inline-flex; }
.kit-footer-logo { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
.kit-footer-sublogo { height: 64px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.92; }
.kit-footer .kit-wordmark { color: #fff; }
.kit-footer-tagline { color: color-mix(in srgb, #f5f0e9 78%, transparent); margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.6; }
.kit-footer-nav, .kit-footer-social { display: flex; gap: 0.7rem 1.1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; align-items: center; }
.kit-footer-nav { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.kit-footer-nav a { text-decoration: none; color: color-mix(in srgb, #f5f0e9 85%, transparent); font-weight: 500; font-size: 0.92rem; }
.kit-footer-nav a:hover { color: #fff; }
.kit-footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, #ffffff 14%, transparent); color: #fff; text-decoration: none;
  transition: background 0.15s ease;
}
.kit-footer-social a:hover { background: var(--kit-accent); }
.kit-footer-social .kit-util-ico { width: 18px; height: 18px; }
.kit-footer-social-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kit-footer-meta {
  border-top: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.kit-footer-meta p {
  max-width: var(--kit-max-width, 1120px);
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 5vw, 3.75rem);
  font-size: 0.85rem;
  color: color-mix(in srgb, #f5f0e9 70%, transparent);
}

/* ============ 15b. 404 ============ */
.kit-404 { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.kit-404 .kit-section-inner { max-width: 40rem; margin-inline: auto; }
.kit-404 .kit-section-intro { margin-inline: auto; }

/* ============ 16. motion ============ */
/* GUARDRAIL: content is VISIBLE BY DEFAULT. No hide-then-reveal. The old
   zero-opacity + IntersectionObserver pattern blanked pages when the observer
   didn't fire — it is gone. .kit-reveal is kept only as a visible-by-default
   no-op so any stale markup can never blank a page. */
.kit-reveal { opacity: 1; transform: none; }
.kit-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .kit-reveal { opacity: 1; transform: none; }
  .kit-btn:hover, .kit-card:hover { transform: none; }
}

/* ============ 17. sticky subscribe rail ============ */
/* Vertical edge widget. VISIBLE BY DEFAULT — pure-CSS <details> toggle, no JS. */
.kit-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kit-subscribe-rail {
  position: fixed; top: 38%; right: 0; z-index: 40;
}
.kit-subscribe-rail-panel { display: block; }
.kit-subscribe-rail-tab {
  list-style: none; cursor: pointer; user-select: none;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: var(--kit-accent); color: var(--kit-accent-contrast, #fff);
  font-family: var(--kit-font-heading); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 0.74rem; line-height: 1;
  /* NARROWER tab — trimmed horizontal padding so the vertical strip is slim
     (Damian: it read too wide). The arrow is a flex child so it sits in-line
     with the SUBSCRIBE text, not nudged out by trailing whitespace. */
  padding: 0.95rem 0.3rem;
  border-radius: 0 12px 12px 0;
  box-shadow: -3px 2px 14px rgba(0,0,0,0.16);
  position: absolute; right: 0; top: 0;
}
.kit-subscribe-rail-tab::-webkit-details-marker { display: none; }
.kit-subscribe-rail-tab::after { content: "↑"; font-size: 0.8em; }
.kit-subscribe-rail-panel[open] .kit-subscribe-rail-tab { display: none; }
.kit-subscribe-rail-body {
  width: min(300px, 80vw);
  background: var(--kit-surface); color: var(--kit-fg);
  border: 1px solid var(--kit-border); border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -4px 4px 22px rgba(0,0,0,0.16);
  padding: 1.1rem 1.15rem 1.25rem;
}
.kit-subscribe-rail-heading {
  font-family: var(--kit-font-heading); font-weight: 700; font-size: 1.05rem;
  margin: 0 0 0.3rem;
}
.kit-subscribe-rail-intro { font-size: 0.86rem; color: var(--kit-muted); margin: 0 0 0.8rem; }
.kit-subscribe-rail-form { display: flex; flex-direction: column; gap: 0.5rem; }
.kit-subscribe-rail-form input[type="email"] {
  width: 100%; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--kit-border); border-radius: var(--kit-radius, 8px);
  background: var(--kit-bg); color: var(--kit-fg);
}
.kit-subscribe-rail-form .kit-btn, .kit-subscribe-rail-link { width: 100%; text-align: center; }
.kit-subscribe-rail-link { display: inline-block; }
.kit-subscribe-rail-note { font-size: 0.74rem; color: var(--kit-muted); margin: 0.6rem 0 0; }
@media (max-width: 640px) {
  .kit-subscribe-rail { top: auto; bottom: 12px; }
  .kit-subscribe-rail-body { width: min(290px, 86vw); }
}

/* ============ 18. breadcrumbs ============ */
.kit-breadcrumbs { border-bottom: 1px solid var(--kit-border); background: color-mix(in srgb, var(--kit-surface) 60%, var(--kit-bg)); }
.kit-breadcrumbs-inner { max-width: var(--kit-max-width, 1120px); margin-inline: auto; padding: 0.55rem clamp(1.25rem, 5vw, 2.5rem); }
.kit-crumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; font-size: 0.82rem; }
.kit-crumb a { color: var(--kit-muted); text-decoration: none; }
.kit-crumb a:hover { color: var(--kit-accent); }
.kit-crumb span[aria-current] { color: var(--kit-fg); font-weight: 600; }
.kit-crumb-sep { color: var(--kit-muted); opacity: 0.6; }

/* ============ 19. blog layout + sidebar (live DSA blog parity) ============ */
.kit-blog-layout--sidebar { display: grid; grid-template-columns: 1fr 19rem; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
@media (max-width: 900px) { .kit-blog-layout--sidebar { grid-template-columns: 1fr; } }
.kit-blog-sidebar { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 5.5rem; }
@media (max-width: 900px) { .kit-blog-sidebar { position: static; } }
/* "Learn this · take it further" — medium-hub course/product rail (top of the blog sidebar) */
.kit-learn-rail { background: var(--kit-surface); border: 1px solid var(--kit-border); border-left: 3px solid var(--kit-accent); border-radius: var(--kit-radius); padding: 1.1rem 1.2rem; }
.kit-learn-h { font-family: var(--kit-font-heading, inherit); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kit-accent); margin: 0 0 0.85rem; }
.kit-learn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.kit-learn-item { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--kit-border) 60%, transparent); }
.kit-learn-item:last-child { border-bottom: 0; padding-bottom: 0; }
.kit-learn-badge { align-self: flex-start; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kit-accent-contrast); background: var(--kit-accent); padding: 0.15rem 0.55rem; border-radius: 999px; }
.kit-learn-title { font-weight: 600; font-size: 1rem; color: var(--kit-fg); text-decoration: none; line-height: 1.3; }
.kit-learn-title:hover { color: var(--kit-accent); }
.kit-learn-blurb { margin: 0; font-size: 0.85rem; color: var(--kit-muted); line-height: 1.45; }
.kit-learn-cta { align-self: flex-start; margin-top: 0.2rem; font-size: 0.8rem; padding: 0.4rem 0.9rem; }
/* course grid — self-paced course tiles (full 16:9 artwork + coming-soon + register) */
.kit-courses-h { font-family: var(--kit-font-heading, inherit); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 0 0 0.4rem; }
.kit-courses-intro { max-width: 62ch; }
.kit-courses-grid { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.6rem; }
.kit-course-card { display: flex; flex-direction: column; background: var(--kit-surface); border: 1px solid var(--kit-border); border-radius: var(--kit-radius); overflow: hidden; }
.kit-course-cover { position: relative; aspect-ratio: 16 / 9; background: var(--kit-border); }
.kit-course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-course-cover-type { display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; font-family: var(--kit-font-heading, inherit); font-weight: 700; text-align: center; }
.kit-course-status { align-self: flex-start; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kit-accent-contrast); background: var(--kit-accent); padding: 0.2rem 0.6rem; border-radius: 999px; }
.kit-course-foot { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.kit-course-blurb { margin: 0; font-size: 0.9rem; color: var(--kit-muted); line-height: 1.45; }
.kit-course-cta { align-self: flex-start; font-size: 0.85rem; }
.kit-blogbio, .kit-blog-subcard, .kit-blog-recent, .kit-blog-followcard {
  border: 1px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.3);
  background: var(--kit-surface); padding: 1.25rem;
}
.kit-blogbio { text-align: center; }
.kit-blogbio-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: center top; margin: 0 auto 1rem; box-shadow: 0 12px 26px -16px rgba(0,0,0,0.5); border: 3px solid var(--kit-bg); }
.kit-blogbio-name { font-family: var(--kit-font-heading); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.4rem; }
.kit-blogbio-body { color: var(--kit-muted); font-size: 0.9rem; margin: 0 0 0.9rem; line-height: 1.55; }
.kit-blogbio-cta { font-size: 0.85rem; padding: 0.5rem 1rem; }
.kit-blog-subcard-heading { font-family: var(--kit-font-heading); font-weight: 700; font-size: 1rem; margin: 0 0 0.3rem; }
.kit-blog-subcard-intro { color: var(--kit-muted); font-size: 0.85rem; margin: 0 0 0.8rem; }
.kit-blogbio-subform, .kit-blog-subcard form { display: flex; flex-direction: column; gap: 0.5rem; }
.kit-blog-subcard input[type="email"] { width: 100%; padding: 0.55rem 0.7rem; font: inherit; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); }
.kit-blog-subcard .kit-btn, .kit-blogbio-subbtn { width: 100%; text-align: center; }
.kit-blog-recent-h { font-family: var(--kit-font-heading); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kit-muted); margin: 0 0 0.7rem; }
.kit-blog-recent-list, .kit-blog-follow { list-style: none; margin: 0; padding: 0; }
.kit-blog-recent-item { display: flex; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--kit-border); }
.kit-blog-recent-item:last-child { border-bottom: none; }
.kit-blog-recent-thumb { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--kit-accent) 10%, var(--kit-surface)); }
.kit-blog-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kit-blog-recent-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kit-blog-recent-title { color: var(--kit-fg); text-decoration: none; font-weight: 600; font-size: 0.88rem; line-height: 1.3; }
.kit-blog-recent-title:hover { color: var(--kit-accent); }
.kit-blog-recent-date { color: var(--kit-muted); font-size: 0.76rem; }
.kit-blog-follow { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kit-blog-follow a { font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; text-decoration: none; background: color-mix(in srgb, var(--kit-accent) 12%, transparent); color: var(--kit-accent); }
.kit-blog-follow a:hover { background: var(--kit-accent); color: var(--kit-accent-contrast); }
.kit-blog-catlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kit-blog-catlist li + li { border-top: 1px solid color-mix(in srgb, var(--kit-border) 60%, transparent); }
.kit-blog-cat { display: block; padding: 0.5rem 0; text-decoration: none; color: var(--kit-fg); font-size: 0.9rem; font-weight: 600; }
.kit-blog-cat:hover { color: var(--kit-accent); }

/* CCS promo tile — photo + dark opacity overlay + white copy + "Explore",
   like the live blog sidebar. Background image carries the gradient overlay
   inline; this styles the card + text. Content is plain text (no JS reveal). */
.kit-blog-tile {
  display: block; border-radius: var(--kit-radius); overflow: hidden;
  background-size: cover; background-position: center; min-height: 13rem;
  text-decoration: none; color: #fff; box-shadow: 0 12px 26px -16px rgba(0,0,0,0.5);
  background-color: var(--kit-fg);
}
.kit-blog-tile-body { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 13rem; padding: 1.1rem; gap: 0.3rem; }
.kit-blog-tile-eyebrow { font-family: var(--kit-font-heading); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 0; color: #fff; opacity: 0.92; }
.kit-blog-tile-heading { font-family: var(--kit-font-heading); font-size: 1.2rem; font-weight: 700; line-height: 1.2; margin: 0; color: #fff; }
.kit-blog-tile-intro { font-size: 0.85rem; margin: 0; color: #fff; opacity: 0.9; }
.kit-blog-tile-cta { display: inline-block; margin-top: 0.5rem; font-family: var(--kit-font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; border-bottom: 2px solid #fff; padding-bottom: 1px; width: fit-content; }
.kit-blog-tile:hover .kit-blog-tile-cta { color: var(--kit-accent-2, var(--kit-accent)); border-color: currentColor; }

/* the blue clickable subcategory label above an article title (live blog) */
.kit-article-eyebrow { margin-bottom: 0.5rem; }
.kit-eyebrow-link { color: inherit; text-decoration: none; }
.kit-eyebrow-link:hover { text-decoration: underline; }
/* In the sidebar blog layout each post is a compact horizontal row —
   thumbnail left, title/meta/summary right — so several posts read nicely
   down the page (a faithful copy of the live blog list, NOT one big card). */
.kit-blog-layout--sidebar .kit-post-list { grid-template-columns: 1fr; gap: clamp(1rem, 2.4vw, 1.5rem); }
.kit-blog-layout--sidebar .kit-post-card { padding: 0; }
.kit-blog-layout--sidebar .kit-post-card > article {
  display: grid; grid-template-columns: 240px 1fr; align-items: stretch; height: 100%;
}
.kit-blog-layout--sidebar .kit-post-cover { aspect-ratio: auto; height: 100%; min-height: 170px; }
.kit-blog-layout--sidebar .kit-post-body { padding: clamp(1rem, 2.4vw, 1.4rem); justify-content: center; }
.kit-blog-layout--sidebar .kit-post-title { font-size: 1.2rem; }
.kit-blog-layout--sidebar .kit-post-body .kit-article-tags { margin-top: 0.9rem; padding-top: 0; }
@media (max-width: 560px) {
  .kit-blog-layout--sidebar .kit-post-card > article { grid-template-columns: 1fr; }
  .kit-blog-layout--sidebar .kit-post-cover { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ============ 20. video poster (click-to-play) ============ */
.kit-video { margin: 0 0 1.25rem; }
.kit-video-poster { position: relative; display: block; border-radius: calc(var(--kit-radius) * 1.3); overflow: hidden; background: var(--kit-surface); aspect-ratio: 16 / 9; box-shadow: 0 24px 50px -30px rgba(0,0,0,0.5); }
.kit-video-poster img, .kit-video-poster-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-video-poster-fallback { background: linear-gradient(135deg, var(--kit-accent), var(--kit-accent-2)); }
.kit-video-poster::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.18); transition: background 0.2s ease; }
.kit-video-poster:hover::after { background: rgba(0,0,0,0.08); }
.kit-video-play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--kit-accent); color: var(--kit-accent-contrast); display: grid; place-items: center; z-index: 2; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5); transition: transform 0.18s ease; padding-left: 4px; }
.kit-video-poster:hover .kit-video-play { transform: scale(1.08); }
.kit-video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: calc(var(--kit-radius) * 1.3); display: block; }
.kit-video-caption { color: var(--kit-muted); font-size: 0.88rem; margin: 0.6rem 0 0; text-align: center; }

/* ---- opening hours + map embed (2026-08-13, Prospects component-gap flags) */
.kit-hours { max-width: 30rem; margin: 0; border: 1.5px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2); overflow: hidden; }
.kit-hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 1rem; }
.kit-hours-row + .kit-hours-row { border-top: 1px solid var(--kit-border); }
.kit-hours-row dt { font-weight: 600; margin: 0; }
.kit-hours-row dd { margin: 0; color: var(--kit-muted); }
.kit-hours-note { color: var(--kit-muted); font-size: 0.88rem; margin: 0.6rem 0 0; }
/* MENU (2026-09-07) — a food-and-drink menu as page content, not a PDF link.
   Two columns on a desktop the way a printed menu falls, one on a phone. The
   groups are laid out with CSS columns rather than grid so a long group is
   allowed to run past a short one instead of leaving a hole — a menu reads
   down, not across. break-inside keeps a group whole across the column break. */
/* SCOPED TO `--food` ON PURPOSE (2026-09-09). The navigation has owned
   `.kit-menu`, `.kit-menu-item` and `.kit-menu-heading` since kit-nav.css was
   written, so the unscoped versions of these three rules landed on every
   header on every site: each nav item after the first picked up this block's
   `padding-top: .8rem` and `border-top`, which is the hairline above — and the
   half-step down of — WORKSHOPS, ABOUT and CONTACT in every one of the nine
   starter previews shot on 8 September. A menu's own rules must not be able to
   reach the navigation, so the container carries a modifier and everything that
   shares a name with the nav hangs off it. */
.kit-menu--food { columns: 1; column-gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 760px) { .kit-menu--food[data-columns="2"] { columns: 2; } .kit-menu--food[data-columns="3"] { columns: 3; } }
.kit-menu-group { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: block; margin: 0 0 1.9rem; border: 1.5px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2); padding: 1.15rem 1.25rem 1.25rem; background: var(--kit-surface); }
.kit-menu-group-title { margin: 0 0 0.15rem; font-size: 1.18rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; }
.kit-menu-group-note { font-size: 0.82rem; font-weight: 500; color: var(--kit-muted); letter-spacing: 0.02em; text-transform: uppercase; }
.kit-menu-headings { display: flex; justify-content: flex-end; gap: 1.1rem; margin: 0.35rem 0 0.1rem; }
.kit-menu-headings-spacer { flex: 1 1 auto; }
.kit-menu--food .kit-menu-heading { flex: 0 0 3.4rem; text-align: right; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kit-muted); }
.kit-menu-items { list-style: none; margin: 0.55rem 0 0; padding: 0; }
.kit-menu--food .kit-menu-item + .kit-menu-item { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--kit-border); }
.kit-menu-item-head { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; }
.kit-menu-item-name { flex: 1 1 auto; font-weight: 600; }
.kit-menu-prices { display: flex; gap: 1.1rem; flex: 0 0 auto; }
.kit-menu-price { flex: 0 0 3.4rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kit-menu-item-desc { margin: 0.2rem 0 0; color: var(--kit-muted); font-size: 0.92rem; line-height: 1.45; max-width: 42ch; }
.kit-menu-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kit-accent); border: 1px solid var(--kit-border); border-radius: 999px; padding: 0.02rem 0.4rem; vertical-align: 0.08em; }
.kit-menu-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.15rem; margin: 0.4rem 0 0; color: var(--kit-muted); font-size: 0.86rem; }
.kit-menu-key-item { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.kit-menu-note { color: var(--kit-muted); font-size: 0.88rem; margin: 0.7rem 0 0; }
.kit-map { margin: 0; }
.kit-map-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; aspect-ratio: 16 / 9; max-height: 24rem; border: 1.5px dashed var(--kit-border); border-radius: calc(var(--kit-radius) * 1.3); background: var(--kit-surface); color: var(--kit-fg); text-decoration: none; transition: border-color 0.15s ease; }
.kit-map-load:hover { border-color: var(--kit-accent); }
.kit-map-pin { color: var(--kit-accent); display: inline-flex; }
.kit-map-label { font-weight: 600; text-align: center; padding: 0 1rem; }
.kit-map-frame { width: 100%; aspect-ratio: 16 / 9; max-height: 24rem; border: 0; border-radius: calc(var(--kit-radius) * 1.3); display: block; }
.kit-map-caption { color: var(--kit-muted); font-size: 0.88rem; margin: 0.6rem 0 0; text-align: center; }
/* location panel beside an eager map (round 7 — the contact reference):
   details left, map right; single column on mobile. New classes only, so
   existing brands render exactly as before. */
.kit-map-location { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.4rem, 3.5vw, 2.75rem); align-items: start; }
.kit-map-details-heading { margin: 0 0 0.7rem; }
.kit-map-address { line-height: 1.65; margin: 0 0 0.9rem; }
.kit-map-detail { margin: 0 0 0.9rem; }
.kit-map-route { margin: 1.15rem 0 0; }
@media (max-width: 800px) { .kit-map-location { grid-template-columns: 1fr; } }

/* ---- faq clamshells (2026-08-14, CCB wired-demo brief items 3+4) ----------
   Native <details>/<summary> — no JS. The + indicator rotates 45° to an × on
   [open], pure CSS. Rows stay readable: capped width, clean borders. */
.kit-faq { max-width: 46rem; }
.kit-faq-item { border: 1.5px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2); background: var(--kit-surface); }
.kit-faq-item + .kit-faq-item { margin-top: 0.6rem; }
.kit-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.kit-faq-q::-webkit-details-marker { display: none; }
.kit-faq-q:hover .kit-faq-qtext { color: var(--kit-accent); }
.kit-faq-ind { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--kit-accent); }
.kit-faq-ind::before { content: '+'; font-size: 1.35rem; font-weight: 600; line-height: 1; transition: transform 0.18s ease; }
.kit-faq-item[open] .kit-faq-ind::before { transform: rotate(45deg); }
.kit-faq-a { padding: 0 1rem 0.95rem; color: var(--kit-muted); line-height: 1.6; }
/* columns: 2 (round 7 — the reference FAQ grid): two CSS columns filling
   top-to-bottom left first, one column on mobile. Opt-in class only. */
.kit-faq--cols2 { max-width: none; columns: 2; column-gap: 1.6rem; }
.kit-faq--cols2 .kit-faq-item { break-inside: avoid; margin-bottom: 0.6rem; }
.kit-faq--cols2 .kit-faq-item + .kit-faq-item { margin-top: 0; }
@media (max-width: 760px) { .kit-faq--cols2 { columns: 1; } }

/* ---- tabbed gallery (round 7, 2026-08-14) ---------------------------------
   The gallery page template: reuses the tabbed-blog chip row, the shared
   carousel behaviour and the masonry gallery — only the panel rhythm is new.
   New classes only, so existing brands render exactly as before. */
.kit-tabgal-panel { margin: 0 0 2.8rem; scroll-margin-top: 90px; }
.kit-tabgal-panel-h { font-size: 1.25rem; margin: 1.1rem 0 0.9rem; }
.kit-tabgal-carousel { margin: 0 0 1.2rem; }
.kit-tabgal-grid { margin-top: 0.2rem; }

/* ---- enquiry form (2026-08-14, CCB wired-demo brief item 2) ---------------
   Real field-level forms (table booking / room hire): a two-column grid that
   collapses to one on mobile; textarea/fieldsets/actions span both columns.
   Controls mirror .kit-field; the submit is the accent kit-btn. */
.kit-enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; max-width: 46rem; }
.kit-enquiry-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.kit-enquiry-field--wide { grid-column: 1 / -1; }
.kit-enquiry-field > label { font-weight: 600; font-size: 0.92rem; }
.kit-enquiry input, .kit-enquiry textarea, .kit-enquiry select {
  font: inherit;
  color: var(--kit-fg);
  background: var(--kit-bg);
  border: 1.5px solid var(--kit-border);
  border-radius: var(--kit-radius);
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kit-enquiry input:focus, .kit-enquiry textarea:focus, .kit-enquiry select:focus {
  outline: none;
  border-color: var(--kit-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-accent) 22%, transparent);
}
.kit-enquiry textarea { resize: vertical; }
.kit-enquiry-group { margin: 0; border: 1.5px solid var(--kit-border); border-radius: calc(var(--kit-radius) * 1.2); padding: 0.85rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.5rem 1rem; }
.kit-enquiry-group legend { font-weight: 600; font-size: 0.92rem; padding: 0 0.35rem; }
.kit-enquiry-choice { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; }
.kit-enquiry-choice input { width: auto; margin-top: 0.2rem; flex: 0 0 auto; }
.kit-enquiry-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kit-enquiry-actions .kit-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.kit-enquiry-note { margin: 0; font-size: 0.88rem; color: var(--kit-muted); }
@media (max-width: 700px) {
  .kit-enquiry { grid-template-columns: 1fr; }
}

/* ---- tiered header: opt-in mainbar nav + nav2 + mainbar socials -----------
   (2026-08-14, CCB wired-demo brief items 1+8.) Everything here is scoped to
   the NEW classes (.kit-header--mainbarnav / .kit-mainbar-nav / .kit-nav2 /
   .kit-mainbar-social), which only exist when brand.header.mainbarNav is set —
   legacy tiered brands (CP52 live) render none of these selectors. Band
   colours stay per-client (custom.css); this is layout + inheritance only. */
.kit-header--mainbarnav .kit-mainbar-inner { flex-wrap: wrap; }
.kit-mainbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.1rem; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.kit-mainbar-nav .kit-nav-link { color: inherit; text-decoration: none; font-weight: 600; font-size: 0.98rem; padding: 0.35rem 0; }
.kit-header--mainbarnav .kit-mainbar-ctas { display: flex; align-items: center; gap: 0.6rem; }
.kit-header--mainbarnav .kit-icon-btn { color: inherit; display: inline-flex; padding: 0.3rem; }
.kit-mainbar-social { display: flex; align-items: center; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.kit-mainbar-social .kit-social-icon { display: inline-flex; color: inherit; padding: 0.2rem; }
.kit-mainbar-social .kit-social-icon svg { width: 20px; height: 20px; }
.kit-subnav--nav2 .kit-subnav-inner { justify-content: flex-end; }
.kit-nav2 { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; justify-content: flex-end; }
.kit-nav2-link { color: inherit; text-decoration: none; font-size: 0.9rem; padding: 0.3rem 0; opacity: 0.92; }
.kit-nav2-link:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 900px) {
  .kit-mainbar-nav { flex-basis: 100%; order: 3; justify-content: flex-start; }
  .kit-header--mainbarnav .kit-subnav-inner { justify-content: flex-start; }
  .kit-nav2 { justify-content: flex-start; }
}

/* ============ 21. site search ============ */
.kit-search-form { display: flex; gap: 0.5rem; max-width: 36rem; margin-bottom: 1rem; }
.kit-search-input { flex: 1; padding: 0.7rem 0.9rem; font: inherit; border: 1.5px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); }
.kit-search-input:focus { outline: none; border-color: var(--kit-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-accent) 22%, transparent); }
.kit-search-status { color: var(--kit-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.kit-search-results { margin-top: 0.5rem; }

/* ============ 22. draft / sign-off flag ============ */
.kit-draft-flag {
  background: color-mix(in srgb, #f0a000 18%, var(--kit-bg)); border: 1px solid #f0a000;
  border-radius: var(--kit-radius); padding: 0.7rem 1rem; font-size: 0.88rem; color: var(--kit-fg);
  margin: 0 0 1.5rem;
}

@media print {
  .kit-header, .kit-cta-band, .kit-sdk-block, .kit-subscribe-rail, .kit-utilbar, .kit-breadcrumbs { display: none !important; }
  body { color: #000; background: #fff; }
}

/* Compact hero variant — tighter vertical footprint; caps a tall media so the
   content below is reached sooner (used on /reads/). Only applies where set. */
.kit-hero--compact { padding-block: clamp(1rem, 2vw, 1.5rem); }
.kit-hero--compact .kit-hero-inner { align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.kit-hero--compact .kit-hero-copy h1 { margin-bottom: 0.15em; }
.kit-hero--compact .kit-hero-sub { margin-bottom: 0; }
.kit-hero--compact .kit-hero-media img { aspect-ratio: auto; max-height: 300px; width: 100%; object-fit: cover; }

/* "Also in my ears" — the listened-to (audiobook) shelf */
.reads-listened { columns: 2; column-gap: 2.6rem; margin-top: 1.4rem; }
.reads-listened-intro { column-span: all; max-width: 62ch; color: var(--kit-muted); margin: 0 0 1.6rem; }
.reads-listened-group { break-inside: avoid; margin: 0 0 1.4rem; }
.reads-listened-group h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kit-accent, #1e6f8c); margin: 0 0 0.5rem; }
.reads-listened-group ul { list-style: none; margin: 0; padding: 0; }
.reads-listened-group li { margin: 0 0 0.35rem; font-size: 0.95rem; line-height: 1.35; }
.reads-listened .rl-t { font-weight: 600; }
.reads-listened .rl-a { color: var(--kit-muted); }
@media (max-width: 640px) { .reads-listened { columns: 1; } }

/* ── Faceted-shop product page: the parts the flat PDP never needed ─────────
   The flat storefront's PDP already styles .kit-pdp-cols/-figure/-thumbs, and
   this page reuses those class names deliberately so the two stay consistent.
   What follows is only what is genuinely new: the option pickers, the quantity
   stepper, the sale price and the show/hide. */

/* [hidden] only sets display:none in the UA stylesheet, so ANY author display
   rule beats it. .kit-tax-layout is display:grid, so hiding it did nothing and
   the browse grid sat on screen underneath the product page. */
/* Hiding the browse layout must NOT take the cart drawer with it — the drawer
   is a child of this layout, and display:none collapsed it to a zero box, so
   the cart was unreachable from the product page: exactly where someone has
   just added something. Hide the layout's BROWSE children, keep the drawer. */
.kit-tax-pdp[hidden] { display: none !important; }
.kit-tax-layout[hidden] { display: block !important; padding: 0 !important; }
.kit-tax-layout[hidden] > *:not(.kit-tax-drawer) { display: none !important; }
.kit-tax-pdp { padding: .25rem 0 1rem; }
.kit-tax-cardlink { display: block; color: inherit; text-decoration: none; }
.kit-tax-cardlink:hover h4 { text-decoration: underline; }

.kit-pdp-crumbs { font-size: .85rem; color: var(--kit-muted); margin-bottom: 1rem; }
.kit-pdp-crumb { color: var(--kit-accent); text-decoration: none; }
.kit-pdp-crumb:hover { text-decoration: underline; }
.kit-pdp-crumb-here { color: var(--kit-text); }
.kit-pdp-catchip { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kit-accent); background: color-mix(in srgb, var(--kit-accent) 10%, transparent); border-radius: 999px; padding: .3rem .75rem; text-decoration: none; margin-bottom: .6rem; }

/* Vertical thumbnail rail beside the hero on desktop (Kit and Ace), dropping
   under it on narrow screens where a side rail would eat the photo's width. */
@media (min-width: 761px) {
  .kit-pdp-gallery { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: .7rem; align-items: start; }
  .kit-pdp-gallery .kit-pdp-figure { grid-column: 2; grid-row: 1; }
  .kit-pdp-gallery .kit-pdp-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: .5rem; }
  .kit-pdp-gallery .kit-pdp-thumb { width: 74px; height: 74px; }
}

.kit-pdp-was { text-decoration: line-through; color: var(--kit-muted); font-size: 1.05rem; margin-right: .1rem; }
.kit-pdp-price.is-sale { color: var(--kit-accent); }

.kit-pdp-axis { margin-bottom: .9rem; }
.kit-pdp-axislabel { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kit-muted); margin-bottom: .4rem; }
.kit-pdp-axispick { text-transform: none; letter-spacing: 0; color: var(--kit-text); }
.kit-pdp-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.kit-pdp-pill { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .9rem; padding: .5rem .9rem; border: 1px solid var(--kit-border); border-radius: 999px; background: var(--kit-bg); cursor: pointer; }
.kit-pdp-pill:hover { border-color: var(--kit-accent); }
.kit-pdp-pill.is-on { border-color: var(--kit-accent); box-shadow: 0 0 0 1px var(--kit-accent); font-weight: 700; }
/* An unavailable combination is SHOWN and struck through, never hidden — a
   shopper needs to know the size exists and is gone, not wonder if it ever was. */
.kit-pdp-pill.is-dead { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.kit-pdp-swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.kit-pdp-sel { width: 100%; max-width: 320px; font: inherit; font-size: .95rem; padding: .6rem .7rem; border: 1px solid var(--kit-border); border-radius: 10px; background: var(--kit-bg); }

.kit-pdp-buy { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; margin-top: 1rem; }
.kit-pdp-qty { display: inline-flex; align-items: center; border: 1px solid var(--kit-border); border-radius: 10px; overflow: hidden; }
.kit-pdp-qty button { font: inherit; font-size: 1.1rem; width: 2.3rem; padding: .45rem 0; border: 0; background: var(--kit-surface); cursor: pointer; }
.kit-pdp-qtyin { width: 3rem; text-align: center; font: inherit; border: 0; background: var(--kit-bg); }
.kit-pdp-qtyin::-webkit-outer-spin-button, .kit-pdp-qtyin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kit-pdp-total { margin: .6rem 0 0; font-size: .95rem; }
.kit-pdp-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .9rem; }
.kit-pdp-tag { font-size: .74rem; color: var(--kit-muted); border: 1px solid var(--kit-border); border-radius: 999px; padding: .18rem .6rem; }

/* ── Slide-out cart drawer + unit pricing ──────────────────────────────────
   C&C run a slide-out "Review My Order". A sidebar cart is invisible on a phone
   and easy to miss on a product page — which is exactly where someone has just
   added something. */
.kit-tax-carttrigger { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .95rem; font-weight: 700; padding: .8rem 1.2rem; border: 0; border-radius: 999px; background: var(--kit-accent); color: #fff; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.kit-tax-cartcount { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: rgba(255,255,255,.25); font-size: .8rem; font-weight: 800; }
.kit-tax-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 45; }
.kit-tax-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); z-index: 50; background: var(--kit-bg); border-left: 1px solid var(--kit-border); border-radius: 0; transform: translateX(100%); transition: transform .22s ease; overflow-y: auto; padding: 1.1rem; position: fixed !important; }
.kit-tax-drawer.is-open { transform: translateX(0); }
.kit-tax-drawerhead { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.kit-tax-drawerhead h3 { margin: 0; flex: 1; text-align: center; font-size: 1.05rem; }
.kit-tax-drawerclose { font: inherit; font-size: 1.2rem; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--kit-muted); padding: .2rem .4rem; }
.kit-tax-drawerhead .kit-tax-cartcount { background: var(--kit-surface); color: var(--kit-text); }

/* A cart LINE is a product with a quantity, not one row per unit. */
.kit-tax-line { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--kit-border); }
.kit-tax-linethumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--kit-surface); }
.kit-tax-linename { font-size: .92rem; line-height: 1.35; margin-bottom: .35rem; }
.kit-tax-lineqty { display: flex; align-items: center; gap: .4rem; }
.kit-tax-lineqty button { font: inherit; font-size: .9rem; min-width: 1.7rem; padding: .15rem .4rem; border: 1px solid var(--kit-border); border-radius: 6px; background: var(--kit-bg); cursor: pointer; }
.kit-tax-qn { min-width: 1.6rem; text-align: center; font-size: .9rem; }
.kit-tax-rm { border: 0 !important; color: var(--kit-muted); font-size: .82rem !important; margin-left: .3rem; }
.kit-tax-rm:hover { color: #b3261e; }
.kit-tax-lineprice { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.kit-tax-subrow { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; font-size: 1.05rem; font-weight: 700; }
.kit-tax-subnote { margin: .2rem 0 .9rem; font-size: .8rem; color: var(--kit-muted); }

/* Unit pricing — "£16.00 per metre", "(£4.00 per 0.25m)", live Total. */
.kit-pdp-perunit { font-size: .9rem; color: var(--kit-muted); }
.kit-pdp-substep { margin: -.4rem 0 .7rem; font-size: .85rem; color: var(--kit-muted); }
.kit-pdp-total { margin: .7rem 0 0; font-size: 1rem; }

@media (max-width: 620px) { .kit-tax-carttrigger { right: .75rem; bottom: .75rem; } }

/* ── Product-page templates ────────────────────────────────────────────────
   A preset REORDERS and EMPHASISES; it never invents content. Each of these is
   the classic layout with one thing turned up. */

/* editorial — story first: wider imagery, the description promoted and set
   larger, gallery as a horizontal strip under the hero. */
.kit-pdp-tpl-editorial .kit-pdp-cols { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); }
@media (min-width: 761px) {
  .kit-pdp-tpl-editorial .kit-pdp-gallery { grid-template-columns: 1fr; }
  .kit-pdp-tpl-editorial .kit-pdp-gallery .kit-pdp-figure { grid-column: 1; grid-row: 1; }
  .kit-pdp-tpl-editorial .kit-pdp-gallery .kit-pdp-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
}
.kit-pdp-desc.is-lead { font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.4rem; }
.kit-pdp-tpl-editorial .kit-pdp-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

/* craft — the running total is the point, so give it weight. */
.kit-pdp-tpl-craft .kit-pdp-total { font-size: 1.15rem; padding: .6rem .8rem; border: 1px solid var(--kit-border); border-radius: 10px; display: inline-block; }
.kit-pdp-tpl-craft .kit-pdp-perunit { font-weight: 600; }

/* ── REVIEWS ─────────────────────────────────────────────────────────────────
   Social proof on the product page. Everything here is built from the kit's own
   tokens rather than fixed colours, because this block appears on both sites and
   on whatever a Forge owner picks next — a hard-coded gold star looks borrowed
   on a shop whose accent is teal.

   The one colour that is NOT tokenised is the star fill: a star drawn in the
   brand accent stops reading as a rating and starts reading as decoration.
   Amber is what every shopper has been trained on for twenty years, and this is
   not the place to be original. */
.kit-rv-stars { white-space: nowrap; letter-spacing: 0.06em; }
.kit-rv-on { color: #e0a021; }
.kit-rv-off { color: color-mix(in srgb, var(--kit-muted) 35%, transparent); }

/* The line under the title. It is a link because a shopper who reads it wants
   the reviews, and making them hunt for the section is a small daily tax. */
.kit-rv-sum { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.7rem;
  text-decoration: none; color: inherit; font-size: 0.9rem; }
.kit-rv-sum:hover .kit-rv-count { text-decoration: underline; }
.kit-rv-avg { font-weight: 800; }
.kit-rv-count { color: var(--kit-muted); }

.kit-rv { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--kit-border); }
.kit-rv-h { margin: 0 0 1rem; font-size: 1.25rem; }
.kit-rv-load { color: var(--kit-muted); font-size: 0.9rem; margin: 0; }

/* Score beside the distribution. The bars are the part people actually read —
   a 4.6 made of forty fives and four ones is a different product from a 4.6
   made entirely of fours, and only the breakdown tells you which. */
.kit-rv-top { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; }
.kit-rv-score { display: flex; flex-direction: column; gap: 0.2rem; min-width: 7rem; }
.kit-rv-big { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kit-rv-of { color: var(--kit-muted); font-size: 0.85rem; }
.kit-rv-bars { flex: 1 1 15rem; max-width: 26rem; display: flex; flex-direction: column; gap: 0.3rem; }
.kit-rv-bar { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.kit-rv-barn { color: var(--kit-muted); width: 2.2rem; flex: none; }
.kit-rv-barc { color: var(--kit-muted); width: 2rem; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.kit-rv-track { flex: 1; height: 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--kit-muted) 16%, transparent); overflow: hidden; }
.kit-rv-fill { display: block; height: 100%; background: #e0a021; border-radius: 999px; }

.kit-rv-list { display: flex; flex-direction: column; }
.kit-rv-item { padding: 1.1rem 0; border-top: 1px solid var(--kit-border); }
.kit-rv-item:first-child { border-top: 0; padding-top: 0; }
.kit-rv-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.kit-rv-who { font-weight: 700; }
/* A fact, not a badge: the engine cannot create a review without a transaction
   to hang it on. */
.kit-rv-verified { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--kit-accent) 14%, transparent); color: var(--kit-accent); }
.kit-rv-when { color: var(--kit-muted); font-size: 0.8rem; margin-left: auto; }
.kit-rv-title { margin: 0.5rem 0 0.2rem; font-size: 1rem; }
.kit-rv-body { margin: 0.35rem 0 0; line-height: 1.6; }

/* For craft and fabric the review often IS the photo — someone showing what
   they made from it. Scrolls horizontally rather than wrapping, so six photos
   never push the next review off the fold. */
.kit-rv-photos { display: flex; gap: 0.5rem; margin-top: 0.7rem; overflow-x: auto; padding-bottom: 0.2rem; }
.kit-rv-photo { width: 5.5rem; height: 5.5rem; flex: none; object-fit: cover; border-radius: calc(var(--kit-radius) - 2px); border: 1px solid var(--kit-border); }

/* ⚠️ The incentive disclosure is an FTC requirement and must be legible where
   the review is — never collapsed, never faded out of readability. Muted enough
   to be secondary, dark enough to pass contrast. */
.kit-rv-disclosure { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--kit-muted); font-style: italic; }
.kit-rv-origin { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--kit-muted); }

/* A well-handled complaint persuades more than a page of five stars, so the
   shop's reply is given real presence rather than tucked underneath in grey. */
.kit-rv-reply { margin: 0.7rem 0 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--kit-accent);
  background: color-mix(in srgb, var(--kit-accent) 6%, transparent); border-radius: 0 var(--kit-radius) var(--kit-radius) 0; }
.kit-rv-replyw { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kit-accent); }
.kit-rv-reply p { margin: 0.25rem 0 0; font-size: 0.92rem; line-height: 1.55; }

.kit-rv-more { margin-top: 1.1rem; background: none; border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  padding: 0.55rem 1.1rem; font: inherit; font-size: 0.9rem; cursor: pointer; color: inherit; }
.kit-rv-more:hover { border-color: var(--kit-accent); color: var(--kit-accent); }

@media (max-width: 640px) {
  .kit-rv-top { gap: 1.1rem; }
  .kit-rv-when { margin-left: 0; width: 100%; }
}

/* ── REVIEW FORM (/review/?t=…) ─────────────────────────────────────────────
   The page the emailed review link lands on. Read reviewFormBlock in
   kit/lib/sdk-blocks.mjs, and the header of the engine's crm/reviews.ts, before
   changing anything here — some of what looks like styling is legal.

   ⚠️ THE STAR CONTROL MUST NOT PREFER A RATING. All five sit at identical
   weight, size and colour until the customer picks one; there is no hover
   cascade that fills 1–5 more readily than 1, no default, and no "most people
   choose" affordance. A control that leans is the implicit condition the FTC
   rule prohibits, and it would be an easy thing to add here by accident while
   making it "feel nicer". */
.kit-rvf { max-width: 40rem; margin-inline: auto; }
.kit-rvf-load { color: var(--kit-muted); font-size: 0.9rem; margin: 0; }

.kit-rvf-panel, .kit-rvf-form {
  border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  padding: 1.6rem 1.5rem; background: var(--kit-surface, transparent);
}
.kit-rvf-title { margin: 0 0 0.6rem; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.kit-rvf-panel p, .kit-rvf-lede { margin: 0 0 0.7rem; line-height: 1.6; }
.kit-rvf-lede { color: var(--kit-muted); font-size: 0.94rem; }
.kit-rvf-help { font-size: 0.9rem; color: var(--kit-muted); }
.kit-rvf-actions { margin: 1.1rem 0 0; }

/* The thank-you and the already-in panel. A green-ish edge so it reads as
   resolved rather than as another error card. */
.kit-rvf-good { border-left: 3px solid var(--kit-accent); }

/* ⚠️ FTC: clear and conspicuous. In the ask, in normal reading order, at full
   body size — never a footnote, never faded, never behind a "read more". */
.kit-rvf-incentive {
  margin: 0 0 1rem; padding: 0.75rem 0.9rem; line-height: 1.55; font-size: 0.9rem;
  border-radius: var(--kit-radius);
  background: color-mix(in srgb, var(--kit-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kit-accent) 22%, transparent);
}

.kit-rvf-field { margin: 0 0 1.1rem; }
.kit-rvf-label { display: block; font-weight: 700; font-size: 0.92rem; margin: 0 0 0.35rem; padding: 0; }
.kit-rvf-opt { font-weight: 400; color: var(--kit-muted); }
.kit-rvf-hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--kit-muted); }
.kit-rvf-input, .kit-rvf-textarea, .kit-rvf-select {
  width: 100%; font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  padding: 0.6rem 0.7rem;
}
.kit-rvf-textarea { resize: vertical; line-height: 1.6; }
.kit-rvf-input:focus-visible, .kit-rvf-textarea:focus-visible, .kit-rvf-select:focus-visible {
  outline: 2px solid var(--kit-accent); outline-offset: 1px; border-color: var(--kit-accent);
}

/* Radios, kept in the accessibility tree and driven by the keyboard — only the
   painted glyph is swapped out. `appearance:none` rather than display:none, so
   arrow keys, focus and screen readers all keep working. */
.kit-rvf-rating { border: 0; padding: 0; margin: 0 0 1.2rem; }
.kit-rvf-stars { display: flex; gap: 0.25rem; }
.kit-rvf-star-in { position: absolute; opacity: 0; width: 0; height: 0; }
.kit-rvf-star {
  cursor: pointer; line-height: 1; font-size: 2rem; padding: 0.1rem;
  color: var(--kit-rvf-star-off, color-mix(in srgb, var(--kit-muted) 35%, transparent));
  border-radius: 4px; transition: color 0.12s ease;
}
.kit-rvf-star::before { content: "\2605"; }
.kit-rvf-star-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Amber on the chosen star and every one before it — the twenty-year-old
   convention, and the same fill the storefront block uses.
   The class is set by JS on change rather than by a sibling cascade: `~` selects
   the stars AFTER the checked input, which is the wrong direction, and the usual
   fix (reversing the DOM and using row-reverse) inverts arrow-key order for the
   sake of a selector. The form is JS-rendered regardless, so an explicit class
   is both clearer and easier to keep honest.
   ⚠️ There is deliberately NO :hover fill. A row that lights up as the pointer
   travels rightward rewards travelling rightward. */
.kit-rvf-star--on { color: #e0a021; }
.kit-rvf-star-in:focus-visible + .kit-rvf-star { outline: 2px solid var(--kit-accent); outline-offset: 1px; }

.kit-rvf-error {
  margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; font-size: 0.9rem; line-height: 1.5;
  border-radius: var(--kit-radius);
  color: var(--kit-danger, #a3221f);
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.kit-rvf-error[hidden] { display: none; }
.kit-rvf-submit[disabled] { opacity: 0.65; cursor: progress; }

@media (max-width: 640px) {
  .kit-rvf-panel, .kit-rvf-form { padding: 1.2rem 1rem; }
  .kit-rvf-star { font-size: 1.75rem; }
}

/* ── Availability filter (Catalog+ 2.8) ────────────────────────────────────
   The last genuinely missing Catalog+ capability. The engine supported
   ?inStock=1 on /catalog from the start; the shop simply never asked for it.
   Styled as a plain checkbox rather than another facet list, because it is one
   boolean and a one-item facet group reads like a bug. */
.kit-tax-side-stock { margin-bottom: 1.1rem; }
.kit-tax-side-stock h4 { margin: 0 0 0.45rem; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--kit-muted); font-weight: 800; }
.kit-tax-stockrow { display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.92rem; line-height: 1.3; }
.kit-tax-stockrow input { width: 1rem; height: 1rem; accent-color: var(--kit-accent); flex: none; cursor: pointer; }
.kit-tax-stockrow:hover { color: var(--kit-accent); }

/* ============ account area ============
   The buyer's own page: sign in, order history, subscriptions. Added 5 Aug 2026
   — the header had supported an Account icon all along, there was simply no
   page behind it. */
.kit-acct { max-width: 46rem; margin: 0 auto; }
.kit-acct-loading, .kit-acct-empty { color: var(--kit-muted); font-size: 0.92rem; }
.kit-acct-h { margin: 0 0 0.35rem; font-size: 1.35rem; }
.kit-acct-sub { margin: 0 0 1.1rem; color: var(--kit-muted); font-size: 0.95rem; line-height: 1.55; }
.kit-acct-signin, .kit-acct-panel { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 1.4rem; background: var(--kit-bg); }
.kit-acct-step { display: flex; flex-direction: column; gap: 0.4rem; max-width: 22rem; }
/* A class selector beats the UA's [hidden]{display:none}, so the code step
   rendered alongside the email step and the form asked for a code nobody had
   been sent yet. */
.kit-acct-step[hidden] { display: none; }
.kit-acct-step label { font-size: 0.85rem; font-weight: 600; }
.kit-acct-step input { padding: 0.6rem 0.75rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-bg); color: var(--kit-fg); font: inherit; }
.kit-acct-step .kit-btn { align-self: flex-start; margin-top: 0.3rem; }
.kit-acct-note { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--kit-muted); }
.kit-acct-help { margin: 1rem 0 0; font-size: 0.86rem; color: var(--kit-muted); }
.kit-acct-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.kit-acct-signout { border: 1px solid var(--kit-border); background: none; border-radius: var(--kit-radius); padding: 0.35rem 0.8rem; font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--kit-fg); }
.kit-acct-signout:hover { border-color: var(--kit-accent); }
.kit-acct-sec { margin-top: 1.6rem; }
.kit-acct-sech { margin: 0 0 0.7rem; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kit-fg); }
.kit-acct-order, .kit-acct-sub { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: 0.85rem 1rem; margin-bottom: 0.6rem; }
.kit-acct-order-head, .kit-acct-sub { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.kit-acct-order-ref { margin: 0; font-weight: 700; font-size: 0.95rem; }
.kit-acct-order-date, .kit-acct-sub-meta { margin: 0.15rem 0 0; font-size: 0.83rem; color: var(--kit-muted); }
.kit-acct-order-right { text-align: right; }
.kit-acct-order-total { margin: 0; font-weight: 800; font-size: 1rem; }
.kit-acct-order-status, .kit-acct-sub-status { margin: 0.15rem 0 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kit-muted); }
.kit-acct-order-items { margin: 0.7rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--kit-muted); }
.kit-acct-sub-name { margin: 0; font-weight: 700; font-size: 0.95rem; }

/* Primary nav was 0.78rem — Damian, 5 Aug: "nav too small". These are the links
   every customer navigates by, so they get real weight and size. */
.kit-nav-link { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }
/* The header Account/Basket icons: previously the only way to the shop was the
   nav, and the basket had no presence at all. */
.kit-nav-icons { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.6rem; }
.kit-util-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: var(--kit-radius); color: inherit; text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.kit-util-link:hover { background: color-mix(in srgb, var(--kit-accent) 10%, transparent); }
.kit-util-cart { position: relative; }
.kit-util-cartcount { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--kit-accent); color: #fff; font-size: 0.72rem; font-weight: 800; line-height: 1; }
.kit-util-cartcount[hidden] { display: none; }

/* ── CATEGORY LANDING TILES (2026-08-11) ─────────────────────────────────
   The shop opened onto every product at once; C&C's own site opens onto six
   category tiles, then Fabric opens onto its seven. These are those doors.

   The [hidden] rules are not optional. `hidden` only sets display:none in the
   UA stylesheet, so ANY author display rule beats it — .kit-tax-grid is
   display:grid, so hiding it did nothing at all and the product wall sat under
   the tiles. Same lesson the layout/drawer rules above were written for. */
.kit-tax-tiles[hidden],
.kit-tax-grid[hidden],
.kit-tax-count[hidden] { display: none !important; }

.kit-tax-tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.kit-tax-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 7.5rem; padding: 1rem; border-radius: var(--kit-radius);
  color: #fff; text-decoration: none; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
/* The name has to stay readable whatever colour a category carries, including
   a pale one somebody picks in the till. A gradient scrim costs nothing and
   removes the question. */
.kit-tax-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.35) 100%);
}
.kit-tax-tile > * { position: relative; z-index: 1; }
.kit-tax-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.kit-tax-tile:focus-visible { outline: 3px solid var(--kit-accent); outline-offset: 2px; }
.kit-tax-tile-name { font-size: 1.05rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.kit-tax-tile-sub { font-size: .78rem; opacity: .9; margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .kit-tax-tile { transition: none; } .kit-tax-tile:hover { transform: none; } }

/* ── COLLAPSIBLE FACET GROUPS + CLEAR ALL (2026-08-11) ───────────────────
   C&C's sidebar is "Shop by Brand / Theme / Colour", each collapsible. A shop
   with forty brands turns a flat sidebar into a mile of checkboxes and pushes
   the category tree off the screen entirely. */
.kit-tax-facet { border-top: 1px solid var(--kit-border); padding-top: .7rem; }
.kit-tax-facet > summary {
  cursor: pointer; font-size: .9rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--kit-fg); list-style: none;
  display: flex; align-items: center; gap: .4rem; padding: .15rem 0;
}
.kit-tax-facet > summary::-webkit-details-marker { display: none; }
/* The chevron turns, so open/shut is legible without reading the list. */
.kit-tax-facet > summary::before {
  content: '▸'; font-size: .8em; transition: transform .12s ease; color: var(--kit-muted);
}
.kit-tax-facet[open] > summary::before { transform: rotate(90deg); }
.kit-tax-facet > summary:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
/* A SHUT group must still admit it is filtering something, or a shopper hunts
   for why the results look thin. */
.kit-tax-facetn {
  margin-left: auto; background: var(--kit-accent); color: #fff;
  border-radius: 999px; font-size: .7rem; padding: 0 .4rem; line-height: 1.5;
}
/* Forty brands should scroll inside the group, not down the page. */
.kit-tax-facetbody { max-height: 15rem; overflow-y: auto; padding-top: .35rem; }
@media (prefers-reduced-motion: reduce) { .kit-tax-facet > summary::before { transition: none; } }

.kit-tax-chipclear { font-weight: 700; }

/* ── THE GLOBAL ACCOUNT PANEL (2026-08-12) ───────────────────────────────
   The account used to show orders and subscriptions. It now shows the whole
   relationship: who the person is, the courses they own and how to reach them,
   the workshops they have sat, their membership, and their orders. */
.kit-acct-summary { margin: .1rem 0 1rem; font-size: .95rem; color: var(--kit-muted); }
.kit-acct-partial {
  margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--kit-radius);
  background: color-mix(in srgb, var(--kit-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--kit-accent) 25%, transparent);
  font-size: .88rem;
}
.kit-acct-details { margin: 0; display: grid; gap: .5rem; }
.kit-acct-drow { display: grid; grid-template-columns: 7rem 1fr; gap: .6rem; align-items: start; }
.kit-acct-drow dt { color: var(--kit-muted); font-size: .85rem; }
.kit-acct-drow dd { margin: 0; }
.kit-acct-addrs { margin: 0; padding-left: 0; list-style: none; }
.kit-acct-addrlabel { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kit-muted); }
.kit-acct-muted { color: var(--kit-muted); }
@media (max-width: 480px) { .kit-acct-drow { grid-template-columns: 1fr; gap: .1rem; } }

.kit-acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kit-acct-course, .kit-acct-ws {
  border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  padding: .8rem .9rem; background: var(--kit-surface);
}
.kit-acct-coursehead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.kit-acct-coursename, .kit-acct-wsname { font-weight: 700; }
.kit-acct-pill {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--kit-accent) 14%, transparent); color: var(--kit-accent);
}
/* The ways IN to a course. A line saying a course was bought, with no route to
   it, is the thing customers write in about. */
.kit-acct-ways { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: baseline; }
.kit-acct-btn {
  display: inline-block; padding: .35rem .7rem; border-radius: var(--kit-radius);
  background: var(--kit-accent); color: #fff; text-decoration: none; font-size: .88rem;
}
.kit-acct-btn:hover { filter: brightness(1.08); }
.kit-acct-way { font-size: .85rem; color: var(--kit-muted); }
.kit-acct-ws { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: baseline; }
.kit-acct-wsmeta { font-size: .85rem; color: var(--kit-muted); }
.kit-acct-ref {
  font-size: .78rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--kit-muted); margin-left: auto;
}

/* ── Compass form block ─────────────────────────────────────────────────────
   A form dropped on a page by id. Sized and centred like the other content
   sections so it sits in the page rather than breaking out of it — the first
   build shipped it unstyled and full-bleed. */
.kit-form-block { background: var(--kit-surface, #fff); }
.kit-form-inner {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  max-width: 34rem;
  margin-inline: auto;
  padding-inline: var(--kit-gutter, 1.25rem);
}
.kit-form-heading { margin: 0 0 .35rem; }
.kit-form-intro { margin: 0 0 1.5rem; opacity: .8; }
.kit-form { display: flex; flex-direction: column; gap: .9rem; }
.kit-form form { display: flex; flex-direction: column; gap: .9rem; }
.kit-form-row { display: flex; flex-direction: column; gap: .3rem; }
/* A First/Last name pair rides side-by-side (round 8) — kit.js wraps ONLY
   consecutive short text fields whose labels read "First …"/"Last …", so a
   form without such a pair renders exactly as before. Collapses on phones. */
.kit-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .kit-form-pair { grid-template-columns: 1fr; } }
.kit-form-label { font-size: .85rem; font-weight: 600; }
.kit-form-opt { font-weight: 400; opacity: .6; }
.kit-form input[type=text], .kit-form input[type=email], .kit-form input[type=tel], .kit-form textarea, .kit-form select {
  padding: .7rem .8rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: .5rem;
  font: inherit; width: 100%; background: #fff; color: inherit;
}
.kit-form textarea { resize: vertical; }
.kit-form-help { margin: 0; font-size: .8rem; opacity: .65; }
/* Errors are per field and only occupy space once they say something. */
.kit-form-err { margin: 0; font-size: .82rem; font-weight: 600; color: #b03a2e; }
.kit-form-err:empty { display: none; }
.kit-form-consent, .kit-form-choice { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.45; }
.kit-form-consent input, .kit-form-choice input { margin-top: .25rem; flex: 0 0 auto; }
.kit-form-submit { align-self: flex-start; }
.kit-form-msg { margin: 0; font-size: .92rem; font-weight: 600; min-height: 1.2em; }
.kit-form-msg.is-err { color: #b03a2e; }
.kit-form-done { margin: 0; font-size: 1rem; font-weight: 600; color: #2e7d5b; }
.kit-form-loading { margin: 0; opacity: .6; }
.kit-form-noscript { margin: .5rem 0 0; font-size: .9rem; }
/* THE HONEYPOT. Off-screen rather than display:none — some bots skip hidden
   inputs, and the ones that do not are the ones worth catching. */
.kit-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- modal overlay + panel (round 9, 2026-08-14 — the reference popup
   class: free-guide/newsletter popups, generalised for every install). New
   classes only, and the section ships `hidden`, so a site without a `modal`
   section renders no markup and every existing build stays byte-identical. */
.kit-modal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.kit-modal[hidden] { display: none; }
.kit-modal-overlay { position: absolute; inset: 0; background: rgba(20, 22, 26, .58); }
.kit-modal-panel {
  position: relative; display: grid; overflow: hidden;
  width: min(92vw, 660px); max-height: min(86vh, 44rem);
  background: #fff; color: var(--kit-fg, #16181d);
  border-radius: var(--kit-radius, 10px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}
.kit-modal-panel--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.kit-modal-media { min-height: 100%; }
.kit-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-modal-body { padding: 1.9rem 1.75rem; overflow: auto; display: flex; flex-direction: column; gap: .75rem; }
.kit-modal-heading { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.kit-modal-intro { margin: 0; opacity: .82; }
.kit-modal-copy > :first-child { margin-top: 0; }
.kit-modal-copy > :last-child { margin-bottom: 0; }
.kit-modal-close {
  position: absolute; top: .55rem; right: .55rem; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: inherit;
}
.kit-modal-close:hover { background: rgba(0, 0, 0, .08); }
.kit-modal-launcher { margin: 0; }
.kit-modal-footnote { margin: .4rem 0 0; font-size: .78rem; opacity: .68; text-align: center; }
/* Floating cards (round 13, 2026-08-16 — the floating lead-capture card):
   an edge-anchored card over an UNDIMMED page. The fixed root ignores pointer
   events so the page behind stays fully interactive; only the panel takes
   them back. Two cards coexist (guide left, discount right) — z 125 keeps
   them under a real overlay modal (130) but over the dock pill (120). */
.kit-modal--floating { pointer-events: none; background: none; justify-content: flex-start; z-index: 125; }
.kit-modal--floating .kit-modal-panel { pointer-events: auto; max-width: 500px; box-shadow: 0 14px 44px rgba(20, 22, 26, .28); }
.kit-modal--floating-right { justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) {
  .kit-modal-panel { animation: kit-modal-in .28s ease; }
  @keyframes kit-modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 640px) {
  .kit-modal-panel--media { grid-template-columns: 1fr; }
  .kit-modal-media { display: none; }
}

/* Docked modal trigger pill (round 12, 2026-08-16 — the edge teaser pill):
   a small white pill flush to the LEFT edge, mid-viewport, label + dismiss ×.
   Ships [hidden]; kit.js reveals it unless dismissed this session. Sits UNDER
   the modal (z 120 < 130) so the open dialog's overlay covers it. */
.kit-modal-dock {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 120; display: flex; align-items: center; gap: .25rem;
  background: #fff; color: #1e2125;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 10px rgba(20, 22, 26, .18);
  padding: .3rem .5rem .3rem .85rem;
}
.kit-modal-dock[hidden] { display: none; }
.kit-modal-dock--right {
  left: auto; right: 0;
  border-radius: 6px 0 0 6px;
  padding: .3rem .85rem .3rem .5rem;
}
.kit-modal-dock-open {
  background: none; border: 0; cursor: pointer; color: inherit;
  font: inherit; font-size: .92rem; font-weight: 700; white-space: nowrap;
  padding: .4rem 0;
}
.kit-modal-dock-dismiss {
  background: none; border: 0; cursor: pointer; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem; opacity: .7;
}
.kit-modal-dock-dismiss:hover { opacity: 1; }

/* ---- full-bleed bands + oval slideshow + marquee (round 11, 2026-08-16 —
   the reference-home mirror: that home page is a sequence of full-bleed
   bands, each with its own background, content constrained inside. New
   classes only; a page without `band`/`oval-slideshow`/`marquee` emits none
   of this markup, so every existing build stays byte-identical. */
.kit-band {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.kit-band > .kit-section { background: transparent; }
.kit-band--dark {
  --kit-fg: #ffffff;
  --kit-heading-color: #ffffff;
  --kit-subheading-color: #ffffff;
  --kit-muted: rgba(255, 255, 255, .85);
  color: var(--kit-fg);
}
.kit-band--dark a:not(.kit-btn) { color: inherit; }
/* Buttons inside a light band read as the source's quiet outlined buttons;
   inside a dark band they read as its solid white ones. Band-scoped only —
   a page without bands keeps the kit's own button row look. */
.kit-band .kit-hero-actions .kit-btn,
.kit-band .kit-richtext .kit-btn {
  border: 1px solid var(--kit-accent);
  color: var(--kit-accent);
  background: transparent;
  border-radius: 2px;
  letter-spacing: .08em;
  font-weight: 500;
}
.kit-band .kit-hero-actions .kit-btn:hover,
.kit-band .kit-richtext .kit-btn:hover { background: var(--kit-accent); color: #fff; }
.kit-band--dark .kit-btn,
.kit-band--dark .kit-hero-actions .kit-btn,
.kit-band--dark .kit-richtext .kit-btn {
  background: rgba(255, 255, 255, .95);
  color: #3a3c42;
  border-color: transparent;
}
.kit-band--dark .kit-btn:hover,
.kit-band--dark .kit-hero-actions .kit-btn:hover,
.kit-band--dark .kit-richtext .kit-btn:hover { background: #ffffff; color: #3a3c42; }
/* A band whose source section centres its content (a centred rich-text or
   newsletter band — detected from the section's own stylesheet). */
.kit-band--center .kit-section-inner { text-align: center; }
.kit-band--center .kit-section-inner > h2 { margin-inline: auto; }
.kit-band--center .kit-richtext ul { display: inline-block; text-align: left; }
.kit-band--center .kit-hero-actions { justify-content: center; }
/* The source's image-with-text laid its picture on the RIGHT (grid--reverse). */
.kit-band--media-right .kit-about--split .kit-about-inner { grid-template-columns: 1.15fr 0.85fr; }
.kit-band--media-right .kit-about--split .kit-about-media { order: 2; }
.kit-band--image { padding-block: clamp(2.5rem, 8vw, 6rem); }
/* A panelled band (the source's boxed text over a full-bleed image) — the
   composer opts a section's inner into a tinted panel with band.panel. */
.kit-band--panel > .kit-section > .kit-section-inner,
.kit-band--panel > .kit-section .kit-article-inner {
  background: var(--kit-band-panel-bg, rgba(20, 22, 26, .55));
  max-width: min(46rem, 92vw);
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

/* Oval slideshow — a 90vw x 50vw ellipse, images crossfading behind the mask.
   First slide is `.is-active` in the markup: static image without JS. */
.kit-oval-slideshow { padding-block: clamp(1.5rem, 4vw, 3rem); }
.kit-oval-frame {
  position: relative;
  width: min(90vw, 1500px);
  aspect-ratio: 9 / 5;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  transform: translateZ(0); /* Safari: keep the mask during the crossfade */
}
.kit-oval-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.kit-oval-slide.is-active { opacity: 1; }
/* variant: 'full-bleed' (round 12, 2026-08-16) — her DESKTOP hero is the
   plain edge-to-edge rectangle (.slideshowContainer.fullWidth = 100vw wide,
   50vw tall); no oval mask, no card: zero radius, zero side gutter, zero
   block padding. The 2/1 aspect IS the live 100vw x 50vw geometry. */
.kit-oval-slideshow--full { padding-block: 0; }
.kit-oval-frame--full {
  width: 100%;
  max-width: none;
  aspect-ratio: 2 / 1;
  border-radius: 0;
}

/* Marquee — static repeated uppercase strip; the scroll is opt-in CSS motion
   (prefers-reduced-motion: no-preference) so reduced-motion readers get the
   honest static band. Track = two identical runs; -50% loops seamlessly. */
.kit-marquee { overflow: hidden; padding-block: 1.1rem; }
.kit-marquee-track {
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--kit-font-heading, inherit);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.kit-marquee-item { padding-inline: .55em; }
.kit-marquee a { color: inherit; text-decoration: none; }
.kit-marquee a:hover { opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .kit-marquee-track { animation: kit-marquee-scroll var(--kit-marquee-duration, 15s) linear infinite; }
  @keyframes kit-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
}

/* ── support tickets (account area · Hearth) ── 2026-08-30 */
.kit-sup { max-width: 46rem; margin: 0 auto; }
.kit-sup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kit-sup-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: .8rem 1rem; }
.kit-sup-open { font-weight: 700; text-decoration: none; color: var(--kit-fg); }
.kit-sup-open:hover { text-decoration: underline; }
.kit-sup-meta { margin: .15rem 0 0; font-size: .83rem; color: var(--kit-muted); }
.kit-sup-chip { display: inline-block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--kit-border); white-space: nowrap; }
.kit-sup-chip-you { background: rgba(230,169,60,.16); border-color: rgba(230,169,60,.5); }
.kit-sup-chip-us { background: rgba(74,168,219,.14); border-color: rgba(74,168,219,.45); }
.kit-sup-chip-nobody { background: rgba(55,176,126,.14); border-color: rgba(55,176,126,.45); }
.kit-sup-flash { margin: 0 0 1rem; padding: .6rem .9rem; border-radius: var(--kit-radius); background: rgba(55,176,126,.12); border: 1px solid rgba(55,176,126,.4); font-size: .9rem; }
.kit-sup-new, .kit-sup-reply { display: grid; gap: .8rem; }
.kit-sup-new label, .kit-sup-reply label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 600; }
/* Form fields sit on WHITE, not the page ground — on CP52 the panel ground is the
   warm-slate --pg-bg, which made select / subject / textarea / file read as grey
   slabs (Damian, screenshot 2026-08-30 10:25). --kit-field-bg/-fg let a dark brand
   opt out; the fallbacks are a real white field with dark ink, readable in both. */
.kit-sup-new input, .kit-sup-new select, .kit-sup-new textarea, .kit-sup-reply textarea { padding: .6rem .75rem; border: 1px solid var(--kit-border); border-radius: var(--kit-radius); background: var(--kit-field-bg, #fff); color: var(--kit-field-fg, #12232b); font: inherit; font-weight: 400; }
.kit-sup-file input { font-weight: 400; font-size: .85rem; }
.kit-sup-new .kit-btn, .kit-sup-reply .kit-btn { justify-self: start; }
.kit-sup-back { font-size: .85rem; color: var(--kit-muted); text-decoration: none; }
.kit-sup-back:hover { text-decoration: underline; }
.kit-sup-thread { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.kit-sup-msg { border: 1px solid var(--kit-border); border-radius: var(--kit-radius); padding: .8rem 1rem; }
.kit-sup-msg-you { background: rgba(0,0,0,.03); }
.kit-sup-msg-support { border-left: 4px solid var(--kit-accent); }
.kit-sup-msghead { margin: 0 0 .4rem; font-size: .83rem; display: flex; gap: .6rem; align-items: baseline; }
.kit-sup-msghead span { color: var(--kit-muted); }
.kit-sup-msgbody { font-size: .95rem; line-height: 1.55; }
.kit-sup-atts { margin: .5rem 0 0; font-size: .85rem; }
.kit-sup-att { text-decoration: none; }
.kit-sup-att:hover { text-decoration: underline; }

/* ============ 23. living demo (browser-framed rotating screencasts) ============
   Used in the hero media slot (hero.mediaSection) or as a section. The pane is a
   device mockup: a browser chrome bar, module-coloured tabs with a progress bar,
   a 16:10 stage. Video is attached lazily by kit.js; without JS (or under
   prefers-reduced-motion) the poster <img> is what shows — never a blank box. */
.kit-livedemo {
  --kit-livedemo-acc: var(--kit-accent);
  position: relative;
  width: 100%; flex: 1 1 100%; box-sizing: border-box;
  border-radius: calc(var(--kit-radius) * 1.6);
  background: #0b2a32;
  color: #f4efe3;
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(244, 239, 227, 0.12);
  overflow: hidden;
  font-family: var(--kit-font-body, system-ui, sans-serif);
}
.kit-livedemo-chrome {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.9rem; background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(244, 239, 227, 0.1);
}
.kit-livedemo-chrome span { width: 10px; height: 10px; border-radius: 50%; background: #3a5560; }
.kit-livedemo-chrome span:nth-child(1) { background: #e0562f; }
.kit-livedemo-chrome span:nth-child(2) { background: #e6a93c; }
.kit-livedemo-chrome span:nth-child(3) { background: #25a58c; }
.kit-livedemo-chrome em {
  margin-left: auto; font-style: normal; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9db3b7;
}
.kit-livedemo-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: rgba(255, 255, 255, 0.025); }
.kit-livedemo-tab {
  position: relative; appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 0.6rem 0.75rem 0.7rem; text-align: left; color: #9db3b7; font: inherit;
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.5rem; align-items: center;
  min-height: 44px; transition: color 0.15s ease, background 0.15s ease;
}
.kit-livedemo-tab:hover { background: rgba(255, 255, 255, 0.04); color: #f4efe3; }
.kit-livedemo-tab:focus-visible { outline: 2px solid var(--kit-livedemo-acc); outline-offset: -2px; }
.kit-livedemo-tab.is-on { color: #f4efe3; }
.kit-livedemo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kit-livedemo-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-livedemo-acc) 22%, transparent); grid-row: span 2; }
.kit-livedemo-tablabel { font-weight: 800; font-size: 0.86rem; letter-spacing: -0.01em; line-height: 1.1; }
.kit-livedemo-tab small { font-size: 0.68rem; color: #9db3b7; line-height: 1.1; }
.kit-livedemo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.kit-livedemo-bar::after {
  content: ""; position: absolute; inset: 0; width: 0; background: var(--kit-livedemo-acc);
  transition: width 0.2s linear;
}
.kit-livedemo-tab.is-on .kit-livedemo-bar::after { width: var(--kit-livedemo-progress, 0%); }
.kit-livedemo-stage { position: relative; aspect-ratio: 16 / 10; background: #071e24; }
.kit-livedemo-screen { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.35s ease; }
.kit-livedemo-screen.is-on { opacity: 1; }
.kit-livedemo-video, .kit-livedemo-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-livedemo-video { opacity: 0; }
.kit-livedemo-screen.is-playing .kit-livedemo-video { opacity: 1; }
.kit-livedemo-screen.is-playing .kit-livedemo-poster { opacity: 0; }
.kit-livedemo-cap {
  margin: 0; padding: 0.7rem 0.95rem; font-size: 0.86rem; line-height: 1.35; color: #e7e2d6;
  border-top: 1px solid rgba(244, 239, 227, 0.1); background: rgba(0, 0, 0, 0.22); min-height: 2.9rem;
}
.kit-livedemo-capline { display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid rgba(244, 239, 227, 0.1); background: rgba(0, 0, 0, 0.22); }
.kit-livedemo-capline .kit-livedemo-cap { flex: 1 1 auto; border-top: 0; background: transparent; }
.kit-livedemo-voice {
  flex: 0 0 auto; margin: 0 0.7rem 0 0; padding: 0.3rem 0.65rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: #f4efe3; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(244, 239, 227, 0.22);
}
.kit-livedemo-voice:hover { background: rgba(255, 255, 255, 0.11); }
.kit-livedemo-voice:focus-visible { outline: 2px solid var(--kit-livedemo-acc); outline-offset: 2px; }
.kit-livedemo-voice[aria-pressed="true"] { background: var(--kit-livedemo-acc); border-color: transparent; color: #071e24; }
.kit-livedemo-voice[hidden] { display: none; }
.kit-livedemo-foot { margin: 0; padding: 0 0.95rem 0.7rem; font-size: 0.7rem; color: #9db3b7; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
  .kit-livedemo-screen { transition: none; }
  .kit-livedemo-video { display: none; }
  .kit-livedemo-screen.is-playing .kit-livedemo-poster { opacity: 1; }
  /* an explicit click on "with narration" is the reader's choice — show that take */
  .kit-livedemo-video[data-narrating] { display: block; opacity: 1; }
  .kit-livedemo-screen.is-playing .kit-livedemo-video[data-narrating] ~ .kit-livedemo-poster { opacity: 0; }
}
@media (max-width: 480px) {
  .kit-livedemo-tab { padding: 0.5rem 0.5rem 0.6rem; }
  .kit-livedemo-tab small { display: none; }
}

/* hero 'demo' variant: the media pane earns more of the row (a 16:10 browser
   mockup needs width, not height) and the hero note sits under the buttons. */
@media (min-width: 821px) {
  .kit-hero.kit-hero--demo.kit-hero--split .kit-hero-inner { max-width: var(--kit-max-width, 1120px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
  .kit-hero.kit-hero--demo .kit-hero-media { max-width: none; width: 100%; }
}
.kit-hero--demo .kit-hero-media--custom { min-width: 0; }
.kit-hero--demo .kit-hero-copy h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -0.02em; }
.kit-hero-note { margin: 0.8rem 0 0; font-size: 0.86rem; color: var(--kit-muted); max-width: 52ch; }
.kit-hero--split .kit-hero-note { margin-inline: 0; }
@media (max-width: 820px) {
  /* phone: the promise first, then the pane (the kit's default puts media first) */
  .kit-hero--demo .kit-hero-media { max-width: 560px; order: 0; margin-top: 1.25rem; }
  .kit-hero--split .kit-hero-note { margin-inline: auto; }
}

/* The map placeholder must read as a control, not as a failure (2026-08-30). */
.kit-map-cta { display: inline-block; margin-top: 0.7rem; padding: 0.45rem 1.1rem; border-radius: 999px;
  background: var(--kit-accent); color: var(--kit-accent-contrast, #fff); font-weight: 600; font-size: 0.9rem; }
.kit-map-load:hover .kit-map-cta { filter: brightness(1.08); }

/* A source that centres its FAQ region keeps it centred here (2026-08-30). */
.kit-faq--centred { max-width: 46rem; margin-inline: auto; }
.kit-inner--centred { text-align: center; }
.kit-inner--centred .kit-faq-q, .kit-inner--centred .kit-faq-a { text-align: left; }

/* HERO WITH A PHOTOGRAPH BEHIND IT (2026-08-30). The copy sits on a translucent
   panel so it stays readable over any picture — a dark scrim alone fails on a
   bright sky, which is exactly what /room-hire/ has. */
.kit-hero--backdrop { position: relative; isolation: isolate; overflow: hidden; }
.kit-hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* NO full-bleed scrim (2026-08-30). The first cut darkened the WHOLE photograph
   at 0.38 and then put the copy on a 0.42 panel — about 0.64 stacked, which
   turned a bright Cornish sky into a murky slab: "Super dark overlay, really
   weird? why have you applied it when it was fine." The picture is the point;
   only the words behind need a ground, and one light panel is enough. */
.kit-hero--backdrop .kit-hero-inner { justify-items: center; }
.kit-hero--backdrop .kit-hero-copy {
  text-align: center; margin-inline: auto; max-width: 52rem;
  background: rgba(0, 0, 0, 0.34); backdrop-filter: blur(2px);
  padding: clamp(1.4rem, 3.2vw, 2.4rem) clamp(1.4rem, 4vw, 3rem); border-radius: var(--kit-radius, 10px);
  /* A soft shadow on the type does the rest, so the panel can stay light. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.kit-hero--backdrop .kit-hero-copy h1,
.kit-hero--backdrop .kit-hero-copy .kit-hero-sub,
.kit-hero--backdrop .kit-hero-copy .kit-eyebrow { color: #fff; }
.kit-hero--backdrop .kit-hero-actions { justify-content: center; }
@media (prefers-reduced-transparency: reduce) {
  .kit-hero--backdrop .kit-hero-copy { backdrop-filter: none; background: rgba(0, 0, 0, 0.52); }
}

/* Per-album quick links: pill capsules under the album heading (2026-08-30). */
.kit-tabgal-links { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }
.kit-tabgal-links .kit-pill { display: inline-block; padding: 0.36rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--kit-accent); color: var(--kit-accent); font-size: 0.86rem; font-weight: 600; text-decoration: none; }
.kit-tabgal-links .kit-pill:hover { background: var(--kit-accent); color: var(--kit-accent-contrast, #fff); }

/* Hero feature capsules (2026-08-30). They wear the brand's SECOND colour where
   there is one — on CCB that is the orange the source uses for exactly this. */
.kit-hero-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.kit-pill--feature { display: inline-block; padding: 0.5rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  border: 2px solid var(--kit-accent2, var(--kit-accent)); color: var(--kit-accent2, var(--kit-accent)); text-decoration: none; }
a.kit-pill--feature:hover { background: var(--kit-accent2, var(--kit-accent)); color: #fff; }
.kit-hero--backdrop .kit-hero-pills { justify-content: center; }
.kit-hero--backdrop .kit-pill--feature { border-color: #fff; color: #fff; background: rgba(0,0,0,0.28); }

/* --- consent banner (2026-09-02; only rendered when brand.analytics.provider === 'meta') ---
   One card, bottom of the viewport, two buttons of equal weight. It is a
   dialog, not a wall: the page behind stays usable, because refusing must be
   as easy as accepting and ignoring it must be allowed too. */
.kit-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto;
  background: var(--kit-surface); color: var(--kit-fg); border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  box-shadow: 0 18px 48px -18px rgba(0,0,0,0.35); padding: 18px 20px; font-size: 0.95rem; line-height: 1.45; }
.kit-consent-text { margin: 0; }
.kit-consent-text a { color: var(--kit-accent); text-decoration: underline; }
.kit-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.kit-consent-btn { flex: 1 1 160px; }
@media (prefers-reduced-motion: no-preference) { .kit-consent { animation: kit-consent-in .25s ease-out; } }
@keyframes kit-consent-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* kit/styles/kit-nav.css — the ONE navigation stylesheet.
   ==========================================================================
   THE RULE THIS FILE EXISTS TO KEEP (SPEC §5)

   A panel is closed at rest because it carries the `hidden` attribute in the
   built HTML. The only rules in this file that touch a panel's visibility are:

       .kit-menu-panel[hidden] { display: none }
       .kit-menu-btn[aria-expanded="true"] ~ .kit-menu-panel { ... }

   There is NO `:hover` rule that shows a panel, no `:focus-within` rule that
   shows a panel, and no `:has()` anywhere in this file. On 7 September 2026 a
   single `.kit-nav-dropdown:has(> li > a[href="/products/free-papers/"])
   { display:grid }` outranked the resting `display:none` and pinned CP52's
   Products panel open on every page of the live site. Hover opening is done by
   kit.js with an intent delay, because a behaviour that has to be dismissible,
   hoverable and persistent (WCAG 1.4.13) is behaviour, not styling.

   Nothing in here keys on an href. Structure is data: a column heading is
   `.kit-menu-heading`, a group boundary is a column, a pill is `.kit-menu-badge`,
   two columns is `--kit-menu-cols`.

   This file is appended to every built site's kit.css by scripts/build.mjs,
   INCLUDING sites that pin their own kit-override — a client's frozen lineage
   must not be able to strand the navigation.
   ========================================================================== */

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

/* ---- 1. the bar ---------------------------------------------------------- */
.kit-menu {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: inherit; margin: 0; padding: 0; list-style: none;
}
/* The main horizontal bar's own gap (2026-09-09). It USED to rely entirely on
   `gap: inherit` from .kit-nav--pages; a header lineage that doesn't set that gap
   left the labels touching (HomeWorkshopsShop). Same value as .kit-nav--pages, so
   headers that DO pass a gap are unchanged; the drawer/column layouts set their own. */
.kit-menu--bar { gap: clamp(0.9rem, 2vw, 1.7rem); }
.kit-menu--bar > .kit-menu-item { position: relative; display: inline-flex; align-items: center; gap: 0.1rem; margin: 0; }
.kit-menu-link, .kit-menu-btn { text-decoration: none; color: inherit; }
.kit-menu-link { display: inline-flex; align-items: center; gap: 0.35rem; }
.kit-menu-label { display: inline; }
.kit-menu-desc { display: none; }

/* The disclosure button beside a parent link. 24px minimum target (WCAG 2.5.8). */
.kit-menu-btn {
  font: inherit; cursor: pointer; background: none; border: 0; color: inherit;
  display: inline-flex; align-items: center; gap: 0.2rem;
  min-width: 24px; min-height: 24px; padding: 0.35rem 0.15rem; line-height: 1;
}
.kit-menu-btn--labelled { padding-inline: 0; }
.kit-menu-caret { font-size: 0.7em; opacity: 0.8; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .kit-menu-caret { transition: transform 0.15s ease; }
}
.kit-menu-btn[aria-expanded="true"] .kit-menu-caret { transform: rotate(180deg); }
.kit-menu-btn:hover, .kit-menu-link:hover { color: var(--kit-accent); }
.kit-menu-btn:focus-visible, .kit-menu-link:focus-visible,
.kit-menu-sublink:focus-visible, .kit-menu-rail-btn:focus-visible,
.kit-menu-toggle:focus-visible, .kit-menu-back:focus-visible,
.kit-menu-drawer-close:focus-visible {
  outline: 3px solid var(--kit-accent); outline-offset: 2px; border-radius: 4px;
}

.kit-menu-badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.12rem 0.42rem; border-radius: 999px; line-height: 1.4; color: #fff;
  background: var(--kit-accent);
}
.kit-menu-badge--success { background: #1f9d63; }
.kit-menu-badge--neutral { background: var(--kit-muted); }
.kit-menu-ico { display: inline-flex; }

/* ---- 2. panels — hidden at rest, opened by aria-expanded ------------------ */
.kit-menu-panel[hidden] { display: none; }
.kit-menu-panel {
  /* `width: max-content` is load-bearing. An absolutely positioned box with
     `width:auto` shrink-to-fits inside its containing block, and the containing
     block here is the trigger's own <li> — about 55px. Without this the panel
     renders as a narrow column of overlapping text. */
  position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 0.5rem;
  width: max-content;
  background: var(--kit-bg); color: var(--kit-fg);
  border: 1px solid var(--kit-border); border-radius: 14px;
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.45);
  padding: 0.5rem;
}
.kit-menu-panel--simple { min-width: 12rem; max-width: min(90vw, 22rem); }
.kit-menu-panel[data-width="contained"] { max-width: min(94vw, 52rem); }
.kit-menu-panel[data-width="content"] { max-width: min(90vw, 24rem); }
.kit-menu-panel[data-width="full"] { left: 0; right: 0; width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; }
/* The open state's LAYOUT only — never its visibility. */
.kit-menu-btn[aria-expanded="true"] ~ .kit-menu-panel--mega > .kit-menu-panel-inner {
  display: grid;
  grid-template-columns: repeat(var(--kit-menu-cols, 1), minmax(0, max-content));
  column-gap: 2rem; align-content: start;
}
.kit-menu-panel-inner { min-width: 0; }
/* A panel near the right edge flips so it never leaves the viewport. */
.kit-menu-item:last-child > .kit-menu-panel:not([data-width="full"]),
.kit-menu-item:nth-last-child(2) > .kit-menu-panel:not([data-width="full"]) { left: auto; right: 0; }

.kit-menu-heading {
  margin: 0.4rem 0 0.2rem; padding-top: 0.5rem;
  border-top: 2px solid var(--kit-accent);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--kit-accent);
}
.kit-menu-col > .kit-menu-heading:first-child { margin-top: 0; }
.kit-menu-list, .kit-menu-sublist { list-style: none; margin: 0; padding: 0; }
.kit-menu-sublist { padding-left: 0.9rem; }
.kit-menu-row { margin: 0; }
.kit-menu-row--heading + .kit-menu-row { margin-top: 0; }
.kit-menu-sublink {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem; border-radius: 9px; text-decoration: none;
  color: var(--kit-fg); font-size: 0.92rem; font-weight: 500; line-height: 1.3;
}
.kit-menu-sublink:hover { background: color-mix(in srgb, var(--kit-accent) 12%, transparent); color: var(--kit-accent); }
.kit-menu-sublink.is-active { color: var(--kit-accent); font-weight: 700; }
.kit-menu-sublink::after { content: none; }
.kit-menu-static { display: block; }

/* the in-column sub-heading a `none` target renders as */
.kit-menu-heading--inline {
  display: block; padding: 0.5rem 0.7rem 0.2rem; margin-top: 0.35rem;
}

/* ---- 3. mega-full: rail + pane ------------------------------------------- */
.kit-menu-panel--full > .kit-menu-panel-inner { display: flex; gap: 1.5rem; align-items: stretch; }
.kit-menu-rail { list-style: none; margin: 0; padding: 0 1rem 0 0; border-right: 1px solid var(--kit-border); min-width: 12rem; }
.kit-menu-rail-btn {
  font: inherit; cursor: pointer; background: none; border: 0; color: var(--kit-fg);
  display: block; width: 100%; text-align: left; padding: 0.55rem 0.7rem; border-radius: 9px; min-height: 24px;
}
.kit-menu-rail-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--kit-accent) 12%, transparent); color: var(--kit-accent); font-weight: 700; }
.kit-menu-panes { flex: 1; min-width: 0; }
.kit-menu-pane[hidden] { display: none; }
.kit-menu-pane-head { display: block; font-weight: 700; margin: 0 0 0.6rem; color: var(--kit-fg); text-decoration: none; }
.kit-menu-pane-cols { display: grid; grid-template-columns: repeat(var(--kit-menu-cols, 1), minmax(0, 1fr)); gap: 1.5rem; }

/* ---- 4. tiles + rich columns --------------------------------------------- */
.kit-menu-col--tile { max-width: 16rem; }
.kit-menu-tile { margin: 0; }
.kit-menu-tile-img { display: block; width: 100%; height: auto; border-radius: 10px; }
.kit-menu-tile-caption { display: block; margin-top: 0.4rem; font-size: 0.88rem; color: var(--kit-muted); }
.kit-menu-cta { display: inline-block; margin-top: 0.5rem; font-weight: 700; color: var(--kit-accent); text-decoration: none; }

/* ---- 5. the utility strip ------------------------------------------------ */
/* `gap: inherit` above carries each lineage's own nav spacing onto the list,
   which is what keeps six clients' bars where they were. The utility strip is
   the one place it does not resolve usefully, so it names its own: words need a
   word's worth of air, icons sit tight. */
.kit-menu--utility { gap: clamp(0.8rem, 1.8vw, 1.5rem); }
.kit-menu--utility[data-icons="true"] { gap: 0.3rem; }
.kit-menu-util { display: inline-flex; align-items: center; justify-content: center; position: relative; text-decoration: none; color: inherit; }
.kit-menu-util-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kit-menu-item--icon { display: inline-flex; }

/* ---- 6. the drawer: hamburger, then drill-down --------------------------- */
.kit-menu-toggle { display: none; }
.kit-menu-drawer[hidden] { display: none; }
.kit-menu-back { display: none; }

@media (max-width: 900px) {
  /* The link bars move into the drawer. The UTILITY strip does not: on a shop
     the basket has to stay one tap away, and it is icons, so it fits. (The
     legacy lineage's text utility row is hidden by kit.css's own
     `.kit-utilnav { display: none }` at this width, which still applies.) */
  .kit-menu--bar:not(.kit-menu--drawer):not(.kit-menu--utility) { display: none; }
  .kit-menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 44px; height: 44px; padding: 0 10px;
    background: transparent; border: 1px solid var(--kit-border); border-radius: 10px;
    color: var(--kit-fg); cursor: pointer;
  }
  .kit-menu-toggle-bar { display: block; height: 2px; background: currentColor; border-radius: 2px; }

  .kit-menu-drawer {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    background: var(--kit-bg); color: var(--kit-fg);
    overflow: hidden;
  }
  .kit-menu-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.8rem clamp(1rem, 5vw, 2rem); border-bottom: 1px solid var(--kit-border);
  }
  .kit-menu-drawer-title { font-weight: 700; }
  .kit-menu-drawer-close {
    font: inherit; cursor: pointer; background: none; border: 0; color: inherit;
    width: 44px; height: 44px; border-radius: 10px;
  }
  .kit-menu-drawer-body { position: relative; flex: 1; overflow-y: auto; padding: 0 clamp(1rem, 5vw, 2rem) 2rem; }

  .kit-menu--drawer { display: block; }
  .kit-menu--drawer > .kit-menu-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--kit-border); position: static; }
  .kit-menu--drawer .kit-menu-link, .kit-menu--drawer .kit-menu-btn--labelled { flex: 1; padding: 0.9rem 0; min-height: 44px; }
  .kit-menu--drawer .kit-menu-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .kit-menu--drawer-utility { margin-top: 0.6rem; border-top: 1px solid var(--kit-border); }
  .kit-menu--drawer .kit-menu-util-label { position: static; width: auto; height: auto; clip-path: none; }
  .kit-menu--drawer > .kit-menu-item--icon { display: block; }
  .kit-menu--drawer .kit-menu-util {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; gap: 0.6rem; padding: 0.9rem 0; min-height: 44px;
  }

  /* `simple` parents are ACCORDIONS: the panel sits in the flow, indented. */
  .kit-menu--drawer .kit-menu-panel--simple {
    position: static; flex-basis: 100%; margin: 0; padding: 0 0 0.4rem 0.9rem; width: auto; max-width: none;
    border: 0; border-radius: 0; box-shadow: none; background: transparent; max-width: none;
  }
  /* `mega` and `mega-full` are DRILL-DOWN LEVELS over the drawer body, with a
     Back row. Same data, one level at a time — no floating panel on a phone. */
  .kit-menu--drawer .kit-menu-panel--mega,
  .kit-menu--drawer .kit-menu-panel--full {
    position: fixed; inset: auto 0 0 0; top: 3.4rem; margin: 0; width: auto; max-width: none;
    border: 0; border-radius: 0; box-shadow: none; overflow-y: auto;
    padding: 0 clamp(1rem, 5vw, 2rem) 2rem; z-index: 201;
  }
  .kit-menu--drawer .kit-menu-panel-inner { display: block !important; }
  .kit-menu--drawer .kit-menu-panel--full > .kit-menu-panel-inner { display: block; }
  .kit-menu--drawer .kit-menu-rail { border-right: 0; padding: 0; min-width: 0; }
  .kit-menu--drawer .kit-menu-pane-cols { display: block; }
  .kit-menu--drawer .kit-menu-col { margin-bottom: 0.8rem; }
  .kit-menu--drawer .kit-menu-sublink { padding: 0.8rem 0.2rem; min-height: 44px; border-bottom: 1px solid var(--kit-border); border-radius: 0; }
  .kit-menu--drawer .kit-menu-back {
    display: flex; align-items: center; gap: 0.4rem;
    font: inherit; font-weight: 700; cursor: pointer;
    background: none; border: 0; color: var(--kit-fg);
    width: 100%; padding: 0.9rem 0.2rem; min-height: 44px;
    border-bottom: 1px solid var(--kit-border); text-align: left;
  }
  .kit-menu-back-ico { font-size: 1.2em; line-height: 1; }

  /* The legacy lineage's `.kit-navwrap` WAS the drawer: kit.css collapses it to
     `max-height:0; opacity:0` at this width and the old `.kit-nav-toggle`
     re-opened it. The drawer is now its own region, so the wrap goes back to
     being an ordinary row — otherwise the account and basket icons inside it
     would be invisible on every phone. (kit/styles/kit.css is another lane's
     file; this is the counter-rule, not an edit to it.) */
  .kit-navwrap {
    position: static; max-height: none; overflow: visible;
    opacity: 1; pointer-events: auto; padding: 0;
    background: none; border-bottom: 0; box-shadow: 0 0 0 transparent;
    flex-direction: row; justify-content: flex-end; align-items: center;
  }
  .kit-nav-icons { flex-direction: row; width: auto; }
  .kit-nav-icons .kit-nav-icon-label { display: none; }
  .kit-nav-icons .kit-util-link { border-bottom: 0; }
  /* The drawer covers the viewport; nothing behind it should scroll. */
  html.kit-menu-lock, html.kit-menu-lock body { overflow: hidden; }
}

/* ---- 7. no JS: every link stays reachable -------------------------------- */
/* kit.js sets `.kit-js` on <html>. Without it nothing can clear `hidden`, so
   the panels open in the flow instead — the same fallback the drawer has always
   had. This is the ONE place a panel is shown by a stylesheet, and it is scoped
   to the absence of the script that would otherwise open it. */
html:not(.kit-js) .kit-menu-panel {
  display: block;
  position: static; margin: 0; padding: 0 0 0 0.9rem; width: auto; max-width: none;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
html:not(.kit-js) .kit-menu-drawer[hidden] { display: none; }
html:not(.kit-js) .kit-menu-toggle { display: none; }
html:not(.kit-js) .kit-menu-back { display: none; }
html:not(.kit-js) .kit-menu-pane[hidden] { display: block; }
@media (max-width: 900px) {
  html:not(.kit-js) .kit-menu--bar:not(.kit-menu--drawer):not(.kit-menu--utility) { display: block; }
}

/* ---- 8. motion ----------------------------------------------------------- */
/* The default is NO transition; motion is opt-in for people who have not asked
   for less of it. */
@media (prefers-reduced-motion: no-preference) {
  .kit-menu-panel { animation: kit-menu-in 0.14s ease-out; }
  @keyframes kit-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* kit/styles/kit-layout.css — STRUCTURAL layout rules, appended to whichever
   stylesheet a client gets (E3, 2026-09-09).

   WHY THIS IS A SEPARATE FILE, and not another block at the end of kit.css:
   build.mjs lets a client PIN its own lineage with clients/<slug>/kit-override/
   kit.css, and creative-path-52 does. A pinned client therefore never sees a new
   rule added to the shared kit.css — which is exactly how the shared navigation
   rules failed to reach the one site that most needed them (see the kit-nav.css
   note in build.mjs). A cosmetic rule going missing is a shrug. A *structural*
   one going missing means the columns a maker dragged in render stacked on top
   of each other on the live site, on the site prospects are shown. So this file
   is appended the same way kit-nav.css is: a pinned lineage may restyle the
   grid, it cannot strand it.

   Everything here is MOBILE FIRST and works with JavaScript off. */

/* ============ columns: two or three, side by side ============ */

/* The one-column phone layout is the DEFAULT, not a media query — so a browser
   that never matches the query (and a printed page) still reads top to bottom in
   the author's order rather than squeezing three columns into a phone. */
.kit-columns-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kit-columns-gap, 2rem);
  align-items: start;
}

/* The multi-column grid only above the stack breakpoint. `--kit-columns-template`
   is written onto the element by the renderer from the section's own `widths`
   (e.g. "8fr 4fr"); the fallback keeps even columns if it is ever missing. */
@media (min-width: 761px) {
  .kit-columns-grid {
    grid-template-columns: var(--kit-columns-template, repeat(auto-fit, minmax(0, 1fr)));
  }
}

/* A grid item's default `min-width: auto` refuses to shrink below its content,
   so one long word or a wide image silently blows the whole row past its track
   sizes and the 8/4 split you dragged renders as something else. */
.kit-columns-col { min-width: 0; }

.kit-columns--gap-tight { --kit-columns-gap: 1rem; }
.kit-columns--gap-normal { --kit-columns-gap: 2rem; }
.kit-columns--gap-wide { --kit-columns-gap: 3.25rem; }

.kit-columns--centre .kit-columns-grid { align-items: center; }

/* A column holds ORDINARY sections, and an ordinary section carries the page's
   own outer padding and max-width. Inside a column that is a second helping of
   both, so the content ends up in a narrow ribbon down the middle of its own
   column. Neutralise it for nested sections only — the outer `.kit-columns`
   itself is a normal section and keeps its band spacing. */
.kit-columns-col > .kit-section { padding-block: 0; }
.kit-columns-col > * + * { margin-block-start: 1.5rem; }
/* the same list kit.css gives the page's outer measure to — a cta band and a
   stat band carry their own `-inner`, and missing one of them is how a single
   section ends up indented inside its column while its neighbours are not. */
.kit-columns-col .kit-section-inner,
.kit-columns-col .kit-hero-inner,
.kit-columns-col .kit-cta-inner,
.kit-columns-col .kit-stat-inner {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
/* …including the measure caps kit.css applies to prose and headings, which are
   set for a full-width band and read as a sliver in a 4-unit column. */
.kit-columns-col .kit-section > .kit-section-inner > h2 { max-width: none; }
.kit-columns-col .kit-richtext,
.kit-columns-col .kit-section-intro { max-width: none; }
/* the `:has()` rule in kit.css pins a richtext section to 46rem — undo it in here */
.kit-columns-col .kit-section:has(> .kit-section-inner > .kit-richtext) > .kit-section-inner { max-width: none; }

/* A band inside a column is a panel, not a full-bleed stripe. */
.kit-columns-col .kit-band { border-radius: var(--kit-radius, 12px); overflow: hidden; }

/* An honest, editor-only placeholder for a section that will render NOTHING on
   the live page (a blog feed filtered to a category with no posts yet). It is
   emitted only by the preview renderer, so these rules never reach a built site
   — they live here so the preview iframe, which inlines kit.css + this file,
   can draw it. */
.kit-preview-empty {
  border: 1px dashed var(--kit-muted, #8a8a8a);
  border-radius: var(--kit-radius, 12px);
  padding: 1.25rem 1.5rem;
  color: var(--kit-muted, #6b6b6b);
  font-size: 0.95rem;
  line-height: 1.5;
}
.kit-preview-empty strong { color: inherit; }
.kit-preview-empty-note { display: block; margin-top: 0.35rem; font-size: 0.86rem; opacity: 0.85; }

/* ============ contents: a sticky rail for a long read (R1, 2026-09-09) ============ */

/* MOBILE FIRST, and for once that is the whole design rather than a discipline:
   the one-column rule is UNCONDITIONAL, so a phone, a printed page and a browser
   that matches no media query all get the contents as an ordinary list at the
   top of the post, in the reading order the author wrote. The rail only becomes
   a rail where there is room for one. */
.kit-toc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}

/* 901px is not a round number picked for tidiness — it is the breakpoint
   `.kit-blog-layout--sidebar` in kit.css already collapses its own 1fr/19rem
   rail at. Two rails on one site that give up at different widths is the sort of
   difference nobody specifies and everybody notices. */
@media (min-width: 901px) {
  .kit-toc-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  /* STICKY IS WHY THE GRID EXISTS. `position: sticky` sticks within its PARENT,
     so a rail in a band of its own would have a parent its own height and would
     never move. Inside this grid its parent is as tall as the writing, which is
     exactly the distance it should travel. `top` clears a sticky site header;
     `max-height` + `overflow` keep a forty-entry contents list from running off
     the bottom of the screen with no way back to it. */
  .kit-toc-wrap--sticky .kit-toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* A section inside the contents layout is an ordinary section that has already
   been given the page's measure and padding by the wrapper — the same second
   helping the columns rules undo above, for the same reason. */
.kit-toc-body > .kit-section { padding-block: 0; }
.kit-toc-body > * + * { margin-block-start: 1.5rem; }
.kit-toc-body .kit-section-inner,
.kit-toc-body .kit-article-wrap > .kit-section-inner {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
.kit-toc-body .kit-richtext,
.kit-toc-body .kit-section-intro { max-width: none; }
.kit-toc-body .kit-section:has(> .kit-section-inner > .kit-richtext) > .kit-section-inner { max-width: none; }

.kit-toc {
  border-inline-start: 3px solid var(--kit-accent, currentColor);
  padding: 0.15rem 0 0.15rem 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.kit-toc-h {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--kit-muted, inherit);
}
.kit-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
/* The nesting IS the information — a flat list of eleven links tells you how
   many sections there are and nothing about how they fit together. */
.kit-toc-item--l3 { padding-inline-start: 0.9rem; font-size: 0.86rem; }
.kit-toc-link { color: inherit; text-decoration: none; }
.kit-toc-link:hover, .kit-toc-link:focus-visible { color: var(--kit-accent, inherit); text-decoration: underline; }

/* Jumping to a heading must not park it under a sticky site header. This is the
   no-JS half of the feature: the browser's own fragment navigation does the
   scrolling, and this tells it where to stop. */
.kit-toc-body :is(h2, h3)[id] { scroll-margin-top: 5.5rem; }

/* Somebody printing a long read wants the writing, not a list of links to
   places on paper they are already holding. */
@media print {
  .kit-toc { display: none; }
  .kit-toc-layout { display: block; }
}

/* ============ booking: the widget beside a picture ============
   The appointment widget (bookingBlock, kit/lib/sdk-blocks.mjs) and the shop's
   photograph, half each on a desktop, widget FIRST on a phone. Damian's rule
   for an appointment-led business, 2026-09-09: "in mobile the website looks
   like Booksy first and website second" — the person on the phone came to
   book, so the diary is the first thing under the header and the photograph
   follows it. STRUCTURAL, so it lives here and not in kit.css: a pinned kit
   lineage may restyle the widget, it cannot put the picture above the diary.

   THE MECHANISM, and why it survives a browser that matches no media query:
   the widget is EMITTED BEFORE the picture (source order — see bookingBlock),
   the one-column stack below is the DEFAULT rule, and the only thing that
   ever moves the picture in front of the widget is an `order` inside a
   min-width query. Take every media query away and the page still books
   first. `scripts/booking-section.test.mjs` measures this in a real browser at
   375px and 1280px rather than asserting it from the source. */
.kit-book {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.kit-book-col { min-width: 0; }
.kit-book-col--widget { order: 0; }
.kit-book-col--media { order: 1; }

@media (min-width: 861px) {
  .kit-book--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* half and half — the design, not a ratio */
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  /* The picture sits on the right unless the page says left. `order` here is
     the ONLY place the two columns ever swap, and it is inside min-width. */
  .kit-book--media-left .kit-book-col--media { order: -1; }
}

/* A full-width widget (layout: full) is a single column at every width. */
.kit-book--full { grid-template-columns: 1fr; }