@charset "UTF-8";

/* ---- /assets/css/alert.css ---- */
/* =========================================================
   alert.css - DutchLine MAX Alerts
   - Default: soft
   - Left rail: ONLY for neutral
   - Works with theme-core.css vars
   ========================================================= */

/* Fallbacks (if a project page misses some vars) */
:root{
  --dl-alert-success: #20c997;
  --dl-alert-warning: #ffc107;
  --dl-alert-danger:  #ff4d4d;
  --dl-alert-info:    #0d6efd;
  --dl-alert-neutral: rgba(11,18,32,.72);
  --dl-alert-accent:  var(--accent, #304DA1);
}

/* Base */
.dl-alert{
  --_a: var(--dl-alert-neutral); /* type color */
  --_bg: color-mix(in srgb, var(--_a) 38%, #fff);
  --_bd: color-mix(in srgb, var(--_a) 55%, transparent);
  --_iconbg: color-mix(in srgb, var(--_a) 44%, #fff);

  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;

  border-radius: var(--r2, 18px);
  border: 1px solid var(--_bd);
  background: var(--_bg);

  padding: 14px 14px;
  box-shadow: var(--shadow2, 0 12px 30px rgba(11,18,32,.10));

  color: var(--text, #0b1220);
}

/* Content */
.dl-alert-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.2;
}

.dl-alert-text{
  margin: 6px 0 0;
  color: var(--muted, rgba(11,18,32,.70));
  line-height: 1.6;
}

.dl-alert-content{ min-width: 0; flex: 1 1 auto; }

.dl-alert-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Icon chip */
.dl-alert-icon{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: var(--_iconbg);
  border: 1px solid color-mix(in srgb, var(--_a) 30%, var(--border, rgba(11,18,32,.10)));
  color: var(--_a);
}

/* Icon SVG defaults */
.dl-alert-icon svg{
  width: 18px;
  height: 18px;
}

/* Dismiss button */
.dl-alert-dismiss{
  flex: 0 0 auto;
  margin-left: 2px;

  width: 38px;
  height: 38px;
  border-radius: 14px;

  border: 1px solid var(--border, rgba(11,18,32,.10));
  background: rgba(255,255,255,.72);

  display: grid;
  place-items: center;

  color: rgba(11,18,32,.72);
  cursor: pointer;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dl-alert-dismiss:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--border2, rgba(11,18,32,.14));
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
}

.dl-alert-dismiss:focus{
  outline: none;
  box-shadow: 0 0 0 6px var(--focus, rgba(48,77,161,.26));
}

/* =========================================================
   Types (set only the type color)
   ========================================================= */
.dl-alert-neutral{ --_a: var(--dl-alert-neutral); }
.dl-alert-info{    --_a: var(--dl-alert-info); }
.dl-alert-success{ --_a: var(--dl-alert-success); }
.dl-alert-warning{ --_a: var(--dl-alert-warning); }
.dl-alert-danger{  --_a: var(--dl-alert-danger); }
.dl-alert-accent{  --_a: var(--dl-alert-accent); }

/* =========================================================
   Left rail ONLY on neutral
   ========================================================= */
.dl-alert-neutral{
  padding-left: 16px; /* room for rail + nicer alignment */
}

.dl-alert-neutral::before{
  content:"";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent, #304DA1) 70%, rgba(11,18,32,.70)),
    rgba(11,18,32,.14)
  );
  opacity: .85;
}

/* =========================================================
   Variants
   ========================================================= */

/* Outline: for dense UI contexts */
.dl-alert-outline{
  background: #fff;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--_a) 22%, var(--border, rgba(11,18,32,.10)));
}

.dl-alert-outline .dl-alert-icon{
  background: rgba(255,255,255,.92);
}

/* Compact: toolbars, inline system notes */
.dl-alert-compact{
  padding: 10px 12px;
  gap: 10px;
  border-radius: var(--r2, 18px);
}

.dl-alert-compact .dl-alert-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.dl-alert-compact .dl-alert-title{
  font-size: .98rem;
}

.dl-alert-compact .dl-alert-text{
  margin-top: 4px;
  font-size: .94rem;
}

.dl-alert-compact .dl-alert-dismiss{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

/* No shadow: if embedded inside panels already */
.dl-alert-flat{
  box-shadow: none;
}

/* =========================================================
   Animations for dismiss (JS adds classes)
   ========================================================= */
.dl-alert.is-hiding{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

/* =========================================================
   Links inside alerts
   ========================================================= */
.dl-alert a{
  color: color-mix(in srgb, var(--_a) 70%, var(--text, #0b1220));
  font-weight: 850;
  text-decoration: none;
}

.dl-alert a:hover{
  color: var(--accent, #304DA1);
}

/* =========================================================
   Utility: spacing when stacked
   ========================================================= */
.dl-alert + .dl-alert{ margin-top: 10px; }


/* ---- /assets/css/buttons.css ---- */
/* =========================================================
   buttons.css - DutchLine UI (Buttons) ✅ improved
   Fixes:
   - Consistent hover/active/disabled across variants
   - Proper border + focus ring + shadow stacking
   - Correct :before/:after hooks (shimmer + underline) (optional but consistent)
   - Active states (.is-active / [aria-pressed="true"]) supported
   - Colors/size rhythm tuned for B2B header + cards
   ========================================================= */

/* Base */
.dl-btn{
  /* fallback-safe */
  --dlb-focus: var(--focus, rgba(48,77,161,.18));
  --dlb-border: var(--border, rgba(11,18,32,.12));
  --dlb-border2: var(--border2, rgba(11,18,32,.18));
  --dlb-ink: rgba(11,18,32,.88);

  position: relative;
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 850;
  letter-spacing: .01em;
  border: 1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1.1;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  text-decoration:none;
  white-space: nowrap;

  transform: translateY(0);
  box-shadow: none;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    opacity .16s ease,
    filter .16s ease;
}

 

/* Optional “active underline” hook (only visible when needed) */
.dl-btn::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  pointer-events:none;
  opacity: 0;
  transform: scaleX(.65);
  transition: opacity .16s ease, transform .16s ease;
}

.dl-btn:focus{ outline:none; }
.dl-btn:focus-visible{
  box-shadow: 0 0 0 6px var(--dlb-focus);
}

@media (hover:hover){
  .dl-btn:hover{ transform: translateY(-1px); }
}
.dl-btn:active{ transform: translateY(0); }

/* Active (works for links + buttons) */
.dl-btn.is-active,
.dl-btn[aria-pressed="true"]{
  transform: translateY(0);
}
.dl-btn.is-active::after,
.dl-btn[aria-pressed="true"]::after{
  opacity: .9;
  transform: scaleX(1);
}

/* Disabled */
.dl-btn:disabled,
.dl-btn[aria-disabled="true"],
.dl-btn.is-disabled{
  pointer-events:none;
  opacity: .62;
  transform:none;
  box-shadow:none !important;
  filter: none !important;
}
.dl-btn:disabled::before,
.dl-btn[aria-disabled="true"]::before,
.dl-btn.is-disabled::before{ opacity:0 !important; }

/* Sizes */
.dl-btn-sm{ padding: 9px 12px; border-radius: 12px; font-size: .92rem; }
.dl-btn-md{ padding: 11px 14px; border-radius: 14px; }
.dl-btn-lg{ padding: 13px 16px; border-radius: 16px; font-size: 1.02rem; }

/* Block */
.dl-btn-block{ width: 100%; }

/* Icon-only */
.dl-btn-icon{
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  justify-content:center;
}
.dl-btn-icon.dl-btn-sm{ width: 38px; height: 38px; border-radius: 12px; }
.dl-btn-icon.dl-btn-lg{ width: 48px; height: 48px; border-radius: 16px; }

/* Collapse: label op desktop, alleen icoon op smalle schermen */
@media (max-width: 575.98px){
  .dl-btn-collapse{
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
  }
  .dl-btn-collapse.dl-btn-sm{ width: 38px; height: 38px; border-radius: 12px; }
  .dl-btn-collapse.dl-btn-lg{ width: 48px; height: 48px; border-radius: 16px; }
  .dl-btn-collapse .dl-btn-label{ display: none; }
  .dl-btn-collapse .fa-solid,
  .dl-btn-collapse .fa-regular,
  .dl-btn-collapse .fa-brands,
  .dl-btn-collapse .fa-light{ margin: 0 !important; }
}

/* =========================================================
   Variants (DutchLine blue family)
   ========================================================= */

/* ---------- Primary ---------- */
.dl-btn-primary{
  
  background: #131F3F;
  color:#fff;
}
.dl-btn-primary::before{ opacity:.55; }
.dl-btn-primary::after{
  background: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.28));
}
@media (hover:hover){
  .dl-btn-primary:hover{
     background: #233A77;
	color:#fff;
  }
}
.dl-btn-primary:active{
  filter: brightness(.98);
  box-shadow: 0 14px 28px rgba(48,77,161,.18);
}
.dl-btn-primary:focus-visible{
  box-shadow: 0 0 0 6px var(--dlb-focus), 0 22px 44px rgba(48,77,161,.22);
}

/* Active */
.dl-btn-primary.is-active,
.dl-btn-primary[aria-pressed="true"]{
  box-shadow: 0 22px 44px rgba(48,77,161,.22);
}

/* ---------- Ghost ---------- */
.dl-btn-ghost{
  background: rgba(255,255,255,.92);
  border-color: var(--dlb-border);
  color: #131F3F;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.dl-btn-ghost::before{ opacity:.35; }
.dl-btn-ghost::after{
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(6,182,212,.45));
}
@media (hover:hover){
  .dl-btn-ghost:hover{
    background:#131F3F;
    border-color: var(--dlb-border2);
    box-shadow: 0 12px 26px rgba(11,18,32,.08);
	color:#fff;
  }
}
.dl-btn-ghost:active{
  background: rgba(255,255,255,.98);
  box-shadow: 0 8px 18px rgba(11,18,32,.06);
}
.dl-btn-ghost.is-active,
.dl-btn-ghost[aria-pressed="true"]{
  border-color: color-mix(in srgb, rgba(48,77,161,.40) 70%, var(--dlb-border));
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* ---------- Soft (accent tint) ---------- */
.dl-btn-soft{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.18);
  color: rgba(11,18,32,.92);
  box-shadow: 0 10px 22px rgba(48,77,161,.10);
}
.dl-btn-soft::before{ opacity:.20; }
.dl-btn-soft::after{
  background: linear-gradient(90deg, rgba(48,77,161,.60), rgba(6,182,212,.45));
}
@media (hover:hover){
  .dl-btn-soft:hover{
    background: rgba(48,77,161,.13);
    border-color: rgba(48,77,161,.24);
    box-shadow: 0 12px 26px rgba(48,77,161,.12);
  }
}
.dl-btn-soft:active{
  background: rgba(48,77,161,.11);
  box-shadow: 0 9px 18px rgba(48,77,161,.10);
}
.dl-btn-soft.is-active,
.dl-btn-soft[aria-pressed="true"]{
  background: rgba(48,77,161,.14);
  border-color: rgba(48,77,161,.28);
}

/* ---------- Neutral (ink) ---------- */
.dl-btn-neutral{
  background: rgba(11,18,32,.06);
  border-color: rgba(11,18,32,.10);
  color: rgba(11,18,32,.90);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.dl-btn-neutral::before{ opacity:.20; }
.dl-btn-neutral::after{
  background: linear-gradient(90deg, rgba(11,18,32,.42), rgba(11,18,32,.18));
}
@media (hover:hover){
  .dl-btn-neutral:hover{
    background: rgba(11,18,32,.08);
    border-color: rgba(11,18,32,.14);
    box-shadow: 0 12px 26px rgba(11,18,32,.08);
  }
}
.dl-btn-neutral:active{
  background: rgba(11,18,32,.07);
  box-shadow: 0 8px 18px rgba(11,18,32,.06);
}
.dl-btn-neutral.is-active,
.dl-btn-neutral[aria-pressed="true"]{
  border-color: rgba(11,18,32,.18);
}

/* ---------- Success / Warning / Danger (light B2B) ---------- */
.dl-btn-success{
  background: rgba(255,255,255,.92);
  border-color: rgba(32,201,151,.22);
  color: rgba(11,18,32,.92);
  box-shadow: 0 10px 22px rgba(32,201,151,.10);
}
.dl-btn-success::after{
  background: linear-gradient(90deg, rgba(32,201,151,.70), rgba(32,201,151,.30));
}
 
.dl-btn-success:hover{
    background: rgba(32,201,151);
    border-color: rgba(32,201,151,.28);
    box-shadow: 0 12px 26px rgba(32,201,151,.12);
	color:#fff;
}
 
.dl-btn-success:active{ background: rgba(32,201,151,.13); }

.dl-btn-warning{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,193,7,.24);
  color: rgba(11,18,32,.92);
  box-shadow: 0 10px 22px rgba(255,193,7,.10);
}
.dl-btn-warning::after{
  background: linear-gradient(90deg, rgba(255,193,7,.70), rgba(255,193,7,.30));
}
@media (hover:hover){
  .dl-btn-warning:hover{
     background: rgba(255,193,7);
    border-color: rgba(255,193,7,.30);
    box-shadow: 0 12px 26px rgba(255,193,7,.12);
	color:#fff;
  }
}
.dl-btn-warning:active{ background: rgba(255,193,7,.15); }

.dl-btn-danger{
  background: rgba(255,255,255,.92);
  border-color: rgba(159, 0, 11);
  color: #131F3F;
  box-shadow: 0 10px 22px rgba(255,77,77,.10);
}
.dl-btn-danger::after{
  background: linear-gradient(90deg, rgba(255,77,77,.70), rgba(255,77,77,.30));
} 
.dl-btn-danger:hover{
  background: rgba(255,77,77);
border-color: rgba(255,77,77);
box-shadow: 0 12px 26px rgba(255,77,77,.12);
color:#fff;
}
 
.dl-btn-danger:active{ background: rgba(255,77,77); }

/* ---------- Outline (optional) ---------- */
.dl-btn-outline{
  background: transparent;
  border-color: var(--dlb-border2);
  color: rgba(11,18,32,.90);
}
.dl-btn-outline::after{
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(6,182,212,.45));
}
@media (hover:hover){
  .dl-btn-outline:hover{
    background: rgba(48,77,161,.06);
    border-color: color-mix(in srgb, rgba(48,77,161,.35) 60%, var(--dlb-border2));
  }
}
.dl-btn-outline:active{ background: rgba(48,77,161,.05); }

/* =========================================================
   Button groups (toolbar look)
   ========================================================= */
 
.dl-btn-group{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--dlb-border);
  background: rgba(255,255,255,1);
  box-shadow: 0 10px 22px rgba(11,18,32,.2);
  overflow: hidden;
}

.dl-btn-group > .dl-btn{
  flex: 0 0 auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  transform: none;
}

.dl-btn-group > .dl-btn + .dl-btn{
  border-left: 1px solid var(--dlb-border);
}

.dl-btn-group > .dl-btn::before,
.dl-btn-group > .dl-btn::after{ display:none; }

.dl-btn-group > .dl-btn.is-active,
.dl-btn-group > .dl-btn[aria-pressed="true"]{
  background: rgba(48,77,161,.12);
  font-weight: 900;
}

/* ---------- FULL WIDTH: group = 100%, buttons = equal width ---------- */
.dl-btn-group.is-fluid{
  display: flex;          /* belangrijk: flex in plaats van inline-flex */
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}

.dl-btn-group.is-fluid > .dl-btn{
  flex: 1 1 0;            /* verdeelt automatisch: 2 knoppen = 50/50, 3 = 33/33/33 */
  min-width: 0;           /* voorkomt overflow ellende */
}

/* Optioneel: label netjes inkorten als het te lang is */
.dl-btn-group.is-fluid > .dl-btn{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- FULL WIDTH maar NIET verdelen (handig als je 1 knop hebt) ---------- */
/* Meestal niet nodig, maar als je expliciet wil forceren dat 1 knop 100% is
   en bij 2+ knoppen niet automatisch equal, dan kan je dit gebruiken. */
.dl-btn-group.is-fluid-keep{
  display: flex;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}
.dl-btn-group.is-fluid-keep > .dl-btn{
  flex: 0 0 auto;
}

/* Als je is-fluid-keep gebruikt en je wil alleen de eerste knop laten groeien: */
.dl-btn-group.is-fluid-keep > .dl-btn:first-child{
  flex: 1 1 auto;
  min-width: 0;
}

 

/* =========================================================
   Busy / spinner / progress
   ========================================================= */
.dl-btn .dl-btn-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display:none;
  flex-shrink: 0;
  margin-right: 8px;
  opacity: .92;
  animation: dlBtnSpin .75s linear infinite;
}
@keyframes dlBtnSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.dl-btn.is-busy{ pointer-events:none; }
.dl-btn.is-busy .dl-btn-spinner{ display:inline-block; }
.dl-btn.is-busy .dl-btn-icon-slot{ opacity: .92; }

/* Extra ruimte voor progress bar */
.dl-btn.has-progress{
  padding-bottom: 22px;
}

/* Progress bar inside the button */
.dl-btn .dl-btn-progress{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  overflow:hidden;
  display:none;
  background: rgba(255,255,255,.22);
}
.dl-btn .dl-btn-progress > i{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}
.dl-btn.has-progress .dl-btn-progress{ display:block; }

/* Make progress visible on light variants too */
.dl-btn-ghost.has-progress .dl-btn-progress,
.dl-btn-neutral.has-progress .dl-btn-progress,
.dl-btn-soft.has-progress .dl-btn-progress,
.dl-btn-success.has-progress .dl-btn-progress,
.dl-btn-warning.has-progress .dl-btn-progress,
.dl-btn-danger.has-progress .dl-btn-progress,
.dl-btn-outline.has-progress .dl-btn-progress{
  background: rgba(11,18,32,.08);
}
.dl-btn-ghost.has-progress .dl-btn-progress > i,
.dl-btn-neutral.has-progress .dl-btn-progress > i,
.dl-btn-soft.has-progress .dl-btn-progress > i,
.dl-btn-success.has-progress .dl-btn-progress > i,
.dl-btn-warning.has-progress .dl-btn-progress > i,
.dl-btn-danger.has-progress .dl-btn-progress > i,
.dl-btn-outline.has-progress .dl-btn-progress > i{
  background: rgba(48,77,161,.55);
}

/* Tiny icon label spacing helpers */
.dl-btn .dl-btn-icon-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dl-btn{ transition:none !important; }
  .dl-btn::before, .dl-btn::after{ transition:none !important; }
}
/* Ghost danger variant (matcht ghost buttons) */
.dl-btn.dl-btn-ghost.dl-btn-ghost-danger{
  color: #131F3F;
}

.dl-btn.dl-btn-ghost.dl-btn-ghost-danger:hover{
 background: rgba(255,255,255,.92);
 
 
}

.dl-btn.dl-btn-ghost.dl-btn-ghost-danger:focus{
   box-shadow: 0 10px 22px rgba(255,77,77,.10);
}
 
/* ==========================================================
   Mobile touch target: ensure minimum 44x44px on small screens
   WCAG 2.5.5 / Apple HIG recommendation
   ========================================================== */
@media (max-width: 767.98px) {
  .dl-btn-sm {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .dl-btn-icon.dl-btn-sm {
    width: 44px;
    height: 44px;
  }
}


/* ---- /assets/css/chat.css ---- */
/* =========================================================
   chat.css - DutchLine Chat (Expanded UI Kit)
   - Inbox layout (sidebar + thread)
   - Search + filters + pinned
   - Message groups, reply, edit, actions menu
   - Attachments (file/image), link preview
   - Unread divider + scroll-to-bottom button
   - Typing indicator + quick replies
   - Empty/loading states
   ========================================================= */

:root{
  --dl-chat-bg: rgba(255,255,255,.88);
  --dl-chat-head: rgba(255,255,255,.92);
  --dl-chat-thread: rgba(255,255,255,.86);

  --dl-success: rgba(32,201,151,.95);
  --dl-danger: rgba(255,77,77,.95);
  --dl-warning: rgba(255,193,7,.95);
  --dl-info: rgba(13,110,253,.95);

  --dl-success-soft: rgba(32,201,151,.12);
  --dl-danger-soft: rgba(255,77,77,.12);
  --dl-warning-soft: rgba(255,193,7,.12);
  --dl-info-soft: rgba(13,110,253,.12);
}

/* =========================================================
   Inbox frame
   ========================================================= */
.dl-chatkit{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--dl-chat-bg);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-chatkit-grid{
  display:grid;
  grid-template-columns: 360px 1fr;
  min-height: 600px;
  height: 100%;
}
@media (max-width: 991px){
  .dl-chatkit-grid{ grid-template-columns: 1fr; }
  .dl-chatkit-sidebar{ display:none; }
  .dl-chatkit.is-mobile-list .dl-chatkit-sidebar{ display:block; }
  .dl-chatkit.is-mobile-list .dl-chatkit-thread{ display:none; }
}

/* =========================================================
   Sidebar (conversation list)
   ========================================================= */
.dl-chatkit-sidebar{
  border-right: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.dl-chatkit-shead{
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--dl-chat-head);
  flex: 0 0 auto;
}

.dl-chatkit-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-chatkit-title h3{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 1.05rem;
}
.dl-chatkit-title .mini{
  color: var(--muted2);
  font-weight: 900;
  font-size: .85rem;
}

.dl-chatkit-search{
  position: relative;
  margin-top: 10px;
}
.dl-chatkit-search input{
  border-radius: 14px !important;
  /* form.css forceert padding:16px met !important - hier overrulen zodat de
     tekst niet onder het zoek-icoon valt */
  padding-left: 42px !important;
}
.dl-chatkit-search svg{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
}

.dl-chatkit-filters{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.dl-chatkit-chip{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: .82rem;
  color: rgba(11,18,32,.80);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.dl-chatkit-chip:hover{ transform: translateY(-1px); background:#fff; border-color: var(--border2); }
.dl-chatkit-chip.is-active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

.dl-chatkit-list{
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.dl-conv{
  display:flex;
  gap: 12px;
  padding: 13px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.dl-conv:hover{
  transform: translateY(-1px);
  border-color: var(--border);
  background: rgba(255,255,255,.72);
}
.dl-conv.is-active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.06);
}
.dl-conv .av{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    rgba(255,255,255,.94);
  display:grid;
  place-items:center;
  font-weight: 950;
  flex: 0 0 auto;
  color: rgba(11,18,32,.78);
}
.dl-conv .m{
  min-width:0;
  flex: 1 1 auto;
}
.dl-conv .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-conv .name{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: .98rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-conv .time{
  color: var(--muted2);
  font-weight: 900;
  font-size: .82rem;
  flex: 0 0 auto;
}
.dl-conv .sub{
  margin: 4px 0 0;
  color: var(--muted2);
  font-size: .88rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-conv .meta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dl-conv .tags{
  display:flex;
  gap: 6px;
  flex-wrap:wrap;
}
.dl-tag{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 900;
  font-size: .78rem;
  color: rgba(11,18,32,.78);
}
.dl-tag.pinned{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}
.dl-unread{
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 999px;
  background: rgba(48,77,161,.95);
  color: #fff;
  font-weight: 950;
  font-size: .72rem;
  flex: 0 0 auto;
}

/* =========================================================
   Thread header
   ========================================================= */
.dl-chatkit-thread{
  background: var(--dl-chat-thread);
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.dl-thread-head{
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--dl-chat-head);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.dl-thread-title{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}
.dl-thread-title .av{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.78);
  flex: 0 0 auto;
}
.dl-thread-title .meta{
  min-width:0;
}
.dl-thread-title .name{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.01em;
  font-size: 1.02rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-thread-title .sub{
  margin: 2px 0 0;
  color: var(--muted2);
  font-size: .90rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.dl-thread-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  flex: 0 0 auto;
}
.dl-thread-actions .dl-btn{
  padding: 10px 12px;
}

/* =========================================================
   Thread body (messages)
   ========================================================= */
.dl-thread-body{
  position: relative;
  flex: 1 1 auto;
  overflow:auto;
  padding: 22px 24px;
  background:
    radial-gradient(900px 360px at 8% 0%, rgba(48,77,161,.06), transparent 60%),
    radial-gradient(900px 360px at 92% 0%, rgba(128,160,208,.06), transparent 70%),
    rgba(255,255,255,.86);
}

/* scroll-to-bottom */
.dl-scrollbtn{
  position:absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(11,18,32,.10);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dl-scrollbtn:hover{ transform: translateY(-1px); border-color: var(--border2); background:#fff; }

/* separators */
.dl-sep{
  display:flex;
  justify-content:center;
  margin: 20px 0;
}
.dl-sep span{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--muted2);
  font-size: .85rem;
  font-weight: 900;
}

/* unread divider */
.dl-unreadline{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 20px 0;
}
.dl-unreadline::before,
.dl-unreadline::after{
  content:"";
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.22), rgba(11,18,32,.08));
  flex: 1 1 auto;
  opacity: .9;
}
.dl-unreadline span{
  border: 1px solid rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
  color: rgba(11,18,32,.84);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 950;
  font-size: .85rem;
}

/* system message */
.dl-system{
  display:flex;
  justify-content:center;
  margin: 10px 0;
}
.dl-system .box{
  max-width: 720px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  background: rgba(48,77,161,.06);
  padding: 10px 12px;
  color: rgba(11,18,32,.78);
  font-weight: 850;
}

/* message group */
.dl-group{
  display:flex;
  gap: 10px;
  margin: 18px 0;
  align-items:flex-end;
}
.dl-group.me{ justify-content:flex-end; }
.dl-group .av{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.70);
  flex: 0 0 auto;
}
.dl-group.me .av{ display:none; }

.dl-stack{ display:flex; flex-direction:column; gap: 10px; min-width:0; }

/* bubble */
.dl-bubble{
  max-width: min(78%, 760px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  padding: 12px 16px;
  box-shadow: 0 14px 36px rgba(11,18,32,.06);
  position: relative;
}
.dl-group.me .dl-bubble{
  background: rgba(48,77,161,.08);
  border-color: rgba(48,77,161,.22);
}
.dl-bubble .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-bubble .who{
  margin: 0;
  font-weight: 950;
  font-size: .92rem;
  color: rgba(11,18,32,.86);
}
.dl-bubble .meta{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted2);
  font-weight: 900;
  font-size: .82rem;
}
.dl-pill-mini{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 5px 8px;
  font-weight: 950;
  font-size: .76rem;
  color: rgba(11,18,32,.74);
}
.dl-pill-mini.success{ border-color: rgba(32,201,151,.25); background: var(--dl-success-soft); }
.dl-pill-mini.warning{ border-color: rgba(255,193,7,.25); background: var(--dl-warning-soft); }
.dl-pill-mini.danger{ border-color: rgba(255,77,77,.25); background: var(--dl-danger-soft); }
.dl-pill-mini.info{ border-color: rgba(13,110,253,.25); background: var(--dl-info-soft); }

.dl-bubble .text{
  margin: 8px 0 0;
  color: rgba(11,18,32,.78);
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dl-bubble .text a{ text-decoration: underline; text-underline-offset: 3px; }
.dl-bubble .text code{
  background: rgba(11,18,32,.06);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 900;
}
.dl-bubble pre{
  margin: 10px 0 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #0b1220;
  color: rgba(255,255,255,.92);
  overflow:auto;
  font-size: .92rem;
  line-height: 1.55;
}

/* Reply preview */
.dl-reply{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  padding: 8px 10px;
  color: rgba(11,18,32,.76);
  font-weight: 900;
  font-size: .86rem;
}
.dl-group.me .dl-reply{
  border-color: rgba(48,77,161,.22);
  background: rgba(255,255,255,.78);
}
.dl-reply .k{ color: var(--muted2); font-weight: 950; margin-right: 6px; }
.dl-reply .q{ opacity: .9; }

/* Attachments */
.dl-attach{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  overflow:hidden;
}
.dl-attach .thumb{
  aspect-ratio: 16/9;
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    rgba(255,255,255,.92);
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(11,18,32,.70);
  position:relative;
}
.dl-attach .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dl-attach .thumb .badge{
  position:absolute;
  left: 10px;
  bottom: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 950;
  font-size: .78rem;
}
.dl-attach .meta{ padding: 10px 12px; }
.dl-attach .meta .fn{ margin: 0; font-weight: 950; }
.dl-attach .meta .sz{ margin: 6px 0 0; color: var(--muted2); font-size: .88rem; }

/* Link preview */
.dl-linkprev{
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  overflow:hidden;
  display:grid;
  grid-template-columns: 140px 1fr;
}
@media (max-width: 575px){
  .dl-linkprev{ grid-template-columns: 1fr; }
}
.dl-linkprev .img{
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    rgba(255,255,255,.92);
  border-right: 1px solid var(--border);
  min-height: 92px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(11,18,32,.68);
}
@media (max-width: 575px){
  .dl-linkprev .img{ border-right:0; border-bottom:1px solid var(--border); }
}
.dl-linkprev .m{
  padding: 10px 12px;
}
.dl-linkprev .m .t{ margin:0; font-weight: 950; }
.dl-linkprev .m .d{ margin:6px 0 0; color: var(--muted2); font-size:.88rem; line-height:1.4; }
.dl-linkprev .m .u{ margin:8px 0 0; color: rgba(48,77,161,.88); font-weight: 950; font-size:.86rem; }

/* Bubble footer: time + ticks + actions */
.dl-bubble .foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-top: 10px;
  color: var(--muted2);
  font-size: .82rem;
  font-weight: 900;
}
.dl-status{
  display:flex;
  align-items:center;
  gap: 6px;
}
.dl-tick{
  width: 18px;
  height: 18px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-size: .72rem;
}

/* actions button + dropdown */
.dl-msg-actions{
  position: relative;
}
.dl-actions-btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 6px 9px;
  font-weight: 950;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dl-actions-btn:hover{ transform: translateY(-1px); border-color: var(--border2); background:#fff; }
.dl-actions-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 18px 60px rgba(11,18,32,.12);
  padding: 8px;
  display:none;
  z-index: 10;
}
.dl-actions-menu button{
  width: 100%;
  text-align:left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(11,18,32,.84);
  cursor:pointer;
}
.dl-actions-menu button:hover{ background: rgba(48,77,161,.08); }
.dl-actions-menu .danger{ color: rgba(255,77,77,.95); }
.dl-msg-actions.is-open .dl-actions-menu{ display:block; }

/* typing indicator */
.dl-typing{
  display:flex;
  gap: 10px;
  align-items:flex-end;
  margin: 10px 0 0;
}
.dl-typing .av{
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.70);
}
.dl-typing .dots{
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  padding: 10px 12px;
  display:flex;
  gap: 6px;
  align-items:center;
}
.dl-typing .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.55);
  animation: dlTyping 1.05s infinite ease-in-out;
  opacity: .65;
}
.dl-typing .dot:nth-child(2){ animation-delay: .12s; }
.dl-typing .dot:nth-child(3){ animation-delay: .24s; }
@keyframes dlTyping{
  0%,100%{ transform: translateY(0); opacity:.55; }
  50%{ transform: translateY(-4px); opacity: 1; }
}

/* =========================================================
   Composer
   ========================================================= */
.dl-thread-foot{
  border-top: 1px solid var(--border);
  background: var(--dl-chat-head);
  padding: 16px 20px;
  flex: 0 0 auto;
}

.dl-replybar{
  display:none;
  margin-bottom: 10px;
  border-radius: 16px;
  border: 1px solid rgba(48,77,161,.22);
  background: rgba(48,77,161,.06);
  padding: 10px 12px;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-replybar .l{
  min-width:0;
}
.dl-replybar .t{
  margin: 0;
  font-weight: 950;
}
.dl-replybar .q{
  margin: 4px 0 0;
  color: var(--muted2);
  font-weight: 900;
  font-size: .86rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dl-replybar .x{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 950;
  cursor:pointer;
}

.dl-composer{
  display:flex;
  gap: 10px;
  align-items:flex-end;
}
.dl-composer .left{
  flex: 1 1 auto;
  display:flex;
  gap: 10px;
  align-items:flex-end;
}
.dl-composer textarea{
  resize: none;
  min-height: 44px;
  max-height: 140px;
  padding-top: 10px;
}
.dl-composer .actions{
  display:flex;
  gap: 8px;
  flex: 0 0 auto;
}

/* quick replies */
.dl-quick{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.dl-quick .q{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 950;
  cursor:pointer;
  color: rgba(11,18,32,.82);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.dl-quick .q:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--border2);
}

/* dropzone */
.dl-drop{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
  background: rgba(48,77,161,.05);
  padding: 12px;
  display:none;
  font-weight: 950;
  color: rgba(11,18,32,.78);
}
.dl-drop.is-on{ display:block; }

/* empty + loading */
.dl-empty{
  padding: 18px;
  border-radius: var(--r2);
  border: 1px dashed var(--border);
  background: rgba(255,255,255,.82);
  color: rgba(11,18,32,.78);
}
.dl-skel{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  padding: 12px;
}
.dl-skel .bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.08);
  margin: 8px 0;
}
.dl-skel .bar.w1{ width: 70%; }
.dl-skel .bar.w2{ width: 44%; }
.dl-skel .bar.w3{ width: 82%; }

/* =========================================================
   Chat component bubbles (Components\Chat\Chat -> .dl-msg)
   Losse berichten-stream zonder de volledige chatkit-shell.
   Spiegelt de .dl-group/.dl-bubble look, met .dl-msg* markup.
   ========================================================= */
.dl-msg{
  display: flex;
  gap: 10px;
  margin: 12px 0;
  align-items: flex-end;
}
.dl-msg-me{ justify-content: flex-end; }

.dl-msg-avatar{
  flex: 0 0 auto;
  align-self: flex-end;
}

.dl-msg-bubble{
  max-width: min(80%, 620px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  padding: 9px 13px;
  box-shadow: 0 10px 28px rgba(11,18,32,.05);
  min-width: 0;
}
.dl-msg-them .dl-msg-bubble{ border-top-left-radius: 6px; }
.dl-msg-me .dl-msg-bubble{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.22);
  border-top-right-radius: 6px;
}

.dl-msg-author{
  font-weight: 900;
  font-size: .84rem;
  color: var(--accent, #304DA1);
  margin-bottom: 3px;
}
.dl-msg-text{
  color: rgba(11,18,32,.82);
  line-height: 1.5;
  font-size: .92rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.dl-msg-meta{
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
  margin-top: 5px;
  color: var(--muted2);
  font-size: .74rem;
  font-weight: 700;
}
.dl-msg-me .dl-msg-meta{ color: rgba(48,77,161,.72); }
.dl-msg-time{ white-space: nowrap; }

/* System note (gecentreerd, subtiel) */
.dl-msg-system{ justify-content: center; }
.dl-msg-system .dl-msg-bubble{
  max-width: 80%;
  background: rgba(11,18,32,.04);
  border-style: dashed;
  box-shadow: none;
  text-align: center;
}
.dl-msg-system .dl-msg-text{ font-size: .84rem; color: var(--muted2); }

/* Composer input (Chat::composer) */
.dl-composer-input{
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 14px;
  background: rgba(255,255,255,.96);
  font: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dl-composer-input:focus{
  border-color: rgba(48,77,161,.45);
  box-shadow: 0 0 0 3px rgba(48,77,161,.12);
}
.dl-composer-input::placeholder{ color: var(--muted2); }


/* ---- /assets/css/form.css ---- */
/* =========================================================
   form.css - DutchLine UI (Forms)
   - Premium / calm
   - Future-proof QOL patterns
   - Includes:
     - Inputs / textarea / native select polish
     - DLSelect (custom dropdown, fully styleable)
     - Input with icon + clear button
     - Validation (soft)
     - Choice chips
     - File input panel
     - Inline settings rows
   ========================================================= */

:root{
  --dl-success: #20c997;
  --dl-warning: #ffc107;
  --dl-danger:  #ff4d4d;
  --dl-info:    #0d6efd;

  --dl-success-soft: rgba(32,201,151,.10);
  --dl-warning-soft: rgba(255,193,7,.12);
  --dl-danger-soft:  rgba(255,77,77,.10);
  --dl-info-soft:    rgba(13,110,253,.10);

  --dl-success-border: rgba(32,201,151,.22);
  --dl-warning-border: rgba(255,193,7,.22);
  --dl-danger-border:  rgba(255,77,77,.22);
  --dl-info-border:    rgba(13,110,253,.22);
}

/* =========================================================
   Base controls
   ========================================================= */

.form-label{
  font-weight: 900;
  letter-spacing: -.01em;
}

.form-control,
.form-select,
.form-check-input{
  border-radius: 10px !important;
  border-color: var(--border);
}

.form-control,
.form-select{
  min-height: 46px;
  padding: 16px 16px !important;
  background: rgba(255,255,255,.92);
}

textarea.form-control{
  min-height: unset;
  padding-top: 12px;
  padding-bottom: 12px;
}

.form-control::placeholder{
  color: rgba(11,18,32,.45);
}

.form-control:focus,
.form-select:focus{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 6px var(--focus);
}

/* iOS Safari zoomt automatisch in wanneer een veld met font-size < 16px focus
   krijgt. Forceer 16px op mobiel zodat het typen niet schokkerig inzoomt. */
@media (max-width: 576px){
  .form-control,
  .form-select,
  textarea.form-control,
  .dl-input .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"]{
    font-size: 16px;
  }
}

.form-control:disabled,
.form-select:disabled{
  opacity: .78;
  background: rgba(11,18,32,.03);
}

/* Native select (closed state only, OS dropdown is not styleable) */
.form-select{
  border-color: var(--border);
}

/* =========================================================
   Help + hint
   ========================================================= */

.dl-help{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
  margin-top: 6px;
}

.dl-hint{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 850;
  color: rgba(11,18,32,.82);
}

/* =========================================================
   Field wrapper + soft validation
   ========================================================= */

.dl-field{ position: relative; }

.dl-field.is-valid .form-control,
.dl-field.is-valid .form-select{
  border-color: rgba(32,201,151,.35);
  box-shadow: none;
}

.dl-field.is-invalid .form-control,
.dl-field.is-invalid .form-select{
  border-color: rgba(255,77,77,.35);
  box-shadow: none;
}

.dl-field.is-valid .dl-help{ color: rgba(32,201,151,.92); }
.dl-field.is-invalid .dl-help{ color: rgba(255,77,77,.92); }

/* Optional badge inside input */
.dl-field-badge{
  position:absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 950;
  font-size: .78rem;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  color: rgba(11,18,32,.78);
  pointer-events:none;
}

.dl-field.is-valid .dl-field-badge{
  border-color: var(--dl-success-border);
  background: var(--dl-success-soft);
  color: rgba(11,18,32,.92);
}
.dl-field.is-invalid .dl-field-badge{
  border-color: var(--dl-danger-border);
  background: var(--dl-danger-soft);
  color: rgba(11,18,32,.92);
}

/* =========================================================
   Input with icon + clear button
   ========================================================= */
/* Form spacing: net iets ruimer op desktop */
#categorieFiltersForm{
  --dl-input-h: 44px;
}

/* Input wrapper */
.dl-input{
  position: relative;
  display: flex;
  align-items: center;
}

/* Left icon variant */
.dl-input--with-icon .dl-input-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
  pointer-events: none;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

/* Input field */
.dl-input .form-control{
  position: relative;
  z-index: 1;
  min-height: var(--dl-input-h);
  padding-right: 46px !important;      /* ruimte voor clear */
}

/* Als er icon links is: extra padding */
.dl-input--with-icon .form-control{
  padding-left: 42px !important;
}

/* Clear button: <a> als button */
.dl-clear{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 10px;

  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  color: inherit;

  z-index: 4;
  display: none;            /* alleen tonen bij has-value */
  align-items: center;
  justify-content: center;

  text-decoration: none;
  line-height: 1;
  opacity: .92;

  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease, transform .18s ease;
}

.dl-input.has-value .dl-clear{ display: inline-flex; }

.dl-clear:hover{
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
  opacity: 1;
  /* GEEN translateY(-1px) -> voorkomt “swipe down” */
  transform: translateY(-50%) scale(1.02);
}

.dl-clear:active{
  transform: translateY(-50%) scale(.98);
  box-shadow: 0 6px 14px rgba(11,18,32,.12);
}

.dl-clear:focus-visible{
  outline: none;
  border-color: var(--border2);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25), 0 10px 22px rgba(11,18,32,.10);
}

/* Labels iets consistenter */
#categorieFiltersForm .form-label{
  margin-bottom: .35rem;
}

/* Optioneel: op mobiel knop helemaal full-width (staat al door col-12 + d-grid) */
@media (max-width: 991.98px){
  #categorieFiltersForm .dl-btn{
    min-height: 44px;
  }
}


/* =========================================================
   Check / radio / switch (soft)
   ========================================================= */

.form-check-input{
  width: 18px;
  height: 18px;
  border-color: var(--border2);
  box-shadow: none !important;
}

.form-check-input:checked{
  background-color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}

.form-check-input:focus{
  box-shadow: 0 0 0 6px var(--focus) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.form-switch .form-check-input{
  width: 44px;
  height: 22px;
  border-radius: 999px;
}

/* =========================================================
   Form panel + settings rows
   ========================================================= */

.dl-form-panel{
  border-radius: calc(var(--r2) + 4px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 18px;
}

.dl-form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.dl-form-row:first-child{
  border-top: 0;
  padding-top: 0;
}

.dl-form-row .meta{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* =========================================================
   Choice chips
   ========================================================= */

.dl-choice-group{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.dl-choice{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 850;
  color: rgba(11,18,32,.84);
  cursor: pointer;
  user-select:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dl-choice:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
}

.dl-choice[aria-pressed="true"]{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

/* =========================================================
   DLSelect - Custom dropdown (fully styleable)
   Wrap:
   <div class="dl-select" data-dl-select ...>
     <select>...</select>
   </div>
   ========================================================= */

.dl-select{ position: relative; width: 100%; min-width: 0; }

/* Keep select for form submit, but hide visually */
.dl-select > select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Trigger */
.dl-select-trigger {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.dl-select-trigger:hover{
  border-color: var(--border2);
  background: #fff;
}

.dl-select.open .dl-select-trigger{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 6px var(--focus);
}

.dl-select-trigger .value{
  font-weight: 850;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
}

.dl-select-trigger.is-placeholder .value{
  font-weight: 800;
  color: rgba(11,18,32,.52);
}

/* Chevron button */
.dl-select-trigger .chev{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

.dl-select.open .dl-select-trigger .chev{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

/* Dropdown panel */
.dl-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100%);
    z-index: 1200;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: none;
}

.dl-select.open .dl-select-menu{ display:block; }

/* .dl-card heeft isolation:isolate, dat creeert een stacking context per kaart.
   Daardoor blijft .dl-select-menu opgesloten in zijn eigen kaart en valt het achter
   volgende kaarten. Til de wrapper-elementen op zodra een select open staat zodat
   de kaart met de open dropdown bovenop komt. */
.dl-select.open{
  position: relative;
  z-index: 1300;
}
.dl-field:has(.dl-select.open),
.dl-card:has(.dl-select.open){
  z-index: 1050;
  position: relative;
}

/* .dl-admin-card heeft 'overflow:hidden' voor de afgeronde hoeken; dat klipt
   de open dropdown weg (search-input nog half zichtbaar, items eronder
   onzichtbaar). Bij een open select tijdelijk overflow visible toestaan. */
.dl-admin-card:has(.dl-select.open){
  overflow: visible;
  z-index: 1050;
  position: relative;
}

/* Search bar (optional) */
.dl-select-search{
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

.dl-select-search input{
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  outline: none;
  background: rgba(255,255,255,.92);
}

.dl-select-search input:focus{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 0 0 6px var(--focus);
}

/* List */
.dl-select-list{
  max-height: 280px;
  overflow:auto;
}

.dl-select-list::-webkit-scrollbar{ width: 10px; }
.dl-select-list::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
}

.dl-select-item{
  padding: 11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  cursor:pointer;
  
  color: rgba(11,18,32,.90);
  border-top: 1px solid rgba(11,18,32,.06);
  background: transparent;
  transition: background .15s ease;
}

.dl-select-item:first-child{ border-top: 0; }
.dl-select-item:hover{ background: rgba(48,77,161,.08); }
.dl-select-item.is-selected{ background: rgba(48,77,161,.10); }

.dl-select-item.is-disabled{
  opacity: .55;
  cursor:not-allowed;
}

.dl-select-item .meta{
  font-weight: 900;
  color: rgba(11,18,32,.55);
  font-size: .92rem;
}

.dl-select-empty{
  padding: 14px 12px;
  color: rgba(11,18,32,.60);
  font-weight: 800;
}

/* =========================================================
   File input (nice container)
   ========================================================= */

.dl-file{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(180deg, rgba(48,77,161,.06), rgba(255,255,255,.86));
  padding: 14px;
}

.dl-file .top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.dl-file .name{
  font-weight: 950;
  letter-spacing: -.01em;
}

.dl-file .sub{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.dl-file .actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
/* =========================================================
   Invalid state (Bootstrap-style .is-invalid)
   - Works with your current markup + JS that adds .is-invalid on inputs
   ========================================================= */

.form-control.is-invalid,
.form-select.is-invalid{
  border-color: var(--dl-danger-border) !important;
  box-shadow: 0 0 0 6px var(--dl-danger-soft) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus{
  border-color: var(--dl-danger) !important;
  box-shadow: 0 0 0 6px var(--dl-danger-soft) !important;
}

/* Checkbox/radio */
.form-check-input.is-invalid{
  border-color: var(--dl-danger-border) !important;
  box-shadow: 0 0 0 6px var(--dl-danger-soft) !important;
}

/* Show feedback when invalid */
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-feedback{
  display: block;
}
/* =========================================================
   Bootstrap input-group polish (icon + input)
   Fix: hoogte/padding/align + 1 nette focus-ring
   ========================================================= */

.input-group{
  --dl-ig-h: 46px;
  --dl-ig-r: 10px;
  position: relative;
  align-items: stretch; /* zorgt dat children dezelfde hoogte pakken */
}

/* Linker "icon" blok */
.input-group > .input-group-text{
  min-height: var(--dl-ig-h);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-right: 0; /* voorkomt dubbele border in het midden */
  border-radius: var(--dl-ig-r) 0 0 var(--dl-ig-r);
  background: rgba(255,255,255,.92);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.input-group > .input-group-text i{
  opacity: .70;
  line-height: 1;
  font-size: .98rem;
}

/* Het input veld naast de icon */
.input-group > .form-control,
.input-group > .form-select{
  min-height: var(--dl-ig-h);
  border-left: 0; /* voorkomt dubbele border in het midden */
  border-radius: 0 var(--dl-ig-r) var(--dl-ig-r) 0 !important;
}

/* Focus-ring netjes om de hele group (niet 2x shadow) */
.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select{
  box-shadow: none; /* jouw base .form-control:focus shadow uitzetten binnen group */
}

.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.input-group:focus-within{
  border-radius: var(--dl-ig-r);
  box-shadow: 0 0 0 6px var(--focus);
}

/* Disabled consistent */
.input-group > .form-control:disabled,
.input-group > .form-select:disabled{
  background: rgba(11,18,32,.03);
}
.input-group > .form-control:disabled ~ .input-group-text,
.input-group > .form-select:disabled ~ .input-group-text{
  opacity: .78;
}

/* =========================================================
   Input-group with DL button (prefix + input + dl-btn)
   ========================================================= */

/* Rechter button: DL variant */
.input-group > .dl-btn{
  min-height: var(--dl-ig-h);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-left: 0;                 /* geen dubbele border tussen input en knop */
  border-radius: 0 var(--dl-ig-r) var(--dl-ig-r) 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

/* Als er rechts een (dl-)button is: input krijgt geen rechter radius */
.input-group:has(> .dl-btn) > .form-control,
.input-group:has(> .dl-btn) > .form-select{
  border-radius: 0 !important;
}

/* Als er links input-group-text is én rechts dl-btn:
   - input blijft vlak
   - links/rechts krijgen de juiste hoeken */
.input-group:has(> .input-group-text):has(> .dl-btn) > .input-group-text{
  border-radius: var(--dl-ig-r) 0 0 var(--dl-ig-r);
}
.input-group:has(> .input-group-text):has(> .dl-btn) > .dl-btn{
  border-radius: 0 var(--dl-ig-r) var(--dl-ig-r) 0;
}

/* Hover/active zonder “jump” - geen background override, laat button's eigen hover stijl */
.input-group > .dl-btn:hover{
  border-color: var(--border2);
}
.input-group > .dl-btn:active{
  transform: none;
}

/* Focus: ring om hele group, dl-btn geen eigen shadow */
.input-group:focus-within > .dl-btn{
  box-shadow: none !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}


/* ---- /assets/css/header.css ---- */
/* =========================================================
   header.css - DutchLine Header v4 (B2B)
   Works with your HTML exactly as posted.
   Notes:
   - Uses existing theme vars if present: --border, --border2, --panel, --text, --muted, --accent, --focus, --shadow, --shadow2, --r, --r2
   - Adds fallbacks so it still looks good if some vars don't exist
   - Mega menu opens via: .dl-mega.is-open .dl-mega-menu
   ========================================================= */

/* ---------- Fallback vars (safe) ---------- */
.dl-header-v4{
  --dl-ink: var(--text, rgba(11,18,32,.92));
  --dl-muted: var(--muted, rgba(11,18,32,.68));
  --dl-border: var(--border, rgba(11,18,32,.12));
  --dl-border2: var(--border2, rgba(11,18,32,.18));
  --dl-panel: var(--panel, #ffffff);
  --dl-surface: var(--surface, #ffffff);
  --dl-accent: var(--accent, #131F3F);
  --dl-focus: var(--focus, rgba(48,77,161,.18));
  --dl-shadow: var(--shadow, 0 16px 40px rgba(11,18,32,.12));
  --dl-shadow2: var(--shadow2, 0 10px 26px rgba(11,18,32,.08));
  --dl-r: var(--r, 12px);
  --dl-r2: var(--r2, 14px);
  position: sticky;
  top: 0;
  z-index: 1035;
}

/* subtle shadow when scrolling (toggled by JS: .is-shadow) */
.dl-header-v4.is-shadow .dl-nav-v4{
  box-shadow: 0 10px 26px rgba(11,18,32,.10);
  border-color: color-mix(in srgb, var(--dl-border2) 70%, transparent);
}

/* ---------- TOPBAR ---------- */
.dl-topbar-v4{
  background: linear-gradient(180deg, #131F3F, #131F3F);
  color: rgba(226,232,240,.92);
  font-size: 13px;
}
.dl-topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 9px 0;
}
.dl-topbar-left, .dl-topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.dl-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
  display:inline-block;
  transform: translateY(-1px);
}
.dl-toplink{
  color: rgba(226,232,240,.90);
  text-decoration:none;
  font-weight: 650;
}
.dl-toplink:hover{ color:#fff; }
.dl-sep{ opacity:.55; }
/* chat.css definieert ook .dl-sep met margin:20px 0 - die marge maakt de topbar
   te hoog zodra er separators verschijnen (ingelogd). Topbar-scoped resetten. */
.dl-topbar-v4 .dl-sep{ display:inline-flex; margin:0; }

/* ---------- BRANDBAR ---------- */
.dl-brandbar-v4{
  background: rgba(255,255,255);
  border-bottom: 1px solid var(--dl-border);
}
.dl-brandbar-row{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 12px 0;
}
.dl-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--dl-ink);
  flex: 0 0 auto;
}
.dl-brand img{
  height: 70px;
  width: auto;
  display:block;
}

/* Search pill */
.dl-search-pill{
  flex: 1 1 auto;
  /* Vanaf 992px schakelt de header naar de desktopvariant, maar logo (266px)
     + zoekbalk (320px) + knoppen (385px) passen daar nog niet in. De zoekbalk
     kon door deze min-width niet meegeven, dus werd "Inloggen" 19px buiten het
     scherm geduwd en kreeg de pagina horizontale scroll. Onder 1200px mag hij
     krimpen; daarboven is er ruimte genoeg. */
  min-width: 200px;
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--dl-border);
  border-radius: 20px;
  padding: 8px 8px 8px 12px;
  background: linear-gradient(180deg,#fff,#f7f9ff);
  box-shadow: 0 10px 26px rgba(11,18,32,.06);
}
.dl-search-ico{
  display:inline-flex;
  color: rgba(11,18,32,.55);
}
.dl-search-input{
  border: 0;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 15px;
  color: rgba(11,18,32,.86);
}
.dl-search-input::placeholder{ color: rgba(11,18,32,.48); }

.dl-search-btn{
  border: 1px solid var(--dl-border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 850;
  color: rgba(11,18,32,.80);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.dl-search-btn:hover{
  border-color: var(--dl-border2);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
  background:#131F3F;
  color:#fff;
}
.dl-search-pill:focus-within{
  border-color: color-mix(in srgb, var(--dl-accent) 45%, var(--dl-border));
  box-shadow: 0 0 0 6px var(--dl-focus);
}
@media (min-width: 1200px){
  .dl-search-pill{ min-width: 320px; }
}

/* actions */
.dl-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Burger */
.dl-burger{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--dl-border);
  background: #fff;
  display:none;
  /* Zonder column stonden de drie balkjes naast elkaar. Ze passen dan met
     3x18px + gap niet in een knop van 44px, dus flexbox kneep ze tot streepjes
     van 7px: het icoon oogde kapot in plaats van als hamburger. */
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.dl-burger span{
  display:block;
  width: 18px;
  height: 2px;
  flex: 0 0 2px;
  border-radius: 999px;
  background: rgba(11,18,32,.65);
}

/* ---------- NAVBAR BOTTOM ---------- */
.dl-nav-v4{
  background: linear-gradient(180deg,#ffffff,#fbfcff);
  border-bottom: 1px solid var(--dl-border);
}
.dl-nav-row{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 8px 0;
  position: relative;
}

.dl-navlink{
  appearance:none;
  border: 0;
  background: transparent;
  text-decoration:none;
  color: rgba(18,27,43,.92);
  font-weight: 850;
  padding: 10px 12px;
  border-radius: 5px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: background .14s ease, color .14s ease, transform .14s ease;
  cursor: pointer;
}
.dl-navlink:hover{
  background: #131F3F;
  color: #fff;
}
.dl-navlink.is-active{
	background: #233A77;
	color:#fff;
}

.dl-caret{
  width: 10px;
  height: 10px;
  display:inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .72;
  margin-left: 2px;
}

/* ---------- MEGA MENU ---------- */
.dl-mega{
  position: static;
  display: inline-flex;
  align-items: stretch;
}
.dl-mega-toggle{ user-select:none; }

/* Dropdown wrapper - zelfde display als losse navlinks zodat spacing
   in .dl-nav-row visueel identiek is. Zonder dit gedraagt .dl-dd zich als
   block-element en lijkt het extra ruimte rond de admin-toggles te
   pakken vergeleken met directe <a class="dl-navlink"> items. */
.dl-dd{
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.dl-mega-menu {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--dl-border);
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 28px 80px rgba(15, 23, 42, .16);
    padding: 18px 0 16px;
    overflow: hidden;
    backdrop-filter: blur(12px) saturate(140%);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    position: fixed;
    left: 0;
    right: 0;
    /* width: 100vw; */
    /* max-width: 100vw; */
    top: var(--dl-mega-top, 120px);
}
.dl-mega-menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 320px at 10% 0%, rgba(48,77,161,.10), transparent 60%),
    radial-gradient(980px 320px at 90% 0%, rgba(6,182,212,.08), transparent 60%);
  opacity: .70;
}
.dl-mega-inner{
  position: relative;
  z-index: 2;
  /* Volgt --container-max (1440px) zodat de mega menu exact aligneert
     met de top-nav container hierboven. Geen overrides. */
}

.dl-mega.is-open > .dl-mega-toggle{
  background: linear-gradient(90deg, color-mix(in srgb, var(--dl-accent) 14%, transparent), color-mix(in srgb, #06b6d4 8%, transparent));
  color: var(--dl-accent);
}
.dl-mega.is-open > .dl-mega-toggle .dl-caret{
  transform: rotate(-135deg);
}

.dl-mega.is-open > .dl-mega-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* mega layout */
.dl-mega-grid{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap: 16px;
  align-items: start;
}

/* left side */
.dl-mega-side{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--dl-shadow2);
  backdrop-filter: blur(8px) saturate(120%);
}
.dl-mega-side a{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(18,27,43,.92);
  font-weight: 950;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .12s ease;
}
.dl-mega-side a .icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, rgba(48,77,161,.10), rgba(6,182,212,.06));
  border: 1px solid rgba(48,77,161,.18);
  color: var(--dl-accent);
  flex: 0 0 auto;
  margin-top: 1px;
}
.dl-mega-side a small{
  display:block;
  font-weight: 700;
  color: rgba(11,18,32,.62);
  margin-top: 3px;
  line-height: 1.2;
}
.dl-mega-side a:hover{
  background: linear-gradient(90deg, rgba(48,77,161,.08), transparent);
  color: var(--dl-accent);
  transform: translateX(1px);
}
.dl-mega-side a.is-active{
  background: linear-gradient(90deg, rgba(48,77,161,.12), rgba(6,182,212,.06));
  border-color: rgba(48,77,161,.18);
  color: var(--dl-accent);
}

/* right panels */
.dl-mega-panels{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--dl-shadow2);
  backdrop-filter: blur(10px) saturate(130%);
}
.dl-mega-panel{ display:none; }
.dl-mega-panel.is-active{ display:block; }

/* CSS Grid met flexibele kolombreedte. auto-fill houdt links-naar-rechts
   leesvolgorde en zorgt dat blokken naast elkaar staan. align-items: start
   voorkomt rare strekkingen bij ongelijke blok-hoogtes. */
.dl-mega-cols{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 24px;
  align-items: start;
}
@media (max-width: 599.98px){ .dl-mega-cols{ grid-template-columns: 1fr; } }
.dl-mega-col{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}
/* Leaf-only bundel-blok: iets compacter ogen */
.dl-mega-col-leaf .dl-mega-title{ color: rgba(7,13,24,.70); }

/* Sneak preview grid voor categorieen zonder subcategorieen */
.dl-mega-preview{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.dl-mega-preview-head{
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(7,13,24,.62);
  margin-bottom: 12px;
}
.dl-mega-preview-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1199.98px){ .dl-mega-preview-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  767.98px){ .dl-mega-preview-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  479.98px){ .dl-mega-preview-grid{ grid-template-columns: repeat(2, 1fr); } }
.dl-mega-preview-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--dl-border, rgba(15,23,42,.08));
  border-radius: 12px;
  padding: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dl-mega-preview-card:hover{
  border-color: var(--dl-accent, #304DA1);
  box-shadow: 0 6px 18px rgba(48,77,161,.10);
  transform: translateY(-2px);
}
.dl-mega-preview-img{
  aspect-ratio: 1 / 1;
  background: #f7f8fb;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.dl-mega-preview-img img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.dl-mega-preview-name{
  font-size: .78rem;
  font-weight: 700;
  color: var(--dl-ink, #0b1220);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.dl-mega-preview-price{
  font-size: .82rem;
  font-weight: 800;
  color: var(--dl-accent, #304DA1);
  margin-top: auto;
}

/* Enka brand overrides voor preview */
body.is-enka .dl-mega-preview-head{
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .08em;
}
body.is-enka .dl-mega-preview-card{
  border-radius: 4px;
  border-color: rgba(10,10,10,.10);
}
body.is-enka .dl-mega-preview-card:hover{
  border-color: #0a0a0a;
  box-shadow: 0 4px 12px rgba(10,10,10,.10);
}
body.is-enka .dl-mega-preview-img{ border-radius: 2px; background: #f6f6f6; }
body.is-enka .dl-mega-preview-price{ color: #0a0a0a; }
.dl-mega-title{
  font-weight: 950;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  color: rgba(7,13,24,.95);
  letter-spacing: -.01em;
  font-size: .95rem;
}
.dl-mega-titlelink{
  color: inherit;
  text-decoration: none;
}
.dl-mega-titlelink:hover{ color: var(--dl-accent, #304DA1); }
.dl-mega-list{
  list-style:none;
  padding:0;
  margin:0;
}
.dl-mega-list li{ margin: 0; }
.dl-mega-list a{
  display:block;
  padding: 5px 0;
  text-decoration:none;
  color: rgba(18,27,43,.78);
  font-weight: 600;
  font-size: .9rem;
  border-radius: 4px;
  transition: color .12s ease, padding-left .12s ease;
}
.dl-mega-list a:hover{
  color: var(--dl-accent, #304DA1);
  padding-left: 4px;
}
.dl-mega-more{
  margin-top: 8px;
  font-size: .82rem;
}
.dl-mega-more a{
  font-weight: 800;
  text-decoration: none;
  color: var(--dl-accent, #304DA1);
}
.dl-mega-more a:hover{ text-decoration: underline; }

/* Enka brand-override: scherpere hoeken, Barlow Condensed op titels */
body.is-enka .dl-mega-title{
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom-color: rgba(10,10,10,.10);
}
body.is-enka .dl-mega-list a:hover,
body.is-enka .dl-mega-titlelink:hover,
body.is-enka .dl-mega-more a{ color: #0a0a0a; }

/* bottom CTA row */
.dl-mega-bottom{
  margin-top: 12px;
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(48,77,161,.18);
  background: linear-gradient(180deg, rgba(48,77,161,.10), rgba(6,182,212,.06));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dl-mega-bottom .label{
  font-weight: 950;
  color: rgba(7,13,24,.92);
}
.dl-mega-cta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- MOBILE DRAWER ---------- */
.dl-mnav{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(11,18,32,.40);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.dl-mnav.is-open{
  display:block;
  opacity: 1;
  pointer-events: auto;
}
.dl-mnav-card{
  margin: 14px auto;
  background: #fff;
  border: 1px solid var(--dl-border);
  border-radius: 18px;
  box-shadow: 0 26px 80px rgba(11,18,32,.18);
  padding: 14px;
  max-width: 680px;
}
.dl-mnav-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dl-mnav-search{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.dl-mnav-input{
  flex: 1 1 auto;
  border: 1px solid var(--dl-border);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}
.dl-mnav-input:focus{
  border-color: color-mix(in srgb, var(--dl-accent) 45%, var(--dl-border));
  box-shadow: 0 0 0 6px var(--dl-focus);
}
.dl-mnav-links{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px){
  .dl-topbar-right{ display:none; }   /* clean mobile */
  /* zoekbalk blijft zichtbaar op mobiel/tablet - layout staat in header-mobile.css */
  .dl-burger{ display:inline-flex; }
  .dl-nav-v4{ display:none; }         /* nav inside drawer for mobile */

  /* Mega menu must be closed on mobile since nav hidden */
  .dl-mega-menu{ display:none !important; }
}

@media (max-width: 575.98px){
  .dl-brand img{ height: 34px; }
  .dl-mnav-card{ margin: 10px; }
  .dl-mnav-search{ flex-direction: column; }
}

/* ---------- Accessibility / motion ---------- */
.dl-header-v4 :where(a,button,input):focus-visible{
  outline: none;
  box-shadow: 0 0 0 6px var(--dl-focus);
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce){
  .dl-mega-menu, .dl-navlink, .dl-search-btn, .dl-mnav{ transition:none !important; }
}


/* ---- /assets/css/main.css ---- */
/* =========================================================
   main.css - DutchLine (site layer)
   Purpose:
   - Page-level polish moved out of inline <style>
   - Small global UX (scroll-to-top button)
   - Keep theme-core.css as foundation; main.css extends it
   ========================================================= */

/* =========================================================
   Home-only components (moved from index.php inline style)
   ========================================================= */
.dl-kicker{
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.78rem;
  color: color-mix(in srgb, var(--accent) 65%, var(--text));
}
.dl-section-title{ font-weight: 900; letter-spacing: -.02em; margin: 0; }
.dl-section-sub{ color: var(--muted); margin: 10px 0 0; line-height: 1.7; }
.dl-divider{ border-top: 1px solid var(--border); }

/* Hero showcase mosaic */
.dl-mosaic{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dl-mosaic .m1{ grid-column: 1 / span 2; }

.dl-mosaic-card{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-mosaic-card:hover{
  transform: translateY(-2px);
  border-color: var(--border2);
  box-shadow: var(--shadow);
}
.dl-mosaic-media{
   
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.dl-mosaic-media img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  
}
.dl-mosaic-body{ padding: 14px 16px; }
.dl-mini-title{ font-weight: 900; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
.dl-mini-meta{ margin: 6px 0 0; color: var(--muted); line-height: 1.55; font-size: .95rem; }
.dl-mini-tag{
  position:absolute; top: 12px; left: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Showcase grid */
.dl-show-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.dl-show-grid .a{ grid-column: span 4; }
.dl-show-grid .b{ grid-column: span 4; }
.dl-show-grid .c{ grid-column: span 4; }
@media (max-width: 991px){
  .dl-show-grid .a, .dl-show-grid .b, .dl-show-grid .c{ grid-column: span 12; }
}

/* Horizontal bestsellers strip */
.dl-strip{
  display:flex;
  gap: 14px;
  overflow:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.dl-strip::-webkit-scrollbar{ height: 10px; }
.dl-strip::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--text) 10%, transparent); border-radius: 999px; }
.dl-strip-item{
  flex: 0 0 auto;
  width: 320px;
  scroll-snap-align: start;
}
@media (max-width: 575px){
  .dl-strip-item{ width: 280px; }
}

/* “How it works” */
.dl-step{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 18px;
  height: 100%;
}
.dl-step-icon{
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--accent-soft);
  display:grid; place-items:center;
  font-weight: 900;
}
.dl-step h3{
  font-weight: 900;
  letter-spacing: -.01em;
  margin: 12px 0 6px;
  font-size: 1.05rem;
}
.dl-step p{ margin: 0; color: var(--muted); line-height: 1.65; }

/* CTA band */
.dl-cta-band{
  border-radius: calc(var(--r2) + 6px);
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 220px at 10% 10%, rgba(48,77,161,.10), transparent 60%),
    radial-gradient(700px 240px at 85% 0%, rgba(128,160,208,.10), transparent 62%),
    color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow2);
  padding: 22px;
  overflow:hidden;
  position: relative;
}
.dl-cta-band::after{
  content:"";
  position:absolute; right:-140px; top:-160px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(48,77,161,.16), transparent 62%);
  pointer-events:none;
  filter: blur(1px);
}

/* =========================================================
   Scroll-to-top button (global)
   ========================================================= */
.dl-topbtn{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 44px rgba(11,18,32,.12);
  display: grid;
  place-items: center;
  color: rgba(11,18,32,.82);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
.dl-topbtn:hover{
  border-color: var(--border2);
  background: #fff;
  transform: translateY(8px);
}
.dl-topbtn.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dl-topbtn:focus{
  outline: none;
  box-shadow: 0 0 0 6px var(--focus), 0 16px 44px rgba(11,18,32,.12);
}
/* De sticky koopbalk op de productpagina ligt op bottom:0 met een lagere
   z-index, dus deze knop dekte precies het rechteruiteinde van "Toevoegen aan
   winkelwagen" af. Zolang die balk in beeld staat, schuift hij erboven. */
body:has(.pdp-sticky-buy.is-visible) .dl-topbtn{
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce){
  .dl-topbtn, .dl-mosaic-card{ transition: none !important; }
}

 /* Hero background image */
 


/* ---- /assets/css/modal.css ---- */
/* =========================================================
   modal.css - DutchLine UI (Modals / Offcanvas overlays)
   - Bootstrap modal/offcanvas enhanced styling
   - Premium, soft, enterprise
   - Variants: neutral/success/danger/warning/info
   ========================================================= */

/* Backdrop: softer + blur */
.modal-backdrop.show{
  opacity: .42;
}
@supports (backdrop-filter: blur(10px)){
  .modal-backdrop.show{
    backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* Dialog entrance animation */
.modal.fade .modal-dialog{
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease, opacity .22s ease;
}
.modal.show .modal-dialog{
  transform: translateY(0) scale(1);
}

/* DutchLine modal shell */
.dl-modal .modal-content{
  border-radius: calc(var(--r2) + 2px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 90px rgba(11,18,32,.18);
  overflow:hidden;
}

/* Top accent line */
.dl-modal .modal-content::before{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.70), rgba(128,160,208,.25), transparent);
  opacity: .9;
}

/* Header / body / footer */
.dl-modal .modal-header{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px 16px;
}
.dl-modal .modal-title{
  font-weight: 950;
  letter-spacing: -.02em;
}
.dl-modal .modal-body{
  padding: 16px;
  color: rgba(11,18,32,.90);
}
.dl-modal .modal-footer{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px 16px;
  gap: 10px;
}

/* Close button toned down */
.dl-modal .btn-close{
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
.dl-modal .btn-close:hover{
  opacity: .85;
  transform: translateY(-1px);
}

/* Optional icon chip inside header/body */
.dl-modal-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  display:grid;
  place-items:center;
  font-weight: 950;
}

/* Variant system (soft only) */
.dl-modal[data-variant="neutral"] .modal-content::before{
  background: linear-gradient(90deg, rgba(11,18,32,.26), rgba(11,18,32,.10), transparent);
}
.dl-modal[data-variant="success"] .modal-content::before{
  background: linear-gradient(90deg, rgba(32,201,151,.75), rgba(32,201,151,.18), transparent);
}
.dl-modal[data-variant="danger"] .modal-content::before{
  background: linear-gradient(90deg, rgba(255,77,77,.75), rgba(255,77,77,.18), transparent);
}
.dl-modal[data-variant="warning"] .modal-content::before{
  background: linear-gradient(90deg, rgba(255,193,7,.80), rgba(255,193,7,.18), transparent);
}
.dl-modal[data-variant="info"] .modal-content::before{
  background: linear-gradient(90deg, rgba(13,110,253,.80), rgba(13,110,253,.18), transparent);
}

/* Variant icon chip backgrounds */
.dl-modal[data-variant="success"] .dl-modal-icon{
  border-color: rgba(32,201,151,.22);
  background: rgba(32,201,151,.10);
}
.dl-modal[data-variant="danger"] .dl-modal-icon{
  border-color: rgba(255,77,77,.22);
  background: rgba(255,77,77,.10);
}
.dl-modal[data-variant="warning"] .dl-modal-icon{
  border-color: rgba(255,193,7,.22);
  background: rgba(255,193,7,.12);
}
.dl-modal[data-variant="info"] .dl-modal-icon{
  border-color: rgba(13,110,253,.22);
  background: rgba(13,110,253,.10);
}

/* Full width modal (within container width) */
.modal-dialog.dl-modal-wide{
  max-width: min(1100px, 92vw);
}

/* “Full width” meaning almost screen-wide */
.modal-dialog.dl-modal-full{
  max-width: min(1320px, 96vw);
}

/* Scrollable modal body polish */
.modal-dialog-scrollable .modal-body{
  scrollbar-gutter: stable;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar{ width: 10px; }
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
}

/* Form layout inside modal */
.dl-modal .dl-form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.dl-modal .dl-col-6{ grid-column: span 6; }
.dl-modal .dl-col-12{ grid-column: span 12; }
@media (max-width: 991px){
  .dl-modal .dl-col-6{ grid-column: span 12; }
}

/* Signature pad */
.dl-signature{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.08), transparent 60%),
    var(--surface);
  overflow:hidden;
}
.dl-signature .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.86);
}
.dl-signature canvas{
  width: 100%;
  height: 180px;
  display:block;
  cursor: crosshair;
}
.dl-signature .hint{
  color: var(--muted);
  font-size: .92rem;
}

/* Offcanvas polish (optional, but nice here) */
.offcanvas{
  border-left: 1px solid var(--border);
  background: rgba(255,255,255,.94);
}
.offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--border);
}
.offcanvas .offcanvas-title{
  font-weight: 950;
  letter-spacing: -.02em;
}


/* ---- /assets/css/pagination.css ---- */
/* =========================================================
   pagination.css - DutchLine UI (Pagination)
   - Styles Bootstrap pagination
   - Premium, soft, enterprise
   - Sizes, compact, input-jump, per-page, meta bar
   ========================================================= */

.dl-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* meta links, controls rechts */
.dl-pager-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin-left:auto; /* = ms-auto effect */
}

.dl-pager-meta{
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: .95rem;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

.dl-pager .pagination{
  margin: 0;
  gap: 8px;
}

/* Base link */
.dl-pager .page-link{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: rgba(11,18,32,.86);
  font-weight: 900;
  letter-spacing: .01em;
  padding: 10px 12px;
  min-width: 42px;
  text-align:center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
  cursor: pointer;
}

.dl-pager .page-link:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--border2);
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

.dl-pager .page-link:focus{ outline:none; }
.dl-pager .page-link:focus-visible{
  box-shadow: 0 0 0 6px var(--focus), 0 12px 26px rgba(11,18,32,.08);
}

/* Active */
.dl-pager .page-item.active .page-link{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.10);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(48,77,161,.12);
}

/* Disabled */
.dl-pager .page-item.disabled .page-link,
.dl-pager .page-link[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  cursor: default;
  transform:none;
  box-shadow:none;
}

/* Ellipsis */
.dl-pager .page-item .page-link.dl-ellipsis{
  background: rgba(11,18,32,.05);
  border-color: rgba(11,18,32,.08);
  min-width: 46px;
}

/* Compact variant */
.dl-pager.dl-pager-compact .page-link{
  padding: 8px 10px;
  min-width: 38px;
  border-radius: 12px;
  font-size: .92rem;
}

/* Size variants */
.dl-pager.dl-pager-sm .page-link{
  padding: 8px 10px;
  min-width: 38px;
  border-radius: 12px;
  font-size: .92rem;
}
.dl-pager.dl-pager-lg .page-link{
  padding: 12px 14px;
  min-width: 46px;
  border-radius: 16px;
  font-size: 1.02rem;
}

/* Optional variant */
.dl-pager[data-variant="soft"] .page-item.active .page-link{
  background: rgba(48,77,161,.08);
  border-color: rgba(48,77,161,.18);
  box-shadow: 0 14px 30px rgba(48,77,161,.10);
}

/* Jump / per page controls */
.dl-pager .dl-pager-jump{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dl-pager .dl-pager-jump .form-control{
  width: 92px;
  text-align:center;
}

.dl-pager .dl-pager-perpage{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dl-pager .dl-pager-perpage .form-select{
  width: auto;
  min-width: 120px;
}

/* Little "pill" labels */
.dl-pager .dl-mini{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 8px 10px;
  font-weight: 850;
  color: rgba(11,18,32,.84);
}

/* Loading state (optional, JS toggles) */
.dl-pager.is-loading{
  opacity: .75;
  pointer-events:none;
}
.dl-pager.is-loading .dl-mini::after{
  content:"";
  display:inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 999px;
  border: 2px solid rgba(11,18,32,.35);
  border-right-color: transparent;
  animation: dlPagerSpin .75s linear infinite;
  vertical-align: -2px;
}
@keyframes dlPagerSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.dl-pager{
  width: 100%;
}

.dl-pager-controls{
  margin-left: auto;
  justify-content: flex-end; /* extra duw naar rechts */
}


/* ---- /assets/css/steps.css ---- */
/* =========================================================
   steps.css - DutchLine UI (Steps) v1.0
   Variants:
   - default cards (vertical on mobile)
   - timeline (left border)
   - progress bar (connected)
   - numbered pills (compact)
   - icon steps (circle)
   - status steps (done/active/todo/error)
   - small / dense mode
   ========================================================= */

:root{
  --dl-step-line: rgba(11,18,32,.10);
  --dl-step-soft: rgba(48,77,161,.08);
  --dl-step-soft2: rgba(11,18,32,.04);
}

/* -------------------------
   Layout wrappers
------------------------- */
.dl-steps{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.dl-steps[data-cols="2"] .dl-step-item{ grid-column: span 6; }
.dl-steps[data-cols="3"] .dl-step-item{ grid-column: span 4; }
.dl-steps[data-cols="4"] .dl-step-item{ grid-column: span 3; }

@media (max-width: 991px){
  .dl-steps .dl-step-item{ grid-column: span 12 !important; }
}

/* -------------------------
   Base step card
------------------------- */
.dl-step{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 14px;
  position: relative;
  overflow:hidden;
}

.dl-step:hover{
  border-color: var(--border2);
  box-shadow: var(--shadow);
}

.dl-step-topline{
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(48,77,161,.15));
  opacity: .75;
}

.dl-step-row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.dl-step-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.15;
  font-size: 1.05rem;
}

.dl-step-text{
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.65;
}

/* -------------------------
   Step icon/number
------------------------- */
.dl-step-badge{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.86);
  box-shadow: 0 18px 50px rgba(11,18,32,.08);
}

.dl-step-badge.is-circle{
  border-radius: 999px;
}

.dl-step-badge.is-soft{
  background: var(--dl-step-soft);
  border-color: rgba(48,77,161,.18);
}

.dl-step-badge.is-success{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.22);
}
.dl-step-badge.is-warning{
  background: rgba(255,193,7,.14);
  border-color: rgba(255,193,7,.24);
}
.dl-step-badge.is-danger{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}

/* -------------------------
   Status labels
------------------------- */
.dl-step-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  font-weight: 850;
  color: rgba(11,18,32,.82);
}

.dl-step-status .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.35);
}

.dl-step-status.is-active{
  background: rgba(48,77,161,.08);
  border-color: rgba(48,77,161,.20);
}
.dl-step-status.is-active .dot{ background: rgba(48,77,161,.95); }

.dl-step-status.is-done{
  background: rgba(32,201,151,.10);
  border-color: rgba(32,201,151,.22);
}
.dl-step-status.is-done .dot{ background: rgba(32,201,151,.95); }

.dl-step-status.is-error{
  background: rgba(255,77,77,.10);
  border-color: rgba(255,77,77,.22);
}
.dl-step-status.is-error .dot{ background: rgba(255,77,77,.95); }

/* -------------------------
   Compact "pills" steps
------------------------- */
.dl-steps-pills{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.dl-pillstep{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  font-weight: 900;
  color: rgba(11,18,32,.86);
}

.dl-pillstep .n{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.10);
  font-weight: 950;
}

.dl-pillstep.is-active{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.24);
}
.dl-pillstep.is-done{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.24);
}
.dl-pillstep.is-error{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}

/* -------------------------
   Connected progress steps
------------------------- */
.dl-steps-progress{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.dl-progressbar{
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.08);
}

.dl-progressbar > .fill{
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s ease;
}

.dl-steps-track{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  margin-top: 12px;
}

.dl-track-step{
  flex: 1 1 0;
  text-align:center;
  min-width: 0;
}

.dl-track-step .bubble{
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  font-weight: 950;
}

.dl-track-step .label{
  font-weight: 900;
  color: rgba(11,18,32,.82);
  font-size: .95rem;
}

.dl-track-step .sub{
  color: var(--muted);
  font-size: .86rem;
  margin-top: 3px;
}

.dl-track-step.is-done .bubble{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.24);
}
.dl-track-step.is-active .bubble{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.24);
}
.dl-track-step.is-error .bubble{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}

/* -------------------------
   Timeline steps (vertical)
------------------------- */
.dl-steps-timeline{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-timeline-item{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-top: 1px solid rgba(11,18,32,.06);
}
.dl-timeline-item:first-child{ border-top: 0; }

.dl-timeline-rail{
  position: relative;
  width: 44px;
  flex: 0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.dl-timeline-rail:before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(11,18,32,.10);
}

.dl-timeline-dot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(11,18,32,.18);
  border: 1px solid rgba(11,18,32,.18);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.dl-timeline-item.is-done .dl-timeline-dot{
  background: rgba(32,201,151,.95);
  border-color: rgba(32,201,151,.45);
}
.dl-timeline-item.is-active .dl-timeline-dot{
  background: rgba(48,77,161,.95);
  border-color: rgba(48,77,161,.45);
}
.dl-timeline-item.is-error .dl-timeline-dot{
  background: rgba(255,77,77,.95);
  border-color: rgba(255,77,77,.45);
}

.dl-timeline-title{
  font-weight: 950;
  letter-spacing: -.02em;
}

.dl-timeline-text{
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.65;
}

.dl-timeline-meta{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

/* -------------------------
   Small / dense mode
------------------------- */
.dl-step.is-dense{ padding: 12px; }
.dl-step.is-dense .dl-step-badge{ width: 40px; height: 40px; border-radius: 14px; }
.dl-step.is-dense .dl-step-title{ font-size: 1rem; }

.dl-wizard{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-wizard-head{
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.dl-wizard-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
}

.dl-wizard-sub{
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.6;
  font-size: .95rem;
}

/* Step pills in wizard */
.dl-wizard-steps{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}

.dl-wstep{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  font-weight: 900;
  color: rgba(11,18,32,.86);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  user-select:none;
}

.dl-wstep:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 28px rgba(11,18,32,.08);
}

.dl-wstep[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

.dl-wstep .n{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.10);
  font-weight: 950;
}

.dl-wstep.is-active{
  background: rgba(48,77,161,.10);
  border-color: rgba(48,77,161,.24);
}
.dl-wstep.is-active .n{
  background: rgba(48,77,161,.16);
  border-color: rgba(48,77,161,.22);
}

.dl-wstep.is-done{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.24);
}
.dl-wstep.is-done .n{
  background: rgba(32,201,151,.16);
  border-color: rgba(32,201,151,.22);
}

.dl-wstep.is-error{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.24);
}
.dl-wstep.is-error .n{
  background: rgba(255,77,77,.16);
  border-color: rgba(255,77,77,.22);
}

/* Body + panels */
.dl-wizard-body{
  padding: 14px;
}

.dl-wpanel{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px;
  box-shadow: 0 16px 50px rgba(11,18,32,.07);
}

.dl-wpanel h3{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1.15rem;
}

.dl-wpanel p{
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.65;
}

/* Wizard panel visibility */
.dl-wizard [data-dl-wpanel]{
  display:none;
}
.dl-wizard [data-dl-wpanel].is-active{
  display:block;
}

/* Footer controls */
.dl-wizard-foot{
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.dl-wizard-meta{
  color: var(--muted);
  font-weight: 850;
}

.dl-wizard-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Wizard mini progress */
.dl-wizard-progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  overflow:hidden;
  border: 1px solid rgba(11,18,32,.08);
  margin-top: 10px;
}

.dl-wizard-progress .fill{
  height:100%;
  width:0%;
  background: var(--accent);
  transition: width .25s ease;
}

/* Wizard inline errors (optional) */
.dl-wizard-error{
  margin-top: 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(255,77,77,.22);
  background: rgba(255,77,77,.10);
  padding: 10px 12px;
  font-weight: 850;
  color: rgba(11,18,32,.88);
  display:none;
}
.dl-wizard-error.is-visible{ display:block; }


/* ---- /assets/css/tabs.css ---- */
/* =========================================================
   tabs.css - DutchLine .dl-tabs component
   Locatie: /assets/css/tabs.css

   Markup (Components\Tab\Tab):
     <div class="dl-tabs dl-tabs-{line|pills|enclosed}" id="...">
       <ul class="dl-tabs-nav" role="tablist">
         <li role="presentation"><button class="dl-tab is-active">...</button></li>
       </ul>
       <div class="dl-tabs-panels">
         <div class="dl-tab-panel is-active">...</div>
       </div>
     </div>

   Verticale variant (raw markup, demo):
     <div class="dl-vtabs-wrap">
       <div class="dl-vtabs-nav">...</div>
       <div class="dl-vtabs-content">...</div>
     </div>
   ========================================================= */

/* ---- Wrapper -------------------------------------------- */
.dl-tabs {
  display: flex;
  flex-direction: column;
}

/* ---- Nav (tablist) -------------------------------------- */
.dl-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dl-tabs-nav > li {
  margin: 0;
  padding: 0;
}

/* ---- Tab button (basis) --------------------------------- */
.dl-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 700;
  font-size: .86rem;
  line-height: 1.2;
  padding: 9px 14px;
  border-radius: var(--r, 14px);
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
  white-space: nowrap;
}
.dl-tab:hover {
  color: var(--ink);
  background: rgba(48,77,161,.06);
}
.dl-tab.is-active {
  color: var(--accent);
}
.dl-tab.is-disabled,
.dl-tab:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.dl-tab i { opacity: .7; font-size: .85em; }
.dl-tab.is-active i { opacity: 1; }

/* ---- Panels --------------------------------------------- */
.dl-tabs-panels { margin-top: 16px; }
.dl-tab-panel { display: none; }
.dl-tab-panel.is-active {
  display: block;
  animation: dl-tab-fade .18s ease;
}
@keyframes dl-tab-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Variant: pills (default look in showcase)
   ========================================================= */
.dl-tabs-pills .dl-tab {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: rgba(11,18,32,.78);
}
.dl-tabs-pills .dl-tab:hover {
  border-color: var(--accent);
  background: #fff;
  color: var(--ink);
}
.dl-tabs-pills .dl-tab.is-active {
  border-color: rgba(48,77,161,.22);
  background: var(--accent-soft, rgba(48,77,161,.10));
  color: var(--accent);
}

/* =========================================================
   Variant: line (onderstreping)
   ========================================================= */
.dl-tabs-line .dl-tabs-nav {
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.dl-tabs-line .dl-tab {
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.dl-tabs-line .dl-tab:hover {
  background: rgba(48,77,161,.06);
}
.dl-tabs-line .dl-tab.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* =========================================================
   Variant: enclosed (folder-tabs)
   ========================================================= */
.dl-tabs-enclosed .dl-tabs-nav {
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.dl-tabs-enclosed .dl-tab {
  border-radius: var(--r, 14px) var(--r, 14px) 0 0;
  padding: 10px 14px;
  margin-bottom: -1px;
  border-color: transparent;
}
.dl-tabs-enclosed .dl-tab:hover {
  background: rgba(48,77,161,.06);
}
.dl-tabs-enclosed .dl-tab.is-active {
  color: var(--ink);
  background: var(--bg, #fff);
  border-color: var(--border);
  border-bottom-color: transparent;
}

/* =========================================================
   Verticale tabs (.dl-vtabs-wrap)
   ========================================================= */
.dl-vtabs-wrap {
  display: flex;
  align-items: stretch;
  min-height: 220px;
}
.dl-vtabs-nav {
  flex-shrink: 0;
  width: 220px;
  padding: 16px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.dl-vtabs-nav .nav { gap: 4px; }
.dl-vtabs-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
}
.dl-vtabs-nav .nav-link i {
  width: 16px;
  text-align: center;
  opacity: .7;
  flex-shrink: 0;
}
.dl-vtabs-nav .nav-link.active i { opacity: 1; }
.dl-vtabs-content {
  flex: 1;
  min-width: 0;
  padding: 24px;
}

/* ---- Mobiel: stapelen -------------------------------- */
@media (max-width: 767px) {
  .dl-vtabs-wrap { flex-direction: column; }
  .dl-vtabs-nav {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .dl-vtabs-nav .nav { flex-direction: row !important; flex-wrap: wrap; }
}

/* =========================================================
   Variant: side-tabs (.dl-side-tabs)
   ---------------------------------------------------------
   Admin-detailpaginas: op desktop een vast menu LINKS naast de inhoud, op
   kleinere schermen een horizontale balk BOVEN de inhoud. Zelfde component en
   dezelfde tabs.js - alleen een andere richting.

   Gebruik:
     Components\Tab\Tab::render([
       'id' => 'invoiceTabs', 'variant' => 'pills', 'class' => 'dl-side-tabs',
       'tabs' => [ ['label' => 'Overzicht', 'icon' => 'fa-file-invoice', 'body' => $html], ... ]
     ]);
   ========================================================= */
.dl-side-tabs .dl-tabs-nav{
  background:#fff; border:1px solid #eef2f6; border-radius:14px;
  padding:8px; gap:4px;
}
.dl-side-tabs .dl-tab{
  border:1px solid transparent; background:transparent;
  color:#475569; font-weight:700;
}
.dl-side-tabs .dl-tab:hover{
  background:var(--accent-soft, rgba(48,77,161,.08));
  color:var(--accent, #304DA1);
}
.dl-side-tabs .dl-tab.is-active{
  background:var(--accent, #304DA1); border-color:var(--accent, #304DA1);
  color:#fff; box-shadow:0 6px 16px rgba(var(--accent-rgb, 48,77,161), .22);
}
.dl-side-tabs .dl-tab.is-active i{ opacity:1; }
.dl-side-tabs .dl-tabs-panels{ margin-top:0; }

@media (min-width: 992px){
  .dl-side-tabs{ flex-direction:row; align-items:flex-start; gap:18px; }
  .dl-side-tabs > .dl-tabs-nav{
    flex:0 0 250px; width:250px; flex-direction:column; flex-wrap:nowrap;
    position:sticky; top:88px;
  }
  .dl-side-tabs > .dl-tabs-nav > li{ width:100%; }
  .dl-side-tabs > .dl-tabs-nav .dl-tab{
    width:100%; justify-content:flex-start; text-align:left;
    padding:11px 13px; white-space:normal;
  }
  .dl-side-tabs > .dl-tabs-nav .dl-tab i{ width:18px; text-align:center; }
  .dl-side-tabs > .dl-tabs-panels{ flex:1 1 auto; min-width:0; }
}

@media (max-width: 991.98px){
  .dl-side-tabs > .dl-tabs-nav{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-bottom:14px;
  }
  .dl-side-tabs > .dl-tabs-nav::-webkit-scrollbar{ height:0; }
}

/* Actielijst binnen een tab: label + omschrijving links, knop rechts. */
.dl-act-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid #f1f5f9;
}
.dl-act-row:last-child{ border-bottom:0; }
.dl-act-row .dl-act-txt{ flex:1 1 260px; min-width:0; }
.dl-act-row .dl-act-txt strong{ display:block; font-size:.95rem; color:#0b1220; }
.dl-act-row .dl-act-txt span{ font-size:.82rem; color:#64748b; }
.dl-act-row .dl-act-btn{ flex:0 0 auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }


/* ---- /assets/css/timeline.css ---- */
/* ==========================================================================
   timeline.css
   --------------------------------------------------------------------------
   .dl-timeline - verticale audittrail / historie.

   Gebruikt door de historie-tabs in /admin/financial/* (orderAudit::timeline).

   Markup:
     <ul class="dl-timeline">
       <li class="dl-tl-item tone-ok">
         <div class="dl-tl-dot"><i class="fa-solid fa-coins"></i></div>
         <div class="dl-tl-body">
           <div class="dl-tl-top">
             <span class="dl-tl-label">Betaling ontvangen: € 65,95</span>
             <span class="dl-tl-time">28-07-2026 14:12</span>
           </div>
           <div class="dl-tl-detail">PAY-123 · ideal</div>
           <div class="dl-tl-meta"><i class="fa-solid fa-user"></i> Mert (Admin)
             <span class="dl-tl-src">payment</span></div>
         </div>
       </li>
     </ul>

   tone-*: ok (groen) | warn (geel) | err (rood) | info (blauw) | muted (grijs)
   ========================================================================== */

.dl-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Verticale lijn door alle punten heen */
.dl-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #eef2f6;
  border-radius: 2px;
}

.dl-tl-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 10px 0;
}
.dl-tl-item:last-child { padding-bottom: 0; }

.dl-tl-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  background: #f1f5f9;
  color: #64748b;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #eef2f6;
}

.dl-tl-body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }

.dl-tl-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dl-tl-label {
  font-weight: 700;
  font-size: .92rem;
  color: #0b1220;
  word-break: break-word;
}
.dl-tl-time {
  font-size: .78rem;
  color: #94a3b8;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dl-tl-detail {
  font-size: .82rem;
  color: #64748b;
  margin-top: 2px;
  word-break: break-word;
}

.dl-tl-meta {
  font-size: .76rem;
  color: #94a3b8;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dl-tl-src {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- Tonen -------------------------------------------------------------- */
.dl-tl-item.tone-ok   .dl-tl-dot { background: rgba(22, 163, 74, .12);  color: #16a34a; box-shadow: 0 0 0 1px rgba(22, 163, 74, .25); }
.dl-tl-item.tone-warn .dl-tl-dot { background: rgba(245, 158, 11, .14); color: #b45309; box-shadow: 0 0 0 1px rgba(245, 158, 11, .28); }
.dl-tl-item.tone-err  .dl-tl-dot { background: rgba(220, 38, 38, .12);  color: #dc2626; box-shadow: 0 0 0 1px rgba(220, 38, 38, .25); }
.dl-tl-item.tone-info .dl-tl-dot { background: rgba(14, 165, 233, .12); color: #0284c7; box-shadow: 0 0 0 1px rgba(14, 165, 233, .25); }

/* ---- Compacte variant --------------------------------------------------- */
.dl-timeline.is-compact .dl-tl-item { padding: 6px 0; }
.dl-timeline.is-compact .dl-tl-dot  { flex-basis: 26px; width: 26px; height: 26px; font-size: .7rem; }
.dl-timeline.is-compact::before     { left: 12px; }
.dl-timeline.is-compact .dl-tl-label { font-size: .86rem; }

@media (max-width: 575.98px) {
  .dl-tl-top { flex-direction: column; gap: 2px; }
}


/* ---- /assets/css/table.css ---- */
/* =========================================================
   table.css - DutchLine UI (Tables) v1.3
   - Premium / calm / admin-ready
   - Backwards compatible with v1.0 + v1.2
   - Fixes common pitfalls:
     * Sticky header + sticky tools offset via CSS var
     * Focus rings not clipped by overflow (uses box-shadow)
     * Reduced motion support
     * color-mix fallback
   ========================================================= */

:root{
  --dl-row-hover: rgba(48,77,161,.06);
  --dl-row-hover-strong: rgba(48,77,161,.10);
  --dl-row-selected: rgba(48,77,161,.13);
  --dl-row-selected-border: rgba(48,77,161,.30);
  --dl-row-focus: rgba(48,77,161,.18);
  --dl-z-sticky: 4;
  --dl-z-tools: 5;

  /* Sticky tools height (override per page if needed)
     Example: .dl-table-wrap{ --dl-sticky-tools-h: 72px; } */
  --dl-sticky-tools-h: 62px;

  /* ✅ Copy tooltip tokens (safe defaults) */
  --dl-copy-tip-bg: rgba(11,18,32,.92);
  --dl-copy-tip-ink: rgba(255,255,255,.96);
  --dl-copy-tip-shadow: 0 14px 30px rgba(11,18,32,.18);
  --dl-copy-tip-radius: 12px;
  --dl-copy-tip-pad: 8px 10px;
  --dl-copy-tip-font: .86rem;
}

/* =========================
   Shell
   ========================= */
.dl-table-wrap{
  border-radius: 10px;
  border: 1px solid rgba(11,18,32,.09);
  background: #fff;
  box-shadow: 0 2px 8px rgba(11,18,32,.06), 0 12px 32px rgba(11,18,32,.07);
  overflow: hidden;
}

/* Allow using dl-table-wrap on .table-responsive too (your usage) */
.table-responsive.dl-table-wrap{
  -webkit-overflow-scrolling: touch;
}

/* =========================
   Header / tools
   ========================= */
.dl-table-head{
  padding: 14px 20px;
  border-bottom: 1px solid rgba(11,18,32,.07);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 58px;
}

.dl-table-title{
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-table-meta{
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

.dl-table-tools{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

/* Sticky tools (opt-in) */
.dl-table-wrap[data-sticky-tools="1"] .dl-table-head{
  position: sticky;
  top: 0;
  z-index: var(--dl-z-tools);
  backdrop-filter: blur(10px);
}

/* =========================
   Search
   ========================= */
.dl-table-search{
  position: relative;
  min-width: 220px;
  flex: 1;
  max-width: 360px;
}
.dl-table-search input{
  padding-left: 38px;
  border-radius: 10px;
  border-color: rgba(11,18,32,.10);
  font-size: .875rem;
}
.dl-table-search input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(48,77,161,.12);
}
.dl-table-search svg{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .45;
  pointer-events: none;
}

/* =========================
   Filters & mini pills
   ========================= */
.dl-mini{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 8px 10px;
  font-weight: 850;
  color: rgba(11,18,32,.82);
}

/* Optional small meta helpers */
.dl-table-count{
  font-weight: 950;
  letter-spacing: -.01em;
}

/* =========================
   Bulk bar
   ========================= */
.dl-bulkbar{
  display: none;
  border-bottom: 1px solid rgba(48,77,161,.14);
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(48,77,161,.07) 0%, rgba(48,77,161,.03) 100%);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dl-bulkbar .left,
.dl-bulkbar .right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.dl-bulkbar .count{
  font-weight: 950;
  letter-spacing: -.01em;
}

/* =========================
   Table base
   ========================= */
.dl-table{
  width: 100%;
  margin: 0;
  --bs-table-bg: transparent;
}

/* Inline code in table cells - override Bootstrap's pinkish code color */
.dl-table code{
  font-size: .80em;
  font-weight: 600;
  color: var(--muted);
  background: rgba(11,18,32,.05);
  padding: .1em .42em;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dl-table thead th{
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(11,18,32,.45);
  background: rgba(247,248,251,.98);
  border-bottom: 1px solid rgba(11,18,32,.07);
  white-space: nowrap;
  vertical-align: middle;
  padding: 10px 16px;
}

.dl-table tbody td{
  vertical-align: middle;
  border-top: 1px solid rgba(11,18,32,.055);
  padding: 13px 16px;
  color: var(--ink);
  font-size: .925rem;
}

/* Gutter: eerste en laatste kolom hebben meer lucht links/rechts */
.dl-table thead th:first-child,
.dl-table tbody td:first-child{
  padding-left: 20px;
}
.dl-table thead th:last-child,
.dl-table tbody td:last-child{
  padding-right: 20px;
}

.dl-table tbody tr{
  transition: background .15s ease, outline-color .15s ease;
}

.dl-table tbody tr:hover{
  background: var(--dl-row-hover);
}

.dl-table tbody tr[data-hover="strong"]:hover{
  background: var(--dl-row-hover-strong);
}

.dl-table tbody tr.is-selected{
  background: var(--dl-row-selected);
  outline: 1px solid var(--dl-row-selected-border);
  outline-offset: -1px;
}

.dl-table tbody tr.is-muted{
  opacity: .75;
}

.dl-table .text-num{
  font-variant-numeric: tabular-nums;
}

/* Better focus states (avoid clipping by overflow:hidden via box-shadow, keep outline minimal) */
.dl-table :is(a,button,input,select,textarea):focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px var(--dl-row-focus);
  border-radius: 10px;
}

/* Striped option (opt-in on wrap) */
.dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even){
  background: rgba(11,18,32,.035);
}
/* Fallback first, then modern color-mix when supported */
.dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even):hover{
  background: rgba(48,77,161,.06);
}
@supports (background: color-mix(in srgb, #000 40%, #fff)){
  .dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even):hover{
    background: color-mix(in srgb, rgba(11,18,32,.02) 40%, var(--dl-row-hover));
  }
}

/* =========================
   Density modes
   ========================= */
.dl-table-wrap[data-density="compact"] .dl-table thead th{
  padding-top: 5px;
  padding-bottom: 5px;
}
.dl-table-wrap[data-density="compact"] .dl-table tbody td{
  padding-top: 5px;
  padding-bottom: 5px;
}

.dl-table-wrap[data-density="comfortable"] .dl-table thead th{
  padding-top: 18px;
  padding-bottom: 18px;
}
.dl-table-wrap[data-density="comfortable"] .dl-table tbody td{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* =========================
   Sticky header option
   ========================= */
.dl-table-wrap[data-sticky="1"] .dl-table thead th{
  position: sticky;
  top: 0;
  z-index: var(--dl-z-sticky);
}

/* If sticky tools is enabled, stick header below tools */
.dl-table-wrap[data-sticky="1"][data-sticky-tools="1"] .dl-table thead th{
  top: var(--dl-sticky-tools-h);
}

/* =========================
   Sort indicator (th)
   ========================= */
.dl-sort{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor: pointer;
  user-select:none;
}

.dl-sort .ico{
  width: 18px;
  height: 18px;
  display:inline-grid;
  place-items:center;
  opacity: .45;
  transition: transform .14s ease, opacity .14s ease;
}

th[data-sort="asc"] .dl-sort .ico{ opacity: .90; transform: rotate(180deg); }
th[data-sort="desc"] .dl-sort .ico{ opacity: .90; transform: rotate(0deg); }

.dl-table thead th:hover .dl-sort .ico{
  opacity: .75;
}

/* =========================
   Row actions
   ========================= */
.dl-row-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* =========================
   Cell layouts (title/sub, clamp)
   ========================= */
.dl-cell{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0; /* for clamp */
}

.dl-cell-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.dl-cell-sub{
  color: var(--muted);
  font-size: .90rem;
  line-height: 1.45;
  margin-top: 2px;
}

.dl-clamp-1,
.dl-clamp-2{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.dl-clamp-1{ -webkit-line-clamp: 1; }
.dl-clamp-2{ -webkit-line-clamp: 2; }

/* Utilities */
.dl-nowrap{ white-space: nowrap !important; }
.dl-wrap{ white-space: normal !important; }
.dl-muted{ color: var(--muted) !important; }
.dl-kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .82em;
  font-weight: 600;
  padding: .2em .5em;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(11,18,32,.10);
  white-space: nowrap;
}

/* =========================
   Images / thumbs
   ========================= */
.dl-thumb-sm{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}

.dl-thumb-sm img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Helps PhotoSwipe / rowclick coexist */
[data-dl-no-rowclick]{
  cursor: zoom-in;
}

.dl-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(48,77,161,.10);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.82);
  flex: 0 0 auto;
}

/* =========================
   Status / badges inside table
   (uses your dl-pill; adds "dl-badge-soft" variant)
   ========================= */
.dl-badge-soft{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 850;
  color: rgba(11,18,32,.84);
}

.dl-badge-soft:hover{
  border-color: var(--border2);
  background: #fff;
}

/* Color helpers (soft) - text-color override nodig omdat badges.css color:#fff zet */
.dl-badge-success{ background: rgba(32,201,151,.12); border-color: rgba(32,201,151,.28); color: rgba(14,140,100,.92); }
.dl-badge-warning{ background: rgba(255,193,7,.13); border-color: rgba(255,193,7,.30); color: rgba(148,106,0,.92); }
.dl-badge-danger{  background: rgba(255,77,77,.10); border-color: rgba(255,77,77,.26); color: rgba(200,40,40,.90); }
.dl-badge-info{    background: rgba(13,110,253,.10); border-color: rgba(13,110,253,.24); color: rgba(13,90,220,.90); }
.dl-badge-neutral{ background: rgba(11,18,32,.06); border-color: rgba(11,18,32,.12); color: var(--muted); }
.dl-badge-accent{  background: rgba(48,77,161,.10); border-color: rgba(48,77,161,.22); color: var(--accent); }

/* =========================
   Dropdown (Bootstrap) refinement
   ========================= */
.dl-dd-menu{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 8px;
}

.dl-dd-menu .dropdown-item{
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 10px 10px;
}

.dl-dd-menu .dropdown-item:hover{
  background: rgba(48,77,161,.08);
}

/* =========================
   Row expandable details
   ========================= */
.dl-row-details{
  display:none;
  background: rgba(255,255,255,.92);
}
tr.is-expanded + tr.dl-row-details{
  display: table-row;
}

.dl-details-cell{
  padding: 14px 14px !important;
  border-top: 0 !important;
}

.dl-details-box{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.dl-details-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.dl-details-col-4{ grid-column: span 4; }
.dl-details-col-6{ grid-column: span 6; }
.dl-details-col-12{ grid-column: span 12; }
@media (max-width: 991px){
  .dl-details-col-4,.dl-details-col-6{ grid-column: span 12; }
}

/* =========================
   Empty + error states
   ========================= */
.dl-table-empty,
.dl-table-error{
  display:none;
  padding: 18px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

.dl-empty-box,
.dl-error-box{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 16px;
}

.dl-empty-title,
.dl-error-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
}

.dl-empty-text,
.dl-error-text{
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.65;
}

/* EmptyState component (.dl-empty) */
.dl-empty .dl-empty-title{
  font-weight: 700;
  font-size: .925rem;
  margin: 0 0 4px;
  color: var(--ink);
}

.dl-empty .dl-empty-sub{
  font-size: .84rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

.dl-empty .dl-empty-action{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================
   Skeleton loader (table)
   ========================= */
.dl-skeleton{
  background: linear-gradient(90deg, rgba(11,18,32,.06), rgba(11,18,32,.03), rgba(11,18,32,.06));
  background-size: 240% 100%;
  animation: dlSkel 1.1s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes dlSkel{
  0%{ background-position: 0% 0; }
  100%{ background-position: 100% 0; }
}

.dl-table-skeleton{
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:none;
}

.dl-skel-row{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 10px 0;
  border-top: 1px solid rgba(11,18,32,.06);
}
.dl-skel-row:first-child{ border-top: 0; }

.dl-skel-box{ height: 14px; }
.dl-skel-w-20{ width: 20%; }
.dl-skel-w-35{ width: 35%; }
.dl-skel-w-50{ width: 50%; }
.dl-skel-w-70{ width: 70%; }

/* =========================
   Column visibility menu (optional)
   ========================= */
.dl-colmenu{
  min-width: 260px;
}
.dl-colmenu .form-check{
  padding: 8px 10px;
  border-radius: 12px;
}
.dl-colmenu .form-check:hover{
  background: rgba(48,77,161,.06);
}

/* =========================
   Responsive column priority (opt-in)
   - Use wrapper: .dl-table-wrap[data-responsive="auto"]
   - Mark th/td with data-dl-priority="1|2|3"
   - Lower number => more important (stays visible longer)
   ========================= */
.dl-table-wrap[data-responsive="auto"] [data-dl-priority]{
  /* no-op by default; rules below apply on breakpoints */
}

@media (max-width: 1199.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="3"]{ display:none !important; }
}
@media (max-width: 991.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="2"]{ display:none !important; }
}
@media (max-width: 767.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="1"]{ display:none !important; }
}

/* =========================
   Mobile cards mode
   - Default: elke .dl-table-wrap wordt op mobiel een stacked cards-layout
     met label/waarde-paren per cel. data-label op td komt uit de
     bijbehorende <th>-tekst (auto-ingevuld door table.js).
   - Opt-out per wrap via data-mobile="scroll" -> horizontaal scrollen
     (voor tabellen met te veel kolommen waar kaart-layout onhandig is).
   - Opt-in per wrap via data-mobile="cards" werkt identiek aan default
     (backwards-compatible met bestaande pagina's).
   ========================= */
@media (max-width: 767.98px){
  /* Default cards-layout */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table{
    display:block;
    width:100%;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table thead{
    display:none;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody,
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tr,
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table td{
    display:block;
    width:100%;
  }

  /* Elke rij wordt een zelfstandige kaart */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody tr{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r, 14px);
    padding: 12px 14px;
    margin: 0 0 12px;
    box-shadow: 0 2px 8px rgba(11,18,32,.04);
    transition: box-shadow .15s, transform .15s;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody tr:hover{
    box-shadow: 0 6px 18px rgba(11,18,32,.08);
    background: #fff;
    transform: translateY(-1px);
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody tr[data-row-href]{
    cursor: pointer;
  }

  /* Cel-layout: label links (vaste breedte), waarde rechts */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td{
    border: 0;
    border-bottom: 1px solid rgba(11,18,32,.06);
    padding: 8px 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: start;
    text-align: left !important;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td:first-child{
    padding-top: 0;
  }

  /* Label als uppercase-pilletje links, compact en rustig */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td[data-label]::before{
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Cellen met leeg data-label (bv checkbox) nemen volle breedte zonder label-kolom */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td[data-label=""]{
    grid-template-columns: 1fr;
  }
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td[data-label=""]::before{
    display: none;
  }

  /* Cellen zonder data-label vallen terug op 1-koloms layout (geen label) */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td:not([data-label]){
    grid-template-columns: 1fr;
  }

  /* Actie-cellen: knoppen mogen wrappen zonder text-align strijd */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td .dl-btn-group{
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Text-end op desktop blijft left-aligned in cards mode (label geeft al context) */
  .dl-table-wrap:not([data-mobile="scroll"]) .dl-table tbody td.text-end{
    justify-items: start;
  }

  /* Horizontal-scroll opt-out: keep table intact, allow x-scroll */
  .dl-table-wrap[data-mobile="scroll"]{
    overflow-x: auto;
  }
}

/* =========================
   Row clickable
   ========================= */
.dl-table tbody tr[data-row-href]{
  cursor: pointer;
}

/* If row click is disabled on row or wrap, revert cursor */
.dl-table-wrap[data-dl-rowclick="0"] .dl-table tbody tr[data-row-href]{
  cursor: default;
}
.dl-table tbody tr[data-row-href][data-dl-rowclick="0"]{
  cursor: default;
}

/* =========================================================
   ✅ Copy-to-clipboard UX (data-dl-copy)
   - Non-breaking: only affects elements with [data-dl-copy]
   - Tooltip: uses CSS only (no extra JS)
   - Copy feedback: table.js toggles .is-copied briefly
   ========================================================= */

/* Make copy targets feel intentional */
[data-dl-copy]{
  position: relative;
  cursor: copy;
  user-select: text; /* allow selection too */
  border-radius: 10px;
  padding: 2px 6px;
  margin: -2px -6px; /* keeps layout same but increases hit area */
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}

[data-dl-copy]:hover{
  background: rgba(48,77,161,.06);
  box-shadow: 0 0 0 1px rgba(48,77,161,.12) inset;
}

/* Tooltip (default text = "Kopiëren") */
[data-dl-copy]::after{
  content: attr(data-dl-copy-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: var(--dl-copy-tip-bg);
  color: var(--dl-copy-tip-ink);
  padding: var(--dl-copy-tip-pad);
  border-radius: var(--dl-copy-tip-radius);
  font-size: var(--dl-copy-tip-font);
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: var(--dl-copy-tip-shadow);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .14s ease, transform .14s ease;
}

/* If user didn't set a tooltip attribute, show default */
[data-dl-copy]:not([data-dl-copy-tip])::after{
  content: "Kopiëren";
}

/* Small arrow */
[data-dl-copy]::before{
  content:"";
  position:absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  width: 10px;
  height: 10px;
  background: var(--dl-copy-tip-bg);
  rotate: 45deg;
  opacity: 0;
  pointer-events:none;
  z-index: 19;
  transition: opacity .14s ease, transform .14s ease;
}

[data-dl-copy]:hover::after,
[data-dl-copy]:hover::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Copied state (table.js toggles .is-copied) */
[data-dl-copy].is-copied{
  background: rgba(32,201,151,.10);
  box-shadow: 0 0 0 1px rgba(32,201,151,.22) inset;
}

[data-dl-copy].is-copied::after{
  content:"Gekopieerd";
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-dl-copy].is-copied::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: avoid tooltips blocking */
@media (max-width: 575.98px){
  [data-dl-copy]::after,
  [data-dl-copy]::before{
    display:none;
  }
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  .dl-table tbody tr,
  .dl-sort .ico,
  [data-dl-copy],
  [data-dl-copy]::after,
  [data-dl-copy]::before{
    transition: none !important;
  }
  .dl-skeleton{
    animation: none !important;
  }
}

/* =========================
   Mobile stacked layout (opt-in via data-dl-stack)
   Add data-dl-stack to .dl-table-wrap to activate
   ========================= */
@media (max-width: 767px){
  /* Container no longer needs horizontal scroll */
  [data-dl-stack] .table-responsive{
    overflow: visible;
  }

  /* Remove forced min-width */
  [data-dl-stack] .dl-table{
    min-width: 0 !important;
    width: 100%;
  }

  /* Hide column headers */
  [data-dl-stack] .dl-table thead{
    display: none;
  }

  /* Each row is a card block */
  [data-dl-stack] .dl-table tbody tr{
    display: block;
    padding: 6px 0 !important;
    margin-bottom: 6px;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden;
  }
  [data-dl-stack] .dl-table tbody tr:last-child{
    margin-bottom: 0;
  }
  [data-dl-stack] .dl-table tbody tr.is-selected{
    background: var(--dl-row-selected) !important;
    border-color: var(--dl-row-selected-border) !important;
  }

  /* Each cell = label/value flex row */
  [data-dl-stack] .dl-table tbody td{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 16px !important;
    border: none !important;
    font-size: .88rem;
    gap: 12px;
    text-align: left !important;
    min-height: 0 !important;
  }

  /* Label from data-label */
  [data-dl-stack] .dl-table tbody td[data-label]:not([data-label=""])::before{
    content: attr(data-label);
    flex-shrink: 0;
    width: 84px;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .055em;
    color: var(--muted);
    opacity: .6;
    line-height: 1.3;
  }

  /* Empty label = action row, no before, right-aligned */
  [data-dl-stack] .dl-table tbody td[data-label=""]{
    justify-content: flex-end !important;
    padding-top: 8px !important;
    gap: 6px;
  }
  [data-dl-stack] .dl-table tbody td[data-label=""]::before{
    display: none;
  }

  /* Hide checkbox cells on mobile */
  [data-dl-stack] .dl-table tbody td.dl-col-check{
    display: none !important;
  }

  /* Row actions always visible */
  [data-dl-stack] .dl-table .dl-row-actions{
    opacity: 1 !important;
  }

  /* Long text (email, etc) can wrap/break */
  [data-dl-stack] .dl-table tbody td a,
  [data-dl-stack] .dl-table tbody td code{
    word-break: break-all;
    font-size: .8rem;
  }
}
}

/* =========================
   Bootstrap-table responsive fallback
   When a Bootstrap .table lives inside a .card-body or .dl-card-body
   without an explicit overflow wrapper, make the container scroll
   so the table doesn't overflow the viewport on small screens.
   Uses CSS :has() - supported in all modern browsers (Chrome 105+,
   Firefox 121+, Safari 15.4+).
   ========================= */
@supports selector(:has(> *)) {
  @media (max-width: 991.98px) {
    .card-body:has(> .table),
    .card-body:has(> .table-responsive),
    .dl-card-body:has(> .table) {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

/* Utility class for manual table scroll wrappers */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- /assets/css/theme-arctic.css ---- */
/* =========================================================
   theme-arctic.css - Arctic Minimal skin
   - Net iets meer “DutchLine”: crisp whites + clean borders
   ========================================================= */

:root{
  --bg:#ffffff;
  --surface:#f7f8fb;
  --panel:#ffffff;

  --ink:#0b1220;
  --ink2:#121a2b;

  --text:var(--ink);
  --muted:rgba(11,18,32,.70);
  --muted2:rgba(11,18,32,.56);
  --border:rgba(11,18,32,.10);
  --border2:rgba(11,18,32,.14);

  /* slightly crisper accent */
  --accent: var(--dl-blue-700);
  --focus: rgba(48,77,161,.24);
}


/* ---- /assets/css/theme-core.css ---- */
/* =========================================================
   theme-core.css - DutchLine MAX (Core)
   - Bootstrap-friendly
   - Premium, rustig
   - Meer “DutchLine”: ink/white contrast + blauwe sweep + strakke lijnen
   ========================================================= */

:root{
  /* Brand (DutchLine blue family) */
  --dl-blue-900:#1E3375;
  --dl-blue-800:#243C86;
  --dl-blue-700:#304DA1;  /* primary */
  --dl-blue-600:#415FAC;
  --dl-blue-500:#5B78C0;
  --dl-blue-300:#80A0D0;

  /* Neutrals */
  --ink:#0b1220;
  --ink2:#121a2b;
  --bg:#ffffff;
  --surface:#f7f8fb;
  --panel:#ffffff;

  --text:var(--ink);
  --muted:rgba(11,18,32,.70);
  --muted2:rgba(11,18,32,.56);
  --border:rgba(11,18,32,.10);
  --border2:rgba(11,18,32,.14);

  /* Shapes & depth (premium, not glass) */
  --r:14px;
  --r2:18px;
  --shadow:0 20px 60px rgba(11,18,32,.12);
  --shadow2:0 12px 30px rgba(11,18,32,.10);

  /* Accent usage */
  --accent:var(--dl-blue-700);
  --accent-ink:rgba(48,77,161,.85);
  --accent-soft:rgba(48,77,161,.10);
  --accent-soft2:rgba(48,77,161,.14);
  --focus:rgba(48,77,161,.26);

  /* Layout rhythm */
  --container-max: 1440px;
  --section-pad: 72px;
  --section-pad-sm: 42px;
  --card-pad: 18px;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* System statuses (used in pills/badges) */
  --ok: rgba(32,201,151,1);
  --warn: rgba(255,193,7,1);
  --danger: rgba(255,77,77,1);
  --info: rgba(13,110,253,1);
}

html, body{ height:100%; }
body{
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--accent); }

/* Container */
.container-max{ max-width: var(--container-max); }

/* =========================================================
   DutchLine subtle “sheen” + dividers (brand vibe)
   ========================================================= */
.dl-sheen{
  background:
    radial-gradient(900px 260px at 10% 10%, rgba(48,77,161,.10), transparent 62%),
    radial-gradient(700px 240px at 85% 0%, rgba(128,160,208,.10), transparent 62%);
}

.dl-divider{ border-top: 1px solid var(--border); }
.hr-soft{ border-color: var(--border); opacity: 1; }
.dl-hr-accent{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.35), rgba(11,18,32,.10), transparent);
  opacity: 1;
}

/* =========================================================
   Header (Premium minimal, DutchLine-like)
   ========================================================= */
.dl-header{
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.25) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* tiny brand line (very DutchLine) */
.dl-header::after{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.80), rgba(128,160,208,.40), transparent);
  opacity: .80;
}

.dl-header .navbar{
  padding-top: 14px;
  padding-bottom: 14px;
}
 

.dl-nav{
  gap: 18px;
  font-weight: 650;
  letter-spacing: .01em;
}
.dl-nav .nav-link{
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(11,18,32,.82);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.dl-nav .nav-link:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}
.dl-nav .nav-link.active{
  background: rgba(48,77,161,.10);
  color: var(--ink);
  position: relative;
}
.dl-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,77,161,.70), rgba(128,160,208,.22));
}

.dl-header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.dl-iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.dl-iconbtn:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
}
 

/* =========================================================
   Sections + typography
   ========================================================= */
.section{ padding: var(--section-pad) 0; }
.section-sm{ padding: var(--section-pad-sm) 0; }

.dl-eyebrow{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  color: color-mix(in srgb, var(--accent) 100%, var(--ink));
}

/* Alias used in demos */
.dl-kicker{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem;
  color: color-mix(in srgb, var(--accent) 100%, var(--text));
}

.dl-section-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
}
.dl-section-sub{
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.7;
}

.dl-h1{
  font-weight: 950;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-size: clamp(2.2rem, 4vw, 3.45rem);
}
.dl-lead{
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* =========================================================
   Hero (DutchLine-ish: ink + blue sweep, subtle)
   ========================================================= */
/* =========================================================
   HERO - background image override (plaats onderaan main.css)
   ========================================================= */
.dl-hero{
  /* image als basis */
  background: url("/assets/img/hero-background.webp") center/cover no-repeat;
}

/* dot-pattern blijft (theme-core heeft ::before al) */
.dl-hero::before{
  /* laat theme-core settings staan; alleen iets beter zichtbaar */
  opacity: .32;
}

/* theme-core glow blijft (theme-core heeft ::after al),
   maar we maken ’m iets subtieler zodat image zichtbaar blijft */
.dl-hero::after{
  opacity: .75;
}

/* EXTRA overlay voor contrast/leesbaarheid boven de foto,
   maar onder je content */
.dl-hero{
  position: relative;
}
.dl-hero .container{
  position: relative;
  z-index: 3; /* boven overlays */
}

/* nieuwe overlay laag */
.dl-hero .dl-hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,13,24,.55) 0%, rgba(7,13,24,.3) 55%, rgba(7,13,24,.20) 100%),
    linear-gradient(180deg, rgba(7,13,24,.25) 0%, rgba(7,13,24,.05) 55%, rgba(7,13,24,0) 100%);
}


.dl-hero-card{
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  padding: 18px;
}
 

/* =========================================================
   Cards / Catalog (more DutchLine: topline + crisp border)
   ========================================================= */
.dl-card{
  
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--panel);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.dl-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow2);
  border-color: var(--border2);
}
.dl-card-topline{
  height: 5px;
  background: linear-gradient(90deg, rgba(48,77,161,.8), rgba(128,160,208,.9), transparent);
}
.dl-card-topline::after{
  content:"";
  display:block;
  height: 2px;
  width: 70%;
  margin-left: 6%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,77,161,.18), transparent);
  opacity: .85;
}
.dl-card-body{ padding: var(--card-pad); }

.dl-thumb{
  width: 100%;
  aspect-ratio: 4 / 4;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 25% 25%, rgba(48,77,161,.08), transparent 62%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
 

.dl-badge{
  position:absolute;
  top: 12px;
  left: 12px;
  font-weight: 900;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
}

.dl-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.15;
  font-size: 1.05rem;
  margin: 0 0 8px 0;
}
.dl-meta{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}

/* =========================================================
   Locked / Guest-only style (cleaner, more “system”)
   ========================================================= */
.dl-locked{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background:
    linear-gradient(180deg, rgba(48,77,161,.06), transparent 55%),
    rgba(255,255,255,.78);
  padding: 14px;
}
.dl-locked strong{ font-weight: 950; }
.dl-locked small{ color: var(--muted); }

/* =========================================================
   Filters / chips
   ========================================================= */
.dl-filter{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 16px;
}
.dl-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  margin: 6px 6px 0 0;
  font-weight: 750;
  color: rgba(11,18,32,.84);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dl-chip:hover{
  border-color: var(--border2);
  background: #fff;
  transform: translateY(-1px);
}
.dl-chip.active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
}

/* =========================================================
   Footer
   ========================================================= */
.dl-footer{
  border-top: 1px solid var(--border);
  padding: 46px 0;
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(48,77,161,.06), transparent 62%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 72%, transparent));
}
.dl-footer a{ color: var(--muted); }
.dl-footer a:hover{ color: var(--ink); }
 

/* =========================================================
   Bootstrap components -> DutchLine tone
   ========================================================= */

/* Dropdown */
.dropdown-menu{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 8px;
  /* Boven sticky header (1020), footer en andere chrome.
     Lager dan modal (1055), tooltip (1080), toast (1090). */
  z-index: 1050;
}
.dropdown-item{
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 700;
  color: rgba(11,18,32,.86);
}
.dropdown-item:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}

/* Nav tabs */
.nav-tabs{
  border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link{
  border: 0;
  border-radius: 14px 14px 0 0;
  font-weight: 900;
  color: rgba(11,18,32,.72);
  padding: 10px 12px;
}
.nav-tabs .nav-link:hover{
  background: rgba(48,77,161,.08);
  color: var(--ink);
}
.nav-tabs .nav-link.active{
  color: var(--ink);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-bottom-color: transparent;
}

/* Nav pills (admin filters etc) */
.nav-pills .nav-link{
  border-radius: 14px;
  border: 1px solid var(--border);
  font-weight: 900;
  color: rgba(11,18,32,.78);
  background: rgba(255,255,255,.86);
}
.nav-pills .nav-link:hover{
  border-color: var(--border2);
  background: #fff;
}
.nav-pills .nav-link.active{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.08);
  color: var(--ink);
}

/* Accordion */
.accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow:hidden;
  background: rgba(255,255,255,.90);
}
.accordion-button{
  font-weight: 950;
  color: rgba(11,18,32,.86);
  background: rgba(255,255,255,.90);
}
.accordion-button:not(.collapsed){
  background: rgba(48,77,161,.08);
  color: var(--ink);
  box-shadow: none;
}
.accordion-button:focus{
  box-shadow: 0 0 0 6px var(--focus);
}
.accordion-body{ color: var(--muted); }

/* Tables */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  border-bottom: 1px solid var(--border);
  color: rgba(11,18,32,.72);
  font-weight: 950;
  letter-spacing: -.01em;
}
.table tbody td{
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.table-hover tbody tr:hover{
  background: rgba(48,77,161,.06);
}
 

/* Toast */
.toast{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.toast-header{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

/* Modal */
.modal-content{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.modal-header, .modal-footer{
  border-color: var(--border);
}

/* Offcanvas */
.offcanvas{
  border-color: var(--border);
}
.offcanvas-header{
  border-bottom: 1px solid var(--border);
}
.offcanvas-body{
  background: rgba(255,255,255,.92);
}

/* Breadcrumbs */
.breadcrumb{
  margin-bottom: 0;
}
.breadcrumb-item a{
  color: rgba(11,18,32,.78);
}
.breadcrumb-item a:hover{
  color: var(--accent);
}
.breadcrumb-item.active{
  color: rgba(11,18,32,.56);
}

/* List groups */
.list-group{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  overflow:hidden;
}
.list-group-item{
  border-color: var(--border);
  padding: 12px 14px;
  background: rgba(255,255,255,.88);
}
.list-group-item:hover{
  background: rgba(48,77,161,.06);
}

/* =========================================================
   DutchLine section accents (drop-in classes)
   ========================================================= */
.dl-sec{
  position: relative;
  overflow: hidden;
}
.dl-sec::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(48,77,161,.55), rgba(128,160,208,.18), transparent);
  opacity: .55;
  pointer-events:none;
}
.dl-sec > .container{
  position: relative;
  z-index: 1;
}

.dl-sec-accent::after{
  content:"";
  position:absolute;
  right: -140px;
  top: -160px;
  width: 520px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(48,77,161,.09), transparent 70%);
  opacity: .25;
  pointer-events:none;
  z-index: 0;
}

.dl-sec-grid::after{
  content:"";
  position:absolute;
  right: -70px;
  top: 34px;
  width: 360px;
  height: 280px;
  background-image: radial-gradient(rgba(7, 13, 24, .09) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 24px;
  filter: blur(.2px);
  opacity: .48;
  pointer-events:none;
  z-index: 0;
}

.dl-sec-sheen{
  background:
    radial-gradient(1600px 520px at 12% -10%, rgba(48,77,161,.05), transparent 64%),
    radial-gradient(1400px 520px at 92% -20%, rgba(128,160,208,.06), transparent 66%),
    linear-gradient(180deg, rgba(11,18,32,.015), transparent 44%),
    var(--bg);
}

/* =========================
   DL Panel (standard, everywhere)
   ========================= */

.dl-panel{
  position: relative;
  border-radius: calc(var(--r2) + 4px);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.88) 55%,
      rgba(255,255,255,.84) 100%
    );
  box-shadow: var(--shadow2);
  

  /* spacing */
  padding: 14px;

  /* subtle glass (safe default) */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

/* top “shine” */
.dl-panel::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}

/* hover */
.dl-panel:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--border) 62%, rgba(0,0,0,.06));
  box-shadow: var(--shadow2), 0 10px 26px rgba(0,0,0,.08);
}

/* focus (als er inputs/buttons in zitten) */
.dl-panel:focus-within{
  border-color: color-mix(in srgb, var(--primary, #2f6fed) 55%, var(--border));
  box-shadow: var(--shadow2), 0 0 0 4px color-mix(in srgb, var(--primary, #2f6fed) 18%, transparent);
}

/* nette divider */
.dl-panel hr{
  margin: 12px 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--border) 85%, transparent),
    transparent
  );
}

/* inputs/selects binnen panel: consistent radius */
.dl-panel .form-control,
.dl-panel .form-select{
  border-radius: calc(var(--r2) + 2px);
}

/* small header row (zoals label + badge) ziet er vanzelf “paneel-headerig” uit */
.dl-panel > .d-flex.align-items-center.justify-content-between{
  padding: 10px 12px;
  margin: -6px -6px 10px -6px;
  border-radius: calc(var(--r2) + 2px);
  background: rgba(255,255,255,.35);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

/* optioneel: scrollbare contentblokken (werkt perfect voor lijsten) */
.dl-panel .dl-panel-scroll{
  max-height: 420px;
  overflow: auto;
  padding: 6px;
  border-radius: calc(var(--r2) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: rgba(255,255,255,.40);
}

/* scrollbar polish (algemeen, alleen waar scrollbars verschijnen) */
.dl-panel *::-webkit-scrollbar{ width: 10px; height: 10px; }
.dl-panel *::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.55);
}

/* =========================================================
   Skeletons / loading placeholders (global utility)
   ========================================================= */
.dl-skel{
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(11,18,32,.04), rgba(11,18,32,.08), rgba(11,18,32,.04));
  background-size: 240% 100%;
  animation: dlSkel 1.2s infinite ease-in-out;
}
@keyframes dlSkel{
  0%{ background-position: 0% 0; opacity: .85; }
  50%{ background-position: 100% 0; opacity: 1; }
  100%{ background-position: 0% 0; opacity: .85; }
}

/* Utilities */
.text-muted-2{ color: var(--muted2) !important; }
.fw-black{ font-weight: 950 !important; }
body.dl-body{
  min-height: 100vh;
}

body.dl-body > .dl-header-v4{ flex: 0 0 auto; }
body.dl-body > .dl-main{ flex: 1 1 auto; min-height: 0; }
body.dl-body > footer{ flex: 0 0 auto; }

/* ---- /assets/css/enka/fonts.css ---- */
/* =========================================================
   enka/fonts.css - lokale webfonts voor ENKA
   Gegenereerd uit Google Fonts (Barlow Condensed + Lato).
   Subsets: latin + latin-ext. font-display: swap zodat tekst
   direct zichtbaar is (geen FOIT) - CLS blijft laag doordat de
   fallback-stack qua metriek dicht bij het webfont ligt.
   Bestanden: /assets/fonts/enka/*.woff2
   ========================================================= */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/enka/barlow-condensed-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/enka/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ---- /assets/css/enka/core.css ---- */
/* =========================================================
   enka/core.css - master stylesheet voor ENKA (APP_LINE=enka)
   Locatie: /assets/css/enka/core.css
   Laadt alleen wanneer APP_LINE=enka via inc/header.php
   ---------------------------------------------------------
   Volgorde: tokens > base > componenten.
   Alle selectors zijn gescoped onder .ek-page of .enka-* of
   .ek-co-* zodat dit nooit DutchLine kan beinvloeden.
   ---------------------------------------------------------
   cache-bust: 2026-07-21 (mobiele winkelwagen-FAB in footer.css)
   ========================================================= */

/* 1) Design tokens */

/* ---- @import /assets/css/enka/tokens.css ---- */
/* =========================================================
   tokens.css - ENKA design tokens (single source of truth)
   ---------------------------------------------------------
   Scope: body.is-enka (door inc/header.php gezet op alle
   Enka-pagina's) + .ek-page als fallback. Bewust GEEN :root:
   dit bestand laadt weliswaar alleen bij APP_LINE=enka, maar
   de scope garandeert dat DutchLine nooit geraakt wordt.

   Opbouw:
     1. Semantische kleurrollen (base / hover / subtle)
     2. Inverse tokens voor donkere secties
     3. Spacing (4px-schaal)
     4. Typografie (schaal ~1.2, rem, clamp voor h1-h3)
     5. Radius / Elevation / Motion
     6. Legacy aliases (oude --ek-* namen blijven werken)
     7. Bootstrap 5.3 variabele-mapping

   Contrast (WCAG AA, berekend):
     text          #0a0a0a op #ffffff = 19.80:1
     text          #0a0a0a op #f6f6f6 = 18.32:1
     text-muted    #6a6a6a op #ffffff =  5.41:1
     text-muted    #6a6a6a op #f6f6f6 =  5.00:1
     text-muted-2  #767676 op #ffffff =  4.54:1 (was #9a9a9a = 2.81 FAIL)
     on-primary    #ffffff op #1a1a1a = 17.40:1 | op hover #0a0a0a = 19.80:1
     danger        #c83232 op #ffffff =  5.31:1 | op subtle #faecec = 4.62:1
     success       #1a7f4b op #ffffff =  5.02:1 | op subtle #edf7f1 = 4.59:1
     warning       #8a5b00 op #ffffff =  5.87:1 | op subtle #f9f1e0 = 5.22:1
     info          #22618e op #ffffff =  6.63:1 | op subtle #e8f0f7 = 5.76:1
     on-dark-muted   rgba(255,255,255,.65) op #0a0a0a = 8.42:1
     on-dark-muted-2 rgba(255,255,255,.55) op #0a0a0a = 6.28:1 (was .40 = 3.77 FAIL)
   ========================================================= */

body.is-enka,
.ek-page {
  /* ── 1. Kleuren: semantische rollen ───────────────────── */
  /* Surface */
  --ek-surface:            #ffffff;
  --ek-surface-hover:      #f6f6f6;
  --ek-surface-raised:     #ffffff;   /* gebruik met --ek-shadow-* */
  --ek-surface-sunken:     #ececec;   /* vervangt #ececec/#e8e8e8/#ddd drift */
  --ek-surface-dark:       #0a0a0a;   /* donkere secties: topbar, hero, footer, cta */

  /* Border */
  --ek-border-subtle:      rgba(10,10,10,.06);
  --ek-border:             rgba(10,10,10,.10);  /* vervangt .08/.12 drift */
  --ek-border-strong:      rgba(10,10,10,.16);  /* vervangt .14/.18 drift */

  /* Text */
  --ek-text:               #0a0a0a;   /* vervangt #000/#000000/#111 drift */
  --ek-text-hover:         #000000;
  --ek-text-muted:         #6a6a6a;
  --ek-text-muted-2:       #767676;   /* AA-fix: was #9a9a9a (2.81:1) */

  /* Primary (ENKA = monochroom zwart; base #1a1a1a, hover donkerder) */
  --ek-primary:            #1a1a1a;
  --ek-primary-hover:      #0a0a0a;
  --ek-primary-subtle:     rgba(10,10,10,.06);
  --ek-on-primary:         #ffffff;

  /* Status */
  --ek-success:            #1a7f4b;
  --ek-success-hover:      #14663c;
  --ek-success-subtle:     #edf7f1;
  --ek-on-success:         #ffffff;

  --ek-warning:            #8a5b00;
  --ek-warning-hover:      #6f4900;
  --ek-warning-subtle:     #f9f1e0;
  --ek-on-warning:         #ffffff;

  --ek-danger:             #c83232;
  --ek-danger-hover:       #a32626;
  --ek-danger-subtle:      #faecec;   /* vervangt #f0d0d0 */
  --ek-on-danger:          #ffffff;

  --ek-info:               #22618e;
  --ek-info-hover:         #1b4e73;
  --ek-info-subtle:        #e8f0f7;
  --ek-on-info:            #ffffff;

  /* Scrims (foto-overlays donkere secties) */
  --ek-scrim:              rgba(10,10,10,.55);
  --ek-scrim-strong:       rgba(10,10,10,.80);

  /* Externe merkkleuren (functioneel, geen skin) */
  --ek-whatsapp:           #25d366;
  --ek-ideal:              #cc0066;

  /* ── 2. Inverse: tokens voor donkere secties ──────────── */
  --ek-on-dark:            #ffffff;
  --ek-on-dark-muted:      rgba(255,255,255,.65);
  --ek-on-dark-muted-2:    rgba(255,255,255,.55); /* AA-fix: was .40 (3.77:1) */
  --ek-on-dark-line:       rgba(255,255,255,.10);

  /* ── 3. Spacing: 4px-schaal ───────────────────────────── */
  --ek-sp-1:  4px;
  --ek-sp-2:  8px;
  --ek-sp-3:  12px;
  --ek-sp-4:  16px;
  --ek-sp-5:  24px;
  --ek-sp-6:  32px;
  --ek-sp-7:  48px;
  --ek-sp-8:  64px;

  /* Sectie-ritme, op de 4px-schaal (was 88px/56px off-grid) */
  --ek-sec:     var(--ek-sp-8);
  --ek-sec-sm:  var(--ek-sp-7);

  /* ── 4. Typografie ────────────────────────────────────── */
  --ek-font:         'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ek-font-display: 'Barlow Condensed', 'Arial Black', Arial, sans-serif;

  /* Schaal, ratio 1.2 (basis 1rem = 16px) */
  --ek-fs-xs:    .694rem;   /* ~11.1px - vervangt 9-11px drift */
  --ek-fs-sm:    .833rem;   /* ~13.3px - vervangt 12-13.5px drift */
  --ek-fs-base:  1rem;      /* 16px */
  --ek-fs-lg:    1.2rem;    /* ~19.2px */
  --ek-fs-xl:    1.44rem;   /* ~23px */

  /* Koppen: fluid via clamp (alleen h1-h3) */
  --ek-fs-h1:  clamp(2.074rem, 1.5rem + 2.5vw, 2.986rem);
  --ek-fs-h2:  clamp(1.728rem, 1.35rem + 1.6vw, 2.488rem);
  --ek-fs-h3:  clamp(1.44rem, 1.2rem + 1vw, 2.074rem);

  --ek-lh-body:    1.5;
  --ek-lh-heading: 1.2;

  /* ── 5a. Radius: 3 stappen + pill ─────────────────────── */
  --ek-r-sm:   2px;
  --ek-r:      4px;
  --ek-r-lg:   8px;
  --ek-r-pill: 999px;

  /* ── 5b. Elevation: 3 niveaus ─────────────────────────── */
  --ek-shadow-sm:      0 1px 2px rgba(10,10,10,.04), 0 2px 6px rgba(10,10,10,.04);
  --ek-shadow-md:      0 4px 10px rgba(10,10,10,.06), 0 12px 28px rgba(10,10,10,.06);
  --ek-shadow-lg:      0 10px 24px rgba(10,10,10,.08), 0 24px 56px rgba(10,10,10,.08);
  /* Contextvarianten van sm/md voor donkere secties (geen extra niveau) */
  --ek-shadow-dark-sm: 0 2px 8px rgba(0,0,0,.20);
  --ek-shadow-dark-md: 0 14px 36px rgba(0,0,0,.30);

  /* ── 5c. Motion: 2 duraties + 1 easing ────────────────── */
  --ek-dur-fast:  120ms;
  --ek-dur:       200ms;
  --ek-ease:      cubic-bezier(.2,.8,.2,1);

  /* ── 6. Legacy aliases (niet gebruiken in nieuwe code) ── */
  --ek-ink:        var(--ek-text);
  --ek-ink-2:      var(--ek-primary);
  --ek-muted:      var(--ek-text-muted);
  --ek-muted-2:    var(--ek-text-muted-2);
  --ek-surface-2:  var(--ek-surface-hover);
  --ek-surface-3:  var(--ek-surface-sunken);
  --ek-line:       var(--ek-border);
  --ek-line-2:     var(--ek-border-strong);
  --ek-r-md:       var(--ek-r-lg);  /* was ongedefinieerd (fallback 12px in products.css) */
}

/* ── 7. Bootstrap 5.3 mapping ─────────────────────────────
   Alleen op body.is-enka zodat Bootstrap-componenten de
   ENKA-skin automatisch erven. .ek-page niet nodig: Bootstrap
   leest deze vars op :root/body-niveau. */
body.is-enka {
  --bs-body-bg:              var(--ek-surface);
  --bs-body-color:           var(--ek-text);
  --bs-emphasis-color:       var(--ek-text);
  --bs-secondary-color:      var(--ek-text-muted);
  --bs-tertiary-bg:          var(--ek-surface-hover);
  --bs-secondary-bg:         var(--ek-surface-sunken);
  --bs-border-color:         var(--ek-border);
  --bs-heading-color:        var(--ek-text);

  --bs-body-font-family:     var(--ek-font);
  --bs-body-line-height:     var(--ek-lh-body);

  --bs-border-radius-sm:     var(--ek-r-sm);
  --bs-border-radius:        var(--ek-r);
  --bs-border-radius-lg:     var(--ek-r-lg);
  --bs-border-radius-pill:   var(--ek-r-pill);

  --bs-primary:              #1a1a1a;
  --bs-primary-rgb:          26, 26, 26;
  --bs-primary-bg-subtle:    var(--ek-surface-hover);
  --bs-primary-border-subtle: var(--ek-border-strong);
  --bs-primary-text-emphasis: var(--ek-text);
  --bs-focus-ring-color:     var(--ek-border-strong);

  --bs-success:              #1a7f4b;
  --bs-success-rgb:          26, 127, 75;
  --bs-success-bg-subtle:    var(--ek-success-subtle);
  --bs-success-text-emphasis: var(--ek-success-hover);

  --bs-warning:              #8a5b00;
  --bs-warning-rgb:          138, 91, 0;
  --bs-warning-bg-subtle:    var(--ek-warning-subtle);
  --bs-warning-text-emphasis: var(--ek-warning-hover);

  --bs-danger:               #c83232;
  --bs-danger-rgb:           200, 50, 50;
  --bs-danger-bg-subtle:     var(--ek-danger-subtle);
  --bs-danger-text-emphasis: var(--ek-danger-hover);

  --bs-info:                 #22618e;
  --bs-info-rgb:             34, 97, 142;
  --bs-info-bg-subtle:       var(--ek-info-subtle);
  --bs-info-text-emphasis:   var(--ek-info-hover);

  --bs-link-color:           var(--ek-primary);
  --bs-link-color-rgb:       26, 26, 26;
  --bs-link-hover-color:     var(--ek-primary-hover);
  --bs-link-hover-color-rgb: 10, 10, 10;
}

 /* v-param: @imports zonder versie blijven in browsercache hangen */

/* 2) Layout, sections, typografie */

/* ---- @import /assets/css/enka/base.css ---- */
/* =========================================================
   base.css - Layout, sections, headings, kicker, section-link
   ========================================================= */

.ek-page {
  font-family: var(--ek-font);
  color: var(--ek-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ek-page *, .ek-page *::before, .ek-page *::after { box-sizing: border-box; }
.ek-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--ek-sp-5); }

/* ── Section layout (mobile-first) ────────────────────────────────────────── */
.ek-sec { padding: var(--ek-sec-sm) 0; }
.ek-sec--white { background: var(--ek-surface); }
.ek-sec--gray  { background: var(--ek-surface-2); }
@media (min-width: 768px) { .ek-sec { padding: var(--ek-sec) 0; } }

.ek-sec-head { margin-bottom: var(--ek-sp-6); }
@media (min-width: 768px) { .ek-sec-head { margin-bottom: var(--ek-sp-7); } }

/* ── Section "view all" link ──────────────────────────────────────────────── */
.ek-section-link {
  display: inline-flex; align-items: center; gap: var(--ek-sp-2);
  color: var(--ek-ink-2);
  font-size: var(--ek-fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  padding: var(--ek-sp-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease);
}
.ek-section-link i {
  transition: transform var(--ek-dur) var(--ek-ease);
  font-size: var(--ek-fs-xs);
}
.ek-section-link:hover {
  color: var(--ek-ink);
  border-bottom-color: var(--ek-ink-2);
}
.ek-section-link:hover i { transform: translateX(4px); }

/* ── Kicker ───────────────────────────────────────────────────────────────── */
.ek-kicker {
  display: inline-flex; align-items: center; gap: var(--ek-sp-3);
  font-size: var(--ek-fs-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ek-muted);
  margin-bottom: var(--ek-sp-3);
}
.ek-kicker::before {
  content: ''; display: inline-block;
  width: 32px; height: 1px;
  background: var(--ek-ink-2);
}
.ek-kicker--light { color: var(--ek-on-dark-muted); }
.ek-kicker--light::before { background: var(--ek-on-dark); }

/* ── Section heading ──────────────────────────────────────────────────────── */
.ek-h2 {
  font-family: var(--ek-font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 900;
  color: var(--ek-ink-2);
  line-height: .95;
  letter-spacing: -.015em;
  margin: 0;
}

.ek-sec-lead {
  font-size: var(--ek-fs-base);
  color: var(--ek-muted);
  line-height: 1.65;
  max-width: 520px;
  margin: var(--ek-sp-4) 0 0;
}



/* 3) UI primitives */

/* ---- @import /assets/css/enka/buttons.css ---- */
/* =========================================================
   buttons.css - .ek-btn + alle varianten
   Stijl: premium, strak, geen accent kleur (zwart/wit/grijs).
   ========================================================= */

.ek-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-3) var(--ek-sp-5);
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ek-r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ek-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease),
              opacity var(--ek-dur-fast) var(--ek-ease);
}
.ek-btn i { font-size: var(--ek-fs-xs); }

/* Primary - white-on-dark (op donkere achtergronden) */
.ek-btn-white {
  background: var(--ek-on-dark);
  color: var(--ek-ink);
  border-color: var(--ek-on-dark);
}
.ek-btn-white:hover {
  background: var(--ek-ink);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink);
}

/* Ghost - voor donkere achtergrond */
.ek-btn-ghost {
  background: transparent;
  color: var(--ek-on-dark);
  border-color: var(--ek-on-dark-muted-2);
}
.ek-btn-ghost:hover {
  border-color: var(--ek-on-dark);
  color: var(--ek-on-dark);
}

/* Dark - primary op lichte achtergrond */
.ek-btn-dark {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
.ek-btn-dark:hover {
  background: var(--ek-ink);
  border-color: var(--ek-ink);
}

/* Outline - secondary op lichte achtergrond */
.ek-btn-outline {
  background: transparent;
  color: var(--ek-ink-2);
  border-color: var(--ek-line-2);
}
.ek-btn-outline:hover {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}

/* Full-width binnen flex/grid container */
.ek-btn-block {
  width: 100%;
  justify-content: space-between;
}



/* 4) Homepage componenten (enka.php) */

/* ---- @import /assets/css/enka/hero.css ---- */
/* =========================================================
   hero.css - .ek-hero
   Premium: ruime spacing, rustige typografie, subtiele overlay
   voor leesbaarheid van tekst op foto (geen decoratie).
   ========================================================= */

.ek-hero {
  position: relative;
  min-height: 440px;
  background: var(--ek-ink);
  overflow: hidden;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) { .ek-hero { min-height: 520px; } }

.ek-hero-bg {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  display: block;
  opacity: .55;
  filter: grayscale(.15) contrast(1.05);
  transition: opacity var(--ek-dur) var(--ek-ease),
              transform 14s ease-out;
  animation: ek-hero-kenburns 22s ease-in-out infinite alternate;
}
@keyframes ek-hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Functionele overlay voor tekst-leesbaarheid op foto */
.ek-hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: var(--ek-scrim-strong);
}
@media (min-width: 768px) {
  .ek-hero-overlay { background: var(--ek-scrim); }
}

.ek-hero-inner {
  position: relative; z-index: 3;
  width: 100%;
  padding: var(--ek-sp-7) 0;
}
@media (min-width: 768px) { .ek-hero-inner { padding: var(--ek-sp-8) 0; } }

.ek-hero-badge {
  display: inline-flex; align-items: center; gap: var(--ek-sp-2);
  color: var(--ek-on-dark);
  font-size: var(--ek-fs-xs); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: var(--ek-sp-5);
}
.ek-hero-badge::before {
  content: ''; display: inline-block;
  width: 32px; height: 1px;
  background: var(--ek-on-dark-muted-2);
}
.ek-hero-badge i {
  color: var(--ek-on-dark-muted-2);
  font-size: var(--ek-fs-xs);
}

.ek-hero-h1 {
  font-family: var(--ek-font-display);
  font-size: clamp(44px, 6.8vw, 84px);
  font-weight: 900;
  color: var(--ek-on-dark);
  line-height: .94;
  letter-spacing: -.02em;
  margin: 0 0 var(--ek-sp-5);
  max-width: 820px;
}
.ek-hero-h1 em {
  font-style: normal;
  color: var(--ek-on-dark-muted-2);
}

.ek-hero-sub {
  font-size: var(--ek-fs-base);
  color: var(--ek-on-dark-muted);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 0 var(--ek-sp-6);
  font-weight: 400;
}

.ek-hero-actions {
  display: flex;
  gap: var(--ek-sp-3);
  flex-wrap: wrap;
}



/* ---- @import /assets/css/enka/ticker.css ---- */
/* =========================================================
   ticker.css - .ek-ticker (lopende USP banner)
   ========================================================= */

.ek-ticker {
  background: var(--ek-ink);
  overflow: hidden;
  padding: var(--ek-sp-3) 0;
  border-top: 1px solid var(--ek-on-dark-line);
  white-space: nowrap;
}
.ek-ticker-track {
  display: inline-flex;
  animation: ek-tick 38s linear infinite;
}
.ek-ticker-track:hover { animation-play-state: paused; }

.ek-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  color: var(--ek-on-dark-muted);
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 var(--ek-sp-6);
}
.ek-ticker-item i {
  color: var(--ek-on-dark-muted-2);
  font-size: 6px;
}

@keyframes ek-tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



/* ---- @import /assets/css/enka/usp.css ---- */
/* =========================================================
   usp.css - .ek-usps service bar (gratis levering, etc.)
   ========================================================= */

.ek-usps {
  background: var(--ek-surface);
  border-bottom: 1px solid var(--ek-line);
  padding: var(--ek-sp-5) 0;
}

.ek-usps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 768px) {
  .ek-usps-grid { grid-template-columns: repeat(4, 1fr); }
}

.ek-usp {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-3) var(--ek-sp-4);
  position: relative;
}
.ek-usp:nth-child(odd) { border-right: 1px solid var(--ek-line); }
.ek-usp:nth-child(-n+2) {
  border-bottom: 1px solid var(--ek-line);
  padding-bottom: var(--ek-sp-4);
}
.ek-usp:nth-child(n+3) { padding-top: var(--ek-sp-4); }
@media (min-width: 768px) {
  .ek-usp,
  .ek-usp:nth-child(-n+2),
  .ek-usp:nth-child(n+3) {
    padding: var(--ek-sp-2) var(--ek-sp-5);
    border-bottom: none;
  }
  .ek-usp:nth-child(odd) { border-right: none; }
  .ek-usp:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 12px; bottom: 12px;
    width: 1px;
    background: var(--ek-line);
  }
}

.ek-usp-icon {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--ek-fs-lg);
  color: var(--ek-ink-2);
}
.ek-usp-label {
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  color: var(--ek-ink-2);
  line-height: 1.3;
  letter-spacing: .01em;
}
.ek-usp-sub {
  font-size: var(--ek-fs-xs);
  color: var(--ek-muted);
  margin-top: var(--ek-sp-1);
  line-height: 1.4;
}



/* ---- @import /assets/css/enka/products.css ---- */
/* =========================================================
   products.css - .ek-prods grid + .ek-prod cards
   Premium: cleane kaarten met soft shadow, geen harde
   borders, geen glassmorphism.
   ========================================================= */

/* ── Editorial split layout (header links, grid rechts) ───────────────────── */
.ek-prods-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ek-sp-5);
  align-items: start;
}
@media (min-width: 992px) {
  .ek-prods-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--ek-sp-6);
  }
}
@media (min-width: 1200px) {
  .ek-prods-layout {
    grid-template-columns: 240px 1fr;
    gap: var(--ek-sp-7);
  }
}

.ek-prods-aside {
  position: static;
  padding-right: 0;
  text-align: left;
  max-width: 560px;
}
@media (min-width: 992px) {
  .ek-prods-aside {
    position: sticky;
    top: 110px;
    padding-right: var(--ek-sp-3);
    max-width: none;
  }
}
.ek-prods-aside .ek-kicker { margin-bottom: var(--ek-sp-3); }
.ek-prods-aside .ek-h2 {
  font-size: clamp(var(--ek-fs-xl), 2.6vw, 32px);
  margin: 0 0 var(--ek-sp-3);
}
.ek-prods-aside .ek-sec-lead {
  margin: 0 0 var(--ek-sp-4);
  max-width: 100%;
  font-size: .92rem;
}
.ek-prods-aside-cta { display: inline-flex; }

/* ── Product grid (responsive: 4 desktop / 3 tablet / 2 mobile) ───────────── */
.ek-prods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ek-sp-2);
}
@media (min-width: 576px)  { .ek-prods { gap: var(--ek-sp-3); } }
@media (min-width: 768px)  { .ek-prods { grid-template-columns: repeat(3, 1fr); gap: var(--ek-sp-4); } }
@media (min-width: 1200px) { .ek-prods { grid-template-columns: repeat(4, 1fr); } }

/* Query haalt altijd 8 producten op zodat desktop (4 koloms) 2 volle rijen
   krijgt. Op tablet en mobile verbergen we de laatste 2 cards zodat de
   onderste rij niet half gevuld is. */
.ek-prods > .ek-prod:nth-child(n+7) { display: none; }
@media (min-width: 1200px) {
  .ek-prods > .ek-prod:nth-child(n+7) { display: flex; }
}

/* ── Productkaart (compacter) ─────────────────────────────────────────────── */
.ek-prod {
  background: var(--ek-surface);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Was transparent. Op de secties met een witte achtergrond viel de kaart
     daardoor volledig weg tegen de sectie: witte kaart op wit, geen rand. De
     rij producten oogde daar ongestructureerd terwijl dezelfde rij op een
     grijze sectie wel als kaarten las. Bij hover wordt de rand sterker. */
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-r-md);
  overflow: hidden;
  transition: box-shadow var(--ek-dur) var(--ek-ease),
              transform var(--ek-dur) var(--ek-ease),
              border-color var(--ek-dur) var(--ek-ease);
}
.ek-prod:hover {
  box-shadow: var(--ek-shadow-md);
  transform: translateY(-2px);
  /* De rustrand is nu --ek-line; hover moet daar zichtbaar bovenuit komen. */
  border-color: var(--ek-line-2);
}

.ek-prod-img {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ek-surface-2);
  position: relative;
  flex-shrink: 0;
  display: block;
  cursor: pointer;
}
.ek-prod-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .9s var(--ek-ease);
}
.ek-prod:hover .ek-prod-img img { transform: scale(1.04); }

/* NEW badge */
.ek-prod-new {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: var(--ek-sp-1) var(--ek-sp-2);
  border-radius: var(--ek-r-sm);
}

/* ── Productkaart-acties (wishlist + quick view) ──────────────────────────── */
.ek-prod-actions {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-1);
  opacity: 1;
  transform: none;
  transition: opacity var(--ek-dur) var(--ek-ease),
              transform var(--ek-dur) var(--ek-ease);
  pointer-events: auto;
}
@media (min-width: 992px) {
  .ek-prod-actions {
    opacity: 0;
    transform: translateX(6px);
    pointer-events: none;
  }
  .ek-prod:hover .ek-prod-actions {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
}

/* Mobiel altijd zichtbaar -> touch target >=44px; desktop hover-reveal compacter */
.ek-prod-action {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-on-dark);
  border: 1px solid var(--ek-line);
  border-radius: 50%;
  color: var(--ek-ink-2);
  font-size: var(--ek-fs-sm);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--ek-shadow-sm);
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease);
}
.ek-prod-action:hover {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
.ek-prod-action.is-active {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
.ek-prod-action.is-active i { font-weight: 900; }
@media (min-width: 992px) {
  .ek-prod-action { width: 30px; height: 30px; }
}

/* ── Productkaart body (compact) ──────────────────────────────────────────── */
.ek-prod-body {
  padding: var(--ek-sp-3) var(--ek-sp-3) var(--ek-sp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
  background: var(--ek-surface);
}
@media (min-width: 768px) { .ek-prod-body { padding: var(--ek-sp-4) var(--ek-sp-4) var(--ek-sp-4); gap: var(--ek-sp-2); } }

.ek-prod-name {
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  color: var(--ek-ink-2);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
@media (min-width: 768px) { .ek-prod-name { min-height: 38px; } }

.ek-prod-meta {
  display: flex;
  align-items: baseline;
  gap: var(--ek-sp-2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: 0;
}
.ek-prod-price {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 900;
  color: var(--ek-ink-2);
  letter-spacing: -.01em;
  line-height: 1.1;
}

.ek-prod-vars {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  color: var(--ek-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ek-prod-price-vat {
  font-size: var(--ek-fs-xs);
  font-weight: 500;
  color: var(--ek-muted);
  letter-spacing: .02em;
  text-transform: lowercase;
  margin-left: var(--ek-sp-1);
}

/* ── Kleur swatches (kleiner) ─────────────────────────────────────────────── */
.ek-prod-colors {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-1);
  margin: 0;
  flex-wrap: wrap;
}
.ek-prod-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--ek-line);
  display: inline-block;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--ek-on-dark);
  transition: transform var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease);
}
.ek-prod-swatch:hover {
  transform: scale(1.15);
  border-color: var(--ek-ink-2);
}
.ek-prod-swatch-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 var(--ek-sp-2);
  border-radius: var(--ek-r-lg);
  border: 1px solid var(--ek-line-2);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  color: var(--ek-ink-2);
  background: var(--ek-on-dark);
  text-decoration: none;
  letter-spacing: .02em;
  transition: border-color var(--ek-dur-fast) var(--ek-ease),
              background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease);
}
.ek-prod-swatch-more:hover {
  border-color: var(--ek-ink-2);
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

.ek-prod-name-link { color: inherit; text-decoration: none; }
.ek-prod-name-link:hover .ek-prod-name { color: var(--ek-ink); }

/* ── Bottom-link 'Bekijk product' weg op compact kaartje (subtieler) ──────── */
.ek-prod-link { display: none; }



/* ---- @import /assets/css/enka/banner.css ---- */
/* =========================================================
   banner.css - .ek-banner editorial showroom banner
   Premium: 2-koloms layout, foto rechts, tekst links,
   geen extra effecten.
   ========================================================= */

.ek-banner {
  background: var(--ek-ink);
  overflow: hidden;
  position: relative;
  padding: 0;
}
@media (min-width: 768px) { .ek-banner { padding: var(--ek-sp-8) 0; } }

.ek-banner-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: auto;
  border-radius: 0;
  overflow: hidden;
}
@media (min-width: 992px) {
  .ek-banner-grid {
    grid-template-columns: 1fr 1fr;
    min-height: 380px;
    border-radius: var(--ek-r-lg);
  }
}

.ek-banner-text {
  padding: var(--ek-sp-7) var(--ek-sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ek-ink);
}
@media (min-width: 576px)  { .ek-banner-text { padding: var(--ek-sp-7) var(--ek-sp-6); } }
@media (min-width: 1200px) { .ek-banner-text { padding: var(--ek-sp-8); } }

.ek-banner-h2 {
  font-family: var(--ek-font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900;
  color: var(--ek-on-dark);
  line-height: .95;
  letter-spacing: -.015em;
  margin: var(--ek-sp-3) 0 var(--ek-sp-4);
  max-width: 480px;
}
.ek-banner-sub {
  font-size: var(--ek-fs-base);
  color: var(--ek-on-dark-muted);
  line-height: 1.7;
  max-width: 440px;
  margin: 0 0 var(--ek-sp-5);
}
.ek-banner-actions {
  display: flex;
  gap: var(--ek-sp-2);
  flex-wrap: wrap;
}

.ek-banner-visual {
  position: relative;
  background: var(--ek-ink-2);
  min-height: 260px;
  overflow: hidden;
}
.ek-banner-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* De bannerbeelden zijn 2042x530 (3.85:1) en zitten hier in een vak van
     ongeveer 1.6:1. Met object-position:center viel het onderwerp buiten beeld
     en zag je alleen het donkere patroon dat links in de afbeelding is
     ingebakken. Rechts uitlijnen zet het showroomrek wel in beeld. */
  object-position: 88% 50%;
  transition: transform 1s var(--ek-ease);
}
.ek-banner:hover .ek-banner-visual img { transform: scale(1.03); }



/* ---- @import /assets/css/enka/lookbook.css ---- */
/* =========================================================
   lookbook.css - .ek-lookbook-grid + cards (showroom mockups)
   Premium: rustige donkere cards met gescheiden body sectie.
   ========================================================= */

.ek-lookbook-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ek-sp-4);
}
@media (min-width: 576px) {
  .ek-lookbook-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ek-lookbook-grid { grid-template-columns: repeat(4, 1fr); }
}

.ek-lookbook-card {
  position: relative;
  display: block;
  background: var(--ek-ink);
  text-decoration: none;
  border-radius: var(--ek-r-lg);
  overflow: hidden;
  box-shadow: var(--ek-shadow-sm);
  transition: transform var(--ek-dur) var(--ek-ease),
              box-shadow var(--ek-dur) var(--ek-ease);
}
.ek-lookbook-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ek-shadow-lg);
}

.ek-lookbook-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ek-ink);
  position: relative;
}
.ek-lookbook-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1s var(--ek-ease);
}
.ek-lookbook-card:hover .ek-lookbook-img img { transform: scale(1.03); }

.ek-lookbook-body {
  padding: var(--ek-sp-5) var(--ek-sp-5) var(--ek-sp-5);
  background: var(--ek-ink);
  border-top: 1px solid var(--ek-on-dark-line);
}
.ek-lookbook-title {
  font-family: var(--ek-font-display);
  font-size: clamp(var(--ek-fs-xl), 2vw, 28px);
  font-weight: 900;
  color: var(--ek-on-dark);
  margin: 0 0 var(--ek-sp-2);
  letter-spacing: -.01em;
  line-height: 1.05;
}
.ek-lookbook-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-on-dark-muted);
  transition: color var(--ek-dur-fast) var(--ek-ease);
}
.ek-lookbook-cta i {
  transition: transform var(--ek-dur) var(--ek-ease);
  font-size: var(--ek-fs-xs);
}
.ek-lookbook-card:hover .ek-lookbook-cta { color: var(--ek-on-dark); }
.ek-lookbook-card:hover .ek-lookbook-cta i { transform: translateX(4px); }



/* ---- @import /assets/css/enka/cta.css ---- */
/* =========================================================
   cta.css - .ek-cta onderaan de pagina (contact)
   Split layout: tekst links, knoppen rechts verticaal gestapeld.
   ========================================================= */

.ek-cta {
  background: var(--ek-surface);
  border-top: 1px solid var(--ek-line);
  padding: var(--ek-sp-8) 0;
  position: relative;
  overflow: hidden;
}

.ek-cta-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ek-sp-6);
  align-items: center;
  position: relative;
}
@media (min-width: 992px) {
  .ek-cta-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--ek-sp-8);
  }
}

.ek-cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-3);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ek-muted);
  margin-bottom: var(--ek-sp-4);
}
.ek-cta-kicker::before {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--ek-ink-2);
}

.ek-cta-h2 {
  font-family: var(--ek-font-display);
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 900;
  color: var(--ek-ink-2);
  line-height: .95;
  margin: 0 0 var(--ek-sp-4);
  letter-spacing: -.02em;
}
.ek-cta-sub {
  font-size: var(--ek-fs-base);
  color: var(--ek-muted);
  max-width: 520px;
  line-height: 1.7;
  margin: 0;
}

.ek-cta-btns {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
  min-width: 0;
}
@media (min-width: 576px) {
  .ek-cta-btns { min-width: 260px; }
}



/* 5) Globale Enka componenten */

/* ---- @import /assets/css/enka/menu.css ---- */
/* =========================================================
   menu.css - Enka navigation + mega-menu + account-strip
   Premium: clean wit menu met onderline underline op hover,
   geen gradients of glassmorphism in dropdowns.
   ========================================================= */

/* ── Hoofd-navigatie ──────────────────────────────────────────────────────── */
.enka-nav-wrap {
    background: var(--ek-surface);
    border-top: 1px solid var(--ek-line);
    border-bottom: 1px solid var(--ek-line);
    position: relative;
    z-index: 50;
}
.enka-nav-row {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 54px;
    overflow: visible;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: var(--ek-sp-1);
}
.enka-nav-row::-webkit-scrollbar { display: none; }

.enka-nav-item {
    position: static;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
}

/* Mobile-first: horizontaal scrollbaar en compact; vanaf 1200px past alles,
   vanaf 1400px ruime spacing (376px overflow op 1024px was het probleem). */
@media (min-width: 1200px) {
    .enka-nav-row { overflow-x: visible; }
    .enka-nav-item { flex-shrink: 1; }
}

/* De scrollbar staat hierboven bewust uit, maar daardoor zag je op 992-1199px
   alleen een half afgekapt "Wandpanelen" en niet dat het menu te vegen is.
   Deze fade zet dat om in een leesbaar signaal. Overlay, geen mask: een mask op
   .enka-nav-row zou het mega-menu meeknippen. */
@media (max-width: 1199.98px) {
    .enka-nav-wrap::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 40px;
        background: linear-gradient(to right, rgba(255,255,255,0), var(--ek-surface) 78%);
        pointer-events: none;
        z-index: 2;
    }
}
@media (min-width: 1400px) {
    .enka-nav-link { padding: 0 var(--ek-sp-4); letter-spacing: .08em; }
}

.enka-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: 0 var(--ek-sp-3);
    font-size: var(--ek-fs-sm);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    position: relative;
    transition: color var(--ek-dur-fast) var(--ek-ease);
}
.enka-nav-link::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: 0;
    height: 2px;
    background: var(--ek-ink-2);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ek-dur) var(--ek-ease);
}
.enka-nav-link:hover { color: var(--ek-ink); }
.enka-nav-link:hover::after,
.enka-nav-item:hover .enka-nav-link::after,
.enka-nav-link.is-active::after { transform: scaleX(1); }

.enka-caret {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .35;
    margin-left: var(--ek-sp-1);
    flex-shrink: 0;
    transition: opacity var(--ek-dur-fast) var(--ek-ease),
                transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-nav-item:hover .enka-caret {
    opacity: .8;
    transform: rotate(180deg);
}

/* ── Dropdown panel ───────────────────────────────────────────────────────── */
.enka-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    width: 100%;
    background: var(--ek-surface);
    border-top: 1px solid var(--ek-line);
    box-shadow: var(--ek-shadow-md);
    z-index: 200;
    animation: enka-fade var(--ek-dur-fast) var(--ek-ease);
}
@keyframes enka-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.enka-drop-inner {
    padding: var(--ek-sp-6) 0 var(--ek-sp-6);
    min-height: 280px;
    /* Volgt --container-max zodat het aligneert met de top-nav. */
}
.enka-nav-item:hover .enka-drop,
.enka-nav-item:focus-within .enka-drop { display: block; }

/* ── Mega menu grid ───────────────────────────────────────────────────────── */
.enka-mega-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ek-sp-7);
    align-items: stretch;
}
@media (min-width: 992px) {
    .enka-mega-grid { grid-template-columns: 1fr 280px; }
}

/* CSS Grid met flexibele kolombreedte. Links-naar-rechts leesvolgorde,
   geen rare strekkingen bij ongelijke blok-hoogtes. */
.enka-mega-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ek-sp-6) var(--ek-sp-6);
    align-items: start;
}
@media (min-width: 576px) {
    .enka-mega-cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.enka-mega-col { min-width: 0; }
.enka-mega-col-leaf .enka-mega-head { color: var(--ek-muted); }

.enka-mega-head {
    display: block;
    font-size: var(--ek-fs-sm);
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--ek-ink-2);
    text-decoration: none;
    padding-bottom: var(--ek-sp-2);
    margin-bottom: var(--ek-sp-2);
    border-bottom: 1px solid var(--ek-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enka-mega-head:hover { color: var(--ek-ink); }

.enka-mega-item {
    display: block;
    padding: var(--ek-sp-2) 0;
    font-size: var(--ek-fs-sm);
    color: var(--ek-muted);
    text-decoration: none;
    transition: color var(--ek-dur-fast) var(--ek-ease),
                padding-left var(--ek-dur-fast) var(--ek-ease);
    line-height: 1.5;
}
.enka-mega-item:hover {
    color: var(--ek-ink);
    padding-left: var(--ek-sp-1);
}

.enka-mega-viewall {
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    margin-top: var(--ek-sp-3);
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    text-decoration: none;
    transition: gap var(--ek-dur-fast) var(--ek-ease);
}
.enka-mega-viewall::after {
    content: '\2192';
    font-size: var(--ek-fs-sm);
    transition: transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-mega-viewall:hover { color: var(--ek-ink); }
.enka-mega-viewall:hover::after { transform: translateX(3px); }

/* ── Mega-menu featured side panel (geen gradient, solid grijs) ───────────── */
.enka-mega-aside {
    background: var(--ek-surface-2);
    border: 1px solid var(--ek-line);
    border-radius: var(--ek-r-lg);
    padding: var(--ek-sp-6) var(--ek-sp-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    position: relative;
    overflow: hidden;
}
.enka-mega-aside-kicker {
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    margin-bottom: var(--ek-sp-2);
    position: relative;
}
.enka-mega-aside-title {
    font-family: var(--ek-font-display);
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--ek-ink-2);
    margin: 0 0 var(--ek-sp-2);
    letter-spacing: -.01em;
    position: relative;
}
.enka-mega-aside-text {
    font-size: var(--ek-fs-sm);
    color: var(--ek-muted);
    line-height: 1.6;
    margin: 0 0 var(--ek-sp-4);
    position: relative;
}
.enka-mega-aside-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    align-self: flex-start;
    padding: var(--ek-sp-2) var(--ek-sp-4);
    background: var(--ek-ink-2);
    color: var(--ek-on-dark);
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--ek-r);
    position: relative;
    transition: background var(--ek-dur-fast) var(--ek-ease),
                transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-mega-aside-cta:hover {
    background: var(--ek-ink);
    color: var(--ek-on-dark);
    transform: translateX(2px);
}

/* ── Mobile menu ──────────────────────────────────────────────────────────── */
.enka-mob-header {
    font-family: var(--ek-font-display);
    font-size: var(--ek-fs-xl);
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.enka-mob-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ek-sp-4) var(--ek-sp-5);
    font-size: var(--ek-fs-sm);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ek-line);
    cursor: pointer;
    font-family: inherit;
    color: var(--ek-ink-2);
    transition: background var(--ek-dur-fast) var(--ek-ease);
}
.enka-mob-toggle:hover { background: var(--ek-surface-2); }
.enka-mob-toggle svg {
    transition: transform var(--ek-dur-fast) var(--ek-ease);
    flex-shrink: 0;
    opacity: .5;
}
.enka-mob-toggle.is-open {
    background: var(--ek-surface-2);
}
.enka-mob-toggle.is-open svg {
    transform: rotate(180deg);
    opacity: 1;
}
.enka-mob-subs {
    display: none;
    background: var(--ek-surface-2);
    padding: var(--ek-sp-2) 0;
}
.enka-mob-subs.is-open { display: block; }
.enka-mob-sub {
    display: block;
    padding: var(--ek-sp-3) var(--ek-sp-6);
    font-size: var(--ek-fs-sm);
    color: var(--ek-muted);
    text-decoration: none;
    transition: background var(--ek-dur-fast) var(--ek-ease),
                color var(--ek-dur-fast) var(--ek-ease);
}
.enka-mob-sub:hover {
    color: var(--ek-ink);
    background: var(--ek-surface-3);
}
.enka-mob-viewall {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-3) var(--ek-sp-6);
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    text-decoration: none;
    border-top: 1px solid var(--ek-line);
    margin-top: var(--ek-sp-2);
}
.enka-mob-viewall:hover { color: var(--ek-ink); }

/* ── Account-strip (ingelogd) ─────────────────────────────────────────────── */
.enka-acct-strip {
    background: var(--ek-surface-2);
    border-bottom: 1px solid var(--ek-line);
    padding: var(--ek-sp-2) 0;
}
.enka-acct-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.enka-acct-label {
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ek-ink-2);
    margin-right: var(--ek-sp-4);
    padding: var(--ek-sp-2) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    flex-shrink: 0;
}
.enka-acct-label::before {
    content: '';
    display: inline-block;
    width: 22px; height: 1px;
    background: var(--ek-ink-2);
}
.enka-acct-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-2) var(--ek-sp-4);
    font-size: var(--ek-fs-sm);
    font-weight: 600;
    color: var(--ek-muted);
    text-decoration: none;
    border-radius: var(--ek-r);
    position: relative;
    transition: color var(--ek-dur-fast) var(--ek-ease),
                background var(--ek-dur-fast) var(--ek-ease);
}
.enka-acct-link i {
    font-size: var(--ek-fs-xs);
    opacity: .55;
    transition: opacity var(--ek-dur-fast) var(--ek-ease),
                transform var(--ek-dur-fast) var(--ek-ease);
}
.enka-acct-link:hover {
    color: var(--ek-ink);
    background: var(--ek-surface);
}
.enka-acct-link:hover i {
    opacity: 1;
    transform: scale(1.1);
}

/* Touch targets >=44px op touch-apparaten */
@media (pointer: coarse) {
    .enka-acct-link,
    .enka-mob-sub,
    .enka-nav-link { min-height: 44px; }
}

/* ── Account dropdowns (Shop, Financieel, Settings) ───────────────────────── */
.dl-dd {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
/* Overschrijf ALLE .dl-caret instances op Enka, niet alleen die binnen
 * .dl-dd-toggle. De admin-menu (gerenderd via dutchline-menu.php op Enka voor
 * admin/sales/warehouse) gebruikt .dl-mega-toggle, en zonder deze override
 * krijgen die de blauwe gerotateerde border-square uit header.css - die
 * visueel niet bij de minimalistische Enka-stijl past. */
body.is-enka .dl-caret,
.dl-dd-toggle .dl-caret {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    border-bottom: 0;
    border-radius: 0;
    transform: none;
    margin-left: var(--ek-sp-2);
    opacity: .55;
    vertical-align: middle;
    transition: opacity .15s ease, transform .15s ease;
}
body.is-enka .dl-caret:hover,
body.is-enka .dl-mega.is-open > .dl-mega-toggle .dl-caret,
body.is-enka .dl-dd.is-open > .dl-dd-toggle .dl-caret {
    opacity: .9;
    transform: rotate(180deg);
}
.dl-dd-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--ek-surface);
    border: 1px solid var(--ek-line);
    border-top: 2px solid var(--ek-ink-2);
    box-shadow: var(--ek-shadow-md);
    padding: var(--ek-sp-2);
    display: none;
    z-index: 80;
    border-radius: var(--ek-r);
}
.dl-dd.is-open .dl-dd-menu { display: block; }
.dl-dd-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -10px;
    height: 10px;
}
.dl-dd-item {
    display: block;
    padding: var(--ek-sp-2) var(--ek-sp-4);
    font-size: var(--ek-fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ek-ink-2);
    text-decoration: none;
    border-radius: var(--ek-r-sm);
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
}
.dl-dd-item:hover {
    background: var(--ek-surface-2);
    color: var(--ek-ink);
}
.dl-dd-item.is-active {
    background: var(--ek-surface-2);
    font-weight: 700;
    border-left: 2px solid var(--ek-ink-2);
    padding-left: var(--ek-sp-3);
}

/* ── Mobiel menu: account/gast-blok (voorheen style-attrs in enka-menu.php) ── */
a.enka-mob-toggle { text-decoration: none; }
.enka-mob-caption {
    font-size: var(--ek-fs-xs);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ek-text-muted);
}
.enka-mob-caption--sub  { padding: var(--ek-sp-2) 28px 2px; }
.enka-mob-caption--acct { margin-bottom: var(--ek-sp-2); padding-left: var(--ek-sp-1); }
.enka-mob-sub--indent { padding-left: 36px; }
.enka-mob-sub--strong { font-weight: 700; color: var(--ek-ink); }
.enka-mob-acct {
    padding: var(--ek-sp-4) var(--ek-sp-4) 0;
    border-top: 1px solid var(--ek-border);
    margin-top: var(--ek-sp-3);
}
.enka-mob-acct-link {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-2) var(--ek-sp-1);
    font-size: var(--ek-fs-sm);
    font-weight: 600;
    color: var(--ek-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--ek-border-subtle);
}
.enka-mob-acct-link i { width: 18px; color: var(--ek-text-muted); font-size: var(--ek-fs-sm); }
.enka-mob-logout {
    display: flex;
    align-items: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-4) var(--ek-sp-1) var(--ek-sp-1);
    font-size: var(--ek-fs-sm);
    font-weight: 700;
    color: var(--ek-danger);
    text-decoration: none;
}
.enka-mob-logout i { width: 18px; font-size: var(--ek-fs-sm); }
.enka-mob-guest {
    padding: var(--ek-sp-4) var(--ek-sp-4) 0;
    border-top: 1px solid var(--ek-border);
    margin-top: var(--ek-sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--ek-sp-2);
}
.enka-mob-guest-link { font-size: var(--ek-fs-sm); font-weight: 700; color: var(--ek-ink); text-decoration: none; }
.enka-mob-pwa-wrap { padding: var(--ek-sp-3) var(--ek-sp-4) var(--ek-sp-4); }
.enka-mob-pwa-btn {
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--ek-sp-2);
    padding: var(--ek-sp-2);
    font-size: var(--ek-fs-sm);
    font-weight: 700;
    color: var(--ek-ink);
    background: var(--ek-surface-hover);
    border: 1px solid var(--ek-border);
    border-radius: var(--ek-r-lg);
    cursor: pointer;
}

 /* v-param: @imports zonder versie blijven in browsercache hangen */

/* ---- @import /assets/css/enka/header.css ---- */
/* =========================================================
   enka/header.css
   ---------------------------------------------------------
   Header-styling voor ENKA (APP_LINE=enka).
   Vroeger inline in inc/header.php - hier verplaatst zodat
   header.php geen ~140 regels CSS meer hoeft mee te sturen.
   Waarden lopen via tokens.css (--ek-*); de remap hieronder
   stuurt de gedeelde DutchLine variabelen (--accent, --dl-*).
   Scope MOET body.is-enka zijn (niet :root): var(--ek-*) wordt
   geresolved op het declarerende element en de tokens bestaan
   alleen binnen body.is-enka.
   ========================================================= */

body.is-enka {
  --accent:        var(--ek-text);
  --accent-soft:   var(--ek-primary-subtle);
  --accent-soft2:  var(--ek-border);
  --accent-ink:    var(--ek-on-primary);
  --dl-blue-700:   var(--ek-text);
  --dl-blue-900:   var(--ek-text);
  --dl-nav-bg:     var(--ek-surface);
  --focus:         var(--ek-border-strong);
  --bg:            var(--ek-surface-hover);
  --ink:           var(--ek-text);
}
body.is-enka { font-family: var(--ek-font); }

/* Topbar - dark strip */
.dl-topbar-v4 {
  background: var(--ek-surface-dark);
  border-bottom: none;
}
.dl-topbar-v4 .dl-toplink,
.dl-topbar-v4 .dl-sep { color: var(--ek-on-dark-muted); font-size: var(--ek-fs-sm); }
.dl-topbar-v4 .dl-toplink:hover { color: var(--ek-on-dark); }

/* Brandbar - clean white */
.dl-brandbar-v4 {
  background: var(--ek-surface);
  border-top: none;
  border-bottom: 1px solid var(--ek-border);
  box-shadow: none;
}

/* Logo text fallback */
.enka-text-logo {
  font-family: var(--ek-font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ek-text);
  text-decoration: none;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
}
.enka-text-logo small {
  display: block;
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--ek-text-muted);
  margin-top: 1px;
}

/* Search */
.dl-search-pill {
  border: 1px solid var(--ek-border);
  border-radius: var(--ek-r);
}
.dl-search-btn {
  background: var(--ek-primary);
  color: var(--ek-on-primary);
  border-radius: 0 var(--ek-r) var(--ek-r) 0;
  font-weight: 700;
  font-size: var(--ek-fs-sm);
}
.dl-search-btn:hover { background: var(--ek-primary-hover); }
.dl-search-input:focus {
  border-color: var(--ek-text);
  box-shadow: 0 0 0 2px var(--ek-border);
}

/* Header buttons */
.dl-btn-primary {
  background: var(--ek-primary);
  color: var(--ek-on-primary);
  border-color: var(--ek-primary);
  border-radius: var(--ek-r);
}
.dl-btn-primary:hover { background: var(--ek-primary-hover); border-color: var(--ek-primary-hover); }
.dl-btn-ghost {
  border-color: var(--ek-border);
  color: var(--ek-text);
  border-radius: var(--ek-r);
}
.dl-btn-ghost:hover { background: var(--ek-surface-hover); border-color: var(--ek-border-strong); color: var(--ek-text); }

/* Nav bar */
.dl-nav-v4 {
  background: var(--ek-surface);
  border-top: 1px solid var(--ek-border);
  border-bottom: 1px solid var(--ek-border);
}
.dl-navlink {
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ek-text);
  border-radius: 0 !important;
  padding-bottom: var(--ek-sp-3);
  padding-top: var(--ek-sp-3);
  border-bottom: 2px solid transparent;
}
.dl-navlink:hover {
  background: transparent !important;
  color: var(--ek-text);
  border-bottom-color: var(--ek-text);
}
.dl-navlink.is-active {
  background: transparent !important;
  color: var(--ek-text) !important;
  border-bottom: 2px solid var(--ek-text);
  font-weight: 800;
}
.dl-dd-toggle { border-radius: 0 !important; }
.dl-dd:hover .dl-dd-toggle,
.dl-dd.is-open .dl-dd-toggle {
  background: transparent !important;
  border-bottom: 2px solid var(--ek-text);
}

/* Mega menu */
.dl-mega-menu { border: 1px solid var(--ek-border); border-top: 2px solid var(--ek-text); box-shadow: var(--ek-shadow-md); }
.dl-mega-sidebtn.is-active { background: var(--ek-surface-hover); outline: 1px solid var(--ek-border); }
.dl-mega-sidebtn:hover { background: var(--ek-surface-hover); }
.dl-mcats-subitem:hover { background: var(--ek-primary); color: var(--ek-on-primary); }
.dl-mcats-more:hover { color: var(--ek-text); }

/* Dropdowns */
.dl-dd-menu { border: 1px solid var(--ek-border); border-top: 2px solid var(--ek-text); box-shadow: var(--ek-shadow-md); }
.dl-dd-item:hover { background: var(--ek-surface-hover); color: var(--ek-text); }
.dl-dd-item.is-active { background: var(--ek-surface-hover); font-weight: 700; outline: none; border-left: 2px solid var(--ek-text); }

/* Mobile */
.dl-mdd-item:hover { background: var(--ek-primary); color: var(--ek-on-primary); }
.dl-mdd-item.is-active { background: var(--ek-surface-hover); outline: 1px solid var(--ek-border); }
.dl-qbtn:hover { background: var(--ek-surface-hover); outline-color: var(--ek-border); }
.dl-qbtn.is-active { background: var(--ek-primary); color: var(--ek-on-primary); }



/* ---- @import /assets/css/enka/footer.css ---- */
/* =========================================================
   footer.css - Enka footer styling
   Premium: rustige donkere footer, geen decoratie.
   ========================================================= */

.enka-footer {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark-muted);
  padding: var(--ek-sp-8) 0 0;
  font-size: var(--ek-fs-sm);
  border-top: 1px solid var(--ek-on-dark-line);
  /* GEEN position: relative - anders blokkeert het z-index van .dropdown-menu */
}
.enka-footer a {
  color: var(--ek-on-dark-muted-2);
  text-decoration: none;
  transition: color var(--ek-dur-fast) var(--ek-ease),
              padding-left var(--ek-dur-fast) var(--ek-ease);
}
.enka-footer-links a:hover {
  color: var(--ek-on-dark);
  padding-left: var(--ek-sp-1);
}
.enka-footer a:hover { color: var(--ek-on-dark); }

.enka-footer-brand {
  font-family: var(--ek-font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ek-on-dark);
  margin-bottom: var(--ek-sp-3);
  position: relative;
  display: inline-block;
}
.enka-footer-logo {
  display: inline-block;
  margin-bottom: var(--ek-sp-4);
  text-decoration: none;
}
.enka-footer-logo img {
  max-height: 70px;
  width: auto;
  height: auto;
  display: block;
  /* Logo is wit met zwarte tekst (JPEG zonder transparantie).
     invert(1) maakt zwarte tekst wit + witte achtergrond zwart.
     mix-blend-mode: lighten laat zwarte delen wegvallen tegen donkere footer
     waardoor alleen de witte tekst zichtbaar blijft, zonder zichtbaar kader. */
  filter: invert(1);
  mix-blend-mode: lighten;
  opacity: .95;
  transition: opacity var(--ek-dur-fast) var(--ek-ease);
}
.enka-footer-logo:hover img { opacity: 1; }

.enka-footer-brand::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 32px; height: 2px;
  background: var(--ek-on-dark);
}
.enka-footer-tagline {
  font-size: var(--ek-fs-sm);
  color: var(--ek-on-dark-muted-2);
  line-height: 1.7;
  max-width: 280px;
  margin-top: var(--ek-sp-4);
}
.enka-footer-heading {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-on-dark);
  margin-bottom: var(--ek-sp-4);
}
.enka-footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
  font-size: var(--ek-fs-sm);
}
.enka-footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ek-sp-3);
  margin-bottom: var(--ek-sp-2);
  font-size: var(--ek-fs-sm);
}
.enka-footer-contact-row i {
  color: var(--ek-on-dark-muted-2);
  margin-top: var(--ek-sp-1);
  flex-shrink: 0;
  font-size: var(--ek-fs-sm);
}
.enka-footer-divider {
  border: none;
  border-top: 1px solid var(--ek-on-dark-line);
  margin: var(--ek-sp-7) 0 0;
}
.enka-footer-bottom {
  background: var(--ek-ink);
  padding: var(--ek-sp-4) 0;
  font-size: var(--ek-fs-sm);
  color: var(--ek-on-dark-muted-2);
}
.enka-footer-bottom a {
  color: var(--ek-on-dark-muted-2);
  text-decoration: none;
}
.enka-footer-bottom a:hover { color: var(--ek-on-dark); }

/* Mobiele zwevende winkelwagen-knop (FAB) - alleen Enka, alleen mobiel */
.enka-fab-cart {
  position: fixed;
  right: 18px;
  bottom: 76px; /* boven de 'terug naar boven'-knop (bottom:18px, h:46px) */
  z-index: 1081;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--ek-surface-dark);
  color: var(--ek-on-dark);
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: var(--ek-shadow-dark-md);
  transition: transform .15s ease, background .15s ease;
}
.enka-fab-cart:hover,
.enka-fab-cart:focus { color: var(--ek-on-dark); transform: translateY(-2px); }
.enka-fab-cart:active { transform: translateY(0); }
.enka-fab-cart i { font-size: var(--ek-fs-lg); }
.enka-fab-cart .enka-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--ek-sp-1);
  border-radius: var(--ek-r-pill);
  background: var(--ek-danger);
  color: var(--ek-on-danger);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  border: 2px solid var(--ek-on-dark);
}
.enka-fab-cart .enka-fab-badge.is-zero { display: none; }
@media (min-width: 992px) { .enka-fab-cart { display: none; } }
/* Op de productpagina schuift de sticky koopbalk onder de FAB door: twee
   winkelwagenknoppen over elkaar, en de FAB dekt de knop af. Zolang die balk
   zichtbaar is, is de FAB overbodig. */
body:has(.pdp-sticky-buy.is-visible) .enka-fab-cart { display: none; }

/* ── Minicart drawer (voorheen inline in inc/enka-footer.php) ─────────────
   Was DutchLine-inkt (#131F3F / rgba(11,18,32,*)) - nu Enka-tokens. */
.enka-minicart-backdrop{
  position:fixed; inset:0; z-index:1099;
  background:var(--ek-scrim);
  opacity:0; transition:opacity var(--ek-dur) var(--ek-ease);
}
.enka-minicart-backdrop.is-open{ opacity:1; }
.enka-minicart{
  position:fixed; top:0; right:0; bottom:0; z-index:1100;
  width:min(400px, 92vw);
  background:var(--ek-surface); color:var(--ek-text);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--ek-dur) var(--ek-ease);
  box-shadow:var(--ek-shadow-lg);
}
.enka-minicart.is-open{ transform:translateX(0); }
.enka-mc-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--ek-sp-4); border-bottom:1px solid var(--ek-border);
}
.enka-mc-title{ font-weight:900; font-size:var(--ek-fs-base); }
.enka-mc-close{
  width:44px; height:44px; border:0; background:transparent;
  font-size:var(--ek-fs-xl); line-height:1; cursor:pointer; color:var(--ek-text);
}
.enka-mc-items{ flex:1; overflow-y:auto; padding:var(--ek-sp-2) var(--ek-sp-4); }
.enka-mc-item{
  display:flex; gap:var(--ek-sp-3); align-items:flex-start;
  padding:var(--ek-sp-3) 0; border-bottom:1px solid var(--ek-border-subtle);
}
.enka-mc-item:last-child{ border-bottom:0; }
.enka-mc-img{
  width:56px; height:56px; flex-shrink:0;
  border:1px solid var(--ek-border); background:var(--ek-surface);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.enka-mc-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.enka-mc-main{ flex:1; min-width:0; }
.enka-mc-name{
  font-size:var(--ek-fs-sm); font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.enka-mc-meta{ font-size:var(--ek-fs-sm); color:var(--ek-text-muted); margin-top:var(--ek-sp-1); }
.enka-mc-line{ font-size:var(--ek-fs-sm); font-weight:800; margin-top:var(--ek-sp-1); }
.enka-mc-remove{
  border:0; background:transparent; color:var(--ek-text-muted-2);
  cursor:pointer; font-size:var(--ek-fs-base); padding:var(--ek-sp-2); flex-shrink:0;
}
.enka-mc-remove:hover{ color:var(--ek-danger); }
.enka-mc-foot{
  padding:var(--ek-sp-4); border-top:1px solid var(--ek-border);
  display:grid; gap:var(--ek-sp-2);
}
.enka-mc-subtotal{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:var(--ek-fs-sm); margin-bottom:var(--ek-sp-1);
}
.enka-mc-subtotal strong{ font-size:var(--ek-fs-lg); font-weight:900; }
.enka-mc-empty{ padding:var(--ek-sp-7) var(--ek-sp-2); text-align:center; color:var(--ek-text-muted-2); font-size:var(--ek-fs-sm); }

/* ── Kleine hulpsels (voorheen style-attrs) ─────────────────────────────── */
.enka-footer-note { font-size: var(--ek-fs-sm); color: var(--ek-on-dark-muted-2); }
.enka-mc-ph { color: var(--ek-border-strong); }



/* ---- @import /assets/css/enka/checkout.css ---- */
/* =========================================================
   checkout.css - Enka checkout flow styling
   ---------------------------------------------------------
   Lokale CSS vars zijn gescoped naar .ek-co-wrap zodat ze
   niet conflicten met tokens.css (.ek-page scope).
   Premium: rustige cards, helder ritme, geen decoratie.
   ========================================================= */

.ek-co-wrap {
  /* Lokale aliases die mappen op de globale tokens */
  --ek-co-ink:        var(--ek-ink-2);
  --ek-co-muted:      var(--ek-text-muted); /* niet via --ek-muted: die wordt hieronder
                                               geredeclareerd -> cyclus -> invalid */
  --ek-co-border:     var(--ek-line);
  --ek-co-border-2:   var(--ek-line-2);
  --ek-co-bg-soft:    var(--ek-surface-2);
  --ek-co-bg:         var(--ek-surface);

  /* Backward-compatibele aliases (oude naamgeving in HTML/CSS) */
  --ek-ink:      var(--ek-co-ink);
  --ek-muted:    var(--ek-co-muted);
  --ek-border:   var(--ek-co-border);
  --ek-bg-soft:  var(--ek-co-bg-soft);

  max-width: 880px;
  margin: 0 auto;
  padding: var(--ek-sp-4) 0 var(--ek-sp-6);
}
.ek-co-wrap.is-narrow { max-width: 720px; }
@media (min-width: 768px) {
  .ek-co-wrap { padding: var(--ek-sp-6) 0 var(--ek-sp-8); }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ek-co-hero {
  margin-bottom: var(--ek-sp-6);
  text-align: left;
}
.ek-co-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-co-muted);
  margin-bottom: var(--ek-sp-2);
}
.ek-co-kicker::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--ek-co-ink);
}
.ek-co-title {
  font-family: var(--ek-font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  color: var(--ek-co-ink);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0 0 var(--ek-sp-2);
}
.ek-co-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  line-height: 1.6;
  max-width: 600px;
}

/* ── Steps ────────────────────────────────────────────────────────────────── */
.ek-co-steps {
  display: flex;
  gap: 0;
  margin-bottom: var(--ek-sp-6);
  border-bottom: 1px solid var(--ek-co-border);
}
.ek-co-step {
  flex: 1;
  padding: var(--ek-sp-4) var(--ek-sp-2);
  text-align: center;
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ek-muted-2);
  position: relative;
}
.ek-co-step.is-active { color: var(--ek-co-ink); }
.ek-co-step.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ek-co-ink);
}
.ek-co-step.is-done { color: var(--ek-success); }
.ek-co-step .num { display: inline-block; margin-right: var(--ek-sp-2); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.ek-co-card {
  background: var(--ek-co-bg);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  margin-bottom: var(--ek-sp-4);
  overflow: hidden;
}
.ek-co-card-head {
  padding: var(--ek-sp-4) var(--ek-sp-5);
  border-bottom: 1px solid var(--ek-co-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ek-co-card-head h2 {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ek-co-ink);
}
.ek-co-card-body { padding: var(--ek-sp-5) var(--ek-sp-5); }

/* ── USP-strip (winkelwagen) ──────────────────────────────────────────────── */
.ek-co-usps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ek-sp-2);
  margin: 0 0 var(--ek-sp-4);
}
.ek-co-usp {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-2) var(--ek-sp-4);
  background: var(--ek-co-bg-soft);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  color: var(--ek-co-ink);
  letter-spacing: .01em;
}
.ek-co-usp {
  flex: 1 1 calc(50% - var(--ek-sp-2));
  justify-content: center;
}
.ek-co-usp i {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-ink);
  opacity: .75;
}
@media (min-width: 576px) {
  .ek-co-usp { flex: 0 1 auto; justify-content: flex-start; }
}

/* ── Item rij in cart/overview ────────────────────────────────────────────── */
.ek-co-item {
  display: flex;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-4) 0;
  border-bottom: 1px solid var(--ek-co-border);
  align-items: flex-start;
}
.ek-co-item:last-child { border-bottom: none; }
.ek-co-item-img {
  width: 72px; height: 72px;
  object-fit: contain;
  background: var(--ek-co-bg-soft);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  flex-shrink: 0;
  padding: var(--ek-sp-1);
}
.ek-co-item-info { flex: 1; min-width: 0; }
.ek-co-item-name {
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  color: var(--ek-co-ink);
  line-height: 1.4;
  margin-bottom: var(--ek-sp-1);
}
.ek-co-item-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  line-height: 1.5;
}
.ek-co-item-price {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 900;
  color: var(--ek-co-ink);
  white-space: nowrap;
  margin-left: auto;
  padding-left: var(--ek-sp-3);
}
.ek-co-item-actions {
  display: flex;
  gap: var(--ek-sp-2);
  align-items: center;
  margin-top: var(--ek-sp-2);
  flex-wrap: wrap;
}
.ek-co-qty {
  width: 64px;
  padding: var(--ek-sp-2) var(--ek-sp-2);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-base); /* >=16px: voorkomt iOS zoom-on-focus */
  text-align: center;
  background: var(--ek-co-bg);
}
/* Touch targets >=44px op touch-apparaten */
@media (pointer: coarse) {
  .ek-co-qty,
  .ek-co-btn-sm { min-height: 44px; }
}
.ek-co-qty:focus {
  outline: none;
  border-color: var(--ek-co-ink);
}

/* ── Totalen ──────────────────────────────────────────────────────────────── */
.ek-co-totals {
  padding-top: var(--ek-sp-4);
  border-top: 1px solid var(--ek-co-border);
  margin-top: var(--ek-sp-2);
}
.ek-co-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--ek-sp-1) 0;
  font-size: var(--ek-fs-sm);
}
.ek-co-total-row.is-main {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-xl);
  font-weight: 900;
  color: var(--ek-co-ink);
  padding-top: var(--ek-sp-2);
  margin-top: var(--ek-sp-1);
}
.ek-co-total-row .lbl { color: var(--ek-co-muted); }
.ek-co-total-row.is-main .lbl {
  color: var(--ek-co-ink);
  font-size: var(--ek-fs-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.ek-co-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-4) var(--ek-sp-6);
  font-size: var(--ek-fs-sm);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ek-r);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease),
              border-color var(--ek-dur-fast) var(--ek-ease),
              opacity var(--ek-dur-fast) var(--ek-ease);
  font-family: inherit;
}
.ek-co-btn-dark {
  background: var(--ek-co-ink);
  color: var(--ek-on-dark);
  border-color: var(--ek-co-ink);
}
.ek-co-btn-dark:hover {
  background: var(--ek-ink);
  color: var(--ek-on-dark);
}
.ek-co-btn-dark:disabled { opacity: .4; cursor: not-allowed; }

.ek-co-btn-ghost {
  background: var(--ek-co-bg);
  color: var(--ek-co-ink);
  border-color: var(--ek-co-border);
}
.ek-co-btn-ghost:hover {
  border-color: var(--ek-co-ink);
  color: var(--ek-co-ink);
}
.ek-co-btn-danger {
  background: var(--ek-co-bg);
  color: var(--ek-danger);
  border-color: color-mix(in srgb, var(--ek-danger) 24%, transparent);
}
.ek-co-btn-danger:hover {
  background: var(--ek-danger);
  color: var(--ek-on-dark);
  border-color: var(--ek-danger);
}
.ek-co-btn-sm {
  padding: var(--ek-sp-2) var(--ek-sp-4);
  font-size: var(--ek-fs-xs);
}

/* ── Method picker ────────────────────────────────────────────────────────── */
.ek-co-methods {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-2);
}
.ek-co-method {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-4) var(--ek-sp-5);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  background: var(--ek-co-bg);
  text-decoration: none;
  color: var(--ek-co-ink);
  transition: border-color var(--ek-dur-fast) var(--ek-ease),
              transform var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-method:hover {
  border-color: var(--ek-co-ink);
  transform: translateX(2px);
  color: var(--ek-co-ink);
}
.ek-co-method-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-co-bg-soft);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-lg);
  color: var(--ek-co-ink);
}
.ek-co-method-text { flex: 1; min-width: 0; }
.ek-co-method-label {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.ek-co-method-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  margin-top: var(--ek-sp-1);
}
.ek-co-method-arrow {
  color: var(--ek-muted-2);
  font-size: var(--ek-fs-sm);
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
.ek-co-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ek-sp-4);
  margin-bottom: var(--ek-sp-4);
}
.ek-co-field { flex: 1 1 200px; }
.ek-co-field.is-full { flex: 1 1 100%; }
.ek-co-field.is-quarter { flex: 1 1 140px; }
.ek-co-field label {
  display: block;
  font-size: var(--ek-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ek-co-muted);
  margin-bottom: var(--ek-sp-2);
}
.ek-co-field label .req { color: var(--ek-danger); }
.ek-co-field input,
.ek-co-field select {
  width: 100%;
  padding: var(--ek-sp-3) var(--ek-sp-4);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-base); /* >=16px: voorkomt iOS zoom-on-focus */
  background: var(--ek-co-bg);
  color: var(--ek-co-ink);
  transition: border-color var(--ek-dur-fast) var(--ek-ease);
  font-family: inherit;
}
.ek-co-field input:focus,
.ek-co-field select:focus {
  outline: none;
  border-color: var(--ek-co-ink);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.ek-co-alert {
  padding: var(--ek-sp-4) var(--ek-sp-4);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-sm);
  line-height: 1.55;
  margin-bottom: var(--ek-sp-4);
  background: var(--ek-danger-subtle);
  color: var(--ek-danger-hover);
  border: 1px solid color-mix(in srgb, var(--ek-danger) 24%, transparent);
}

/* ── Payment summary card ─────────────────────────────────────────────────── */
.ek-co-pay-card {
  display: flex;
  align-items: center;
  gap: var(--ek-sp-4);
  padding: var(--ek-sp-4) var(--ek-sp-5);
  background: var(--ek-co-bg-soft);
  border: 1px solid var(--ek-co-border);
  border-radius: var(--ek-r);
  margin-bottom: var(--ek-sp-5);
}
.ek-co-pay-icon {
  font-size: 28px;
  color: var(--ek-ideal);
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-co-bg);
  border-radius: var(--ek-r);
  border: 1px solid var(--ek-co-border);
}
.ek-co-pay-text strong {
  display: block;
  font-size: var(--ek-fs-base);
  font-weight: 800;
  color: var(--ek-co-ink);
  margin-bottom: var(--ek-sp-1);
}
.ek-co-pay-text span {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
}

/* ── Address summary ──────────────────────────────────────────────────────── */
.ek-co-addr {
  font-size: var(--ek-fs-sm);
  line-height: 1.6;
}
.ek-co-addr .name {
  font-weight: 700;
  color: var(--ek-co-ink);
}
.ek-co-addr .email {
  color: var(--ek-co-muted);
  font-size: var(--ek-fs-sm);
  margin-top: var(--ek-sp-1);
}

/* ── Success ──────────────────────────────────────────────────────────────── */
.ek-co-success {
  text-align: center;
  padding: var(--ek-sp-7) var(--ek-sp-5);
}
.ek-co-success-icon {
  width: 80px; height: 80px;
  margin: 0 auto var(--ek-sp-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ek-success-subtle);
  color: var(--ek-success);
  border-radius: 50%;
  font-size: 38px;
}
.ek-co-success-icon.is-pending {
  background: var(--ek-warning-subtle);
  color: var(--ek-warning);
}
.ek-co-success-icon.is-failed {
  background: var(--ek-danger-subtle);
  color: var(--ek-danger);
}
.ek-co-success-title {
  font-family: var(--ek-font-display);
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--ek-co-ink);
  margin: 0 0 var(--ek-sp-2);
}
.ek-co-success-sub {
  font-size: var(--ek-fs-sm);
  color: var(--ek-co-muted);
  max-width: 480px;
  margin: 0 auto var(--ek-sp-6);
  line-height: 1.6;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.ek-co-empty {
  text-align: center;
  padding: var(--ek-sp-7) var(--ek-sp-5);
  color: var(--ek-co-muted);
}
.ek-co-empty i {
  font-size: 38px;
  opacity: .25;
  display: block;
  margin-bottom: var(--ek-sp-4);
}
.ek-co-empty p {
  margin-bottom: var(--ek-sp-5);
  font-size: var(--ek-fs-sm);
}

/* ── Footer actions row ───────────────────────────────────────────────────── */
.ek-co-actions {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--ek-sp-3);
  flex-wrap: wrap;
  margin-top: var(--ek-sp-5);
}
.ek-co-actions .ek-co-btn { width: 100%; }
@media (min-width: 576px) {
  .ek-co-actions {
    flex-direction: row;
    align-items: center;
  }
  .ek-co-actions .ek-co-btn { width: auto; }
}

/* ══ Phase 4: componenten die voorheen handgebouwd in de views zaten ═══════ */

/* ── Warning-card (op rekening n.b. / impersonatie) - was 2x inline amber ── */
.ek-co-card--warning {
  border: 1px solid color-mix(in srgb, var(--ek-warning) 35%, transparent);
  background: var(--ek-warning-subtle);
}
.ek-co-card--warning .ek-co-card-body {
  color: var(--ek-warning-hover);
  font-size: var(--ek-fs-sm);
}

/* ── Waarschuwingstint in item-subregel (lage voorraad) ───────────────────── */
.ek-co-warn { color: var(--ek-warning); font-weight: 600; }

/* ── Notitie-card body (herroepingsrecht) ─────────────────────────────────── */
.ek-co-card-body.is-note {
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
  line-height: 1.6;
}
.ek-co-note-head {
  font-weight: 800;
  color: var(--ek-co-ink);
  margin-bottom: var(--ek-sp-1);
}

/* ── Voorwaarden-checkbox (class bestond al, stijl zat in style-attrs) ────── */
.ek-co-terms {
  display: flex;
  gap: var(--ek-sp-2);
  align-items: flex-start;
  margin: 0 0 var(--ek-sp-4);
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
  cursor: pointer;
}
.ek-co-terms input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--ek-primary);
}
.ek-co-terms a { text-decoration: underline; color: inherit; }

/* ── Verzendmethode-picker (voorheen inline <style> in confirm.php) ───────── */
.ek-co-ship-grid { display: grid; gap: var(--ek-sp-2); grid-template-columns: 1fr; }
@media (min-width: 576px) { .ek-co-ship-grid { grid-template-columns: 1fr 1fr; } }
.ek-co-ship-opt {
  display: flex;
  gap: var(--ek-sp-3);
  padding: var(--ek-sp-4);
  border: 2px solid var(--ek-line-2);
  border-radius: var(--ek-r);
  cursor: pointer;
  background: var(--ek-surface);
  transition: border-color var(--ek-dur-fast) var(--ek-ease),
              background var(--ek-dur-fast) var(--ek-ease);
}
.ek-co-ship-opt:hover { border-color: var(--ek-text-muted-2); }
.ek-co-ship-opt.is-active { border-color: var(--ek-ink); background: var(--ek-primary-subtle); }
.ek-co-ship-opt input[type="radio"] { display: none; }
.ek-co-ship-icon {
  width: 44px; height: 44px;
  border-radius: var(--ek-r-sm);
  background: var(--ek-primary-subtle);
  color: var(--ek-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ek-fs-lg);
  flex-shrink: 0;
}
.ek-co-ship-opt.is-active .ek-co-ship-icon { background: var(--ek-ink); color: var(--ek-on-primary); }
.ek-co-ship-body { flex: 1; min-width: 0; }
.ek-co-ship-title { font-weight: 800; color: var(--ek-ink); font-size: var(--ek-fs-base); }
.ek-co-ship-sub { font-size: var(--ek-fs-sm); color: var(--ek-muted); line-height: 1.45; margin-top: var(--ek-sp-1); }
.ek-co-pickup-info {
  margin-top: var(--ek-sp-4);
  padding: var(--ek-sp-4);
  background: var(--ek-surface-2);
  border: 1px solid var(--ek-line);
  border-radius: var(--ek-r);
  font-size: var(--ek-fs-sm);
  color: var(--ek-text-muted);
}
.ek-co-pickup-head { font-weight: 700; color: var(--ek-ink); font-size: var(--ek-fs-sm); }
.ek-co-pickup-line { margin-top: var(--ek-sp-1); }

/* ── Subtekst/hint onder item (voorheen style-attr) ───────────────────────── */
.ek-co-hint { font-size: var(--ek-fs-sm); color: var(--ek-co-muted); margin-top: var(--ek-sp-2); }



/* ---- @import /assets/css/enka/catalog.css ---- */
/* =========================================================
   catalog.css - Enka-specifieke catalogus/PDP overrides
   ---------------------------------------------------------
   Geextraheerd uit de inline <style> blokken van
   assortment.php en assortment_info.php (body.is-enka regels).
   De gedeelde (DutchLine) basis blijft inline in die pagina's.
   Laadt via enka/core.css - alleen bij APP_LINE=enka.
   ========================================================= */
/* ══ Uit assortment.php ═══════════════════════════════════════ */
body.is-enka{
  --dlx-ink:        var(--ek-ink);
  --dlx-ink-2:      var(--ek-text-muted);
  --dlx-ink-3:      var(--ek-text-muted-2);
  --dlx-line:       var(--ek-border-strong);
  --dlx-line-soft:  var(--ek-border);
  --dlx-surface:    var(--ek-surface-hover);
  --dlx-accent:     var(--ek-ink);
  --dlx-accent-soft:var(--ek-primary-subtle);
  --dlx-accent-line:var(--ek-text-muted);
  --dlx-r:          0px;
  --dlx-r-sm:       0px;
  --dlx-pill:       0px;
  --dlx-shadow:     none;
}
body.is-enka .dl-assort-title{
  font-family: var(--ek-font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase; letter-spacing: .01em; font-weight: 700;
}
body.is-enka .dl-filter-title .t{
  text-transform: uppercase; letter-spacing: .05em; font-size: .8rem;
}
body.is-enka .dl-filter-form .dl-check .form-check-input[type="checkbox"]{ border-radius: 0 !important; }
body.is-enka .dl-swatch{ border-radius: 0; }
body.is-enka .dl-product-card:hover{ transform: none; border-color: var(--dlx-ink); }
@media (min-width: 992px) and (hover: hover){
body.is-enka .dl-hg{ position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
body.is-enka .dl-hg-img{
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: contain; background: var(--dlx-surface);
    opacity: 0; transition: opacity .12s ease;
  }
body.is-enka .dl-product-card:hover .dl-hg-img.is-active{ opacity: 1; }
body.is-enka .dl-hg-bars{
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    display: flex; gap: 4px; z-index: 3; opacity: 0; transition: opacity .15s ease;
  }
body.is-enka .dl-product-card:hover .dl-hg-bars{ opacity: 1; }
body.is-enka .dl-hg-bar{ flex: 1 1 0; height: 3px; background: var(--ek-border-strong); transition: background .12s ease; }
body.is-enka .dl-hg-bar.is-active{ background: var(--ek-ink); }
body.is-enka .dl-card-badges-tr,
  body.is-enka .dl-card-badges-tl{ z-index: 4; }
}
body.is-enka .dl-ov-btn{ border-radius: 0; }
body.is-enka .dl-prod-swatch{ border-radius: 0; }
body.is-enka .dl-pager-inline{ border-radius: 0; }
body.is-enka .dl-product-card,
body.is-enka .dl-product-img-wrap,
body.is-enka .dl-f-block,
body.is-enka .dl-check,
body.is-enka .dl-cat-row,
body.is-enka .dl-search,
body.is-enka .dl-card--soft,
body.is-enka .dl-view-toggle,
body.is-enka .dl-view-toggle button{ border-radius: 0 !important; }
body.is-enka .dl-product-card,
body.is-enka .dl-product-card:hover,
body.is-enka .dl-product-card.is-oos:hover,
body.is-enka .dl-f-block,
body.is-enka .dl-card--soft{ box-shadow: none !important; }

/* ══ Uit assortment_info.php ═══════════════════════════════════════ */
body.is-enka{
  --pdp-accent:       var(--ek-ink, var(--ek-ink));
  --pdp-accent-soft:  var(--ek-border-subtle);
  --pdp-border:       var(--ek-line, var(--ek-border));
}
body.is-enka .pdp-hero{ background:var(--ek-surface, var(--ek-surface)); }
body.is-enka .pdp-title{
  color:var(--ek-ink, var(--ek-ink));
  font-family:var(--ek-font-display, 'Barlow Condensed', sans-serif);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
}
body.is-enka .pdp-subtitle{ color:var(--ek-muted, var(--ek-text-muted)); }
body.is-enka .pdp-meta-chip{
  background:var(--ek-ink, var(--ek-ink));
  color:var(--ek-on-dark, var(--ek-surface));
  border-color:var(--ek-ink, var(--ek-ink));
  border-radius:var(--ek-r, 4px);
  font-family:var(--ek-font, sans-serif);
}
body.is-enka .pdp-order-card{
  border-radius:var(--ek-r-lg, 8px);
  border-color:var(--ek-line-2, var(--ek-border-strong));
  box-shadow:var(--ek-shadow-md);
}
body.is-enka .pdp-order-header{
  background:var(--ek-ink, var(--ek-ink));
  border-bottom:1px solid var(--ek-on-dark-line);
}
body.is-enka .pdp-order-header-label{
  color:var(--ek-on-dark-muted);
  font-family:var(--ek-font-display, sans-serif);
  letter-spacing:.1em;
}
body.is-enka .pdp-tab-btn:hover{ color:var(--pdp-accent); }
body.is-enka .pdp-tab-btn.is-active{
  color:var(--pdp-accent);
  border-bottom-color:var(--pdp-accent);
}
body.is-enka .pdp-tab-count{
  background:var(--pdp-accent-soft);
  color:var(--pdp-accent);
}
body.is-enka .pdp-info-card{
  border-radius:var(--ek-r-lg, 8px);
  border-color:var(--ek-line, var(--ek-border));
  box-shadow:var(--ek-shadow-sm);
}
body.is-enka .pdp-info-title{
  color:var(--ek-ink, var(--ek-ink));
  font-family:var(--ek-font-display, sans-serif);
  text-transform:uppercase;
  letter-spacing:.06em;
}
body.is-enka .pdp-info-title i{ color:var(--pdp-accent); }
body.is-enka .pdp-info-row dt{ color:var(--ek-muted, var(--ek-text-muted)); }
body.is-enka .pdp-info-row dd{ color:var(--ek-ink, var(--ek-ink)); }
body.is-enka .pdp-info-swatch{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  border-color:var(--ek-line-2, var(--ek-border-strong));
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-info-swatch-name{ color:var(--ek-ink, var(--ek-ink)); }
body.is-enka .pdp-gallery{ border-radius:var(--ek-r-lg, 8px); }
body.is-enka .pdp-gallery-zoom{
  border-radius:var(--ek-r, 4px);
  background:var(--ek-ink, var(--ek-ink));
  color:var(--ek-surface);
  border-color:var(--ek-ink, var(--ek-ink));
}
body.is-enka .pdp-gallery-zoom:hover{ background:var(--ek-ink-2, var(--ek-ink-2)); color:var(--ek-surface); }
body.is-enka .dl-thumb.pdp-thumb.is-active{
  border-color:var(--pdp-accent);
  box-shadow:0 0 0 1px var(--pdp-accent);
}
body.is-enka .dl-thumb.pdp-thumb:hover{ border-color:var(--pdp-accent); }
body.is-enka .pdp-share-card{
  border-radius:var(--ek-r-lg, 8px);
  border-color:var(--ek-line, var(--ek-border));
}
body.is-enka .pdp-share-title i,
body.is-enka .pdp-share-btn-copy i{ color:var(--pdp-accent); }
body.is-enka .pdp-share-btn{
  border-radius:var(--ek-r, 4px);
  border-color:var(--ek-line-2, var(--ek-border-strong));
}
body.is-enka .pdp-share-btn:hover{
  border-color:var(--pdp-accent);
  background:var(--pdp-accent-soft);
  transform:none;
}
body.is-enka .pdp-panel-heading{
  font-family:var(--ek-font-display, sans-serif);
  text-transform:uppercase;
  letter-spacing:.04em;
}
body.is-enka .pdp-ph-icon{
  background:var(--pdp-accent-soft);
  color:var(--pdp-accent);
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-desc-empty{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  border-color:var(--ek-line-2, var(--ek-border-strong));
  color:var(--ek-muted, var(--ek-text-muted));
}
body.is-enka .pdp-dealer-banner{
  background:var(--ek-ink, var(--ek-ink));
  border-radius:var(--ek-r-lg, 8px);
}
body.is-enka .pdp-dealer-banner::before,
body.is-enka .pdp-dealer-banner::after{ display:none; }
body.is-enka .pdp-dealer-title{
  font-family:var(--ek-font-display, sans-serif);
  text-transform:uppercase;
  letter-spacing:.02em;
}
body.is-enka .pdp-dealer-chip{
  background:var(--ek-on-dark-line);
  border-color:var(--ek-on-dark-line);
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-dealer-btn{
  background:var(--ek-surface); color:var(--ek-ink, var(--ek-ink));
  border-color:var(--ek-surface); border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-dealer-btn:hover{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  color:var(--ek-ink, var(--ek-ink));
}
body.is-enka .pdp-var-hint{
  background:var(--ek-surface-2, var(--ek-surface-hover));
  border-color:var(--ek-line-2, var(--ek-border-strong));
  color:var(--ek-ink, var(--ek-ink));
  border-radius:var(--ek-r, 4px);
}
body.is-enka .pdp-sticky-price{ color:var(--ek-ink,var(--ek-ink)); }

/* ═══════════════════════════════════════════════════════════
   ENKA PDP redesign (assortment_info.php)
   Premium zwart/wit: Barlow Condensed display, scherpe hoeken,
   hairlines i.p.v. schaduwen, rustige typografie.
   ═══════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────── */
body.is-enka .pdp-hero { padding: 0 0 var(--ek-sp-6); }
body.is-enka .pdp-header { padding: var(--ek-sp-5) 0 var(--ek-sp-4); }
body.is-enka .pdp-title {
  font-family: var(--ek-font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  color: var(--ek-ink);
}
body.is-enka .pdp-subtitle {
  font-size: var(--ek-fs-sm);
  font-weight: 600;
  color: var(--ek-text-muted);
  text-transform: none;
}
body.is-enka .pdp-crumbs { font-size: var(--ek-fs-xs); }
body.is-enka .pdp-meta-row .dl-badge {
  background: var(--ek-surface);
  border: 1px solid var(--ek-border-strong);
  color: var(--ek-ink);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--ek-fs-xs);
}

/* ── Gallery ────────────────────────────────────────────── */
body.is-enka .pdp-gallery.dl-card {
  border: 1px solid var(--ek-border);
  box-shadow: none;
  background: var(--ek-surface);
}
body.is-enka .pdp-gallery.dl-card:hover { box-shadow: none; }
body.is-enka .pdp-gallery-main { background: var(--ek-surface); }
body.is-enka .pdp-gallery-zoom {
  background: var(--ek-surface);
  border: 1px solid var(--ek-border-strong);
  color: var(--ek-ink);
  border-radius: 0;
  width: 44px; height: 44px;
}
body.is-enka .pdp-gallery-zoom:hover {
  background: var(--ek-ink);
  color: var(--ek-on-primary);
  border-color: var(--ek-ink);
}
body.is-enka .pdp-gallery-thumbs { padding: var(--ek-sp-3); gap: var(--ek-sp-2); }
body.is-enka .pdp-thumb {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  background: var(--ek-surface);
  transition: border-color var(--ek-dur-fast) var(--ek-ease);
}
body.is-enka .pdp-thumb:hover { border-color: var(--ek-text-muted-2); }
body.is-enka .pdp-thumb.is-active { border: 2px solid var(--ek-ink); box-shadow: none; }
body.is-enka .pdp-var-hint {
  background: var(--ek-surface-hover);
  border: 1px solid var(--ek-border);
  color: var(--ek-text-muted);
  border-radius: 0;
  font-size: var(--ek-fs-sm);
}

/* ── Buy box ────────────────────────────────────────────── */
body.is-enka .pdp-order-card {
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  box-shadow: none;
  background: var(--ek-surface);
  overflow: hidden;
}
body.is-enka .pdp-order-header {
  background: var(--ek-surface-dark);
  border-bottom: none;
  padding: var(--ek-sp-4) var(--ek-sp-5);
}
body.is-enka .pdp-order-header-label {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ek-on-dark-muted);
}
body.is-enka .pdp-order-price-main {
  font-family: var(--ek-font-display);
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0;
  color: var(--ek-on-dark);
  line-height: 1.05;
}
body.is-enka .pdp-order-price-vat {
  color: var(--ek-on-dark-muted-2);
  font-size: var(--ek-fs-xs);
  letter-spacing: .04em;
}
body.is-enka .pdp-order-body { padding: var(--ek-sp-5); }
body.is-enka .pdp-order-section-label {
  display: block;
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
  margin-bottom: var(--ek-sp-2);
}

/* Swatches: strak vierkant met zwarte actieve rand */
body.is-enka .pdp-var-swatches { gap: var(--ek-sp-2); }
body.is-enka .pdp-var-swatches a {
  width: 40px; height: 40px;
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  padding: 3px;
}
body.is-enka .pdp-var-swatches a span { border-radius: 0; }
body.is-enka .pdp-var-swatches a:hover {
  transform: none;
  border-color: var(--ek-ink);
}
body.is-enka .pdp-var-swatches a.is-active {
  border: 2px solid var(--ek-ink);
  box-shadow: none;
  padding: 2px;
}

/* Voorraad */
body.is-enka .pdp-stock-row {
  border: 1px solid var(--ek-border);
  background: var(--ek-surface-hover);
  border-radius: 0;
  padding: var(--ek-sp-2) var(--ek-sp-3);
}
body.is-enka .pdp-stock-dot.in { background: var(--ek-success); box-shadow: none; }
body.is-enka .pdp-stock-dot.out { background: var(--ek-danger); box-shadow: none; }
body.is-enka .pdp-stock-txt { font-weight: 700; color: var(--ek-ink); }
body.is-enka .pdp-stock-qty { color: var(--ek-text-muted); }

/* Aantal-stepper: aaneengesloten groep */
body.is-enka .pdp-qty-wrap {
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  overflow: hidden;
}
body.is-enka .pdp-qty-btn {
  width: 48px; height: 48px;
  border-radius: 0;
  background: var(--ek-surface);
  color: var(--ek-ink);
  font-size: var(--ek-fs-lg);
  font-weight: 700;
}
body.is-enka .pdp-qty-btn:hover {
  background: var(--ek-ink);
  color: var(--ek-on-primary);
}
body.is-enka .pdp-qty-input {
  font-size: var(--ek-fs-base);
  font-weight: 800;
  height: 48px;
}

/* CTA */
body.is-enka #enka-add-to-cart.dl-btn {
  min-height: 52px;
  font-size: var(--ek-fs-sm) !important; /* zelfde specificity-reden als .dl-btn blok in overrides.css */
  letter-spacing: .14em !important;
}
body.is-enka .pdp-subtotal-row {
  border-top: 1px solid var(--ek-border);
  margin-top: var(--ek-sp-4);
  padding-top: var(--ek-sp-3);
}
body.is-enka .pdp-subtotal-lbl {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
}
body.is-enka .pdp-subtotal-val {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-xl);
  font-weight: 900;
  color: var(--ek-ink);
}

/* "Kies een uitvoering" notitie (klasse i.p.v. inline amber) */
body.is-enka .pdp-choose-var-note {
  background: var(--ek-warning-subtle);
  border: 1px solid color-mix(in srgb, var(--ek-warning) 35%, transparent);
  border-radius: 0;
  padding: var(--ek-sp-2) var(--ek-sp-3);
  font-size: var(--ek-fs-sm);
  color: var(--ek-warning-hover);
  margin-bottom: var(--ek-sp-4);
}
body.is-enka .pdp-choose-var-note .text-warning { color: var(--ek-warning) !important; }

/* Specificaties-kaart in sidebar: zelfde taal als buy box */
body.is-enka .pdp-info-list { margin: 0; }
body.is-enka .pdp-info-row {
  border-bottom: 1px solid var(--ek-border-subtle);
  padding: var(--ek-sp-2) 0;
}
body.is-enka .pdp-info-row dt { color: var(--ek-text-muted); font-size: var(--ek-fs-sm); }
body.is-enka .pdp-info-row dd { color: var(--ek-ink); font-weight: 700; font-size: var(--ek-fs-sm); }

/* ── Tabs ───────────────────────────────────────────────── */
body.is-enka .pdp-tabs { border-bottom: 1px solid var(--ek-border); gap: var(--ek-sp-2); }
body.is-enka .pdp-tab-btn {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-base);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
  border-bottom: 2px solid transparent;
  padding: var(--ek-sp-3) var(--ek-sp-4);
}
body.is-enka .pdp-tab-btn:hover { color: var(--ek-ink); }
body.is-enka .pdp-tab-btn.is-active {
  color: var(--ek-ink);
  border-bottom-color: var(--ek-ink);
}
body.is-enka .pdp-tab-count {
  background: var(--ek-surface-sunken);
  color: var(--ek-ink);
  border-radius: var(--ek-r-pill);
  font-family: var(--ek-font);
  font-size: var(--ek-fs-xs);
  font-weight: 800;
}

/* ── Panels / omschrijving / productinformatie ──────────── */
body.is-enka .pdp-panels { padding: var(--ek-sp-6) 0 var(--ek-sp-7); }
body.is-enka .pdp-info-card,
body.is-enka .pdp-share-card {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  box-shadow: none;
  background: var(--ek-surface);
}
body.is-enka .pdp-ph-icon,
body.is-enka .pdp-info-title > i,
body.is-enka .pdp-share-title > i,
body.is-enka .pdp-panel-heading > i { display: none; } /* icoon-chips voor kopjes: weg, rustiger */
body.is-enka .pdp-panel-heading,
body.is-enka .pdp-info-title,
body.is-enka .pdp-share-title {
  font-family: var(--ek-font-display);
  font-size: var(--ek-fs-lg);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ek-ink);
  border-bottom: 1px solid var(--ek-border);
  padding-bottom: var(--ek-sp-3);
  margin-bottom: var(--ek-sp-4);
}
body.is-enka .pdp-panel p,
body.is-enka .pdp-panel li {
  font-size: var(--ek-fs-base);
  line-height: 1.7;
  color: var(--ek-ink-2);
}
/* Leesbreedte alleen voor de omschrijvingstekst - niet voor reviews e.d. */
body.is-enka .pdp-desc-content p,
body.is-enka .pdp-desc-content li {
  max-width: 72ch;
}

/* ── Delen: compacte icoonrij i.p.v. hoge knoppenlijst ───── */
body.is-enka .pdp-share-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ek-sp-2);
}
body.is-enka .pdp-share-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  background: var(--ek-surface);
  color: var(--ek-ink);
  font-size: var(--ek-fs-base);
}
body.is-enka .pdp-share-btn span { display: none; }
body.is-enka .pdp-share-btn:hover {
  background: var(--ek-ink);
  color: var(--ek-on-primary);
  border-color: var(--ek-ink);
}

/* ── Reviews ────────────────────────────────────────────── */
body.is-enka .dl-reviews .dl-rev-score-num {
  font-family: var(--ek-font-display);
  font-weight: 900;
  color: var(--ek-ink);
}
body.is-enka .dl-reviews .fa-star,
body.is-enka .dl-reviews .fa-star-half-stroke { color: var(--ek-ink); }
body.is-enka .dl-rev-form-card,
body.is-enka .dl-reviews .dl-card {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  box-shadow: none;
}
body.is-enka .dl-reviews .form-control {
  border: 1px solid var(--ek-border-strong);
  border-radius: 0;
  font-size: var(--ek-fs-base);
}
body.is-enka .dl-reviews .form-control:focus {
  border-color: var(--ek-ink);
  box-shadow: 0 0 0 2px var(--ek-border);
}
body.is-enka .dl-rev-label {
  font-size: var(--ek-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ek-text-muted);
}

/* ── Pack-calculator in Enka-stijl ──────────────────────── */
body.is-enka .pdp-pack-calc-card {
  border: 1px solid var(--ek-border);
  border-radius: 0;
  background: var(--ek-surface-hover);
}
body.is-enka .pdp-pack-calc-head { color: var(--ek-ink); font-weight: 800; }
body.is-enka .pdp-pack-calc-card .form-control {
  border-radius: 0;
  font-size: var(--ek-fs-base);
}

/* ── Mobiel ─────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Uitzondering op mobile-first: dit zijn mobiele verfijningen bovenop de
     gedeelde pdp-basis die niet herschreven mag worden. */
  body.is-enka .pdp-header { padding: var(--ek-sp-4) 0 var(--ek-sp-3); }
  body.is-enka .pdp-panels { padding: var(--ek-sp-5) 0 var(--ek-sp-6); }
  body.is-enka .pdp-order-price-main { font-size: 1.8rem; }
  body.is-enka .pdp-tab-btn { font-size: var(--ek-fs-sm); padding: var(--ek-sp-3) var(--ek-sp-3); }
}

/* ── Sectiemenu: verticaal links (dl-dnav patroon), echte tabs (Enka) ─────── */
body.is-enka .pdp-secnav-wrap { display: flex; flex-direction: column; }
body.is-enka .pdp-secnav {
  display: flex;
  gap: var(--ek-sp-1);
  padding: var(--ek-sp-2);
  background: var(--ek-surface);
  border: 1px solid var(--ek-border);
  margin-bottom: var(--ek-sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.is-enka .pdp-secnav::-webkit-scrollbar { display: none; }
body.is-enka .pdp-secnav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ek-sp-2);
  padding: var(--ek-sp-3) var(--ek-sp-4);
  color: var(--ek-text-muted);
  font-size: var(--ek-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--ek-dur-fast) var(--ek-ease),
              color var(--ek-dur-fast) var(--ek-ease);
}
body.is-enka .pdp-secnav-item i { width: 18px; text-align: center; opacity: .8; }
body.is-enka .pdp-secnav-item:hover { color: var(--ek-ink); background: var(--ek-surface-hover); }
body.is-enka .pdp-secnav-item.is-active {
  background: var(--ek-primary);
  border-color: var(--ek-primary);
  color: var(--ek-on-primary);
}
body.is-enka .pdp-secnav-item.is-active i { opacity: 1; }
body.is-enka .pdp-secnav-main { min-width: 0; }

@media (min-width: 992px) {
  body.is-enka .pdp-secnav-wrap { flex-direction: row; align-items: flex-start; gap: var(--ek-sp-4); }
  body.is-enka .pdp-secnav {
    flex: 0 0 232px;
    width: 232px;
    flex-direction: column;
    position: sticky;
    top: var(--ek-sp-4);
    margin-bottom: 0;
  }
  body.is-enka .pdp-secnav-item { width: 100%; justify-content: flex-start; white-space: normal; }
  body.is-enka .pdp-secnav-main { flex: 1 1 auto; }
}

/* Reviews-sectie wordt door JS in de tab-container gezet; binnen de
   container geen dubbele marges */
body.is-enka .pdp-secnav-main .dl-reviews { margin-top: 0; }
body.is-enka .pdp-sec-hidden { display: none !important; } /* tab-switching; moet inline styles en .row verslaan */

/* ── Productinformatie-tab: kolom vol uitvullen + specs in 2 kolommen ─────── */
body.is-enka .pdp-col-full {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
body.is-enka .pdp-info-card .pdp-info-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--ek-sp-7);
}
@media (min-width: 768px) {
  body.is-enka .pdp-col-full .pdp-info-card .pdp-info-list {
    grid-template-columns: 1fr 1fr;
  }
}
body.is-enka .pdp-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ek-sp-4);
  min-width: 0;
}
body.is-enka .pdp-info-row dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

 /* Enka-overrides catalogus/PDP (uit assortment*.php) */

/* 6) Overrides voor Bootstrap + DutchLine globals (moet LAATST) */

/* ---- @import /assets/css/enka/overrides.css ---- */
/* =========================================================
   overrides.css - ENKA overrides voor globale CSS
   ---------------------------------------------------------
   Geldt op ALLE pagina's waar APP_LINE=enka actief is
   (homepage, /assortment, /checkout, /account, /pages/*).

   Scope: body.is-enka  - alleen Enka pagina's.
   Strategie: 3 lagen overrules
     1. Bootstrap CSS variables (--bs-*) remap naar Enka
     2. DutchLine variables (--accent, --dl-blue-*) remap
     3. Concrete component-overrides voor edge-cases
   ========================================================= */

/* ──────────────────────────────────────────────────────────────────────────
   1) Bootstrap CSS variabelen remappen naar Enka zwart/wit
   Hierdoor erven ALLE Bootstrap-componenten (.btn-primary, .text-primary,
   .bg-primary, .border-primary, .alert-primary etc.) automatisch Enka.
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka {
  /* --bs-primary/link/focus mapping staat in tokens.css; hier alleen
     de keys die tokens.css niet dekt. */
  --bs-form-valid-color:       var(--ek-primary);
  --bs-form-valid-border-color:var(--ek-primary);

  --bs-btn-bg:                 var(--ek-primary);
  --bs-btn-color:              var(--ek-on-primary);
  --bs-btn-border-color:       var(--ek-primary);
  --bs-btn-hover-bg:           var(--ek-primary-hover);
  --bs-btn-active-bg:          var(--ek-primary-hover);

  /* DutchLine theme-core.css overrules */
  --accent:        var(--ek-ink-2);
  --accent-soft:   var(--ek-border-subtle);
  --accent-soft2:  var(--ek-border);
  --accent-ink:    var(--ek-on-dark);
  --accent-gradient: linear-gradient(135deg, var(--ek-primary-hover), var(--ek-primary));
  --dl-blue-300:   var(--ek-muted-2);
  --dl-blue-500:   var(--ek-muted);
  --dl-blue-600:   var(--ek-ink-2);
  --dl-blue-700:   var(--ek-ink-2);
  --dl-blue-800:   var(--ek-ink);
  --dl-blue-900:   var(--ek-ink);
  --dl-nav-bg:     var(--ek-surface);
  --focus:         var(--ek-border-strong);
}

/* ──────────────────────────────────────────────────────────────────────────
   2) Bootstrap btn varianten (primary/outline) -> Enka
   Sommige Bootstrap regels gebruiken hardcoded waardes en niet --bs-* vars,
   dus expliciet overrulen.
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .btn-primary,
body.is-enka .btn-primary:focus-visible {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}
body.is-enka .btn-primary:hover,
body.is-enka .btn-primary:active,
body.is-enka .btn-primary.active,
body.is-enka .btn-check:checked + .btn-primary {
  background-color: var(--ek-ink);
  border-color: var(--ek-ink);
  color: var(--ek-on-dark);
}
body.is-enka .btn-primary:disabled,
body.is-enka .btn-primary.disabled {
  background-color: var(--ek-muted);
  border-color: var(--ek-muted);
  color: var(--ek-on-dark);
}

body.is-enka .btn-outline-primary {
  background-color: transparent;
  border-color: var(--ek-ink-2);
  color: var(--ek-ink-2);
}
body.is-enka .btn-outline-primary:hover,
body.is-enka .btn-outline-primary:active {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

body.is-enka .btn-secondary {
  background-color: var(--ek-surface-3);
  border-color: var(--ek-line-2);
  color: var(--ek-ink-2);
}
body.is-enka .btn-secondary:hover {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

body.is-enka .btn-light {
  background-color: var(--ek-surface);
  border-color: var(--ek-line);
  color: var(--ek-ink-2);
}
body.is-enka .btn-light:hover {
  background-color: var(--ek-surface-2);
  border-color: var(--ek-line-2);
  color: var(--ek-ink);
}

body.is-enka .btn-dark {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}
body.is-enka .btn-dark:hover {
  background-color: var(--ek-ink);
  border-color: var(--ek-ink);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   3) Bootstrap utility classes (.bg-* / .text-* / .border-*)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .bg-primary,
body.is-enka .text-bg-primary {
  background-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}
body.is-enka .text-primary {
  color: var(--ek-ink-2);
}
body.is-enka .border-primary {
  border-color: var(--ek-ink-2);
}
body.is-enka .bg-primary-subtle {
  background-color: var(--ek-surface-2) !important;
}
body.is-enka .text-primary-emphasis {
  color: var(--ek-ink);
}
body.is-enka .badge.bg-primary,
body.is-enka .badge.text-bg-primary {
  background-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   4) Form elementen - focus en validation
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .form-control:focus,
body.is-enka .form-select:focus,
body.is-enka .form-check-input:focus {
  border-color: var(--ek-ink-2);
  box-shadow: 0 0 0 3px var(--ek-border);
}
body.is-enka .form-check-input:checked {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
}
body.is-enka .form-control:focus-visible,
body.is-enka .form-select:focus-visible {
  outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   5) Links - alleen Bootstrap utility classes, geen algemene a-reset
   (algemene a { color: inherit } breekt specifieke knop-stijling)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka a.text-primary,
body.is-enka a.link-primary {
  color: var(--ek-ink-2);
}
body.is-enka a.text-primary:hover,
body.is-enka a.link-primary:hover {
  color: var(--ek-ink);
}

/* ──────────────────────────────────────────────────────────────────────────
   6) DutchLine header buttons → Enka typografie + kleur
   (!important nodig omdat de inline <style> in header.php sommige
    properties hard-codeert en later in DOM staat dan core.css)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .dl-btn {
  font-family: var(--ek-font);
  font-size: var(--ek-fs-sm) !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-radius: var(--ek-r) !important;
  padding: var(--ek-sp-3) var(--ek-sp-4) !important;
}

body.is-enka .dl-btn-primary {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  border-color: var(--ek-ink-2);
}
body.is-enka .dl-btn-primary:hover {
  background: var(--ek-ink);
  border-color: var(--ek-ink);
  color: var(--ek-on-dark);
}

body.is-enka .dl-btn-ghost {
  background: var(--ek-surface);
  color: var(--ek-ink-2);
  border-color: var(--ek-line-2);
}
body.is-enka .dl-btn-ghost:hover {
  background: var(--ek-surface-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-ink);
}

/* Header zoekbalk - Enka stijl */
body.is-enka .dl-search-pill {
  border: 1px solid var(--ek-line-2);
  border-radius: var(--ek-r) !important;
}
body.is-enka .dl-search-input {
  font-family: var(--ek-font);
  font-size: var(--ek-fs-base); /* >=16px: voorkomt iOS zoom-on-focus */
}
body.is-enka .dl-search-input:focus {
  border-color: var(--ek-ink-2);
  box-shadow: 0 0 0 2px var(--ek-border);
}
body.is-enka .dl-search-btn {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
  font-family: var(--ek-font);
  font-size: var(--ek-fs-xs) !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: var(--ek-sp-2) var(--ek-sp-4) !important;
  border-radius: 0 var(--ek-r) var(--ek-r) 0 !important;
}
body.is-enka .dl-search-btn:hover {
  background: var(--ek-ink);
  color: var(--ek-on-dark);
}

body.is-enka .dl-card:hover {
  border-color: var(--ek-line-2);
}
body.is-enka .dl-card-topline {
  background: var(--ek-ink-2);
}
body.is-enka .dl-card-topline::after {
  background: var(--ek-line);
}

body.is-enka .dl-chip.active {
  border-color: var(--ek-ink-2);
  background: var(--ek-surface-2);
  color: var(--ek-ink-2);
}

body.is-enka .dl-panel:focus-within {
  border-color: var(--ek-ink-2);
  box-shadow: var(--ek-shadow-md), 0 0 0 3px var(--ek-border);
}

body.is-enka .dl-locked {
  border-color: var(--ek-line-2);
  background: var(--ek-surface-2);
}

body.is-enka .dl-filter {
  border-color: var(--ek-line);
}

body.is-enka .dl-iconbtn:hover {
  border-color: var(--ek-line-2);
}

/* DutchLine nav */
body.is-enka .dl-nav .nav-link:hover {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .dl-nav .nav-link.active {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .dl-nav .nav-link.active::after {
  background: var(--ek-ink-2);
}

/* DutchLine "sheen" gradient -> volle Enka kleur */
body.is-enka .dl-sheen,
body.is-enka .dl-sec-sheen {
  background: var(--ek-surface);
}

/* DutchLine accent dividers / hr -> Enka neutraal */
body.is-enka .dl-hr-accent {
  background: var(--ek-line-2);
}

/* DutchLine header bottom accent line */
body.is-enka .dl-header::after,
body.is-enka .dl-header-v4::after {
  background: var(--ek-line);
}

/* ──────────────────────────────────────────────────────────────────────────
   7) Bootstrap accordion / tabs / pills
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .accordion-button:not(.collapsed) {
  background: var(--ek-surface-2);
  color: var(--ek-ink-2);
}
body.is-enka .accordion-button:focus {
  box-shadow: 0 0 0 3px var(--ek-border);
}

body.is-enka .nav-tabs .nav-link.active,
body.is-enka .nav-tabs .nav-link:hover {
  color: var(--ek-ink-2);
  background: var(--ek-surface);
  border-color: var(--ek-line);
}
body.is-enka .nav-pills .nav-link.active {
  background: var(--ek-surface-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-ink-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   8) Tabellen + lists
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .table-hover tbody tr:hover {
  background: var(--ek-surface-2);
}
body.is-enka .list-group-item:hover {
  background: var(--ek-surface-2);
}
body.is-enka .list-group-item.active {
  background: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   9) Breadcrumbs + pagination + dropdown
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .breadcrumb-item a:hover {
  color: var(--ek-ink);
}
body.is-enka .page-link {
  color: var(--ek-ink-2);
}
body.is-enka .page-link:hover {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .page-item.active .page-link {
  background-color: var(--ek-ink-2);
  border-color: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

body.is-enka .dropdown-item:hover,
body.is-enka .dropdown-item:focus {
  background: var(--ek-surface-2);
  color: var(--ek-ink);
}
body.is-enka .dropdown-item.active {
  background: var(--ek-ink-2);
  color: var(--ek-on-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   10) Misc (spinners, progress, alert)
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .spinner-border.text-primary,
body.is-enka .spinner-grow.text-primary {
  color: var(--ek-ink-2);
}
body.is-enka .progress-bar.bg-primary,
body.is-enka .progress-bar {
  background-color: var(--ek-ink-2);
}
body.is-enka .alert-primary {
  background-color: var(--ek-surface-2);
  border-color: var(--ek-line-2);
  color: var(--ek-ink-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   11) Custom dl-* utilities die nog kunnen voorkomen
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .dl-badge {
  border-color: var(--ek-line);
}
body.is-enka .dl-pill,
body.is-enka .dl-pill.active {
  border-color: var(--ek-line-2);
}
body.is-enka .dl-toast {
  border-color: var(--ek-line);
}

/* ──────────────────────────────────────────────────────────────────────────
   12) Assortiment hero (assortment.php .shop-hero) - Enka zwart/wit
   DutchLine toont hier een blauwe afgeronde "Dealer Shop" hero. Enka is B2C
   consument zonder dealers: zwarte balk, scherpe hoeken, Barlow Condensed.
   ────────────────────────────────────────────────────────────────────────── */
body.is-enka .shop-hero {
  background: var(--ek-surface-dark);
  border-radius: var(--ek-r-lg);
}
body.is-enka .shop-hero::before { display: none; }
body.is-enka .shop-hero-title {
  font-family: var(--ek-font-display);
  text-transform: uppercase;
  letter-spacing: 0;
}
body.is-enka .shop-hero-btn.is-white {
  color: var(--ek-ink);
}

/* ──────────────────────────────────────────────────────────────────────────
   13) Responsive (Phase 3)
   Uitzondering op mobile-first: onderstaande max-width queries zijn bewuste
   mobiele verrijkingen bovenop GEDEELDE componenten (Bootstrap modal,
   dl-table). De basisstijl van die componenten is DutchLine-breed en mag
   hier niet herschreven worden; alleen het mobiele gedrag wijkt af.
   ────────────────────────────────────────────────────────────────────────── */

/* Modals als full-screen sheet op telefoons (spiegel van Bootstrap's
   eigen .modal-fullscreen-sm-down patroon, zonder markup-wijziging) */
@media (max-width: 575.98px) {
  body.is-enka .modal-dialog {
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: stretch;
  }
  body.is-enka .modal-content {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

/* Datatabellen (accountpagina's /account/*): scoped horizontale scroll met
   sticky eerste kolom. Stacken kan niet generiek: de dl-table markup is
   gedeeld met DutchLine en heeft geen data-labels per cel. */
@media (max-width: 767.98px) {
  body.is-enka .dl-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.is-enka .dl-table th:first-child,
  body.is-enka .dl-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--ek-surface);
    z-index: 2;
  }
}

/* Touch targets >=44px voor gedeelde iconknoppen op touch-apparaten */
@media (pointer: coarse) {
  body.is-enka .dl-iconbtn,
  body.is-enka .dl-qbtn { min-width: 44px; min-height: 44px; }
}



/* 7) Sharp edges - moet ALLERLAATST omdat het *::-rules bevat */

/* ---- @import /assets/css/enka/sharp-edges.css ---- */
/* =========================================================
   enka/sharp-edges.css
   ---------------------------------------------------------
   Enka heeft een scherper visueel taalgebruik dan DutchLine.
   Deze CSS cappt alle border-radius op 5px en herstelt
   uitzonderingen (circles, pills, full-width sections).
   Voorheen inline in inc/header.php.
   ========================================================= */

/* Cap alle radius op het Enka-token - dekt CSS-bestanden en page-level inline styles.
   DL-tokens --r/--r2 remappen op body-niveau (":root" kan niet: --ek-r bestaat alleen
   binnen body.is-enka). */
body.is-enka { --r: var(--ek-r); --r2: var(--ek-r); }
*, *::before, *::after { border-radius: var(--ek-r) !important; }

/* Restore circles - these are more specific than * so they win */
.dl-spinner, .dl-dot, .spinner-border, .spinner-grow, .rounded-circle,
*[style*="border-radius:50%"], *[style*="border-radius: 50%"] { border-radius: 50% !important; }

/* Decoratieve cirkel in de admin-hero: als vierkant blok werd dit een zichtbare
   lichte balk rechts in de header. */
.dl-admin-hero::after { border-radius: 50% !important; }

/* Restore pills/progress bars */
.dl-pill, .rounded-pill, .progress-bar,
.dl-bar-fill, .db-bar, .db-bar-fill,
*::-webkit-scrollbar-thumb { border-radius: var(--ek-r-pill) !important; }

/* Full-width sections must stay sharp */
.dl-topbar-v4, .dl-topbar-v4 * { border-radius: 0 !important; }
.dl-topbar-v4 .dl-dot { border-radius: 50% !important; }
.enka-footer, .enka-footer-bottom { border-radius: 0 !important; }

/* Mega menu category heading separator line */
.enka-mega-head { border-radius: 0 !important; }

/* CSS triangle caret - border-radius distorts the triangle shape */
.enka-caret, .dl-caret { border-radius: 0 !important; }




/* ---- /assets/css/toast.css ---- */
/* =========================================================
   toast.css - DutchLine Toasts
   - Top-right stacked toasts
   - Same status colors as alerts
   - Progress bar timer (configurable)
   - Soft premium UI (no heavy gradients)
   ========================================================= */

:root{
  /* Fallbacks if theme-core not loaded (still prefer theme-core vars) */
  --dl-toast-z: 1990;
  --dl-toast-gap: 10px;
  --dl-toast-w: 380px;
  --dl-toast-w-sm: calc(100vw - 24px);
  --dl-toast-pad: 14px;
  --dl-toast-r: 18px;
}

/* Container */
.dl-toast-stack{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--dl-toast-z);
  width: min(var(--dl-toast-w), var(--dl-toast-w-sm));
  display: flex;
  flex-direction: column;
  gap: var(--dl-toast-gap);
  pointer-events: none; /* only toast itself clickable */
}

/* Toast base */
.dl-toast{
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  border-radius: var(--dl-toast-r);
  border: 1px solid var(--border);
  background: rgba(255,255,255);
  box-shadow: var(--shadow);
  padding: var(--dl-toast-pad);
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: start;

  transform: translateY(-6px);
  opacity: 0;
  animation: dlToastIn .22s ease forwards;
}

@keyframes dlToastIn{
  to { transform: translateY(0); opacity: 1; }
}

.dl-toast.is-leaving{
  animation: dlToastOut .16s ease forwards;
}
@keyframes dlToastOut{
  to { transform: translateY(-6px); opacity: 0; }
}

/* Icon */
.dl-toast-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 950;
  color: var(--ink);
  background: rgba(11,18,32,.06);
  border: 1px solid var(--border);
}

/* Content */
.dl-toast-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 1px 0 0;
}
.dl-toast-text{
  color: var(--muted);
  line-height: 1.55;
  margin: 6px 0 0;
  font-size: .95rem;
}
.dl-toast-text a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(48,77,161,.22);
}
.dl-toast-text a:hover{
  border-bottom-color: rgba(48,77,161,.42);
}

/* Actions (optional) */
.dl-toast-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Close button */
.dl-toast-close{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  color: rgba(11,18,32,.78);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-weight: 950;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-toast-close:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* Topline (very DutchLine) */
.dl-toast::before{
  content:"";
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.72), rgba(128,160,208,.26), transparent);
  opacity: .85;
}

/* Progress bar */
.dl-toast-progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(11,18,32,.06);
}
.dl-toast-progress > span{
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform linear;
  background: var(--accent);
   
}

/* Status colors: same logic as alerts (soft) */
.dl-toast-success{
  border-color: rgba(32,201,151,.24);
  background: linear-gradient(180deg, rgba(32,201,151), rgba(255,255,255,.92));
}
.dl-toast-success .dl-toast-icon{
  background: rgba(32,201,151,.12);
  border-color: rgba(32,201,151,.22);
}
.dl-toast-success .dl-toast-progress > span{ background: rgba(32,201,151,.95); }

.dl-toast-info{
  border-color: rgba(13,110,253,.22);
  background: linear-gradient(180deg, rgba(13,110,253), rgba(255,255,255,.92));
}
.dl-toast-info .dl-toast-icon{
  background: rgba(13,110,253,.7);
  border-color: rgba(13,110,253,.18);
}
.dl-toast-info .dl-toast-progress > span{ background: rgba(13,110,253,.92); }

.dl-toast-warning{
  border-color: rgba(255,193,7,.24);
  background: linear-gradient(180deg, rgba(255,193,7), rgba(255,255,255,.92));
}
.dl-toast-warning .dl-toast-icon{
  background: rgba(255,193,7,.14);
  border-color: rgba(255,193,7,.22);
}
.dl-toast-warning .dl-toast-progress > span{ background: rgba(255,193,7,.95); }

.dl-toast-danger,
.dl-toast-error{
  border-color: rgba(255,77,77,.22);
  background: linear-gradient(180deg, rgba(255,77,77), rgba(255,255,255,.92));
}
.dl-toast-danger .dl-toast-icon,
.dl-toast-error .dl-toast-icon{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.20);
}
.dl-toast-danger .dl-toast-progress > span,
.dl-toast-error .dl-toast-progress > span{ background: rgba(255,77,77,.92); }

/* Neutral: calmer, no brand tint */
.dl-toast-neutral{
  border-color: var(--border);
  background: rgba(255,255,255,.92);
}
.dl-toast-neutral .dl-toast-icon{
  background: rgba(11,18,32,.06);
  border-color: var(--border);
}
.dl-toast-neutral .dl-toast-progress > span{ background: rgba(11,18,32,.45); }

/* Accent: DutchLine brand */
.dl-toast-accent{
  border-color: rgba(48,77,161,.22);
  background: linear-gradient(180deg, rgba(48,77,161), rgba(255,255,255,.92));
}
.dl-toast-accent .dl-toast-icon{
  background: rgba(48,77,161,.12);
  border-color: rgba(48,77,161,.18);
}
.dl-toast-accent .dl-toast-progress > span{ background: rgba(48,77,161,.95); }

/* Compact variant */
.dl-toast-compact{
  padding: 12px;
  grid-template-columns: 38px 1fr auto;
}
.dl-toast-compact .dl-toast-icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
}
.dl-toast-compact .dl-toast-text{ margin-top: 4px; }

/* Confirm variant (no auto close unless you close) */
.dl-toast-confirm .dl-toast-progress{ display:none; }

/* Pause hint (when hovering) */
.dl-toast.is-paused .dl-toast-progress > span{
  opacity: .55;
}

/* Mobile: stack width full-ish */
@media (max-width: 575px){
  .dl-toast-stack{
    left: 12px;
    right: 12px;
    width: auto;
  }
}


/* ---- /assets/css/widgets.css ---- */
/* =========================================================
   widgets.css - DutchLine UI Widgets
   - KPI cards, panels, lists, mini charts, tables, states
   - consistent spacing, actions, headers
   - loading skeletons + empty/error blocks
   ========================================================= */

:root{
  --dl-success: #20c997;
  --dl-warning: #ffc107;
  --dl-danger:  #ff4d4d;
  --dl-info:    #0d6efd;

  --dl-success-soft: rgba(32,201,151,.12);
  --dl-warning-soft: rgba(255,193,7,.14);
  --dl-danger-soft:  rgba(255,77,77,.12);
  --dl-info-soft:    rgba(13,110,253,.12);
}

/* Widget shell */
.dl-widget{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.dl-widget-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.94);
}

.dl-widget-title{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: 1.05rem;
}

.dl-widget-sub{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: .93rem;
}

.dl-widget-actions{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.dl-widget-body{
  padding: 14px;
}

.dl-widget-foot{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

/* Tiny icon button (for widget head) */
.dl-wiconbtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  cursor:pointer;
  font-weight: 950;
}
.dl-wiconbtn:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* KPI widget (single card) */
.dl-kpi{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  padding: 14px;
  height: 100%;
}

.dl-kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.dl-kpi-label{
  color: var(--muted);
  font-weight: 850;
  letter-spacing: .01em;
  font-size: .93rem;
}

.dl-kpi-value{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 1.75rem;
  line-height: 1.05;
}

.dl-kpi-meta{
  margin-top: 8px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.dl-trend{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: .85rem;
  white-space:nowrap;
}

.dl-trend.up{
  border-color: rgba(32,201,151,.24);
  background: rgba(32,201,151,.12);
}
.dl-trend.down{
  border-color: rgba(255,77,77,.24);
  background: rgba(255,77,77,.12);
}
.dl-trend.neutral{
  background: rgba(11,18,32,.06);
}

/* KPI grid */
.dl-kpi-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.dl-kpi-col-3{ grid-column: span 3; }
.dl-kpi-col-4{ grid-column: span 4; }
.dl-kpi-col-6{ grid-column: span 6; }
.dl-kpi-col-12{ grid-column: span 12; }

@media (max-width: 991px){
  .dl-kpi-col-3,.dl-kpi-col-4,.dl-kpi-col-6{ grid-column: span 12; }
}

/* List widget */
.dl-wlist{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.dl-witem{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-witem:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: 0 16px 40px rgba(11,18,32,.08);
}
.dl-witem-left{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  min-width: 0;
}
.dl-wdot{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 950;
  border: 1px solid var(--border);
  background: rgba(11,18,32,.06);
  flex: 0 0 auto;
}
.dl-wdot.success{ border-color: rgba(32,201,151,.22); background: rgba(32,201,151,.12); }
.dl-wdot.warning{ border-color: rgba(255,193,7,.22); background: rgba(255,193,7,.14); }
.dl-wdot.danger{  border-color: rgba(255,77,77,.22); background: rgba(255,77,77,.12); }
.dl-wdot.info{    border-color: rgba(13,110,253,.22); background: rgba(13,110,253,.12); }

.dl-witem-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.2;
}
.dl-witem-sub{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dl-witem-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

/* Mini chart placeholder */
.dl-mini-chart{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  height: 86px;
  overflow:hidden;
  position:relative;
}
.dl-mini-chart::after{
  content:"";
  position:absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,18,32,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,18,32,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .28;
  pointer-events:none;
}

/* Progress bar (widget style) */
.dl-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.08);
  overflow:hidden;
}
.dl-progress > span{
  display:block;
  height:100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s ease;
}

/* Table widget wrapper */
.dl-wtable{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  overflow:hidden;
  background: rgba(255,255,255,.92);
}
.dl-wtable .table{
  margin: 0;
}
.dl-wtable thead th{
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.78);
  background: rgba(255,255,255,.94);
}
.dl-wtable tbody td{
  vertical-align: middle;
}
.dl-wtable tbody tr:hover{
  background: rgba(48,77,161,.05);
}

/* Widget states */
.dl-wstate{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(180deg, rgba(48,77,161,.06), rgba(255,255,255,.88));
  padding: 14px;
}
.dl-wstate .t{
  font-weight: 950;
  margin: 0;
  letter-spacing: -.01em;
}
.dl-wstate .p{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.6;
}
.dl-wstate.error{
  border-color: rgba(255,77,77,.28);
  background: linear-gradient(180deg, rgba(255,77,77,.10), rgba(255,255,255,.92));
}

/* Loading skeleton */
.dl-skel{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    rgba(11,18,32,.06) 0%,
    rgba(11,18,32,.06) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(11,18,32,.06) 70%,
    rgba(11,18,32,.06) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  animation: dlSkel 1.4s ease-in-out infinite;
}
@keyframes dlSkel{
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.dl-skel-line{ height: 12px; border-radius: 10px; }
.dl-skel-line.lg{ height: 18px; }
.dl-skel-line.sm{ height: 10px; opacity:.8; }

.dl-hidden{ display:none !important; }
/* =========================
   DutchLine Tooltip (dl-tooltip)
   Gebruik:
   <span data-dl-tooltip="Tooltip tekst">Hover/focus</span>

   Optioneel:
   - data-dl-tooltip-pos="top|bottom|left|right" (default: top)
   - data-dl-tooltip-align="start|center|end"   (default: center)
   ========================= */

[data-dl-tooltip]{
  position: relative;
  z-index: 1;
  isolation: isolate;           /* eigen stacking context */
}

/* basis */
[data-dl-tooltip]::after,
[data-dl-tooltip]::before{
  position: absolute;
  opacity: 0;
  pointer-events: none;
    z-index: 100001;
  transition: opacity .14s ease, transform .14s ease;
}

/* bubble */
[data-dl-tooltip]::after{
  content: attr(data-dl-tooltip);
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: rgba(12, 18, 28, .96);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  white-space: nowrap;
  /* reset properties die buttons.css via ::after zet */
  right: auto;
  height: auto;
  width: auto;
}

/* arrow */
[data-dl-tooltip]::before{
  content: "";
  width: 0;
  height: 0;
}

/* show on hover/focus */
[data-dl-tooltip]:hover::after,
[data-dl-tooltip]:hover::before,
[data-dl-tooltip]:focus-visible::after,
[data-dl-tooltip]:focus-visible::before{
  opacity: 1;
  z-index: 100000;
}

/* =========================
   DEFAULT: top + center
   ========================= */
[data-dl-tooltip]::after{
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, -6px);
}
[data-dl-tooltip]::before{
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translate(-50%, -6px);

  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip]:hover::after,
[data-dl-tooltip]:hover::before,
[data-dl-tooltip]:focus-visible::after,
[data-dl-tooltip]:focus-visible::before{
  transform: translate(-50%, 0);
}

/* =========================
   ALIGN (top/bottom): start|center|end
   ========================= */
[data-dl-tooltip][data-dl-tooltip-align="start"]::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]::before{
  left: 0;
  transform: translate(0, -6px);
}
[data-dl-tooltip][data-dl-tooltip-align="start"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-align="start"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]:focus-visible::before{
  transform: translate(0, 0);
}

[data-dl-tooltip][data-dl-tooltip-align="end"]::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]::before{
  left: auto;
  right: 0;
  transform: translate(0, -6px);
}
[data-dl-tooltip][data-dl-tooltip-align="end"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-align="end"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]:focus-visible::before{
  transform: translate(0, 0);
}

/* =========================
   POS: bottom
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]::after{
  top: calc(100% + 10px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]::before{
  top: calc(100% + 4px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 6px);

  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(12, 18, 28, .96);
  border-top: 0;
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:focus-visible::before{
  transform: translate(-50%, 0);
}

/* bottom + align start/end */
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]::before{
  left: 0;
  transform: translate(0, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:focus-visible::before{
  transform: translate(0, 0);
}

[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]::before{
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:focus-visible::before{
  transform: translate(0, 0);
}

/* =========================
   POS: left
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="left"]::after{
  right: calc(100% + 10px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-6px, -50%);
}
[data-dl-tooltip][data-dl-tooltip-pos="left"]::before{
  right: calc(100% + 4px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-6px, -50%);

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip][data-dl-tooltip-pos="left"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:focus-visible::before{
  transform: translate(0, -50%);
}

/* =========================
   POS: right
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="right"]::after{
  left: calc(100% + 10px);
  top: 50%;
  bottom: auto;
  transform: translate(6px, -50%);
}
[data-dl-tooltip][data-dl-tooltip-pos="right"]::before{
  left: calc(100% + 4px);
  top: 50%;
  bottom: auto;
  transform: translate(6px, -50%);

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip][data-dl-tooltip-pos="right"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:focus-visible::before{
  transform: translate(0, -50%);
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  [data-dl-tooltip]::after,
  [data-dl-tooltip]::before{
    transition: none;
  }
}
.dl-tooltip-layer,
.dl-card,
.dl-table-wrap,
.dl-form-row{
  overflow: visible;
}

/* ---- /assets/css/badges.css ---- */
/* =========================================================
   badges.css - DutchLine UI (Badges) v1.0
   Goals:
   - Non-breaking: supports existing .dl-pill / .dl-badge
   - Future-proof: variants, sizes, dots, icons, clickable, closable
   - Token-based colors (works with your existing CSS vars)
   - Accessible defaults, calm premium styling
   ========================================================= */

/* ---------- Tokens (safe defaults) ---------- */
:root {
    --dl-badge-radius: 999px;
    --dl-badge-radius-sm: 12px;
    --dl-badge-font: 850;
    --dl-badge-letter: .01em;
    --dl-badge-pad-y: 8px;
    --dl-badge-pad-x: 10px;
    --dl-badge-pad-y-sm: 6px;
    --dl-badge-pad-x-sm: 8px;
    --dl-badge-pad-y-lg: 10px;
    --dl-badge-pad-x-lg: 12px;
    --dl-badge-border: var(--border);
    --dl-badge-border-2: var(--border2);
    --dl-badge-bg: rgba(255, 255, 255);
    --dl-badge-ink: rgba(11, 18, 32);
    --dl-badge-muted: var(--muted);
    --dl-accent-bg: var(--accent-soft, rgba(48, 77, 161));
    --dl-accent-bd: rgba(48, 77, 161);
    --dl-accent-ink: rgba(11, 18, 32);
    --dl-success-bg: rgba(32, 201, 151);
    --dl-success-bd: rgba(32, 201, 151);
    --dl-success-ink: rgba(11, 18, 32);
    --dl-danger-bg: rgba(255, 77, 77);
    --dl-danger-bd: rgba(255, 77, 77);
    --dl-danger-ink: rgba(11, 18, 32);
    --dl-warning-bg: rgba(255, 193, 7);
    --dl-warning-bd: rgba(255, 193, 7);
    --dl-warning-ink: rgba(11, 18, 32);
    --dl-info-bg: rgba(13, 110, 253);
    --dl-info-bd: rgba(13, 110, 253);
    --dl-info-ink: rgba(11, 18, 32);
    --dl-neutral-bg: rgba(11, 18, 32);
    --dl-neutral-bd: rgba(11, 18, 32);
    --dl-neutral-ink: rgba(11, 18, 32);
    --dl-soft-shadow: 0 10px 22px rgba(11, 18, 32, .2);
    --dl-soft-shadow-hover: 0 12px 26px rgba(11, 18, 32, .3);
}

/* =========================================================
   Base badge component
   - keep .dl-pill and .dl-badge as aliases
   ========================================================= */
.dl-badge,
.dl-pill{
  position: static;
  top: auto;
  left: auto;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: var(--dl-badge-pad-y) var(--dl-badge-pad-x);
  border-radius: var(--dl-badge-radius);
  border: 1px solid var(--dl-badge-border);
  background: var(--dl-badge-bg);
  color: var(--dl-badge-ink);
  font-weight: var(--dl-badge-font);
  letter-spacing: var(--dl-badge-letter);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  user-select:none;
}

/* Square-ish "label" style (optional) */
.dl-badge.dl-badge-label{
  border-radius: var(--dl-badge-radius-sm);
}

/* Sizes */
.dl-badge.dl-badge-sm,
.dl-pill.dl-pill-sm{
  padding: var(--dl-badge-pad-y-sm) var(--dl-badge-pad-x-sm);
  font-size: .88rem;
  border-radius: 999px;
}

.dl-badge.dl-badge-lg,
.dl-pill.dl-pill-lg{
  padding: var(--dl-badge-pad-y-lg) var(--dl-badge-pad-x-lg);
  font-size: 1.02rem;
}

/* Muted */
.dl-badge.dl-badge-muted,
.dl-pill.dl-pill-muted{
  color: var(--dl-badge-muted);
}

/* =========================================================
   Variants (soft)
   ========================================================= */
.dl-badge-accent{ background: var(--dl-accent-bg); border-color: var(--dl-accent-bd); color: var(--dl-accent-ink); }
.dl-badge-success{ background: var(--dl-success-bg); border-color: var(--dl-success-bd); color: #fff; }
.dl-badge-danger{  background: var(--dl-danger-bg);  border-color: var(--dl-danger-bd);  color: #fff; }
.dl-badge-warning{ background: var(--dl-warning-bg); border-color: var(--dl-warning-bd); color: #fff; }
.dl-badge-info{    background: var(--dl-info-bg);    border-color: var(--dl-info-bd);   color: #fff; }
.dl-badge-neutral{ background: var(--dl-neutral-bg); border-color: var(--dl-neutral-bd); color: #fff; }

/* Outline variants (no fill) */
.dl-badge-outline{ background: transparent; color: var(--dl-neutral-ink);}
.dl-badge-outline.dl-badge-accent{ border-color: var(--dl-accent-bd); }
.dl-badge-outline.dl-badge-success{ border-color: var(--dl-success-bd); }
.dl-badge-outline.dl-badge-danger{ border-color: var(--dl-danger-bd); }
.dl-badge-outline.dl-badge-warning{ border-color: var(--dl-warning-bd); }
.dl-badge-outline.dl-badge-info{ border-color: var(--dl-info-bd); }
.dl-badge-outline.dl-badge-neutral{ border-color: var(--dl-neutral-bd); }

/* Solid variants (optional; calm) */
.dl-badge-solid{ color: #fff; border-color: transparent; }
.dl-badge-solid.dl-badge-accent{ background: rgba(48,77,161,.88); }
.dl-badge-solid.dl-badge-success{ background: rgba(32,201,151,.88); }
.dl-badge-solid.dl-badge-danger{ background: rgba(255,77,77,.86); }
.dl-badge-solid.dl-badge-warning{ background: rgba(255,193,7,.92); color: rgba(11,18,32,.92); }
.dl-badge-solid.dl-badge-info{ background: rgba(13,110,253,.88); }
.dl-badge-solid.dl-badge-neutral{ background: rgba(11,18,32,.72); }

/* =========================================================
   Dot indicator (status dot)
   ========================================================= */
.dl-badge-dot::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}

.dl-badge-dot.dl-badge-success::before{ background: rgba(32,201,151,.95); }
.dl-badge-dot.dl-badge-danger::before{  background: rgba(255,77,77,.95); }
.dl-badge-dot.dl-badge-warning::before{ background: rgba(255,193,7,.95); }
.dl-badge-dot.dl-badge-info::before{    background: rgba(13,110,253,.95); }
.dl-badge-dot.dl-badge-neutral::before{ background: rgba(11,18,32,.55); }
.dl-badge-dot.dl-badge-accent::before{  background: rgba(48,77,161,.95); }

/* =========================================================
   Icon support
   - Put any <i> or <svg> inside badge
   ========================================================= */
.dl-badge i,
.dl-badge svg,
.dl-pill i,
.dl-pill svg{
  flex: 0 0 auto;
  opacity: .85;
}

/* =========================================================
   Clickable / link badges
   ========================================================= */
a.dl-badge,
a.dl-pill,
button.dl-badge,
button.dl-pill{
  cursor:pointer;
  text-decoration:none;
}

.dl-badge.is-clickable,
.dl-pill.is-clickable{
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: var(--dl-soft-shadow);
}

.dl-badge.is-clickable:hover,
.dl-pill.is-clickable:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--dl-badge-border-2);
  color: var(--ink);
  box-shadow: var(--dl-soft-shadow-hover);
}

.dl-badge:focus,
.dl-pill:focus{ outline:none; }
.dl-badge:focus-visible,
.dl-pill:focus-visible{
  box-shadow: 0 0 0 6px var(--focus), var(--dl-soft-shadow-hover);
}

/* Disabled */
.dl-badge.is-disabled,
.dl-pill.is-disabled,
.dl-badge[aria-disabled="true"],
.dl-pill[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}

/* =========================================================
   Count badge (like notifications)
   ========================================================= */
.dl-badge-count{
  display:inline-grid;
  place-items:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--dl-badge-border);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: .82rem;
  color: rgba(11,18,32,.90);
}

/* =========================================================
   Closable badge (optional)
   - Add button[data-dl-badge-close]
   ========================================================= */
.dl-badge .dl-badge-close,
.dl-pill .dl-badge-close{
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  opacity: .7;
}

.dl-badge .dl-badge-close:hover,
.dl-pill .dl-badge-close:hover{
  opacity: 1;
  background: rgba(11,18,32,.06);
}

/* =========================================================
   Group helper (optional)
   ========================================================= */
.dl-badge-group{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
/* =========================================================
   Corner counter (notification dot/number on edge)
   Usage:
     <span class="dl-pill dl-badge-accent dl-badge-corner">
       <i class="bi bi-bell"></i> Meldingen
       <span class="dl-badge-corner-count">1</span>
     </span>
   ========================================================= */

.dl-badge-corner,
.dl-pill.dl-badge-corner,
.dl-badge.dl-badge-corner{
  position: relative;
  padding-right: calc(var(--dl-badge-pad-x) + 14px); /* ruimte voor corner */
}

.dl-badge-corner .dl-badge-corner-count{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  border-radius: 999px;
  display: inline-grid;
  place-items: center;

  font-weight: 950;
  font-size: .74rem;
  line-height: 1;

  color: #fff;
  background: rgba(255,77,77,.95); /* default “notif” */
  border: 2px solid rgba(255,255,255,.92); /* ring voor contrast */
  box-shadow: 0 10px 18px rgba(11,18,32,.18);
}

/* Small badge corner */
.dl-badge-sm.dl-badge-corner .dl-badge-corner-count,
.dl-pill-sm.dl-badge-corner .dl-badge-corner-count{
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  font-size: .70rem;
}

/* Large badge corner */
.dl-badge-lg.dl-badge-corner .dl-badge-corner-count,
.dl-pill-lg.dl-badge-corner .dl-badge-corner-count{
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  font-size: .78rem;
}

/* Variant helpers for the corner itself */
.dl-badge-corner .dl-badge-corner-count.is-accent{ background: rgba(48,77,161); }
.dl-badge-corner .dl-badge-corner-count.is-success{ background: rgba(32,201,151,.95); }
.dl-badge-corner .dl-badge-corner-count.is-warning{ background: rgba(255,193,7,.98); color: rgba(11,18,32,.92); }
.dl-badge-corner .dl-badge-corner-count.is-info{ background: rgba(13,110,253,.95); }
.dl-badge-corner .dl-badge-corner-count.is-neutral{ background: rgba(11,18,32); }

/* Dot-only (no number) */
.dl-badge-corner .dl-badge-corner-count.is-dot{
  min-width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
}


/* ---- /assets/css/cards.css ---- */
/* =========================================================
   cards.css - DutchLine Cards (premium extensions)
   Requires: theme-core.css variables ( --r2, --border, --border2, --shadow2, --panel, --surface, --muted, --muted2, --ink )
   ========================================================= */

:root{
  --dl-card-pad: var(--card-pad, 16px);
  --dl-card-gap: 12px;

  --dl-card-ring: rgba(48,77,161,.22);
  --dl-card-ring2: rgba(48,77,161,.34);

  --dl-card-shine: rgba(255,255,255,.72);
  --dl-card-shine2: rgba(255,255,255,.12);
}

/* ---------------------------------------------------------
   Base (non-breaking extension to your .dl-card)
   --------------------------------------------------------- */

.dl-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
  isolation: isolate;
}

.dl-card:focus-visible{
  box-shadow:
    0 0 0 4px var(--dl-card-ring),
    var(--shadow2);
  border-color: var(--border2);
}

/* Premium hover sheen overlay */
.dl-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    radial-gradient(520px 220px at 25% 15%, rgba(48,77,161,.10), transparent 60%),
    radial-gradient(600px 220px at 75% 0%, rgba(128,160,208,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 36%);
  mix-blend-mode: normal;
}
.dl-card:hover::before{ opacity: 1; }

/* Optional "clickable" cursor */
.dl-card[data-href]{
  cursor: pointer;
}

/* ---------------------------------------------------------
   Card layout helpers
   --------------------------------------------------------- */

/* Header bar - sits above dl-card-body inside a dl-card */
.dl-card-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--dl-card-pad);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  font-weight: 700;
  font-size: .95rem;
  color: rgba(11,18,32,.86);
  min-height: 46px;
  flex-shrink: 0;
}

/* Round top corners to match parent card */
.dl-card > .dl-card-header:first-child{
  border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0;
}

/* Subtle accent line at the very top of the header (mirrors dl-card-topline vibe) */
.dl-card > .dl-card-header:first-child::before{
  display: none; /* opt-in only via .has-accent modifier */
}
.dl-card > .dl-card-header.has-accent{
  background:
    linear-gradient(180deg, rgba(48,77,161,.04), rgba(255,255,255,.96)),
    rgba(255,255,255,.96);
  border-top: 2px solid rgba(48,77,161,.40);
  border-radius: calc(var(--r2) - 1px) calc(var(--r2) - 1px) 0 0;
}

/* When header is NOT the first child (e.g. after topline) */
.dl-card > .dl-card-topline + .dl-card-header{
  border-radius: 0;
}

.dl-card-body{
  display: grid;
  gap: var(--dl-card-gap);
}

.dl-card-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-width: 0;
}

.dl-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px var(--dl-card-pad);
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.82);
}

.dl-card-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
}

/* Compact density */
.dl-card.is-compact .dl-card-body{ gap: 10px; }
.dl-card.is-compact .dl-card-body{ padding: 14px; }
.dl-card.is-compact .dl-card-footer{ padding: 10px 14px; }

/* ---------------------------------------------------------
   Media (thumb variants)
   --------------------------------------------------------- */

.dl-thumb{
  overflow:hidden;
}

.dl-thumb.is-square{ aspect-ratio: 1 / 1; }
.dl-thumb.is-portrait{ aspect-ratio: 4 / 5; }
.dl-thumb.is-landscape{ aspect-ratio: 16 / 10; }
.dl-thumb.is-wide{ aspect-ratio: 21 / 9; }

.dl-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* Cover variant for real photography */
.dl-thumb.is-cover img{ object-fit: cover; }

/* Subtle inner border for media area */
.dl-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border: 1px solid rgba(11,18,32,.06);
  border-radius: inherit;
  pointer-events:none;
}

/* ---------------------------------------------------------
   Badges & status
   --------------------------------------------------------- */

.dl-badge{
  z-index: 2;
}

.dl-badge.is-soft{
  background: rgba(255,255,255,.92);
}

.dl-badge.is-accent{
  border-color: rgba(48,77,161,.25);
  box-shadow: 0 0 0 6px rgba(48,77,161,.08);
}

.dl-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: .85rem;
  color: rgba(11,18,32,.84);
}
.dl-status .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(48,77,161,.25);
  box-shadow: 0 6px 16px rgba(11,18,32,.10);
}

/* ---------------------------------------------------------
   Meta list (nice for specs)
   --------------------------------------------------------- */

.dl-meta-list{
  display:grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style:none;
  color: var(--muted2);
  font-size: .92rem;
}
.dl-meta-list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  line-height: 1.45;
}
.dl-meta-list .k{
  min-width: 100px;
  color: rgba(11,18,32,.62);
}
.dl-meta-list .v{
  font-weight: 800;
  color: rgba(11,18,32,.88);
}

/* ---------------------------------------------------------
   Selectable cards (optional JS)
   --------------------------------------------------------- */

.dl-card.is-selectable{
  padding-left: 0; /* purely semantic */
}

.dl-card .dl-card-select{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  font-weight: 950;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  z-index: 3;
}
.dl-card:hover .dl-card-select{
  opacity: 1;
  transform: translateY(0);
}
.dl-card.is-selected{
  border-color: rgba(48,77,161,.38);
  box-shadow:
    0 0 0 6px rgba(48,77,161,.12),
    var(--shadow2);
}
.dl-card.is-selected .dl-card-select{
  opacity: 1;
  border-color: rgba(48,77,161,.35);
  box-shadow: 0 10px 22px rgba(11,18,32,.12);
}
.dl-card.is-selected .dl-card-select::after{
  content:"✓";
}

/* ---------------------------------------------------------
   Collapsible card (optional JS)
   --------------------------------------------------------- */

.dl-card .dl-card-collapse{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-card .dl-card-collapse:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}
.dl-card .dl-card-collapse .chev{
  display:inline-block;
  transition: transform .18s ease;
}
.dl-card.is-collapsed .dl-card-collapse .chev{
  transform: rotate(-90deg);
}
.dl-card .dl-card-collapse-target{
  /* this is the content region you collapse */
}
.dl-card.is-collapsed .dl-card-collapse-target{
  display:none !important;
}

/* ---------------------------------------------------------
   Skeleton / loading (pure CSS utility)
   --------------------------------------------------------- */

.dl-skeleton{
  position: relative;
  overflow:hidden;
  border-radius: 12px;
  background: rgba(11,18,32,.06);
}
.dl-skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-55%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: dl_skeleton 1.1s linear infinite;
}
@keyframes dl_skeleton{
  to{ transform: translateX(55%); }
}

/* ---------------------------------------------------------
   Panel (nice spacing helpers - doesn't override your dl-panel)
   --------------------------------------------------------- */

.dl-panel .dl-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.dl-panel .dl-panel-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.15;
  font-size: 1.2rem;
  margin: 0;
}

.dl-panel .dl-panel-sub{
  margin: 6px 0 0;
  color: var(--muted2);
  font-size: .95rem;
  line-height: 1.55;
}
/* =========================================================
   Auto-fix: dropdowns/selects inside cards
   - No extra classes required
   - Uses :has() where supported
   ========================================================= */

@supports selector(.dl-card:has(select)){

  /* If a card contains any form control, allow popovers to escape */
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"], [aria-haspopup="listbox"], [aria-haspopup="menu"], [data-dropdown]){
    overflow: visible; /* key */
  }

  /* Keep only the media area clipped (so rounded card still looks perfect) */
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"], [aria-haspopup="listbox"], [aria-haspopup="menu"], [data-dropdown]) .dl-thumb{
    overflow: hidden;
  }

  /* Prevent transform/stacking weirdness when interacting with form fields */
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"]) :is(select, input, textarea, [role="combobox"]):focus{
    outline: none;
  }
  .dl-card:has(select, .form-select, input, textarea, .dl-select, [data-select], [role="combobox"]):focus-within{
    transform: none !important;
    z-index: 30;
  }
}
/* Fallback class for browsers without :has() (added by cards.js automatically) */
.dl-card.dl-card--hasform{
  overflow: visible;
}
.dl-card.dl-card--hasform .dl-thumb{
  overflow: hidden;
}
.dl-card.dl-card--hasform:focus-within{
  transform: none !important;
  z-index: 30;
}


/* ---- /assets/css/hero.css ---- */
/* ==========================================================================
   hero.css
   --------------------------------------------------------------------------
   Donkere page-headers (hero-panelen) merkbreed leesbaar maken.

   Probleem: een hero heeft de accentkleur als achtergrond (DutchLine navy of
   Enka zwart). Componenten binnen die hero gebruiken diezelfde accentkleur
   voor hun tekst/vulling - dl-btn-soft, dl-btn-neutral, dl-admin-badge.accent,
   links - waardoor ze onzichtbaar worden (donker op donker).

   Oplossing: elk donker hero-paneel krijgt de class `dl-hero-dark` (of is een
   `dl-admin-hero`) en alle componenten daarbinnen worden geforceerd naar een
   wit paar. Zo hoeft geen enkele pagina dit nog zelf te regelen.

   Gebruik:
     <div class="dl-hero-dark">...</div>          -> merkkleur + witte componenten
     <div class="mijn-eigen-hero dl-hero-dark">   -> eigen layout, wel de fix

   Wordt op ELKE pagina geladen (ook dealers/warehouse), niet alleen admin.
   ========================================================================== */

:root {
  /* Merk-afhankelijke hero-achtergrond. DutchLine = navy, Enka = zwart. */
  --dl-hero-gradient: linear-gradient(135deg, var(--dl-blue-700, #304DA1), var(--dl-blue-900, #1E3375));
}
body.is-enka {
  --dl-hero-gradient: linear-gradient(135deg, #0a0a0a, #1a1a1a);
}

.dl-hero-dark {
  background: var(--dl-hero-gradient);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Gedempte tekst: blijft gedempt, maar wit-transparant i.p.v. donkergrijs.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .text-muted,
:is(.dl-admin-hero, .dl-hero-dark) .cell-muted,
:is(.dl-admin-hero, .dl-hero-dark) .dlac-meta,
:is(.dl-admin-hero, .dl-hero-dark) .form-label,
:is(.dl-admin-hero, .dl-hero-dark) .dl-help,
:is(.dl-admin-hero, .dl-hero-dark) .opacity-75 { color: rgba(255, 255, 255, .78) !important; }

/* Losse links (geen knop) - wit met subtiele underline. */
:is(.dl-admin-hero, .dl-hero-dark) a:not(.dl-btn):not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
}
:is(.dl-admin-hero, .dl-hero-dark) a:not(.dl-btn):not(.btn):hover { text-decoration-color: #fff; }

/* --------------------------------------------------------------------------
   Knoppen: primary = wit gevuld, alle zachte varianten = wit omlijnd.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-primary,
:is(.dl-admin-hero, .dl-hero-dark) .btn-primary {
  background: #fff !important;
  background-image: none !important;
  color: var(--accent-dark, #1E3375) !important;
  border-color: #fff !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-ghost,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-soft,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-neutral,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-outline,
:is(.dl-admin-hero, .dl-hero-dark) .btn-light,
:is(.dl-admin-hero, .dl-hero-dark) .btn-outline-primary,
:is(.dl-admin-hero, .dl-hero-dark) .btn-secondary {
  background: rgba(255, 255, 255, .12) !important;
  background-image: none !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .45) !important;
}
/* Semantische varianten houden hun kleur, maar met witte tekst. */
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-success,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-danger,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn-warning { color: #fff !important; }

:is(.dl-admin-hero, .dl-hero-dark) .dl-btn::before,
:is(.dl-admin-hero, .dl-hero-dark) .dl-btn::after { background: none !important; opacity: 0 !important; }

@media (hover:hover) {
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-primary:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .btn-primary:hover { background: rgba(255, 255, 255, .88) !important; }
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-ghost:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-soft:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-neutral:hover,
  :is(.dl-admin-hero, .dl-hero-dark) .dl-btn-outline:hover { background: rgba(255, 255, 255, .24) !important; }
}

/* --------------------------------------------------------------------------
   Badges/pills: neutraal wit-transparant. Statuskleuren blijven herkenbaar
   (groen/geel/rood/blauw) maar in een lichte tint die op donker leesbaar is.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge,
:is(.dl-admin-hero, .dl-hero-dark) .dl-pill,
:is(.dl-admin-hero, .dl-hero-dark) .badge {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.ok,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-success {
  background: rgba(74, 222, 128, .20) !important;
  color: #d1fae5 !important; border-color: rgba(74, 222, 128, .45) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.warn,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-warning {
  background: rgba(250, 204, 21, .20) !important;
  color: #fef9c3 !important; border-color: rgba(250, 204, 21, .45) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.err,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-danger {
  background: rgba(248, 113, 113, .22) !important;
  color: #fee2e2 !important; border-color: rgba(248, 113, 113, .45) !important;
}
:is(.dl-admin-hero, .dl-hero-dark) .dl-admin-badge.info,
:is(.dl-admin-hero, .dl-hero-dark) .dl-badge-info {
  background: rgba(56, 189, 248, .20) !important;
  color: #e0f2fe !important; border-color: rgba(56, 189, 248, .45) !important;
}

/* --------------------------------------------------------------------------
   Formuliervelden in een hero (zoek-/filterbalk in de header).
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) .form-control,
:is(.dl-admin-hero, .dl-hero-dark) .form-select {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
:is(.dl-admin-hero, .dl-hero-dark) .form-control::placeholder { color: rgba(255, 255, 255, .65); }
:is(.dl-admin-hero, .dl-hero-dark) .form-control:focus,
:is(.dl-admin-hero, .dl-hero-dark) .form-select:focus {
  background: rgba(255, 255, 255, .18);
  border-color: #fff; color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

/* --------------------------------------------------------------------------
   Alleen .dl-admin-hero: die bevat nooit lichte sub-panelen, dus daar mag
   alle tekst hard op wit. Page-specifieke dl-hero-dark panelen regelen hun
   eigen tekstkleur (sommige hebben een wit onderblok).
   -------------------------------------------------------------------------- */
.dl-admin-hero,
.dl-admin-hero h1, .dl-admin-hero h2, .dl-admin-hero h3, .dl-admin-hero h4,
.dl-admin-hero p, .dl-admin-hero span, .dl-admin-hero strong, .dl-admin-hero b,
.dl-admin-hero small, .dl-admin-hero li, .dl-admin-hero label, .dl-admin-hero i,
.dl-admin-hero time, .dl-admin-hero div { color: #fff; }

/* --------------------------------------------------------------------------
   UITZONDERING: alles BINNEN een knop volgt de knopkleur
   --------------------------------------------------------------------------
   De regel hierboven zet elke <i>, <span> en <div> in de hero op wit. Ghost- en
   primary-knoppen krijgen in de hero juist een WITTE achtergrond met donkere
   tekst - het icoon werd daardoor wit op wit en dus onzichtbaar. Binnen een
   knop erft alles daarom de kleur van de knop zelf.
   -------------------------------------------------------------------------- */
:is(.dl-admin-hero, .dl-hero-dark) :is(.dl-btn, .btn, .dlap-btn) :is(i, span, strong, small, svg, div) {
  color: inherit;
}
/* Badges in de hero houden hun eigen status-kleuren (ok/warn/err/muted). */
:is(.dl-admin-hero, .dl-hero-dark) :is(.dl-admin-badge, .dl-badge) :is(i, span) {
  color: inherit;
}


/* ---- /assets/css/auth.css ---- */
/* Brand-aware kleur-variabelen voor de auth-paginas (login + password reset).
 * Default = DutchLine donkerblauw. Bij APP_LINE=enka krijgt body de class
 * "is-enka" en pakken alle .auth-* elementen automatisch de zwarte Enka-variant. */
:root {
  --auth-ink:        #131F3F;
  --auth-ink-2:      #1E3375;
  --auth-ink-rgb:    19, 31, 63;
  --auth-bg-1:       #f5f7fb;
  --auth-bg-2:       #eef2f8;
}
body.is-enka {
  --auth-ink:        #0a0a0a;
  --auth-ink-2:      #1a1a1a;
  --auth-ink-rgb:    10, 10, 10;
  --auth-bg-1:       #fafafa;
  --auth-bg-2:       #f2f2f2;
}

.auth-page{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(var(--auth-ink-rgb),.22), transparent 28%),
    radial-gradient(circle at left center, rgba(var(--auth-ink-rgb),.14), transparent 26%),
    linear-gradient(180deg, var(--auth-bg-1) 0%, var(--auth-bg-2) 100%);
}

.auth-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,.02) 0,
      rgba(15,23,42,.02) 1px,
      transparent 1px,
      transparent 120px
    );
  pointer-events:none;
}

.auth-layout{
  position:relative;
  z-index:1;
  min-height:calc(100vh - 160px);
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(380px, 470px);
  gap:28px;
  align-items:stretch;
  padding:42px 0;
}

.auth-hero{
  position:relative;
  min-height:640px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  background:linear-gradient(145deg, rgba(255,255,255,.95) 0%, rgba(244,248,250,.96) 100%);
  box-shadow:0 30px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}

.auth-hero::before{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--auth-ink-rgb),.18) 0%, rgba(var(--auth-ink-rgb),0) 70%);
  pointer-events:none;
}

.auth-hero::after{
  content:"";
  position:absolute;
  left:-90px;
  bottom:-90px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--auth-ink-rgb),.10) 0%, rgba(var(--auth-ink-rgb),0) 72%);
  pointer-events:none;
}

.auth-hero__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:640px;
  padding:34px;
}

.auth-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  max-width:100%;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(var(--auth-ink-rgb),.08);
  color:var(--auth-ink);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.auth-kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 6px rgba(var(--auth-ink-rgb),.10);
}

.auth-title{
  margin:0 0 14px;
  font-size:clamp(2.2rem, 4vw, 3.85rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.04em;
  color:#0f172a;
}

.auth-title span{
  color:var(--auth-ink);
}

.auth-text{
  max-width:620px;
  margin:0;
  font-size:1.05rem;
  line-height:1.8;
  color:#475569;
}

.auth-feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

.auth-feature-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 14px 34px rgba(15,23,42,.05);
  backdrop-filter:blur(8px);
}

.auth-feature-card__icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, var(--auth-ink), var(--auth-ink));
  color:#fff;
  font-size:1.08rem;
  box-shadow:0 10px 24px rgba(var(--auth-ink-rgb),.25);
}

.auth-feature-card__body h2{
  margin:0 0 5px;
  font-size:1rem;
  line-height:1.35;
  color:#0f172a;
  font-weight:800;
}

.auth-feature-card__body p{
  margin:0;
  font-size:.94rem;
  line-height:1.6;
  color:#64748b;
}

.auth-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

.auth-stat-card{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(248,250,252,.88) 100%);
  border:1px solid rgba(15,23,42,.06);
}

.auth-stat-card strong{
  display:block;
  margin-bottom:4px;
  font-size:1.55rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:#0f172a;
}

.auth-stat-card span{
  display:block;
  font-size:.86rem;
  color:#64748b;
  line-height:1.45;
}

.auth-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.auth-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.06);
  color:#334155;
  font-size:.85rem;
  font-weight:700;
}

.auth-badge i{
  color:var(--auth-ink);
}

.auth-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:640px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:28px;
  background:rgba(255,255,255,.94);
  box-shadow:0 34px 80px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.95);
  overflow:hidden;
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(180deg, var(--auth-ink), var(--auth-ink));
}

.auth-card__body{
  position:relative;
  padding:34px 30px 28px;
}

.auth-card__header{
  margin-bottom:24px;
}

.auth-card__header h2{
  margin:0 0 8px;
  font-size:2rem;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#0f172a;
  font-weight:900;
}

.auth-card__header p{
  margin:0;
  color:#64748b;
  line-height:1.7;
}

.auth-alert{
  margin-bottom:18px;
  padding:14px 16px;
  border-radius:16px;
  font-size:.95rem;
  line-height:1.55;
}

.auth-alert--danger{
  border:1px solid rgba(185,28,28,.14);
  background:#fef2f2;
  color:#991b1b;
}

.auth-alert--success{
  border:1px solid rgba(22,163,74,.14);
  background:#f0fdf4;
  color:#166534;
}

.auth-field{
  margin-bottom:18px;
}

.auth-label{
  display:block;
  margin-bottom:8px;
  font-size:.92rem;
  font-weight:800;
  color:#0f172a;
}

.auth-label--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.auth-label--split a{
  font-size:.88rem;
  font-weight:700;
  text-decoration:none;
  color:var(--auth-ink);
}

.auth-label--split a:hover{
  text-decoration:underline;
}

.auth-input-wrap{
  position:relative;
}

.auth-input-icon{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:#64748b;
  font-size:1rem;
  pointer-events:none;
}

.auth-input{
  width:100%;
  min-height:58px;
  padding:15px 16px 15px 46px;
  border-radius:18px;
  border:1px solid #dbe4ee;
  background:#fff;
  color:#0f172a;
  font-size:1rem;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
  transition:border-color .18s ease, box-shadow .18s ease;
}

.auth-input--password{
  padding-right:58px;
}

.auth-input:focus{
  outline:none;
  border-color:var(--auth-ink);
  box-shadow:0 0 0 4px rgba(var(--auth-ink-rgb),.12);
}

.auth-input.is-invalid{
  border-color:#dc2626;
  box-shadow:0 0 0 4px rgba(220,38,38,.10);
}

.auth-password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#64748b;
}

.auth-password-toggle:hover{
  background:#f8fafc;
  color:#0f172a;
}

.auth-help{
  margin-top:7px;
  font-size:.85rem;
  color:#64748b;
}

.auth-error{
  display:none;
  margin-top:7px;
  font-size:.84rem;
  color:#dc2626;
  font-weight:700;
}

.auth-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:2px 0 22px;
}

.auth-checkbox{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#475569;
  font-size:.94rem;
  user-select:none;
}

.auth-checkbox input{
  width:18px;
  height:18px;
  accent-color:var(--auth-ink);
}

.auth-submit{
  width:100%;
  min-height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:18px;
  background:linear-gradient(180deg, var(--auth-ink), var(--auth-ink));
  color:#fff;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.01em;
  box-shadow:0 18px 36px rgba(var(--auth-ink-rgb),.26);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.auth-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 42px rgba(var(--auth-ink-rgb),.30);
  color:#fff;
}

.auth-submit:disabled{
  opacity:.75;
  cursor:not-allowed;
  transform:none;
}

.auth-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

.auth-action-btn{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid #dbe4ee;
  background:#fff;
  color:#0f172a;
  font-weight:700;
  text-decoration:none;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.auth-action-btn:hover{
  transform:translateY(-1px);
  border-color:#cbd5e1;
  background:#f8fafc;
  color:#0f172a;
}

.auth-note{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(15,23,42,.08);
  font-size:.92rem;
  line-height:1.65;
  color:#64748b;
}

.auth-note a{
  color:var(--auth-ink);
  font-weight:700;
  text-decoration:none;
}

.auth-note a:hover{
  text-decoration:underline;
}

@media (max-width: 1199.98px){
  .auth-layout{
    grid-template-columns:minmax(0,1fr) minmax(360px,430px);
  }

  .auth-hero,
  .auth-hero__inner,
  .auth-card{
    min-height:600px;
  }
}

@media (max-width: 991.98px){
  .auth-layout{
    min-height:auto;
    grid-template-columns:1fr;
    padding:26px 0 36px;
  }

  .auth-hero,
  .auth-hero__inner,
  .auth-card{
    min-height:auto;
  }

  .auth-hero__inner{
    padding:28px;
  }
}

@media (max-width: 767.98px){
  .auth-layout{
    padding:18px 0 28px;
  }

  .auth-hero{
    border-radius:22px;
  }

  .auth-hero__inner{
    padding:22px 18px;
  }

  .auth-card{
    border-radius:22px;
  }

  .auth-card__body{
    padding:24px 18px 20px;
  }

  .auth-stat-grid{
    gap:10px;
  }

  .auth-stat-card strong{
    font-size:1.3rem;
  }

  .auth-title{
    font-size:2.15rem;
  }

  .auth-card__header h2{
    font-size:1.7rem;
  }

  .auth-options{
    flex-direction:column;
    align-items:flex-start;
  }

  .auth-label--split{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 479.98px){
  .auth-feature-grid{
    grid-template-columns:1fr;
  }

  .auth-actions{
    grid-template-columns:1fr;
  }

  .auth-stat-grid{
    grid-template-columns:1fr;
  }

  .auth-feature-card{
    padding:14px;
  }

  .auth-card__body{
    padding:20px 14px 16px;
  }
}

/* ---- /assets/css/cookie-consent.css ---- */
/* ============================================================
   DutchLine Cookie Consent Banner
   Stijl: DutchLine design system (--accent / --dl-color-primary)
   ============================================================ */

/* ── Banner: vast onderaan het scherm ── */
.dl-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: #fff;
  border-top: 2px solid var(--accent, #304DA1);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10);
}

/* ── Hoofdbalk ── */
.dl-cookie-banner__bar {
  padding: .85rem 0;
}

.dl-cookie-banner__text strong {
  font-weight: 700;
  color: #131F3F;
  font-size: .9rem;
}

.dl-cookie-banner__text .text-muted-2 {
  font-size: .82rem;
  color: #6b7280;
}

/* ── Uitklapbaar categorieënpaneel ── */
.dl-cookie-panel {
  background: #f8f9fc;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.dl-cookie-cat {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  height: 100%;
}

.dl-cookie-cat .fw-semibold {
  font-size: .875rem;
  color: #131F3F;
}

.dl-cookie-cat p {
  font-size: .8rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* ── "Altijd actief" badge ── */
.dl-cookie-badge-required {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent, #304DA1);
  background: color-mix(in srgb, var(--accent, #304DA1) 10%, transparent);
  border-radius: 20px;
  padding: .2rem .6rem;
  letter-spacing: .02em;
}

/* ── iOS-stijl toggle switch ── */
.dl-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.dl-toggle__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.dl-toggle__slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 24px;
  transition: background .2s;
  cursor: pointer;
}

.dl-toggle__slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  transition: transform .2s;
}

.dl-toggle__input:checked + .dl-toggle__slider {
  background: var(--accent, #304DA1);
}

.dl-toggle__input:checked + .dl-toggle__slider::before {
  transform: translateX(18px);
}

.dl-toggle__input:focus-visible + .dl-toggle__slider {
  outline: 2px solid var(--accent, #304DA1);
  outline-offset: 2px;
}

/* ── Panel footer ── */
.dl-cookie-panel .d-flex a {
  color: #6b7280;
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dl-cookie-panel .d-flex a:hover {
  color: var(--accent, #304DA1);
}

/* ── "Weigeren" even prominent als "Accepteren" ── */
#dl-cookie-reject {
  background: #fff;
  border: 1.5px solid var(--accent, #304DA1);
  color: var(--accent, #304DA1);
  font-weight: 600;
}
#dl-cookie-reject:hover {
  background: color-mix(in srgb, var(--accent, #304DA1) 8%, #fff);
  color: var(--accent, #304DA1);
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .dl-cookie-banner__bar .container {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem !important;
  }

  .dl-cookie-banner__bar .d-flex.gap-2 {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Knoppen stapelen, volle breedte, minimaal 44px raakvlak */
  .dl-cookie-banner__bar .dl-btn {
    flex: 1 1 100%;
    min-height: 44px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  /* Accepteren bovenaan als primaire keuze, weigeren direct eronder */
  #dl-cookie-accept   { order: 1; }
  #dl-cookie-reject   { order: 2; }
  #dl-cookie-customize{ order: 3; }

  .dl-cookie-panel .dl-btn { min-height: 44px; }

  .dl-cookie-cat {
    margin-bottom: .5rem;
  }
}


/* ---- /assets/css/pwa-install.css ---- */
/* /assets/css/pwa-install.css - install banner + iOS instructie modal */

/* ── Banner (rechtsonder) ───────────────────────────────────────────────────── */
.dl-pwa-banner {
  position: fixed;
  z-index: 1080;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
  width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--border, rgba(11,18,32,.10));
  border-radius: var(--r, 14px);
  box-shadow: var(--shadow, 0 20px 60px rgba(11,18,32,.18));
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon body"
    "actions actions";
  gap: 10px 12px;
  align-items: start;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .25s ease, opacity .2s ease;
  font-family: inherit;
}
.dl-pwa-banner.is-visible { transform: translateY(0); opacity: 1; }

.dl-pwa-banner__icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft, rgba(48,77,161,.10));
  color: var(--accent, #304DA1);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.dl-pwa-banner__body  { grid-area: body; min-width: 0; }
.dl-pwa-banner__title { font-weight: 700; color: var(--ink, #0b1220); margin-bottom: 2px; font-size: 14px; }
.dl-pwa-banner__text  { font-size: 13px; color: var(--muted, rgba(11,18,32,.70)); line-height: 1.4; }
.dl-pwa-banner__actions {
  grid-area: actions;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}
.dl-pwa-banner__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--muted, rgba(11,18,32,.55));
  border-radius: 8px;
  cursor: pointer;
}
.dl-pwa-banner__close:hover { background: rgba(11,18,32,.06); color: var(--ink, #0b1220); }

@media (max-width: 480px) {
  .dl-pwa-banner { right: 8px; bottom: 8px; max-width: none; width: calc(100vw - 16px); }
}

/* ── iOS instructie modal ───────────────────────────────────────────────────── */
.dl-pwa-ios {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.dl-pwa-ios.is-visible { opacity: 1; }

.dl-pwa-ios__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11,18,32,.55);
}
.dl-pwa-ios__card {
  position: relative;
  background: #fff;
  border-radius: var(--r2, 18px);
  padding: 22px 22px 18px;
  width: min(420px, calc(100vw - 24px));
  box-shadow: var(--shadow, 0 20px 60px rgba(11,18,32,.18));
}
.dl-pwa-ios__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--muted, rgba(11,18,32,.55));
  cursor: pointer;
}
.dl-pwa-ios__close:hover { background: rgba(11,18,32,.06); color: var(--ink, #0b1220); }

.dl-pwa-ios__title {
  font-weight: 700;
  color: var(--ink, #0b1220);
  font-size: 17px;
  margin: 4px 0 14px;
}
.dl-pwa-ios__steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 10px;
}
.dl-pwa-ios__steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--surface, #f7f8fb);
  border-radius: 10px;
  padding: 10px 12px;
}
.dl-pwa-ios__steps i {
  color: var(--accent, #304DA1);
  font-size: 16px;
}
.dl-pwa-ios__steps span {
  font-size: 14px;
  color: var(--ink, #0b1220);
}

.dl-pwa-ios__ok { margin-top: 4px; }


/* ---- /assets/css/offline-sync.css ---- */
/* /assets/css/offline-sync.css - offline status badge linksonder */

.dl-offline-badge {
  position: fixed;
  z-index: 1075;
  left: 16px;
  bottom: 16px;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border, rgba(11,18,32,.10));
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(11,18,32,.12);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #0b1220);
  font-family: inherit;
}
.dl-offline-badge i {
  font-size: 14px;
  color: var(--accent, #304DA1);
}
.dl-offline-badge.is-pending i {
  animation: dl-spin 1.4s linear infinite;
}
.dl-offline-badge.is-offline {
  background: rgba(255,193,7,.12);
  border-color: rgba(255,193,7,.40);
  color: #7a5a00;
}
.dl-offline-badge.is-offline i {
  color: #b88800;
  animation: none;
}

@keyframes dl-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .dl-offline-badge { left: 8px; bottom: 8px; font-size: 12px; padding: 6px 10px; }
}


/* ---- /assets/css/faq.css ---- */
/* =========================================================
   faq.css - FAQ-blok (inc/faq_block.php)
   ---------------------------------------------------------
   Accordion op <details>/<summary>, dus geen JS nodig. Kleuren
   komen uit de design tokens; body.is-enka maakt de hoeken
   scherp en de accentkleur zwart, net als de rest van Enka.
   ========================================================= */

.dl-faq {
  margin: 32px 0;
}

.dl-faq-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ink, #0b1220);
  margin: 0 0 14px;
}

.dl-faq-title i {
  color: var(--accent, #304DA1);
  font-size: 1rem;
}

.dl-faq-list {
  display: grid;
  gap: 8px;
}

.dl-faq-item {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: #fff;
  overflow: hidden;
}

.dl-faq-item[open] {
  border-color: var(--accent-soft2, rgba(48, 77, 161, .14));
  box-shadow: 0 6px 18px rgba(11, 18, 32, .06);
}

.dl-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink, #0b1220);
  list-style: none;
  user-select: none;
}

/* Standaard driehoekje van <summary> weg, we tekenen zelf een chevron */
.dl-faq-q::-webkit-details-marker { display: none; }
.dl-faq-q::marker { content: ''; }

.dl-faq-q:hover {
  background: var(--accent-soft, rgba(48, 77, 161, .05));
}

.dl-faq-q:focus-visible {
  outline: 2px solid var(--accent, #304DA1);
  outline-offset: -2px;
}

.dl-faq-chev {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--muted, rgba(11, 18, 32, .55));
  transition: transform .18s ease;
}

.dl-faq-item[open] .dl-faq-chev {
  transform: rotate(180deg);
  color: var(--accent, #304DA1);
}

.dl-faq-a {
  padding: 0 16px 16px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--muted, rgba(11, 18, 32, .70));
}

.dl-faq-a > *:first-child { margin-top: 0; }
.dl-faq-a > *:last-child  { margin-bottom: 0; }

.dl-faq-a a {
  color: var(--accent, #304DA1);
  text-decoration: underline;
}

.dl-faq-a ul,
.dl-faq-a ol {
  margin: 8px 0;
  padding-left: 20px;
}

/* ── Enka: scherpe hoeken, zwart accent ── */
body.is-enka .dl-faq-item {
  border-radius: 0;
}

body.is-enka .dl-faq-item[open] {
  border-color: var(--ek-ink, #0a0a0a);
  box-shadow: none;
}

body.is-enka .dl-faq-title {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.5rem;
}

@media (max-width: 575.98px) {
  .dl-faq-q { padding: 12px 14px; font-size: .9rem; }
  .dl-faq-a { padding: 0 14px 14px; }
}


/* ---- /assets/css/richtext.css ---- */
/* =========================================================
   richtext.css - redactionele tekstblokken
   ---------------------------------------------------------
   Voor de velden die via /admin beheerd worden: de uitgebreide
   productbeschrijving (long_description) en de categorieteksten
   (intro_text, bottom_text). De toegestane tags staan vast in
   dl_seo_rich_text() (inc/seo.php): p, h2, h3, ul, ol, li,
   strong, em, a, br en table met zijn onderdelen.

   Kleuren via de tokens, zodat Enka (zwart/wit, scherpe hoeken)
   en DutchLine (blauw) allebei kloppen zonder aparte regels.
   ========================================================= */

.dl-richtext {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--muted, rgba(11, 18, 32, .78));
}

.dl-richtext > *:first-child { margin-top: 0; }
.dl-richtext > *:last-child  { margin-bottom: 0; }

.dl-richtext p { margin: 0 0 1em; }

.dl-richtext h2,
.dl-richtext h3 {
  color: var(--ink, #0b1220);
  font-weight: 800;
  line-height: 1.3;
  margin: 1.6em 0 .6em;
}

.dl-richtext h2 { font-size: 1.15rem; }
.dl-richtext h3 { font-size: 1rem; }

.dl-richtext strong { color: var(--ink, #0b1220); font-weight: 700; }

.dl-richtext a {
  color: var(--accent, #304DA1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dl-richtext ul,
.dl-richtext ol {
  margin: 0 0 1em;
  padding-left: 1.35em;
}

.dl-richtext li { margin-bottom: .35em; }

/* Tabellen mogen op mobiel niet de pagina openduwen; vandaar de eigen
   scrollcontainer op het blok zelf. */
.dl-richtext table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: .9rem;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

.dl-richtext th,
.dl-richtext td {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.dl-richtext th {
  background: var(--surface, #f7f8fb);
  color: var(--ink, #0b1220);
  font-weight: 700;
  white-space: nowrap;
}

/* ── Categorie-teksten op /assortment ── */
.dl-cat-intro { margin: 0 0 22px; }
.dl-cat-bottom {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--border, rgba(11, 18, 32, .10));
}

.dl-cat-bottom .dl-richtext,
.dl-cat-intro .dl-richtext { max-width: 78ch; }

/* ── Enka: scherpe hoeken en zwart accent ── */
body.is-enka .dl-richtext h2,
body.is-enka .dl-richtext h3 {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
}

body.is-enka .dl-richtext h2 { font-size: 1.4rem; }
body.is-enka .dl-richtext h3 { font-size: 1.15rem; }

@media (max-width: 575.98px) {
  .dl-richtext { font-size: .9rem; }
  .dl-cat-bottom { margin-top: 26px; padding-top: 20px; }
}


/* ---- /assets/css/reviews.css ---- */
/* =========================================================
   reviews.css - productbeoordelingen
   ---------------------------------------------------------
   Gedeelde functionaliteit: werkt op beide merken. Kleuren en
   radii komen uit de tokens, met een body.is-enka-blok voor de
   scherpe hoeken en de zwart/wit-huisstijl.
   Sterren zijn FontAwesome 6 (fa-star / fa-star-half-stroke).
   ========================================================= */

.dl-stars {
  display: inline-flex;
  gap: 2px;
  color: #f5a524;                 /* goud op DutchLine; Enka overschrijft dit onderaan */
  font-size: .82rem;
  line-height: 1;
  flex-shrink: 0;
}

.dl-stars.is-lg { font-size: 1.1rem; gap: 3px; }

.dl-reviews { margin-top: 40px; }

/* ── Samenvatting ── */
.dl-rev-summary {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 28px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: #fff;
  margin-bottom: 24px;
}

.dl-rev-score { text-align: center; }

.dl-rev-score-num {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink, #0b1220);
  margin-bottom: 6px;
}

.dl-rev-score-count {
  font-size: .8rem;
  color: var(--muted, rgba(11, 18, 32, .55));
  margin-top: 6px;
}

.dl-rev-bars { display: grid; gap: 6px; }

.dl-rev-bar {
  display: grid;
  grid-template-columns: 44px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--muted, rgba(11, 18, 32, .55));
}

.dl-rev-bar-label { white-space: nowrap; }
.dl-rev-bar-label i { color: #f5a524; font-size: .7rem; }

.dl-rev-bar-track {
  height: 7px;
  border-radius: 99px;
  background: var(--surface, #f1f3f8);
  overflow: hidden;
}

.dl-rev-bar-fill {
  display: block;
  height: 100%;
  background: #f5a524;
  border-radius: 99px;
}

.dl-rev-bar-count { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Lijst ── */
.dl-rev-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 2px;
}

.dl-rev-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border, rgba(11, 18, 32, .08));
}

.dl-rev-item:last-child { border-bottom: 0; }

.dl-rev-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}

.dl-rev-author { font-weight: 700; font-size: .88rem; color: var(--ink, #0b1220); }

.dl-rev-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  color: #146c43;
  background: rgba(25, 135, 84, .10);
}

.dl-rev-verified i { font-size: .7rem; }

.dl-rev-date {
  font-size: .76rem;
  color: var(--muted, rgba(11, 18, 32, .45));
  margin-left: auto;
}

.dl-rev-title { font-weight: 700; font-size: .92rem; color: var(--ink, #0b1220); margin-bottom: 3px; }
.dl-rev-body  { font-size: .9rem; line-height: 1.65; color: var(--muted, rgba(11, 18, 32, .72)); }
.dl-rev-empty { font-size: .9rem; color: var(--muted, rgba(11, 18, 32, .6)); margin: 0 0 22px; }

/* ── Paginering ── */
.dl-rev-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }

.dl-rev-page {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink, #0b1220);
  text-decoration: none;
  background: #fff;
}

.dl-rev-page:hover { border-color: var(--accent, #304DA1); color: var(--accent, #304DA1); }

.dl-rev-page.is-current {
  background: var(--accent, #304DA1);
  border-color: var(--accent, #304DA1);
  color: #fff;
}

/* ── Formulier ── */
.dl-rev-form-wrap {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  padding: 20px 22px;
  background: var(--surface, #f7f8fb);
}

.dl-rev-form-title { font-size: 1rem; font-weight: 800; margin: 0 0 16px; color: var(--ink, #0b1220); }
.dl-rev-field { margin-bottom: 14px; }

.dl-rev-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink, #0b1220);
  margin-bottom: 5px;
}

.dl-rev-help { font-size: .76rem; color: var(--muted, rgba(11, 18, 32, .55)); }

/* Sterren kiezen: radio's verstopt, labels in omgekeerde volgorde zodat de
   CSS-sibling-selector alle sterren links van de hover kan inkleuren. */
.dl-rev-stars-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.dl-rev-star-opt {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(11, 18, 32, .18);
  transition: color .12s;
  margin: 0;
}

.dl-rev-star-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dl-rev-star-opt:hover,
.dl-rev-star-opt:hover ~ .dl-rev-star-opt,
.dl-rev-star-opt:has(input:checked),
.dl-rev-star-opt:has(input:checked) ~ .dl-rev-star-opt {
  color: #f5a524;
}

.dl-rev-star-opt:has(input:focus-visible) {
  outline: 2px solid var(--accent, #304DA1);
  outline-offset: 2px;
  border-radius: 4px;
}

.dl-rev-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* ── Enka: scherpe hoeken, zwarte accenten ──
   Enka voert geen accentkleur. Goud en groen zijn hier dus fout, hoe gangbaar
   sterren-goud elders ook is: alles wordt zwart/wit. De sterren blijven
   herkenbaar door het verschil tussen een volle en een lege ster. */
body.is-enka .dl-stars,
body.is-enka .dl-rev-bar-label i,
body.is-enka .dl-rev-star-opt:hover,
body.is-enka .dl-rev-star-opt:hover ~ .dl-rev-star-opt,
body.is-enka .dl-rev-star-opt:has(input:checked),
body.is-enka .dl-rev-star-opt:has(input:checked) ~ .dl-rev-star-opt {
  color: var(--ek-ink, #0a0a0a);
}

body.is-enka .dl-rev-bar-fill { background: var(--ek-ink, #0a0a0a); }

body.is-enka .dl-rev-verified {
  border-radius: 0;
  color: var(--ek-ink, #0a0a0a);
  background: transparent;
  border: 1px solid var(--ek-border, rgba(0, 0, 0, .22));
}

body.is-enka .dl-rev-summary,
body.is-enka .dl-rev-form-wrap,
body.is-enka .dl-rev-page { border-radius: 0; }

body.is-enka .dl-rev-page.is-current {
  background: var(--ek-ink, #0a0a0a);
  border-color: var(--ek-ink, #0a0a0a);
}

body.is-enka .dl-rev-page:hover {
  border-color: var(--ek-ink, #0a0a0a);
  color: var(--ek-ink, #0a0a0a);
}

body.is-enka .dl-rev-form-title,
body.is-enka .dl-reviews > .pdp-panel-heading {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
}

@media (max-width: 575.98px) {
  .dl-rev-summary { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .dl-rev-bars { text-align: left; }
  .dl-rev-date { margin-left: 0; width: 100%; }
  .dl-rev-form-wrap { padding: 16px; }
}

/* ── Enka: formulier en kaarten in huisstijl (PDP-redesign) ── */
body.is-enka .dl-rev-form-wrap,
body.is-enka .dl-rev-summary {
  background: var(--ek-surface, #fff);
  border: 1px solid var(--ek-border, rgba(10, 10, 10, .10));
}
body.is-enka .dl-rev-form-wrap { padding: var(--ek-sp-5, 24px); }
body.is-enka .dl-rev-star-opt { color: var(--ek-border-strong, rgba(10, 10, 10, .16)); }
body.is-enka .dl-rev-form .form-control {
  border: 1px solid var(--ek-border-strong, rgba(10, 10, 10, .16));
  border-radius: 0;
  background: var(--ek-surface, #fff);
  font-size: var(--ek-fs-base, 1rem); /* >=16px: geen iOS zoom-on-focus */
  color: var(--ek-ink, #0a0a0a);
}
body.is-enka .dl-rev-form .form-control:focus {
  border-color: var(--ek-ink, #0a0a0a);
  box-shadow: 0 0 0 2px var(--ek-border, rgba(10, 10, 10, .10));
}
body.is-enka .dl-rev-help {
  color: var(--ek-text-muted, #6a6a6a);
  font-size: var(--ek-fs-xs, .694rem);
}
body.is-enka .dl-rev-field { margin-bottom: var(--ek-sp-4, 16px); }
/* Sterren-kiezer: ruststand licht; catalog.css kleurt .fa-star in .dl-reviews
   zwart voor de weergave-sterren, maar de input-sterren volgen de labelstate. */
body.is-enka .dl-rev-star-opt .fa-star { color: inherit; }

/* ── Enka PDP: volgorde binnen de reviews-tab ──
   Gewenst: sterren-samenvatting bovenaan, dan het formulier, de losse
   beoordelingen onderaan. Markup blijft gedeeld (DutchLine houdt de
   originele volgorde); alleen flex-order binnen de sectie. */
body.is-enka .dl-reviews {
  display: flex;
  flex-direction: column;
  gap: var(--ek-sp-4, 16px);
}
body.is-enka .dl-reviews > .pdp-panel-heading { order: 0; margin-bottom: 0; }
body.is-enka .dl-reviews > .dl-rev-empty     { order: 1; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-summary   { order: 1; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-form-wrap { order: 2; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-list      { order: 3; margin: 0; }
body.is-enka .dl-reviews > .dl-rev-pager     { order: 4; margin: 0; }

/* Losse beoordelingen als rustige kaarten */
body.is-enka .dl-rev-item {
  background: var(--ek-surface, #fff);
  border: 1px solid var(--ek-border, rgba(10, 10, 10, .10));
  padding: var(--ek-sp-4, 16px) var(--ek-sp-5, 24px);
  margin: 0 0 var(--ek-sp-3, 12px);
}
body.is-enka .dl-rev-item:last-child { margin-bottom: 0; }
body.is-enka .dl-rev-author { font-weight: 800; color: var(--ek-ink, #0a0a0a); }
body.is-enka .dl-rev-date { color: var(--ek-text-muted, #6a6a6a); font-size: var(--ek-fs-sm, .833rem); }
body.is-enka .dl-rev-title {
  font-weight: 800;
  color: var(--ek-ink, #0a0a0a);
  margin-top: var(--ek-sp-1, 4px);
}
body.is-enka .dl-rev-body {
  color: var(--ek-ink-2, #1a1a1a);
  line-height: 1.65;
  margin-top: var(--ek-sp-2, 8px);
}


/* ---- /assets/css/kennisbank.css ---- */
/* =========================================================
   kennisbank.css - publieke kennisbank
   ---------------------------------------------------------
   Gedeelde functionaliteit, dus alles via de tokens met een
   body.is-enka-blok voor de scherpe hoeken en de zwart/wit-
   huisstijl. De artikeltekst zelf gebruikt .dl-richtext uit
   richtext.css.
   ========================================================= */

.kb-wrap { min-height: 50vh; }

.kb-crumbs { margin-bottom: 18px; }

/* ── Koppen ── */
.kb-head { margin-bottom: 22px; }

.kb-title {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink, #0b1220);
  margin: 0 0 8px;
}

.kb-sub {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--muted, rgba(11, 18, 32, .65));
  max-width: 70ch;
  margin: 0;
}

/* ── Rubrieken ── */
.kb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}

.kb-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 99px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink, #0b1220);
  text-decoration: none;
  background: #fff;
}

.kb-cat:hover { border-color: var(--accent, #304DA1); color: var(--accent, #304DA1); }

.kb-cat.is-active {
  background: var(--accent, #304DA1);
  border-color: var(--accent, #304DA1);
  color: #fff;
}

.kb-cat-n {
  font-size: .72rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* ── Kaartenraster ── */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.kb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .12s;
}

.kb-card:hover {
  box-shadow: 0 10px 30px rgba(11, 18, 32, .10);
  transform: translateY(-2px);
}

.kb-card-img {
  aspect-ratio: 16 / 10;
  background: var(--surface, #f4f6fb);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: rgba(11, 18, 32, .18);
  font-size: 1.8rem;
}

.kb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* flex + margin-top:auto op de meta-regel, zodat de datum op elke kaart op
   dezelfde hoogte staat ook als de ene samenvatting een regel korter is. */
.kb-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.kb-card-meta { margin-top: auto; padding-top: 4px; }

.kb-card-cat {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent, #304DA1);
}

.kb-card-title { font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--ink, #0b1220); }
.kb-card-excerpt { font-size: .85rem; line-height: 1.6; color: var(--muted, rgba(11, 18, 32, .65)); }
.kb-card-meta { font-size: .76rem; color: var(--muted, rgba(11, 18, 32, .45)); }

/* ── Paginering ── */
.kb-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }

.kb-page {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 8px;
  font-size: .85rem; font-weight: 700;
  color: var(--ink, #0b1220); text-decoration: none; background: #fff;
}

.kb-page:hover { border-color: var(--accent, #304DA1); color: var(--accent, #304DA1); }
.kb-page.is-current { background: var(--accent, #304DA1); border-color: var(--accent, #304DA1); color: #fff; }

/* ── Artikel ── */
.kb-article-head { margin-bottom: 20px; }

/* Het artikel staat in een smallere, gecentreerde kolom dan de rest van de
   site. De tekstbreedte blijft daarmee leesbaar (zie .kb-article-body) zonder
   dat kop, inhoudsopgave, producten en "verder lezen" links tegen de rand
   geplakt staan met een halve schermbreedte leegte ernaast. */
.kb-article.container { max-width: 980px; }

.kb-article-title {
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink, #0b1220);
  margin: 0 0 12px;
  /* 24ch was te krap: met de condensed display-font van Enka brak de titel al
     na twee woorden af terwijl er ruim plek was. */
  max-width: min(100%, 46ch);
}

.kb-article-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: .82rem; color: var(--muted, rgba(11, 18, 32, .55));
  margin-bottom: 14px;
}

.kb-article-meta i { margin-right: 4px; }

.kb-article-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted, rgba(11, 18, 32, .78));
  max-width: 72ch;
  margin: 0;
}

.kb-hero {
  margin: 0 0 28px;
  border-radius: var(--r2, 18px);
  overflow: hidden;
}

.kb-hero img { width: 100%; height: auto; display: block; }
.kb-hero a { display: block; cursor: zoom-in; }

/* Inhoudsopgave naast de tekst op breed, erboven op smal. */
.kb-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 992px) {
  .kb-article-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .kb-toc { position: sticky; top: 96px; }
}

.kb-toc {
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  padding: 14px 16px;
  background: var(--surface, #f7f8fb);
}

.kb-toc-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted, rgba(11, 18, 32, .55));
  margin-bottom: 8px;
}

.kb-toc-list { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.kb-toc-list a { font-size: .85rem; line-height: 1.45; color: var(--ink, #0b1220); text-decoration: none; }
.kb-toc-list a:hover { color: var(--accent, #304DA1); text-decoration: underline; }

.kb-article-body { max-width: 72ch; }

/* h2's zijn ankerdoelen; wat ruimte zodat de sticky header ze niet afdekt. */
.kb-article-body h2 { scroll-margin-top: 110px; }

/* ── Gekoppelde producten ── */
.kb-section-title {
  font-size: 1.25rem; font-weight: 900; color: var(--ink, #0b1220);
  margin: 40px 0 16px;
}

.kb-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.kb-product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  overflow: hidden; background: #fff;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s;
}

.kb-product-card:hover { box-shadow: 0 8px 24px rgba(11, 18, 32, .10); }

.kb-product-img {
  aspect-ratio: 1;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: rgba(11, 18, 32, .18);
}

.kb-product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.kb-product-body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.kb-product-name { font-size: .82rem; font-weight: 700; line-height: 1.35; color: var(--ink, #0b1220); }
.kb-product-price { font-size: .9rem; font-weight: 900; color: var(--accent, #304DA1); }

.kb-related { margin-bottom: 20px; }

/* ── Enka: scherpe hoeken, zwarte accenten ── */
body.is-enka .kb-card,
body.is-enka .kb-product-card,
body.is-enka .kb-toc,
body.is-enka .kb-hero,
body.is-enka .kb-page { border-radius: 0; }

body.is-enka .kb-cat { border-radius: 0; }

body.is-enka .kb-cat.is-active,
body.is-enka .kb-page.is-current {
  background: var(--ek-ink, #0a0a0a);
  border-color: var(--ek-ink, #0a0a0a);
}

body.is-enka .kb-title,
body.is-enka .kb-article-title,
body.is-enka .kb-section-title {
  font-family: 'Barlow Condensed', 'Arial Black', sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
}

body.is-enka .kb-card-cat,
body.is-enka .kb-product-price { color: var(--ek-ink, #0a0a0a); }

@media (max-width: 575.98px) {
  .kb-title { font-size: 1.6rem; }
  .kb-article-title { font-size: 1.55rem; max-width: none; }
  .kb-grid { grid-template-columns: 1fr; }
}


/* ---- /assets/css/internal-links.css ---- */
/* =========================================================
   internal-links.css - kruimelpaden en interne linkblokken
   ---------------------------------------------------------
   Gedeeld tussen DutchLine en Enka, dus alles via de tokens
   plus een body.is-enka-blok voor de scherpe hoeken en de
   zwart/wit-huisstijl.

   .dl-crumbs wordt op assortment.php nog een keer inline
   overschreven met de --dlx-* variabelen van die pagina.
   Dat is bewust: die inline <style> staat later in de
   cascade en houdt de catalogus exact zoals hij was.
   ========================================================= */

/* ── Kruimelpad ── */
.dl-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--muted, rgba(11, 18, 32, .7));
  margin-bottom: 8px;
}

.dl-crumbs a { color: var(--muted, rgba(11, 18, 32, .7)); text-decoration: none; }
.dl-crumbs a:hover { color: var(--accent, #304DA1); text-decoration: underline; }
.dl-crumbs .sep { opacity: .5; }
.dl-crumbs .is-current { color: var(--ink, #0b1220); font-weight: 700; }

body.is-enka .dl-crumbs a:hover { color: var(--ek-ink, #111); }

/* De pdp-hero begint zonder padding-top; het kruimelpad zet die zelf. */
.pdp-crumbs { padding-top: 16px; }
.pdp-crumbs .dl-crumbs { margin-bottom: 10px; }

/* ── Linkblok ── */
.dl-linkblock {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--surface, #f7f8fb);
  border: 1px solid var(--border, rgba(11, 18, 32, .08));
  border-radius: var(--r, 14px);
}

.dl-linkblock-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink, #0b1220);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}

.dl-linkblock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-soft, rgba(48, 77, 161, .10));
  color: var(--accent, #304DA1);
  font-size: .85rem;
  flex: 0 0 auto;
}

.dl-linkblock-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* De <li> is de pill. Het aantal hoort visueel binnen de pill maar buiten de
   <a>: binnen de link zou "605" onderdeel van de ankertekst worden. */
.dl-linkblock-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border, rgba(11, 18, 32, .12));
  border-radius: 99px;
  line-height: 1.3;
  transition: border-color .12s, color .12s;
}

.dl-linkblock-list a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink, #0b1220);
  text-decoration: none;
}

.dl-linkblock-list li:hover { border-color: var(--accent, #304DA1); }
.dl-linkblock-list li:hover a { color: var(--accent, #304DA1); }
.dl-linkblock-list a:focus-visible { outline: 2px solid var(--accent, #304DA1); outline-offset: 3px; }

.dl-linkblock-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted, rgba(11, 18, 32, .45));
}

/* Variant: gelijkwaardige paginasectie (productpagina, naast FAQ en reviews) */
.dl-linkblock--section {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 30px 0 8px;
}

.dl-linkblock--section .dl-linkblock-title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 16px;
}

.dl-linkblock--section .dl-linkblock-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: .95rem;
}

/* Variant: opsomming onder elkaar (kennisbank op de homepage) */
.dl-linkblock--stack .dl-linkblock-list { flex-direction: column; gap: 6px; }

.dl-linkblock--stack .dl-linkblock-list li {
  width: 100%;
  border-radius: var(--r, 14px);
  padding: 10px 14px;
}

/* Variant: transparant, voor gebruik binnen een bestaande kaart of panel */
.dl-linkblock--plain {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ── Homepage: categorieen + kennisbank naast elkaar ── */
.dl-links-home {
  padding: 34px 0 6px;
}

.dl-links-home .dl-linkblock { margin-top: 0; }

@media (min-width: 992px) {
  .dl-links-home-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: start;
  }
  /* Zonder kennisbankartikelen is er maar een blok; dat moet de volle breedte
     krijgen in plaats van 1.6fr met een lege kolom ernaast. */
  .dl-links-home-grid.is-single { grid-template-columns: 1fr; }
}

/* ── Enka: scherpe hoeken, geen accentkleur ── */
body.is-enka .dl-linkblock {
  border-radius: 0;
  background: var(--ek-surface-2, #f5f5f5);
  border-color: var(--ek-border, rgba(0, 0, 0, .12));
}

body.is-enka .dl-linkblock-title {
  font-family: var(--ek-font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  font-size: 1.05rem;
}

body.is-enka .dl-linkblock-list li {
  border-radius: 0;
  border-color: var(--ek-border, rgba(0, 0, 0, .18));
}

body.is-enka .dl-linkblock-list a { color: var(--ek-ink, #111); }

body.is-enka .dl-linkblock-list li:hover {
  background: var(--ek-ink, #111);
  border-color: var(--ek-ink, #111);
}

body.is-enka .dl-linkblock-list li:hover a,
body.is-enka .dl-linkblock-list li:hover .dl-linkblock-count { color: #fff; }

body.is-enka .dl-linkblock--stack .dl-linkblock-list li { border-radius: 0; }

/* Enka kent geen accentkleur: het icoonvlak wordt neutraal in plaats van blauw. */
body.is-enka .dl-linkblock-icon {
  border-radius: 0;
  background: var(--ek-ink, #111);
  color: #fff;
}

body.is-enka .dl-linkblock--section .dl-linkblock-title {
  font-family: var(--ek-font-display, 'Barlow Condensed', sans-serif);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  font-size: 1.35rem;
}


/* ---- /assets/css/coupon.css ---- */
/* ==========================================================================
   Kortingscode-blok (inc/coupon_form.php)

   Werkt op de DutchLine- en de Enka-checkout. Kleuren komen uit de tokens van
   theme-core.css; op Enka worden die door assets/css/enka/tokens.css
   overschreven, dus hier staan bewust geen vaste hexwaarden.
   ========================================================================== */

.dl-coupon {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--surface, #f7f8fb);
}

.dl-coupon-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0b1220);
}

.dl-coupon-label i { color: var(--accent, #304da1); }

.dl-coupon-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-coupon-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--bg, #fff);
  color: var(--ink, #0b1220);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dl-coupon-input:focus {
  outline: none;
  border-color: var(--accent, #304da1);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(48, 77, 161, .10));
}

.dl-coupon-btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r, 14px);
  background: var(--accent, #304da1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}

.dl-coupon-btn:hover  { opacity: .88; }
.dl-coupon-btn:disabled,
.dl-coupon-btn.is-busy { opacity: .55; cursor: default; }

/* Toegepaste code */
.dl-coupon-active {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dl-coupon-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  background: var(--accent-soft, rgba(48, 77, 161, .10));
  color: var(--accent, #304da1);
}

.dl-coupon-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.dl-coupon-info strong {
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink, #0b1220);
  word-break: break-all;
}

.dl-coupon-info span {
  font-size: 13px;
  color: var(--muted, rgba(11, 18, 32, .70));
}

.dl-coupon-remove {
  margin-left: auto;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: 50%;
  background: var(--bg, #fff);
  color: var(--muted, rgba(11, 18, 32, .70));
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.dl-coupon-remove:hover {
  color: var(--danger, #ff4d4d);
  border-color: var(--danger, #ff4d4d);
}

/* Meldingen */
.dl-coupon-msg        { margin-top: 8px; font-size: 13px; }
.dl-coupon-msg:empty  { display: none; }
.dl-coupon-msg.is-ok  { color: var(--ok, #20c997); }
.dl-coupon-msg.is-err { color: var(--danger, #ff4d4d); }

/* Enka: scherpe hoeken, geen accentkleur - conform de huisstijl */
body.is-enka .dl-coupon,
body.is-enka .dl-coupon-input,
body.is-enka .dl-coupon-btn {
  border-radius: 0;
}

body.is-enka .dl-coupon-ico {
  border-radius: 0;
  background: var(--ek-surface-2, rgba(0, 0, 0, .05));
  color: var(--ek-fg, #0a0a0a);
}

body.is-enka .dl-coupon-remove { border-radius: 0; }

body.is-enka .dl-coupon-btn {
  background: var(--ek-fg, #0a0a0a);
  color: var(--ek-bg, #fff);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}

/* ==========================================================================
   Voortgangsbalk naar gratis verzending (inc/free_shipping_bar.php)
   ========================================================================== */

.dl-freeship {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--bg, #fff);
}

.dl-freeship-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink, #0b1220);
}

.dl-freeship-text i        { color: var(--accent, #304da1); }
.dl-freeship.is-done .dl-freeship-text i { color: var(--ok, #20c997); }

.dl-freeship-track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface, #f7f8fb);
  overflow: hidden;
}

.dl-freeship-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #304da1);
  transition: width .3s ease;
}

.dl-freeship.is-done .dl-freeship-fill { background: var(--ok, #20c997); }

/* Enka: scherpe hoeken, zwart/wit */
body.is-enka .dl-freeship,
body.is-enka .dl-freeship-track,
body.is-enka .dl-freeship-fill { border-radius: 0; }

body.is-enka .dl-freeship-text i     { color: var(--ek-fg, #0a0a0a); }
body.is-enka .dl-freeship-fill       { background: var(--ek-fg, #0a0a0a); }

/* ==========================================================================
   Nieuwsbrief-formulier (inc/newsletter_form.php)
   ========================================================================== */

.dl-nlform { margin: 8px 0 0; }

.dl-nlform-head {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: inherit;
}

.dl-nlform-sub {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  opacity: .75;
}

.dl-nlform-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-nlform-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r, 14px);
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 14px;
}

.dl-nlform-input::placeholder { color: currentColor; opacity: .55; }

.dl-nlform-input:focus {
  outline: none;
  border-color: currentColor;
}

/* Honeypot: uit beeld, maar niet display:none - dat slaan bots over. */
.dl-nlform-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dl-nlform-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: var(--r, 14px);
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}

.dl-nlform-btn:hover    { opacity: .75; }
.dl-nlform-btn:disabled { opacity: .5; cursor: default; }

.dl-nlform-msg        { margin-top: 8px; font-size: 13px; }
.dl-nlform-msg:empty  { display: none; }
.dl-nlform-msg.is-ok  { color: var(--ok, #20c997); }
.dl-nlform-msg.is-err { color: var(--danger, #ff4d4d); }

/* Enka: scherpe hoeken */
body.is-enka .dl-nlform-input,
body.is-enka .dl-nlform-btn { border-radius: 0; }

body.is-enka .dl-nlform-btn {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}


/* ---- /assets/css/stock-alert.css ---- */
/* ==========================================================================
   Terug-op-voorraad blok (inc/stock_alert_block.php)

   Verschijnt op de productpagina zodra een artikel op is. Kleuren via de
   tokens, zodat het blok op DutchLine en Enka klopt zonder losse varianten.
   ========================================================================== */

.dl-stockalert {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--surface, #f7f8fb);
}

.dl-stockalert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ink, #0b1220);
}

.dl-stockalert-head i { color: var(--accent, #304da1); }

.dl-stockalert-sub {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, rgba(11, 18, 32, .70));
}

.dl-stockalert-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-stockalert-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(11, 18, 32, .10));
  border-radius: var(--r, 14px);
  background: var(--bg, #fff);
  color: var(--ink, #0b1220);
  font-size: 14px;
}

.dl-stockalert-input:focus {
  outline: none;
  border-color: var(--accent, #304da1);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(48, 77, 161, .10));
}

.dl-stockalert-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--r, 14px);
  background: var(--accent, #304da1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}

.dl-stockalert-btn:hover     { opacity: .88; }
.dl-stockalert-btn:disabled  { opacity: .55; cursor: default; }

.dl-stockalert-done {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink, #0b1220);
}

.dl-stockalert-done i { color: var(--ok, #20c997); }

.dl-stockalert-msg        { margin-top: 8px; font-size: 13px; }
.dl-stockalert-msg:empty  { display: none; }
.dl-stockalert-msg.is-ok  { color: var(--ok, #20c997); }
.dl-stockalert-msg.is-err { color: var(--danger, #ff4d4d); }

/* Enka: scherpe hoeken, zwart/wit - conform de huisstijl */
body.is-enka .dl-stockalert,
body.is-enka .dl-stockalert-input,
body.is-enka .dl-stockalert-btn {
  border-radius: 0;
}

body.is-enka .dl-stockalert-head i { color: var(--ek-fg, #0a0a0a); }

body.is-enka .dl-stockalert-btn {
  background: var(--ek-fg, #0a0a0a);
  color: var(--ek-bg, #fff);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}


/* ---- /assets/vendor/photoswipe/photoswipe.css ---- */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */.pswp{--pswp-bg:#000;--pswp-placeholder-bg:#222;--pswp-root-z-index:100000;--pswp-preloader-color:rgba(79, 79, 79, 0.4);--pswp-preloader-color-secondary:rgba(255, 255, 255, 0.9);--pswp-icon-color:#fff;--pswp-icon-color-secondary:#4f4f4f;--pswp-icon-stroke-color:#4f4f4f;--pswp-icon-stroke-width:2px;--pswp-error-text-color:var(--pswp-icon-color)}.pswp{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--pswp-root-z-index);display:none;touch-action:none;outline:0;opacity:.003;contain:layout style size;-webkit-tap-highlight-color:transparent}.pswp:focus{outline:0}.pswp *{box-sizing:border-box}.pswp img{max-width:none}.pswp--open{display:block}.pswp,.pswp__bg{transform:translateZ(0);will-change:opacity}.pswp__bg{opacity:.005;background:var(--pswp-bg)}.pswp,.pswp__scroll-wrap{overflow:hidden}.pswp__bg,.pswp__container,.pswp__content,.pswp__img,.pswp__item,.pswp__scroll-wrap,.pswp__zoom-wrap{position:absolute;top:0;left:0;width:100%;height:100%}.pswp__img,.pswp__zoom-wrap{width:auto;height:auto}.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,.pswp__img{cursor:-webkit-zoom-out;cursor:-moz-zoom-out;cursor:zoom-out}.pswp__button,.pswp__container,.pswp__counter,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__item{z-index:1;overflow:hidden}.pswp__hidden{display:none!important}.pswp__content{pointer-events:none}.pswp__content>*{pointer-events:auto}.pswp__error-msg-container{display:grid}.pswp__error-msg{margin:auto;font-size:1em;line-height:1;color:var(--pswp-error-text-color)}.pswp .pswp__hide-on-close{opacity:.005;will-change:opacity;transition:opacity var(--pswp-transition-duration) cubic-bezier(.4,0,.22,1);z-index:10;pointer-events:none}.pswp--ui-visible .pswp__hide-on-close{opacity:1;pointer-events:auto}.pswp__button{position:relative;display:block;width:50px;height:60px;padding:0;margin:0;overflow:hidden;cursor:pointer;background:0 0;border:0;box-shadow:none;opacity:.85;-webkit-appearance:none;-webkit-touch-callout:none}.pswp__button:active,.pswp__button:focus,.pswp__button:hover{transition:none;padding:0;background:0 0;border:0;box-shadow:none;opacity:1}.pswp__button:disabled{opacity:.3;cursor:auto}.pswp__icn{fill:var(--pswp-icon-color);color:var(--pswp-icon-color-secondary)}.pswp__icn{position:absolute;top:14px;left:9px;width:32px;height:32px;overflow:hidden;pointer-events:none}.pswp__icn-shadow{stroke:var(--pswp-icon-stroke-color);stroke-width:var(--pswp-icon-stroke-width);fill:none}.pswp__icn:focus{outline:0}.pswp__img--with-bg,div.pswp__img--placeholder{background:var(--pswp-placeholder-bg)}.pswp__top-bar{position:absolute;left:0;top:0;width:100%;height:60px;display:flex;flex-direction:row;justify-content:flex-end;z-index:10;pointer-events:none!important}.pswp__top-bar>*{pointer-events:auto;will-change:opacity}.pswp__button--close{margin-right:6px}.pswp__button--arrow{position:absolute;top:0;width:75px;height:100px;top:50%;margin-top:-50px}.pswp__button--arrow:disabled{display:none;cursor:default}.pswp__button--arrow .pswp__icn{top:50%;margin-top:-30px;width:60px;height:60px;background:0 0;border-radius:0}.pswp--one-slide .pswp__button--arrow{display:none}.pswp--touch .pswp__button--arrow{visibility:hidden}.pswp--has_mouse .pswp__button--arrow{visibility:visible}.pswp__button--arrow--prev{right:auto;left:0}.pswp__button--arrow--next{right:0}.pswp__button--arrow--next .pswp__icn{left:auto;right:14px;transform:scale(-1,1)}.pswp__button--zoom{display:none}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__zoom-icn-bar-v{display:none}.pswp__preloader{position:relative;overflow:hidden;width:50px;height:60px;margin-right:auto}.pswp__preloader .pswp__icn{opacity:0;transition:opacity .2s linear;animation:pswp-clockwise .6s linear infinite}.pswp__preloader--active .pswp__icn{opacity:.85}@keyframes pswp-clockwise{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.pswp__counter{height:30px;margin-top:15px;margin-inline-start:20px;font-size:14px;line-height:30px;color:var(--pswp-icon-color);text-shadow:1px 1px 3px var(--pswp-icon-color-secondary);opacity:.85}.pswp--one-slide .pswp__counter{display:none}

/* ---- /assets/css/header-mobile.css ---- */
/* =========================================================
   header-mobile.css
   ---------------------------------------------------------
   Mobiele header-spacing fixes (gedeeld DutchLine + Enka).
   Voorheen inline in inc/header.php.
   ========================================================= */

@media (max-width: 991.98px) {
  /* topbar: alles verbergen behalve taalschakelaar */
  .dl-topbar-v4 .dl-topbar-right { display: flex !important; align-items: center; }
  .dl-topbar-v4 .dl-topbar-right > *:not(.dl-lang-switch):not(.dl-lang-sep) { display: none !important; }
  .dl-topbar-v4 .dl-lang-sep { display: none !important; }

  /* brandbar compacter */
  .dl-brandbar-v4 { border-bottom: 1px solid var(--border, rgba(0, 0, 0, .12)); }
  .dl-brandbar-row {
    gap: 12px !important;
    align-items: center !important;
    /* wrappen zodat de zoekbalk een eigen regel krijgt */
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    padding-bottom: 10px;
  }

  /* Zoekbalk blijft op mobiel en tablet staan, als volle regel onder logo +
     burger. Voorheen verborgen ("zit in de drawer"), waardoor je eerst naar het
     assortiment moest navigeren om te kunnen zoeken. */
  .dl-search-pill {
    display: flex !important;
    order: 3;
    flex: 1 0 100% !important;
    min-width: 0 !important;
    width: 100%;
  }
  .dl-search-input { min-width: 0; }
  .dl-search-btn { flex: 0 0 auto; white-space: nowrap; }

  /* buttons op mobiel uit (te druk); ze zitten in drawer */
  .dl-actions .dl-btn { display: none !important; }

  /* burger altijd zichtbaar en klikbaar */
  .dl-actions { display: flex !important; align-items: center !important; gap: 10px !important; }
  .dl-burger { display: inline-flex !important; }

  /* logo iets kleiner */
  .dl-brand img {
    width: 120px !important;
    height: auto !important;
  }
}

.dl-brandbar-row {
  display: flex;
  align-items: center;
}

.dl-actions {
  margin-left: auto;
}


/* ---- /assets/css/dl-theme.css ---- */
/* =========================================================
   dl-theme.css - design tokens voor de makeover
   Locatie: /assets/css/dl-theme.css
   Geladen als LAATSTE stylesheet in <head> via inc/header.php
   (na Bootstrap, na alle bestaande site-CSS, na enka/core.css
   en na de inline <style id="cms-theme-vars"> uit de DB).
   ---------------------------------------------------------
   DIT BESTAND VERANDERT OP ZICHZELF NIETS ZICHTBAAR.
   Alle namen hier zijn nieuw en met --dlt- geprefixt. Geen
   enkele bestaande selector of custom property wordt
   overschreven, dus de cascade blijft exact zoals hij was.
   Geverifieerd met grep: --dlt- kwam nergens voor in
   assets/, inc/, pages/, components/ of de root-*.php.

   GEBRUIK
   - Nieuwe dl-* componenten consumeren uitsluitend --dlt-*.
   - Bestaande tokens (--accent, --ink, --r, --shadow,
     --dl-blue-700, --ek-*) blijven ongemoeid en leidend voor
     alle bestaande CSS.
   - De ENKA-laag hieronder mapt de tokens naar de bestaande
     --ek-* waarden, zodat een nieuw component in beide merken
     de juiste huisstijl pakt zonder dat er iets kruist.
   ========================================================= */

:root {

  /* ── Kleur: neutrale schaal ──────────────────────────── */
  --dlt-ink:              #0b1220;
  --dlt-ink-2:            rgba(11, 18, 32, .78);
  --dlt-muted:            rgba(11, 18, 32, .62);
  --dlt-muted-2:          rgba(11, 18, 32, .44);

  --dlt-bg:               #ffffff;
  --dlt-surface:          #f7f8fb;
  --dlt-surface-2:        #eef0f6;
  --dlt-surface-3:        #e4e7ef;

  --dlt-line:             rgba(11, 18, 32, .10);
  --dlt-line-2:           rgba(11, 18, 32, .16);
  --dlt-line-strong:      rgba(11, 18, 32, .28);

  /* ── Kleur: op donkere vlakken ───────────────────────── */
  --dlt-on-dark:          #ffffff;
  --dlt-on-dark-muted:    rgba(255, 255, 255, .68);
  --dlt-on-dark-muted-2:  rgba(255, 255, 255, .42);
  --dlt-on-dark-line:     rgba(255, 255, 255, .12);

  /* ── Kleur: merk-accent ──────────────────────────────
     Volgt de bestaande DB-gestuurde --accent wanneer die
     gezet is, met de DutchLine-blauwtint als fallback.
     Zo blijft Admin > Instellingen > kleuren leidend. */
  --dlt-accent:           var(--accent, #304da1);
  --dlt-accent-ink:       #ffffff;
  --dlt-accent-soft:      color-mix(in srgb, var(--dlt-accent) 10%, transparent);
  --dlt-accent-soft-2:    color-mix(in srgb, var(--dlt-accent) 16%, transparent);
  --dlt-accent-line:      color-mix(in srgb, var(--dlt-accent) 32%, transparent);

  /* ── Kleur: status ───────────────────────────────────── */
  --dlt-success:          #1a9f75;
  --dlt-success-soft:     rgba(26, 159, 117, .10);
  --dlt-warning:          #b3730a;
  --dlt-warning-soft:     rgba(179, 115, 10, .10);
  --dlt-danger:           #d33a3a;
  --dlt-danger-soft:      rgba(211, 58, 58, .10);
  --dlt-info:             #0d6efd;
  --dlt-info-soft:        rgba(13, 110, 253, .10);

  /* ── Kleur: data-accenten ────────────────────────────
     Categorie-kleuren voor tegels, KPI-accentbalken en
     statuscijfers. Waarden zijn 1-op-1 overgenomen uit de
     bestaande dashboard-styling, zodat het token-maken geen
     enkele kleur verschuift. */
  --dlt-c-blue:           var(--accent, #304da1);
  --dlt-c-green:          #0ca678;
  --dlt-c-amber:          #f59f00;
  --dlt-c-red:            #e03131;
  --dlt-c-purple:         #7950f2;
  --dlt-c-slate:          #495057;

  /* Leesbare inkt op lichte tinten van bovenstaande kleuren */
  --dlt-c-amber-ink:      #7d5a00;
  --dlt-c-red-ink:        #991f1f;
  --dlt-c-blue-ink:       #1864ab;
  --dlt-c-green-ink:      #1e5c2e;

  /* ── Vlakken en lijnen van de admin-vormtaal ─────────
     1-op-1 de waarden uit assets/css/admin-common.css, zodat
     pagina's die dat bestand NIET laden (alles buiten
     page_admin_* en page_dashboard) er toch identiek uitzien.
     Regelnummers verwijzen naar admin-common.css. */
  --dlt-card-line:        #eef2f6;   /* :146 kaartrand */
  --dlt-row-line:         #f1f5f9;   /* :207 / :231 rij- en kopscheiding */
  --dlt-head-bg:          #fcfdff;   /* :209 kaartkop */
  --dlt-th-bg:            #fafbfc;   /* :235 tabelkop */
  --dlt-label-ink:        #64748b;   /* :151 caps-label */
  --dlt-sub-ink:          #94a3b8;   /* :155 subtekst */
  --dlt-strong-ink:       #0b1220;   /* :152 getal en kaarttitel */
  --dlt-empty-ico:        #cbd5e1;   /* :320 icoon in de leegstaat */
  --dlt-field-bg:         #f5f7fb;   /* :185 invoerveld in de toolbar */
  /* admin-common.css:19 definieert --accent-softer, maar dat bestand
     wordt buiten admin niet geladen. Hier een eigen equivalent. */
  --dlt-accent-softer:    color-mix(in srgb, var(--dlt-accent) 4%, transparent);

  /* Zachte vlakken + lijnen voor inline meldingen */
  --dlt-c-amber-bg:       #fff8e1;
  --dlt-c-red-bg:         #fff0f0;
  --dlt-c-blue-bg:        #e7f5ff;
  --dlt-c-green-bg:       #ebfbee;
  --dlt-c-blue-line:      #339af0;
  --dlt-c-green-line:     #40c057;

  /* ── Spacing schaal (4px basis) ──────────────────────── */
  --dlt-sp-0:             0;
  --dlt-sp-1:             4px;
  --dlt-sp-2:             8px;
  --dlt-sp-3:             12px;
  --dlt-sp-4:             16px;
  --dlt-sp-5:             20px;
  --dlt-sp-6:             24px;
  --dlt-sp-8:             32px;
  --dlt-sp-10:            40px;
  --dlt-sp-12:            48px;
  --dlt-sp-16:            64px;
  --dlt-sp-20:            80px;

  /* Verticaal sectieritme */
  --dlt-section:          72px;
  --dlt-section-sm:       44px;

  /* ── Radius schaal ──────────────────────────────────── */
  --dlt-r-xs:             4px;
  --dlt-r-sm:             8px;
  --dlt-r:                12px;
  --dlt-r-lg:             16px;
  --dlt-r-xl:             22px;
  --dlt-r-pill:           999px;

  /* ── Shadow schaal ──────────────────────────────────── */
  --dlt-shadow-xs:        0 1px 2px rgba(11, 18, 32, .05);
  --dlt-shadow-sm:        0 1px 2px rgba(11, 18, 32, .05), 0 2px 8px rgba(11, 18, 32, .05);
  --dlt-shadow:           0 4px 12px rgba(11, 18, 32, .07), 0 12px 32px rgba(11, 18, 32, .07);
  --dlt-shadow-lg:        0 10px 24px rgba(11, 18, 32, .09), 0 28px 64px rgba(11, 18, 32, .09);
  --dlt-shadow-inset:     inset 0 1px 0 rgba(255, 255, 255, .55);
  --dlt-ring:             0 0 0 3px color-mix(in srgb, var(--dlt-accent) 26%, transparent);

  /* ── Typografie ─────────────────────────────────────── */
  --dlt-font:             system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dlt-font-display:     var(--dlt-font);
  --dlt-font-mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --dlt-fs-2xs:           .6875rem;  /* 11px - alleen voor caps-labels en meta */
  --dlt-fs-xs:            .75rem;    /* 12px */
  --dlt-fs-sm:            .875rem;   /* 14px */
  --dlt-fs:               1rem;      /* 16px */
  --dlt-fs-md:            1.125rem;  /* 18px */
  --dlt-fs-lg:            1.375rem;  /* 22px */
  --dlt-fs-xl:            1.75rem;   /* 28px */
  --dlt-fs-2xl:           2.25rem;   /* 36px */

  --dlt-lh-tight:         1.15;
  --dlt-lh:               1.55;
  --dlt-lh-loose:         1.7;

  --dlt-fw-normal:        400;
  --dlt-fw-medium:        500;
  --dlt-fw-semi:          600;
  --dlt-fw-bold:          700;
  --dlt-fw-black:         800;

  --dlt-track-tight:      -.01em;
  --dlt-track-wide:       .04em;
  --dlt-track-caps:       .1em;

  /* ── Motion ─────────────────────────────────────────── */
  --dlt-ease:             cubic-bezier(.2, .8, .2, 1);
  --dlt-ease-out:         cubic-bezier(.16, 1, .3, 1);
  --dlt-dur-fast:         140ms;
  --dlt-dur:              220ms;
  --dlt-dur-slow:         360ms;
  --dlt-transition:       var(--dlt-dur) var(--dlt-ease);

  /* ── Layout ─────────────────────────────────────────── */
  --dlt-container:        1240px;
  --dlt-control-h:        42px;
  --dlt-control-h-sm:     34px;
  --dlt-control-h-lg:     50px;

  /* ── Z-index ────────────────────────────────────────── */
  --dlt-z-sticky:         20;
  --dlt-z-header:         1030;
  --dlt-z-overlay:        1040;
  --dlt-z-modal:          1055;
  --dlt-z-toast:          1080;
}

/* =========================================================
   ENKA laag - zwart/wit huisstijl, scherpe hoeken.
   Scope is body.is-enka (gezet door inc/header.php) en
   .ek-page, exact zoals assets/css/enka/tokens.css doet.
   Mapt de --dlt-* tokens op de bestaande --ek-* waarden, dus
   er komt geen tweede waarheid naast de Enka-tokens.
   ========================================================= */
body.is-enka,
.ek-page {

  --dlt-ink:              var(--ek-ink, #0a0a0a);
  --dlt-ink-2:            var(--ek-ink-2, #1a1a1a);
  --dlt-muted:            var(--ek-muted, #6a6a6a);
  --dlt-muted-2:          var(--ek-muted-2, #9a9a9a);

  --dlt-bg:               var(--ek-surface, #ffffff);
  --dlt-surface:          var(--ek-surface-2, #f6f6f6);
  --dlt-surface-2:        var(--ek-surface-3, #ececec);
  --dlt-surface-3:        #e2e2e2;

  --dlt-line:             var(--ek-line, rgba(10, 10, 10, .08));
  --dlt-line-2:           var(--ek-line-2, rgba(10, 10, 10, .14));
  --dlt-line-strong:      rgba(10, 10, 10, .26);

  --dlt-on-dark:          var(--ek-on-dark, #ffffff);
  --dlt-on-dark-muted:    var(--ek-on-dark-muted, rgba(255, 255, 255, .65));
  --dlt-on-dark-muted-2:  var(--ek-on-dark-muted-2, rgba(255, 255, 255, .40));
  --dlt-on-dark-line:     var(--ek-on-dark-line, rgba(255, 255, 255, .10));

  /* Enka heeft geen accentkleur: accent = inkt (zwart) */
  --dlt-accent:           var(--ek-ink, #0a0a0a);
  --dlt-accent-ink:       #ffffff;
  --dlt-accent-soft:      rgba(10, 10, 10, .06);
  --dlt-accent-soft-2:    rgba(10, 10, 10, .10);
  --dlt-accent-line:      rgba(10, 10, 10, .22);

  /* Scherpe hoeken */
  --dlt-r-xs:             var(--ek-r-sm, 2px);
  --dlt-r-sm:             var(--ek-r, 4px);
  --dlt-r:                var(--ek-r, 4px);
  --dlt-r-lg:             var(--ek-r-lg, 8px);
  --dlt-r-xl:             var(--ek-r-lg, 8px);
  --dlt-r-pill:           999px;

  --dlt-shadow-xs:        0 1px 2px rgba(10, 10, 10, .04);
  --dlt-shadow-sm:        var(--ek-shadow-sm, 0 1px 2px rgba(10, 10, 10, .04));
  --dlt-shadow:           var(--ek-shadow-md, 0 4px 10px rgba(10, 10, 10, .06));
  --dlt-shadow-lg:        var(--ek-shadow-lg, 0 10px 24px rgba(10, 10, 10, .08));
  --dlt-ring:             0 0 0 3px rgba(10, 10, 10, .16);

  --dlt-font:             var(--ek-font, 'Lato', system-ui, sans-serif);
  --dlt-font-display:     var(--ek-font-display, 'Barlow Condensed', Arial, sans-serif);

  --dlt-ease:             var(--ek-ease, cubic-bezier(.2, .8, .2, 1));
  --dlt-dur-fast:         var(--ek-dur-fast, 180ms);
  --dlt-dur:              var(--ek-dur, 280ms);

  --dlt-section:          var(--ek-sec, 88px);
  --dlt-section-sm:       var(--ek-sec-sm, 56px);
}

/* =========================================================
   Respecteer reduced-motion. Raakt alleen --dlt-* duur-tokens,
   dus geen enkel bestaand component verandert hierdoor.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dlt-dur-fast: 1ms;
    --dlt-dur:      1ms;
    --dlt-dur-slow: 1ms;
  }
}

/* =========================================================
   DASHBOARD - was het <style>-blok in dashboard.php (regel
   276-494 van de oude versie), nu hier.
   ---------------------------------------------------------
   De vormtaal is 1-op-1 overgenomen van
   pages/admin/financial/invoices/detail.php, zodat het
   dashboard er hetzelfde uitziet als de admin-detailpagina's:
     .db-kpi        <- .dl-stat-card       (admin-common.css:145-166)
     .db-kpi-icon   <- .dl-stat-card .ico  (zachte tint, geen vlak)
     .db-kpi-lbl    <- .lbl                (caps-label BOVEN het getal)
     .db-kpi-val    <- .val
     .db-kpi-foot   <- .sub
     .db-card       <- .dl-admin-card      (admin-common.css:201-214)
     .db-table      <- .dl-admin-table     (admin-common.css:227-245)
     .db-empty      <- .dl-admin-empty     (admin-common.css:314-323)
     .db-hero       <- .dl-admin-hero      (admin-common.css:111-132)
   De markup in dashboard.php is niet omgebouwd: het label staat
   in de HTML NA het getal en wordt hier met grid-areas boven
   het getal gezet. Zo blijft de DOM ongewijzigd.
   ---------------------------------------------------------
   ALLES is gescoped onder body.page_dashboard. Dat is nodig,
   niet cosmetisch: db-card, db-table, db-empty en db-avatar
   worden OOK gebruikt door pages/dealers/customers/index.php
   en pages/dealers/projects/{index,create,details}.php. Die
   pagina's stylen die classes in hun eigen <style>-blok en
   mogen hier niets van merken.
   body.page_dashboard komt uit $cPage via $dl_bodyClasses in
   inc/header.php - niet wijzigen.

   Op Enka forceert assets/css/enka/sharp-edges.css alle
   border-radius met !important naar 5px (en db-bar naar
   999px). Dat overrulet de radius hieronder, precies zoals
   het het oude inline blok ook al deed. De accentkleur volgt
   daar automatisch via body.is-enka in admin-common.css:36-45.
   ========================================================= */
body.page_dashboard {
  /* Deze wijzen sinds de account-bestellingen-ronde naar de gedeelde
     --dlt-* tokens hierboven, zodat er een bron is. Waarden ongewijzigd. */
  --dl-db-card-line:  var(--dlt-card-line);
  --dl-db-row-line:   var(--dlt-row-line);
  --dl-db-head-bg:    var(--dlt-head-bg);
  --dl-db-th-bg:      var(--dlt-th-bg);
  --dl-db-label:      var(--dlt-label-ink);
  --dl-db-sub:        var(--dlt-sub-ink);
  --dl-db-strong-ink: var(--dlt-strong-ink);
  --dl-db-empty-ico:  var(--dlt-empty-ico);

  --dl-db-track:      color-mix(in srgb, var(--dlt-ink) 7%, transparent);
  --dl-db-veil:       color-mix(in srgb, var(--dlt-on-dark) 13%, transparent);
  --dl-db-veil-2:     color-mix(in srgb, var(--dlt-on-dark) 22%, transparent);
  --dl-db-on-hero:    color-mix(in srgb, var(--dlt-on-dark) 90%, transparent);
}

/* ── Hero: zelfde opzet als .dl-admin-hero ────────────── */
/* De decoratieve gloed zit in de background van de hero zelf, NIET in een
   ::before. Reden: assets/css/enka/sharp-edges.css:12 zet
   `*, *::before, *::after { border-radius: 5px !important }`, en de
   uitzonderingenlijst daar dekt alleen .dl-admin-hero::after. Een ronde
   ::before werd op Enka dus een zichtbaar grijs vierkant blok rechtsboven.
   Met een radial-gradient is er geen radius om te overrulen en werkt het in
   beide merken hetzelfde. */
body.page_dashboard .db-hero {
  background:
    radial-gradient(220px 220px at calc(100% - 40px) -40px,
                    color-mix(in srgb, var(--dlt-on-dark) 9%, transparent) 0%,
                    color-mix(in srgb, var(--dlt-on-dark) 9%, transparent) 60%,
                    transparent 61%),
    var(--accent-gradient, linear-gradient(135deg, var(--dlt-c-blue), var(--dlt-accent)));
  color: var(--dlt-on-dark);
  border-radius: 18px;
  padding: var(--dlt-sp-6) var(--dlt-sp-8);
  margin-bottom: var(--dlt-sp-6);
  box-shadow: 0 20px 50px rgba(var(--accent-rgb, 48, 77, 161), .15);
  position: relative;
  overflow: hidden;
}
body.page_dashboard .db-hero-role {
  display: inline-flex; align-items: center; gap: var(--dlt-sp-1);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  letter-spacing: var(--dlt-track-caps);
  text-transform: uppercase;
  color: var(--dlt-on-dark-muted);
  background: color-mix(in srgb, var(--dlt-on-dark) 12%, transparent);
  border: 1px solid var(--dlt-on-dark-line);
  border-radius: var(--dlt-r-pill);
  padding: var(--dlt-sp-1) var(--dlt-sp-3);
  margin-bottom: var(--dlt-sp-2);
}
/* Paginatitel: schaalt vloeiend mee i.p.v. drie harde stappen,
   zodat tablet niet in het gat tussen mobiel en desktop valt. */
body.page_dashboard .db-hero-name {
  font-size: clamp(1.3rem, .85rem + 1.9vw, var(--dlt-fs-2xl));
  font-weight: var(--dlt-fw-black);
  letter-spacing: var(--dlt-track-tight);
  line-height: var(--dlt-lh-tight);
}
body.page_dashboard .db-hero-sub {
  font-size: var(--dlt-fs-sm);
  color: var(--dlt-on-dark-muted);
  margin-top: var(--dlt-sp-1);
}
body.page_dashboard .db-hero-date {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-on-dark-muted-2);
  margin-top: var(--dlt-sp-1);
}
/* =========================================================
   Snelmenu = vierkante icoon-blokjes met een tooltip.
   Waarom geen knoppen met tekst: de tegels onder de hero
   linken naar exact dezelfde plekken met exact dezelfde
   labels, dus dat stond er twee keer. De labels leven nu in
   de tooltip (data-bs-title) en in aria-label; de <span>
   blijft in de markup staan maar wordt verborgen.
   Tooltips worden al geinitialiseerd op
   [data-bs-toggle="tooltip"] in beide footers.
   ========================================================= */
body.page_dashboard .db-hero-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--dlt-sp-2);
  margin-top: var(--dlt-sp-5);
}
body.page_dashboard .db-hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: var(--dl-db-veil);
  border: 1px solid var(--dlt-on-dark-line);
  color: var(--dl-db-on-hero);
  border-radius: var(--dlt-r);
  font-size: var(--dlt-fs);
  line-height: 1;
  text-decoration: none;
  transition: background var(--dlt-dur-fast) var(--dlt-ease),
              border-color var(--dlt-dur-fast) var(--dlt-ease),
              transform var(--dlt-dur-fast) var(--dlt-ease);
}
/* Het label staat in de tooltip en in aria-label. */
body.page_dashboard .db-hero-btn span { display: none; }
body.page_dashboard .db-hero-btn i { font-size: var(--dlt-fs); }
body.page_dashboard .db-hero-btn:hover,
body.page_dashboard .db-hero-btn:focus-visible {
  background: var(--dl-db-veil-2);
  color: var(--dlt-on-dark);
  border-color: color-mix(in srgb, var(--dlt-on-dark) 35%, transparent);
  transform: translateY(-1px);
}
body.page_dashboard .db-hero-btn:focus-visible {
  outline: 2px solid var(--dlt-on-dark);
  outline-offset: 2px;
}
/* Uitloggen hoort niet bij het snelmenu: apart zetten met een scheiding. */
body.page_dashboard .db-hero-btn.db-hero-btn-out {
  opacity: .6;
  margin-left: auto;
}
body.page_dashboard .db-hero-btn.db-hero-btn-out:hover { opacity: 1; }

/* ── Inline meldingen ─────────────────────────────────── */
body.page_dashboard .db-alert {
  border-radius: var(--dlt-r);
  padding: var(--dlt-sp-3) var(--dlt-sp-4);
  display: flex; align-items: flex-start; gap: var(--dlt-sp-3);
  font-size: var(--dlt-fs-sm);
  line-height: var(--dlt-lh);
  margin-bottom: var(--dlt-sp-2);
  border: 1px solid transparent;
}
body.page_dashboard .db-alert-warning { background: var(--dlt-c-amber-bg); border-color: var(--dlt-c-amber);      color: var(--dlt-c-amber-ink); }
body.page_dashboard .db-alert-danger  { background: var(--dlt-c-red-bg);   border-color: var(--dlt-c-red);        color: var(--dlt-c-red-ink); }
body.page_dashboard .db-alert-info    { background: var(--dlt-c-blue-bg);  border-color: var(--dlt-c-blue-line);  color: var(--dlt-c-blue-ink); }
body.page_dashboard .db-alert-success { background: var(--dlt-c-green-bg); border-color: var(--dlt-c-green-line); color: var(--dlt-c-green-ink); }

/* =========================================================
   KPI-kaart == .dl-stat-card
   Grid met het icoon links over twee rijen, label boven getal.
   De DOM-orde is icoon > getal > label > voet; grid-areas
   zetten dat recht zonder de markup te verplaatsen.
   ========================================================= */
body.page_dashboard .db-kpi {
  background: var(--dlt-bg);
  border: 1px solid var(--dl-db-card-line);
  border-radius: 14px;
  padding: 16px 18px;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "ico lbl"
    "ico val"
    "foot foot";
  align-content: start;
  column-gap: 12px;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dashboard .db-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 18, 32, .08);
}

/* De accentbalk verdwijnt: de status zit nu in de tint van het
   icoon, net als bij .dl-stat-card.is-danger / .is-success. De
   div blijft in de markup staan, hij is alleen niet zichtbaar. */
body.page_dashboard .db-kpi-accent { display: none; }

body.page_dashboard .db-kpi-icon {
  grid-area: ico;
  align-self: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-bottom: 0;
  /* Standaard: zachte accenttint met gekleurd glyph, zoals .ico */
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
}
/* Categorie- en statustinten: zacht vlak, gekleurd glyph. Dit
   overschrijft de solide .dbc-* vlakken bewust alleen binnen een
   KPI-icoon; op andere plekken blijven ze vol. */
body.page_dashboard .db-kpi-icon.dbc-blue   { background: color-mix(in srgb, var(--dlt-c-blue) 12%, transparent);   color: var(--dlt-c-blue); }
body.page_dashboard .db-kpi-icon.dbc-green  { background: color-mix(in srgb, var(--dlt-c-green) 14%, transparent);  color: var(--dlt-c-green); }
body.page_dashboard .db-kpi-icon.dbc-amber  { background: color-mix(in srgb, var(--dlt-c-amber) 16%, transparent);  color: var(--dlt-c-amber-ink); }
body.page_dashboard .db-kpi-icon.dbc-red    { background: color-mix(in srgb, var(--dlt-c-red) 12%, transparent);    color: var(--dlt-c-red); }
body.page_dashboard .db-kpi-icon.dbc-purple { background: color-mix(in srgb, var(--dlt-c-purple) 12%, transparent); color: var(--dlt-c-purple); }
body.page_dashboard .db-kpi-icon.dbc-slate  { background: color-mix(in srgb, var(--dlt-c-slate) 12%, transparent);  color: var(--dlt-c-slate); }

/* Label boven het getal, caps en klein - zoals .lbl */
body.page_dashboard .db-kpi-lbl {
  grid-area: lbl;
  align-self: end;
  font-size: var(--dlt-fs-2xs);
  color: var(--dl-db-label);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  line-height: 1.2;
  margin-top: 0;
}
/* Het getal is het zwaarste element in de kaart - zoals .val */
body.page_dashboard .db-kpi-val {
  grid-area: val;
  align-self: start;
  font-size: 1.5rem;
  font-weight: var(--dlt-fw-black);
  line-height: 1.1;
  letter-spacing: var(--dlt-track-tight);
  color: var(--dl-db-strong-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
/* Extra regel onder de kaart - zoals .sub, maar met de scheidingslijn
   die het dashboard al had, want daar staan bedragen en percentages in. */
body.page_dashboard .db-kpi-foot {
  grid-area: foot;
  font-size: var(--dlt-fs-xs);
  color: var(--dl-db-sub);
  margin-top: var(--dlt-sp-3);
  padding-top: var(--dlt-sp-3);
  border-top: 1px solid var(--dl-db-row-line);
}
body.page_dashboard .db-kpi-cta {
  grid-area: foot;
  margin-top: var(--dlt-sp-3);
}

/* ── Categorie-accenten (tegels, balken) ──────────────── */
body.page_dashboard .dbc-blue   { background: var(--dlt-c-blue); }
body.page_dashboard .dbc-green  { background: var(--dlt-c-green); }
body.page_dashboard .dbc-red    { background: var(--dlt-c-red); }
body.page_dashboard .dbc-amber  { background: var(--dlt-c-amber); }
body.page_dashboard .dbc-purple { background: var(--dlt-c-purple); }
body.page_dashboard .dbc-slate  { background: var(--dlt-c-slate); }

/* =========================================================
   Navigatietegels.
   Was een grid van repeat(4, 1fr) met de tegelinhoud verticaal
   gestapeld. Twee problemen: de hoogste tegel (twee regels
   omschrijving) bepaalde de rijhoogte, dus de rest kreeg een
   gat, en een vijfde tegel bleef als kwart-breed blokje alleen
   op rij twee achter.

   Nu flex-wrap met een basis per breakpoint en flex-grow, dus
   het aantal per rij blijft 4 / 3 / 2 zoals het was, maar de
   laatste rij groeit vol in plaats van half leeg te blijven.
   De basis trekt de gap eraf (gap 12px: bij 4 per rij zijn er
   3 gaps, dus 36/4 = 9px per tegel).

   De tegel zelf is horizontaal: icoon links, naam en
   omschrijving in het midden, pijl rechts. Dat haalt de dode
   ruimte eruit en maakt een brede tegel in de laatste rij een
   logische regel in plaats van een uitgerekt blok.
   ========================================================= */
body.page_dashboard .db-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dlt-sp-3);
}
body.page_dashboard .db-tile {
  flex: 1 1 calc(25% - 9px);
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dlt-sp-3);
  background: var(--dlt-bg);
  border: 1px solid var(--dl-db-card-line);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none; color: inherit;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease),
              border-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dashboard .dl-db-tile-text { min-width: 0; }
body.page_dashboard .db-tile:hover {
  transform: translateY(-2px);
  /* Zachte accentring in plaats van een harde rand: die viel bij
     hover als een zwarte lijn om de tegel. */
  box-shadow: 0 12px 28px rgba(11, 18, 32, .08),
              0 0 0 1px var(--accent-soft, var(--dlt-accent-soft));
  border-color: var(--accent-soft, var(--dlt-accent-soft));
  color: inherit;
}
body.page_dashboard .db-tile-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--dlt-fs-sm); color: var(--dlt-on-dark); flex-shrink: 0;
  /* Lichte binnenrand zodat de volvlakke kleuren niet plat ogen. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 2px 6px rgba(11, 18, 32, .10);
}
body.page_dashboard .db-tile-name {
  font-weight: var(--dlt-fw-bold);
  font-size: var(--dlt-fs-sm);
  color: var(--dl-db-strong-ink);
  letter-spacing: var(--dlt-track-tight);
  line-height: 1.25;
  /* Lange titels afkappen i.p.v. de tegel oprekken. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .db-tile-desc {
  font-size: var(--dlt-fs-xs);
  color: var(--dl-db-label);
  margin-top: 2px;
  line-height: 1.3;
  /* Maximaal een regel: de omschrijving van "Retourverzoeken" liep over
     twee regels en bepaalde daarmee de hoogte van de hele rij. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .db-tile-arrow {
  font-size: var(--dlt-fs-2xs);
  color: var(--dl-db-sub);
  margin-top: 0;
  align-self: center;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dashboard .db-tile:hover .db-tile-arrow {
  color: var(--accent, var(--dlt-accent));
  transform: translateX(3px);
}

/* ── Kaarten == .dl-admin-card ────────────────────────── */
body.page_dashboard .db-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dl-db-card-line);
  border-radius: 16px;
  overflow: hidden;
}
body.page_dashboard .db-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dl-db-row-line);
  background: var(--dl-db-head-bg);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--dlt-sp-2); flex-wrap: wrap;
}
body.page_dashboard .db-card-title {
  font-weight: var(--dlt-fw-black);
  font-size: 1rem;
  color: var(--dl-db-strong-ink);
}
body.page_dashboard .db-card-body { padding: 18px; }

/* ── Tabellen == .dl-admin-table ──────────────────────── */
body.page_dashboard .db-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.page_dashboard .db-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 420px; }
body.page_dashboard .db-table thead th {
  padding: 12px 16px;
  background: var(--dl-db-th-bg);
  text-align: left;
  font-weight: var(--dlt-fw-bold);
  color: var(--dl-db-strong-ink);
  font-size: var(--dlt-fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  white-space: nowrap;
  border-bottom: 1px solid var(--dl-db-row-line);
}
body.page_dashboard .db-table tbody tr {
  border-bottom: 1px solid var(--dl-db-row-line);
  transition: background var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dashboard .db-table tbody tr:last-child { border-bottom: none; }
body.page_dashboard .db-table tbody tr:hover { background: var(--accent-softer, var(--dlt-surface)); }
body.page_dashboard .db-table td {
  padding: 12px 16px;
  vertical-align: middle;
  line-height: 1.4;
}
/* Getallen uitlijnen op cijferbreedte, zodat kolommen niet dansen. */
body.page_dashboard .db-table .text-end { font-variant-numeric: tabular-nums; }
body.page_dashboard .db-table a.db-link {
  color: var(--accent, var(--dlt-accent));
  font-weight: var(--dlt-fw-bold);
  text-decoration: none;
}
body.page_dashboard .db-table a.db-link:hover { text-decoration: underline; }

/* ── Leegstaat == .dl-admin-empty ─────────────────────── */
body.page_dashboard .db-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--dl-db-label);
  font-size: var(--dlt-fs-sm);
}
body.page_dashboard .db-empty i {
  font-size: 2.5rem;
  color: var(--dl-db-empty-ico);
  margin-bottom: 12px;
  display: block;
}

/* ── Avatar ───────────────────────────────────────────── */
body.page_dashboard .db-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
  border: 1px solid var(--dl-db-card-line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--dlt-fs-md);
  font-weight: var(--dlt-fw-black);
  line-height: 1;
  flex-shrink: 0;
}

/* ── Voortgangsbalk ───────────────────────────────────── */
body.page_dashboard .db-bar {
  height: 6px; border-radius: var(--dlt-r-pill);
  background: var(--dl-db-track); overflow: hidden;
}
body.page_dashboard .db-bar-fill {
  height: 100%; border-radius: var(--dlt-r-pill);
  background: var(--accent, var(--dlt-accent));
  transition: width var(--dlt-dur-slow) var(--dlt-ease);
}
body.page_dashboard .db-bar-fill.is-green { background: var(--dlt-c-green); }
body.page_dashboard .db-bar-fill.is-red   { background: var(--dlt-c-red); }
body.page_dashboard .db-bar-fill.is-amber { background: var(--dlt-c-amber); }

/* =========================================================
   Sectiekop. Was grijze caps-tekst met een streep over de
   volle breedte eronder - dat hing er los bij. Nu een echte
   kop: accentstreepje, donkere caps-tekst, en een hairline
   die naast de tekst uitdooft in plaats van hard doorloopt.
   De hoogte zit in --dl-db-sec-h, want de rechterkolom moet
   diezelfde hoogte als offset gebruiken (zie onder).
   ========================================================= */
body.page_dashboard {
  --dl-db-sec-h: 30px;
}
body.page_dashboard .db-section-title {
  display: flex;
  align-items: center;
  gap: var(--dlt-sp-3);
  min-height: var(--dl-db-sec-h);
  font-size: var(--dlt-fs-xs);
  font-weight: var(--dlt-fw-black);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-caps);
  color: var(--dl-db-strong-ink);
  margin-bottom: var(--dlt-sp-3);
  padding-bottom: 0;
  border-bottom: 0;
}
body.page_dashboard .db-section-title::before {
  content: '';
  flex: 0 0 auto;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--accent, var(--dlt-accent));
}
body.page_dashboard .db-section-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--dl-db-card-line), transparent);
}

/* Ritme tussen de secties: een kop die op inhoud volgt krijgt
   lucht erboven, de eerste kop van de pagina niet. */
body.page_dashboard .row + .db-section-title,
body.page_dashboard .dl-db-tabs + .db-section-title {
  margin-top: var(--dlt-sp-8);
}

/* De accountkaart die rechts naast de tegels stond is verwijderd; de
   tegelkolom houdt zijn col-xl-8 in de markup maar vult nu de volle
   breedte. De regel hieronder hoort bij die verwijderde kaart en staat
   er alleen nog voor het geval dat blok teruggezet wordt. */
body.page_dashboard .dl-db-nav-col {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 1200px) {
  body.page_dashboard aside.col-xl-4 > .db-card {
    margin-top: calc(var(--dl-db-sec-h) + var(--dlt-sp-3));
  }
}

/* ── Accountkaart ─────────────────────────────────────── */
body.page_dashboard .db-account-row {
  display: flex; align-items: center; gap: var(--dlt-sp-3);
  margin-bottom: var(--dlt-sp-4);
}

/* De drie mini-stats stonden als losse cijfers in het niets.
   Nu een zacht paneel met scheidingslijnen ertussen, zodat het
   als een blok leest. De rij is altijd de directe buur van
   .db-account-row, dus dit hoeft niet via :has(). */
body.page_dashboard .db-account-row + .row {
  background: var(--dlt-surface);
  border: 1px solid var(--dl-db-card-line);
  border-radius: 12px;
  padding: var(--dlt-sp-3) 0;
  margin: 0 0 var(--dlt-sp-4);
  --bs-gutter-x: 0;
}
body.page_dashboard .db-account-row + .row > [class*="col-"] + [class*="col-"] {
  border-left: 1px solid var(--dl-db-card-line);
}

/* =========================================================
   Tabs. Structuur en look komen uit Components\Tab\Tab +
   assets/css/tabs.css met de variant .dl-side-tabs, dus exact
   zoals invoices/detail.php: op desktop een sticky menu van
   250px links, onder 992px een horizontaal scrollende balk
   (tabs.css:233-254). Hier alleen wat die referentie niet dekt.
   ========================================================= */
body.page_dashboard .dl-db-tabs { margin-bottom: var(--dlt-sp-6); }

/* De pane is volle breedte, dus de col-xl-7/-5/-6 die op de kaart
   bleef staan mag hier niet meer inperken. De Bootstrap-classes
   blijven in de markup staan, dit zet ze binnen een pane alleen
   buiten werking. */
body.page_dashboard .dl-tab-panel > .row > .dl-db-tab-col {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Aantal tussen haakjes in het tab-label iets rustiger zetten dan
   de labeltekst zelf, zonder de tekst te splitsen (Tab.php escapet
   het label, dus een apart element kan daar niet). */
body.page_dashboard .dl-db-tabs .dl-tab { letter-spacing: 0; }

@media (max-width: 767px) {
  body.page_dashboard .dl-db-tabs .dl-tab { min-height: 40px; }
}

/* =========================================================
   Helpers die de inline style-attributen uit dashboard.php
   vervangen. Namen zijn nieuw en dus dl- geprefixt.
   ========================================================= */
body.page_dashboard .dl-db-role-dot { font-size: .5rem; }

body.page_dashboard .dl-db-alert-icon { margin-top: 1px; flex-shrink: 0; }
body.page_dashboard .dl-db-alert-text { margin-top: var(--dlt-sp-1); font-size: var(--dlt-fs-sm); }
body.page_dashboard .dl-db-alert-link { color: inherit; font-weight: var(--dlt-fw-bold); }

body.page_dashboard .dl-db-acct-info { min-width: 0; }
body.page_dashboard .dl-db-acct-name {
  font-weight: var(--dlt-fw-bold); font-size: var(--dlt-fs-sm);
  color: var(--dl-db-strong-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .dl-db-acct-meta {
  font-size: var(--dlt-fs-xs); color: var(--dl-db-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.page_dashboard .dl-db-acct-company {
  font-size: var(--dlt-fs-xs); color: var(--dl-db-label);
  font-weight: var(--dlt-fw-semi); margin-top: var(--dlt-sp-1);
}

/* Mini-stats in de accountkaart: zelfde ritme als de KPI-kaarten,
   label in caps onder het getal. data-tone komt uit dashboard.php
   en verving daar de inline kleur. */
body.page_dashboard .dl-db-ministat-val {
  font-size: var(--dlt-fs-md);
  font-weight: var(--dlt-fw-black);
  line-height: 1.1;
  color: var(--dl-db-strong-ink);
  font-variant-numeric: tabular-nums;
}
body.page_dashboard .dl-db-ministat-val-lg { font-size: var(--dlt-fs-lg); }
body.page_dashboard .dl-db-ministat-val[data-tone="warn"]   { color: var(--dlt-c-amber-ink); }
body.page_dashboard .dl-db-ministat-val[data-tone="danger"] { color: var(--dlt-c-red); }
body.page_dashboard .dl-db-ministat-val[data-tone="ok"]     { color: var(--dlt-c-green); }
body.page_dashboard .dl-db-ministat-lbl {
  font-size: var(--dlt-fs-2xs);
  color: var(--dl-db-label);
  font-weight: var(--dlt-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  margin-top: var(--dlt-sp-1);
}

body.page_dashboard .dl-db-progress-row { font-size: var(--dlt-fs-xs); }
body.page_dashboard .dl-db-muted { color: var(--dl-db-label); }
body.page_dashboard .dl-db-strong {
  font-weight: var(--dlt-fw-bold); font-variant-numeric: tabular-nums;
}

/* td-selectors: .db-table td weegt zwaarder dan een losse class,
   dus deze vier moeten het type-element meenemen om te winnen. */
body.page_dashboard .db-table td.dl-db-amount {
  font-weight: var(--dlt-fw-bold); font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--dl-db-strong-ink);
}
body.page_dashboard .db-table td.dl-db-id {
  font-weight: var(--dlt-fw-bold); color: var(--dl-db-strong-ink);
}
body.page_dashboard .db-table td.dl-db-cell-meta {
  font-size: var(--dlt-fs-xs); color: var(--dl-db-label);
}
body.page_dashboard .db-table td.dl-db-cell-meta-sm {
  font-size: var(--dlt-fs-2xs); color: var(--dl-db-label); white-space: nowrap;
}
body.page_dashboard .dl-db-cell-name {
  font-weight: var(--dlt-fw-bold); font-size: var(--dlt-fs-sm);
  color: var(--dl-db-strong-ink);
}
body.page_dashboard .dl-db-cell-sub {
  font-size: var(--dlt-fs-2xs); color: var(--dl-db-sub);
}
body.page_dashboard .dl-db-th-progress { min-width: 160px; }

/* Deze staan NA .db-kpi-val en .db-empty i, want gelijke
   specificiteit - de laatste regel wint. */
body.page_dashboard .dl-db-kpi-lbl-sm { font-size: var(--dlt-fs-2xs); }
body.page_dashboard .db-kpi.dl-db-kpi-warn   { border-color: var(--dlt-c-amber); }
body.page_dashboard .db-kpi.dl-db-kpi-danger { border-color: var(--dlt-c-red); }
body.page_dashboard .db-kpi-val.dl-db-val-amber,
body.page_dashboard .db-kpi-val.dl-db-val-warn   { color: var(--dlt-c-amber-ink); }
body.page_dashboard .db-kpi-val.dl-db-val-green  { color: var(--dlt-c-green); }
body.page_dashboard .db-kpi-val.dl-db-val-danger { color: var(--dlt-c-red); }
body.page_dashboard .db-empty i.dl-db-empty-ok   { color: var(--dlt-c-green); }

/* =========================================================
   Responsive. De Bootstrap-kolomklassen in dashboard.php zijn
   niet aangeraakt, dus de omslagpunten 576 / 768 / 992 / 1200
   liggen waar ze lagen en wat stapelde stapelt nog.
   ========================================================= */
@media (max-width: 767px) {
  /* 3 per rij, laatste rij groeit vol. */
  body.page_dashboard .db-tile { flex-basis: calc(33.333% - 8px); }
  body.page_dashboard .db-hero { padding: var(--dlt-sp-5) var(--dlt-sp-4); }
  body.page_dashboard .db-kpi { padding: 14px; column-gap: 10px; }
  body.page_dashboard .db-kpi-val { font-size: var(--dlt-fs-lg); }
  body.page_dashboard .db-kpi-icon { width: 38px; height: 38px; font-size: var(--dlt-fs-sm); }
  body.page_dashboard .db-card-head { padding-left: var(--dlt-sp-4); padding-right: var(--dlt-sp-4); }
  body.page_dashboard .db-card-body { padding-left: var(--dlt-sp-4); padding-right: var(--dlt-sp-4); }
  body.page_dashboard .db-table { min-width: 380px; }
  body.page_dashboard .db-table thead th,
  body.page_dashboard .db-table td { padding-left: var(--dlt-sp-3); padding-right: var(--dlt-sp-3); }
  body.page_dashboard .db-empty { padding: 40px 16px; }
  /* Snelmenu is al 44x44, dus daar is geen touch-correctie nodig. */
  body.page_dashboard .db-card-head .dl-btn,
  body.page_dashboard .db-kpi-cta .dl-btn { min-height: 40px; }
}

@media (max-width: 575px) {
  /* 2 per rij, laatste rij groeit vol. Bij twee smalle tegels naast
     elkaar past icoon + naam + pijl niet meer op een regel, dus daar
     gaat het icoon weer boven de naam staan. */
  body.page_dashboard .db-tile {
    flex-basis: calc(50% - 6px);
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--dlt-sp-3);
    gap: var(--dlt-sp-2);
  }
  body.page_dashboard .db-tile-icon { grid-column: 1 / -1; }
  body.page_dashboard .db-tile-desc { display: none; }
  body.page_dashboard .db-hero { padding: var(--dlt-sp-4) var(--dlt-sp-3); }
  /* Blokjes iets kleiner op de kleinste schermen, maar niet onder de
     40px touch-grens. */
  body.page_dashboard .db-hero-btn { width: 40px; height: 40px; }
  /* Bij twee KPI's naast elkaar is er geen ruimte voor icoon + getal
     naast elkaar; het icoon gaat dan boven het label staan. */
  body.page_dashboard .db-kpi {
    grid-template-columns: 1fr;
    grid-template-areas: "ico" "lbl" "val" "foot";
    row-gap: 2px;
  }
  body.page_dashboard .db-kpi-icon { margin-bottom: var(--dlt-sp-2); }
  /* overflow-wrap i.p.v. word-break: break-all, dat brak bedragen
     als "€ 1.234,56" midden in het getal af. */
  body.page_dashboard .db-kpi-val { overflow-wrap: anywhere; }
}

/* =========================================================
   BESTELLINGEN-OVERZICHT (body.page_dealer_orders)
   ---------------------------------------------------------
   Route /account/bestellingen (Enka B2C) EN /dealers/orders
   (DutchLine B2B) wijzen naar hetzelfde bestand
   pages/dealers/orders/index.php, dus deze styling geldt voor
   beide merken. Dat kruist geen werelden: alle kleuren lopen
   via --accent / --dlt-*, en die resolven per merk (Enka wordt
   zwart via body.is-enka in enka/tokens.css).

   De vormtaal is dezelfde als het dashboard en
   admin/financial/invoices. Let op: admin-common.css wordt hier
   NIET geladen (inc/header.php:559 laadt dat alleen op
   page_admin_* en page_dashboard), dus --accent-softer en
   --st-* bestaan hier niet. Daarom lopen alle waarden via de
   --dlt-* tokens bovenaan dit bestand.

   $cPage = 'page_dealer_orders' wordt door inc/dutchline-menu.php
   gelezen om het menu-item actief te zetten - niet wijzigen.
   Bestaande classes blijven staan: .dl-card hangt aan cards.js
   en cart.js, .page-item / .page-link aan pagination.js.
   ========================================================= */

/* ── Paginakop ────────────────────────────────────────── */
body.page_dealer_orders .dl-ord-title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: var(--dlt-fw-black);
  letter-spacing: var(--dlt-track-tight);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}
body.page_dealer_orders .dl-ord-sub {
  font-size: var(--dlt-fs-sm);
  color: var(--dlt-label-ink);
  margin-top: var(--dlt-sp-1) !important;
}

/* ── Filterbalk == .dl-admin-toolbar ──────────────────── */
body.page_dealer_orders .dl-ord-filters {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 14px;
  box-shadow: none;
}
body.page_dealer_orders .dl-ord-filters .dl-card-body { padding: 14px 16px; }
body.page_dealer_orders .dl-ord-filters .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
}
/* Velden zonder harde rand, zoals de zoekbalk in de admin-toolbar. */
body.page_dealer_orders .dl-ord-filters .form-control,
body.page_dealer_orders .dl-ord-filters .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_orders .dl-ord-filters .form-control:focus,
body.page_dealer_orders .dl-ord-filters .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Regelteller, rechts in de paginakop ──────────────── */
body.page_dealer_orders .dl-ord-count {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-label-ink);
  background: var(--dlt-surface);
  border: 1px solid var(--dlt-card-line);
  border-radius: var(--dlt-r-pill);
  padding: var(--dlt-sp-1) var(--dlt-sp-3);
  white-space: nowrap;
}

/* ── Kaart om de tabel == .dl-admin-card ──────────────── */
body.page_dealer_orders .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
  overflow: hidden;
}

/* ── Knoppenrij van het filter ────────────────────────── */
body.page_dealer_orders .dl-ord-actions {
  border-top: 1px solid var(--dlt-row-line);
  padding-top: var(--dlt-sp-3);
  margin-top: var(--dlt-sp-1);
}

/* ── Tabel == .dl-admin-table ─────────────────────────── */
body.page_dealer_orders .dl-ord-table {
  font-size: .9rem;
  /* Vaste layout, zodat de colgroup hieronder ook echt leidend is en de
     browser niet alsnog naar inhoud herverdeelt. */
  table-layout: fixed;
  min-width: 780px;
}
body.page_dealer_orders .dl-ord-c-id    { width: 150px; }
body.page_dealer_orders .dl-ord-c-date  { width: 110px; }
body.page_dealer_orders .dl-ord-c-items { width: 90px; }
body.page_dealer_orders .dl-ord-c-total { width: 130px; }
body.page_dealer_orders .dl-ord-c-act   { width: 110px; }
/* Badges mogen niet afbreken in hun flexibele kolom. */
body.page_dealer_orders .dl-ord-table td .dl-badge,
body.page_dealer_orders .dl-ord-table td .dl-pill { white-space: nowrap; }
body.page_dealer_orders .dl-ord-items { font-variant-numeric: tabular-nums; }
body.page_dealer_orders .dl-ord-table > thead > tr > th {
  padding: 12px 16px;
  background: var(--dlt-th-bg);
  border-bottom: 1px solid var(--dlt-row-line);
  color: var(--dlt-strong-ink);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  white-space: nowrap;
}
body.page_dealer_orders .dl-ord-table > tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--dlt-row-line);
  vertical-align: middle;
  line-height: 1.4;
}
body.page_dealer_orders .dl-ord-table > tbody > tr:last-child > td { border-bottom: 0; }
/* Bootstrap zet de hover via --bs-table-*; die overrulen we zodat de
   rijhover dezelfde zachte accenttint krijgt als in de admin. */
body.page_dealer_orders .dl-ord-table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-state: transparent;
  background-color: var(--dlt-accent-softer);
  color: inherit;
}
body.page_dealer_orders .dl-ord-id {
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page_dealer_orders .dl-ord-date { white-space: nowrap; }
body.page_dealer_orders .dl-ord-amount {
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Leegstaat == .dl-admin-empty ─────────────────────── */
body.page_dealer_orders .dl-empty {
  border: 1px dashed var(--dlt-row-line);
  border-radius: 14px;
  margin: var(--dlt-sp-4);
  color: var(--dlt-label-ink);
}
body.page_dealer_orders .dl-empty i { color: var(--dlt-empty-ico) !important; }

/* ── Paginering == .dl-admin-pager ────────────────────── */
body.page_dealer_orders .pagination { gap: 6px; }
body.page_dealer_orders .page-item .page-link {
  border: 1px solid var(--dlt-card-line);
  border-radius: 8px;
  color: var(--dlt-strong-ink);
  background: var(--dlt-bg);
  padding: 6px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_orders .page-item .page-link:hover {
  border-color: var(--accent, var(--dlt-accent));
  color: var(--accent, var(--dlt-accent));
  background: var(--dlt-accent-softer);
}
body.page_dealer_orders .page-item.active .page-link {
  background: var(--accent, var(--dlt-accent));
  border-color: var(--accent, var(--dlt-accent));
  color: var(--dlt-accent-ink);
}
body.page_dealer_orders .page-item .page-link:focus {
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Mobiel ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page_dealer_orders .dl-ord-table > thead > tr > th,
  body.page_dealer_orders .dl-ord-table > tbody > tr > td {
    padding-left: var(--dlt-sp-3);
    padding-right: var(--dlt-sp-3);
  }
  body.page_dealer_orders .dl-ord-filters .dl-card-body { padding: var(--dlt-sp-3); }
  /* Touch target op de filterknoppen en de paginering. */
  body.page_dealer_orders .dl-ord-filters .dl-btn { min-height: 40px; }
  body.page_dealer_orders .page-item .page-link { min-height: 40px; display: flex; align-items: center; }
}

/* =========================================================
   FACTUUROVERZICHT (.dl-inv-page)
   ---------------------------------------------------------
   Route /account/facturen (Enka B2C) EN /dealers/invoices
   (DutchLine B2B) wijzen naar pages/dealers/invoices/index.php.

   Scope is .dl-inv-page en NIET body.page_dealer_invoices:
   die body-class wordt ook gezet door detail.php, pay.php en
   waiting.php. Bovendien worden .dl-headline, .dl-subtle,
   .dl-mobile-table en .dl-actions gedeeld met de
   warehouse-orderpagina's. Op de body-class scopen zou al die
   pagina's meenemen.

   admin-common.css wordt hier niet geladen (inc/header.php:559),
   dus de dl-admin-tabs look is hieronder nagebouwd op --dlt-*.
   ========================================================= */

/* ── Uit het verplaatste style-blok, 1-op-1 ───────────── */
.dl-inv-page .dl-subtle { color: rgba(15, 23, 42, .68); }

/* ── Paginakop ────────────────────────────────────────── */
.dl-inv-page .dl-headline {
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}
.dl-inv-page > .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line) !important;
  border-radius: 16px;
  box-shadow: none !important;
}

/* =========================================================
   Betaaloverzicht boven de facturenlijst (.dl-inv-kpis).
   Zelfde vormtaal als .dl-stat-card uit admin-common.css, maar
   admin-common.css wordt op klantpagina's niet geladen, dus hier
   nagebouwd op de gedeelde --dlt-* tokens.
   ========================================================= */
.dl-inv-page .dl-inv-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 991px) {
  .dl-inv-page .dl-inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .dl-inv-page .dl-inv-kpis { grid-template-columns: 1fr; }
}
.dl-inv-page .dl-inv-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
}
.dl-inv-page .dl-inv-kpi .ico {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
}
.dl-inv-page .dl-inv-kpi .lbl {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
}
.dl-inv-page .dl-inv-kpi .val {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.dl-inv-page .dl-inv-kpi .val.is-date { font-size: 1.1rem; }
.dl-inv-page .dl-inv-kpi .val.is-danger-txt { color: var(--st-err, #dc3545); }
.dl-inv-page .dl-inv-kpi .sub {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-sub-ink);
  margin-top: 2px;
}
.dl-inv-page .dl-inv-kpi.is-danger  { border-color: color-mix(in srgb, var(--st-err, #dc3545) 35%, transparent); }
.dl-inv-page .dl-inv-kpi.is-danger .ico  { background: var(--st-err-soft, rgba(220,53,69,.12));  color: var(--st-err, #dc3545); }
.dl-inv-page .dl-inv-kpi.is-warning .ico { background: var(--st-warn-soft, rgba(255,193,7,.16)); color: var(--st-warn, #b7791f); }

/* Vervallen factuur: dunne rode markering op de rij. */
.dl-inv-page .dl-inv-table > tbody > tr.dl-inv-row-overdue > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--st-err, #dc3545);
}
.dl-inv-page .dl-inv-overdue-alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* =========================================================
   Statustabs == .dl-admin-tabs uit admin-common.css:351-384.
   Links, geen buttons: elke tab is een eigen server-side
   query op ?status= (conventie B uit de Tabs-conventie).
   ========================================================= */
.dl-inv-page .dl-inv-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: color-mix(in srgb, var(--dlt-ink) 4%, transparent);
  border-radius: 12px;
  flex-wrap: wrap;
}
.dl-inv-page .dl-inv-tabs .dlatb {
  display: inline-flex;
  align-items: center;
  gap: var(--dlt-sp-2);
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: var(--dlt-fs-sm);
  font-weight: var(--dlt-fw-semi);
  color: var(--dlt-label-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dlt-dur-fast) var(--dlt-ease),
              color var(--dlt-dur-fast) var(--dlt-ease);
}
.dl-inv-page .dl-inv-tabs .dlatb:hover {
  background: color-mix(in srgb, var(--dlt-ink) 6%, transparent);
  color: var(--dlt-strong-ink);
}
.dl-inv-page .dl-inv-tabs .dlatb.is-active {
  background: var(--dlt-bg);
  color: var(--dlt-strong-ink);
  box-shadow: 0 2px 6px rgba(11, 18, 32, .08);
}
.dl-inv-page .dl-inv-tabs .dlatb > i {
  font-size: var(--dlt-fs-xs);
  opacity: .7;
}
.dl-inv-page .dl-inv-tabs .dlatb.is-active > i {
  opacity: 1;
  color: var(--accent, var(--dlt-accent));
}
/* Aantal in een eigen element in plaats van in de labeltekst gebakken
   (verbeterpunt 12 uit de Tabs-conventie). */
.dl-inv-page .dl-inv-tabs .count {
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  padding: 2px 8px;
  border-radius: var(--dlt-r-pill);
  font-variant-numeric: tabular-nums;
}
.dl-inv-page .dl-inv-tabs .dlatb.is-active .count {
  background: var(--accent, var(--dlt-accent));
  color: var(--dlt-accent-ink);
}
/* Bedrag per status: secundair, en op smalle schermen weg zodat de
   balk niet omslaat in drie regels. */
.dl-inv-page .dl-inv-tabs .dl-inv-tab-sum {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-sub-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Filterformulier ──────────────────────────────────── */
.dl-inv-page .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
  margin-bottom: var(--dlt-sp-1);
}
.dl-inv-page .form-control,
.dl-inv-page .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
.dl-inv-page .form-control:focus,
.dl-inv-page .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Tabel == .dl-admin-table ─────────────────────────── */
.dl-inv-page .dl-inv-table > thead > tr > th {
  padding: 12px 16px;
  background: var(--dlt-th-bg);
  border-bottom: 1px solid var(--dlt-row-line);
  color: var(--dlt-strong-ink);
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  white-space: nowrap;
}
.dl-inv-page .dl-inv-table > tbody > tr > td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--dlt-row-line);
  vertical-align: middle;
}
.dl-inv-page .dl-inv-table.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: transparent;
  --bs-table-bg-state: transparent;
  background-color: var(--dlt-accent-softer);
  color: inherit;
}
.dl-inv-page .dl-inv-table .text-end { font-variant-numeric: tabular-nums; }

/* Kolombreedtes: vervangt de inline min-width per th. Alleen boven de
   mobiele kaartweergave, want daaronder wordt de tabel een lijst en
   moeten de breedtes juist NIET gelden. */
@media (min-width: 769px) {
  .dl-inv-page .dl-inv-table { min-width: 1080px; }
  .dl-inv-page .dl-inv-c-id     { width: 19%; }
  .dl-inv-page .dl-inv-c-date   { width: 11%; }
  .dl-inv-page .dl-inv-c-due    { width: 14%; }
  .dl-inv-page .dl-inv-c-status { width: 13%; }
  .dl-inv-page .dl-inv-c-inc    { width: 13%; }
  .dl-inv-page .dl-inv-c-open   { width: 13%; }
  .dl-inv-page .dl-inv-c-act    { width: 17%; }
}

/* ── Paginering + voetregel ───────────────────────────── */
.dl-inv-page .dl-card-body.border-top { border-top-color: var(--dlt-row-line) !important; }
.dl-inv-page .pagination { gap: 6px; }
.dl-inv-page .page-item .page-link {
  border: 1px solid var(--dlt-card-line);
  border-radius: 8px;
  color: var(--dlt-strong-ink);
  background: var(--dlt-bg);
  padding: 6px 12px;
  font-size: var(--dlt-fs-sm);
}
.dl-inv-page .page-item .page-link:hover {
  border-color: var(--accent, var(--dlt-accent));
  color: var(--accent, var(--dlt-accent));
  background: var(--dlt-accent-softer);
}
.dl-inv-page .page-item.active .page-link {
  background: var(--accent, var(--dlt-accent));
  border-color: var(--accent, var(--dlt-accent));
  color: var(--dlt-accent-ink);
}
.dl-inv-page .page-item.disabled .page-link { opacity: .4; }

/* =========================================================
   Mobiele kaartweergave. 1-op-1 uit het verplaatste blok,
   alleen gescoped op .dl-inv-page.
   ========================================================= */
@media (max-width: 768px) {
  .dl-inv-page table.dl-mobile-table thead { display: none; }
  .dl-inv-page table.dl-mobile-table tbody tr {
    display: block;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding: 10px 12px;
  }
  .dl-inv-page table.dl-mobile-table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border: 0;
  }
  .dl-inv-page table.dl-mobile-table tbody td::before {
    content: attr(data-label);
    color: #6c757d;
    font-size: .85rem;
  }
  .dl-inv-page table.dl-mobile-table tbody td.text-end {
    justify-content: space-between !important;
    text-align: left !important;
  }
  .dl-inv-page table.dl-mobile-table tbody td .dl-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  /* Tabbalk: horizontaal scrollen in plaats van naar drie regels wrappen. */
  .dl-inv-page .dl-inv-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dl-inv-page .dl-inv-tabs::-webkit-scrollbar { display: none; }
  .dl-inv-page .dl-inv-tabs .dlatb { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
  .dl-inv-page .dl-inv-tabs .dl-inv-tab-sum { display: none; }
}

/* =========================================================
   RETOUROVERZICHT (body.page_dealer_returns)
   ---------------------------------------------------------
   Route /account/retour (Enka B2C) EN /dealers/returns
   (DutchLine B2B) wijzen naar pages/dealers/returns/index.php.

   Hier mag WEL op de body-class gescoped worden: $cPage =
   'page_dealer_returns' wordt alleen door dit ene bestand
   gezet. inc/dutchline-menu.php leest de waarde, maar zet hem
   niet. Dat is anders dan bij de facturen, waar detail.php,
   pay.php en waiting.php dezelfde $cPage hebben.

   Was een style-blok van 65 regels in de pagina zelf; hier
   staat het op --dlt-* tokens en in dezelfde vormtaal als het
   dashboard, de bestellingen en de facturen.

   NIET AANRAKEN in de markup: de ID's dlNewReturn*,
   dlCancelReturn*, btnNewReturn en dlRetPhotosGal_{id} hangen
   aan het inline script, net als .dl-ret-cb, .dl-ret-qty,
   .js-cancel-return en .x. .pswp-gallery is van PhotoSwipe.
   ========================================================= */

/* ── Paginakop ────────────────────────────────────────── */
body.page_dealer_returns h1.h4 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: var(--dlt-fw-black);
  letter-spacing: var(--dlt-track-tight);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}

/* =========================================================
   KPI-strip == .dl-stat-card (admin-common.css:145-166).
   De markup had het icoon al links, dus alleen de maten,
   kleuren en typografie zijn gelijkgetrokken.
   ========================================================= */
body.page_dealer_returns .dl-returns-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
body.page_dealer_returns .dl-returns-kpi {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: transform var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-returns-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(11, 18, 32, .08);
}
body.page_dealer_returns .dl-returns-kpi .kpi-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font-size: 1.05rem;
}
body.page_dealer_returns .dl-returns-kpi .kpi-v {
  font-size: 1.5rem;
  font-weight: var(--dlt-fw-black);
  color: var(--dlt-strong-ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Label in caps onder het getal, zoals .dl-stat-card .lbl */
body.page_dealer_returns .dl-returns-kpi .kpi-l {
  font-size: var(--dlt-fs-2xs);
  color: var(--dlt-label-ink);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  margin-top: 2px;
}
/* Statustinten: zacht vlak met gekleurd glyph. */
body.page_dealer_returns .dl-returns-kpi.is-total .kpi-ic {
  background: var(--accent-soft, var(--dlt-accent-soft));
  color: var(--accent, var(--dlt-accent));
}
body.page_dealer_returns .dl-returns-kpi.is-pending .kpi-ic {
  background: color-mix(in srgb, var(--dlt-c-amber) 16%, transparent);
  color: var(--dlt-c-amber-ink);
}
body.page_dealer_returns .dl-returns-kpi.is-approved .kpi-ic {
  background: color-mix(in srgb, var(--dlt-c-green) 16%, transparent);
  color: var(--dlt-c-green-ink);
}
body.page_dealer_returns .dl-returns-kpi.is-rejected .kpi-ic {
  background: color-mix(in srgb, var(--dlt-c-red) 14%, transparent);
  color: var(--dlt-c-red-ink);
}

/* ── Kaart om de lijst ────────────────────────────────── */
body.page_dealer_returns > .container .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
  overflow: hidden;
}

/* =========================================================
   Retourregels. Dit zijn <details>/<summary>, dus het
   open-/dichtklappen is native - er hangt geen JS aan.
   ========================================================= */
body.page_dealer_returns .dl-return-row summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--dlt-row-line);
  transition: background var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-return-row:first-of-type summary { border-top: 0; }
body.page_dealer_returns .dl-return-row summary::-webkit-details-marker { display: none; }
body.page_dealer_returns .dl-return-row summary:hover { background: var(--dlt-accent-softer); }
/* Chevron via het Font Awesome glyph, zoals het was. */
body.page_dealer_returns .dl-return-row summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  color: var(--dlt-sub-ink);
  font-size: var(--dlt-fs-xs);
  transition: transform var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-return-row[open] summary::after { transform: rotate(180deg); }
body.page_dealer_returns .dl-return-row[open] summary {
  background: var(--dlt-th-bg);
  border-bottom: 1px solid var(--dlt-row-line);
}
body.page_dealer_returns .dl-return-row .items-box {
  padding: 0 18px 18px;
  background: var(--dlt-head-bg);
}

/* ── Regelitem met thumbnail ──────────────────────────── */
body.page_dealer_returns .dl-return-row .ri-mini {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--dlt-card-line);
  border-radius: 12px;
  background: var(--dlt-bg);
  margin-top: 10px;
}
body.page_dealer_returns .dl-return-row .ri-mini img,
body.page_dealer_returns .dl-return-row .ri-mini .ri-thumb-ph {
  width: 64px; height: 64px;
  object-fit: contain;
  border: 1px solid var(--dlt-card-line);
  border-radius: 10px;
  background: var(--dlt-bg);
  flex: 0 0 auto;
}
body.page_dealer_returns .dl-return-row .ri-mini .ri-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--dlt-sub-ink);
  font-size: 1.2rem;
  background: var(--dlt-th-bg);
}
body.page_dealer_returns .dl-return-row .ri-mini a.ri-thumb-link { display: block; }
body.page_dealer_returns .dl-return-row .ri-mini a.ri-thumb-link:hover img {
  border-color: var(--accent, var(--dlt-accent));
}

/* ── Fotogalerij (PhotoSwipe) ─────────────────────────── */
body.page_dealer_returns .dl-ret-photos {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
body.page_dealer_returns .dl-ret-photos a { display: block; }
body.page_dealer_returns .dl-ret-photos img {
  width: 80px; height: 80px;
  object-fit: cover;
  border: 1px solid var(--dlt-card-line);
  border-radius: 10px;
  background: var(--dlt-bg);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-ret-photos a:hover img {
  border-color: var(--accent, var(--dlt-accent));
}

/* ── Uploadzone in de nieuw-retour modal ──────────────── */
body.page_dealer_returns .dl-ret-upload {
  margin-top: 14px;
  padding: 18px 14px;
  border: 2px dashed var(--dlt-card-line);
  border-radius: 12px;
  background: var(--dlt-th-bg);
  text-align: center;
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .dl-ret-upload:hover {
  border-color: var(--accent, var(--dlt-accent));
  background: var(--dlt-bg);
}
body.page_dealer_returns .dl-ret-upload .upload-hint {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-label-ink);
  margin-top: 6px;
}
body.page_dealer_returns .dl-ret-upload-previews {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center;
}
body.page_dealer_returns .dl-ret-upload-previews .ph {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--dlt-card-line);
}
body.page_dealer_returns .dl-ret-upload-previews .ph img {
  width: 100%; height: 100%; object-fit: cover;
}
/* .x wordt door het inline script aangesproken - naam en gedrag blijven. */
body.page_dealer_returns .dl-ret-upload-previews .ph .x {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* ── Leegstaat == .dl-admin-empty ─────────────────────── */
body.page_dealer_returns .dl-ret-empty {
  border: 1px dashed var(--dlt-row-line);
  border-radius: 14px;
  margin: var(--dlt-sp-4);
  color: var(--dlt-label-ink);
}
body.page_dealer_returns .dl-ret-empty > i { color: var(--dlt-empty-ico) !important; }
body.page_dealer_returns .dl-ret-empty p.fw-bold { color: var(--dlt-strong-ink); }

/* ── Modals ───────────────────────────────────────────── */
body.page_dealer_returns .modal-content { border-radius: 16px; }
body.page_dealer_returns .modal-header { border-bottom-color: var(--dlt-row-line); }
body.page_dealer_returns .modal-footer { border-top-color: var(--dlt-row-line); }
body.page_dealer_returns .modal .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
}
body.page_dealer_returns .modal .form-control,
body.page_dealer_returns .modal .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_returns .modal .form-control:focus,
body.page_dealer_returns .modal .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}

/* ── Mobiel ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page_dealer_returns .dl-returns-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dlt-sp-3);
  }
  body.page_dealer_returns .dl-returns-kpi { padding: 14px; gap: 10px; }
  body.page_dealer_returns .dl-returns-kpi .kpi-ic { width: 38px; height: 38px; font-size: var(--dlt-fs-sm); }
  body.page_dealer_returns .dl-returns-kpi .kpi-v { font-size: var(--dlt-fs-lg); }
  body.page_dealer_returns .dl-return-row summary { padding: 12px 14px; }
  body.page_dealer_returns .dl-return-row .items-box { padding: 0 14px 14px; }
  /* Kopknoppen op volle breedte i.p.v. half afgeknepen naast elkaar. */
  body.page_dealer_returns .dl-ret-photos img { width: 64px; height: 64px; }
}

/* Kleine metaregel (datum, bedrag onder een regel). Verving drie losse
   inline font-sizes in de markup. De drie style="display:none" die er nog
   staan blijven: die worden door het inline script gezet en gelezen. */
body.page_dealer_returns .dl-ret-meta {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-label-ink);
}

/* =========================================================
   PROFIEL (body.page_dealer_profile)
   ---------------------------------------------------------
   Route /account/profiel (Enka B2C) EN /dealers/profile
   (DutchLine B2B) wijzen naar pages/dealers/profile/index.php.

   body.page_dealer_profile mag: die $cPage wordt alleen door
   dit bestand gezet (dutchline-menu.php leest hem, zet hem niet).

   De kolomverdeling was hier al goed - 8+4, 6+6, 7+5, 4+8 en
   12 tellen allemaal op - dus alleen de vormtaal is
   gelijkgetrokken met het dashboard, de bestellingen, de
   facturen en de retouren.

   NIET AANRAKEN: de jQuery-haken #dlProfilePersonal/Company/
   Password-Form, -Btn en -Msg, de pf_* veld-ID's,
   #dlPwStrengthBar en #dlPwStrengthLabel, en .is-invalid.
   Op #dlPwStrengthBar mag geen width of background uit CSS
   komen: jQuery zet die inline.
   ========================================================= */

/* ── Paginakop ────────────────────────────────────────── */
body.page_dealer_profile h1.h4 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: var(--dlt-fw-black);
  letter-spacing: var(--dlt-track-tight);
  color: var(--dlt-strong-ink);
  line-height: var(--dlt-lh-tight);
}

/* ── Kaarten == .dl-admin-card ────────────────────────── */
body.page_dealer_profile .dl-card {
  background: var(--dlt-bg);
  border: 1px solid var(--dlt-card-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none;
}
body.page_dealer_profile .dl-card-header {
  padding: 14px 18px;
  min-height: 0;
  border-bottom: 1px solid var(--dlt-row-line);
  background: var(--dlt-head-bg);
  font-size: 1rem;
  font-weight: var(--dlt-fw-black);
  color: var(--dlt-strong-ink);
}
body.page_dealer_profile .dl-card-header > i {
  color: var(--accent, var(--dlt-accent));
  opacity: .8;
  font-size: var(--dlt-fs-sm);
}
body.page_dealer_profile .dl-card-body { padding: 18px; }

/* ── Formuliervelden ──────────────────────────────────── */
body.page_dealer_profile .form-label {
  font-size: var(--dlt-fs-2xs);
  font-weight: var(--dlt-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  color: var(--dlt-label-ink);
  margin-bottom: var(--dlt-sp-1);
}
body.page_dealer_profile .form-control,
body.page_dealer_profile .form-select {
  border: 1px solid transparent;
  background-color: var(--dlt-field-bg);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--dlt-fs-sm);
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              box-shadow var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_profile .form-control:focus,
body.page_dealer_profile .form-select:focus {
  border-color: var(--accent, var(--dlt-accent));
  background-color: var(--dlt-bg);
  box-shadow: 0 0 0 3px var(--accent-soft, var(--dlt-accent-soft));
}
/* .is-invalid komt uit form.css en wordt door het script gezet; hier
   alleen zorgen dat de zachte veldachtergrond de foutrand niet opeet. */
body.page_dealer_profile .form-control.is-invalid,
body.page_dealer_profile .form-select.is-invalid {
  border-color: var(--dlt-c-red);
  background-color: var(--dlt-bg);
}
body.page_dealer_profile .form-text {
  font-size: var(--dlt-fs-xs);
  color: var(--dlt-sub-ink);
}

/* ── Wachtwoordmeter ──────────────────────────────────── */
body.page_dealer_profile .dl-pf-pw-track {
  height: 4px;
  border-radius: 4px;
  background: var(--dlt-surface-2);
  overflow: hidden;
}

/* ── Opslaan-regel onder een formulier ────────────────── */
body.page_dealer_profile form .mt-3.d-flex {
  border-top: 1px solid var(--dlt-row-line);
  padding-top: var(--dlt-sp-4);
  margin-top: var(--dlt-sp-4) !important;
}

/* ── Accountoverzicht (list-group) ────────────────────── */
body.page_dealer_profile .list-group-item {
  border-color: var(--dlt-row-line);
  padding: 12px 18px;
  align-items: center;
  background: transparent;
}
body.page_dealer_profile .list-group-item .text-muted {
  color: var(--dlt-label-ink) !important;
  font-size: var(--dlt-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--dlt-track-wide);
  font-weight: var(--dlt-fw-semi);
}
body.page_dealer_profile .list-group-item .fw-bold,
body.page_dealer_profile .list-group-item span.small:not(.text-muted) {
  color: var(--dlt-strong-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Snelkoppelingen ──────────────────────────────────── */
body.page_dealer_profile .dl-card-body.d-grid .dl-btn {
  justify-content: flex-start;
  border: 1px solid var(--dlt-card-line);
  background: var(--dlt-bg);
  min-height: 44px;
  transition: border-color var(--dlt-dur-fast) var(--dlt-ease),
              background-color var(--dlt-dur-fast) var(--dlt-ease),
              transform var(--dlt-dur-fast) var(--dlt-ease);
}
body.page_dealer_profile .dl-card-body.d-grid .dl-btn:hover {
  border-color: var(--accent, var(--dlt-accent));
  background: var(--dlt-accent-softer);
  transform: translateX(2px);
}

/* ── Mobiel ───────────────────────────────────────────── */
@media (max-width: 767px) {
  body.page_dealer_profile .dl-card-body { padding: var(--dlt-sp-4); }
  body.page_dealer_profile .dl-card-header { padding: 12px var(--dlt-sp-4); }
  body.page_dealer_profile .list-group-item { padding: 12px var(--dlt-sp-4); }
  /* Opslaan-knop over de volle breedte, met de statusmelding eronder. */
  body.page_dealer_profile form .mt-3.d-flex { flex-wrap: wrap; }
  body.page_dealer_profile form .mt-3.d-flex .dl-btn { width: 100%; }
}