/* =====================================================================
   Vixx Webshop — huisstijl-stylesheet (afgeleid van vixx-website).
     navy  #002755   ·  teal-accent #36ccc7  ·  geel #f8bb16
     grijs #f1f4f7   ·  muted #4f6681         ·  wit  #ffffff
   Koppen: Mont (lokaal Montserrat) · Broodtekst: Open Sans
   ===================================================================== */

@font-face {
    font-family: 'Mont-Regular';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Mont-Bold';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Mont-Heavy';
    src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Variable.woff2') format('woff2');
    font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
    --navy:  #002755;
    --teal:  #36ccc7;
    --yellow:#f8bb16;
    --grey:  #f1f4f7;
    --muted: #4f6681;
    --line:  #e2e6eb;
    --red:   #d84343;
    --green: #1f7a52;
    --maxw:  1290px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--navy);
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Mont-Heavy', 'Mont-Bold', sans-serif; color: var(--navy); line-height: 1.2; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
a { color: var(--navy); text-decoration: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.row { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Knoppen ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; border-radius: 999px; font-family: 'Mont-Bold', sans-serif;
    font-size: 15px; font-weight: 700; cursor: pointer; transition: all .2s; border: 3px solid transparent;
}
/* De arrow-SVG's uit de huisstijl wijzen omlaag; op knoppen naar rechts draaien */
.button-arrow { width: 13px; height: auto; display: inline-block; vertical-align: middle; transition: transform .2s; transform: rotate(-90deg); }
.btn:hover .button-arrow { transform: rotate(-90deg) translateY(4px); }
.btn-full { background: var(--yellow); border-color: var(--yellow); color: #fff; }
.btn-full:hover { background: #d59d06; border-color: #d59d06; color: #fff; }
.btn-full:disabled { opacity: .6; cursor: wait; }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-block { width: 100%; margin-top: 10px; }

/* =====================================================================
   HEADER
   ===================================================================== */
.shop-header { background: var(--navy); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 14px rgba(0,39,85,.25); }
.shop-header__row { display: flex; align-items: center; gap: 32px; padding-top: 14px; padding-bottom: 14px; }
.shop-logo { display: flex; align-items: baseline; gap: 10px; }
.shop-logo__img { height: 34px; width: auto; display: block; }
.shop-logo__sub { font-family: 'Mont-Bold', sans-serif; color: var(--teal); font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.shop-nav { display: flex; gap: 26px; margin-left: 12px; }
.shop-nav a { color: #fff; font-family: 'Mont-Regular', sans-serif; font-size: 15.5px; padding: 6px 0; border-bottom: 2px solid transparent; transition: all .2s; }
.shop-nav a:hover { color: var(--yellow); }
.shop-nav a.is-active { color: var(--yellow); border-bottom-color: var(--yellow); }
.shop-header__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.shop-user { display: inline-flex; align-items: center; gap: 8px; color: #bcd0e5; font-size: 13.5px; max-width: 220px; white-space: nowrap; overflow: hidden; }
.shop-user svg { flex: 0 0 auto; color: var(--teal); }
.shop-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,.09); color: #fff; transition: background .2s; }
.shop-cart-btn:hover { background: rgba(255,255,255,.18); }
.shop-cart-btn__badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    background: var(--yellow); color: var(--navy); font-family: 'Mont-Bold', sans-serif; font-size: 11.5px;
    border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.shop-logout { color: #8aa2bd; display: inline-flex; transition: color .2s; }
.shop-logout:hover { color: #fff; }

/* =====================================================================
   HERO + PAGE HEADS
   ===================================================================== */
.shop-hero { background: linear-gradient(120deg, var(--navy) 0%, #00396f 70%, #004a86 100%); color: #fff; padding: 56px 0 46px; }
.shop-hero .row { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.shop-hero__text { flex: 1 1 480px; }
.shop-hero h1 { color: #fff; font-size: clamp(30px, 4vw, 42px); margin-bottom: .4em; }
.shop-hero h1 span { color: var(--teal); }
.shop-hero p { color: #cddcec; max-width: 560px; margin-bottom: 0; }
.shop-hero__steps { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.shop-hero__step {
    display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 13px 18px;
    font-family: 'Mont-Bold', sans-serif; font-size: 14.5px;
}
.shop-hero__step svg { color: var(--yellow); flex: 0 0 auto; }

.page-head { background: var(--navy); color: #fff; padding: 44px 0 38px; }
.page-head h1 { color: #fff; margin-bottom: .25em; }
.page-head p { color: #cddcec; margin: 0; }
.page-head .btn { margin-top: 18px; }
.page-head--confirm { text-align: center; padding: 54px 0 44px; }
.confirm-badge {
    width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 999px;
    background: var(--teal); color: var(--navy); display: flex; align-items: center; justify-content: center;
}

/* =====================================================================
   CATALOGUS
   ===================================================================== */
.catalog { padding: 36px 0 80px; background: var(--grey); }
.catalog__toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.catalog__filters { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px;
    border: 1.5px solid var(--line); background: #fff; color: var(--navy);
    font-family: 'Mont-Regular', sans-serif; font-size: 13.5px; cursor: pointer; transition: all .18s;
}
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip--type.is-active { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.catalog__search {
    display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--line);
    border-radius: 999px; padding: 9px 18px; color: var(--muted); flex: 0 1 300px;
}
.catalog__search input { border: 0; outline: 0; font: inherit; color: var(--navy); width: 100%; background: transparent; }
.catalog__heading { font-size: 21px; margin: 26px 0 6px; }
.catalog__empty { color: var(--muted); padding: 30px 0; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 22px; padding-top: 12px; padding-bottom: 8px; }
.product-card {
    background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(0,39,85,.07);
    display: flex; flex-direction: column; overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,39,85,.12); }
.product-card__icon {
    background: linear-gradient(130deg, var(--navy), #00417c); color: var(--teal);
    display: flex; align-items: center; justify-content: center; padding: 26px 0 22px;
}
.product-card__body { padding: 18px 20px 6px; flex: 1 1 auto; }
.product-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.tag {
    font-family: 'Mont-Bold', sans-serif; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
}
.tag--facilitair { background: #e2f1fb; color: #1565a8; }
.tag--marketing  { background: #fdf1d4; color: #7a5200; }
.tag--pers       { background: #ddf5f4; color: #0b6662; }
.product-card h3 { font-size: 16.5px; margin-bottom: .35em; }
.product-card__desc { font-size: 13.5px; color: var(--muted); margin-bottom: .7em; }
.product-card__meta { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: 0; }
.product-card__meta svg { color: var(--teal); }
.product-card__foot { padding: 14px 20px 18px; }
.product-card__price { display: flex; flex-direction: column; margin-bottom: 12px; }
.product-card__price strong { font-family: 'Mont-Heavy', sans-serif; font-size: 19px; }
.product-card__price span { font-size: 12px; color: var(--muted); }
.product-card__buy { display: flex; gap: 10px; align-items: stretch; }
.btn-add { flex: 1 1 auto; padding: 10px 16px; font-size: 14px; }
.btn-add.is-added { background: var(--green); border-color: var(--green); }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.qty__btn { border: 0; background: transparent; color: var(--navy); cursor: pointer; padding: 8px 10px; display: inline-flex; }
.qty__btn:hover { color: var(--teal); }
.qty__input { width: 40px; border: 0; outline: 0; text-align: center; font: inherit; font-family: 'Mont-Bold', sans-serif; color: var(--navy); -moz-appearance: textfield; background: transparent; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* =====================================================================
   MODAL
   ===================================================================== */
.vx-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.vx-modal__backdrop { position: absolute; inset: 0; background: rgba(0,23,50,.6); }
.vx-modal__card {
    position: relative; background: #fff; border-radius: 16px; padding: 28px 30px;
    width: 100%; max-width: 480px; box-shadow: 0 24px 60px rgba(0,20,45,.35);
}
.vx-modal__card h3 { margin-bottom: .3em; }
.vx-modal__card p { color: var(--muted); font-size: 14px; }
.vx-modal__card label { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 13px; margin: 12px 0 6px; }
.vx-modal__card textarea {
    width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
    font: inherit; color: var(--navy); resize: vertical; outline: none;
}
.vx-modal__card textarea:focus { border-color: var(--teal); }
.vx-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* =====================================================================
   WINKELWAGEN / CHECKOUT / ORDER
   ===================================================================== */
.cart, .checkout, .order-detail, .orders { padding: 40px 0 80px; background: var(--grey); min-height: 40vh; }
.cart__layout, .checkout__layout { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.cart__items, .checkout__main { flex: 1 1 600px; display: flex; flex-direction: column; gap: 20px; }
.cart__summary {
    flex: 1 1 300px; max-width: 380px; background: #fff; border-radius: 14px; padding: 24px 26px;
    box-shadow: 0 6px 22px rgba(0,39,85,.07); position: sticky; top: 90px;
}
.cart__summary h3 { font-size: 18px; }
.cart__summary-line { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--grey); }
.cart__summary-line--total { border-bottom: 0; border-top: 2px solid var(--navy); margin-top: 6px; padding-top: 12px; font-family: 'Mont-Heavy', sans-serif; font-size: 16px; }
.cart__summary-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }

.cart-group { background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(0,39,85,.07); overflow: hidden; }
.cart-group__head {
    display: flex; align-items: center; gap: 10px; padding: 13px 22px;
    background: #eaf7f6; color: var(--navy); font-size: 13.5px;
}
.cart-group__head svg { color: var(--teal); }
.cart-line { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--grey); }
.cart-line__icon { color: var(--navy); background: var(--grey); border-radius: 10px; padding: 9px; display: flex; }
.cart-line__info { flex: 1 1 auto; display: flex; flex-direction: column; }
.cart-line__info strong { font-family: 'Mont-Bold', sans-serif; font-size: 14.5px; }
.cart-line__info span { font-size: 12.5px; color: var(--muted); }
.cart-line__pers { font-size: 12px; color: #0b6662; font-style: normal; background: #ddf5f4; border-radius: 6px; padding: 2px 8px; margin-top: 4px; display: inline-block; white-space: pre-line; }
.cart-line__total { font-family: 'Mont-Heavy', sans-serif; font-size: 15px; min-width: 88px; text-align: right; }
.cart-line__remove { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; padding: 6px; border-radius: 8px; transition: all .15s; }
.cart-line__remove:hover { color: var(--red); background: #fdeaea; }

.cart__empty {
    flex: 1 1 100%; background: #fff; border-radius: 14px; padding: 60px 30px; text-align: center;
    box-shadow: 0 6px 22px rgba(0,39,85,.07); color: var(--muted);
}
.cart__empty svg { color: var(--teal); margin-bottom: 12px; }
.cart__empty h2 { font-size: 21px; }
.cart__empty .btn { margin-top: 8px; }

.panel { background: #fff; border-radius: 14px; padding: 24px 26px; box-shadow: 0 6px 22px rgba(0,39,85,.07); }
.panel h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.panel h3 svg { color: var(--teal); }
.panel__optional { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 13px; color: var(--muted); }
.panel__note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.panel textarea {
    width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
    font: inherit; color: var(--navy); resize: vertical; outline: none;
}
.panel textarea:focus { border-color: var(--teal); }
.checkout__address { font-style: normal; line-height: 1.7; font-size: 14.5px; }
.checkout__flow { margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.checkout__flow li { margin-bottom: 6px; }
.checkout__error { background: #fdeaea; color: var(--red); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 10px; }

/* Dispatch-status (order-bevestiging) */
.dispatch-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.dispatch { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 16px; }
.dispatch--confirm { background: var(--grey); border-color: transparent; }
.dispatch__status { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dispatch__status--verzonden { background: #e2f6ee; color: var(--green); }
.dispatch__status--mislukt   { background: #fdeaea; color: var(--red); }
.dispatch__status--wachtrij  { background: #fdf1d4; color: #7a5200; }
.dispatch__info { flex: 1 1 auto; display: flex; flex-direction: column; }
.dispatch__info strong { font-family: 'Mont-Bold', sans-serif; font-size: 14.5px; }
.dispatch__info span { font-size: 12.5px; color: var(--muted); }
.dispatch__mode {
    font-style: normal; font-family: 'Mont-Bold', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    background: #fdf1d4; color: #7a5200; border-radius: 6px; padding: 1px 7px; margin-left: 6px;
}
.dispatch__delivery { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dispatch__delivery svg { color: var(--teal); }

/* Status-badges */
.status {
    display: inline-flex; align-items: center; font-family: 'Mont-Bold', sans-serif; font-size: 11px;
    text-transform: uppercase; letter-spacing: .05em; padding: 4px 12px; border-radius: 999px;
}
.status--nieuw           { background: #e2f1fb; color: #1565a8; }
.status--bij_leverancier { background: #ddf5f4; color: #0b6662; }
.status--onderweg        { background: #fdf1d4; color: #7a5200; }
.status--geleverd        { background: #e2f6ee; color: var(--green); }
.status--geannuleerd     { background: #f0f0f0; color: #555; }

/* Mijn bestellingen */
.orders-table { background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(0,39,85,.07); overflow: hidden; }
.orders-table__head, .orders-table__row {
    display: grid; grid-template-columns: 1.2fr 1.4fr .9fr .8fr 1fr 40px;
    gap: 14px; align-items: center; padding: 14px 24px;
}
.orders-table__head { background: var(--navy); color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.orders-table__row { border-top: 1px solid var(--grey); font-size: 14px; transition: background .15s; }
.orders-table__row:hover { background: #f8fafc; }
.orders-table__nr { font-family: 'Mont-Bold', sans-serif; }
.orders-table__arrow { text-align: right; }

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-page {
    min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(130deg, var(--navy) 0%, #00396f 60%, #004a86 100%); padding: 30px 20px;
}
.login-wrap { width: 100%; max-width: 460px; }
.login-card { background: #fff; border-radius: 18px; padding: 38px 40px 34px; box-shadow: 0 30px 80px rgba(0,15,35,.45); }
.login-logo { height: 34px; display: block; background: var(--navy); border-radius: 12px; padding: 12px 18px; margin-bottom: 20px; }
.login-card h1 { font-size: 27px; }
.login-card h1 span { color: var(--teal); }
.login-intro { color: var(--muted); font-size: 14px; }
.login-card label { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 13px; margin: 15px 0 6px; }
.login-card input {
    width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px;
    font: inherit; color: var(--navy); outline: none;
}
.login-card input:focus { border-color: var(--teal); }
.login-card .btn { width: 100%; margin-top: 22px; }
.login-error {
    display: flex; align-items: center; gap: 9px; background: #fdeaea; color: var(--red);
    border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-top: 14px;
}
.login-demo { margin-top: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 18px 24px; color: #cddcec; font-size: 13px; }
.login-demo h3 { color: #fff; font-size: 14px; margin-bottom: .3em; }
.login-demo p { margin-bottom: .5em; }
.login-demo ul { margin: 0; padding-left: 18px; }
.login-demo code { background: rgba(255,255,255,.12); border-radius: 5px; padding: 1px 7px; color: #fff; font-size: 12px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.shop-footer { background: var(--navy); color: #cddcec; padding: 46px 0 40px; }
.shop-footer__row { display: flex; gap: 50px; flex-wrap: wrap; }
.shop-footer__row > div { flex: 1 1 260px; }
.shop-footer__logo { height: 30px; margin-bottom: 14px; }
.shop-footer h4 { color: #fff; font-size: 15px; }
.shop-footer p { font-size: 13.5px; }
.shop-footer a { color: var(--teal); }
.shop-footer ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.shop-footer li { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.shop-footer li svg { color: var(--yellow); flex: 0 0 auto; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
    .shop-nav { display: none; }
    .orders-table__head { display: none; }
    .orders-table__row { grid-template-columns: 1fr 1fr; }
    .orders-table__arrow { display: none; }
}
@media (max-width: 640px) {
    .shop-user span { display: none; }
    .shop-hero .row { gap: 26px; }
    .cart-line { flex-wrap: wrap; }
    .cart-line__total { min-width: 0; }
    .cart__summary { position: static; max-width: none; }
    .catalog__toolbar { flex-direction: column; align-items: stretch; }
    .catalog__search { flex: 1 1 auto; }
}

/* --- Marketingpakketten (v1.1.0) --- */
.shop-pakket { margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--yellow, #f8bb16); color: #002755; font-weight: 700; font-size: 12px; text-decoration: none; }
.tag--incl { background: #36ccc7; color: #002755; }
.tag--min { background: #fff4d0; color: #6b5200; }
.pakket-overzicht { padding: 10px 0 30px; }
.pakket-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pakket-kaart { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #e2e6eb; box-shadow: 0 10px 30px rgba(0,39,85,.07); }
.pakket-kaart.is-mijn { border: 2px solid #36ccc7; box-shadow: 0 14px 36px rgba(54,204,199,.22); }
.pakket-kaart__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pakket-kaart__kop h2 { margin: 0; font-size: 22px; color: #002755; }
.pakket-kaart__code { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #002755; color: #fff; font-weight: 800; font-size: 19px; }
.pakket-kaart__prijs { margin: 0; color: #36a9a5; font-weight: 700; font-size: 14px; }
.pakket-kaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.pakket-kaart li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: #22395a; }
.pakket-kaart li svg { flex-shrink: 0; color: #36ccc7; margin-top: 3px; }
.pakket-kaart__acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
@media (max-width: 900px) { .pakket-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .shop-logo__sub { display: none; } .shop-user > span:not(.shop-pakket) { display: none; } }

/* =====================================================================
   FRANCHISEPORTAL (v1.2.0): dashboard, positie, Local Hero, vestiging, support
   ===================================================================== */
.shop-nav { overflow-x: auto; scrollbar-width: none; } .shop-nav::-webkit-scrollbar { display: none; }
.shop-nav a { white-space: nowrap; }
.status--open { background: #fdf1d4; color: #7a5200; } .status--in_behandeling { background: #e2f1fb; color: #1565a8; }
.status--beantwoord { background: #e2f6ee; color: var(--green); } .status--gesloten { background: #f0f0f0; color: #555; }
.status--m-ingediend { background: #fdf1d4; color: #7a5200; } .status--m-in_behandeling { background: #e2f1fb; color: #1565a8; }
.status--m-verwerkt { background: #e2f6ee; color: var(--green); } .status--m-afgewezen { background: #f0f0f0; color: #555; }
.page-head__terug { margin-bottom: 8px !important; font-size: 13.5px; } .page-head__terug a { color: var(--teal); }

/* Dashboard */
.dash-head__row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-head__hallo { font-family: 'Mont-Bold', sans-serif; color: var(--teal) !important; margin: 0 0 2px !important; }
.dash-pakket { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.1); color: #fff; }
.dash-pakket__code { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow); color: var(--navy); font-family: 'Mont-Heavy', sans-serif; font-size: 19px; }
.dash-pakket small { display: block; font-size: 11.5px; color: #cddcec; } .dash-pakket b { font-family: 'Mont-Heavy', sans-serif; font-size: 17px; }
.dash, .pos, .pv, .lhp { padding: 32px 0 80px; background: var(--grey); }
.dash-acties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.dash-acties a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.dash-acties a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,39,85,.08); }
.dash-acties svg { grid-row: span 2; color: #0b6662; }
.dash-acties b { font-family: 'Mont-Bold', sans-serif; font-size: 15px; } .dash-acties span { font-size: 13px; color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dash-kaart { padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.dash-kaart--positie { grid-column: 1 / -1; }
.dash-kaart__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dash-kaart__kop h2 { font-size: 18px; margin: 0; } .dash-kaart__kop a { font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: #0b6662; }
.dash-kaart__sub { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.dash-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dash-cijfers div { padding: 16px; border-radius: 14px; background: var(--grey); }
.dash-cijfers b { display: block; font-family: 'Mont-Heavy', sans-serif; font-size: 32px; line-height: 1.1; }
.dash-cijfers small { font-size: 16px; color: var(--muted); } .dash-cijfers span { font-size: 13.5px; color: var(--muted); }
.dash-lijst { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dash-lijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dash-lijst li:last-child { border-bottom: 0; } .dash-lijst a { font-family: 'Mont-Bold', sans-serif; }
.dash-leeg { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* Mijn positie */
.pos-balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.pos-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.pos-tabs button { border: 0; border-radius: 999px; padding: 9px 16px; background: transparent; font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--navy); cursor: pointer; }
.pos-tabs button[aria-selected=true] { background: var(--navy); color: #fff; }
.pos-meta { margin: 0; font-size: 13.5px; color: var(--muted); }
.pos-tabel__wrap { overflow-x: auto; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.pos-tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pos-tabel th { padding: 14px 16px; text-align: left; font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid var(--line); }
.pos-tabel td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pos-tabel tr:last-child td { border-bottom: 0; }
.pos-nu { font-family: 'Mont-Heavy', sans-serif; font-size: 20px; }
.pos-lijn { color: #0b6662; display: block; }
.pos-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: 'Mont-Bold', sans-serif; font-size: 12px; white-space: nowrap; }
.pos-badge--op { background: #e2f6ee; color: var(--green); } .pos-badge--neer { background: #fdeceb; color: #b23b32; } .pos-badge--nee { background: #fdeceb; color: #b23b32; }
.pos-badge--nieuw { background: #ddf5f4; color: #0b6662; } .pos-badge--gelijk { background: #f0f0f0; color: #555; }
.pos-uitleg { margin: 10px 4px 0; font-size: 13px; color: var(--muted); }
.pos-tip { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 16px 18px; border-radius: 16px; background: #fff8e1; font-size: 14.5px; }
.pos-tip svg { flex-shrink: 0; color: #7a5200; } .pos-tip a { font-family: 'Mont-Bold', sans-serif; text-decoration: underline; }

/* Local Hero */
.lhp__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.lhp__instellingen { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.lhp__label { margin: 0 0 8px; font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lhp__label:not(:first-child) { margin-top: 20px; }
.lhp__keuze { display: flex; flex-wrap: wrap; gap: 6px; }
.lhp__keuze button { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; background: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--navy); cursor: pointer; }
.lhp__keuze button[aria-selected=true], .lhp__keuze button[aria-checked=true] { border-color: var(--navy); background: var(--navy); color: #fff; }
.lhp__keuze--klein button { padding: 8px 12px; font-size: 13px; border-radius: 999px; }
.lhp__velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lhp__velden label { display: flex; flex-direction: column; gap: 4px; font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; color: var(--muted); }
.lhp__velden input[type=text] { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14.5px; color: var(--navy); }
.lhp__foto input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lhp__foto span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px dashed var(--teal); border-radius: 10px; color: #0b6662; cursor: pointer; font-size: 14px; }
.lhp__foto:focus-within span { outline: 2px solid var(--teal); }
.lhp__let { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.lhp__podium { position: sticky; top: 20px; padding: 26px; border-radius: 18px; background: linear-gradient(160deg, #0a3d78, #106a7a); }
.lh-druk { display: grid; grid-template-columns: 40% 1fr; grid-template-rows: 1fr auto; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.3); margin: 0 auto; transition: max-width .25s; }
.lh-druk__foto { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 280px; background: linear-gradient(180deg, #e8f6f6, #cdeeed) center / cover; color: #0b6662; font-family: 'Mont-Bold', sans-serif; font-size: 13px; }
.lh-druk__foto.is-foto > * { display: none; }
.lh-druk__tekst { padding: 22px 22px 8px; }
.lh-druk__merk { display: block; margin-bottom: 10px; font-family: 'Mont-Heavy', sans-serif; font-size: 24px; color: var(--navy); }
.lh-druk__tekst b { display: block; font-family: 'Mont-Heavy', sans-serif; font-size: 21px; line-height: 1.25; }
.lh-druk__tekst u { text-decoration: none; box-shadow: inset 0 -3px 0 var(--yellow); }
.lh-druk__tekst p { margin: 10px 0 14px; font-size: 14px; color: #40566f; }
.lh-druk__naw { display: grid; gap: 1px; font-family: 'Mont-Bold', sans-serif; font-size: 13px; }
.lh-druk__qr { display: flex; align-items: center; gap: 8px; padding: 10px 22px 18px; font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; color: #0b6662; }
.lh-druk--krant { grid-template-columns: 30% 1fr auto; grid-template-rows: auto; border-radius: 3px; }
.lh-druk--krant .lh-druk__foto { grid-row: auto; min-height: 180px; }
.lh-druk--krant .lh-druk__qr { flex-direction: column; justify-content: center; text-align: center; border-left: 1px dashed #d3dbe3; padding: 14px; }
.lh-druk--social { max-width: 360px; grid-template-columns: 1fr; aspect-ratio: 1 / 1; position: relative; }
.lh-druk--social .lh-druk__foto { position: absolute; inset: 0; min-height: 0; }
.lh-druk--social .lh-druk__tekst { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.95); }
.lh-druk--social .lh-druk__tekst p, .lh-druk--social .lh-druk__qr, .lh-druk--social .lh-druk__naw span:last-child { display: none; }
.lh-druk--social .lh-druk__merk { font-size: 17px; margin-bottom: 4px; }
.lhp__bestel { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.1); color: #fff; }
.lhp__bestel b { display: block; font-family: 'Mont-Bold', sans-serif; } .lhp__bestel span { font-size: 13px; color: #cddcec; }
.lhp__melding { margin: 10px 0 0; color: #fff; font-size: 14px; } .lhp__melding a { color: var(--yellow); text-decoration: underline; }

/* Mijn vestiging + support */
.pv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pv-form, .pv-lijst { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.pv-form h2, .pv-lijst h2 { font-size: 19px; }
.pv-soorten { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; }
.pv-soorten legend { margin-bottom: 8px; font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: var(--muted); }
.pv-soorten label { position: relative; cursor: pointer; }
.pv-soorten input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-soorten span { display: inline-block; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line); font-family: 'Mont-Bold', sans-serif; font-size: 13px; }
.pv-soorten input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.pv-soorten input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.pv-tekst { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: var(--muted); }
.pv-tekst textarea, .pv-tekst input { padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-family: 'Open Sans', sans-serif; font-size: 14.5px; color: var(--navy); resize: vertical; }
.pv-tekst textarea:focus, .pv-tekst input:focus { outline: none; border-color: var(--teal); }
.pv-ok { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #e2f6ee; color: var(--green); font-size: 14px; }
.pv-fout { padding: 10px 14px; border-radius: 12px; background: #fdeceb; color: #b23b32; font-size: 14px; }
.pv-lijst { display: grid; gap: 10px; }
.pv-item { display: block; padding: 14px 16px; border-radius: 14px; background: var(--grey); }
.pv-item--link:hover { background: #e8eef3; }
.pv-item__kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.pv-item__kop b { font-family: 'Mont-Bold', sans-serif; font-size: 14.5px; }
.pv-item p { margin: 0 0 6px; font-size: 14px; color: #40566f; } .pv-item small { font-size: 12.5px; color: var(--muted); }
.pv-item__notitie { padding: 8px 10px; border-radius: 10px; background: #fff; }
.pt { display: grid; gap: 18px; max-width: 820px; }
.pt-gesprek { display: grid; gap: 12px; }
.pt-bericht { max-width: 85%; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--line); }
.pt-bericht--vixx { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--navy); color: #fff; border-color: var(--navy); }
.pt-bericht__van { display: block; margin-bottom: 4px; font-family: 'Mont-Bold', sans-serif; font-size: 12px; color: var(--muted); }
.pt-bericht--vixx .pt-bericht__van { color: var(--teal); }
.pt-bericht p { margin: 0; font-size: 14.5px; }

@media (max-width: 1000px) { .dash-acties { grid-template-columns: 1fr 1fr; } .dash-grid { grid-template-columns: 1fr; } .lhp__grid, .pv__grid { grid-template-columns: 1fr; } .lhp__podium { position: static; } }
@media (max-width: 600px) {
    .dash-acties { grid-template-columns: 1fr; } .dash-cijfers { grid-template-columns: 1fr; }
    .lhp__velden { grid-template-columns: 1fr; } .lh-druk, .lh-druk--krant { grid-template-columns: 1fr; } .lh-druk__foto { grid-row: auto; min-height: 160px; }
    .lh-druk--krant .lh-druk__qr { border-left: 0; flex-direction: row; } .lhp__bestel { flex-direction: column; align-items: stretch; }
    .pos-tabel__lijn { display: none; } .pos-tabel th, .pos-tabel td { padding: 10px; }
}
.shop-nav { gap: 22px; min-width: 0; }
.lhp__bestel .btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1360px) { .shop-user > span:not(.shop-pakket) { display: none; } }
@media (max-width: 900px) {
    .shop-header__row { flex-wrap: wrap; }
    .shop-nav { display: flex !important; order: 3; width: 100%; margin: 6px 0 0; padding-bottom: 8px; gap: 18px; }
    .shop-nav a { font-size: 14.5px; }
}
@media (max-width: 600px) { .dash-acties { grid-template-columns: 1fr 1fr !important; gap: 10px; } .dash-acties a { grid-template-columns: 1fr; padding: 14px; row-gap: 6px; } .dash-acties svg { grid-row: auto; } .dash-acties span { display: none; } }

/* ── Local Hero-opmaker ── */
.lhm { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 26px; align-items: start; }
.lhm__paneel { display: grid; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #e2e6eb; box-shadow: 0 10px 30px rgba(0,39,85,.08); }
.lhm__groep { display: grid; gap: 7px; }
.lhm__label { display: flex; justify-content: space-between; font-family: 'Mont-Bold', sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lhm__label small { text-transform: none; letter-spacing: 0; font-family: 'Open Sans', sans-serif; }
.lhm input[type=text], .lhm select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14.5px; color: var(--navy); background: #fff; font-family: 'Open Sans', sans-serif; }
.lhm input[type=text]:focus, .lhm select:focus { outline: none; border-color: var(--teal); }
.lhm__seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f4f7; }
.lhm__seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9px; padding: 9px 6px; background: transparent; font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: var(--navy); cursor: pointer; white-space: nowrap; }
.lhm__seg button[aria-pressed=true] { background: var(--navy); color: #fff; }
.lhm__seg i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.15); }
.lhm__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lhm__chips button { border: 1.5px solid #cfe3e6; border-radius: 999px; padding: 7px 12px; background: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: var(--navy); cursor: pointer; }
.lhm__chips button[aria-pressed=true] { background: var(--teal); border-color: var(--teal); color: #fff; }
.lhm__twee { grid-template-columns: 1fr 1fr; column-gap: 10px; }
.lhm__twee label { display: grid; gap: 6px; }
.lhm__foto input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lhm__knop { display: block; padding: 10px 12px; border: 1.5px dashed var(--teal); border-radius: 10px; color: #1E8F8B; font-family: 'Mont-Bold', sans-serif; font-size: 13.5px; text-align: center; cursor: pointer; }
.lhm__foto:focus-within .lhm__knop { outline: 2px solid var(--teal); }
.lhm__fotobediening { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.lhm__fotobediening[hidden] { display: none; }
.lhm__fotobediening label { display: grid; gap: 4px; } .lhm__fotobediening input { width: 100%; accent-color: var(--teal); }
.lhm__toggles { display: grid; gap: 6px; margin-top: 4px; font-size: 14px; color: #22395a; }
.lhm__toggles input { accent-color: var(--teal); margin-right: 6px; }
.lhm__podium { position: sticky; top: 20px; display: grid; gap: 14px; justify-items: center; padding: 26px; border-radius: 20px; background: linear-gradient(160deg, #e9eef3, #dfe7ee); }
.lhm__proef { width: 100%; max-height: 72vh; box-shadow: 0 20px 50px rgba(0,20,45,.22); border-radius: 6px; overflow: hidden; background: #fff; }
.lhm__proef svg { display: block; width: 100%; height: 100%; }
.lhm__proef--flyer, .lhm__proef--story { width: auto; height: 72vh; max-height: 760px; }
.lhm__acties { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lhm__btn-licht { background: #fff; border: 2px solid var(--navy); color: var(--navy); }
.lhm__let { margin: 0; max-width: 560px; text-align: center; font-size: 12.5px; color: var(--muted); }
.lhm__melding { margin: 0; font-size: 14px; color: var(--navy); } .lhm__melding a { text-decoration: underline; }

.lhm__proef--social { width: min(100%, 72vh); max-width: 720px; }
.lhm__proef--krant { max-height: none; }
@media (max-width: 1000px) { .lhm { grid-template-columns: 1fr; } .lhm__podium { position: static; } .lhm__proef--flyer, .lhm__proef--story { height: auto; width: min(100%, 420px); } }
@media (max-width: 560px) { .lhm__twee, .lhm__fotobediening { grid-template-columns: 1fr; } }

/* ── v1.4.0: leads, mijn pagina, social ── */
.status--s-concept { background: #fdf1d4; color: #7a5200; } .status--s-wijziging { background: #e2f1fb; color: #1565a8; }
.status--s-goedgekeurd { background: #e2f6ee; color: var(--green); } .status--s-geplaatst { background: #f0f0f0; color: #555; }
.dash-kaart--leads { grid-column: 1 / -1; }
.dash-leads { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-leads .dash-lijst { margin: 0; }
.dash-datum { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dash-kaart--social { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; background: #fff8e1; border-color: #f3dc94; }
.dash-kaart--social svg { color: #7a5200; flex-shrink: 0; } .dash-kaart--social b { display: block; font-family: 'Mont-Bold', sans-serif; } .dash-kaart--social small { color: var(--muted); }
.ld-bron { display: inline-block; padding: 2px 9px; border-radius: 999px; font-family: 'Mont-Bold', sans-serif; font-size: 11.5px; background: #f0f2f5; color: var(--navy); white-space: nowrap; }
.ld-bron--berekening, .ld-bron--hypotheek { background: #ddf5f4; color: #0b6662; } .ld-bron--gids { background: #fdf1d4; color: #7a5200; } .ld-bron--contact, .ld-bron--terugbel { background: #e2f1fb; color: #1565a8; }
.ld-melding { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #e2f1fb; color: #1565a8; font-size: 14px; } .ld-melding--demo { background: #fdf1d4; color: #7a5410; } .ld-melding a { text-decoration: underline; }
.ld-cijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; } .ld-cijfers div { background: #fff; border: 1px solid var(--line); }
.ld-filter { flex-wrap: wrap; border-radius: 14px; margin-bottom: 14px; width: fit-content; }
.ld-filter a { padding: 8px 14px; border-radius: 999px; font-family: 'Mont-Bold', sans-serif; font-size: 13.5px; color: var(--navy); }
.ld-filter a.is-actief { background: var(--navy); color: #fff; }
.ld-lijst { display: grid; gap: 8px; }
.ld-item { border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.ld-item summary { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.ld-item summary::-webkit-details-marker { display: none; }
.ld-item summary b { font-family: 'Mont-Bold', sans-serif; } .ld-onderwerp { font-size: 14px; color: #40566f; } .ld-item time { font-size: 13px; color: var(--muted); }
.ld-item[open] summary { border-bottom: 1px solid var(--line); }
.ld-item dl { margin: 0; padding: 12px 16px 16px; display: grid; gap: 8px; }
.ld-item dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 14px; } .ld-item dt { color: var(--muted); } .ld-item dd { margin: 0; } .ld-item dd a { text-decoration: underline; }
.mp-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.mp-kop h2 { margin: 6px 0 2px; font-size: 24px; } .mp-kop a:not(.btn) { color: #0b6662; font-size: 14px; }
.mp-kop__acties { display: flex; gap: 10px; flex-wrap: wrap; }
.pk-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e2f6ee; color: var(--green); font-family: 'Mont-Bold', sans-serif; font-size: 12px; }
.mp-sub { margin: 28px 0 12px; font-size: 18px; }
.mp-functies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mp-functie { padding: 16px; border-radius: 14px; background: #fff; border: 1px dashed #c9d6e2; opacity: .75; }
.mp-functie.is-aan { border-style: solid; border-color: var(--line); opacity: 1; }
.mp-functie__status { display: inline-flex; align-items: center; gap: 4px; font-family: 'Mont-Bold', sans-serif; font-size: 12px; color: var(--muted); }
.mp-functie.is-aan .mp-functie__status { color: var(--green); }
.mp-functie b { display: block; margin: 6px 0 4px; font-family: 'Mont-Bold', sans-serif; } .mp-functie p { margin: 0; font-size: 13.5px; color: #40566f; }
.mp-links { display: grid; gap: 8px; }
.mp-link { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.mp-link b { font-family: 'Mont-Bold', sans-serif; font-size: 14px; } .mp-link input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: #40566f; background: var(--grey); }
.mp-link .btn { padding: 8px 14px; font-size: 13px; }
.mp-gidsen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mp-gids { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.mp-gids:hover { border-color: var(--teal); } .mp-gids svg { color: #0b6662; flex-shrink: 0; } .mp-gids b { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 14px; } .mp-gids small { font-size: 12.5px; color: var(--muted); }
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sc-post { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.sc-post__beeld { position: relative; aspect-ratio: 1 / 1; background: #cdeeed center / cover; }
.sc-kanaal { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,39,85,.85); color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 12px; }
.sc-post__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px; }
.sc-post__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sc-post__tekst { margin: 0; font-size: 14px; line-height: 1.55; color: #22395a; }
.sc-post__acties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .sc-post__acties .btn { padding: 8px 14px; font-size: 13px; } .sc-post__acties form { display: inline; }
.sc-wijzig summary { cursor: pointer; font-size: 13px; color: #1565a8; text-decoration: underline; }
.sc-wijzig form { display: grid; gap: 6px; margin-top: 8px; } .sc-wijzig textarea { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.sc-wijzig .btn { justify-self: start; padding: 8px 14px; font-size: 13px; }
@media (max-width: 1000px) { .dash-leads, .mp-functies, .sc-grid { grid-template-columns: 1fr 1fr; } .ld-item summary { grid-template-columns: auto 1fr; } .ld-onderwerp, .ld-item time { grid-column: 2; } .mp-link { grid-template-columns: 1fr auto; } .mp-link b { grid-column: 1 / -1; } }
@media (max-width: 600px) { .dash-leads, .mp-functies, .sc-grid, .ld-cijfers { grid-template-columns: 1fr; } .ld-item dl div { grid-template-columns: 1fr; } }
.shop-nav { gap: 18px !important; } .shop-nav a { font-size: 14.5px; }
@media (max-width: 1500px) { .shop-user > span:not(.shop-pakket) { display: none; } .shop-logo__sub { display: none; } }
.sc-post__acties .btn-full { border-width: 2px; padding: 8px 14px; line-height: inherit; }

/* ── v1.5.0: doorverkoop + maandoverzicht ── */
.dash-kaart--deel { grid-column: 1 / -1; border-left: 4px solid #c9d6e2; }
.dash-kaart--deel.is-aan { border-left-color: var(--green); }
.deel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.deel__tekst p { margin: 8px 0 0; font-size: 14.5px; color: #40566f; } .deel__let { font-size: 13px !important; color: var(--muted) !important; }
.deel__actie { display: grid; gap: 14px; justify-items: end; }
.deel__form { margin: 0; }
.deel__schakel { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px; background: #e8edf2; font-family: 'Mont-Bold', sans-serif; font-size: 15px; color: var(--navy); cursor: pointer; }
.deel__schakel span { width: 52px; height: 30px; border-radius: 999px; background: #b7c3cf; position: relative; transition: background .15s; }
.deel__schakel span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.deel__schakel[aria-checked=true] { background: #e2f6ee; } .deel__schakel[aria-checked=true] span { background: var(--green); } .deel__schakel[aria-checked=true] span::after { transform: translateX(22px); }
.deel__schakel:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.deel__cijfers { display: grid; grid-template-columns: repeat(3, auto); gap: 18px; text-align: right; }
.deel__cijfers b { display: block; font-family: 'Mont-Heavy', sans-serif; font-size: 22px; } .deel__cijfers span { font-size: 12.5px; color: var(--muted); }
.ld-deel { display: block; margin-top: 2px; font-family: 'Mont-Bold', sans-serif; font-size: 11px; color: var(--green); }
.ov-balk { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ov-balk label { display: flex; align-items: center; gap: 10px; font-family: 'Mont-Bold', sans-serif; font-size: 14px; }
.ov-balk select { padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 14.5px; }
.ov-saldo { background: var(--navy) !important; } .ov-saldo b, .ov-saldo span { color: #fff !important; }
.ov-tabel__wrap { overflow-x: auto; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.ov-tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ov-tabel th { padding: 12px 16px; text-align: left; font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid var(--line); }
.ov-tabel td { padding: 12px 16px; border-bottom: 1px solid var(--line); } .ov-tabel small { color: var(--muted); }
.ov-tabel .r { text-align: right; white-space: nowrap; }
.ov-credit td { color: var(--green); }
.ov-tabel tfoot td { font-family: 'Mont-Bold', sans-serif; border-bottom: 0; background: var(--grey); }
@media (max-width: 800px) { .deel { grid-template-columns: 1fr; } .deel__actie { justify-items: start; } .deel__cijfers { text-align: left; } }

/* Demo-balk (alleen in demo-modus) */
.demo-bar { background: var(--yellow, #f8bb16); color: #002755; font-size: 13.5px; }
.demo-bar__row { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; align-items: center; padding-top: 7px; padding-bottom: 7px; }
.demo-bar__wissel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.demo-bar a { color: #002755; text-decoration: none; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(0,39,85,.35); font-weight: 600; }
.demo-bar a.is-actief { background: #002755; color: #fff; border-color: #002755; }
.demo-bar a:hover { border-color: #002755; }
.demo-bar__bs { margin-left: 6px; }

/* =====================================================================
   APP-LAYOUT (v1.7): zijbalk met gegroepeerde navigatie + topbalk
   ===================================================================== */
body.app { background: var(--grey); }
.demo-bar__row { padding: 7px 24px; }
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.app-side {
    position: sticky; top: 0; width: 264px; flex: 0 0 264px; height: 100vh; overflow-y: auto; scrollbar-width: thin;
    display: flex; flex-direction: column; gap: 18px; padding: 24px 16px 20px; color: #fff;
    background: radial-gradient(120% 50% at 0% 100%, rgba(54,204,199,.16), transparent 60%), linear-gradient(180deg, #002755 0%, #001d40 100%);
}
.app-side__top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.app-logo { display: flex; flex-direction: column; gap: 7px; }
.app-logo img { height: 31px; width: auto; display: block; }
.app-logo span { font-family: 'Mont-Bold', sans-serif; color: var(--teal); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding-left: 2px; }
.app-side__sluit { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.app-vestiging { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); transition: background .2s; }
.app-vestiging:hover { background: rgba(255,255,255,.12); }
.app-vestiging__code { flex: 0 0 36px; height: 36px; border-radius: 10px; background: var(--yellow); color: var(--navy); font-family: 'Mont-Heavy', sans-serif; font-size: 17px; display: flex; align-items: center; justify-content: center; }
.app-vestiging b { display: block; color: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 14px; line-height: 1.25; }
.app-vestiging small { color: #9fb4cc; font-size: 12px; }
.app-nav { display: flex; flex-direction: column; gap: 6px; }
.app-nav__groep { display: flex; flex-direction: column; gap: 2px; }
.app-nav__kop { font-family: 'Mont-Bold', sans-serif; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6f93b9; padding: 12px 12px 5px; }
.app-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: #d6e2ef; font-family: 'Mont-Regular', sans-serif; font-size: 14.5px; transition: background .15s, color .15s; }
.app-nav a svg { color: #7fa3c7; flex: 0 0 auto; transition: color .15s; }
.app-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-nav a.is-active { background: rgba(54,204,199,.15); color: #fff; font-family: 'Mont-Bold', sans-serif; box-shadow: inset 3px 0 0 var(--yellow); }
.app-nav a.is-active svg { color: var(--teal); }
.app-side__voet { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 0; border-top: 1px solid rgba(255,255,255,.1); }
.app-side__voet a { display: inline-flex; align-items: center; gap: 8px; color: #9fb4cc; font-size: 13px; }
.app-side__voet a:hover { color: #fff; }
.app-scrim { display: none; }

.app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.app-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 28px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.app-top__menu { display: none; background: none; border: 0; color: var(--navy); cursor: pointer; padding: 6px; margin-left: -6px; }
.app-top__logo { display: none; }
.app-kruimel { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; }
.app-kruimel span { color: var(--muted); }
.app-kruimel span::after { content: '/'; margin-left: 10px; color: #b8c4d2; }
.app-kruimel b { font-family: 'Mont-Bold', sans-serif; color: var(--navy); }
.app-top__rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.app-top__hulp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-family: 'Mont-Bold', sans-serif; font-size: 13.5px; color: var(--navy); transition: border-color .2s; }
.app-top__hulp svg { color: var(--teal); }
.app-top__hulp:hover { border-color: var(--teal); }
.app .shop-cart-btn { background: var(--navy); color: #fff; }
.app .shop-cart-btn:hover { background: #0b3d74; }
.app .shop-main { flex: 1 0 auto; padding-bottom: 40px; }
.app-voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); background: #fff; }
.app-voet a { color: #0b6662; font-weight: 600; }

/* Paginakop als merkbanner (zoals de hero's op vixx.nl): navy, teal gloed, Mont Heavy */
.app .page-head {
    position: relative; overflow: hidden; width: calc(100% - 48px); max-width: calc(var(--maxw) - 48px); margin: 24px auto 4px; border-radius: 24px; padding: 34px 0 30px;
    background: radial-gradient(60% 140% at 100% 0%, rgba(54,204,199,.32), transparent 60%), radial-gradient(40% 90% at 85% 120%, rgba(248,187,22,.16), transparent 70%), linear-gradient(120deg, #002755 0%, #00396f 100%);
    box-shadow: 0 14px 34px rgba(0,39,85,.14);
}
.app .page-head::after {
    content: ''; position: absolute; right: -40px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%); opacity: .09; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='white'/%3E%3Cpath d='M28 46c0-9 11-13 22-3 11-10 22-6 22 3 0 13-22 27-22 27S28 59 28 46z' fill='%23002755'/%3E%3C/svg%3E") center / contain no-repeat;
}
.app .page-head .row { position: relative; z-index: 1; max-width: none; padding: 0 36px; }
.app .page-head h1 { font-size: clamp(26px, 3vw, 36px); }
.app .page-head p { max-width: 720px; }
.app .dash-head .row { padding: 0 36px; }

@media (max-width: 1080px) {
    .app-side { position: fixed; left: 0; top: 0; z-index: 90; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 10px 0 40px rgba(0,0,0,.25); }
    body.menu-open .app-side { transform: none; }
    body.menu-open .app-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(0,20,45,.45); }
    .app-side__sluit { display: inline-flex; }
    .app-top { padding: 0 16px; }
    .app-top__menu { display: inline-flex; }
}
@media (max-width: 640px) {
    .app-top__hulp span { display: none; }
    .app-top__hulp { padding: 8px; }
    .app .page-head { width: calc(100% - 32px); margin-top: 16px; border-radius: 18px; padding: 26px 0 22px; }
    .app .page-head .row, .app .dash-head .row { padding: 0 22px; }
    .demo-bar__lang { display: none; }
    .demo-bar__row { padding: 6px 16px; }
    .app-voet { padding: 16px; }
}

/* Resultaten per maand */
.rs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.rs-kpi { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 2px 10px; }
.rs-kpi > span { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.rs-kpi > span svg { color: var(--teal); }
.rs-kpi > b { font-family: 'Mont-Heavy', sans-serif; font-size: 34px; line-height: 1; color: var(--navy); }
.rs-kpi > b i { font-style: normal; font-size: 18px; color: #5f738a; }
.rs-kpi small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.rs-delta { justify-self: start; align-self: center; font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: #f0f0f0; color: #555; }
.rs-delta--op { background: #e2f6ee; color: var(--green); } .rs-delta--neer { background: #fdeceb; color: #b23b32; }
.rs-grafiek { margin-bottom: 8px; }
.rs-bars { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding-top: 10px; }
.rs-bar { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.rs-bar span { width: 100%; max-width: 46px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #36ccc7, #1aa9a4); }
.rs-bar.is-nu span { background: repeating-linear-gradient(135deg, #f8bb16 0 6px, #f9c843 6px 12px); }
.rs-bar b { font-family: 'Mont-Bold', sans-serif; font-size: 13px; }
.rs-bar small { font-size: 12px; color: var(--muted); }
.rs-tabel td small { display: block; color: #5f738a; font-size: 11.5px; }
.rs-geenscan td { color: #5f738a; }
.rs-leads { display: inline-flex; align-items: center; gap: 10px; min-width: 110px; }
.rs-leads i { display: block; height: 8px; border-radius: 99px; background: var(--teal); min-width: 4px; max-width: 70px; }
.rs-ai { display: inline-flex; gap: 4px; vertical-align: middle; }
.rs-ai i { width: 10px; height: 10px; border-radius: 50%; background: #e2e6eb; }
.rs-ai i.is-aan { background: var(--teal); }
.pos-maand { text-align: center !important; color: #6c7f95; white-space: nowrap; }
.pos-maand.is-nu { background: rgba(54,204,199,.08); color: var(--navy); }
@media (max-width: 900px) { .rs-kpis { grid-template-columns: repeat(2, 1fr); } .rs-bars { gap: 5px; height: 170px; } .rs-bar small { font-size: 10.5px; } }
.app .dash-head::after { display: none; }
.pos-meta a { color: #0b6662; font-weight: 600; }
.app-logo { align-items: flex-start; }
@media (max-width: 1080px) { .app-side { box-shadow: none; } body.menu-open .app-side { box-shadow: 10px 0 40px rgba(0,0,0,.25); } }
@media (max-width: 640px) { .demo-bar__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .demo-bar a { white-space: nowrap; } }
@media (max-width: 640px) { .demo-bar__wissel { flex-wrap: nowrap; } }
.app .shop-hero { width: calc(100% - 48px); max-width: calc(var(--maxw) - 48px); margin: 24px auto 4px; border-radius: 24px; padding: 40px 0 36px;
    background: radial-gradient(60% 140% at 100% 0%, rgba(54,204,199,.32), transparent 60%), linear-gradient(120deg, #002755 0%, #00396f 100%); box-shadow: 0 14px 34px rgba(0,39,85,.14); }
.app .shop-hero .row { max-width: none; padding: 0 36px; }
@media (max-width: 640px) { .app .shop-hero { width: calc(100% - 32px); border-radius: 18px; } .app .shop-hero .row { padding: 0 22px; } }

.lhm__fotos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.lhm__fotos button { padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; background: #e9eef3; aspect-ratio: 1; transition: border-color .15s, transform .15s; }
.lhm__fotos button:hover { transform: translateY(-1px); }
.lhm__fotos button[aria-pressed=true] { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(54,204,199,.3); }
.lhm__fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .lhm__fotos { grid-template-columns: repeat(4, 1fr); } }

/* Compacte zijbalk: past op een normaal scherm (ca. 700px hoog) */
.app-side { gap: 10px; padding: 18px 12px 14px; }
.app-side__top { padding: 0 6px; }
.app-logo { flex-direction: row; align-items: center; gap: 10px; }
.app-logo img { height: 25px; }
.app-logo span { font-size: 9.5px; letter-spacing: .14em; padding: 3px 0 0 10px; border-left: 1px solid rgba(255,255,255,.2); line-height: 1.2; }
.app-vestiging { padding: 8px 10px; gap: 10px; border-radius: 12px; }
.app-vestiging__code { flex-basis: 30px; height: 30px; border-radius: 8px; font-size: 15px; }
.app-vestiging b { font-size: 13.5px; }
.app-vestiging small { font-size: 11.5px; line-height: 1.2; display: block; }
.app-nav { gap: 2px; }
.app-nav__groep { gap: 1px; }
.app-nav__kop { padding: 9px 10px 3px; font-size: 10px; }
.app-nav a { padding: 6px 10px; font-size: 14px; line-height: 1.45; gap: 11px; }
.app-nav a svg { width: 17px; height: 17px; }
.app-side__voet { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding: 10px 8px 0; }
.app-side__voet a { font-size: 12.5px; }
@media (max-height: 640px) and (min-width: 1081px) { .app-nav__kop { padding-top: 6px; } .app-nav a { padding: 4px 10px; } }
.app-side { padding: 14px 12px 10px; } .app-nav__kop { padding-top: 8px; }
.lhm__vast { margin: 0; padding: 9px 12px; border-radius: 10px; background: #eef3f7; font-family: "Mont-Bold", sans-serif; font-size: 14px; color: var(--navy); }

/* =====================================================================
   BESTELPROCES (v1.9): stappen, materiaal kiezen, artwork, controleren
   ===================================================================== */
.flow { padding: 18px 0 10px; }
.flow--kort { padding: 18px 0 0; }
.stappen { list-style: none; margin: 0 0 22px; padding: 14px 18px; display: flex; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; counter-reset: s; overflow-x: auto; scrollbar-width: none; }
.stappen li { flex: 1 1 0; min-width: 120px; display: flex; align-items: center; gap: 10px; position: relative; padding-right: 18px; }
.stappen li:not(:last-child)::after { content: ''; position: absolute; right: 4px; top: 50%; width: 10px; height: 2px; background: var(--line); }
.stappen span { flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Mont-Bold', sans-serif; font-size: 13px; background: #eef2f6; color: #5f738a; }
.stappen b { font-family: 'Mont-Bold', sans-serif; font-size: 13px; color: #5f738a; line-height: 1.25; }
.stappen li.is-klaar span { background: #e2f6ee; color: var(--green); }
.stappen li.is-klaar b { color: var(--navy); }
.stappen li.is-actief span { background: var(--yellow); color: var(--navy); box-shadow: 0 0 0 4px rgba(248,187,22,.22); }
.stappen li.is-actief b { color: var(--navy); }
.flow-product { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; margin-bottom: 18px; }
.flow-product__ic { flex: 0 0 44px; height: 44px; border-radius: 12px; background: #ddf5f4; color: #0b6662; display: flex; align-items: center; justify-content: center; }
.flow-product b { display: block; font-family: 'Mont-Bold', sans-serif; }
.flow-product small { color: var(--muted); font-size: 13px; }
.flow-product a { margin-left: auto; color: #0b6662; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.mp-sub small { font-family: 'Open Sans', sans-serif; font-size: 13px; color: var(--muted); margin-left: 8px; font-weight: 400; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 26px; }
.cp-kaart { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.cp-kaart:hover { box-shadow: 0 12px 28px rgba(0,39,85,.09); transform: translateY(-2px); }
.cp-kaart.is-dicht { opacity: .75; }
.cp-kaart__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cp-kaart__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.cp-formaten { display: flex; gap: 4px; }
.cp-formaten i { font-style: normal; font-family: 'Mont-Bold', sans-serif; font-size: 11px; padding: 3px 8px; border-radius: 99px; background: #eef3f7; color: var(--muted); }
.cp-kaart h4 { font-size: 16.5px; margin-bottom: .3em; }
.cp-kaart p { font-size: 13.5px; color: #4c6178; flex: 1; }
.cp-kaart__voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cp-prijs { font-size: 12.5px; color: var(--muted); } .cp-prijs b { font-family: 'Mont-Bold', sans-serif; font-size: 16px; color: var(--navy); }
.cp-kaart .btn { padding: 9px 16px; font-size: 13.5px; }
.aw-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 26px; }
.aw-kaart { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.aw-kaart:hover { border-color: var(--teal); }
.aw-kaart__beeld { flex: 0 0 56px; height: 56px; border-radius: 9px; overflow: hidden; background: #eef2f6; }
.aw-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-kaart b { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 13.5px; line-height: 1.3; }
.aw-kaart small { display: block; font-size: 12px; color: var(--muted); }
.aw-status { display: inline-block; font-family: 'Mont-Bold', sans-serif; font-size: 11.5px !important; padding: 2px 9px; border-radius: 99px; background: #eef2f6; color: #4a5f78 !important; margin: 3px 0; }
.aw-status--ter_controle { background: #fff3d4; color: #8a6200 !important; }
.aw-status--goedgekeurd { background: #e2f6ee; color: var(--green) !important; }
.aw-status--aanpassen { background: #fdeceb; color: #b23b32 !important; }
.aw-status--in_wagen { background: #ddf5f4; color: #0b6662 !important; }
.ctl { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.ctl__proef { background: #e9eef3; border-radius: 20px; padding: 28px; display: flex; justify-content: center; }
.ctl__proef img { max-width: 100%; max-height: 72vh; border-radius: 6px; box-shadow: 0 18px 40px rgba(0,39,85,.22); }
.ctl__form { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; position: sticky; top: 84px; }
.ctl__form h2 { font-size: 20px; }
.ctl__gegevens { margin: 0 0 16px; display: grid; gap: 8px; }
.ctl__gegevens div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 13.5px; }
.ctl__gegevens dt { color: var(--muted); } .ctl__gegevens dd { margin: 0; font-weight: 600; }
.ctl__veld { display: grid; gap: 6px; font-family: 'Mont-Bold', sans-serif; font-size: 13px; margin-bottom: 12px; }
.ctl__veld small { font-family: 'Open Sans', sans-serif; color: var(--muted); font-weight: 400; }
.ctl__veld input, .ctl__veld textarea { font: inherit; font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; }
.ctl__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; padding: 12px; border-radius: 12px; background: #f6f9fb; margin-bottom: 14px; cursor: pointer; }
.ctl__check input { margin-top: 3px; accent-color: var(--teal); width: 17px; height: 17px; }
.ctl__knoppen { display: flex; gap: 10px; } .ctl__knoppen .btn { flex: 1; }
.ctl__let { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 14px 0 0; } .ctl__let svg { color: var(--green); flex: 0 0 auto; margin-top: 2px; }
.tag--artwork { background: #fff3d4; color: #8a6200; }
.cart-line__icon--artwork { overflow: hidden; padding: 0; }
.cart-line__icon--artwork img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__pers a { color: #0b6662; font-weight: 600; }
.aw-orderlijst { display: grid; gap: 14px; }
.aw-orderregel { display: flex; gap: 16px; align-items: flex-start; }
.aw-orderregel__beeld { flex: 0 0 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.aw-orderregel__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-orderregel b { display: block; font-family: 'Mont-Bold', sans-serif; }
.aw-orderregel .btn { margin-top: 8px; padding: 8px 16px; font-size: 13.5px; }
@media (max-width: 1000px) { .ctl { grid-template-columns: 1fr; } .ctl__form { position: static; } }
@media (max-width: 640px) { .stappen { padding: 10px 12px; } .stappen li { min-width: auto; flex: 0 0 auto; } .stappen li:not(.is-actief) b { display: none; } .flow-product { flex-wrap: wrap; } .flow-product a { margin-left: 0; } }
.cart-line__icon--artwork { width: 64px !important; height: 64px !important; flex: 0 0 64px !important; border-radius: 10px; } .cart-line__icon--artwork img { object-position: top; }

/* Campagnes per kanaal (v1.10) */
.kn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kn-kaart { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.kn-kaart:hover { border-color: var(--teal); box-shadow: 0 12px 26px rgba(0,39,85,.08); transform: translateY(-2px); }
.kn-kaart.is-dicht { opacity: .7; }
.kn-kaart__ic { flex: 0 0 50px; height: 50px; border-radius: 14px; background: var(--navy); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.kn-grid--online .kn-kaart__ic { background: linear-gradient(135deg, #36ccc7, #1aa9a4); color: #fff; }
.kn-kaart__tekst { flex: 1; min-width: 0; }
.kn-kaart__tekst b { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 16px; }
.kn-kaart__tekst > small { display: block; color: #4c6178; font-size: 13px; line-height: 1.45; margin: 2px 0 8px; }
.kn-kaart__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kn-kaart__meta i { font-style: normal; font-family: 'Mont-Bold', sans-serif; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #eef3f7; color: var(--muted); }
.kn-kaart__meta em { font-style: normal; font-family: 'Mont-Bold', sans-serif; font-size: 12.5px; color: var(--navy); margin-left: 6px; }
.kn-kaart__pijl img { width: 13px; transform: rotate(-90deg); opacity: .6; }
.kn-slot { font-family: 'Mont-Bold', sans-serif; font-size: 11.5px; padding: 4px 10px; border-radius: 99px; background: #fff3d4; color: #8a6200; white-space: nowrap; }
.kn-instellingen, .kn-tekst__form, .kn-tekst__preview { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.kn-instellingen { margin-bottom: 22px; }
.kn-instellingen h3, .kn-tekst h3, .kn-kop { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 0 0 14px; }
.kn-instellingen h3 span, .kn-tekst h3 span, .kn-kop span { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--navy); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.kn-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 16px; }
.kn-veld { display: grid; gap: 6px; align-content: start; }
.kn-veld--breed { grid-column: 1 / -1; }
.kn-veld > span { font-family: 'Mont-Bold', sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.kn-veld > span small { text-transform: none; letter-spacing: 0; font-family: 'Open Sans', sans-serif; color: #5f738a; float: right; }
.kn-veld input, .kn-veld select, .kn-veld textarea { font: inherit; font-size: 14px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy); width: 100%; }
.kn-veld input:focus, .kn-veld select:focus, .kn-veld textarea:focus { outline: none; border-color: var(--teal); }
.kn-veld > small { color: var(--muted); font-size: 12px; }
.kn-let { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.kn-kop + .kn-let { margin: -8px 0 12px; }
.kn-tekst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.kn-tekst__form { display: grid; gap: 12px; }
.kn-tekst__preview { position: sticky; top: 84px; display: grid; gap: 14px; }
.kn-tekst__label { font-family: 'Mont-Bold', sans-serif; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.serp { font-family: Arial, sans-serif; background: #fff; border: 1px solid #dfe1e5; border-radius: 12px; padding: 16px 18px; }
.serp small { font-size: 12px; color: #202124; }
.serp__url { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font-size: 12.5px; color: #202124; line-height: 1.3; }
.serp__url i { font-style: normal; color: #4d5156; }
.serp__ic { width: 26px; height: 26px; border-radius: 50%; background: #e6f8f7; color: #1aa9a4; display: inline-flex; align-items: center; justify-content: center; }
.serp__kop { display: block; color: #1a0dab; font-size: 19px; line-height: 1.3; margin-bottom: 4px; }
.serp p { margin: 0; color: #4d5156; font-size: 14px; line-height: 1.55; }
.serp--groot { max-width: 620px; width: 100%; }
.ctl__kanaal { display: inline-flex; align-items: center; gap: 6px; font-family: 'Mont-Bold', sans-serif; font-size: 12px; color: #0b6662; background: #ddf5f4; padding: 4px 10px; border-radius: 99px; margin: 0 0 8px; }
.ctl__aantal { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #f6f9fb; margin: 0 0 12px; font-size: 14px; }
.ctl__aantal span { color: var(--muted); } .ctl__aantal em { margin-left: auto; font-style: normal; font-family: 'Mont-Bold', sans-serif; }
.aw-orderregel__tekst { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; color: #1a0dab; background: #fff; }
.aw-orderregel__tekst small { font-size: 10.5px; line-height: 1.2; }
.aw-kaart__beeld { display: flex; align-items: center; justify-content: center; color: #1aa9a4; }
/* Branded / niet-branded */
.brand-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 16px; margin: 22px 0 6px; flex-wrap: wrap; }
.brand-toggle button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 10px 16px; border-radius: 12px; cursor: pointer; font-family: 'Mont-Bold', sans-serif; font-size: 14px; color: var(--navy); }
.brand-toggle button small { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; color: var(--muted); }
.brand-toggle button svg { color: var(--teal); }
.brand-toggle button.is-active { background: var(--navy); color: #fff; } .brand-toggle button.is-active small { color: #b8c9dc; } .brand-toggle button.is-active svg { color: var(--yellow); }
.tag--branded { background: var(--navy); color: #fff; }
.tag--neutraal { background: #eef2f6; color: #4a5f78; }
@media (max-width: 900px) { .kn-tekst { grid-template-columns: 1fr; } .kn-tekst__preview { position: static; } .brand-toggle button small { display: none; } }

/* Mijn campagnes (v1.11) */
.mc-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mc-kop span { font-size: 13px; color: var(--muted); }
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 26px; }
.mc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.mc__kop { display: flex; align-items: center; gap: 12px; }
.mc__beeld { flex: 0 0 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #eef7f7; color: #1aa9a4; display: flex; align-items: center; justify-content: center; }
.mc__beeld img { width: 100%; height: 100%; object-fit: cover; }
.mc__titel { flex: 1; min-width: 0; }
.mc__titel b { display: block; font-family: 'Mont-Bold', sans-serif; font-size: 15px; }
.mc__titel small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc__fase { font-family: 'Mont-Bold', sans-serif; font-size: 11.5px; padding: 4px 10px; border-radius: 99px; background: #eef2f6; color: #4a5f78; white-space: nowrap; }
.mc__fase--loopt { background: #e2f6ee; color: var(--green); }
.mc__fase--ingepland { background: #ddf5f4; color: #0b6662; }
.mc__fase--ter_controle { background: #fff3d4; color: #8a6200; }
.mc__fase--aanpassen { background: #fdeceb; color: #b23b32; }
.mc__periode { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.mc__periode span { display: inline-flex; align-items: center; gap: 6px; }
.mc__balk { height: 6px; border-radius: 99px; background: #eef2f6; overflow: hidden; margin-top: -6px; }
.mc__balk i { display: block; height: 100%; background: linear-gradient(90deg, #36ccc7, #1f7a52); border-radius: 99px; }
.mc__cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mc__cijfers div { background: #f4f7fa; border-radius: 12px; padding: 10px 12px; }
.mc__cijfers b { display: block; font-family: 'Mont-Heavy', sans-serif; font-size: 20px; line-height: 1.1; }
.mc__cijfers span { font-size: 11.5px; color: var(--muted); }
.mc__aanvragen { background: var(--navy) !important; } .mc__aanvragen b { color: var(--yellow); } .mc__aanvragen span { color: #b8c9dc !important; }
.mc__notitie { margin: 0; font-size: 12.5px; color: #4c6178; padding-left: 10px; border-left: 3px solid var(--teal); }
.mc__leeg { margin: 0; font-size: 13px; color: var(--muted); }
.mc__voet { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 13px; }
.mc__voet a { color: #0b6662; font-weight: 600; margin-left: auto; }
.dash-kaart--campagnes { grid-column: 1 / -1; }
.dash-kaart--actie { background: #fdeceb; border-color: #f2c2bd; } .dash-kaart--actie svg { color: #b23b32; }
.dash-camps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.dash-camps li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dash-camps b { font-family: 'Mont-Bold', sans-serif; }
.dash-camps__ic { width: 32px; height: 32px; border-radius: 9px; background: #ddf5f4; color: #0b6662; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dash-camps__aanv { margin-left: auto; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) { .dash-camps { grid-template-columns: 1fr; } }
.status--wacht_artwork { background: #fff3d4; color: #8a6200; }

/* Toegankelijkheid (v1.12): leesbare primaire knoppen (navy op geel ~9:1) en zichtbare focus */
.btn-full, .btn-full:hover { color: var(--navy); }
a:focus-visible, button:focus-visible, summary:focus-visible, [role=tab]:focus-visible, .chip:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 6px; }
.app-side a:focus-visible, .app-side button:focus-visible { outline-color: var(--yellow); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: #0b6662 !important; box-shadow: 0 0 0 3px rgba(54,204,199,.35); }
.kn-grid, .mc-grid, .cp-grid, .aw-lijst { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.shop-hero__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: #cddcec; font-size: 14px; margin: 14px 0 0; }
.shop-hero__flow svg { color: var(--yellow); } .shop-hero__flow span { opacity: .5; }
/* Berichten (v1.13) */
.app-top__bel { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); }
.app-top__bel:hover, .app-top__bel.is-actief { border-color: var(--teal); }
.br-lijst { display: grid; gap: 10px; }
.br { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; transition: border-color .15s; }
.br:hover { border-color: var(--teal); }
.br.is-nieuw { border-left: 4px solid var(--yellow); }
.br__ic { flex: 0 0 38px; height: 38px; border-radius: 10px; background: #ddf5f4; color: #0b6662; display: flex; align-items: center; justify-content: center; }
.br__tekst { flex: 1; min-width: 0; }
.br__tekst b { display: block; font-family: 'Mont-Bold', sans-serif; }
.br__tekst small { display: block; color: #4c6178; font-size: 13.5px; margin-top: 2px; }
.br__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .br { flex-wrap: wrap; } .br__meta { flex-direction: row; } }

.demo-bar__reset { display: inline; margin: 0; } .demo-bar__reset button { font: inherit; font-weight: 600; color: #002755; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 3px 6px; }

/* Pakketkaarten rustiger; compacte upsell op het dashboard */
.pakket-kaart ul { flex: 0 0 auto; align-content: start; }
.pakket-kaart > .btn, .pakket-kaart > div:last-child { margin-top: auto; }
.pakket-kaart__prijs { color: var(--navy); font-family: 'Mont-Bold', sans-serif; }
.dash-kaart--compact { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.dash-kaart--compact svg { color: #0b6662; flex-shrink: 0; }
.dash-kaart--compact b { display: block; font-family: 'Mont-Bold', sans-serif; } .dash-kaart--compact small { color: var(--muted); }
.dash-kaart--compact em { margin-left: auto; font-style: normal; color: #0b6662; font-weight: 600; white-space: nowrap; }

/* Veelgestelde vragen (Support) */
.faq { padding-bottom: 0; }
.faq__lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 8px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
.faq__item summary { cursor: pointer; padding: 14px 0; font-family: 'Mont-Bold', sans-serif; font-size: 14.5px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: #0b6662; font-size: 18px; line-height: 1; }
.faq__item[open] summary::after { content: '–'; }
.faq__item p { margin: 0 0 14px; font-size: 14px; color: #4c6178; }
.faq__item p a { color: #0b6662; font-weight: 600; }
.mc__voet a + a { margin-left: 14px; } .mc__opnieuw { color: var(--navy) !important; }
.skiplink { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--yellow); color: var(--navy); padding: 10px 16px; border-radius: 10px; font-family: 'Mont-Bold', sans-serif; }
.skiplink:focus { top: 12px; }
.shop-main:focus { outline: none; }
.br-voorkeur { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; margin-bottom: 14px; }
.br-voorkeur summary { cursor: pointer; padding: 12px 0; font-family: 'Mont-Bold', sans-serif; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.br-voorkeur form { padding-bottom: 14px; } .br-voorkeur p { margin: 0 0 8px; font-size: 14px; }
.br-voorkeur__opties { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; font-size: 14px; }

/* Aan de slag (dashboard) */
.start { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 18px; padding: 16px 20px; margin-bottom: 18px; }
.start__kop { display: flex; justify-content: space-between; align-items: flex-start; }
.start h2 { font-size: 18px; margin: 0; } .start__kop p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.start__weg { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; }
.start__balk { height: 6px; background: #eef2f6; border-radius: 99px; overflow: hidden; margin: 12px 0; } .start__balk i { display: block; height: 100%; background: linear-gradient(90deg, #36ccc7, #1f7a52); }
.start__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px 20px; font-size: 14px; }
.start__lijst li { display: flex; align-items: center; gap: 10px; }
.start__lijst li > span { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #cfd8e2; display: inline-flex; align-items: center; justify-content: center; }
.start__lijst li.is-klaar > span { background: #e2f6ee; border-color: #1f7a52; color: #1f7a52; }
.start__lijst li.is-klaar { color: var(--muted); text-decoration: line-through; }
.start__lijst a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(54,204,199,.6); text-underline-offset: 3px; }
/* Contrast (axe WCAG AA, v1.27): laatste puntjes */
.lhm__knop { color: #0b6662; }
.pos-maand { color: #4f6681; }
.lhm__chips button[aria-pressed=true] { color: var(--navy); }
.pos-uitleg a, .pos-meta a, .ld-melding a, .kn-let a, .panel__note a, .cart__summary-note a, .dash-leeg a, .pv-ok a, .app-voet a { text-decoration: underline; text-underline-offset: 2px; }
.kn-kaart.is-dicht, .cp-kaart.is-dicht { opacity: 1; background: #f7f9fb; border-style: dashed; }
.kn-kaart.is-dicht .kn-kaart__ic { background: #6b7d93 !important; color: #fff; }
.qty--vast { min-width: 92px; justify-content: center; font-family: 'Mont-Bold', sans-serif; font-size: 15px; color: var(--navy); background: #f4f7fa; border-radius: 99px; padding: 8px 14px; }

/* QA-ronde (v1.28): bedragen niet afbreken, mobiel */
.cart__summary-line > span:last-child, .cart-line__total { white-space: nowrap; }
@media (max-width: 640px) {
    .demo-bar__row { flex-wrap: wrap !important; overflow: visible !important; }
    .demo-bar__wissel { flex-wrap: wrap !important; }
    .app-kruimel span { display: none; }
    .stappen { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 1080px) { .app-logo span { display: none; } }
.aw-pdf { display: inline-block; margin-left: 8px; font-size: 12.5px; font-weight: 600; color: #0b6662; text-decoration: underline; }
.lhm__drukinfo { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.lhm__drukinfo.is-waarschuwing { color: #8a4b00; background: #fff3d4; padding: 8px 10px; border-radius: 8px; }