/** Shopify CDN: Minification failed

Line 8796:0 All "@import" rules must come first

**/
/* =========================================================
   MOHAIR & CANARD — Design System · Phase 1 Foundation
   Ported from /tmp/mohair-design/mohair-eu/project/src/styles.css
   Scope: tokens, type utilities, buttons, wordmark, skein,
          header (nav + ticker), footer.
   ========================================================= */

:root {
  /* Core palette — 2026 alignment (was warm cream & ink, now cool cream + clay) */
  --mc-paper: #fdfcfb;
  --mc-paper-2: #faf7f2;
  --mc-paper-3: #f5f0eb;
  --mc-ink: #2c2420;
  --mc-ink-soft: #3b322c;
  --mc-ink-mute: #5e524a;
  --mc-ink-fade: rgba(44, 36, 32, 0.48);
  --mc-rule: rgba(44, 36, 32, 0.22);
  --mc-rule-soft: rgba(44, 36, 32, 0.10);
  --mc-accent: #d4b5a0;
  --mc-accent-deep: #a57760;
  --mc-accent-2: #6B8F5A;
  --mc-gold: #C5A052;
  --mc-btn-hover: #2c2420;

  /* Validation error. Deep red (≥4.5:1 contrast on cream) for inline
     error messages, plus a soft tint for the invalid-input glow.
     Distinct from --mc-warn (low-stock orange) defined later. */
  --mc-error: #9B2D14;
  --mc-error-soft: rgba(155, 45, 20, 0.18);

  /* Type — DM Sans first for 2026 alignment, Inter Tight as graceful fallback */
  --mc-serif: "Cormorant Garamond", "Cormorant", "Didone", "Times New Roman", serif;
  --mc-sans: "DM Sans", "Inter Tight", "Neue Haas Grotesk", "Helvetica Neue", sans-serif;
  --mc-mono: "Söhne Mono", ui-monospace, "SF Mono", monospace;

  /* Spacing */
  --mc-max: 1440px;
  --mc-pad: clamp(20px, 3vw, 48px);

  /* Typography scale — used by kit-builder + kit-landing.
     Mobile-first; ≥768px overrides defined in the @media block below. */
  --mc-fs-body: 16px;
  --mc-fs-body-lg: 17px;
  --mc-fs-label: 13px;
  --mc-fs-input: 16px;          /* 16px on mobile prevents iOS auto-zoom on focus */
  --mc-fs-button: 13px;
  --mc-fs-hint: 13px;
  --mc-fs-eyebrow: 11px;
  --mc-fs-h3: 18px;
  --mc-fs-h2: 22px;
  --mc-lh-body: 1.6;
  --mc-lh-tight: 1.3;

  /* Touch target floor (WCAG 2.5.5) */
  --mc-tap: 44px;
}

@media (min-width: 768px) {
  :root {
    --mc-fs-body-lg: 18px;
    --mc-fs-input: 15px;
    --mc-fs-h3: 20px;
    --mc-fs-h2: 26px;
  }
}

/* ============ GLOBAL (scoped to .mc-root to avoid clobbering Dawn) ============ */
/* Make Dawn's body colour match our paper so section gutters/margins don't flash white */
html, body {
  background-color: var(--mc-paper) !important;
}
body .shopify-section,
body .shopify-section-group-header-group,
body .shopify-section-group-footer-group,
body main#MainContent {
  background-color: var(--mc-paper);
}

.mc-root {
  background: var(--mc-paper);
  color: var(--mc-ink);
  font-family: var(--mc-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.5;
}
.mc-root *, .mc-root *::before, .mc-root *::after { box-sizing: border-box; }
.mc-root button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; }
.mc-root a { color: inherit; text-decoration: none; }
.mc-root em { font-style: italic; }
.mc-root img, .mc-root svg { display: block; max-width: 100%; }

/* =========================
   TYPE UTILITIES
   ========================= */
.mc-eyebrow {
  font-family: var(--mc-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-eyebrow.is-center { text-align: center; display: block; }

.mc-display {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: clamp(54px, 7vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--mc-ink);
}
.mc-display em { font-style: italic; color: var(--mc-accent-deep); font-weight: 400; }
.mc-display-sm {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.mc-display-sm em { font-style: italic; color: var(--mc-accent-deep); }
.mc-h-display {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.mc-h-display em { font-style: italic; color: var(--mc-accent-deep); }

/* =========================
   WORDMARK
   ========================= */
.mc-wordmark {
  font-family: var(--mc-serif);
  font-weight: 400;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  line-height: 1;
  color: var(--mc-ink);
  transition: font-size 0.3s ease;
}
.mc-wm-main { letter-spacing: 0.01em; }
.mc-wm-amp { font-style: italic; color: var(--mc-accent-deep); padding: 0 0.05em; }

/* =========================
   BUTTONS
   ========================= */
.mc-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  transition: all 0.25s;
  cursor: pointer;
  font-family: var(--mc-sans);
}
.mc-btn--dark { background: var(--mc-ink); color: var(--mc-paper); border: 1px solid var(--mc-ink); }
.mc-btn--dark:hover,
.mc-btn--dark:focus-visible { background: var(--mc-btn-hover); border-color: var(--mc-btn-hover); color: var(--mc-paper); transform: translateY(-1px); }
.mc-btn--ghost { background: transparent; border: 1px solid var(--mc-ink); color: var(--mc-ink); }
.mc-btn--ghost:hover,
.mc-btn--ghost:focus-visible { background: var(--mc-btn-hover); color: var(--mc-paper); border-color: var(--mc-btn-hover); transform: translateY(-1px); }
.mc-btn--block { width: 100%; justify-content: center; }
.mc-btn--hex:hover,
.mc-btn--hex:focus-visible {
  background: var(--mc-btn-hex, var(--mc-ink));
  border-color: var(--mc-btn-hex, var(--mc-ink));
  color: var(--mc-paper);
}
.mc-root button.mc-btn { padding: 14px 26px; border-radius: 999px; }
.mc-root button.mc-btn--dark { background: var(--mc-ink); color: var(--mc-paper); border: 1px solid var(--mc-ink); }
.mc-root button.mc-btn--dark:hover,
.mc-root button.mc-btn--dark:focus-visible { background: var(--mc-btn-hover); border-color: var(--mc-btn-hover); color: var(--mc-paper); }
.mc-root button.mc-btn--ghost { background: transparent; border: 1px solid var(--mc-ink); color: var(--mc-ink); }
.mc-root button.mc-btn--ghost:hover,
.mc-root button.mc-btn--ghost:focus-visible { background: var(--mc-btn-hover); color: var(--mc-paper); border-color: var(--mc-btn-hover); }
.mc-root button.mc-btn--block { width: 100%; justify-content: center; }

.mc-link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500;
  color: var(--mc-ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--mc-ink);
  transition: gap 0.2s, color 0.2s;
}
.mc-link-arrow:hover { gap: 14px; color: var(--mc-accent-deep); border-bottom-color: var(--mc-accent-deep); }
button.mc-link-arrow {
  background: none;
  border: none;
  border-bottom: 1px solid var(--mc-ink);
  cursor: pointer;
  font-family: inherit;
  padding-top: 0;
}
button.mc-link-arrow:hover { border-bottom-color: var(--mc-accent-deep); }

/* =========================
   NAV (header-custom section)
   ========================= */
.mc-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--mc-paper);
  border-bottom: 1px solid transparent;
  transition: border 0.3s, background 0.3s, backdrop-filter 0.3s;
  font-family: var(--mc-sans);
}
.mc-nav.is-scrolled {
  border-bottom-color: var(--mc-rule-soft);
  background: rgba(244, 238, 226, 0.88);
  backdrop-filter: blur(16px);
}
.mc-nav-inner {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 18px var(--mc-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}
.mc-nav-left, .mc-nav-right {
  display: flex;
  align-items: center;
  gap: 28px;
}
.mc-nav-right { justify-content: flex-end; }
.mc-nav-logo { display: flex; justify-content: center; align-items: center; }
.mc-nav-link {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.mc-nav-link:hover, .mc-nav-link.is-active { color: var(--mc-ink); }
.mc-nav-link.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--mc-ink);
}
.mc-nav-sep { width: 1px; height: 18px; background: var(--mc-rule); margin: 0 8px; display: inline-block; }
.mc-nav-icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
  position: relative;
  color: var(--mc-ink);
  background: none;
  border: none;
  cursor: pointer;
}
.mc-nav-icon:hover { background: var(--mc-paper-2); }
.mc-nav-bag .mc-bag-dot {
  position: absolute; top: 2px; right: 2px;
  background: var(--mc-accent-deep); color: var(--mc-paper);
  font-size: 9px; font-weight: 600;
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  letter-spacing: 0;
  font-family: var(--mc-sans);
}

/* Ticker */
.mc-nav-ticker {
  background: var(--mc-ink);
  color: var(--mc-paper);
  overflow: hidden;
  padding: 7px 0;
  border-top: 1px solid var(--mc-ink-soft);
}
.mc-ticker-track {
  display: flex;
  gap: 40px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: mc-ticker 50s linear infinite;
  padding-left: 40px;
  font-family: var(--mc-sans);
}
@keyframes mc-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.mc-ticker-cta {
  background: none; border: none; color: var(--mc-gold); cursor: pointer;
  font: inherit; text-transform: uppercase; letter-spacing: inherit;
  font-size: inherit;
}

/* Mobile nav adjustments */
@media (max-width: 900px) {
  .mc-nav-inner { grid-template-columns: auto 1fr auto; gap: 16px; }
  .mc-nav-left, .mc-nav-right { display: none; }
  .mc-nav-logo { justify-content: flex-start; }
  .mc-nav-mobile-toggle { display: inline-flex; }
  .mc-nav-bag-mobile { display: inline-flex; }
}
@media (min-width: 901px) {
  .mc-nav-mobile-toggle, .mc-nav-bag-mobile { display: none; }
}

/* =========================
   SKEIN (CSS-painted)
   ========================= */
.mc-skein {
  position: relative;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.12));
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.mc-skein-body {
  width: 65%;
  height: 92%;
  border-radius: 48% 48% 42% 42% / 12% 12% 14% 14%;
  position: relative;
  overflow: hidden;
}
.mc-skein-fuzz {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse 60% 40% at 50% 50%, transparent 40%, rgba(255,255,255,0.08) 60%, transparent 80%);
  filter: blur(8px);
  pointer-events: none;
  border-radius: inherit;
}
.mc-skein-strands { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-skein-band {
  position: absolute;
  top: 38%; left: -6%; right: -6%;
  height: 22%;
  background: var(--mc-paper);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08), 0 -4px 6px rgba(0,0,0,0.08);
  font-family: var(--mc-sans);
  text-align: center;
}
.mc-skein-band-label { line-height: 1.3; }
.mc-sbl-top { font-size: 6.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mc-ink-mute); }
.mc-sbl-mid { font-family: var(--mc-serif); font-size: 14px; font-style: italic; color: var(--mc-ink); margin: 1px 0; }
.mc-sbl-bot { font-size: 6px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mc-ink-mute); }

/* =========================
   FOOTER (footer-custom section)
   ========================= */
.mc-footer {
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 100px var(--mc-pad) 40px;
  font-family: var(--mc-sans);
}
.mc-footer-top {
  max-width: var(--mc-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 80px;
  padding-bottom: 80px;
}
.mc-footer-top .mc-eyebrow { color: #A89C86; display: block; margin-bottom: 16px; }
.mc-footer-h {
  font-family: var(--mc-serif);
  font-size: 36px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  color: var(--mc-paper);
}
.mc-footer-h em { font-style: italic; color: var(--mc-gold); }
.mc-footer-sub {
  color: #A89C86;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 400px;
}
.mc-footer-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  border-bottom: 1px solid #5A5247;
  padding-bottom: 10px;
}
.mc-footer-form input {
  flex: 1;
  background: none;
  border: none;
  color: var(--mc-paper);
  padding: 10px 0;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.mc-footer-form input::placeholder { color: #A89C86; }
.mc-footer-form button {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--mc-paper);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
}
.mc-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.mc-footer-cols > div { display: flex; flex-direction: column; }
.mc-footer-cols a {
  text-align: left;
  padding: 6px 0;
  color: var(--mc-paper);
  font-size: 13px;
  transition: color 0.2s;
  text-decoration: none;
}
.mc-footer-cols a:hover { color: var(--mc-gold); }
.mc-footer-bottom {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid #3A342A;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.mc-footer-bottom .mc-wordmark { color: var(--mc-paper); }
.mc-footer-bottom .mc-wm-amp { color: var(--mc-gold); }
.mc-footer-meta {
  display: flex;
  gap: 32px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #A89C86;
}

@media (max-width: 900px) {
  .mc-footer-top { grid-template-columns: 1fr; gap: 48px; padding-bottom: 48px; }
  .mc-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mc-footer-meta { flex-wrap: wrap; gap: 12px; font-size: 10px; }
}

/* Phase 23 — footer wordmark responsive scaling.
   Root-cause of global horizontal scroll på <640px viewports: the footer
   wordmark renders at inline `font-size: 56px` (from wordmark.liquid). At
   375 viewport "Mohair & Canard" at 56px is ~340px wide, exceeding viewport
   minus padding. !important required to beat the inline style. clamp keeps
   the wordmark legible at narrowest widths (320px → ~26px) without making
   it look toy-sized at tablet portrait. */
@media (max-width: 640px) {
  .mc-footer-bottom .mc-wordmark {
    font-size: clamp(24px, 8vw, 40px) !important;
  }
}

/* =========================================================
   HOME PAGE · Phase 2
   ========================================================= */

/* Page wrapper for home sections */
.mc-page { background: var(--mc-paper); }

/* ---------- HERO ---------- */
.mc-hero {
  padding: 60px var(--mc-pad) 120px;
  max-width: var(--mc-max);
  margin: 0 auto;
  position: relative;
}
.mc-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  min-height: 80vh;
}
.mc-hero-text { padding-top: 20px; }
.mc-hero-text .mc-eyebrow { margin-bottom: 32px; display: block; }
.mc-hero-lede {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--mc-ink-soft);
  margin: 36px 0 44px;
  max-width: 460px;
}
.mc-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.mc-hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--mc-rule);
}
.mc-hero-stats > div { display: flex; flex-direction: column; gap: 4px; }
.mc-hero-stats strong {
  font-family: var(--mc-serif);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--mc-ink);
}
.mc-hero-stats em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

.mc-hero-visual {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
}
.mc-hero-skein-wrap { position: relative; padding: 40px; }
.mc-hero-halo {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, var(--mc-hero-halo-color, #E8B89A88) 0%, transparent 70%);
  filter: blur(40px);
  animation: mc-pulse 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mc-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}
.mc-hero-tag {
  position: absolute;
  right: -20px;
  top: 30px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  padding: 14px 18px;
  text-align: right;
  box-shadow: 0 20px 40px -20px rgba(26, 24, 20, 0.2);
}
.mc-hero-tag .mc-eyebrow { margin-bottom: 6px; display: block; }
.mc-tag-name {
  font-family: var(--mc-serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
}
.mc-tag-price { font-size: 12px; color: var(--mc-ink-mute); margin-top: 4px; }
.mc-hero-scroll {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--mc-ink-mute), transparent);
  animation: mc-scroll-line 2s ease-in-out infinite;
}
@keyframes mc-scroll-line {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.5) translateY(10px); }
}

@media (max-width: 900px) {
  .mc-hero { padding: 40px var(--mc-pad) 80px; }
  .mc-hero-grid { grid-template-columns: 1fr; gap: 48px; min-height: 0; }
  /* Phase 23 — defensive shrink on hero-grid children. Without min-width:0
     the 1fr column refuses to shrink below its children's min-content
     (often 420px from a non-wrapping h1 / button-label / fixed-width image)
     and overflows the viewport. */
  .mc-hero-grid > * { min-width: 0; max-width: 100%; }
  /* The hero skein is rendered via skein.liquid with inline `width: Npx;
     height: (N×1.35)px` (default size: 340). That hardcoded inline width
     ignores parent constraints — on 375 viewports the 340px skein plus its
     40px wrapper padding overflows by 85px. Override on mobile so the skein
     scales with available width while preserving the 1:1.35 aspect ratio
     baked into the original (height = width × 1.35). */
  .mc-hero-skein-wrap { padding: 24px; max-width: 100%; }
  .mc-hero-skein-wrap .mc-skein {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.35;
  }
  .mc-hero-stats { gap: 24px; margin-top: 40px; padding-top: 24px; }
  .mc-hero-stats strong { font-size: 24px; }
  .mc-hero-tag { right: 10px; top: 10px; padding: 10px 14px; }
}

/* ---------- QUOTE ---------- */
.mc-quote {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px var(--mc-pad);
  text-align: center;
}
.mc-quote-mark {
  font-family: var(--mc-serif);
  font-size: 140px;
  line-height: 0.3;
  color: var(--mc-accent-deep);
  font-style: italic;
  margin-bottom: 20px;
}
.mc-quote p {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.3;
  font-style: italic;
  color: var(--mc-ink);
}
.mc-quote-meta {
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

/* ---------- CHAPTERS (shared frame for color/yarns/journal) ---------- */
.mc-chapter {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 100px var(--mc-pad);
}
.mc-chapter-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--mc-rule);
}
.mc-chapter-head .mc-eyebrow { display: block; margin-bottom: 20px; }
.mc-chapter-head h2 { grid-column: 1; }
.mc-chapter-head .mc-link-arrow { align-self: end; justify-self: end; }

@media (max-width: 900px) {
  .mc-chapter { padding: 64px var(--mc-pad); }
  .mc-chapter-head { grid-template-columns: 1fr; margin-bottom: 32px; }
}

/* ---------- COLOR LIBRARY GRID (product cards) ---------- */
.mc-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
}
/* Phase 23 — color-grid mobile reflow. 4 cards × ~94px min-content + 3×20px
   gaps = ~437px → exceeds 375px viewport, forcing horizontal overflow on the
   homepage. Drop to 2-col below 480px so each card has ~150px to work with;
   3-col between 481 and 700 keeps the editorial density on tablets. */
@media (max-width: 700px) {
  .mc-color-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 14px; }
}
@media (max-width: 480px) {
  .mc-color-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}
.mc-cgrid-item {
  display: block;
  color: inherit;
  text-decoration: none;
  animation: mc-fade-up 0.6s both;
}
.mc-cgrid-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.mc-cgrid-item:hover .mc-cgrid-visual { transform: translateY(-2px); }
.mc-cgrid-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease, opacity 0.3s;
  display: block;
}
.mc-cgrid-item:hover .mc-cgrid-img { transform: scale(1.04); }
.mc-cgrid-visual > .mc-cgrid-img { position: relative; z-index: 1; }
.mc-cgrid-swatch {
  position: absolute;
  left: 14px; bottom: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--mc-swatch, var(--mc-paper-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 2;
}
.mc-cgrid-body {
  padding: 14px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-cgrid-name {
  font-family: var(--mc-serif);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: var(--mc-ink);
  line-height: 1.2;
}
.mc-cgrid-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-cgrid-num { color: var(--mc-ink-fade); }
.mc-cgrid-price {
  font-size: 13px;
  color: var(--mc-ink-soft);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* keep legacy class for fallback */
.mc-color-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: var(--mc-rule-soft);
  border: 1px solid var(--mc-rule-soft);
}
.mc-cstrip-item {
  background: var(--mc-paper);
  padding: 20px 16px;
  text-align: left;
  transition: all 0.3s;
  position: relative;
  animation: mc-fade-up 0.6s both;
  display: block;
  color: inherit;
  text-decoration: none;
}
@keyframes mc-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.mc-cstrip-swatch {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s;
}
.mc-cstrip-item:hover .mc-cstrip-swatch { transform: scale(1.02); }
.mc-cstrip-hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.mc-cstrip-item:hover .mc-cstrip-hover { opacity: 1; }
.mc-cstrip-name {
  font-family: var(--mc-serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--mc-ink);
}
.mc-cstrip-num {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .mc-color-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .mc-color-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FOUR YARNS (bases) ---------- */
.mc-bases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--mc-rule-soft);
  border: 1px solid var(--mc-rule-soft);
}
.mc-base-card {
  background: var(--mc-paper);
  padding: 48px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.mc-base-num {
  position: absolute;
  top: 24px; right: 30px;
  font-family: var(--mc-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--mc-ink-fade);
}
.mc-base-visual {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: var(--mc-paper-2);
}
.mc-base-card h3 {
  font-family: var(--mc-serif);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
}
.mc-base-sub {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-base-card p {
  color: var(--mc-ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 16px;
}
.mc-base-specs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--mc-rule);
  border-bottom: 1px solid var(--mc-rule);
  font-size: 12px;
}
.mc-base-specs > div { display: grid; grid-template-columns: 80px 1fr; gap: 16px; }
.mc-base-specs dt { color: var(--mc-ink-mute); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }
.mc-base-specs dd { color: var(--mc-ink-soft); }
.mc-base-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.mc-base-price {
  font-family: var(--mc-serif);
  font-size: 22px;
  font-style: italic;
}

@media (max-width: 1100px) {
  .mc-bases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mc-bases { grid-template-columns: 1fr; }
}

/* ---------- STORY BLEED (atelier story) ---------- */
.mc-story-bleed {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 700px;
  background: var(--mc-paper-2);
  margin: 80px 0;
}
.mc-sb-image { position: relative; overflow: hidden; }
.mc-sb-img-inner {
  position: absolute; inset: 0;
  transform: scale(1.05);
  background-size: cover;
  background-position: center;
}
.mc-sb-halo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(26, 24, 20, 0.1) 100%);
}
.mc-sb-caption {
  position: absolute;
  bottom: 24px; left: 24px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  background: rgba(26, 24, 20, 0.4);
  padding: 6px 12px;
  backdrop-filter: blur(8px);
}
.mc-sb-text {
  padding: 100px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  max-width: 600px;
}
.mc-sb-text .mc-eyebrow { display: block; }
.mc-sb-text p {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mc-ink-soft);
}
.mc-sb-text .mc-btn { align-self: flex-start; margin-top: 12px; }

@media (max-width: 900px) {
  .mc-story-bleed { grid-template-columns: 1fr; min-height: 0; }
  .mc-sb-image { aspect-ratio: 4/3; }
  .mc-sb-text { padding: 48px var(--mc-pad); }
}

/* ---------- JOURNAL ---------- */
.mc-journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mc-journal-card {
  cursor: pointer;
  transition: transform 0.3s;
  display: block;
  color: inherit;
  text-decoration: none;
}
.mc-journal-card:hover { transform: translateY(-4px); }
.mc-j-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 20px;
  background-size: cover;
  background-position: center;
}
.mc-journal-card .mc-eyebrow { margin-bottom: 10px; display: block; }
.mc-journal-card h3 {
  font-family: var(--mc-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.mc-j-meta {
  font-size: 11px;
  color: var(--mc-ink-mute);
  margin-top: 8px;
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .mc-journal-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- REVIEWS ---------- */
.mc-reviews {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 100px var(--mc-pad);
}
.mc-reviews .mc-eyebrow { margin-bottom: 48px; display: block; }
.mc-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--mc-rule);
  border: 1px solid var(--mc-rule);
}
.mc-review {
  background: var(--mc-paper);
  padding: 48px 36px;
}
.mc-stars {
  color: var(--mc-accent-deep);
  letter-spacing: 0.1em;
  font-size: 12px;
  margin-bottom: 24px;
}
.mc-review h4 {
  font-family: var(--mc-serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 16px;
}
.mc-review p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--mc-ink-soft);
  margin-bottom: 24px;
}
.mc-r-meta {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

@media (max-width: 900px) {
  .mc-reviews { padding: 64px var(--mc-pad); }
  .mc-reviews-grid { grid-template-columns: 1fr; }
}

/* ---------- INSTAGRAM STRIP ---------- */
.mc-ig-strip {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 40px var(--mc-pad) 120px;
  text-align: center;
}
.mc-ig-strip .mc-eyebrow { margin-bottom: 32px; display: block; }
.mc-ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.mc-ig-tile {
  aspect-ratio: 1;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: block;
}
.mc-ig-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(26, 24, 20, 0.4);
  color: var(--mc-paper);
  font-size: 12px; letter-spacing: 0.1em;
  opacity: 0; transition: opacity 0.3s;
}
.mc-ig-tile:hover .mc-ig-overlay { opacity: 1; }

@media (max-width: 900px) {
  .mc-ig-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PDP · Mohair & Canard — Phase 3
   ============================================================ */

.mc-no-scroll, .mc-no-scroll body { overflow: hidden; }

.mc-pdp {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 40px var(--mc-pad) 80px;
}
.mc-breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-bottom: 32px;
}
.mc-breadcrumb a { color: var(--mc-ink-mute); transition: color 0.2s; }
.mc-breadcrumb a:hover { color: var(--mc-ink); }
.mc-breadcrumb span { opacity: 0.6; }

.mc-pdp-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Gallery */
.mc-pdp-gallery { position: sticky; top: 120px; }
.mc-pg-main {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  transition: background 240ms ease, border-color 240ms ease, aspect-ratio 240ms ease;
}
/* CSS-art panes (Skein / Knit / Held-double) keep the colored split + 5px tinted border */
.mc-pg-main:not(.is-photo-active) {
  background: linear-gradient(to bottom left, #FFFFFF 50%, var(--mc-pg-tint) 50%);
  border: 5px solid var(--mc-pg-tint);
}
/* Photo pane = neutral luxe surface matching baked image background */
.mc-pg-main.is-photo-active {
  aspect-ratio: var(--mc-photo-ratio, 1);
  background: #FAF8F4;
  border: 1px solid rgba(0,0,0,0.04);
}
.mc-pg-pane {
  position: absolute; inset: 0;
  display: none;
  place-items: center;
  padding: 40px;
}
.mc-pg-pane.is-on { display: grid; }
.mc-pg-pane--photo {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.mc-pg-pane--photo img.mc-pg-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Magnifier lens (Loro Piana-style hover zoom — desktop only, injected by mc-image-lens.js)
 * Specificity bumped via `.mc-pg-pane--photo .mc-pg-lens` so Dawn's base.css
 * `div:empty { display:none }` rule (which would otherwise hide our empty
 * background-image div) loses the cascade. */
.mc-pg-pane--photo .mc-pg-lens {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  background-repeat: no-repeat;
  background-size: 500% 500%;
  box-shadow:
    0 8px 32px -8px rgba(0,0,0,0.25),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  z-index: 5;
  will-change: transform, background-position;
}
.mc-pg-pane--photo .mc-pg-lens.is-on { opacity: 1; }
@media (max-width: 749px) {
  .mc-pg-pane--photo .mc-pg-lens { display: none; }
}
.mc-pg-halo {
  position: absolute; inset: -20%;
  filter: blur(50px);
  animation: mc-pulse 8s ease-in-out infinite;
  pointer-events: none;
}
.mc-pg-pane--double .mc-pg-double-wrap {
  display: flex;
  gap: 0;
  position: relative;
}
.mc-pg-skein-rot--left { transform: rotate(-8deg) translateX(20px); }
.mc-pg-skein-rot--right { transform: rotate(6deg) translateX(-20px); }
.mc-pg-pane--knit { position: relative; }
.mc-pg-knit-swatch {
  width: 70%;
  height: 70%;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}
.mc-pg-caption {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: rgba(26,24,20,0.6);
  color: var(--mc-paper);
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

.mc-pg-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.mc-pg-thumb {
  flex: 1;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule-soft);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--mc-sans);
}
.mc-pg-thumb:hover { border-color: var(--mc-ink-fade); color: var(--mc-ink); }
.mc-pg-thumb.is-on { border-color: var(--mc-ink); color: var(--mc-ink); background: var(--mc-paper-2); }
.mc-pgt-chip {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  flex-shrink: 0;
}

/* Info */
.mc-pdp-info { padding-top: 10px; }
.mc-pdp-info .mc-eyebrow { display: block; margin-bottom: 14px; }
.mc-pdp-name {
  font-family: var(--mc-serif);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--mc-ink);
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.mc-pdp-fr {
  font-size: 0.45em;
  font-style: italic;
  color: var(--mc-ink-fade);
  letter-spacing: 0.08em;
  font-weight: 400;
}
.mc-pdp-base {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-bottom: 20px;
}
.mc-pdp-story {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--mc-ink-soft);
  margin: 18px 0 30px;
  max-width: 520px;
}
.mc-pdp-longform {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mc-ink-soft);
  max-width: 560px;
  margin: 14px 0 4px;
}
.mc-pdp-longform p { margin: 0 0 10px; }
.mc-pdp-longform p:last-child { margin-bottom: 0; }
.mc-pdp-longform strong { color: var(--mc-ink); font-weight: 500; font-style: normal; }
.mc-pdp-longform a { color: var(--mc-ink); border-bottom: 1px solid var(--mc-rule); }
.mc-pdp-longform a:hover { border-bottom-color: var(--mc-ink); }
.mc-pdp-longform ul, .mc-pdp-longform ol { margin: 0 0 12px; padding-left: 18px; }
.mc-pdp-longform li { margin-bottom: 4px; }

.mc-acc-lede {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mc-ink-soft);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-acc-lede p { margin: 0 0 8px; }
.mc-acc-lede p:last-child { margin-bottom: 0; }

.mc-pdp-price-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--mc-rule);
  border-bottom: 1px solid var(--mc-rule);
  margin-bottom: 8px;
}
.mc-pdp-price {
  font-family: var(--mc-serif);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--mc-ink);
}
.mc-pdp-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-left: auto;
}
.mc-stock-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}

.mc-pdp-section { margin: 28px 0; }
.mc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mc-section-head .mc-eyebrow { display: inline-block; }
.mc-pdp-swatches {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-pdp-sw {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(26,24,20,0.1);
  display: grid;
  place-items: center;
  color: rgba(26,24,20,0.9);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.mc-pdp-sw:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(26,24,20,0.2); }
.mc-pdp-sw.is-on {
  outline: 2px solid var(--mc-ink);
  outline-offset: 2px;
}
/* Phase 21d — override Dawn base.css `a:empty { display: none }` (specificity 0,1,1 beats .mc-pdp-sw at 0,1,0). The 4 sibling anchors are rendered without inner content (background-only swatches), so without this override they collapse and only the current swatch + See-all link render. */
.mc-pdp-sw:empty { display: grid; }
.mc-pdp-swatch-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mc-pdp-sw-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--mc-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}
.mc-pdp-sw-link:hover,
.mc-pdp-sw-link:focus-visible {
  color: var(--mc-btn-hex, var(--mc-accent-deep));
}

/* Chip utility */
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--mc-sans);
  border-radius: 999px;
}
.mc-chip em { font-style: italic; color: var(--mc-ink-fade); letter-spacing: 0.06em; }
.mc-chip:hover { border-color: var(--mc-ink); color: var(--mc-ink); }
.mc-chip.is-on { background: var(--mc-ink); color: var(--mc-paper); border-color: var(--mc-ink); }

.mc-pdp-calc .mc-calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mc-calc-out {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--mc-ink-soft);
}
.mc-calc-out strong { font-style: normal; color: var(--mc-ink); font-weight: 400; }

.mc-pdp-buy {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin: 24px 0;
}
.mc-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  overflow: hidden;
  background: var(--mc-paper);
}
.mc-qty-btn {
  width: 44px; height: 52px;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--mc-ink);
}
.mc-qty-btn:hover { background: var(--mc-paper-2); }
.mc-qty-num {
  width: 40px; text-align: center;
  border: none; background: none;
  font-family: var(--mc-serif);
  font-size: 18px;
  color: var(--mc-ink);
  outline: none;
  appearance: none;
  -moz-appearance: textfield;
}
.mc-qty-num::-webkit-outer-spin-button,
.mc-qty-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mc-pdp-add { flex: 1; justify-content: center; min-height: 52px; }

.mc-pdp-promises {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid var(--mc-rule);
  border-bottom: 1px solid var(--mc-rule);
  margin-bottom: 24px;
}
.mc-pdp-promises > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--mc-ink-soft);
}
.mc-pdp-promises svg { color: var(--mc-accent-2); flex-shrink: 0; }

/* Accordions */
.mc-pdp-accords { display: flex; flex-direction: column; }
.mc-acc { border-bottom: 1px solid var(--mc-rule); }
.mc-acc:first-child { border-top: 1px solid var(--mc-rule); }
.mc-acc-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink);
  cursor: pointer;
  list-style: none;
  font-family: var(--mc-sans);
  font-weight: 500;
}
.mc-acc-head::-webkit-details-marker { display: none; }
.mc-acc-mark {
  width: 14px; height: 14px;
  position: relative;
}
.mc-acc-mark::before, .mc-acc-mark::after {
  content: "";
  position: absolute;
  background: var(--mc-ink);
  transition: transform 0.25s;
}
.mc-acc-mark::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.mc-acc-mark::after  { top: 0; left: 6px; width: 1.5px; height: 14px; }
.mc-acc[open] .mc-acc-mark::after { transform: scaleY(0); }
.mc-acc-body { padding: 6px 0 22px; }
.mc-acc-body p { color: var(--mc-ink-soft); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.mc-acc-body dl { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.mc-acc-body dl > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-acc-body dl > div:last-child { border-bottom: none; }
.mc-acc-body dt { color: var(--mc-ink-mute); letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px; padding-top: 2px; }
.mc-acc-body dd { color: var(--mc-ink-soft); margin: 0; }

/* Related + dye notice */
.mc-pdp-related { margin-top: 100px; padding: 80px var(--mc-pad) 0; }
.mc-dye-notice {
  max-width: var(--mc-max);
  margin: 80px auto 40px;
  padding: 0 var(--mc-pad);
}
.mc-dn-inner {
  background: var(--mc-paper-2);
  padding: 80px 10%;
  text-align: center;
}
.mc-dn-inner .mc-eyebrow { display: block; margin-bottom: 20px; }
.mc-dn-inner p {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--mc-ink-soft);
  max-width: 620px;
  margin: 24px auto 0;
}

/* Mobile */
@media (max-width: 900px) {
  .mc-pdp-grid { grid-template-columns: 1fr; gap: 40px; }
  .mc-pdp-gallery { position: static; }
  .mc-pdp-name { font-size: 48px; }
  .mc-pdp-buy { flex-direction: column; }
  .mc-qty { align-self: flex-start; }
  .mc-dn-inner { padding: 48px var(--mc-pad); }
}

/* ============================================================
   Colours drawer
   ============================================================ */

.mc-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(26,24,20,0.35);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mc-drawer-scrim.is-on { opacity: 1; pointer-events: auto; }

.mc-cdrawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(560px, 100vw);
  background: var(--mc-paper);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  box-shadow: -20px 0 60px -20px rgba(26,24,20,0.25);
  font-family: var(--mc-sans);
  color: var(--mc-ink);
}
.mc-cdrawer.is-on { transform: translateX(0); }

.mc-cdrawer-head {
  padding: 32px 36px 24px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  border-bottom: 1px solid var(--mc-rule);
}
.mc-cdrawer-head .mc-eyebrow { display: block; margin-bottom: 8px; }
.mc-cdrawer-head h3 {
  font-family: var(--mc-serif);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.1;
  margin: 0;
}
.mc-drawer-close {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--mc-rule);
  border-radius: 50%;
  cursor: pointer;
  color: var(--mc-ink);
  transition: background 0.2s;
}
.mc-drawer-close:hover { background: var(--mc-paper-2); }

.mc-cdrawer-filters {
  padding: 20px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid var(--mc-rule);
}
.mc-cdf-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: center;
}
.mc-cdf-label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-cdf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-cdf-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
}
.mc-cdf-search svg { color: var(--mc-ink-mute); flex-shrink: 0; }
.mc-cdf-search input {
  flex: 1;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 13px;
  color: var(--mc-ink);
}

.mc-cdrawer-list {
  overflow-y: auto;
  padding: 8px 0 24px;
}
.mc-cdl-count {
  padding: 12px 36px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-cdl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 36px;
  gap: 16px;
  border-bottom: 1px solid var(--mc-rule-soft);
  transition: background 0.15s;
}
.mc-cdl-row:hover { background: var(--mc-paper-2); }
.mc-cdl-row.is-current { background: var(--mc-paper-2); }
.mc-cdl-row.is-na { opacity: 0.6; }

.mc-cdl-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.mc-cdl-chip {
  width: 42px; height: 42px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.mc-cdl-info { min-width: 0; flex: 1; }
.mc-cdl-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mc-serif);
  font-size: 18px;
  font-weight: 400;
  flex-wrap: wrap;
}
.mc-cdl-name em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-fade);
}
.mc-cdl-flag {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--mc-paper-3);
  color: var(--mc-ink-soft);
  border-radius: 999px;
}
.mc-cdl-flag--now { background: var(--mc-ink); color: var(--mc-paper); }
.mc-cdl-story {
  font-size: 12px;
  color: var(--mc-ink-mute);
  margin-top: 2px;
  letter-spacing: 0.05em;
}
.mc-cdl-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.mc-cdl-price {
  font-size: 13px;
  color: var(--mc-ink-soft);
}
.mc-cdl-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--mc-ink);
  color: var(--mc-paper);
  border: none;
  border-radius: 999px;
  font-family: var(--mc-sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.mc-cdl-add:hover { background: var(--mc-accent-deep); }
.mc-cdl-add:disabled { opacity: 0.6; cursor: default; }
.mc-cdl-na {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

.mc-cdrawer-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* Phase 23 — cross-base disclaimer. Appears between the filter bar and the
   grid when the active yarn filter inside the drawer differs from the kit
   slot's allowed base. Subtle accent background so it reads as info, not
   error. Hidden by default via the [hidden] attribute. */
.mc-cdrawer-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 36px 12px;
  padding: 10px 14px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper-2);
  font-size: 12px;
  line-height: 1.45;
  color: var(--mc-ink-soft);
}
.mc-cdrawer-disclaimer[hidden] { display: none; }
.mc-cdrawer-disclaimer svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--mc-accent);
}
.mc-cdrawer-disclaimer em {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink);
}
@media (max-width: 600px) {
  .mc-cdrawer-disclaimer { margin-left: 20px; margin-right: 20px; }
}

.mc-cdrawer-foot {
  padding: 20px 36px;
  border-top: 1px solid var(--mc-rule);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  text-align: center;
}

@media (max-width: 600px) {
  .mc-cdrawer-head, .mc-cdrawer-filters, .mc-cdl-count, .mc-cdl-row, .mc-cdrawer-foot { padding-left: 20px; padding-right: 20px; }
  .mc-cdf-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ============ Phase 3.1 — drawer refinements ============ */

/* Filters: split search + view toggle into a second row */
.mc-cdf-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mc-cdf-controls .mc-cdf-search { flex: 1; }

.mc-cdf-view {
  display: inline-flex;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.mc-cdf-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--mc-ink-mute);
  transition: background 0.18s, color 0.18s;
}
.mc-cdf-view-btn:hover { color: var(--mc-ink); }
.mc-cdf-view-btn.is-on {
  background: var(--mc-ink);
  color: var(--mc-paper);
}
.mc-cdf-view-btn:focus-visible,
.mc-cdl-add:focus-visible,
.mc-cdl-gocart:focus-visible,
.mc-chip:focus-visible {
  outline: 2px solid var(--mc-accent-deep);
  outline-offset: 2px;
}

/* Row thumbnail — list mode */
.mc-cdl-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mc-swatch, var(--mc-paper-2));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.mc-cdl-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Swatch chip becomes a small corner badge when inside thumb */
.mc-cdl-thumb .mc-cdl-chip {
  position: absolute;
  left: 6px; bottom: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mc-swatch, var(--mc-paper-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.25);
}

/* "Added · Go to cart" state — replaces Add button in place */
.mc-cdl-add.is-added {
  background: var(--mc-paper-2);
  color: var(--mc-ink);
  padding: 6px 4px 6px 12px;
  gap: 10px;
  cursor: default;
}
.mc-cdl-add.is-added:hover { background: var(--mc-paper-2); }
.mc-cdl-added-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-cdl-gocart {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--mc-ink);
  color: var(--mc-paper);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--mc-sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.18s;
}
.mc-cdl-gocart:hover { background: var(--mc-accent-deep); }

/* ====== Grid view (Phase 22 rebuild) ====== */
.mc-cdrawer-list.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 16px;
  padding: 18px 24px 32px;
}
.mc-cdrawer-list.is-grid .mc-cdl-count {
  grid-column: 1 / -1;
  padding: 0 0 4px;
  border-bottom: none;
}
.mc-cdrawer-list.is-grid .mc-cdl-row {
  display: grid;
  grid-template-rows: auto auto auto;
  border: 1px solid var(--mc-rule-soft);
  border-radius: 14px;
  background: var(--mc-paper);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.mc-cdrawer-list.is-grid .mc-cdl-row:hover {
  border-color: var(--mc-rule);
  box-shadow: 0 6px 20px -10px rgba(26,24,20,0.18);
  transform: translateY(-2px);
}
.mc-cdrawer-list.is-grid .mc-cdl-row.is-current { border-color: var(--mc-ink); }
.mc-cdrawer-list.is-grid .mc-cdl-row.is-na { opacity: 0.55; }
.mc-cdrawer-list.is-grid .mc-cdl-main {
  display: contents;
}
.mc-cdrawer-list.is-grid .mc-cdl-thumb {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 125%;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  overflow: hidden;
  background: var(--mc-swatch, var(--mc-paper-2));
  box-shadow: none;
}
.mc-cdrawer-list.is-grid .mc-cdl-thumb .mc-cdl-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mc-cdrawer-list.is-grid .mc-cdl-thumb .mc-cdl-chip {
  position: absolute;
  top: 10px; right: 10px; left: auto; bottom: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mc-swatch, var(--mc-paper-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.25);
}
.mc-cdrawer-list.is-grid .mc-cdl-info {
  padding: 12px 14px 6px;
}
.mc-cdrawer-list.is-grid .mc-cdl-name {
  display: block;
  font-family: var(--mc-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
}
.mc-cdrawer-list.is-grid .mc-cdl-name > span:first-child {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.mc-cdrawer-list.is-grid .mc-cdl-name em {
  display: block;
  font: 500 10.5px/1 var(--mc-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-fade);
  margin-top: 4px;
}
.mc-cdrawer-list.is-grid .mc-cdl-name .mc-cdl-flag {
  display: inline-block;
  margin-top: 6px;
}
.mc-cdrawer-list.is-grid .mc-cdl-story {
  font-size: 11.5px;
  color: var(--mc-ink-mute);
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.mc-cdrawer-list.is-grid .mc-cdl-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--mc-rule-soft);
  margin-top: 8px;
}
.mc-cdrawer-list.is-grid .mc-cdl-price {
  font-family: var(--mc-serif);
  font-size: 16px;
}
.mc-cdrawer-list.is-grid .mc-cdl-add {
  min-height: 36px;
  padding: 7px 14px;
  font-size: 11px;
}

@media (max-width: 600px) {
  .mc-cdrawer-list.is-grid {
    grid-template-columns: 1fr;
    padding: 8px 0 24px;
    gap: 0;
  }
  .mc-cdrawer-list.is-grid .mc-cdl-row {
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 1px solid var(--mc-rule-soft);
    border-radius: 0;
    padding: 14px 20px;
    box-shadow: none;
    transform: none;
  }
  .mc-cdrawer-list.is-grid .mc-cdl-row:hover { transform: none; box-shadow: none; }
  .mc-cdrawer-list.is-grid .mc-cdl-main { display: flex; align-items: center; gap: 14px; flex: 1; }
  .mc-cdrawer-list.is-grid .mc-cdl-thumb {
    width: 64px; height: 64px;
    padding-top: 0;
    flex-shrink: 0;
    border-radius: 10px;
  }
  .mc-cdrawer-list.is-grid .mc-cdl-thumb .mc-cdl-chip { top: auto; left: 5px; bottom: 5px; right: auto; width: 14px; height: 14px; }
  .mc-cdrawer-list.is-grid .mc-cdl-info { padding: 0; }
  .mc-cdrawer-list.is-grid .mc-cdl-right { flex-direction: column; align-items: flex-end; padding: 0; border-top: none; margin-top: 0; }
  .mc-cdf-controls { flex-direction: column; align-items: stretch; }
  .mc-cdf-view { align-self: flex-end; }
}

/* ============ Phase 4 — Yarns / Colours / Collection pages ============ */

.mc-wrap {
  width: 100%;
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

.mc-page-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 40px;
}
.mc-page-head .mc-display-sm { margin: 10px 0 18px; }
.mc-page-head .mc-display-sm em { font-style: italic; color: var(--mc-accent-deep); }
.mc-page-head p { margin: 0; }
.mc-page-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mc-ink-soft);
  max-width: 620px;
  margin: 0 auto;
}
.mc-page-lede p { margin: 0; }

/* === Yarns page === */

.mc-yarns-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 40px;
}
@media (min-width: 900px) {
  .mc-yarns-grid { grid-template-columns: 1fr 1fr; gap: 56px 40px; }
}
.mc-yarn-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 28px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule-soft);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.mc-yarn-hero:hover {
  border-color: var(--mc-rule);
  transform: translateY(-2px);
}
.mc-yh-num {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--mc-ink-fade);
}
.mc-yh-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  background: color-mix(in srgb, var(--mc-accent) 22%, var(--mc-paper-2));
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mc-yh-halo {
  position: absolute;
  inset: 10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mc-accent) 55%, transparent) 0%, transparent 70%);
  filter: blur(12px);
}
.mc-yh-skein { position: relative; z-index: 1; }
.mc-yh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-yh-text { display: flex; flex-direction: column; gap: 10px; }
.mc-yh-text .mc-eyebrow { margin-bottom: 2px; }
.mc-yh-text .mc-h-display { margin: 0; font-size: 32px; }
.mc-yh-line {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--mc-ink-soft);
  margin: 0 0 8px;
  line-height: 1.45;
}
.mc-yh-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  margin: 6px 0 16px;
}
.mc-yh-specs > div { display: contents; }
.mc-yh-specs dt,
.mc-yh-specs dd { margin: 0; font-size: 12.5px; line-height: 1.4; }
.mc-yh-specs dt {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--mc-ink-mute);
  align-self: center;
}
.mc-yh-specs dd { color: var(--mc-ink); }

/* === Colours page === */

.mc-col-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 32px 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mc-rule-soft);
  flex-wrap: wrap;
}
.mc-cc-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mc-cc-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-cc-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  flex-shrink: 0;
}
.mc-cc-right { display: flex; align-items: center; gap: 14px; }

.mc-view-toggle {
  display: inline-flex;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.mc-view-toggle button {
  padding: 6px 14px;
  background: none;
  border: none;
  border-radius: 999px;
  font-family: var(--mc-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.mc-view-toggle button.is-on {
  background: var(--mc-ink);
  color: var(--mc-paper);
}
.mc-view-toggle button:focus-visible {
  outline: 2px solid var(--mc-accent-deep);
  outline-offset: 2px;
}

.mc-col-grid-count {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-bottom: 18px;
}

/* Library view */
.mc-clib { display: flex; flex-direction: column; gap: 48px; }
.mc-clib-section { display: flex; flex-direction: column; gap: 18px; }
.mc-clib-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-clib-head .mc-h-display { margin: 0; font-size: 28px; }
.mc-clib-head .mc-eyebrow { flex-shrink: 0; }
.mc-clib-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 18px;
}
@media (min-width: 700px) { .mc-clib-row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .mc-clib-row { grid-template-columns: repeat(5, 1fr); } }
.mc-clib-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s;
}
.mc-clib-card:hover { transform: translateY(-2px); }
.mc-clib-swatch {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--mc-swatch, var(--mc-paper-2));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.mc-clib-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mc-clib-chip {
  position: absolute;
  left: 10px; bottom: 10px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mc-swatch, var(--mc-paper-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.25);
}
.mc-clib-meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.mc-clib-name {
  font-family: var(--mc-serif);
  font-size: 17px;
  line-height: 1.2;
  display: flex; gap: 8px; align-items: baseline;
}
.mc-clib-name em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-fade);
}
.mc-clib-bases {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

/* Colours-page grid view reuses .mc-cgrid-* */
.mc-col-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
}
@media (min-width: 700px) { .mc-col-page-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .mc-col-page-grid { grid-template-columns: repeat(4, 1fr); } }

/* === Collection page === */

.mc-coll-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px 0 44px;
  border-bottom: 1px solid var(--mc-rule-soft);
  margin-bottom: 36px;
}
@media (min-width: 900px) {
  .mc-coll-head { grid-template-columns: 1.3fr 1fr; gap: 48px; }
}
.mc-coll-head-text .mc-display-sm { margin: 8px 0 12px; }
.mc-coll-tag {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--mc-ink-soft);
  margin: 4px 0 10px;
}
.mc-coll-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--mc-ink-soft);
  max-width: 560px;
  margin-bottom: 18px;
}
.mc-coll-desc p { margin: 0 0 8px; }
.mc-coll-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  margin: 0;
  max-width: 520px;
}
.mc-coll-specs > div { display: contents; }
.mc-coll-specs dt,
.mc-coll-specs dd { margin: 0; font-size: 13px; }
.mc-coll-specs dt {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--mc-ink-mute);
}
.mc-coll-specs dd { color: var(--mc-ink); }
.mc-coll-head-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--mc-accent) 22%, var(--mc-paper-2));
  border-radius: 16px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mc-coll-head-visual .mc-yh-halo {
  position: absolute;
  inset: 10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mc-accent) 55%, transparent) 0%, transparent 70%);
  filter: blur(16px);
}

.mc-coll-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 20px;
}
@media (min-width: 700px) { .mc-coll-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .mc-coll-grid { grid-template-columns: repeat(4, 1fr); } }

.mc-cgrid-flag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mc-ink);
  color: var(--mc-paper);
}

.mc-coll-foot {
  margin-top: 56px;
  padding: 40px;
  background: var(--mc-paper-2);
  border-radius: 16px;
  text-align: center;
}
.mc-coll-foot .mc-h-display { margin: 0 0 10px; font-size: 28px; }
.mc-coll-foot p { max-width: 520px; margin: 0 auto 20px; color: var(--mc-ink-soft); }

/* =========================================================
   Phase 5 — Collections & Kits landing (/pages/collections-and-kits)
   ========================================================= */
.mc-ck-page { position: relative; }

.mc-ck-tabs {
  display: inline-flex;
  gap: 32px;
  margin: 24px auto 40px;
  padding: 0 2px;
  border-bottom: 1px solid var(--mc-rule-soft);
  justify-content: center;
}
.mc-ck-page .mc-page-head + .mc-ck-tabs { display: flex; }

.mc-ck-tab {
  background: none; border: 0; cursor: pointer;
  padding: 14px 2px 16px;
  font-family: var(--mc-serif);
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--mc-ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}
.mc-ck-tab em {
  font-style: normal;
  font-family: var(--mc-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-left: 8px;
  color: var(--mc-ink-fade);
  vertical-align: middle;
}
.mc-ck-tab:hover { color: var(--mc-ink); }
.mc-ck-tab.is-on { color: var(--mc-ink); border-bottom-color: var(--mc-accent-deep); }
.mc-ck-tab:focus-visible { outline: 2px solid var(--mc-accent-deep); outline-offset: 4px; border-radius: 2px; }

.mc-ck-pane[hidden] { display: none !important; }
.mc-ck-empty { text-align: center; color: var(--mc-ink-fade); padding: 40px 0; }

/* ---------- Collections cards ---------- */
.mc-coll-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) {
  .mc-coll-cards { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .mc-coll-card--feature { grid-column: 1 / -1; }
}

.mc-coll-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule-soft);
  border-radius: 18px;
  overflow: hidden;
  cursor: default;
  transition: transform 240ms ease, box-shadow 240ms ease;
  position: relative;
}
.mc-coll-card:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -28px rgba(0,0,0,0.18); }

@media (min-width: 900px) {
  .mc-coll-card { grid-template-columns: 48% 52%; }
  .mc-coll-card--feature { grid-template-columns: 55% 45%; }
}

.mc-coll-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--mc-accent) 35%, var(--mc-paper)) 0%, var(--mc-paper) 60%),
    var(--mc-paper);
  overflow: hidden;
}
.mc-coll-card--feature .mc-coll-visual { aspect-ratio: 3 / 2; }

.mc-coll-palette {
  position: absolute;
  top: 18px; left: 18px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.mc-coll-chip {
  width: 14px; height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.1);
}

.mc-coll-skeins {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.mc-coll-skein { filter: drop-shadow(0 14px 28px rgba(0,0,0,0.12)); }
.mc-coll-skein--l { transform: rotate(-6deg) translate(8%, 6%); z-index: 1; }
.mc-coll-skein--c { transform: rotate(0deg) translate(0, -2%); z-index: 2; }
.mc-coll-skein--r { transform: rotate(6deg) translate(-8%, 6%); z-index: 1; }

.mc-coll-info {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-coll-info > .mc-eyebrow { margin-bottom: 2px; }
.mc-coll-info .mc-h-display {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
}
.mc-coll-info .mc-h-display em {
  display: block;
  font-style: italic;
  color: var(--mc-ink-soft);
  font-size: 22px;
  margin-top: 4px;
}
.mc-coll-designer {
  font-size: 13px;
  color: var(--mc-ink-soft);
  letter-spacing: 0.01em;
}
.mc-coll-note {
  margin: 6px 0 4px;
  color: var(--mc-ink);
  line-height: 1.55;
}
.mc-coll-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-fade);
  margin-top: 2px;
}
.mc-coll-dot { opacity: 0.6; }
.mc-coll-info .mc-link-arrow { margin-top: 10px; }

/* ---------- Kits filter bar ---------- */
.mc-ck-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mc-rule-soft);
}

/* ---------- Kit cards ---------- */
.mc-kits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 700px)  { .mc-kits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mc-kits-grid { grid-template-columns: repeat(3, 1fr); } }

.mc-kit-card {
  display: flex;
  flex-direction: column;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule-soft);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.mc-kit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -28px rgba(0,0,0,0.2);
  border-color: color-mix(in srgb, var(--mc-accent-deep) 28%, var(--mc-rule-soft));
}

.mc-kit-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--mc-accent) 30%, var(--mc-paper)) 0%, var(--mc-paper-2) 70%);
  overflow: hidden;
}
.mc-kit-skein {
  position: absolute;
  top: 50%; left: 50%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.14));
}
.mc-kit-skein--0 { transform: translate(-70%, -40%) rotate(-7deg); z-index: 1; }
.mc-kit-skein--1 { transform: translate(-50%, -50%) rotate(0deg);  z-index: 2; }
.mc-kit-skein--2 { transform: translate(-30%, -40%) rotate(7deg);  z-index: 1; }

.mc-kit-flag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mc-ink);
  color: var(--mc-paper);
}
.mc-kit-flag--free {
  left: auto; right: 12px;
  background: var(--mc-accent-deep);
}

.mc-kit-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.mc-kit-body > .mc-eyebrow { margin-bottom: 0; }
.mc-kit-name {
  font-family: var(--mc-serif);
  font-size: 24px;
  line-height: 1.2;
  margin: 2px 0 0;
}
.mc-kit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12.5px;
  color: var(--mc-ink-soft);
}
.mc-kit-dot { opacity: 0.5; }

.mc-kit-palette {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.mc-kit-chip {
  width: 18px; height: 18px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.08);
}

.mc-kit-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  color: var(--mc-ink-soft);
}
.mc-kit-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mc-kp-was {
  font-size: 12.5px;
  color: var(--mc-ink-fade);
  text-decoration: line-through;
}
.mc-kp-now {
  font-family: var(--mc-serif);
  font-size: 20px;
  color: var(--mc-ink);
}
.mc-kp-save {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mc-accent-deep) 10%, var(--mc-paper));
  color: var(--mc-accent-deep);
}

/* =========================================================
   Phase 5.1 — Kit detail page (/pages/kit-*)
   ========================================================= */
.mc-kit-page { position: relative; }

.mc-kit-via {
  margin: 0 auto 28px;
  max-width: 780px;
  background: color-mix(in srgb, var(--mc-accent) 18%, var(--mc-paper));
  border: 1px solid color-mix(in srgb, var(--mc-accent-deep) 25%, var(--mc-rule-soft));
  border-radius: 12px;
  padding: 14px 20px;
}
.mc-kv-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.mc-kv-name {
  font-family: var(--mc-serif);
  font-size: 20px;
  line-height: 1.2;
}
.mc-kv-sep { flex: 1; height: 1px; background: color-mix(in srgb, var(--mc-accent-deep) 30%, transparent); min-width: 20px; }
.mc-kv-promise { font-size: 13px; color: var(--mc-ink-soft); }

/* Hero */
.mc-khero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: stretch;
}
@media (min-width: 960px) {
  .mc-khero { grid-template-columns: 1fr 1fr; gap: 56px; }
}

.mc-khero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 75% 65% at 50% 40%, color-mix(in srgb, var(--mc-accent) 45%, var(--mc-paper)) 0%, var(--mc-paper) 70%);
  min-height: 420px;
}
.mc-khero-halo {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in srgb, var(--mc-accent) 30%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 1;
}
.mc-khero-skeins {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.mc-khero-skein {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.18));
}
.mc-khero-skein--0 { transform: translate(-78%, -48%) rotate(-8deg); z-index: 1; }
.mc-khero-skein--1 { transform: translate(-20%, -50%) rotate(6deg);  z-index: 2; }
.mc-khero-skein--2 { transform: translate(-50%, -18%) rotate(-3deg); z-index: 1; }
.mc-khero-skein--3 { transform: translate(-60%, -78%) rotate(12deg); z-index: 1; }

.mc-khero-badge {
  position: absolute;
  bottom: 20px; left: 20px;
  z-index: 3;
  background: color-mix(in srgb, var(--mc-ink) 85%, transparent);
  color: var(--mc-paper);
  padding: 10px 14px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
.mc-khero-badge .mc-eyebrow {
  color: color-mix(in srgb, var(--mc-paper) 70%, transparent);
  margin-bottom: 2px;
}
.mc-khero-n {
  font-family: var(--mc-serif);
  font-size: 24px;
  line-height: 1;
}

.mc-khero-info { display: flex; flex-direction: column; gap: 14px; }
.mc-khero-info > .mc-eyebrow { margin-bottom: 2px; }
.mc-khero-info .mc-display-sm { margin: 0; font-size: 44px; line-height: 1.05; }
.mc-khero-by {
  color: var(--mc-ink-soft);
  font-size: 14.5px;
}
.mc-khero-by em { font-style: italic; color: var(--mc-ink); }

.mc-khero-spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 6px 0 8px;
  padding: 16px 0;
  border-top: 1px solid var(--mc-rule-soft);
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-khero-spec dt {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-fade);
  margin-bottom: 4px;
}
.mc-khero-spec dd {
  margin: 0;
  font-family: var(--mc-serif);
  font-size: 19px;
}

/* What's in the kit */
.mc-khpb { margin: 4px 0 0; }
.mc-khpb > .mc-eyebrow { margin-bottom: 10px; }
.mc-khpb-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule-soft);
  border-radius: 12px;
  overflow: hidden;
}
.mc-khpb-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-khpb-item:last-child { border-bottom: 0; }
.mc-khpb-chip {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.08);
  position: relative;
}
.mc-khpb-chip em {
  font-style: normal;
  font-family: var(--mc-sans);
  font-size: 12px;
  color: var(--mc-paper);
  background: color-mix(in srgb, var(--mc-ink) 80%, transparent);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.mc-khpb-chip--extra {
  background: var(--mc-paper);
  color: var(--mc-accent-deep);
}
.mc-khpb-text { min-width: 0; }
.mc-khpb-name { font-family: var(--mc-serif); font-size: 17px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.mc-khpb-name em { font-style: italic; color: var(--mc-ink-fade); font-size: 13.5px; }
.mc-khpb-sub { font-size: 12.5px; color: var(--mc-ink-soft); margin-top: 2px; }
.mc-khpb-price { font-family: var(--mc-serif); font-size: 15px; color: var(--mc-ink); white-space: nowrap; }
.mc-khpb-item--extra { background: color-mix(in srgb, var(--mc-accent) 10%, var(--mc-paper-2)); }

/* Price cluster */
.mc-khero-price { margin-top: 6px; }
.mc-khp-save {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12.5px;
}
.mc-khp-was { color: var(--mc-ink-fade); text-decoration: line-through; }
.mc-khp-badge {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mc-accent-deep) 12%, var(--mc-paper));
  color: var(--mc-accent-deep);
}
.mc-khp-now {
  font-family: var(--mc-serif);
  font-size: 32px;
  line-height: 1.1;
}

/* Promises */
.mc-khero-promises {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--mc-ink-soft);
}
.mc-khero-promises li::before {
  content: "✓";
  display: inline-block;
  margin-right: 8px;
  color: var(--mc-accent-deep);
}

/* Includes section */
.mc-kit-includes {
  margin-top: 64px;
  padding: 32px clamp(20px, 3vw, 36px);
  border: 1px solid var(--mc-rule-soft);
  border-radius: 14px;
  background: var(--mc-paper);
}
.mc-kit-includes > .mc-eyebrow { margin-bottom: 18px; }
.mc-kit-includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 700px) { .mc-kit-includes ul { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; } }
.mc-kit-includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--mc-ink);
}
.mc-kit-includes li svg { color: var(--mc-accent-deep); margin-top: 3px; flex-shrink: 0; }

/* Related kits section */
.mc-kit-related { margin-top: 72px; }
.mc-kit-related-head { text-align: center; margin-bottom: 32px; }
.mc-kit-related-head .mc-eyebrow { margin-bottom: 6px; }
.mc-kit-related-head .mc-h-display { margin: 0; font-size: 30px; }


/* ========================================================================
   PHASE 6 — Design Partners page
   ======================================================================== */

.mc-pp-page { font-family: var(--mc-sans); color: var(--mc-ink); background: var(--mc-paper); }

.mc-pp-hero { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.mc-pp-hero .mc-eyebrow { margin-bottom: 14px; }
.mc-pp-hero .mc-display { font-family: var(--mc-serif); font-weight: 400; font-size: clamp(40px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.01em; margin: 0 0 18px; }
.mc-pp-hero .mc-display em { font-style: italic; }
.mc-pp-hero .mc-display p { margin: 0; }
.mc-pp-lede { font-family: var(--mc-serif); font-style: italic; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: color-mix(in srgb, var(--mc-ink) 70%, transparent); margin: 0 auto; max-width: 620px; }
.mc-pp-lede p { margin: 0; }

/* Tabs */
.mc-pp-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 48px;
}
@media (max-width: 780px) { .mc-pp-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mc-pp-tabs { grid-template-columns: 1fr; } }

.mc-pp-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--mc-rule-soft);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: var(--mc-sans);
  text-align: left;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  position: relative;
}
.mc-pp-tab:hover { border-color: color-mix(in srgb, var(--mc-ink) 40%, transparent); transform: translateY(-1px); box-shadow: 0 6px 18px -12px rgba(0,0,0,.25); }
.mc-pp-tab.is-on { border-color: var(--mc-ink); box-shadow: 0 0 0 1px var(--mc-ink) inset; }
.mc-pp-tab:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 2px; }

.mc-pptab-chip {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.mc-pptab-text { display: flex; flex-direction: column; min-width: 0; }
.mc-pptab-name { font-weight: 500; font-size: 14px; color: var(--mc-ink); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-pptab-city { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--mc-ink) 55%, transparent); margin-top: 2px; }
.mc-pptab-star { position: absolute; top: 10px; right: 12px; font-size: 12px; color: var(--mc-accent-deep); }

/* Profile */
.mc-pp-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 0 0 72px;
  align-items: stretch;
}
@media (min-width: 900px) { .mc-pp-profile { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

.mc-ppp-portrait {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  min-height: 320px;
}
.mc-ppp-halo {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.35), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.mc-ppp-tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 18px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  padding: 12px 16px;
  border-radius: 10px;
}
.mc-ppp-tag .mc-eyebrow { margin-bottom: 4px; }
.mc-ppp-n { font-family: var(--mc-serif); font-style: italic; font-size: 16px; color: var(--mc-ink); }

.mc-ppp-text .mc-eyebrow { margin-bottom: 12px; }
.mc-ppp-text .mc-display-sm { font-family: var(--mc-serif); font-weight: 400; font-size: clamp(32px, 4.5vw, 48px); line-height: 1.04; margin: 0 0 20px; }
.mc-ppp-bio { font-size: 16px; line-height: 1.65; color: color-mix(in srgb, var(--mc-ink) 78%, transparent); margin: 0 0 28px; max-width: 52ch; }

.mc-ppp-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 20px 0;
  margin-bottom: 28px;
  border-top: 1px solid var(--mc-rule-soft);
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-ppp-meta > div { display: flex; flex-direction: column; gap: 4px; }
.mc-ppp-meta strong { font-family: var(--mc-serif); font-weight: 400; font-size: 22px; color: var(--mc-ink); }

/* Chapter */
.mc-pp-chapter { margin-bottom: 64px; }
.mc-pp-chead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mc-rule-soft);
  flex-wrap: wrap;
}
.mc-pp-chead .mc-eyebrow { margin-bottom: 6px; }
.mc-pp-chead .mc-h-display { font-family: var(--mc-serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; margin: 0; }
.mc-pp-chead .mc-h-display em { font-style: italic; color: color-mix(in srgb, var(--mc-ink) 65%, transparent); }

.mc-coll-palette--inline { display: flex; gap: 6px; }
.mc-coll-palette--inline .mc-coll-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* Apply outro */
.mc-pp-apply {
  margin-top: 72px;
  padding: 48px clamp(24px, 5vw, 72px);
  background: color-mix(in srgb, var(--mc-accent-deep) 6%, var(--mc-paper));
  border: 1px solid var(--mc-rule-soft);
  border-radius: 16px;
  text-align: center;
}
.mc-ppa-inner { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mc-ppa-inner .mc-h-display { font-family: var(--mc-serif); font-weight: 400; font-size: clamp(26px, 3.6vw, 36px); margin: 0; line-height: 1.08; }
.mc-ppa-inner p { font-size: 15px; line-height: 1.65; color: color-mix(in srgb, var(--mc-ink) 75%, transparent); margin: 0; max-width: 52ch; }

/* ========================================================================
   PHASE 6.1 — Portrait image/initials + designer filter banner
   ======================================================================== */

/* Portrait image overlay (covers the gradient when set) */
.mc-ppp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.mc-ppp-portrait .mc-ppp-halo { z-index: 2; }
.mc-ppp-portrait .mc-ppp-tag { z-index: 3; }

/* Initials placeholder (when no portrait image) */
.mc-ppp-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-serif);
  font-weight: 400;
  font-size: clamp(72px, 14vw, 140px);
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.55);
  text-shadow: 0 2px 14px rgba(0,0,0,.15);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Designer filter banner on kits pane */
.mc-ck-designer-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin: 0 0 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--mc-accent-deep) 8%, var(--mc-paper));
  border: 1px solid color-mix(in srgb, var(--mc-accent-deep) 20%, transparent);
  font-family: var(--mc-sans);
  font-size: 14px;
  color: var(--mc-ink);
}
.mc-ck-designer-banner[hidden] { display: none; }
.mc-ck-designer-banner strong {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
}
.mc-ck-designer-clear {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  font-family: var(--mc-sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: color-mix(in srgb, var(--mc-ink) 65%, transparent);
  border-radius: 6px;
  transition: background .16s ease, color .16s ease;
}
.mc-ck-designer-clear:hover { background: rgba(0,0,0,.05); color: var(--mc-ink); }
.mc-ck-designer-clear:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 2px; }

/* ============================================================
   Phase 7 — Kits ↔ Partners coherence
   ============================================================ */

/* Inline linked text: subtle underline, full-strength on hover */
.mc-link-text {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .16s ease;
}
.mc-link-text:hover,
.mc-link-text:focus-visible {
  text-decoration-color: currentColor;
}

/* Designer banner: profile link sits between label and clear button */
.mc-ck-designer-banner-text { flex: 0 0 auto; }
.mc-ck-designer-profile {
  flex: 0 0 auto;
  margin-left: 4px;
}
.mc-ck-designer-banner .mc-ck-designer-clear { margin-left: auto; }

/* Empty state when combined filters produce zero kits */
.mc-ck-empty-filtered {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  color: color-mix(in srgb, var(--mc-ink) 70%, transparent);
  text-align: center;
  padding-block: 28px;
  margin: 0;
}
.mc-ck-empty-filtered[hidden] { display: none; }
.mc-ck-reset {
  background: none;
  border: 1px solid color-mix(in srgb, var(--mc-ink) 30%, transparent);
  font-family: var(--mc-sans);
  font-size: 12px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mc-ink);
  padding: 6px 14px;
  margin-left: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.mc-ck-reset:hover { background: rgba(0,0,0,.05); border-color: var(--mc-ink); }
.mc-ck-reset:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 2px; }

/* Via ribbon profile chip */
.mc-kv-profile {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  vertical-align: middle;
}


/* =========================
   PHASE 8 — ATELIER / JOURNAL / KIT BUILDER
   ========================= */

/* --- Atelier page --- */
.mc-atelier-page { padding: 32px 0 100px; }
.mc-at-hero {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 80px var(--mc-pad) 60px;
  text-align: center;
}
.mc-at-hero .mc-eyebrow { display: block; margin-bottom: 32px; }
.mc-at-threes {
  max-width: var(--mc-max);
  margin: 60px auto;
  padding: 0 var(--mc-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.mc-three { display: flex; flex-direction: column; gap: 12px; }
.mc-three-n {
  font-family: var(--mc-serif);
  font-size: 64px;
  font-style: italic;
  color: var(--mc-accent-deep);
  font-weight: 300;
  line-height: 1;
}
.mc-three-visual {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 16px 0;
}
.mc-three-img { width: 100%; height: 100%; object-fit: cover; }
.mc-three h3 {
  font-family: var(--mc-serif);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
}
.mc-three p { color: var(--mc-ink-soft); line-height: 1.6; }
.mc-at-manifesto {
  max-width: 900px;
  margin: 100px auto;
  padding: 100px var(--mc-pad);
  text-align: center;
  background: var(--mc-paper-2);
}
.mc-at-manifesto .mc-eyebrow { display: block; margin-bottom: 32px; }
.mc-manifesto-text {
  font-family: var(--mc-serif);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--mc-ink);
}
.mc-manifesto-text em { font-style: italic; color: var(--mc-accent-deep); }
.mc-manifesto-sig {
  margin-top: 40px;
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink-mute);
}

/* --- Journal page --- */
.mc-journal-page { padding: 32px 0 100px; }
.mc-journal-page .mc-page-head {
  max-width: var(--mc-max);
  margin: 0 auto 40px;
  padding: 0 var(--mc-pad);
}
.mc-journal-feature {
  max-width: var(--mc-max);
  margin: 64px auto;
  padding: 0 var(--mc-pad);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.mc-jf-img { aspect-ratio: 5 / 4; }
.mc-jf-text .mc-eyebrow { display: block; margin-bottom: 16px; }
.mc-jf-text h2 { margin-bottom: 20px; }
.mc-jf-text p {
  font-family: var(--mc-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--mc-ink-soft);
  margin-bottom: 28px;
}
.mc-journal-page .mc-journal-grid {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 0 var(--mc-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mc-journal-card { display: block; text-decoration: none; color: inherit; }
.mc-j-image {
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
}
.mc-journal-card .mc-eyebrow { display: block; margin-bottom: 8px; }
.mc-journal-card h3 {
  font-family: var(--mc-serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 6px;
}
.mc-j-meta { font-size: 12px; color: var(--mc-ink-mute); }

/* --- Kit Builder --- */
.mc-kb-page { padding: 32px 0 100px; }
.mc-kb-page .mc-page-head {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 0 var(--mc-pad);
}
.mc-kb-page .mc-page-lede {
  max-width: 720px;
  margin-top: 16px;
  font-family: var(--mc-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--mc-ink-soft);
}
.mc-kb-layout {
  /* Phase 14c — preview-wrap is permanently hidden; layout is locked to a
     single form column. Phase 23 — widened from 720px → 864px (+20%) so
     the step-nav fits 5 tabs + Preview-kit CTA on one row, and form rows
     with side-by-side fields get a bit more breathing room. */
  max-width: 864px;
  margin: 48px auto 0;
  padding: 0 var(--mc-pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
/* Defence in depth — the preview-wrap markup carries the hidden HTML attr.
   Without this rule the .mc-kb-preview-wrap class would force display:flex
   and override hidden's UA default. */
.mc-kb-preview-wrap[hidden] { display: none !important; }
.mc-kb-form { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.mc-kb-steps {
  display: flex;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mc-rule);
}
.mc-kb-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--mc-rule);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-kb-step span {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mc-ink-fade);
}
.mc-kb-step--done {
  background: var(--mc-paper-2);
  color: var(--mc-ink);
  border-color: var(--mc-ink);
}
.mc-kb-step--done span { color: var(--mc-accent-deep); }

.mc-kb-block {
  padding: 28px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
}
.mc-kb-block h3 {
  font-family: var(--mc-serif);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 20px;
}
.mc-kb-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.mc-kb-block-head h3 { margin-bottom: 0; }
.mc-kb-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mc-kb-field { display: flex; flex-direction: column; gap: 6px; }
.mc-kb-field > span {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-kb-field input,
.mc-kb-field select {
  padding: 12px 14px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper-2);
  font: inherit;
  font-size: 14px;
  color: var(--mc-ink);
  outline: none;
  transition: border 0.2s;
}
.mc-kb-field input:focus,
.mc-kb-field select:focus { border-color: var(--mc-ink); }

.mc-kb-items { display: flex; flex-direction: column; gap: 10px; }
.mc-kb-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto 60px 24px;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--mc-paper-2);
  position: relative;
}
.mc-kbi-chip {
  width: 48px;
  height: 48px;
  border: 1px solid var(--mc-rule);
  cursor: pointer;
  transition: transform 0.2s;
}
.mc-kbi-chip:hover { transform: scale(1.05); }
.mc-kbi-name {
  font-family: var(--mc-serif);
  font-size: 17px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mc-kbi-name em {
  font-style: italic;
  color: var(--mc-ink-mute);
  font-size: 12px;
}
.mc-kbi-sub {
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-top: 2px;
}
.mc-kb-item select {
  padding: 8px 10px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  font: inherit;
  font-size: 12px;
}
.mc-kbi-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  padding: 2px;
  background: var(--mc-paper);
}
.mc-kbi-qty button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.mc-kbi-qty span {
  padding: 0 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mc-kbi-line {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 16px;
  text-align: right;
}
.mc-kbi-rm {
  color: var(--mc-ink-fade);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.mc-kbi-picker {
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  right: 12px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
  z-index: 10;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.2);
}
.mc-kbip-chip {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--mc-rule-soft);
  transition: transform 0.2s;
  cursor: pointer;
}
.mc-kbip-chip:hover { transform: scale(1.15); }
.mc-kbip-chip.is-on {
  outline: 1px solid var(--mc-ink);
  outline-offset: 2px;
}

.mc-kb-slug {
  display: flex;
  align-items: center;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper-2);
  padding: 10px 14px;
}
.mc-kb-slug span { color: var(--mc-ink-mute); font-size: 14px; }
.mc-kb-slug input {
  border: none;
  background: none;
  flex: 1;
  font: inherit;
  font-size: 14px;
  outline: none;
  color: var(--mc-ink);
  padding: 2px 0;
}
.mc-kb-link-box {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin: 14px 0;
}
.mc-kb-link-box code {
  flex: 1;
  background: var(--mc-ink);
  color: var(--mc-gold);
  padding: 14px 18px;
  font-family: var(--mc-mono);
  font-size: 13px;
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.mc-kb-link-box .mc-btn { flex-shrink: 0; }
.mc-kb-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mc-kb-share {
  padding: 8px 14px;
  border: 1px solid var(--mc-rule);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
  transition: all 0.2s;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.mc-kb-share:hover {
  background: var(--mc-ink);
  color: var(--mc-paper);
  border-color: var(--mc-ink);
}

.mc-kb-preview-wrap {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mc-kb-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mc-kb-preview {
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  overflow: hidden;
}
.mc-kbp-via {
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mc-kbp-via .mc-eyebrow { color: #A89C86; font-size: 9px; }
.mc-kbp-via strong {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
}
.mc-kbp-visual {
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--mc-paper-2) 80%, transparent);
}
.mc-kbp-body { padding: 20px; }
.mc-kbp-body .mc-eyebrow { display: block; margin-bottom: 6px; }
.mc-kbp-body h3 {
  font-family: var(--mc-serif);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 6px;
}
.mc-kbp-meta {
  font-size: 12px;
  color: var(--mc-ink-mute);
  margin-bottom: 14px;
}
.mc-kbp-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--mc-paper-2);
  margin-bottom: 14px;
}
.mc-kbp-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-family: var(--mc-serif);
}
.mc-kbp-line em {
  font-style: italic;
  color: var(--mc-ink-mute);
  font-size: 12px;
  margin-left: auto;
}
.mc-kbp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--mc-rule);
}
.mc-kbp-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.mc-kbp-was {
  text-decoration: line-through;
  color: var(--mc-ink-mute);
  font-size: 13px;
}
.mc-kbp-now {
  font-family: var(--mc-serif);
  font-size: 28px;
  font-style: italic;
}
.mc-kbp-pct {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-accent-2);
  font-weight: 600;
}

.mc-kb-earn {
  background: var(--mc-paper-2);
  padding: 20px;
  border: 1px solid var(--mc-rule);
}
.mc-kb-earn .mc-eyebrow { display: block; margin-bottom: 12px; }
.mc-kbe-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 14px;
}
.mc-kbe-row strong {
  font-family: var(--mc-serif);
  font-size: 22px;
  font-style: italic;
}
.mc-kbe-row--muted {
  color: var(--mc-ink-mute);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mc-kbe-foot {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mc-rule);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

.mc-kb-stats {
  max-width: var(--mc-max);
  margin: 48px auto 0;
  padding: 0 var(--mc-pad);
}
.mc-kbs-card {
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 48px;
}
.mc-kbs-card .mc-eyebrow {
  color: #A89C86;
  display: block;
  margin-bottom: 24px;
}
.mc-kbs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.mc-kbs-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-kbs-grid span {
  font-family: var(--mc-serif);
  font-size: 48px;
  font-weight: 300;
  color: var(--mc-gold);
  letter-spacing: -0.02em;
}
.mc-kbs-grid em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A89C86;
}

@media (max-width: 900px) {
  .mc-at-threes { grid-template-columns: 1fr 1fr; gap: 32px; }
  .mc-journal-feature { grid-template-columns: 1fr; gap: 40px; }
  .mc-journal-page .mc-journal-grid { grid-template-columns: 1fr 1fr; }
  .mc-kb-layout { grid-template-columns: 1fr; gap: 32px; }
  .mc-kbs-grid { grid-template-columns: 1fr 1fr; }
  .mc-kb-item { grid-template-columns: 48px 1fr 24px; grid-auto-rows: auto; }
  .mc-kb-item select,
  .mc-kbi-qty,
  .mc-kbi-line { grid-column: 2 / 3; }
  .mc-kbi-picker { grid-template-columns: repeat(7, 1fr); }
}

@media (max-width: 640px) {
  .mc-at-threes { grid-template-columns: 1fr; }
  .mc-journal-page .mc-journal-grid { grid-template-columns: 1fr; }
  .mc-kbs-grid { grid-template-columns: 1fr; gap: 24px; }
  .mc-at-manifesto { padding: 60px 20px; margin: 60px auto; }
  .mc-manifesto-text { font-size: 20px; }
  .mc-kb-grid-2 { grid-template-columns: 1fr; }

  /* Phase 23 — Kit-builder mobile responsive hardening.
     Root cause of the 375px horizontal-overflow was the size-picker grid
     forcing 7 columns and the qty-cells grid forcing 72px-min columns.
     Combined with inputs that don't shrink past min-content. Fixes:
       B-1 size-picker → 4-col wrap (last 3 sizes flow to row 2)
       B-2 qty-cells   → horizontal scroll with fade-mask, fixed 64px cells
       B-3 defensive min-width:0 on form containers + max-width:100% on inputs
       B-4 step-nav    → wrap CTA to its own row, full-width sticky button */
  .mc-kbi-picker {
    grid-template-columns: repeat(4, 1fr);
  }
  .mc-kb-qty-cells {
    overflow-x: auto;
    scrollbar-width: none;
    grid-auto-columns: 64px;
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .mc-kb-qty-cells::-webkit-scrollbar { display: none; }
  .mc-kb-form,
  .mc-kb-block,
  .mc-kb-grid-2 {
    min-width: 0;
  }
  .mc-kb-field input,
  .mc-kb-field select,
  .mc-kb-field textarea {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mc-kb-stepnav {
    flex-wrap: wrap;
    padding-bottom: 12px;
  }
  .mc-kb-page .mc-kb-stepnav__preview-cta {
    width: 100%;
    margin: 8px 0 0;
    flex-basis: 100%;
  }
}

/* Phase 8 — patches */
.mc-kb-note {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-top: 12px;
}
.mc-kbi-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mc-chapter-foot {
  max-width: var(--mc-max);
  margin: 32px auto 0;
  padding: 0 var(--mc-pad);
  display: flex;
  justify-content: flex-end;
}
.mc-ppa-kb { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; }

/* ===================================================== */
/* PHASE 9a — Kit Builder (5-step) + Kit Landing          */
/* ===================================================== */

/* -- Kit Builder: 5-step additions -- */
.mc-kb-page .mc-kb-steps { flex-wrap: wrap; gap: 6px; padding-bottom: 16px; }
.mc-kb-step--soon { opacity: 0.55; border-style: dashed; }
.mc-kb-step--soon em { font-style: italic; color: var(--mc-accent); font-size: 10px; margin-left: 4px; }
.mc-kb-block--soon { opacity: 0.65; background: var(--mc-paper-2); }
.mc-kb-block--soon h3 { color: var(--mc-ink-mute); }
.mc-kb-soon-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: var(--mc-accent);
  color: var(--mc-paper);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
}

.mc-kb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-kbp-chip {
  background: transparent;
  border: 1px solid var(--mc-rule);
  padding: 10px 18px;
  min-height: var(--mc-tap, 44px);
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  cursor: pointer;
  transition: all 0.15s;
}
.mc-kbp-chip:hover { border-color: var(--mc-ink); color: var(--mc-ink); }
.mc-kbp-chip:focus-visible {
  outline: 2px solid var(--mc-accent-deep);
  outline-offset: 2px;
  border-color: var(--mc-ink);
}
.mc-kbp-chip.is-on { background: var(--mc-ink); color: var(--mc-paper); border-color: var(--mc-ink); }
.mc-kbp-chip[disabled],
.mc-kbp-chip[aria-disabled="true"] { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .mc-kbp-chip { transition: none; } }

.mc-kb-sizes {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  margin: 8px 0 12px;
}
.mc-kb-size {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  font-family: var(--mc-serif);
  font-size: 14px;
  font-style: italic;
}
.mc-kb-size button {
  background: none; border: 0; cursor: pointer;
  color: var(--mc-ink-mute);
  padding: 0; margin-left: 2px;
  display: grid; place-items: center;
  font-size: 14px;
}
.mc-kb-size button:hover { color: var(--mc-ink); }
.mc-kb-size-add {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px dashed var(--mc-rule);
}
.mc-kb-size-add input {
  padding: 6px 10px; border: none;
  font-family: inherit; font-size: 13px;
  background: transparent; width: 110px;
  color: var(--mc-ink);
}
.mc-kb-size-add input:focus { outline: none; }
.mc-kb-size-add button {
  padding: 6px 12px; border: none;
  border-left: 1px dashed var(--mc-rule);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-kb-size-add button:hover:not(:disabled) { color: var(--mc-ink); background: var(--mc-paper-2); }
.mc-kb-size-add button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Yarn & roles — full slot rewrite */
.mc-kb-slot {
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule-soft);
  padding: 18px;
  position: relative;
  margin-bottom: 12px;
}
.mc-kb-slot-top { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: start; }
.mc-kbi-chip--lg { width: 56px; height: 56px; }
.mc-kb-slot-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.mc-kb-field--mini > span { font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mc-ink-mute); }
.mc-kb-field--mini input, .mc-kb-field--mini select { padding: 7px 10px; font-size: 13px; }
.mc-kb-field--check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 8px 10px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule-soft);
  margin-top: 2px;
}
.mc-kb-field--check > span { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--mc-ink); margin: 0; }
.mc-kb-field--check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--mc-ink); flex-shrink: 0; cursor: pointer; }

.mc-kb-slot-meta {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin: 14px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mc-rule-soft);
}
.mc-kb-slot-meta .mc-kbi-name { font-family: var(--mc-serif); font-size: 16px; font-style: italic; }
.mc-kb-slot-meta .mc-kbi-name em { font-style: normal; font-size: 11px; letter-spacing: 0.1em; color: var(--mc-ink-mute); margin-left: 6px; }
.mc-kb-slot-meta .mc-kbi-sub { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-ink-mute); }

/* Per-size qty grid (scrollable on narrow screens) */
.mc-kb-qty-grid {
  display: flex;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule-soft);
  overflow-x: auto;
}
.mc-kb-qty-cells {
  display: grid;
  grid-auto-columns: minmax(80px, 1fr);
  grid-auto-flow: column;
  flex: 1;
}
.mc-kb-qty-col {
  border-right: 1px solid var(--mc-rule-soft);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  min-width: 0;
}
.mc-kb-qty-col:last-child { border-right: none; }
.mc-kb-qty-col-h {
  font-family: var(--mc-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--mc-ink);
  padding: 2px 0 6px;
}
.mc-kb-qty-cell { display: flex; align-items: center; gap: 2px; }
.mc-kb-qty-cell button {
  width: 22px; height: 22px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--mc-ink-mute);
  padding: 0;
  font-size: 13px;
}
.mc-kb-qty-cell button:hover { background: var(--mc-ink); color: var(--mc-paper); border-color: var(--mc-ink); }
.mc-kb-qty-cell input {
  width: 34px;
  border: 1px solid var(--mc-rule-soft);
  padding: 3px 4px;
  text-align: center;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 14px;
  background: transparent;
}
.mc-kb-qty-cell input:focus { outline: none; border-color: var(--mc-ink); background: var(--mc-paper-2); }

/* Slug / link-copy */
.mc-kb-slug-hint {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--mc-ink-mute);
  margin-left: 6px;
}
.mc-kb-link-copy {
  display: flex; align-items: stretch;
  border: 1px solid var(--mc-ink);
  background: var(--mc-ink);
  margin-top: 12px;
}
.mc-kb-link-copy code {
  flex: 1;
  padding: 12px 14px;
  font-family: var(--mc-mono);
  font-size: 12px;
  color: var(--mc-gold);
  background: var(--mc-ink);
  word-break: break-all;
  min-width: 0;
  display: flex; align-items: center;
}
.mc-kb-link-copy button {
  padding: 0 18px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.15);
  color: var(--mc-paper);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.mc-kb-link-copy button:hover { background: rgba(255,255,255,0.08); }

/* Preview */
.mc-kbp-toggle {
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule-soft);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.mc-kbp-toggle > .mc-eyebrow { font-size: 9px; letter-spacing: 0.2em; display: block; margin-bottom: 6px; }
.mc-kbp-toggle select {
  padding: 5px 8px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  font: inherit;
  font-size: 13px;
  color: var(--mc-ink);
}
.mc-kbp-role {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-right: 4px;
}
.mc-kbp-skein {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: inset -4px -6px 12px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.1);
}

/* Size summary */
.mc-kb-sizes-summary { background: var(--mc-paper-2); border: 1px solid var(--mc-rule); padding: 16px; }
.mc-kb-sizes-summary .mc-eyebrow { display: block; margin-bottom: 10px; }
.mc-kbss-grid { display: flex; flex-direction: column; gap: 2px; }
.mc-kbss-head, .mc-kbss-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-kbss-head {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-kbss-row { font-family: var(--mc-serif); font-style: italic; }
.mc-kbss-row:last-child { border-bottom: none; }

/* Stats card — link-only variant for 9a */
.mc-kbs-lede {
  color: rgba(246, 234, 210, 0.75);
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 560px;
}

/* Drawer — slot-swap mode tweaks */
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdrawer-head h3 {
  text-transform: capitalize;
}
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdl-row .mc-cdl-add {
  /* In slot-swap mode, quick-add becomes "Pick" */
  background: var(--mc-paper-2);
}
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdl-row .mc-cdl-add::before {
  content: 'Pick';
}
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdl-row .mc-cdl-add svg,
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdl-row .mc-cdl-add > span,
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdl-row .mc-cdl-add > a {
  display: none;
}
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdl-row.is-current {
  background: var(--mc-paper-2);
}
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-cdl-row.is-current::after {
  content: 'Current';
  position: absolute;
  top: 10px; right: 12px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 2px 6px;
}
/* Hide quick-add in slot-swap mode (tile clicks emit pick events instead) */
.mc-cdrawer[data-mc-drawer-mode="slot-swap"] .mc-pg-qadd { display: none; }

/* -- Kit Landing (/pages/kit) -- */
.mc-kit-landing__inner {
  max-width: var(--mc-max);
  margin: 0 auto;
  padding: 0 var(--mc-pad);
}

.mc-kit-via {
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 14px var(--mc-pad);
  margin: 0 calc(var(--mc-pad) * -1) 0;
}
.mc-kv-inner {
  max-width: var(--mc-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.mc-kv-inner .mc-eyebrow { color: #A89C86; font-size: 9.5px; letter-spacing: 0.18em; }
.mc-kv-name {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  margin-top: 2px;
  color: var(--mc-paper);
}
.mc-kv-sep { width: 1px; height: 32px; background: #3A342A; }
.mc-kv-promise {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #D9CEB6;
}

.mc-kit-hero {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}
.mc-khero-visual {
  aspect-ratio: 5 / 6;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.mc-khero-halo {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3), transparent 60%);
}
.mc-khero-skeins {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.mc-khero-skein {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: inset -6px -8px 20px rgba(0,0,0,0.22), 0 6px 18px rgba(0,0,0,0.12);
}
.mc-khero-badge {
  position: absolute; top: 24px; left: 24px;
  color: var(--mc-paper);
  mix-blend-mode: difference;
}
.mc-khero-badge .mc-eyebrow { color: rgba(255,255,255,0.8); }
.mc-khero-n {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
}
.mc-khero-info { padding-top: 8px; }
.mc-khero-info .mc-eyebrow { display: block; margin-bottom: 14px; }
.mc-khero-info h1 { margin-bottom: 10px; }
.mc-khero-by {
  font-family: var(--mc-serif);
  font-size: 17px;
  color: var(--mc-ink-soft);
  margin-bottom: 24px;
}
.mc-khero-by em { font-style: italic; color: var(--mc-ink); }
.mc-inline-link {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink);
  text-decoration: underline;
  text-decoration-color: var(--mc-rule);
  text-underline-offset: 3px;
}

.mc-kpick {
  margin-bottom: 24px;
  padding: 16px;
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule-soft);
}
.mc-kpick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mc-kpick-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 6px;
}
.mc-kps {
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  padding: 12px 8px;
  min-height: var(--mc-tap, 44px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s;
  font-family: inherit;
  color: inherit;
}
.mc-kps:hover { border-color: var(--mc-ink); }
.mc-kps.is-on { background: var(--mc-ink); color: var(--mc-paper); border-color: var(--mc-ink); }
.mc-kps-name { font-family: var(--mc-serif); font-size: 18px; }
.mc-kps-sk {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.mc-khero-palette-box {
  background: var(--mc-paper-2);
  padding: 24px;
  margin-bottom: 24px;
}
.mc-khpb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}
.mc-khpb-sub-right {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  font-style: italic;
}
.mc-khpb-items { display: flex; flex-direction: column; gap: 0; }
.mc-khpb-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mc-rule-soft);
  text-align: left;
}
.mc-khpb-item:last-child { border-bottom: none; }
.mc-khpb-item--btn {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mc-rule-soft);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  width: 100%;
  transition: background 0.15s;
}
.mc-khpb-item--btn:hover { background: var(--mc-paper); }
.mc-khpb-item--btn.is-locked { cursor: default; opacity: 0.7; }
.mc-khpb-item--btn.is-locked:hover { background: transparent; }

.mc-khpb-chip {
  width: 52px; height: 52px;
  border: 1px solid var(--mc-rule);
  display: grid; place-items: center;
  position: relative;
}
.mc-khpb-chip em {
  font-style: normal;
  font-weight: 600;
  color: var(--mc-paper);
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.mc-khpb-chip--extra { background: var(--mc-paper); color: var(--mc-accent); }

.mc-khpb-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-khpb-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mc-khpb-role {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-khpb-changed { color: var(--mc-accent-2); font-weight: 500; }
.mc-khpb-name {
  font-family: var(--mc-serif);
  font-size: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mc-khpb-name em {
  font-style: italic;
  color: var(--mc-ink-mute);
  font-size: 13px;
}
.mc-khpb-sub {
  font-size: 11px;
  color: var(--mc-ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.mc-khpb-price {
  font-family: var(--mc-serif);
  font-size: 16px;
  font-style: italic;
  white-space: nowrap;
}
.mc-khpb-item--extra .mc-khpb-price { color: var(--mc-accent-2); }
.mc-khpb-swap {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-accent);
}
.mc-khpb-locked {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-fade);
}
.mc-khpb-oos {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-warn, #b54a3b);
}
.mc-khpb-item--btn.is-oos { opacity: 0.75; }

.mc-khero-price {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding-top: 8px;
}
.mc-khp-save {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.mc-khp-was {
  text-decoration: line-through;
  color: var(--mc-ink-mute);
  font-size: 13px;
}
.mc-khp-badge {
  background: var(--mc-accent);
  color: var(--mc-paper);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mc-khp-now {
  font-family: var(--mc-serif);
  font-size: 42px;
  font-style: italic;
  color: var(--mc-ink);
  line-height: 1;
}
.mc-khp-hint {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-top: 4px;
}

.mc-khero-promises {
  padding: 20px 0;
  border-top: 1px solid var(--mc-rule);
  border-bottom: 1px solid var(--mc-rule);
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mc-khero-promises > div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--mc-ink-soft);
}
.mc-khero-promises svg { color: var(--mc-accent-2); flex-shrink: 0; }

.mc-btn--lg { padding: 14px 24px; font-size: 14px; }
.mc-btn.is-added { background: var(--mc-accent-2); border-color: var(--mc-accent-2); }

@media (max-width: 1100px) {
  .mc-kit-hero { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .mc-kb-slot-fields { grid-template-columns: 1fr; }
  .mc-kb-qty-cells { grid-auto-columns: minmax(72px, 1fr); }
}
@media (max-width: 640px) {
  .mc-kpick-sizes { grid-template-columns: repeat(3, 1fr); }
  .mc-khpb-item { grid-template-columns: 44px 1fr auto; gap: 10px; }
  .mc-khpb-chip { width: 44px; height: 44px; }
  .mc-khp-now { font-size: 32px; }
  .mc-kv-inner { gap: 12px; }
  .mc-kv-sep { display: none; }
}


/* ──────────────────────────────────────────────────────────────
 * Phase 9b — Kit Builder colourway CRUD + Kit Landing
 * colourway picker, inline size-chart, sticky bar, Kit Includes,
 * "More from collection" grid. All classes use the mc- prefix.
 * ────────────────────────────────────────────────────────────── */

/* === Kit Builder · Step 4 (Colourway presets) ========================= */
.mc-kb-note--quiet { color: var(--mc-ink-fade); font-size: 12px; margin-top: 10px; font-style: italic; }

.mc-kb-cws {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.mc-kb-cw {
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-kb-cw.is-preview {
  border-color: var(--mc-ink);
  box-shadow: inset 0 0 0 1px var(--mc-ink);
}
.mc-kb-cw-top {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.mc-kb-cw-top-r {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-kb-cw-chips {
  display: flex;
  gap: 3px;
}
.mc-kb-cw-chip {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--mc-rule);
}
/* Colourway name input — matches the standard .mc-kb-field input/select
   styling (rectangle, solid border, paper-2 surface) so all writable
   inputs in the builder share a consistent visual rhythm. */
.mc-kb-cw-name {
  flex: 1;
  font: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper-2);
  color: var(--mc-ink);
  outline: none;
  transition: border 0.2s;
}
.mc-kb-cw-name:focus { border-color: var(--mc-ink); }
.mc-kb-cw-name-static {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--mc-ink);
  flex: 1;
}
.mc-kb-cw-preview {
  background: transparent;
  border: 1px solid var(--mc-rule);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--mc-ink-mute);
}
.mc-kb-cw.is-preview .mc-kb-cw-preview {
  border-color: var(--mc-ink);
  color: var(--mc-ink);
}
.mc-kb-cw-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.mc-kb-cw-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-kb-cw-role {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-kb-cw-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--mc-ink);
  transition: border-color 0.15s;
}
.mc-kb-cw-pick:hover:not([disabled]) { border-color: var(--mc-ink); }
.mc-kb-cw-pick[disabled] { cursor: not-allowed; opacity: 0.8; }
.mc-kb-cw-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--mc-rule);
  flex-shrink: 0;
}
.mc-kb-cw-swatch-name {
  flex: 1;
  font-size: 12.5px;
  color: var(--mc-ink-soft);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-kb-cw-swatch-name em { font-family: var(--mc-serif); font-style: italic; color: var(--mc-ink-mute); }
.mc-kb-cw-swatch-edit {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

/* === Kit Builder · Colourway preset tooltip (Phase 23) ================
   Mirrors the kit-landing "What's in the kit" hover tooltip. Hovering a
   colour swatch — either the small top chip or the per-slot pick button —
   shows the real product photo + colour name in a popover so partners can
   verify the actual yarn without leaving step 04.
   Pure CSS toggle via `.has-tip` + `.mc-kb-cw-tip`. */
.mc-kb-cw-chip,
.mc-kb-cw-pick { position: relative; }
.mc-kb-cw-tip {
  position: absolute;
  z-index: 30;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  padding: 6px 6px 8px;
  box-shadow: 0 12px 28px -10px rgba(26, 24, 20, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.mc-kb-cw-chip .mc-kb-cw-tip {
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  transform: translate(-50%, 4px);
}
.mc-kb-cw-pick .mc-kb-cw-tip {
  left: 0;
  bottom: 100%;
  margin-bottom: 8px;
}
.mc-kb-cw-chip.has-tip:hover .mc-kb-cw-tip,
.mc-kb-cw-chip.has-tip:focus-within .mc-kb-cw-tip,
.mc-kb-cw-pick.has-tip:hover .mc-kb-cw-tip,
.mc-kb-cw-pick.has-tip:focus-visible .mc-kb-cw-tip,
.mc-kb-cw-pick.has-tip:focus .mc-kb-cw-tip {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear;
}
.mc-kb-cw-chip.has-tip:hover .mc-kb-cw-tip,
.mc-kb-cw-chip.has-tip:focus-within .mc-kb-cw-tip {
  transform: translate(-50%, 0);
}
.mc-kb-cw-pick.has-tip:hover .mc-kb-cw-tip,
.mc-kb-cw-pick.has-tip:focus-visible .mc-kb-cw-tip,
.mc-kb-cw-pick.has-tip:focus .mc-kb-cw-tip {
  transform: translateY(0);
}
.mc-kb-cw-tip img {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: cover;
  background: var(--mc-paper-2);
}
.mc-kb-cw-tip-cap {
  display: block;
  margin-top: 6px;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mc-ink);
  text-align: center;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-kb-cw-tip-cap em {
  font-family: var(--mc-mono, ui-monospace, "SF Mono", monospace);
  font-style: normal;
  font-size: 11px;
  color: var(--mc-ink-soft);
  margin-left: 4px;
}
@media (max-width: 720px) {
  .mc-kb-cw-tip img { width: 140px; height: 140px; }
}

/* === Kit Landing · Size-chart toggle ================================= */
.mc-kpick-help {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.mc-kpick-help:hover { color: var(--mc-ink); }
.mc-kpick-chart {
  margin-top: 14px;
  border-top: 1px solid var(--mc-rule-soft);
  padding-top: 12px;
}
.mc-kpc-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  padding: 8px 4px;
  font-size: 13px;
  color: var(--mc-ink-soft);
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-kpc-row:last-child { border-bottom: none; }
.mc-kpc-row--head {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  padding: 4px 4px 8px;
}
.mc-kpc-row.is-on { background: var(--mc-paper-2); font-weight: 500; }

/* === Kit Landing · Colourway picker =================================== */
.mc-kcw-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-padding: 12px;
}
.mc-kcw-row::-webkit-scrollbar { height: 4px; }
.mc-kcw-row::-webkit-scrollbar-thumb { background: var(--mc-rule); border-radius: 2px; }
.mc-kcw {
  flex: 0 0 auto;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  padding: 10px 14px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 110px;
  font-family: inherit;
  color: var(--mc-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mc-kcw:hover { border-color: var(--mc-ink); }
.mc-kcw.is-on {
  border-color: var(--mc-ink);
  box-shadow: inset 0 0 0 1px var(--mc-ink);
}
.mc-kcw-chips {
  display: flex;
}
.mc-kcw-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--mc-paper);
  flex-shrink: 0;
}
.mc-kcw-chip + .mc-kcw-chip {
  margin-left: -8px;
}
.mc-kcw-name {
  font-size: 12px;
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink-soft);
  white-space: nowrap;
}
.mc-kcw--custom {
  border-style: dashed;
  cursor: default;
}

/* Hero "Your colourway" tag — top-right of the visual block */
.mc-khero-custom-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  z-index: 5;
}
.mc-khero-visual { position: relative; }

/* Escape / "build your own palette" link under the hero */
.mc-khero-alt {
  margin-top: 20px;
  text-align: center;
}

/* === Kit Landing · Kit Includes ======================================== */
.mc-kit-includes {
  margin-top: 64px;
  padding: 48px 32px;
  background: var(--mc-paper-2);
}
.mc-kit-includes .mc-eyebrow { display: block; margin-bottom: 16px; }
.mc-kit-includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  font-family: var(--mc-serif);
  font-size: 18px;
  color: var(--mc-ink-soft);
}
.mc-kit-includes li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-kit-includes svg { color: var(--mc-accent-2); flex-shrink: 0; }

/* === Kit Landing · More-from-collection ============================== */
.mc-kit-more {
  margin-top: 72px;
  padding: 0 0 40px;
}
.mc-kit-more__head { margin-bottom: 24px; }
.mc-kit-more__head .mc-h-display { margin: 6px 0 0; }
.mc-kit-more__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* === Kit Landing · Sticky bottom bar (floating pill) ==================
 * UX-7: stripped to the decision-moment essentials — 1–2 colour chips
 * for visual identity, kit name + size, price baked into the CTA. No
 * skein count, no "your mix" indicator, no qty badges on the chips.
 * ====================================================================== */
.mc-kit-sticky {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mc-paper);
  border: 1px solid var(--mc-ink);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  z-index: 40;
  max-width: min(720px, calc(100% - 32px));
  width: max-content;
  flex-wrap: nowrap;
}
.mc-kit-sticky[hidden] { display: none; }
.mc-ks-chips {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.mc-ks-chip {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--mc-rule);
}
.mc-ks-info {
  min-width: 0;
  flex: 1;
}
.mc-ks-name {
  font-size: 14px;
  color: var(--mc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-ks-name em {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink);
}
.mc-kit-sticky .mc-btn {
  padding: 10px 16px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: var(--mc-tap, 44px);
}

@media (max-width: 640px) {
  .mc-kit-sticky {
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    width: auto;
    gap: 8px;
    padding: 8px 12px;
  }
  .mc-ks-name { font-size: 13px; }
  .mc-kit-includes { padding: 32px 20px; }
  .mc-kit-includes ul { font-size: 16px; gap: 12px 24px; }
  .mc-kb-cw-slots { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
 * Phase 9b · fix pass (post-QA)
 *  - Stronger is-on row on the inline size chart
 *  - Per-size "Pattern fits" grid in the kit builder
 *  - Brighter hover state on dark CTAs (accent instead of accent-deep)
 * ────────────────────────────────────────────────────────────── */

/* 1) Size chart is-on — more visible than a flat paper-2 background. */
.mc-kpc-row.is-on {
  background: color-mix(in srgb, var(--mc-accent) 12%, var(--mc-paper-2));
  border-left: 3px solid var(--mc-accent);
  padding-left: 10px;
  color: var(--mc-ink);
  font-weight: 500;
}

/* 2) Builder · Pattern fits grid (step 02 optional block). */
.mc-kb-fits {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--mc-paper);
  border: 1px dashed var(--mc-rule);
}
.mc-kb-fits-head { margin-bottom: 10px; }
.mc-kb-fits-hint {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink-fade);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
.mc-kb-fits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.mc-kb-fits-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: center;
}
.mc-kb-fits-sz {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  text-align: right;
  padding-right: 4px;
}
.mc-kb-fits-row input {
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--mc-ink);
}
.mc-kb-fits-row input:focus { outline: none; border-color: var(--mc-ink); }

/* The is-added green feedback should stay green even while the button is hovered. */
.mc-btn.is-added,
.mc-btn.is-added:hover,
.mc-btn.is-added:focus-visible {
  background: var(--mc-accent-2);
  border-color: var(--mc-accent-2);
  color: var(--mc-paper);
}

/* ────────────────────────────────────────────────────────────── */
/* Phase 10 — public-builder cleanup + real skein imagery +        */
/* Pattern PDFs + QR panel + CTA contrast + partner commission +   */
/* shortlink fallback + hero photography overlay                   */
/* ────────────────────────────────────────────────────────────── */

/* CTA contrast on Preview-your-kit-link (idle state now legible). */
.mc-kb-share--cta {
  background: var(--mc-ink) !important;
  color: var(--mc-paper) !important;
  border-color: var(--mc-ink) !important;
}
.mc-kb-share--cta:hover,
.mc-kb-share--cta:focus-visible {
  background: var(--mc-accent) !important;
  border-color: var(--mc-accent) !important;
  color: var(--mc-paper) !important;
}

/* Quick-add sizes chip row (replaces Phase 9 preset row). */
.mc-kb-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mc-kb-quick-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-right: 6px;
}
.mc-kb-quick .mc-kbp-chip {
  padding: 10px 16px;
  min-height: var(--mc-tap, 44px);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.mc-kb-quick .mc-kbp-chip.is-on {
  background: var(--mc-ink);
  color: var(--mc-paper);
  border-color: var(--mc-ink);
}

/* Shortlink fallback — make "See all kits" CTA proportionate (was too large). */
.mc-shortlink-redirect .mc-kit-error .mc-btn {
  display: inline-flex;
  width: auto;
  padding: 10px 18px;
  font-size: 12px;
}

/* Pattern PDFs block (Step 01). */
.mc-kb-pdfs {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--mc-paper);
  border: 1px dashed var(--mc-rule);
}
.mc-kb-pdfs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mc-kb-pdfs-hint {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink-fade);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12px;
}
.mc-kb-pdfs-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.mc-kb-pdfs-row {
  display: grid;
  grid-template-columns: 90px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.mc-kb-pdfs-row select,
.mc-kb-pdfs-row input {
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--mc-ink);
}
.mc-kb-pdfs-row select:focus,
.mc-kb-pdfs-row input:focus { outline: none; border-color: var(--mc-ink); }

/* QR panel inside the builder's Share row. */
.mc-kb-qr-panel {
  margin-top: 12px;
  padding: 16px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.mc-kb-qr-panel[hidden] { display: none; }
.mc-kb-qr-svg {
  width: min(260px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.mc-kb-qr-svg svg { width: 100%; height: 100%; display: block; }

/* Slot chip / preview skein with a background image (Phase 10 real skeins). */
.mc-kbi-chip--lg.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--mc-rule);
}
.mc-kbp-skein.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Landing: skein images in hero + palette rows. */
.mc-khero-skein.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.mc-khpb-chip.has-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Pattern PDFs block on the landing (below Kit Includes). */
.mc-kit-pdfs {
  margin-top: 48px;
  padding: 32px 28px;
  background: var(--mc-paper);
  border-top: 1px solid var(--mc-rule);
  border-bottom: 1px solid var(--mc-rule);
}
.mc-kit-pdfs .mc-eyebrow { display: block; margin-bottom: 14px; }
.mc-kit-pdfs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mc-kit-pdf {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--mc-paper-2);
  border: 1px solid var(--mc-rule);
  color: var(--mc-ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.mc-kit-pdf:hover {
  border-color: var(--mc-ink);
  background: var(--mc-paper);
}
.mc-kit-pdf__lang {
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mc-kit-pdf__name {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
}
.mc-kit-pdf__dl {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

/* Shortlink redirect fallback copy. */
.mc-short-fallback {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink-mute);
  padding: 80px 20px;
  text-align: center;
}

/* Partner-commission section (moved from public builder). */
.mc-partner-commission__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.mc-partner-commission__solo {
  max-width: 560px;
  margin: 30px auto 0;
  padding: 36px 40px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  text-align: center;
}
.mc-partner-commission__solo .mc-eyebrow { display: block; margin-bottom: 10px; }
.mc-partner-commission__solo p {
  font-size: 14px;
  color: var(--mc-ink-soft);
  line-height: 1.6;
  margin: 0;
}
.mc-partner-commission__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.mc-partner-commission__card {
  padding: 28px 24px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  text-align: center;
}
.mc-partner-commission__card .mc-eyebrow { display: block; margin-bottom: 10px; }
.mc-partner-commission__big {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: var(--mc-ink);
  margin: 8px 0 14px;
}
.mc-partner-commission__card p {
  font-size: 13px;
  color: var(--mc-ink-soft);
  line-height: 1.55;
  margin: 0;
}
.mc-partner-commission__cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .mc-kb-pdfs-row { grid-template-columns: 72px 1fr 28px; }
  .mc-kit-pdfs { padding: 24px 18px; }
}

/* Partner-authorised banner (Phase 10 fix pass) — shown only when the builder
 * URL carries a valid ?partner=<handle> matching the designer metaobject. */
.mc-kb-partner-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--mc-ink);
  color: var(--mc-paper);
  margin-top: 4px;
}
.mc-kb-partner-field .mc-eyebrow {
  color: var(--mc-paper);
  opacity: 0.75;
  letter-spacing: 0.14em;
}
.mc-kb-partner-field strong {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
}
.mc-kb-partner-field[hidden] { display: none; }

/* ──────────────────────────────────────────────────────────────
 * Phase 10.1 · share-first step-05 layout
 * ────────────────────────────────────────────────────────────── */
.mc-kb-share-block h3 { margin-bottom: 6px; }

/* Step 05 restructure (2026-05-22): kit-link is PRIMARY (top), catalogue
   request is SECONDARY (below, divided). Replaces the old side-by-side
   .mc-kb-share-grid layout. */
.mc-kb-share-primary {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 28px;
  margin-top: 22px;
  align-items: start;
}

/* Right-column CTA stack (replaces the old "Copy the kit-link" accordion
   that exposed the full base64 URL as a wall of code). Preview + Copy
   live side-by-side here so designers reach the share-action in one
   glance. JS dependency: the hidden <code data-mc-kb-link> stays in
   DOM (visually hidden via .mc-kb-link-out--sr) so the copy/preview
   handlers can still read .textContent. */
.mc-kb-share-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.mc-kb-share-ctas__preview {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-kb-link-out--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mc-kb-slug-advanced {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mc-ink-mute);
}
.mc-kb-slug-advanced > summary {
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  transition: color 0.15s ease;
}
.mc-kb-slug-advanced > summary::-webkit-details-marker { display: none; }
.mc-kb-slug-advanced > summary:hover,
.mc-kb-slug-advanced[open] > summary { color: var(--mc-ink); }
.mc-kb-share-catalogue {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--mc-rule, rgba(26,24,20,0.08));
}
.mc-kb-share-catalogue-head { margin-bottom: 18px; }
.mc-kb-share-catalogue-h {
  margin: 0 0 6px;
  font-family: var(--mc-serif, Georgia, serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--mc-ink, #1A1814);
}
.mc-kb-share-catalogue .mc-kb-share-publish + .mc-kb-share-publish { margin-top: 18px; }
@media (max-width: 749px) {
  .mc-kb-share-primary { grid-template-columns: 1fr; gap: 18px; }
  .mc-kb-share-catalogue { margin-top: 36px; }
}

/* Legacy grid kept for backwards-compat; no longer rendered. */
.mc-kb-share-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 28px;
  margin-top: 18px;
  align-items: start;
}
.mc-kb-share-qr {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.mc-kb-qr-svg {
  width: 100%;
  aspect-ratio: 1;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mc-kb-qr-svg svg {
  width: 92%;
  height: 92%;
  display: block;
}
.mc-kb-qr-placeholder {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink-fade);
  font-size: 13px;
  padding: 0 16px;
  text-align: center;
}
.mc-kb-share-qr-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.mc-kb-share-secondary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-kb-share-secondary__body {
  font-size: 13px;
  color: var(--mc-ink-soft);
  line-height: 1.55;
  margin: 0 0 4px;
}
.mc-kb-share-secondary code {
  background: var(--mc-paper-2);
  padding: 1px 6px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--mc-ink);
}
.mc-kb-raw-link {
  margin-top: 20px;
  border-top: 1px dashed var(--mc-rule);
  padding-top: 14px;
}
.mc-kb-raw-link summary {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-bottom: 10px;
  list-style: none;
}
.mc-kb-raw-link summary::-webkit-details-marker { display: none; }
.mc-kb-raw-link summary::before { content: '▸ '; color: var(--mc-ink-fade); }
.mc-kb-raw-link[open] summary::before { content: '▾ '; }

/* Ensure preview skein dots are visible (fallback sizing for #6 regression). */
.mc-kbp-visual { min-height: 220px; }
.mc-kbp-skein {
  position: relative;
  display: inline-block;
}

@media (max-width: 780px) {
  .mc-kb-share-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
 * Phase 10.2 · preview skein fan + dark-CTA idle parity
 * ────────────────────────────────────────────────────────────── */
.mc-kbp-skein-fan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
}
.mc-kbp-skein-img,
.mc-kbp-skein-dot {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background-color: var(--mc-paper-2);
  margin-left: -28px;
  flex-shrink: 0;
}
.mc-kbp-skein-img:first-child,
.mc-kbp-skein-dot:first-child { margin-left: 0; }

/* Ensure dark-CTA anchors inherit the same idle paint as buttons
 * (some browsers show different default colour on <a> vs <button>). */
a.mc-btn,
a.mc-btn:link,
a.mc-btn:visited {
  color: inherit;
  text-decoration: none;
}
a.mc-btn--dark,
a.mc-btn--dark:link,
a.mc-btn--dark:visited {
  background: var(--mc-ink);
  color: var(--mc-paper);
  border-color: var(--mc-ink);
}
a.mc-btn--dark:hover,
a.mc-btn--dark:focus-visible {
  background: var(--mc-btn-hover);
  color: var(--mc-paper);
  border-color: var(--mc-btn-hover);
  transform: translateY(-1px);
}
a.mc-btn--ghost,
a.mc-btn--ghost:link,
a.mc-btn--ghost:visited {
  background: transparent;
  color: var(--mc-ink);
  border: 1px solid var(--mc-ink);
}
a.mc-btn--ghost:hover,
a.mc-btn--ghost:focus-visible {
  background: var(--mc-btn-hover);
  color: var(--mc-paper);
  border-color: var(--mc-btn-hover);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────
 * Phase 11 · kit builder UX polish (steps 01-03)
 *
 * - .mc-kb-hint replaces the old .mc-tip hover pattern with
 *   always-visible inline italic serif copy.
 * - .mc-kb-fits-fold collapses the optional Pattern Fits grid.
 * - .mc-kb-slot-hero redesigns the slot card with a yarn-photo strip.
 * - Native number-input spinners are hidden inside qty cells.
 * - Alternating .mc-kb-block backgrounds give the step stack rhythm.
 * ────────────────────────────────────────────────────────────── */

/* Inline helper copy under a label / heading. Calm + editorial. */
.mc-kb-hint {
  display: block;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: var(--mc-fs-hint);
  line-height: 1.5;
  color: var(--mc-ink-mute);
  margin-top: 6px;
}

/* ──────────────────────────────────────────────────────────────
 * Typography & touch-target upgrade — scoped to kit-builder + kit-landing.
 * Bumps body/label/button sizes per /ui-ux-pro-max readability rules
 * (≥16px body on mobile, 1.5–1.75 line-height, 44×44 touch targets,
 * visible focus rings) without affecting any other surface.
 * ────────────────────────────────────────────────────────────── */
.mc-kb-page,
.mc-kit-landing {
  font-size: var(--mc-fs-body);
  line-height: var(--mc-lh-body);
}
.mc-kb-page .mc-eyebrow,
.mc-kit-landing .mc-eyebrow {
  font-size: var(--mc-fs-eyebrow);
}
.mc-kb-page .mc-btn,
.mc-kit-landing .mc-btn {
  font-size: var(--mc-fs-button);
  min-height: var(--mc-tap);
}
.mc-kb-page input[type="text"],
.mc-kb-page input[type="url"],
.mc-kb-page input[type="number"],
.mc-kb-page input[type="search"],
.mc-kb-page select,
.mc-kb-page textarea {
  font-size: var(--mc-fs-input);
  min-height: var(--mc-tap);
}
.mc-kb-page label {
  font-size: var(--mc-fs-label);
}

/* Visible focus rings on every interactive element in the builder. */
.mc-kb-page button:focus-visible,
.mc-kb-page a:focus-visible,
.mc-kb-page input:focus-visible,
.mc-kb-page select:focus-visible,
.mc-kb-page textarea:focus-visible,
.mc-kit-landing button:focus-visible,
.mc-kit-landing a:focus-visible {
  outline: 2px solid var(--mc-accent-deep);
  outline-offset: 2px;
}

/* Inline-flex labels so the popover trigger sits next to the label text. */
.mc-kb-page label.mc-kb-label,
.mc-kb-page .mc-kb-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Step-block rhythm — subtle alternation so each step feels distinct. */
.mc-kb-form .mc-kb-block:nth-of-type(even) {
  background: var(--mc-paper-2);
}

/* Native spinner-hide on the qty number inputs (both WebKit + Firefox). */
.mc-kb-qty-cell input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.mc-kb-qty-cell input[type="number"]::-webkit-inner-spin-button,
.mc-kb-qty-cell input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Pattern Fits disclosure (Step 02). */
.mc-kb-fits-fold {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mc-rule-soft);
}
.mc-kb-fits-fold summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  padding: 2px 0;
}
.mc-kb-fits-fold summary::-webkit-details-marker { display: none; }
.mc-kb-fits-fold summary:hover,
.mc-kb-fits-fold summary:focus-visible { color: var(--mc-ink); outline: none; }
.mc-kb-fits-fold__caret {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 14px;
  line-height: 1;
  color: var(--mc-ink-mute);
}
.mc-kb-fits-fold[open] .mc-kb-fits-fold__caret { transform: rotate(180deg); }
.mc-kb-fits-fold .mc-kb-fits { margin-top: 12px; }

/* Slot card redesign (Step 03). Hero photo strip replaces the old left chip. */
.mc-kb-slot {
  position: relative;
  padding: 0 0 18px;
  overflow: hidden;
  background: transparent;
}
.mc-kb-slot .mc-kbi-rm {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(26,24,20,0.7);
  color: var(--mc-paper);
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.mc-kb-slot .mc-kbi-rm:hover { background: var(--mc-ink); }

.mc-kb-slot-hero {
  position: relative;
  display: block;
  width: 100%;
  height: 140px;
  padding: 0;
  margin: 0 0 10px;
  border: none;
  background: var(--mc-paper-3);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.mc-kb-slot-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.mc-kb-slot-hero:hover .mc-kb-slot-hero__img,
.mc-kb-slot-hero:focus-visible .mc-kb-slot-hero__img {
  transform: scale(1.03);
}
.mc-kb-slot-hero__pill {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  background: var(--mc-paper);
  color: var(--mc-ink);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.mc-kb-slot-hero__name {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
}
.mc-kb-slot-hero__num {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--mc-ink-mute);
}
.mc-kb-slot-hero__swap {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mc-paper);
  background: rgba(26,24,20,0.55);
  padding: 5px 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mc-kb-slot-hero:hover .mc-kb-slot-hero__swap,
.mc-kb-slot-hero:focus-visible .mc-kb-slot-hero__swap {
  opacity: 1;
  transform: translateY(0);
}

.mc-kb-slot-meta-row {
  padding: 0 16px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mc-ink-mute);
  text-transform: uppercase;
}

.mc-kb-slot-fields {
  padding: 14px 16px 4px;
}

.mc-kb-swap-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 16px 0;
  padding: 12px 0;
  border-top: 1px solid var(--mc-rule-soft);
  border-bottom: 1px solid var(--mc-rule-soft);
  cursor: pointer;
}
.mc-kb-swap-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.mc-kb-swap-row__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 13px;
  color: var(--mc-ink-soft);
}
.mc-kb-swap-row__text .mc-kb-hint { margin-top: 2px; }

/* Qty grid needs a sane horizontal padding now that fields are padded. */
.mc-kb-slot .mc-kb-qty-grid { padding: 16px; margin-top: 6px; }

@media (max-width: 640px) {
  .mc-kb-slot-hero { height: 120px; }
  .mc-kb-slot-hero__name { font-size: 16px; }
}

/* ──────────────────────────────────────────────────────────────
 * Phase 12 · sizes QA + Step 04/05 polish
 * ────────────────────────────────────────────────────────────── */

/* Qty grid — auto-fit responsive cards, no vertical dividers. */
.mc-kb-slot .mc-kb-qty-grid {
  padding: 18px 16px 4px;
  background: var(--mc-paper);
  border-top: 1px solid var(--mc-rule-soft);
  margin-top: 0;
  overflow: visible; /* let it wrap instead of scrolling */
}
.mc-kb-slot .mc-kb-qty-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 14px 10px;
}
.mc-kb-slot .mc-kb-qty-col {
  border-right: none;       /* drop vertical dividers */
  padding: 0;
  text-align: center;
}
.mc-kb-slot .mc-kb-qty-col-h {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mc-ink);
  margin-bottom: 6px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.mc-kb-slot .mc-kb-qty-cell {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.mc-kb-slot .mc-kb-qty-cell button {
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  color: var(--mc-ink-mute);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.mc-kb-slot .mc-kb-qty-cell button:hover {
  border-color: var(--mc-ink);
  color: var(--mc-ink);
  background: var(--mc-paper);
}
.mc-kb-slot .mc-kb-qty-cell input {
  height: 28px;
  padding: 0;
  text-align: center;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mc-ink);
  background: transparent;
  /* 2026-05-22 — hairline border so the input reads as editable even at rest.
     Previously transparent; designer feedback noted users couldn't see where
     to click. Quiet-luxury feel preserved via paper-on-paper + soft rule. */
  border: 1px solid var(--mc-rule-soft);
  border-radius: 3px;
  min-width: 0;
  width: 100%;
}
.mc-kb-slot .mc-kb-qty-cell input:focus {
  outline: none;
  border-color: var(--mc-rule);
  background: var(--mc-paper-2);
}

/* Colourway card — "Previewing" state accent border (Phase 12). */
.mc-kb-cw.is-preview {
  border-left: 3px solid var(--mc-accent-deep);
  padding-left: 13px; /* compensate for the 3-px border so inner content doesn't shift */
}
.mc-kb-cw-preview {
  font-family: var(--mc-serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
  background: transparent;
  border: none;
  padding: 4px 2px;
  color: var(--mc-ink-mute);
  cursor: pointer;
}
.mc-kb-cw.is-preview .mc-kb-cw-preview {
  color: var(--mc-accent-deep);
}

/* Respect user-entered casing on the slot-role label inside colourway cards. */
.mc-kb-cw-role {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 11px;
  color: var(--mc-ink-mute);
  font-family: var(--mc-serif);
  font-style: italic;
}

/* Bigger palette chips in colourway card header. */
.mc-kb-cw-chips { gap: 4px; }
.mc-kb-cw-chip { width: 26px; height: 26px; }

/* Step 05 — sentence-case section label replacing the former eyebrow. */
.mc-kb-share-secondary__label {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--mc-ink);
  margin-bottom: 6px;
}
.mc-kb-share-secondary__body code {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 12.5px;
}

/* ──────────────────────────────────────────────────────────────
 * Phase 13 · step-tab navigation (kit builder)
 *
 * One step visible at a time. Tabs above the form. Completion dot fills
 * when a step is touched. Preview column is unaffected.
 * ────────────────────────────────────────────────────────────── */

/* Phase 23 — step-nav redesign (single-row, terracotta-circle active state).
   5 tabs + Preview-kit CTA on a single row inside the 864px-wide kit-builder
   container. Active step shows the step number inside a solid terracotta
   circle (cream text inside) — strong wayfinding cue against the paper-on-
   paper editorial style. Visited steps dim to ink-soft; the CTA anchors the
   right edge via margin-left:auto. */
/* Stepnav container — pille-styling for each tab lives in mc-2026.css; here
   we own the container layout, num-cirkel, checkmark, and preview-CTA. */
.mc-kb-stepnav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0 0 18px;
  width: 100%;
  border-bottom: 1px solid var(--mc-rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.mc-kb-stepnav::-webkit-scrollbar { display: none; }

/* The old __state circle markup is retired — hide if present for legacy. */
.mc-kb-stepnav__state { display: none; }

/* Step number — small serif italic digit (upcoming default). Active +
   complete states are styled below. */
.mc-kb-stepnav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 2px;
  border-radius: 50%;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mc-ink-fade);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}

/* Complete (visited, not currently active): num is replaced by ✓ icon. We
   keep both DOM nodes — CSS toggles their visibility based on state class. */
.mc-kb-stepnav__check {
  /* `.m26-page svg { display: block }` (mc-2026.css) has higher specificity
     than this single-class rule, so we need !important to keep the check
     hidden by default. Same for the override below. */
  display: none !important;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.mc-kb-stepnav__tab.is-complete:not(.is-active) .mc-kb-stepnav__num { display: none; }
/* inline-block (not inline-flex) — gives SVG intrinsic sizing via width/height
   attributes; flex containers can collapse the SVG to width:0 in some browsers. */
.mc-kb-stepnav__tab.is-complete:not(.is-active) .mc-kb-stepnav__check { display: inline-block !important; }
.mc-kb-stepnav__tab.is-complete:not(.is-active) {
  /* Subtle accent ink so visited reads as "done", not "untouched". */
  color: var(--mc-accent-deep, var(--mc-ink));
}

/* Active step — paper cirkel around the number, inverting the dark pille
   colours so the digit pops as the strongest wayfinding anchor. */
.mc-kb-stepnav__tab.is-active .mc-kb-stepnav__num {
  background: var(--mc-paper);
  color: var(--mc-ink);
}

.mc-kb-stepnav__label {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Preview-kit CTA — pushed to the right edge of the same row, with a soft
   left-margin separator so it reads as a distinct secondary action. */
.mc-kb-stepnav__preview-cta {
  margin-left: auto;
  padding-left: 18px;
  position: relative;
}
.mc-kb-stepnav__preview-cta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--mc-rule);
}

/* Mobile — narrower gap, edge-to-edge horizontal scroll with fade mask. */
@media (max-width: 640px) {
  .mc-kb-stepnav {
    gap: 8px;
    margin: 0 -16px 20px;
    padding: 0 16px 14px;
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .mc-kb-stepnav__label { font-size: 10px; letter-spacing: 0.1em; }
  .mc-kb-stepnav__num { min-width: 20px; height: 20px; font-size: 12px; }
  .mc-kb-stepnav__preview-cta { padding-left: 12px; }
  .mc-kb-stepnav__preview-cta::before { display: none; }
}

/* Phase 14c — Preview-kit CTA in step-nav. Sits to the right of step-tabs,
   solid dark fill so it reads as the primary action regardless of which
   step is active. aria-disabled flattens it to grey when kit isn't ready.

   Specificity note: `.mc-root a { color: inherit }` (line ~XX) has the same
   class+element specificity (0,1,1) as our rule had originally (0,1,0), and
   was winning the cascade — leaving the CTA text the same dark ink as the
   background. Prefix all preview-cta rules with `.mc-root` to push them to
   (0,2,0) so `color: var(--mc-paper)` actually applies. */
/* The global `body a:not(...)` rule in mc-2026.css sets `color: var(--mc-ink) !important`
   on any anchor that doesn't carry m26-btn/mc-btn/etc. classes — our preview-CTA
   would inherit dark-on-dark text without an !important counter. */
.mc-kb-page .mc-kb-stepnav__preview-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 14px 22px;
  background: var(--mc-ink);
  color: var(--mc-paper) !important;
  border: 1px solid var(--mc-ink);
  text-decoration: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.mc-kb-page .mc-kb-stepnav__preview-cta:hover,
.mc-kb-page .mc-kb-stepnav__preview-cta:focus-visible { opacity: 0.85; outline: none; }
.mc-kb-page .mc-kb-stepnav__preview-cta[aria-disabled="true"] {
  background: transparent;
  color: var(--mc-ink-fade) !important;
  border-color: var(--mc-rule);
  pointer-events: none;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .mc-kb-page .mc-kb-stepnav__preview-cta { padding: 10px 14px; width: 100%; }
  .mc-kb-page .mc-kb-stepnav__preview-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* Phase 14c — Unified submit-errors panel. Replaces both the walk-in's
   wall-of-text status banner AND the designer's button-text-flash. Sits
   above the share-grid in Step 05; visible only when collectSubmitErrors()
   returns non-empty. Each row has a Jump-to-step button that switches the
   builder to the relevant step and focuses the offending field. */
.mc-kb-submit-errors {
  border: 1px solid var(--mc-accent-deep, #823722);
  background: var(--mc-paper);
  padding: 20px 22px;
  margin-bottom: 24px;
}
.mc-kb-submit-errors[hidden] { display: none; }
.mc-kb-submit-errors__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--mc-accent-deep, #823722);
}
.mc-kb-submit-errors__icon { flex: 0 0 auto; }
.mc-kb-submit-errors__title {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mc-ink);
}
.mc-kb-submit-errors__title span { font-style: normal; }
.mc-kb-submit-errors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mc-kb-submit-errors__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--mc-rule-soft);
}
.mc-kb-submit-errors__item:first-child { border-top: none; padding-top: 0; }
.mc-kb-submit-errors__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.mc-kb-submit-errors__label {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink);
}
.mc-kb-submit-errors__msg {
  font-size: 13px;
  color: var(--mc-ink-soft);
  line-height: 1.4;
}
.mc-kb-submit-errors__jump {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--mc-ink);
  color: var(--mc-ink);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.mc-kb-submit-errors__jump:hover,
.mc-kb-submit-errors__jump:focus-visible {
  background: var(--mc-ink);
  color: var(--mc-paper);
  outline: none;
}
@media (max-width: 640px) {
  .mc-kb-submit-errors__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .mc-kb-submit-errors__jump { align-self: flex-start; }
}

/* Empty-state hint — shown in sizes + slots containers when nothing has been added yet. */
.mc-kb-empty-hint {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--mc-ink-mute);
  text-align: center;
  padding: 24px 0 8px;
  margin: 0;
}

/* Step panels — hidden attribute is honoured by the browser; add a small
 * enter transition for polish on the newly-visible panel. */
.mc-kb-step-panel[hidden] { display: none; }
.mc-kb-step-panel { animation: mc-kb-step-fade 0.18s ease-out both; }
@keyframes mc-kb-step-fade {
  /* Phase 23 — transform removed. The original `translateY(4px → 0)` slide-up
     was visually nice but, combined with `animation-fill-mode: both`,
     persisted `transform: translateY(0)` on the panel after animation. That
     non-`none` transform makes the step-panel a containing block for any
     `position: fixed` descendants — including the mobile mc-help-popover —
     forcing them to be positioned relative to the panel instead of the
     viewport. We keep the opacity fade (still pleasant), drop the slide. */
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* When active step panel overflows viewport (Step 03 with many slots),
 * let the panel scroll naturally rather than forcing the whole page to grow.
 * The panel already stacks vertically; no extra constraint needed unless
 * we later decide to cap height. */

/* ─── Phase 17 ──────────────────────────────────────────────────────────
 * Conditional preview: on first load the preview column is hollow, so we
 * hide it until both a size and a slot are defined. The modifier class is
 * toggled from renderPreview(); we also keep a :has() fallback so the
 * grid collapses correctly even if JS sets only the [hidden] attribute.
 */
.mc-kb-layout.mc-kb-layout--solo,
.mc-kb-layout:has(.mc-kb-preview-wrap[hidden]) {
  grid-template-columns: 1fr;
  max-width: 864px;
}

/* Designer-program promo — shown once between Step 03 and Step 04 to
 * non-partner visitors. Dismissable; dismissal persists via localStorage. */
.mc-kb-promo {
  position: relative;
  margin: 32px 0;
  padding: 24px 48px 24px 24px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper-2);
  border-radius: 2px;
}
.mc-kb-promo[hidden] { display: none; }
.mc-kb-promo__lede {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mc-ink);
  margin: 8px 0 12px;
  max-width: 56ch;
}
.mc-kb-promo__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--mc-ink-mute);
  cursor: pointer;
}
.mc-kb-promo__close:hover { color: var(--mc-ink); }

/* ──────────────────────────────────────────────────────────────────────
   Phase 22.5 — Unified filter bar + dense swatch grid
   Used by: mc-color-drawer, mc-colours-page, mc-collection-page
   New tokens local to this block:
     --mc-warn used by low-stock dot
   ────────────────────────────────────────────────────────────────────── */

:root {
  --mc-warn: #C2702A;
}

/* ── Filter bar ──────────────────────────────────────────── */
.mc-fb {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mc-rule);
  background: var(--mc-paper);
}
.mc-fb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-fb-row--controls {
  justify-content: space-between;
  gap: 12px;
}
.mc-fb-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
  margin-right: 4px;
  flex-shrink: 0;
}
.mc-fb-chips {
  display: contents;
}
.mc-fb .mc-fb-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  background: var(--mc-paper);
  color: var(--mc-ink);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.mc-fb .mc-fb-chip:hover { border-color: var(--mc-ink-soft); }
.mc-fb .mc-fb-chip:focus-visible {
  outline: 2px solid var(--mc-accent-deep);
  outline-offset: 2px;
  border-color: var(--mc-ink);
}
.mc-fb .mc-fb-chip.is-on {
  background: var(--mc-ink);
  color: var(--mc-paper);
  border-color: var(--mc-ink);
}
.mc-fb-chip[disabled],
.mc-fb-chip[aria-disabled="true"] { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .mc-fb-chip { transition: none; } }

/* ── Family dot row ─────────────────────────────────────── */
.mc-fb-row--family {
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
}
button.mc-fb-dot {
  position: relative;
  display: flex;
  align-items: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--mc-dot);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.2s ease, height 0.2s ease, padding 0.2s ease;
  flex-shrink: 0;
  overflow: hidden;
  z-index: 1;
}
/* Whites dot: subtle inner border so it's visible against paper bg */
.mc-fb-dot[data-mc-family="whites"] {
  box-shadow: inset 0 0 0 1px var(--mc-rule);
}
/* Hover: expand dot into pill with label inside (same 20px height) */
.mc-fb-dot:hover,
.mc-fb-dot:focus-visible {
  width: auto;
  height: 20px;
  padding: 0 10px;
  z-index: 5;
}
/* Focus ring for keyboard nav */
.mc-fb-dot:focus-visible {
  outline: 2px solid var(--mc-accent-deep);
  outline-offset: 3px;
}
/* Active (selected) state: expand to pill + ink ring */
.mc-fb-dot.is-on {
  width: auto;
  height: 20px;
  padding: 0 10px;
  box-shadow: 0 0 0 2px var(--mc-paper), 0 0 0 4px var(--mc-ink);
}
.mc-fb-dot.is-on .mc-fb-dot-tip { display: inline; }
/* Whites dot active: keep inner border visible */
.mc-fb-dot.is-on[data-mc-family="whites"] {
  box-shadow: inset 0 0 0 1px var(--mc-rule), 0 0 0 2px var(--mc-paper), 0 0 0 4px var(--mc-ink);
}
/* Label inside dot — hidden by default */
.mc-fb-dot-tip {
  display: none;
  font-size: 10px;
  font-family: var(--mc-sans);
  color: var(--mc-paper);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.03em;
}
/* Dark families need light text; light families need dark text */
.mc-fb-dot[data-mc-family="whites"] .mc-fb-dot-tip,
.mc-fb-dot[data-mc-family="yellows"] .mc-fb-dot-tip,
.mc-fb-dot[data-mc-family="pinks"] .mc-fb-dot-tip {
  color: var(--mc-ink);
}
/* Show label on hover/focus */
.mc-fb-dot:hover .mc-fb-dot-tip,
.mc-fb-dot:focus-visible .mc-fb-dot-tip {
  display: inline;
}
/* Reset button (text-only, next to dots) */
button.mc-fb-dot-reset {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  font-family: var(--mc-sans);
  color: var(--mc-ink-soft);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
  margin-left: 4px;
}
button.mc-fb-dot-reset:hover { color: var(--mc-ink); }
button.mc-fb-dot-reset.is-hidden { display: none; }

@media (prefers-reduced-motion: reduce) { .mc-fb-dot { transition: none; } }

.mc-fb-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 180px;
  height: 34px;
  border: 1px solid rgba(26, 24, 20, 0.1);
  border-radius: 999px;
  background: rgba(237, 228, 210, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0 12px 0 34px;
  box-shadow:
    inset 0 1.5px 3px rgba(26, 24, 20, 0.06),
    0 0.5px 0 rgba(255, 255, 255, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.mc-fb-search:focus-within {
  border-color: rgba(26, 24, 20, 0.2);
  box-shadow:
    inset 0 1.5px 3px rgba(26, 24, 20, 0.06),
    0 0.5px 0 rgba(255, 255, 255, 0.5),
    0 0 0 3px rgba(26, 24, 20, 0.04);
  background: rgba(237, 228, 210, 0.8);
}
.mc-fb-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mc-ink-mute);
  pointer-events: none;
  transition: color 0.25s ease;
}
.mc-fb-search:focus-within svg {
  color: var(--mc-ink-soft);
}
.mc-fb-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--mc-sans);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--mc-ink);
  outline: none;
  height: 100%;
  padding: 0;
  caret-color: var(--mc-ink-soft);
}
.mc-fb-search input::placeholder {
  color: var(--mc-ink-mute);
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
.mc-fb-search input::-webkit-search-cancel-button { display: none; }

/* ── Expandable search (page tools row) ───────────────── */
.mc-fb-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.mc-fb-search-wrap--inline {
  margin-left: auto;
}
button.mc-fb-search-toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--mc-ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
button.mc-fb-search-toggle:hover {
  border-color: var(--mc-ink-soft);
  color: var(--mc-ink);
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(26, 24, 20, 0.08);
}
button.mc-fb-search-toggle:active {
  transform: scale(0.95);
}
/* Expandable search bar — hidden by default */
.mc-fb-search--expandable {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%) scaleX(0.3);
  transform-origin: right center;
  width: 260px;
  min-width: 0;
  flex: none;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.25s ease;
  overflow: hidden;
}
/* Open state */
.mc-fb-search-wrap.is-open .mc-fb-search-toggle {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.mc-fb-search-wrap.is-open .mc-fb-search--expandable {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .mc-fb-search--expandable {
    transition: none;
    transform: translateY(-50%);
  }
  .mc-fb-search-wrap.is-open .mc-fb-search--expandable {
    transform: translateY(-50%);
  }
  button.mc-fb-search-toggle {
    transition: none;
  }
  button.mc-fb-search-toggle:hover {
    transform: none;
  }
}
.mc-fb .mc-fb-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  background: var(--mc-paper);
  color: var(--mc-ink-soft);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.mc-fb-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mc-rule-soft);
  transition: background 120ms ease;
}
.mc-fb .mc-fb-stock.is-on {
  border-color: var(--mc-ink);
  color: var(--mc-ink);
}
.mc-fb .mc-fb-stock.is-on .mc-fb-stock-dot { background: #2C7A4B; }
.mc-fb .mc-fb-stock:hover { border-color: var(--mc-ink-soft); }

/* Sticky filter bar on collection + colours pages */
.mc-colours-page .mc-fb,
.mc-collection-page .mc-fb {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Page surface: two-column layout — chips left, view/sort right */
.mc-colours-page .mc-fb {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px 40px;
  padding: 32px var(--mc-pad);
  max-width: var(--mc-max);
  margin: 0 auto;
}
.mc-colours-page .mc-fb [data-mc-fb-row="yarn"]   { grid-column: 1; grid-row: 1; }
.mc-colours-page .mc-fb [data-mc-fb-row="family"]  { grid-column: 1; grid-row: 2; }
.mc-colours-page .mc-fb .mc-fb-row--tools          { grid-column: 2; grid-row: 1 / 3; align-self: start; }

/* ── View toggle + sort ──────────────────────────────────── */
.mc-fb-row--tools {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-end;
}
.mc-fb-view {
  display: flex;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  overflow: hidden;
}
.mc-fb .mc-fb-view-btn {
  padding: 7px 14px;
  font-family: inherit;
  font-size: 12px;
  border: none;
  background: transparent;
  color: var(--mc-ink-soft);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mc-fb .mc-fb-view-btn.is-on {
  background: var(--mc-ink);
  color: var(--mc-paper);
}
.mc-fb-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-fb-sort .mc-fb-label {
  margin-right: 0;
}
.mc-fb-sort select {
  padding: 7px 10px;
  border: 1px solid var(--mc-rule);
  border-radius: 999px;
  background: var(--mc-paper);
  font-family: inherit;
  font-size: 12px;
  color: var(--mc-ink);
  cursor: pointer;
}

/* ── Product grid ────────────────────────────────────────── */
.mc-pg {
  position: relative;
}
.mc-pg-yarn-pill {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--mc-serif, Georgia, serif);
  font-size: 13px;
  color: var(--mc-ink);
  background: rgba(244, 238, 226, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-pg-yarn-pill[hidden] { display: none; }
.mc-pg-yarn-pill__sep { color: var(--mc-ink-soft); }

.mc-pg-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px 24px;
}
.mc-pg-yarn-anchor {
  height: 0;
  overflow: hidden;
  grid-column: 1 / -1;
}

/* Grid view family section headers */
.mc-pg-fam-head {
  grid-column: 1 / -1;
  padding: 24px 0 8px;
  border-bottom: 1px solid var(--mc-rule);
  margin-bottom: 4px;
}
.mc-pg-fam-head:first-of-type { padding-top: 8px; }
.mc-pg-fam-title {
  font-family: var(--mc-serif, Georgia, serif);
  font-size: 16px;
  color: var(--mc-ink);
  font-weight: 400;
}
/* Hide family headers in library view */
[data-mc-view-active="library"] .mc-pg-fam-head { display: none; }

.mc-pg-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 120ms ease;
}
.mc-pg-tile:hover { transform: translateY(-1px); }
.mc-pg-tile--hidden { display: none !important; }

.mc-pg-tile-swatch {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  background: var(--mc-swatch, #D9D4CA);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Phase 23 — when the drawer body narrows to a single yarn base
   (`is-by-yarn` on .mc-cdrawer-body), show the real product photo as the
   swatch background instead of the hex chip. Hex stays as background-color
   fallback so tiles with no `--mc-swatch-img` still render. */
.mc-cdrawer-body.is-by-yarn .mc-pg-tile-swatch.has-img {
  background-image: var(--mc-swatch-img);
}
.mc-pg-tile-swatch::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mc-warn);
  display: none;
}
.mc-pg-tile[data-mc-low-stock="1"] .mc-pg-tile-swatch::after { display: block; }
.mc-pg-tile[data-mc-stock="0"] .mc-pg-tile-swatch {
  opacity: 0.45;
  background-image:
    linear-gradient(135deg,
      transparent calc(50% - 0.5px),
      rgba(0, 0, 0, 0.35) calc(50% - 0.5px),
      rgba(0, 0, 0, 0.35) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}

.mc-pg-tile-swatch--clib {
  position: relative;
  overflow: hidden;
  background: var(--mc-swatch, #D9D4CA);
  transition: transform 0.3s;
}
.mc-pg-tile:hover .mc-pg-tile-swatch--clib,
.mc-pg-tile:focus-visible .mc-pg-tile-swatch--clib {
  transform: scale(1.02);
}
.mc-pg-clib-hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.mc-pg-tile:hover .mc-pg-clib-hover,
.mc-pg-tile:focus-visible .mc-pg-clib-hover {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mc-pg-tile-swatch--clib { transition: none; transform: none !important; }
  .mc-pg-clib-hover { transition: opacity 150ms ease-out; }
}

.mc-pg-name {
  display: block;
  font-family: var(--mc-serif, Georgia, serif);
  font-size: 12px;
  line-height: 1.25;
  text-transform: none;
  color: var(--mc-ink);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-pg-num {
  display: block;
  font-size: 10px;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  color: var(--mc-ink-soft);
  margin-top: 2px;
}

/* ── Library view ───────────────────────────────────────── */
.mc-pg-library {
  max-width: var(--mc-max, 1260px);
  margin: 0 auto;
  padding: 48px var(--mc-pad, 24px);
}
.mc-lib-section {
  margin-bottom: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--mc-rule-soft);
}
.mc-lib-section:last-child { border-bottom: none; margin-bottom: 0; }
.mc-lib-section[hidden] { display: none; }
.mc-lib-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
.mc-lib-title {
  font-family: var(--mc-serif, Georgia, serif);
  font-weight: 300;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.mc-lib-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.mc-lib-card {
  text-align: left;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}
.mc-lib-card--hidden { display: none !important; }
div.mc-lib-swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: var(--mc-swatch, #D9D4CA);
  margin-bottom: 10px;
  transition: transform 0.3s;
}
.mc-lib-card:hover .mc-lib-swatch { transform: scale(1.02); }
.mc-lib-hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.1;
  transition: opacity 0.3s;
  pointer-events: none;
}
.mc-lib-card:hover .mc-lib-hover { opacity: 1; }
.mc-lib-name {
  font-family: var(--mc-serif, Georgia, serif);
  font-size: 18px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mc-lib-name em {
  font-style: italic;
  color: var(--mc-ink-soft);
  font-size: 12px;
}
.mc-lib-bases {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
  margin-top: 3px;
}

/* ── Yarn photo: full image, slight zoom on hover ── */
.mc-lib-yarn-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  outline: 0;
  z-index: 1;
  pointer-events: none;

  transform: scale(1);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-lib-card:hover .mc-lib-yarn-img,
.mc-lib-card:focus-within .mc-lib-yarn-img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .mc-lib-yarn-img,
  .mc-lib-card:hover .mc-lib-yarn-img,
  .mc-lib-card:focus-within .mc-lib-yarn-img {
    transform: none;
    transition: none;
  }
}
.mc-lib-bases-link {
  cursor: pointer;
}
.mc-lib-bases-link:hover {
  text-decoration: underline;
}
.mc-lib-bases-bold {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .mc-lib-swatch { transition: none; transform: none !important; }
  .mc-lib-hover { transition: opacity 150ms ease-out; }
}

/* ── View switching ─────────────────────────────────────── */
.mc-pg[data-mc-view-active="library"] > .mc-pg-grid,
.mc-pg[data-mc-view-active="library"] > .mc-pg-yarn-pill { display: none; }
.mc-pg[data-mc-view-active="grid"] > .mc-pg-library { display: none; }
.mc-pg.is-empty .mc-pg-library { display: none; }

/* ── Empty state ─────────────────────────────────────────── */
.mc-pg-empty {
  text-align: center;
  padding: 60px 20px 80px;
  font-family: var(--mc-serif, Georgia, serif);
  color: var(--mc-ink);
}
.mc-pg-empty[hidden] { display: none; }
.mc-pg-empty-line {
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 14px;
}
.mc-pg-empty-line [data-mc-empty-summary] {
  font-style: italic;
  color: var(--mc-ink-soft);
}
.mc-pg-empty-clear {
  font-family: var(--mc-serif, Georgia, serif);
  font-style: italic;
  font-size: 14px;
  background: none;
  border: none;
  color: var(--mc-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.mc-pg-empty-clear:hover { color: var(--mc-ink-soft); }
.mc-pg.is-empty .mc-pg-grid { display: none; }
.mc-pg.is-empty .mc-pg-yarn-pill { display: none; }

/* ── Mobile reveal-bar ───────────────────────────────────── */
.mc-pg-reveal-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--mc-paper);
  border-top: 1px solid var(--mc-rule-soft);
  font-family: var(--mc-serif, Georgia, serif);
  transform: translateY(100%);
  transition: transform 220ms ease;
}
.mc-pg-reveal-bar.is-on {
  transform: translateY(0);
}
.mc-pg-reveal-swatch {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  background: var(--mc-paper-2);
}
.mc-pg-reveal-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mc-pg-reveal-name {
  font-size: 14px;
  color: var(--mc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-pg-reveal-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--mc-ink-soft);
  white-space: nowrap;
}
.mc-pg-reveal-meta span:empty { display: none; }
.mc-pg-reveal-hint {
  font-size: 10px;
  font-style: italic;
  color: var(--mc-ink-soft);
  flex-shrink: 0;
}

/* In drawer scope, reveal-bar is absolute (relative to drawer) */
.mc-cdrawer .mc-pg-reveal-bar {
  position: absolute;
}

/* ── Drawer override: 6 cols regardless of viewport ──────── */
.mc-cdrawer .mc-pg-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* ── Quick-add-to-cart ────────────────────────────────────── */

/* Tile as div (not anchor) */
.mc-pg-tile, .mc-lib-card { position: relative; cursor: pointer; }
.mc-pg-tile-link, .mc-lib-card-link {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  pointer-events: none;
}

/* Focus ring (a11y) */
.mc-pg-tile:focus-visible, .mc-lib-card:focus-visible {
  outline: 2px solid var(--mc-ink); outline-offset: 2px; border-radius: 2px;
}

/* Quick-add: Grid tile "+" (button.class beats .mc-root button reset) */
button.mc-pg-qadd {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mc-ink); border: none; color: var(--mc-paper);
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.2s, background 0.15s;
  cursor: pointer; z-index: 3;
}
button.mc-pg-qadd::before {
  content: ''; position: absolute; inset: -10px;
}
.mc-pg-tile:hover button.mc-pg-qadd,
button.mc-pg-qadd:focus-visible { opacity: 1; }
button.mc-pg-qadd:hover { background: var(--mc-btn-hover); }
button.mc-pg-qadd svg { width: 12px; height: 12px; stroke: var(--mc-paper); }

/* Quick-add: Library card "+" (identical to grid, top-right) */
button.mc-lib-qadd {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mc-ink); border: none; color: var(--mc-paper);
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.2s, background 0.15s;
  cursor: pointer; z-index: 5;
}
button.mc-lib-qadd::before {
  content: ''; position: absolute; inset: -10px;
}
.mc-lib-card:hover button.mc-lib-qadd,
button.mc-lib-qadd:focus-visible { opacity: 1; }
button.mc-lib-qadd:hover { background: var(--mc-btn-hover); }
button.mc-lib-qadd svg { width: 12px; height: 12px; stroke: var(--mc-paper); }

/* Quick-add states */
.mc-qadd--loading { pointer-events: none; opacity: 0.6; }

/* Default: hide checkmark + text (button.class svg.class = 0,2,1 beats any svg rule) */
button.mc-pg-qadd .mc-qadd-icon--check,
button.mc-lib-qadd .mc-qadd-icon--check,
button.mc-pg-reveal-add .mc-qadd-icon--check { display: none; }
.mc-qadd-text { display: none; }

/* Added state: morph circle → pill */
.mc-qadd--added {
  background: #2d8a4e !important;
  width: auto !important; height: auto !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  gap: 4px;
  display: flex !important; align-items: center;
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer;
}
.mc-qadd--added .mc-qadd-icon--plus { display: none; }
.mc-qadd--added .mc-qadd-icon--check { display: block; width: 12px; height: 12px; stroke: var(--mc-paper); flex-shrink: 0; }
.mc-qadd--added .mc-qadd-text {
  display: inline;
  font-size: 10px; font-family: var(--mc-sans);
  color: var(--mc-paper); white-space: nowrap;
  letter-spacing: 0.03em;
}
.mc-qadd--added:hover { background: #247a40 !important; }

/* Mobile reveal bar add button (button.class beats .mc-root button reset) */
button.mc-pg-reveal-add {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--mc-ink); border: none; color: var(--mc-paper);
  display: grid; place-items: center;
  cursor: pointer; margin-left: auto;
}
button.mc-pg-reveal-add svg { width: 14px; height: 14px; stroke: var(--mc-paper); }
button.mc-pg-reveal-add:active { transform: scale(0.9); }
/* Reveal bar added state: morph to pill */
button.mc-pg-reveal-add.mc-qadd--added {
  width: auto; height: auto;
  padding: 6px 12px; border-radius: 999px;
}

/* ── Base-picker (design-spell stack) ─────────────────────────── */
.mc-qadd-picker {
  position: absolute;
  top: 40px;
  right: 8px;
  width: 220px;
  z-index: 20;
  padding: 6px;
  border-radius: 12px;
  background: rgba(244, 238, 226, 0.92);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(26, 24, 20, 0.08);
  box-shadow:
    0 12px 32px -8px rgba(26, 24, 20, 0.18),
    0 2px 6px rgba(26, 24, 20, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 1px;
  transform-origin: top right;
  animation: mc-qadd-picker-in 260ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* Anchor arrow pointing to "+" button */
.mc-qadd-picker::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 12px;
  width: 10px;
  height: 10px;
  background: rgba(244, 238, 226, 0.92);
  border-left: 1px solid rgba(26, 24, 20, 0.08);
  border-top: 1px solid rgba(26, 24, 20, 0.08);
  transform: rotate(45deg);
}

@keyframes mc-qadd-picker-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.mc-pg-reveal-bar .mc-qadd-picker {
  top: auto;
  bottom: calc(100% + 12px);
  right: 0;
  transform-origin: bottom right;
}
.mc-pg-reveal-bar .mc-qadd-picker::before {
  top: auto;
  bottom: -5px;
  border-left: none;
  border-top: none;
  border-right: 1px solid rgba(26, 24, 20, 0.08);
  border-bottom: 1px solid rgba(26, 24, 20, 0.08);
}

button.mc-qadd-picker-opt {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--mc-sans);
  font-size: 12px;
  text-align: left;
  color: var(--mc-ink);
  overflow: hidden;
  opacity: 0;
  transform: translateX(8px);
  animation: mc-qadd-opt-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--stagger, 0ms);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background 180ms ease;
}

@keyframes mc-qadd-opt-in {
  to { opacity: 1; transform: translateX(0); }
}

/* Magnetic hover: slide right + accent bar */
button.mc-qadd-picker-opt:not(.is-oos):hover,
button.mc-qadd-picker-opt:not(.is-oos):focus-visible {
  transform: translateX(3px);
  background: rgba(26, 24, 20, 0.04);
}

/* Left accent bar — grows on hover */
button.mc-qadd-picker-opt::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--mc-swatch, var(--mc-ink));
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height 220ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
button.mc-qadd-picker-opt:not(.is-oos):hover::before,
button.mc-qadd-picker-opt:not(.is-oos):focus-visible::before {
  height: 60%;
}

.mc-qadd-picker-name {
  flex: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.mc-qadd-picker-price {
  flex: 0 0 auto;
  color: var(--mc-ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

/* Sold out: diagonal stripe overlay + italic price */
button.mc-qadd-picker-opt.is-oos {
  cursor: not-allowed;
  color: var(--mc-ink-mute);
}
button.mc-qadd-picker-opt.is-oos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 6px,
    rgba(26, 24, 20, 0.04) 6px,
    rgba(26, 24, 20, 0.04) 7px
  );
  pointer-events: none;
  border-radius: inherit;
}
button.mc-qadd-picker-opt.is-oos .mc-qadd-picker-price {
  font-style: italic;
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .mc-qadd-picker {
    animation: none;
  }
  button.mc-qadd-picker-opt {
    animation: none;
    opacity: 1;
    transform: none;
  }
  button.mc-qadd-picker-opt:not(.is-oos):hover,
  button.mc-qadd-picker-opt:not(.is-oos):focus-visible {
    transform: none;
  }
}

/* Sold-out treatment */
.mc-pg-tile--oos { opacity: 0.5; }
.mc-pg-tile--oos::after {
  content: 'Sold out'; position: absolute; top: 4px; left: 4px;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  font-family: var(--mc-sans);
  background: var(--mc-paper); border: 1px solid var(--mc-rule);
  padding: 2px 5px; border-radius: 3px; color: var(--mc-ink-mute);
  z-index: 1;
}
.mc-lib-card--oos .mc-lib-swatch { opacity: 0.5; }

/* Sticky family headers */
.mc-lib-head {
  position: sticky; top: 0;
  background: var(--mc-paper); z-index: 2;
  padding-top: 8px; padding-bottom: 8px;
}

/* ── Breakpoints ─────────────────────────────────────────── */
@media (max-width: 1023px) and (min-width: 600px) {
  .mc-pg-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mc-lib-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 599px) {
  .mc-pg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px 24px;
  }
  .mc-pg-name,
  .mc-pg-num { display: none; }
  .mc-pg-reveal-bar { display: flex; }
  body.mc-pg-has-armed { padding-bottom: 64px; }
  /* On the drawer at phone width, the override above forces 6 cols —
     undo it so phone drawer also drops to 4 cols. */
  .mc-cdrawer .mc-pg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Filter bar: more compact on phone */
  .mc-fb { padding: 10px 12px; gap: 8px; }
  .mc-colours-page .mc-fb { display: flex; flex-direction: column; padding: 12px var(--mc-pad); }
  .mc-fb-label { display: none; }
  .mc-fb .mc-fb-chip { padding: 5px 10px; font-size: 11px; }
  .mc-fb .mc-fb-stock { padding: 5px 10px; font-size: 11px; }
  .mc-lib-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mc-lib-name { font-size: 14px; }
  .mc-lib-head { flex-direction: column; gap: 8px; }
  .mc-fb-row--tools { justify-content: flex-start; }
}

/* =========================
   KIT CARDS
   ========================= */
.mc-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.mc-kit-card {
  position: relative;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule-soft);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.mc-kit-card:hover { transform: translateY(-3px); border-color: var(--mc-rule); box-shadow: 0 14px 32px -18px rgba(26,24,20,0.22); }
.mc-kit-card[hidden] { display: none !important; }
.mc-kit-card__link { display: block; text-decoration: none; color: inherit; }
.mc-kit-card__link:focus-visible { outline: 2px solid var(--mc-accent-deep); outline-offset: 3px; border-radius: 18px; }
.mc-kit-card__hero {
  aspect-ratio: 4 / 5;
  width: 100%;
  background-color: var(--mc-paper-2);
  background-image: linear-gradient(160deg, #d8c9a8, #a8987e);
  background-size: cover;
  background-position: center;
}
.mc-kit-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--mc-ink);
  color: var(--mc-paper);
  font-family: var(--mc-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 5px 11px;
  border-radius: 999px;
  z-index: 1;
}
.mc-kit-card__body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.mc-kit-card__eye { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 10.5px; }
.mc-kit-card__title { font-family: var(--mc-serif); font-size: 22px; font-style: italic; margin: 6px 0 0; line-height: 1.22; color: var(--mc-ink); }
.mc-kit-card__by { font-family: var(--mc-serif); font-size: 14px; font-style: italic; color: var(--mc-ink-mute); margin: 2px 0 4px; }
.mc-kit-card__swatches { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.mc-kit-card__sw {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--mc-rule-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.mc-kit-card__sw-more { font-family: var(--mc-sans); font-size: 11px; color: var(--mc-ink-mute); letter-spacing: 0.05em; }
.mc-kit-card__cta { margin-top: 10px; font-size: 11px; letter-spacing: 0.18em; display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) {
  .mc-kit-card { transition: none; }
  .mc-kit-card:hover { transform: none; }
}
@media (max-width: 600px) {
  .mc-kit-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .mc-kit-card__title { font-size: 17px; }
}

/* ============================================================== *
 * Kit Landing · Skein Stack hi-fi (Claude Design 2026-05-11)
 *
 * Left-column overhaul that splits the legacy `.mc-khero-visual`
 * (single gradient + overlapping skein chips) into two clearly
 * separated blocks:
 *   A. `.mc-khero-blocka`  — finished-object photo (sweater/scarf
 *      on model / flat-lay), driven by spec.heroPhotoUrl.
 *   B. `.mc-khero-blockb`  — `.mc-khero-stack` of CSS-painted skeins
 *      tinted by per-slot `--c`, with museum-card callouts in the
 *      margins. Re-renders on colourway swap (live-reactive).
 *
 * The legacy `.mc-khero-visual / .mc-khero-skeins / .mc-khero-badge`
 * rules above remain — they still drive `sections/mc-kit-page.liquid`
 * (the deprecated operator-configured kit page). Nothing here
 * overrides them.
 * ============================================================== */

.mc-khero-leftcol {
  display: flex;
  flex-direction: column;
  background: var(--mc-paper);
}

/* Top colourway tag — current state mirrored above Block A so the
   user sees *which* colourway the visuals reflect. */
.mc-khero-colourway-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--mc-rule);
  margin-bottom: 18px;
  gap: 16px;
}
.mc-khct-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mc-khct-chips {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.mc-khct-chips span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(26, 24, 20, 0.18);
}
.mc-khct-name {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  margin: 0;
  color: var(--mc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mc-khct-right {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  white-space: nowrap;
}
.mc-khct-right em {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-ink);
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
}

/* Block A — finished-object photo. The `style` attribute supplies the
   background (image + gradient blend OR gradient-only) via
   MC_KIT_FMT.heroBackgroundStyle, so the rule here only handles
   structure, overlays, and the in-photo eyebrow + title. */
.mc-khero-blocka {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
}
.mc-khero-blocka-vig {
  display: block; /* override `div:empty { display: none }` from base.css */
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(26,24,20,0.40) 100%),
    radial-gradient(circle at 50% 30%, transparent 50%, rgba(26,24,20,0.18) 100%);
  pointer-events: none;
}
.mc-khero-blocka-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  color: var(--mc-paper);
  z-index: 2;
}
.mc-khero-blocka-tag .mc-eyebrow {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
}
.mc-khero-blocka-h {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--mc-paper);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  max-width: 260px;
  margin: 0;
}
.mc-khero-blocka-foot {
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 2;
  color: var(--mc-paper);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.mc-khero-blocka-foot em {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.mc-khero-blocka-foot a.mc-khero-pattern-link {
  font-family: var(--mc-serif);
  font-style: italic;
  color: var(--mc-paper);
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A · B divider rule */
.mc-khero-ab-rule {
  margin: 18px 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--mc-ink-mute);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.mc-khero-ab-rule::before,
.mc-khero-ab-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mc-rule);
}
.mc-khero-ab-rule strong {
  font-weight: 500;
  color: var(--mc-ink-soft);
}

/* Block B — Skein Stack stage. The skein dots and cap callouts are
   absolutely positioned children. The `mc-khero-stack--Nslot` modifier
   on the parent lets us re-balance the composition by slot count. */
.mc-khero-blockb { position: relative; }
.mc-khero-stack {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: visible;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 65%, rgba(26, 24, 20, 0.05), transparent 70%),
    var(--mc-paper);
}
.mc-khero-stack-floor {
  display: block; /* override `div:empty { display: none }` from base.css */
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 10%;
  background: radial-gradient(ellipse at 50% 100%, rgba(26, 24, 20, 0.18), transparent 65%);
  z-index: 0;
  pointer-events: none;
}

/* Skein dot — scoped to the new stack so the legacy
   `.mc-khero-skein` rules (used by mc-kit-page.liquid) stay isolated.
   `display: block` overrides Dawn's `div:empty { display: none }` rule in
   base.css — our skeins are intentionally empty divs (paint comes from
   background + ::before + ::after pseudo-elements), so we have to assert
   block-level display explicitly. */
.mc-khero-stack .mc-khero-skein {
  display: block;
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 65% 50% at 35% 28%, rgba(255, 255, 255, 0.55), transparent 55%),
    var(--c, #C0B5A0);
  background-size: auto, auto;
  background-position: center, center;
  box-shadow:
    inset 0 -22px 38px rgba(0, 0, 0, 0.30),
    inset 14px -10px 30px rgba(0, 0, 0, 0.10),
    inset -12px 12px 30px rgba(255, 255, 255, 0.12),
    0 22px 30px -16px rgba(26, 24, 20, 0.28),
    0 6px 10px -4px rgba(26, 24, 20, 0.18);
  filter:
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.05))
    drop-shadow(0 0 3px var(--c, #C0B5A0))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
  /* Reset legacy positioning that targets top/left:50% on bare
     `.mc-khero-skein` (used by the deprecated kit-page). */
  top: auto;
  left: auto;
  transform-origin: center;
}
.mc-khero-stack .mc-khero-skein::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(var(--ang, 32deg),
      transparent 0 1.5px, rgba(255, 255, 255, 0.14) 1.5px 2px, transparent 2px 4.5px),
    repeating-linear-gradient(calc(var(--ang, 32deg) + 90deg),
      transparent 0 3px, rgba(0, 0, 0, 0.05) 3px 3.5px, transparent 3.5px 8px);
  mix-blend-mode: overlay;
  opacity: 0.9;
  pointer-events: none;
}
.mc-khero-stack .mc-khero-skein::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 22%;
  transform: translate(-50%, -50%) rotate(var(--wrap, -20deg));
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 0, 0, 0.18), transparent 70%),
    linear-gradient(to bottom, transparent 30%, rgba(255, 255, 255, 0.20) 45%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
/* When a real yarn-product photo is available, strip the CSS-painted strand
   texture (::before) and wrap-band overlay (::after) so the skein renders
   as the clean photograph. The synthetic effects are kept as a graceful
   fallback for kits where `slot.color.image` is unresolved. */
.mc-khero-stack .mc-khero-skein.has-img {
  background-color: transparent;
  background-repeat: no-repeat;
  /* Replace the coloured drop-shadow halo with a neutral one — the photo
     itself carries the colour, so a tinted halo would clash. */
  filter:
    drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.08))
    drop-shadow(0 22px 30px rgba(26, 24, 20, 0.22));
  box-shadow:
    0 22px 30px -16px rgba(26, 24, 20, 0.28),
    0 6px 10px -4px rgba(26, 24, 20, 0.18);
}
.mc-khero-stack .mc-khero-skein.has-img::before,
.mc-khero-stack .mc-khero-skein.has-img::after { display: none; }

.mc-khero-stack .mc-khero-skein--main {
  left: 18%; top: 10%; width: 56%; aspect-ratio: 1;
  transform: rotate(-6deg);
  z-index: 3;
}
.mc-khero-stack .mc-khero-skein--accent {
  right: 6%; bottom: 8%; width: 38%; aspect-ratio: 1;
  transform: rotate(12deg);
  z-index: 2;
}
.mc-khero-stack .mc-khero-skein--contrast {
  left: 4%; bottom: 8%; width: 30%; aspect-ratio: 1;
  transform: rotate(-18deg);
  z-index: 1;
}
/* Composition adjustments by slot count — 1 slot centres the main
   skein; 2 slots fall back to main + accent without rebalancing. */
.mc-khero-stack--1slot .mc-khero-skein--main {
  left: 26%; top: 14%; width: 48%;
}

/* Museum-card callouts pulled to the margins of the stack. */
.mc-khero-cap {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.mc-khero-cap-line {
  width: 28px;
  height: 1px;
  background: var(--mc-ink);
  margin-top: 16px;
  flex-shrink: 0;
}
.mc-khero-cap-line.short { width: 14px; }
.mc-khero-cap-card {
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  padding: 9px 12px 10px;
  min-width: 140px;
  box-shadow: 0 6px 16px -8px rgba(26, 24, 20, 0.18);
}
.mc-khero-cap-role {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-khero-cap-chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(26, 24, 20, 0.15);
  flex-shrink: 0;
}
.mc-khero-cap-name {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.05;
  margin-top: 3px;
  color: var(--mc-ink);
}
.mc-khero-cap-meta {
  font-family: var(--mc-mono, ui-monospace, "SF Mono", monospace);
  font-size: 9.5px;
  color: var(--mc-ink-soft);
  margin-top: 5px;
  letter-spacing: 0.04em;
}
.mc-khero-cap--main     { top: 6%;   right: -8px; }
.mc-khero-cap--accent   { bottom: 10%; right: -8px; }
.mc-khero-cap--contrast { bottom: 14%; left: -8px; flex-direction: row-reverse; }
.mc-khero-cap--contrast .mc-khero-cap-line { transform: scaleX(-1); }

/* Block B ledger — colour count · skein count · saving. */
.mc-khero-bfoot {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--mc-rule);
  border-bottom: 1px solid var(--mc-rule);
}
.mc-khero-bfoot-left { min-width: 0; }
.mc-khero-bfoot-left .mc-eyebrow {
  font-size: 9.5px;
  white-space: nowrap;
  display: block;
  margin-bottom: 4px;
}
.mc-khero-bfoot-left em {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 17px;
  white-space: nowrap;
  color: var(--mc-ink);
}
.mc-khero-bfoot-right {
  text-align: right;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  white-space: nowrap;
}
.mc-khero-bfoot-right .mc-eyebrow {
  font-size: 9.5px;
  display: block;
  margin-bottom: 4px;
}
.mc-khero-bfoot-right em {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mc-ink);
}

/* Narrow viewport — hide the absolutely-positioned cap callouts so the
   stack doesn't overflow into the next column. Slot details are still
   fully visible in the right column "What's in the kit" table, so we
   lose nothing by collapsing the editorial museum cards here. */
@media (max-width: 720px) {
  .mc-khero-cap { display: none; }
  .mc-khero-stack { aspect-ratio: 5 / 3.4; }
  .mc-khero-blocka-h { font-size: 24px; }
  .mc-khct-name { font-size: 20px; }
}

/* ============================================================== *
 * Kit Landing Page · Full layout (Claude Design 2026-05-11)
 *
 * The `.mc-klp-*` namespace ports the design's right-column / promise
 * bar / breadcrumb / below-fold / sticky structure into the theme,
 * replacing the previous `.mc-khero-info`, `.mc-kit-via`,
 * `.mc-kit-includes`, `.mc-kit-specs`, `.mc-kit-more`, and
 * `.mc-kit-sticky` containers (their CSS rules above remain but
 * are no longer emitted by renderKit). Brand tokens from the theme:
 *   --mc-paper, --mc-paper-2, --mc-ink, --mc-ink-soft, --mc-ink-mute,
 *   --mc-rule, --mc-rule-soft, --mc-accent, --mc-serif, --mc-sans, --mc-mono.
 * ============================================================== */

/* --- Promise bar (full-bleed dark) --- */
.mc-klp-promise-wrap {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 12px 22px;
}
.mc-klp-promise {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mc-klp-promise-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
  border-right: 1px solid #3A342A;
  text-align: left;
}
.mc-klp-promise-by > span {
  font-size: 9px;
  color: #A89C86;
}
.mc-klp-promise-by em {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mc-paper);
}
.mc-klp-promise-by-link {
  color: inherit;
  text-decoration: none;
}
.mc-klp-promise-it { color: #D9CEB6; }
.mc-klp-promise-save { color: var(--mc-paper); }
.mc-klp-promise-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3A342A;
  flex-shrink: 0;
}

/* --- Breadcrumb --- */
.mc-klp-crumb {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin: 32px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.mc-klp-crumb a {
  color: var(--mc-ink-mute);
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.mc-klp-crumb a:hover {
  color: var(--mc-ink);
  border-bottom-color: var(--mc-ink);
}
.mc-klp-crumb-sep { color: var(--mc-ink-fade); }

/* --- Hero (2-col on desktop) --- */
.mc-klp-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  margin-bottom: 0;
}

/* --- Info column (right) --- */
.mc-klp-info {
  padding: 6px 0;
  font-family: var(--mc-sans);
}
.mc-klp-lev {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
}
.mc-klp-h1 {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: 54px;
  line-height: 0.95;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--mc-ink);
}
.mc-klp-h1 em {
  font-style: italic;
  font-weight: 400;
}
.mc-klp-by {
  margin: 14px 0 0;
  font-family: var(--mc-serif);
  font-size: 17px;
  color: var(--mc-ink-soft);
  font-style: italic;
}
.mc-klp-by em {
  font-style: italic;
  color: var(--mc-ink-soft);
}
.mc-klp-by .mc-khero-pattern-link {
  color: inherit;
}
.mc-klp-by-link {
  border-bottom: 1px solid var(--mc-rule);
  font-style: normal;
  font-family: var(--mc-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink);
  margin-left: 6px;
  padding-bottom: 1px;
  text-decoration: none;
}

/* --- Blocks (Size · Colourway · What's in the kit) --- */
.mc-klp-block {
  margin-top: 32px;
  border-top: 1px solid var(--mc-rule-soft);
  padding-top: 22px;
}
.mc-klp-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 16px;
}
.mc-klp-block-head .mc-eyebrow { font-size: 10px; }
.mc-klp-block-help {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}
.mc-klp-help {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
  border-bottom: 1px solid var(--mc-ink);
  padding: 0 0 1px;
}
.mc-klp-help:hover { color: var(--mc-ink); }
.mc-klp-reset-link {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-accent);
  margin-left: 8px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Size buttons --- */
.mc-klp-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mc-klp-size {
  border: 1px solid var(--mc-rule);
  padding: 12px 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.mc-klp-size:hover { border-color: var(--mc-ink-soft); }
.mc-klp-size.is-on {
  border-color: var(--mc-ink);
  background: var(--mc-paper-2);
}
.mc-klp-size-nm {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--mc-ink);
}
.mc-klp-size-sk {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

/* --- Colourway buttons --- */
.mc-klp-cws {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mc-klp-cw {
  border: 1px solid var(--mc-rule);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.mc-klp-cw:hover { border-color: var(--mc-ink-soft); }
.mc-klp-cw.is-on {
  border-color: var(--mc-ink);
  background: var(--mc-paper-2);
}
.mc-klp-cw--custom {
  border-style: dashed;
  cursor: default;
}
.mc-klp-cw-chips {
  display: flex;
  gap: 3px;
}
.mc-klp-cw-chips span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(26, 24, 20, 0.18);
  flex-shrink: 0;
}
.mc-klp-cw-nm {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--mc-ink);
}

/* --- What's in the kit table --- */
.mc-klp-table {
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
}
.mc-klp-table-th {
  display: grid;
  grid-template-columns: 36px 1fr 50px 50px;
  background: var(--mc-paper-2);
  padding: 9px 14px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  border-bottom: 1px solid var(--mc-rule);
}
.mc-klp-table-th span:nth-child(3),
.mc-klp-table-th span:nth-child(4) {
  text-align: right;
}
.mc-klp-row {
  display: grid;
  grid-template-columns: 36px 1fr 50px 50px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mc-rule-soft);
  background: transparent;
  border-left: none;
  border-right: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
}
.mc-klp-row:last-child { border-bottom: none; }
.mc-klp-row:hover { background: var(--mc-paper-2); }
.mc-klp-row.is-locked { cursor: default; }
.mc-klp-row.is-locked:hover { background: transparent; }
.mc-klp-row-swatch {
  width: 26px;
  height: 26px;
  border: 1px solid var(--mc-ink);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.mc-klp-row-mid { padding-left: 14px; min-width: 0; }
.mc-klp-row-nm {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: var(--mc-ink);
}
.mc-klp-row-changed {
  font-family: var(--mc-sans);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-accent);
}
.mc-klp-row-oos {
  font-family: var(--mc-sans);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mc-accent);
}
.mc-klp-row-sub {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
  margin-top: 4px;
}
.mc-klp-row-num {
  font-family: var(--mc-mono);
  font-size: 10.5px;
  color: var(--mc-ink-soft);
  text-align: right;
  letter-spacing: 0.04em;
}
.mc-klp-row-qty {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 20px;
  text-align: right;
  color: var(--mc-ink);
}
.mc-klp-row--extra {
  background: var(--mc-paper-2);
  cursor: default;
}
.mc-klp-row--extra:hover { background: var(--mc-paper-2); }
/* Pattern-deliverable footer row — sits inside the "What's in the kit" block
   under the yarn table. Walk-in kits = "Not included" + buy link; designer
   kits = "Included with kit". Phase 14b. */
.mc-klp-pattern-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid var(--mc-rule);
  background: var(--mc-paper);
  font-size: 13px;
}
.mc-klp-pattern-row--walkin { background: var(--mc-paper-2); }
.mc-klp-pattern-label { color: var(--mc-ink-soft); }
.mc-klp-pattern-label strong {
  font-family: var(--mc-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mc-ink);
}
.mc-klp-pattern-buy {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--mc-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.mc-klp-pattern-buy:hover { color: var(--mc-accent-deep, #823722); }
.mc-klp-row-swatch--check {
  background: var(--mc-ink);
  color: var(--mc-paper);
  display: grid;
  place-items: center;
  border-color: var(--mc-ink);
}
.mc-klp-row-qty--incl {
  font-family: var(--mc-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
}

/* --- Price block --- */
.mc-klp-price {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--mc-rule);
}
.mc-klp-price-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.mc-klp-was {
  text-decoration: line-through;
  color: var(--mc-ink-mute);
  font-size: 14px;
}
.mc-klp-save {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--mc-accent);
  color: var(--mc-paper);
  padding: 5px 10px;
}
.mc-klp-now {
  font-family: var(--mc-serif);
  font-size: 54px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mc-ink);
}
.mc-klp-hint {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-mute);
}

/* --- Primary CTA --- */
.mc-klp-cta {
  margin-top: 22px;
  width: 100%;
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  text-align: left;
  transition: background 0.2s;
}
.mc-klp-cta:hover { background: var(--mc-accent); }
.mc-klp-cta em {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mc-paper);
}

/* --- Trust strip --- */
.mc-klp-trust {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-ink-soft);
  text-align: center;
}
.mc-klp-trust > div {
  padding: 14px 8px;
  border: 1px solid var(--mc-rule-soft);
}
.mc-klp-trust em {
  display: block;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mc-ink);
  margin-top: 4px;
}

/* --- Alt link --- */
.mc-klp-alt {
  margin-top: 24px;
  text-align: center;
}

/* --- Below-fold (about pattern / yarn / journal) --- */
.mc-klp-belowfold {
  margin-top: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--mc-rule-soft);
  border: 1px solid var(--mc-rule-soft);
}
.mc-klp-belowfold > div {
  background: var(--mc-paper);
  padding: 36px 32px;
}
.mc-klp-belowfold .mc-eyebrow {
  display: block;
  margin-bottom: 12px;
}
.mc-klp-belowfold h4 {
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 10px;
  color: var(--mc-ink);
  line-height: 1.2;
}
.mc-klp-belowfold h4 em { font-style: italic; }
.mc-klp-belowfold p {
  color: var(--mc-ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* --- Sticky bottom CTA --- */
.mc-klp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: rgba(26, 24, 20, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--mc-paper);
  padding: 14px 40px;
  border-top: 1px solid #3A342A;
}
.mc-klp-sticky[hidden] { display: none; }
.mc-klp-sticky-inner {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}
.mc-klp-sticky-chips {
  display: flex;
  gap: 4px;
}
.mc-klp-sticky-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.mc-klp-sticky-nm {
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 18px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-klp-sticky-meta {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #A89C86;
  white-space: nowrap;
}
.mc-klp-sticky-pr {
  font-family: var(--mc-serif);
  font-size: 22px;
  white-space: nowrap;
}
.mc-klp-sticky-inner button {
  background: var(--mc-paper);
  color: var(--mc-ink);
  padding: 12px 18px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: var(--mc-sans);
  transition: background 0.2s, color 0.2s;
}
.mc-klp-sticky-inner button:hover {
  background: var(--mc-accent);
  color: var(--mc-paper);
}

/* --- Mobile --- */
@media (max-width: 1080px) {
  .mc-klp-hero {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .mc-klp-belowfold {
    grid-template-columns: 1fr;
  }
  .mc-klp-h1 { font-size: 44px; }
  .mc-klp-now { font-size: 44px; }
  .mc-klp-sizes { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .mc-klp-promise {
    gap: 14px;
    font-size: 9.5px;
    justify-content: flex-start;
  }
  .mc-klp-promise-by em { font-size: 13px; }
  .mc-klp-crumb { margin: 20px 0; }
  .mc-klp-h1 { font-size: 36px; }
  .mc-klp-now { font-size: 38px; }
  .mc-klp-sizes { grid-template-columns: repeat(3, 1fr); }
  .mc-klp-sticky { padding: 12px 16px; }
  .mc-klp-sticky-inner { gap: 14px; }
  .mc-klp-sticky-meta { display: none; }
  .mc-klp-sticky-nm { font-size: 14px; }
  .mc-klp-trust { grid-template-columns: 1fr; gap: 8px; }
  .mc-klp-belowfold { margin-top: 64px; }
  .mc-klp-belowfold > div { padding: 28px 22px; }
  .mc-klp-cta { padding: 16px 18px; font-size: 11px; }
  .mc-klp-cta em { font-size: 16px; }
}

/* ============================================================== *
 * Kit Landing · Button-reset overrides
 *
 * The theme's `.mc-root button` reset at line 88 strips background,
 * border, and padding from every button inside `.mc-root`. The
 * `.mc-klp-*` rules above declare these properties at (0,1,0)
 * specificity which loses to the reset's (0,1,1). Re-declare here
 * at (0,2,0) so size/colourway/row/CTA buttons paint their borders
 * and active states correctly.
 * ============================================================== */
.mc-root .mc-klp-size {
  border: 1px solid var(--mc-rule);
  padding: 12px 10px;
  background: transparent;
}
.mc-root .mc-klp-size:hover { border-color: var(--mc-ink-soft); }
.mc-root .mc-klp-size.is-on {
  border-color: var(--mc-ink);
  background: var(--mc-paper-2);
}

.mc-root .mc-klp-cw {
  border: 1px solid var(--mc-rule);
  padding: 10px 12px;
  background: transparent;
}
.mc-root .mc-klp-cw:hover { border-color: var(--mc-ink-soft); }
.mc-root .mc-klp-cw.is-on {
  border-color: var(--mc-ink);
  background: var(--mc-paper-2);
}
.mc-root .mc-klp-cw--custom { border-style: dashed; }

.mc-root .mc-klp-row {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mc-rule-soft);
  border-top: none;
  border-left: none;
  border-right: none;
  background: transparent;
}
.mc-root .mc-klp-row:hover { background: var(--mc-paper-2); }
.mc-root .mc-klp-row:last-child { border-bottom: none; }
.mc-root .mc-klp-row.is-locked:hover { background: transparent; }
.mc-root .mc-klp-row--extra {
  background: var(--mc-paper-2);
}
.mc-root .mc-klp-row--extra:hover { background: var(--mc-paper-2); }

.mc-root .mc-klp-cta {
  background: var(--mc-ink);
  color: var(--mc-paper);
  padding: 20px 24px;
  border: none;
}
.mc-root .mc-klp-cta:hover { background: var(--mc-accent); }

.mc-root .mc-klp-help {
  border-bottom: 1px solid var(--mc-ink);
  padding: 0 0 1px;
  background: none;
}
.mc-root .mc-klp-help:hover { color: var(--mc-ink); }

.mc-root .mc-klp-reset-link {
  background: none;
  border: none;
  padding: 0;
}

.mc-root .mc-klp-sticky-inner button {
  background: var(--mc-paper);
  color: var(--mc-ink);
  padding: 12px 18px;
  border: none;
}
.mc-root .mc-klp-sticky-inner button:hover {
  background: var(--mc-accent);
  color: var(--mc-paper);
}

/* ============================================================== *
 * Kit Table · hover/focus tooltip with product photo
 *
 * The kit table's swatch column shows a solid hex chip (matching the
 * design mockup). When the slot has a resolved product image, the row
 * carries a hidden `.mc-klp-row-tip` element that opens on hover OR
 * keyboard focus — letting customers inspect the actual yarn without
 * cluttering the table layout.
 * ============================================================== */
.mc-klp-row { position: relative; }
.mc-klp-row-tip {
  position: absolute;
  left: 14px;
  bottom: 100%;
  margin-bottom: 8px;
  z-index: 20;
  background: var(--mc-paper);
  border: 1px solid var(--mc-rule);
  padding: 6px 6px 8px;
  box-shadow: 0 12px 28px -10px rgba(26, 24, 20, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.mc-klp-row.has-tip:hover .mc-klp-row-tip,
.mc-klp-row.has-tip:focus-visible .mc-klp-row-tip,
.mc-klp-row.has-tip:focus .mc-klp-row-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear;
}
.mc-klp-row-tip img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  background: var(--mc-paper-2);
}
.mc-klp-row-tip-cap {
  display: block;
  margin-top: 6px;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mc-ink);
  text-align: center;
  padding: 0 6px;
}

/* ============================================================== *
 * Left-column blocks · Notes · Pattern specs · More from Mohair.eu
 *
 * Replaces the previous Skein Stack (Block B). Same paper-on-paper
 * editorial treatment as the right-column blocks: hairline rule above,
 * eyebrow label, serif content. Sits below Block A in the left column.
 * ============================================================== */
.mc-klp-leftblocks {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mc-klp-leftblock {
  border-top: 1px solid var(--mc-rule-soft);
  padding: 22px 0 26px;
}
.mc-klp-leftblock .mc-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
}
.mc-klp-notes {
  font-family: var(--mc-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--mc-ink-soft);
  font-style: italic;
}
.mc-klp-notes em { font-style: italic; color: var(--mc-ink); }

/* Specs — 2-col CSS grid; auto-flows row-by-row */
.mc-klp-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  row-gap: 16px;
}
.mc-klp-spec { min-width: 0; }
.mc-klp-spec-label {
  display: block;
  font-family: var(--mc-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mc-ink-mute);
  margin-bottom: 4px;
}
.mc-klp-spec-value {
  font-size: 14px;
  color: var(--mc-ink);
  line-height: 1.4;
}
.mc-klp-spec-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
  border: 1px solid var(--mc-rule);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mc-ink-soft);
}

/* More from Mohair.eu */
.mc-klp-more-h {
  font-family: var(--mc-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--mc-ink);
}
.mc-klp-more-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mc-root .mc-klp-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--mc-rule);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-ink);
  text-decoration: none;
  background: transparent;
  transition: border-color 0.15s, background 0.15s;
  width: fit-content;
}
.mc-root .mc-klp-more-link:hover {
  border-color: var(--mc-ink);
  background: var(--mc-paper-2);
}
.mc-root .mc-klp-more-link span { font-size: 13px; letter-spacing: 0; }

@media (max-width: 720px) {
  .mc-klp-specs { grid-template-columns: 1fr; }
  .mc-klp-row-tip img { width: 160px; height: 160px; }
  .mc-klp-more-h { font-size: 24px; }
}

/* =========================================================
   2026 OVERRIDES (cross-site alignment with mc-2026.css)
   Added 2026-05-15 to bring pre-2026 pages into the new
   visual system without rebuilding sections.
   ========================================================= */

/* Make sure DM Sans loads on pages that use mohair-design-system */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* Reset all default browser-blue links inside our brand-rooted pages.
   Skip explicit components (buttons, links, nav, footer, Shopify payment). */
.mc-root a:not(.mc-btn):not(.mc-link):not([class*='nav-']):not([class*='foot-']):not(.shopify-payment-button__button):not([class*='m26-']):not(.mc-nav-link):not(.mc-nav-icon),
main a:not(.mc-btn):not(.mc-link):not([class*='nav-']):not([class*='foot-']):not(.shopify-payment-button__button):not([class*='m26-']):not(.mc-nav-link):not(.mc-nav-icon):not(.product-card__link):not(.card__heading):not(.card__information):not([class*='button']) {
  color: var(--mc-ink);
  text-decoration: underline;
  text-decoration-color: var(--mc-rule);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.mc-root a:hover:not(.mc-btn):not(.mc-link):not([class*='nav-']):not([class*='foot-']) {
  text-decoration-color: var(--mc-ink);
}

/* Filter chips on colours + kits — 2026 pill style */
.cf-chip,
.mc-filter-chip,
button.cf-chip,
.mc-pg__chip {
  border: 1px solid var(--mc-rule) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  background: transparent !important;
  color: var(--mc-ink) !important;
  transition: border-color .2s, background .2s, color .2s !important;
  line-height: 1 !important;
}
.cf-chip:hover,
.mc-filter-chip:hover,
.mc-pg__chip:hover {
  border-color: var(--mc-ink) !important;
}
.cf-chip.is-active,
.mc-filter-chip.is-active,
.mc-pg__chip.is-active,
.cf-chip[aria-pressed='true'] {
  background: var(--mc-ink) !important;
  color: var(--mc-paper) !important;
  border-color: var(--mc-ink) !important;
}

/* Dawn default buttons (add-to-cart, checkout, generic submit) — 2026 style */
.shopify-section .button:not([class*='m26-']):not(.button--secondary):not(.cart__update-button),
.shopify-section button.button:not([class*='m26-']):not(.button--secondary),
.shopify-section .product-form__submit:not([class*='m26-']),
.shopify-section .quick-add__submit,
.cart__ctas button[name='checkout'],
.shopify-section button[type='submit'].button {
  border: 1px solid var(--mc-ink) !important;
  background: var(--mc-ink) !important;
  color: var(--mc-paper) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 16px 26px !important;
  box-shadow: none !important;
  transition: background .25s ease, color .25s ease !important;
}
.shopify-section .button:not([class*='m26-']):not(.button--secondary):hover,
.shopify-section button.button:not([class*='m26-']):not(.button--secondary):hover {
  background: transparent !important;
  color: var(--mc-ink) !important;
}

.shopify-section .button--secondary:not([class*='m26-']) {
  border: 1px solid var(--mc-ink) !important;
  background: transparent !important;
  color: var(--mc-ink) !important;
  border-radius: 0 !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 16px 26px !important;
  box-shadow: none !important;
}

/* Default form inputs (contact, newsletter, account) — 2026 style */
.shopify-section .field__input,
.shopify-section input[type='text']:not([class*='m26-']),
.shopify-section input[type='email']:not([class*='m26-']),
.shopify-section input[type='tel']:not([class*='m26-']),
.shopify-section textarea:not([class*='m26-']) {
  border-radius: 0 !important;
  border: 1px solid var(--mc-rule) !important;
  background: transparent !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--mc-ink) !important;
}
.shopify-section .field__input:focus,
.shopify-section input:focus:not([class*='m26-']),
.shopify-section textarea:focus:not([class*='m26-']) {
  border-color: var(--mc-ink) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Collection grid: 2026 product-card style */
.shopify-section .card,
.shopify-section .card-wrapper {
  border-radius: 0 !important;
  background: transparent !important;
}
.shopify-section .card__inner,
.shopify-section .card-information {
  background: transparent !important;
}
.shopify-section .card__heading {
  font-family: var(--mc-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
.shopify-section .card__heading a {
  color: var(--mc-ink) !important;
  text-decoration: none !important;
}
.shopify-section .price__regular .price-item--regular {
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  color: var(--mc-ink-mute) !important;
  letter-spacing: 0.02em !important;
}

/* Collection / facet headers — serif italic alignment */
.collection-hero__title,
.title.title--primary {
  font-family: var(--mc-serif) !important;
}

/* Generic Dawn page wrapper (e.g. contact page) padding tighten */
.section-template--page-default {
  padding-block: clamp(48px, 6vw, 100px);
}

/* /pages/collections-and-kits — blob/card overflow fix (2026 alignment) */
.mc-ck-page .mc-ck-card,
.mc-ck-page [class*='mc-ck-item'],
.mc-ck-page [class*='mc-ck-collection'] {
  overflow: hidden !important;
  position: relative !important;
}
@media (max-width: 740px) {
  .mc-ck-page .mc-ck-pane {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .mc-ck-page [class*='mc-ck-card'] *,
  .mc-ck-page [class*='mc-ck-item'] * {
    max-width: 100% !important;
  }
}

/* /pages/journal — caption links into 2026 hover */
.mc-journal-page a:not([class*='mc-btn']):not([class*='mc-link']) {
  text-decoration: underline;
  text-decoration-color: var(--mc-rule);
  text-underline-offset: 3px;
}

/* =========================================================
   MOHAIR · Design Partners redesign — A2 "Editorial Scroll"
   sections/mc-partners.liquid + sections/mc-partner-commission.liquid
   All four ateliers flow down as chapters; the sticky left index
   IS the tablist (scroll-spy syncs aria-selected, click deep-links
   #<handle>). Builds on existing tokens + shared .mc-kit-card /
   .mc-coll-chip. Ported from the CD handoff (mc-redesign.css), with
   image-slot replaced by a real .mc-portrait-img.
   ========================================================= */

/* ---- masthead ---- */
.mc-pp2-mast { padding: 20px 0 26px; max-width: 760px; }
.mc-pp2-mast .mc-eyebrow { display: block; margin-bottom: 12px; }
.mc-pp2-mast .mc-display { margin: 0 0 14px; font-size: clamp(44px,6.5vw,84px); line-height: 1.02; }
.mc-pp2-lede { font-family: var(--mc-serif); font-style: italic; font-size: clamp(17px,1.5vw,20px); line-height: 1.5; color: var(--mc-ink-soft); max-width: 560px; margin: 0; }

.mc-pp2 { display: grid; grid-template-columns: 210px 1fr; gap: 64px; padding-bottom: 40px; align-items: start; }

/* ---- sticky index = the tablist ---- */
.mc-pp2-rail { position: sticky; top: 96px; align-self: start; }
.mc-pp2-rail .mc-eyebrow { display: block; margin-bottom: 16px; }
.mc-pp2-tablist { display: flex; flex-direction: column; gap: 2px; }
.mc-pp2-tab {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--mc-tap); padding: 9px 12px 9px 14px;
  border: none; border-left: 2px solid transparent; background: none;
  text-align: left; cursor: pointer; color: var(--mc-ink-mute);
  transition: color 0.2s, border-color 0.2s, background 0.2s; border-radius: 0 8px 8px 0;
}
.mc-pp2-tab:hover { color: var(--mc-ink); background: var(--mc-paper-2); }
.mc-pp2-tab[aria-selected="true"] { color: var(--mc-ink); border-left-color: var(--mc-ink); }
.mc-pp2-tab:focus-visible { outline: 2px solid var(--mc-accent-deep); outline-offset: 2px; }
.mc-pp2-tab-chip { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.mc-pp2-tab-name { font-family: var(--mc-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; }
.mc-pp2-tab-num { margin-left: auto; font-family: var(--mc-serif); font-style: italic; font-size: 14px; color: var(--mc-ink-fade); }
.mc-pp2-rail-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mc-rule-soft); }

/* ---- stream of partner chapters ---- */
.mc-pp2-stream { display: flex; flex-direction: column; gap: 96px; min-width: 0; }
.mc-pp2-partner { scroll-margin-top: 120px; }
.mc-pp2-phead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 28px; }
.mc-pp2-phead-num { font-family: var(--mc-serif); font-style: italic; font-size: clamp(34px,4vw,48px); color: var(--mc-accent); line-height: 1; }
.mc-pp2-phead-rule { flex: 1; height: 1px; background: var(--mc-rule); }

.mc-pp2-intro { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 44px; align-items: center; margin-bottom: 40px; }

/* portrait — gradient+initials is the intentional empty state; a real photo overlays it */
.mc-portrait { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; min-height: 320px; }
.mc-portrait-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mc-serif); font-size: clamp(72px,12vw,128px); color: rgba(255,255,255,0.55); text-shadow: 0 2px 16px rgba(0,0,0,0.14); z-index: 1; user-select: none; }
.mc-portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.mc-portrait-tag { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; background: rgba(253,252,251,0.92); backdrop-filter: blur(6px); border-radius: 10px; padding: 11px 15px; pointer-events: none; }
.mc-portrait-tag .mc-eyebrow { display: block; margin-bottom: 4px; }
.mc-portrait-tag-n { font-family: var(--mc-serif); font-style: italic; font-size: 15px; color: var(--mc-ink); }

.mc-pp2-ptext .mc-eyebrow { display: block; margin-bottom: 12px; }
.mc-pp2-ptext .mc-display-sm { margin: 0 0 18px; font-size: clamp(34px,4.5vw,52px); }
.mc-pp2-bio { font-size: 16px; line-height: 1.65; color: var(--mc-ink-soft); margin: 0 0 26px; max-width: 50ch; }
.mc-pp2-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--mc-rule-soft); border-bottom: 1px solid var(--mc-rule-soft); margin-bottom: 26px; }
.mc-pp2-stats > div { display: flex; flex-direction: column; gap: 5px; }
.mc-pp2-stats .mc-eyebrow { font-size: 9.5px; }
.mc-pp2-stats strong { font-family: var(--mc-serif); font-weight: 400; font-size: 24px; }
.mc-pp2-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---- capsule chapter inside a partner ---- */
.mc-pp2-cap { margin-top: 40px; }
.mc-pp2-chead { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--mc-rule-soft); margin-bottom: 24px; flex-wrap: wrap; }
.mc-pp2-chead .mc-eyebrow { display: block; margin-bottom: 7px; }
.mc-pp2-chead h3 { font-family: var(--mc-serif); font-weight: 400; font-size: clamp(24px,3vw,32px); line-height: 1.08; margin: 0; }
.mc-pp2-chead h3 em { font-style: italic; color: var(--mc-ink-mute); }
.mc-coll-palette--inline { display: flex; gap: 6px; }
.mc-coll-palette--inline .mc-coll-chip { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }

.mc-kit-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.mc-pp2-soon { border: 1.5px dashed var(--mc-rule); border-radius: 14px; padding: 44px 32px; text-align: center; background: var(--mc-paper-2); }
.mc-pp2-soon-h { font-family: var(--mc-serif); font-style: italic; font-size: 22px; color: var(--mc-ink-mute); margin: 0; }
.mc-pp2-soon p { font-size: 13px; color: var(--mc-ink-mute); margin: 8px 0 0; }
.mc-pp2-seeall { display: inline-flex; margin-top: 18px; }

/* ---- commission band ---- */
.mc-pp2-commission { margin: 0; padding: 56px var(--mc-pad); border-radius: 18px; background: color-mix(in srgb, var(--mc-accent-deep) 6%, var(--mc-paper)); border: 1px solid var(--mc-rule-soft); text-align: center; }
.mc-pp2-commission .mc-eyebrow { display: block; margin-bottom: 14px; }
.mc-pp2-rate { font-family: var(--mc-serif); font-weight: 400; font-style: italic; font-size: clamp(34px,5vw,58px); line-height: 1.08; margin: 18px auto 16px; max-width: 720px; }
.mc-pp2-commission p { max-width: 460px; margin: 0 auto 22px; font-size: 14px; line-height: 1.6; color: var(--mc-ink-soft); }
.mc-pp2-commission-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .mc-pp2 { grid-template-columns: 1fr; gap: 28px; }
  .mc-pp2-rail { position: static; top: auto; }
  .mc-pp2-tablist { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .mc-pp2-tab { width: auto; border-left: none; border: 1px solid var(--mc-rule); border-radius: 999px; padding: 8px 14px; min-height: 0; }
  .mc-pp2-tab[aria-selected="true"] { border-color: var(--mc-ink); background: var(--mc-ink); color: var(--mc-paper); }
  .mc-pp2-tab[aria-selected="true"] .mc-pp2-tab-name { color: var(--mc-paper); }
  .mc-pp2-tab-num { display: none; }
  .mc-pp2-rail-foot { display: none; }
  .mc-pp2-stream { gap: 64px; }
  .mc-pp2-intro { grid-template-columns: 1fr; gap: 22px; }
  .mc-kit-grid3 { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .mc-kit-grid3 { grid-template-columns: 1fr 1fr; }
  .mc-pp2-stats strong { font-size: 20px; }
}