/* 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 first, and left alone: the
   widget's selects, textareas and text fields already match the site's form
   fields exactly — 2px #D1D6DC, 3px radius, #0F2C56 — and its headings already
   carry the brand navy.

   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);
}

/* 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 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 headings ("Voornaam", "Werkzaamheden", "Kenteken") came through as
   pure black; the rest of the site sets headings in the brand navy. */
:host h2 {
    color: var(--secondary-color) !important;
}

/* Every field in this form already matches the site's own form fields —
   measured at 2px #D1D6DC, 3px radius, #0F2C56 — except the kenteken one,
   which has no border and no background and so reads as loose text rather than
   an input. The optional Adres and Plaats fields look grey only because they
   are disabled; they carry the same border as the rest, so they are left alone.

   Matched on the placeholder because the field carries no id, name or class of
   its own. Narrow, and deliberately so: a blanket rule over every input would
   also restate values that are already correct and would sit on top of the
   disabled fields. If Autoflex changes that placeholder this rule stops
   applying, and the field goes back to looking unstyled rather than breaking. */
:host input[placeholder="00-00-00"] {
    background-color: #fff !important;
    border: 2px solid #D1D6DC !important;
    border-radius: 3px !important;
    color: #0F2C56 !important;
    padding: 12.8px !important;
}

/* 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 {
    --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;
}
.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;
}

.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%;
}