/* Bridle2Fit — bridle builder
   Brand kit V3, same language as the Swarovski configurator. Everything is
   scoped to .b2fb so the theme and the builder never restyle each other.
   Override from the theme with the custom properties below. */

.b2fb {
  --graphite: #26252A;
  --charcoal: #3C3B3F;
  --panel:    #2F2E33;
  --greige:   #B2A8A3;
  --warm:     #F9F5F2;
  --gold:     #C9B965;
  --gold-hover: #D5C77C;

  --text:   var(--warm);
  --text-2: var(--greige);
  --text-3: rgba(178, 168, 163, .62);
  --hair:   rgba(178, 168, 163, .16);
  --hair-2: rgba(178, 168, 163, .28);

  --b2fb-font: "Avenir Next", "Avenir", "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  position: relative;
  container: b2fb / inline-size;
  background: var(--graphite);
  color: var(--text);
  font: 400 1rem/1.7 var(--b2fb-font);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* ---------- neutralise theme styles ---------- */
.b2fb, .b2fb *, .b2fb *::before, .b2fb *::after { box-sizing: border-box; }
.b2fb button {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; text-shadow: none;
  background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0;
  min-height: 0; min-width: 0; width: auto; height: auto; line-height: inherit; cursor: pointer;
}
.b2fb button:hover, .b2fb button:focus { background: none; color: inherit; box-shadow: none; }
.b2fb img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.b2fb h2, .b2fb p { margin: 0; padding: 0; }
.b2fb [hidden] { display: none !important; }
.b2fb button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.b2fb .eyebrow { margin: 0; font: 500 .78rem/1.2 var(--b2fb-font); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }

/* ---------- layout: 70 / 30 ---------- */
.b2fb .configurator {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 3fr);
  height: calc(100vh - var(--b2fb-offset, 0px));
  height: calc(100dvh - var(--b2fb-offset, 0px));
  min-height: 600px;
}

/* ---------- the stage ---------- */
.b2fb .stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 48% 42% at 45% 0%, rgba(249, 245, 242, .08) 0%, rgba(249, 245, 242, 0) 100%),
    linear-gradient(180deg, #1D1C21 0%, var(--graphite) 45%, var(--graphite) 60%, #1B1A1F 100%);
}
.b2fb .stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse 85% 80% at 50% 48%, transparent 55%, rgba(0, 0, 0, .42) 100%);
}
.b2fb .stage__head { position: absolute; z-index: 3; top: clamp(1.5rem, 1rem + 2vw, 2.75rem); left: clamp(1.25rem, 1rem + 2vw, 3rem); transition: opacity .9s var(--ease); }
.b2fb .stage__title { margin: .7rem 0 0; font: 400 clamp(1.6rem, 1.15rem + 1.1vw, 2.5rem)/1.12 var(--b2fb-font); letter-spacing: .02em; text-transform: none; color: var(--text); }
.b2fb .stage.is-intro .stage__media, .b2fb .stage.is-intro .stage__head { opacity: 0; }
.b2fb .stage__media { position: absolute; inset: 0; transition: opacity 1.2s var(--ease); }

/* photos on the stage: the brand photo fills the stage and fades into the graphite at the edges
   (no blend modes: Chrome may drop a blended layer while it fades in);
   product photos sit on a warm-white card, like a jeweller's display */
.b2fb .media { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease), transform .9s var(--ease); }
.b2fb .media.is-entering { opacity: 0; transform: scale(1.02); }
.b2fb .media.is-leaving { opacity: 0; }
.b2fb .media--hero img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 26%; filter: saturate(.92); }
.b2fb .media--hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(38, 37, 42, .75) 0%, rgba(38, 37, 42, 0) 42%), linear-gradient(0deg, rgba(38, 37, 42, .85) 0%, rgba(38, 37, 42, 0) 32%); }
/* Breed podium (computer): de foto heel laten, op volle hoogte rechts, en
   de linkerrand laten oplopen in het donker. Anders vult een staande foto de
   hele breedte en zie je alleen een sterk vergrote strook. */
@container b2fb (min-width: 901px) {
  /* De foto heeft een zwarte achtergrond, het podium is grafiet. Daarom loopt
     het podium achter de foto geleidelijk naar zwart, en de foto en de donkere
     waas links lopen lang en zacht op: geen zichtbare naad (1.0.4). */
  .b2fb .media--hero { justify-content: flex-end;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .55) 48%, #000 72%); }
  .b2fb .media--hero img {
    width: auto; max-width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 18%, rgba(0, 0, 0, .8) 34%, #000 48%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 18%, rgba(0, 0, 0, .8) 34%, #000 48%);
  }
  .b2fb .media--hero::after {
    background: linear-gradient(90deg, rgba(38, 37, 42, .7) 0%, rgba(38, 37, 42, .35) 22%, rgba(38, 37, 42, .1) 40%, rgba(38, 37, 42, 0) 55%), linear-gradient(0deg, rgba(38, 37, 42, .85) 0%, rgba(38, 37, 42, 0) 32%);
  }
}
.b2fb .media--product { padding: clamp(6rem, 4.5rem + 4vw, 8.5rem) 8% clamp(6rem, 5rem + 3vw, 8rem); }
.b2fb .media--product img {
  width: auto; height: auto; max-width: min(100%, 620px); max-height: 100%; object-fit: contain;
  background: var(--warm); padding: clamp(1rem, .5rem + 2vw, 2.5rem);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(201, 185, 101, .18);
}

/* caption of the part in focus */
.b2fb .part-caption {
  position: absolute; z-index: 3; left: clamp(1.25rem, 1rem + 2vw, 3rem); bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  display: flex; flex-direction: column; gap: .5rem; max-width: 60%;
}
.b2fb .part-caption strong { font: 400 clamp(1.2rem, 1rem + .6vw, 1.6rem)/1.2 var(--b2fb-font); letter-spacing: .02em; color: var(--text); }

/* ---------- the panel ---------- */
.b2fb .panel { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-left: 1px solid var(--hair); }
.b2fb .steps { flex: 1; overflow-y: auto; padding: clamp(1rem, .8rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1.2vw, 2.5rem) 1rem;
  scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }

.b2fb .step { border-bottom: 1px solid var(--hair); }
.b2fb .step__head {
  width: 100%; display: grid; grid-template-columns: 2.4rem 1fr; grid-template-areas: "no title" ". value";
  align-items: baseline; gap: .15rem 0; padding: 1rem 0; text-align: left;
}
.b2fb .step__no { grid-area: no; font: 500 .78rem/1 var(--b2fb-font); letter-spacing: .24em; color: var(--gold); }
.b2fb .step__title { grid-area: title; font: 400 1.15rem/1.25 var(--b2fb-font); letter-spacing: .02em; color: var(--text-2); transition: color .4s var(--ease); }
.b2fb .step__value { grid-area: value; font-size: .8rem; color: var(--text-3); min-height: 1.2em; }
.b2fb .step.is-done .step__no::after { content: " ✓"; letter-spacing: 0; }
.b2fb .step__head:hover .step__title { color: var(--text); }
.b2fb .step.is-open .step__title { font-size: 1.6rem; color: var(--text); }
.b2fb .step.is-open .step__value { display: none; }
.b2fb .step__inner { display: none; }
.b2fb .step.is-open .step__inner { display: block; padding-bottom: 1.25rem; animation: b2fb-in .45s var(--ease) both; }
@keyframes b2fb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* option groups (type, colour, finish, sizes, padding …) */
.b2fb .group { margin: 0 0 1.1rem 2.4rem; }
.b2fb .group__label { margin: 0 0 .5rem; font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.b2fb .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.b2fb .chip {
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .85rem;
  border: 1px solid var(--hair-2); color: var(--text-2); font-size: .82rem; letter-spacing: .04em;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.b2fb .chip:hover { color: var(--text); border-color: rgba(178, 168, 163, .5); }
.b2fb .chip.is-active, .b2fb .chip.is-active:hover { color: var(--text); border-color: var(--gold); background: var(--charcoal); }
.b2fb .chip.is-disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
.b2fb .group--wide .chip { flex: 1 1 10rem; justify-content: center; padding: .8rem; font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.b2fb .swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 0 1px var(--hair-2); }

/* parts: product rows with photo */
.b2fb .unit + .unit { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--hair); }
.b2fb .unit__title { margin: 0 0 .5rem 2.4rem; font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.b2fb .unit__help { margin: 0 0 .75rem 2.4rem; font-size: .82rem; line-height: 1.55; color: var(--text-2); }
.b2fb .unit__empty { margin: .25rem 0 .75rem 2.4rem; font-size: .82rem; color: var(--gold); }
.b2fb .products { display: flex; flex-direction: column; gap: 8px; margin-left: 2.4rem; }
.b2fb .product {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: .9rem; width: 100%;
  padding: .5rem .8rem .5rem .5rem; text-align: left; border: 1px solid var(--hair-2); color: var(--text-2);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.b2fb .product:hover { color: var(--text); border-color: rgba(178, 168, 163, .5); }
.b2fb .product.is-active, .b2fb .product.is-active:hover { color: var(--text); border-color: var(--gold); background: var(--charcoal); }
.b2fb .product__img { width: 52px; height: 52px; background: var(--warm); overflow: hidden; }
.b2fb .product__img img { width: 100%; height: 100%; object-fit: cover; }
.b2fb .product__name { font-size: .9rem; line-height: 1.3; }
.b2fb .product__name small { display: block; margin-top: .25rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.b2fb .product__price { font-size: .82rem; color: var(--text-2); white-space: nowrap; }
.b2fb .product--none { grid-template-columns: 1fr; padding: .8rem; }
.b2fb .product--none .product__name { font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.b2fb .options { padding: 1rem 0 .25rem; margin-left: -2.4rem; border-bottom: 1px solid var(--hair); margin-bottom: .25rem; }
/* share the design */
.b2fb .share { margin: 1.6rem 0 .5rem 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); }
.b2fb .share__actions { display: flex; flex-wrap: wrap; }
.b2fb .mail { margin: 0 0 .4rem; }
.b2fb .mail__row { display: flex; gap: 0; }
.b2fb .mail input[type="email"] {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: .8rem 1rem; border: 1px solid var(--hair-2); border-right: 0; border-radius: 0;
  background: transparent; color: var(--text); font: 400 .88rem/1.2 var(--b2fb-font); box-shadow: none;
}
.b2fb .mail input[type="email"]::placeholder { color: var(--text-3); }
.b2fb .mail input[type="email"]:focus { outline: none; border-color: var(--greige); }
.b2fb .mail__send {
  flex: 0 0 auto; margin: 0; padding: .8rem 1.2rem; border: 1px solid var(--hair-2); border-radius: 0; background: var(--charcoal); color: var(--text); cursor: pointer;
  font: 500 .7rem/1 var(--b2fb-font); letter-spacing: .22em; text-transform: uppercase; transition: background .3s var(--ease), border-color .3s var(--ease);
}
.b2fb .mail__send:hover { border-color: var(--greige); }
.b2fb .mail__send:disabled { opacity: .6; cursor: default; }
.b2fb .mail.is-sent input[type="email"] { border-color: rgba(201, 185, 101, .6); }
.b2fb .mail__note { margin: .5rem 0 .2rem; font-size: .74rem; color: var(--text-3); }
.b2fb .mail__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
/* product information under the chosen product */
.b2fb .info { margin: 0 0 1.2rem 2.4rem; }
.b2fb .info__text { position: relative; max-height: 6.6em; overflow: hidden; font-size: .84rem; line-height: 1.65; color: var(--text-2);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.b2fb .info.is-open .info__text, .b2fb .info.is-short .info__text { max-height: none; -webkit-mask-image: none; mask-image: none; }
.b2fb .info__text p { margin: 0 0 .7em; }
.b2fb .info__text p:last-child { margin-bottom: 0; }
.b2fb .info__text ul, .b2fb .info__text ol { margin: 0 0 .7em 1.1em; padding: 0; }
.b2fb .info__text strong, .b2fb .info__text b { font-weight: 500; color: var(--text); }
.b2fb .info__more, .b2fb .info__link {
  display: inline-block; margin: .55rem 1.4rem 0 0; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid var(--hair-2); border-radius: 0;
  font: 500 .68rem/1.4 var(--b2fb-font); letter-spacing: .2em; text-transform: uppercase; color: var(--text); text-decoration: none; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.b2fb .info__more:hover, .b2fb .info__link:hover { color: var(--warm); border-bottom-color: var(--gold); }
.b2fb .info.is-short .info__more { display: none; }
.b2fb .group--sizes .chip { min-width: 5.5rem; justify-content: center; }

/* overview: everything chosen, each row opens its step; the other steps step aside */
.b2fb .steps.is-summary .step:not(.is-open) { display: none; }
.b2fb .summary { margin-left: 2.4rem; display: flex; flex-direction: column; }
.b2fb .summary__row {
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: .9rem; width: 100%;
  padding: .7rem 0; text-align: left; border-bottom: 1px solid var(--hair); color: var(--text);
  transition: background-color .3s var(--ease);
}
.b2fb .summary__row:hover { background: rgba(249, 245, 242, .03); }
.b2fb .summary__img { width: 48px; height: 48px; background: var(--warm); overflow: hidden; }
.b2fb .summary__img img { width: 100%; height: 100%; object-fit: cover; }
.b2fb .summary__text { display: flex; flex-direction: column; gap: .15rem; font-size: .88rem; line-height: 1.35; min-width: 0; }
.b2fb .summary__text small { font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.b2fb .summary__text em { font-style: normal; font-size: .78rem; color: var(--text-3); }
.b2fb .summary__price { font-size: .85rem; color: var(--text-2); white-space: nowrap; }
.b2fb .summary__row.is-missing .summary__img { background: transparent; border: 1px dashed var(--hair-2); }
.b2fb .summary__row.is-missing em { color: var(--gold); }
.b2fb .summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1rem 0 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.b2fb .summary__total strong { font: 400 1.4rem/1 var(--b2fb-font); letter-spacing: .02em; text-transform: none; color: var(--text); }

/* "Verder" stays in view at the bottom of the panel */
.b2fb .next-bar { position: sticky; bottom: 0; z-index: 2; margin: 1rem 0 0 2.4rem; padding: 1.25rem 0 .25rem;
  background: linear-gradient(180deg, rgba(47, 46, 51, 0) 0%, var(--panel) 40%); }
.b2fb .next {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 13px 18px; border: 1px solid rgba(201, 185, 101, .6);
  font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text);
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.b2fb .next-bar:empty { display: none; }
.b2fb .next::after { content: "→"; letter-spacing: 0; font-size: 1rem; }
.b2fb .next:hover { border-color: var(--gold); color: var(--text); }
.b2fb .next-bar.is-ready .next, .b2fb .next-bar.is-ready .next:hover { background: var(--gold); border-color: var(--gold); color: var(--graphite); }

/* checkout */
.b2fb .checkout { padding: 1.1rem clamp(1.25rem, 1rem + 1.2vw, 2.5rem) 1.4rem; border-top: 1px solid var(--hair); background: var(--panel); }
.b2fb .price { margin: 0 0 .9rem; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; font: 400 1.6rem/1.12 var(--b2fb-font); letter-spacing: .02em; color: var(--text); }
.b2fb .price__amount { white-space: nowrap; }
.b2fb .price__label { display: flex; flex-direction: column; gap: .2rem; font: 500 .66rem/1.3 var(--b2fb-font); letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.b2fb .btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 17px 20px;
  background: transparent; color: var(--text); border: 1px solid rgba(201, 185, 101, .6);
  font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; text-align: left;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.b2fb .btn::after { content: "→"; letter-spacing: 0; font-size: 1rem; }
.b2fb .btn:hover, .b2fb .btn:focus { background: transparent; border-color: var(--gold); color: var(--text); }
.b2fb .checkout.is-ready .btn { background: var(--gold); border-color: var(--gold); color: var(--graphite); }
.b2fb .checkout.is-ready .btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--graphite); }
.b2fb .btn[disabled] { opacity: .6; cursor: progress; }
.b2fb .btn[hidden] { display: none; }
/* Zolang er nog iets gekozen moet worden: geen winkelwagenknop, maar wat er nog ontbreekt. */
.b2fb .btn--todo { border-color: var(--hair-2); color: var(--text-2); letter-spacing: .16em; }
.b2fb .btn--todo::after { content: "↓"; }
.b2fb .btn--todo:hover, .b2fb .btn--todo:focus { border-color: var(--gold); color: var(--text); }
/* Een keuze die nog open staat, zoals de maat. */
.b2fb .group.is-needed .group__label { color: var(--gold); }
.b2fb .group.is-needed .group__label::after { content: " ·"; }
.b2fb .checkout__note { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: .8rem 0 0; font-size: .82rem; letter-spacing: .02em; color: var(--text-2); }
.b2fb .checkout__note::before, .b2fb .checkout__note::after { content: ""; width: 20px; height: 1px; background: var(--gold); opacity: .6; }

.b2fb .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--charcoal); color: var(--warm); border: 1px solid rgba(201,185,101,.45);
  padding: 13px 20px; font-size: .82rem; letter-spacing: .02em; max-width: calc(100vw - 32px); z-index: 99999;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.b2fb .toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Swarovski configurator in a dialog (outside .b2fb on purpose) ---------- */
.b2fb-dialog { position: fixed; inset: 0; margin: 0 !important; z-index: 100000; background: #26252A; overflow: auto; }
.b2fb-dialog__close {
  position: fixed; top: 14px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: .6rem; padding: 10px 16px; cursor: pointer;
  background: rgba(38, 37, 42, .85); color: #F9F5F2; border: 1px solid rgba(201, 185, 101, .6); border-radius: 0;
  font: 500 .72rem/1 "Avenir Next", "Avenir", "Nunito Sans", sans-serif; letter-spacing: .24em; text-transform: uppercase;
}
.b2fb-dialog__close::before { content: "←"; letter-spacing: 0; font-size: 1rem; }
.b2fb-dialog .b2fc { --b2fc-offset: 0px; }
/* a design link means nothing inside the bridle: the bridle keeps the design itself */
.b2fb-dialog .checkout__share { display: none; }
/* stay below the WordPress admin bar for logged-in editors */
.admin-bar .b2fb-dialog { top: 32px; }
.admin-bar .b2fb-dialog__close { top: 46px; }
@media (max-width: 782px) {
  .admin-bar .b2fb-dialog { top: 46px; }
  .admin-bar .b2fb-dialog__close { top: 60px; }
}
html.b2fb-locked, html.b2fb-locked body { overflow: hidden; }

/* ---------- responsive: by the builder's own width ---------- */
@container b2fb (max-width: 900px) {
  .b2fb .configurator { display: block; height: auto; min-height: 0; }
  /* Op mobiel scrolt de foto gewoon mee weg: de keuzes krijgen het scherm. */
  .b2fb .stage { position: relative; height: clamp(190px, 26vh, 240px); }
  .b2fb .stage__head { top: 1rem; left: 16px; }
  .b2fb .stage__title { font-size: 1.3rem; margin-top: .4rem; }
  .b2fb .media--product { padding: 3.6rem 28% 2.8rem; }
  .b2fb .part-caption { left: 16px; bottom: .9rem; max-width: 70%; }
  .b2fb .part-caption strong { font-size: 1.05rem; }
  .b2fb .panel { border-left: 0; }
  .b2fb .steps { overflow: visible; padding: .25rem 16px 1rem; }
  .b2fb .step { scroll-margin-top: calc(var(--b2fb-offset, 0px) + .5rem); }
  /* Compacte balk onderaan: totaal en één knop, verder niets. */
  .b2fb .checkout { position: sticky; bottom: 0; z-index: 4; padding: .7rem 16px .8rem; }
  .b2fb .price { margin: 0 0 .55rem; font-size: 1.15rem; align-items: center; }
  .b2fb .price__label { flex-direction: row; gap: .5rem; }
  .b2fb .btn { padding: 14px 16px; letter-spacing: .14em; }
  .b2fb .checkout__note { display: none; }
  .b2fb .group, .b2fb .products, .b2fb .unit__title, .b2fb .unit__help, .b2fb .unit__empty, .b2fb .next-bar { margin-left: 0; }
  .b2fb .options, .b2fb .info, .b2fb .share { margin-left: 0; }
  .b2fb .summary { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .b2fb * { transition: none !important; animation: none !important; }
}