/* ============================================================
   UI-laag 2026 — gedeeld ontwerp voor BikePlace en Bikeshop.
   Wordt als laatste stylesheet geladen en zet de opmaak van het
   oude WordPress-thema opnieuw: rustige witte pagina's, brede
   grids, vette koppen, kaarten met een grijs fotopaneel.
   Klassen met u- zijn nieuw; de bp-regels overschrijven bestaande
   blokken (header, hero, homepage, productpagina, footer).
   ============================================================ */

:root {
  --u-ink: #10131A;
  --u-ink-soft: #565F73;
  --u-ink-faint: #8B93A5;
  --u-line: #E5E8EF;
  --u-line-strong: #CBD2E0;
  --u-surface: #F5F6F9;
  --u-surface-2: #EEF1F6;
  --u-white: #fff;

  --u-accent: #2B6CB0;
  --u-accent-deep: #0F3853;
  --u-accent-soft: #E9F2FA;
  --u-on-accent: #fff;
  --u-sale: #C2410C;
  --u-sale-soft: #FDEDE4;
  --u-ok: #1F7A55;
  --u-ok-soft: #E6F4EE;

  --u-radius-sm: 10px;
  --u-radius: 14px;
  --u-radius-lg: 20px;
  --u-pill: 999px;

  --u-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --u-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
  --u-shadow-lg: 0 24px 60px rgba(16, 24, 40, .14);

  --u-maxw: 1320px;
  --u-gutter: 24px;
  --u-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* BikePlace = Zeeuws blauw, Bikeshop = donker zeeblauw met amber accent. */
body.site-bikeplace {
  --u-accent: #2B6CB0;
  --u-accent-deep: #0F3853;
  --u-accent-soft: #E9F2FA;
}

body.site-bikeshop {
  --u-accent: #0F3853;
  --u-accent-deep: #0B2A3E;
  --u-accent-soft: #E7EEF4;
  --u-sale: #B45309;
  --u-sale-soft: #FDF1DF;
}

/* ------------------------------------------------------------
   Basis
   ------------------------------------------------------------ */
body,
button,
input,
select,
textarea {
  font-family: var(--u-font);
}

body {
  color: var(--u-ink);
  background: var(--u-white);
  -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body h4 {
  font-family: var(--u-font);
  color: var(--u-ink);
  letter-spacing: -.025em;
  line-height: 1.12;
  font-weight: 800;
}

body a {
  color: var(--u-accent);
}

.u-wrap {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding: 0 var(--u-gutter);
}

.u-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
}

/* Knoppen — ook de bestaande bp-btn krijgt de nieuwe vorm. */
.u-btn,
body .bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--u-pill);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.u-btn:hover,
body .bp-btn:hover {
  transform: translateY(-1px);
}

.u-btn--primary,
body .bp-btn--primary,
body .bp-btn--primary-used,
body .bp-btn--primary-nieuw,
body .bp-btn--primary-winkel {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--u-on-accent);
}

.u-btn--primary:hover,
body .bp-btn--primary:hover,
body .bp-btn--primary-used:hover,
body .bp-btn--primary-nieuw:hover,
body .bp-btn--primary-winkel:hover {
  background: var(--u-accent-deep);
  border-color: var(--u-accent-deep);
  color: var(--u-on-accent);
}

.u-btn--ghost,
body .bp-btn--outline,
body .bp-btn--outline-used,
body .bp-btn--outline-nieuw,
body .bp-btn--outline-winkel {
  background: var(--u-white);
  border-color: var(--u-line-strong);
  color: var(--u-ink);
}

.u-btn--ghost:hover,
body .bp-btn--outline:hover,
body .bp-btn--outline-used:hover,
body .bp-btn--outline-nieuw:hover,
body .bp-btn--outline-winkel:hover {
  border-color: var(--u-ink);
  color: var(--u-ink);
}

.u-btn--dark {
  background: var(--u-ink);
  border-color: var(--u-ink);
  color: #fff;
}

.u-btn--block {
  width: 100%;
}

/* "x exemplaren direct beschikbaar": groen, zodat de voorraad opvalt naast de offerteknop. */
.u-btn--stock {
  background: var(--u-ok);
  border-color: var(--u-ok);
  color: #fff;
  margin-top: 10px;
}

.u-btn--stock:hover {
  background: #17603F;
  border-color: #17603F;
  color: #fff;
}

/* Uitklapblok (<details class="u-fold">): alleen de kop staat in beeld, de inhoud klapt open. */
.u-fold > .u-fold__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.u-fold > .u-fold__head::-webkit-details-marker {
  display: none;
}

.u-fold > .u-fold__head > :not(svg) {
  flex: 1;
  min-width: 0;
}

body .u-fold > .u-fold__head .u-fold__chevron {
  flex: none;
  margin: 3px 0 0 auto;
  color: var(--u-ink-faint);
  transform: rotate(90deg);
  transition: transform .15s ease;
}

body .u-fold[open] > .u-fold__head .u-fold__chevron {
  transform: rotate(-90deg);
}

body .u-fold:not([open]) > .u-fold__head,
body .u-fold:not([open]) > .u-fold__head :is(h2, h3, p):last-child {
  margin-bottom: 0;
}

body .u-fold[open] > .u-fold__head {
  margin-bottom: 18px;
}

body .u-fold[open] > .u-fold__head :is(h2, h3, p):last-child {
  margin-bottom: 0;
}

.u-fold > .u-fold__head:focus-visible {
  outline: 2px solid var(--u-accent);
  outline-offset: 4px;
  border-radius: var(--u-radius-sm);
}

/* Twee uitklapblokken in één kaart (specificaties + tekst over het model). */
body .bp-specs-section > .u-fold + .u-fold {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--u-line);
}

body .u-fold > .bp-specs-description {
  margin-top: 0;
}

/* ------------------------------------------------------------
   Topbalk + header
   ------------------------------------------------------------ */
body .bp-bezorgbalk {
  background: var(--u-ink);
  color: #fff;
  padding: 0;
  min-height: 0;
  border: 0;
}

.u-topbar {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding: 9px var(--u-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #E7EAF2;
}

.u-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.u-topbar__item svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--u-white);
  opacity: .75;
}

body .bp-site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--u-white);
  border-bottom: 1px solid var(--u-line);
  box-shadow: none;
}

body .bp-header-inner {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding: 16px var(--u-gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

body .bp-logo-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--u-ink);
}

body .bp-logo-place {
  color: var(--u-accent);
}

body .bp-logo-dot {
  color: var(--u-accent);
}

body .bp-nav-desktop {
  margin-left: auto;
}

body .bp-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body .bp-nav-list > li > a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--u-pill);
  font-size: 15px;
  font-weight: 600;
  color: var(--u-ink);
  text-decoration: none;
}

body .bp-nav-list > li > a:hover {
  background: var(--u-surface);
  color: var(--u-ink);
}

body .bp-nav-list .sub-menu {
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow);
  padding: 8px;
  min-width: 230px;
}

body .bp-nav-list .sub-menu a {
  border-radius: var(--u-radius-sm);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 12px;
}

body .bp-nav-list .sub-menu a:hover {
  background: var(--u-surface);
}

/* Telefoon/CTA rechts in de header. */
.u-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--u-pill);
  background: var(--u-accent);
  color: var(--u-on-accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.u-header-cta:hover {
  background: var(--u-accent-deep);
  color: var(--u-on-accent);
}

.u-header-cta svg {
  width: 16px;
  height: 16px;
}

body .bp-nav-toggle {
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-sm);
  background: var(--u-white);
  color: var(--u-ink);
  padding: 9px 10px;
}

@media (max-width: 1023px) {
  .u-topbar {
    gap: 18px;
    font-size: 12px;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .u-topbar::-webkit-scrollbar {
    display: none;
  }

  .u-header-cta span {
    display: none;
  }
}

/* ------------------------------------------------------------
   Kruimelpad + paginakop
   ------------------------------------------------------------ */
body .bp-breadcrumb {
  font-size: 13px;
  color: var(--u-ink-faint);
  margin-bottom: 18px;
}

body .bp-breadcrumb a {
  color: var(--u-ink-soft);
  text-decoration: none;
}

body .bp-breadcrumb a:hover {
  text-decoration: underline;
}

.u-page-head {
  max-width: 820px;
  margin-bottom: 26px;
}

.u-page-head h1,
body .bp-overzicht-h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 12px;
}

.u-page-head p,
body .bp-overzicht-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 0;
}

/* ------------------------------------------------------------
   Overzicht: zijbalk met filters + resultaten
   ------------------------------------------------------------ */
.u-listing-page {
  padding: 28px 0 64px;
}

.u-listing {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.u-filters {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 6px;
}

.u-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.u-filters__title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.u-filters__close {
  display: none;
  border: 0;
  background: none;
  padding: 6px;
  color: var(--u-ink-soft);
  cursor: pointer;
}

.u-facet {
  border-bottom: 1px solid var(--u-line);
}

.u-facet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--u-ink);
  cursor: pointer;
  list-style: none;
}

.u-facet__head::-webkit-details-marker {
  display: none;
}

.u-facet__head svg {
  width: 16px;
  height: 16px;
  color: var(--u-ink-faint);
  transition: transform .15s ease;
}

.u-facet[open] .u-facet__head svg {
  transform: rotate(90deg);
}

.u-facet__list {
  list-style: none;
  margin: 0;
  padding: 0 0 14px;
  display: grid;
  gap: 2px;
}

.u-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  border-radius: var(--u-radius-sm);
  font-size: 14px;
  color: var(--u-ink-soft);
  text-decoration: none;
}

.u-check:hover {
  background: var(--u-surface);
  color: var(--u-ink);
}

.u-check__box {
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid var(--u-line-strong);
  border-radius: 5px;
  background: var(--u-white);
  position: relative;
}

.u-check.is-active .u-check__box {
  background: var(--u-accent);
  border-color: var(--u-accent);
}

.u-check.is-active .u-check__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.u-check.is-active {
  color: var(--u-ink);
  font-weight: 600;
}

.u-check__label {
  flex: 1;
}

.u-check__count {
  color: var(--u-ink-faint);
  font-size: 13px;
  font-weight: 500;
}

/* Prijsfilter */
.u-price-filter {
  padding: 2px 2px 16px;
  display: grid;
  gap: 10px;
}

.u-price-filter__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.u-price-filter label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--u-ink-faint);
}

.u-price-filter input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-sm);
  font-size: 14px;
  color: var(--u-ink);
  background: var(--u-white);
}

.u-price-filter input:focus {
  outline: 2px solid var(--u-accent);
  outline-offset: -1px;
  border-color: var(--u-accent);
}

.u-price-filter button {
  justify-self: start;
  padding: 10px 18px;
  font-size: 14px;
}

/* Actieve filters als chips */
.u-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--u-line);
}

.u-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--u-pill);
  background: var(--u-accent-soft);
  color: var(--u-accent-deep);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.u-chip svg {
  width: 12px;
  height: 12px;
}

.u-chip:hover {
  background: var(--u-accent);
  color: var(--u-on-accent);
}

.u-chip--clear {
  background: transparent;
  color: var(--u-ink-soft);
  text-decoration: underline;
}

.u-chip--clear:hover {
  background: transparent;
  color: var(--u-ink);
}

/* Werkbalk boven de resultaten */
.u-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}

.u-toolbar__count {
  font-size: 15px;
  font-weight: 700;
}

.u-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.u-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-pill);
  background: var(--u-white);
  font-size: 14px;
  font-weight: 600;
}

.u-select svg {
  width: 15px;
  height: 15px;
  color: var(--u-ink-faint);
}

.u-select select {
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--u-ink);
  cursor: pointer;
}

.u-select select:focus {
  outline: none;
}

.u-select noscript button {
  margin-left: 6px;
}

/* Mobiele filterknop + lade */
.u-filters-state,
.u-filters-toggle {
  display: none;
}

/* Productgrid */
.u-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
}

.u-empty {
  padding: 48px 0;
  color: var(--u-ink-soft);
  font-size: 16px;
}

/* ------------------------------------------------------------
   Productkaart
   ------------------------------------------------------------ */
.u-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.u-card__media {
  position: relative;
  background: var(--u-surface);
  border-radius: var(--u-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 12px;
  transition: transform .3s ease;
}

.u-card:hover .u-card__media img {
  transform: scale(1.035);
}

.u-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 11px;
  border-radius: var(--u-radius-sm);
  background: var(--u-white);
  box-shadow: var(--u-shadow-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--u-ink);
}

.u-badge--sale {
  background: var(--u-sale-soft);
  color: var(--u-sale);
}

.u-badge--stock {
  background: var(--u-ok-soft);
  color: var(--u-ok);
}

/* Gereserveerd: de fiets blijft staan, maar is niet meer te koop. */
.u-badge--gone {
  background: var(--u-ink);
  color: var(--u-white);
}

.u-card__body {
  padding: 14px 2px 0;
}

.u-card__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
  margin-bottom: 4px;
}

.u-card__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--u-ink);
}

.u-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--u-ink-soft);
}

.u-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.u-card__spec svg {
  width: 14px;
  height: 14px;
  color: var(--u-ink-faint);
}

.u-card__price {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.u-price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--u-ink);
}

.u-price__from {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-ink-faint);
  margin-right: 2px;
}

.u-pill--sale {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--u-radius-sm);
  background: var(--u-sale-soft);
  color: var(--u-sale);
  font-size: 13px;
  font-weight: 700;
}

.u-card__compare {
  margin-top: 6px;
  font-size: 13px;
  color: var(--u-ink-faint);
}

.u-card__compare s {
  color: var(--u-ink-faint);
}

.u-card__cta {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--u-accent);
}

/* Promotegel tussen de kaarten */
.u-promo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  border-radius: var(--u-radius);
  background: var(--u-accent-soft);
  border: 1px solid var(--u-line);
  text-decoration: none;
  color: inherit;
}

.u-promo__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

.u-promo__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--u-ink-soft);
  margin: 0;
}

.u-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--u-accent-deep);
}

.u-promo__cta svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 1100px) {
  .u-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .u-listing {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .u-filters-toggle {
    display: inline-flex;
  }

  .u-filters {
    position: fixed;
    inset: 0;
    z-index: 90;
    max-height: none;
    background: var(--u-white);
    padding: 20px var(--u-gutter) 40px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .2s ease;
    visibility: hidden;
  }

  .u-filters-state:checked ~ .u-listing .u-filters {
    transform: none;
    visibility: visible;
  }

  .u-filters__head {
    position: sticky;
    top: 0;
    background: var(--u-white);
    padding: 6px 0 12px;
    margin-bottom: 0;
  }

  .u-filters__close {
    display: inline-flex;
  }
}

@media (max-width: 560px) {
  .u-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .u-toolbar {
    gap: 10px;
  }
}

/* ------------------------------------------------------------
   Hulpklassen + afsluitend CTA-blok
   ------------------------------------------------------------ */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.u-accent {
  color: var(--u-accent);
}

.u-cta {
  background: var(--u-surface);
  padding: 56px var(--u-gutter);
}

.u-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.u-cta__inner h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 10px;
}

.u-cta__inner p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 0 0 22px;
}

.u-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------------------------------------------------------------
   Oude vaste-headerruimte opruimen: de header is nu sticky.
   (De WordPress-CSS zette body padding-top met !important.)
   ------------------------------------------------------------ */
body {
  padding-top: 0 !important;
}

body .bp-site-header,
body.single-product .bp-site-header,
body.woocommerce .bp-site-header,
body.woocommerce-page .bp-site-header {
  position: sticky !important;
  top: 0 !important;
  left: auto;
  right: auto;
  width: auto;
}

/* Infostrook boven de overzichten en productpagina's. */
body .bp-info-strook {
  background: var(--u-surface);
  border: 0;
  border-bottom: 1px solid var(--u-line);
  color: var(--u-ink-soft);
  font-size: 13.5px;
  padding: 11px var(--u-gutter);
  text-align: center;
}

body .bp-info-strook strong {
  color: var(--u-ink);
}

/* Zijbalk: eigen scrollbalk subtiel houden. */
.u-filters {
  scrollbar-width: thin;
  scrollbar-color: var(--u-line-strong) transparent;
}

.u-filters::-webkit-scrollbar {
  width: 6px;
}

.u-filters::-webkit-scrollbar-thumb {
  background: var(--u-line-strong);
  border-radius: 999px;
}

/* ============================================================
   Homepage
   ============================================================ */
body .bp-hero {
  border-radius: 0;
  min-height: 560px;
  display: flex;
  align-items: center;
}

body .bp-hero-inner {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding: 72px var(--u-gutter);
  width: 100%;
}

body .bp-hero-bg-overlay {
  background: linear-gradient(90deg, rgba(10, 16, 26, .88) 0%, rgba(10, 16, 26, .62) 46%, rgba(10, 16, 26, .18) 100%);
}

body .bp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--u-pill);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

body .bp-hero-h1 {
  font-family: var(--u-font);
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: #fff;
  margin: 20px 0 16px;
  max-width: 14ch;
}

body .bp-hero-h1-accent {
  font-family: var(--u-font);
  font-style: normal;
  color: #fff;
  opacity: .82;
}

body .bp-hero-lead {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  max-width: 54ch;
}

body .bp-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

body .bp-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--u-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 13.5px;
}

/* Bikeshop: de slides zijn vrijstaande fietsen (PNG zonder achtergrond, van de oude site), geen
   sfeerfoto's. Die staan rechts in de hero, heel in beeld, en de donkere overlay blijft links bij de tekst. */
/* bikeshop-inline.css (van de oude site) zet alles in .bp-hero op position: relative; slideshow en overlay liggen eroverheen. */
body.site-bikeshop .bp-hero > .bp-hero-slideshow,
body.site-bikeshop .bp-hero > .bp-hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

body.site-bikeshop .bp-hero > .bp-hero-bg-overlay {
  z-index: 1;
}

body.site-bikeshop .bp-hero-slide {
  inset: 8% 3% 12% 44%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .35));
}

body.site-bikeshop .bp-hero--met-fotos {
  background: radial-gradient(ellipse 60% 70% at 78% 55%, #2a4f73 0%, var(--bp-donker-zeeblauw) 70%);
}

body.site-bikeshop .bp-hero--met-fotos .bp-hero-bg-overlay {
  background: linear-gradient(90deg, rgba(10, 16, 26, .55) 0%, rgba(10, 16, 26, .2) 40%, rgba(10, 16, 26, 0) 60%);
}

@media (max-width: 900px) {
  body.site-bikeshop .bp-hero-slide {
    inset: auto 0 4% 20%;
    height: 45%;
    opacity: 0;
  }

  body.site-bikeshop .bp-hero-slide.is-active {
    opacity: .35;
  }
}

/* Bikeshop, kop van een tekstpagina (reparatie, garantie): een rustige donkere band met de tekst in het midden.
   De homepage-hero hierboven is links uitgelijnd en hoog; dat past hier niet. */
body.site-bikeshop .bp-hero--compact {
  min-height: 0;
  display: block;
  padding: 0;
  text-align: center;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, #2a4f73 0%, var(--bp-donker-zeeblauw) 70%);
}

body.site-bikeshop .bp-hero--compact > .bp-hero-bg-overlay {
  display: none;
}

body.site-bikeshop .bp-hero--compact .bp-hero-inner {
  max-width: 860px;
  padding: 64px var(--u-gutter) 60px;
}

body.site-bikeshop .bp-hero--compact .bp-hero-badge {
  margin-bottom: 0;
}

body.site-bikeshop .bp-hero--compact .bp-hero-badge svg {
  color: #B5D4F4;
}

body.site-bikeshop .bp-hero--compact .bp-hero-h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  max-width: none;
  margin: 20px auto 14px;
}

body.site-bikeshop .bp-hero--compact .bp-hero-h1-accent {
  display: inline;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #B5D4F4;
  opacity: 1;
}

body.site-bikeshop .bp-hero--compact .bp-hero-lead {
  max-width: 60ch;
  margin: 0 auto;
}

/* Het oude thema geeft .site-main en de blokken erin 20px marge: de kop loopt door tot de rand. */
body.site-bikeshop .site-main:has(> .bp-hero--compact) {
  margin-right: 0;
}

body.site-bikeshop .site-main:has(> .bp-hero--compact) > * {
  margin-bottom: 0;
}

/* Tekstpagina's van Bikeshop: zelfde breedte en ritme als de rest van de site. */
body.site-bikeshop .bp-content-section {
  padding: 56px var(--u-gutter) 72px;
}

body.site-bikeshop .bp-content-block:last-child,
body.site-bikeshop .bp-content-cta-blok:last-child {
  margin-bottom: 0;
}

/* Keuzekaarten onder de hero: witte tegels met rand. */
body .bp-keuze-grid {
  max-width: var(--u-maxw);
  margin: -56px auto 0;
  position: relative;
  z-index: 2;
  padding: 0 var(--u-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

body .bp-keuze-card {
  background: var(--u-white);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  box-shadow: var(--u-shadow);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

body .bp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: var(--u-radius-sm);
  background: var(--u-accent-soft);
  color: var(--u-accent-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body .bp-keuze-eyebrow {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
}

body .bp-keuze-title {
  font-family: var(--u-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--u-ink);
  margin: 6px 0 10px;
}

body .bp-keuze-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--u-ink-soft);
}

body .bp-keuze-list {
  display: grid;
  gap: 9px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--u-ink-soft);
}

body .bp-keuze-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

body .bp-keuze-list svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--u-ok);
}

body .bp-keuze-cta {
  margin-top: auto;
  align-self: stretch;
}

/* Stappen */
body .bp-stappen {
  background: var(--u-surface);
  padding: 72px 0;
}

body .bp-stappen-inner,
body .bp-faq-inner,
body .bp-bottom-strip-inner,
body .bp-footer-inner,
body .bp-home-seo__inner,
body .bp-pu-seo__inner {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding-left: var(--u-gutter);
  padding-right: var(--u-gutter);
}

body .bp-stappen-header,
body .bp-faq-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 40px;
}

body .bp-stappen-eyebrow,
body .bp-faq-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-accent);
}

body .bp-stappen-h2,
body .bp-faq-h2 {
  font-family: var(--u-font);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--u-ink);
  margin: 10px 0 12px;
}

body .bp-stappen-lead,
body .bp-faq-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 0;
}

body .bp-stappen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

body .bp-stap {
  background: var(--u-white);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  padding: 28px;
  text-align: left;
  color: var(--u-ink);
}

body .bp-stap-cijfer {
  width: 34px;
  height: 34px;
  border-radius: var(--u-pill);
  background: var(--u-accent);
  color: var(--u-on-accent);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--u-font);
  font-size: 15px;
  font-weight: 800;
}

body .bp-stap-icon {
  margin: 18px 0 10px;
  color: var(--u-accent);
}

body .bp-stap-title {
  font-family: var(--u-font);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--u-ink);
  margin: 0 0 8px;
}

body .bp-stap-tekst {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 0;
}

/* USP-strook */
body .bp-bottom-strip {
  border-top: 1px solid var(--u-line);
  border-bottom: 1px solid var(--u-line);
  background: var(--u-white);
  padding: 26px 0;
}

body .bp-bottom-strip-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

body .bp-bottom-strip-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--u-ink);
}

body .bp-bottom-strip-title svg {
  color: var(--u-accent);
}

body .bp-bottom-strip-text {
  margin-top: 5px;
  font-size: 14px;
  color: var(--u-ink-soft);
}

/* FAQ */
body .bp-faq {
  padding: 72px 0;
}

body .bp-faq-grid {
  display: grid;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}

body .bp-faq-item {
  background: var(--u-white);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  padding: 4px 20px;
}

body .bp-faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--u-ink);
  cursor: pointer;
}

body .bp-faq-item summary svg {
  color: var(--u-accent);
  flex: none;
}

body .bp-faq-item p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--u-ink-soft);
  margin: 0 0 18px;
}

body .bp-faq-cta {
  text-align: center;
  margin-top: 28px;
  font-size: 15px;
  color: var(--u-ink-soft);
}

/* SEO-tekstblokken */
body .bp-home-seo,
body .bp-pu-seo {
  background: var(--u-surface);
  padding: 56px 0;
}

body .bp-home-seo__h2,
body .bp-pu-seo h2 {
  font-family: var(--u-font);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

body .bp-home-seo p,
body .bp-pu-seo p,
body .bp-home-seo li,
body .bp-pu-seo li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--u-ink-soft);
}

@media (max-width: 900px) {
  body .bp-hero {
    min-height: 460px;
  }

  body .bp-keuze-grid {
    margin-top: -32px;
  }
}

/* ============================================================
   Footer
   ============================================================ */
body .bp-site-footer {
  background: var(--u-ink);
  color: #C9D0DE;
  margin-top: 0;
}

body .bp-footer-locaties {
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 34px 0;
}

body .bp-footer-heading {
  font-family: var(--u-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 18px;
}

body .bp-footer-locaties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

body .bp-footer-locatie {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

body .bp-footer-locatie-icon {
  color: var(--u-accent);
  flex: none;
}

body .bp-footer-locatie-naam {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

body .bp-footer-locatie-meta {
  font-size: 13.5px;
  color: #98A2B7;
}

body .bp-footer-kolommen {
  padding: 48px 0 40px;
}

body .bp-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}

body .bp-footer-col-heading {
  font-family: var(--u-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}

body .bp-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

body .bp-footer-list a,
body .bp-footer-bedrijf a {
  color: #C9D0DE;
  font-size: 14.5px;
  text-decoration: none;
}

body .bp-footer-list a:hover,
body .bp-footer-bedrijf a:hover {
  color: #fff;
  text-decoration: underline;
}

body .bp-logo--footer .bp-logo-text {
  color: #fff;
}

body .bp-footer-tagline {
  font-size: 14.5px;
  line-height: 1.6;
  color: #98A2B7;
  max-width: 42ch;
}

body .bp-footer-bedrijf {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 32px 0;
  font-size: 14px;
  color: #98A2B7;
}

body .bp-footer-bedrijf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

body .bp-footer-bedrijf-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}

body .bp-footer-bedrijf strong {
  color: #E7EAF2;
}

body .bp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 0;
  font-size: 13px;
  color: #7E879B;
}

@media (max-width: 900px) {
  body .bp-footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* De oude bezorgbalk stond vast bovenaan; hij scrollt nu gewoon mee. */
body .bp-bezorgbalk,
body.admin-bar .bp-bezorgbalk {
  position: static;
  height: auto;
  z-index: auto;
  display: block;
}

body .bp-faq {
  background: var(--u-white);
  border-top: 1px solid var(--u-line);
  border-bottom: 1px solid var(--u-line);
}

body .bp-faq::before,
body .bp-faq::after {
  display: none;
}

body .bp-faq-item summary::-webkit-details-marker {
  display: none;
}

body .bp-faq-toggle {
  margin-left: auto;
  color: var(--u-ink-faint);
}

/* ============================================================
   Productpagina (premium used, nieuw en accessoires)
   ============================================================ */
body .bp-product-page,
body .bp-ua-product-page {
  background: var(--u-white);
}

body .bp-product-inner,
body .bp-ua-product-inner {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding: 26px var(--u-gutter) 72px;
}

body .bp-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

body .bp-product-foto {
  background: var(--u-surface);
  border: 0;
  border-radius: var(--u-radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  position: sticky;
  top: 96px;
}

body .bp-product-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body .bp-product-eyebrow,
body .bp-ua-product-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
}

body .bp-product-title,
body .bp-ua-product-title {
  font-family: var(--u-font);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--u-ink);
  margin: 8px 0 18px;
}

body .bp-product-title .bp-merk {
  display: block;
  font-family: var(--u-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
  margin-bottom: 4px;
}

body .bp-price-block {
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  padding: 20px 22px;
  background: var(--u-white);
  box-shadow: var(--u-shadow-sm);
}

body .bp-price-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-ink-faint);
}

body .bp-price-now {
  font-family: var(--u-font);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--u-ink);
  line-height: 1.1;
}

body .bp-price-now .amount {
  color: var(--u-ink);
}

body .bp-price-stock-status {
  font-size: 14px;
  color: var(--u-ink-soft);
  margin-top: 6px;
}

body .bp-price-extra {
  font-size: 12px;
  color: var(--u-ink-faint);
  margin-top: 8px;
}

/* Vertrouwensregels onder de prijs. */
.u-trust {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.u-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--u-ink-soft);
}

.u-trust svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--u-ok);
}

.u-product-cta {
  margin-top: 18px;
}

body .bp-product-shortdesc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--u-ink-soft);
  margin-top: 18px;
}

body .bp-product-specs,
body .bp-ua-product-usps {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

body .bp-spec-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--u-ink-soft);
}

body .bp-spec-item svg {
  color: var(--u-accent);
}

/* Configurator + losse blokken: witte kaarten met rand. */
body .bp-configurator,
body .bp-inbegrepen-blok,
body .bp-accu-blok,
body .bp-garantie-blok,
body .bp-specs-section,
body .bp-aanvraag-form {
  background: var(--u-white);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  box-shadow: none;
  padding: 28px;
  margin-top: 24px;
}

body .bp-config-title,
body .bp-specs-h2,
body .bp-inbegrepen-title,
body .bp-accu-title,
body .bp-garantie-title {
  font-family: var(--u-font);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--u-ink);
  margin: 0 0 6px;
}

body .bp-config-subtitle,
body .bp-inbegrepen-subtitle,
body .bp-accu-subtitle,
body .bp-garantie-subtitle {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 0 0 18px;
}

body .bp-config-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--u-ink);
  margin-bottom: 10px;
}

body .bp-config-label-hint {
  font-weight: 500;
  color: var(--u-ink-faint);
  font-size: 13.5px;
}

body .bp-config-option {
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-white);
  padding: 14px 16px;
}

body .bp-config-option:hover {
  border-color: var(--u-line-strong);
}

body .bp-config-option.is-selected,
body .bp-config-option:has(input:checked) {
  border-color: var(--u-accent);
  box-shadow: 0 0 0 1px var(--u-accent) inset;
  background: var(--u-accent-soft);
}

body .bp-staffel-prijs,
body .bp-acc-price {
  font-weight: 800;
  color: var(--u-ink);
}

body .bp-prijs-included {
  color: var(--u-ok);
  font-weight: 700;
}

/* Specificaties */
body .bp-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

body .bp-specs-group-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
  border-bottom: 1px solid var(--u-line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

body .bp-specs-item {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--u-line);
  font-size: 14px;
}

body .bp-specs-item > :first-child {
  color: var(--u-ink-faint);
}

body .bp-specs-item > :last-child {
  color: var(--u-ink);
  font-weight: 600;
}

body .bp-specs-description {
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--u-ink-soft);
}

/* Sticky totaalbalk onderaan: wit met accentknop (zoals de koopbalk). */
body .bp-totaal-bar {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--u-line);
  box-shadow: 0 -8px 30px rgba(16, 24, 40, .1);
  color: var(--u-ink);
}

body .bp-totaal-inner {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding: 14px var(--u-gutter);
  gap: 20px;
}

body .bp-totaal-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
}

body .bp-totaal-amount {
  font-family: var(--u-font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--u-ink);
}

body .bp-totaal-breakdown {
  font-size: 12.5px;
  color: var(--u-ink-faint);
}

body .bp-totaal-cta {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--u-on-accent);
  border-radius: var(--u-pill);
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 700;
}

body .bp-totaal-cta:hover {
  background: var(--u-accent-deep);
}

@media (max-width: 900px) {
  body .bp-product-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body .bp-product-foto {
    position: static;
  }
}

.u-price-compare {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 14px;
  color: var(--u-ink-faint);
}

/* ============================================================
   Inhoudspagina's (over ons, garantie, contact, reparatie,
   bedankpagina's) en het accessoire-overzicht
   ============================================================ */

/* Getalvelden in de zijbalk mogen niet breder worden dan hun kolom. */
.u-price-filter input {
  min-width: 0;
}

/* Knoppen in de losse paginanamespaces krijgen dezelfde vorm. */
body .bp-oo-btn,
body .bp-oo-btn-outline,
body .bp-ga-cta-btn,
body .bp-rep-btn,
body .bp-bedankt-btn,
body .bp-aanvraag-submit,
body .products .button,
body .bp-filter-prijs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--u-pill);
  font-family: var(--u-font);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 22px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
}

body .bp-oo-btn,
body .bp-ga-cta-btn,
body .bp-rep-btn--primary,
body .bp-bedankt-btn--primary,
body .bp-aanvraag-submit,
body .products .button {
  background: var(--u-accent);
  border-color: var(--u-accent);
  color: var(--u-on-accent);
}

body .bp-oo-btn:hover,
body .bp-ga-cta-btn:hover,
body .bp-rep-btn--primary:hover,
body .bp-bedankt-btn--primary:hover,
body .bp-aanvraag-submit:hover,
body .products .button:hover {
  background: var(--u-accent-deep);
  border-color: var(--u-accent-deep);
  color: var(--u-on-accent);
}

body .bp-oo-btn-outline,
body .bp-bedankt-btn--ghost {
  background: var(--u-white);
  border-color: var(--u-line-strong);
  color: var(--u-ink);
}

/* Formuliervelden overal gelijk. */
body .bp-rep-field input,
body .bp-rep-field select,
body .bp-rep-field textarea,
body .bp-form-row input,
body .bp-form-row select,
body .bp-form-row textarea,
body .bp-aanvraag-form input[type="text"],
body .bp-aanvraag-form input[type="email"],
body .bp-aanvraag-form input[type="tel"],
body .bp-aanvraag-form textarea,
body .bp-aanvraag-form select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-sm);
  background: var(--u-white);
  font-family: var(--u-font);
  font-size: 15px;
  color: var(--u-ink);
}

body .bp-rep-field input:focus,
body .bp-rep-field select:focus,
body .bp-rep-field textarea:focus,
body .bp-form-row input:focus,
body .bp-form-row select:focus,
body .bp-form-row textarea:focus,
body .bp-aanvraag-form input:focus,
body .bp-aanvraag-form textarea:focus,
body .bp-aanvraag-form select:focus {
  outline: 2px solid var(--u-accent);
  outline-offset: -1px;
  border-color: var(--u-accent);
}

body .bp-rep-label,
body .bp-form-row label {
  font-size: 14px;
  font-weight: 600;
  color: var(--u-ink);
}

/* Blokken/kaarten op de inhoudspagina's. */
body .bp-co-afhaal-kaart,
body .bp-co-bezoek-blok,
body .bp-ga-dekking-kolom,
body .bp-ga-kaart,
body .bp-oo-cijfers-grid > *,
body .bp-bedankt-stap,
body .bp-rep-bosch,
body .bp-rep-fallback {
  border-radius: var(--u-radius-lg);
  border: 1px solid var(--u-line);
  background: var(--u-white);
  box-shadow: none;
}

/* Accessoires: hetzelfde kaartraster als de fietsen. */
body .bp-overzicht-page {
  padding: 28px 0 64px;
}

body .bp-overzicht-inner {
  max-width: var(--u-maxw);
  margin: 0 auto;
  padding: 0 var(--u-gutter);
}

body ul.products {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 18px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

body ul.products li.product {
  margin: 0;
  width: auto;
  float: none;
  position: relative;
}

body ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

body ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--u-surface);
  border-radius: var(--u-radius);
  padding: 14px;
  mix-blend-mode: multiply;
  margin-bottom: 12px;
}

body ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--u-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--u-ink);
  margin: 0 0 6px;
  padding: 0;
}

body ul.products li.product .price {
  font-size: 18px;
  font-weight: 800;
  color: var(--u-ink);
  display: block;
  margin-bottom: 12px;
}

body ul.products li.product .price del {
  font-size: 14px;
  font-weight: 500;
  color: var(--u-ink-faint);
  margin-right: 6px;
}

body ul.products li.product .price ins {
  text-decoration: none;
}

body ul.products li.product .onsale {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--u-radius-sm);
  background: var(--u-sale-soft);
  color: var(--u-sale);
  font-size: 12px;
  font-weight: 700;
}

body ul.products li.product .button {
  width: 100%;
}

@media (max-width: 1100px) {
  body ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  body ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   Koppen: overal hetzelfde schreefloze lettertype (het oude
   thema zette Playfair Display op losse koptitels).
   ------------------------------------------------------------ */
body h1,
body h2,
body h3,
body h4,
body h5,
body .bp-hero-h1-accent,
body .bp-merk,
body .bp-price-now,
body .bp-totaal-amount,
body .bp-ua-product-price-amount,
body .u-price {
  font-family: var(--u-font) !important;
  font-style: normal !important;
}

/* ------------------------------------------------------------
   WooCommerce-raster van de accessoires wint het van de
   meegeïmporteerde WordPress-CSS (.woocommerce ul.products …).
   ------------------------------------------------------------ */
body.woocommerce ul.products,
body.woocommerce-page ul.products,
body ul.products {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body.woocommerce-page[class*="columns-"] ul.products li.product,
body.woocommerce[class*="columns-"] ul.products li.product,
body ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  clear: none;
  position: relative;
}

body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button,
body ul.products li.product .button {
  display: inline-flex;
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
}

@media (max-width: 1100px) {
  body.woocommerce ul.products,
  body.woocommerce-page ul.products,
  body ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  body.woocommerce ul.products,
  body.woocommerce-page ul.products,
  body ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  body.woocommerce ul.products,
  body.woocommerce-page ul.products,
  body ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Op een klein scherm zet WooCommerce elke tegel op 48% breed en laat hem zweven; in het raster
   moet een tegel juist zijn hele cel vullen. */
body.woocommerce ul.products[class*="columns-"] li.product,
body.woocommerce-page ul.products[class*="columns-"] li.product,
body ul.products[class*="columns-"] li.product,
body ul.products[class*="columns-"] li.product:nth-child(2n) {
  width: auto;
  float: none;
  clear: none !important;
  margin: 0;
}

@media (max-width: 520px) {
  body.woocommerce ul.products,
  body.woocommerce-page ul.products,
  body ul.products {
    gap: 20px 14px;
  }

  body ul.products li.product .onsale {
    left: 8px;
    top: 8px;
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* Accessoires: compacte tegels, zodat de foto's het scherm niet vullen. */
body ul.products li.product img {
  aspect-ratio: 4 / 3;
  padding: 10px;
  margin-bottom: 10px;
}

body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body ul.products li.product :is(h2, h3).woocommerce-loop-product__title {
  font-size: 14.5px;
  line-height: 1.35;
}

/* Het label "Aanbieding" blijft binnen de tegel (WooCommerce hing het rechts buiten de foto). */
body.woocommerce ul.products li.product .onsale,
body ul.products li.product .onsale {
  left: 8px;
  right: auto;
  top: 8px;
  margin: 0;
  min-width: 0;
  min-height: 0;
  line-height: 1.3;
}

body ul.products li.product .price {
  font-size: 16px;
  margin-bottom: 10px;
}

body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button,
body ul.products li.product .button {
  padding: 10px 12px;
  font-size: 13px;
}

/* Tegels in één rij zijn even hoog: prijs en knop staan onderaan, ook als een naam over
   meer regels loopt dan die van de tegel ernaast. */
body.woocommerce ul.products li.product,
body.woocommerce-page ul.products li.product,
body ul.products li.product {
  display: flex;
  flex-direction: column;
}

body.woocommerce ul.products li.product a.woocommerce-loop-product__link,
body ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

body.woocommerce ul.products li.product .price,
body ul.products li.product .price {
  margin-top: auto;
}

body.woocommerce ul.products li.product .button,
body.woocommerce-page ul.products li.product .button,
body ul.products li.product .button {
  margin-top: 0;
  justify-content: center;
  text-align: center;
}

/* Accessoirepagina: zelfde opbouw als een fietspagina, maar met een bescheiden foto
   (een accessoire is kleiner dan een fiets) en rustige tekstgroottes. */
.u-product--accessoire .u-product__grid {
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
}

.u-product--accessoire .u-product__media {
  position: static;
}

body .u-product--accessoire .u-product__title {
  font-size: clamp(24px, 2.6vw, 32px);
}

.u-product--accessoire .u-buy {
  max-width: 520px;
}

.u-product--accessoire .u-buy__price {
  font-size: 28px;
}

.u-product--accessoire .u-buy__note {
  margin: 12px 0 0;
}

/* Klikbare modellen als kleine labels, zodat de koopknop de hoofdknop blijft. */
.u-fits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.u-fits__model {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-pill);
  background: var(--u-white);
  color: var(--u-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.u-fits__model:hover {
  border-color: var(--u-ink);
  color: var(--u-ink);
}

.u-fits__model svg {
  color: var(--u-ink-faint);
}

.u-buy__label {
  margin: 16px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--u-ink);
}

.u-product--accessoire .u-buy .u-btn + .u-btn {
  margin-top: 8px;
}

.u-product--accessoire .u-product__desc {
  max-width: 520px;
  font-size: 15px;
}

.u-product__meta {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--u-ink-faint);
}

/* Lange tekst: leesbare regellengte in plaats van de volle breedte. */
body .u-product__text .bp-specs-description {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.7;
}

/* Lopende tekst met tussenkopjes en opsommingen (DescriptionText). */
body .u-prose > :first-child {
  margin-top: 0;
}

body .u-prose > :last-child {
  margin-bottom: 0;
}

body .u-prose :is(h2, h3, h4) {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.35;
  color: var(--u-ink);
  text-transform: none;
  border: 0;
  padding: 0;
  margin: 26px 0 8px;
}

body .u-prose p {
  margin: 0 0 12px;
  color: var(--u-ink-soft);
}

body .u-prose ul {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

body .u-prose li {
  position: relative;
  padding-left: 28px;
  color: var(--u-ink);
  line-height: 1.5;
}

body .u-prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--u-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

body .u-featured--accessoires {
  margin-top: 32px;
  padding-top: 32px;
}

body .u-featured--accessoires .u-featured__head h2 {
  font-size: 22px;
}

@media (max-width: 860px) {
  .u-product--accessoire .u-product__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .u-product--accessoire .u-product__media {
    max-width: 420px;
  }
}

/* Eén lettertype voor de hele site; het oude thema zette Playfair Display
   op losse blokken (contact, garantie, over ons). */
body * {
  font-family: var(--u-font) !important;
}

/* De clearfix-pseudo-elementen van WooCommerce worden in een grid
   zelf rastercellen en duwen de eerste kaart weg. */
body ul.products::before,
body ul.products::after,
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after {
  content: none;
  display: none;
}

/* ------------------------------------------------------------
   Uitgelichte fietsen op de homepage
   ------------------------------------------------------------ */
.u-featured {
  padding: 72px 0 8px;
}

.u-featured__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.u-featured__head h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 8px 0 8px;
}

.u-featured__head p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 0;
  max-width: 62ch;
}

@media (max-width: 760px) {
  .u-featured__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   Modelpagina van de nieuwe fietsen (/nieuw/{merk}/{model})
   ============================================================ */
.u-product {
  padding: 26px 0 8px;
}

.u-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.u-product__media {
  position: sticky;
  top: 96px;
}

.u-product__photo,
.u-gallery__stage {
  background: var(--u-surface);
  border-radius: var(--u-radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.u-product__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Galerij zonder JavaScript: het aangevinkte keuzerondje bepaalt welke foto zichtbaar is. */
.u-gallery__state {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.u-gallery__img {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .2s ease;
}

.u-gallery__state:nth-of-type(1):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(1),
.u-gallery__state:nth-of-type(2):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(2),
.u-gallery__state:nth-of-type(3):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(3),
.u-gallery__state:nth-of-type(4):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(4),
.u-gallery__state:nth-of-type(5):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(5),
.u-gallery__state:nth-of-type(6):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(6),
.u-gallery__state:nth-of-type(7):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(7),
.u-gallery__state:nth-of-type(8):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(8),
.u-gallery__state:nth-of-type(9):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(9),
.u-gallery__state:nth-of-type(10):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(10),
.u-gallery__state:nth-of-type(11):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(11),
.u-gallery__state:nth-of-type(12):checked ~ .u-gallery__stage .u-gallery__img:nth-of-type(12) {
  opacity: 1;
}

/* Pijlen en teller: elke foto heeft een eigen setje, alleen dat van de zichtbare foto staat aan. */
.u-gallery__nav {
  display: none;
}

.u-gallery__state:nth-of-type(1):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(1),
.u-gallery__state:nth-of-type(2):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(2),
.u-gallery__state:nth-of-type(3):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(3),
.u-gallery__state:nth-of-type(4):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(4),
.u-gallery__state:nth-of-type(5):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(5),
.u-gallery__state:nth-of-type(6):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(6),
.u-gallery__state:nth-of-type(7):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(7),
.u-gallery__state:nth-of-type(8):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(8),
.u-gallery__state:nth-of-type(9):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(9),
.u-gallery__state:nth-of-type(10):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(10),
.u-gallery__state:nth-of-type(11):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(11),
.u-gallery__state:nth-of-type(12):checked ~ .u-gallery__stage .u-gallery__nav:nth-of-type(12) {
  display: block;
}

.u-gallery__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: var(--u-white);
  color: var(--u-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
}

.u-gallery__arrow:hover {
  transform: scale(1.08);
}

.u-gallery__arrow--prev {
  left: 12px;
}

.u-gallery__arrow--next {
  right: 12px;
}

.u-gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--u-white);
  color: var(--u-ink-soft);
  font-size: 12px;
  font-weight: 600;
}

.u-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.u-gallery__thumb {
  width: 76px;
  height: 66px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-sm);
  background: var(--u-surface);
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-gallery__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.u-gallery__state:nth-of-type(1):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(1),
.u-gallery__state:nth-of-type(2):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(2),
.u-gallery__state:nth-of-type(3):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(3),
.u-gallery__state:nth-of-type(4):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(4),
.u-gallery__state:nth-of-type(5):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(5),
.u-gallery__state:nth-of-type(6):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(6),
.u-gallery__state:nth-of-type(7):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(7),
.u-gallery__state:nth-of-type(8):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(8),
.u-gallery__state:nth-of-type(9):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(9),
.u-gallery__state:nth-of-type(10):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(10),
.u-gallery__state:nth-of-type(11):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(11),
.u-gallery__state:nth-of-type(12):checked ~ .u-gallery__thumbs .u-gallery__thumb:nth-child(12) {
  border-color: var(--u-accent);
  box-shadow: 0 0 0 1px var(--u-accent) inset;
}

.u-gallery__state:focus-visible ~ .u-gallery__thumbs .u-gallery__thumb {
  outline: 2px solid var(--u-accent);
  outline-offset: 2px;
}

/* Op de accessoirepagina staat de galerij in WooCommerce' div.images, dat elke foto op
   height:auto en een witte achtergrond zet; de galerij regelt zijn eigen maten. */
body div.product div.images .u-gallery img {
  background: none;
  border-radius: 0;
}

body div.product div.images .u-gallery__img {
  height: calc(100% - 48px);
}

.u-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--u-ink-soft);
}

.u-swatches__label {
  margin-right: 2px;
}

.u-swatch {
  width: 20px;
  height: 20px;
  border-radius: var(--u-pill);
  border: 1px solid var(--u-line-strong);
  display: inline-block;
}

.u-product__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
}

.u-product__title {
  font-size: clamp(30px, 3.8vw, 42px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  margin: 8px 0 6px;
}

.u-product__tagline {
  font-size: 17px;
  color: var(--u-ink-soft);
  margin: 0 0 20px;
}

/* Koopblok rechts */
/* Feitenlijst van één voorraadfiets (pagina /fiets/…): wat dit exemplaar onderscheidt. */
.u-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-line);
  overflow: hidden;
}

.u-facts__item {
  padding: 11px 14px;
  background: var(--u-white);
}

.u-facts__item:last-child:nth-child(odd) {
  grid-column: span 2;
}

.u-facts dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--u-ink-faint);
}

.u-facts dd {
  margin: 2px 0 0;
  font-weight: 700;
  color: var(--u-ink);
}

.u-buy {
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  box-shadow: var(--u-shadow-sm);
  padding: 22px;
  background: var(--u-white);
}

.u-buy__from {
  font-size: 13px;
  font-weight: 600;
  color: var(--u-ink-faint);
}

.u-buy__price {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--u-ink);
}

.u-buy__note {
  font-size: 13.5px;
  color: var(--u-ink-faint);
  margin-top: 6px;
}

.u-buy .u-btn {
  margin-top: 16px;
}

.u-buy .u-trust {
  border-top: 1px solid var(--u-line);
  padding-top: 16px;
  margin-top: 18px;
}

.u-buy .u-trust a {
  color: inherit;
  text-decoration: underline;
}

.u-product__desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--u-ink-soft);
  margin-top: 22px;
}

.u-usps {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.u-usps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  color: var(--u-ink-soft);
}

.u-usps svg {
  flex: none;
  margin-top: 2px;
  color: var(--u-accent);
}

.u-usps strong {
  color: var(--u-ink);
}

/* Offerteblok onderaan */
.u-quote {
  background: var(--u-surface);
  border-top: 1px solid var(--u-line);
  margin-top: 56px;
  padding: 56px 0 64px;
}

.u-quote__head {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.u-quote__head h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  margin: 0 0 10px;
}

.u-quote__head p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 0;
}

body .u-quote .bp-rep-form {
  max-width: 860px;
  margin: 0 auto;
  background: var(--u-white);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  padding: 28px;
}

body .u-quote .bp-rep-group + .bp-rep-group {
  border-top: 1px solid var(--u-line);
  margin-top: 26px;
  padding-top: 26px;
}

body .u-quote .bp-rep-group h3 {
  text-transform: none;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

body .u-quote .step-num {
  width: 28px;
  height: 28px;
  border-radius: var(--u-pill);
  background: var(--u-accent);
  color: var(--u-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

body .u-quote .bp-rep-field {
  margin-bottom: 16px;
}

body .u-quote .bp-rep-row,
body .u-quote .bp-rep-row-3 {
  display: grid;
  gap: 16px;
}

body .u-quote .bp-rep-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body .u-quote .bp-rep-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body .u-quote .bp-rep-radios {
  display: grid;
  gap: 8px;
}

/* Keuzevakken: het (verborgen) keuzerondje hoort bij het label, dat zelf de kaart is. */
body .u-quote .bp-rep-radio,
body .u-quote .bp-rep-check {
  position: relative;
  flex: none;
  min-width: 0;
}

/* Het keuzevak zelf is het label; het rondje of vinkje van de browser blijft buiten beeld. */
body .u-quote .bp-rep-radio input,
body .u-quote .bp-rep-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

body .u-quote .bp-rep-radio label,
body .u-quote .bp-rep-check label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-sm);
  background: var(--u-white);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  color: var(--u-ink);
  cursor: pointer;
}

body .u-quote .bp-rep-radio label:hover,
body .u-quote .bp-rep-check label:hover {
  border-color: var(--u-line-strong);
}

body .u-quote .bp-rep-radio input:checked + label,
body .u-quote .bp-rep-check input:checked + label {
  background: var(--u-accent-soft);
  border-color: var(--u-accent);
  color: var(--u-ink);
  box-shadow: 0 0 0 1px var(--u-accent) inset;
}

body .u-quote .bp-rep-check label::before {
  border-color: var(--u-line-strong);
}

body .u-quote .bp-rep-check input:checked + label::before {
  background-color: var(--u-accent);
  border-color: var(--u-accent);
}

body .u-quote .bp-rep-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

/* Accessoires bij een fiets: onder elkaar, net als de accu's. */
body .u-quote .bp-rep-checkbox-grid--list {
  grid-template-columns: minmax(0, 1fr);
}

/* Nieuwe fiets (Bikeshop): breed formulier, op een groot scherm de configuratie naast de gegevens. */
body .u-quote .bp-rep-form--wide {
  max-width: 1180px;
}

@media (min-width: 1000px) {
  body .u-quote .bp-rep-form--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }

  body .u-quote .bp-rep-form--wide .bp-rep-group {
    margin: 0;
  }

  body .u-quote .bp-rep-form--wide > :not(.bp-rep-group) {
    grid-column: 1 / -1;
  }
}

.u-included {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.u-included li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--u-radius-sm);
  background: var(--u-ok-soft);
  color: var(--u-ink);
  font-size: 14.5px;
  font-weight: 500;
}

.u-included svg {
  color: var(--u-ok);
  flex: none;
}

.u-included__price {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 700;
}

.u-included__price s {
  font-weight: 400;
  color: var(--u-ink-soft);
  margin-right: 6px;
}

.u-pill--tip {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--u-pill);
  background: var(--u-accent-soft);
  color: var(--u-accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

body .u-quote .bp-rep-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--u-ink-soft);
  margin-top: 18px;
}

body .u-quote .bp-rep-submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

body .u-quote .bp-rep-side-note {
  font-size: 13.5px;
  color: var(--u-ink-faint);
}

body .u-quote .bp-rep-response {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--u-radius-sm);
  font-size: 14.5px;
}

body .u-quote .bp-rep-response.show {
  display: block;
  background: var(--u-surface);
  color: var(--u-ink);
}

body .u-quote .bp-rep-response.success {
  background: var(--u-ok-soft);
  color: var(--u-ok);
}

body .u-quote .bp-rep-response.error {
  background: var(--u-sale-soft);
  color: var(--u-sale);
}

body .u-quote .req {
  color: var(--u-sale);
  margin-left: 2px;
}

body .u-quote .opt {
  font-weight: 500;
  color: var(--u-ink-faint);
  margin-left: 4px;
}

@media (max-width: 900px) {
  .u-product__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .u-product__media {
    position: static;
  }

  body .u-quote .bp-rep-row,
  body .u-quote .bp-rep-row-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------
   Footer: het Bikeshop-thema geeft de blokken eigen lichte
   achtergronden en tekstkleuren; op de donkere footer moeten
   die uit.
   ------------------------------------------------------------ */
body .bp-site-footer .bp-footer-kolommen,
body .bp-site-footer .bp-footer-bedrijf,
body .bp-site-footer .bp-footer-bottom {
  background: transparent;
  border-top-color: rgba(255, 255, 255, .08);
}

body .bp-site-footer .bp-footer-locaties {
  background: rgba(255, 255, 255, .04);
  border-bottom-color: rgba(255, 255, 255, .08);
}

body .bp-site-footer .bp-footer-heading,
body .bp-site-footer .bp-footer-col-heading,
body .bp-site-footer .bp-footer-bedrijf-label,
body .bp-site-footer .bp-footer-locatie-naam {
  color: #fff;
}

body .bp-site-footer .bp-footer-col-heading::after {
  display: none;
}

body .bp-site-footer .bp-footer-list a,
body .bp-site-footer .bp-footer-bedrijf-blok a {
  color: #C9D0DE;
}

body .bp-site-footer .bp-footer-list a:hover,
body .bp-site-footer .bp-footer-bedrijf-blok a:hover {
  color: #fff;
}

body .bp-site-footer .bp-footer-tagline,
body .bp-site-footer .bp-footer-locatie-meta,
body .bp-site-footer .bp-footer-bedrijf-blok p,
body .bp-site-footer .bp-footer-bottom p {
  color: #98A2B7;
}

body .bp-site-footer .bp-footer-bedrijf-blok p strong {
  color: #E7EAF2;
}

/* Het Bikeshop-thema zet zijn footerkleuren met !important ("footer v4"); die
   moeten hier hard overschreven worden, anders wordt de donkere footer licht. */
body .bp-site-footer .bp-footer-kolommen,
body .bp-site-footer .bp-footer-bedrijf {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  border-bottom: 0 !important;
}

body .bp-site-footer .bp-footer-kolommen {
  border-top: 0 !important;
}

body .bp-site-footer .bp-footer-locaties {
  background: rgba(255, 255, 255, .04) !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}

body .bp-site-footer .bp-footer-heading,
body .bp-site-footer .bp-footer-col-heading,
body .bp-site-footer .bp-footer-locatie-naam {
  color: #fff !important;
  font-size: 13px !important;
  padding-bottom: 0 !important;
}

body .bp-site-footer .bp-footer-heading,
body .bp-site-footer .bp-footer-locatie-naam {
  font-size: 15px !important;
}

body .bp-site-footer .bp-footer-heading::after,
body .bp-site-footer .bp-footer-col-heading::after {
  display: none !important;
  content: none !important;
}

body .bp-site-footer .bp-footer-locatie-icon {
  background: transparent !important;
  color: var(--u-accent) !important;
  padding: 0 !important;
  width: 18px !important;
  height: 18px !important;
  box-shadow: none !important;
}

body .bp-site-footer .bp-footer-locatie-meta,
body .bp-site-footer .bp-footer-tagline,
body .bp-site-footer .bp-footer-bedrijf-blok p {
  color: #98A2B7 !important;
}

body .bp-site-footer .bp-footer-bedrijf-label {
  color: #fff !important;
}

body .bp-site-footer .bp-footer-bedrijf-blok strong,
body .bp-site-footer .bp-footer-tagline strong {
  color: #E7EAF2 !important;
}

/* Het accent van het logo is op de donkere footer wit (het siteaccent van
   Bikeshop is donkerblauw en zou wegvallen). */
body .bp-site-footer .bp-logo--footer .bp-logo-text,
body .bp-site-footer .bp-logo--footer .bp-logo-place,
body .bp-site-footer .bp-logo--footer .bp-logo-dot {
  color: #fff !important;
}

body .bp-site-footer .bp-footer-list a:hover {
  color: #fff !important;
  padding-left: 0 !important;
}

/* ------------------------------------------------------------
   Stappenkaarten: het oude thema gaf kaart 1, 2 en 3 elk een
   eigen kleur (de derde donkerblauw met witte tekst). Op de
   nieuwe witte kaarten viel die tekst weg, dus alle drie de
   varianten krijgen hier dezelfde kleuren.
   ------------------------------------------------------------ */
body .bp-stap,
body .bp-stap--blauw,
body .bp-stap--zand,
body .bp-stap--donker {
  background: var(--u-white);
  color: var(--u-ink);
}

body .bp-stap .bp-stap-title {
  color: var(--u-ink);
}

body .bp-stap .bp-stap-tekst {
  color: var(--u-ink-soft);
}

body .bp-stap .bp-stap-icon,
body .bp-stap .bp-stap-icon svg {
  color: var(--u-accent);
}

body .bp-stap .bp-stap-cijfer {
  background: var(--u-accent);
  color: #fff;
  border: 0;
}

/* Lopende tekst blijft leesbaar: de SEO-blokken zijn smaller dan de pagina. */
body .bp-home-seo__inner,
body .bp-pu-seo__inner {
  max-width: 880px;
}

/* ------------------------------------------------------------
   Donkere blokken (hero's en de afsluitende CTA-banen op Over
   ons en Garantie): daar hoort witte tekst. De algemene
   kopkleur hierboven maakte koppen zonder eigen klasse zwart.
   ------------------------------------------------------------ */
body .bp-hero,
body .bp-oo-hero,
body .bp-oo-cta,
body .bp-ga-hero,
body .bp-ga-cta {
  color: #fff;
}

body .bp-hero :is(h1, h2, h3, h4, p, li),
body .bp-oo-hero :is(h1, h2, h3, h4, p, li),
body .bp-oo-cta :is(h1, h2, h3, h4, p, li),
body .bp-ga-hero :is(h1, h2, h3, h4, p, li),
body .bp-ga-cta :is(h1, h2, h3, h4, p, li) {
  color: #fff;
}

/* Knoppen met alleen een rand staan daar op een donkere achtergrond. */
body .bp-oo-cta .bp-oo-btn-outline,
body .bp-oo-cta .bp-btn--outline,
body .bp-ga-cta .bp-btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

body .bp-oo-cta .bp-oo-btn-outline:hover,
body .bp-oo-cta .bp-btn--outline:hover,
body .bp-ga-cta .bp-btn--outline:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}


/* ============================================================
   AANVRAAGFORMULIER + MODAL
   De offerte-/reserveringsmodal op de premium-used-productpagina.
   De oude opmaak kwam deels uit wp-inline.css (1fr 2fr-rijen) en
   de vinkjes/keuzerondjes werden geraakt door de generieke
   `.bp-form-row input { width: 100% }` hierboven, waardoor ze
   over de halve regel werden uitgerekt. Alles staat hier in één
   raster van twaalf kolommen.
   ============================================================ */

/* Vinkjes en keuzerondjes zijn géén tekstvelden. */
body .bp-rep-field input[type="checkbox"],
body .bp-rep-field input[type="radio"],
body .bp-form-row input[type="checkbox"],
body .bp-form-row input[type="radio"],
body .u-form input[type="checkbox"],
body .u-form input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--u-accent);
  cursor: pointer;
}

/* ---------- Modal ---------- */
body .bp-modal {
  z-index: 10000; /* de site-header staat op 9999 */
  padding: 24px 16px;
}

body .bp-modal-backdrop {
  background: rgba(16, 19, 26, .55);
}

body .bp-modal-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-width: 600px;
  max-height: min(820px, calc(100vh - 48px));
  border-radius: var(--u-radius-lg);
  box-shadow: var(--u-shadow-lg);
}

body .u-modal__head {
  position: relative;
  flex: 0 0 auto;
  padding: 26px 30px 20px;
  border-bottom: 1px solid var(--u-line);
  background: var(--u-white);
}

body .u-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 30px 30px;
  background: var(--u-white);
}

body .bp-modal-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--u-ink);
  margin: 0;
  padding-right: 40px;
}

body .bp-modal-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--u-ink-soft);
  margin: 6px 0 0;
  padding-right: 40px;
}

body .bp-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--u-line);
  border-radius: var(--u-pill);
  background: var(--u-white);
  color: var(--u-ink-soft);
}

body .bp-modal-close:hover {
  background: var(--u-surface);
  color: var(--u-ink);
}

/* Samenvatting van de configuratie boven het formulier. */
body .bp-aanvraag-summary {
  background: var(--u-surface);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-sm);
  padding: 16px 18px;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--u-ink);
}

body .bp-aanvraag-summary p {
  margin: 0;
  color: var(--u-ink-soft);
}

/* Knop onder de configuratie die het aanvraagvenster opent. */
body .bp-aanvraag-open {
  margin-top: 24px;
  text-align: center;
}

body .bp-aanvraag-open p,
body .u-form__bewaard {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--u-ink-faint);
}

body .u-form__bewaard {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}

body .u-form__bewaard svg {
  color: var(--u-ok);
}

body.bp-modal-open {
  overflow: hidden;
}

/* Het formulier van een voorraadfiets of nieuwe fiets in het venster: het venster is zelf de kaart. */
body .u-modal__body.u-quote--venster {
  margin: 0;
  border: 0;
  background: var(--u-white);
}

body .u-quote--venster .bp-rep-form {
  max-width: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Nieuwe fiets: keuzes en gegevens naast elkaar, dus een breder venster. */
body .bp-aanvraag-modal--breed .bp-modal-content {
  max-width: 1080px;
}

body .bp-aanvraag-summary:empty {
  display: none;
}

body .bp-aanvraag-summary h3 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
  margin: 0 0 8px;
}

/* ---------- Formulier ---------- */
/* Het aanvraagblok onder de configuratie is zelf de kaart; het formulier erin niet nog eens. */
body .bp-aanvraag-blok .bp-aanvraag-form,
body .bp-modal .bp-aanvraag-form {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: block;
}

body .u-form [hidden] {
  display: none !important;
}

body .u-form__hp {
  position: absolute;
  left: -9999px;
}

body .u-form__section {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body .u-form__section + .u-form__section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--u-line);
}

body .u-form__legend {
  float: left; /* zodat de legend de volle breedte pakt binnen een fieldset */
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--u-ink-faint);
}

body .u-form__legend + * {
  clear: both;
}

/* Twaalfkolomsraster: elk veld kiest zijn eigen breedte. */
body .u-form__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px 12px;
}

body .u-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-column: span 12;
  min-width: 0;
}

body .u-field--half   { grid-column: span 6; }
body .u-field--street { grid-column: span 6; }
body .u-field--nr     { grid-column: span 3; }
body .u-field--zip    { grid-column: span 4; }
body .u-field--city   { grid-column: span 8; }

body .u-field > label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--u-ink);
}

body .u-req {
  margin-left: 3px;
  color: var(--u-sale);
  font-weight: 700;
}

body .u-form input[type="text"],
body .u-form input[type="email"],
body .u-form input[type="tel"],
body .u-form select,
body .u-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-sm);
  background: var(--u-white);
  font-family: var(--u-font);
  font-size: 15px;
  line-height: 1.4;
  color: var(--u-ink);
}

body .u-form input::placeholder,
body .u-form textarea::placeholder {
  color: var(--u-ink-faint);
}

body .u-form textarea {
  resize: vertical;
  min-height: 92px;
}

/* Eigen pijltje, zodat de twee keuzelijsten even hoog zijn als de invoervelden. */
body .u-form select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23565F73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

body .u-form input:focus,
body .u-form select:focus,
body .u-form textarea:focus {
  outline: 2px solid var(--u-accent);
  outline-offset: -1px;
  border-color: var(--u-accent);
}

body .u-form input:invalid:not(:placeholder-shown) {
  border-color: var(--u-sale);
}

/* ---------- Keuzekaarten (offerte of reservering) ---------- */
body .u-choice-group {
  display: grid;
  gap: 10px;
}

body .u-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-sm);
  background: var(--u-white);
  cursor: pointer;
}

body .u-choice:hover {
  border-color: var(--u-accent);
}

body .u-choice:has(input:checked) {
  border-color: var(--u-accent);
  background: var(--u-accent-soft);
  box-shadow: inset 0 0 0 1px var(--u-accent);
}

body .u-choice input {
  margin-top: 2px !important;
}

body .u-choice__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body .u-choice strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--u-ink);
}

body .u-choice small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--u-ink-soft);
}

/* ---------- Toelichting, akkoord en verzendknop ---------- */
body .u-form__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--u-radius-sm);
  background: var(--u-accent-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--u-accent-deep);
}

body .u-form__note svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

body .u-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--u-ink-soft);
  cursor: pointer;
}

body .u-consent input {
  margin-top: 2px !important;
}

body .u-consent a {
  color: var(--u-accent);
  text-decoration: underline;
}

body .u-form__actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--u-line);
}

body .bp-aanvraag-submit {
  width: 100%;
}

body .u-form__req-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--u-ink-faint);
  text-align: center;
}

body .bp-aanvraag-message {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--u-radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  body .bp-modal {
    padding: 0;
  }

  body .bp-modal-content {
    max-width: none;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  body .u-modal__head {
    padding: 20px 20px 16px;
  }

  body .u-modal__body {
    padding: 18px 20px 28px;
  }

  body .bp-modal-title {
    font-size: 19px;
  }

  body .u-field--half,
  body .u-field--street {
    grid-column: span 12;
  }

  body .u-field--nr  { grid-column: span 6; }
  body .u-field--zip { grid-column: span 5; }
  body .u-field--city { grid-column: span 7; }
}

/* ------------------------------------------------------------------
   Reparatie aanvragen (Bikeshop): meer contrast. Donkere kop met de
   USP's eronder, grijze achtergrond achter het formulier zodat de
   witte kaarten en velden duidelijk loskomen.
   ------------------------------------------------------------------ */
/* Op heel Bikeshop, niet alleen de reparatiepagina: de keuzevakken van het offerteformulier op de
   modelpagina gebruiken dezelfde regels, en zonder deze kleur werd een gekozen optie wit op wit. */
body.site-bikeshop {
  --rep-navy: var(--u-accent-deep);
  --rep-navy-2: #164B6E;
  --rep-sky: #7CC4EC;
}

/* Het oude thema geeft .site-main en de blokken erin 20px marge: hier lopen de vlakken door tot de rand. */
body.site-bikeshop.bp-reparatie-aanvragen .site-main {
  margin-right: 0;
}

body.site-bikeshop.bp-reparatie-aanvragen .site-main > * {
  margin-bottom: 0;
}

body.site-bikeshop .bp-rep-hero {
  background: radial-gradient(120% 140% at 85% 0%, var(--rep-navy-2) 0%, var(--rep-navy) 60%);
  border-bottom: 0;
  padding: 72px 24px 64px;
}

body.site-bikeshop .bp-rep-eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}

body.site-bikeshop .bp-rep-eyebrow svg,
body.site-bikeshop .bp-rep-h1 .accent {
  color: var(--rep-sky);
}

body.site-bikeshop .bp-rep-h1 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -.02em;
}

body.site-bikeshop .bp-rep-lead {
  color: rgba(255, 255, 255, .82);
}

body.site-bikeshop .bp-rep-usps {
  background: #0B2A3E;
  border-bottom: 0;
}

body.site-bikeshop .bp-rep-usp {
  border-right-color: rgba(255, 255, 255, .12);
}

body.site-bikeshop .bp-rep-usp-icoon {
  background: rgba(124, 196, 236, .16);
  color: var(--rep-sky);
}

body.site-bikeshop .bp-rep-usp-tekst strong {
  color: #fff;
}

body.site-bikeshop .bp-rep-usp-tekst span {
  color: rgba(255, 255, 255, .7);
}

body.site-bikeshop .bp-rep-notice {
  background: #FFF1C2;
  border-color: #E9B949;
}

body.site-bikeshop .bp-rep-notice-inner strong {
  color: #7A4A00;
}

body.site-bikeshop .bp-rep-notice-inner span {
  color: #5C3A00;
}

body.site-bikeshop .bp-rep-form-section {
  background: var(--u-surface-2);
}

body.site-bikeshop .bp-rep-form-intro h2 {
  color: var(--u-ink);
  font-weight: 800;
}

body.site-bikeshop .bp-rep-form-intro p,
body.site-bikeshop .bp-rep-group .group-sub,
body.site-bikeshop .bp-rep-side-note,
body.site-bikeshop .bp-rep-privacy {
  color: var(--u-ink-soft);
}

body.site-bikeshop .bp-rep-group {
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-lg);
  box-shadow: var(--u-shadow);
  padding: 28px 30px;
}

body.site-bikeshop .bp-rep-group h3 {
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--u-ink);
  gap: 12px;
  margin-bottom: 8px;
}

body.site-bikeshop .bp-rep-group h3 .step-num {
  width: 32px;
  height: 32px;
  font-size: 14px;
  background: var(--rep-navy);
}

body.site-bikeshop .bp-rep-radio label,
body.site-bikeshop .bp-rep-check label {
  border-color: var(--u-line-strong);
  background: var(--u-white);
  color: var(--u-ink);
}

body.site-bikeshop .bp-rep-radio label:hover,
body.site-bikeshop .bp-rep-check label:hover {
  border-color: var(--rep-navy);
}

body.site-bikeshop .bp-rep-radio input:checked + label {
  background: var(--rep-navy);
  border-color: var(--rep-navy);
  color: #fff;
}

body.site-bikeshop .bp-rep-check label::before {
  border-color: var(--u-ink-faint);
}

body.site-bikeshop .bp-rep-check input:checked + label {
  background: var(--u-accent-soft);
  border-color: var(--rep-navy);
  color: var(--rep-navy);
  font-weight: 600;
}

body.site-bikeshop .bp-rep-check input:checked + label::before {
  background-color: var(--rep-navy);
  border-color: var(--rep-navy);
}

body.site-bikeshop .bp-rep-upload {
  border-color: var(--u-line-strong);
  background: var(--u-surface);
}

body.site-bikeshop .bp-rep-upload:hover {
  border-color: var(--rep-navy);
  background: var(--u-accent-soft);
}

body.site-bikeshop .bp-rep-upload-icoon {
  color: var(--rep-navy);
}

body.site-bikeshop .bp-rep-fallback {
  background: var(--rep-navy);
  border-color: var(--rep-navy);
  color: #fff;
}

body.site-bikeshop .bp-rep-fallback h3 {
  color: #fff;
}

body.site-bikeshop .bp-rep-fallback p {
  color: rgba(255, 255, 255, .8);
}

body.site-bikeshop .bp-rep-fallback .bp-rep-btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--rep-navy);
}

@media (max-width: 720px) {
  body.site-bikeshop .bp-rep-hero {
    padding: 48px 16px 40px;
  }

  body.site-bikeshop .bp-rep-usp {
    border-bottom-color: rgba(255, 255, 255, .12);
  }

  body.site-bikeshop .bp-rep-group {
    padding: 22px 18px;
  }
}

/* Transportkeuze zonder vaste prijs: postcode en woonplaats direct onder de keuzes. */
body .u-transport-address {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-surface);
}

body .u-transport-address[hidden] {
  display: none;
}

body .u-transport-address__intro {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--u-ink-soft);
}

@media (max-width: 560px) {
  body .u-transport-address .u-field {
    grid-column: span 12;
  }
}

/* Accessoire-overzicht: de keuze "voor welke fiets" blijft op een telefoon een compacte knop
   (het oude thema maakt elke select schermbreed en hoog). De werkbalk boven de fietsen
   (knop "Filters" en sorteren) heeft dezelfde vorm. */
body .bp-overzicht-page .u-toolbar {
  margin-top: 18px;
}

@media (max-width: 640px) {
  body .bp-overzicht-page .u-toolbar,
  body .u-results .u-toolbar {
    gap: 8px 12px;
    padding-bottom: 8px;
  }

  body .bp-overzicht-page .u-toolbar__count,
  body .u-results .u-toolbar__count {
    font-size: 14px;
  }

  body .u-results .u-toolbar__actions {
    gap: 8px;
  }

  body .bp-overzicht-page .u-select,
  body .u-results .u-select {
    gap: 6px;
    padding: 0 12px;
  }

  body .bp-overzicht-page .u-select svg,
  body .u-results .u-select svg {
    width: 14px;
    height: 14px;
  }

  body .bp-overzicht-page .u-select select,
  body .u-results .u-select select {
    width: auto;
    max-width: 210px;
    min-height: 0;
    height: 36px;
    padding: 0 22px 0 0;
    margin: 0;
    font-size: 13.5px;
    line-height: 1;
    text-overflow: ellipsis;
  }

  body .u-results .u-filters-toggle {
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border-color: var(--u-line-strong);
    font-size: 13.5px;
    font-weight: 600;
  }

  body .u-results .u-filters-toggle:hover {
    transform: none;
  }

  body .u-results .u-filters-toggle svg {
    width: 14px;
    height: 14px;
    color: var(--u-ink-faint);
  }
}

/* ------------------------------------------------------------
   Mobiel: correcties die op elke pagina gelden
   ------------------------------------------------------------ */
/* Het oude thema geeft .site-main links en rechts 20px marge; daardoor was de inhoud op een
   telefoon smaller dan het scherm en stonden blokken scheef ten opzichte van elkaar. */
body .site-main.site-main,
body.separate-containers .site-main,
body.one-container .site-main {
  margin: 0;
}

/* Idem voor de 20px die het oude thema onder elk blok zet: tussen twee vlakken hoort geen witte streep. */
body .site-main.site-main > * {
  margin-bottom: 0;
}

@media (max-width: 720px) {
  /* Vertrouwensbalk bovenaan: één regel die je opzij kunt vegen, in plaats van vier regels hoog. */
  .u-topbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 20px;
    padding: 8px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .u-topbar::-webkit-scrollbar {
    display: none;
  }

  .u-topbar__item {
    flex: none;
    font-size: 12.5px;
  }
}

/* ------------------------------------------------------------
   Contactpagina
   ------------------------------------------------------------ */
/* De blokken met adres en openingstijden zijn kaartjes; de tekst krijgt ruimte binnen de rand. */
body .bp-co-bezoek-blok {
  padding: 14px 16px;
}

body .bp-co-bezoek-blok .bp-co-bezoek-label {
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  body .bp-contact section {
    padding: 40px 16px;
  }

  body .bp-co-hero {
    padding: 36px 16px 20px !important;
  }

  body .bp-co-h1 {
    font-size: 34px;
    margin-bottom: 12px;
  }

  body .bp-co-lead {
    font-size: 16px;
  }

  body .bp-co-kaarten {
    padding: 8px 16px 32px !important;
  }

  body .bp-co-kaarten-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* Icoon links, tekst rechts: een contactkaart is dan een derde van de hoogte. */
  body .bp-co-kaart {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 18px;
    text-align: left;
  }

  body .bp-co-kaart-icoon {
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  body .bp-co-kaart-titel {
    font-size: 13px;
    margin: 0;
  }

  body .bp-co-kaart-waarde {
    font-size: 19px;
    margin: 2px 0;
    overflow-wrap: anywhere;
  }

  body .bp-co-kaart-sub {
    font-size: 13px;
    margin: 0;
  }

  body .bp-co-tip {
    margin-top: 16px;
    font-size: 13.5px;
  }

  body .bp-co-bezoek {
    padding: 40px 16px !important;
  }

  body .bp-co-bezoek-h2,
  body .bp-co-afhaal-h2 {
    font-size: 26px;
    margin-bottom: 24px;
  }

  body .bp-co-maps {
    min-height: 240px;
  }

  body .bp-co-maps iframe {
    min-height: 240px;
  }

  body .bp-co-bezoek-info {
    padding: 20px 16px;
    gap: 16px;
  }

  body .bp-co-bezoek-info h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  body .bp-co-bezoek-blok {
    margin-bottom: 10px;
  }

  body .bp-co-btn {
    width: 100%;
    justify-content: center;
  }

  body .bp-co-afhaal-lead {
    font-size: 15px;
  }

  body .bp-co-faq-link {
    padding: 28px 16px !important;
  }
}

/* ------------------------------------------------------------
   Mobiel: knoppen, keuzelijsten en koppen
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  /* Een knoptekst van twee regels krijgt lucht tussen de regels. */
  .u-btn,
  body .bp-btn {
    line-height: 1.25;
    text-align: center;
  }

  /* Sorteren/filteren: het oude thema maakt elke keuzelijst schermbreed, waardoor de balk uit beeld liep. */
  body .u-toolbar__actions {
    flex-wrap: wrap;
    max-width: 100%;
  }

  body .u-select {
    gap: 6px;
    padding: 0 12px;
    max-width: 100%;
  }

  body .u-select select {
    width: auto;
    max-width: 190px;
    min-height: 0;
    height: 36px;
    padding: 0 22px 0 0;
    margin: 0;
    font-size: 13.5px;
    line-height: 1;
    text-overflow: ellipsis;
  }

  /* Koppen van uitklapblokken en secties passen op één of twee korte regels. */
  body .bp-config-title,
  body .bp-specs-h2,
  body .bp-inbegrepen-title,
  body .bp-accu-title,
  body .bp-garantie-title {
    font-size: 18px;
  }

  body .bp-configurator,
  body .bp-inbegrepen-blok,
  body .bp-accu-blok,
  body .bp-garantie-blok,
  body .bp-specs-section {
    padding: 18px 16px;
    margin-top: 16px;
  }

  .u-featured {
    padding-top: 40px;
  }

  body .u-featured__head h2 {
    font-size: 22px;
  }

  body .bp-home-seo__h2,
  body .bp-home-seo h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  body .bp-home-seo h3 {
    font-size: 18px;
  }

  /* Totaalbalk onderin de productpagina: één compacte regel met bedrag en knop. */
  body .bp-totaal-inner {
    padding: 10px 16px;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
  }

  body .bp-totaal-label,
  body .bp-totaal-breakdown {
    display: none;
  }

  body .bp-totaal-amount {
    font-size: 20px;
    white-space: nowrap;
  }

  body .bp-totaal-cta {
    flex: none;
    max-width: 58%;
    padding: 10px 16px;
    font-size: 13.5px;
  }
}

/* ------------------------------------------------------------
   Over ons en garantie
   ------------------------------------------------------------ */
/* De cijfers zijn kaartjes; het getal en het label krijgen ruimte binnen de rand. */
body .bp-oo-cijfers-grid > * {
  padding: 22px 16px;
}

@media (max-width: 768px) {
  body .bp-overons section,
  body .bp-garantie-page section {
    padding: 40px 16px !important;
  }

  body .bp-oo-cijfers-grid {
    gap: 12px;
  }

  body .bp-oo-getal {
    font-size: 44px;
  }

  body .bp-oo-getal-tekst {
    font-size: 30px;
  }

  body .bp-oo-cijfer-label {
    margin-top: 8px;
    font-size: 11px;
  }

  body .bp-overons h2,
  body .bp-garantie-page h2 {
    font-size: 26px;
    line-height: 1.2;
  }

  body .bp-overons h3,
  body .bp-garantie-page h3 {
    font-size: 18px;
  }

  body .bp-oo-waarden-grid {
    gap: 20px;
  }
}

/* ------------------------------------------------------------
   Mobiel: homepage, productpagina en landingspagina
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  /* Stappen: cijfer en icoon staan allebei links, net als de tekst. */
  body .bp-stap {
    padding: 20px;
  }

  body .bp-stap-cijfer {
    margin: 0;
  }

  body .bp-stap-icon {
    margin: 12px 0 6px;
  }

  body .bp-product-page .u-featured {
    padding-top: 12px;
  }

  body .bp-product-page {
    padding-bottom: 84px; /* ruimte voor de totaalbalk */
  }

  /* Landingspagina (blokken uit WordPress met vaste maten in de opmaak zelf). */
  body .site-main .wp-block-cover {
    min-height: 0 !important;
    padding: 40px 16px !important;
  }

  body .site-main .wp-block-cover h1,
  body .site-main h1.wp-block-heading {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  body .site-main .wp-block-cover p {
    font-size: 16px !important;
  }

  body .site-main h2.wp-block-heading {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  body .site-main h3.wp-block-heading {
    font-size: 18px !important;
  }

  body .site-main .wp-block-group {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body .site-main .wp-block-group .wp-block-group {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .site-main .wp-block-columns {
    gap: 12px !important;
  }
}

@media (max-width: 720px) {
  /* Formulierkopjes met een toevoeging ("— optioneel, max 6 stuks"): de toevoeging blijft klein. */
  body .bp-rep-group h3 {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  body .bp-rep-group h3 .opt,
  body .bp-rep-group h3 small {
    font-size: 12.5px;
    font-weight: 500;
  }
}

/* ------------------------------------------------------------
   Bikeshop: losse correcties
   ------------------------------------------------------------ */
/* Bezorgstappen: alleen de titel van een stap staat op een eigen regel; vetgedrukte woorden
   midden in de zin ("binnen 14 dagen") blijven in de zin staan. */
body .bs-bezorg-steps > li strong:not(:first-child) {
  display: inline;
  margin: 0;
  font-size: inherit;
}

/* De voettekst gebruikt hetzelfde lettertype als de rest van de site (het thema zette hier een schreefletter). */
body.site-bikeshop .bp-site-footer .bp-footer-col-heading,
body.site-bikeshop .bp-site-footer .bp-footer-heading,
body.site-bikeshop .bp-footer-locaties .bp-footer-heading {
  font-family: var(--u-font) !important;
}

/* ------------------------------------------------------------
   Accessoire-overzicht: dezelfde filterzijbalk als de fietsoverzichten
   ------------------------------------------------------------ */
body .u-listing--accessoires {
  margin-top: 28px;
}

/* Naast de zijbalk is er ruimte voor vier tegels. */
body .u-listing--accessoires ul.products {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.u-results__group {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 32px 0 14px;
}

.u-results .u-toolbar + .u-results__group {
  margin-top: 4px;
}

@media (max-width: 1100px) {
  body .u-listing--accessoires ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body .u-listing--accessoires {
    margin-top: 16px;
  }

  body .u-listing--accessoires ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   Bestelvenster: keuzes met prijs (accessoires, afhalen of bezorgen) en het totaal
   ------------------------------------------------------------ */
body .u-quote .u-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

body .u-quote .u-choices label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  width: 100%;
}

body .u-quote .u-choices .bp-rep-check label > span:not(.u-acc__img):not(.u-choices__price) {
  flex: 1;
}

.u-choices__price {
  flex: none;
  font-weight: 700;
  white-space: nowrap;
}

body .u-quote .u-total {
  margin: 18px 0 0;
  padding: 16px;
  border-radius: var(--u-radius);
  background: var(--u-surface);
}

.u-total__lines {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--u-line);
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  color: var(--u-ink-soft);
}

.u-total__lines:empty {
  display: none;
}

.u-total__lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

body .u-quote .u-total .u-buy__price {
  font-size: 26px;
}

body .u-quote .bp-rep-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   Accessoire in een keuzelijst: foto, naam, prijs en een i-knop met de omschrijving
   ------------------------------------------------------------ */
body .u-quote .u-acc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 6px;
}

body .u-quote .u-acc label {
  justify-content: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
}

.u-acc__name {
  flex: 1;
  min-width: 0;
}

.u-acc__img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--u-radius-sm);
  background: var(--u-surface);
  object-fit: contain;
  mix-blend-mode: multiply;
}

.u-acc__img--leeg {
  display: block;
  mix-blend-mode: normal;
}

.u-acc__info {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--u-line);
  border-radius: var(--u-pill);
  background: var(--u-white);
  color: var(--u-ink-soft);
  cursor: pointer;
}

.u-acc__info:hover,
.u-acc__info[aria-expanded="true"] {
  border-color: var(--u-accent);
  color: var(--u-accent);
  background: var(--u-accent-soft);
}

.u-acc__text {
  grid-column: 1 / -1;
  margin: 6px 0 4px;
  padding: 10px 12px;
  border-radius: var(--u-radius-sm);
  background: var(--u-surface);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--u-ink-soft);
}

.u-acc__text a {
  font-weight: 600;
  white-space: nowrap;
}

/* Configurator van de gebruikte fiets: zelfde foto en i-knop in de bestaande keuzeregel. */
body .bp-config-option--checkbox .u-acc__img {
  margin-right: 4px;
}

body .bp-config-option--checkbox .u-acc__info {
  margin-left: 8px;
}

body .bp-config-options-col > .u-acc__text {
  margin: -4px 0 4px;
}

/* Taalkeuze in de kop: NL · EN · DE */
.u-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--u-line);
  border-radius: var(--u-pill);
  background: var(--u-white);
}

.u-lang a {
  padding: 5px 8px;
  border-radius: var(--u-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--u-ink-soft);
  text-decoration: none;
}

.u-lang a:hover {
  color: var(--u-ink);
}

.u-lang a.is-active {
  background: var(--u-accent);
  color: var(--u-on-accent);
}

@media (max-width: 720px) {
  .u-lang a {
    padding: 5px 6px;
    font-size: 11px;
  }
}