.bbj {
  --bbj-orange: #e94c00;
  --bbj-orange-dark: #c43f00;
  --bbj-black: #111;
  --bbj-grey: #f4f4f4;
  --bbj-line: #ddd;
  --bbj-text: #222;
  --bbj-muted: #666;
  --bbj-radius: 10px;
  color: var(--bbj-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  font-size: 16px;
  line-height: 1.5;
}
.bbj *, .bbj *::before, .bbj *::after { box-sizing: border-box; }
.bbj h2 { font-size: 1.75rem; line-height: 1.2; margin: 0.5em 0 0.4em; outline: none; }
.bbj h3 { font-size: 1.15rem; margin: 0 0 0.4em; }
.bbj-h2-sub { margin-top: 2em !important; }
.bbj-loading { color: var(--bbj-muted); padding: 40px 0; text-align: center; }
.bbj-error { background: #fdecea; border-left: 4px solid #c62828; padding: 12px 14px; border-radius: 6px; }
.bbj-note, .bbj-small { color: var(--bbj-muted); font-size: 0.9rem; }

.bbj-crumbs { font-size: 0.9rem; color: var(--bbj-muted); margin-bottom: 12px; }
.bbj-link { background: none; border: 0; padding: 0; color: var(--bbj-orange-dark); text-decoration: underline; cursor: pointer; font: inherit; }
.bbj-link:hover, .bbj-link:focus-visible { color: var(--bbj-black); }

.bbj-btn {
  display: inline-block; background: var(--bbj-orange); color: #fff !important; border: 2px solid var(--bbj-orange);
  border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.bbj-btn:hover, .bbj-btn:focus-visible { background: var(--bbj-orange-dark); border-color: var(--bbj-orange-dark); transform: translateY(-1px); }
.bbj-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.bbj-btn--ghost { background: #fff; color: var(--bbj-black) !important; border-color: var(--bbj-black); }
.bbj-btn--ghost:hover, .bbj-btn--ghost:focus-visible { background: var(--bbj-black); color: #fff !important; border-color: var(--bbj-black); }
.bbj-btn--big { font-size: 1.15rem; padding: 14px 32px; margin-top: 16px; }

.bbj-carbar {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  background: var(--bbj-black); color: #fff; border-radius: var(--bbj-radius); padding: 10px 16px; margin-bottom: 16px;
}
.bbj-carbar .bbj-link { color: #fff; }

.bbj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bbj-chip { border: 1px solid var(--bbj-line); border-radius: 999px; padding: 6px 14px; background: #fff; }
.bbj-chip small { color: var(--bbj-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; margin-right: 4px; }
.bbj-chip.is-set { border-color: var(--bbj-orange); }

.bbj-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bbj-pill {
  border: 1px solid var(--bbj-line); background: #fff; border-radius: 8px; padding: 10px 14px; cursor: pointer; font: inherit;
  min-width: 120px; text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bbj-pill:hover, .bbj-pill:focus-visible { border-color: var(--bbj-orange); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

.bbj-gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.bbj-gen {
  display: flex; flex-direction: column; gap: 8px; text-align: left; background: #fff; border: 2px solid var(--bbj-line);
  border-radius: var(--bbj-radius); padding: 10px; cursor: pointer; font: inherit; transition: border-color 0.15s ease, transform 0.15s ease;
}
.bbj-gen img, .bbj-gen__noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--bbj-grey); }
.bbj-gen:hover, .bbj-gen:focus-visible { border-color: var(--bbj-orange); transform: translateY(-2px); }
.bbj-gen.is-selected { border-color: var(--bbj-orange); box-shadow: 0 0 0 3px rgba(233, 76, 0, 0.2); }

.bbj-selected { margin-top: 20px; border-radius: var(--bbj-radius); background: var(--bbj-grey); padding: 18px; }
.bbj-selected > p:first-child { margin: 0; color: var(--bbj-muted); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }

.bbj-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 12px 0; }
.bbj-pcards--primary { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bbj-pcard { background: #fff; border: 1px solid var(--bbj-line); border-radius: var(--bbj-radius); overflow: hidden; display: flex; flex-direction: column; }
.bbj-pcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bbj-grey); }
.bbj-pcard__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bbj-pcard__body p { margin: 0; }
.bbj-pcard__body .bbj-btn { margin-top: auto; align-self: flex-start; }
.bbj-pcard__price { font-weight: 700; }
.bbj-pcard__price s { color: var(--bbj-muted); font-weight: 400; }
.bbj-pcard--primary { border: 2px solid var(--bbj-black); }

.bbj-measure { border: 2px solid var(--bbj-orange); border-radius: var(--bbj-radius); padding: 18px; margin: 16px 0 24px; background: #fff8f4; }
.bbj-visit { background: #fff; border-radius: var(--bbj-radius); padding: 16px; margin-top: 12px; }

.bbj-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; counter-reset: none; }
.bbj-steps li { flex: 1 1 120px; border-bottom: 4px solid var(--bbj-line); padding: 6px 4px; font-size: 0.9rem; color: var(--bbj-muted); }
.bbj-steps li.is-done { border-color: var(--bbj-black); color: var(--bbj-text); }
.bbj-steps li.is-current { border-color: var(--bbj-orange); color: var(--bbj-text); font-weight: 700; }

.bbj-route { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.bbj-summary { position: sticky; top: 16px; background: var(--bbj-grey); border-radius: var(--bbj-radius); padding: 16px; }
.bbj-summary ul { list-style: none; padding: 0; margin: 0 0 12px; }
.bbj-summary li { padding: 6px 0; border-bottom: 1px solid var(--bbj-line); }
.bbj-summary small { color: var(--bbj-muted); }
.bbj-summary__car { margin: 0 0 8px; font-weight: 600; }
.bbj-summary__total { font-size: 1.2rem; margin: 0; }

.bbj-group { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.bbj-group legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; padding: 0; }
.bbj-req { font-weight: 400; color: var(--bbj-muted); font-size: 0.9rem; }
.bbj-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.bbj-card {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--bbj-line);
  border-radius: var(--bbj-radius); cursor: pointer; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bbj-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bbj-card__img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--bbj-grey); }
.bbj-card__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.bbj-card__title { font-weight: 600; }
.bbj-card__price { color: var(--bbj-muted); font-size: 0.9rem; }
.bbj-card--none { justify-content: center; min-height: 64px; }
.bbj-card:hover { border-color: #999; }
.bbj-card:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(233, 76, 0, 0.35); }
.bbj-card:has(input:checked) { border-color: var(--bbj-orange); box-shadow: 0 0 0 3px rgba(233, 76, 0, 0.2); }
.bbj-card:has(input:checked)::after {
  content: "✓"; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bbj-orange); color: #fff; display: grid; place-items: center; font-weight: 700;
}

.bbj-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 8px; }

.bbj-review { width: 100%; border-collapse: collapse; margin: 12px 0; }
.bbj-review th, .bbj-review td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bbj-line); vertical-align: top; }
.bbj-review td:last-child { text-align: right; white-space: nowrap; }
.bbj-review tfoot th, .bbj-review tfoot td { font-weight: 700; font-size: 1.1rem; border-bottom: 0; }

@media (max-width: 860px) {
  .bbj-route { grid-template-columns: 1fr; }
  .bbj-summary { position: static; }
}
@media (max-width: 480px) {
  .bbj { padding: 12px; }
  .bbj h2 { font-size: 1.4rem; }
  .bbj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bbj-gens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bbj-nav .bbj-btn { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bbj * { transition: none !important; }
}

/* The theme styles every <button> (white text, orange hover); restore ours inside the journey. */
.bbj button.bbj-pill, .bbj button.bbj-gen { color: var(--bbj-text); background: #fff; text-transform: none; letter-spacing: normal; font-weight: 400; line-height: 1.3; }
.bbj button.bbj-pill:hover, .bbj button.bbj-pill:focus-visible, .bbj button.bbj-gen:hover, .bbj button.bbj-gen:focus-visible { color: var(--bbj-text); background: #fff; }
.bbj button.bbj-link, .bbj button.bbj-link:hover, .bbj button.bbj-link:focus-visible { background: none; border: 0; padding: 0; box-shadow: none; text-transform: none; font-weight: inherit; line-height: inherit; }
.bbj button.bbj-link { color: var(--bbj-orange-dark); }
.bbj .bbj-carbar button.bbj-link { color: #fff; }
.bbj button.bbj-btn { line-height: 1.3; text-transform: none; }

/* === P3: dog guard route === */
.bbj-lead { margin: -0.2em 0 1em; color: var(--bbj-muted); }
.bbj-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.bbj-gcards .bbj-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bbj-gcard { cursor: default; }
.bbj-gcard input { z-index: 1; }
.bbj-gcard .bbj-card__body { flex: 1; }
.bbj-gcard.bbj-card--none .bbj-card__title { padding-right: 30px; }
.bbj-gcard .bbj-zoom {
  position: relative; z-index: 2; display: block; width: 100%; margin: 0; padding: 8px 12px; border: 0; border-top: 1px solid var(--bbj-line);
  background: #fff; color: var(--bbj-text); font: inherit; font-size: 0.85rem; text-align: left; text-decoration: underline; cursor: pointer;
}
.bbj .bbj-gcard button.bbj-zoom, .bbj .bbj-gcard a.bbj-zoom { color: var(--bbj-text); background: #fff; text-transform: none; letter-spacing: normal; font-weight: 400; line-height: 1.3; border-radius: 0; box-shadow: none; }
.bbj .bbj-gcard button.bbj-zoom:hover, .bbj .bbj-gcard button.bbj-zoom:focus-visible,
.bbj .bbj-gcard a.bbj-zoom:hover, .bbj .bbj-gcard a.bbj-zoom:focus-visible { background: var(--bbj-grey); color: var(--bbj-orange-dark); }
.bbj-gcard .bbj-zoom:focus-visible { outline: 3px solid var(--bbj-orange); outline-offset: -3px; }

.bbj-zoom-dialog { padding: 0; border: 0; border-radius: 12px; width: 100%; max-width: min(92vw, 640px); background: #fff; color: #222; font-family: inherit; }
.bbj-zoom-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.bbj-zoom-dialog__inner { position: relative; }
.bbj-zoom-dialog img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #f4f4f4; }
.bbj-zoom-dialog__foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px 16px; }
.bbj-zoom-dialog__foot p { margin: 0; }
.bbj-zoom-dialog__foot p span { color: #666; margin-left: 6px; }
.bbj-zoom-dialog button.bbj-zoom-dialog__close {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 26px; line-height: 44px; cursor: pointer; text-transform: none;
}
.bbj-zoom-dialog button.bbj-zoom-dialog__pick {
  background: #e94c00; color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 1rem; cursor: pointer; text-transform: none; line-height: 1.3;
}
.bbj-zoom-dialog button.bbj-zoom-dialog__pick:hover, .bbj-zoom-dialog button.bbj-zoom-dialog__pick:focus-visible { background: #c43f00; }
.bbj-zoom-dialog__chosen { font-weight: 700; color: #1b7a32; }
@media (max-width: 480px) {
  .bbj-gcards .bbj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === P1: finder and results === */
.bbj-title { font-size: clamp(2rem, 4.2vw, 3rem) !important; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05 !important; margin: 0.2em 0 0.25em !important; color: var(--bbj-black); text-transform: none; outline: none; }
.bbj-lead { font-size: 1.1rem; margin: 0 0 22px; color: var(--bbj-text); }
.bbj-subtitle { font-size: 1.5rem !important; font-weight: 800; letter-spacing: -0.01em; margin: 28px 0 14px !important; color: var(--bbj-black); text-transform: none; }
.bbj-crumbs a { color: var(--bbj-text); text-decoration: underline; }
.bbj-crumbs button.bbj-link { color: var(--bbj-text); }
.bbj-finder .bbj-btn, .bbj-results .bbj-btn { border-radius: 4px; white-space: nowrap; }
.bbj-eyebrow { margin: 0 0 4px; color: var(--bbj-orange-dark); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }

.bbj-finder .bbj-chips { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; padding: 0; margin: 0 0 8px; }
.bbj-finder .bbj-chip {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 0; padding: 10px 16px;
  background: var(--bbj-grey); border: 2px solid transparent; border-radius: 4px;
}
.bbj-finder .bbj-chip:not(:last-child)::after { content: "›"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--bbj-text); }
.bbj-chip__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bbj-muted); min-width: 0; }
.bbj-chip__value { flex: 1; font-weight: 700; color: var(--bbj-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbj-chip:not(.is-set) .bbj-chip__value { font-weight: 400; color: var(--bbj-muted); }
.bbj-finder .bbj-chip.is-current { border-color: var(--bbj-orange); background: #fff; }
.bbj .bbj-chip button.bbj-link { color: var(--bbj-orange-dark); font-size: 0.9rem; font-weight: 600; }

.bbj-makes { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.bbj button.bbj-make {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 108px; padding: 12px 8px;
  background: #fff; color: var(--bbj-text); border: 1px solid var(--bbj-line); border-radius: 6px; cursor: pointer; font: inherit; font-weight: 600;
  text-transform: none; letter-spacing: normal; line-height: 1.2; text-align: center; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bbj-make img { width: 64px; height: 64px; object-fit: contain; }
.bbj button.bbj-make:hover, .bbj button.bbj-make:focus-visible { background: #fff; color: var(--bbj-text); border-color: var(--bbj-orange); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }

.bbj-finder .bbj-gens { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.bbj-finder .bbj-gens--models { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.bbj .bbj-finder .bbj-gen { align-items: center; text-align: center; padding: 14px 14px 16px; border: 1px solid var(--bbj-line); border-radius: 4px; font-weight: 600; }
.bbj-finder .bbj-gen img, .bbj-finder .bbj-gen__noimg { aspect-ratio: 16 / 10; object-fit: cover; background: var(--bbj-grey); border-radius: 2px; }
.bbj-gen__name { display: block; line-height: 1.3; }
.bbj .bbj-finder .bbj-gen:hover, .bbj .bbj-finder .bbj-gen:focus-visible { border-color: var(--bbj-orange); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }
.bbj .bbj-finder .bbj-gen.is-selected { background: #fff4ee; border: 2px solid var(--bbj-orange); padding: 13px 13px 15px; box-shadow: none; }

.bbj-finder .bbj-selected {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 24px; padding: 20px 22px; background: var(--bbj-grey); border-radius: 4px;
}
.bbj-finder .bbj-selected h3 { font-size: 1.5rem; font-weight: 800; margin: 2px 0 4px; color: var(--bbj-black); }
.bbj-finder .bbj-selected p { margin: 0; }
.bbj-selected__label { font-size: 0.9rem; color: var(--bbj-text); }
.bbj-finder .bbj-selected .bbj-btn { padding: 12px 22px; }

.bbj-results .bbj-pcards--primary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 4px 0 8px; }
.bbj-results .bbj-pcard { border: 1px solid var(--bbj-line); border-radius: 4px; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.bbj-results .bbj-pcard:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.bbj-pcard__media { position: relative; background: #fff; }
.bbj .bbj-pcard__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; padding: 10px; }
.bbj .bbj-results .bbj-pcard--primary .bbj-pcard__media img { aspect-ratio: auto; height: 210px; padding: 14px 18px 0; }
.bbj-pcard h3 { font-size: 1.15rem; font-weight: 800; color: var(--bbj-black); margin: 0; text-transform: none; }
.bbj-pcard--primary h3 { font-size: 1.35rem; }
.bbj-pcard__text { color: var(--bbj-text); font-size: 0.95rem; }
.bbj-results .bbj-pcard__body { padding: 14px 18px 18px; }
.bbj-results .bbj-pcard__body .bbj-btn { margin-top: auto; align-self: stretch; text-align: center; }
.bbj-pcard--primary .bbj-pcard__body .bbj-btn { align-self: flex-start; padding: 11px 22px; }
.bbj-badge { position: absolute; top: 10px; left: 10px; background: var(--bbj-black); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 3px 9px; border-radius: 3px; }
.bbj-pcard.is-out .bbj-pcard__media img { opacity: 0.45; filter: grayscale(1); }
.bbj-pcard.is-out .bbj-pcard__price { color: var(--bbj-muted); font-weight: 400; }
.bbj-save { display: inline-block; margin-left: 6px; background: var(--bbj-orange); color: #fff; font-size: 0.78rem; padding: 2px 8px; border-radius: 3px; vertical-align: middle; }

.bbj-family { margin: 34px 0 0; }
.bbj-family__title { font-size: 1.6rem !important; font-weight: 800; color: var(--bbj-black); margin: 0 0 4px !important; text-transform: none; }
.bbj-family__text { margin: 0 0 14px; color: var(--bbj-text); }
.bbj-family .bbj-pcards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 0; }
.bbj-family--bumper { background: var(--bbj-black); color: #fff; border-radius: 4px; padding: 22px; }
.bbj-family--bumper .bbj-family__title, .bbj-family--bumper .bbj-family__text { color: #fff; }
.bbj-family--bumper .bbj-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bbj-family--bumper .bbj-pcard { flex-direction: row; align-items: stretch; }
.bbj-family--bumper .bbj-pcard__media { flex: 0 0 44%; display: flex; align-items: center; }
.bbj-family--bumper .bbj-pcard h3 { font-size: 1.3rem; }
.bbj-family--bumper .bbj-pcard__body .bbj-btn { align-self: flex-start; }
.bbj-family--bumper .bbj-pcard { color: var(--bbj-text); border-color: #333; }
.bbj-help { margin: 30px 0 0; padding: 16px 18px; background: var(--bbj-grey); border-radius: 4px; }
.bbj-help a, .bbj-visit a, .bbj-finder .bbj-small a { color: var(--bbj-orange-dark); font-weight: 700; }

.bbj-results .bbj-measure {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start;
  margin: 8px 0 30px; padding: 24px; background: #fff8f4; border: 2px solid var(--bbj-orange); border-radius: 4px;
}
.bbj-measure h2 { font-size: 1.75rem !important; font-weight: 800; color: var(--bbj-black); margin: 0 0 8px !important; text-transform: none; }
.bbj-measure .bbj-pcards--offer { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 16px 0 10px; }
.bbj-measure .bbj-pcard__price { line-height: 1.8; }
.bbj-measure .bbj-pcard__body .bbj-btn { align-self: stretch; text-align: center; }
.bbj-measure .bbj-visit { margin: 0; padding: 18px; background: #fff; border: 1px solid var(--bbj-line); border-radius: 4px; }
.bbj-measure .bbj-visit h3 { font-size: 1.3rem; font-weight: 800; color: var(--bbj-black); }
.bbj-visit .wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .bbj-visit .wpcf7 select, .bbj-visit .wpcf7 textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.bbj-visit .wpcf7 p { margin: 0 0 10px; }

.bbj-cat-links { margin: 24px 0; }
.bbj-js .bbj-cat-links { display: none; }
.bbj-cat .bbj { max-width: none; padding-left: 0; padding-right: 0; }
.bbj-cat .woocommerce-products-header .page-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; color: var(--bbj-black); margin: 0.2em 0 0.5em; }

@media (max-width: 860px) {
  .bbj-results .bbj-pcards--primary { grid-template-columns: 1fr; }
  .bbj .bbj-results .bbj-pcard--primary .bbj-pcard__media img { height: 180px; }
  .bbj-results .bbj-measure { grid-template-columns: 1fr; padding: 18px; }
}
@media (max-width: 600px) {
  .bbj-finder .bbj-chips { grid-template-columns: 1fr; gap: 8px; }
  .bbj-finder .bbj-chip:not(:last-child)::after { display: none; }
  .bbj-finder .bbj-chip { min-height: 48px; padding: 8px 12px; }
  .bbj-chip__label { width: 74px; flex: none; }
  .bbj-makes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bbj button.bbj-make { min-height: 92px; font-size: 0.85rem; }
  .bbj-make img { width: 48px; height: 48px; }
  .bbj-finder .bbj-gens, .bbj-finder .bbj-gens--models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bbj .bbj-finder .bbj-gen { padding: 8px 8px 10px; font-size: 0.9rem; }
  .bbj .bbj-finder .bbj-gen.is-selected { padding: 7px 7px 9px; }
  .bbj-finder .bbj-selected { position: sticky; bottom: 0; z-index: 5; margin: 16px 0 0; padding: 14px 12px; border-radius: 4px; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12); }
  .bbj-finder .bbj-selected { gap: 8px; }
  .bbj-finder .bbj-selected h3 { font-size: 1.15rem; }
  .bbj-finder .bbj-selected p { font-size: 0.9rem; }
  .bbj-finder .bbj-selected .bbj-btn { width: 100%; text-align: center; }
  .bbj-family .bbj-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bbj-family--bumper { padding: 16px 10px; }
  .bbj-family--bumper .bbj-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bbj-family--bumper .bbj-pcard { flex-direction: column; }
  .bbj-family--bumper .bbj-pcard__media { flex: none; display: block; }
  .bbj-family--bumper .bbj-pcard h3 { font-size: 1rem; }
  .bbj-family--bumper .bbj-pcard__body .bbj-btn { align-self: stretch; }
  .bbj-results .bbj-pcard__body { padding: 10px 12px 12px; }
  .bbj-family .bbj-pcard h3 { font-size: 1rem; }
  .bbj-family .bbj-pcard__text { font-size: 0.85rem; }
  .bbj-family .bbj-btn { padding: 8px 10px; font-size: 0.9rem; }
  .bbj-measure .bbj-pcards--offer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bbj-family .bbj-btn, .bbj-measure .bbj-btn { white-space: normal; }
  .bbj-results .bbj-measure { padding: 14px; gap: 16px; }
  .bbj-measure h2 { font-size: 1.4rem !important; }
  .bbj-measure .bbj-visit { padding: 14px; }
  .bbj-measure .bbj-pcard h3 { font-size: 1rem; }
  .bbj-measure .bbj-btn { padding: 8px 10px; font-size: 0.9rem; }
}

/* === P2: product page and liner route === */

.bbj-pp { --bbj-orange: #e94c00; --bbj-orange-dark: #c43f00; --bbj-black: #111; --bbj-grey: #f4f4f4; --bbj-line: #d9d9d9; --bbj-text: #1d1d1d; --bbj-muted: #5f5f5f;
  max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; color: var(--bbj-text); font-size: 16px; line-height: 1.5; }
.bbj-pp *, .bbj-pp *::before, .bbj-pp *::after { box-sizing: border-box; }
.bbj-pp .bbj { max-width: none; padding: 0; margin: 0; }
.bbj-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Theme rules style every button; reset ours, then style. */
.bbj-pp__gallery button, .bbj-dialog button, .bbj button.bbj-ocard__more, .bbj .bbj-steps button {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0; color: inherit; font: inherit; line-height: inherit;
  text-transform: none; letter-spacing: normal; box-shadow: none; min-height: 0; width: auto; cursor: pointer; text-shadow: none;
}
.bbj-pp__gallery button:hover, .bbj-pp__gallery button:focus, .bbj-dialog button:hover, .bbj-dialog button:focus { background: none; color: inherit; box-shadow: none; }
.bbj-pp :focus-visible, .bbj-dialog :focus-visible { outline: 3px solid var(--bbj-orange); outline-offset: 2px; }

.bbj-pp__carbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; background: #f2f2f2; padding: 10px 16px; margin: 0 -16px 10px; font-size: 0.95rem; }
.bbj-pp__carbar a, .bbj-pp__crumbs a { color: var(--bbj-orange-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.bbj-pp__crumbs { font-size: 0.85rem; color: var(--bbj-muted); margin: 0 0 16px; }
.bbj-pp__crumbs a { color: inherit; font-weight: 400; }

.bbj-pp__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 28px; }
.bbj-pp__gallery { min-width: 0; }
.bbj-pp__main { margin: 0; background: var(--bbj-grey); border-radius: 4px; overflow: hidden; }
.bbj-pp__main img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.bbj-pp__main figcaption { font-size: 0.8rem; color: var(--bbj-muted); padding: 6px 10px; background: #fff; }
.bbj-pp__main figcaption:empty { display: none; }
.bbj-pp__thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; }
.bbj-pp__thumbs button { display: block; padding: 0; border: 2px solid var(--bbj-line); border-radius: 4px; overflow: hidden; background: #fff; }
.bbj-pp__thumbs button[aria-pressed="true"] { border-color: var(--bbj-orange); }
.bbj-pp__thumbs[hidden] { display: none; }
.bbj-pp__thumbs img { display: block; width: 64px; height: 64px; object-fit: cover; }
.bbj-pp:not(.bbj-pp--promax) [data-route="promax"] { display: none; }

.bbj-pp__eyebrow, .bbj-eyebrow { color: var(--bbj-orange); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 6px; }
.bbj-pp__title h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.05; font-weight: 800; margin: 0 0 10px; color: var(--bbj-black); letter-spacing: -0.01em; }
.bbj-pp__car { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
.bbj-pp__line { color: var(--bbj-muted); margin: 0 0 18px; }
.bbj-pp__cta { border-top: 1px solid var(--bbj-line); padding-top: 14px; }
.bbj-pp__cta p { margin: 0 0 8px; font-size: 0.9rem; color: var(--bbj-muted); }
.bbj-pp__start { display: flex; justify-content: space-between; align-items: center; background: var(--bbj-orange); color: #fff !important; text-decoration: none !important; font-weight: 700; padding: 13px 18px; border-radius: 4px; transition: background 0.15s ease; }
.bbj-pp__start:hover, .bbj-pp__start:focus-visible { background: var(--bbj-orange-dark); }

/* Step bar */
.bbj-stepbar { margin: 0 0 24px; scroll-margin-top: 90px; }
.bbj .bbj-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; background: var(--bbj-black); border-radius: 2px; overflow: hidden; }
.bbj .bbj-steps li { border: 0; border-left: 1px solid #333; padding: 0; margin: 0; color: #fff; font-size: 0.85rem; font-weight: 500; flex: none; }
.bbj .bbj-steps li:first-child { border-left: 0; }
.bbj .bbj-steps li.is-current { background: var(--bbj-orange); font-weight: 700; color: #fff; }
.bbj .bbj-steps li.is-done { color: #fff; }
.bbj .bbj-steps button, .bbj .bbj-steps__item { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 8px 6px; color: inherit; background: none; border: 0; font: inherit; text-align: left; text-transform: none; letter-spacing: normal; }
.bbj .bbj-steps button { cursor: pointer; }
.bbj .bbj-steps button:hover .bbj-steps__l, .bbj .bbj-steps button:focus-visible .bbj-steps__l { text-decoration: underline; text-underline-offset: 3px; }
.bbj .bbj-steps button:hover, .bbj .bbj-steps button:focus { background: rgba(255, 255, 255, 0.08); color: #fff; }
.bbj .bbj-steps li:not(.is-current):not(.is-done) .bbj-steps__item { color: #bdbdbd; }
.bbj-steps__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.78rem; font-weight: 700; }
.bbj .bbj-steps li.is-done .bbj-steps__n { background: #fff; color: var(--bbj-black); border-color: #fff; }

/* Stage */
.bbj .bbj-eyebrow { margin-top: 0; }
.bbj h2.bbj-stage-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.1; margin: 0 0 6px; color: var(--bbj-black); }
.bbj .bbj-intro { margin: 0 0 20px; color: var(--bbj-text); }
.bbj-route--full { grid-template-columns: minmax(0, 1fr) !important; }

/* Option cards */
.bbj .bbj-ogroup { margin: 0 0 24px; }
.bbj .bbj-ogroup__legend { font-size: 1.25rem; font-weight: 800; margin: 0 0 10px; padding: 0; color: var(--bbj-black); }
.bbj .bbj-ogroup__legend .bbj-req { font-size: 0.85rem; font-weight: 400; color: var(--bbj-muted); }
.bbj-ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.bbj-ocards[data-count="1"] { grid-template-columns: minmax(0, 420px); }
.bbj-ocards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bbj-ocards[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bbj-ocard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bbj-line); border-radius: 4px; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.bbj-ocard:hover { border-color: #9a9a9a; }
.bbj-ocard__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bbj-ocard__label { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; cursor: pointer; flex: 1; margin: 0; font-weight: 400; }
.bbj-ocard__head { display: flex; align-items: center; gap: 10px; }
.bbj-ocard__title { font-weight: 700; font-size: 1rem; color: var(--bbj-black); line-height: 1.25; }
.bbj-ocard__mark { flex: none; width: 20px; height: 20px; border: 2px solid #8a8a8a; border-radius: 50%; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.bbj-ocard__input[type="checkbox"] + .bbj-ocard__label .bbj-ocard__mark { border-radius: 4px; }
.bbj-ocard__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bbj-grey); border-radius: 2px; margin-top: 4px; }
.bbj-ocard__visual { display: grid; place-items: center; padding: 6px 0; color: var(--bbj-black); }
.bbj-floor { width: 100%; max-width: 260px; height: auto; }
.bbj-ocard__desc { font-size: 0.9rem; color: var(--bbj-muted); }
.bbj-ocard__price { font-weight: 700; color: var(--bbj-black); margin-top: auto; padding-top: 4px; }
.bbj button.bbj-ocard__more, .bbj-ocard__link { align-self: flex-start; margin: 0 14px 12px; font-size: 0.88rem; color: var(--bbj-orange-dark) !important; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.bbj-ocard__list { margin: 0 14px 10px; font-size: 0.88rem; }
.bbj-ocard__list summary { color: var(--bbj-orange-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
.bbj-ocard__list ul { margin: 6px 0 0; padding-left: 18px; }
.bbj-ocard--none .bbj-ocard__label { justify-content: flex-start; }
.bbj-ocard__input:checked + .bbj-ocard__label .bbj-ocard__mark { border-color: var(--bbj-orange); box-shadow: inset 0 0 0 4px #fff; background: var(--bbj-orange); }
.bbj-ocard:has(.bbj-ocard__input:checked) { border-color: var(--bbj-orange); box-shadow: 0 0 0 1px var(--bbj-orange); background: #fffaf6; }
.bbj-ocard__input:focus-visible + .bbj-ocard__label { outline: 3px solid var(--bbj-orange); outline-offset: 2px; border-radius: 4px; }
.bbj-ocards:has(.bbj-floor) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bbj-check { display: flex; align-items: center; gap: 10px; background: var(--bbj-grey); border-left: 4px solid var(--bbj-orange); padding: 12px 14px; margin: 0 0 20px; font-size: 0.95rem; }
.bbj-check span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bbj-orange); color: #fff; font-size: 0.8rem; font-weight: 700; }

.bbj-package { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; background: var(--bbj-grey); padding: 14px 18px; margin: 4px 0 20px; font-size: 0.92rem; }
.bbj-package > div { flex: 1 1 320px; min-width: 0; }
.bbj-package p { margin: 0 0 4px; }
.bbj-package .bbj-link { font-size: 0.9rem; font-weight: 600; }
.bbj-package__total { flex: 0 0 auto; margin: 0; align-self: center; border-left: 1px solid var(--bbj-line); padding-left: 20px; color: var(--bbj-muted); }
.bbj-package__total strong { color: var(--bbj-black); margin-left: 6px; }

.bbj-notice { background: #fff4ec; border-left: 4px solid var(--bbj-orange); padding: 12px 14px; margin: 0 0 16px; }

/* Footer: back, running total, continue */
.bbj .bbj-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border-top: 1px solid var(--bbj-line); padding-top: 16px; margin-top: 8px; }
.bbj button.bbj-back { background: none; border: 0; padding: 0; color: var(--bbj-orange-dark); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-transform: none; letter-spacing: normal; line-height: 1.4; }
.bbj button.bbj-back:hover, .bbj button.bbj-back:focus { background: none; color: var(--bbj-black); }
.bbj-nav__end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-left: auto; }
.bbj-nav__total { margin: 0; font-size: 0.9rem; color: var(--bbj-muted); }
.bbj-nav__total strong { color: var(--bbj-black); font-size: 1.15rem; margin-left: 6px; }
.bbj button.bbj-cta { border-radius: 4px; padding: 13px 22px; font-size: 1rem; font-weight: 700; display: inline-flex; gap: 10px; align-items: center; }

/* Running summary (V2 p14) */
.bbj .bbj-summary { background: var(--bbj-black); color: #fff; border-top: 4px solid var(--bbj-orange); border-radius: 2px; padding: 18px; position: sticky; top: 16px; }
.bbj .bbj-summary h3 { color: #fff; font-size: 1.25rem; font-weight: 800; margin: 0 0 12px; }
.bbj-summary__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.bbj-summary__head img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: #fff; }
.bbj-summary__head p { margin: 0; display: flex; flex-direction: column; font-size: 0.95rem; }
.bbj-summary__head span { color: #cfcfcf; font-size: 0.85rem; }
.bbj .bbj-summary ul { list-style: none; margin: 0; padding: 0; }
.bbj .bbj-summary__lines > li { border-top: 1px solid #333; padding: 10px 0; }
.bbj-summary__line, .bbj-summary__picks li, .bbj-summary__total { display: flex; justify-content: space-between; gap: 10px; }
.bbj-summary__line span:last-child, .bbj-summary__picks li span:last-child { white-space: nowrap; }
.bbj-summary__line { font-weight: 600; }
.bbj .bbj-summary__picks li { border: 0; padding: 2px 0 0 18px; position: relative; font-size: 0.85rem; color: #dcdcdc; }
.bbj .bbj-summary__picks li::before { content: "✓"; position: absolute; left: 0; color: var(--bbj-orange); font-weight: 700; }
.bbj .bbj-summary__total { border-top: 1px solid #333; padding-top: 12px; margin: 0; align-items: baseline; font-size: 1.05rem; }
.bbj-summary__total strong { font-size: 1.6rem; }
.bbj-summary__note { font-size: 0.8rem; color: #bdbdbd; margin: 8px 0 0; }

/* Review & basket (V5 p9) */
.bbj-config { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; border: 1px solid var(--bbj-line); border-radius: 4px; padding: 20px; margin: 0 0 12px; }
.bbj-config__product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; }
.bbj-config__product h3 { font-size: 1.2rem; font-weight: 800; margin: 10px 0 2px; }
.bbj-config__product p { margin: 0; color: var(--bbj-muted); font-size: 0.9rem; }
.bbj-config__body { border-left: 1px solid var(--bbj-line); padding-left: 24px; min-width: 0; }
.bbj-config__rows { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0; }
.bbj-config__rows th, .bbj-config__rows td { text-align: left; padding: 9px 6px; border: 0; border-bottom: 1px solid #ececec; vertical-align: top; background: none; }
.bbj-config__rows th { font-weight: 400; color: var(--bbj-muted); width: 26%; }
.bbj-config__rows td { font-weight: 600; }
.bbj-config__rows td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.bbj-config__prices { list-style: none; margin: 14px 0 0; padding: 0; font-size: 0.9rem; color: var(--bbj-muted); }
.bbj-config__prices li { display: flex; justify-content: space-between; padding: 2px 6px; }
.bbj-config__total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 0; padding: 10px 6px 0; border-top: 1px solid var(--bbj-line); font-weight: 700; }
.bbj-config__total strong { font-size: 1.5rem; }

/* Vehicle panel and Product details */
.bbj-pp__panel { background: var(--bbj-grey); padding: 22px 24px; margin: 32px 0; border-radius: 2px; }
.bbj-pp__panel h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; color: var(--bbj-black); }
.bbj-pp__panel p:last-child { margin-bottom: 0; }
.bbj-pp__details { max-width: 1200px; margin: 0 auto 32px; padding: 0 16px; }
.bbj-pp__details-head h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 12px; color: #111; }
.bbj-pp__tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid #d9d9d9; margin-bottom: 20px; }
.bbj-pp__details button[role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 0; margin: 0 0 -1px; color: #444; font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; }
.bbj-pp__details button[role="tab"]:hover, .bbj-pp__details button[role="tab"]:focus { background: none; color: #111; }
.bbj-pp__details button[role="tab"][aria-selected="true"] { border-bottom-color: #e94c00; color: #111; }
.bbj-pp__details button[role="tab"]:focus-visible, .bbj-pp__tabpanel:focus-visible { outline: 3px solid #e94c00; outline-offset: 2px; }
.bbj-pp__tabpanel[hidden] { display: none; }
.bbj-pp__tabpanel table.shop_attributes { width: 100%; border-collapse: collapse; }
.bbj-pp__tabpanel table.shop_attributes th, .bbj-pp__tabpanel table.shop_attributes td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e5e5e5; }
.bbj-pp__tabpanel table.shop_attributes td p { margin: 0; }

/* Dialog (View details, floor help) */
.bbj-dialog { border: 0; border-radius: 6px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); color: #1d1d1d; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
.bbj-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.bbj-dialog__inner { position: relative; padding: 24px; }
.bbj-dialog img { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: #f4f4f4; margin-bottom: 14px; }
.bbj-dialog h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 8px; padding-right: 40px; }
.bbj-dialog .bbj-small { color: #5f5f5f; font-size: 0.85rem; }
.bbj-dialog button.bbj-dialog__x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; font-size: 1.8rem; line-height: 1; color: #111; }
.bbj-dialog button.bbj-dialog__close { background: #111; color: #fff; padding: 10px 22px; border-radius: 4px; font-weight: 700; }
.bbj-dialog button.bbj-dialog__close:hover, .bbj-dialog button.bbj-dialog__close:focus { background: #e94c00; color: #fff; }
.bbj-dialog :focus-visible { outline: 3px solid #e94c00; outline-offset: 2px; }

@media (max-width: 900px) {
  .bbj-pp__top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bbj-pp__title { order: -1; }
  .bbj-config { grid-template-columns: minmax(0, 1fr); }
  .bbj-config__product { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
  .bbj-config__product img { grid-row: span 2; }
  .bbj-config__product h3 { margin: 0; }
  .bbj-config__body { border-left: 0; padding-left: 0; }
  .bbj .bbj-summary { position: static; }
}
@media (max-width: 640px) {
  .bbj .bbj-steps button, .bbj .bbj-steps__item { flex-direction: column; gap: 3px; min-height: 58px; padding: 6px 2px; text-align: center; font-size: 0.68rem; line-height: 1.15; }
  .bbj-steps__n { width: 22px; height: 22px; font-size: 0.72rem; }
  .bbj-ocards, .bbj-ocards[data-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bbj-ocards[data-count="1"], .bbj-ocards:has(.bbj-floor), .bbj-ocards:has(.bbj-ocard__list) { grid-template-columns: minmax(0, 1fr); }
  .bbj-ocard__label { padding: 12px 10px 10px; }
  .bbj button.bbj-ocard__more, .bbj-ocard__link { margin: 0 10px 10px; }
  .bbj-package__total { border-left: 0; padding-left: 0; }
  .bbj .bbj-nav { position: sticky; bottom: 0; z-index: 5; background: #fff; margin: 8px -12px 0; padding: 10px 12px; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); }
  .bbj-nav__end { width: 100%; justify-content: space-between; order: -1; }
  .bbj .bbj-nav .bbj-cta { flex: 1 1 auto; justify-content: center; }
  .bbj-nav__total span { display: block; font-size: 0.75rem; }
  .bbj button.bbj-back { font-size: 0.85rem; }
  .bbj-pp__panel { padding: 18px 16px; }
  .bbj-pp__details { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bbj-ocard, .bbj-pp__start, .bbj-ocard__mark { transition: none; }
}

/* === F3: QA-VISUAL-A fixes (focus, car bar, finder on phones, badge) === */
/* Finder keyboard focus: an outline outside the card, distinct from the orange border used for hover and selected. */
.bbj button.bbj-make:focus-visible, .bbj .bbj-finder button.bbj-gen:focus-visible { outline: 3px solid var(--bbj-orange) !important; outline-offset: 3px; }
.bbj button.bbj-make:focus:not(:focus-visible), .bbj .bbj-finder button.bbj-gen:focus:not(:focus-visible) { outline: none; }
.bbj .bbj-finder button.bbj-link:focus-visible, .bbj .bbj-carbar button.bbj-link:focus-visible { outline: 2px solid var(--bbj-orange); outline-offset: 2px; }
/* Headings that receive focus from script (tabindex="-1") show no focus box. */
.bbj [tabindex="-1"]:focus, .bbj-pp [tabindex="-1"]:focus-visible { outline: none; }

/* Car bar on the results and finder route views: the grey V5 bar used on the product page, above the breadcrumb. */
.bbj .bbj-carbar { background: #f2f2f2; color: var(--bbj-text); border-radius: 0; padding: 10px 16px; margin: 0 -16px 10px; font-size: 0.95rem; gap: 6px 16px; }
.bbj .bbj-carbar strong { color: var(--bbj-black); }
.bbj .bbj-carbar button.bbj-link { color: var(--bbj-orange-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bbj .bbj-carbar button.bbj-link:hover { color: var(--bbj-black); }
.bbj-cat-carbar.bbj { padding-top: 0; padding-bottom: 0; }
.bbj-cat-carbar .bbj-carbar { margin: 0 0 10px; }

/* Summary panel: clears the fixed header when it sticks; Auto Express badge below it (V2 p14). */
.bbj .bbj-summary { top: calc(var(--bbj-top, 0px) + 16px); }
.bbj .bbj-summary__badge { display: flex; align-items: center; gap: 12px; margin: 18px -18px -18px; padding: 14px 0 0; background: #fff; color: var(--bbj-text); font-size: 0.9rem; line-height: 1.3; }
/* The footer image also carries a line of text; only its logo (right-hand side) is shown here. */
.bbj .bbj-summary__badge img { width: 45px; height: 71px; max-width: none; object-fit: cover; object-position: right center; flex: none; }
.bbj .bbj-summary__badge strong { display: block; color: var(--bbj-black); }

@media (max-width: 600px) {
  .bbj-finder .bbj-chips { grid-template-columns: minmax(0, 1fr); }
  .bbj-chip__label { width: 92px; white-space: nowrap; }
  .bbj-chip__value { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  /* "Your selected car" stays at the bottom of the screen but as one compact row. */
  .bbj-finder .bbj-selected { flex-wrap: nowrap; padding: 8px 10px; gap: 10px; }
  .bbj-finder .bbj-selected > div { flex: 1 1 auto; min-width: 0; }
  .bbj-finder .bbj-selected p.bbj-selected__label { font-size: 0.75rem; line-height: 1.2; color: var(--bbj-muted); }
  .bbj-finder .bbj-selected p:not(.bbj-selected__label) { display: none; }
  .bbj-finder .bbj-selected h3 { font-size: 0.95rem; line-height: 1.25; margin: 0; }
  .bbj .bbj-finder .bbj-selected .bbj-btn { width: auto; flex: 0 0 auto; max-width: 52%; padding: 9px 12px; font-size: 0.88rem; line-height: 1.25; white-space: normal; }
}
@media (max-width: 480px) {
  .bbj .bbj-carbar { margin: 0 -12px 10px; padding: 8px 12px; font-size: 0.9rem; }
}

/* === F2: typed options (e.g. "Your Car Registration") === */
.bbj .bbj-text { margin: 0 0 22px; }
.bbj .bbj-text label.bbj-ogroup__legend { display: block; }
.bbj .bbj-text__input { display: block; box-sizing: border-box; width: 100%; max-width: 420px; padding: 11px 12px; font: inherit; font-size: 16px; color: var(--bbj-text); background: #fff; border: 2px solid var(--bbj-line); border-radius: var(--bbj-radius); }
.bbj .bbj-text__input:focus-visible { outline: 3px solid var(--bbj-orange); outline-offset: 2px; border-color: var(--bbj-black); }

/* === F4: QA-VISUAL-B fixes (dialog close focus, "Not sure" choice) === */
/* D-4: the enlarged-image dialog's close button and choose button show a focus ring that reads on light or dark photos. */
.bbj-zoom-dialog button.bbj-zoom-dialog__close:focus-visible, .bbj-zoom-dialog button.bbj-zoom-dialog__pick:focus-visible { outline: 3px solid #e94c00 !important; outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.bbj-dialog button.bbj-dialog__x:focus-visible { outline: 3px solid #e94c00 !important; outline-offset: 2px; }
/* D-11: "Not sure? We'll call you to check" sits under the real choices as a quieter, full-width option. */
.bbj-ocards:has(.bbj-ocard--unsure) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bbj-ocards .bbj-ocard--unsure { grid-column: 1 / -1; background: var(--bbj-grey); border-style: dashed; }
.bbj-ocard--unsure .bbj-ocard__label { padding-top: 10px; padding-bottom: 10px; }
.bbj-ocard--unsure .bbj-ocard__title { font-weight: 600; }

/* === G2: V2 p14–p17 and p22 (summary actions, matting, extras, shared detail view, package control, phones) === */
/* p14: summary panel with priced picks, subtotals and the stage's actions. */
.bbj .bbj-summary > .bbj-summary__picks { border-top: 1px solid #333; padding: 10px 0; margin: 0; }
.bbj .bbj-summary > .bbj-summary__picks li { padding: 3px 0 3px 18px; font-size: 0.88rem; color: #e6e6e6; }
.bbj-summary__subs { margin: 0; padding: 10px 0; border-top: 1px solid #333; }
.bbj-summary__subs > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 0.9rem; }
.bbj-summary__subs dt { margin: 0; color: #dcdcdc; font-weight: 400; }
.bbj-summary__subs dd { margin: 0; color: #fff; font-weight: 700; white-space: nowrap; }
.bbj-summary__actions { margin: 14px 0 0; }
.bbj .bbj-summary__actions button.bbj-cta { display: flex; width: 100%; justify-content: center; text-align: center; white-space: normal; }
.bbj-summary__actions p { margin: 8px 0 0; text-align: center; }
.bbj .bbj-summary button.bbj-back { color: #fff; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.bbj .bbj-summary button.bbj-back:hover, .bbj .bbj-summary button.bbj-back:focus-visible { color: #fff; text-decoration-thickness: 2px; }
.bbj .bbj-summary button.bbj-back:focus-visible, .bbj .bbj-summary button.bbj-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bbj-summary .bbj-summary__note { text-align: center; }
.bbj .bbj-summary__picks:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bbj-nav__car { display: none; }
.bbj .bbj-backrow { margin: 12px 0 0; }
@media (min-width: 901px) {
  /* The panel holds Back and Continue, so the copies under the choices are not shown (one primary button). */
  .bbj .bbj-route__main > .bbj-nav, .bbj .bbj-route__main > .bbj-backrow { display: none; }
  .bbj .bbj-summary { display: flex; flex-direction: column; max-height: calc(100vh - var(--bbj-top, 0px) - 32px); }
  .bbj .bbj-summary > * { flex: none; }
  .bbj .bbj-summary > .bbj-summary__picks { flex: 0 1 auto; min-height: 56px; overflow-y: auto; }
}
@media (max-width: 900px) {
  .bbj-summary__actions { display: none; }
}

/* p15: kind strips, card notes, "No matting" picture, three cards across; price and detail link on one line. */
.bbj-kinds { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding: 0; margin: 0 0 18px; }
.bbj .bbj-kind { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; background: #fff; border-left: 4px solid var(--bbj-orange); }
.bbj-kind__text strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--bbj-black); }
.bbj-kind__text span { display: block; font-size: 0.85rem; color: var(--bbj-text); line-height: 1.35; }
.bbj-kind img { flex: none; width: 72px; height: 56px; object-fit: cover; border-radius: 2px; background: var(--bbj-grey); }
.bbj-ocard__note { font-size: 0.8rem; color: var(--bbj-muted); }
.bbj-ocard__visual:has(.bbj-blank) { display: block; padding: 0; }
.bbj-blank { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; margin-top: 4px; background: #e9e9e9; border-radius: 2px; }
.bbj-blank::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 5px; border-radius: 2px; background: #9a9a9a; transform: translate(-50%, -50%); }
.bbj-ocards[data-count="5"], .bbj-ocards[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 641px) {
  .bbj .bbj-ocard--more > button.bbj-ocard__more { position: absolute; right: 14px; bottom: 12px; margin: 0; }
  .bbj-ocard--more .bbj-ocard__price { padding-right: 104px; }
}

/* G2: package control at the top of Matting (V5 p5, V2 p16). */
.bbj .bbj-pkg { outline: none; }
.bbj-pkg .bbj-ocard__label { padding: 12px 14px; }
.bbj-pkg .bbj-ocard__title { font-size: 1.02rem; }

/* p17: the shared detail view. */
dialog.bbj-view-dialog { width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border-radius: 10px; padding: 0; }
.bbj-view { position: relative; }
.bbj-view__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bbj-view__media { padding: 24px 24px 18px; border-right: 1px solid #e3e3e3; min-width: 0; }
.bbj-view__info { padding: 64px 28px 18px; min-width: 0; }
.bbj-view-dialog h2.bbj-view__title { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: 0; padding: 0 48px 0 0; color: #111; }
.bbj-view__sub { font-size: 1.1rem; margin: 2px 0 14px; color: #333; }
.bbj-view__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; border-radius: 4px; }
.bbj-view-dialog .bbj-view__stage img { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; background: #fff; }
.bbj-view__stage.is-video { background: #111; }
.bbj-view__stage iframe, .bbj-view__stage video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.bbj-view-dialog button.bbj-view__play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; color: #fff; background: #111; font-weight: 700; font-size: 1.1rem; }
.bbj-view-dialog button.bbj-view__play:hover, .bbj-view-dialog button.bbj-view__play:focus { background: #222; color: #fff; }
.bbj-view__play small { font-weight: 400; font-size: 0.8rem; color: #ccc; }
.bbj-view__playicon, .bbj-view__vthumb { position: relative; display: block; }
.bbj-view__playicon { width: 68px; height: 68px; border: 2px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.bbj-view__playicon::after, .bbj-view__vthumb::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-color: transparent transparent transparent currentColor; }
.bbj-view__playicon::after { border-width: 13px 0 13px 22px; color: #fff; }
.bbj-view__ext { position: absolute; left: 12px; bottom: 8px; padding: 10px 0; color: #fff !important; font-size: 0.85rem; text-decoration: underline; }
.bbj-view__thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 14px 0 0; }
.bbj-view__thumbs li { margin: 0; }
.bbj-view-dialog .bbj-view__thumbs button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 124px; font-size: 0.82rem; color: #222; }
.bbj-view-dialog .bbj-view__thumbs img, .bbj-view__vthumb { width: 124px; height: 84px; margin: 0; object-fit: contain; border: 2px solid #dcdcdc; border-radius: 6px; background: #f4f4f4; }
.bbj-view__vthumb { background: #2a2a2a; color: #fff; }
.bbj-view__vthumb::after { border-width: 11px 0 11px 18px; }
.bbj-view-dialog .bbj-view__thumbs button[aria-pressed="true"] img, .bbj-view-dialog .bbj-view__thumbs button[aria-pressed="true"] .bbj-view__vthumb { border-color: #e94c00; }
.bbj-view__info > p.bbj-view__name { font-size: 2.2rem; font-weight: 800; line-height: 1.1; margin: 0 0 6px; color: #111; }
.bbj-view__info > p.bbj-view__price { font-size: 2.2rem; font-weight: 800; line-height: 1.1; margin: 0 0 14px; color: #e94c00; }
.bbj-view__info > p { margin: 0 0 12px; font-size: 1.05rem; }
.bbj-view__mode { display: inline-flex; padding: 3px; margin: 4px 0 16px; background: #eee; border-radius: 999px; }
.bbj-view-dialog .bbj-view__mode button { min-height: 40px; padding: 8px 28px; border-radius: 999px; font-weight: 600; color: #222; }
.bbj-view-dialog .bbj-view__mode button[aria-pressed="true"] { background: #e94c00; color: #fff; }
.bbj-view__action { margin: 0 0 6px; }
.bbj-view-dialog button.bbj-view__add { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 20px; border-radius: 6px; background: #e94c00; color: #fff; font-weight: 700; font-size: 1.15rem; }
.bbj-view-dialog button.bbj-view__add:hover, .bbj-view-dialog button.bbj-view__add:focus { background: #c43f00; color: #fff; }
.bbj-view__chosen { margin: 0 0 4px; font-weight: 700; font-size: 1.05rem; color: #1b7a32; }
.bbj-view-dialog button.bbj-view__remove, .bbj-view-dialog button.bbj-view__back { min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: #111; }
.bbj-view-dialog button.bbj-view__back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.bbj-view-dialog button.bbj-view__back span:first-child { font-size: 1.4rem; line-height: 1; }
.bbj-view__backtext { text-decoration: underline; text-underline-offset: 3px; }
.bbj-view__keep { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 24px; border-top: 1px solid #e3e3e3; color: #444; font-size: 0.92rem; }
.bbj-view-dialog button.bbj-view__x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; font-size: 1.9rem; line-height: 1; color: #555; }
@media (max-width: 700px) {
  dialog.bbj-view-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .bbj-view__grid { grid-template-columns: minmax(0, 1fr); }
  .bbj-view__media { padding: 16px 16px 8px; border-right: 0; }
  .bbj-view__info { padding: 4px 16px 10px; }
  .bbj-view-dialog h2.bbj-view__title { font-size: 1.5rem; }
  .bbj-view__info > p.bbj-view__name { display: none; }
  .bbj-view__info > p.bbj-view__price { font-size: 1.6rem; margin-bottom: 8px; }
  .bbj-view__info > p { font-size: 1rem; }
  .bbj-view-dialog .bbj-view__thumbs button { width: 92px; }
  .bbj-view-dialog .bbj-view__thumbs img, .bbj-view__vthumb { width: 92px; height: 64px; }
  .bbj-view__keep { padding: 12px 16px; font-size: 0.85rem; }
}

/* G2: confirm before a package change removes paid choices (V2 p16). */
dialog.bbj-confirm { width: min(520px, calc(100vw - 24px)); }
.bbj-confirm__list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid #e3e3e3; }
.bbj-confirm__list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #e3e3e3; font-weight: 600; }
.bbj-confirm__total { font-size: 1.05rem; }
.bbj-confirm__actions { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
.bbj-dialog button.bbj-confirm__ok { min-height: 46px; padding: 10px 20px; border-radius: 4px; background: #e94c00; color: #fff; font-weight: 700; }
.bbj-dialog button.bbj-confirm__ok:hover, .bbj-dialog button.bbj-confirm__ok:focus { background: #c43f00; color: #fff; }
.bbj-dialog button.bbj-confirm__cancel { min-height: 46px; padding: 10px 20px; border: 2px solid #111; border-radius: 4px; color: #111; font-weight: 700; }
.bbj-dialog button.bbj-confirm__cancel:hover, .bbj-dialog button.bbj-confirm__cancel:focus { background: #111; color: #fff; }

/* p22: on phones the sticky bar keeps the car, the total and the next action; secondary controls are 44 px tall. */
@media (max-width: 640px) {
  .bbj-ocards[data-count="5"], .bbj-ocards[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bbj-pkg .bbj-ocards { grid-template-columns: minmax(0, 1fr); }
  .bbj .bbj-nav { gap: 2px 12px; padding: 4px 12px 10px; bottom: var(--bbj-bottom, 0px); }
  .bbj .bbj-nav__car { order: -2; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0; font-size: 0.85rem; }
  .bbj-nav__car > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bbj .bbj-nav__car button.bbj-link { flex: none; font-weight: 600; }
  .bbj .bbj-backrow { margin: 4px 0 0; }
  .bbj button.bbj-link, .bbj button.bbj-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
  .bbj .bbj-nav__end { flex-wrap: nowrap; gap: 10px; }
  .bbj .bbj-nav__total { flex: none; max-width: 118px; line-height: 1.2; }
  .bbj .bbj-nav__total strong { margin-left: 0; }
  .bbj .bbj-nav .bbj-cta { min-width: 0; padding: 12px 14px; line-height: 1.25; text-align: center; white-space: normal; }
  .bbj button.bbj-ocard__more, .bbj .bbj-ocard__link { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 10px 2px; }
  .bbj .bbj-ocard__list summary { display: flex; align-items: center; min-height: 44px; }
  .bbj .bbj-gcard .bbj-zoom { min-height: 44px; }
  .bbj-pp__carbar a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* === F7: final verification fixes (VERIFY-1 M1, L4; VERIFY-2 D-4, D-6, D-8) === */
/* M1: every primary button shows a two-tone focus ring: a white 2 px band against the button, then a 3 px near-black
   outline against the page (black on orange ≈ 4.9:1, white on orange ≈ 3.8:1, black on white ≈ 18:1). On the dark
   summary panels the colours swap so the outer ring stays visible. */
.bbj .bbj-btn:focus-visible, .bbj-btn:focus-visible, .bbj .bbj-pp__start:focus-visible, .bbj-pp__start:focus-visible,
.bbj-view-dialog button.bbj-view__add:focus-visible, .bbj-dialog button.bbj-confirm__ok:focus-visible {
  outline: 3px solid #111 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #fff !important;
}
.bbj .bbj-summary .bbj-btn:focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 2px #111 !important; }
/* L4: the landing page's stored-car buttons are square-cornered like the finder and results buttons. */
.bbj-landing .bbj-btn { border-radius: 4px; }
/* D-4: guard-route bumper cards carry the Extras step's one-line explanation. */
.bbj-card__desc { font-size: 0.9rem; line-height: 1.35; color: var(--bbj-text); }
/* D-6: Images / Video toggle at least 44 px tall. */
.bbj-view-dialog .bbj-view__mode button { min-height: 44px; }
/* D-8: "Close video" sits on the playing video; the view still closes with Escape, × or Back. */
.bbj-view-dialog button.bbj-view__stop { position: absolute; right: 10px; bottom: 8px; z-index: 2; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.85rem; font-weight: 600; }
.bbj-view-dialog button.bbj-view__stop:hover, .bbj-view-dialog button.bbj-view__stop:focus { background: #000; color: #fff; }
.bbj-view-dialog button.bbj-view__stop:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px; }

/* === R1: Custom Options (boot layout sub-heading, liner extras that need the raised floor) === */
#bbj-app .bbj-subhead { font-size: 1.15rem; margin: 28px 0 4px; }
.bbj-ocard.is-disabled .bbj-ocard__label { cursor: not-allowed; background: var(--bbj-grey, #f4f4f4); }
.bbj-ocard.is-disabled .bbj-ocard__head, .bbj-ocard.is-disabled .bbj-ocard__price, .bbj-ocard.is-disabled .bbj-ocard__note { opacity: 0.6; }
.bbj-ocard__why { display: block; font-size: 0.85rem; color: var(--bbj-text, #1d1d1d); font-weight: 600; }
/* N (A2, client 13 Oct 2026): a "NOT compatible" floor answer, greyed out with "Sorry, this floor option is not compatible." */
.bbj-ocard--incompatible .bbj-ocard__label { border-style: dashed; }
.bbj-ocard--incompatible .bbj-ocard__visual, .bbj-ocard--incompatible .bbj-ocard__img, .bbj-ocard--incompatible .bbj-ocard__desc { opacity: 0.45; }
.bbj-ocard--incompatible .bbj-ocard__why { color: #7a1f1f; }
/* A long car name in the phone bar (nowrap, ellipsis) must not widen the route column: BMW X5, BMW 1-Series, Volvo
   V60 and Renault Megane Sport Tourer pages were 108–256 px wider than a 375 px screen. */
.bbj-route__main { min-width: 0; }

/* === N (A1, client 13 Oct 2026): a seventh step ("Requirements") in the bar: long labels break rather than overflow on phones === */
.bbj .bbj-steps__l { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 640px) {
  .bbj .bbj-steps[data-count="7"] button, .bbj .bbj-steps[data-count="7"] .bbj-steps__item { font-size: 0.62rem; padding: 6px 1px; }
}

/* === N (A4, client 13 Oct 2026): "Premium Trim included" in the finish step === */
.bbj-trim-incl .bbj-check { margin: 4px 0 0; }

/* === F9: option card focus ring === */
/* The keyboard focus ring goes round the whole card, so a card's "View details" link stays inside it (it ringed only
   the label, which on phones put "View details" in a box of its own under a focused package card, e.g. after the
   basket's "Edit package"). Browsers without :has() keep the ring on the label. */
.bbj-ocard:has(> .bbj-ocard__input:focus-visible) { outline: 3px solid var(--bbj-orange); outline-offset: 2px; }
.bbj-ocard:has(> .bbj-ocard__input:focus-visible) > .bbj-ocard__label { outline: none; }

/* === F10: required choices in view, messages where the customer is looking === */
/* A group still missing after Continue, Add or Update: red border and its own message under the heading. */
.bbj .bbj-group.is-missing, .bbj .bbj-text.is-missing { border: 2px solid #c62828; border-radius: 8px; padding: 10px 12px 12px; background: #fff8f7; }
.bbj .bbj-group.is-missing > legend:not(.bbj-sr) { float: left; width: 100%; padding: 0; margin: 0 0 8px; }
.bbj .bbj-group.is-missing > legend:not(.bbj-sr) + .bbj-group__error { clear: both; }
.bbj .bbj-group__error { margin: 0 0 10px; padding: 0; color: #b71c1c; font-weight: 700; font-size: 0.95rem; }
.bbj .bbj-group__error::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #c62828; color: #fff; font-size: 0.8rem; vertical-align: 1px; }
/* Beside the button that was pressed (summary panel, under the choices, phone bar). */
.bbj .bbj-cta-msg { margin: 10px 0 0; padding: 8px 10px; border-left: 4px solid #c62828; border-radius: 4px; background: #fdecea; color: #7f1414; font-size: 0.9rem; line-height: 1.35; text-align: left; }
.bbj .bbj-cta-msg button.bbj-link { display: inline; width: auto; min-height: 0; padding: 0; color: #7f1414; font-weight: 700; text-align: left; }
.bbj .bbj-summary .bbj-cta-msg button.bbj-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #111; }
.bbj .bbj-nav > .bbj-cta-msg { order: -3; flex: 1 1 100%; margin: 6px 0 2px; }
@media (max-width: 640px) {
  .bbj .bbj-nav > .bbj-cta-msg { margin: 6px 0 0; padding: 6px 8px; font-size: 0.85rem; }
  .bbj .bbj-nav > .bbj-cta-msg button.bbj-link { min-height: 0; display: inline; }
}
/* A group that has just appeared or is being pointed to: a short orange glow. */
.bbj .bbj-flash { animation: bbj-flash 1.8s ease-out 1; border-radius: 8px; }
@keyframes bbj-flash {
  0%, 35% { box-shadow: 0 0 0 4px rgba(233, 76, 0, 0.55); background-color: #fff3ec; }
  100% { box-shadow: 0 0 0 4px rgba(233, 76, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bbj .bbj-flash { animation: none; box-shadow: 0 0 0 4px rgba(233, 76, 0, 0.55); }
}
/* The package-change message inside the package control. */
.bbj .bbj-pkg__notice { margin: 12px 0 0; }
/* Finder on phones: the sticky "Your selected car" row (with See all products) sits above a full-width bar fixed to the
   bottom of the window (staging's notice, a cookie bar), as the route's phone bar does; it was hidden under it. */
.bbj-finder .bbj-selected { bottom: var(--bbj-bottom, 0px); }

/* === J: review fixes (8 Oct) === */
/* A4: Measure & Fit panel, information only: how to book under the offers; a guard-only panel sits under the main cards. */
.bbj-measure .bbj-measure__book { font-size: 1.15rem; font-weight: 800; color: var(--bbj-black); margin: 14px 0 6px; text-transform: none; }
.bbj-measure .bbj-measure__main a { color: var(--bbj-orange-dark); font-weight: 700; overflow-wrap: anywhere; }
.bbj-results .bbj-measure--guard { margin-top: 24px; }
.bbj-measure .bbj-pcard--offer .bbj-pcard__text { font-size: 0.9rem; }

/* === M: matting (8 Oct) === */
/* Rubber mat, then vet bedding (fitting order), each with its V2 p15 strip under the section heading. */
.bbj .bbj-matsec { margin: 0 0 30px; }
.bbj .bbj-matsec__strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 560px; margin: 0 0 14px; padding: 10px 14px; background: #fff; border-left: 4px solid var(--bbj-orange); font-size: 0.9rem; line-height: 1.35; color: var(--bbj-text); }
.bbj .bbj-matsec__strip img { flex: none; width: 72px; height: 56px; object-fit: cover; border-radius: 2px; background: var(--bbj-grey); }
/* The rubber mat section (two cards) uses the bedding section's columns, so cards line up and stay the same size. */
.bbj .bbj-matsec .bbj-ocards[data-count="2"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .bbj .bbj-matsec .bbj-ocards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === O: floor diagrams and help pop-ups (client 13 Oct 2026) === */
.bbj-help-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.bbj-dialog ul { margin: 0 0 14px; padding-left: 22px; }
.bbj-dialog li { margin: 4px 0; }
.bbj-dialog p a { color: var(--bbj-orange-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bbj-dialog p a:hover, .bbj-dialog p a:focus-visible { color: var(--bbj-black); }

/* === Lead (client 13 Oct 2026, Skoda Elroq photos): a floor answer's photo shows whole === */
/* The card crops other images to 16:10 (cover). A floor photo carries the client's markings, so it keeps its own
   proportions and is never cropped; a light grey band fills any gap. */
.bbj-ocard__img--whole { aspect-ratio: auto; max-height: 240px; object-fit: contain; background: var(--bbj-grey); }

/* === P (client 14 Oct 2026): floor photo detail view, help buttons, finder "Can't see your vehicle?" === */
/* 1. A floor answer's photo opens as the original, whole; "Zoom in" shows it at full size inside the same box, which
   then scrolls (drag with a mouse, swipe or wheel otherwise); "Open full-size image" links to the file itself. */
.bbj-view__stage.is-zoomable { aspect-ratio: auto; height: clamp(260px, 60vh, 640px); display: block; background: var(--bbj-grey); }
.bbj-view__stage.is-zoomable .bbj-view__pan { display: grid; place-items: center; width: 100%; height: 100%; }
.bbj-view-dialog .bbj-view__stage.is-zoomable img { cursor: zoom-in; background: var(--bbj-grey); user-select: none; -webkit-user-drag: none; }
.bbj-view__stage.is-zoomable.is-zoom .bbj-view__pan { display: block; overflow: auto; -webkit-overflow-scrolling: touch; }
.bbj-view-dialog .bbj-view__stage.is-zoomable.is-zoom img { width: auto; height: auto; max-width: none; max-height: none; object-fit: none; cursor: grab; display: block; }
.bbj-view-dialog .bbj-view__stage.is-zoomable.is-zoom img:active { cursor: grabbing; }
.bbj-view__zoomtools { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; pointer-events: none; }
.bbj-view__zoomtools > * { pointer-events: auto; }
.bbj-view-dialog button.bbj-view__zoom { background: rgba(17, 17, 17, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 0.9rem; line-height: 1.2; cursor: pointer; }
.bbj-view-dialog button.bbj-view__zoom:hover, .bbj-view-dialog button.bbj-view__zoom:focus-visible { background: var(--bbj-orange-dark); color: #fff; }
.bbj-view-dialog .bbj-view__full { background: rgba(255, 255, 255, 0.92); color: var(--bbj-orange-dark) !important; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 0.9rem; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; }
.bbj-view-dialog .bbj-view__full:hover, .bbj-view-dialog .bbj-view__full:focus-visible { color: var(--bbj-black) !important; }
@media (max-width: 640px) {
  .bbj-view__stage.is-zoomable { height: min(60vh, 420px); }
}
/* 2. The help pop-up openers ("How do I check my boot floor?", "Can't see your floor option?", "Can't see your vehicle
   configuration?") and the finder's "Can't see your vehicle?" are outline buttons in the brand orange, one size, wrapping
   on phones. */
.bbj-help-links { gap: 10px 12px; margin: 18px 0 8px; }
.bbj .bbj-btn--outline, .bbj-btn--outline { background: #fff; color: var(--bbj-orange-dark) !important; border: 2px solid var(--bbj-orange); border-radius: 999px; padding: 9px 18px; font-size: 0.95rem; font-weight: 700; line-height: 1.3; text-align: center; white-space: normal; transform: none; }
.bbj .bbj-btn--outline:hover, .bbj .bbj-btn--outline:focus-visible, .bbj-btn--outline:hover, .bbj-btn--outline:focus-visible { background: var(--bbj-orange); border-color: var(--bbj-orange); color: #fff !important; transform: none; }
.bbj .bbj-help-links .bbj-help-btn { min-height: 44px; }
.bbj-help-links--finder { margin: 22px 0 0; }
/* R2 (client 20 Oct 2026): the child theme's ".fl-col-content p:last-of-type { margin: 0 }" beat these margins on the
   finder page, so the button sat on the model and year tiles; #bbj-app outranks it. */
#bbj-app .bbj-help-links { margin: 18px 0 8px; }
#bbj-app .bbj-help-links--finder { margin: 26px 0 0; }
@media (max-width: 640px) {
  .bbj .bbj-help-links .bbj-help-btn { flex: 1 1 100%; }
  .bbj .bbj-help-links--finder .bbj-help-btn { flex: 0 1 auto; }
}