.dl-locator {
  font-family: "Inter", sans-serif;
}

.dl-empty {
  text-align: center;
  color: #777;
  font-size: 14px;
  padding: 32px 0;
}

.dl-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px 32px;
  margin-bottom: 28px;
}

.dl-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-locator .dl-filter-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #414651;
}

.dl-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* .dl-locator qualifier on every rule below isn't just scoping -- it's
   load-bearing: these render as real <button type="button"> elements, and a
   site-wide reset targets [type=button]/[type=submit]/button (plus a separate
   :hover/:focus variant) at equal specificity to a bare class, so whichever
   stylesheet loads later wins each tied property. That reset also sets its own
   font-family, so "Inter" is written out here instead of `inherit`.
   The .is-active variants are qualified the same way and kept in the same
   file order *after* :hover, so source order decides in favor of .is-active
   for a button that's both active and hovered. */
.dl-locator .dl-toggle-btn,
.dl-locator .dl-toggle-btn:hover,
.dl-locator .dl-toggle-btn:focus {
  box-sizing: border-box;
  height: 48px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #d5d7da;
  background: #fff;
  color: #414651;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px 0 rgba(10, 13, 18, 0.05);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dl-locator .dl-toggle-btn:hover,
.dl-locator .dl-toggle-btn:focus {
  background: #fafafa;
}

.dl-locator .dl-toggle-btn--verkooppunt.is-active,
.dl-locator .dl-toggle-btn--verkooppunt.is-active:hover,
.dl-locator .dl-toggle-btn--verkooppunt.is-active:focus {
  background: #a82217;
  border-color: #a82217;
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 -2px 0 rgba(10, 13, 18, 0.05);
}

.dl-locator .dl-toggle-btn--installateur.is-active,
.dl-locator .dl-toggle-btn--installateur.is-active:hover,
.dl-locator .dl-toggle-btn--installateur.is-active:focus {
  background: #6f8fe0;
  border-color: #6f8fe0;
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 -2px 0 rgba(10, 13, 18, 0.05);
}

.dl-locator .dl-region-select,
.dl-locator .dl-lang-select {
  box-sizing: border-box;
  height: 48px;
  padding: 0 12px 0 40px;
  border-radius: 10px;
  border: 1px solid #d5d7da;
  /* Chevron on the left, as in the design (10x6, #A4A7AE). */
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.875 0.875L4.875 4.875L8.875 0.875' stroke='%23A4A7AE' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 18px center / 10px 6px;
  -webkit-appearance: none;
  appearance: none;
  color: #414651;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  cursor: pointer;
}

.dl-locator .dl-region-select {
  min-width: 0;
  width: 100%;
}

/* Toggle, region and language share one row; the region dropdown takes the
   free space (the row wraps on phones, see the media query below). */
.dl-filter-group:has(.dl-region-select) {
  /* flex: 1 1 160px; */
  min-width: 0;
}

@media (min-width: 641px) {
  .dl-filters {
    flex-wrap: nowrap;
  }
}

.dl-locator .dl-lang-select {
  min-width: 0;
  width: 136px;
}

.dl-map {
  height: 440px;
  border-radius: 12px;
  overflow: hidden;
  background: #eaf1fb;
  margin-bottom: 32px;
}

/* Positron's land colour, so the box does not flash blue or grey while the vector map loads. */
.dl-map.leaflet-container,
[data-dl-minimap].leaflet-container {
  background: #f2f3f0;
}

.dl-list {
  display: flex;
  flex-direction: column;
}

.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #d8e0f5;
  cursor: pointer;
}

.dl-row:first-child {
  border-top: 1px solid #d8e0f5;
}

.dl-row[hidden] {
  display: none;
}

.dl-row-info {
  min-width: 0;
}

.dl-row-title {
  display: block;
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #6f8fe0;
  text-decoration: none;
}

a.dl-row-title:hover {
  text-decoration: underline;
}

.dl-row-address {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 24px;
  color: #1d2327;
}

/* Shared by the row list and the Leaflet map popup — popup markup lives
   outside .dl-locator in the DOM, but this class isn't scoped, so the one
   rule covers both. */
.dl-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6f8fe0;
  vertical-align: middle;
  text-decoration: none;
}

.dl-maps-link:hover {
  color: #4a5b8c;
}

.dl-maps-link--popup {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
}

.dl-row-hours {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 24px;
  color: #535862;
}

.dl-row-email,
.dl-row-phone {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: #1d2327;
  text-decoration: none;
}

.dl-row-email:hover,
.dl-row-phone:hover {
  text-decoration: underline;
}

.dl-row-website {
  flex: none;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid #cdd7ef;
  background: #fff;
  color: #6f8fe0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

/* color redeclared here for the same reason as kennisbank's .kb-pro-btn:
   a generic a:hover site rule (1 type + 1 pseudo) beats this rule's own
   base .dl-row-website color (1 class) on specificity once hovered, even
   though it doesn't beat this :hover rule itself (1 class + 1 pseudo).
   Not yet visually confirmed live -- none of the seeded sample dealers
   have a website URL set, so this button doesn't render anywhere yet --
   but it's the identical mechanism already proven twice this session. */
.dl-row-website:hover {
  border-color: #6f8fe0;
  color: #6f8fe0;
}

.dl-list-empty {
  padding: 24px 0;
  color: #535862;
  font-size: 14px;
}

.dl-more-wrap {
  margin-top: 24px;
  text-align: center;
}

/* Real <button>: qualified + hover/focus redeclared against the site-wide
   [type=button] reset, same as .dl-toggle-btn above. */
.dl-locator .dl-more-btn,
.dl-locator .dl-more-btn:hover,
.dl-locator .dl-more-btn:focus {
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid #cdd7ef;
  background: #fff;
  color: #6f8fe0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.dl-locator .dl-more-btn:hover {
  border-color: #6f8fe0;
}

.dl-locator .dl-more-btn[hidden],
.dl-locator .dl-list-empty[hidden] {
  display: none;
}

/* Pins are canvas circle markers (js/dealer-locator.js), styled there —
   no marker CSS needed. Popup title links to the dealer's own page. */
.dl-popup-title {
  font-weight: 700;
  color: #1d2327;
  text-decoration: none;
}

.dl-popup-title:hover {
  color: #6f8fe0;
  text-decoration: underline;
}

/* Province link block — under the locator and on the dealer pages. */
.dl-region-nav {
  margin-top: 56px;
}

.dl-region-links[hidden] {
  display: none;
}

.dl-region-links-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #1d2327;
}

.dl-region-links-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dl-region-links-list a {
  color: #6f8fe0;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.dl-region-links-list a:hover {
  color: #4a5b8c;
  text-decoration: underline;
}

.dl-region-links-list span {
  color: #717680;
  font-weight: 400;
}

@media (max-width: 640px) {
  .dl-filters {
    gap: 20px;
  }

  /* The two toggle buttons share the row evenly (text wraps on very narrow phones). */
  .dl-filter-group:has(.dl-toggle) {
    width: 100%;
  }

  .dl-toggle {
    flex-wrap: nowrap;
  }

  .dl-locator .dl-toggle-btn,
  .dl-locator .dl-toggle-btn:hover,
  .dl-locator .dl-toggle-btn:focus {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    white-space: normal;
  }

  /* Region + language stay on one line below the toggle. */
  .dl-filter-group:has(.dl-region-select) {
    flex: 1 1 0;
  }

  .dl-map {
    height: 320px;
  }

  .dl-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dl-row-website {
    align-self: flex-start;
  }
}

/* -------------------------------------------------------------------------
 * Dealer + province pages (templates/). Hero mirrors the Elementor
 * /verkooppunten/ page: red Inter headline on a light dotted band.
 * ---------------------------------------------------------------------- */
.dl-page {
  font-family: "Inter", sans-serif;
  color: #1d2327;
}

/* Hello Elementor caps .site-main at 1140px with side padding on
   non-Elementor pages (`body:not([class*=elementor-page-]) .site-main`,
   0-2-1); the hero band here runs full width instead. `html body` makes
   this 0-2-2 so it wins regardless of stylesheet order. */
html body .site-main.dl-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.dl-container {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.dl-hero {
  /* Top padding clears the fixed site header (~120px), so the headline
     lands where it does on the Elementor /verkooppunten/ page. */
  padding: 160px 0 64px;
  background-color: #f7fafe;
  background-image: radial-gradient(#d6e2f3 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

.dl-hero--single {
  padding-bottom: 48px;
}

.dl-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #535862;
}

.dl-breadcrumbs li + li::before {
  content: "›";
  margin-right: 8px;
  color: #a4a7ae;
}

.dl-breadcrumbs a {
  color: #535862;
  text-decoration: none;
}

.dl-breadcrumbs a:hover {
  color: #ba0000;
  text-decoration: underline;
}

.dl-hero-title {
  margin: 0;
  max-width: 900px;
  color: #ba0000;
  font-family: "Inter", sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
}

.dl-hero-intro {
  max-width: 760px;
  margin: 20px 0 0;
  color: #414651;
  font-size: 18px;
  line-height: 28px;
}

.dl-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #414651;
  font-size: 15px;
  font-weight: 600;
}

.dl-type-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dl-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

.dl-section + .dl-section {
  padding-top: 0;
}

.dl-section-title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #1d2327;
}

.dl-crosslink {
  margin: 24px 0 0;
  font-size: 15px;
  color: #414651;
}

.dl-crosslink--hero {
  margin-top: 12px;
}

.dl-crosslink a {
  color: #6f8fe0;
  font-weight: 600;
  text-decoration: none;
}

.dl-crosslink a:hover {
  text-decoration: underline;
}

/* Town headings in the province lists (orderby="city"). */
.dl-locator .dl-city {
  margin: 32px 0 0;
  padding-bottom: 8px;
  color: #1d2327;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.dl-locator .dl-city:first-child {
  margin-top: 0;
}

/* The row after a town heading draws its own top border. */
.dl-locator .dl-city + .dl-row {
  border-top: 1px solid #d8e0f5;
}

/* Single dealer: facts left, map right. */
.dl-single {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}

.dl-facts {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px 16px;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.dl-facts dt {
  color: #717680;
  font-weight: 500;
}

.dl-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.dl-facts a {
  color: #1d2327;
  font-weight: 600;
  text-decoration: none;
}

.dl-facts a:hover {
  color: #6f8fe0;
  text-decoration: underline;
}

.dl-single-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.dl-page .dl-btn,
.dl-page .dl-btn:hover,
.dl-page .dl-btn:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid #cdd7ef;
  border-radius: 8px;
  background: #fff;
  color: #6f8fe0;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.dl-page .dl-btn:hover {
  border-color: #6f8fe0;
}

.dl-page .dl-btn--primary,
.dl-page .dl-btn--primary:hover,
.dl-page .dl-btn--primary:focus {
  border-color: #ba0000;
  background: #ba0000;
  color: #fff;
}

.dl-page .dl-btn--primary:hover {
  border-color: #8f0000;
  background: #8f0000;
}

.dl-minimap {
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
  background: #eaf1fb;
}

.dl-nearby-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dl-nearby-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid #d8e0f5;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.dl-nearby-card:hover {
  border-color: #6f8fe0;
}

.dl-nearby-name {
  color: #6f8fe0;
  font-size: 16px;
  font-weight: 700;
}

.dl-nearby-meta {
  color: #535862;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .dl-hero-title {
    font-size: 40px;
  }

  .dl-single {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .dl-nearby-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dl-hero {
    padding: 104px 0 40px;
  }

  .dl-hero-title {
    font-size: 30px;
  }

  .dl-hero-intro {
    font-size: 16px;
    line-height: 24px;
  }

  .dl-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .dl-facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .dl-facts dd {
    margin-bottom: 12px;
  }

  .dl-minimap {
    height: 280px;
  }

  .dl-nearby-list {
    grid-template-columns: 1fr;
  }
}

/* Leaflet sets z-index 400–1000 on its panes and controls; without a
   stacking context of their own they end up above the fixed site header
   (seen on mobile). isolation keeps them inside the map box. */
.dl-map,
.dl-minimap {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

@media (max-width: 360px) {
  .dl-locator .dl-toggle-btn,
  .dl-locator .dl-toggle-btn:hover,
  .dl-locator .dl-toggle-btn:focus {
    font-size: 14px;
    padding: 8px 6px;
  }

  .dl-locator .dl-region-select,
  .dl-locator .dl-lang-select {
    padding-left: 32px;
    background-position: 12px center;
    font-size: 15px;
  }
}