/* BJ-Containers — the shell, v2: typography roles, the compact header with its
   category panel, shared decorative primitives, and the motion vocabulary.
   Loaded on every page after layout.css. */

/* ---- type roles --------------------------------------------------------- */
h1, h2, h3, .bjc-display, .bjc-display-2, .bjc-display-3 {
  font-family: var(--bjc-font-display);
  font-weight: var(--bjc-weight-display);
  letter-spacing: var(--bjc-tracking-display);
  font-variation-settings: "opsz" 96;
}
.bjc-display   { font-size: var(--bjc-display-1); line-height: var(--bjc-leading-display); }
.bjc-display-2 { font-size: var(--bjc-display-2); line-height: 1.08; }
.bjc-display-3 { font-size: var(--bjc-display-3); line-height: 1.15; font-variation-settings: "opsz" 40; }
h3, h4 { font-variation-settings: "opsz" 24; font-weight: var(--bjc-weight-semibold); }

.bjc-kicker {
  margin: 0 0 var(--bjc-3);
  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;
  color: var(--bjc-teal-text);
}
.bjc-tag {
  font-family: var(--bjc-font-mono);
  font-size: var(--bjc-text-xs);
  letter-spacing: 0.02em;
}

.bjc-section-head { max-width: 62ch; margin-bottom: var(--bjc-6); }
.bjc-section-head p { color: var(--bjc-ink-muted); font-size: var(--bjc-text-lg); }

.bjc-section--warm { background: var(--bjc-warm); }
.bjc-section--blue { background: var(--bjc-blue-grey); }

/* ---- buttons, extended -------------------------------------------------- */
.bjc-btn { transition: background var(--bjc-dur-fast) var(--bjc-ease-out), border-color var(--bjc-dur-fast) var(--bjc-ease-out), transform var(--bjc-dur-fast) var(--bjc-ease-out); }
.bjc-btn:active { transform: translateY(1px); }
.bjc-btn--lg { padding: calc(var(--bjc-3) + 2px) var(--bjc-6); font-size: var(--bjc-text-lg); }
.bjc-btn--cta { --btn-bg: var(--bjc-teal); --btn-border: var(--bjc-teal); }
.bjc-btn--cta:hover { --btn-bg: #026F7B; --btn-border: #026F7B; }
.bjc-btn--ghost { --btn-bg: transparent; --btn-fg: var(--bjc-navy); --btn-border: var(--bjc-line-strong); }
.bjc-btn--ghost:hover { --btn-bg: var(--bjc-neutral); --btn-fg: var(--bjc-navy); --btn-border: var(--bjc-navy-70); }
.bjc-btn--on-navy { --btn-bg: var(--bjc-white); --btn-fg: var(--bjc-navy); --btn-border: var(--bjc-white); }
.bjc-btn--on-navy:hover { --btn-bg: var(--bjc-neutral); --btn-fg: var(--bjc-navy); --btn-border: var(--bjc-neutral); }

.bjc-link--arrow { text-decoration: none; font-weight: var(--bjc-weight-medium); }
.bjc-link--arrow::after { content: " →"; display: inline-block; transition: transform var(--bjc-dur-fast) var(--bjc-ease-out); }
.bjc-link--arrow:hover::after { transform: translateX(3px); }

/* ---- header ------------------------------------------------------------- */
.bjc-header {
  position: sticky; top: 0; z-index: var(--bjc-z-header);
  background: var(--bjc-white);
  border-bottom: 1px solid var(--bjc-line);
  transition: box-shadow var(--bjc-dur-medium) var(--bjc-ease-out);
}
.bjc-header.is-compact { box-shadow: 0 6px 24px -12px rgba(1, 32, 78, 0.28); }

.bjc-header__service {
  margin: 0;
  background: var(--bjc-navy);
  color: var(--bjc-on-navy-muted);
  font-family: var(--bjc-font-mono);
  font-size: var(--bjc-text-xs);
  letter-spacing: 0.04em;
  line-height: 2.2;
  max-height: 3rem;
  overflow: hidden;
  transition: max-height var(--bjc-dur-medium) var(--bjc-ease-in-out), opacity var(--bjc-dur-medium) var(--bjc-ease-in-out);
}
.bjc-header__service .bjc-wrap { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bjc-header.is-compact .bjc-header__service { max-height: 0; opacity: 0; visibility: hidden; }
/* On a phone the line would truncate and cost a row of viewport; the same
   words are on the homepage hero, so the header stays one row. */
@media (max-width: 599px) { .bjc-header__service { display: none; } }

.bjc-header__bar {
  display: flex; align-items: center; gap: var(--bjc-4);
  min-height: 68px;
  transition: min-height var(--bjc-dur-medium) var(--bjc-ease-in-out);
}
.bjc-header.is-compact .bjc-header__bar { min-height: 58px; }
.bjc-logo img { height: 38px; width: auto; transition: height var(--bjc-dur-medium) var(--bjc-ease-in-out); }
@media (min-width: 900px) { .bjc-logo img { height: 46px; } .bjc-header.is-compact .bjc-logo img { height: 38px; } }

/* The six destinations stay on ONE line, always. layout.css lets a nav list
   wrap, which is right for a footer and wrong here: between the logo and the
   actions the list was the only flexible item, so on a screen just under
   the container width it folded "Contact" onto a second row and the bar grew
   to two lines with the logo and the actions floating at different heights.
   The list now refuses to wrap, the nav is the item that flexes, and the
   link padding and the icon labels step down before the row could run out. */
.bjc-nav--primary { margin-left: var(--bjc-3); flex: 1 1 auto; min-width: 0; }
.bjc-nav--primary > ul { gap: 0; flex-wrap: nowrap; }
.bjc-nav--primary a { font-weight: var(--bjc-weight-medium); font-size: var(--bjc-text-sm); padding-inline: var(--bjc-2); white-space: nowrap; }
@media (min-width: 1300px) { .bjc-nav--primary a { font-size: var(--bjc-text-base); } }
@media (min-width: 1400px) { .bjc-nav--primary a { padding-inline: var(--bjc-3); } .bjc-nav--primary { margin-left: var(--bjc-4); } }

.bjc-header__actions { display: flex; align-items: center; gap: var(--bjc-2); margin-left: auto; flex: none; }
.bjc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bjc-2);
  min-width: var(--bjc-target); min-height: var(--bjc-target);
  padding: 0 var(--bjc-2);
  border: 1px solid transparent; border-radius: var(--bjc-radius);
  background: transparent; color: var(--bjc-navy);
  cursor: pointer; list-style: none; text-decoration: none;
  position: relative;
}
.bjc-icon-btn:hover { background: var(--bjc-neutral); }
.bjc-icon-btn::-webkit-details-marker { display: none; }
.bjc-icon-btn .bjc-nav__count { position: absolute; top: 2px; right: 2px; margin: 0; }
/* The word beside the icon on a wide screen; the icon alone where room is short. */
.bjc-icon-btn__label { display: none; font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium); }
@media (min-width: 1440px) { .bjc-icon-btn__label { display: inline; } .bjc-icon-btn { padding: 0 var(--bjc-3); } }
.bjc-header__actions .bjc-icon-btn { border-color: transparent; transition: background var(--bjc-dur-fast) var(--bjc-ease-out), border-color var(--bjc-dur-fast) var(--bjc-ease-out); }
.bjc-header__actions .bjc-icon-btn:hover { border-color: var(--bjc-line); }
.bjc-header__cta .bjc-btn { white-space: nowrap; }

.bjc-header__cta .bjc-btn { padding-inline: var(--bjc-4); }
@media (max-width: 599px) { .bjc-header__cta { display: none; } }

/* Search: a details popover, keyboard reachable, no JS. */
.bjc-search-toggle { position: relative; }
.bjc-search-toggle__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 2;
  width: min(360px, calc(100vw - 2 * var(--bjc-gutter)));
  padding: var(--bjc-3);
  background: var(--bjc-white);
  border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius-lg);
  box-shadow: var(--bjc-shadow-lg);
}
.bjc-search-toggle .bjc-search { margin: 0; }

/* Mobile menu. */
.bjc-icon-btn--menu span { font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium); }
.bjc-nav-toggle { margin-left: 0; }
.bjc-nav-toggle__panel { max-height: calc(100vh - 80px); overflow-y: auto; }
.bjc-nav-mobile { list-style: none; margin: 0; padding: 0; }
.bjc-nav-mobile > li + li { border-top: 1px solid var(--bjc-line); }
.bjc-nav-mobile a { display: block; padding: var(--bjc-3) 0; color: var(--bjc-navy); text-decoration: none; font-weight: var(--bjc-weight-medium); }
.bjc-nav-mobile__sub { list-style: none; margin: 0 0 var(--bjc-2); padding: 0 0 0 var(--bjc-4); }
.bjc-nav-mobile__sub a { padding: var(--bjc-2) 0; font-weight: var(--bjc-weight-normal); color: var(--bjc-ink); }
.bjc-nav-mobile__cta { margin: var(--bjc-4) 0 0; }
.bjc-nav-mobile__cta .bjc-btn { width: 100%; }

@media (min-width: 900px) { .bjc-nav-toggle { display: none; } }
@media (max-width: 899px) { .bjc-nav--primary { display: none; } }

/* The category panel: real categories, real photographs. Opens on hover and
   on focus-within, and is a plain nested block for the keyboard. */
.bjc-nav__item--mega { position: static; }
.bjc-mega {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--bjc-5) var(--bjc-gutter) var(--bjc-6);
  background: var(--bjc-white);
  border-top: 1px solid var(--bjc-line);
  border-bottom: 1px solid var(--bjc-line);
  box-shadow: 0 24px 40px -24px rgba(1, 32, 78, 0.35);
}
.bjc-nav__item--mega:hover .bjc-mega,
.bjc-nav__item--mega:focus-within .bjc-mega { display: block; animation: bjc-fade-down var(--bjc-dur-medium) var(--bjc-ease-out); }
/* Written with `.bjc-nav` in the selector on purpose: layout.css sets
   `.bjc-nav ul { display: flex }` and `.bjc-nav a { display: inline-flex }`,
   which outrank a lone class — that is how the panel became one giant
   photograph with the label beside it. */
.bjc-nav .bjc-mega__grid {
  display: grid; gap: var(--bjc-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-width: var(--bjc-container-wide); margin: 0 auto;
  list-style: none; padding: 0; flex-wrap: nowrap;
}
.bjc-nav .bjc-mega__grid > li { margin: 0; min-width: 0; }
.bjc-nav .bjc-mega__link {
  display: grid; gap: var(--bjc-2); align-content: start;
  min-height: 0; padding: var(--bjc-2);
  border-radius: var(--bjc-radius-lg);
  color: var(--bjc-navy); text-decoration: none; font-weight: var(--bjc-weight-medium);
  transition: background var(--bjc-dur-fast) var(--bjc-ease-out), transform var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-nav .bjc-mega__link:hover { background: var(--bjc-neutral); transform: translateY(-2px); }
.bjc-nav .bjc-mega__link:hover .bjc-mega__thumb img { transform: scale(1.04); }
.bjc-mega__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--bjc-radius-lg); background: var(--bjc-neutral); }
.bjc-mega__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--bjc-ease-out); }
.bjc-mega__thumb picture { display: block; width: 100%; height: 100%; }
.bjc-mega__label { font-weight: var(--bjc-weight-medium); font-size: var(--bjc-text-sm); line-height: 1.3; }
.bjc-mega__count { font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); color: var(--bjc-ink-muted); }
.bjc-nav .bjc-mega__all { display: inline-flex; margin: var(--bjc-4) 0 0; padding-inline: 0; min-height: 0; color: var(--bjc-teal-text); font-weight: var(--bjc-weight-medium); }
.bjc-nav .bjc-mega__all:hover { background: none; text-decoration: underline; }
.bjc-mega__inner { max-width: var(--bjc-container-wide); margin: 0 auto; }
.bjc-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bjc-4); margin-bottom: var(--bjc-4); }
.bjc-mega__head p { margin: 0; font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); letter-spacing: var(--bjc-tracking-label); text-transform: uppercase; color: var(--bjc-teal-text); }

@keyframes bjc-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- reveal on entry ---------------------------------------------------- */
/* Hidden only when the document is scripted; without JS, or before the
   script runs, nothing is invisible. Stagger comes from --i on the element. */
.bjc-js .bjc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--bjc-dur-section) var(--bjc-ease-out),
              transform var(--bjc-dur-section) var(--bjc-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.bjc-js .bjc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bjc-js .bjc-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- accordion ---------------------------------------------------------- */
.bjc-accordion { border-top: 1px solid var(--bjc-line); }
.bjc-accordion:last-child { border-bottom: 1px solid var(--bjc-line); }
.bjc-accordion > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bjc-4);
  padding: var(--bjc-4) 0;
  min-height: var(--bjc-target);
  cursor: pointer; list-style: none;
  font-family: var(--bjc-font-display); font-weight: var(--bjc-weight-semibold);
  font-size: var(--bjc-text-lg); color: var(--bjc-navy);
}
.bjc-accordion > summary::-webkit-details-marker { display: none; }
.bjc-accordion > summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--bjc-teal); border-bottom: 2px solid var(--bjc-teal);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-accordion[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.bjc-accordion__body { padding: 0 0 var(--bjc-5); }
.bjc-accordion__body p:last-child { margin-bottom: 0; }

/* ---- chips and segmented controls --------------------------------------- */
.bjc-chips { display: flex; flex-wrap: wrap; gap: var(--bjc-2); }
.bjc-chips__input, .bjc-segmented__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bjc-chip {
  display: inline-flex; align-items: center; min-height: var(--bjc-target);
  padding: 0 var(--bjc-4);
  border: 1px solid var(--bjc-line-strong); border-radius: 999px;
  background: var(--bjc-white); color: var(--bjc-navy);
  font-weight: var(--bjc-weight-medium); cursor: pointer;
  transition: background var(--bjc-dur-fast) var(--bjc-ease-out), border-color var(--bjc-dur-fast) var(--bjc-ease-out), color var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-chip:hover { border-color: var(--bjc-navy); }
.bjc-chips__input:checked + .bjc-chip { background: var(--bjc-navy); border-color: var(--bjc-navy); color: var(--bjc-white); }
.bjc-chips__input:focus-visible + .bjc-chip { outline: var(--bjc-focus-width) solid var(--bjc-focus); outline-offset: var(--bjc-focus-offset); }
.bjc-chip--quiet { border-style: dashed; color: var(--bjc-ink-muted); }

.bjc-segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--bjc-line); border-radius: 999px;
  background: var(--bjc-white);
  max-width: 100%; overflow-x: auto;
}
.bjc-segmented__label {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 var(--bjc-4);
  border-radius: 999px;
  color: var(--bjc-navy); font-weight: var(--bjc-weight-medium); white-space: nowrap;
  cursor: pointer;
  transition: background var(--bjc-dur-fast) var(--bjc-ease-out), color var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-segmented__label:hover { background: var(--bjc-neutral); }
.bjc-segmented__input:checked + .bjc-segmented__label { background: var(--bjc-navy); color: var(--bjc-white); }
.bjc-segmented__input:focus-visible + .bjc-segmented__label { outline: var(--bjc-focus-width) solid var(--bjc-focus); outline-offset: 2px; }

/* ---- product card, v2 --------------------------------------------------- */
/* Every product card on the site: catalogue, homepage, alternatives, finder. */
.bjc-card--v2 {
  border: 0; border-radius: var(--bjc-radius-xl); background: var(--bjc-warm);
  transition: transform var(--bjc-dur-fast) var(--bjc-ease-out), box-shadow var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-card--v2:hover { transform: translateY(-2px); box-shadow: var(--bjc-shadow-lg); border-color: transparent; }
.bjc-card--v2 .bjc-card__media { aspect-ratio: 4 / 3; background: var(--bjc-blue-grey); }
.bjc-card--v2 .bjc-card__img { transition: transform 700ms var(--bjc-ease-out); }
.bjc-card--v2:hover .bjc-card__img { transform: scale(1.03); }
.bjc-card--v2 .bjc-card__title { font-family: var(--bjc-font-display); font-size: var(--bjc-text-xl); font-weight: var(--bjc-weight-semibold); letter-spacing: -0.01em; }
.bjc-card--v2 .bjc-card__meta { font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); letter-spacing: 0.02em; }
.bjc-card--v2 .bjc-price__gross { font-family: var(--bjc-font-display); font-weight: var(--bjc-weight-semibold); }

/* ---- delivery journey ---------------------------------------------------- */
/* inc/journey.php. Five illustrated steps on one line; the render carries the
   scene, the mono number and the label carry the order, the pack's sentence
   carries the fact. Same component on the homepage, the product page and the
   delivery page — 'compact' shortens the text and tightens the tiles. */
.bjc-djourney__heading { margin-bottom: var(--bjc-5); }
.bjc-djourney__steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--bjc-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  counter-reset: none;
}
.bjc-djourney__step {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius-xl);
  background: var(--bjc-white); overflow: hidden;
  transition: transform var(--bjc-dur-fast) var(--bjc-ease-out), box-shadow var(--bjc-dur-fast) var(--bjc-ease-out);
}
.bjc-djourney__step:hover { transform: translateY(-2px); box-shadow: var(--bjc-shadow-lg); }
.bjc-djourney__media { aspect-ratio: 3 / 2; background: var(--bjc-warm); border-bottom: 1px solid var(--bjc-line); }
.bjc-djourney__media img { width: 100%; height: 100%; object-fit: cover; }
.bjc-djourney__body { padding: var(--bjc-4); display: grid; gap: var(--bjc-1); }
.bjc-djourney__num { font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); letter-spacing: var(--bjc-tracking-label); color: var(--bjc-teal-text); }
.bjc-djourney__label { margin: 0; font-family: var(--bjc-font-display); font-size: var(--bjc-text-lg); font-weight: var(--bjc-weight-semibold); color: var(--bjc-navy); font-variation-settings: "opsz" 24; }
.bjc-djourney__text { margin: var(--bjc-1) 0 0; font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
.bjc-djourney__more { margin: var(--bjc-4) 0 0; }
/* The arrow between steps on wide screens. */
@media (min-width: 1100px) {
  .bjc-djourney--full .bjc-djourney__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bjc-5); }
  .bjc-djourney--full .bjc-djourney__step:not(:last-child)::after {
    content: "→"; position: absolute; right: calc(-1 * var(--bjc-5) + 4px); top: calc(33% - 0.6em);
    width: calc(var(--bjc-5) - 8px); text-align: center;
    color: var(--bjc-teal); font-size: var(--bjc-text-lg); pointer-events: none;
  }
}
.bjc-djourney--compact .bjc-djourney__steps { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--bjc-3); }
.bjc-djourney--compact .bjc-djourney__body { padding: var(--bjc-3); }
.bjc-djourney--compact .bjc-djourney__label { font-size: var(--bjc-text-base); }
.bjc-djourney--compact .bjc-djourney__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--bjc-text-xs); }
/* Delivery page hero. */
.bjc-delivery-hero { display: block; margin: 0 0 var(--bjc-6); border-radius: var(--bjc-radius-xl); overflow: hidden; background: var(--bjc-warm); border: 1px solid var(--bjc-line); }
.bjc-delivery-hero img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- consent */
/* The privacy choice (register entry 28). Three buttons of equal weight;
   nothing is pre-ticked; the page behind it stays usable. */
.bjc-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--bjc-white); color: var(--bjc-ink);
  border-top: 3px solid var(--bjc-teal);
  box-shadow: 0 -8px 28px rgba(1, 32, 78, 0.16);
  max-height: 85vh; overflow: auto; overscroll-behavior: contain;
}
.bjc-consent__inner {
  max-width: var(--bjc-container); margin: 0 auto;
  padding: var(--bjc-5) var(--bjc-gutter) calc(var(--bjc-5) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bjc-3);
  box-sizing: border-box; width: 100%;
}
.bjc-consent__title {
  margin: 0; font-family: var(--bjc-font-display); font-size: var(--bjc-text-xl);
  font-weight: var(--bjc-weight-semibold); color: var(--bjc-navy); line-height: var(--bjc-leading-tight);
}
.bjc-consent__text { margin: 0; max-width: 78ch; font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }
.bjc-consent__text a { color: var(--bjc-teal-text); }
.bjc-consent__actions { display: grid; gap: var(--bjc-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bjc-consent__actions .bjc-btn,
.bjc-consent__prefs .bjc-btn { min-height: var(--bjc-target); justify-content: center; text-align: center; width: 100%; }
.bjc-consent__prefs {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bjc-3); padding: var(--bjc-4);
  border: 1px solid var(--bjc-line); border-radius: var(--bjc-radius-lg); background: var(--bjc-neutral);
}
.bjc-consent__option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--bjc-3); align-items: start; font-size: var(--bjc-text-sm); }
.bjc-consent__option input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--bjc-teal); }
.bjc-consent__option small {
  display: block; margin-top: var(--bjc-1); color: var(--bjc-ink-muted);
  font-family: var(--bjc-font-mono); font-size: var(--bjc-text-xs); overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .bjc-consent__actions { grid-template-columns: minmax(0, 1fr); }
  .bjc-consent__inner { padding-top: var(--bjc-4); }
}
@media print { .bjc-consent { display: none !important; } }