/* =========================================================================
   KSM ICT — huisstijl
   Crèmekleurige banden, lichte grote koppen, indigo accent, blauwe gradient.
   Kleuren komen uit de instellingen en worden als CSS-variabelen ingevoegd.
   ========================================================================= */

/* Eigen lettertype (optioneel). Zet .woff2-bestanden in /public/assets/fonts
   en de browser pakt ze automatisch. Ontbreken ze, dan valt hij netjes terug
   op de systeemletters — geen externe verzoeken, dus AVG-proof. */
@font-face {
  font-family: 'KSM Display';
  src: url('../fonts/display.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: 'KSM Body';
  src: url('../fonts/body.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --cream:        #FBEFE1;
  --cream-soft:   #FDF7F0;
  --surface:      #FFFFFF;
  --ink:          #16161D;
  --ink-soft:     #4C4C58;
  --ink-muted:    #7A7A86;
  --brand:        #2A2A8F;
  --brand-dark:   #1B1B63;
  --brand-tint:   #ECECF8;
  --accent:       #14624A;
  --line:         #E8DFD4;
  --danger:       #A8322A;
  --success:      #14624A;

  --blue-1:       #A6C8EC;
  --blue-2:       #CBDEF4;
  --blue-3:       #EDF3FA;
  --band-gradient: linear-gradient(128deg, var(--blue-1) 0%, var(--blue-2) 48%, var(--blue-3) 100%);

  --font-display: 'KSM Display', 'Outfit', 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'KSM Body', 'Outfit', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 2px 4px rgba(22,22,29,.04), 0 12px 32px rgba(22,22,29,.07);
  --shadow-soft:  0 1px 2px rgba(22,22,29,.04), 0 6px 18px rgba(22,22,29,.05);
  --shadow-btn:   0 3px 10px rgba(42,42,143,.2);
  --container:    1180px;
  --band-y:       clamp(3.5rem, 8vw, 7rem);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.35rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 400; }
h4 { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ structuur */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.band { padding-block: var(--band-y); }
.band--white    { background: var(--surface); }
.band--cream    { background: var(--cream); }
.band--soft     { background: var(--cream-soft); }
.band--gradient { background: var(--band-gradient); }
.band--tight    { padding-block: clamp(2.5rem, 5vw, 4rem); }

.band + .band--white + .band--white { border-top: 1px solid var(--line); }

/* --------------------------------------------------------------- header */
.site-header {
  background: var(--cream);
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow .25s ease;
}
.site-header[data-scrolled="true"] { box-shadow: 0 1px 0 rgba(22,22,29,.06), 0 10px 24px rgba(22,22,29,.05); }
.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: var(--header-hoogte, 56px); padding-block: .4rem;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); }
.brand__logo { height: 28px; width: auto; }
.brand__name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }

/* Rechts uitlijnen gebeurt op het logo-item van de kopregel (zie
   ".site-header__inner .vrij__item--logo" verderop), niet hier. */
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: .45rem 0; position: relative; display: inline-block;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--brand); }

.header-tools { display: flex; align-items: center; gap: .5rem; }
.icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: var(--ink);
  text-decoration: none; transition: background .2s ease, color .2s ease;
}
.icon-link:hover { background: rgba(42,42,143,.09); color: var(--brand); }
.cart-link { position: relative; }
.cart-link__count {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  background: var(--brand); color: #fff; border-radius: 999px;
  font-size: .68rem; line-height: 18px; text-align: center; padding: 0 4px; font-weight: 600;
}

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink);
}

/* ----------------------------------------------------------------- hero */
.hero { max-width: 860px; }
.hero--center { margin-inline: auto; text-align: center; }
.hero__lead { font-size: 1.08rem; max-width: 68ch; }
.hero--center .hero__lead { margin-inline: auto; }
.hero__eyebrow {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 1rem; font-weight: 600;
}

/* ------------------------------------------------------------- knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  font-size: .98rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 8px 22px rgba(42,42,143,.28); transform: translateY(-1px); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }
.btn--light:hover { color: var(--brand); }
.btn--block { width: 100%; }
.btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.06rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Vorm: standaard is de knop al helemaal rond (pil) via border-radius hierboven */
.btn--vorm-rond { border-radius: 10px; }
.btn--vorm-hoekig { border-radius: 3px; }
.btn__icoon { display: inline-flex; flex-shrink: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* -------------------------------------------------------- "Wat doen we" */
.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.section-head p { color: var(--ink-soft); }

.features { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature { text-align: center; }
.feature__icon { color: var(--accent); margin: 0 auto 1.4rem; width: 34px; height: 34px; }
.feature h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); margin-bottom: .7rem; }
.feature p { font-size: .97rem; margin: 0; }

/* ------------------------------------------------------- tekst + beeld */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.split--reverse .split__media { order: 2; }
.split__media img {
  border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%;
  transform: translateY(var(--verschuif, 0));
}

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 1.4em;
  border-left: 3px solid var(--brand); color: var(--ink); font-size: 1.08em;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th, .prose td { text-align: left; padding: .7em .8em; border-bottom: 1px solid var(--line); }
.prose code { background: var(--brand-tint); padding: .15em .4em; border-radius: 5px; font-size: .92em; }

/* ------------------------------------------------------------- contact */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.contact-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list svg { color: var(--accent); flex: 0 0 auto; margin-top: .25rem; }
.contact-list a { color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--brand); text-decoration: underline; }
.contact-list strong { display: block; font-weight: 400; color: var(--ink); font-size: 1.05rem; }
.contact-list span { color: var(--ink-soft); font-size: .95rem; }

/* ----------------------------------------------------------- formulieren */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { display: grid; gap: .4rem; }
.field > label { font-size: .9rem; color: var(--ink); font-weight: 500; }
.field__hint { font-size: .84rem; color: var(--ink-muted); }
.input, .select, .textarea {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(22,22,29,.03);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(42,42,143,.12);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 150px; resize: vertical; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.check input { margin-top: .28rem; width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; }

.error-text { color: var(--danger); font-size: .87rem; }

.alert {
  padding: .95rem 1.15rem; border-radius: var(--radius-sm); margin-bottom: 1.4rem;
  border-left: 3px solid; font-size: .95rem;
}
.alert--success { background: #EAF4EF; border-color: var(--success); color: #124C3B; }
.alert--error   { background: #FBEEEC; border-color: var(--danger);  color: #7E241E; }
.alert--info    { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.alert--warning { background: #FDF3E2; border-color: #B47A16; color: #7A5210; }

/* --------------------------------------------------------------- shop */
.product-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card__media { aspect-ratio: 16 / 10; background: var(--brand-tint); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card__title { font-size: 1.18rem; margin: 0; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--brand); }
.card__text { font-size: .93rem; margin: 0; color: var(--ink-soft); }
.card__foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.price { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); font-weight: 400; }
.price small { font-size: .78rem; color: var(--ink-muted); display: block; font-family: var(--font-body); }
.price__old { color: var(--ink-muted); text-decoration: line-through; font-size: 1rem; margin-right: .4rem; }

.badge {
  display: inline-block; padding: .28rem .7rem; border-radius: 999px;
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.badge--brand { background: var(--brand-tint); color: var(--brand-dark); }
.badge--green { background: #E4F1EB; color: var(--success); }
.badge--grey  { background: #EFEBE5; color: var(--ink-soft); }
.badge--red   { background: #FBEEEC; color: var(--danger); }

.product-detail { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.product-detail__media img { border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.buy-box {
  background: var(--cream-soft); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); position: sticky; top: 120px;
}
.buy-box__price { font-family: var(--font-display); font-size: 2.3rem; color: var(--ink); line-height: 1; }
.buy-box ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; font-size: .92rem; }
.buy-box li { display: flex; gap: .6rem; align-items: flex-start; }
.buy-box li svg { color: var(--accent); flex: 0 0 auto; margin-top: .2rem; }

.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.chip {
  padding: .5rem 1.05rem; border-radius: 999px; border: 1.5px solid var(--line);
  background: #fff; color: var(--ink-soft); text-decoration: none; font-size: .9rem;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* -------------------------------------------------------- winkelwagen */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); font-weight: 600; padding-bottom: .9rem; }
.cart-table td { padding: 1.1rem 0; border-top: 1px solid var(--line); vertical-align: middle; }
.cart-table .num { text-align: right; }
.cart-item { display: flex; gap: 1rem; align-items: center; }
.cart-item img { width: 76px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.cart-item strong { font-weight: 500; color: var(--ink); }

.summary { background: var(--cream-soft); border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: var(--radius); padding: 1.6rem; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .95rem; }
.summary__row--total {
  border-top: 1px solid var(--line); margin-top: .6rem; padding-top: 1rem;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--ink);
}
.checkout-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); align-items: start; }

.pay-methods { display: grid; gap: .7rem; margin-top: .4rem; }
.pay-method {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: #fff;
  transition: border-color .18s ease, background .18s ease;
}
.pay-method:hover { border-color: var(--brand); }
.pay-method input { accent-color: var(--brand); width: 18px; height: 18px; }
.pay-method img { height: 24px; width: auto; margin-left: auto; }
.pay-method:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

/* --------------------------------------------------------- mijn account */
.account-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 250px minmax(0, 1fr); align-items: start; }
.account-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; position: sticky; top: 120px; }
.account-nav a {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
}
.account-nav a:hover { background: var(--cream-soft); color: var(--ink); }
.account-nav a[aria-current="page"] { background: var(--brand); color: #fff; }
.account-nav a[aria-current="page"] svg { color: #fff; }

.library { display: grid; gap: 1.2rem; }
.library-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 1.3rem; align-items: center;
  padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.library-item__thumb { width: 92px; height: 68px; object-fit: cover; border-radius: 8px; background: var(--brand-tint); }
.library-item h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.library-item__meta { font-size: .85rem; color: var(--ink-muted); margin: 0; }
.file-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.file-list li {
  display: flex; align-items: center; gap: .8rem; font-size: .9rem;
  padding: .6rem .8rem; background: var(--cream-soft); border-radius: 8px;
}
.file-list .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }

.data-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.data-table th { text-align: left; padding: .8rem .7rem; border-bottom: 2px solid var(--line); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.data-table td { padding: .9rem .7rem; border-bottom: 1px solid var(--line); }
.data-table tr:hover td { background: var(--cream-soft); }

.empty-state { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state h3 { margin-bottom: .5rem; }
.empty-state p { color: var(--ink-muted); max-width: 46ch; margin-inline: auto; }

/* ------------------------------------------------------------- footer */
.site-footer { background: var(--cream); padding-block: clamp(3rem, 6vw, 5rem) 2rem; margin-top: auto; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-col h4 { font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: 1.1rem; font-weight: 600; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: .94rem; }
.footer-col a:hover { color: var(--brand); text-decoration: underline; }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(22,22,29,.09);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .86rem; color: var(--ink-muted);
}
.social-row { display: flex; gap: .4rem; }
.newsletter { display: flex; gap: .5rem; flex-wrap: wrap; }
.newsletter .input { flex: 1 1 180px; }

/* ------------------------------------------------------ cookiemelding */
.cookiebar {
  position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 90;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.4rem; max-width: 620px; margin-inline: auto;
  display: grid; gap: 1rem;
}
.cookiebar[hidden] { display: none; }
.cookiebar p { font-size: .92rem; margin: 0; }
.cookiebar__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* --------------------------------------------------- nieuwsbriefpop-up */
.nb-popup {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; background: rgba(22, 22, 29, .55);
}
.nb-popup[hidden] { display: none; }
.nb-popup__kaart {
  position: relative; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2.2rem 2rem; max-width: 420px; width: 100%;
  text-align: center;
}
.nb-popup__kaart h2 { font-size: 1.4rem; margin: 0 0 .6rem; }
.nb-popup__kaart p { color: var(--ink-soft); margin: 0 0 1.4rem; font-size: .95rem; }
.nb-popup__kaart form { display: grid; gap: .7rem; }
.nb-popup__sluit {
  position: absolute; inset-block-start: .8rem; inset-inline-end: .8rem;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%; color: var(--ink-muted); cursor: pointer;
}
.nb-popup__sluit:hover { background: var(--cream); color: var(--ink); }
body.nb-popup-open { overflow: hidden; }

/* ------------------------------------------------- zwevende knoppen */
.whatsapp-knop, .omhoog {
  position: fixed; right: 1.4rem; z-index: 85;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); transition: bottom .2s ease, opacity .2s ease, transform .15s ease;
}
.whatsapp-knop:hover, .omhoog:hover { transform: translateY(-2px); }

.whatsapp-knop {
  bottom: 1.4rem; background: #25d366; color: #fff;
}
.whatsapp-knop.is-verschoven { bottom: 8.5rem; }

.omhoog {
  bottom: 1.4rem; right: 5.4rem; background: var(--brand); color: #fff;
  border: 0; cursor: pointer; opacity: 0; pointer-events: none;
}
.omhoog.is-zichtbaar { opacity: 1; pointer-events: auto; }
.omhoog.is-verschoven { bottom: 8.5rem; }

@media (max-width: 560px) {
  .whatsapp-knop, .omhoog { width: 2.9rem; height: 2.9rem; right: 1rem; }
  .omhoog { right: 4.6rem; }
}

/* -------------------------------------------------------- kruimelpad */
.crumbs { font-size: .86rem; color: var(--ink-muted); margin-bottom: 1.6rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs li + li::before { content: '›'; margin-right: .45rem; }

/* ------------------------------------------------------------- prijzen */
.pricing { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.7rem; display: flex; flex-direction: column;
}
.plan--highlight { border-color: var(--brand); box-shadow: var(--shadow); }
.plan__price { font-family: var(--font-display); font-size: 2.4rem; color: var(--ink); line-height: 1; margin: .6rem 0 .2rem; }
.plan__unit { font-size: .85rem; color: var(--ink-muted); }
.plan ul { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .6rem; font-size: .94rem; }
.plan li { display: flex; gap: .6rem; }
.plan li::before { content: '—'; color: var(--brand); }
.plan .btn { margin-top: auto; }

/* ----------------------------------------------------------------- faq */
.faq { display: grid; gap: .8rem; max-width: 820px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; padding: 0 1.3rem; transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
  cursor: pointer; padding: 1.15rem 0; font-family: var(--font-display);
  font-size: 1.08rem; color: var(--ink); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--brand); line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.25rem; font-size: .97rem; }

/* --------------------------------------------------------------------------
   Scroll-effecten. Elk blok krijgt van Blocks::effectAttrs() een
   data-effect-attribuut plus --effect-duur/--effect-afstand/--effect-vertraging.
   Werkt alléén onder .js-effecten (zonder JavaScript is alles gewoon
   zichtbaar) en respecteert prefers-reduced-motion via de globale regel
   verderop. Animeert uitsluitend opacity en transform.
   ========================================================================= */
.js-effecten [data-effect] {
  transition-property: opacity, transform;
  transition-duration: var(--effect-duur, 600ms);
  transition-delay: var(--effect-vertraging, 0ms);
  transition-timing-function: ease-out;
}
.js-effecten [data-effect]:not(.is-onthuld) { opacity: 0; }

.js-effecten [data-effect="onthullen"]:not(.is-onthuld),
.js-effecten [data-effect="van-onder"]:not(.is-onthuld) { transform: translateY(var(--effect-afstand, 28px)); }
.js-effecten [data-effect="van-boven"]:not(.is-onthuld) { transform: translateY(calc(-1 * var(--effect-afstand, 28px))); }
.js-effecten [data-effect="van-links"]:not(.is-onthuld) { transform: translateX(calc(-1 * var(--effect-afstand, 28px))); }
.js-effecten [data-effect="van-rechts"]:not(.is-onthuld) { transform: translateX(var(--effect-afstand, 28px)); }
.js-effecten [data-effect="uitzoomen"]:not(.is-onthuld) { transform: scale(.92); }
.js-effecten [data-effect="inzoomen"]:not(.is-onthuld) { transform: scale(1.08); }
.js-effecten [data-effect="veren"]:not(.is-onthuld) { transform: translateY(var(--effect-afstand, 28px)); }
.js-effecten [data-effect="veren"] { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.js-effecten [data-effect="draaien"]:not(.is-onthuld) {
  transform: translateY(calc(var(--effect-afstand, 28px) / 2)) rotate(-3deg);
}

.js-effecten [data-effect].is-onthuld { opacity: 1; transform: none; }

/* Afbeeldingen laden zacht in zodra ze klaar zijn (site.js zet data-fade/is-geladen) */
.js-effecten img[data-fade] { opacity: 0; transition: opacity .5s ease; }
.js-effecten img[data-fade].is-geladen { opacity: 1; }

/* --------------------------------------------------------- kopregel-indeling */
/*
   De kopregel is zelf een vrije-indeling-raster (zie database/seed.php,
   blok "_header"), zodat je 'm met de bouwer kunt aanpassen: elk onderdeel
   (logo, menu, taalknop, winkelwagen/account) is daar een los "vrij__item"
   met een eigen rasterpositie. Zo'n raster van gelijke kolombreedtes is
   geschikt voor een los stuk pagina-inhoud, maar niet voor een kopregel:
   die moet altijd — bij elk aantal onderdelen en op elke schermbreedte —
   aanvoelen als "logo vast links, de rest daarna strak bij elkaar rechts",
   niet als vakjes die los door de kopregel verspreid staan.

   Daarom krijgt de kopregel hier zijn eigen, simpele opmaak, die het
   onderliggende raster volledig buiten werking zet: een gewone rij waarin
   elk onderdeel precies zijn eigen breedte pakt. Het logo trekt met
   "margin-right: auto" alle overgebleven ruimte naar zich toe, waardoor
   alles ná het logo — hoeveel onderdelen dat er ook zijn — vanzelf één
   groep vormt die tegen de rechterkant aan staat. Dat werkt met twee
   onderdelen (KSM ICT: logo + menu) precies zo goed als met vier (KSM
   Soundrecording: logo + menu + taalknop + winkelwagen/account), zonder dat
   er per site iets anders hoeft te staan.
   */
.site-header__inner .vrij {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.site-header__inner .vrij__item {
  flex: 0 0 auto;
  min-width: 0;
  /* Het raster zet elk item ook nog in een eigen kolom/rij; die zetten we
     hier expliciet uit, anders wint de kolombreedte soms van de flex-rij
     hierboven. */
  grid-column: auto;
  grid-row: auto;
}
.site-header__inner .vrij__item--logo {
  order: -1;
  margin-right: auto;
  min-width: 0;
}
.site-header__inner .vrij__item--logo .brand__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/*
   Het menu zelf klapt bij een bredere maat om dan de rest van de pagina
   (1100px in plaats van 900px). Reden: bij veel menu-items past dat niet
   meer naast de taalknop en de winkelwagen-/accountknoppen tussen ~900 en
   ~1100 pixels — precies het bereik van een laptop in staande stand (bijv.
   Surface-apparaten, die door Windows-schaling vaak rond de 950-1050
   CSS-pixels breed uitvallen). Een gewoon breed beeldscherm (meestal
   1280px of meer) blijft ruim boven deze grens en toont het volledige menu.
   */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; width: auto;
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.4rem;
    background: var(--cream);
    box-shadow: 0 12px 24px rgba(22, 22, 29, .1);
    display: none;
  }
  /* Zacht in laten glijden en oplichten zodra het uitklapmenu opent. De
     algemene prefers-reduced-motion-regel elders in dit bestand zet de
     duur van élke animatie (dus ook deze) automatisch bijna op nul voor
     wie minder beweging heeft ingesteld — daar hoeft hier niets extra's
     voor te gebeuren. */
  .nav.is-open { display: block; animation: nav-openen .28s cubic-bezier(.16, 1, .3, 1); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .nav__link { padding: .7rem 0; width: 100%; }
  .site-header__inner { flex-wrap: wrap; min-height: 48px; }
}

@keyframes nav-openen {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-nav { position: static; }
  .product-detail { grid-template-columns: 1fr; }
  .buy-box { position: static; }
  .checkout-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

@media (max-width: 560px) {
  .library-item { grid-template-columns: 1fr; }
  .library-item__thumb { width: 100%; height: 150px; }
  .cart-item img { width: 56px; height: 42px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------- printen */
@media print {
  .site-header, .site-footer, .cookiebar, .btn, .crumbs { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .band { padding-block: 0; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: .85em; color: #555; }
}

/* =========================================================================
   Vrije indeling
   Op een breed scherm een raster van 12 kolommen waarin je onderdelen
   precies neerzet waar je wilt. Onder de 760 pixels vervalt het raster en
   komt alles onder elkaar, in leesvolgorde. Zo blijft de telefoonweergave
   altijd netjes, hoe je het op de computer ook indeelt.
   ========================================================================= */

.vrij {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(48px, auto);
  gap: 1rem;
}

.vrij__item {
  grid-column: var(--x) / span var(--b);
  grid-row: var(--y) / span var(--h);
  display: flex;
  flex-direction: column;
  justify-content: var(--uit, flex-start);
  min-width: 0;
}

.vrij__kop { margin: 0; }
.vrij__tekst > :first-child { margin-top: 0; }
.vrij__tekst > :last-child { margin-bottom: 0; }

.vrij__beeld {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius, 14px);
  display: block;
}

.vrij__vlak {
  width: 100%;
  height: 100%;
  min-height: 48px;
  border-radius: var(--radius, 14px);
}

.vrij__item--knop { align-items: flex-start; }
.vrij__item--knop .btn { align-self: flex-start; }

/* Header: winkelwagen/account-iconen in het midden van hun kolom
   (--uit regelt alleen de verticale kant, niet de horizontale). */
.vrij__item--mand_account { justify-content: center; align-items: center; }

/* Taalwissel (NL/EN), meestal rechtsboven in de header */
.taalwissel {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .84rem; font-weight: 600; letter-spacing: .02em;
}
.taalwissel a {
  color: var(--ink-muted); text-decoration: none; padding: .2rem .4rem; border-radius: 6px;
}
.taalwissel a:hover { color: var(--brand); }
.taalwissel a[aria-current="true"] { color: var(--brand); background: var(--brand-tint); }
.vrij__item--taalwissel { justify-content: center; align-items: flex-end; }

.vrij__leeg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-muted, #6B6B78);
  padding: 2rem 0;
}

/* Tablet: het raster halveren naar zes kolommen, maar wel het raster houden */
@media (max-width: 1024px) {
  .vrij { gap: .9rem; }
  .vrij__item { grid-column: span min(var(--b), 12); }
}

/* Telefoon: raster los, alles onder elkaar in leesvolgorde */
@media (max-width: 760px) {
  .vrij {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }

  .vrij__item {
    grid-column: auto;
    grid-row: auto;
  }

  .vrij__beeld { height: auto; }
  .vrij__vlak { min-height: 90px; }
}

@media print {
  .vrij { display: block; }
  .vrij__item { break-inside: avoid; margin-bottom: 1rem; }
}