/* Bridle2Fit — Swarovski browband configurator
   Brand kit V3: Avenir Next (web fallback Nunito Sans), graphite build
   section, shield gold for action. Everything is scoped to .b2fc so the
   theme and the configurator never restyle each other.
   Override from the theme with the custom properties below, e.g.
   .b2fc { --b2fc-font: "Avenir Next LT Pro", sans-serif; } */

.b2fc {
  /* brand kit V3 */
  --graphite: #26252A;   /* hero, build section */
  --charcoal: #3C3B3F;   /* panels inside dark sections */
  --panel:    #2F2E33;   /* cards inside dark sections */
  --slate:    #4E4E53;
  --greige:   #B2A8A3;   /* details, dividers, secondary on dark */
  --warm:     #F9F5F2;   /* warm white */
  --gold:     #C9B965;   /* shield gold: buttons and accents on dark */
  --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);

  --b2fc-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: b2fc / inline-size; /* layout follows the space the theme gives it */
  background: var(--graphite);
  color: var(--text);
  font: 400 1rem/1.7 var(--b2fc-font);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* ---------- neutralise theme styles inside the configurator ---------- */
.b2fc, .b2fc *, .b2fc *::before, .b2fc *::after { box-sizing: border-box; }
.b2fc 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;
}
.b2fc button:hover, .b2fc button:focus { background: none; color: inherit; box-shadow: none; }
.b2fc img { display: block; max-width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.b2fc h2, .b2fc p, .b2fc figure { margin: 0; padding: 0; }
.b2fc form { margin: 0; }
.b2fc [hidden] { display: none !important; }
.b2fc button:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

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

/* ---------- layout: 70 / 30, fills the screen below the header ---------- */
.b2fc .configurator {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(340px, 3fr);
  height: calc(100vh - var(--b2fc-offset, 0px));
  height: calc(100dvh - var(--b2fc-offset, 0px));
  min-height: 560px;
}

/* ---------- the stage: graphite, lit from above, deepest at top and bottom ---------- */
.b2fc .stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 48% 42% at 50% 0%, rgba(249, 245, 242, .09) 0%, rgba(249, 245, 242, 0) 100%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(249, 245, 242, .035) 0%, rgba(249, 245, 242, 0) 70%),
    linear-gradient(180deg, #1D1C21 0%, var(--graphite) 45%, var(--graphite) 60%, #1B1A1F 100%);
}
.b2fc .stage::before { /* vignette */
  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, .45) 100%);
}
.b2fc .stage::after { /* soft grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.b2fc .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); }
.b2fc .stage__title { margin: .7rem 0 0; font: 400 clamp(1.6rem, 1.15rem + 1.1vw, 2.5rem)/1.12 var(--b2fc-font); letter-spacing: .02em; text-transform: none; color: var(--text); }

.b2fc .stage__canvas { container-type: size; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 1%; }
.b2fc #b2fc-browband { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; transition: opacity 1.4s var(--ease), filter 1.4s var(--ease); }
.b2fc .stage.is-intro #b2fc-browband { opacity: 0; filter: brightness(.4); }
.b2fc .stage.is-intro .stage__head, .b2fc .stage.is-intro .views { opacity: 0; }

.b2fc #b2fc-browband .stone { cursor: pointer; }
.b2fc #b2fc-browband .reflection { pointer-events: none; }
.b2fc .leather-t { transition: stroke .9s var(--ease-io); }
.b2fc #b2fc-browband .loop-edge { fill: var(--loop-edge); transition: fill .9s var(--ease-io); }
.b2fc #b2fc-browband .loop-body { fill: var(--loop-body); transition: fill .9s var(--ease-io); }
.b2fc #b2fc-browband .loop-stitch { stroke: var(--loop-thread); fill: none; transition: stroke .9s var(--ease-io); }

/* crystals being set, one by one */
.b2fc #b2fc-browband .crystal { transform-box: fill-box; transform-origin: center; transition: transform .28s var(--ease), opacity .28s var(--ease), filter .6s var(--ease); }
.b2fc #b2fc-browband .crystal.is-out { opacity: 0; transform: scale(.78); }
.b2fc #b2fc-browband .stone { transition: opacity .7s var(--ease), filter .7s var(--ease); }
.b2fc #b2fc-browband .stone.is-muted { filter: brightness(.78) saturate(.9); }
.b2fc #b2fc-browband .stone.is-lit .crystal { filter: brightness(1.08) saturate(1.08); }
.b2fc #b2fc-browband .sweep { transform: translateX(-46px); opacity: 0; mix-blend-mode: screen; }
.b2fc #b2fc-browband .stone.is-lit .sweep { animation: b2fc-sweep 1.25s var(--ease-io) var(--d, 0s) forwards; }
@keyframes b2fc-sweep {
  0% { transform: translateX(-46px); opacity: 0; }
  20% { opacity: .9; }
  80% { opacity: .9; }
  100% { transform: translateX(46px); opacity: 0; }
}

.b2fc .stone-tip {
  position: absolute; z-index: 4; transform: translate(-50%, calc(-100% - 16px));
  padding: 7px 12px; border: 1px solid rgba(201, 185, 101, .45);
  background: rgba(38, 37, 42, .9); color: var(--warm);
  font: 500 .66rem/1 var(--b2fc-font); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; backdrop-filter: blur(4px);
}
/* touch screens have no hover tooltip; skip the costly blur there */
@media (hover: none) { .b2fc .stone-tip { backdrop-filter: none; } }

/* caption that accompanies a crystal reveal */
.b2fc .reveal-caption {
  position: absolute; z-index: 3; left: clamp(1.25rem, 1rem + 2vw, 3rem); bottom: clamp(4.5rem, 3.5rem + 2vw, 6rem);
  display: flex; flex-direction: column; gap: .7rem;
  opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none;
}
.b2fc .reveal-caption strong { font: 400 clamp(1.6rem, 1.15rem + 1.4vw, 2.5rem)/1.12 var(--b2fc-font); letter-spacing: .02em; color: var(--text); }
.b2fc .stage.is-revealing .reveal-caption { opacity: 1; transform: none; transition-delay: .5s; }
.b2fc .stage.is-revealing .stage__head { opacity: 0; }

/* view controls */
.b2fc .views {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(1.25rem, 1rem + 1vw, 2rem); transform: translateX(-50%);
  display: flex; gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); transition: opacity .9s var(--ease) .6s;
}
.b2fc .views button {
  position: relative; padding: 6px 0; white-space: nowrap;
  font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3);
  transition: color .3s var(--ease);
}
.b2fc .views button::after { content: ""; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transition: transform .45s var(--ease); }
.b2fc .views button:hover, .b2fc .views .is-active { color: var(--text); }
.b2fc .views .is-active::after { transform: scaleX(1); }

/* on horse: the customer's stones on a real photo, filling the whole stage */
.b2fc .horse {
  position: absolute; inset: 0; margin: 0; z-index: 1;
  opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s;
}
.b2fc .horse__frame { position: absolute; inset: 0; transform: scale(1.04); transition: transform 2.4s var(--ease); }
.b2fc .horse__frame::after { /* soft shade at the bottom so caption and view controls stay legible */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(38, 37, 42, 0) 55%, rgba(38, 37, 42, .8) 100%);
}
.b2fc #b2fc-horse-svg { display: block; width: 100%; height: 100%; max-width: none; }
.b2fc .horse figcaption {
  position: absolute; z-index: 1; left: clamp(1.25rem, 1rem + 2vw, 3rem); bottom: clamp(4.25rem, 3.5rem + 1.5vw, 5.25rem);
  display: flex; flex-direction: column; gap: .5rem; max-width: 17rem;
}
.b2fc .horse figcaption span:last-child { font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.b2fc .stage.is-horse .horse { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.b2fc .stage.is-horse .horse__frame { transform: none; }
.b2fc .stage.is-horse #b2fc-browband { opacity: 0; }
.b2fc .stage.is-horse .stage__head { opacity: 0; }

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

.b2fc .step { border-bottom: 1px solid var(--hair); }
.b2fc .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: 1.25rem 0; text-align: left;
}
.b2fc .step__no { grid-area: no; font: 500 .78rem/1 var(--b2fc-font); letter-spacing: .24em; color: var(--gold); }
.b2fc .step__title { grid-area: title; font: 400 1.25rem/1.2 var(--b2fc-font); letter-spacing: .02em; color: var(--text-2); transition: color .4s var(--ease), font-size .5s var(--ease); }
.b2fc .step__value { grid-area: value; font-size: .82rem; color: var(--text-3); min-height: 1.2em; transition: opacity .4s var(--ease); }
.b2fc .step__head:hover .step__title { color: var(--text); }
.b2fc .step.is-open .step__title { font-size: 1.7rem; color: var(--text); }
.b2fc .step.is-open .step__value { opacity: 0; }

.b2fc .step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-io); }
.b2fc .step.is-open .step__body { grid-template-rows: 1fr; }
.b2fc .step__inner { overflow: hidden; min-height: 0; }
.b2fc .step.is-open .step__inner { padding-bottom: 1.5rem; }
.b2fc .step__inner > * { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.b2fc .step.is-open .step__inner > * { opacity: 1; transform: none; transition-delay: .2s; }

/* options: "option, selected and default" from the brand kit —
   a thin greige frame; selected gets a gold frame on charcoal */
.b2fc .options { display: flex; flex-direction: column; gap: 8px; margin-left: 2.4rem; }
.b2fc .opt {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: .7rem .9rem; 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);
}
.b2fc .opt:hover { color: var(--text); border-color: rgba(178, 168, 163, .5); }
.b2fc .opt.is-active, .b2fc .opt.is-active:hover { color: var(--text); border-color: var(--gold); background: var(--charcoal); }
.b2fc .opt__label { font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.b2fc .opt__extra { margin-left: auto; font-size: .78rem; color: var(--text-3); white-space: nowrap; }

.b2fc .swatch {
  width: 28px; height: 28px; border-radius: 50%; flex: none; background-color: var(--c);
  background-image:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.2), rgba(255,255,255,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 0 0 1px var(--hair-2);
}

.b2fc .options--pattern .opt { justify-content: space-between; }
.b2fc .mini { display: flex; gap: 2px; }
.b2fc .mini i { width: 12px; height: 12px; border-radius: 50%; background: center/cover; box-shadow: 0 0 0 1px rgba(210, 214, 218, .55); opacity: .75; transition: opacity .3s var(--ease); }
.b2fc .opt.is-active .mini i, .b2fc .opt:hover .mini i { opacity: 1; }

.b2fc .options--size { flex-direction: row; flex-wrap: wrap; }
.b2fc .opt--size { width: auto; flex: 1 1 5.5rem; justify-content: center; flex-direction: column; gap: .2rem; text-align: center; }
.b2fc .opt--size .opt__label { font-size: 1.05rem; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.b2fc .opt--size .opt__extra { margin: 0; font-size: .72rem; }

/* colour slots */
.b2fc .slots { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem; margin: 0 0 1.25rem 2.4rem; border-bottom: 1px solid var(--hair); }
.b2fc .slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .55rem; width: 100%; text-align: center; padding: 0 0 .8rem; position: relative; color: var(--text-3); min-width: 0; }
.b2fc .slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .4s var(--ease); }
.b2fc .slot.is-active { color: var(--text); }
.b2fc .slot.is-active::after { transform: scaleX(1); }
.b2fc .slot img { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(210,214,218,.6); }
.b2fc .slot span { min-width: 0; hyphens: none; font: 500 .95rem/1.15 var(--b2fc-font); letter-spacing: .02em; }
.b2fc .slot small { display: block; margin-bottom: 4px; font: 500 .62rem/1 var(--b2fc-font); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }

.b2fc .palette { margin-left: 2.4rem; }
.b2fc .palette__group + .palette__group { margin-top: 1rem; }
.b2fc .palette__label { margin: 0 0 .5rem; font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.b2fc .palette__grid { display: flex; flex-wrap: wrap; gap: 6px; }
.b2fc .gem { position: relative; width: 40px; height: 40px; padding: 3px; border-radius: 50%; }
.b2fc .gem img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(210,214,218,.35); transition: transform .3s var(--ease); }
.b2fc .gem:hover img { transform: scale(1.1); }
.b2fc .gem.is-active, .b2fc .gem.is-active:hover { box-shadow: 0 0 0 1px var(--gold); }
.b2fc .gem em { position: absolute; right: -3px; top: -3px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--panel); color: var(--gold); border: 1px solid var(--gold);
  font: 500 .55rem/13px var(--b2fc-font); font-style: normal; text-align: center; }

.b2fc .step.is-open.is-settled .step__inner { overflow: visible; }

/* "Verder" stays in view at the bottom of the panel while choosing colours */
.b2fc .next-bar {
  position: sticky; bottom: 0; z-index: 2;
  margin: 1rem 0 0 2.4rem; padding: 1.5rem 0 .25rem;
  background: linear-gradient(180deg, rgba(47, 46, 51, 0) 0%, var(--panel) 40%);
}
.b2fc .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);
}
.b2fc .next::after { content: "→"; letter-spacing: 0; font-size: 1rem; transition: transform .4s var(--ease); }
.b2fc .next:hover { border-color: var(--gold); color: var(--text); }
.b2fc .next-bar.is-ready .next, .b2fc .next-bar.is-ready .next:hover { background: var(--gold); border-color: var(--gold); color: var(--graphite); }
.b2fc .next-bar.is-ready .next::after { transform: translateX(4px); }

/* checkout: gold for action */
.b2fc .checkout { padding: 1.25rem clamp(1.25rem, 1rem + 1.2vw, 2.5rem) 1.5rem; border-top: 1px solid var(--hair); background: var(--panel); }
.b2fc .price { margin: 0 0 1rem; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; font: 400 1.6rem/1.12 var(--b2fc-font); letter-spacing: .02em; color: var(--text); }
.b2fc .price__amount { white-space: nowrap; }
.b2fc .price__label { font: 500 .66rem/1.3 var(--b2fc-font); letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.b2fc .btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 17px 20px; border-radius: 0;
  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);
}
.b2fc .btn::after { content: "→"; letter-spacing: 0; font-size: 1rem; transition: transform .4s var(--ease); }
.b2fc .btn:hover, .b2fc .btn:focus { background: transparent; border-color: var(--gold); color: var(--text); }
/* one gold action at a time: the basket button fills once the last step is done */
.b2fc .checkout.is-ready .btn { background: var(--gold); border-color: var(--gold); color: var(--graphite); }
.b2fc .checkout.is-ready .btn:hover, .b2fc .checkout.is-ready .btn:focus { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--graphite); }
.b2fc .btn:hover::after, .b2fc .checkout.is-ready .btn::after { transform: translateX(4px); }
.b2fc .checkout__note { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: .9rem 0 0;
  font-size: .82rem; letter-spacing: .02em; color: var(--text-2); }
.b2fc .checkout__note::before, .b2fc .checkout__note::after { content: ""; width: 20px; height: 1px; background: var(--gold); opacity: .6; }
.b2fc .checkout__share { margin: .6rem 0 0; text-align: center; }
.b2fc .checkout__sep { margin: 0 .6rem; color: var(--text-3); }
.b2fc .mailform { margin: .9rem 0 0; }
.b2fc .mailform[hidden] { display: none; }
.b2fc .mailform__label { display: block; margin: 0 0 .45rem; font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.b2fc .mailform__row { display: flex; }
.b2fc .mailform input[type="email"] {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: .75rem .9rem; border: 1px solid var(--hair-2); border-right: 0; border-radius: 0;
  background: transparent; color: var(--text); font: 400 .86rem/1.2 var(--b2fc-font); box-shadow: none;
}
.b2fc .mailform input[type="email"]::placeholder { color: var(--text-3); }
.b2fc .mailform input[type="email"]:focus { outline: none; border-color: var(--greige); }
.b2fc .mailform__send {
  flex: 0 0 auto; margin: 0; padding: .75rem 1.1rem; border: 1px solid var(--hair-2); border-radius: 0; background: var(--charcoal); color: var(--text); cursor: pointer;
  font: 500 .68rem/1 var(--b2fc-font); letter-spacing: .22em; text-transform: uppercase;
}
.b2fc .mailform__send:hover { border-color: var(--greige); }
.b2fc .mailform__send:disabled { opacity: .6; cursor: default; }
.b2fc .mailform.is-sent input[type="email"] { border-color: rgba(201, 185, 101, .6); }
.b2fc .mailform__note { margin: .45rem 0 0; font-size: .72rem; color: var(--text-3); }
.b2fc .mailform__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.b2fc .link { font-size: .74rem; letter-spacing: .04em; color: var(--text-3);
  text-decoration: underline; text-decoration-color: rgba(201,185,101,.5); text-underline-offset: 4px; }
.b2fc .link:hover { color: var(--text); }

.b2fc .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;
  transition: opacity .3s var(--ease), transform .3s var(--ease); max-width: calc(100vw - 32px); z-index: 99999; }
.b2fc .toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive: by the configurator's own width ---------- */
@container b2fc (max-width: 900px) {
  .b2fc .configurator { display: block; height: auto; min-height: 0; }
  .b2fc .stage { position: sticky; top: var(--b2fc-offset, 0px); z-index: 5; height: clamp(250px, 36vh, 340px); }
  .b2fc .stage__head { top: 1rem; left: 16px; }
  .b2fc .stage__title { font-size: 1.35rem; margin-top: .5rem; }
  .b2fc .reveal-caption { left: 16px; bottom: 3.25rem; }
  .b2fc .reveal-caption strong { font-size: 1.5rem; }
  .b2fc .views { bottom: .9rem; gap: 1.25rem; }
  .b2fc .panel { border-left: 0; }
  .b2fc .steps { overflow: visible; padding: .5rem 16px 1rem; }
  .b2fc .checkout { padding: 1.25rem 16px 2rem; }
  .b2fc .options, .b2fc .palette, .b2fc .slots, .b2fc .next-bar { margin-left: 0; }
  .b2fc .next-bar { padding-bottom: .75rem; }
  .b2fc .horse figcaption { left: 16px; bottom: 2.9rem; gap: .35rem; }
  .b2fc .horse figcaption span:last-child { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .b2fc * { transition: none !important; animation: none !important; }
}