/* fietsenwinkel-proefrit 1.0.0 · elektrische contour naar ReactBits ElectricLogo, glans naar ShinyText,
   plus het gedeelde boekingsmountpunt. Kleuren en fonts alleen via --m-*-tokens, tinten met color-mix. */
.msm-fietsenwinkel-proefrit {
  --pr-ink: var(--m-ink, #163a32);
  --pr-bg: var(--m-bg, #eee9df);
  --pr-hot: var(--m-primary, #ff5f45);
  --pr-lime: var(--m-surface, #dce9bd);
  display: block;
  scroll-margin-top: 110px;
  padding: clamp(72px, 9vw, 128px) 4vw;
  background: var(--pr-bg);
  color: var(--pr-ink);
  font: 400 16px/1.55 var(--m-font-body, Arial, Helvetica, sans-serif);
}
.msm-fietsenwinkel-proefrit *,
.msm-fietsenwinkel-proefrit *::before,
.msm-fietsenwinkel-proefrit *::after { box-sizing: border-box; }
.msm-fietsenwinkel-proefrit .pr-inner { max-width: 1240px; margin: 0 auto; }
.msm-fietsenwinkel-proefrit .pr-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 24px 6vw;
  align-items: end;
  padding-bottom: clamp(32px, 4vw, 52px);
  border-bottom: 1px solid var(--pr-ink);
}
.msm-fietsenwinkel-proefrit .pr-head > *,
.msm-fietsenwinkel-proefrit .pr-top > *,
.msm-fietsenwinkel-proefrit .pr-bottom > * { min-width: 0; }
.msm-fietsenwinkel-proefrit .pr-eyebrow,
.msm-fietsenwinkel-proefrit .pr-photo figcaption span {
  font: 700 10px/1.2 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.msm-fietsenwinkel-proefrit .pr-eyebrow { margin: 0 0 18px; }
.msm-fietsenwinkel-proefrit h2 {
  margin: 0;
  max-width: 12ch;
  font: 500 clamp(46px, 6.6vw, 96px)/0.88 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.055em;
}
.msm-fietsenwinkel-proefrit .pr-shine { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.msm-fietsenwinkel-proefrit .pr-nb { white-space: nowrap; }
.msm-fietsenwinkel-proefrit .pr-lede { margin: 0; max-width: 40ch; font-size: 17px; }

/* Bovenste rij: donker paneel met de elektrische lijntekening en de standen ernaast. */
.msm-fietsenwinkel-proefrit .pr-top { margin-top: clamp(32px, 4vw, 52px); }
.msm-fietsenwinkel-proefrit .pr-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  background: var(--pr-ink);
  color: var(--pr-bg);
}
.msm-fietsenwinkel-proefrit .pr-panel > * { min-width: 0; }
.msm-fietsenwinkel-proefrit .pr-draw { position: relative; aspect-ratio: 600 / 380; margin: clamp(14px, 2.6vw, 36px); }
.msm-fietsenwinkel-proefrit .pr-frame,
.msm-fietsenwinkel-proefrit .pr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.msm-fietsenwinkel-proefrit .pr-frame {
  fill: none;
  stroke: color-mix(in srgb, var(--pr-lime) 70%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msm-fietsenwinkel-proefrit[data-live] .pr-frame { stroke: color-mix(in srgb, var(--pr-lime) 26%, transparent); stroke-width: 1.4; }
.msm-fietsenwinkel-proefrit .pr-canvas { touch-action: pan-y; cursor: crosshair; }
.msm-fietsenwinkel-proefrit .pr-labels path { stroke: color-mix(in srgb, var(--pr-lime) 55%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.msm-fietsenwinkel-proefrit .pr-labels text {
  fill: var(--pr-lime);
  stroke: none;
  font: 700 10px/1 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.18em;
  text-anchor: middle;
}
.msm-fietsenwinkel-proefrit .pr-controls {
  align-self: stretch;
  display: grid;
  align-content: center;
  padding: clamp(18px, 2.6vw, 36px);
  border-left: 1px solid color-mix(in srgb, var(--pr-bg) 20%, transparent);
}
.msm-fietsenwinkel-proefrit .pr-label {
  margin: 0 0 14px;
  color: var(--pr-lime);
  font: 700 10px/1.2 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.msm-fietsenwinkel-proefrit .pr-modes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.msm-fietsenwinkel-proefrit .pr-modes button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--pr-bg) 34%, transparent);
  background: transparent;
  color: var(--pr-bg);
  font: 700 19px/1 var(--m-font-body, Arial, Helvetica, sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.msm-fietsenwinkel-proefrit .pr-modes button:hover { border-color: var(--pr-bg); }
.msm-fietsenwinkel-proefrit .pr-modes button[aria-checked="true"] { background: var(--pr-hot); border-color: var(--pr-hot); color: var(--pr-ink); }
.msm-fietsenwinkel-proefrit .pr-modes button:focus-visible { outline: 3px solid var(--pr-lime); outline-offset: 3px; }
/* Drie streepjes als vermogensmeter: zoveel staan er aan als de stand sterk is. */
.msm-fietsenwinkel-proefrit .pr-modes i { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.msm-fietsenwinkel-proefrit .pr-modes b { display: block; width: 5px; background: currentColor; opacity: 0.28; }
.msm-fietsenwinkel-proefrit .pr-modes b:nth-child(1) { height: 7px; }
.msm-fietsenwinkel-proefrit .pr-modes b:nth-child(2) { height: 11px; }
.msm-fietsenwinkel-proefrit .pr-modes b:nth-child(3) { height: 16px; }
.msm-fietsenwinkel-proefrit .pr-modes [data-mode="eco"] b:nth-child(1),
.msm-fietsenwinkel-proefrit .pr-modes [data-mode="tour"] b:nth-child(-n + 2),
.msm-fietsenwinkel-proefrit .pr-modes [data-mode="sport"] b { opacity: 1; }
.msm-fietsenwinkel-proefrit .pr-feel {
  min-height: 4.6em;
  margin: 16px 0 0;
  font: 400 clamp(19px, 1.8vw, 24px)/1.3 var(--m-font-display, Georgia, "Times New Roman", serif);
}
.msm-fietsenwinkel-proefrit .pr-feel strong { font-weight: 500; color: var(--pr-hot); margin-right: 0.3em; }

.msm-fietsenwinkel-proefrit .pr-photo {
  position: relative;
  margin: 0 0 clamp(36px, 4vw, 56px);
  background: var(--pr-lime);
  overflow: hidden;
}
.msm-fietsenwinkel-proefrit .pr-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 54%;
}
.msm-fietsenwinkel-proefrit .pr-photo figcaption {
  display: grid;
  gap: 6px;
  padding: 16px clamp(16px, 2vw, 24px) 20px;
  border-top: 1px solid color-mix(in srgb, var(--pr-ink) 30%, transparent);
  font-size: 15px;
}

/* Onderste rij: meenemen en het boekingsmoment. */
.msm-fietsenwinkel-proefrit .pr-bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(48px, 6vw, 88px);
  align-items: start;
}
.msm-fietsenwinkel-proefrit .pr-mee h3 {
  margin: 0 0 16px;
  font: 500 clamp(30px, 3vw, 42px)/1 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -0.035em;
}
.msm-fietsenwinkel-proefrit .pr-accu {
  margin: 0 0 18px;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--pr-lime) 60%, var(--pr-bg));
}
.msm-fietsenwinkel-proefrit .pr-accu img { width: 74%; height: auto; }
.msm-fietsenwinkel-proefrit .pr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.msm-fietsenwinkel-proefrit .pr-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--pr-ink) 22%, transparent);
}
.msm-fietsenwinkel-proefrit .pr-list svg { color: var(--pr-hot); margin-top: 1px; }
.msm-fietsenwinkel-proefrit .pr-list b { font-weight: 700; }
.msm-fietsenwinkel-proefrit .pr-accu-note {
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--pr-ink) 22%, transparent);
  font-size: 14px;
  color: color-mix(in srgb, var(--pr-ink) 82%, transparent);
}
.msm-fietsenwinkel-proefrit .pr-book {
  padding: clamp(20px, 3vw, 40px);
  background: color-mix(in srgb, var(--pr-bg) 40%, #fff);
  border: 1px solid var(--pr-ink);
  box-shadow: 10px 10px 0 var(--pr-lime);
}
.msm-fietsenwinkel-proefrit .pr-book .ms-title {
  font-family: var(--m-font-display, Georgia, "Times New Roman", serif);
  font-weight: 500;
  font-size: clamp(30px, 3vw, 42px);
  letter-spacing: -0.035em;
}
.msm-fietsenwinkel-proefrit .pr-book .ms-eyebrow { font-size: 10px; letter-spacing: 0.2em; }

@media (max-width: 900px) {
  .msm-fietsenwinkel-proefrit .pr-head,
  .msm-fietsenwinkel-proefrit .pr-top,
  .msm-fietsenwinkel-proefrit .pr-bottom,
  .msm-fietsenwinkel-proefrit .pr-panel { grid-template-columns: minmax(0, 1fr); }
  .msm-fietsenwinkel-proefrit .pr-controls { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--pr-bg) 20%, transparent); }
  .msm-fietsenwinkel-proefrit .pr-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .msm-fietsenwinkel-proefrit { padding-left: 16px; padding-right: 16px; }
  .msm-fietsenwinkel-proefrit .pr-modes button { padding: 10px; letter-spacing: 0.1em; }
  .msm-fietsenwinkel-proefrit .pr-modes { grid-template-columns: minmax(0, 1fr); }
  .msm-fietsenwinkel-proefrit .pr-labels { display: none; }
  .msm-fietsenwinkel-proefrit .pr-book { padding: 18px 14px; box-shadow: 6px 6px 0 var(--pr-lime); }
}
@media (prefers-reduced-motion: reduce) {
  .msm-fietsenwinkel-proefrit .pr-modes button { transition: none; }
}