/**
 * Engine configurator.
 *
 * Every colour, radius and font is a custom property so the site's designer
 * can restyle the whole thing from one block in the theme without touching
 * this file:
 *
 *   .bec { --bec-accent: #b90007; --bec-radius: 0; }
 */

.bec {
  --bec-ink: #10202e;
  --bec-ink-soft: #5a6b78;
  --bec-line: #d9e1e7;
  --bec-surface: #ffffff;
  --bec-surface-alt: #f4f7f9;
  --bec-accent: #b90007;
  --bec-accent-ink: #ffffff;
  --bec-focus: #f0a500;
  --bec-radius: 6px;
  --bec-gap: 1rem;
  --bec-font: inherit;
  --bec-measure: 68rem;

  font-family: var(--bec-font);
  color: var(--bec-ink);
  max-width: var(--bec-measure);
  margin-inline: auto;
}

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

/* Themes style every <button> on the page, and this component uses buttons
   for things that are not meant to look like buttons - the choice chips and
   the option tiles. Without this reset the theme's brand colour lands on top
   of them and the small uppercase labels end up dark text on a dark fill,
   which is what happened on the live site. Resetting here rather than adding
   !important everywhere keeps the custom properties working. */
.bec button.bec-chip,
.bec button.bec-option,
.bec a.bec-btn,
.bec button.bec-btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  box-shadow: none;
  line-height: 1.3;
  width: auto;
  min-width: 0;
}

.bec button.bec-chip,
.bec button.bec-chip:hover,
.bec button.bec-chip:focus {
  background-image: none;
  background-color: var(--bec-surface-alt);
  color: var(--bec-ink);
  border: 1px solid var(--bec-line);
}

/* Themes colour spans inside buttons too, which turned the small uppercase
   labels the brand red and left them fighting the value beneath. Set on the
   children rather than inherited, since that is where the theme reaches. */
.bec .bec-chip__label { color: var(--bec-ink-soft); }
.bec .bec-chip__value { color: var(--bec-ink); }

.bec button.bec-option,
.bec button.bec-option:hover,
.bec button.bec-option:focus {
  background-image: none;
  background-color: var(--bec-surface);
  color: var(--bec-ink);
}

/* The download link is an anchor, not a button, so the theme's link colour
   lands on it - red text on the dark button was the result. Covered here
   alongside the real buttons. */
.bec a.bec-btn,
.bec a.bec-btn:link,
.bec a.bec-btn:visited,
.bec a.bec-btn:hover,
.bec a.bec-btn:focus,
.bec button.bec-btn {
  background-image: none;
  background-color: var(--bec-accent);
  color: var(--bec-accent-ink);
  border: 1px solid var(--bec-accent);
  text-decoration: none;
}

.bec a.bec-btn--quiet,
.bec button.bec-btn--quiet {
  background-color: transparent;
  color: var(--bec-accent);
}

/* ---------- Header ---------- */

.bec__head { margin-bottom: calc(var(--bec-gap) * 1.5); }

.bec__title {
  margin: 0 0 0.35em;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.15;
}

.bec__intro {
  margin: 0;
  color: var(--bec-ink-soft);
  max-width: 46rem;
}

/* ---------- Choice trail ----------
   The persistent record of what has been answered. Each entry is a button
   so a customer can jump back to any earlier question. */

.bec__trail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--bec-gap);
  padding-bottom: var(--bec-gap);
  border-bottom: 1px solid var(--bec-line);
}

.bec__trail:empty { display: none; }

.bec-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface-alt);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bec-chip:hover { border-color: var(--bec-accent); background: var(--bec-surface); }

.bec-chip__label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bec-ink-soft);
}

.bec-chip__value { font-weight: 600; line-height: 1.2; }

.bec a.bec-chip--back,
.bec a.bec-chip--back:link,
.bec a.bec-chip--back:visited {
  text-decoration: none;
  color: var(--bec-ink);
}

/* ---------- Engine picture ----------
   Sits beside the questions on a wide screen and above them on a narrow one,
   so on a phone the customer still sees the engine without scrolling past it. */

.bec__layout { display: block; }

.bec__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bec-gap) 0;
}

.bec__figure[hidden] { display: none; }

.bec__figure img {
  max-width: 100%;
  max-height: 18rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Two columns once there is room: the engine holds its own column on the
   left and stays put while the questions scroll beside it. Below that width
   it sits above them, so on a phone the engine is the first thing seen
   rather than something scrolled past. */
@media (min-width: 52rem) {
  .bec__layout {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: calc(var(--bec-gap) * 2);
    align-items: start;
  }

  .bec__figure {
    padding: 0;
    /* Tall enough to hold an outboard without the column collapsing as the
       picture changes between steps. */
    min-height: 22rem;
  }

  .bec__figure img { max-height: 26rem; }

  .bec__main { min-width: 0; }
}

/* The picture, name and specs stay in view while the questions scroll, but
   only on a screen tall enough to show all of them - a sticky column taller
   than the window would hide its own bottom. */
@media (min-width: 52rem) and (min-height: 50rem) {
  .bec__aside {
    position: sticky;
    top: var(--bec-gap);
  }
}

/* ---------- Engine name and specs, under the picture ---------- */

.bec__specs[hidden] { display: none; }

.bec__specs {
  margin-top: var(--bec-gap);
  padding-top: var(--bec-gap);
  border-top: 1px solid var(--bec-line);
}

.bec-specs__name {
  margin: 0 0 0.2em;
  font-size: 1.25rem;
  line-height: 1.25;
}

.bec-specs__code {
  margin: 0 0 0.5em;
  font-size: 0.85rem;
  color: var(--bec-ink-soft);
}

.bec-specs__title,
.bec-summary__title {
  margin: var(--bec-gap) 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bec-ink-soft);
}

.bec-specs__list,
.bec-summary__list { margin: 0; }

.bec-specs__row,
.bec-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--bec-gap);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--bec-line);
  font-size: 0.92rem;
}

.bec-specs__row:last-child,
.bec-summary__row:last-child { border-bottom: 0; }

.bec-specs__row dt,
.bec-summary__row dt { margin: 0; color: var(--bec-ink-soft); }

.bec-specs__row dd,
.bec-summary__row dd { margin: 0; font-weight: 600; text-align: right; }

.bec-summary__row--single dd { text-align: left; }

/* ---------- Quote summary ---------- */

.bec__summary {
  margin-top: var(--bec-gap);
  padding: calc(var(--bec-gap) * 1.25);
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface-alt);
}

.bec-summary__engine .bec__model { font-size: 1.35rem; }

.bec-summary__section {
  margin-top: var(--bec-gap);
  padding-top: 0.25rem;
  border-top: 1px solid var(--bec-line);
}

.bec-summary__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bec-gap);
}

.bec-summary__edit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bec-accent);
  text-decoration: underline;
  cursor: pointer;
}

.bec__quote--summary {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bec__hint {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--bec-ink-soft);
}

/* ---------- Question ---------- */

.bec__eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bec-gap);
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bec-ink-soft);
}

.bec__question {
  margin: 0 0 0.25em;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.2;
}

.bec__help {
  margin: 0 0 var(--bec-gap);
  color: var(--bec-ink-soft);
}

.bec__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin: var(--bec-gap) 0 0;
  padding: 0;
  list-style: none;
}

.bec-option {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface);
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bec-option:hover {
  border-color: var(--bec-accent);
  box-shadow: inset 0 0 0 1px var(--bec-accent);
}

.bec-option:active { transform: translateY(1px); }

/* ---------- Progress stages ---------- */

.bec__stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin-bottom: calc(var(--bec-gap) * 1.25);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--bec-line);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bec-stage { color: var(--bec-ink-soft); }
.bec-stage.is-done { color: var(--bec-ink); }

/* A stage already visited, which can be clicked to go back to it. */
.bec-stage.is-link { cursor: pointer; }
.bec-stage.is-link:hover { color: var(--bec-accent); }

.bec-stage.is-current {
  color: var(--bec-ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--bec-accent);
  padding-bottom: 0.35rem;
}

/* ---------- Stacked questions ----------
   Every question on one page rather than one at a time, so a customer can see
   what is being asked and go back to any of it. */

.bec-step {
  padding: var(--bec-gap) 0;
  border-top: 1px solid var(--bec-line);
}

.bec-step:first-of-type { border-top: 0; padding-top: 0; }

.bec-step__label {
  margin: 0 0 0.15em;
  font-size: 1rem;
  line-height: 1.25;
}

.bec-step__help {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  color: var(--bec-ink-soft);
}

/* Nothing to choose - stated rather than offered. */
.bec-step__settled {
  margin: 0;
  font-weight: 600;
}

.bec-step__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.bec-step__options--tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}

.bec-step__options .bec-option { width: auto; min-height: 0; padding: 0.7rem 1.1rem; }
.bec-step__options--tiles .bec-option { padding: 0.85rem; }

.bec .bec-option.is-chosen {
  border-color: var(--bec-accent);
  box-shadow: inset 0 0 0 2px var(--bec-accent);
}

.bec-step--pending .bec-step__label::after {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.5rem;
  border-radius: 50%;
  background: var(--bec-accent);
  vertical-align: middle;
}

.bec .bec-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- Option tiles ----------
   Used where the answers have pictures against them. Falls back to the plain
   buttons above wherever they do not, so a step is never a row of empty
   frames. */

.bec__options--tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.bec-option--tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.85rem;
  text-align: center;
}

.bec-option__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
}

.bec-option__figure img {
  max-width: 100%;
  max-height: 7rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bec-option__label { font-weight: 600; line-height: 1.25; }

/* ---------- Model chooser ---------- */

/* Tabs read as a row of links with the current one underlined, rather than
   as pills. Closer to the reference, and it stops them competing with the
   cards for attention. */
.bec__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin-bottom: calc(var(--bec-gap) * 1.75);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--bec-line);
}

.bec .bec-tab {
  -webkit-appearance: none;
  appearance: none;
  padding: 0.35rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  background-image: none;
  color: var(--bec-ink-soft);
  font: inherit;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.bec .bec-tab:hover { color: var(--bec-ink); }

.bec .bec-tab.is-current {
  color: var(--bec-ink);
  border-bottom-color: var(--bec-accent);
}

.bec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--bec-gap);
}

/* The photograph carries the card, so it gets the room and the surrounding
   chrome stays quiet - a faint panel behind the engine, text beneath it, and
   the border only appearing on hover. */
.bec a.bec-card,
.bec a.bec-card:link,
.bec a.bec-card:visited {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bec-ink);
  text-decoration: none;
}

.bec a.bec-card:hover .bec-card__figure,
.bec a.bec-card:focus .bec-card__figure {
  border-color: var(--bec-accent);
}

.bec a.bec-card:hover .bec-card__name { color: var(--bec-accent); }

.bec-card__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13rem;
  padding: 1.25rem;
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface-alt);
  transition: border-color 0.15s ease;
}

.bec-card__figure img {
  max-width: 100%;
  max-height: 11rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bec-card__body { display: flex; flex-direction: column; gap: 0.2rem; }

.bec-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  transition: color 0.15s ease;
}

.bec-card__from { font-size: 0.9rem; color: var(--bec-ink-soft); }

/* ---------- Result ---------- */

.bec__result {
  display: grid;
  gap: var(--bec-gap);
  grid-template-columns: minmax(0, 1fr);
  padding: calc(var(--bec-gap) * 1.25);
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface-alt);
}

.bec__model { margin: 0.15em 0 0.35em; font-size: 1.5rem; line-height: 1.2; }

.bec__pair {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.6em 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--bec-accent);
  background: var(--bec-surface);
  font-size: 0.95rem;
}

.bec__price {
  margin: 0.6em 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.bec__code {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: var(--bec-ink);
  color: var(--bec-surface);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* ---------- Rigging ---------- */

.bec__rigging { margin-top: calc(var(--bec-gap) * 1.5); }

.bec__group { margin-bottom: var(--bec-gap); }

.bec__group-title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bec-ink-soft);
}

.bec-kit {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface);
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.bec-kit input { margin-top: 0.2rem; flex: none; }
.bec-kit--only { cursor: default; }
.bec-kit__tag { font-style: normal; color: var(--bec-ink-soft); font-weight: 400; }
.bec-kit__code { display: block; font-size: 0.8rem; color: var(--bec-ink-soft); }
.bec-kit[data-disabled="1"] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Actions and states ---------- */

.bec-kit { align-items: center; }
.bec-kit__price { margin-left: auto; font-weight: 600; white-space: nowrap; }

.bec-kit__contents {
  margin: -0.25rem 0 0.65rem;
  padding: 0 0 0 2.1rem;
  font-size: 0.9rem;
}

.bec-kit__contents summary {
  cursor: pointer;
  color: var(--bec-ink-soft);
  padding: 0.25rem 0;
}

.bec-kit__contents ul {
  margin: 0.35rem 0 0.5rem;
  padding-left: 1.1rem;
  color: var(--bec-ink-soft);
}

.bec-kit__contents li { padding: 0.1rem 0; }
.bec-kit__qty { font-weight: 600; }

.bec__addons { margin-top: calc(var(--bec-gap) * 1.5); }

.bec-addon {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface);
}

.bec-addon__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

.bec-addon__name { font-weight: 600; }
.bec-addon__note { font-size: 0.85rem; color: var(--bec-ink-soft); }

.bec .bec-addon__qty {
  flex: 0 0 auto;
  width: 4.5rem;
  max-width: 4.5rem;
  min-width: 0;
  margin: 0;
  display: inline-block;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  font: inherit;
}

.bec-addon__qty:disabled { opacity: 0.45; }
.bec-addon__price { flex: none; font-weight: 600; white-space: nowrap; }

@media (max-width: 30rem) {
  .bec-addon { flex-wrap: wrap; }
  .bec-addon__body { flex-basis: 100%; order: -1; }
}

.bec__quote {
  margin-top: var(--bec-gap);
  padding-top: var(--bec-gap);
  border-top: 1px solid var(--bec-line);
}

.bec__line {
  display: flex;
  justify-content: space-between;
  gap: var(--bec-gap);
  padding: 0.35rem 0;
}

.bec__line--total {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--bec-line);
  font-size: 1.15rem;
  font-weight: 700;
}

.bec__quote-note {
  margin: 0.65rem 0 0;
  font-size: 0.9rem;
  color: var(--bec-ink-soft);
}

.bec__form { margin-top: calc(var(--bec-gap) * 1.5); }

.bec__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.85rem;
  margin-top: var(--bec-gap);
}

.bec-field { display: flex; flex-direction: column; gap: 0.3rem; }
.bec-field:not(.bec-field--half) { grid-column: 1 / -1; }

.bec-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bec-ink-soft);
}

.bec-field input,
.bec-field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--bec-line);
  border-radius: var(--bec-radius);
  background: var(--bec-surface);
  color: var(--bec-ink);
  font: inherit;
  font-size: 1rem; /* Stops iOS zooming in on focus. */
}

.bec-field textarea { resize: vertical; min-height: 5rem; }

.bec__form-error:empty { display: none; }

.bec__form-error {
  margin-top: var(--bec-gap);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--bec-line);
  border-left: 3px solid var(--bec-focus);
  border-radius: var(--bec-radius);
  background: var(--bec-surface-alt);
}

.bec-btn[disabled] { opacity: 0.6; cursor: progress; }
a.bec-btn { display: inline-block; text-decoration: none; }

.bec__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: calc(var(--bec-gap) * 1.5);
}

.bec-btn {
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--bec-accent);
  border-radius: var(--bec-radius);
  background: var(--bec-accent);
  color: var(--bec-accent-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.bec-btn--quiet { background: transparent; color: var(--bec-accent); }

.bec__notice {
  padding: var(--bec-gap);
  border: 1px solid var(--bec-line);
  border-left: 3px solid var(--bec-focus);
  border-radius: var(--bec-radius);
  background: var(--bec-surface-alt);
}

.bec__notice h3 { margin: 0 0 0.3em; font-size: 1.1rem; }
.bec__notice p { margin: 0; color: var(--bec-ink-soft); }
.bec__notice ul { margin: 0.6em 0 0; padding-left: 1.2em; }

.bec.is-busy { opacity: 0.55; pointer-events: none; }

/* ---------- Accessibility floor ---------- */

.bec :focus-visible {
  outline: 3px solid var(--bec-focus);
  outline-offset: 2px;
}

.bec__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .bec * { transition: none !important; animation: none !important; }
}

/* On a phone the picture and specs sit above the questions; the full list
   would push the first question well down the screen, so only the name shows
   there. The Quote stage repeats every selection anyway. */
@media (max-width: 51.99rem) {
  .bec-specs__title,
  .bec-specs__list { display: none; }

  .bec__specs { margin-bottom: var(--bec-gap); }
}

/* Radio buttons and checkboxes in the brand colour rather than the
   browser's default blue. */
.bec input[type="radio"],
.bec input[type="checkbox"] { accent-color: var(--bec-accent); }

/* The reCAPTCHA v2 checkbox, between the fields and the buttons. */
.bec__recaptcha { margin-top: var(--bec-gap); }
.bec__recaptcha:empty { display: none; }

/* An optional extra's picture, from its WooCommerce product. */
.bec-addon__image {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bec-radius);
  background: var(--bec-surface-alt);
  overflow: hidden;
  cursor: pointer;
}

.bec-addon__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.bec-addon__price { white-space: nowrap; }