/**
 * Het design-systeem van fitness-company.com, vertaald uit de aangeleverde
 * ontwerp-handoff (oktober 2026). De waarden (kleuren, maten, radii,
 * schaduwen, animatiecurves) komen één op één uit de designtokens; de
 * inline-stijlen van de prototypes zijn hier klassen geworden.
 *
 * De breekpunten volgen de schaal van Klubb (375/768/1024/1440), niet de
 * 900/1000/1200 van de handoff: de gedeelde afspraken gaan voor. De mobiele
 * kop geldt daardoor tot 1024, het volle desktopbeeld vanaf 1440.
 */

/* ----------------------------------------------------------- lettertypen */

@font-face {
  font-family: 'General Sans';
  src: url('/fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/fonts/general-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2026, U+20AC;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1EFF;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --navy-900: #0b1d31;
  --navy-800: #13263c;
  --navy-footer: #071321;
  --blauw-500: #149cf5;
  --blauw-600: #0b7fd0;
  --blauw-300: #6cc4ff;
  --blauw-50: #eaf4fe;
  --blauw-25: #eef3f8;
  --grijs-50: #f4f7fa;
  --grijs-100: #f0f4f8;
  --grijs-200: #e6ecf2;
  --grijs-300: #c3cedb;
  --grijs-400: #a3b2c3;
  --grijs-500: #8597ab;
  --grijs-600: #718196;
  --grijs-700: #5a6b7f;
  --grijs-800: #3a4a5c;
  --groen: #22c55e; /* hetzelfde groen als de WhatsApp-knop en het open-bolletje */
  --whatsapp: #22c55e;
  --sale: #e5484d;

  --radius-blok: 24px;
  --radius-kaart: 18px;
  --radius-veld: 12px;

  --schaduw-kaart: 0 30px 80px rgba(7, 19, 33, 0.35);
  --schaduw-kop: 0 12px 32px rgba(11, 29, 49, 0.08);
  --schaduw-cta: 0 10px 24px rgba(20, 156, 245, 0.28);
  --schaduw-balk: 0 -8px 30px rgba(11, 29, 49, 0.1);

  --curve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-kop: 'General Sans', 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --sectie-ruimte: 64px;
}

@media (min-width: 1024px) {
  :root {
    --sectie-ruimte: 110px;
  }
}

/* Op echte desktopbreedte geldt de royale zijmarge uit het ontwerp. De
 * smallere stappen (20/32/48) staan in tokens.css van de projectbasis. */
@media (min-width: 1440px) {
  :root {
    --marge: 56px;
  }
}

/* ------------------------------------------------------------------ basis */

body {
  font-family: var(--font-body);
  color: var(--navy-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 600;
  margin: 0;
  /* Nederlandse samenstellingen worden lang ("Bovenlichaamtoestellen"). Op een
     smal scherm steekt zo'n woord anders buiten zijn kader. `break-word` breekt
     alleen af wanneer het woord echt niet past; aan de regelval verandert het
     verder niets. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.03em; }
h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
h4 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--blauw-500); }
input, textarea, select, button { font: inherit; }
::placeholder { color: var(--grijs-600); }
img { max-width: 100%; }

.inhoud {
  max-width: var(--inhoud-max);
  margin: 0 auto;
  padding-left: var(--marge);
  padding-right: var(--marge);
}

/* Bewegingen: achtergrond/kleur .25s, schaduw .35s, transform .45s. */
a, button {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    filter 0.25s ease,
    box-shadow 0.35s ease,
    transform 0.45s var(--curve),
    opacity 0.25s ease;
}

html { scroll-behavior: smooth; scroll-padding-top: 170px; }

[data-onthul] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--curve), transform 0.9s var(--curve);
}
[data-onthul][data-in] { opacity: 1; transform: none; }
[data-onthul]:nth-child(2) { transition-delay: 0.07s; }
[data-onthul]:nth-child(3) { transition-delay: 0.14s; }
[data-onthul]:nth-child(4) { transition-delay: 0.21s; }
[data-onthul]:nth-child(5) { transition-delay: 0.28s; }
[data-onthul]:nth-child(6) { transition-delay: 0.35s; }
[data-onthul]:nth-child(n + 7) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-onthul] { opacity: 1; transform: none; transition: none; }
  a, button { transition: none; }
  .fc-marquee-baan { animation: none !important; }
}

@keyframes fcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fcPuls { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes fcFade { from { opacity: 0; } to { opacity: 1; } }

/* ----------------------------------------------------------------- knoppen */

/* De basislaag duwt elke knop naar het minimum tikdoel van 44 pixels; in het
   winkel-ontwerp hebben compacte knoppen (btw-switcher, schakelaars, tabs,
   stappentellers) een eigen vaste hoogte en wordt het tikdoel gehaald door de
   rij eromheen. Zonder deze regel rekt elke kleine knop uit. */
[class^='fc-'] button,
button[class^='fc-'] {
  min-height: 0;
}

/* Compacte tekstlinks (voet, kruimels, tekstknoppen) halen het tikdoel met
   een onzichtbaar groter raakvlak: de padding en de negatieve marge heffen
   elkaar visueel op, alleen het aanraakgebied groeit. */
.fc-voet-kolom a,
.fc-voet-meerlease,
.fc-kruimels a,
.fc-tekstknop {
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -12px;
  margin-bottom: -12px;
}
.fc-logo {
  padding: 7px;
  margin: -7px;
}

.fc-knop {
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}
.fc-knop--primair { background: var(--blauw-500); color: #fff; }
.fc-knop--primair:hover { color: #fff; filter: brightness(0.92); }
.fc-knop--donker { background: var(--navy-900); color: #fff; }
.fc-knop--donker:hover { background: var(--navy-800); color: #fff; }
.fc-knop--glas {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.fc-knop--glas:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.fc-knop--wit { background: #fff; color: var(--navy-900); }
.fc-knop--wit:hover { background: var(--blauw-50); color: var(--navy-900); }
.fc-knop--licht { background: var(--grijs-100); color: var(--navy-900); }
.fc-knop--licht:hover { background: #e4eaf0; color: var(--navy-900); }
.fc-knop--whatsapp { background: var(--whatsapp); color: #fff; }
.fc-knop--whatsapp:hover { color: #fff; filter: brightness(0.92); }
.fc-knop--blauwlicht { background: var(--blauw-50); color: var(--blauw-600); }
.fc-knop--blauwlicht:hover { background: var(--blauw-500); color: #fff; }

.fc-tekstknop {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blauw-600);
}
.fc-tekstknop:hover { color: var(--navy-900); }

.fc-rondknop {
  width: 52px;
  height: 52px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: var(--grijs-100);
  color: var(--navy-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fc-rondknop:hover { background: #e4eaf0; }
.fc-rondknop--klein { width: 44px; height: 44px; }

.fc-badge {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.fc-badge--nieuw { background: var(--navy-900); color: #fff; }
.fc-badge--gereviseerd { background: #fff; color: var(--blauw-600); }
.fc-badge--sale { background: var(--sale); color: #fff; font-weight: 700; }
.fc-badge--glas {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
}

.fc-eyebrow { font-size: 14px; font-weight: 500; color: var(--blauw-600); }
.fc-eyebrow--licht { color: var(--blauw-500); }

.fc-groeplabel {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grijs-600);
}

/* Tonen en verbergen per laag: de mobiele kop onder 1024, de rest erboven. */
.fc-alleen-desktop { display: none; }
.fc-alleen-mobiel { display: block; }
@media (min-width: 1024px) {
  .fc-alleen-desktop { display: block; }
  .fc-alleen-mobiel { display: none; }
}

/* --------------------------------------------------------------------- kop */

.fc-kop {
  background: #fff;
  color: var(--navy-900);
  position: sticky;
  top: 0;
  z-index: 15;
  transition: box-shadow 0.4s ease;
}
.fc-kop[data-gescrold] { box-shadow: var(--schaduw-kop); }
@media (min-width: 1024px) {
  /* De topbalk scrolt weg, de rest blijft plakken. */
  .fc-kop { top: -42px; }
}

.fc-topbalk { background: var(--blauw-25); }
.fc-topbalk > .inhoud {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--grijs-700);
}
.fc-topbalk-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-900);
  font-weight: 600;
  min-width: 300px;
  height: 42px;
}
.fc-topbalk-status:hover { color: var(--navy-900); }
.fc-topbalk-status .fc-sub { color: var(--grijs-700); font-weight: 400; }

.fc-puls { position: relative; width: 8px; height: 8px; flex: none; }
.fc-puls::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: fcPuls 2.2s ease-out infinite;
}
.fc-puls, .fc-puls-dot { border-radius: 50%; }
.fc-dot-open { background: var(--whatsapp); }
.fc-dot-dicht { background: var(--grijs-500); }

.fc-btw-schakel {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: #dde5ee;
}
.fc-btw-schakel button {
  height: 26px;
  width: 76px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--grijs-700);
}
.fc-btw-schakel button[data-actief] { background: #fff; color: var(--navy-900); }
.fc-btw-schakel--groot button { height: 30px; width: 84px; font-size: 12.5px; }

.fc-hoofdbalk {
  height: 92px;
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 1439px) {
  .fc-hoofdbalk { gap: 20px; }
}
.fc-logo { display: flex; flex: none; }
.fc-logo img { height: 42px; display: block; }

.fc-zoek { position: relative; flex: 1; min-width: 0; max-width: 520px; }
@media (max-width: 1439px) {
  .fc-zoek { max-width: 300px; }
}
.fc-zoekveld {
  height: 52px;
  border-radius: 999px;
  background: var(--grijs-100);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
}
.fc-zoekveld input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: var(--navy-900);
}
.fc-zoek-wis {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #dde5ee;
  color: var(--navy-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fc-zoek-wis:hover { background: #c9d4e0; }

.fc-zoek-paneel {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border-radius: var(--radius-blok);
  box-shadow: 0 24px 64px rgba(11, 29, 49, 0.18), 0 0 0 1px rgba(11, 29, 49, 0.06);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fc-zoek-regel {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 8px;
  border-radius: var(--radius-veld);
  color: var(--navy-900);
}
.fc-zoek-regel:hover { background: var(--grijs-100); color: var(--navy-900); }
.fc-zoek-alle {
  margin-top: 6px;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-veld);
  background: var(--blauw-50);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blauw-600);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fc-zoek-alle:hover { background: #dcedfd; color: var(--blauw-600); }

.fc-belkaart {
  height: 52px;
  padding: 0 20px 0 6px;
  border-radius: 999px;
  background: var(--grijs-100);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.fc-belkaart:hover { background: #e4eaf0; color: var(--navy-900); }
.fc-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  overflow: visible;
}
.fc-avatar-beeld {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #dde5ee center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grijs-600);
}
.fc-avatar-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--grijs-100);
}

.fc-selectieteller {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------- navigatie */

.fc-navbalk { position: relative; background: var(--navy-900); }
.fc-navbalk nav {
  max-width: var(--inhoud-max);
  margin: 0 auto;
  padding: 0 calc(var(--marge) - 14px);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 500;
  height: 58px;
}
.fc-navknop {
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  color: var(--grijs-300);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 500;
}
.fc-navknop:hover { color: #fff; }
.fc-navknop[data-open] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.fc-navknop svg { transition: transform 0.15s; }
.fc-navknop[data-open] svg { transform: rotate(180deg); }
.fc-nav-spacer { flex: 1; }

.fc-megamenu {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  background: #fff;
  color: var(--navy-900);
  border-bottom: 1px solid #dde5ee;
  border-radius: 0 0 var(--radius-blok) var(--radius-blok);
  z-index: 16;
}
.fc-megamenu > .inhoud { padding-top: 28px; padding-bottom: 28px; }

.fc-mm-drill {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.fc-mm-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 28px;
  border-right: 1px solid var(--grijs-200);
}
.fc-mm-rail-scheiding { height: 1px; background: var(--grijs-200); margin: 6px 14px; }
.fc-mm-rail-item {
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-veld);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  color: var(--navy-900);
}
.fc-mm-rail-item:hover, .fc-mm-rail-item[data-actief] { background: var(--grijs-50); color: var(--navy-900); }
.fc-mm-rail-item[data-actief] { font-weight: 600; }

.fc-mm-titel {
  font-family: var(--font-kop);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.fc-mm-staat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.fc-mm-staatkaart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--radius-veld);
  background: var(--grijs-50);
  color: var(--navy-900);
}
.fc-mm-staatkaart:hover { background: #eaf1f8; color: var(--navy-900); }
.fc-mm-staatkaart .fc-sub { font-size: 13.5px; line-height: 1.5; color: var(--grijs-700); }

.fc-mm-chip {
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dde5ee;
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.fc-mm-chip:hover { background: var(--navy-900); color: #fff; box-shadow: none; }

.fc-mm-lijst {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.fc-mm-lijst-items {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  align-content: start;
}
.fc-mm-lijst-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--radius-veld);
  color: var(--navy-900);
}
.fc-mm-lijst-item:hover { background: var(--grijs-50); color: var(--navy-900); }
.fc-mm-lijst-item .fc-sub { font-size: 13.5px; line-height: 1.5; color: var(--grijs-700); text-wrap: pretty; }

.fc-mm-aside-donker {
  width: 340px;
  flex: none;
  padding: 26px;
  border-radius: var(--radius-kaart);
  background: var(--navy-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-mm-aside-donker:hover { color: #fff; background: var(--navy-800); }
.fc-mm-aside-licht {
  width: 320px;
  flex: none;
  padding: 24px;
  border-radius: var(--radius-kaart);
  background: var(--grijs-50);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Het lijstpaneel: een tak zonder facetpagina's (Complete sets, Services,
   Showroom): twee kolommen kale items met een hover, en rechts een kaart. */
.fc-mm-lijst { display: flex; gap: 48px; align-items: flex-start; }
.fc-mm-lijst-items {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  align-content: start;
}
.fc-mm-lijstitem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--radius-veld);
  color: var(--navy-900);
}
.fc-mm-lijstitem:hover { background: var(--grijs-50); color: var(--navy-900); }
.fc-mm-lijstitem .fc-sub { font-size: 13.5px; line-height: 1.5; color: var(--grijs-700); text-wrap: pretty; }
.fc-mm-gids {
  width: 340px;
  flex: none;
  padding: 26px;
  border-radius: var(--radius-kaart);
  background: var(--navy-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-mm-gids:hover { background: var(--navy-800); color: #fff; }

.fc-mm-merken {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 16px;
  /* Alle merken staan erin; wordt de lijst hoger dan het scherm, dan scrolt het paneel. */
  max-height: min(58vh, 560px);
  overflow-y: auto;
}
.fc-mm-merk {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-veld);
  color: var(--navy-900);
}
.fc-mm-merk:hover { background: var(--grijs-50); color: var(--navy-900); }
.fc-mm-merklogo {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-veld);
  background: #fff;
  box-shadow: inset 0 0 0 1px #dde5ee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  font-family: var(--font-kop);
  font-size: 15px;
  font-weight: 600;
}
.fc-mm-merklogo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.fc-mm-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--grijs-200);
}

.fc-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 14;
  background: rgba(7, 19, 33, 0.55);
  animation: fcFade 0.25s ease;
}

/* ------------------------------------------------------------ mobiele kop */

.fc-mkop {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--grijs-200);
}
.fc-mkop .fc-logo img { height: 30px; }

.fc-mmenu {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #fff;
  overflow: auto;
  /* Houdt de scroll binnen het menu: zonder dit neemt de pagina erachter het
     over zodra het menu aan zijn einde is, en schuift alles mee. */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
/* De zoekresultaten krijgen hun eigen scroll. Met het toetsenbord open bleef
   er anders te weinig over, en was de onderste helft niet te bereiken. */
.fc-mzoek-lijst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fc-mmenu-sectie { display: flex; flex-direction: column; border-bottom: 1px solid var(--grijs-200); }
.fc-mmenu-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 8px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-900);
}
.fc-mmenu-chevron {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--grijs-100);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.fc-mmenu-knop[aria-expanded='true'] .fc-mmenu-chevron {
  background: var(--navy-900);
  color: #fff;
  transform: rotate(180deg);
}
.fc-mmenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 8px 12px 16px;
  border-radius: var(--radius-veld);
  font-size: 15.5px;
  color: var(--navy-900);
}
.fc-mmenu-link .fc-sub { font-size: 13px; color: var(--grijs-500); }
.fc-mmenu-alle {
  margin: 6px 8px 0;
  padding: 12px 16px;
  border-radius: var(--radius-veld);
  background: var(--blauw-50);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blauw-600);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fc-mmenu-onder {
  margin-top: auto;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--grijs-50);
}

/* ------------------------------------------------------------------- voet */

.fc-voet { background: var(--navy-footer); color: #fff; }
.fc-voet a:hover { color: #fff; }

/* Twee kolommen naast elkaar laten op 375 pixels maar 72 pixels tekst over, en
   daar past "Persoonlijke" niet in: het woord viel buiten het blok. Onder de
   480 staan ze daarom onder elkaar. */
.fc-voet-usps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 56px 0 0;
}
@media (min-width: 480px) {
  .fc-voet-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fc-voet-usps { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 72px; }
}
.fc-voet-usp {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 26px;
  border-radius: var(--radius-veld);
  background: rgba(255, 255, 255, 0.05);
}
.fc-voet-usp svg { color: var(--blauw-500); flex: none; margin-top: 1px; }
.fc-voet-usp .fc-sub { font-size: 14px; line-height: 1.55; color: var(--grijs-500); }

.fc-voet-merkrij {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 24px 40px;
  margin-top: 56px;
  padding: 28px 32px;
  border-radius: var(--radius-blok);
  background: rgba(255, 255, 255, 0.04);
}
@media (min-width: 768px) {
  .fc-voet-merkrij { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .fc-voet-merkrij > img { grid-column: 1 / 3; }
  .fc-voet-merkrij > .fc-voet-route { grid-column: 3; justify-self: end; }
}
@media (min-width: 1440px) {
  .fc-voet-merkrij {
    grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    margin-top: 72px;
  }
  .fc-voet-merkrij > img { grid-column: auto; }
  .fc-voet-merkrij > .fc-voet-route { grid-column: auto; }
}
.fc-voet-merkrij > img { height: 38px; width: auto; display: block; }
.fc-voet-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fc-voet-info .fc-sub { font-size: 14px; color: var(--grijs-400); }
.fc-voet-info a { color: var(--grijs-400); }
.fc-voet-icoon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: rgba(20, 156, 245, 0.14);
  color: var(--blauw-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-voet-route {
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--blauw-500);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  justify-self: start;
}
.fc-voet-route:hover { color: #fff; filter: brightness(0.92); }

.fc-voet-kolommen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 40px;
  margin-top: 64px;
}
@media (min-width: 768px) {
  .fc-voet-kolommen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fc-voet-kolommen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.fc-voet-kolom {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--grijs-400);
  min-width: 0;
}
.fc-voet-kolom a { color: var(--grijs-400); overflow-wrap: break-word; }
.fc-voet-kolom a:hover { color: #fff; }
.fc-voet-kolomkop { font-size: 14px; color: #fff; font-weight: 600; margin-bottom: 8px; }
a.fc-voet-kolomkop { color: #fff; }
.fc-voet-meerlease {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blauw-300);
}
.fc-voet-meerlease:hover { color: #fff; }
.fc-voet-meerlease svg { transition: transform 0.2s; }
.fc-voet-meerlease[aria-expanded='true'] svg { transform: rotate(180deg); }

.fc-voet-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 64px;
  padding: 24px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
  color: var(--grijs-500);
  padding-bottom: 40px;
}
.fc-voet-onder a { color: var(--grijs-400); }
.fc-voet-onder a:hover { color: #fff; }

/* ------------------------------------------------------------ productkaart */

.fc-kaart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--navy-900);
  will-change: transform;
}
.fc-kaart:hover { color: var(--navy-900); transform: translateY(-4px); }
.fc-kaart-beeld {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-kaart);
  background: var(--grijs-50);
  padding: 28px;
  overflow: hidden;
}
.fc-kaart-beeld img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  transition: transform 0.7s var(--curve);
}
.fc-kaart:hover .fc-kaart-beeld img { transform: scale(1.04); }
/* Op de grijze uitgelicht-sectie van de homepage staan de foto's op wit,
   zoals het ontwerp; op witte pagina's blijft de tegel grijs. */
.fc-uitgelicht .fc-kaart-beeld { background: #fff; }
/* Op een smalle kaart passen "Gereviseerd" en "-50%" niet naast elkaar; dan
   zakt de kortingsbadge een regel, in plaats van buiten de tegel te vallen. */
.fc-kaart-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  pointer-events: none;
}
.fc-kaart-badges .fc-badge { white-space: nowrap; }
/* Rechtsboven: Lease mogelijk, met een eventuele korting eronder. */
.fc-kaart-badges-rechts {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* Op de lichtgrijze tegel valt lichtblauw weg; het randje houdt hem als badge zichtbaar. */
.fc-badge--lease { background: var(--blauw-50); color: var(--blauw-600); box-shadow: inset 0 0 0 1px #c9e0f5; }
/* Op de smalste kaarten (twee naast elkaar op een telefoon) schelen een paar
   pixels precies genoeg om "Gereviseerd" en "-50%" samen op één regel te
   houden; past het alsnog niet, dan zakt de korting een regel. */
@media (max-width: 479px) {
  .fc-kaart-badges { gap: 6px; }
  .fc-kaart-badges .fc-badge { padding: 0 7px; font-size: 11.5px; }
}
.fc-kaart-selectie {
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-900);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fc-kaart-selectie:hover, .fc-kaart-selectie[data-in-selectie] { background: var(--blauw-500); color: #fff; }
/* Onder de 768 is de knop een rond plusje: het woord "Selectie" dekte op twee
   kaarten naast elkaar een kwart van de productfoto af. */
.fc-kaart-selectie-teken { display: flex; }
.fc-kaart-selectie-woord { display: none; }
@media (min-width: 768px) {
  .fc-kaart-selectie-teken { display: none; }
  .fc-kaart-selectie-woord { display: inline; }
}
@media (max-width: 767px) {
  .fc-kaart-selectie { width: 40px; padding: 0; justify-content: center; }
}
.fc-kaart-tekst { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.fc-kaart-merk { font-size: 13px; color: var(--grijs-600); }
/* Een producttitel krijgt hoogstens twee regels en eindigt anders op een
   beletselteken: zonder dat lopen de kaarten in een rij uiteen omdat de ene
   titel twee en de andere vier regels nodig heeft. */
.fc-kaart-naam {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fc-kaart-prijsblok { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
/* De drie stukken van de prijs breken als geheel af naar een volgende regel,
   nooit middenin een bedrag. Zonder het `nowrap` hieronder wringt de kaart op
   een telefoon "€" en "30.000" onder elkaar, en dat leest als twee prijzen. */
.fc-kaart-prijsregel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.fc-prijs { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.fc-prijs--sale { color: var(--sale); }
.fc-btwlabel { font-size: 12.5px; color: var(--grijs-600); white-space: nowrap; }
.fc-oudeprijs { font-size: 13px; color: var(--grijs-500); text-decoration: line-through; white-space: nowrap; }
.fc-leaseregel { font-size: 13.5px; color: var(--grijs-700); }
.fc-leaseregel strong { font-weight: 600; color: var(--navy-900); }

/* --------------------------------------------------------------------- plp */

.fc-kruimels {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--grijs-600);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-right: -20px;
  padding-right: 20px;
}
.fc-kruimels::-webkit-scrollbar { display: none; }
.fc-kruimels a { color: var(--grijs-600); flex: none; }
.fc-kruimels a:hover { color: var(--navy-900); }
/* Op een telefoon is elke schermcentimeter er één: het kruimelpad mag daar
   strakker op de kop en de titel zitten. */
@media (max-width: 1023px) {
  .fc-kruimels { margin: -14px 0; }
}
.fc-kruimels span { flex: none; }
.fc-kruimels .fc-huidig { color: var(--navy-900); }

.fc-plp-intro {
  position: relative;
  margin: 18px 0 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--grijs-800);
  text-wrap: pretty;
  overflow: hidden;
}
.fc-plp-intro[data-dicht] { max-height: 81px; }
.fc-plp-intro-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  background: linear-gradient(0deg, #fff, rgba(255, 255, 255, 0));
}

.fc-plp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .fc-plp { grid-template-columns: 272px minmax(0, 1fr); gap: 48px; }
}

.fc-filtergroep {
  padding: 18px 18px 12px;
  border-radius: var(--radius-kaart);
  background: var(--grijs-50);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fc-filtergroep > .fc-filtertitel { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.fc-filteroptie {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  min-height: 36px;
}
.fc-filteroptie[data-dicht] { opacity: 0.4; }
.fc-filtervink {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-veld);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--grijs-300);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-filteroptie[data-aan] .fc-filtervink { background: var(--blauw-500); box-shadow: none; }
.fc-filtervink svg { opacity: 0; }
.fc-filteroptie[data-aan] .fc-filtervink svg { opacity: 1; }
/* Hetzelfde vinkje op de aankruiskaarten in de drawer (verzekering, inruil). */
.fc-vinkkaart[data-aan] .fc-filtervink { background: var(--blauw-500); box-shadow: none; }
.fc-vinkkaart[data-aan] .fc-filtervink svg { opacity: 1; }
.fc-filteroptie .fc-label { flex: 1; font-size: 14.5px; color: var(--navy-900); }
.fc-filterteller { font-size: 13px; color: var(--grijs-500); }

.fc-filterchip {
  height: 40px;
  padding: 0 12px 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--blauw-50);
  color: var(--blauw-600);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fc-filterchip:hover { background: #dcedfd; }

.fc-sorteer { position: relative; display: flex; align-items: center; gap: 10px; flex: none; font-size: 14px; color: var(--grijs-700); }
.fc-sorteer select {
  appearance: none;
  -webkit-appearance: none;
  height: 52px;
  padding: 0 44px 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--grijs-100);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-900);
  cursor: pointer;
  outline: none;
}
.fc-sorteer .fc-pijl { position: absolute; right: 16px; pointer-events: none; color: var(--navy-900); display: flex; }
/* Naast de sorteerkeuze blijft er op een telefoon honderd pixels over, en daar
   brak "130 producten" in tweeën op. De sortering krijgt daarom een eigen
   regel; de knop Filters en de teller passen dan samen op de bovenste. */
@media (max-width: 560px) {
  .fc-plp-balk { gap: 12px; }
  /* Het label én de keuze zelf vullen de regel. Zonder die tweede regel bleef
     het grijze bolletje zo breed als zijn tekst, terwijl het pijltje aan de
     rechterrand van het label hing: los van het bolletje. */
  .fc-plp-balk > .fc-sorteer { flex-basis: 100%; width: 100%; }
  .fc-plp-balk > .fc-sorteer select { width: 100%; }
}

.fc-plp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .fc-plp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; }
}

.fc-promotegel {
  border-radius: var(--radius-kaart);
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  min-height: 100%;
}
.fc-promotegel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 29, 49, 0.84) 30%, rgba(11, 29, 49, 0.23) 100%);
}
.fc-promotegel > div { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Op een telefoon staat deze tegel in een kolom van 162 pixels; met 28 pixels
   rondom blijft er te weinig over voor de kop en de knop. */
@media (max-width: 479px) {
  .fc-promotegel { padding: 18px; }
  /* De tegel is dan 162 pixels breed; zonder dit valt "Afspraak maken" over
     twee regels en wordt de knop twee keer zo hoog als de rest. */
  .fc-promoknop { height: 44px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
}

.fc-pager { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fc-pager-balk { width: 220px; height: 4px; border-radius: 999px; background: var(--grijs-200); overflow: hidden; }
.fc-pager-balk span { display: block; height: 100%; border-radius: 999px; background: var(--blauw-500); }

.fc-hulpkaart {
  margin-top: 6px;
  padding: 20px;
  border-radius: var(--radius-blok);
  background: var(--navy-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fc-hulpkaart-regel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-veld);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.fc-hulpkaart-regel:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.fc-hulpkaart-icoon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-filtersheet {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.fc-filtersheet-kop {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  box-shadow: inset 0 -1px 0 var(--grijs-200);
}
.fc-filtersheet-inhoud {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-filtersheet-voet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 20px 20px;
  background: linear-gradient(0deg, #fff 70%, rgba(255, 255, 255, 0));
  display: flex;
  gap: 10px;
}

.fc-schakelaar {
  width: 42px;
  height: 24px;
  flex: none;
  border: none;
  border-radius: 999px;
  background: var(--grijs-300);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.fc-schakelaar::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.fc-schakelaar[data-aan] { background: var(--blauw-500); }
.fc-schakelaar[data-aan]::after { transform: translateX(18px); }

/* --------------------------------------------------------------------- pdp */

.fc-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (min-width: 1024px) {
  .fc-pdp { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
  .fc-pdp > * { position: sticky; top: 174px; }
}
.fc-pdp h1 { font-size: clamp(30px, 3.2vw, 40px); }

.fc-galerij {
  position: relative;
  aspect-ratio: 1 / 1;
  /* Dezelfde verhouding als het ontwerp: 22 px lucht in een vak van 335, en
     naar boven toe meeschalend. Stond als vaste 48/48/104 in de component,
     waardoor de foto op een telefoon nog maar 55% van het vak vulde. */
  padding: clamp(22px, 6%, 48px);
  border-radius: var(--radius-blok);
  overflow: hidden;
  background: var(--grijs-50);
}
.fc-galerij img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.fc-galerij-badges { position: absolute; top: 20px; left: 20px; display: flex; gap: 8px; }
.fc-galerij-badges .fc-badge, .fc-galerij > .fc-badge--sale { height: 30px; padding: 0 12px; font-size: 12.5px; }
.fc-galerij > .fc-badge--sale { position: absolute; top: 20px; right: 20px; }
.fc-galerij-thumbs {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px;
  /* Op een smal scherm passen zes miniaturen niet naast elkaar: dan scrolt
     de strook binnen zijn eigen vak in plaats van de pagina breed te duwen. */
  max-width: calc(100% - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-kaart);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fc-galerij-thumb {
  width: 60px;
  height: 60px;
  overflow: hidden;
  padding: 6px;
  border: none;
  border-radius: var(--radius-veld);
  cursor: pointer;
  background: var(--grijs-50);
}
.fc-galerij-thumb[data-actief] { box-shadow: inset 0 0 0 2px var(--blauw-500); }
.fc-galerij-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }

.fc-keyspecs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.fc-keyspec {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--grijs-50);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--grijs-700);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}
.fc-keyspec strong { color: var(--navy-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.fc-koopblok { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
.fc-koopblok[data-twee] { grid-template-columns: 1fr 1fr; }
/* Een cel in een grid krimpt niet onder de breedte van zijn inhoud; zonder dit
   duwt een lang label ("Direct bestellen") de pagina opzij op een smal scherm. */
.fc-koopblok > * { min-width: 0; }
.fc-koopkeuze {
  text-align: left;
  padding: 18px;
  border: none;
  border-radius: var(--radius-kaart);
  cursor: pointer;
  background: var(--grijs-50);
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--navy-900);
}
.fc-koopkeuze[data-aan] { background: #fff; box-shadow: inset 0 0 0 2px var(--blauw-500); }
.fc-koopkeuze .fc-radio {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--grijs-300);
}
.fc-koopkeuze[data-aan] .fc-radio { box-shadow: inset 0 0 0 6px var(--blauw-500); }
.fc-koopprijs {
  font-family: var(--font-kop);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fc-koopprijs--sale { color: var(--sale); }
/* Het prijsblok in een keuzeknop: op een telefoon is de knop zo'n 150 pixels
   breed, dus de prijs schaalt mee en de regel eronder loopt gewoon door. */
.fc-koopprijsblok { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-koopprijsblok .fc-koopprijs { font-size: clamp(24px, 7vw, 32px); }
.fc-koopprijs-na { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--grijs-700); white-space: nowrap; }
.fc-koopprijs-sub { font-size: 13px; line-height: 1.35; color: var(--grijs-600); text-wrap: pretty; }
@media (min-width: 768px) {
  .fc-koopprijsblok .fc-koopprijs { font-size: 32px; }
}

.fc-aantal {
  flex: none;
  height: 52px;
  border-radius: 999px;
  background: var(--grijs-100);
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.fc-aantal button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--navy-900);
}
.fc-aantal button:hover { background: #fff; }
.fc-aantal span { width: 28px; text-align: center; font-size: 15px; font-weight: 600; }

.fc-pdp-contact {
  margin-top: 32px;
  padding: 22px;
  border-radius: var(--radius-blok);
  background: var(--navy-900);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Drie tegels naast elkaar laten op een telefoon 64 pixels tekst over, en de
   onderregels ("Direct antwoord", het telefoonnummer) staan bewust op één
   regel: die vielen dan buiten hun tegel. Onder de 560 staan ze daarom onder
   elkaar, met het icoon ernaast in plaats van erboven. */
.fc-pdp-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) {
  .fc-pdp-contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fc-pdp-contact-grid a,
.fc-pdp-contact-grid button {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 14px;
  border: none;
  border-radius: var(--radius-veld);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
@media (min-width: 560px) {
  .fc-pdp-contact-grid a,
  .fc-pdp-contact-grid button { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.fc-pdp-contact-grid a:hover,
.fc-pdp-contact-grid button:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.fc-pdp-contact-icoon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-accordeon { border-radius: var(--radius-blok); background: #fff; }
.fc-accordeon-knop {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--navy-900);
}
.fc-accordeon-icoon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--grijs-100);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.fc-accordeon-icoon svg { transition: transform 0.3s; }
.fc-accordeon[data-open] .fc-accordeon-icoon { background: var(--blauw-500); color: #fff; }
.fc-accordeon[data-open] .fc-accordeon-icoon svg { transform: rotate(45deg); }
.fc-accordeon-inhoud { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
/* Tussenkoppen in een accordeon lezen als kopjes in een kaart, niet als
   sectiekoppen. Ze krijgen hier iets meer lucht dan in een gewoon artikel:
   de kaart is smal en zonder die ruimte plakt een kop aan de tekst. */
.fc-accordeon-inhoud h2 { font-size: 20px; }
.fc-accordeon-inhoud h3 { font-size: 17px; }
.fc-accordeon-inhoud .fc-artikel h2 { margin-top: 22px; margin-bottom: 6px; }
.fc-accordeon-inhoud .fc-artikel h2:first-child { margin-top: 0; }
.fc-accordeon[data-open] .fc-accordeon-inhoud { grid-template-rows: 1fr; }
.fc-accordeon-inhoud > div { overflow: hidden; min-height: 0; }

.fc-spec {
  padding: 14px 16px;
  border-radius: var(--radius-veld);
  background: var(--grijs-50);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fc-spec .fc-sub { font-size: 13px; color: var(--grijs-600); }
.fc-spec strong { font-size: 15.5px; font-weight: 600; }

.fc-plakbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: #fff;
  box-shadow: var(--schaduw-balk);
  padding: 12px var(--marge) calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (min-width: 1024px) {
  .fc-plakbalk { display: none; }
}
/* De knop in de plakbalk moet naast de prijs passen op 375 pixels. */
.fc-plakbalk .fc-knop {
  min-width: 0;
  padding: 0 16px;
  font-size: 14px;
}

/* De donkere herokaart van de service- en showroompagina's. */
.fc-herokaart {
  position: relative;
  border-radius: var(--radius-blok);
  overflow: clip;
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .fc-herokaart { min-height: 620px; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.fc-herokaart::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 29, 49, 0.84) 0%, rgba(11, 29, 49, 0.7) 45%, rgba(11, 29, 49, 0.18) 100%),
    linear-gradient(0deg, rgba(11, 29, 49, 0.41) 0%, rgba(11, 29, 49, 0) 45%);
}
.fc-herokaart > * { position: relative; }
.fc-herokaart-tekst {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}
@media (min-width: 1024px) {
  .fc-herokaart-tekst { padding: 64px; }
}
.fc-herokaart-zij {
  padding: 0 24px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (min-width: 1024px) {
  .fc-herokaart-zij { padding: 40px 40px 40px 0; }
}
.fc-herokaart-kaart {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-kaart);
  background: rgba(11, 29, 49, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* De onderwerpen-tabs op een servicepagina. */
.fc-stabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; align-items: start; }
@media (min-width: 1024px) {
  .fc-stabs { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.fc-stabs-rail {
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px;
  border-radius: var(--radius-kaart);
  background: var(--grijs-50);
}
@media (min-width: 1024px) {
  .fc-stabs-rail { flex-direction: column; overflow: visible; }
}
.fc-stabs-rail button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius-veld);
  cursor: pointer;
  background: transparent;
  color: var(--grijs-800);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .fc-stabs-rail button { white-space: normal; }
}
.fc-stabs-rail button:hover { background: #fff; }
.fc-stabs-rail button[data-aan] { background: #fff; color: var(--navy-900); box-shadow: 0 4px 14px rgba(11, 29, 49, 0.06); }
.fc-stabs-nummer {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: #e6ecf2;
  color: var(--grijs-600);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-stabs-rail button[data-aan] .fc-stabs-nummer { background: var(--blauw-500); color: #fff; }
.fc-stabs-paneel {
  border-radius: var(--radius-blok);
  background: #fff;
  box-shadow: inset 0 0 0 1px #dde5ee;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
@media (min-width: 1024px) {
  .fc-stabs-paneel { padding: 40px 44px; }
}
/* Elk onderwerp staat in de pagina; alleen het geopende is zichtbaar. De
   dichte zijn er voor Google en de antwoordmachines, zie SectieTabs. */
.fc-stabs-onderwerp { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fc-stabs-onderwerp[hidden] { display: none; }

/* De over-onssectie op de homepage: fotocollage links, tekst rechts. */
.fc-overons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 1024px) {
  .fc-overons { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 96px; }
}
.fc-overons-collage { position: relative; padding: 0 48px 48px 0; }
.fc-overons-collage > :first-child {
  aspect-ratio: 1.1 / 1;
  border-radius: var(--radius-blok);
  background-size: cover;
  background-position: center;
}
.fc-overons-klein {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-blok);
  overflow: hidden;
  box-shadow: 0 0 0 10px var(--grijs-50);
  background-size: cover;
  background-position: center 30%;
}
.fc-overons-badge {
  position: absolute;
  left: 32px;
  bottom: 88px;
  padding: 18px 22px;
  border-radius: var(--radius-kaart);
  background: #fff;
  box-shadow: 0 20px 50px rgba(11, 29, 49, 0.14);
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Drie tegels naast elkaar laten op een telefoon te weinig over voor "10.000+":
   het getal viel buiten het witte vlak. Twee naast elkaar, de derde over de
   volle breedte, en het getal schaalt mee met het scherm. */
.fc-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.fc-cijfers > :last-child:nth-child(3) { grid-column: span 2; }
@media (min-width: 560px) {
  .fc-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-cijfers > :last-child:nth-child(3) { grid-column: auto; }
}
.fc-cijfertegel {
  padding: 16px 18px;
  border-radius: var(--radius-kaart);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 768px) {
  .fc-cijfertegel { padding: 20px 22px; }
}
.fc-cijfertegel > :first-child {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(24px, 6.5vw, 30px);
  letter-spacing: -0.02em;
}

/* De rij vergelijkbare producten: vier kaarten naast elkaar op desktop, twee
   vanaf de kleinste telefoon — net als de productlijst. Eén kaart over de volle
   breedte leest als een los blok en maakt de sectie onnodig lang. */
.fc-vergelijk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 1024px) {
  .fc-vergelijk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
}

/* De twee servicetegels onderaan de productpagina: foto met donkere gloed. */
.fc-servicetegels { display: grid; gap: 14px; }
@media (min-width: 768px) {
  .fc-servicetegels { grid-template-columns: 1fr 1fr; }
}
.fc-servicetegel {
  position: relative;
  border-radius: var(--radius-blok);
  overflow: clip;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 40px;
  color: #fff;
  background-color: var(--navy-800);
  background-size: cover;
  background-position: center;
}
.fc-servicetegel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 29, 49, 0.82) 12%, rgba(11, 29, 49, 0.13) 72%);
}
.fc-servicetegel > * { position: relative; }
.fc-servicetegel .fc-badge { height: 28px; padding: 0 12px; font-size: 12.5px; margin-bottom: 12px; }
.fc-servicetegel h2 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; max-width: 440px; text-wrap: balance; }
.fc-servicetegel p { margin: 12px 0 22px; max-width: 440px; font-size: 16px; line-height: 1.6; color: var(--grijs-300); text-wrap: pretty; }

/* --------------------------------------------------- drawers en pop-ups */

.fc-drawer-scherm {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}
.fc-drawer-achter {
  position: absolute;
  inset: 0;
  background: rgba(7, 19, 33, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fcFade 0.25s ease;
}
.fc-drawer {
  position: relative;
  width: 500px;
  max-width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  color: var(--navy-900);
}
.fc-drawer-kop {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 28px 32px 20px;
}
.fc-drawer-titel { font-family: var(--font-kop); font-weight: 600; letter-spacing: -0.02em; font-size: 26px; }
.fc-drawer-inhoud {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fc-drawer-voet { flex: none; padding: 24px 32px 32px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 1023px) {
  .fc-drawer-kop { padding: 20px 20px 14px; }
  .fc-drawer-inhoud { padding: 0 20px 20px; }
  .fc-drawer-voet { padding: 16px 20px 24px; }
}

.fc-keuzekaart {
  position: relative;
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius-kaart);
  cursor: pointer;
  background: var(--grijs-50);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--navy-900);
  width: 100%;
}
.fc-keuzekaart:hover { background: #eaf1f8; }
.fc-keuzekaart-kop { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; }
.fc-keuzekaart-badge { height: 20px; background: var(--groen); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
@media (max-width: 767px) {
  .fc-keuzekaart-badge { position: absolute; top: 10px; right: 12px; padding: 0 8px; font-size: 10.5px; }
  .fc-keuzekaart-kop { padding-right: 76px; }
}
/* De basisregel staat vóór de kleurvarianten: die zetten de subregel op wit,
   en bij gelijke specificiteit wint anders deze latere grijze regel. */
.fc-keuzekaart .fc-sub { font-size: 13.5px; color: var(--grijs-700); }
.fc-keuzekaart--uitgelicht { background: var(--blauw-50); box-shadow: inset 0 0 0 1px #dde5ee; }
.fc-keuzekaart--uitgelicht:hover { background: #dcedfd; }
/* De drie keuzes dragen elk hun eigen kleur, zoals het ontwerp: de offerte
   lichtblauw met een gloed, de afspraak donkerblauw, bestellen wit omlijnd. */
.fc-keuzekaart--blauw {
  background: var(--blauw-500);
  color: #fff;
  box-shadow: 0 10px 24px rgba(20, 156, 245, 0.28);
}
.fc-keuzekaart--blauw:hover { background: var(--blauw-500); color: #fff; filter: brightness(0.92); }
.fc-keuzekaart--blauw .fc-sub { color: #fff; }
.fc-keuzekaart--blauw .fc-keuzekaart-icoon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.18); color: #fff; }
.fc-keuzekaart--donker { background: var(--navy-900); color: #fff; }
.fc-keuzekaart--donker:hover { background: var(--navy-800); color: #fff; }
.fc-keuzekaart--donker .fc-sub { color: #fff; }
.fc-keuzekaart--donker .fc-keuzekaart-icoon { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); color: var(--blauw-500); }
.fc-keuzekaart--omlijnd { background: #fff; color: var(--navy-900); box-shadow: inset 0 0 0 2px var(--navy-900); }
.fc-keuzekaart--omlijnd:hover { background: var(--grijs-50); color: var(--navy-900); }
.fc-keuzekaart--omlijnd .fc-keuzekaart-icoon { width: 40px; height: 40px; background: #f0f4f8; color: var(--navy-900); }
.fc-keuzekaart-icoon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--blauw-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-invoer {
  height: 54px;
  padding: 0 18px;
  border-radius: var(--radius-veld);
  background: var(--grijs-50);
  border: none;
  font-size: 15.5px;
  outline: none;
  color: var(--navy-900);
  min-width: 0;
  width: 100%;
}
.fc-invoer:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--blauw-500); }
textarea.fc-invoer { height: auto; padding: 16px 18px; resize: none; font-family: inherit; }

.fc-chip {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  background: var(--grijs-50);
  color: var(--navy-900);
}
.fc-chip[data-aan] { background: var(--navy-900); color: #fff; }
.fc-chip[disabled] { opacity: 0.35; cursor: default; }

/* De tijdsloten staan altijd op één regel, hoeveel het er ook zijn: even
   brede kolommen naast elkaar. Met een flexrij die mocht afbreken viel de
   rij op een telefoon in tweeën en werd het paneel onnodig lang. */
.fc-tijden { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.fc-tijden .fc-chip { padding: 0 8px; min-width: 0; font-size: 13.5px; }

.fc-dagen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fc-dag {
  min-height: 68px;
  padding: 12px 4px;
  border: none;
  border-radius: var(--radius-veld);
  cursor: pointer;
  background: var(--grijs-50);
  color: var(--navy-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.fc-dag[data-aan] { background: var(--navy-900); color: #fff; }
.fc-dag[disabled] { opacity: 0.35; cursor: default; }
.fc-dag .fc-sub { font-size: 12px; line-height: 1; opacity: 0.75; }
/* Alleen het dagnummer: met de maand erbij ("20 okt") past de knop op een
   telefoon niet op één regel, en de maand staat al in het bereik erboven. */
.fc-dag-nummer { font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; }

.fc-weeknav {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--grijs-100);
  color: var(--navy-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-weeknav:hover { background: #e4eaf0; }
.fc-weeknav[disabled] { opacity: 0.35; cursor: default; }

.fc-vinkkaart {
  text-align: left;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius-veld);
  cursor: pointer;
  background: var(--grijs-50);
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--navy-900);
  width: 100%;
}
.fc-vinkkaart[data-aan] { background: var(--blauw-50); }
.fc-vinkkaart .fc-sub { font-size: 13px; color: var(--grijs-700); }

/* --------------------------------------------------------------- whatsapp */

.fc-wa { position: fixed; right: 28px; bottom: 28px; z-index: 20; }
/* Op een productpagina staat onderin de koopbalk, en die ligt er met z-index 25
   overheen: de WhatsApp-knop was daar onzichtbaar én niet aan te klikken. Hij
   schuift daarom boven de balk. De balk is 76 pixels hoog plus de veilige
   onderrand van de telefoon. */
@media (max-width: 1023px) {
  body:has(.fc-plakbalk) .fc-wa { bottom: calc(104px + env(safe-area-inset-bottom)); }
}
.fc-wa-knop {
  position: relative;
  z-index: 20;
  height: 52px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-900);
  box-shadow: inset 0 0 0 1px #dde5ee;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}
.fc-wa-knop:hover { color: var(--navy-900); background: var(--blauw-50); }
.fc-wa-sluit {
  position: absolute;
  z-index: 21;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 8px rgba(11, 29, 49, 0.2);
}
.fc-wa-sluit:hover { background: var(--navy-800); }
@media (max-width: 1023px) {
  .fc-wa { right: 16px; bottom: 16px; }
  .fc-wa[data-boven-balk] { bottom: 92px; }
}

/* ------------------------------------------------------------------- home */

.fc-hero {
  background: var(--navy-900);
  color: #fff;
  position: relative;
  overflow: clip;
}
.fc-hero-foto {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Vastgezet op de rechterrand. Met een vaste beeldverhouding werd de foto
     net zo breed als de hero hoog is, en bleef er rechts een strook navy
     staan; met right: 0 loopt hij altijd tot de rand door. */
  left: 55%;
  right: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(1.55) contrast(1.06) saturate(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.2) 30px, rgba(0, 0, 0, 0.55) 75px, rgba(0, 0, 0, 0.85) 120px, #000 160px);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.2) 30px, rgba(0, 0, 0, 0.55) 75px, rgba(0, 0, 0, 0.85) 120px, #000 160px);
}
.fc-hero-foto-sluier {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 55%;
  right: 0;
  height: 100%;
  background:
    linear-gradient(80deg, rgba(11, 29, 49, 0.28) 0%, rgba(11, 29, 49, 0.12) 10%, rgba(11, 29, 49, 0) 22%),
    linear-gradient(0deg, #0b1d31 0%, rgba(11, 29, 49, 0.55) 8%, rgba(11, 29, 49, 0.25) 17%, rgba(11, 29, 49, 0.08) 27%, rgba(11, 29, 49, 0) 38%);
}
@media (max-width: 1023px) {
  .fc-hero-foto, .fc-hero-foto-sluier { opacity: 0.25; left: 0; right: 0; }
}
.fc-hero-rij {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-top: 56px;
}
@media (min-width: 1024px) {
  .fc-hero-rij { flex-direction: row; align-items: flex-end; gap: 64px; padding-top: 110px; }
}
.fc-hero-tekst { max-width: 740px; }
.fc-hero-tekst .fc-intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--grijs-300);
  margin: 28px 0 0;
  max-width: 500px;
  text-wrap: pretty;
}

.fc-openkaart {
  flex: none;
  width: 100%;
  max-width: 384px;
  padding: 10px;
  border-radius: var(--radius-blok);
  background: rgba(11, 29, 49, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.fc-openkaart-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.fc-openkaart-dag {
  height: 40px;
  border-radius: var(--radius-veld);
  background: transparent;
  color: var(--grijs-600);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-openkaart-dag[data-open-dag] { background: rgba(255, 255, 255, 0.08); color: var(--grijs-300); }
.fc-openkaart-dag[data-vandaag] { background: var(--blauw-500); color: #fff; }
.fc-openkaart-knop {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border: none;
  border-radius: var(--radius-kaart);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.fc-openkaart-knop:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

.fc-hero-usps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  padding: 36px 0 44px;
}
@media (min-width: 1024px) {
  .fc-hero-usps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 110px; }
}
.fc-hero-usp { display: flex; align-items: flex-start; gap: 14px; }
.fc-hero-usp svg { color: var(--blauw-500); flex: none; margin-top: 1px; }
.fc-hero-usp .fc-sub { font-size: 14px; line-height: 1.55; color: var(--grijs-400); }

.fc-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.fc-marquee-baan {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: fcMarquee 36s linear infinite;
}
/* De hoogte staat per logo op het beeld zelf: vijf logo's op één vaste hoogte lezen niet even groot. */
.fc-marquee-baan img { width: auto; max-width: none; flex: none; opacity: 0.55; filter: grayscale(1); }

.fc-tegel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-kaart);
  background-color: var(--navy-800);
  background-size: cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  min-height: 200px;
}
.fc-tegel:hover { color: #fff; filter: brightness(1.1); transform: translateY(-3px); }
.fc-tegel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 29, 49, 0.74) 0%, rgba(11, 29, 49, 0.07) 60%);
}
.fc-tegel > * { position: relative; }
.fc-tegel-pijl {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-categorie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .fc-categorie-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: 280px 280px;
    grid-template-areas: 'a b' 'a c';
  }
  .fc-categorie-grid > :nth-child(1) { grid-area: a; }
  .fc-categorie-grid > :nth-child(2) { grid-area: b; }
  .fc-categorie-grid > :nth-child(3) { grid-area: c; }
}

.fc-merktegel {
  height: 120px;
  border-radius: var(--radius-kaart);
  background: #fff;
  box-shadow: inset 0 0 0 1px #dde5ee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.fc-merktegel:hover { box-shadow: inset 0 0 0 1px var(--blauw-500); }
/* De logobestanden staan allemaal op hetzelfde canvas van 960x400, optisch
   gelijk getrokken en met marge rondom; één vaste hoogte toont ze dus even
   groot. Zie src/seed/merklogos.ts. */
.fc-merktegel img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.fc-merktegel span { max-height: 30px; width: auto; max-width: 100%; object-fit: contain; }
.fc-merken-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }

/* ------------------------------------------------------- afrekenpagina */
/* Links de stappen, rechts het besteloverzicht dat meeloopt, zoals het
   aangeleverde voorbeeld. Op een telefoon komt het overzicht boven het
   formulier, zodat de klant eerst ziet wat hij afrekent. */
.fc-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; }
.fc-checkout-overzicht {
  position: sticky;
  top: 140px;
  background: var(--grijs-50);
  border-radius: var(--radius-blok);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fc-checkout-regel { display: flex; align-items: center; gap: 14px; }
.fc-checkout-beeld {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dde5ee;
  padding: 6px;
  display: flex;
}
.fc-checkout-aantal {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1023px) {
  .fc-checkout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fc-checkout-overzicht { order: -1; position: static; padding: 20px; }
}
@media (min-width: 768px) { .fc-merken-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fc-merken-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.fc-sectiekop { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 16px; }
@media (min-width: 1024px) { .fc-sectiekop { flex-direction: row; align-items: flex-end; gap: 40px; } }

.fc-tabs { display: flex; padding: 4px; border-radius: 999px; background: var(--grijs-200); }
.fc-tabs button {
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--grijs-700);
}
.fc-tabs button[data-aan] { background: #fff; color: var(--navy-900); }

.fc-vier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; margin-top: 48px; }
@media (min-width: 1024px) { .fc-vier-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.fc-showband {
  position: relative;
  border-radius: var(--radius-blok);
  overflow: clip;
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center;
  color: #fff;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .fc-showband { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.fc-showband::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 29, 49, 0.84) 0%, rgba(11, 29, 49, 0.7) 45%, rgba(11, 29, 49, 0.18) 100%),
    linear-gradient(0deg, rgba(11, 29, 49, 0.41) 0%, rgba(11, 29, 49, 0) 45%);
}
.fc-showband-tekst {
  position: relative;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}
@media (min-width: 1024px) {
  .fc-showband-tekst { padding: 64px; }
}
.fc-showband-kaart {
  position: relative;
  padding: 0 20px 20px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}
@media (min-width: 1024px) {
  .fc-showband-kaart { padding: 40px 40px 40px 0; }
}
.fc-showband-kaart > div {
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius-blok);
  overflow: hidden;
  background: #fff;
  color: var(--navy-900);
  box-shadow: var(--schaduw-kaart);
  display: flex;
  flex-direction: column;
}
.fc-maps { flex: 1; min-height: 180px; background: var(--grijs-200); position: relative; overflow: hidden; }
.fc-maps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.fc-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .fc-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: 'a a b c' 'a a d e';
  }
  .fc-bento > :nth-child(1) { grid-area: a; }
  .fc-bento > :nth-child(2) { grid-area: b; }
  .fc-bento > :nth-child(3) { grid-area: c; }
  .fc-bento > :nth-child(4) { grid-area: d; }
  .fc-bento > :nth-child(5) { grid-area: e; }
}
.fc-bento-groot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-blok);
  background-color: var(--navy-900);
  background-size: cover;
  background-position: 52% 50%;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 84px 28px 28px;
  min-height: 380px;
}
@media (min-width: 1024px) {
  .fc-bento-groot { padding: 84px 40px 40px; min-height: 520px; }
}
.fc-bento-groot:hover { color: #fff; filter: brightness(1.1); }
.fc-bento-groot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 29, 49, 0.82) 0%, rgba(11, 29, 49, 0.31) 50%, rgba(11, 29, 49, 0.05) 100%);
}
.fc-bento-groot > * { position: relative; }
.fc-bento-klein {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: none;
  border-radius: var(--radius-kaart);
  background: var(--grijs-50);
  color: var(--navy-900);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fc-bento-klein:hover { background: var(--blauw-50); color: var(--navy-900); }
.fc-bento-icoon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--blauw-50);
  color: var(--blauw-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------ inhoud en vragen */

.fc-artikel { display: flex; flex-direction: column; gap: 16px; }
.fc-artikel p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--grijs-800); text-wrap: pretty; }
/* Een tussenkop hoort bij de tekst erónder: wat extra lucht erboven, en de
   gewone zestien pixels van de kolom ertussen — zelfde ritme als de rest. */
.fc-artikel h2, .fc-artikel h3, .fc-artikel h4 { margin-top: 12px; }
.fc-artikel h2:first-child, .fc-artikel h3:first-child, .fc-artikel h4:first-child { margin-top: 0; }
/* Vangnet: de briefing-export bevat platgeslagen tabellen met lange
   aaneengeplakte reeksen; zonder dit duwen die op een telefoon de pagina breed. */
.fc-artikel p, .fc-artikel li { overflow-wrap: anywhere; }
.fc-artikel ul, .fc-artikel ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.7; color: var(--grijs-800); }
.fc-artikel li::marker { color: var(--blauw-500); }
.fc-artikel a { color: var(--blauw-600); }
.fc-artikel a:hover { color: var(--navy-900); }
/* Een tabel scrollt in zijn eigen kader. Zonder dat duwt een
   vergelijkingstabel van drie of vier kolommen op een telefoon de hele pagina
   breder dan het scherm, en scrollt de bezoeker de site opzij in plaats van de
   tabel. Twee kaders: `fc-tabelrand` zet `metTabelrand()` om de tabellen uit
   een html-veld, `lexical-table-container` komt van de editor zelf. */
.fc-artikel .fc-tabelrand,
.fc-artikel .lexical-table-container { overflow-x: auto; border-radius: var(--radius-veld); }
/* Vangnet voor een tabel zonder kader eromheen. */
@media (max-width: 767px) {
  .fc-artikel > table { display: block; overflow-x: auto; }
}
.fc-artikel table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5; }
/* Een losse lange reeks in een cel (een maatvoering, een typenummer) breekt af
   in plaats van de kolom open te duwen. `break-word` en niet `anywhere`: dat
   laatste perst de hele tabel samen tot één woord per regel. */
.fc-artikel th, .fc-artikel td { overflow-wrap: break-word; }
/* De lexical-editor zet elke cel in een eigen <p>, en die erfde de kleur en de
   maat van een gewone alinea: donkergrijze tekst op de navy koprij, groter dan
   de rest van de tabel. De cel bepaalt hier dus hoe de alinea erin leest. */
.fc-artikel th > p, .fc-artikel td > p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: break-word;
}
.fc-artikel th > p + p, .fc-artikel td > p + p { margin-top: 6px; }
.fc-artikel th {
  background: var(--navy-900);
  color: #fff;
  text-align: left;
  font-weight: 600;
  padding: 12px 16px;
}
.fc-artikel td { padding: 12px 16px; color: var(--grijs-800); }
.fc-artikel tbody tr:nth-child(even) { background: var(--blauw-25); }

.fc-vraag { border-radius: var(--radius-kaart); background: var(--grijs-50); overflow: hidden; }
.fc-vraag-knop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-900);
}
.fc-vraag-icoon {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.fc-vraag[data-open] .fc-vraag-icoon { background: var(--blauw-500); color: #fff; transform: rotate(45deg); }
.fc-vraag-antwoord { padding: 0 24px 22px; font-size: 15.5px; line-height: 1.7; color: var(--grijs-800); overflow-wrap: break-word; }
.fc-vraag-antwoord[hidden] { display: none; }

.fc-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: var(--radius-kaart);
  background: var(--grijs-50);
}
@media (min-width: 1024px) {
  .fc-toc { position: sticky; top: 182px; }
}
.fc-toc a {
  padding: 10px 14px;
  border-radius: var(--radius-veld);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-900);
}
.fc-toc a:hover { background: #fff; color: var(--blauw-600); }

.fc-tweekolom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .fc-tweekolom { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 80px; }
  .fc-tweekolom > .fc-plak { position: sticky; top: 182px; }
}

/* ==========================================================================
   Standaardpagina (contact)
   De generieke route tekent hero, blokken en het formulier met neutrale
   klassenamen. Hier krijgen ze de vormgeving van de winkel; zonder deze regels
   staat de pagina als kale HTML tegen de kopbalk aan.
   ========================================================================== */
.kruimels { padding-top: 28px; }
.kruimels .binnen { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--grijs-600); }
.kruimels a:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--grijs-400); }

.hero > .binnen { padding-top: 48px; padding-bottom: 8px; }
.hero h1 { text-wrap: balance; }
.hero-label { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--blauw-600); }
.hero-intro { margin-top: 18px; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--grijs-700); }

.blok { padding: var(--sectie-ruimte) 0; }
.blok-kop { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; max-width: 620px; }
.blok-kop .eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--blauw-600); }
.blok-inleiding { color: var(--grijs-700); font-size: 16.5px; line-height: 1.6; }

/* De vorm van het formulier zelf staat los van de plek waar het staat: het
   komt ook op de contactpagina voor, buiten een blok om. Het grijze kader is
   wél van het blok. Hier stond eerst `.blok-formulier`, dus de regel sloeg
   nergens aan en stonden de witte velden onzichtbaar op een witte pagina. */
.formulier {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.blok-formulierBlok .formulier {
  padding: 28px;
  border-radius: var(--radius-blok);
  background: var(--grijs-50);
}
.formulier .veld { display: flex; flex-direction: column; gap: 8px; }
.formulier label { font-size: 14px; font-weight: 600; color: var(--navy-900); }
.formulier .verplicht { color: var(--sale); }
.formulier input:not([type='checkbox']):not([type='radio']),
.formulier select,
.formulier textarea {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-veld);
  background: #fff;
  color: var(--navy-900);
  font-size: 15.5px;
  outline: none;
}
.formulier textarea { height: auto; min-height: 140px; padding: 16px 18px; resize: vertical; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { box-shadow: inset 0 0 0 1px var(--blauw-500); }
.formulier .veld:has([type='checkbox']) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
.formulier .melding { margin: 0; font-size: 14px; }
.formulier .melding:empty { display: none; }
.formulier .melding.fout { color: var(--sale); }
.formulier button[type='submit'] {
  align-self: flex-start;
  height: 52px;
  padding: 0 28px;
  border: none;
  border-radius: 999px;
  background: var(--blauw-500);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.formulier button[type='submit']:hover { filter: brightness(0.92); }
.formulier button[type='submit']:disabled { opacity: 0.6; cursor: default; }

/* ==========================================================================
   Contactpagina
   De kop is dezelfde herokaart als de showroom- en servicepagina's, maar met
   een witte gegevenskaart ernaast. Daaronder het berichtformulier met de
   showroomkaart ernaast, zoals Contact.dc.html uit de handoff.
   ========================================================================== */
.fc-herokaart-kaart--wit {
  max-width: 360px;
  padding: 28px;
  gap: 18px;
  background: #fff;
  color: var(--navy-900);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 30px 80px rgba(7, 19, 33, 0.35);
}
.fc-contactrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 16px;
  border-radius: var(--radius-veld);
  background: var(--grijs-50);
}
.fc-contactrij > :first-child { font-size: 13.5px; color: var(--grijs-600); }
/* Minstens 44 pixels hoog: het telefoonnummer en het e-mailadres zijn links
   en moeten met een duim te raken zijn. De regeltekst zelf is 25 pixels. */
.fc-contactrij > :last-child {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-900);
  text-align: right;
}
.fc-contactrij a:hover { color: var(--blauw-600); }

.fc-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1024px) {
  .fc-contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
}
.fc-contact-formulier {
  border-radius: var(--radius-blok);
  background: var(--grijs-50);
  padding: 28px;
}
@media (min-width: 768px) {
  .fc-contact-formulier { padding: 48px; }
}
.fc-contact-formulier .formulier { max-width: none; margin-top: 24px; }
/* Naam, e-mail en telefoon naast elkaar zodra er ruimte is; het bericht en de
   keuzelijst houden de volle breedte. De soort staat op de rij, zie
   componenten/Formulier.tsx. */
@media (min-width: 768px) {
  .fc-contact-formulier .formulier { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .fc-contact-formulier .formulier > :not(.veld),
  .fc-contact-formulier .formulier .veld[data-soort='meerregelig'],
  .fc-contact-formulier .formulier .veld[data-soort='keuze'] { grid-column: 1 / -1; }
}

.fc-contact-zij { display: flex; flex-direction: column; gap: 16px; }
.fc-contact-foto {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-blok);
  overflow: hidden;
  background: var(--navy-900) center/cover no-repeat;
}
.fc-contact-foto > span { position: absolute; left: 20px; top: 20px; }
.fc-contact-kaart {
  border-radius: var(--radius-blok);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--grijs-100);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fc-contact-tijden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fc-contact-tijd {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--radius-veld);
  background: var(--grijs-50);
}
.fc-contact-tijd > :first-child { font-size: 12.5px; color: var(--grijs-600); }
.fc-contact-tijd > :last-child { font-size: 15px; font-weight: 600; color: var(--navy-900); }

/* ==========================================================================
   Kassa
   Op /afrekenen staat alleen het logo met een kleine teruglink eronder. Geen
   menu, zoekveld of voet: zie KassaOmhulsel.
   ========================================================================== */
.fc-kassakop {
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--grijs-100);
  background: #fff;
}
/* Links uitgelijnd op dezelfde lijn als de inhoud van de pagina. */
.fc-kassakop-binnen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.fc-kassaterug { font-size: 13.5px; color: var(--grijs-600); }
.fc-kassaterug:hover { color: var(--blauw-500); }

/* De teruglink staat bovenaan het scrollende paneel. Met de negatieve marge
   van .fc-tekstknop schoof hij onder de kop en was hij half afgeknipt en niet
   klikbaar. Hier krijgt hij zijn aanraakvlak van 44 pixels uit padding. */
.fc-drawer-inhoud .fc-tekstknop {
  margin: 0;
  padding: 12px 0;
  min-height: 44px;
  align-self: flex-start;
}

/* Producten na "Toon meer" staan verborgen in de HTML; zie PlpClient. */
.fc-plp-grid > [hidden] { display: none; }

/* ------------------------------------------- navigatie: link + chevron
   Sinds 16-10-2026 is een hoofdmenu-item een link naar de overzichtspagina
   met een aparte knop voor het uitklapmenu. Samen lezen ze als één pil,
   zoals de knop van daarvoor. */
.fc-navitem {
  height: 44px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  color: var(--grijs-300);
}
.fc-navitem:hover,
.fc-navitem[data-open] { color: #fff; }
.fc-navitem[data-open] { background: rgba(255, 255, 255, 0.1); }
.fc-navitem-link {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 4px 0 16px;
  color: inherit;
  white-space: nowrap;
  border-radius: 999px 0 0 999px;
}
.fc-navitem-chevron {
  height: 44px;
  min-width: 34px;
  padding: 0 14px 0 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 0 999px 999px 0;
}
.fc-navitem-chevron svg { transition: transform 0.15s; }
.fc-navitem[data-open] .fc-navitem-chevron svg { transform: rotate(180deg); }
.fc-navitem-link:hover { color: inherit; }
.fc-navitem-link:focus-visible,
.fc-navitem-chevron:focus-visible { outline: 2px solid var(--blauw-500); outline-offset: -2px; }
a.fc-navknop { text-decoration: none; }

/* De kleine regel onder een blauwe afspraakknop. Hij is precies zo breed als
   de knop: de knop bepaalt de breedte, de regel telt niet mee (width 0 met
   min-width 100%) en staat gecentreerd. In de kopbalk en het menu staat hij
   niet (feedback 17-10-2026). */
.fc-afspraak-kop { display: inline-flex; flex-direction: column; align-items: stretch; gap: 8px; }
.fc-afspraak-kop .fc-zonderafspraak { width: 0; min-width: 100%; text-align: center; white-space: normal; }
.fc-zonderafspraak { font-size: 12px; line-height: 1.3; color: var(--grijs-600); white-space: nowrap; }
.fc-zonderafspraak--links { display: block; margin-top: 2px; color: var(--blauw-600); }

/* Mobiel menu: naam als link, ronde knop klapt open. */
.fc-mmenu-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fc-mmenu-naam {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-900);
}
.fc-mmenu-kop .fc-mmenu-knop { padding: 6px 8px; min-width: 44px; min-height: 44px; justify-content: center; }

/* Inkoopbanner onder de services op de homepage. */
.fc-inkoopband {
  margin-top: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-kaart);
  background: var(--navy-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.fc-inkoopband:hover { color: #fff; filter: brightness(1.12); }
.fc-inkoopband .fc-bento-icoon { background: rgba(255, 255, 255, 0.1); color: #fff; }
@media (max-width: 767px) {
  .fc-inkoopband { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}

/* Professioneel of semi-professioneel, op de homepage. */
.fc-klasse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 767px) {
  .fc-klasse-grid { grid-template-columns: minmax(0, 1fr); }
}
.fc-klassekaart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius-kaart);
  background: var(--grijs-50);
}
.fc-klassekaart ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.55; color: var(--grijs-800); }

/* Labels op een productkaart (gebruiksklasse) en de nieuwprijs. */
.fc-kaart-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fc-kaartlabel {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--grijs-100);
  color: var(--grijs-700);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.fc-nieuwprijs { font-size: 12.5px; color: var(--grijs-500); }

/* Tussenkop in een filtergroep, zoals Bovenlichaam boven Borst en Rug. */
.fc-filtertussenkop {
  margin: 8px 0 2px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grijs-500);
}
.fc-filtertussenkop:first-of-type { margin-top: 2px; }