/* ==========================================================================
   GALAXY GADGETZ · Klantenservice-familie (eigenaar: service-paginabouwer)
   Gebruikt door: klantenservice.html, verzending.html, retourneren.html,
   herroepen.html, garantie.html, contact.html, 404.html
   Alle selectors beginnen met .svc- (geen gedeelde klassen overschrijven).
   Alleen tokens, geen losse hexwaarden.
   ========================================================================== */

/* ---------- Paginakop ---------- */
.svc-hero { padding-block: var(--gg-s-6) var(--gg-s-10); border-bottom: 1px solid var(--gg-line); }
.svc-hero__grid { display: grid; gap: var(--gg-s-8); align-items: end; }
.svc-hero__text { display: grid; gap: var(--gg-s-3); max-width: 64ch; }
.svc-hero__text .gg-eyebrow { margin-top: var(--gg-s-3); }
.svc-hero h1 { font-size: var(--gg-fs-3xl); }
.svc-hero .gg-lead { color: var(--gg-ink-2); max-width: 56ch; }
@media (min-width: 900px) {
  .svc-hero { padding-block: var(--gg-s-8) var(--gg-s-14); }
  .svc-hero__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gg-s-16); }
}

/* feitenkaart (mono "lab"-laag) */
.svc-facts { display: grid; border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); background: var(--gg-paper); overflow: hidden; }
.svc-facts__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gg-s-4); align-items: baseline; padding: 14px 16px; }
.svc-facts__row + .svc-facts__row { border-top: 1px solid var(--gg-line); }
.svc-facts dt { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.svc-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.svc-facts__note { padding: 12px 16px; background: var(--gg-surface); font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.45; }

/* ---------- Layout met subnavigatie ---------- */
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gg-s-8); padding-block: var(--gg-s-8) var(--gg-section-y); }
.svc-layout > * { min-width: 0; }
.svc-content { min-width: 0; display: grid; gap: var(--gg-s-14); }
@media (min-width: 900px) {
  .svc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--gg-s-16); padding-top: var(--gg-s-12); }
  .svc-content { max-width: 820px; gap: var(--gg-s-20); }
}
@media (min-width: 1200px) { .svc-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--gg-s-24); } }

.svc-nav { min-width: 0; }
.svc-nav__title { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); margin-bottom: var(--gg-s-3); }
.svc-nav ul { list-style: none; margin: 0; padding: 0; }
/* mobiel: horizontale chiprij, nooit pagina-overflow */
@media (max-width: 899.98px) {
  .svc-nav { margin-inline: calc(var(--gg-gutter) * -1); }
  .svc-nav__title { padding-inline: var(--gg-gutter); }
  .svc-nav ul { display: flex; gap: 8px; overflow-x: auto; padding: 2px var(--gg-gutter) 6px; scrollbar-width: none; scroll-padding-inline: var(--gg-gutter); }
  .svc-nav ul::-webkit-scrollbar { display: none; }
  .svc-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--gg-tap); padding: 0 16px; border: 1px solid var(--gg-line-strong); border-radius: var(--gg-r-pill); font-size: var(--gg-fs-sm); font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--gg-ink); background: var(--gg-paper); }
  .svc-nav a[aria-current="page"] { background: var(--gg-ink); color: var(--gg-paper); border-color: var(--gg-ink); }
  .svc-nav a .gg-icon { width: 18px; height: 18px; }
}
@media (min-width: 900px) {
  .svc-nav__inner { position: sticky; top: calc(var(--gg-header-h) + var(--gg-s-6)); }
  .svc-nav li + li { border-top: 1px solid var(--gg-line); }
  .svc-nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; font-size: var(--gg-fs-sm); font-weight: 500; color: var(--gg-ink-2); text-decoration: none; transition: color var(--gg-dur-1) var(--gg-ease); }
  .svc-nav a .gg-icon { width: 18px; height: 18px; color: var(--gg-muted); }
  .svc-nav a:hover { color: var(--gg-ink); }
  .svc-nav a:hover .gg-icon { color: var(--gg-ink); }
  .svc-nav a[aria-current="page"] { color: var(--gg-ink); font-weight: 700; box-shadow: inset 2px 0 0 var(--gg-pink); padding-left: 14px; }
  .svc-nav a[aria-current="page"] .gg-icon { color: var(--gg-ink); }
  .svc-nav__help { margin-top: var(--gg-s-8); padding: 16px; border-radius: var(--gg-r-lg); background: var(--gg-surface); font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.5; }
  .svc-nav__help strong { display: block; color: var(--gg-ink); font-size: var(--gg-fs-sm); margin-bottom: 4px; }
}
@media (max-width: 899.98px) { .svc-nav__help { display: none; } }

/* ---------- Blokken ---------- */
.svc-block { display: grid; gap: var(--gg-s-5); scroll-margin-top: calc(var(--gg-header-h) + 24px); }
.svc-block__head { display: grid; gap: var(--gg-s-2); }
.svc-block__head h2 { font-size: var(--gg-fs-2xl); }
.svc-block__head p { color: var(--gg-muted); max-width: 62ch; }
.svc-block__kicker { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.svc-text { max-width: 66ch; color: var(--gg-ink-2); line-height: var(--gg-lh-body); }
.svc-text > * + * { margin-top: .85em; }
.svc-text ul { padding-left: 1.2em; }
.svc-text li + li { margin-top: .4em; }
.svc-text a { color: var(--gg-pink-strong); text-decoration: underline; text-underline-offset: 3px; }
.svc-text a:hover { color: var(--gg-pink-pressed); }
.svc-text strong { color: var(--gg-ink); }

/* placeholder voor nog vast te stellen gegevens */
.svc-ph { display: inline-flex; align-items: center; padding: 1px 6px; border: 1px dashed var(--gg-line-input); border-radius: var(--gg-r-xs); font-family: var(--gg-mono); font-size: .82em; font-weight: 500; letter-spacing: 0; color: var(--gg-ink-2); background: var(--gg-paper); white-space: nowrap; }
.svc-ph-note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.5; }
.svc-ph-note .gg-icon { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; stroke-width: 2; }

/* kerncijfers (3 kolommen) */
.svc-stats { display: grid; grid-template-columns: 1fr; border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); overflow: hidden; }
.svc-stat { display: grid; gap: 4px; padding: 18px 20px; background: var(--gg-paper); }
.svc-stat + .svc-stat { border-top: 1px solid var(--gg-line); }
.svc-stat__label { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.svc-stat__value { font-size: var(--gg-fs-xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.svc-stat__meta { font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.45; }
@media (min-width: 600px) {
  .svc-stats { grid-template-columns: repeat(3, 1fr); }
  .svc-stat + .svc-stat { border-top: 0; border-left: 1px solid var(--gg-line); }
}

/* ---------- Tabel (levertijden, kosten) ---------- */
.svc-table-wrap { border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); overflow: hidden; background: var(--gg-paper); }
.svc-table { width: 100%; font-size: var(--gg-fs-sm); }
.svc-table caption { text-align: left; padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--gg-line); background: var(--gg-surface); }
.svc-table caption small { display: block; font-weight: 400; color: var(--gg-muted); font-size: var(--gg-fs-xs); margin-top: 2px; }
.svc-table th, .svc-table td { text-align: left; vertical-align: top; padding: 14px 16px; }
.svc-table thead th { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 500; letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); border-bottom: 1px solid var(--gg-line); white-space: nowrap; }
.svc-table tbody tr + tr > * { border-top: 1px solid var(--gg-line); }
.svc-table tbody th { font-weight: 600; }
.svc-table .svc-num { font-family: var(--gg-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0; }
.svc-table .svc-muted { color: var(--gg-muted); font-size: var(--gg-fs-xs); display: block; margin-top: 2px; line-height: 1.45; }
.svc-table .svc-route { display: flex; align-items: center; gap: 8px; }
.svc-table .svc-route .gg-delivery__dot { margin: 0; flex: 0 0 auto; }
.svc-table tr.is-later > * { color: var(--gg-muted); background: var(--gg-surface); }
/* mobiel: rijen als kaarten met labels */
@media (max-width: 599.98px) {
  .svc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .svc-table--stack, .svc-table--stack tbody, .svc-table--stack tr, .svc-table--stack th, .svc-table--stack td { display: block; }
  .svc-table--stack tbody tr { padding: 6px 0; }
  .svc-table--stack tbody tr + tr { border-top: 1px solid var(--gg-line); }
  .svc-table--stack tbody tr + tr > * { border-top: 0; }
  .svc-table--stack tbody th { padding: 12px 16px 6px; font-size: var(--gg-fs-base); }
  .svc-table--stack td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 6px 16px; }
  .svc-table--stack td::before { content: attr(data-label); font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--gg-muted); padding-top: 3px; }
  .svc-table--stack td:last-child { padding-bottom: 14px; }
}

/* ---------- Stappen ---------- */
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: svc-step; }
.svc-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding-bottom: var(--gg-s-6); }
.svc-step:last-child { padding-bottom: 0; }
.svc-step::before { counter-increment: svc-step; content: counter(svc-step, decimal-leading-zero); grid-row: span 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--gg-ink); background: var(--gg-paper); font-family: var(--gg-mono); font-size: var(--gg-fs-xs); font-weight: 600; position: relative; z-index: 1; }
.svc-step:not(:last-child)::after { content: ""; position: absolute; left: 19.25px; top: 40px; bottom: 0; width: 1.5px; background: var(--gg-line-strong); }
.svc-step__title { font-weight: 700; font-size: var(--gg-fs-base); padding-top: 8px; }
.svc-step__text { font-size: var(--gg-fs-sm); color: var(--gg-ink-2); line-height: 1.55; max-width: 60ch; }
.svc-step__meta { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); letter-spacing: .02em; margin-top: 2px; }
.svc-step__text a { color: var(--gg-pink-strong); }
.svc-step--done::before { content: ""; background: var(--gg-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.svc-step--now::before { border-color: var(--gg-pink); color: var(--gg-pink-strong); box-shadow: 0 0 0 4px var(--gg-pink-tint); }
@media (min-width: 900px) {
  .svc-steps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gg-s-6); }
  .svc-steps--row .svc-step { grid-template-columns: 1fr; padding-bottom: 0; }
  .svc-steps--row .svc-step::before { grid-row: auto; margin-bottom: 12px; }
  .svc-steps--row .svc-step:not(:last-child)::after { left: 52px; right: calc(var(--gg-s-6) * -1 + 12px); top: 19.25px; bottom: auto; width: auto; height: 1.5px; }
  .svc-steps--row .svc-step__title { padding-top: 0; }
}

/* ---------- Tijdlijn bedenktijd ---------- */
.svc-timeline { display: grid; gap: var(--gg-s-4); padding: 20px; border-radius: var(--gg-r-xl); background: var(--gg-surface); }
.svc-timeline__bar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.svc-timeline__seg { position: relative; display: grid; gap: 6px; padding: 14px 14px 12px; border-radius: var(--gg-r-md); background: var(--gg-paper); border: 1px solid var(--gg-line); min-width: 0; }
.svc-timeline__seg--a { border-top: 3px solid var(--gg-ink); }
.svc-timeline__seg--b { border-top: 3px solid var(--gg-line-input); }
.svc-timeline__days { font-family: var(--gg-mono); font-size: var(--gg-fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.svc-timeline__days small { font-size: var(--gg-fs-xs); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.svc-timeline__label { font-weight: 600; font-size: var(--gg-fs-sm); }
.svc-timeline__text { font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.45; }
.svc-timeline__ticks { display: flex; justify-content: space-between; font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); letter-spacing: .02em; }
.svc-timeline__refund { display: flex; gap: 12px; align-items: flex-start; padding-top: var(--gg-s-4); border-top: 1px solid var(--gg-line-strong); font-size: var(--gg-fs-sm); }
.svc-timeline__refund .gg-icon { flex: 0 0 auto; color: var(--gg-success); }
@media (min-width: 600px) { .svc-timeline { padding: 28px; } }

/* ---------- Twee kolommen: mag / mag niet ---------- */
.svc-compare { display: grid; gap: var(--gg-s-3); }
@media (min-width: 600px) { .svc-compare { grid-template-columns: 1fr 1fr; } }
.svc-compare__col { padding: 18px 20px; border-radius: var(--gg-r-lg); border: 1px solid var(--gg-line); background: var(--gg-paper); display: grid; gap: 10px; align-content: start; }
.svc-compare__title { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.svc-compare__title .gg-icon { width: 20px; height: 20px; stroke-width: 2; }
.svc-compare__col--yes .svc-compare__title .gg-icon { color: var(--gg-success); }
.svc-compare__col--no .svc-compare__title .gg-icon { color: var(--gg-error); }
.svc-compare ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--gg-fs-sm); color: var(--gg-ink-2); line-height: 1.5; }
.svc-compare li { position: relative; padding-left: 16px; }
.svc-compare li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 1px; background: var(--gg-line-input); }

/* ---------- Onderwerptegels (hub) ---------- */
.svc-topics { display: grid; gap: var(--gg-s-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .svc-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .svc-topics { grid-template-columns: repeat(6, minmax(0, 1fr)); } .svc-topic { grid-column: span 2; } .svc-topic:nth-child(4), .svc-topic:nth-child(5) { grid-column: span 3; } }
.svc-topic { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 20px; border: 1px solid var(--gg-line); border-radius: var(--gg-r-xl); background: var(--gg-paper); min-width: 0; transition: border-color var(--gg-dur-1) var(--gg-ease), box-shadow var(--gg-dur-2) var(--gg-ease); }
.svc-topic:hover { border-color: var(--gg-ink); box-shadow: var(--gg-shadow-2); }
.svc-topic:has(.svc-topic__link:focus-visible) { outline: 2px solid var(--gg-focus); outline-offset: 2px; }
.svc-topic__icon { width: 44px; height: 44px; border-radius: var(--gg-r-md); display: grid; place-items: center; background: var(--gg-surface); color: var(--gg-ink); }
.svc-topic__icon .gg-icon { width: 22px; height: 22px; }
.svc-topic__title { font-size: var(--gg-fs-lg); font-weight: 700; letter-spacing: -0.015em; }
.svc-topic__link { color: inherit; text-decoration: none; }
.svc-topic__link:focus-visible { outline: none; }
.svc-topic__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.svc-topic__qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; z-index: 1; }
.svc-topic__qs a { display: flex; align-items: center; gap: 6px; min-height: 36px; font-size: var(--gg-fs-sm); color: var(--gg-ink-2); text-decoration: underline; text-decoration-color: var(--gg-line-strong); text-underline-offset: 3px; }
.svc-topic__qs a:hover { color: var(--gg-pink-strong); text-decoration-color: currentColor; }
@media (pointer: coarse) { .svc-topic__qs a { min-height: var(--gg-tap); } }
.svc-topic__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--gg-line); }
.svc-topic__meta { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: .02em; color: var(--gg-muted); }
.svc-topic__arrow { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gg-ink); color: var(--gg-paper); transition: transform var(--gg-dur-2) var(--gg-ease); flex: 0 0 auto; }
.svc-topic__arrow .gg-icon { width: 18px; height: 18px; }
.svc-topic:hover .svc-topic__arrow { transform: translateX(3px); }
.svc-topic--accent { background: var(--gg-surface); border-color: var(--gg-surface); }
.svc-topic--accent .svc-topic__icon { background: var(--gg-paper); }

/* ---------- Hub: zoekkop ---------- */
.svc-hub-hero { padding-block: var(--gg-s-6) var(--gg-s-12); background: var(--gg-surface); }
.svc-hub-hero__inner { display: grid; gap: var(--gg-s-6); }
.svc-hub-hero h1 { font-size: var(--gg-fs-3xl); max-width: 18ch; }
.svc-hub-search { display: grid; gap: var(--gg-s-3); max-width: 720px; }
.svc-hub-search .gg-search-field .gg-input { min-height: 56px; background: var(--gg-paper); border-color: var(--gg-line-input); font-size: var(--gg-fs-md); padding-right: 52px; }
.svc-hub-search .gg-search-field .gg-input:hover { border-color: var(--gg-ink); }
.svc-hub-search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.svc-hub-search__clear[hidden] { display: none; }
.svc-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-quick__label { width: 100%; font-size: var(--gg-fs-xs); color: var(--gg-muted); }
.svc-quick a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--gg-tap); padding: 0 14px; border-radius: var(--gg-r-pill); background: var(--gg-paper); border: 1px solid var(--gg-line-strong); font-size: var(--gg-fs-sm); font-weight: 600; color: var(--gg-ink); text-decoration: none; }
.svc-quick a:hover { border-color: var(--gg-ink); }
.svc-quick a .gg-icon { width: 18px; height: 18px; }
.svc-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: var(--gg-fs-sm); color: var(--gg-ink-2); }
.svc-hours__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gg-success); box-shadow: 0 0 0 3px var(--gg-success-tint); flex: 0 0 auto; }
.svc-hours__dot.is-closed { background: var(--gg-line-input); box-shadow: 0 0 0 3px var(--gg-surface-2); }
.svc-hours__item { display: inline-flex; align-items: center; gap: 8px; }
.svc-hours .gg-mono { font-size: var(--gg-fs-xs); color: var(--gg-muted); }
@media (min-width: 900px) {
  .svc-hub-hero { padding-block: var(--gg-s-8) var(--gg-s-16); }
  .svc-hub-hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: var(--gg-s-16); }
  .svc-hub-hero__inner > .gg-breadcrumb { grid-column: 1 / -1; }
}

/* ---------- FAQ ---------- */
.svc-faq__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--gg-s-4); }
.svc-faq__filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; max-width: 100%; }
.svc-faq__filters::-webkit-scrollbar { display: none; }
.svc-faq__count { font-size: var(--gg-fs-sm); color: var(--gg-muted); }
.svc-faq__group { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); padding: 22px 0 6px; }
.svc-faq .gg-accordion__trigger mark, .svc-faq .gg-accordion__panel mark { background: var(--gg-pink-tint); color: inherit; border-radius: 2px; padding: 0 1px; }
.svc-faq__more { margin-top: 2px; }
.svc-faq__more a { font-weight: 600; }
.svc-faq__empty[hidden] { display: none; }

/* ---------- Beleid (hub) ---------- */
.svc-policy { display: grid; gap: var(--gg-s-3); }
@media (min-width: 900px) { .svc-policy { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.svc-policy__main { padding: 24px; border-radius: var(--gg-r-xl); border: 1px solid var(--gg-line); display: grid; gap: 14px; scroll-margin-top: calc(var(--gg-header-h) + 24px); }
.svc-policy__list { display: grid; gap: var(--gg-s-3); }
.svc-policy__item { padding: 18px 20px; border-radius: var(--gg-r-lg); background: var(--gg-surface); display: grid; gap: 6px; scroll-margin-top: calc(var(--gg-header-h) + 24px); }
.svc-policy__item h3, .svc-policy__main h3 { font-size: var(--gg-fs-lg); }
.svc-policy__item p { font-size: var(--gg-fs-sm); color: var(--gg-ink-2); }
.svc-policy__status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:target.svc-policy__item, :target.svc-policy__main { box-shadow: 0 0 0 2px var(--gg-ink); }

/* ---------- Bedrijfsgegevens ---------- */
.svc-company { display: grid; gap: 0; border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); overflow: hidden; background: var(--gg-paper); }
.svc-company__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--gg-surface); border-bottom: 1px solid var(--gg-line); }
.svc-company__head h2, .svc-company__head h3 { font-size: var(--gg-fs-base); }
.svc-company dl { margin: 0; display: grid; }
.svc-company__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 16px; font-size: var(--gg-fs-sm); }
.svc-company__row + .svc-company__row { border-top: 1px solid var(--gg-line); }
.svc-company dt { color: var(--gg-muted); }
.svc-company dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Contactband onderaan ---------- */
.svc-cta { padding: 24px; border-radius: var(--gg-r-xl); background: var(--gg-ink); color: var(--gg-on-dark); display: grid; gap: var(--gg-s-5); }
.svc-cta h2 { font-size: var(--gg-fs-xl); color: var(--gg-on-dark); }
.svc-cta p { color: var(--gg-on-dark-muted); font-size: var(--gg-fs-sm); }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-cta .gg-btn--secondary { --_fg: var(--gg-on-dark); --_bd: rgba(244, 242, 248, .7); }
.svc-cta .gg-btn--secondary:hover { --_bg: var(--gg-on-dark); --_fg: var(--gg-ink); --_bd: var(--gg-on-dark); }
.svc-cta .gg-btn:focus-visible { outline-color: var(--gg-on-dark); }
.svc-cta__meta { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: .02em; color: var(--gg-on-dark-muted); }
@media (min-width: 900px) { .svc-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 32px 36px; } }

/* ---------- Kaarten met kanaal ---------- */
.svc-channels { display: grid; gap: var(--gg-s-3); }
@media (min-width: 600px) { .svc-channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-channel { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); background: var(--gg-paper); min-width: 0; }
.svc-channel .gg-icon { color: var(--gg-ink); }
.svc-channel__title { font-weight: 700; }
.svc-channel__value { font-size: var(--gg-fs-sm); overflow-wrap: anywhere; }
.svc-channel__value a { color: var(--gg-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gg-line-strong); text-underline-offset: 3px; }
.svc-channel__value a:hover { color: var(--gg-pink-strong); text-decoration-color: currentColor; }
.svc-channel__meta { font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.45; }

/* ---------- Formulierkaart + flow ---------- */
.svc-form-card { display: grid; gap: var(--gg-s-5); padding: 20px; border: 1px solid var(--gg-line); border-radius: var(--gg-r-xl); background: var(--gg-paper); box-shadow: var(--gg-shadow-1); scroll-margin-top: calc(var(--gg-header-h) + 16px); }
@media (min-width: 600px) { .svc-form-card { padding: 32px; } }
.svc-form-card__head { display: grid; gap: 6px; }
.svc-form-card__head h2 { font-size: var(--gg-fs-xl); }
.svc-form-card__head p { color: var(--gg-muted); font-size: var(--gg-fs-sm); }
.svc-form-grid { display: grid; gap: var(--gg-s-4); }
@media (min-width: 600px) { .svc-form-grid--2 { grid-template-columns: 1fr 1fr; } .svc-form-grid--2 > .svc-span { grid-column: 1 / -1; } }
.svc-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
.svc-fieldset legend { font-size: var(--gg-fs-sm); font-weight: 600; margin-bottom: 8px; padding: 0; }
.svc-choices { display: grid; gap: 8px; }
@media (min-width: 600px) { .svc-choices--2 { grid-template-columns: 1fr 1fr; } }
.svc-form-actions { display: grid; gap: 10px; }
@media (min-width: 600px) { .svc-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; } }
.svc-form-actions .gg-help { max-width: 42ch; }
.svc-counter { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); justify-self: end; margin-top: -2px; }
.svc-counter.is-low { color: var(--gg-warning); }
.svc-proto-hint { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--gg-r-md); border: 1px dashed var(--gg-line-input); font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); line-height: 1.6; color: var(--gg-ink-2); letter-spacing: .01em; }
.svc-proto-hint .gg-icon { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; stroke-width: 2; }
.svc-file { display: grid; gap: 8px; }
.svc-file__drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px; border: 1.5px dashed var(--gg-line-input); border-radius: var(--gg-r-md); background: var(--gg-surface); text-align: center; font-size: var(--gg-fs-sm); color: var(--gg-ink-2); cursor: pointer; }
.svc-file__drop:hover { border-color: var(--gg-ink); }
.svc-file__drop:has(input:focus-visible) { outline: 2px solid var(--gg-focus); outline-offset: 2px; }
.svc-file__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.svc-file__drop strong { color: var(--gg-ink); text-decoration: underline; text-underline-offset: 3px; }
.svc-file__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--gg-fs-sm); }
.svc-file__list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--gg-r-sm); background: var(--gg-surface); min-width: 0; }
.svc-file__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.svc-file__list .gg-mono { color: var(--gg-muted); font-size: var(--gg-fs-2xs); flex: 0 0 auto; }

/* voortgang in flow */
.svc-progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.svc-progress li { display: grid; gap: 8px; font-size: var(--gg-fs-xs); color: var(--gg-muted); min-width: 0; }
.svc-progress li::before { content: ""; height: 3px; border-radius: 3px; background: var(--gg-surface-3); }
.svc-progress li span { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: .04em; text-transform: uppercase; display: block; }
.svc-progress li b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-progress li.is-done::before, .svc-progress li[aria-current="step"]::before { background: var(--gg-ink); }
.svc-progress li[aria-current="step"] { color: var(--gg-ink); }
.svc-progress li.is-done { color: var(--gg-ink-2); }

/* samenvatting (controle-stap) */
.svc-summary { display: grid; border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); overflow: hidden; }
.svc-summary__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 12px 16px; font-size: var(--gg-fs-sm); }
.svc-summary__row + .svc-summary__row { border-top: 1px solid var(--gg-line); }
.svc-summary dt { color: var(--gg-muted); }
.svc-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.svc-summary dd .gg-muted { font-weight: 400; }
.svc-summary__edit { display: flex; justify-content: flex-start; }

/* bevestiging */
.svc-done { display: grid; gap: var(--gg-s-5); }
.svc-done__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--gg-success-tint); color: var(--gg-success); }
.svc-done__icon .gg-icon { width: 28px; height: 28px; stroke-width: 2; }
.svc-done h2 { font-size: var(--gg-fs-2xl); }
.svc-done h2:focus { outline: none; }
.svc-done h2:focus-visible { outline: 2px solid var(--gg-focus); outline-offset: 4px; border-radius: 4px; }
.svc-ref { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--gg-r-md); background: var(--gg-surface); font-family: var(--gg-mono); font-size: var(--gg-fs-sm); font-weight: 600; letter-spacing: .02em; justify-self: start; }
.svc-ref small { font-weight: 400; color: var(--gg-muted); font-size: var(--gg-fs-2xs); text-transform: uppercase; letter-spacing: var(--gg-ls-caps); }
.svc-done__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-flow [hidden] { display: none !important; }

/* modelformulier */
.svc-model { border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); background: var(--gg-paper); }
.svc-model__body { padding: 20px; font-size: var(--gg-fs-sm); line-height: 1.7; color: var(--gg-ink-2); }
.svc-model__body p + p { margin-top: .8em; }
.svc-model__line { display: block; border-bottom: 1px solid var(--gg-line-input); min-height: 1.7em; margin-top: 4px; }
.svc-model__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--gg-line); }
.svc-model__head h3 { font-size: var(--gg-fs-base); }

/* uitgelichte uitzondering-lijst */
.svc-exceptions { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); overflow: hidden; }
.svc-exceptions li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; font-size: var(--gg-fs-sm); }
.svc-exceptions li + li { border-top: 1px solid var(--gg-line); }
.svc-exceptions .gg-icon { width: 20px; height: 20px; color: var(--gg-muted); margin-top: 1px; }
.svc-exceptions strong { display: block; color: var(--gg-ink); }
.svc-exceptions span { color: var(--gg-ink-2); }

/* pakketten-illustratie (gemengde bestelling) */
.svc-parcels { display: grid; gap: 10px; }
@media (min-width: 600px) { .svc-parcels { grid-template-columns: 1fr 1fr; } }
.svc-parcel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px; border-radius: var(--gg-r-lg); border: 1px solid var(--gg-line); background: var(--gg-paper); }
.svc-parcel__icon { grid-row: span 3; width: 44px; height: 44px; border-radius: var(--gg-r-md); display: grid; place-items: center; background: var(--gg-surface); }
.svc-parcel__title { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.svc-parcel__title .gg-delivery__dot { margin: 0; }
.svc-parcel__meta { font-family: var(--gg-mono); font-size: var(--gg-fs-xs); color: var(--gg-ink-2); }
.svc-parcel__items { font-size: var(--gg-fs-xs); color: var(--gg-muted); }

/* track & trace voorbeeld */
.svc-track { display: grid; gap: var(--gg-s-5); padding: 20px; border-radius: var(--gg-r-xl); border: 1px solid var(--gg-line); }
@media (min-width: 600px) { .svc-track { padding: 28px; } }
.svc-track__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.svc-track__head .gg-mono { font-size: var(--gg-fs-xs); color: var(--gg-muted); }

/* aanbevolen producten 404 */
.svc-404 { padding-block: var(--gg-s-10) var(--gg-section-y); }
.svc-404__grid { display: grid; gap: var(--gg-s-10); align-items: center; }
@media (min-width: 900px) { .svc-404__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--gg-s-16); } }
.svc-404__code { font-family: var(--gg-mono); font-size: var(--gg-fs-xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); display: flex; gap: 10px; align-items: center; }
.svc-404__code b { color: var(--gg-ink); font-weight: 600; padding: 3px 8px; border: 1px solid var(--gg-ink); border-radius: var(--gg-r-xs); letter-spacing: .08em; }
.svc-404 h1 { font-size: var(--gg-fs-4xl); max-width: 14ch; margin-top: var(--gg-s-4); }
.svc-404__text { margin-top: var(--gg-s-4); max-width: 52ch; color: var(--gg-ink-2); font-size: var(--gg-fs-md); }
.svc-404__search { margin-top: var(--gg-s-8); max-width: 560px; }
.svc-404__search .gg-input-group .gg-input { min-height: 52px; }
.svc-404__search .gg-input-group .gg-btn { min-height: 52px; }
.svc-404__art { position: relative; border-radius: var(--gg-r-2xl); background: var(--gg-surface); aspect-ratio: 5 / 4; overflow: hidden; display: grid; place-items: center; }
.svc-404__art svg { width: 78%; height: auto; }
.svc-404__art-cap { position: absolute; left: 16px; bottom: 14px; font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); letter-spacing: .02em; }
@media (max-width: 899.98px) { .svc-404__art { aspect-ratio: 16 / 9; } .svc-404__art svg { width: 60%; } }
.svc-404 .svc-px { fill: var(--gg-ink); }
.svc-404 .svc-px--pink { fill: var(--gg-pink); }
.svc-404 .svc-px--soft { fill: var(--gg-line-strong); }
.svc-404 .svc-orbit { fill: none; stroke: var(--gg-line-input); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .svc-404 .svc-drift { animation: svc-drift 7s var(--gg-ease-in-out) infinite alternate; transform-origin: center; transform-box: fill-box; }
  @keyframes svc-drift { from { transform: translate(-4px, 3px) rotate(-6deg); } to { transform: translate(5px, -4px) rotate(5deg); } }
}
.svc-routes { display: grid; gap: var(--gg-s-3); }
@media (min-width: 600px) { .svc-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-route-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 16px; border: 1px solid var(--gg-line); border-radius: var(--gg-r-lg); text-decoration: none; color: var(--gg-ink); background: var(--gg-paper); transition: border-color var(--gg-dur-1) var(--gg-ease); }
.svc-route-card:hover { border-color: var(--gg-ink); }
.svc-route-card__icon { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--gg-r-md); display: grid; place-items: center; background: var(--gg-surface); }
.svc-route-card__title { font-weight: 700; }
.svc-route-card__text { grid-column: 2; font-size: var(--gg-fs-xs); color: var(--gg-muted); line-height: 1.45; }
.svc-route-card__arrow { grid-row: 1 / span 2; grid-column: 3; color: var(--gg-ink); transition: transform var(--gg-dur-2) var(--gg-ease); }
.svc-route-card:hover .svc-route-card__arrow { transform: translateX(3px); }

/* hulpklassen binnen familie */
.svc-mt-2 { margin-top: var(--gg-s-2); }
.svc-mt-4 { margin-top: var(--gg-s-4); }
.svc-mt-6 { margin-top: var(--gg-s-6); }
.svc-inline-list { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: var(--gg-fs-sm); }
.svc-inline-list li { display: inline-flex; align-items: center; gap: 6px; }
.svc-inline-list .gg-icon { width: 16px; height: 16px; color: var(--gg-success); stroke-width: 2; }
.svc-hint { margin-top: 6px; }

@media print {
  [data-gg], .gg-header, .gg-footer, .gg-announce, .svc-nav, .svc-cta, .gg-proto-badge, .gg-cookie { display: none !important; }
  .svc-print-hide { display: none !important; }
}

/* vinkjeslijst */
.svc-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--gg-fs-sm); color: var(--gg-ink-2); line-height: 1.55; }
.svc-checklist li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; }
.svc-checklist .gg-icon { width: 20px; height: 20px; color: var(--gg-success); stroke-width: 2; margin-top: 1px; }
.svc-checklist--no .gg-icon { color: var(--gg-error); }

/* ---------- Aanvullingen: garantie, contact, 404 ---------- */
.svc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--gg-s-3); }
@media (min-width: 600px) { .svc-choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svc-choices--4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .svc-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-choices .gg-choice { min-height: 44px; padding: 12px 14px; }
.svc-choices .gg-choice__meta { display: block; font-size: var(--gg-fs-xs); }
.svc-row-help { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.svc-row-help .svc-counter { margin-top: 0; flex: 0 0 auto; }
.svc-anchor { scroll-margin-top: calc(var(--gg-header-h) + 16px); }
.svc-404 .svc-px-gap { fill: none; stroke: var(--gg-line-input); stroke-width: 1.5; stroke-dasharray: 4 4; }
.svc-404__path { color: var(--gg-ink-2); text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.svc-404__code { flex-wrap: wrap; }
.svc-404 h1 { max-width: 16ch; text-wrap: balance; }
.svc-404__help { font-size: var(--gg-fs-sm); color: var(--gg-ink-2); text-align: center; max-width: 60ch; margin-inline: auto; }
.svc-form-grid > .gg-field { align-content: start; }
@media (max-width: 599.98px) { .svc-choices--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599.98px) { .svc-404__art { aspect-ratio: 2 / 1; } .svc-404__art svg { width: 54%; } .svc-404__art-cap { left: 12px; bottom: 8px; } }
.svc-facts__note dd { margin: 0; text-align: left; font-weight: 400; }