/* DutchLine Sanitair – B2B Theme (Woodmart-like, strak & DL-blauw accenten) */

:root{
  --ds-primary: #304DA1;
  --ds-primary-600: #2a4390;
  --ds-primary-700: #223a7e;
  --ds-cyan: #06b6d4;

  --ds-ink: #0b1320;
  --ds-ink-2: #1c2433;
  --ds-mute: #6b7280;

  --ds-card: #ffffff;
  --ds-bg: #f7f8fc;
  --ds-border: #eef2f7;

  --ds-shadow: 0 14px 40px rgba(16,24,40,.10);
  --ds-shadow-soft: 0 10px 24px rgba(16,24,40,.06);

  --radius: 12px;
  /* Fix: consistente DutchLine var */
  --ds-dutchline: rgba(48,77,161,1);
}


*{box-sizing:border-box}
html,body{height:100%}
body.dl-body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ds-ink);
  background: var(--ds-bg);
  min-height:100vh; display:flex; flex-direction:column;
}
.site-content{flex:1 0 auto;}
.container-xl{max-width:1440px}

/* Topbar / Brandbar */
.dl-topbar{background:#0b1320;color:#cbd5e1;font-size:13px;padding:8px 0;border-bottom:1px solid #111827;}
.dl-topbar{
  position: relative;      /* maakt eigen stacking context */
  z-index: 1032;           /* > sticky (1020) en > fixed (1030) */
  overflow: visible;       /* laat de dropdown over de rand tekenen */
}

/* Zet de dropdown nóg iets hoger dan de topbar zelf */
.dl-topbar .dropdown-menu{
  z-index: 1061;           /* > navbar/fixed en ver onder modal (1055) kan ook 1061 */
}
/* === Language switcher styling (mooi op donkere topbar) === */
.dl-lang-switcher .dl-lang-btn{
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
.dl-lang-switcher .dl-lang-btn:hover{
  border-color:#fff;
  color:#fff;
}
.dl-lang-menu{
  
  border:1px solid rgba(0,0,0,.06);
  border-radius:.5rem;
}
.dl-lang-menu .dropdown-item{
  padding:.5rem .75rem;
}
.dl-lang-menu .dropdown-item.active{
  background:#eef4ff;
  color:inherit;
}
.dl-lang-menu .dl-flag{
  width:1.25rem;
  text-align:center;
  font-size:1rem;
  line-height:1;
}

/* Als je topbar licht is, gebruik outline-secondary i.p.v. outline-light:
   .dl-lang-switcher .dl-lang-btn{ color:#0f172a; border-color:#cbd5e1; }
   .dl-lang-switcher .dl-lang-btn:hover{ border-color:#0f172a; }
*/
@media (max-width:576px){
  .dl-lang-menu{ min-width:200px; }
}
.dl-flag-img {
  display: inline-block;
  vertical-align: -2px; /* optisch uitlijnen met tekst */
  width: 18px;
  height: 14px;
  border-radius: 2px;   /* subtiele afronding */
  box-shadow: 0 0 0 1px rgba(0,0,0,.05); /* dun randje voor donkere/lichte SVG's */
}
.dl-flag-emoji { font-size: 1rem; line-height: 1; }
.dl-lang-menu .dropdown-item.active .dl-flag-img { box-shadow: 0 0 0 2px rgba(13,110,253,.35); }
.dl-toplink{color:#cbd5e1;text-decoration:none}
.dl-toplink:hover{color:#fff}
.dl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:8px;transform:translateY(-1px)}

.dl-brandbar{
  background: #ffffff;
  border-bottom: 1px solid var(--ds-border);
  padding: 12px 0;
}
.dl-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ds-ink);text-decoration:none}
.dl-brand i{ font-size:22px; color: var(--ds-dutchline); }
.dl-brand span b{color:var(--ds-primary)}
.dl-btn-pill{border-radius:999px}

/* Search pill */
.dl-search{gap:10px}
.dl-search .input-group .input-group-text{border-radius:999px 0 0 999px}
.dl-search input.form-control{border-radius:0 999px 999px 0}
.dl-search input.form-control:focus{box-shadow:0 0 0 .2rem rgba(48,77,161,.12); border-color:#c7d2fe}

/* ===== Mega Navbar ===== */
.nl-nav--mega{
  background: linear-gradient(180deg,#ffffff, #fbfcff);
  border-bottom: 2px solid var(--ds-border);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.nl-nav--mega.is-scrolled{ box-shadow: 0 2px 0 rgba(16,24,40,.06); border-color:#e6ecf6; }

.dl-nav .nav-link{
  padding: 10px 14px;
  font-weight:700; letter-spacing:.1px; color:var(--ds-ink-2);
  border-radius: 5px; /* kleiner zoals gevraagd */
}
.dl-nav .nav-link:hover,
.dl-nav .nav-link.active{
  color:#304DA1; background: rgba(48,77,161,.06);
}

/* Open dropdown: onderstreep volledige navbar */
.nl-nav--mega .nav-item.dropdown.show > .nav-link{ position: relative; }
.nl-nav--mega .nav-item.dropdown.show > .nav-link::before{
  content:""; position:absolute; left:0px; right:0px; bottom:-10px; height:2px; background: var(--ds-primary);
}

/* ===== Hero ===== */
.dl-hero{   position:relative; overflow:hidden; }
.dl-hero--mesh{
  background:
    radial-gradient(1100px 600px at 10% -10%, #eef2f7 0%, transparent 70%),
    linear-gradient(180deg, #f6f8fb 0%, #fff 60%);
}
.dl-display{font-size: 32px;line-height:1.04;font-weight:800}
.dl-highlight{ background: linear-gradient(90deg, var(--ds-primary), var(--ds-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dl-kicker{border:1px solid #e5e7eb;background:#fff !important}
.dl-lead{font-size: clamp(16px,1.3vw,18px);color:var(--ds-ink-2)}
.typed-caret{display:inline-block;margin-left:2px;color:#94a3b8;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.dl-hero-visual{position:relative}
.dl-hero-card{border-radius: var(--radius); overflow:hidden; background:#fff;}
.dl-hero-card img{display:block;border-radius:calc(var(--radius) - 2px)}
.dl-hero-card--ribbon{position:relative}
.dl-ribbon{
  position:absolute; top:14px; left:-10px;
  background: linear-gradient(90deg, var(--ds-primary-700), var(--ds-primary));
  color:#fff; padding:6px 14px; border-radius:0 999px 999px 0; font-weight:700; box-shadow:var(--ds-shadow-soft);
}
.dl-hero-chip{
  position:absolute; right:-6px; top:-6px;
  background:#fff; color:#0f172a; padding:8px 12px; border:1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-soft); border-radius: 999px; display:flex; align-items:center; gap:8px;
  animation: floaty 7s ease-in-out infinite;
}
.dl-hero-chip--alt{ right:auto; left:-6px; top:auto; bottom:-6px; animation-duration:9s }
@keyframes floaty{ 0%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } 100%{ transform:translateY(0) } }

/* Waves (moving) */
.dl-wave{width:100%; line-height:0}
.dl-wave svg{display:block; width:100%; height:135px}
.dl-wave .w1{fill:rgba(48,77,161,.85)}
.dl-wave .w2{fill:rgba(48,77,161,.38)}
.dl-wave .w3{fill:rgba(48,77,161,.18)}
.dl-wave--bottom {
  transform: rotate(180deg) translateY(-100%);
}
@media (prefers-reduced-motion:no-preference){
  .dl-wave .drift{ animation: waveDrift 18s ease-in-out infinite alternate; }
}
@keyframes waveDrift{ 0%{ transform: translateX(-20px) } 100%{ transform: translateX(20px) } }

/* KPI */
.dl-section--stripe-light{
  background:
    repeating-linear-gradient(
      135deg,
      rgba(251,253,255,0.6) 1px,   /* bijna wit met 60% dekking */
      rgba(251,253,255,0.6) 6px,
      rgba(48,77,161,0.5) 6px,    /* DutchLine blauw, maar maar 8% zichtbaar */
      rgba(48,77,161,0.5) 12px
    );
  border-top:1px solid var(--ds-border);
  border-bottom:1px solid var(--ds-border);
}

.dl-kpi{background:#fff;border:1px solid #f1f5f9;border-radius:10px;padding:14px 16px;box-shadow:var(--ds-shadow-soft);display:flex;align-items:center;gap:12px}
.dl-kpi i{font-size:22px;color:var(--ds-primary)}
.dl-kpi__title{font-weight:700}
.dl-kpi__sub{font-size:13px;color:var(--ds-mute)}

/* Categorie cards */
.dl-cat .card-img{filter:saturate(1.05) contrast(1.02);transform:scale(1.01);transition:transform .25s ease}
.dl-cat:hover .card-img{transform:scale(1.04)}
.dl-cat__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%)}

/* ===== 3D Showcase ===== */
.dl-show3d{ background:#fff; border-top:1px solid var(--ds-border); border-bottom:1px solid var(--ds-border); position:relative; }
.dl-tilt{ perspective: 800px; }
.dl-tilt__inner{ transform-style: preserve-3d; transition: transform .22s ease, box-shadow .22s ease; border-radius: var(--radius); }
.dl-tilt:hover .dl-tilt__inner{ box-shadow: var(--ds-shadow); }
.dl-card3d img{ border-radius: calc(var(--radius) - 2px); }
.dl-card-tag{
  position:absolute; left:12px; top:12px; z-index:2;
  background:#fff; color:#0f172a; border:1px solid var(--ds-border);
  padding:4px 10px; border-radius: 999px; font-size:.8rem; box-shadow: var(--ds-shadow-soft);
}
/* twee subtiele DL-blauwe golflijnen in sectie */
.dl-waves-lite{ position:absolute; inset:auto 0 0 0; height:140px; pointer-events:none; opacity:.4; }
.dl-waves-lite svg{ width:100%; height:100%; display:block; }
.dl-waves-lite .lite-1, .dl-waves-lite .lite-2{ fill:none; stroke: rgba(48,77,161 ); stroke-width:6; stroke-linecap:round }
.dl-waves-lite .lite-2{ stroke: rgba(48,77,161 ); }

/* ===== Accent-band achter secties (zoals mockup) ===== */
.dl-accent-band{
  position: relative;
  background: transparent;
  overflow: hidden;           /* verberg buitenste vormen */
  padding-block: 64px;        /* iets extra ruimte */
}
.dl-accent-band::before,
.dl-accent-band::after{
  content:""; position:absolute; pointer-events:none;
  background: var(--ds-primary);
}
/* Linker topvlak (diagonaal) */
.dl-accent-band::before {
    left: 0;
    top: 0;
    width: 65%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 50% 100%, 0% 100%);
    opacity: .95;
}
/* Rechter ondervlak (kleiner pijlvlak) 
.dl-accent-band::after{
  right:0; bottom:-8%;
  width: 30vw; height: 40%;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  opacity:.95;
}*/
/* Variant: omgekeerd voor andere secties */
.dl-accent-band--reverse::before{
  right:0; left:auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%);
}
.dl-accent-band--reverse::after{
  left:0; right:auto;
  clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
}

/* Dealer CTA (clean wit card met gradient-bies links) */
.dl-dealer-cta--clean{
  background:#fff; border:1px solid var(--ds-border);
  position:relative;
  border-radius: 14px;
}
.dl-dealer-cta--clean:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:6px 0 0 6px;
  background: linear-gradient(180deg, var(--ds-primary), var(--ds-cyan));
}

/* Modal */
.dl-modal__header{
  background:
    linear-gradient(180deg, rgba(48,77,161,.16), rgba(48,77,161,.06)),
    linear-gradient(180deg, #fff, #fff);
  padding: 14px 18px; border-bottom:1px solid var(--ds-border);
  display:flex; align-items:center; justify-content:space-between;
}
.dl-modal__brand{ font-weight:800; display:flex; align-items:center; gap:8px; color: var(--ds-ink); }
.dl-modal__brand i{ color: var(--ds-primary) }
.dl-modal__progress{ display:flex; gap:6px; align-items:center; }
.dl-modal__progress .seg{ width:48px; height:6px; border-radius:999px; background:#e5e7eb; }
.dl-modal__progress .seg--active{ background: linear-gradient(90deg, var(--ds-primary), var(--ds-cyan)); }

/* Footer */
.dl-footer{background:#ffffff;color:black;padding:36px 0 20px}
.dl-footer a{color:#000000;text-decoration:none}
.dl-footer a:hover{color:grey}
.dl-footer__brand{font-weight:800;font-size:18px;margin-bottom:8px}
.dl-footlabel{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#001;margin-bottom:8px}
.dl-footlist{list-style:none;padding:0;margin:0}
.dl-footlist li{margin:6px 0}
.dl-footlist--plain li{margin:4px 0}
.dl-legal{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#001}
.dl-hr{border:none;height:1px;background:linear-gradient(90deg,transparent,#e5e7eb,transparent);margin:24px 0}

/* Back to Top */
.dl-to-top{position:fixed;right:18px;bottom:18px;width:44px;height:44px;border:none;border-radius:999px;display:grid;place-items:center;z-index:1050;background:#111827;color:#fff;box-shadow:var(--ds-shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s ease}
.dl-to-top:hover{background:#000}
.dl-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}

/* Reveal */
@media (prefers-reduced-motion:no-preference){
  .reveal { opacity:0; transform: translateY(12px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
  .reveal.in-view { opacity:1; transform:none; }
}

/* Responsive container */
@media (max-width:1199.98px){ .container-xl{max-width:1140px} }
@media (max-width:991.98px){ .container-xl{max-width:960px} }
/* Benefits binnen dl-section--stripe-light */
.dl-benefits .dl-kicker,
.dl-section--stripe-light .dl-kicker{
  background:#fff !important;border:1px solid #e5e7eb
}
.dl-benefit{
  display:flex; flex-direction:column; gap:.5rem;
  background:#fff; border:1px solid var(--ds-border);
  border-radius:12px; padding:18px;
  box-shadow: var(--ds-shadow-soft);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.dl-benefit:hover{
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow);
  border-color: rgba(48,77,161,.25);
}
.dl-benefit__icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  color: var(--ds-primary);
  background: linear-gradient(180deg, rgba(48,77,161,.10), rgba(48,77,161,.04));
  border:1px solid rgba(48,77,161,.18);
  margin-bottom:.25rem;
}
.dl-benefit p{line-height:1.45}
/* Hero finetunes */
.dl-hero .list-unstyled i { font-size: 18px; }
.dl-hero .list-unstyled li { line-height: 1.35; }

/* iets meer presence van de visual */
@media (min-width: 992px){
  .dl-hero-visual .dl-hero-card {
    border-radius: var(--radius);
    overflow: hidden;
  }
}

/* compacte spacing op mobiel */
@media (max-width: 575.98px){
  .dl-hero .dl-btn-pill { width: 100%; }
  .dl-hero .list-unstyled { margin-top: .75rem; }
}
/* ============ Scandinavian Hero ============ */
.dl-hero--scandi{
  /* clean wit met zachte DL-blauwe glow linksboven + subtiele verticale fade */
  background:
    radial-gradient(800px 420px at 8% 2%, rgba(48,77,161,.09), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fff 60%, #fbfcff 100%);
  padding-top: 10px;
}

/* decor: stippenraster + gradient-blob als pseudo’s */
.dl-hero--scandi::before,
.dl-hero--scandi::after{
  content:""; position:absolute; pointer-events:none;
}
.dl-hero--scandi::before{
  /* heel subtiel stippenraster rechtsachter de visual */
  right:-80px; top:40px; width:360px; height:280px;
  background-image: radial-gradient(rgba(16,24,40,.08) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 24px;
  filter: blur(.2px);
}
.dl-hero--scandi::after{
  /* zachte cyan-blauw blob onder de visual */
  right:6%; bottom:8%; width:420px; height:420px;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(6,182,212,.14) 0%, rgba(6,182,212,0) 70%);
}

/* framed visual */
.dl-frame{
  background:#fff;
  border:1px solid var(--ds-border);
  border-radius: clamp(12px,1.2vw,16px);
  overflow:hidden;
}
.dl-frame img{ display:block; }

/* glass badges (frosted, subtiel) */
.dl-glass{
  position:absolute; display:inline-flex; align-items:center; gap:.5rem;
  padding:8px 12px; border-radius:999px; font-weight:600; font-size:.9rem;
  color:#0f172a; background: rgba(255,255,255,.65);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 24px rgba(16,24,40,.08);
  backdrop-filter: saturate(120%) blur(4px);
}
.dl-hero-visual{ position:relative; }
.dl-glass--tl{ left:8px; top:8px; }
.dl-glass--br{ right:8px; bottom:8px; }

/* CTA tuning */
.dl-hero-ctas .btn{ border-width:1.5px; }
.dl-hero-ctas .btn-outline-primary:hover{ background:var(--ds-primary); color:#fff; }

/* kleinere devices: rust & stapelen */
@media (max-width: 575.98px){
  .dl-hero--scandi{ padding: 28px 0 18px; }
  .dl-hero-ctas .btn{ width:100%; }
  .dl-glass{ display:none; } /* chips weglaten voor rust op mobiel */
}
/* ===== Catalog header-band (zonder hero) */
.dl-hero--catalog{
  background:
    radial-gradient(1000px 260px at 10% -10%, rgba(48,77,161,.12), transparent 60%),
    radial-gradient(800px 200px at 90% 0%, rgba(6,182,212,.10), transparent 60%),
    linear-gradient(180deg,#ffffff, #fbfcff);
}
.dl-hero--catalog .h3{ letter-spacing:.1px }

/* Toolbar pill: subtiele kleur */
.dl-catalog-toolbar{
  position: sticky; top: 64px; z-index: 1005;
  background: #fff;
  padding: .6rem;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(48,77,161,.08);
}
.dl-catalog-toolbar .input-group-text{ color:#64748b }
.dl-catalog-toolbar .form-select{
  border-radius:999px; padding-inline: .9rem;
}

/* Filterkaart met accent-lijn */
.dl-filter{ border-radius:14px; }
.dl-filter .card-body {
  position: relative;
}

.dl-filter .card-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ds-primary), var(--ds-cyan));
  border-radius: inherit; /* optioneel, volgt border-radius van parent */
}

.dl-filter .fw-semibold{ color: var(--ds-ink-2); }
.dl-filter .dl-filter-list a{
  display:block; padding:.25rem .25rem; border-radius:8px;
  color: var(--ds-ink-2); text-decoration:none;
}
.dl-filter .dl-filter-list a:hover{
  background: linear-gradient(90deg, rgba(48,77,161,.08), transparent);
  color: var(--ds-primary);
}
 
/* ===== Product kaart (kleur-upgrade) */
.dl-prod {
  border-radius:16px;
  box-shadow: var(--ds-shadow-soft);
  transition: transform .18s, box-shadow .18s;
  background: #fff;
}
.dl-prod:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(15,23,42,.14);
}

.dl-prod-media {
  position: relative;
  background:#fff;
  border:1px solid var(--ds-border);
  border-radius:14px;
  margin:.85rem .85rem 0;
  padding:14px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  overflow:hidden;

  background-image: linear-gradient(135deg, rgba(48,77,161,.05) 0 33%, transparent 33% 100%);
  background-size: 12px 12px;
}
.dl-prod-media img {
  max-width:100%;
  max-height:100%;
  transition: transform .25s ease;
}
.dl-prod:hover .dl-prod-media img {
  transform: scale(1.05);
}

/* Badges met kleurvarianten */
.dl-prod-badge {
  position:absolute; left:12px; top:12px;
  color:#fff; font-size:.75rem; padding:.28rem .55rem;
  border-radius:999px; font-weight:600;
  box-shadow:0 6px 16px rgba(15,23,42,.18);
  background: linear-gradient(90deg, var(--ds-primary-700), var(--ds-primary));
}
.dl-prod-badge.is-new {
  background: linear-gradient(90deg, #06b6d4, #60a5fa);
}
.dl-prod-badge.is-hot {
  background: linear-gradient(90deg, #f97316, #ef4444);
}
.dl-prod-badge.is-set {
  background: linear-gradient(90deg, #10b981, #22c55e);
}
/* Wishlist button */
.dl-prod-fav{
  position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:999px;
  border:1px solid var(--ds-border); background:#fff; display:grid; place-items:center; color:#334155;
  transition: border-color .15s, color .15s;
}
.dl-prod-fav:hover{ color:var(--ds-primary); border-color:rgba(48,77,161,.35) }

/* Hover actions */
.dl-prod-actions {
  position:absolute; inset:auto 12px 12px 12px;
  display:flex; gap:.5rem; justify-content:center;
  opacity:0; transform: translateY(8px);
  transition: all .18s ease;
}
.dl-prod:hover .dl-prod-actions {
  opacity:1; transform:none;
}

/* Body fijne typografie */
.dl-prod .card-body{ padding: .9rem .9rem 1.1rem }
.dl-prod h3{ line-height:1.35 }
.dl-prod .small{ color:#64748b }

/* Finish chips – automatische kleur op basis van data-finish */
/* Finish chips kleurrijk */
.dl-finish {
  border-radius:999px;
  font-weight:600;
  border:1px solid var(--ds-border);
  background:#f8fafc;
  color:#0f172a;
}
.dl-finish[data-finish*="zwart"] {
  background:#0f172a; color:#fff; border-color:#0f172a;
}
.dl-finish[data-finish*="wit"] {
  background:#ffffff; color:#0f172a; border-color:#e5e7eb;
}
.dl-finish[data-finish*="chroom"] {
  background:#f1f5f9; color:#0f172a; border-color:#dbe4ee;
}
.dl-finish[data-finish*="rvs"],
.dl-finish[data-finish*="staal"] {
  background:#eef2f7; color:#0f172a; border-color:#d1d9e6;
}
.dl-finish[data-finish*="transparant"] {
  background:#ecfeff; color:#0f172a; border-color:#bae6fd;
}

/* Quick chips boven grid */
.badge.text-bg-light.border{
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
  border-color:#e5e7eb!important; color:#0f172a!important;
}

/* Pagination prettiger */
.pagination .page-link{ border-radius:8px; }
.pagination .page-item.active .page-link {
  background: linear-gradient(90deg, var(--ds-primary-700), var(--ds-primary));
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(48,77,161,.25);
}

/* Mobile offcanvas: zachte schaduw & headings */
.offcanvas-filters{ box-shadow: -14px 0 40px rgba(15,23,42,.18); }
.offcanvas-filters .offcanvas-title{ font-weight:800; letter-spacing:.2px }
/* ===== Catalog section: zachte brand-waves + grid stipjes */
section.py-2 {
  position: relative;
  z-index: 1;
  /* Basis achtergrond met DL-blauw & cyan accenten */
  background:
    radial-gradient(1200px 320px at 6% -10%, rgba(48,77,161,.12), transparent 60%),
    radial-gradient(900px 260px at 96% 0%, rgba(6,182,212,.10), transparent 60%),
    linear-gradient(180deg,#ffffff, #fbfcff);
  padding-top: 32px;
  padding-bottom: 48px;
}

/* Subtiel grid raster voor extra visuele diepte */
section.py-2::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(48,77,161,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity:.35;
  z-index: -1;
}
/* ===== PDP (product detail) ===== */
.dl-pdp-media { background:#fff; border-radius:14px; overflow:hidden; }
.dl-pdp-main a, .dl-pdp-main img { display:block; width:100%; }
.dl-pdp-main img { aspect-ratio: 1 / 1; object-fit: contain; background:#fff; }

 

.dl-variations .btn-chip{
  border:1.5px solid var(--ds-border);
  background:linear-gradient(180deg,#fff,#f9fbff);
  border-radius:999px; padding:.42rem .9rem; font-weight:600;
}
 
@media (max-width: 991.98px){
  .dl-pdp-main img { aspect-ratio: 1 / 1; }
}
.btn-dutchline{
	background:rgba(48,77,161);
	color:#ffffff;
}
.btn-dutchline:hover{
	background:rgba(48,77,161,.8);
	color:#ffffff;
}

/* ===== Cart template (presentatie-only, geen JS) ===== */
.cart-img{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--bs-border-color,#e5e7eb);border-radius:.5rem}
.qty-group{width:140px}
 

 
.dl-btn-pill{border-radius:999px}
 
 

/* Kleine polish */
.text-truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ===== Checkout (presentatie, geen JS) ===== */
.dl-list-select .list-group-item{
  border-color: var(--bs-border-color);
  border-radius: .5rem;
  margin-bottom: .5rem;
}
.dl-list-select .list-group-item:hover{
  background: #f9fafb;
}
 




/* Chips (algemeen) – 1 versie houden */
.btn-chip{
  border:1px solid var(--ds-border);
  background:linear-gradient(180deg,#fff,#f9fbff);
  border-radius:999px; padding:.38rem .8rem; font-size:.875rem; line-height:1;
  transition:.15s;
}
.btn-chip:hover{ border-color:rgba(48,77,161,.35); color:var(--ds-primary); }
/* Actieve toestand (gebruik je op meerdere plekken) */
.btn-chip.active{ background: var(--ds-primary); color:#fff; border-color: var(--ds-primary); }

/* Variant-specifiek (mag blijven als aanvulling) */
.dl-variations .btn-chip{
  border:1.5px solid var(--ds-border);
  padding:.42rem .9rem; font-weight:600;
}
.dl-variations .btn-chip.btn-primary{
  background: linear-gradient(90deg, var(--ds-primary-700), var(--ds-primary));
  border-color: transparent;
}

/* Pill-knoppen – 1 keer definiëren */
.dl-btn-pill, .btn-pill{ border-radius:999px; }

/* PDP thumbs – 1 keer definiëren */
.dl-pdp-thumbs{ display:flex; gap:.5rem; }
.dl-pdp-thumbs .dl-thumb,
.dl-pdp-thumbs a{
  border:1px solid var(--bs-border-color); background:#fff; padding:.25rem; border-radius:.375rem;
}
.dl-pdp-thumbs img{ display:block; width:64px; height:64px; object-fit:contain; }

/* rec-card media – 1 keer definiëren */
.rec-card .ratio{ background:#fff; border-bottom:1px solid var(--bs-border-color,#e5e7eb); }
.rec-card img{ object-fit:contain; }

/* qty-readonly – 1 keer definiëren */
.qty-readonly{ background:#fff; }

/* Variant-head – 1 keer definiëren */
.dl-variant-head .badge{ font-weight:500; }
.dl-variant-head .vr{ opacity:.2; }

/* Staffel – 1 set houden */
.staffel summary{ cursor:pointer; list-style:none; }
.staffel summary::-webkit-details-marker{ display:none; }
.staffel summary::after{ content:"▼"; font-size:.75rem; margin-left:.5rem; opacity:.6; transition:transform .2s; }
.staffel[open] summary::after{ transform:rotate(-180deg); }
.staffel-table th,.staffel-table td{ padding:.5rem .5rem; }
.staffel-table tbody tr.is-active{ background:rgba(48,77,161,.06); }
.staffel-table tbody tr.is-active td{ font-weight:600; }

/* Login pagina centreren */
#page_login section {
  min-height: calc(100vh - 140px); /* corrigeer afhankelijk van header/footer */
  display: flex;
  align-items: center;
}
.dl-auth-card {
  border-radius: 14px;
}

/* ===== Dealers > Returns > Detail ===== */
#page_dealers_returns_detail .card{ border-radius:14px; }
#page_dealers_returns_detail .badge.text-bg-light.border{
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}

/* Tijdlijn */
.dl-rma-timeline { position:relative; padding-left: 24px; }
.dl-rma-timeline li{ position:relative; padding-left: 12px; margin: 10px 0 14px; }
.dl-rma-timeline li .dot{
  position:absolute; left:-20px; top:4px; width:12px; height:12px; border-radius:50%;
  background:#e5e7eb; border:2px solid #cbd5e1;
}
.dl-rma-timeline li.done .dot { background:#22c55e; border-color:#16a34a; }
.dl-rma-timeline li.active .dot { background:#3b82f6; border-color:#2563eb; }
.dl-rma-timeline::before{
  content:""; position:absolute; left: -14px; top: 6px; bottom: 6px; width:2px; background:#e5e7eb;
}
/* Thumbs als wrappende grid, niet ‘verborgen’ */
#pdp-gallery .dl-pdp-thumbs{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .5rem;
}

#pdp-gallery .dl-thumb{
  border:1px solid var(--bs-border-color);
  background:#fff;
  padding:.25rem;
  border-radius:.375rem;
  line-height:0;
  cursor:pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#pdp-gallery .dl-thumb.is-active{
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .15rem rgba(13,110,253,.15);
}

#pdp-gallery .dl-thumb img{
  display:block;
  width:100%;
  height:64px;
  object-fit:contain;
}