/* Boot Buddy Journey: enhanced product-options form on ordinary product pages (works on the orange and white panels). */
.bbj-po {
  --bbj-po-orange: #e94c00;
  --bbj-po-black: #111;
  --bbj-po-line: rgba(0, 0, 0, 0.18);
  --bbj-po-muted: #555;
}
.bbj-po .bbj-po-field { margin: 0 0 18px; }
.bbj-po .bbj-po-field > label > span { font-weight: 700; font-size: 1rem; }
.bbj-po .bbj-po-hidden-label { display: none !important; }
.bbj-po .bbj-po-req { font-weight: 400; font-size: 0.85em; opacity: 0.85; }
.bbj-po .bbj-po-field--select select { min-height: 44px; border-radius: 8px; padding: 8px 10px; max-width: 100%; }

.bbj-po-group { margin: 0 0 16px; }
.bbj-po-heading { font-weight: 700; font-size: 1rem; margin: 0 0 8px; line-height: 1.3; }
.bbj-po-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

.bbj-po-card {
  position: relative; display: flex; flex-direction: column; background: #fff; color: #222; border: 2px solid var(--bbj-po-line);
  border-radius: 10px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.bbj-po-card:hover { border-color: var(--bbj-po-black); transform: translateY(-1px); }
.bbj-po-card:has(.bbj-po-input:checked) { border-color: var(--bbj-po-black); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.35); }
.bbj-po-card:has(.bbj-po-input:focus-visible) { outline: 3px solid var(--bbj-po-black); outline-offset: 2px; }

/* Visually hidden but focusable: the real form field. */
.bbj-po .bbj-po-input {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap; opacity: 0;
  left: 0 !important; top: 0 !important; transform: none !important;
}

.bbj-po .bbj-po-card__main { display: flex; flex-direction: column; flex: 1; cursor: pointer; margin: 0; color: inherit; font-weight: 400; }
.bbj-po-card__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f4f4f4; margin: 0; }
.bbj-po-card__body { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 8px 34px; font-size: 0.9rem; line-height: 1.3; }
.bbj-po-card__title { font-weight: 700; color: #111; }
.bbj-po-card__price { color: var(--bbj-po-muted); font-size: 0.85rem; }
.bbj-po-card__mark {
  position: absolute; left: 9px; top: 9px; width: 18px; height: 18px; border: 2px solid #777; border-radius: 4px; background: #fff;
}
.bbj-po-card.is-single .bbj-po-card__mark { border-radius: 50%; }
.bbj-po-card:has(.bbj-po-input:checked) .bbj-po-card__mark { border-color: var(--bbj-po-orange); background: var(--bbj-po-orange); box-shadow: inset 0 0 0 3px #fff; }
.bbj-po-card--text .bbj-po-card__body { min-height: 52px; justify-content: center; }

.bbj-po button.bbj-po-zoom {
  display: block; width: 100%; margin: 0; padding: 6px 10px 8px 34px; border: 0; border-top: 1px solid #eee; border-radius: 0;
  background: #fff; color: #111; font: inherit; font-size: 0.8rem; text-align: left; text-decoration: underline; text-transform: none;
  letter-spacing: normal; cursor: pointer; line-height: 1.3; box-shadow: none;
}
.bbj-po button.bbj-po-zoom:hover, .bbj-po button.bbj-po-zoom:focus-visible { background: #f4f4f4; color: var(--bbj-po-orange); }

.bbj-po-dialog { padding: 0; border: 0; border-radius: 12px; max-width: min(92vw, 640px); width: 100%; background: #fff; color: #222; }
.bbj-po-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.bbj-po-dialog__inner { position: relative; }
.bbj-po-dialog img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #f4f4f4; }
.bbj-po-dialog__foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 14px 16px; }
.bbj-po-dialog__foot p { margin: 0; }
.bbj-po-dialog__foot p span { color: #555; margin-left: 6px; }
.bbj-po-dialog button.bbj-po-dialog__close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 26px; line-height: 40px; cursor: pointer;
}
.bbj-po-dialog button.bbj-po-dialog__pick {
  background: #e94c00; color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-weight: 700; cursor: pointer; text-transform: none;
}
.bbj-po-dialog button.bbj-po-dialog__pick:hover, .bbj-po-dialog button.bbj-po-dialog__pick:focus-visible { background: #c43f00; }
.bbj-po-dialog__chosen { font-weight: 700; color: #1b7a32; }

@media (max-width: 480px) {
  .bbj-po-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bbj-po-card { transition: none; }
  .bbj-po-card:hover { transform: none; }
}

/* === F10: required card group left empty on Add to basket === */
.bbj-po-group.is-missing { border: 2px solid #c62828; border-radius: 8px; padding: 10px 12px 12px; background: #fff8f7; }
.bbj-po-error { margin: 0 0 10px; color: #b71c1c; font-weight: 700; font-size: 0.95rem; }

/* N (A2, client 13 Oct 2026): a "NOT compatible" answer stays on the form greyed out, with the client's line. */
.bbj-po-card.is-disabled .bbj-po-card__main { cursor: not-allowed; background: #f4f4f4; }
.bbj-po-card.is-disabled .bbj-po-card__title, .bbj-po-card.is-disabled .bbj-po-card__img, .bbj-po-card.is-disabled .bbj-po-card__mark { opacity: 0.55; }
.bbj-po-card__why { display: block; font-size: 0.85rem; font-weight: 600; color: #1d1d1d; }