/* ==========================================================================
   Kringloopwinkel Vaals — basisstijlen zonder thema (Oxygen-modus).
   Het ontwerpsysteem (.kv-* klassen) zit in Oxygen (bewerkbaar in de builder);
   hier staat wat daar niet thuishoort of niet geïmporteerd wordt: tokens als
   terugval, elementstijlen, media queries die Oxygen niet kent, en correcties
   op Oxygens element-defaults. Geladen vóór Oxygens selectors.css.
   ========================================================================== */
:root {
  --navy: #0c3864;  --navy-deep: #082a4c;  --navy-ink: #0a2f55;
  --blue: #0480ac;  --blue-deep: #03688c;  --blue-soft: #e3f1f7;
  --green: #88c030; --green-deep: #189040; --green-dark: #12702f; --green-soft: #eef6df;
  --tag: #ffd23f;   --tag-deep: #e6b400;   --tag-ink: #3a2c00;
  --paper: #faf8f3; --sand: #f2ede1; --sand-deep: #e6dfcd; --white: #fff;
  --ink: #152230;   --ink-2: #3f4d5b;      --ink-3: #66737f;
  --line: #e3e6e8;  --line-2: #cfd6db;     --danger: #b3261e;
  --shadow-1: 0 1px 2px rgba(12,56,100,.06), 0 8px 24px -12px rgba(12,56,100,.18);
  --shadow-2: 0 2px 4px rgba(12,56,100,.08), 0 22px 48px -18px rgba(12,56,100,.32);
  --r-s: 8px; --r-m: 14px; --r-l: 22px;
  --font-display: "KV Bricolage", "KV Figtree", system-ui, sans-serif;
  --font-body: "KV Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px; --wrap-narrow: 760px; --wrap-wide: 1400px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 78px;
  --ease: cubic-bezier(.22,.68,.3,1);
}
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.kv-menu-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; color: var(--ink); letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; font-variation-settings: "opsz" 40; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.03; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; }
small { font-size: .875em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: .35em; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
.kv-sr, .kv-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Oxygens element-defaults die het ontwerp in de weg zitten */
.oxy-text { margin: 0; }
.oxy-container, .oxy-container-link { box-sizing: border-box; }
/* Iconen: Oxygen zet fill:currentColor en stroke-width:0 op elke svg; wij tekenen lijn-iconen. */
.kv-icon, .oxy-svg-icon.kv-icon { --oxy-icon-size: 1.25em; display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.kv-icon > svg, .oxy-svg-icon.kv-icon > svg { fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round; stroke-linejoin: round; }
.kv-icon.kv-flip { transform: scaleX(-1); }
/* Tekst-elementen die naast een icoon staan */
.oxy-text > .kv-icon { vertical-align: -.2em; }

/* Media queries die Oxygen niet importeert */
/* Ingelogd: de WordPress-balk staat vast bovenaan; de plakkende kop schuift eronder in plaats van erachter. */
@media (min-width: 783px) { .admin-bar .kv-header { top: 32px; } .admin-bar .kv-post__aside { top: 144px; } }
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .kv-header { top: 46px; } }

/* Go-live-review 22-10-2026: correcties op het ontwerpsysteem zonder volledige Oxygen-herbouw. Dezelfde
   waarden staan in main.css / oxygen-responsive.css / oxygen-blokken.css voor de volgende import; hier met
   hogere specificiteit, omdat Oxygens selectors.css na dit bestand laadt. */
/* contrast weekkaart (ma dicht: 3,9:1 → 9:1) en kruimelpad (4,2:1 → 7:1) */
.kv-week .kv-week__day span { color: rgba(255,255,255,.82); font-size: .8rem; }
.kv-week .kv-week__day--closed { opacity: 1; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.kv-week .kv-week__day--closed b { color: #c9d4de; }
.kv-week .kv-week__day--closed span { color: rgba(255,255,255,.72); }
.kv-week .kv-week__day--sunday span { color: var(--tag-ink); }
.kv-week .kv-week__day--open b { color: #b4e06c; } /* limoen op navy: 3,6:1 → 6:1 */
nav.kv-crumbs, .kv-crumbs li[aria-current] { color: var(--ink-2); }
.kv-hours .kv-hours__badge { font-size: .76rem; }
/* 26-10: "gesloten" in de rij van vandaag (alleen op een sluitingsdag): grijs op lichtgroen 4,4:1 → kleur van de rij */
.kv-hours .kv-hours__today .kv-hours__closed { color: inherit; }
/* "Gewoon binnenlopen": ruimte tussen de handtekeningregel en de knoppen eronder */
.kv-handtekening + .kv-hero__actions { margin-top: 22px; }
/* de eerste kop in een kaart is een h2 (inc/output.php), met het formaat van de oude h3 */
.kv-card__body > h2 { margin-top: 0; font-size: 1.2rem; letter-spacing: -.015em; }
/* categoriekaart zonder producten: geen link (inc/output.php), dus ook geen hover */
/* 26-10: productomschrijving (en foto's erin) sprong 40 px in: de smalle kolom van .kv-content hoort niet bij de inline-variant */
.kv-content.kv-content--inline > * { width: auto; margin-inline: 0; }
/* 26-10: icoon in een knop krijgt de tekstkleur van de knop; ".kv-disclaimer .kv-icon" (navy) maakte het telefoon-
   icoon in de Bel-knop boven het productoverzicht onzichtbaar (navy op navy) */
.kv-btn .kv-icon.kv-btn__icon { color: inherit; }
.kv-disclaimer .kv-btn .kv-btn__icon { margin-top: 0; }
.kv-cat.kv-cat--leeg { cursor: default; }
.kv-cat.kv-cat--leeg:hover { transform: none; box-shadow: var(--shadow-1); }
.kv-cat.kv-cat--leeg:hover .kv-cat__img { transform: none; }
/* telefoon: categorieën en USP's in twee kolommen (de voorpagina was 17 schermen lang), ghostknop zichtbaar op de hero */
@media (max-width: 767px) {
  .kv-cats.kv-cats--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kv-cats.kv-cats--home .kv-cat { aspect-ratio: 1 / 1; }
  .kv-cats.kv-cats--home .kv-cat__body { padding: 12px 14px; gap: 2px; }
  .kv-cats.kv-cats--home .kv-cat__icon { width: 32px; height: 32px; margin-bottom: 4px; border-radius: 8px; }
  .kv-cats.kv-cats--home .kv-cat--icon .kv-cat__icon { width: 40px; height: 40px; }
  .kv-cats.kv-cats--home .kv-cat__title { font-size: 1rem; }
  .kv-cats.kv-cats--home .kv-cat__sub { font-size: .78rem; }
  .kv-usps.kv-usps--overlap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kv-usps.kv-usps--overlap .kv-usp { padding: 16px 14px 14px; }
  .kv-usps.kv-usps--overlap .kv-usp__text { font-size: .9rem; }
  .kv-hero__actions .kv-btn.kv-btn--on-dark { border: 1px solid rgba(255,255,255,.55); }
}
/* 26-10-2026: bovenbalk op de telefoon. Een lange status ("Nu gesloten · donderdag weer open om 10:00 uur") paste
   niet op één regel: de pagina scrolde zijwaarts en het telefoonnummer brak per cijfer af. Nu loopt de status door
   op een tweede regel en blijft het nummer heel. */
@media (max-width: 767px) {
  .kv-topbar .kv-topbar__inner { gap: 12px; padding-top: 6px; padding-bottom: 6px; }
  .kv-topbar .kv-topbar__status { flex: 1 1 auto; min-width: 0; }
  .kv-topbar .kv-status { white-space: normal; align-items: flex-start; line-height: 1.35; }
  .kv-topbar .kv-status__dot { margin-top: .4em; }
  .kv-topbar .kv-topbar__links { flex: none; }
  .kv-topbar .kv-topbar__links > a { white-space: nowrap; }
}
/* 26-10: "Datenschutzerklärung" als paginatitel is op 360 px breder dan het scherm; lange woorden (≥ 12 letters)
   mogen op de telefoon afbreken, met een harde breuk als terugval waar de browser geen woordafbreking kent */
@media (max-width: 479px) {
  .kv-pagehead .kv-pagehead__title { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
}

/* Breed logo + vijf menu-items + knop + vlag passen pas vanaf ~1240 px op één regel;
   daaronder het mobiele menu (Oxygens eigen breakpoint ligt op 1023). */
@media (max-width: 1239px) {
  .kv-nav, .kv-header__cta { display: none !important; }
  .kv-burger { display: inline-grid !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kv-anim { opacity: 1; transform: none; }
}
@media print {
  .kv-topbar, .kv-header, .kv-mobile, .kv-contactbar, .kv-footer__bottom, .kv-hero__side, .oxygen-built-with-badge { display: none !important; }
  .kv-hero { min-height: 0; color: #000; background: none; }
  .kv-hero::after, .kv-hero__bg { display: none; }
  .kv-hero__title, .kv-hero__lead { color: #000; }
}