/* Product page — the same precision as the homepage, applied to one unit.
   Large accurate imagery, a purchase panel that reads as the page's anchor,
   mono figures wherever a number is a measurement, and sections that begin with
   a display heading and a short teal rule. */

.bjc-product { padding-block: var(--bjc-5) var(--bjc-8); }
.bjc-split__main { min-width: 0; }
/* A specification table with long mono values scrolls inside its box on a
   phone rather than widening the page. */
@media (max-width: 640px) { .bjc-specs .bjc-table { display: block; overflow-x: auto; } }

/* ---- head --------------------------------------------------------------- */
/* A band in the brand's technical surface: kicker, display title, the
   record's facts as chips, the article number in mono, and the type render
   standing at the right on wide screens. */
.bjc-product__head {
  position: relative; overflow: hidden;
  display: grid; gap: var(--bjc-5); align-items: center;
  margin: 0 calc(-1 * var(--bjc-gutter)) var(--bjc-6);
  padding: var(--bjc-6) var(--bjc-gutter) var(--bjc-5);
  background: linear-gradient(135deg, var(--bjc-blue-grey) 0%, var(--bjc-warm) 100%);
  border-bottom: 1px solid var(--bjc-line);
}
.bjc-product__head::before {
  content: ""; position: absolute; left: var(--bjc-gutter); top: 0; width: 56px; height: 4px;
  background: var(--bjc-teal); border-radius: 0 0 2px 2px;
}
@media (min-width: 900px) {
  .bjc-product__head--marked { grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 360px); }
  .bjc-product__head { border-radius: 0 0 var(--bjc-radius-xl) var(--bjc-radius-xl); }
}
.bjc-product__head-copy { min-width: 0; }
.bjc-product__head .bjc-kicker a { color: inherit; text-decoration: none; }
.bjc-product__head .bjc-kicker a:hover { text-decoration: underline; }
.bjc-product__head h1 { font-size: var(--bjc-display-2); max-width: 22ch; margin-bottom: var(--bjc-4); }
.bjc-product__chips { display: flex; flex-wrap: wrap; gap: var(--bjc-2); list-style: none; margin: 0 0 var(--bjc-3); padding: 0; }
.bjc-product__chips li {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--bjc-3);
  border: 1px solid var(--bjc-line-strong); border-radius: 999px; background: var(--bjc-white);
  font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium); color: var(--bjc-navy);
}
.bjc-product__chips li:last-child { border-color: var(--bjc-teal); color: var(--bjc-teal-text); }
.bjc-product__meta { margin: 0; font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.bjc-product__meta span + span { text-transform: none; letter-spacing: 0.02em; color: var(--bjc-navy); }
.bjc-product__meta span + span::before { content: "·"; margin: 0 var(--bjc-2); color: var(--bjc-teal); }
.bjc-product__head-mark { display: none; }
@media (min-width: 900px) {
  .bjc-product__head-mark { display: block; justify-self: end; width: 100%; filter: drop-shadow(0 18px 24px rgba(1, 32, 78, 0.18)); }
  .bjc-product__head-mark .bjc-mark { max-width: 100%; }
  .bjc-js .bjc-product__head-mark { animation: bjc-mark-in var(--bjc-dur-mask) var(--bjc-ease-out) both; }
}
@keyframes bjc-mark-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bjc-js .bjc-product__head-mark { animation: none; } }
.bjc-gallery__main.is-swapped .bjc-gallery__img { animation: bjc-swap var(--bjc-dur-medium) var(--bjc-ease-out); }
@keyframes bjc-swap { from { opacity: 0.4; } to { opacity: 1; } }

/* ---- in-page navigation ---------------------------------------------------
   One row of anchors to the sections that rendered. Sticks under the site
   header; the current section is marked by product.js. */
.bjc-product-nav {
  position: sticky; top: 58px; z-index: calc(var(--bjc-z-header) - 1);
  margin: 0 calc(-1 * var(--bjc-gutter)) var(--bjc-6);
  padding: 0 var(--bjc-gutter);
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--bjc-line); border-bottom: 1px solid var(--bjc-line);
}
.bjc-product-nav ul { display: flex; gap: var(--bjc-1); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.bjc-product-nav ul::-webkit-scrollbar { display: none; }
.bjc-product-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--bjc-3);
  color: var(--bjc-ink-muted); text-decoration: none; white-space: nowrap;
  font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium);
  border-bottom: 2px solid transparent;
  transition: color var(--bjc-dur-fast) var(--bjc-ease-out), border-color var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-product-nav a:hover { color: var(--bjc-navy); border-color: var(--bjc-line-strong); }
.bjc-product-nav a[aria-current="true"] { color: var(--bjc-navy); border-color: var(--bjc-teal); }
.bjc-split__main > section[id] { scroll-margin-top: 124px; }

/* Section rhythm: every H2 in the main column gets the teal rule and a mono
   index — the same order the in-page navigation lists, so a reader always
   knows where on the page they are. Subsection H3s get the mono kicker
   treatment at a smaller size. */
.bjc-split__main { counter-reset: bjc-section; }
.bjc-split__main > section[id] { counter-increment: bjc-section; }
.bjc-split__main > section > h2,
.bjc-split__main > section > .bjc-section-head > h2 {
  position: relative; padding-top: var(--bjc-4); margin-bottom: var(--bjc-4);
  font-size: var(--bjc-display-3);
}
.bjc-split__main > section > h2::before,
.bjc-split__main > section > .bjc-section-head > h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--bjc-teal); border-radius: 2px;
}
.bjc-split__main > section[id] > h2::after {
  content: counter(bjc-section, decimal-leading-zero);
  position: absolute; top: 0; right: 0;
  font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); font-weight: var(--bjc-weight-medium);
  letter-spacing: var(--bjc-tracking-label); color: var(--bjc-teal-text); line-height: 1;
}
.bjc-split__main > section h3 {
  margin-top: var(--bjc-5); padding-left: var(--bjc-3);
  border-left: 3px solid var(--bjc-teal);
  font-family: var(--bjc-font-display); font-size: var(--bjc-text-xl); font-weight: var(--bjc-weight-semibold);
  font-variation-settings: "opsz" 24; color: var(--bjc-navy);
}
.bjc-split__main > section .bjc-djourney__label { margin-top: 0; padding-left: 0; border-left: 0; }
.bjc-split__main > section { margin-top: var(--bjc-7); }
.bjc-split__main > section:first-of-type { margin-top: 0; }

/* ---- gallery ------------------------------------------------------------- */
.bjc-gallery__main {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-xl);
}
.bjc-gallery__img { width: 100%; height: 100%; object-fit: cover; }
.bjc-gallery { position: relative; }
.bjc-gallery::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: calc(75% - 6px); height: 14px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(1, 32, 78, 0.28), rgba(1, 32, 78, 0) 70%); filter: blur(6px);
}
.bjc-gallery__thumbs {
  display: flex; gap: var(--bjc-2); overflow-x: auto; scrollbar-width: thin;
  list-style: none; margin: var(--bjc-3) 0 0; padding: 2px;
}
.bjc-gallery__thumb {
  flex: none; width: 96px; height: 72px; padding: 0; overflow: hidden;
  border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius);
  background: var(--bjc-blue-grey); cursor: pointer; line-height: 0;
  transition: border-color var(--bjc-dur-fast) var(--bjc-ease-out), transform var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bjc-gallery__thumb:hover { border-color: var(--bjc-navy); }
.bjc-gallery__thumb[aria-current="true"] { border: 2px solid var(--bjc-teal); }
.bjc-gallery__note { margin-top: var(--bjc-3); font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }

/* ---- key facts: tiles with mono values ----------------------------------- */
/* min(150px, 100%) and min-width: 0 — otherwise a single unbreakable label
   ("TRANSPORTCERTIFICERING", mono, uppercase, tracked) sets each tile's
   min-content width and the grid overflows a phone by 40 px. */
/* One strip of facts rather than a grid of tiles: a tile grid left a lone
   sixth tile on its own row and broke "TRANSPORTCERTIFICERING" mid-word. Each
   fact is a column with a teal rule; the strip wraps as a whole. */
.bjc-keyfacts__list {
  display: flex; flex-wrap: wrap; gap: var(--bjc-4) var(--bjc-6); margin: 0;
  padding: var(--bjc-4) var(--bjc-5);
  background: var(--bjc-warm); border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius-xl);
}
.bjc-keyfacts__item { flex: 1 1 150px; min-width: 0; padding-left: var(--bjc-3); border-left: 2px solid var(--bjc-teal); }
.bjc-keyfacts__item dt {
  font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bjc-ink-muted); hyphens: manual; overflow-wrap: normal;
}
.bjc-keyfacts__item dd { margin: var(--bjc-1) 0 0; font-family: var(--bjc-font-mono); font-size: var(--bjc-text-lg); font-weight: var(--bjc-weight-medium); color: var(--bjc-navy); line-height: 1.25; }
.bjc-keyfacts__item dd small { display: block; font-size: var(--bjc-text-xs); font-weight: var(--bjc-weight-normal); color: var(--bjc-ink-muted); margin-top: 2px; }
@media (max-width: 480px) { .bjc-keyfacts__item { flex-basis: calc(50% - var(--bjc-6)); } }

/* ---- diagrams ------------------------------------------------------------ */
.bjc-diagrams__grid { display: grid; gap: var(--bjc-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bjc-diagram { margin: 0; padding: var(--bjc-4); background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-xl); }
.bjc-diagram svg { width: 100%; height: auto; }
.bjc-diagram figcaption { margin-top: var(--bjc-2); font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); }
.bjc-diagrams__basis, .bjc-diagrams__note { font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }

/* ---- specification table ------------------------------------------------- */
.bjc-specs .bjc-table { border-top: 2px solid var(--bjc-navy); }
.bjc-specs .bjc-table caption { font-family: var(--bjc-font-sans); font-size: var(--bjc-text-sm); letter-spacing: 0; caption-side: bottom; padding-top: var(--bjc-3); }
.bjc-specs .bjc-table th[scope="row"] { width: 42%; color: var(--bjc-ink-muted); font-weight: var(--bjc-weight-normal); }
.bjc-specs .bjc-table td { font-family: var(--bjc-font-mono); color: var(--bjc-navy); }
/* Group heading rows. Written with the element in the selector on purpose:
   base.css sets `.bjc-table th { color: navy }`, which outranks a lone
   `.bjc-table__group { color: white }` — that is how the row became a solid
   navy band with invisible navy text. Light band, teal-text label. */
.bjc-specs .bjc-table tbody tr:has(> th.bjc-table__group) { background: var(--bjc-warm); }
.bjc-specs .bjc-table th.bjc-table__group {
  padding-top: var(--bjc-5); padding-bottom: var(--bjc-2);
  color: var(--bjc-teal-text);
  font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); font-weight: var(--bjc-weight-medium);
  letter-spacing: var(--bjc-tracking-label); text-transform: uppercase;
  border-bottom: 2px solid var(--bjc-teal);
  background: transparent;
}
.bjc-specs__missing { font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }

/* ---- copy, terms, faq --------------------------------------------------- */
.bjc-prose p, .bjc-product-copy p { font-size: var(--bjc-text-lg); }
.bjc-terms__list dt { font-weight: var(--bjc-weight-medium); color: var(--bjc-navy); margin-top: var(--bjc-3); }
.bjc-terms__list dd { margin: var(--bjc-1) 0 0; }
.bjc-terms--payment { margin-block: var(--bjc-6); }
.bjc-faq__item { border-top: 1px solid var(--bjc-line); }
.bjc-faq__item:last-child { border-bottom: 1px solid var(--bjc-line); }
.bjc-faq__item > summary { padding: var(--bjc-3) 0; min-height: var(--bjc-target); cursor: pointer; list-style: none; font-family: var(--bjc-font-display); font-weight: var(--bjc-weight-semibold); color: var(--bjc-navy); display: flex; justify-content: space-between; gap: var(--bjc-4); }
.bjc-faq__item > summary::-webkit-details-marker { display: none; }
.bjc-faq__item > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--bjc-teal); border-bottom: 2px solid var(--bjc-teal); transform: rotate(45deg) translateY(-2px); align-self: center; transition: transform var(--bjc-dur-fast) var(--bjc-ease-out); }
.bjc-faq__item[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.bjc-delivery__permit { font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }

/* ---- dossier ------------------------------------------------------------ */
.bjc-dossier { padding: var(--bjc-5); background: var(--bjc-warm); border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius-xl); }
.bjc-dossier > h2 { padding-top: 0 !important; }
.bjc-dossier > h2::before { display: none; }
.bjc-dossier__actions { display: flex; flex-wrap: wrap; gap: var(--bjc-3); align-items: center; }
.bjc-dossier__version { font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); }
.bjc-dossier-doc__subtitle { margin: 0; color: var(--bjc-teal-text); font-weight: var(--bjc-weight-medium); }
.bjc-dossier-doc__intro { color: var(--bjc-ink-muted); }

/* ---- purchase panel: the anchor ----------------------------------------- */
.bjc-purchase {
  padding: var(--bjc-5);
  border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius-xl);
  background: var(--bjc-white);
  box-shadow: var(--bjc-shadow-lg);
}
.bjc-purchase__sku { margin: 0 0 var(--bjc-3); font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); letter-spacing: var(--bjc-tracking-label); text-transform: uppercase; color: var(--bjc-ink-muted); }
.bjc-purchase__sku span { text-transform: none; letter-spacing: 0.02em; color: var(--bjc-navy); }
.bjc-purchase .bjc-price { align-items: baseline; }
.bjc-purchase .bjc-price__gross { font-family: var(--bjc-font-display); font-size: var(--bjc-display-2); font-weight: var(--bjc-weight-display); letter-spacing: var(--bjc-tracking-display); line-height: 1; }
.bjc-purchase .bjc-price__basis, .bjc-purchase .bjc-price__net { font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); }
.bjc-purchase .bjc-price--quote { font-family: var(--bjc-font-display); font-size: var(--bjc-display-3); }
.bjc-purchase__note { font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
.bjc-price__delivery { margin-top: var(--bjc-3); font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
.bjc-price__delivered { margin: var(--bjc-3) 0 0; padding: var(--bjc-3) var(--bjc-4); background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-lg); font-size: var(--bjc-text-sm); color: var(--bjc-navy); }
.bjc-purchase__stock { margin: var(--bjc-4) 0; font-size: var(--bjc-text-sm); }
.bjc-purchase form.cart { display: grid; gap: var(--bjc-3); }
.bjc-purchase form.cart .quantity { display: flex; }
.bjc-purchase form.cart .quantity input.qty { width: 5rem; min-height: var(--bjc-target); font-family: var(--bjc-font-mono); text-align: center; border: 1px solid var(--bjc-line-strong); border-radius: var(--bjc-radius); font-size: var(--bjc-text-base); }
.bjc-purchase .bjc-btn, .bjc-purchase button[type="submit"] { width: 100%; padding-block: calc(var(--bjc-3) + 2px); font-size: var(--bjc-text-lg); }
.bjc-purchase form.cart button[type="submit"] { background: var(--bjc-teal); border-color: var(--bjc-teal); }
.bjc-purchase form.cart button[type="submit"]:hover { background: #026F7B; border-color: #026F7B; }
.bjc-purchase__alt { margin-top: var(--bjc-3); text-align: center; }
.bjc-purchase__alt .bjc-btn { font-size: var(--bjc-text-base); padding-block: var(--bjc-2); }
.bjc-purchase__compare { margin-top: var(--bjc-2); text-align: center; }
.bjc-purchase__payment { margin: var(--bjc-4) 0 0; padding-top: var(--bjc-3); border-top: 1px solid var(--bjc-line); font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); }

/* ---- variable products: the size choice --------------------------------- */
/* WooCommerce's variations table becomes a labelled select in the panel's
   own form language; the reset link sits under it. */
.bjc-purchase form.variations_form { display: grid; gap: var(--bjc-3); }
.bjc-purchase table.variations { width: 100%; border-collapse: collapse; margin: 0; }
.bjc-purchase table.variations tr { display: grid; gap: var(--bjc-1); }
.bjc-purchase table.variations th, .bjc-purchase table.variations td { padding: 0; border: 0; text-align: left; background: none; }
.bjc-purchase table.variations th label { font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium); color: var(--bjc-navy); }
.bjc-purchase table.variations select {
  width: 100%; min-height: var(--bjc-target); padding: var(--bjc-2) var(--bjc-3);
  border: 1px solid var(--bjc-line-strong); border-radius: var(--bjc-radius);
  background: var(--bjc-white); color: var(--bjc-ink); font: inherit; font-size: var(--bjc-text-base);
}
.bjc-purchase table.variations select:hover { border-color: var(--bjc-navy-70); }
.bjc-purchase .reset_variations { display: inline-block; margin-top: var(--bjc-1); font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); }
.bjc-purchase .woocommerce-variation { padding: var(--bjc-3) var(--bjc-4); background: var(--bjc-blue-grey); border-radius: var(--bjc-radius-lg); }
.bjc-purchase .woocommerce-variation-price .price { font-family: var(--bjc-font-display); font-weight: var(--bjc-weight-semibold); color: var(--bjc-navy); }
.bjc-purchase .woocommerce-variation-price .price del { color: var(--bjc-ink-muted); }
.bjc-purchase .woocommerce-variation-add-to-cart { display: grid; gap: var(--bjc-3); }
.bjc-purchase .woocommerce-variation-add-to-cart .quantity { display: flex; }

/* ---- colour choice: RAL swatches ---------------------------------------- */
.bjc-colours { margin: 0 0 var(--bjc-2); padding: 0; border: 0; min-width: 0; }
.bjc-colours__legend { padding: 0; margin-bottom: var(--bjc-2); font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium); color: var(--bjc-navy); }
.bjc-colours__name { margin-left: var(--bjc-1); font-family: var(--bjc-font-mono); font-weight: var(--bjc-weight-normal); font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); }
.bjc-colours__row { display: flex; flex-wrap: wrap; gap: var(--bjc-3); padding-bottom: 18px; }
.bjc-colours__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bjc-swatch {
  --swatch: #999;
  position: relative; display: inline-block; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(1, 32, 78, 0.18), inset 0 -6px 10px rgba(0, 0, 0, 0.12), inset 0 6px 8px rgba(255, 255, 255, 0.22);
}
.bjc-swatch--pick { cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--bjc-dur-fast) var(--bjc-ease-out), transform var(--bjc-dur-fast) var(--bjc-ease-out); }
.bjc-swatch--pick:hover { transform: scale(1.06); outline-color: var(--bjc-line-strong); }
.bjc-colours__input:checked + .bjc-swatch--pick { outline-color: var(--bjc-navy); }
.bjc-colours__input:checked + .bjc-swatch--pick::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--bjc-white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.bjc-colours__input:focus-visible + .bjc-swatch--pick { outline-color: var(--bjc-focus); }
.bjc-swatch__code { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-family: var(--bjc-font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--bjc-ink-muted); }
.bjc-colours__fixed { display: flex; align-items: center; gap: var(--bjc-2); margin: 0; font-family: var(--bjc-font-mono); font-size: var(--bjc-text-sm); color: var(--bjc-navy); }
.bjc-colours__fixed .bjc-swatch { width: 22px; height: 22px; }
.bjc-colours__note { margin: var(--bjc-2) 0 0; font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); }
.bjc-diagram__basis { display: inline-block; margin-left: var(--bjc-2); padding: 1px 6px; border-radius: 999px; background: var(--bjc-white); color: var(--bjc-teal-text); }

/* ---- alternatives ------------------------------------------------------- */
.bjc-alternatives { margin-top: var(--bjc-8); padding: var(--bjc-6) var(--bjc-5); background: var(--bjc-warm); border-radius: var(--bjc-radius-xl); }
.bjc-alternatives > h2 { font-size: var(--bjc-display-3); }

/* ---- sticky bar --------------------------------------------------------- */
.bjc-sticky-bar__price { font-family: var(--bjc-font-display); font-weight: var(--bjc-weight-semibold); font-size: var(--bjc-text-xl); color: var(--bjc-navy); }

/* The listing's own words for the fitting-out, and the basis of the figures
   above it — both read as text under the strip, never as a figure. */
.bjc-keyfacts__fitted { margin: var(--bjc-3) 0 0; font-size: var(--bjc-text-base); }
.bjc-keyfacts__fitted strong { color: var(--bjc-navy); }
.bjc-keyfacts__basis { margin: var(--bjc-2) 0 0; font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }

/* Plan drawing (D27): the room labels and legend under the figure. */
.bjc-diagram--plan svg text { font-family: var(--bjc-font-mono); }
.bjc-diagram__legend { display: block; margin-top: var(--bjc-1); font-family: var(--bjc-font-sans); font-size: var(--bjc-text-sm); color: var(--bjc-ink); }