/* Wheelset Finder (formerly Find My Fit, redesign October 2026): four questions, one clear result. Phone first.
   The shared header and footer keep their styles from base.css. Every rule is scoped to .fmf-page, because
   base.css styles ".showmybike-root button" and links with one class and one element.

   No sizes, weights or shapes of its own (Paul, 2026-10-10, v3). The Finder uses the site's building blocks with
   the same values; tests/find-my-fit-redesign-checks.js compares them with their originals:
     .v5-cta              the homepage buttons "Open Visualizer →" / "Find your wheelset" (styles/home-v5.css)
     pills, chips, fields the Visualizer's switch "Single / Compare" (.lv-seg button, styles/visualizer-v5.css),
                          44 px high here instead of 40 so that every tap target reaches 44 px
     labels               the small form of the same switch in the tyre colour bar (.lv-tyres .lv-seg button)
     page heading         the Visualizer's "Road bike wheelset visualizer." (.c-h1)
     card titles          the product title on wheelset cards (.ws-card__name, styles/card.css)
   Everything else takes its type sizes and weights from styles/tokens.css. */
.fit-root { overflow-x: clip; }
.fit-root > nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.fit-root > nav.nav--solid { background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e5e5; backdrop-filter: blur(14px); }

.showmybike-root .fmf-page {
  --fmf-bg: #F3F2EF;          /* like the Visualizer stage */
  --fmf-card: #FFFFFF;
  --fmf-fg: #2E2D2B;          /* anthracite, not black */
  --fmf-soft: #55524C;
  --fmf-muted: #6B6862;
  --fmf-line: #DDDAD5;
  --fmf-track: #E6E3DE;
  --fmf-off: #D6D3CE;
  --fmf-art: #E2DFD9;         /* ground of the priority cards' picture area while the photo loads */
  --fmf-orange: var(--color-accent);          /* the homepage orange, never a value of its own */
  --fmf-orange-hover: var(--color-accent-hover);
  --fmf-tint: #FFF1E8;
  --fmf-heading: clamp(20px, calc(1.772vw - 1.74px), 34px);   /* size of .c-h1 */
  padding: calc(var(--nav-height) + 14px) 24px var(--space-8);
  background: var(--fmf-bg);
  color: var(--fmf-fg);
  font-size: var(--text-base);
  line-height: 1.4;
}
.fmf-page *, .fmf-page *::before, .fmf-page *::after { box-sizing: border-box; }
.fmf-page [hidden] { display: none !important; }
/* Resets without weight (:where), so every class below can set its own type and spacing */
:where(.fmf-page) :is(p, h1, h2, h3, ul) { margin: 0; padding: 0; }
:where(.fmf-page) ul { list-style: none; }
:where(.fmf-page) button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fmf-page button:disabled { cursor: not-allowed; }
.fmf-page :focus-visible { outline: 3px solid var(--fmf-fg); outline-offset: 3px; }
.fmf-page h2:focus { outline: none; }
.fmf-page .fmf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.fmf-page .fmf-shell { max-width: 1120px; margin: 0 auto; }

/* ---------- Building blocks ---------- */
/* Homepage buttons (.home-v5 .v5-cta) */
.fmf-page .v5-cta { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border: 1.5px solid transparent; border-radius: var(--radius-full); font: var(--weight-semibold) 15px var(--font-body); text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); -webkit-tap-highlight-color: transparent; }
/* The Finder also uses it on <button>, which brings a grey face of its own */
.fmf-page button.v5-cta { background: none; cursor: pointer; }
.fmf-page .v5-cta.v5-cta--primary { background: var(--color-accent); color: #fff; }
.fmf-page .v5-cta.v5-cta--primary:hover { background: var(--color-accent-hover); }
/* The homepage's second button stands on the dark hero (white rim and type); on a light ground: grey rim, anthracite type */
.fmf-page .v5-cta.v5-cta--outline { border-color: var(--fmf-off); color: var(--fmf-fg); }
.fmf-page .v5-cta.v5-cta--outline:hover { border-color: var(--fmf-fg); background: rgba(46,45,43,.04); }
.fmf-page .v5-cta.v5-cta--outline[aria-pressed="true"] { border-color: var(--color-accent); }
.fmf-page .v5-cta:disabled { opacity: .45; }
.fmf-page .v5-cta.v5-cta--primary:disabled:hover { background: var(--color-accent); }
/* Visualizer switch button (.lv-seg button): chips, menu fields, pills. Chosen: orange with white type. */
.fmf-page :is(.fmf-chip, .fmf-field, .fmf-pills button, .fmf-pick, .fmf-few button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 9px 18px;
  border: 1px solid var(--fmf-line); border-radius: 999px; background: var(--fmf-card); color: var(--fmf-fg);
  font: var(--weight-medium) 14px var(--font-body); transition: background .25s, color .25s, border-color .25s;
}
.fmf-page :is(.fmf-field, .fmf-pills button, .fmf-pick)[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.fmf-page :is(.fmf-field, .fmf-pills button, .fmf-pick, .fmf-variants button):disabled { opacity: .4; }
/* Its small form (.lv-tyres .lv-seg button): labels that are not tapped, and the variant switch under the name */
.fmf-page :is(.fmf-badge, .fmf-variants button) { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--fmf-line); border-radius: 999px; background: var(--fmf-card); color: var(--fmf-soft); font: var(--weight-medium) 13px var(--font-body); }
.fmf-page .fmf-badge.is-best, .fmf-page .fmf-variants button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
/* Product title of the wheelset cards (.ws-card__name): titles on terrain, priority and brand cards */
.fmf-page :is(.fmf-band strong, .fmf-prio-text strong, .fmf-open strong) { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.2; }
/* Links on a light ground: anthracite type, the orange is in the underline */
.fmf-page .fmf-textlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fmf-fg); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-color: var(--fmf-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fmf-page .fmf-textlink:hover { text-decoration-thickness: 3px; }

/* ---------- Progress, page heading (question 01) and the small title line (from question 02) ---------- */
.fmf-page .fmf-top { display: grid; gap: 8px; }
.fmf-page .fmf-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.fmf-page .fmf-bars i { height: 3px; border-radius: 2px; background: var(--fmf-off); }
.fmf-page .fmf-bars i.is-on { background: var(--fmf-orange); }
.fmf-page .fmf-topline { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.fmf-page .fmf-top.is-first .fmf-topline { display: none; }
.fmf-page .fmf-kicker { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--fmf-muted); }
.fmf-page .fmf-restart { min-height: 44px; padding: 0 2px; border: 0; background: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.fmf-page .fmf-intro { max-width: 760px; width: 100%; margin: 6px auto 0; }
/* "Road bike wheelset finder." exactly like the Visualizer's .c-h1 */
.fmf-page .fmf-intro h1 { font: 600 var(--fmf-heading)/1.15 var(--font-display, Montserrat), sans-serif; letter-spacing: -.045em; }
/* From question 02 the heading stays in the page for search engines and screen readers, out of sight */
.fmf-page .fmf-top:not(.is-first) .fmf-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Shared pieces ---------- */
@keyframes fmf-rise { from { transform: translateY(12px); opacity: 0; } }
@keyframes fmf-spin { to { transform: rotate(360deg); } }
.fmf-page .fmf-app.is-entering .fmf-rise { animation: fmf-rise .35s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
.fmf-page .fmf-note { font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-center { display: flex; justify-content: center; text-align: center; }
.fmf-page .fmf-back { align-self: flex-start; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--fmf-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.fmf-page .fmf-back:hover { color: var(--fmf-fg); }
.fmf-page .fmf-notice { margin-top: 16px; font-size: var(--text-sm); }
/* The catalogue photo keeps its full canvas (wheel = 286 of 640 px, centred): the box shows just the wheel. */
.fmf-page .fmf-wheelbox { position: relative; display: block; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; }
.fmf-page .fmf-wheelbox img { position: absolute; left: -61.9%; top: -61.9%; width: 223.8%; height: 223.8%; max-width: none; }
.fmf-page .fmf-flag { flex: none; width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(46,45,43,.16); }
.fmf-page .fmf-symbol { flex: none; width: 40px; height: 40px; fill: none; stroke: var(--fmf-orange); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fmf-page .fmf-profile { flex: none; width: 44px; height: 16px; }
.fmf-page .fmf-profile path { fill: none; stroke: var(--fmf-orange); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ---------- Questions ---------- */
.fmf-page .fmf-ask, .fmf-page .fmf-details, .fmf-page .fmf-all { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.fmf-page .fmf-ask--terrain { margin-top: 12px; }
.fmf-page .fmf-qhead { display: flex; flex-direction: column; gap: 6px; }
.fmf-page .fmf-count { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fmf-muted); }
.fmf-page .fmf-count b { margin-right: 4px; font: 800 var(--fmf-heading)/1 var(--font-display); color: var(--fmf-orange); }
/* Question headings: as before, but never larger than the Visualizer's page heading */
.fmf-page .fmf-qhead h2 { font: 800 var(--fmf-heading)/1.15 var(--font-display); letter-spacing: -.02em; }
.fmf-page .fmf-sub { font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-sub b { color: var(--fmf-fg); font-weight: var(--weight-semibold); }
.fmf-page .fmf-checking { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; max-width: 760px; margin: 0 auto 12px; padding: 0 12px; border-radius: 12px; background: var(--fmf-card); font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-checking span { flex: 1 1 auto; padding: 8px 0; }
.fmf-page .fmf-checking strong { color: var(--fmf-fg); font-weight: var(--weight-semibold); }
.fmf-page .fmf-foot { display: flex; flex-direction: column; gap: 6px; }
.fmf-page .fmf-foot-actions { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--fmf-line); }
.fmf-page .fmf-foot-actions .v5-cta { flex: 1 1 0; padding-inline: 12px; }   /* as the homepage does on phones */

/* 01 Terrain: photo cards. On phones the three cards shrink with the screen so that they stay in view
   together with the page heading (svh = the height that is really visible in mobile browsers). */
.fmf-page .fmf-terrain { display: grid; gap: 10px; }
.fmf-page .fmf-photo {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0;
  min-height: clamp(92px, calc((100vh - 246px) / 3), 132px);
  min-height: clamp(92px, calc((100svh - 246px) / 3), 132px);
  border: 1px solid var(--fmf-line); border-radius: 20px; overflow: hidden; background: #8d8a84; text-align: left; box-shadow: 0 1px 3px rgba(46,45,43,.1); transition: transform .2s, box-shadow .2s;
}
.fmf-page .fmf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmf-page .fmf-photo[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fmf-orange); }
.fmf-page .fmf-band { position: relative; display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 9px 16px 10px; background: rgba(28,27,25,.62); color: #fff; }
.fmf-page .fmf-band small { font-size: var(--text-sm); color: #ECEAE6; }
.fmf-page .fmf-gain { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--fmf-fg); font-size: 12px; font-weight: var(--weight-semibold); }

/* 02 Priorities: built like the terrain cards (same rim, corners and shadow), the photo on top and the text
   below. Every photo area has the same shape, whatever the length of the title: on phones the whole photo
   (480 x 185), on desktop a taller cut around the rider, who stands in the middle of each photo. */
.fmf-page .fmf-prios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fmf-page .fmf-prio {
  position: relative; display: flex; flex-direction: column; min-height: 152px; padding: 0;
  border: 1px solid var(--fmf-line); border-radius: 20px; overflow: hidden; background: var(--fmf-card); text-align: left; box-shadow: 0 1px 3px rgba(46,45,43,.1); transition: transform .2s, box-shadow .2s;
}
.fmf-page .fmf-prio[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fmf-orange); }
.fmf-page .fmf-prio-art { position: relative; display: flex; flex: none; align-items: center; justify-content: center; aspect-ratio: 480 / 185; background: var(--fmf-art); }
.fmf-page .fmf-prio-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmf-page .fmf-tick { position: absolute; top: 10px; right: 10px; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fmf-orange); }
.fmf-page .fmf-tick svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.fmf-page .fmf-prio[aria-pressed="true"] .fmf-tick { display: flex; }
.fmf-page .fmf-prio-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.fmf-page .fmf-prio-text small { font-size: 12px; color: var(--fmf-soft); }

/* 03 Brands: flag and country of the brand's base, alphabetical, no logos, none highlighted */
.fmf-page .fmf-open { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 0 16px; border: 1px solid var(--fmf-line); border-radius: 20px; background: var(--fmf-card); text-align: left; box-shadow: 0 1px 3px rgba(46,45,43,.1); transition: border-color .15s, box-shadow .15s; }
.fmf-page .fmf-open[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fmf-orange); }
.fmf-page .fmf-open > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.fmf-page .fmf-open small { font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-or { font-size: var(--text-sm); color: var(--fmf-muted); }
.fmf-page .fmf-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fmf-page .fmf-brand { display: flex; align-items: center; gap: 9px; min-height: 56px; padding: 6px 10px; border: 1px solid var(--fmf-line); border-radius: 14px; background: var(--fmf-card); text-align: left; transition: background .15s, border-color .15s, box-shadow .15s; }
.fmf-page .fmf-brand-id { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.fmf-page .fmf-brand-id b { font-size: 14px; font-weight: var(--weight-medium); line-height: 1.2; }
.fmf-page .fmf-brand-id small { font-size: var(--text-xs); line-height: 1.2; color: var(--fmf-muted); }
.fmf-page .fmf-brand-count { font-size: 12px; color: var(--fmf-soft); }
.fmf-page .fmf-brand[aria-pressed="true"] { border-color: var(--fmf-orange); background: var(--fmf-tint); box-shadow: 0 0 0 1px var(--fmf-orange); }

/* 04 Budget */
.fmf-page .fmf-budgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fmf-page .fmf-budget { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 132px; padding: 12px 16px; border: 1px solid var(--fmf-line); border-radius: 20px; background: var(--fmf-card); text-align: left; box-shadow: 0 1px 3px rgba(46,45,43,.1); transition: transform .2s, box-shadow .2s; }
.fmf-page .fmf-budget[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--fmf-orange); }
.fmf-page .fmf-budget:disabled { opacity: .45; }
/* The count: the grey of the secondary texts on the light orange tint, not a hard black */
.fmf-page .fmf-left { position: absolute; top: 12px; left: 14px; padding: 4px 10px; border-radius: 999px; background: var(--fmf-tint); color: var(--fmf-soft); font-size: 12px; font-weight: var(--weight-medium); }
.fmf-page .fmf-budget:disabled .fmf-left { background: var(--fmf-track); }
.fmf-page .fmf-budget-text { display: flex; flex-direction: column; gap: 2px; }
.fmf-page .fmf-budget-text strong { font: var(--weight-bold) var(--text-price)/1.2 var(--font-display); letter-spacing: var(--tracking-tight); }
.fmf-page .fmf-budget-text small { font-size: var(--text-sm); color: var(--fmf-soft); }

/* ---------- Result: answer chips. An open chip gets an orange rim, its menu hangs under it with a pointer, the rest dims. ---------- */
.fmf-page .fmf-backlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--fmf-fg); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
.fmf-page .fmf-chipbar { position: relative; margin-bottom: 10px; }
.fmf-page .fmf-chips { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.fmf-page .fmf-chip { padding: 9px 14px; white-space: nowrap; }
.fmf-page .fmf-chip[aria-expanded="true"] { border-color: var(--fmf-orange); box-shadow: 0 0 0 1px var(--fmf-orange); }
/* "+ Add details": the shape of the chips, bold type; a set detail carries a cross */
.fmf-page .fmf-chips .fmf-chip--add { font-weight: var(--weight-bold); }
.fmf-page .fmf-chip--detail span { color: var(--fmf-muted); }
.fmf-page .fmf-scrim { display: none; position: fixed; inset: 0; z-index: 20; background: rgba(46,45,43,.34); }
.fmf-page .fmf-chipbar.is-open { z-index: 21; }
.fmf-page .fmf-chipbar.is-open .fmf-scrim { display: block; }
.fmf-page .fmf-chipbar.is-open .fmf-chips { z-index: 22; }
.fmf-page #fmf-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 22; }
.fmf-page .fmf-menu { position: relative; margin-top: 12px; padding: 12px; border-radius: 18px; background: var(--fmf-card); box-shadow: 0 18px 44px rgba(28,27,25,.32); }
.fmf-page .fmf-menu::before { content: ""; position: absolute; top: -7px; left: var(--pointer, 40px); width: 14px; height: 14px; margin-left: -7px; border-radius: 3px 0 0 0; background: var(--fmf-card); transform: rotate(45deg); }
/* Fields as large as the chips above them, equal in width; symbols and profile lines stay, small */
.fmf-page .fmf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fmf-page .fmf-menu--terrain .fmf-fields { grid-template-columns: minmax(0, 1fr); }   /* phones: one below the other, nothing wraps */
.fmf-page .fmf-field { min-width: 0; padding: 6px 10px; line-height: 1.15; text-align: center; }
.fmf-page .fmf-field b { font-weight: inherit; }
.fmf-page .fmf-field small { font-size: 12px; color: var(--fmf-muted); white-space: nowrap; }
.fmf-page .fmf-field .fmf-symbol { width: 18px; height: 18px; stroke-width: 2; }
.fmf-page .fmf-field .fmf-profile { width: 24px; height: 10px; }
.fmf-page .fmf-field[aria-pressed="true"] :is(.fmf-profile, .fmf-symbol) path { stroke: #fff; }
.fmf-page .fmf-field[aria-pressed="true"] small { color: #fff; }
.fmf-page .fmf-menu--brands .fmf-field { justify-content: flex-start; text-align: left; }
.fmf-page .fmf-menu-foot { display: flex; gap: 8px; margin-top: 10px; }
.fmf-page .fmf-menu-foot .v5-cta { padding-inline: 12px; }
.fmf-page .fmf-menu-foot .v5-cta:first-child { flex: 1 1 0; }
.fmf-page .fmf-menu-foot .fmf-menu-done { flex: 0 0 auto; min-width: 96px; }

/* ---------- Result: label, the wheel free on a white card, name ---------- */
.fmf-page .fmf-result { display: flex; flex-direction: column; gap: 10px; }
.fmf-page .fmf-stage, .fmf-page .fmf-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fmf-page .fmf-stage { padding: 12px 14px 16px; border-radius: 20px; background: var(--fmf-card); }
.fmf-page .fmf-heroline { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 47px; }
.fmf-page .fmf-hero { display: flex; align-items: center; justify-content: center; margin-top: -26px; pointer-events: none; }
.fmf-page .fmf-hero .fmf-wheelbox { width: 172px; height: 172px; }
.fmf-page .fmf-wheel { animation: fmf-spin 6s linear infinite; }
.fmf-page .fmf-id { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.fmf-page .fmf-brandname { font-size: var(--text-sm); color: var(--fmf-muted); }
.fmf-page .fmf-name { max-width: 100%; overflow: hidden; font: var(--weight-bold) var(--text-lg)/1.25 var(--font-display); letter-spacing: var(--tracking-tight); white-space: nowrap; text-overflow: ellipsis; }
.fmf-page .fmf-specs { font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-variants { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--fmf-muted); }

/* Result: reasons and balance */
.fmf-page .fmf-why { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 20px; background: var(--fmf-card); }
.fmf-page .fmf-why h3, .fmf-page .fmf-label { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.4; color: var(--fmf-muted); }
.fmf-page .fmf-why ul { display: flex; flex-direction: column; gap: 6px; }
.fmf-page .fmf-why li { display: flex; align-items: flex-start; gap: 8px; min-height: 38px; font-size: var(--text-base); line-height: 1.35; }
.fmf-page .fmf-why li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--fmf-orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fmf-page .fmf-why li > span { display: flex; flex-direction: column; min-width: 0; }
.fmf-page .fmf-why li b { font-weight: var(--weight-semibold); }
.fmf-page .fmf-why li span span { font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-how { align-self: flex-start; }
.fmf-page .fmf-how-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--fmf-line); }
.fmf-page .fmf-how-body .fmf-textlink { align-self: flex-start; }
.fmf-page .fmf-balance { display: grid; gap: 8px; }
.fmf-page .fmf-balance p { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.fmf-page .fmf-balance p b { font-weight: var(--weight-semibold); }
.fmf-page .fmf-balance i { display: block; height: 6px; border-radius: 3px; background: var(--fmf-track); }
.fmf-page .fmf-balance i i { background: var(--fmf-orange); }
.fmf-page .fmf-outside { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; padding: 10px 12px; border: 1px dashed var(--fmf-off); border-radius: 12px; font-size: var(--text-sm); }
.fmf-page .fmf-outside strong { font-weight: var(--weight-semibold); }
.fmf-page .fmf-outside p { color: var(--fmf-soft); }

/* Result: main button and second button, equally wide; round heart of the same height; other picks; more */
.fmf-page .fmf-cta { display: flex; gap: 8px; }
.fmf-page .fmf-cta .v5-cta { flex: 1 1 0; min-width: 0; padding-inline: 12px; white-space: nowrap; }   /* as the homepage does on phones */
.fmf-page .fmf-heartwrap { position: relative; display: inline-flex; flex: none; pointer-events: auto; }
.fmf-page .fmf-heart { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 47px; height: 47px; padding: 0; border: 1.5px solid var(--fmf-off); border-radius: 50%; background: none; pointer-events: auto; transition: border-color var(--duration-fast), background var(--duration-fast); }
.fmf-page .fmf-heart svg { width: 20px; height: 20px; fill: none; stroke: var(--fmf-fg); stroke-width: 1.8; }
.fmf-page .fmf-heart[aria-pressed="true"] { border-color: var(--fmf-orange); }
.fmf-page .fmf-heart[aria-pressed="true"] svg { fill: var(--fmf-orange); stroke: var(--fmf-orange); }
/* The note hangs under the heart, its tip points at it (phones: heart top right) */
.fmf-page .fmf-saved { position: absolute; right: 0; top: calc(100% + 9px); z-index: 4; padding: 6px 12px; border-radius: 999px; background: var(--fmf-fg); color: #fff; font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap; animation: fmf-rise .25s ease-out both; }
.fmf-page .fmf-saved::before { content: ""; position: absolute; right: 18px; top: -4px; width: 10px; height: 10px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.fmf-page .fmf-others { display: flex; flex-direction: column; gap: 6px; }
.fmf-page .fmf-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 6px 10px 6px 8px; border: 0; border-radius: 14px; background: var(--fmf-card); text-align: left; }
.fmf-page .fmf-row-text { display: flex; flex-direction: column; flex: 1; gap: 1px; min-width: 0; }
.fmf-page .fmf-row-text small { font-size: var(--text-xs); color: var(--fmf-muted); }
.fmf-page .fmf-row-text b { overflow: hidden; font-size: var(--text-base); font-weight: var(--weight-semibold); white-space: nowrap; text-overflow: ellipsis; }
.fmf-page .fmf-row-text span { font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-row-text em { display: flex; align-items: center; gap: 5px; font-size: 12px; font-style: normal; font-weight: var(--weight-medium); color: var(--fmf-soft); }
.fmf-page .fmf-row-text em.is-best { color: var(--fmf-fg); }
.fmf-page .fmf-row-text em.is-best::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fmf-orange); }
/* "Lowest price" in the list: the same small label, with an open ring instead of the orange dot */
.fmf-page .fmf-whyline em { display: flex; flex: none; align-items: center; gap: 5px; font-size: 12px; font-style: normal; font-weight: var(--weight-medium); color: var(--fmf-fg); white-space: nowrap; }
.fmf-page .fmf-whyline em::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--fmf-fg); border-radius: 50%; }
/* The reason under a row: one line in the type of the secondary texts, never cut with dots (the script drops
   the advantage where the full line does not fit) */
.fmf-page .fmf-reason, .fmf-page .fmf-row-text .fmf-reason { display: block; overflow: hidden; font-size: 12px; color: var(--fmf-soft); white-space: nowrap; }
.fmf-page .fmf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fmf-page .fmf-chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--fmf-muted); stroke-width: 2; stroke-linecap: round; }
.fmf-page .fmf-few { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--fmf-off); border-radius: 14px; font-size: var(--text-sm); }
.fmf-page .fmf-few strong { font-weight: var(--weight-semibold); }
.fmf-page .fmf-few p { color: var(--fmf-soft); }
.fmf-page .fmf-few div { display: flex; flex-wrap: wrap; gap: 6px; }
.fmf-page .fmf-few button { white-space: nowrap; }
.fmf-page .fmf-few button b { color: var(--fmf-muted); font-weight: inherit; }
.fmf-page .fmf-filterline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.fmf-page .fmf-filterline span { flex: 1 1 220px; }
.fmf-page .fmf-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.fmf-page .fmf-fineprint { max-width: 760px; margin: 14px auto 0; font-size: 12px; line-height: 1.5; color: var(--fmf-muted); text-align: center; }
.fmf-page .fmf-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 16px; text-align: center; font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-spinner { width: 28px; height: 28px; border: 3px solid var(--fmf-track); border-top-color: var(--fmf-orange); border-radius: 50%; animation: fmf-spin .9s linear infinite; }

/* ---------- Optional details ---------- */
.fmf-page .fmf-optional { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fmf-muted); }
.fmf-page .fmf-group { display: flex; flex-direction: column; gap: 8px; }
.fmf-page .fmf-group > p { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.fmf-page .fmf-group > small { font-size: var(--text-sm); color: var(--fmf-soft); }
.fmf-page .fmf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fmf-page .fmf-pills button small { font-size: 12px; color: var(--fmf-muted); }
.fmf-page .fmf-pills button[aria-pressed="true"] small { color: #fff; }
.fmf-page .fmf-details > .v5-cta { align-self: stretch; }

/* ---------- All matches: the list, the main button, the way to the Explorer. On phones the button sits in a bar
   that stays at the bottom of the screen: edge to edge, one fine line above and below, no rounded box. ---------- */
.fmf-page .fmf-list { display: flex; flex-direction: column; gap: 8px; }
/* A row: photo, text, pick button; below text and button the reason in a line of its own, so that it has room on phones */
.fmf-page .fmf-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 68px; padding: 6px 8px; border-radius: 14px; background: var(--fmf-card); }
.fmf-page :is(.fmf-whyline, .fmf-careline) { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; grid-column: 2 / -1; min-width: 0; border-top: 1px solid var(--fmf-track); }
/* "Why here?" and "Conditions": the type of the fold controls, 44 px to tap */
.fmf-page .fmf-rowlink { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; padding: 0; border: 0; background: none; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fmf-fg); white-space: nowrap; }
.fmf-page .fmf-care-facts { flex: 1 1 0; min-width: 0; padding: 4px 0; font-size: 12px; color: var(--fmf-soft); }
.fmf-page :is(.fmf-whyhere, .fmf-care-body) { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; padding: 8px 2px 6px; border-top: 1px solid var(--fmf-track); font-size: var(--text-sm); }
.fmf-page :is(.fmf-whyhere, .fmf-care-body)[hidden] { display: none; }
.fmf-page .fmf-wh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
.fmf-page .fmf-wh-name b, .fmf-page .fmf-wh-total { font-weight: var(--weight-semibold); }
.fmf-page .fmf-wh-pct { font-variant-numeric: tabular-nums; }
.fmf-page .fmf-wh-value { grid-column: 1 / -1; grid-row: 2; font-size: 12px; color: var(--fmf-soft); }
.fmf-page .fmf-wh-total { padding-top: 6px; border-top: 1px solid var(--fmf-track); }
.fmf-page .fmf-care-body p { color: var(--fmf-soft); }
.fmf-page .fmf-care-note, .fmf-page .fmf-care-body .fmf-care-note { font-size: 12px; color: var(--fmf-muted); }
.fmf-page .fmf-care-body .fmf-textlink { align-self: flex-start; }
.fmf-page .fmf-why .fmf-rowlink { align-self: flex-start; margin-left: 0; }
.fmf-page .fmf-why .fmf-whyhere { padding-inline: 0; }
.fmf-page .fmf-whyline .fmf-reason { flex: 1 1 auto; min-width: 0; }
.fmf-page .fmf-list li:has(> :is(.fmf-whyline, .fmf-careline)) .fmf-wheelbox { grid-row: 1 / span 2; }
.fmf-page .fmf-tier { display: flex; flex-direction: column; gap: 8px; }
/* Groups: a line under each heading says why the group stands there (type of the row reasons). The lower group
   opens and closes with its whole heading row, "Very close" has a row for the rest of its wheels. Both are
   44 px high for tapping; the triangle is a plain character in the text colour. */
.fmf-page .fmf-tier-note { margin-top: -4px; font-size: 12px; color: var(--fmf-soft); }
.fmf-page .fmf-tier-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; }
.fmf-page .fmf-tier-head + .fmf-tier-note { margin-top: -12px; }
.fmf-page .fmf-tier-state, .fmf-page .fmf-tier-more { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fmf-fg); white-space: nowrap; }
.fmf-page .fmf-tier-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--fmf-line); border-radius: 14px; background: none; }
.fmf-page .fmf-pick { flex: none; min-width: 88px; padding: 9px 12px; }
.fmf-page .fmf-list .fmf-row-text span { font-size: 12px; text-wrap: balance; }
.fmf-page .fmf-pick[aria-pressed="true"]:disabled { opacity: 1; }
.fmf-page .fmf-bar { position: sticky; bottom: 0; z-index: 6; display: flex; justify-content: center; margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-block: 1px solid var(--fmf-line); background: var(--fmf-card); box-shadow: 0 -8px 20px rgba(46,45,43,.07); }
.fmf-page .fmf-bar .v5-cta { flex: 1 1 auto; max-width: 420px; }

/* ---------- One closed tile below the tool, before the footer, at the site's usual distance between sections
   (48 px on phones, 64 px on desktop). The explanations stay in the page for readers and search engines. ---------- */
.fmf-page .fmf-faq { max-width: 760px; margin: var(--space-7) auto 0; }
.fmf-page .fmf-faq-tile { border: 1px solid var(--fmf-line); border-radius: 20px; background: var(--fmf-card); }
.fmf-page .fmf-faq-tile > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 18px; font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.fmf-page .fmf-faq-tile > summary::-webkit-details-marker { display: none; }
.fmf-page .fmf-faq-tile > summary::after { content: "+"; flex: none; font-size: 20px; font-weight: 400; color: var(--fmf-muted); }
.fmf-page .fmf-faq-tile[open] > summary::after { content: "–"; }
.fmf-page .fmf-faq-body { padding: 0 18px 8px; }
.fmf-page .fmf-faq-body h3 { padding-top: 10px; border-top: 1px solid var(--fmf-line); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.fmf-page .fmf-faq-body p { padding: 4px 0 12px; font-size: var(--text-sm); line-height: 1.55; color: var(--fmf-soft); }
.fmf-page .fmf-faq-body a { color: var(--fmf-fg); font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-color: var(--fmf-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* The static catalogue list for visitors without JavaScript */
.fmf-page .static-product-links { max-width: 1120px; margin: 32px auto 0; }

@media (hover: hover) {
  .fmf-page .fmf-photo:hover, .fmf-page .fmf-prio:hover, .fmf-page .fmf-budget:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(46,45,43,.16); }
  .fmf-page .fmf-photo[aria-pressed="true"]:hover, .fmf-page .fmf-prio[aria-pressed="true"]:hover, .fmf-page .fmf-budget[aria-pressed="true"]:hover { box-shadow: 0 0 0 3px var(--fmf-orange), 0 10px 24px rgba(46,45,43,.16); }
  .fmf-page .fmf-restart:hover { text-decoration: underline; text-decoration-color: var(--fmf-orange); }
  .fmf-page .fmf-brand:not([aria-pressed="true"]):hover, .fmf-page .fmf-open:hover, .fmf-page .fmf-chip:hover, .fmf-page .fmf-heart:hover,
  .fmf-page :is(.fmf-field, .fmf-pills button, .fmf-pick):not(:disabled):not([aria-pressed="true"]):hover, .fmf-page .fmf-few button:hover, .fmf-page .fmf-variants button:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--fmf-fg); }
  .fmf-page .fmf-row:hover { background: #FAF9F7; box-shadow: inset 0 0 0 1px var(--fmf-line); }
  .fmf-page .fmf-tier-more:hover { border-color: var(--fmf-fg); }
  .fmf-page .fmf-tier-toggle:hover .fmf-tier-state { text-decoration: underline; text-decoration-color: var(--fmf-orange); text-underline-offset: 4px; }
}

/* Phones: the body already reserves the fixed header's height; the page heading as in the Visualizer */
@media (max-width: 760px) {
  .showmybike-root .fmf-page { --fmf-heading: min(21px, 5.6vw); padding: 14px 16px var(--space-7); }
  .fmf-page .fmf-intro h1 { white-space: nowrap; }
  /* the Visualizer's switch on phones: 13 px type, tighter sides (still 44 px high here) */
  .fmf-page :is(.fmf-chip, .fmf-field, .fmf-pills button, .fmf-pick, .fmf-few button) { padding: 8px 14px; font-size: 13px; }
  .fmf-page .fmf-field { padding-inline: 10px; }
  .fmf-page .fmf-pick { padding-inline: 12px; }
}
@media (max-width: 370px) {
  .fmf-page .fmf-list .fmf-wheelbox { width: 44px; height: 44px; }
  .fmf-page .fmf-list li { column-gap: 8px; }
  /* phones: the reason and the aftercare line take the whole width of the row, so the figures fit */
  .fmf-page :is(.fmf-whyline, .fmf-careline) { grid-column: 1 / -1; }
  .fmf-page .fmf-list li:has(> :is(.fmf-whyline, .fmf-careline)) .fmf-wheelbox { grid-row: auto; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  .showmybike-root .fmf-page { --fmf-heading: 28px; }
}

/* From 600 px the heart has room beside the two result buttons, its note then opens upwards; menus use four
   columns, the three terrains stand side by side */
@media (min-width: 600px) {
  .fmf-page .fmf-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fmf-page .fmf-menu--terrain .fmf-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fmf-page .fmf-saved { top: auto; bottom: calc(100% + 9px); }
  .fmf-page .fmf-saved::before { top: auto; bottom: -4px; }
  .fmf-page .fmf-hero { margin-top: -14px; }
}

/* Tablets and desktop: cards side by side, the question stays in the middle */
@media (min-width: 761px) {
  .fmf-page .fmf-ask, .fmf-page .fmf-details, .fmf-page .fmf-all { gap: 22px; padding-top: 12px; }
  /* what unfolds in a row of "All matches" starts on the text line of the wheelset's name, not at the edge of the card */
  .fmf-page .fmf-list :is(.fmf-whyhere, .fmf-care-body) { grid-column: 2 / -1; padding-inline: 0; }
  .fmf-page .fmf-intro { margin-top: 18px; }
  .fmf-page .fmf-sub { font-size: var(--text-base); }
  .fmf-page .fmf-terrain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .fmf-page .fmf-photo { min-height: 250px; }
  .fmf-page .fmf-prio { min-height: 0; }   /* photo plus text set the height */
  .fmf-page .fmf-band { padding: 12px 16px; }
  .fmf-page .fmf-prios, .fmf-page .fmf-budgets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .fmf-page .fmf-prio-art { aspect-ratio: 4 / 3; }
  .fmf-page .fmf-prio-art .fmf-symbol { width: 64px; height: 64px; stroke-width: 1.3; }
  .fmf-page .fmf-prio-text { gap: 4px; padding: 14px 16px 16px; }
  .fmf-page .fmf-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fmf-page .fmf-foot { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--fmf-line); }
  .fmf-page .fmf-foot-actions { order: 2; margin-left: auto; padding-top: 0; border-top: 0; }
  .fmf-page .fmf-foot-actions .v5-cta { flex: 0 0 auto; padding-inline: 24px; }
  .fmf-page .fmf-foot:not(.has-actions):not(:has(.fmf-back)) { display: none; }
  .fmf-page .fmf-details > .v5-cta { align-self: flex-start; }
  .fmf-page .fmf-wheelbox { width: 64px; height: 64px; }
  .fmf-page .fmf-list li { min-height: 76px; padding: 6px 10px; }
  .fmf-page .fmf-row { min-height: 76px; }
  /* desktop: no bar and no frame, the button simply ends the list */
  .fmf-page .fmf-bar { position: static; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .fmf-page .fmf-bar .v5-cta { flex: 0 0 auto; }
  .fmf-page .fmf-faq { margin-top: var(--space-8); }
}
@media (min-width: 900px) {
  /* Both columns are equally high: the white card on the left ends on one line with the last pick on the right.
     Spare height goes to the wheel on the left and to the reasons on the right. */
  .fmf-page .fmf-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 24px; align-items: stretch; }
  .fmf-page .fmf-hero { flex: 1 1 auto; }
  .fmf-page .fmf-side .fmf-why { flex: 1 1 auto; }
  .fmf-page .fmf-more { grid-column: 2; }
  .fmf-page .fmf-chipbar { margin-bottom: 18px; }
  .fmf-page #fmf-menu { right: auto; width: min(760px, 100%); }
  .fmf-page .fmf-stage { gap: 14px; padding: 24px 32px 32px; border-radius: 24px; }
  .fmf-page .fmf-hero { margin-top: -18px; }
  .fmf-page .fmf-hero .fmf-wheelbox { width: 300px; height: 300px; }
  .fmf-page .fmf-cta { margin-top: 10px; }
  .fmf-page .fmf-side { gap: 14px; }
  .fmf-page .fmf-why { gap: 10px; padding: 20px 22px; }
  .fmf-page .fmf-balance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .fmf-page *, .fmf-page *::before, .fmf-page *::after { animation: none !important; transition: none !important; }
}