/*
 * Workbench — VeloCMS theme (slug: "workbench")
 * 1:1 port of the founder's Claude-Design canvas "Workbench Theme.dc.html".
 *
 * "Sawdust and thread — for knitters, quilters, potters, gardeners, beekeepers."
 * Palette: forest #2F3D2E · bone #E9E2D0 · amber #C6892F · walnut #4A3728 · shell #17130E
 * Display: Bricolage Grotesque (800) · Body: Lora
 *
 * All values below are copied verbatim from the design's inline styles and the
 * 1o engineering-notes spec (color tokens, spacing/radius scale, hover table,
 * motion keyframes, mobile-drawer spec). No rounding, no reinterpretation.
 *
 * Scoped to [data-theme="workbench"] (NOT main-scoped) so /shop and /products/*
 * resolve the same tokens. P-094 token bridge at the bottom.
 */

/* ═══════════════════ COLOR TOKENS (1o §1) ═══════════════════ */
[data-theme="workbench"] {
  /* canonical (--vb-* bridge + derived) */
  --wb-forest: #2F3D2E;          /* oklch(0.36 0.03 145) — CTA/pill-active bg, dark band bg */
  --wb-bone: #E9E2D0;            /* oklch(0.91 0.02 95) — page background */
  --wb-amber: #C6892F;           /* oklch(0.66 0.12 70) — fills, doodle stroke, selvage */
  --wb-walnut: #4A3728;          /* oklch(0.35 0.04 55) — secondary text, 8.5:1 on paper */
  --wb-shell: #17130E;

  /* supporting (1o §1 table) */
  --wb-ink: #2A2118;             /* walnut-ink body text — 12.9:1 on bone */
  --wb-primary-fg: #E9E2D0;      /* text on primary (forest) — 8.8:1 AAA */
  --wb-accent-ink: #8A5A17;      /* amber for TEXT/links on bone — 4.6:1 AA */
  --wb-accent-bright: #D9A34E;   /* amber for TEXT on forest/char — 5.1:1 AA */
  --wb-cta-ink: #1F160E;         /* text on amber buttons — 6.1:1 on #C6892F AA */
  --wb-heading: #26301F;         /* display headings (forest-black) */
  --wb-meta: #6E5F4B;            /* dates/meta — 4.7:1 on bone (AA, >=12.5px only) */
  --wb-paper: #F4EFE1;           /* card surface */
  --wb-paper-deep: #E2DAC4;      /* chip bg */
  --wb-line: #CFC5AB;            /* card/hairline border */
  --wb-primary-hover: #263226;   /* forest-deep hover */
  --wb-amber-hover: #D9A34E;     /* amber btn hover */
  --wb-char: #2A2118;            /* code-block bg (text #E9E2D0, 12.9:1) */
  --wb-footer-link: #DDD6C0;     /* footer link on forest — 7.9:1 */
  --wb-footer-meta: #B9B29C;     /* footer meta on forest */
  --wb-footer-input-border: rgba(233, 226, 208, 0.28);
  --wb-footer-input-bg: #263226;
  --wb-scrim: rgba(26, 21, 15, 0.55); /* mobile drawer scrim */
  --wb-dashed: rgba(74, 55, 40, 0.3);
  --wb-dashed-light: rgba(74, 55, 40, 0.25);
  --wb-tactile-shadow: rgba(42, 33, 24, 0.13);
  --wb-tactile-shadow-hover: rgba(42, 33, 24, 0.15);
  --wb-btn-shadow: rgba(42, 33, 24, 0.25);
  --wb-btn-shadow-amber: rgba(74, 55, 40, 0.35);

  /* fonts (registered Wave 0 — getThemeFontVars("workbench")) */
  --wb-heading-font: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
    "Segoe UI", Arial, sans-serif;
  --wb-body-font: var(--font-lora), "Iowan Old Style", "Palatino Linotype",
    Georgia, serif;
  --wb-mono-font: ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* layout scale (1o §3) */
  --wb-container: 1344px;
  --wb-gutter: 48px;
  --wb-gutter-mobile: 20px;
  --wb-prose: 680px;

  /* engine names retained for the P-094 token bridge + any shared component
     that reads --velo-bg / --velo-fg / --velo-border / --velo-accent. The
     bespoke WorkbenchMobileMenu uses the --wb-* tokens directly. */
  --velo-bg: var(--wb-bone);
  --velo-fg: var(--wb-ink);
  --velo-border: var(--wb-line);
  --velo-accent: var(--wb-forest);
}

/* Body font inheritance for the whole theme surface */
[data-theme="workbench"] {
  font-family: var(--wb-body-font);
  color: var(--wb-ink);
  background: var(--wb-bone);
}

/* ═══════════════════ MOTION — entrances only (1o §5) ═══════════════════ */
@keyframes wb-rise {
  from { transform: translateY(12px); }
  to   { transform: none; }
}
@keyframes wb-grow {
  from { transform: scaleX(0.6); }
  to   { transform: none; }
}

/* Opacity is never animated — SSR content is fully visible on first frame
   (P-068). 600ms cubic-bezier(.22,.68,.28,1) both, stagger 80ms, max 3
   siblings (hero copy -> CTAs -> media). No scroll-triggered JS, no loops,
   no parallax — the only persistent motion is the user-initiated hero video. */
[data-theme="workbench"] .wb-anim-copy {
  animation: wb-rise 600ms cubic-bezier(0.22, 0.68, 0.28, 1) both;
}
[data-theme="workbench"] .wb-anim-cta {
  animation: wb-rise 600ms cubic-bezier(0.22, 0.68, 0.28, 1) 80ms both;
}
[data-theme="workbench"] .wb-anim-media {
  animation: wb-rise 600ms cubic-bezier(0.22, 0.68, 0.28, 1) 160ms both;
}
[data-theme="workbench"] .wb-anim-grow {
  animation: wb-grow 600ms cubic-bezier(0.22, 0.68, 0.28, 1) both;
  transform-origin: left center;
}
[dir="rtl"] [data-theme="workbench"] .wb-anim-grow {
  transform-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="workbench"] * {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════ CHROME — sticky header ═══════════════════ */
[data-theme="workbench"] .wb-header {
  background: var(--wb-bone);
  border-bottom: 1px solid var(--wb-line);
  position: sticky;
  top: 0;
  z-index: 40; /* 1o §7 z-index table */
}
/* selvage strip — symmetric pattern, direction-safe (1o §3 + §8) */
[data-theme="workbench"] .wb-selvage {
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--wb-amber) 0 12px,
    var(--wb-forest) 12px 24px
  );
}
[data-theme="workbench"] .wb-selvage-footer {
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--wb-amber) 0 12px,
    var(--wb-walnut) 12px 24px
  );
}
@media (max-width: 1023px) {
  [data-theme="workbench"] .wb-selvage,
  [data-theme="workbench"] .wb-selvage-footer {
    height: 4px;
    background-size: 20px 100%;
  }
  [data-theme="workbench"] .wb-selvage {
    background: repeating-linear-gradient(
      90deg,
      var(--wb-amber) 0 10px,
      var(--wb-forest) 10px 20px
    );
  }
  [data-theme="workbench"] .wb-selvage-footer {
    background: repeating-linear-gradient(
      90deg,
      var(--wb-amber) 0 10px,
      var(--wb-walnut) 10px 20px
    );
  }
}

[data-theme="workbench"] .wb-nav-inner {
  max-width: var(--wb-container);
  margin: 0 auto;
  padding: 0 var(--wb-gutter);
  height: 74px;
  display: flex;
  align-items: center;
  gap: 36px;
}
[data-theme="workbench"] .wb-brand {
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--wb-ink);
  text-decoration: none;
  white-space: nowrap;
}
[data-theme="workbench"] .wb-nav-links {
  display: flex;
  gap: 26px;
  margin-inline-start: 6px;
}
[data-theme="workbench"] .wb-nav-link {
  font-family: var(--wb-heading-font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wb-walnut);
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="workbench"] .wb-nav-link:hover {
  color: var(--wb-accent-ink);
}
/* active nav link — amber-ink + doodle underline (1o §7 "Contents") */
[data-theme="workbench"] .wb-nav-link.is-active {
  font-weight: 700;
  color: var(--wb-accent-ink);
  padding-bottom: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M3 7C22 3 44 8 63 5 82 2 103 7 117 4' fill='none' stroke='%23C6892F' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")
    bottom / 100% 5px no-repeat;
}
[data-theme="workbench"] .wb-nav-right {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
[data-theme="workbench"] .wb-icon-btn {
  color: var(--wb-walnut);
  display: grid;
  place-items: center;
  transition: color 140ms ease-out;
  position: relative;
}
[data-theme="workbench"] .wb-icon-btn:hover {
  color: var(--wb-accent-ink);
}
[data-theme="workbench"] .wb-cart-badge {
  position: absolute;
  top: -7px;
  inset-inline-end: -9px;
  background: var(--wb-amber);
  color: var(--wb-cta-ink);
  border-radius: 999px;
  padding: 1px 5px;
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10.5px;
}
[data-theme="workbench"] .wb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  display: grid;
  place-items: center;
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* bespoke header cart (WorkbenchCartLink) — design bag SVG + amber badge.
   Shares .wb-cart-badge geometry with the design (1a line 51). */
[data-theme="workbench"] .wb-cart-link {
  position: relative;
  color: var(--wb-walnut);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="workbench"] .wb-cart-link:hover {
  color: var(--wb-accent-ink);
}

/* ═══════════════════ MOBILE DRAWER (WorkbenchMobileMenu, 1d) ═══════════════ */
/* hamburger trigger — hidden on desktop, shown < lg (mirrors the design 1d) */
[data-theme="workbench"] .wb-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--wb-ink);
  cursor: pointer;
}
@media (max-width: 1023px) {
  [data-theme="workbench"] .wb-hamburger {
    display: grid;
  }
}
/* boxed in-drawer close button (1d line 412) */
[data-theme="workbench"] .wb-drawer-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--wb-line);
  border-radius: 8px;
  color: var(--wb-walnut);
  cursor: pointer;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="workbench"] .wb-drawer-close:hover {
  border-color: var(--wb-walnut);
  color: var(--wb-ink);
}

/* ═══════════════════ BUTTONS / CTAs (1o §4) ═══════════════════ */
[data-theme="workbench"] .wb-btn-forest {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 13px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  box-shadow: 0 3px 0 var(--wb-btn-shadow);
  cursor: pointer;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench"] .wb-btn-forest:hover {
  background: var(--wb-primary-hover);
}
[data-theme="workbench"] .wb-btn-forest:active {
  transform: translateY(1px);
}
/* larger hero variant */
[data-theme="workbench"] .wb-btn-forest-lg {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 15px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  padding: 14px 24px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 0 var(--wb-btn-shadow);
  cursor: pointer;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench"] .wb-btn-forest-lg:hover {
  background: var(--wb-primary-hover);
}
[data-theme="workbench"] .wb-btn-forest-lg:active {
  transform: translateY(1px);
}
[data-theme="workbench"] .wb-btn-amber {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 16px;
  background: var(--wb-amber);
  color: var(--wb-cta-ink);
  border: none;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--wb-btn-shadow-amber);
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench"] .wb-btn-amber:hover {
  background: var(--wb-amber-hover);
}
[data-theme="workbench"] .wb-btn-amber:active {
  transform: translateY(1px);
}
[data-theme="workbench"] .wb-btn-amber-sm {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 13.5px;
  background: var(--wb-amber);
  color: var(--wb-cta-ink);
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
[data-theme="workbench"] .wb-btn-amber-sm:hover {
  background: var(--wb-amber-hover);
}
[data-theme="workbench"] .wb-btn-amber-sm:active {
  transform: translateY(1px);
}
/* ghost / outline */
[data-theme="workbench"] .wb-btn-ghost {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--wb-forest);
  border: 1.5px solid rgba(74, 55, 40, 0.45);
  padding: 12.5px 24px;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="workbench"] .wb-btn-ghost:hover {
  border-color: var(--wb-forest);
  color: var(--wb-heading);
}
/* filled forest pill (active category / all filter) */
[data-theme="workbench"] .wb-pill-active {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 13px;
  background: var(--wb-forest);
  color: var(--wb-bone);
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
}
/* outline pill (inactive filter) */
[data-theme="workbench"] .wb-pill {
  font-family: var(--wb-heading-font);
  font-weight: 600;
  font-size: 13px;
  background: var(--wb-paper);
  color: var(--wb-walnut);
  border: 1px solid var(--wb-line);
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="workbench"] .wb-pill:hover {
  border-color: var(--wb-forest);
  color: var(--wb-heading);
}

/* ═══════════════════ FOCUS (all) — 1o §4 ═══════════════════ */
[data-theme="workbench"] a:focus-visible,
[data-theme="workbench"] button:focus-visible,
[data-theme="workbench"] input:focus-visible,
[data-theme="workbench"] textarea:focus-visible {
  outline: 2px solid var(--wb-amber);
  outline-offset: 2px;
}
/* inputs on forest panels focus with the bright amber (1o §4) */
[data-theme="workbench"] .wb-input:focus-visible {
  outline: none;
  border-color: var(--wb-accent-bright);
}

/* ═══════════════════ IMAGE TREATMENT (hands mid-work, 1o §8) ═══════════════════ */
[data-theme="workbench"] .wb-photo {
  filter: sepia(0.14) saturate(0.86) contrast(1.03);
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ═══════════════════ TACTILE EDGE (signature, 1o §3) ═══════════════════ */
/* hard down-offset only, no x-offset -> RTL-neutral */
[data-theme="workbench"] .wb-card {
  background: var(--wb-paper);
  border: 1px solid var(--wb-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 0 -1px var(--wb-tactile-shadow);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-theme="workbench"] .wb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 -1px var(--wb-tactile-shadow-hover);
}
/* shop card also shifts border-color on hover (1o §4 "Cards") */
[data-theme="workbench"] .wb-card-shop:hover {
  border-color: var(--wb-walnut);
}
[data-theme="workbench"] .wb-card-title {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  color: var(--wb-heading);
}

/* category chip */
[data-theme="workbench"] .wb-chip {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--wb-paper-deep);
  color: var(--wb-forest);
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-block;
}
/* product-type badge on media (dark chip) */
[data-theme="workbench"] .wb-badge-dark {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--wb-char);
  color: var(--wb-accent-bright);
  padding: 5px 10px;
  border-radius: 6px;
}

/* ═══════════════════ PROSE (post / page body) ═══════════════════ */
[data-theme="workbench"] .wb-prose {
  font-size: 18px;
  line-height: 1.75;
  max-width: 65ch;
  color: #33291D;
}
[data-theme="workbench"] .wb-prose p {
  margin: 0 0 24px;
}
[data-theme="workbench"] .wb-prose h2 {
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 29px;
  letter-spacing: -0.02em;
  color: var(--wb-heading);
  margin: 0 0 16px;
}
[data-theme="workbench"] .wb-prose h3 {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--wb-heading);
  margin: 0 0 14px;
}
[data-theme="workbench"] .wb-prose strong {
  font-weight: 700;
}
[data-theme="workbench"] .wb-prose blockquote {
  margin: 0 0 32px;
  padding: 6px 0 6px 24px;
  border-inline-start: 4px solid var(--wb-amber);
  font-size: 21px;
  line-height: 1.6;
  font-style: italic;
  color: var(--wb-walnut);
}
[data-theme="workbench"] .wb-prose blockquote cite,
[data-theme="workbench"] .wb-prose blockquote .wb-cite {
  display: block;
  margin-top: 10px;
  font-family: var(--wb-heading-font);
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wb-accent-ink);
}
[data-theme="workbench"] .wb-prose pre {
  background: var(--wb-char);
  color: var(--wb-bone);
  font-family: var(--wb-mono-font);
  font-size: 13.5px;
  line-height: 1.8;
  padding: 22px 24px;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0 0 32px;
  box-shadow: 0 4px 0 -1px rgba(42, 33, 24, 0.25);
}
[data-theme="workbench"] .wb-prose code {
  font-family: var(--wb-mono-font);
  font-size: 15px;
  background: var(--wb-paper-deep);
  color: var(--wb-walnut);
  padding: 2px 7px;
  border-radius: 5px;
}
[data-theme="workbench"] .wb-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: 13.5px;
}
[data-theme="workbench"] .wb-prose img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(74, 55, 40, 0.35);
  box-shadow: 0 5px 0 -2px rgba(42, 33, 24, 0.15);
  filter: sepia(0.14) saturate(0.86) contrast(1.03);
}
[data-theme="workbench"] .wb-prose a {
  color: var(--wb-accent-ink);
}
[data-theme="workbench"] .wb-prose figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--wb-meta);
  text-align: center;
}

/* doodle underline utility — inline SVG data-URI, stretches with word length,
   works in both directions (1o §8) */
[data-theme="workbench"] .wb-doodle {
  padding-bottom: 0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M3 7C22 3 44 8 63 5 82 2 103 7 117 4' fill='none' stroke='%23C6892F' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")
    bottom / 100% 9px no-repeat;
}
@media (max-width: 1023px) {
  [data-theme="workbench"] .wb-doodle {
    background-size: 100% 7px;
  }
}

/* ═══════════════════ FOOTER ═══════════════════ */
[data-theme="workbench"] .wb-footer {
  background: var(--wb-forest);
  color: var(--wb-bone);
  border-top: 1px solid rgba(233, 226, 208, 0.14);
}
[data-theme="workbench"] .wb-footer-inner {
  max-width: var(--wb-container);
  margin: 0 auto;
  padding: 56px var(--wb-gutter) 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.5fr;
  gap: 48px;
}
@media (max-width: 1023px) {
  [data-theme="workbench"] .wb-footer-inner {
    grid-template-columns: 1fr;
    padding: 36px var(--wb-gutter-mobile) 0;
    gap: 24px;
  }
}
[data-theme="workbench"] .wb-footer-brand {
  font-family: var(--wb-heading-font);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
[data-theme="workbench"] .wb-footer-heading {
  font-family: var(--wb-heading-font);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-accent-bright);
}
[data-theme="workbench"] .wb-footer-link {
  font-size: 14.5px;
  color: var(--wb-footer-link);
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="workbench"] .wb-footer-link:hover {
  color: var(--wb-accent-bright);
}
[data-theme="workbench"] .wb-footer-bottom {
  max-width: var(--wb-container);
  margin: 48px auto 0;
  padding: 20px var(--wb-gutter);
  border-top: 1px solid rgba(233, 226, 208, 0.14);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: var(--wb-footer-meta);
}
@media (max-width: 1023px) {
  [data-theme="workbench"] .wb-footer-bottom {
    margin-top: 28px;
    padding: 16px var(--wb-gutter-mobile);
    flex-direction: column;
    gap: 4px;
  }
}

/* ═══════════════════ INPUTS (subscribe) ═══════════════════ */
[data-theme="workbench"] .wb-input {
  background: var(--wb-footer-input-bg);
  border: 1px solid var(--wb-footer-input-border);
  color: var(--wb-bone);
  font-family: var(--wb-body-font);
  font-size: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  outline: none;
}
[data-theme="workbench"] .wb-input::placeholder {
  color: rgba(233, 226, 208, 0.55);
}

/* ═══════════════════ RESPONSIVE (mobile 390) ═══════════════════ */
/* Desktop nav + right-side collapse below lg (1024px); the bespoke
   WorkbenchMobileMenu hamburger (.wb-hamburger) shows below lg. Mirror the
   design's mobile 390. */
@media (max-width: 1023px) {
  [data-theme="workbench"] .wb-nav-links,
  [data-theme="workbench"] .wb-nav-right {
    display: none;
  }
  [data-theme="workbench"] .wb-nav-inner {
    height: 58px;
    padding: 0 12px 0 8px;
  }

  /* ─── Home hero: 2-col grid -> stacked, 58px h1 -> 35px (1c) ─── */
  [data-theme="workbench"] .wb-hero-grid {
    grid-template-columns: 1fr !important;
    padding: 36px 20px 44px !important;
    gap: 18px !important;
  }
  [data-theme="workbench"] .wb-hero-h1 {
    font-size: 35px !important;
    line-height: 1.05 !important;
  }
  [data-theme="workbench"] .wb-hero-cta {
    flex-direction: column !important;
    width: 100%;
  }
  [data-theme="workbench"] .wb-hero-cta a {
    text-align: center;
  }

  /* ─── Section gutters: 48px -> 20px (1c/1e/1k). padding-inline only
       so each section's own top/bottom padding is preserved. ─── */
  [data-theme="workbench"] .wb-section-inner {
    padding-inline: 20px !important;
  }

  /* ─── Section h2 ("Latest from the journal" / "From the project
       bench"): 36px -> 26px (1c) ─── */
  [data-theme="workbench"] .wb-section-h2 {
    font-size: 26px !important;
  }

  /* ─── Journal / project / blog / shop card grids: 3-col -> 1-col
       stacked list on Home (1c uses a horizontal image+text row card),
       2-col on Shop (1l) ─── */
  [data-theme="workbench"] .wb-journal-grid,
  [data-theme="workbench"] .wb-project-grid,
  [data-theme="workbench"] .wb-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-theme="workbench"] .wb-shop-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* ─── Blog masthead h1 "The Journal" / Shop masthead h1 "The Shop":
       48px -> 36px (1f / 1l) ─── */
  [data-theme="workbench"] .wb-listing-h1 {
    font-size: 36px !important;
  }

  /* ─── Shop masthead: on mobile the eyebrow+title stack full-width and the
       "N goods · sorted newest first" meta is dropped (1l has no count line);
       the amber-ink eyebrow shrinks 11px -> 10.5px (1l line 987) ─── */
  [data-theme="workbench"] .wb-shop-masthead {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  [data-theme="workbench"] .wb-shop-count {
    display: none !important;
  }

  /* ─── Post article + Page prose column: add the 20px side gutter the
       mockup uses on mobile (1h/1j — desktop has none because the outer
       canvas already insets it) ─── */
  [data-theme="workbench"] .wb-article,
  [data-theme="workbench"] .wb-page-main {
    padding-inline: 20px !important;
  }
  [data-theme="workbench"] .wb-post-h1 {
    font-size: 31px !important;
    line-height: 1.08 !important;
  }

  /* ─── Product detail: 2-col gallery+info grid -> stacked (1n) ─── */
  [data-theme="workbench"] .wb-product-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [data-theme="workbench"] .wb-product-page {
    padding-inline: 20px !important;
  }
  [data-theme="workbench"] .wb-product-h1 {
    font-size: 31px !important;
    line-height: 1.08 !important;
  }
}

/* wide strips never overflow the document (P-140) */
[data-theme="workbench"] .wb-pill-scroll {
  overflow-x: auto;
}

/* ═══════════════════ RTL (1o §8) ═══════════════════ */
/* logical properties only across the theme (margin-inline / inset-inline /
   border-inline-start already used throughout); arrow glyphs mirror */
[dir="rtl"] [data-theme="workbench"] .wb-arrow {
  display: inline-block;
  transform: scaleX(-1);
}
/* tracking breaks connected Arabic script — zero it on labels under rtl */
[dir="rtl"] [data-theme="workbench"] .wb-nav-link,
[dir="rtl"] [data-theme="workbench"] .wb-pill,
[dir="rtl"] [data-theme="workbench"] .wb-pill-active,
[dir="rtl"] [data-theme="workbench"] .wb-chip,
[dir="rtl"] [data-theme="workbench"] .wb-badge-dark,
[dir="rtl"] [data-theme="workbench"] .wb-footer-heading,
[dir="rtl"] [data-theme="workbench"] .wb-btn-forest,
[dir="rtl"] [data-theme="workbench"] .wb-btn-forest-lg,
[dir="rtl"] [data-theme="workbench"] .wb-btn-amber,
[dir="rtl"] [data-theme="workbench"] .wb-btn-amber-sm,
[dir="rtl"] [data-theme="workbench"] .wb-btn-ghost {
  letter-spacing: 0;
}

/*
 * ═══════════════════ P-094 TOKEN BRIDGE ═══════════════════
 * The commerce archetype + shared components consume the universal
 * --vb-color-* vocabulary. Map Workbench palette -> --vb-color-* at the
 * global [data-theme="workbench"] scope (NOT main-scoped) so /shop and
 * /products/* resolve. No currentColor, no circular refs (1o §1).
 */
[data-theme="workbench"] {
  --vb-color-primary: #2F3D2E;      /* forest — CTA fill */
  --vb-color-primary-fg: #E9E2D0;   /* bone label on forest — 8.8:1 */
  --vb-color-bg: #E9E2D0;           /* bone */
  --vb-color-fg: #2A2118;           /* walnut-ink — 12.9:1 on bone */
  --vb-color-accent: #C6892F;       /* amber */
}