/* TVW Horse Trucks: ronde hoeken in de trant van redesign v1 (dev.allroundweb.nl/tvwhorsetruck-redesign).
   Alleen border-radius; kleuren, schaduwen (geen), animaties en layout blijven zoals in v2. */
:root {
  --r-section: 40px;
  --r-card: 30px;
  --r-media: 20px;
  --r-small: 14px;
  --r-pill: 60px;
}

/* knoppen en kleine bedieningselementen: pil */
.btn, .navbar__toggle, .filters button, .chips li, .social a, .help__links a, .lb button,
.vcard__tag, .rental__state { border-radius: var(--r-pill); }
.help__close, .faq .chev-wrap { border-radius: 50%; }
.skip { border-radius: 12px; }

/* navigatie */
.navbar__bar { border-radius: var(--r-pill); }
.dd__toggle, .hl { border-radius: 40px; }
.dd__list { border-radius: var(--r-media); }
.dd__list a { border-radius: var(--r-small); }
.mobile-menu { border-radius: var(--r-card); }

/* formulieren */
.field input, .field select, .field textarea { border-radius: var(--r-small); }
.opt__box { border-radius: var(--r-small); }
.form--card { border-radius: var(--r-media); }

/* kaarten en blokken */
.pcard, .cta-block, .news__panel, .vpanel, .rental { border-radius: var(--r-card); }
.help { border-radius: var(--r-media); }
.rental { overflow: hidden; }
.vspecs dl div { border-radius: var(--r-small); }

/* beeld */
.pfig, .mfig, .feat__media, .news__photo, .model__img, .vcard__img, .vgal__item, .gallery a,
.zoom__frame, .embed iframe, .lb img { border-radius: var(--r-media); }
.vcard__img, .gallery a, .embed iframe { overflow: hidden; }
.vgal__item:not(.vgal__item--main) { border-radius: var(--r-small); }
/* zoom-scène: de ronding zit in de clip-path (main.js laat hem naar 0 lopen als het beeld schermvullend wordt) */
html.motion .zoom__frame { border-radius: 0; clip-path: inset(18% 8% 18% 46% round 24px); }
@media (max-width: 899px) { html.motion .zoom__frame { clip-path: inset(40% 8% 8% 8% round 24px); } }

/* grote vlakken: afgeronde randen zoals de secties in v1 */
.manifesto { border-radius: var(--r-section) var(--r-section) 0 0; }
.faq, .band { border-radius: var(--r-section); }
.footer { border-radius: var(--r-section) var(--r-section) 0 0; }

/* ===== 02-11-2026: alles wat nog hoekig was ===== */
@media (max-width: 599px) { :root { --r-section: 28px; --r-card: 24px; } }

/* tegels, kaarten en lijstregels */
.way, .model { border-radius: var(--r-card); }
.model { overflow: hidden; }
.embed { border-radius: var(--r-media); overflow: hidden; }
.nlist li { border-radius: var(--r-small); }
.toc a { border-radius: var(--r-pill); }
.opt__mark { border-radius: 8px; }
.inc__mark { border-radius: 50%; }
.check input, input[type="checkbox"] { border-radius: 6px; }

/* stippen en accentblokjes: rond */
.feat__dots i, .pcard__text .label::before, .model__list li::before, .dlist li::before,
.vcard__specs dd + dt + dd::before, .dd__toggle[aria-current="page"]::after { border-radius: 50%; }

/* schermbrede vlakken: afgeronde randen (overflow: clip laat sticky-scènes intact) */
.hero, .phero { border-radius: 0 0 var(--r-section) var(--r-section); overflow: clip; }
.zoom, .section--soft { border-radius: var(--r-section); overflow: clip; }

/* ===== hovers en focus ===== */
/* links met een kleurvlak bij hover (oranje/lichtoranje schuift in) */
.tlink, .plain-link, .crumbs a { border-radius: var(--r-pill); }
.faq summary, .terms__toc a { border-radius: var(--r-small); }
/* volgcirkel bij hover over de kaarten in de horizontale rij */
.circle { border-radius: 50%; }
/* focusring volgt de vorm; :where() = specificiteit 0, dus eigen rondingen van knoppen/kaarten blijven gelden */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { border-radius: 8px; }

/* ===== witruimte tussen afgeronde vlakken ===== */
/* Raken twee afgeronde vlakken elkaar (bv. headerfoto + donkere band), dan ontstaan witte puntjes.
   Een kleine witte marge maakt er losse blokken van. Tussen witte secties is die marge onzichtbaar. */
:root { --r-gap: 55px; }
@media (max-width: 599px) { :root { --r-gap: 39px; } }
.phero { margin-bottom: var(--r-gap); }
.zoom, .section--soft, .band, .faq { margin-block: var(--r-gap); }
.footer { margin-top: var(--r-gap); }