/* BJ-Containers — element defaults and the interactive states every component
   inherits. Every interactive element defines default / hover / focus-visible /
   selected / disabled / loading / empty / success / error; the shared parts live
   here so a component only declares what differs. */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must win over any author `display` rule. Without this
   a component that sets `display: block` on an element silently defeats
   `hidden`, and the element stays visible while scripts believe it is not. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bjc-white);
  color: var(--bjc-ink);
  font-family: var(--bjc-font-sans);
  font-size: var(--bjc-text-base);
  line-height: var(--bjc-leading);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--bjc-3);
  color: var(--bjc-navy);
  font-weight: var(--bjc-weight-bold);
  line-height: var(--bjc-leading-tight);
  text-wrap: balance;
}
h1 { font-size: var(--bjc-text-3xl); }
h2 { font-size: var(--bjc-text-2xl); }
h3 { font-size: var(--bjc-text-xl); }
h4 { font-size: var(--bjc-text-lg); }

@media (min-width: 768px) {
  h1 { font-size: var(--bjc-text-4xl); }
}

p { margin: 0 0 var(--bjc-4); max-width: var(--bjc-measure); }

a { color: var(--bjc-teal-text); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--bjc-navy); }

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

/* ---- focus: always visible, never removed ----------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--bjc-focus-width) solid var(--bjc-focus);
  outline-offset: var(--bjc-focus-offset);
  border-radius: 2px;
}

.bjc-skip-link {
  position: absolute; left: var(--bjc-2); top: var(--bjc-2);
  z-index: var(--bjc-z-dialog);
  padding: var(--bjc-2) var(--bjc-4);
  background: var(--bjc-navy); color: var(--bjc-white);
  text-decoration: none; border-radius: var(--bjc-radius);
  transform: translateY(-200%);
}
.bjc-skip-link:focus-visible { transform: translateY(0); color: var(--bjc-white); }

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

/* ---- buttons ---------------------------------------------------------- */
.bjc-btn {
  --btn-bg: var(--bjc-navy);
  --btn-fg: var(--bjc-white);
  --btn-border: var(--bjc-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bjc-2);
  min-height: var(--bjc-target);
  padding: var(--bjc-3) var(--bjc-5);
  border: 1px solid var(--btn-border);
  border-radius: var(--bjc-radius);
  background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: var(--bjc-weight-medium);
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background var(--bjc-duration) var(--bjc-ease),
              border-color var(--bjc-duration) var(--bjc-ease);
}
.bjc-btn:hover { --btn-bg: var(--bjc-navy-90); --btn-border: var(--bjc-navy-90); color: var(--btn-fg); }
.bjc-btn:active { --btn-bg: #001838; }

.bjc-btn--secondary {
  --btn-bg: var(--bjc-white); --btn-fg: var(--bjc-navy); --btn-border: var(--bjc-navy);
}
.bjc-btn--secondary:hover { --btn-bg: var(--bjc-neutral); --btn-fg: var(--bjc-navy); }

.bjc-btn--quiet {
  --btn-bg: transparent; --btn-fg: var(--bjc-teal-text); --btn-border: transparent;
  padding-inline: var(--bjc-2);
}
.bjc-btn--quiet:hover { --btn-bg: var(--bjc-neutral); --btn-fg: var(--bjc-navy); }

/* Disabled never communicates by colour alone — the cursor and aria state carry it too. */
.bjc-btn[disabled], .bjc-btn[aria-disabled="true"] {
  --btn-bg: #E3E8EA; --btn-fg: #5B686E; --btn-border: #CFD8DB;
  cursor: not-allowed;
}

.bjc-btn[data-loading="true"] { cursor: progress; }
.bjc-btn[data-loading="true"]::before {
  content: ""; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: bjc-spin 700ms linear infinite;
}
@keyframes bjc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bjc-btn[data-loading="true"]::before { animation-duration: 2s; }
}

/* ---- forms ------------------------------------------------------------ */
.bjc-field { margin-bottom: var(--bjc-4); }
.bjc-label {
  display: block; margin-bottom: var(--bjc-1);
  font-size: var(--bjc-text-sm); font-weight: var(--bjc-weight-medium);
  color: var(--bjc-navy);
}
.bjc-label .bjc-optional { font-weight: var(--bjc-weight-normal); color: var(--bjc-ink-muted); }

.bjc-input, .bjc-select, .bjc-textarea {
  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;
}
.bjc-textarea { min-height: 7rem; resize: vertical; }
.bjc-input:hover, .bjc-select:hover, .bjc-textarea:hover { border-color: var(--bjc-navy-70); }

/* A placeholder is never a substitute for a label. */
.bjc-input::placeholder, .bjc-textarea::placeholder { color: #6B777C; }

.bjc-hint { margin-top: var(--bjc-1); font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted); }

.bjc-field[data-invalid="true"] .bjc-input,
.bjc-field[data-invalid="true"] .bjc-select,
.bjc-field[data-invalid="true"] .bjc-textarea { border-color: var(--bjc-error); border-width: 2px; }

.bjc-error {
  display: flex; gap: var(--bjc-2); align-items: flex-start;
  margin-top: var(--bjc-1);
  font-size: var(--bjc-text-sm); color: var(--bjc-error);
}
.bjc-error::before { content: "!"; flex: none; font-weight: var(--bjc-weight-bold); }

.bjc-error-summary {
  margin-bottom: var(--bjc-5); padding: var(--bjc-4);
  border: 2px solid var(--bjc-error); border-radius: var(--bjc-radius);
  background: var(--bjc-error-bg);
}
.bjc-error-summary h2 { font-size: var(--bjc-text-lg); color: var(--bjc-error); }
.bjc-error-summary ul { margin: 0; padding-left: var(--bjc-5); }

.bjc-notice {
  padding: var(--bjc-4); border-left: 4px solid var(--bjc-teal);
  background: var(--bjc-neutral); border-radius: 0 var(--bjc-radius) var(--bjc-radius) 0;
}
.bjc-notice--success { border-left-color: var(--bjc-success); }
.bjc-notice--warning { border-left-color: var(--bjc-warning); }
.bjc-notice--error { border-left-color: var(--bjc-error); background: var(--bjc-error-bg); }

/* ---- empty state ------------------------------------------------------ */
.bjc-empty {
  padding: var(--bjc-7) var(--bjc-4);
  border: 1px dashed var(--bjc-line-strong); border-radius: var(--bjc-radius-lg);
  text-align: center; color: var(--bjc-ink-muted);
}

/* ---- tables ----------------------------------------------------------- */
.bjc-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bjc-table-scroll:focus-visible { outline: var(--bjc-focus-width) solid var(--bjc-focus); outline-offset: var(--bjc-focus-offset); }
.bjc-table-scroll > .bjc-table { min-width: 36rem; }
.bjc-table { width: 100%; border-collapse: collapse; font-size: var(--bjc-text-sm); }
.bjc-table caption { text-align: left; padding-bottom: var(--bjc-2); color: var(--bjc-ink-muted); }
.bjc-table th, .bjc-table td {
  padding: var(--bjc-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bjc-line);
}
.bjc-table th { color: var(--bjc-navy); font-weight: var(--bjc-weight-medium); }
.bjc-table tbody tr:nth-child(odd) { background: var(--bjc-neutral); }
.bjc-table td[data-unknown="true"] { color: var(--bjc-ink-muted); font-style: italic; }

/* ---- price ------------------------------------------------------------ */
.bjc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bjc-2); }
.bjc-price__gross {
  font-size: var(--bjc-text-2xl); font-weight: var(--bjc-weight-bold);
  color: var(--bjc-navy);
}
.bjc-price__basis, .bjc-price__net {
  font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted);
}
.bjc-price__delivery {
  margin-top: var(--bjc-1); font-size: var(--bjc-text-sm); color: var(--bjc-ink-muted);
}
.bjc-price--quote { font-size: var(--bjc-text-lg); color: var(--bjc-navy); font-weight: var(--bjc-weight-medium); }

/* ---- print ------------------------------------------------------------ */
@media print {
  .bjc-site-header, .bjc-site-footer, .bjc-sticky-bar, .bjc-skip-link { display: none !important; }
  body { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ---- inline links, fieldsets and checkboxes ---------------------------- */
/* Added with the revision-3 content pack: the copy register renders link
   fields, grouped form sections and single-choice statements. */

.bjc-link {
  color: var(--bjc-teal-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bjc-link:hover { color: var(--bjc-navy); }

.bjc-fieldset {
  margin: 0 0 var(--bjc-6);
  padding: 0;
  border: 0;
  border-top: 1px solid var(--bjc-line);
  padding-top: var(--bjc-4);
}
.bjc-fieldset:first-of-type { border-top: 0; padding-top: 0; }
.bjc-fieldset > legend {
  padding: 0;
  font-weight: var(--bjc-weight-bold);
  color: var(--bjc-navy);
}

/* A checkbox statement is a sentence the customer agrees with, so the label
   wraps as prose rather than being clipped to one line. */
.bjc-field--check > label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bjc-2);
  align-items: start;
  line-height: var(--bjc-leading);
}
.bjc-field--check input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--bjc-navy);
}
.bjc-field--check .bjc-hint { margin-left: calc(1.15rem + var(--bjc-2)); }

.bjc-address { font-style: normal; line-height: var(--bjc-leading); }

/* ---- search ------------------------------------------------------------ */
.bjc-search { margin-block: var(--bjc-5); }
.bjc-search__row { display: flex; gap: var(--bjc-2); flex-wrap: wrap; }
.bjc-search__row .bjc-input { flex: 1 1 16rem; }

/* The comparison control appears on cards, on the product page and in the
   comparison table itself, so it is styled here rather than in one of them. */
.bjc-compare-toggle { display: inline-block; margin-top: var(--bjc-2); font-size: var(--bjc-text-sm); }
.bjc-compare-toggle--full { color: var(--bjc-ink-muted); }
.bjc-compare-toggle.is-selected { font-weight: var(--bjc-weight-medium); }

/* "vanaf" before a variable product's lowest price. */
.bjc-price__from { 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); align-self: center; }