/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 15px;
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

/* Gutter for modules that do not bring their own wrapper — HubSpot's core Rich
   text, Header, Image, Button, Form and so on — so their content does not run to
   the screen edge on mobile.

   Keyed on the absence of a .content-wrapper, which is the actual condition:
   this theme's modules each wrap their own content (and several are deliberately
   edge to edge), while HubSpot's core modules do not wrap anything.

   NOT keyed on widget-type-custom_widget: HubSpot puts that class on *every* v2
   module in a drag-and-drop area, including its own Header and Rich text, so
   excluding it would exclude everything. Verified on /receptiewerkplaats, where a
   core header renders as
   .widget-type-custom_widget > .hs_cos_wrapper_type_module > .hs_cos_wrapper_type_header.

   NOT on .dnd-column either: a column can hold both a core module and a
   full-width custom one, and padding the column would inset both. */
.dnd-module:not(:has(.content-wrapper)) {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
  font-family: 'ITC Avant Garde Gothic', sans-serif;
  font-weight: 500;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 35px;
}

@media (max-width: 767px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 28px;
  }
}

/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

/* Tighter than the browser default (~40px), which eats a lot of a phone's
   width. Nothing sets it above this breakpoint, so the default still applies
   on desktop. */
@media (max-width: 767px) {
  ul,
  ol {
    padding-left: 25px;
  }
}

ul li,
ol li {
  margin-bottom: 5px;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  text-align: center;
  white-space: normal;
  border-radius: 30px;
  border: 1px solid var(--secondary-color);
  background-color: #ffffff;
  display: inline-flex;
  padding: 10px 25px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--secondary-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  transition: color 0.25s, background-color 0.25s, border 0.25s;
}

@media (max-width: 767px) {
  button,
  .button,
  .hs-button {
    padding: 10px 15px 10px;
    gap: 3px;
  }
}

button svg,
.button svg,
.hs-button svg {
  position: relative;
  bottom: -1px;
  height: 24px;
  width: 24px;
}

button svg path,
.button svg path,
.hs-button svg path {
  transition: fill 0.25s;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

button:hover,
.button:hover,
.hs-button:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
}

button:hover svg path,
.button:hover svg path,
.hs-button:hover svg path {
  fill: #ffffff;
}

/** Transparent version **/
button.is-transparent,
.button.is-transparent,
.hs-button.is-transparent {
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
}

button.is-transparent svg path,
.button.is-transparent svg path,
.hs-button.is-transparent svg path {
  fill: #ffffff;
}

button.is-transparent:hover,
.button.is-transparent:hover,
.hs-button.is-transparent:hover {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
  color: #ffffff;
}

button.is-transparent.with-green-hover:hover,
.button.is-transparent.with-green-hover:hover,
.hs-button.is-transparent.with-green-hover:hover {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}

/** Blue version **/
button.is-blue,
.button.is-blue,
.hs-button.is-blue {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
  color: #ffffff;
}

button.is-blue svg path,
.button.is-blue svg path,
.hs-button.is-blue svg path {
  fill: #ffffff;
}

button.is-blue:hover,
.button.is-blue:hover,
.hs-button.is-blue:hover {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}

button.is-blue.with-white-hover:hover,
.button.is-blue.with-white-hover:hover,
.hs-button.is-blue.with-white-hover:hover {
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: var(--secondary-color);
}

button.is-blue.with-white-hover:hover svg path,
.button.is-blue.with-white-hover:hover svg path,
.hs-button.is-blue.with-white-hover:hover svg path {
  fill: var(--secondary-color);
}

/** Green version **/
/** Blue version **/
button.is-green,
.button.is-green,
.hs-button.is-green {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}

button.is-green svg path,
.button.is-green svg path,
.hs-button.is-green svg path {
  fill: #ffffff;
}

button.is-green:hover,
.button.is-green:hover,
.hs-button.is-green:hover {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
  color: #ffffff;
}

button.is-full,
.button.is-full,
.hs-button.is-full {
  width: 100%;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.8rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }

/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Breadcrumbs — rendered by templates/partials/breadcrumbs.html.
   Semantic nav > ol > li; the separator is drawn in CSS so screen readers do not
   read it out. */

.breadcrumbs {
    margin-top: 30px;
    margin-bottom: 5px;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--secondary-color);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "-";
}

.breadcrumbs__link {
    color: var(--secondary-color);
}

.breadcrumbs__link:hover {
    text-decoration: underline;
}

.breadcrumbs__current {
    font-weight: 500;
}

body:has(.error-page) .breadcrumbs {
    display: none;
}

/* Space between the trail and the content under it — pinned to 24px on every
   template. Measured before this rule: 44px on /over-ons, 47px on
   /privacy-verklaring, 49px on /werkplaats, 59px on /voertuig, 85px on
   /diensten, 87px on /onderhoud, and 28/58px on a service detail page. Only
   5px of that was the trail's own margin; the rest was the first content
   block's top spacing, which came from three unrelated places — row padding
   set by hand in the page editor, the theme's 80px .dnd-section default where
   no row padding was set, and a module's own CSS.

   !important is not avoidable here. The page editor writes
   `.dnd_area-row-0-padding { padding-top: Npx !important }` into a page-level
   <style> block, so specificity alone cannot win. The consequence is that the
   first row's top padding is no longer adjustable per page — which is the
   intent: those per-page values are what made the spacing inconsistent.

   Matched with :has() on the hero block rather than a class on the trail,
   because the element that owns the space is in the hero's NEXT sibling
   subtree and CSS cannot reach it from the trail itself. Both :has() clauses
   are needed — .hero-inner pins the match to the inner-page hero, so a content
   block that happens to contain a trail cannot trigger it. :has() is already
   used in this theme (see objects/_containers-dnd.css).

   .offers-overview__page takes margin-top, not padding: it is the fragment the
   /voertuig filter replaces over AJAX and it carries its own spacing. */
.body-container-wrapper > *:has(.hero-inner):has(.breadcrumbs) .breadcrumbs {
    margin-bottom: 0 !important;
}

.body-container-wrapper > *:has(.hero-inner):has(.breadcrumbs) + * .dnd-section:first-child,
.body-container-wrapper > *:has(.hero-inner):has(.breadcrumbs) + * .service-detail {
    padding-top: 24px !important;
}

.body-container-wrapper > *:has(.hero-inner):has(.breadcrumbs) + * .offers-overview__page {
    margin-top: 24px !important;
}
.whatsapp-button {
    position: fixed;
    right: 80px;
    bottom: 40px;
    z-index: 50;
    transition: bottom 0.25s, top 0.25s;
}

@media (max-width: 767px) {
    .whatsapp-button {
        right: 20px;
    }

    .whatsapp-button svg {
        width: 80px;
        height: 80px;
    }
}

.whatsapp-button.opacity {
    opacity: 0;
}

.whatsapp-button.absolute {
    position: absolute;
    top: -40px !important;
    bottom: unset;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

:root {
  --header-top-height: 64px;
  --header-bottom-height: 115px;
  --header-height: calc(var(--header-top-height) + var(--header-bottom-height));
}

@media (max-width: 1440px) {
  :root {
    --header-bottom-height: 95px;
  }
}

body {
  margin-top: var(--header-top-height);
}

.header .dnd-section {
  padding: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*height: var(--header-height);*/
  background: transparent;
  z-index: 1000;
}

.header.is-mobile-menu-open .mobile-menu__block {
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.header .hs-menu-wrapper ul {
  display: flex;
}

.header .hs-menu-wrapper ul li a {
  color: #ffffff;
}

.header__container {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 26px;
}

.header__container {
  padding-top: 16px;
  padding-bottom: 26px;
}

@media (max-width: 1199px) {
  .header__container {
    justify-content: center;
    padding-bottom: 16px;
  }
}

.header__top {
  height: var(--header-top-height);
  background: linear-gradient(-65deg, var(--primary-color) 50%, var(--secondary-color) 50%);
  position: relative;
  z-index: 10;
}

.top-bar__content-mobile {
  display: none;
}

@media (max-width: 1199px) {
  .header__top {
    background: linear-gradient(-65deg, var(--primary-color) 0%, var(--primary-color) 95px, var(--secondary-color) 95px);
  }

  .top-bar__content-desktop {
    display: none;
  }

  .top-bar__content-mobile {
    display: block;
  }

  .hs-tools-menu {
    display: none !important;
  }
}

.header__top .content-wrapper {
  height: 100%;
}

.header__top .hs-menu-wrapper ul {
  gap: 10px 40px;
}

.header__top .hs-menu-wrapper ul li.active a {
  text-decoration: underline;
}

.header__top .hs-menu-wrapper ul li a {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.header__top .hs-menu-wrapper ul li a:hover {
  text-decoration: underline;
}

.header__top .hs-menu-wrapper ul li a[href*='mailto'],
.header__top .hs-menu-wrapper ul li a[href*='tel'] {
  position: relative;
  padding-left: 25px;
}

.header__top .hs-menu-wrapper ul li a[href*='mailto']::before,
.header__top .hs-menu-wrapper ul li a[href*='tel']::before {
  position: absolute;
  left: 0;
  top: -3px;
}

.header__top .hs-menu-wrapper ul li a[href*='mailto']::before {
  content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/email-icon.svg');
}

.header__top .hs-menu-wrapper ul li a[href*='tel']::before {
  content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/phone-icon.svg');
}

.top-bar__row {
  display: flex;
  height: 100%;
  gap: 20px;
  justify-content: space-between;
  align-content: center;
}

.top-bar__col {
  display: flex;
  align-items: center;
}

.top-bar__col p {
  margin: 0;
  font-size: 13px;
  font-style: normal;
  color: #ffffff;
  font-weight: 600;
}

.top-bar__content-mobile__phone {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  color: #ffffff;
}

.header__main {
  height: var(--header-bottom-height);
  background: transparent;
  transition: background 0.25s, opacity 0.25s, height 0.25s;
  position: relative;
  z-index: 10;
}

.header__main.is-hidden {
  pointer-events: none;
  opacity: 0 !important;
  z-index: -1;
  height: 0;
}

.header__main.has-overlay {
  background: rgba(0, 45, 89, 0.8);
  height: 100px;
}

@media (max-width: 1199px) {
  .header__main.has-overlay {
    height: 85px;
  }
}

.header__main.has-overlay .header__logo {
  margin-top: 5px;
}

.header__main.has-overlay .header__logo svg {
  height: 44px;
}

.header__main.has-overlay .header_navigation {
  padding-top: 15px;
}

.header__main .header__logo {
  transition: margin-top 0.25s;
}

.header__main .header__logo svg {
  transition: height 0.25s;
}

.header_navigation {
  display: flex;
  align-items: center;
  padding-top: 32px;
  transition: padding-top 0.25s;
}

@media (max-width: 1440px) {
  .header_navigation {
    padding-top: 25px;
  }

  .header__logo svg {
    height: 55px;
    width: auto;
  }
}

@media (max-width: 1199px) {
  .header__main.is-background {
    background: rgba(0, 0, 0, 0.65);
  }

  .header__main.is-background .logo-link svg path {
    fill: #ffffff !important;
  }

  .header_navigation {
    display: none;
  }

  .header__logo {
    margin-top: 5px;
  }
}

@media (max-width: 767px) {
  /* Also overrides the has-overlay variant, which sets its own 44px. */
  .header__logo svg,
  .header__main.has-overlay .header__logo svg {
    height: 45px;
    width: auto;
  }
}

.header__container .hs-menu-wrapper ul {
  gap: 10px 28px;
}

.header__container .hs-menu-wrapper ul li a {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  padding: 5px 20px;
  transition: background 0.25s;
  border-radius: 50px;
}

.header__container .hs-menu-wrapper ul li.active a,
.header__container .hs-menu-wrapper ul li a:hover {
  background: var(--primary-color);
}

@media (max-width: 1440px) {
  .header__container .hs-menu-wrapper ul li a {
    font-size: 20px;
  }
}

.mobile-menu-trigger {
  background: transparent !important;
  border: none;
  padding: 0;
  margin: 0;
  display: none;
}

@media (max-width: 1199px) {
  .mobile-menu-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-right: 5px;
    position: relative;
    z-index: 10;
  }

  .mobile-menu-trigger span {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: #ffffff;
    transition: all 0.25s;
  }

  .mobile-menu-trigger span:first-child {
    width: 25px;
  }

  .mobile-menu-trigger span:nth-child(2) {
    width: 25px;
    margin-right: 10px;
  }

  .mobile-menu-trigger span:last-child {
    width: 25px;
    margin-right: 20px;
  }

  .header.is-mobile-menu-open .mobile-menu-trigger span:nth-child(2) {
    margin-right: -6px;
  }

  .header.is-mobile-menu-open .mobile-menu-trigger span:last-child {
    margin-right: 4px;
  }
}

.mobile-menu__block {
  display: none;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 120px;
  background: var(--secondary-color);
  overflow: auto;
  animation: animate-opacity 0.25s forwards;
}

@media (min-width: 1199px) {
  .mobile-menu__block {
    display: none !important;
  }
}

.header.is-mobile-menu-open .mobile-menu-trigger span:first-child {
  width: 20px;
  transform: rotate(-40deg) translate(-1px, 8px);
}

.header.is-mobile-menu-open .mobile-menu-trigger span:last-child {
  transform: rotate(-40deg) translate(2px, -9px);
}

.header.is-mobile-menu-open .mobile-menu-trigger span:nth-child(2) {
  width: 40px;
  transform: rotate(43deg);
}

.mobile-menu__wrapper {
  padding: 65px 0 30px;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul {
  display: flex !important;
  flex-direction: column;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul > li {
  padding: 0 15px;
  margin-bottom: -1px;
  transition: background 0.4s;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul > li > a {
  display: block;
  padding: 18px 25px 14px;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-bottom-color 0.4s;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul > li:last-child > a {
  border-bottom: 0;
}

.mobile-menu__wrapper .submenu-toggle {
  background: transparent;
  width: 50px;
  height: 55px;
  margin: 0;
  position: absolute;
  right: 20px;
  top: 0;
  padding: 0;
  border: none;
}

.mobile-menu__wrapper {
  flex-grow: 1;
}

.mobile-menu__controls {
  padding: 0 15px;
  display: flex;
  justify-content: center;
}

.mobile-cta {
  background: var(--primary-color);
  text-align: center;
  padding: 14px 25px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-cta p {
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: #ffffff;
}

.mobile-menu__socials {
  margin: 0;
  padding: 0 25px;
}

.mobile-menu__socials .social-links {
  justify-content: center;
}

@media (max-width: 1199px) {
  body:has(.header.is-mobile-menu-open) {
    overflow: hidden;
  }
}

@keyframes animate-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.footer {
    position: relative;
    padding-top: 80px;
    padding-bottom: 35px;
    background-color: var(--secondary-color);
}

@media (max-width: 919px) {
    .footer {
        padding-top: 50px;
    }
}

.footer * {
    color: #ffffff !important;
    font-size: 14px !important;
}

.footer p {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 0;
}

.footer h2 {
    line-height: normal;
    margin-bottom: 28px;
}

.footer ul li {
    margin-bottom: 8px;
}

.footer a:hover {
    text-decoration: underline;
}

.footer__row {
    display: flex;
    gap: 25px;
}

.footer__col.is-first {
    width: calc(30% - (75px / 4));
}

.footer__col.is-second {
    width: calc(15% - (75px / 4));
}

.footer__col.is-third {
    width: calc(40% - (75px / 4));
}

.footer__col.is-fourth {
    width: calc(15% - (75px / 4));
}

/* The site-wide rich-text gutter in objects/_containers-dnd.css indents this
   against the logo above it — the footer columns supply their own spacing. */
.footer__short-description .widget-type-rich_text {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1199px) {
    .footer__row {
        flex-wrap: wrap;
    }

    .footer__col.is-first {
        width: calc(35% - (75px / 4));
    }

    .footer__col.is-second {
        width: calc(20% - (75px / 4));
    }

    .footer__col.is-third {
        width: calc(30% - (75px / 4));
    }
}

@media (max-width: 919px) {
    .footer__row {
        gap: 25px 50px;
    }

    .footer__col.is-third {
        order: unset;
    }

    .footer__col.is-third,
    .footer__col.is-first,
    .footer__col.is-second,
    .footer__col.is-fourth {
        width: auto;
    }
}

@media (max-width: 500px) {
    .footer__col.is-third,
    .footer__col.is-first,
    .footer__col.is-second,
    .footer__col.is-fourth {
        width: 100%;
    }
}

.footer__col.is-bottom-first {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer__col.is-bottom-last {
    width: 30%;
}

@media (max-width: 1199px) {
    .footer__col.is-bottom-first,
    .footer__col.is-bottom-last {
        width: 100%;
    }
}

.footer__main {
    padding-bottom: 34px;
}

.footer__col.has-top-padding {
    padding-top: 52px;
}

@media (max-width: 919px) {
    .footer__col.has-top-padding {
        padding-top: 22px;
    }
}

.footer__logo {
    display: block;
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .footer__logo svg {
        height: 45px;
        width: auto;
    }
}

.footer__navigation {
    margin-top: 0;
}

.footer__navigation .hs-menu-item a {
    line-height: 25px;
}

.footer__time-tables {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media (max-width: 1199px) {
    .footer__time-tables {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
}

@media (max-width: 919px) {
    .footer__time-tables {
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.footer .sm--availability-schedule-table th {
    text-align: left;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 18px;
}

.footer .sm--availability-schedule-table td {
    padding: 10px 25px 1px 0;
    border: none;
}

.footer table {
    background-color: transparent;
    max-width: 300px;
    border: none !important;
}

.footer__certificates {
    margin-top: 40px;
}

.footer__certificates .hs-image__grid__list {
    justify-content: flex-start;
}

/* Centred rather than top-aligned: the images below are all forced to 30px
   wide with their height left to follow the artwork, and the BOVAG file is
   portrait — 30x48 against roughly 30x31 for Bosch Service, Erkend Duurzaam
   and the charging icon. Pinned to a common top edge it hung 17px below the
   other three, which is what the client reported.

   Centring rather than forcing a common height on purpose: matching heights
   would shrink BOVAG to about 19px wide, and its wordmark is the part that
   would become unreadable. */
.footer__certificates .hs-image__grid__list__item {
    align-self: center;
    flex-basis: 35px !important;
    aspect-ratio: auto !important;
    overflow: initial;
}

.footer__certificates .hs-image__grid__list__item__image {
/*     object-fit: none; */
    width: 30px;
    aspect-ratio: auto !important;
    height: initial;
}

.footer__bottom {
    padding-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.50);
}

.footer__bottom .created-by {
    text-align: right;
}

@media (max-width: 1199px) {
    .footer__bottom .created-by {
        text-align: left;
    }
}

.footer__bottom-navigation ul {
    display: flex;
    gap: 15px 30px;
    flex-wrap: wrap;
}

.footer__bottom-navigation .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: row;
}

.footer .social-links__icon{
  height: 34px;
  width: 34px;
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}
.media-text.text-on-right > .row-fluid,
.media-text.text-on-left > .row-fluid {
    max-width: 1540px !important;
}

.media-text.text-on-right > .row-fluid > .widget-span:last-child {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 60px 100px;
    margin-top: 60px;
    width: 50%;
    height: 100%;
}

.media-text.text-on-right > .row-fluid > .widget-span:first-child .hs-image-widget {
    width: 860px;
    max-width: initial !important;
    height: 600px !important;
    border-radius: 300px 10px 10px 300px;
    object-fit: cover;
}

.media-text.text-on-left > .row-fluid > .widget-span:first-child {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 60px 100px;
    margin-top: 60px;
    position: relative;
    z-index: 5;
    width: 50%;
    height: 100%;
}

.media-text.text-on-left > .row-fluid > .widget-span:last-child .hs-image-widget {
    width: 860px;
    max-width: initial !important;
    height: 600px !important;
    border-radius: 10px 300px 300px 10px;
    object-fit: cover;
    margin-left: -110px;
}
.inner-page-hero {
    position: relative;
    height: 470px;
    background: var(--secondary-color);
}

body:has(.error-page) .inner-page-hero {
    height: 270px;
}

@media (max-width: 767px) {
    .inner-page-hero {
        position: relative;
        height: 370px;
    }
}

.inner-page-hero .content-wrapper {
    height: 100%;
}

.inner-page-hero::before {
    content: '';
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.inner-page-hero__inner {
    position: relative;
    z-index: 10;
    color: #ffffff;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inner-page-hero__inner.is-knowledge-base {
    align-items: flex-end;
    justify-content: flex-end;
    max-width: 100%;
}

.inner-page-hero__featured-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-page-hero__inner h1 {
    margin-bottom: 0;
    color: #ffffff;
    margin-top: 80px;
}

@media (max-width: 767px) {
    .inner-page-hero__inner h1 {
        margin-top: 40px;
    }

}

.inner-page-hero__inner .button.is-cta {
    margin-top: 35px;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.50);
}

.footer-bottom p {
    margin-bottom: 0;
}

.footer-bottom > .row-fluid > .dnd-column:first-child p {
    display: flex;
    gap: 10px 25px;
}
.knowledge-base__inner {
    display: flex;
    gap: 40px;
    padding: 40px 0;
}

.knowledge-base__sidebar {
    width: 290px;
}

/* Full width now the filter sidebar is gone (services moved to HubDB). */
.knowledge-base__main {
    width: 100%;
    padding-bottom: 35px;
}

@media (max-width: 1199px) {
    .knowledge-base__inner {
        flex-wrap: wrap;
    }

    .knowledge-base__sidebar,
    .knowledge-base__main {
        width: 100%;
    }
}


.knowledge-base__sidebar .filters__reset-button {
    max-width: 290px;
}

.knowledge-base__sidebar-heading {
    font-size: 22px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.knowledge-base__filter-form {
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    padding: 20px;
}

.knowledge-base__filter-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 6px;
    margin-top: 8px;
}

.knowledge-base__filter-item input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.knowledge-base__filter-item label {
    position: relative;
    gap: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
}

.knowledge-base__filter-item label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #002D59;
    background: #ffffff;
}

.knowledge-base__filter-item input:checked ~ label::before {
    background: #002D59;
}

.knowledge-base__search-form form {
    position: relative;
    margin-bottom: 25px;
}

.knowledge-base__search-form form input[type=search] {
    border-radius: 30px;
    border: 1px solid #000;
    height: 48px;
    font-size: 16px;
    padding: 10px 20px 8px;
}

.knowledge-base__search-form form input[type=search]::-webkit-search-decoration,
.knowledge-base__search-form form input[type=search]::-webkit-search-cancel-button,
.knowledge-base__search-form form input[type=search]::-webkit-search-results-button,
.knowledge-base__search-form form input[type=search]::-webkit-search-results-decoration {
    display: none;
}

.knowledge-base__search-form form button {
    position: absolute;
    border: none;
    top: 2px;
    right: 2px;
    background: transparent !important;
}

.kb-card {
    display: flex;
    margin-bottom: 20px;
    border-radius: 300px 15px 15px 300px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.kb-card__featured-image {
    width: 220px;
}

.kb-card__featured-image img {
    width: 100%;
    height: 100%;
    border-radius: 300px 0 0 300px;
    object-fit: cover;
    display: block;
}

.kb-card__content {
    width: calc(100% - 220px);
    padding: 40px 35px;
}

@media (max-width: 767px) {
    .kb-card {
        flex-wrap: wrap;
        border-radius: 100px 15px 15px 50px;
    }

    .kb-card__featured-image img {
        border-radius: 100px 15px 0 0;
        height: 260px;
    }

    .kb-card__featured-image,
    .kb-card__content {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .kb-card__featured-image img {
        height: 200px;
    }
}

.kb-card__heading {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .kb-card__heading {
        font-size: 20px;
        line-height: 26px;
    }
}

.kb-card__excerpt p {
    margin-bottom: 15px;
}

.knowledge-base__meta {
    margin-bottom: 35px;
}

.body-container--knowledge-base-post {
    margin-top: 45px;
    margin-bottom: 80px;
}

.knowledge-base__body {
    max-width: 840px;
    margin: auto;
}

.knowledge-base__body .media-and-text {
    margin-top: 80px;
}

.knowledge-base__body .media-and-text {
    margin-left: -250px;
    margin-right: -250px;
}

@media (max-width: 1359px) {
    .knowledge-base__body .media-and-text {
        margin-left: -150px;
        margin-right: -150px;
    }
}

@media (max-width: 1199px) {
    .knowledge-base__body .media-and-text {
        margin-left: 0;
        margin-right: 0;
    }
}

.knowledge-base__tags {
    display: flex;
    margin-top: 20px;
}

.knowledge-base__tags svg {
    width: 20px;
    height: auto;
    margin-bottom: -4px;
    margin-right: 10px;
}

.knowledge-base__related-posts {
    background: rgba(0, 45, 89, 0.1);
    padding-top: 75px;
    padding-bottom: 75px;
}

@media (max-width: 1700px) {
    .knowledge-base__related-posts {
        padding-top: 55px;
    }
}

@media (max-width: 1199px) {
    .knowledge-base__related-posts {
        padding-top: 45px;
    }
}

.knowledge-base__related-list {
    display: flex;
    gap: 30px;
}

.knowledge-base__related-post {
    /* Column so .knowledge-base__related-content can grow into the leftover
       height; the cards themselves are already stretched by the flex row. */
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    width: calc((100% - (30px * 2)) / 3);
}

@media (max-width: 1199px) {
    .knowledge-base__related-list {
        flex-wrap: wrap;
    }

    .knowledge-base__related-post {
        width: calc((100% - (30px)) / 2);
    }
}

@media (max-width: 767px) {
    .knowledge-base__related-post {
        width: 100%;
    }
}

.knowledge-base__related-image {
    width: 100%;
    height: 310px;
    object-fit: cover;
    display: block;
}

/* Column layout so the button can be pushed to the card foot — titles and
   excerpts vary in length, and without this the buttons sit at three different
   heights across a row. */
.knowledge-base__related-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 30px 30px 40px;
}

.knowledge-base__related-content h3 {
    margin-bottom: 20px;
}

.knowledge-base__related-excerpt {
    margin-bottom: 20px;
}

/* Takes up the slack above it, so every button lands on the same baseline.
   align-self stops it stretching to the full card width. */
.knowledge-base__related-content .button {
    margin-top: auto;
    align-self: flex-start;
}

.knowledge-base__cta {
    width: 480px;
    border-radius: 20px 20px 0 0;
    padding: 20px 50px 20px;
    background: var(--primary-color);
}

@media (max-width: 767px) {
    .knowledge-base__cta {
        padding: 20px 20px 20px;
    }
}

.knowledge-base__cta h2 {
    color: #FFF;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
}

.knowledge-base__cta .button {
    width: 100%;
}
/* News index — a featured card across the full width, then a three-up grid.
   Cards reuse the theme's white/rounded/shadow treatment. */

.news {
    padding: 30px 0 70px;
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.news__empty {
    margin: 0;
}

/* Card */
.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.news-card a {
    color: var(--secondary-color);
}

.news-card__media {
    display: block;
}

.news-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.news-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.news-card__title {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.3;
}

.news-card__excerpt {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 22px;
}

.news-card__excerpt p {
    margin: 0;
}

/* Keeps every button on the same baseline regardless of title length. */
.news-card__button {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    padding: 8px 18px;
}

.news-card__button svg {
    width: 18px;
    height: 18px;
}

/* Featured — image beside the copy instead of above it. */
.news-card--featured {
    flex-direction: row;
    align-items: stretch;
}

.news-card--featured .news-card__media {
    flex: 0 0 50%;
}

.news-card--featured .news-card__image {
    height: 590px;
    aspect-ratio: auto;
}

.news-card--featured .news-card__body {
    flex: 1 1 auto;
    justify-content: center;
    padding: 40px;
}

.news-card--featured .news-card__title {
    font-size: 26px;
}

.news-card--featured .news-card__excerpt {
    font-size: 15px;
}

/* The grid cards push their button to the card foot; the featured card centres
   its content instead, so the auto margin would strand the button at the bottom. */
.news-card--featured .news-card__button {
    margin-top: 0;
}

/* ==========================================================================
   News post — hero, then breadcrumbs, then the article's own featured image.
   ========================================================================== */

.news-post {
    position: relative;
    z-index: 10;
    /* Sits below the hero like every other inner page. It used to overlap it
       with a negative margin; the client asked for the image under the header
       instead (DP-44), so the offset is gone and the block flows normally. */
    padding-bottom: 0;
}

.news-post__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    /* Navy: this used to sit on the dark hero and was white. With the block no
       longer overlapping, white on white would be invisible. */
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 500;
}

/* The theme's global a:hover turns links blue; hold the navy and underline. */
.news-post__back:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.news-post__featured {
    /* The figure is what actually bounds the width — a max-width on the img
       alone cannot exceed its parent. */
    max-width: 1280px;
    margin: 0 auto 40px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.news-post__featured img {
    display: block;
    width: 100%;
    max-width: 1280px;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.news-post__article {
    max-width: 840px;
    margin: 0 auto;
}

.news-post__title {
    margin: 25px 0;
}

.news-post__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 25px;
    font-size: 14px;
}

.news-post__tags svg {
    width: 14px;
    height: 14px;
    fill: var(--primary-color);
}

.news-post__tag-link {
    color: var(--secondary-color);
    text-decoration: underline;
}

.news-post__body {
    font-size: 16px;
    line-height: 26px;
}

.news-post__body > *:last-child {
    margin-bottom: 0;
}

.news-post__body img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.news-post__body :is(td, th) {
    padding: 6px;
}

@media (max-width: 767px) {
    .news-post__featured {
        margin-bottom: 25px;
        border-radius: 15px;
    }
}

/* Pagination */
.news__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 45px;
}

.news__pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 8px 14px;
    border: 1px solid var(--secondary-color);
    border-radius: 30px;
    color: var(--secondary-color);
    font-size: 14px;
    transition: background-color 0.25s, color 0.25s;
}

.news__pagination-link:hover,
.news__pagination-link.is-current {
    background: var(--secondary-color);
    color: #ffffff;
}

@media (max-width: 991px) {
    .news__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .news-card--featured .news-card__body {
        padding: 25px;
    }

    .news-card--featured .news-card__title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    /* Featured falls back to the stacked card layout. */
    .news-card--featured {
        flex-direction: column;
    }

    .news-card--featured .news-card__media {
        flex: 1 1 auto;
    }

    /* Drop the fixed height once the card stacks. */
    .news-card--featured .news-card__image {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 575px) {
    .news {
        padding: 20px 0 50px;
    }

    .news__grid {
        grid-template-columns: 1fr;
    }
}
/* Service card — shared by the services grid and the related block on a service
   detail page. Lives here rather than in services-grid/module.css because module
   CSS is only served when that module renders: the detail page uses the card
   without the grid, so scoped styles would never load there. */

.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Media + icon badge */
.service-card__media {
    position: relative;
}

.service-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.service-card__icon {
    position: absolute;
    left: 20px;
    /* Half the badge height, so it straddles the image's bottom edge. */
    bottom: -35px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #FFF;
}

/* The icon tag wraps its svg in a hs_cos_wrapper span, so the badge's flex
   centring lands on that wrapper rather than the svg — centre it too. */
.service-card__icon .hs_cos_wrapper_type_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The icon tag outputs an inline <svg>, so colour it with fill. */
.service-card__icon svg {
    width: 25px;
    height: 25px;
    fill: var(--primary-color);
}

/* Body */
.service-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 15px;
    padding: 32px 20px 20px;
}

/* Links default to the theme's anchor colour (a lighter blue), so pull them back
   to navy — same override the vehicle cards use. */
.service-card a {
    color: var(--secondary-color);
}

.service-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
}

/* Both states go theme green. focus-visible rather than focus so the heading
   does not light up on a mouse click, only on keyboard arrival. The outline is
   recoloured rather than removed — it is the only thing marking where a keyboard
   user is. */
.service-card__title a {
    /* Eased out rather than linear so the colour settles instead of stopping
       dead. Only `color` is transitioned — the focus outline stays instant,
       since a focus indicator that fades in reads as lag to a keyboard user. */
    transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-card__title a:hover,
.service-card__title a:focus-visible {
    color: var(--primary-color);
}

.service-card__title a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Keep the button on the baseline of every card regardless of title length. */
.service-card__button {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    padding: 8px 18px;
}

.service-card__button svg {
    width: 18px;
    height: 18px;
}
/* Autoflex appointment planner — /afspraak-maken.

   The oa-widget renders into a shadow root, which normally keeps page CSS out
   entirely. This widget is the exception: it links the host page's stylesheets
   inside its own shadow root — main.css and theme-overrides.css among them —
   so the rules below land in there. That is also why the planner already draws
   in ITC Avant Garde Gothic with navy headings without anyone having styled
   it, and why a change to a shared selector elsewhere in the theme can reach
   inside this widget without anyone intending it.

   The fc-* names are FullCalendar's and exist nowhere else on this site, which
   is what keeps these rules from leaking the other way.

   Only what actually clashed is touched, measured against the live site rather
   than guessed at.

   This is third-party markup, so it carries update risk: an Autoflex release
   that renames these classes, or drops the custom properties, puts the mint
   green back. */

/* Buttons go through FullCalendar's own custom properties rather than a
   background-color override, which loses to the widget's own rule. Mapped onto
   .button.is-blue: navy, turning brand green on hover and while active.
   The segmented radius is left as FullCalendar sets it — prev and next sit in
   a joined pair, and the theme's 30px pill would break the group. */
.fc {
    --fc-button-bg-color: var(--secondary-color);
    --fc-button-border-color: var(--secondary-color);
    --fc-button-hover-bg-color: var(--primary-color);
    --fc-button-hover-border-color: var(--primary-color);
    --fc-button-active-bg-color: var(--primary-color);
    --fc-button-active-border-color: var(--primary-color);

    /* Grid lines arrived as FullCalendar's default #ddd, a grey belonging to
       no palette here. This drives `.fc-theme-standard td, .fc-theme-standard
       th { border: 1px solid var(--fc-border-color) }` — FullCalendar's own
       rule — so the cells take the brand navy without an override that would
       have to out-order the widget's stylesheet. It also carries the
       scrollgrid's outer border, which keeps the table edge consistent with
       the cells inside it. */
    --fc-border-color: var(--secondary-color);
}

/* Day numbers arrived as a generic link blue (#0270E0) that belongs to no
   palette used here. */
.fc .fc-daygrid-day-number {
    color: var(--secondary-color);
}

/* The weekday row sits on a navy header bar, so its labels stay white. Giving
   these the brand navy as well put navy text on a navy bar — legible in the
   measurements, invisible on screen. */
.fc .fc-col-header-cell-cushion {
    color: #fff;
}

/* The week numbers shipped as grey text on a translucent grey chip with a
   stray 0 0 3px radius — closer to an unstyled leftover than a label, and on
   the disabled and green rows they all but disappeared.

   Made into a navy pill: the same 30px radius as the theme's buttons, and the
   same navy as the calendar's own header bar, so the column of badges reads
   as part of the grid rather than as debris in the corner of each row. Dropped
   to 12px because at the inherited 16px it competed with the day numbers. */
.fc .fc-daygrid-week-number {
    background-color: var(--secondary-color);
    color: #fff;
    border-radius: 30px;
    /* Top-heavy on purpose: the typeface sits low in its line box, so equal
       padding leaves the label looking dropped inside the pill. */
    padding: 5px 11px 3px;
    font-size: 12px;
    line-height: 1.5;

    /* FullCalendar positions this absolutely in the cell's top-left corner, so
       it sat on the two border lines. Inset rather than margin — margin is
       ignored here because the element is pinned by top/left. */
    top: 5px;
    left: 5px;
}

/* ---------------------------------------------------------------------------
   The booking form below the calendar.

   Everything here is scoped with :host, which matches only inside a shadow
   root and therefore nothing at all in the ordinary page. That matters for the
   two buttons: the widget gives them the class names "red" and "green", which
   are far too generic to style unscoped from a site-wide stylesheet.

   !important throughout, and specificity genuinely cannot solve it: the
   widget's own rules are loaded after ours inside the shadow root, so an
   equal-or-higher-specificity selector still loses on order. Confirmed by
   deploying the same rules without it, where nothing moved.
   --------------------------------------------------------------------------- */

/* Field labels ("Voornaam", "Werkzaamheden", "Kenteken") are h2 elements here,
   and arrived pure black at 17.6px/700 — heavier than any label on the site.
   Matched to the contact form's labels: 16px, weight 500, in the brand navy. */
:host h2 {
    color: var(--secondary-color) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* Fields matched to the form on /contact, which is the site's current form
   styling: 1px #E9E9E9, 5px radius, 15px padding, 16px, #212D3A.

   Note for anyone comparing: /diensten/pechhulp looks different — 2px #D1D6DC,
   3px radius, 14px — because it is a legacy v2 HubSpot form while /contact
   renders the newer v4 embed. The v4 one is the reference used here. Taking
   the measurement off the legacy form first is what made an earlier pass at
   this look wrong.

   input:not([type]) is in the list on purpose: the kenteken field carries no
   type attribute at all, so input[type="text"] silently skips it and it was
   the one field still rendering with no border.

   height: auto undoes the widget's own input[type=text] { height: 35px },
   which otherwise holds every field at 35px and squeezes the 15px padding.
   With it the fields come out at 50px, the same as the contact form.

   Measuring this is a trap: the widget sets transition-property: border-color
   with a 0.4s duration, so reading getComputedStyle straight after a change
   returns the OLD colour and the rule looks like it did nothing. Let the
   transition settle before measuring. */
:host input[type="text"],
:host input[type="email"],
:host input[type="tel"],
:host input[type="number"],
:host input:not([type]),
:host textarea,
:host select {
    background-color: #fff !important;
    border: 1px solid #E9E9E9 !important;
    border-radius: 5px !important;
    padding: 15px !important;
    height: auto !important;
    font-size: 16px !important;
    color: #212D3A !important;
}

/* The Werkzaamheden checkboxes ship one per row, so 19 short labels ran down
   the left edge and left most of the width empty.

   #flatrate_ids is the widget's own id for that group and holds only those 19.
   The single Prijsopgave checkbox sits outside it, and the Vervoer and Prive of
   zakelijk radios are in unnamed divs, so none of them are caught by this.

   auto-fill rather than a fixed column count or media queries: it collapses to
   one column on a phone and opens up to four at 1440 on its own. The 225px
   minimum is measured, not picked — the longest label ("Seizoenswissel losse
   banden") renders at 214px, and a narrower track makes it wrap. Checked at
   390, 768 and 1440: no wrapping and no horizontal overflow at any of them.

   !important only on display, for the load-order reason above; nothing else
   here has a competing declaration. */
:host #flatrate_ids {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    column-gap: 16px;
}

/* The nine text fields (Kenteken through Plaats) ran one per row down the
   left half of the form. Two columns from tablet up; one column on a phone,
   where half a 328px container is too narrow for the multi-input blocks.

   #moreDetails is the form's field container. Its 16 children are all
   div#infoText — the widget repeats the same id, so there is no class or id
   that distinguishes a field block from the Werkzaamheden checkboxes, the
   radio groups or the button row.

   So they are selected by what they contain, not by position: a block holding
   an input that is neither a checkbox nor a radio is a text field. nth-child
   would do it too, but it would silently re-flow the whole form the first time
   Autoflex adds or reorders a field, and :has() cannot. Everything else keeps
   grid-column: 1 / -1 and stays full width, including the buttons.

   :has() is already relied on in _breadcrumbs.css, so this adds no new
   browser requirement. Checked at 390, 768 and 1440: the nine intended blocks
   and no others, no input escaping its block, no horizontal overflow. */
/* The kenteken field was 145px wide and indented 38px from its own label,
   so it lined up with nothing. Both come from the widget's licence-plate
   styling: a 145px input inside a 200px span padded 38px on the left to clear
   the blue EU strip of a plate graphic. That graphic never renders here — the
   span's ::before and ::after are both content: none — so the padding reserves
   space for nothing. Full width, no padding, and it lines up with Voornaam.

   Note when re-measuring: the widget puts transition: all .2s on this input,
   so a width read straight after a change returns the old 145px. */
:host .license-plate-custom {
    width: 100% !important;
    padding: 0 !important;
}

:host .license-plate-custom input {
    width: 100% !important;
}

/* Tussenvoegsel / achternaam and Postcode / huisnr / toevoeging put two and
   three inputs on one line with their edges touching. Their container is
   div#group — another id the widget repeats — at display: block.

   Flex with a gap rather than widths cut by hand: the inputs carry percentage
   widths summing to exactly 100%, and flex-shrink then absorbs the gap while
   keeping their 50/25/25 proportions. min-width: 0 is needed or an input
   refuses to shrink below its intrinsic width and the row overflows. */
:host #group {
    display: flex !important;
    gap: 12px;
}

:host #group > input {
    min-width: 0;
}

/* Six columns rather than two, so the form can hold both halves (a text field,
   span 3) and thirds (the three option groups, span 2) in the same grid.
   Everything else spans the full six. */
@media (min-width: 768px) {
    :host #moreDetails {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        column-gap: 24px;
        align-items: start;
    }

    :host #moreDetails > * {
        grid-column: span 6;
    }

    /* A spacer div sits between Vervoer and Prive of zakelijk holding nothing
       but comment nodes. At full span it took a grid row of its own and pushed
       Prive onto the next line, so the three groups could never share a row.
       CSS :empty ignores comments, which is what makes it selectable. */
    :host #moreDetails > div:empty {
        display: none;
    }

    :host #moreDetails > div:has(input:not([type="checkbox"]):not([type="radio"])) {
        grid-column: span 3;
    }

    /* Prijsopgave, Vervoer and Prive of zakelijk in one row of thirds. Keyed on
       the widget's ids for the groups themselves (#offer, #veh_repl,
       #vehicle_lease) since the blocks that wrap them are indistinguishable. */
    :host #moreDetails > div:has(#offer),
    :host #moreDetails > div:has(#veh_repl),
    :host #moreDetails > div:has(#vehicle_lease) {
        grid-column: span 2;
    }
}

/* Reset and Versturen shipped as Bootstrap danger red and success green.
   Mapped onto the theme's own pair: the primary action takes the filled navy
   button, the secondary one the white button with a navy outline — the same
   shapes as Accepteren and Weigeren in the cookie banner. */
:host .green,
:host .red {
    border-radius: 30px !important;
    padding: 12px 40px 14px !important;
    font-weight: 500 !important;
    transition: background-color .25s, color .25s, border-color .25s;
}

:host .green {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
    color: #fff !important;
}

:host .green:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

:host .red {
    background-color: #fff !important;
    border: 1px solid var(--secondary-color) !important;
    color: var(--secondary-color) !important;
}

:host .red:hover {
    background-color: var(--secondary-color) !important;
    color: #fff !important;
}
:root {
    /* HubSpot's form stylesheet reads
       font-family: var(--hsf-global__font-family, Helvetica)
       on .hsfc-Form, and .hsfc-TextInput chains to the same variable. Nothing
       set it, so every field, the textarea and the submit button fell back to
       Helvetica while the labels and intro text inherited the site face from
       the page — the form did not even match itself.

       Set as a value rather than through an override: the variable is the
       documented hook, so no !important and no specificity fight. Not
       `inherit` either, tempting as it looks — a CSS-wide keyword does not
       survive var() substitution, and measured on the page it leaves the
       controls in Helvetica.

       Repeats the family rather than reading a token because the theme has no
       font custom property; it is hardcoded in theme-overrides.css too. If the
       font ever changes in theme settings, this line changes with it. */
    --hsf-global__font-family: "ITC Avant Garde Gothic", sans-serif;

    --hsf-background__padding: 0;
    --hsf-button__border-radius: 30px;
    --hsf-button__padding: 10px 25px 10px;
    --hsf-row__vertical-spacing: 15px;
    --hsf-field-input__background-color: #FFFFFF;
    --hsf-field-input__border-color: #E9E9E9;
    --hsf-field-input__border-radius: 5px;
    --hsf-field-input__padding: 15px 15px;
}

[data-hsfc-id=Renderer] .hsfc-RichText p {
    margin-bottom: 20px;
}

[data-hsfc-id=Renderer] .hsfc-TextareaInput {
    height: 258px;
}

/* ==========================================================================
   File upload fields

   HubSpot's --hsf-* custom properties theme the text inputs but not
   input[type=file], which the browser renders natively — hence the raw
   "Choose file / No file chosen" control sitting among styled fields.

   Styled on the native input rather than a HubSpot wrapper class, so this holds
   whichever form editor produced the markup. Quermo solved the same problem on
   .hs-fieldtype-file, which is the legacy editor's class and does not exist here.

   The button's label text is set by the browser and cannot be changed in CSS —
   a Dutch-locale browser shows "Bestand kiezen", an English one "Choose file".
   ========================================================================== */

[data-hsfc-id=Renderer] input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--hsf-field-input__border-color, #E9E9E9);
    border-radius: var(--hsf-field-input__border-radius, 5px);
    background: var(--hsf-field-input__background-color, #FFFFFF);
    color: var(--secondary-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

[data-hsfc-id=Renderer] input[type="file"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ::file-selector-button is the standard; the -webkit- form covers Safari
   before 14.1. They cannot be combined in one rule — an unknown pseudo-element
   invalidates the whole selector list — so the declarations are repeated. */
[data-hsfc-id=Renderer] input[type="file"]::file-selector-button {
    margin: 0 14px 0 0;
    padding: 8px 20px;
    border: 0;
    border-radius: var(--hsf-button__border-radius, 30px);
    background: var(--secondary-color);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

[data-hsfc-id=Renderer] input[type="file"]::-webkit-file-upload-button {
    margin: 0 14px 0 0;
    padding: 8px 20px;
    border: 0;
    border-radius: var(--hsf-button__border-radius, 30px);
    background: var(--secondary-color);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

[data-hsfc-id=Renderer] input[type="file"]:hover::file-selector-button {
    background: var(--primary-color);
}

[data-hsfc-id=Renderer] input[type="file"]:hover::-webkit-file-upload-button {
    background: var(--primary-color);
}
.sticky-icons {
    position: absolute;
    right: 0;
    top: 200px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 1439px) {
    .sticky-icons {
        top: 180px;
    }
}

.sticky-icons li {
    margin: 0;
    justify-content: flex-end;
    padding: 0;
    text-align: right;
}

.sticky-icons li img {
    width: 60px;
    height: auto;
}

@media (max-width: 1439px) {
    .sticky-icons li img {
        width: 40px;
    }
}

@media (max-width: 991px) {
    .sticky-icons {
        display: none;
    }
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}
/* Skip link — hidden until focused, then pinned to the top-left above the fixed
   header. Uses clip-path rather than display:none, which would take it out of
   the tab order and defeat the purpose. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--secondary-color);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-bottom-right-radius: 10px;
  transform: translateY(-100%);
  transition: transform 0.2s;
}

.skip-link:focus {
  color: #ffffff;
  transform: translateY(0);
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* Section */
.highlights > .row-fluid > .widget-span {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 768px) {
    .highlights > .row-fluid > .widget-span:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -15px;
        top: 0;
        height: 100%;
        width: 1px;
        border-right: 1px solid rgba(0, 45, 89, 0.2);
    }
}

@media (max-width: 767px) {
    .highlights > .row-fluid > .widget-span:not(:last-child) {
        border-bottom: 1px solid rgba(0, 45, 89, 0.2);
        margin-bottom: 60px;
        padding-bottom: 40px;
    }
}

/** Gearbox **/
:root {
    /** Default */
    --c-fg-default: #2d2d2d;
    --c-bg-default: #f5f5f5;

    /** Block */
    --c-fg-block: #2d2d2d;
    --c-bg-block: #ebebeb;

    /** Accent */
    --c-fg-accent: #ffffff;
    --c-bg-accent: #385921;

    /** Action */
    --c-fg-action: #385921;
    --c-bg-action: #85d54f;

    /** Input */
    --c-fg-input: #2d2d2d;
    --c-bg-input: #ffffff;

    /** Element Settings */
    --c-page-foreground: var(--c-fg-default);
    --c-page-background: var(--c-bg-default);

    /** Forms */
    --checkbox-style: cadar-default;
    --c-forms-input-label-foreground: var(--c-fg-default);
    --c-forms-input-label-background: transparent;
    --c-forms-input-checkbox-box-background: var(--c-bg-default);
    --c-forms-input-checkbox-box-border: var(--c-bg-input);
    --c-forms-input-checkbox-box-hover-border: var(--c-bg-accent);
    --c-forms-input-checkbox-checked-box-background: var(--c-bg-default);
    --c-forms-input-checkbox-checked-box-border: var(--c-bg-input);
    --c-forms-input-checkbox-checked-box-hover-border: var(--c-bg-accent);
    --d-forms-input-checkbox-box-radius: 5px;
    --c-forms-input-checkbox-tick: var(--c-bg-accent);

    --d-forms-input-select-radius: 5px;
    --c-forms-input-select-border: var(--c-bg-input);
    --c-forms-input-select-hover-border: var(--c-bg-accent);
    --c-forms-input-select-foreground: var(--c-fg-input);
    --c-forms-input-select-background: var(--c-bg-input);
    --c-forms-input-select-hover-foreground: var(--c-fg-input);
    --c-forms-input-select-hover-background: var(--c-bg-input);

    --d-forms-input-button-radius: 5px;
    --c-forms-input-button-foreground: var(--c-fg-action);
    --c-forms-input-button-background: var(--c-bg-action);
    --c-forms-input-button-border: var(--c-bg-action);
    --c-forms-input-button-hover-foreground: var(--c-fg-accent);
    /* Lighten($c-bg-accent, 20%) */
    --c-forms-input-button-hover-background: #629f3b;
    --c-forms-input-button-hover-border: #629f3b;

    --d-forms-input-text-radius: 5px;
    --c-forms-input-text-foreground: var(--c-fg-input);
    --c-forms-input-text-background: var(--c-bg-input);
    --c-forms-input-text-hover-foreground: var(--c-fg-input);
    --c-forms-input-text-hover-background: var(--c-bg-input);
    --c-forms-input-text-placeholder: #999999; /* Lighten(#000, 40%) */

    --c-forms-slider-text-foreground: #555555; /* Lighten(#2d2d2d, 20%) */
    --c-forms-slider-text-background: transparent;
    --c-forms-slider-bar: var(--c-bg-block);
    --c-forms-slider-bar-active: var(--c-bg-accent);
    --c-forms-slider-handle-inner: var(--c-bg-accent);
    --c-forms-slider-handle-outer: #ffffff;
    --c-forms-slider-border: #d9d9d9; /* Lighten(#000, 85%) */
    --c-forms-slider-handle-shadow: #e6e6e6; /* Lighten(#000, 90%) */

    /** Layout */
    --offer-style: simple;
    --offer-image-placeholder-height: 66.66666%;
    --button-style: solid;
    --offer-decoration-target: content;
    --base-z-index: 100;

    /** Spacing */
    --d-spacing-xxl: 40px;
    --d-spacing-xl: 30px;
    --d-spacing-lg: 20px;
    --d-spacing-md: 15px;
    --d-spacing-sm: 10px;
    --d-spacing-xs: 5px;

    /** Typography */
    --s-font-xxl: 28px;
    --s-font-xl: 20px;
    --s-font-lg: 18px;
    --s-font-md: 15px;
    --s-font-sm: 13px;

    /** Dimensions */
    --d-page-width: 1200px;
    --d-offer-width: 33%;

    /** Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 544px;
    --breakpoint-md: 758px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1920px;

    /** Borders */
    --d-border-radius: 5px;
    --d-border-radius-btn: 5px;
    --d-border-lg: 4px;
    --d-border-md: 2px;
    --d-border-sm: 1px;

    /** Misc */
    --print-font-family: sans-serif;
}
.offer-details__inner {
    display: flex;
    gap: 40px;
    min-height: 600px;
    margin-top: -300px;
    position: relative;
    z-index: 10;
}

@media (max-width: 1199px) {
    .offer-details__inner {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .offer-details__inner {
        margin-top: -200px;
    }
}

.offer-details__main {
    width: 60%;
}

@media (max-width: 1199px) {
    .offer-details__main {
        width: 100%
    }
}

.offer-details__sidebar {
    width: 40%;
    margin-bottom: 35px;
}

@media (max-width: 1199px) {
    .offer-details__sidebar {
        width: 100%
    }
}

/* Car name and edition over the hero image. Shown wherever the layout stacks —
   1199px is where the sidebar drops below the main column, so from there down
   the name and price are several screens away and the visitor swipes the
   gallery with no idea which car is on screen. Hidden from assistive tech in
   the template: the sidebar keeps the single h1. */
.offer-details__mobile-title {
    display: none;
}

@media (max-width: 1199px) {
    .offer-details__mobile-title {
        display: block;
        margin-bottom: 20px;
        /* Sits on the dark hero photo, which the layout is pulled up over. */
        color: #fff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    .offer-details__mobile-title-name {
        display: block;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.15;
    }

    .offer-details__mobile-title-edition {
        display: block;
        margin-top: 6px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
    }
}

/** Back to overview button **/
.offer-details__back-to-overview-btn {
    margin-bottom: 28px;
    /* inline-flex so the hit area and the focus ring wrap the label rather than
       stretching the full width of the column. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    /* The link sits on the hero photo, which is light in places. */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* The theme's global `a:hover, a:focus` sets #0048b8, and at 0,1,1 it outranks
   the 0,1,0 class rule above — so the link turned dark blue on the dark photo
   the moment it was touched or focused. On a phone a tap leaves it in that
   state, so it simply reads as unreadable. Two classes to win the specificity
   back rather than reaching for !important. */
.offer-details__back-to-overview-btn:hover,
.offer-details__back-to-overview-btn:focus,
.offer-details__back-to-overview-btn:focus-visible {
    color: #ffffff;
}

.offer-details__back-to-overview-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
}

/** Gallery **/
.offer-details__gallery {
    margin-bottom: 40px;
}

.offer-details__gallery-frame {
    margin-bottom: 14px;
    position: relative;
}

.offer-details__gallery-image img {
    display: block;
    /*height: 560px;*/
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.offer-details__gallery-frame .swiper-button-next,
.offer-details__gallery-frame .swiper-button-prev {
    height: 85px;
    width: 45px;
}

.offer-details__gallery-frame .swiper-pagination.swiper-pagination-fraction {
    color: #ffffff;
    background: #000;
    padding: 4px 10px;
    bottom: 20px;
    width: 75px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 12px;
}

.offer-details__gallery-frame .swiper-button-next,
.offer-details__gallery-frame .swiper-rtl .swiper-button-prev {
    right: 0;
    border-radius: 10px 0 0 10px;
    background: rgba(5, 45, 94, 0.90);
    padding: 30px 10px;
}

.offer-details__gallery-frame .swiper-button-prev,
.offer-details__gallery-frame .swiper-rtl .swiper-button-next {
    left: 0;
    border-radius: 0 10px 10px 0;
    background: rgba(5, 45, 94, 0.90);
    padding: 30px 10px;
}

.offer-details__gallery-frame .swiper-button-prev:after,
.offer-details__gallery-frame .swiper-rtl .swiper-button-next:after,
.offer-details__gallery-frame .swiper-button-next:after,
.offer-details__gallery-frame .swiper-rtl .swiper-button-prev:after {
    display: none;
}

.offer-details__zoom-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 10px;
    background: rgba(5, 45, 94, 0.80);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: none;
}

.offer-details__gallery-thumbnails .swiper-slide {
    width: 110px;
}

.offer-details__gallery-thumbnail img {
    width: 110px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

/** Offer box **/
.offer-details__box {
    margin-bottom: 25px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    min-height: 100px;
    overflow: hidden;
}

.offer-details__box-section {
    padding: 20px;
}

.offer-details__box-section.has-top-contact-details {
    background: var(--secondary-color);
    color: #ffffff;
}

.offer-details__box-section.has-top-contact-details a {
    color: #ffffff !important;
}

/* The address under the phone numbers in the top contact box. Block, so it
   starts on its own line rather than running on after "06 830 28 139", and
   underlined so it reads as the route link it is — the phone numbers beside it
   are links too, and an address that looked like plain text would not invite
   the tap. Colour comes from the rule above. */
.offer-details__contacts-address {
    display: block;
    margin-top: 8px;
    text-decoration: underline;
}

.offer-details__tabs {
    margin-bottom: 45px;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-pagination-bullet-border-radius: 10px 10px 0 0;
    --swiper-pagination-color: #ffffff;
    --swiper-pagination-bullet-inactive-color: #E9E9E9;
}

.offer-details__tabs .swiper-pagination {
    position: static;
    text-align: left;
    display: flex;
    gap: 6px;
}

.offer-details__tabs .swiper-pagination-bullet {
    display: flex;
    align-items: center;
    padding: 8px 70px 3px 25px;
    border: 1px solid #E9E9E9;
    border-bottom: 0;
    width: auto;
    height: 40px;
    text-align: center;
    opacity: 1;
    font-size: 14px;
    font-weight: 700;
}

.offer-details__tabs .swiper-slide {
    height: auto;
}

.offer-details__tabs .swiper:not(.swiper-initialized) .swiper-wrapper {
    flex-direction: column;
}

.offer-details__tabs .swiper:not(.swiper-initialized) .offer_details__tab:not(.is-first) {
   display: none;
}

@media (min-width: 768px) {
    .offer-details__tabs .offer_details__tab {
        display: block !important;
    }
}

.offer-details__tabs .swiper:not(.swiper-initialized) .swiper-slide {
    margin-bottom: 25px;
}

.offer-details__tabs .offer_details__tab-toggle-on-mobile {
    display: none;
}

.offer-details__tabs .swiper:not(.swiper-initialized) .offer_details__tab-toggle-on-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 15px 15px;
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(28, 63, 127, 0.10);
}

.offer_details__tab-toggle-on-mobile .icon {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5px;
    border-radius: 5px;
    background: #E9E9E9;
    border: none;
    height: 25px;
    width: 25px;
}

.offer_details__tab-toggle-on-mobile .icon svg {
    width: 10px;
    height: 10px;
}

.offer_details__tab-toggle-on-mobile .icon svg path {
    fill: var(--secondary-color);
}

.offer_details__tab-toggle-on-mobile.is-collapsed .icon svg {
    transform: rotate(180deg);
}

.offer-details__tabs .swiper:not(.swiper-initialized) .offer_details__tab {
    border-radius: 0 0 10px 10px;
    opacity: 1;
    height: auto;
}

.offer_details__tab {
    background: #ffffff;
    border-radius: 0 10px 10px 10px;
    padding: 30px 24px;
    border: 1px solid rgba(28, 63, 127, 0.10);
    opacity: 0;
    height: 0;
}

.offer-details__tabs .swiper .swiper-slide.swiper-slide-active .offer_details__tab {
    opacity: 1;
    height: auto;
}

.offer_details__tab table {
    border: none;
    width: 100%;
    margin-bottom: 0;
}

.offer_details__tab table th,
.offer_details__tab table td {
    border: none;
    border-bottom: 1px solid rgba(28, 63, 127, 0.10);
    padding: 10px 20px 10px 0;
    font-size: 14px;
    font-weight: 500;
    width: 65%;
}

.offer_details__tab table th:first-child,
.offer_details__tab table td:first-child {
    width: 35%;
}

.offer_details__tab table tr:last-child th,
.offer_details__tab table tr:last-child td {
    border-bottom: none;
}

.offer-details__contacts {
    display: flex;
    gap: 15px;
    align-items: center;
}

.offer-details__contacts figure {
    margin: 0;
}

.offer-details__contacts figure img {
    display: block;
}

.offer-details__info {
    background: #ffffff;
}

.offer-details__info-title {
    color: var(--secondary-color);
    font-size: 40px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 15px;
    margin-top: 15px;
}

@media (max-width: 1199px) {
    .offer-details__info-title {
        font-size: 35px;
        line-height: 35px;
    }
}

.offer-details__info-edition {
    font-weight: 700;
    margin-bottom: 25px;
}

.offer-details__price {
    margin-bottom: 10px;
}

.offer-details__price strong {
    font-size: 28px;
    font-weight: 600;
    padding-right: 10px;
}

.offer-details__price small {
    font-size: 14px;
    font-weight: 500;
}

.offer-details__button {
    margin-bottom: 25px;
}

.offer-details__packages-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}

.offer-details__package input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.offer-details__package label {
    position: relative;
    display: flex;
    margin-bottom: 0;
    gap: 35px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px 12px 50px;
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    background: #FFF;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.offer-details__package label::before {
    content: url("https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/package-radio.svg");
    position: absolute;
    left: 15px;
    top: 17px;
}

.offer-details__package input:checked ~ label {
    background: var(--secondary-color);
    color: #ffffff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    border-radius: 10px 10px 0 0;
    border-color: var(--secondary-color);
}

.offer-details__package input:checked ~ label::before {
    content: url("https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/package-radio-active.svg");
}

.offer-details__package label strong {
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 1199px) {
    .offer-details__package label strong {
        font-size: 18px;
    }
}

.offer-details__package label span {
    font-size: 16px;
    line-height: 30px;
    font-weight: 500;
}

.offer-details__package-wrapper {
    margin-bottom: 15px;
}

.offer-details__package-wrapper:has(input:checked) .offer-details__package-details  {
    display: block;
}

.offer-details__package-details {
    border-radius: 10px;
    display: none;
    border: 1px solid #E9E9E9;
    padding-bottom: 15px;
    padding-top: 25px;
    margin-top: -12px;
    background-image: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/BOVAG-logo.jpg');
    background-position: bottom 12px right 12px;
    background-repeat: no-repeat;
    background-size: 50px auto;
}

.offer-details__package-details ul {
    list-style: none;
    padding-left: 20px;
    margin-left: 0;
    margin-bottom: 0;
}

.offer-details__package-details ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 6px;
}

.offer-details__package-details ul li::before {
    content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/delivery-package-listing-bullet.svg');
    position: absolute;
    top: 2px;
    left: 0;
}

.offer-details__description {
    margin-bottom: 65px;
    margin-top: 65px;
}

@media (max-width: 1199px) {
    .offer-details__description {
        margin-bottom: 25px;
        margin-top: 25px;
    }
}

.offer-details__contacts.full-card .offer-details__contacts-avatar {
    width: 92px;
}

.offer-details__contacts.full-card .offer-details__contacts-avatar img {
    width: 92px;
    height: auto;
}

.offer-details__contacts.full-card {
    gap: 25px;
    align-items: flex-start;
}

.offer-details__contacts.full-card h3 {
    margin-bottom: 10px;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
}

.offer-details__contacts.full-card span {
    font-size: 14px;
}

.offer-details__box-heading {
    margin-bottom: 15px;
    padding-left: 15px;
}

.hs-modal-form {
    border-radius: 10px;
}

.gb-license-plate {
    display: flex;
    flex-flow: row nowrap;
    height: 60px;
    background-color: #fc0
}

.gb-license-plate__country {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: center;
    background: #4e92df;
    padding: 0 10px;
    width: 70px;
    text-align: center
}

.gb-license-plate__country-icon {
    margin-top: 5px;
    background-image: url("https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/eu-license-plate.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 32px;
    height: 40px;
    text-align: center
}

.gb-license-plate__country-code {
    flex-grow: 1;
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

.gb-license-plate__title, input[type=text].gb-license-plate__title {
    color: #000;
    background-color: #fc0;
    margin-bottom: 0;
    min-width: 0;
    font-size: 15px;
    padding: 0 20px;
    line-height: 60px;
    border: none;
    outline: none;
    width: 100%;
}

.gb-license-plate__title::-webkit-input-placeholder, input[type=text].gb-license-plate__title::-webkit-input-placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate__title::-moz-placeholder, input[type=text].gb-license-plate__title::-moz-placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate__title::-ms-input-placeholder, input[type=text].gb-license-plate__title::-ms-input-placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate__title::placeholder, input[type=text].gb-license-plate__title::placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate .gb-form__field {
    width: 100%
}

input[type=text].gb-license-plate__title {
    height: 100%;
    font-weight: 700
}

input[type=text].gb-license-plate__title:active, input[type=text].gb-license-plate__title:focus, input[type=text].gb-license-plate__title:hover {
    color: #000;
    background-color: #fc0
}

.offer-details__request-form {
    width: 520px;
}

@media (max-width: 767px) {
    .offer-details__request-form {
        width: 270px;
    }
}

.fancybox__slide .f-button[data-fancybox-close] {
    margin-top: -10px;
    margin-right: -10px;
}

.offer-details__accessories-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
}

.offer-details__accessories-list li {
    padding: 6px 12px;
    border-radius: 5px;
    background: rgb(233, 233, 233);
    font-size: 14px;
    margin: 0;
}

#calculator {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

/* ==========================================================================
   Sticky enquiry bar — phones only

   The price and the enquiry button live in the sidebar, which stacks below the
   gallery, the spec tabs and the dealership copy on a phone. This keeps both
   within reach without moving anything, so the desktop layout is untouched.
   ========================================================================== */

.offer-sticky {
    display: none;
}

@media (max-width: 767px) {
    .offer-sticky {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Above the header's 1000 would cover the mobile menu when it opens;
           50 is the floating WhatsApp button, which this sits above. */
        z-index: 60;
        padding: 10px 16px;
        /* Keeps the bar clear of the home indicator on iOS. */
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        background: var(--secondary-color);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
    }

    .offer-sticky__info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .offer-sticky__price {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Filled by AutoGeld once its script runs, so it is empty on first paint —
       no min-height, or the bar would carry a blank gap on a page where the
       calculator fails to load. */
    .offer-sticky__monthly {
        color: rgba(255, 255, 255, 0.75);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
    }

    .offer-sticky__monthly:empty {
        display: none;
    }

    .offer-sticky__actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
    }

    .offer-sticky__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 44px is the minimum comfortable touch target. */
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 50%;
        background: var(--primary-color);
        transition: background-color 0.2s ease;
    }

    .offer-sticky__btn:hover,
    .offer-sticky__btn:focus-visible {
        background: #559626;
    }

    .offer-sticky__btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    /* The icon tag wraps its SVG in an hs_cos_wrapper span, which is inline and
       leaves the glyph sitting off-centre in the button. */
    .offer-sticky__btn .hs_cos_wrapper_type_icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .offer-sticky__btn svg {
        width: 20px;
        height: 20px;
        fill: #fff;
    }

    /* Clears the bar so the last block on the page is not covered. */
    .offer-details {
        padding-bottom: 80px;
    }

    /* The bar carries WhatsApp itself, so the floating button is both redundant
       and directly underneath it. Flagged on the root element by detail.html. */
    .has-offer-sticky .whatsapp-button {
        display: none;
    }

    /* The HubSpot chat launcher is also pinned bottom-right and lands on the
       bar. Unlike the WhatsApp button it is a real support channel, so it is
       lifted clear rather than hidden. 70px is the bar's own height (44px
       button plus 10px padding either side) with a little room to spare.

       !important because the widget positions itself from its own stylesheet,
       and .has-offer-sticky keeps this to vehicle detail pages — everywhere
       else the launcher stays where it belongs. */
    .has-offer-sticky #hubspot-messages-iframe-container.widget-align-right {
        bottom: 70px !important;
    }
}
.gb-filter__group .gb-filter-slider {
    margin: var(--d-spacing-sm) auto 0;
    width: 95%;
}

.gb-filter__group .gb-slider-result {
    display: block;
    margin-top: var(--d-spacing-lg);
    color: var(--c-forms-slider-text-foreground);
    text-align: right;
}

.gb-filter__group .noUi-target {
    border-radius: 10px;
    background: var(--c-forms-slider-bar);
}

.gb-filter__group .noUi-connect {
    border-radius: 4px;
    background-color: var(--c-forms-slider-bar-active);
}

.gb-filter__group .noUi-handle {
    border: 1px solid var(--c-forms-slider-border);
    border-radius: 50%;
    background: var(--c-forms-slider-handle-outer);
    box-shadow: 0 0 7px 0 var(--c-forms-slider-handle-shadow);
    cursor: pointer;
}

.gb-filter__group .noUi-handle::before {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-forms-slider-handle-inner);
}

.gb-filter__group .noUi-handle::after {
    display: none;
}

.gb-filter__group .noUi-state-tap .noUi-connect,
.gb-filter__group .noUi-state-tap .noUi-origin {
    transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}

.gb-filter__group .noUi-state-drag * {
    cursor: inherit !important;
}

.gb-filter__group .noUi-horizontal {
    height: 7px;
}

.gb-filter__group .noUi-horizontal .noUi-handle {
    top: -8px;
    right: -10px;
    width: 20px;
    height: 20px;
}

.gb-filter__group .noUi-draggable {
    cursor: ew-resize;
}

/* Disabled state */
.gb-filter__group [disabled] .noUi-connect {
    background: #b8b8b8;
}

.gb-filter__group [disabled] .noUi-handle,
.gb-filter__group [disabled].noUi-handle,
.gb-filter__group [disabled].noUi-target {
    cursor: not-allowed;
}
.pagination__list {
    list-style: none;
    margin: 45px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination__list a {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    padding: 5px 20px;
    color: var(--secondary-color);
}

.pagination__list a.is-active {
    color: #ffffff;
}

.pagination__list a.is-active {
    background: var(--secondary-color);
    border-radius: 18px;
}
.offers-overview__sorting {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.offers-overview__sorting select {
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    width: 210px;
}
.filters__reset-button {
    margin-bottom: 25px;
    display: block;
    padding: 14px 16px;
    border-radius: 5px;
    background: #E9E9E9 !important;
    border: none;
    color: #FFF !important;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    cursor: not-allowed;
}

.filters__reset-button:not([disabled]) {
    background: var(--secondary-color) !important;
    transition: opacity 0.25s;
    cursor: pointer;
}

.filters__reset-button:not([disabled]):hover {
    opacity: 0.9;
}

.gb-filter__group {
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    margin-bottom: 15px;
}

.gb-filter__group-header {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    cursor: pointer;
}

.gb-filter__group-collapse-btn {
    padding: 5px;
    border-radius: 5px;
    background: #E9E9E9;
    border: none;
    height: 25px;
    width: 25px;
}

.gb-filter__group.is-collapsed .gb-filter__group-collapse-btn svg {
    transform: rotate(180deg);
}

.gb-filter__group-collapse-btn svg {
    width: 10px;
    height: 10px;
}

.gb-filter__group-body {
    padding: 0 15px 10px;
}

.filter__item {
    margin-bottom: 10px;
}

.filter__item-paired {
    display: flex;
    gap: 10px;
}

.filter__item-paired .filter__item {
    width: calc((100% - 10px) / 2);
}

.filter__item--check-box input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.filter__item--check-box label {
    position: relative;
    gap: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.filter__item--check-box label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #002D59;
    background: #ffffff;
}

.filter__item--check-box input:checked ~ label::before {
    background: #002D59;
}

.filter__item--select-box select {
    border-radius: 3px;
    border: 1px solid #002D59;
    cursor: pointer;
}

.gb-filter__sub-group {
    padding-left: 40px;
}

.gb-filter-toggle-on-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 15px;
    padding: 15px 15px;
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .gb-filter-toggle-on-mobile {
        display: none;
    }
}

.gb-filter-toggle-on-mobile.is-collapsed .icon svg {
    transform: rotate(180deg);
}

.gb-filter-toggle-on-mobile .icon {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5px;
    border-radius: 5px;
    background: #E9E9E9;
    border: none;
    height: 25px;
    width: 25px;
}

.gb-filter-toggle-on-mobile .icon svg {
    width: 10px;
    height: 10px;
}

.gb-filter-toggle-on-mobile .icon svg path {
    fill: var(--secondary-color)
}

@media (max-width: 991px) {
    .gb-filter__wrapper {
        display: none;
    }
}

@media (min-width: 992px) {
    .gb-filter__wrapper {
        display: block !important;
    }
}
.offer-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgb(0, 0, 0, 0.15);
    overflow: hidden;
}

.offer-card p {
    margin: 0 0 5px;
}

.offer-card a {
    color: var(--secondary-color);
}

.offer-card p:last-child {
    margin: 0;
}

.offer-card__image-wrapper {
    margin: 0;
}

.offer-card__image {
    width: 100%;
    height: auto;
    display: block;
}

.offer-card__details {
    padding: 20px 30px 20px;
    border-bottom: 1px solid #D4D4D4;
    text-align: center;
    flex-grow: 1;
    height: 100%;
}

.offer-card__title {
    font-size: 22px;
    margin-bottom: 0;
}

.offer-card__overview {
    font-size: 14px;
    color: var(--primary-color)
}

.offer-card__overview span {
    color: var(--secondary-color)
}

.offer-card__price {
    padding: 20px 30px;
    text-align: center;
}

.offer-card__price-full {
    font-size: 22px;
    font-weight: 600;
}

.offer-card__price-full small {
    font-size: 13px;
}

.offer-card__price-lease {
    color: var(--primary-color)
}

.offer-card__price p:first-child {
    margin-bottom: 0;
}

.offer-card__price p:last-of-type {
    margin: 0;
}

.offer-card__cta {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 30px 30px;
}

.offer-card__link {
    display: flex;
    justify-content: center;
}


.offer-card .swiper-pagination-bullet {
    opacity: 1;
    background: #ffffff;
}

.offer-card .swiper-pagination-bullet-active {
    background: var(--primary-color);
}
.offers-overview__page {
    margin-top: 45px;
    margin-bottom: 80px;
}

.offers-overview__main {
    width: calc(100% - (30px + 290px));
}

@media (max-width: 991px) {
    .offers-overview__main {
        width: 100%;
    }
}

.offers-overview__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 15px;
    margin-top: 30px;
}

.offers-overview__list .offer-card {
    width: calc((100% - (15px * 2)) / 3);
}

@media (max-width: 1199px) {
    .offers-overview__list .offer-card {
        width: calc((100% - (15px * 1)) / 2);
    }
}

@media (max-width: 545px) {
    .offers-overview__list .offer-card {
        width: 100%;
    }
}

.offers-overview__list .offer-card__details {
    padding: 10px 15px 10px;
}

.offers-overview__list .offer-card__cta {
    padding-bottom: 20px;
}

.offers-overview__list .offer-card__price {
    padding-top: 10px;
    padding-bottom: 15px;
}

.offers-overview__list .offer-card__price-full {
    font-size: 20px;
}

.offers-overview__inner {
    display: flex;
    gap: 30px;
}

@media (max-width: 991px) {
    .offers-overview__inner {
        flex-wrap: wrap;
        gap: 15px;
    }
}

.offers-overview__inner.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.offers-overview__filter {
    width: 290px;
    will-change: min-height;
}

@media (max-width: 991px) {
    .offers-overview__filter {
        width: 100%;
    }
}

.offers-overview__dream {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding: 40px 30px;
    border-radius: 10px;
    background: rgba(101, 179, 46, 0.1);
    text-align: center;
}

.offers-overview__dream-title {
    margin: 0;
    color: var(--secondary-color);
    font-size: 24px;
    line-height: 34px;
}

@media (max-width: 767px) {
    .offers-overview__dream {
        padding: 30px 20px;
    }

    .offers-overview__dream-title {
        font-size: 20px;
        line-height: 28px;
    }
}

/** Templates **/
.body-container--contact .hs-responsive-embed-wrapper.hs-responsive-embed {
    width: 100% !important;
    max-width: 100% !important;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul {
    padding: 0;
    margin-bottom: 45px;
    list-style: none;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li {
    margin-bottom: 15px;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a:hover {
    text-decoration: underline;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="tel"],
.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="mailto"] {
    position: relative;
    padding-left: 30px;
    color: var(--secondary-color);
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a::before {
    position: absolute;
    left: 0;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="tel"]::before {
    content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/phone-icon--green.svg');
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="mailto"]::before {
    content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/email-icon--green.svg');
}

body [data-hsfc-id=Renderer] .hsfc-RichText p,
body [data-hsfc-id=Renderer] .hsfc-FieldLabel{
  font-family: 'ITC Avant Garde Gothic' !important;
}
.body-container--appointment iframe {
    border: none;
    margin: 45px auto !important;
    max-width: 1240px;
    width: 100%;
}