/* ============================================================================
   Gloow Design System 2026 (g-)
   Eén bron voor tokens en componenten van info- en landingspagina's.
   Gebaseerd op de beste bestaande designtaal (bk-/gc-/sv-/hs-wizards,
   tarievenpagina en partner-public.css), gepromoveerd naar één set.

   Regels:
   - Geen hexwaardes buiten dit bestand; pagina's gebruiken uitsluitend tokens.
   - Geen box-shadows: diepte via achtergrondkleur, hairlines, spacing en font-weight.
   - Breakpoints: 575 / 767 / 991 / 1199 (max-width) en 768 / 992 (min-width).
   - Radius alleen uit de --r-* schaal. px alleen voor 1px-hairlines.
   - Roze (--pink) is een accentkleur voor vlakken en iconen, NOOIT als tekstkleur.
     Tekst-accenten op licht zijn altijd donkerblauw (--ink / --ink-strong).
   - Alle componenten zijn mobile-first opgezet.
   ============================================================================ */

:root {
    /* Kernkleuren
       Stroomlijning 5-8-2026: er is nog maar EEN donker (--ink). De legacy tokens
       --dark (#141013) en --dark2 (#020117) zijn aliassen van --ink geworden;
       gebruik ze niet meer in nieuwe code. */
    --ink:            #03011f;   /* het enige donker: tekst op wit en donkere vlakken */
    --ink-strong:     #01034f;   /* tekst op beige, headings-accent, links, hover */
    --dark:           #03011f;   /* legacy alias, niet meer gebruiken */
    --dark2:          #03011f;   /* legacy alias, niet meer gebruiken */
    --purple:         #cdcbff;   /* primaire CTA en highlights */
    --pink:           #F5B7FC;   /* accentkleur voor vlakken en iconen (vervangt dark purple) */
    --yellow:         #ffa429;   /* sterren, kleine accenten */
    --beige:          #F8F4F0;   /* lichte sectie-achtergrond */
    --surface:        #ffffff;   /* kaarten */
    --tint:           #f2f1ff;   /* zachte paarse achtergrond, selected state */
    --text-muted:     #6b6675;   /* secundaire tekst op licht */
    --border:         #c0c9d5;   /* interactieve randen */
    --hairline:       #e6e4f2;   /* kaartranden */
    --hairline-soft:  #f0eef8;   /* scheidingslijnen binnen kaarten */
    --success:        #16a34a;
    --success-ink:    #0f5b2a;
    --success-bg:     #dcfce7;
    --danger:         #b02420;
    --danger-bg:      #fff1f0;
    --danger-border:  #ffd1cf;

    /* Radius-schaal */
    --r-sm:   .8rem;
    --r-md:   1.2rem;
    --r-lg:   1.6rem;
    --r-xl:   2rem;
    --r-pill: 10rem;

    /* Focus */
    --focus-ring: 0 0 0 .3rem rgba(1, 3, 79, .25);
}

/* ── Basis binnen het systeem (scope .gds voorkomt lekken naar oude pagina's) ── */

.gds { color: var(--ink); }

/* De site zet main { overflow: hidden }; dat maakt main een scroll-container en
   breekt daarmee position:sticky EN scroll-gedreven animaties (view() kijkt dan
   naar main in plaats van de viewport). Binnen het designsysteem: clip alleen
   horizontaal. */
main.gds { overflow: visible; overflow-x: clip; }

.gds h1, .gds h2, .gds h3, .gds h4 {
    font-family: var(--font-brand);
    color: inherit;
    text-wrap: balance;
    hyphens: none;           /* nooit "laseron-tharing" */
    overflow-wrap: break-word;
}
.gds h1 { font-size: clamp(3.2rem, 7.5vw, 5.2rem); line-height: 1.08; letter-spacing: -.01em; font-weight: 700; }
.gds h2 { font-size: clamp(2.4rem, 5vw, 3.6rem);   line-height: 1.15; font-weight: 700; }
.gds h3 { font-size: clamp(1.9rem, 3vw, 2.4rem);   line-height: 1.25; font-weight: 700; }
.gds h4 { font-size: 1.8rem; line-height: 1.35; font-weight: 700; }

.gds :focus-visible {
    outline: .3rem solid var(--ink-strong);
    outline-offset: .2rem;
    border-radius: .3rem;
}
.gds :focus:not(:focus-visible) { outline: none; }
.g-section--ink :focus-visible, .g-hero--ink :focus-visible { outline-color: #fff; }

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

/* ── Breadcrumbs (elk kruimel is klikbaar, ook de huidige pagina) ─────────── */

.g-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: 0; margin: 0 0 1.6rem; list-style: none; }
.g-breadcrumb li { display: flex; align-items: center; gap: .8rem; }
.g-breadcrumb a {
    font-size: 1.25rem; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
    transition: color .15s;
}
.g-breadcrumb a:hover { color: var(--ink-strong); text-decoration: underline; }
.g-breadcrumb a[aria-current="page"] { color: var(--ink-strong); }
.g-breadcrumb li + li::before { content: "/"; color: var(--border); font-size: 1.2rem; }
.g-hero--ink .g-breadcrumb a, .g-section--ink .g-breadcrumb a { color: rgba(255, 255, 255, .6); }
.g-hero--ink .g-breadcrumb a:hover, .g-hero--ink .g-breadcrumb a[aria-current="page"],
.g-section--ink .g-breadcrumb a:hover, .g-section--ink .g-breadcrumb a[aria-current="page"] { color: #fff; }

/* ── Video (native, 16:9, afgeronde hoeken) ───────────────────────────────── */

.g-video {
    position: relative;
    border-radius: var(--r-lg); overflow: clip;
    aspect-ratio: 16 / 9;
    background: var(--ink);
}
.g-video video, .g-video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block; border: 0; filter: none;
}
.g-video-caption { font-size: 1.35rem; color: var(--text-muted); text-align: center; margin-top: 1.2rem; }

/* ── Secties ──────────────────────────────────────────────────────────────── */

.g-section         { padding: clamp(4.4rem, 8vw, 8rem) 0; }
.g-section--tight  { padding: clamp(2.8rem, 5vw, 4.8rem) 0; }
.g-section--wide   { padding: clamp(6rem, 10vw, 11rem) 0; }
.g-section--beige  { background: var(--beige); color: var(--ink-strong); }
.g-section--tint   { background: var(--tint); }
.g-section--purple { background: var(--purple); }
.g-section--pink   { background: var(--pink); }
.g-section--ink    { background: var(--ink); color: #fff; }
.g-section--ink .g-sub,
.g-on-dark .g-sub  { color: rgba(255, 255, 255, .78); }

/* Sectiekop */
.g-section-head { max-width: 64rem; margin: 0 auto clamp(2.8rem, 5vw, 4.4rem); text-align: center; }
.g-section-head--left { margin-left: 0; text-align: left; }
.g-eyebrow {
    display: block;
    font-size: 1.2rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-strong);
    margin-bottom: 1.2rem;
}
.g-section--ink .g-eyebrow, .g-on-dark .g-eyebrow { color: var(--purple); }
.g-sub { font-size: 1.6rem; line-height: 1.7; color: var(--text-muted); margin-top: 1.4rem; }

/* ── Hero (licht is de standaard) ─────────────────────────────────────────────
   Mobiel is de afbeelding een compacte band met de reviewscore als chip erop,
   zodat de hero kort blijft. Desktop: tekst links, beeld rechts met een
   asymmetrische ronding en dezelfde chip op het beeld. */

.g-hero {
    /* Volledig beige hero (geen witte fade), met alleen de zachte roze gloed */
    background:
        radial-gradient(48rem 30rem at -10% 110%, rgba(245, 183, 252, .3), transparent 60%),
        var(--beige);
    /* Compacte top zodat het kruimelpad dicht onder de navigatie zit */
    padding: clamp(1.4rem, 2.5vw, 2.4rem) 0 clamp(3.2rem, 5vw, 6.4rem);
    color: var(--ink-strong);
}
.g-hero .g-breadcrumb { margin-bottom: clamp(1.8rem, 3vw, 3.2rem); }
.g-hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 992px) { .g-hero-grid { grid-template-columns: 11fr 9fr; column-gap: 5.6rem; row-gap: 2.4rem; } }

.g-hero-media { position: relative; }
.g-hero-img {
    width: 100%; aspect-ratio: 21 / 10; object-fit: cover;
    border-radius: var(--r-lg); display: block; filter: none;
}
@media (min-width: 992px) {
    .g-hero-img { aspect-ratio: 4 / 3.4; border-radius: var(--r-xl) 12rem var(--r-xl) var(--r-xl); }
}

/* Reviewscore-chip op het beeld */
.g-hero-chip {
    position: absolute; left: 1.2rem; bottom: 1.2rem;
    display: inline-flex; align-items: center; gap: .7rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--r-pill);
    padding: .7rem 1.4rem;
    font-size: 1.3rem; color: var(--ink);
}
.g-hero-chip .material-symbols-outlined { color: var(--yellow); font-size: 1.7rem; }
.g-hero-chip strong { font-weight: 800; }

.g-hero .g-eyebrow { margin-bottom: 1.2rem; }
.g-hero-sub { font-size: 1.65rem; line-height: 1.65; color: var(--text-muted); margin: 1.6rem 0 0; max-width: 52ch; }
.g-hero-cta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }

/* Mobiele volgorde: tekst + CTA's eerst, beeld daarna, trust bar onderaan */
@media (max-width: 991px) {
    .g-hero-grid { grid-template-columns: 1fr; }
    .g-hero-media { order: 2; margin-top: 2.2rem; }
    .g-hero-text  { order: 1; }
}

/* Losse social pill (voor hero's zonder afbeelding) */
.g-hero-social {
    display: inline-flex; align-items: center; gap: .8rem;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: var(--r-pill);
    padding: .7rem 1.5rem; margin-top: 2.2rem;
    font-size: 1.35rem; color: var(--ink);
}
.g-hero-social .material-symbols-outlined { color: var(--yellow); font-size: 1.8rem; }
.g-hero-social strong { font-weight: 800; }

/* Trust bar: hoort IN .g-hero-text, direct onder de CTA-rij */
.g-trust-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
    margin-top: 1.6rem; font-size: 1.3rem; color: var(--text-muted);
}
.g-trust-sep { color: var(--ink-strong); }

/* Donkere hero-variant (alleen als bewuste uitzondering) */
.g-hero--ink {
    background:
        radial-gradient(64rem 40rem at 80% -20%, rgba(245, 183, 252, .25), transparent 60%),
        var(--dark2, #020117);
    color: #fff;
}
.g-hero--ink .g-hero-sub  { color: rgba(255, 255, 255, .78); }
.g-hero--ink .g-eyebrow   { color: var(--purple); }
.g-hero--ink .g-trust-bar { color: rgba(255, 255, 255, .6); }
.g-hero--ink .g-trust-sep { color: var(--purple); }
.g-hero--ink .g-hero-social {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25); color: #fff;
}
/* Witte solide rand zodat het beeld op het donkere vlak eruit springt */
.g-hero--ink .g-hero-img { border: .4rem solid #fff; }

/* ── Knoppen ──────────────────────────────────────────────────────────────── */

.g-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .8rem;
    min-height: 5rem; padding: 1.2rem 3.2rem;
    border: none; border-radius: var(--r-pill); cursor: pointer;
    background: var(--purple); color: var(--ink);
    font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700; line-height: 1.2;
    text-decoration: none; text-align: center;
    transition: background .18s, color .18s, border-color .18s;
}
.g-btn:hover  { background: var(--ink-strong); color: #fff; }
.g-btn--dark  { background: var(--ink); color: #fff; }
.g-btn--dark:hover { background: var(--purple); color: var(--ink); }
.g-btn--ghost { background: transparent; border: .15rem solid var(--ink); color: var(--ink); }
.g-btn--ghost:hover { background: var(--ink); color: #fff; }
.g-btn--ghost-white { background: transparent; border: .15rem solid rgba(255,255,255,.7); color: #fff; }
.g-btn--ghost-white:hover { background: #fff; color: var(--ink); }
.g-btn--back  { background: #efeef4; color: #4b4657; }
.g-btn--back:hover { background: var(--hairline); color: var(--ink); }
.g-btn--sm    { min-height: 4rem; padding: .8rem 2.2rem; font-size: 1.35rem; }
.g-btn--block { display: flex; width: 100%; }
.g-btn .material-symbols-outlined { font-size: 1.9rem; }

/* ── USP-rij (groene bevestiging) en stats ────────────────────────────────── */

.g-usp-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
@media (min-width: 768px) { .g-usp-row { grid-template-columns: repeat(4, 1fr); } }
.g-usp { display: flex; align-items: center; gap: 1.2rem; }
.g-usp-icon {
    flex: 0 0 auto; width: 4.4rem; height: 4.4rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--success-bg); border-radius: 50%;
    color: var(--success-ink);
}
.g-usp-icon .material-symbols-outlined { font-size: 2.2rem; }
.g-usp-label { font-size: 1.4rem; font-weight: 600; line-height: 1.4; }

/* Stats: een donkerblauw paneel ("in cijfers"), rijk in plaats van kaal */
.g-stat-band {
    background:
        radial-gradient(40rem 24rem at 90% -20%, rgba(205, 203, 255, .18), transparent 60%),
        var(--ink);
    border-radius: var(--r-xl);
    padding: clamp(2.4rem, 4vw, 4rem) clamp(2rem, 4vw, 4.4rem);
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
}
@media (min-width: 768px) { .g-stat-band { grid-template-columns: repeat(4, 1fr); } }
.g-stat-label {
    font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--purple); margin-bottom: .8rem;
}
.g-stat-nr { font-family: var(--font-brand); font-size: clamp(2rem, 2.6vw, 2.8rem); font-weight: 700; line-height: 1.15; color: #fff; }
.g-stat-sub { font-size: 1.2rem; color: rgba(255, 255, 255, .6); margin-top: .5rem; line-height: 1.5; }

/* ── Kaarten en grids ─────────────────────────────────────────────────────── */

.g-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 2.4rem;
}
.g-grid { display: grid; gap: 1.6rem; }
@media (min-width: 768px)  { .g-grid--2, .g-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; } }
@media (min-width: 992px)  { .g-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Media-splitsectie (tekst + afbeelding) */
.g-split { display: grid; gap: 2.8rem; align-items: center; }
@media (min-width: 992px) { .g-split { grid-template-columns: 1fr 1fr; gap: 6rem; } .g-split--img-left .g-split-img { order: -1; } }
.g-split-img { width: 100%; border-radius: var(--r-lg); object-fit: cover; aspect-ratio: 4 / 3; display: block; filter: none; }
.g-split-img--portrait { aspect-ratio: 3 / 4; }

/* Feature-rij (icoon + titel + tekst), werkt op licht en op ink */
.g-feature { display: flex; align-items: flex-start; gap: 1.6rem; padding: 1.6rem 0; }
.g-feature + .g-feature { border-top: 1px solid var(--hairline-soft); }
.g-feature > .material-symbols-outlined { color: var(--ink-strong); font-size: 2.4rem; flex: 0 0 auto; margin-top: .1rem; }
.g-feature-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .3rem; }
.g-feature-text { font-size: 1.35rem; color: var(--text-muted); margin: 0; line-height: 1.6; }
.g-feature-text a { color: var(--ink-strong); font-weight: 600; text-decoration: underline; }
.g-section--ink .g-feature + .g-feature { border-color: rgba(255, 255, 255, .12); }
.g-section--ink .g-feature > .material-symbols-outlined { color: var(--purple); }
.g-section--ink .g-feature-text { color: rgba(255, 255, 255, .65); }
.g-section--ink .g-feature-text a { color: var(--purple); }

/* ── Prijs/productkaart ───────────────────────────────────────────────────────
   Altijd met productafbeelding. Twee weergaven:
   - grid-kaart (.g-price-card) voor 3 of meer producten in .g-grid--3
   - rij-kaart (.g-price-card--row) voor 1 of 2 producten, voorkomt enorme cards */

.g-price-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .18s;
}
.g-price-card:hover { border-color: var(--border); }
.g-price-card--featured { border: .2rem solid var(--ink-strong); }
.g-price-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; filter: none; }
.g-price-body { display: flex; flex-direction: column; flex: 1; padding: 2rem 2rem 2.4rem; }
/* Badges als overlay op de productafbeelding: kost geen verticale ruimte,
   en zonder label blijft de kaart identiek */
.g-price-badges { position: absolute; top: 1rem; left: 1rem; z-index: 1; display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.gds .g-price-title { font-size: 1.8rem; font-weight: 700; margin: 0; line-height: 1.3; }
.g-price-desc { font-size: 1.4rem; line-height: 1.6; color: var(--text-muted); margin: .8rem 0 0; }
.g-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.6rem; }
.g-price { font-size: 2.4rem; font-weight: 800; }
.g-price-old { font-size: 1.5rem; color: var(--text-muted); text-decoration: line-through; }
.g-price-per { font-size: 1.3rem; color: var(--text-muted); }
.g-price-saving {
    font-size: 1.2rem; font-weight: 700;
    color: var(--success-ink); background: var(--success-bg);
    border-radius: var(--r-pill); padding: .3rem 1rem;
}
.g-price-cta { margin-top: auto; }
.g-price-trust { font-size: 1.25rem; color: var(--text-muted); text-align: center; margin: 1rem 0 0; }

/* Rij-variant: beeld links, inhoud rechts, CTA rechts (desktop) */
.g-price-card--row { flex-direction: row; align-items: stretch; }
.g-price-card--row .g-price-img {
    width: clamp(10rem, 22vw, 16rem); aspect-ratio: auto;
    align-self: stretch; object-fit: cover; flex: 0 0 auto;
}
.g-price-card--row .g-price-body { padding: 1.8rem 2rem; }
/* Mobiel: compacte rij zoals op de tarievenpagina. De thumbnail rekt mee met de
   kaarthoogte (geen witruimte eronder), het label staat in de flow boven de
   titel (niet als overlay, dat botste met de titel) en alles schaalt omlaag. */
@media (max-width: 767px) {
    .g-price-card--row { padding: 1.2rem; align-items: stretch; gap: 1.2rem; }
    .g-price-card--row .g-price-img {
        width: 8.8rem; height: auto; aspect-ratio: auto;
        align-self: stretch;
        border-radius: var(--r-md);
    }
    .g-price-card--row .g-price-body { padding: 0; }
    .g-price-card--row .g-price-badges { position: static; margin: 0 0 .6rem; }
    .g-price-card--row .g-price-badges .g-badge { font-size: 1rem; padding: .35rem .9rem; }
    .gds .g-price-card--row .g-price-title { font-size: 1.5rem; }
    .g-price-card--row .g-price-row { margin: .8rem 0 1rem; gap: .6rem; }
    .g-price-card--row .g-price { font-size: 1.7rem; }
    .g-price-card--row .g-price-old { font-size: 1.2rem; }
    .g-price-card--row .g-price-saving { font-size: 1rem; padding: .2rem .8rem; }
    .g-price-card--row .g-price-cta .g-btn { min-height: 3.6rem; padding: .6rem 1.6rem; font-size: 1.25rem; }
    .g-price-card--row .g-price-desc { display: none; }
}
@media (min-width: 768px) {
    .g-price-card--row .g-price-body {
        display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto;
        align-items: center; column-gap: 2.4rem;
    }
    .g-price-card--row .g-price-title  { grid-column: 1; }
    .g-price-card--row .g-price-desc   { grid-column: 1; }
    .g-price-card--row .g-price-row    { grid-column: 2; grid-row: 1 / 3; margin: 0; justify-self: end; }
    .g-price-card--row .g-price-cta    { grid-column: 2; grid-row: 3; margin: 0; justify-self: end; }
}
.g-price-list-stack { display: flex; flex-direction: column; gap: 1.6rem; }

/* ── Vestigingenrij ───────────────────────────────────────────────────────── */

.g-vest-list { list-style: none; padding: 0; margin: 0; }
@media (min-width: 768px) { .g-vest-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.2rem; } }
.g-vest-row {
    display: grid; grid-template-columns: 6.4rem 1fr auto; align-items: center;
    gap: 1.6rem; padding: 1.6rem 0; width: 100%;
    text-decoration: none;
}
.g-vest-list li + li .g-vest-row { border-top: 1px solid var(--hairline); }
@media (min-width: 768px) { .g-vest-list li:nth-child(2) .g-vest-row { border-top: none; } }
.g-vest-thumb {
    width: 6.4rem; height: 6.4rem; border-radius: 1.4rem;
    object-fit: cover; display: block; filter: none;
    transition: transform .25s;
}
.g-vest-row:hover .g-vest-thumb { transform: scale(1.06); }
.g-vest-name { font-size: 1.65rem; font-weight: 700; color: var(--ink); margin: 0 0 .3rem; display: block; }
.g-vest-addr { font-size: 1.3rem; color: var(--text-muted); margin: 0; display: block; }
.g-vest-action {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3.8rem; padding: .7rem 1.8rem;
    background: var(--tint); color: var(--ink-strong);
    border-radius: var(--r-pill);
    font-size: 1.3rem; font-weight: 700;
    transition: background .15s, color .15s;
}
.g-vest-row:hover .g-vest-action { background: var(--ink-strong); color: #fff; }

/* ── Stappen (proces, met afbeelding per stap) ────────────────────────────── */

.g-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; }
@media (min-width: 992px) { .g-steps { grid-template-columns: repeat(4, 1fr); } }
.g-step { position: relative; }
.g-step-img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--r-md); display: block; filter: none;
    margin-bottom: 1.4rem;
}
.g-step-nr {
    width: 4rem; height: 4rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--purple); color: var(--ink);
    border-radius: 50%; font-size: 1.7rem; font-weight: 800;
    margin-bottom: 1.2rem;
}
/* Met afbeelding: nummer als badge op de foto */
.g-step--img .g-step-nr {
    position: absolute; top: .9rem; left: .9rem; margin: 0;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.g-step-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 .6rem; }
.g-step-text { font-size: 1.4rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.g-section--ink .g-step-text { color: rgba(255, 255, 255, .7); }

/* ── Checklijst (groen ter bevestiging) ───────────────────────────────────── */

.g-check-list { list-style: none; padding: 0; margin: 0; }
.g-check-list li {
    display: flex; align-items: flex-start; gap: 1.2rem;
    font-size: 1.5rem; line-height: 1.6;
    padding: .8rem 0;
}
.g-check-list .material-symbols-outlined {
    color: var(--success); font-size: 2rem; flex: 0 0 auto; margin-top: .2rem;
}

/* ── FAQ (native details/summary, geen JS nodig) ──────────────────────────── */

.g-faq { display: flex; flex-direction: column; gap: 1.2rem; }
.g-faq-item {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
}
.g-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
    padding: 1.8rem 2.2rem;
    font-size: 1.55rem; font-weight: 700; color: var(--ink);
    cursor: pointer; list-style: none;
}
.g-faq-item summary::-webkit-details-marker { display: none; }
.g-faq-icon {
    flex: 0 0 auto; width: 2.8rem; height: 2.8rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--tint); color: var(--ink-strong); border-radius: 50%;
    transition: transform .2s;
}
.g-faq-icon .material-symbols-outlined { font-size: 1.8rem; }
.g-faq-item[open] .g-faq-icon { transform: rotate(45deg); }
.g-faq-body { padding: 0 2.2rem 2rem; font-size: 1.45rem; line-height: 1.7; color: var(--text-muted); }
.g-faq-body a { color: var(--ink-strong); font-weight: 600; text-decoration: underline; }

/* Beige-kaartvariant (voor FAQ op witte secties) */
.g-faq--card { background: var(--beige); border-radius: var(--r-xl); padding: 1.6rem; }
.g-faq--card .g-faq-item { background: var(--surface); }

/* ── Badges, chips en links ───────────────────────────────────────────────── */

.g-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 1.2rem; font-weight: 700; line-height: 1;
    padding: .6rem 1.4rem; border-radius: var(--r-pill);
    background: var(--tint); color: var(--ink-strong);
}
.g-badge--purple  { background: var(--purple); color: var(--ink); }
.g-badge--pink    { background: var(--pink); color: var(--ink); }
.g-badge--ink     { background: var(--ink); color: #fff; }
.g-badge--success { background: var(--success-bg); color: var(--success-ink); }
.g-badge--yellow  { background: var(--yellow); color: var(--ink); }

.g-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.g-link-pill {
    display: inline-flex; align-items: center;
    min-height: 4rem; padding: .8rem 1.8rem;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    font-size: 1.35rem; font-weight: 600; color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.g-link-pill:hover { border-color: var(--ink); color: var(--ink); }
.g-link-pill--active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.g-alert {
    display: flex; align-items: flex-start; gap: 1rem;
    border-radius: var(--r-md); padding: 1.3rem 1.5rem;
    font-size: 1.4rem; font-weight: 600; line-height: 1.5;
}
.g-alert .material-symbols-outlined { font-size: 2rem; flex: 0 0 auto; }
.g-alert--error   { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }
.g-alert--success { background: var(--success-bg); border: 1px solid #b5e6c3; color: var(--success-ink); }

/* ── Prijslijst (moderne vervanging van de klassieke tabel) ───────────────── */

.g-price-list {
    list-style: none; margin: 0; padding: .8rem 2.2rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
}
.g-price-list li {
    display: flex; align-items: center; gap: 1.6rem;
    padding: 1.6rem 0;
}
.g-price-list li + li { border-top: 1px solid var(--hairline-soft); }
.g-price-list-name { flex: 1; min-width: 0; }
.g-price-list-name strong { display: block; font-size: 1.55rem; font-weight: 700; color: var(--ink); }
.g-price-list-name span { display: block; font-size: 1.25rem; color: var(--text-muted); margin-top: .2rem; }
.g-price-list-tag {
    flex: 0 0 auto;
    font-size: 1.15rem; font-weight: 700;
    background: var(--beige); color: var(--ink);
    border-radius: var(--r-pill); padding: .5rem 1.2rem;
    white-space: nowrap;
}
.g-price-list-price { flex: 0 0 auto; font-size: 1.7rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
@media (max-width: 575px) { .g-price-list { padding: .4rem 1.6rem; } .g-price-list-tag { display: none; } }

/* Klassieke tabel blijft beschikbaar voor echte tabeldata */
.g-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g-table { width: 100%; border-collapse: collapse; }
.g-table th {
    font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); text-align: left;
    padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}
.g-table td { font-size: 1.45rem; padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--hairline-soft); }
.g-table tbody tr:hover td { background: var(--beige); }
.g-table .g-table-price { font-weight: 700; white-space: nowrap; }

/* ── Review-kaart ─────────────────────────────────────────────────────────── */

.g-review-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-lg); padding: 2.2rem;
    display: flex; flex-direction: column; gap: 1.2rem;
}
.g-review-stars { display: flex; gap: .2rem; color: var(--yellow); }
.g-review-stars .material-symbols-outlined { font-size: 1.8rem; }
.g-review-text { font-size: 1.45rem; line-height: 1.7; margin: 0; }
.g-review-meta { font-size: 1.3rem; color: var(--text-muted); }
.g-review-meta strong { color: var(--ink); font-weight: 700; }

/* ── Promo/cadeau-sectie (volwaardige split, geen kleine box) ─────────────── */

.g-promo {
    background: var(--surface); border-radius: var(--r-xl);
    /* clip (niet hidden): hidden maakt een scroll-container en bevriest de
       scroll-gedreven animatie van de giftcard */
    overflow: clip;
    display: grid;
}
.g-promo-content { padding: clamp(2.8rem, 5vw, 4.8rem) clamp(2rem, 4vw, 4.4rem); }
.g-promo-media { position: relative; overflow: clip; }
.g-promo-img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; display: block; filter: none; }
/* Desktop: media als absolute vulling rechts zodat de tekst de hoogte bepaalt
   en een (portret)foto de sectie niet kan oprekken; de giftcard-overlay blijft
   gewoon binnen de media gecentreerd */
@media (min-width: 768px) {
    .g-promo { position: relative; grid-template-columns: 11fr 9fr; align-items: stretch; }
    .g-promo-media { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; }
    .g-promo-img { position: absolute; inset: 0; min-height: 0; }
}
@media (max-width: 767px) { .g-promo-media { order: -1; } .g-promo-img { aspect-ratio: 21 / 10; min-height: 0; height: auto; } }
.g-promo-content .g-check-list li { padding: .5rem 0; font-size: 1.45rem; }

/* CSS-giftcard als overlay op de cadeaufoto */
.g-giftcard {
    position: absolute; left: 50%; top: 50%;
    width: min(30rem, 72%); aspect-ratio: 8 / 5;
    /* --g-sway wordt door het [data-g-sway]-script gezet op basis van de
       scrollpositie (-10deg tot -2deg); zonder script geldt de fallback. */
    transform: translate(-50%, -50%) rotate(var(--g-sway, -6deg));
    background:
        radial-gradient(18rem 12rem at 85% -20%, rgba(255, 255, 255, .45), transparent 60%),
        linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
    border-radius: 1.6rem;
    padding: 1.6rem 2rem;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: clip;
    transition: transform .3s ease-out;
}
@media (max-width: 575px) {
    .g-giftcard { width: min(19rem, 58%); padding: 1rem 1.2rem; border-radius: 1.2rem; }
}
.g-giftcard-brand { font-family: var(--font-brand); font-size: 2.2rem; font-weight: 700; color: var(--ink); line-height: 1; }
@media (max-width: 575px) { .g-giftcard-brand { font-size: 1.5rem; } }
.g-giftcard-label {
    font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-strong);
}
.g-giftcard-number {
    font-size: 1.25rem; font-weight: 600; letter-spacing: .22em;
    color: rgba(3, 1, 31, .7);
}
/* Naam met glans: een enkele veeg over de hele zin, dan een korte pauze.
   De smalle witte band (45-50-55) valt bij rust buiten beeld, zodat de loop
   nooit halverwege zichtbaar herstart. */
.g-giftcard-name {
    font-size: 1.3rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    background: linear-gradient(100deg, var(--ink) 45%, #fff 50%, var(--ink) 55%);
    background-size: 250% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: g-shine 4s linear infinite;
}
@keyframes g-shine {
    0%, 12%   { background-position: 100% 0; }
    60%, 100% { background-position: 0% 0; }
}
.g-giftcard-foot { display: flex; align-items: flex-end; justify-content: space-between; }
.g-giftcard-amount { font-size: 1.8rem; font-weight: 800; color: var(--ink); }
.g-giftcard-chip { width: 3.4rem; height: 2.4rem; border-radius: .5rem; background: rgba(255, 255, 255, .55); }
/* Mobiel: alle kaartteksten schalen mee omlaag (staat NA de basisregels, anders
   winnen die door de bronvolgorde) */
@media (max-width: 575px) {
    .g-giftcard-label { font-size: .9rem; letter-spacing: .1em; }
    .g-giftcard-name { font-size: .8rem; letter-spacing: .03em; white-space: nowrap; }
    .g-giftcard-number { font-size: .9rem; letter-spacing: .16em; }
    .g-giftcard-amount { font-size: 1.3rem; }
    .g-giftcard-chip { width: 2.4rem; height: 1.7rem; }
}

/* ── Countdown ────────────────────────────────────────────────────────────── */

.g-countdown { display: flex; justify-content: center; gap: 1rem; }
.g-countdown-box {
    min-width: 6.4rem; padding: 1rem .8rem;
    background: var(--ink); color: #fff;
    border-radius: var(--r-md); text-align: center;
}
.g-countdown-nr { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.g-countdown-label { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }

/* ── Sticky mobiele CTA-balk ──────────────────────────────────────────────── */

.g-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: none;
    background: var(--surface); border-top: 1px solid var(--hairline);
    padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom));
    align-items: center; justify-content: space-between; gap: 1.2rem;
}
@media (max-width: 767px) { .g-sticky-cta.is-active { display: flex; } }
.g-sticky-cta-price { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.g-sticky-cta-price strong { font-size: 1.7rem; font-weight: 800; }
.g-sticky-cta-price span { font-size: 1.15rem; color: var(--text-muted); white-space: nowrap; }
.g-sticky-cta .g-btn { flex: 0 0 auto; min-height: 4.4rem; padding: 1rem 2.4rem; font-size: 1.4rem; }

/* ── Formuliervelden met zwevend label (patroon uit de boekingsflow) ──────── */

.g-field { position: relative; margin-bottom: 1.4rem; }
.g-field .g-input {
    width: 100%; height: 5.2rem;
    padding: 2rem 1.7rem .5rem;
    background: var(--surface);
    border: 1px solid #e6e6ee;
    border-radius: var(--r-md);
    font-family: var(--font-ui); font-size: 1.5rem; color: var(--ink);
}
.g-field .g-input:focus {
    outline: none;
    border-color: var(--ink-strong);
    box-shadow: var(--focus-ring);
}
.g-field label {
    position: absolute; left: 1.7rem; right: 1.7rem; top: 50%;
    transform: translateY(-50%); margin: 0;
    font-size: 1.45rem; font-weight: 400; color: #9aa0b5;
    pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease;
}
.g-field .g-input:focus + label,
.g-field .g-input:not(:placeholder-shown) + label {
    top: .8rem; transform: translateY(0);
    font-size: 1.05rem; font-weight: 600; color: var(--ink-strong);
}

/* ── Slot-CTA sectie (standaard op pink) ──────────────────────────────────── */

.g-cta-guarantee { font-size: 1.3rem; color: var(--text-muted); margin: 1.4rem 0 0; }
.g-section--ink .g-cta-guarantee { color: rgba(255, 255, 255, .5); }
.g-section--purple .g-cta-guarantee, .g-section--pink .g-cta-guarantee { color: rgba(3, 1, 31, .65); }

/* ── Vestiging: info (adres + openingstijden) ─────────────────────────────── */

.g-info-grid { display: grid; gap: 1.6rem; }
@media (min-width: 768px) { .g-info-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.g-info-card {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-lg); padding: 2.4rem;
}
.g-info-title { display: flex; align-items: center; gap: 1rem; font-size: 1.6rem; font-weight: 700; margin: 0 0 1.6rem; }
.g-info-title .material-symbols-outlined {
    width: 3.6rem; height: 3.6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-strong); color: #fff; font-size: 1.9rem;
}
.g-info-line { font-size: 1.45rem; line-height: 1.7; color: var(--text-muted); margin: 0; }
.g-info-line strong { color: var(--ink); }
.g-hours { list-style: none; margin: 0; padding: 0; }
.g-hours li {
    display: flex; justify-content: space-between; gap: 1.6rem;
    font-size: 1.4rem; padding: .7rem 0;
}
.g-hours li + li { border-top: 1px solid var(--hairline-soft); }
.g-hours .g-hours-day { color: var(--text-muted); }
.g-hours .g-hours-time { font-weight: 600; color: var(--ink); }
.g-hours li.is-today .g-hours-day, .g-hours li.is-today .g-hours-time { color: var(--ink); font-weight: 700; }
.g-open-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: 1.2rem; font-weight: 700;
    background: var(--success-bg); color: var(--success-ink);
    border-radius: var(--r-pill); padding: .5rem 1.2rem;
}

/* ── Behandeling-tiles (webshop-categoriestijl) ───────────────────────────── */

.g-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
@media (min-width: 992px) { .g-tile-grid { grid-template-columns: repeat(4, 1fr); gap: 2.4rem; } }
.g-tile { display: block; text-decoration: none; }
.g-tile-imgwrap {
    display: block;
    border-radius: var(--r-lg); overflow: hidden;
    aspect-ratio: 4 / 3; background: var(--tint);
}
.g-tile-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; transition: transform .3s; }
.g-tile:hover .g-tile-imgwrap img { transform: scale(1.05); }
.g-tile-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.g-tile-name { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.g-tile-price { display: block; font-size: 1.25rem; font-weight: 400; color: var(--text-muted); margin-top: .2rem; }
.g-tile-arrow {
    flex: 0 0 auto; width: 3.2rem; height: 3.2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tint); color: var(--ink-strong);
    transition: background .15s, color .15s, transform .15s;
}
.g-tile-arrow .material-symbols-outlined { font-size: 1.8rem; }
.g-tile:hover .g-tile-arrow { background: var(--ink-strong); color: #fff; transform: translateX(2px); }

/* ── Direct boeken paneel (vestiging) ─────────────────────────────────────── */

.g-book-panel {
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    padding: 1.8rem;
    display: grid; grid-template-columns: auto 1fr; gap: 1.4rem 1.6rem; align-items: center;
}
.g-book-panel .g-btn { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .g-book-panel { grid-template-columns: auto 1fr auto; padding: 2rem 2.4rem; }
    .g-book-panel .g-btn { grid-column: auto; }
}
.g-book-thumb { width: 6.4rem; height: 6.4rem; border-radius: 1.4rem; object-fit: cover; display: block; filter: none; }
.g-book-title { font-size: 1.7rem; font-weight: 700; margin: 0 0 .3rem; }
.g-book-sub { font-size: 1.35rem; color: var(--text-muted); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* ── Populairste pakket (highlight-banner) ────────────────────────────────── */

.g-featured {
    background:
        radial-gradient(40rem 26rem at 90% -20%, rgba(245, 183, 252, .35), transparent 60%),
        var(--tint);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: grid;
}
.g-featured-content { padding: clamp(2.8rem, 5vw, 4.4rem) clamp(2rem, 4vw, 4.4rem); }
.g-featured-img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; display: block; filter: none; }
/* Desktop: afbeelding als absolute vulling rechts, zodat de tekst de hoogte
   bepaalt en een (portret)foto de sectie niet kan oprekken */
@media (min-width: 768px) {
    .g-featured { position: relative; grid-template-columns: 11fr 9fr; align-items: stretch; }
    .g-featured-img { position: absolute; top: 0; right: 0; width: 45%; height: 100%; min-height: 0; }
}
@media (max-width: 767px) { .g-featured-img { order: -1; aspect-ratio: 21 / 10; min-height: 0; height: auto; } }

/* ── Zones met prijzen ────────────────────────────────────────────────────── */

.g-zone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (min-width: 768px) { .g-zone-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
.g-zone {
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 1.4rem 1.8rem;
    text-decoration: none;
    transition: border-color .15s;
}
.g-zone:hover { border-color: var(--ink); }
.g-zone-name { font-size: 1.45rem; font-weight: 700; color: var(--ink); }
.g-zone-price { font-size: 1.35rem; font-weight: 700; color: var(--ink-strong); white-space: nowrap; }
/* Grote variant: volwaardige kaart met sublijn en pijl */
.g-zone--lg { padding: 2rem 2.2rem; border-radius: var(--r-lg); min-width: 0; }
/* Mobiel passen de grote kaarten niet in twee kolommen */
@media (max-width: 575px) {
    .g-zone-grid:has(.g-zone--lg) { grid-template-columns: 1fr; }
}
.g-zone--lg .g-zone-name { font-size: 1.65rem; }
.g-zone-sub { display: block; font-size: 1.3rem; font-weight: 400; color: var(--text-muted); margin-top: .3rem; }
.g-zone--lg .g-tile-arrow { flex: 0 0 auto; }
.g-zone--lg:hover .g-tile-arrow { background: var(--ink-strong); color: #fff; transform: translateX(2px); }

/* ── Rekenhulp (zones aanklikken, prijsadvies) ────────────────────────────── */

.g-calc { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 992px) { .g-calc { grid-template-columns: 7fr 5fr; gap: 4.8rem; } }
.g-calc-group { margin-bottom: 2rem; }
.g-calc-group h3 { font-size: 1.5rem; margin: 0 0 1rem; }
.g-calc-zones { display: flex; flex-wrap: wrap; gap: .8rem; }
.g-calc-zone {
    display: inline-flex; align-items: baseline; gap: .7rem;
    min-height: 4rem; padding: .9rem 1.7rem;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-pill); cursor: pointer;
    font-family: var(--font-ui); font-size: 1.35rem; font-weight: 600; color: var(--ink);
    transition: background .15s, border-color .15s, color .15s;
}
.g-calc-zone:hover { border-color: var(--ink); }
.g-calc-zone[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.g-calc-zone small { font-weight: 400; font-size: 1.1rem; color: var(--text-muted); }
.g-calc-zone[aria-pressed="true"] small { color: rgba(255, 255, 255, .7); }
.g-calc-count { font-size: 1.3rem; color: var(--text-muted); }
.g-calc-product { font-size: 1.6rem; font-weight: 700; margin: .6rem 0 0; }
.g-calc-price { font-family: var(--font-brand); font-size: clamp(2.8rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.1; margin: .4rem 0 0; }
.g-calc-note { font-size: 1.3rem; color: var(--text-muted); margin: .8rem 0 0; line-height: 1.6; }
.g-calc-empty { font-size: 1.45rem; color: var(--text-muted); line-height: 1.7; }

/* ── "In het kort" (samenvatting, ook voor AI/featured snippets) ──────────── */

.g-summary {
    background: var(--beige);
    border-radius: var(--r-xl);
    padding: clamp(2.4rem, 4vw, 3.6rem);
}
.g-section--beige .g-summary { background: var(--surface); border: 1px solid var(--hairline); }
.g-summary-def { font-size: 1.6rem; line-height: 1.75; color: var(--ink); margin: 1.2rem 0 0; }
.g-summary-facts { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .g-summary-facts { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
.g-summary-fact {
    display: flex; align-items: center; gap: 1rem;
    background: var(--beige);
    border-radius: var(--r-md); padding: 1.2rem 1.4rem;
}
.g-summary .g-summary-fact { background: rgba(255, 255, 255, .7); }
.g-section--beige .g-summary-fact { background: var(--surface); border: 1px solid var(--hairline); }
.g-section--beige .g-summary .g-summary-fact { background: var(--beige); border: none; }
.g-summary-fact .material-symbols-outlined { color: var(--ink-strong); font-size: 2rem; flex: 0 0 auto; }
.g-summary-fact strong { display: block; font-size: 1.4rem; color: var(--ink); }
.g-summary-fact span { display: block; font-size: 1.2rem; color: var(--text-muted); }

/* ── Vergelijkingskaarten (bijv. laser vs IPL): twee opties naast elkaar ──── */

.g-vs { display: grid; gap: 1.6rem; }
@media (min-width: 768px) { .g-vs { grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; } }
.g-vs-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 2.4rem;
}
.g-vs-card--featured { border: .2rem solid var(--ink-strong); position: relative; }
.g-vs-head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-bottom: .4rem; }
.g-vs-title { font-size: 1.9rem; margin: 0; }
.g-vs-sub { font-size: 1.3rem; color: var(--text-muted); margin: 0 0 1rem; }
.g-vs-row { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.3rem 0; }
.g-vs-row + .g-vs-row { border-top: 1px solid var(--hairline-soft); }
.g-vs-row > .material-symbols-outlined { font-size: 2rem; flex: 0 0 auto; margin-top: .3rem; color: var(--success); }
.g-vs-card--muted .g-vs-row > .material-symbols-outlined { color: var(--border); }
.g-vs-label {
    display: block; font-size: 1.1rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted);
}
.g-vs-value { display: block; font-size: 1.45rem; font-weight: 600; color: var(--ink); margin-top: .2rem; line-height: 1.5; }
.g-vs-card--muted .g-vs-value { font-weight: 500; color: var(--text-muted); }
/* Compacte variant, bijv. voor "geschikt / minder geschikt". Kaarten zijn even
   hoog; bij een ongelijk aantal rijen verdelen de rijen zich over de hoogte. */
.g-vs--sm { align-items: stretch; }
.g-vs--sm .g-vs-card { padding: 1.8rem 2rem; display: flex; flex-direction: column; }
.g-vs--sm .g-vs-title { font-size: 1.65rem; }
.g-vs--sm .g-vs-row { padding: .9rem 0; gap: 1rem; flex: 1; align-items: center; }
.g-vs--sm .g-vs-row > .material-symbols-outlined { font-size: 1.8rem; margin-top: 0; }
.g-vs--sm .g-vs-value { font-size: 1.4rem; margin-top: 0; }

/* ── "In het kort" als leesartikel: tekst links, kerngegevens-kaart rechts ── */

.g-shortread { display: grid; gap: 2.8rem; align-items: start; }
@media (min-width: 992px) { .g-shortread { grid-template-columns: 7fr 5fr; gap: 6.4rem; } }
/* Grotere intro-alinea als binnenkomer */
.g-shortread .g-prose > p:first-of-type {
    font-size: 1.8rem; line-height: 1.7;
    color: var(--ink-strong);
}
/* Kerngegevens-kaart scrolt mee op desktop */
.g-shortread-aside { display: flex; flex-direction: column; gap: 1.2rem; }
@media (min-width: 992px) { .g-shortread-aside { position: sticky; top: 12rem; } }
.g-shortread-aside .g-summary-facts { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.4rem; }
.g-shortread-aside .g-btn { margin-top: 1.6rem; }

.g-contact-card { text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.g-contact-icon {
    width: 4.4rem; height: 4.4rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-strong); color: #fff;
    margin-bottom: 1.4rem;
}
.g-contact-icon .material-symbols-outlined { font-size: 2.2rem; }
.g-contact-card h3 { font-size: 1.7rem; margin: 0 0 .6rem; }
.g-contact-card p { font-size: 1.4rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 1.4rem; }
.g-contact-link { margin-top: auto; font-size: 1.4rem; font-weight: 700; color: var(--ink-strong); text-decoration: underline; }

/* ── Vestigingen-overzicht (locatiekaarten) ───────────────────────────────── */

.g-loc-card {
    position: relative;
    display: block; text-decoration: none;
    background: var(--surface); border: 1px solid var(--hairline);
    border-radius: var(--r-lg); overflow: hidden;
    transition: border-color .18s;
}
.g-loc-card:hover { border-color: var(--border); }
.g-loc-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; filter: none; }
.g-loc-rating {
    position: absolute; top: 1rem; right: 1rem;
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--r-pill); padding: .4rem 1rem;
    font-size: 1.25rem; font-weight: 700; color: var(--ink);
}
.g-loc-rating .material-symbols-outlined { color: var(--yellow); font-size: 1.5rem; }
.g-loc-body { display: block; padding: 1.8rem 2rem 2rem; }
.g-loc-name { display: block; font-size: 1.7rem; font-weight: 700; color: var(--ink); margin: 0 0 .3rem; }
.g-loc-addr { display: block; font-size: 1.3rem; color: var(--text-muted); margin: 0 0 1.4rem; }
.g-loc-cta {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: 1.35rem; font-weight: 700; color: var(--ink-strong);
}
.g-loc-cta .material-symbols-outlined { font-size: 1.7rem; transition: transform .15s; }
.g-loc-card:hover .g-loc-cta .material-symbols-outlined { transform: translateX(3px); }

/* ── Top 5 lijst (populairste behandelingen bij een vestiging) ────────────────
   Zelfde design als de bestaande vd_popular op /vestiging/{stad}: donkere
   sectie, paarse ranknummers, witte titels. Plaats altijd in .g-section--ink. */

.g-top-list {
    list-style: none; margin: 0; padding: 0;
    max-width: 86rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    counter-reset: g-top;
}
.g-top-list li { counter-increment: g-top; }
.g-top-row {
    display: flex; align-items: center; gap: 2.2rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    text-decoration: none;
}
@media (max-width: 575px) { .g-top-row { gap: 1.4rem; } }
.g-top-row::before {
    content: counter(g-top);
    font-family: var(--font-brand);
    font-size: 2.6rem; font-weight: 700; color: var(--purple);
    width: 3.4rem; flex-shrink: 0; text-align: center;
}
.g-top-thumb {
    width: 7.2rem; height: 7.2rem; border-radius: 1.4rem;
    object-fit: cover; display: block; filter: none; flex-shrink: 0;
    background: rgba(255, 255, 255, .08);
}
@media (max-width: 575px) { .g-top-thumb { width: 5.6rem; height: 5.6rem; } }
.g-top-info { flex: 1; min-width: 0; }
.g-top-name {
    display: block; font-family: var(--font-brand);
    font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.2;
    transition: color .2s ease;
}
.g-top-row:hover .g-top-name { color: var(--purple); }
.g-top-sub { display: block; font-size: 1.3rem; color: rgba(255, 255, 255, .55); margin-top: .5rem; }
.g-top-right { display: flex; align-items: center; gap: 1.8rem; flex-shrink: 0; }
.g-top-price { font-size: 1.6rem; font-weight: 700; color: #fff; white-space: nowrap; }
.g-top-right .material-symbols-outlined {
    font-size: 2.2rem; color: rgba(255, 255, 255, .7);
    transition: transform .25s ease, color .2s ease;
}
.g-top-row:hover .g-top-right .material-symbols-outlined { transform: translateX(.3rem); color: var(--purple); }

/* ── Vergelijking (before/after resultaat-slider) ─────────────────────────── */

.g-compare {
    position: relative;
    border-radius: var(--r-lg); overflow: hidden;
    aspect-ratio: 16 / 10;
    touch-action: pan-y;
}
.g-compare img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; filter: none;
}
.g-compare-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.g-compare-line {
    position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
    width: .3rem; background: #fff; transform: translateX(-50%);
    pointer-events: none;
}
.g-compare-line::after {
    content: "\2194";  /* pijl links-rechts */
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 4rem; height: 4rem; border-radius: 50%;
    background: #fff; color: var(--ink-strong);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; font-weight: 700;
}
.g-compare-range {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; margin: 0; cursor: ew-resize;
}
.g-compare:focus-within { outline: .3rem solid var(--ink-strong); outline-offset: .2rem; }
.g-compare-tag {
    position: absolute; bottom: 1.2rem;
    font-size: 1.2rem; font-weight: 700;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--r-pill); padding: .5rem 1.3rem;
    color: var(--ink); pointer-events: none;
}
.g-compare-tag--before { left: 1.2rem; }
.g-compare-tag--after { right: 1.2rem; }

/* Kleine variant: meerdere vergelijkingen naast elkaar in een grid */
.g-compare-grid { display: grid; gap: 2rem 1.6rem; }
@media (min-width: 768px) { .g-compare-grid { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.g-compare--sm { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.g-compare--sm .g-compare-line::after { width: 3rem; height: 3rem; font-size: 1.4rem; }
.g-compare--sm .g-compare-tag { bottom: .8rem; font-size: 1.05rem; padding: .35rem 1rem; }
.g-compare--sm .g-compare-tag--before { left: .8rem; }
.g-compare--sm .g-compare-tag--after { right: .8rem; }
.g-compare-caption { font-size: 1.4rem; font-weight: 600; text-align: center; margin-top: 1rem; }

/* ── Parallax-sectie (rustig diepte-effect, af en toe te gebruiken) ───────────
   De afbeelding schuift via [data-g-parallax] langzamer mee dan de pagina.
   Content blijft altijd zichtbaar; reduced-motion zet het effect stil. */

.g-parallax {
    position: relative; overflow: clip;
    display: flex; align-items: center; justify-content: center;
    min-height: clamp(32rem, 50vw, 46rem);
}
.g-parallax-img {
    position: absolute; left: 0; right: 0; top: -18%;
    width: 100%; height: 136%;
    object-fit: cover; display: block; filter: none;
    transform: translateY(var(--g-par, 0%));
    will-change: transform;
}
.g-parallax-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(3, 1, 31, .35) 0%, rgba(3, 1, 31, .6) 100%);
}
.g-parallax-content {
    position: relative; z-index: 1;
    max-width: 64rem; padding: clamp(4rem, 8vw, 7rem) 2rem;
    text-align: center; color: #fff;
}
.g-parallax-content .g-eyebrow { color: var(--purple); }
.g-parallax-content .g-sub { color: rgba(255, 255, 255, .8); }

/* ── Tekstpagina (legal, voorwaarden, privacy) ────────────────────────────── */

.g-prose { max-width: 72ch; }
.g-prose h2 { font-size: clamp(2rem, 3vw, 2.6rem); margin: 3.2rem 0 1.2rem; }
.g-prose h3 { font-size: 1.8rem; margin: 2.4rem 0 1rem; }
.g-prose p, .g-prose li { font-size: 1.55rem; line-height: 1.85; color: var(--ink); }
.g-prose p { margin: 0 0 1.4rem; }
.g-prose ul, .g-prose ol { padding-left: 2rem; margin: 0 0 1.4rem; }
.g-prose a { color: var(--ink-strong); font-weight: 600; text-decoration: underline; }
.g-prose-meta { font-size: 1.3rem; color: var(--text-muted); }