/** Shopify CDN: Minification failed

Line 1687:10 Expected identifier but found whitespace
Line 1687:29 Unexpected ";"

**/
/* ================================================================
   ADN Motoren — Brand Styling Layer
   Phase 1 + 1B: Dark Premium Motorsport Foundation

   HOW TO REVERT: Delete this file and remove the one <link> line
   in layout/theme.liquid. Dawn core files are NOT modified.
   ================================================================ */


/* ----------------------------------------------------------------
   1. ADN Brand Design Tokens
   ---------------------------------------------------------------- */
/* Fallback defaults — overridden by theme.liquid when ADN styling is enabled */
:root {
  --adn-black:        #0f1012;
  --adn-dark-1:       #141518;
  --adn-dark-2:       #17181b;
  --adn-dark-3:       #1c1e22;
  --adn-grey:         #2a2c31;
  --adn-silver:       #a8a8a8;
  --adn-light:        #c0c0c0;
  --adn-white:        #ffffff;
  --adn-red:          #e50914;
  --adn-red-dark:     #b8070f;
  --adn-red-glow:     rgba(229, 9, 20, 0.20);
  --adn-border:       #2a2c31;
  --adn-border-mid:   #353840;
  --adn-glow-size:    16px;
  --adn-card-lift:    -5px;
  --adn-image-scale:  1.08;

  --adn-ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --adn-t-fast:       0.15s var(--adn-ease);
  --adn-t-base:       0.28s var(--adn-ease);
  --adn-t-slow:       0.50s var(--adn-ease);
}


/* ----------------------------------------------------------------
   3. Body & Page Base
   ---------------------------------------------------------------- */
body {
  background-color: var(--adn-black);
}

/* Subtle page fade-in on load */
@media (prefers-reduced-motion: no-preference) {
  #MainContent {
    animation: adn-page-enter 0.4s var(--adn-ease) both;
  }

  @keyframes adn-page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}


/* ----------------------------------------------------------------
   4. Typography
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6 {
  letter-spacing: -0.025em;
  font-weight: 700;
}

.h0 {
  letter-spacing: -0.04em;
}

.title-wrapper .title,
.title-wrapper-with-link .title {
  letter-spacing: -0.025em;
}

/* Caption text */
.caption-with-letter-spacing {
  color: var(--adn-silver);
  letter-spacing: 0.06em;
}

.caption-large {
  color: var(--adn-light);
}

/* Rich text sections */
.rich-text__heading {
  letter-spacing: -0.025em;
}

.rich-text__caption {
  color: var(--adn-silver);
  letter-spacing: 0.08em;
}


/* ----------------------------------------------------------------
   5. Links
   ---------------------------------------------------------------- */
a {
  transition: color var(--adn-t-fast),
              text-decoration-color var(--adn-t-fast);
}

.underline-links-hover:hover a {
  text-decoration-color: var(--adn-red);
}

/* Product cards only — suppress underline on all child links */
.product-card-wrapper.underline-links-hover:hover a {
  text-decoration: none;
}


/* ----------------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------------- */
.button {
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  font-weight:     700;
  font-size:       1.3rem;
  transition:
    background-color var(--adn-t-fast),
    border-color     var(--adn-t-fast),
    color            var(--adn-t-fast),
    transform        var(--adn-t-fast),
    box-shadow       var(--adn-t-fast);
}

/* Primary — ADN red */
.button:not(.button--tertiary):not(.button--secondary) {
  background-color: var(--adn-red);
  border-color:     var(--adn-red);
  color:            var(--adn-white);
  box-shadow:       0 2px 10px rgba(0, 0, 0, 0.45);
}

.button:not(.button--tertiary):not(.button--secondary):hover {
  background-color: var(--adn-red-dark);
  border-color:     var(--adn-red-dark);
  color:            var(--adn-white);
  transform:        translateY(-2px);
  box-shadow:       0 6px 20px var(--adn-red-glow),
                    0 0 var(--adn-glow-size, 0px) var(--adn-red-glow);
}


/* Secondary — ghost outline */
.button--secondary {
  background-color: transparent;
  border-color:     var(--adn-border-mid);
  color:            var(--adn-silver);
}

.button--secondary:hover {
  background-color: transparent;
  border-color:     var(--adn-red);
  color:            var(--adn-white);
  transform:        translateY(-2px);
}

/* Tertiary — text only */
.button--tertiary {
  color: var(--adn-light);
}

.button--tertiary:hover {
  color: var(--adn-white);
}

/* Focus ring */
.button:focus-visible {
  outline:        2px solid var(--adn-red);
  outline-offset: 3px;
  box-shadow:     none;
}

/* Suppress lift on buttons inside cards */
.card-wrapper .button:hover {
  transform:  none;
  box-shadow: none;
}


/* ----------------------------------------------------------------
   7. Header
   ---------------------------------------------------------------- */
.header-wrapper {
  background-color: var(--adn-dark-1);
  border-bottom:    1px solid var(--adn-border);
}

/* Elevated shadow when sticky header scrolls */
.header-wrapper--border-bottom {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Header icon buttons */
.header__icon {
  transition: color var(--adn-t-fast), opacity var(--adn-t-fast);
}

.header__icon:hover,
.header__icon:focus-visible {
  color:   var(--adn-red);
  opacity: 1;
}

/* Cart item count bubble — ADN red */
.cart-count-bubble {
  background-color: var(--adn-red);
  color:            var(--adn-white);
  border:           none;
}


/* ----------------------------------------------------------------
   8. Navigation (Desktop)
   ---------------------------------------------------------------- */

/* Top-level nav items */
.header__inline-menu .header__menu-item {
  transition: color var(--adn-t-fast);
}

/* Hover: red text */
.header__inline-menu .header__menu-item:hover,
.header__inline-menu .header__menu-item:focus-visible {
  color: var(--adn-red);
}

/* Active page nav item — red text + bottom accent */
.header__active-menu-item {
  color:      var(--adn-red);
  box-shadow: inset 0 -2px 0 var(--adn-red);
}

/* Dropdown submenu */
.header__submenu {
  background-color: var(--adn-dark-1);
  border:           1px solid var(--adn-border-mid);
  box-shadow:       0 8px 24px rgba(0, 0, 0, 0.55);
}

.header__submenu .header__menu-item:hover {
  background-color: var(--adn-dark-3);
  color:            var(--adn-white);
}

/* Mobile menu drawer */
.menu-drawer {
  background-color: var(--adn-dark-1);
  border-right:     1px solid var(--adn-border);
}

.menu-drawer .list-menu__item--link:hover {
  color: var(--adn-red);
}


/* ----------------------------------------------------------------
   9. Announcement Bar
   ---------------------------------------------------------------- */
.announcement-bar {
  padding-top:    0.8rem;
  padding-bottom: 0.8rem;
}

.announcement-bar__message {
  font-size:      1.2rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  color:          var(--adn-silver);
}


/* ----------------------------------------------------------------
   10. Section Headers & Title Wrappers
   ---------------------------------------------------------------- */

/* Horizontal rule beneath section heading rows */
.title-wrapper-with-link {
  border-bottom:  1px solid var(--adn-border);
  padding-bottom: 1.6rem;
  margin-bottom:  2.4rem;
}

/* "View all" / "See more" links inside title wrappers */
.title-wrapper-with-link .link,
.title-wrapper-with-link .underlined-link {
  font-size:      1.3rem;
  letter-spacing: 0.04em;
  color:          var(--adn-silver);
  transition:     color var(--adn-t-fast);
}

.title-wrapper-with-link .link:hover,
.title-wrapper-with-link .underlined-link:hover {
  color: var(--adn-red);
}


/* ----------------------------------------------------------------
   11. Hero / Image Banner
   ---------------------------------------------------------------- */

/* Ensure hero has real presence at large height setting */
@media screen and (min-width: 990px) {
  .banner--large {
    min-height: 72vh;
  }
}

/* Banner headings — bold, tight, motorsport feel */
.banner__heading {
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1.05;
  text-shadow:    0 2px 24px rgba(0, 0, 0, 0.6);
}

/* Subtext */
.banner__text p {
  color: rgba(240, 240, 240, 0.88);
}

/* Second button in the banner pair — ghost over photo */
.banner__buttons .button--secondary,
.banner__buttons .button + .button {
  border-color:     rgba(255, 255, 255, 0.45);
  color:            var(--adn-white);
  background-color: transparent;
}

.banner__buttons .button--secondary:hover,
.banner__buttons .button + .button:hover {
  border-color:     var(--adn-white);
  background-color: rgba(255, 255, 255, 0.08);
  color:            var(--adn-white);
  transform:        translateY(-2px);
}

/* Banner text content box — when transparency is off */
.banner__box {
  backdrop-filter: blur(1px);
}

/* ----- Banner placeholder (no image set) -----
   Dark branded hero placeholder with subtle texture */

.banner__media.placeholder {
  background-color: var(--adn-dark-3);
}

/* Dim the default apparel SVG almost to nothing */
.banner__media.placeholder .placeholder-svg {
  opacity:        0.04;
  width:          100%;
  height:         100%;
  object-fit:     cover;
}

/* Diagonal stripe texture */
.banner__media.placeholder::after {
  content:          "";
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background:       repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 5px,
    rgba(255, 255, 255, 0.018) 5px,
    rgba(255, 255, 255, 0.018) 6px
  );
}

/* Branded "Binnenkort beschikbaar" placeholder label
   on the banner content area (the schema has a heading block
   editable in Theme Editor, but when empty this shows) */
.banner__media.placeholder ~ .banner__content .banner__heading:empty::before {
  content:        "Binnenkort beschikbaar";
  color:          var(--adn-silver);
  font-size:      3rem;
  letter-spacing: -0.02em;
}


/* ----------------------------------------------------------------
   12. Product Cards — Lift, Zoom & Dark Polish
   ---------------------------------------------------------------- */

/* Card base depth + lift on hover — desktop only */
@media screen and (min-width: 750px) {
  .product-card-wrapper {
    box-shadow: var(--adn-card-3d-shadow, 0 4px 16px rgba(0, 0, 0, 0.45));
    transition:
      transform  var(--adn-t-base),
      box-shadow var(--adn-t-base);
  }

  .product-card-wrapper:hover {
    transform:  translateY(var(--adn-card-lift, -5px));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
                0 0 var(--adn-card-shadow-size, 16px) rgba(var(--adn-card-shadow-rgb, 229, 9, 20), 0.20);
  }
}

/* Dark card backgrounds */
.product-card-wrapper .card--standard .card__inner {
  background-color: var(--adn-card-bg, var(--adn-dark-2));
  border:           1px solid var(--adn-card-border, var(--adn-border));
  border-radius:    var(--adn-card-radius-custom, 12px);
}

.product-card-wrapper .card--card {
  background-color: var(--adn-card-bg, var(--adn-dark-2));
  border-radius:    var(--adn-card-radius-custom, 12px);
}

/* Premium image area — dark bg + always-on red accent, consistent with placeholder */
.product-card-wrapper .card__media .media {
  background-color: var(--adn-dark-3, #1c1e22);
  border-bottom:    var(--adn-card-accent-thickness, 2px) solid var(--adn-card-accent, var(--adn-red));
}

/* Enhanced image zoom */
@media screen and (min-width: 990px) and (prefers-reduced-motion: no-preference) {
  .card .media.media--hover-effect > img:only-child,
  .card-wrapper .media.media--hover-effect > img:only-child {
    transition: transform var(--adn-t-slow) ease;
  }

  .card:hover .media.media--hover-effect > img:first-child:only-child,
  .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child {
    transform: scale(var(--adn-image-scale, 1.08));
  }

  .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card-wrapper:hover .media.media--hover-effect > img + img {
    opacity:    1;
    transition: transform var(--adn-t-slow) ease;
    transform:  scale(1.08);
  }
}

/* Card heading — stronger, tighter */
.product-card-wrapper .card__heading {
  font-weight:    var(--adn-card-title-weight, 700);
  font-size:      var(--adn-card-title-size, 16px);
  letter-spacing: -0.02em;
  color:          var(--adn-card-text, var(--adn-white));
}

/* Card heading link hover */
.product-card-wrapper .card__heading a {
  transition: color var(--adn-t-fast), text-shadow var(--adn-t-fast);
  text-decoration: none;
}

.product-card-wrapper .card__heading a:hover {
  color:       var(--adn-white, #ffffff);
  text-shadow: 0 0 14px rgba(229, 9, 20, 0.35);
  text-decoration: none;
}

/* Price — bolder; sale price gets card price color */
.card-information > .price {
  font-weight: var(--adn-card-price-weight, 800);
  font-size:   var(--adn-card-price-size, 18px);
}

.card-information .price:not(.price--on-sale) .price-item--regular,
.card-information .price .price-item--sale {
  color: var(--adn-card-price, var(--adn-red));
}

/* Sale badge — ADN red */
.badge.color-scheme-5 {
  background-color: var(--adn-red);
  border-color:     var(--adn-red);
  color:            var(--adn-white);
}


/* ----------------------------------------------------------------
   13. Branded Product Card Placeholder
   Triggered by .adn-placeholder class added to the card-wrapper
   in the {%- else -%} block of snippets/card-product.liquid
   ---------------------------------------------------------------- */

/* Dark card inner with red accent bottom line */
.adn-placeholder .card--standard .card__inner,
.adn-placeholder .card--card {
  border-color: var(--adn-border-mid);
}

/* Media area — dark background with optional image picker image */
.adn-placeholder .card__media .media {
  background-color:    var(--adn-dark-3);
  overflow:            hidden;
  background-image:    var(--adn-placeholder-bg);
  background-repeat:   no-repeat;
  background-position: center center;
  background-size:     cover;
}

/* Hide the generic apparel SVG — text label shows instead */
.adn-placeholder .card__media .placeholder-svg {
  display: none;
}

/* "Binnenkort beschikbaar" — centered label */
.adn-placeholder .card__media .media::before {
  content:          "Binnenkort\A beschikbaar";
  white-space:      pre;
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%);
  text-align:       center;
  color:            var(--adn-silver);
  font-size:        1.15rem;
  font-weight:      600;
  letter-spacing:   0.05em;
  text-transform:   uppercase;
  line-height:      1.6;
  pointer-events:   none;
  z-index:          1;
}

/* Subtle diagonal stripe texture */
.adn-placeholder .card__media .media::after {
  content:          "";
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background:       repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 4px,
    rgba(255, 255, 255, 0.02) 4px,
    rgba(255, 255, 255, 0.02) 5px
  );
}

/* Placeholder card heading — muted, non-interactive feel */
.adn-placeholder .card__heading a {
  color:          var(--adn-grey);
  pointer-events: none;
}

/* Placeholder price — muted */
.adn-placeholder .price {
  opacity: 0.4;
}


/* ----------------------------------------------------------------
   14. Collection Cards
   ---------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  .collection-card-wrapper {
    transition:
      transform  var(--adn-t-base),
      box-shadow var(--adn-t-base);
  }

  .collection-card-wrapper:hover {
    transform:  translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  }
}


/* ----------------------------------------------------------------
   15. Multicolumn Section (USP / Feature blocks)
   ---------------------------------------------------------------- */

.multicolumn-card.content-container {
  background-color: var(--adn-dark-2);
  border:           1px solid var(--adn-border);
  transition:
    border-color var(--adn-t-base),
    box-shadow   var(--adn-t-base);
}

@media screen and (min-width: 750px) {
  .multicolumn-card.content-container:hover {
    border-color: var(--adn-border-mid);
    box-shadow:   0 8px 24px rgba(0, 0, 0, 0.4);
  }
}

.multicolumn-card__title {
  font-weight:    700;
  letter-spacing: -0.02em;
}


/* ----------------------------------------------------------------
   16. Image With Text Section
   ---------------------------------------------------------------- */

/* Placeholder state (no image selected) — dark branded */
.image-with-text__media--placeholder {
  background-color: var(--adn-dark-3);
  position:         relative;
  min-height:       32rem;
}

.image-with-text__media--placeholder .placeholder-svg {
  opacity: 0.04;
}

.image-with-text__media--placeholder::before {
  content:        "Binnenkort beschikbaar";
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  text-align:     center;
  color:          var(--adn-silver);
  font-size:      1.2rem;
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space:    nowrap;
  pointer-events: none;
  z-index:        1;
}


/* ----------------------------------------------------------------
   17. Form Inputs & Search
   ---------------------------------------------------------------- */
.field__input,
.select__select {
  background-color: var(--adn-dark-2);
  color:            var(--adn-white);
}

.field__input:focus-visible,
.select__select:focus-visible {
  border-color:  var(--adn-red);
  outline-color: rgba(204, 17, 17, 0.25);
}

.field__label {
  color: var(--adn-silver);
  background-color: var(--adn-dark-2);
}

/* Search modal input */
.search-modal__form .field__input {
  background-color: var(--adn-dark-2);
}


/* ----------------------------------------------------------------
   18. Predictive Search Dropdown
   ---------------------------------------------------------------- */
.predictive-search {
  background-color: var(--adn-dark-1);
  border:           1px solid var(--adn-border-mid);
  box-shadow:       0 8px 24px rgba(0, 0, 0, 0.5);
}

.predictive-search__list-item:hover,
.predictive-search__list-item:focus-within {
  background-color: var(--adn-dark-3);
}

.predictive-search__heading {
  color:          var(--adn-silver);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size:      1.1rem;
}


/* ----------------------------------------------------------------
   19. Banner Placeholder — "Binnenkort beschikbaar" overlay
   (The banner heading text is editable in Theme Editor;
   this only fires when the heading block is present but empty)
   ---------------------------------------------------------------- */

/* Separate rule: dim generic SVG in all placeholder media areas */
.banner__media.placeholder .placeholder-svg {
  opacity: 0.04;
}


/* ----------------------------------------------------------------
   20. Footer
   ---------------------------------------------------------------- */

/* The <footer> element has class .footer */
.footer {
  border-top: 1px solid var(--adn-border);
}

/* Footer block headings */
.footer-block__heading {
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  font-size:       1.1rem;
  color:           var(--adn-white);
  margin-bottom:   1.2rem;
}

/* Footer nav links */
.footer .list-menu a,
.footer .footer__list a {
  color:      var(--adn-light);
  transition: color var(--adn-t-fast);
}

.footer .list-menu a:hover,
.footer .footer__list a:hover {
  color: var(--adn-red);
}

/* Footer copyright / sub text */
.footer__content-bottom {
  border-top: 1px solid var(--adn-border);
  color:      var(--adn-silver);
}

/* Social icons */
.footer .social-icons__link:hover svg {
  fill: var(--adn-red);
}


/* ----------------------------------------------------------------
   21. Scrollbar (Webkit — cosmetic only, non-critical)
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
  width:  6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--adn-dark-1);
}

::-webkit-scrollbar-thumb {
  background:    var(--adn-grey);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--adn-silver);
}


/* ----------------------------------------------------------------
   22. Reduced Motion Safety Net
   Disables ALL ADN-added transitions/transforms when the user
   has requested reduced motion. Dawn's own rules remain active.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #MainContent {
    animation: none;
  }

  .product-card-wrapper,
  .collection-card-wrapper,
  .multicolumn-card {
    transition:  none !important;
    transform:   none !important;
    box-shadow:  none !important;
  }

  .button,
  .button:hover {
    transition: none !important;
    transform:  none !important;
    box-shadow: none !important;
  }

  a {
    transition: none !important;
  }
}


/* ----------------------------------------------------------------
   23. Utility Classes
   ---------------------------------------------------------------- */

.adn-hidden {
  display: none !important;
}


/* ----------------------------------------------------------------
   24. Header Phone CTA
   ---------------------------------------------------------------- */

.adn-header-phone {
  display:         flex;
  align-items:     center;
  font-size:       1.4rem;
  font-weight:     600;
  letter-spacing:  0.02em;
  color:           var(--adn-light);
  text-decoration: none;
  padding:         0 1.2rem;
  white-space:     nowrap;
  transition:      color var(--adn-t-fast);
}

.adn-header-phone:hover {
  color: var(--adn-red);
}

@media screen and (max-width: 989px) {
  .adn-header-phone {
    display: none;
  }
}


/* ----------------------------------------------------------------
   25. ADN Video Banner Section
   ---------------------------------------------------------------- */

.adn-video-banner {
  position:         relative;
  overflow:         hidden;
  display:          flex;
  align-items:      center;
  isolation:        isolate;
  background-color: #050608;
}

.adn-video-banner__media {
  position:         absolute;
  inset:            0;
  background-color: #050608;
}

.adn-video-banner__fallback {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.adn-video-banner__video {
  position:         absolute;
  inset:            0;
  width:            100%;
  height:           100%;
  object-fit:       cover;
  display:          block;
  z-index:          1;
  background-color: #050608;
}

.adn-video-banner__placeholder {
  position:         absolute;
  inset:            0;
  background-color: #050608;
  display:          block;
}

@media screen and (max-width: 749px) {
  .adn-video-banner__video--hide-mobile {
    display: none;
  }
}

.adn-video-banner__overlay {
  position:         absolute;
  inset:            0;
  background-color: var(--adn-black);
  pointer-events:   none;
  z-index:          2;
}

.adn-video-banner__content {
  position: relative;
  z-index:  3;
  width:    100%;
  padding:  4rem 0;
}

.adn-video-banner__content--left   { text-align: left; }
.adn-video-banner__content--center { text-align: center; }
.adn-video-banner__content--right  { text-align: right; }

/* Red accent line above content */
.adn-video-banner__content::before {
  content:          "";
  display:          block;
  width:            4rem;
  height:           3px;
  background-color: var(--adn-red);
  margin-bottom:    2rem;
}

.adn-video-banner__content--center::before {
  margin-left:  auto;
  margin-right: auto;
}

.adn-video-banner__content--right::before {
  margin-left: auto;
}

.adn-video-banner__heading {
  font-size:      clamp(2.8rem, 5vw, 5.6rem);
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1.05;
  color:          var(--adn-white);
  text-shadow:    0 2px 24px rgba(0, 0, 0, 0.6);
  margin-bottom:  1.2rem;
}

.adn-video-banner__heading em {
  font-style: normal;
  color:      var(--adn-red);
}

.adn-video-banner__subheading {
  font-size:     1.7rem;
  color:         rgba(240, 240, 240, 0.85);
  margin-bottom: 3.2rem;
  line-height:   1.5;
}

.adn-video-banner__buttons {
  display:   flex;
  gap:       1.2rem;
  flex-wrap: wrap;
}

.adn-video-banner__content--center .adn-video-banner__buttons {
  justify-content: center;
}

.adn-video-banner__content--right .adn-video-banner__buttons {
  justify-content: flex-end;
}

.adn-video-banner__buttons .button--secondary {
  border-color:     rgba(255, 255, 255, 0.45);
  color:            var(--adn-white);
  background-color: transparent;
}

.adn-video-banner__buttons .button--secondary:hover {
  border-color:     var(--adn-white);
  background-color: rgba(255, 255, 255, 0.08);
  color:            var(--adn-white);
}


/* ----------------------------------------------------------------
   26. Image Banner — ADN Video Background
   ---------------------------------------------------------------- */

.banner__adn-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

@media screen and (max-width: 749px) {
  .banner__adn-video--hide-mobile {
    display: none;
  }
}

.banner__adn-overlay {
  position:       absolute;
  inset:          0;
  pointer-events: none;
}

/* Red accent line above banner heading when video is active */
.banner .banner__heading::before {
  content:          "";
  display:          block;
  width:            3.2rem;
  height:           3px;
  background-color: var(--adn-red);
  margin-bottom:    1.2rem;
}


/* ----------------------------------------------------------------
   27. Header CTA Button
   ---------------------------------------------------------------- */

.adn-header-cta {
  display:          inline-flex;
  align-items:      center;
  gap:              0.55em;
  padding:          0.5rem 1.3rem;
  font-size:        1.25rem;
  font-weight:      600;
  line-height:      1;
  white-space:      nowrap;
  text-decoration:  none;
  letter-spacing:   0.03em;

  background-color: var(--cta-bg,          var(--adn-dark-1));
  color:            var(--cta-text,         var(--adn-white));
  border-style:     solid;
  border-width:     var(--cta-border-width, 1px);
  border-color:     var(--cta-border,       var(--adn-red));
  border-radius:    var(--cta-radius,       40px);

  transition:
    background-color var(--adn-t-fast),
    color            var(--adn-t-fast),
    border-color     var(--adn-t-fast),
    box-shadow       var(--adn-t-fast),
    transform        var(--adn-t-fast);
}

.adn-header-cta svg {
  flex-shrink: 0;
}

.adn-header-cta:hover {
  background-color: var(--cta-hover-bg,   var(--adn-red));
  color:            var(--cta-hover-text, var(--adn-white));
  border-color:     var(--cta-hover-bg,   var(--adn-red));
  transform:        translateY(-1px);
  box-shadow:       0 0 var(--cta-shadow-size, 14px) var(--cta-shadow, var(--adn-red)),
                    0 4px 12px rgba(0, 0, 0, 0.35);
}


/* ----------------------------------------------------------------
   28. ADN Card Button ("Bekijk motor")
   ---------------------------------------------------------------- */

.adn-card-btn {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            100%;
  padding:          0.65rem 1rem;
  margin-top:       0.75rem;
  font-size:        1.2rem;
  font-weight:      600;
  letter-spacing:   0.04em;
  text-transform:   uppercase;
  text-decoration:  none;
  white-space:      nowrap;
  border:           1px solid var(--adn-card-button-border, var(--adn-silver));
  border-radius:    var(--adn-card-radius-custom, 12px);
  background-color: var(--adn-card-button-bg, var(--adn-dark-2));
  color:            var(--adn-card-button-text, var(--adn-white));
  transition:
    background-color var(--adn-t-fast),
    color            var(--adn-t-fast),
    border-color     var(--adn-t-fast),
    transform        var(--adn-t-fast);
}

.adn-card-btn:hover {
  background-color: var(--adn-card-button-hover-bg, var(--adn-red));
  color:            var(--adn-card-button-hover-text, var(--adn-white));
  border-color:     var(--adn-card-button-hover-bg, var(--adn-red));
  transform:        translateY(-2px);
  box-shadow:       0 0 18px rgba(229, 9, 20, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);
  text-decoration:  none;
}


/* ----------------------------------------------------------------
   29. Product Page — VERKOCHT, Specs, Options,
       Marktplaats Button, Contact CTA
   ---------------------------------------------------------------- */

/* ── VERKOCHT Banner ── */
.adn-verkocht-banner {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          0.9rem 1.5rem;
  margin-bottom:    1.6rem;
  background-color: var(--adn-red);
  border-radius:    var(--adn-card-radius-custom, 8px);
}

.adn-verkocht-banner__label {
  font-size:      2.2rem;
  font-weight:    800;
  letter-spacing: 0.2em;
  color:          var(--adn-white);
  text-transform: uppercase;
}

/* ── Specification Grid ── */
.adn-specs {
  padding:          1.6rem;
  margin-bottom:    1.6rem;
  background-color: var(--adn-card-bg, var(--adn-dark-2));
  border:           1px solid var(--adn-card-border, var(--adn-border));
  border-radius:    var(--adn-card-radius-custom, 12px);
}

.adn-specs__heading {
  margin:         0 0 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom:  1px solid var(--adn-card-border, var(--adn-border));
  font-size:      1.3rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--adn-silver);
}

.adn-specs__grid {
  display: grid;
  gap:     0;
  margin:  0;
}

@media screen and (min-width: 750px) {
  .adn-specs__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.adn-specs__row {
  display:        flex;
  align-items:    baseline;
  gap:            0.8rem;
  padding:        0.7rem 0.6rem;
  border-bottom:  1px solid rgba(255, 255, 255, 0.05);
  border-left:    2px solid transparent;
  transition:     border-left-color var(--adn-t-fast);
}

.adn-specs__row:last-child {
  border-bottom: none;
}

.adn-specs:hover .adn-specs__row {
  border-left-color: var(--adn-card-accent, var(--adn-red));
}

.adn-specs__label {
  flex-shrink:    0;
  min-width:      12rem;
  font-size:      1.2rem;
  font-weight:    500;
  color:          var(--adn-silver);
}

.adn-specs__value {
  margin:      0;
  font-size:   1.35rem;
  font-weight: 600;
  color:       var(--adn-card-text, var(--adn-white));
}

/* ── Options Block ── */
.adn-options {
  padding:          1.6rem;
  margin-bottom:    1.6rem;
  background-color: var(--adn-card-bg, var(--adn-dark-2));
  border:           1px solid var(--adn-card-border, var(--adn-border));
  border-radius:    var(--adn-card-radius-custom, 12px);
}

.adn-options__heading {
  margin:         0 0 1rem;
  padding-bottom: 0.8rem;
  border-bottom:  1px solid var(--adn-card-border, var(--adn-border));
  font-size:      1.3rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--adn-silver);
}

.adn-options__content {
  font-size:   1.35rem;
  line-height: 1.8;
  color:       var(--adn-card-text, var(--adn-white));
}

/* ── Marktplaats Button ── */
.adn-mp-wrapper {
  margin-bottom: 1.2rem;
}

.adn-mp-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              0.7rem;
  padding:          0.75rem 1.5rem;
  background-color: var(--adn-dark-1);
  border:           1px solid #f7601e;
  border-radius:    var(--adn-card-radius-custom, 8px);
  color:            var(--adn-white);
  font-size:        1.3rem;
  font-weight:      600;
  letter-spacing:   0.02em;
  text-decoration:  none;
  transition:
    background-color var(--adn-t-fast),
    border-color     var(--adn-t-fast),
    transform        var(--adn-t-fast),
    box-shadow       var(--adn-t-fast);
}

.adn-mp-btn:hover {
  background-color: #f7601e;
  border-color:     #f7601e;
  color:            var(--adn-white);
  transform:        translateY(-1px);
  box-shadow:       0 4px 18px rgba(247, 96, 30, 0.35);
}

.adn-mp-btn__icon {
  flex-shrink: 0;
}

/* ── Contact CTA ── */
.adn-contact-cta {
  display:          flex;
  flex-direction:   column;
  gap:              1rem;
  padding:          1.6rem;
  margin-bottom:    1.6rem;
  background-color: var(--adn-dark-3, #1c1e22);
  border:           1px solid var(--adn-card-border, var(--adn-border));
  border-left:      3px solid var(--adn-red);
  border-radius:    var(--adn-card-radius-custom, 12px);
}

.adn-contact-cta__label {
  margin:      0;
  font-size:   1.6rem;
  font-weight: 600;
  color:       var(--adn-card-text, var(--adn-white));
}

.adn-contact-cta__btn {
  align-self: flex-start;
}


/* ----------------------------------------------------------------
   30. "Nieuw" Product Badge
   ---------------------------------------------------------------- */

.adn-badge-nieuw {
  position:         absolute;
  top:              1.2rem;
  left:             1.2rem;
  z-index:          2;
  padding:          0.3rem 0.85rem;
  border-radius:    40px;
  font-size:        1.1rem;
  font-weight:      700;
  letter-spacing:   0.04em;
  text-transform:   uppercase;
  background-color: var(--adn-badge-nieuw-bg,     var(--adn-red));
  color:            var(--adn-badge-nieuw-text,   var(--adn-white));
  border:           1px solid var(--adn-badge-nieuw-border, var(--adn-red));
  box-shadow:       0 2px 8px rgba(229, 9, 20, 0.35);
  pointer-events:   none;
}


/* ----------------------------------------------------------------
   31. Motor Tabs — flexible, Theme Editor configurable
   ---------------------------------------------------------------- */

/* ---- Container — renders below the product grid at full page-width ---- */
.adn-motor-tabs {
  margin-top:    3.2rem;
  margin-bottom: 1.6rem;
}

/* ---- Tab alignment ---- */
.adn-motor-tabs[data-tabs-align="center"] .adn-motor-tabs__nav {
  justify-content: center;
}

/* ================================================================
   Desktop tab nav (hidden mobile, visible ≥750px)
   ================================================================ */
.adn-motor-tabs__nav {
  display: none;
}

@media screen and (min-width: 750px) {
  .adn-motor-tabs__nav {
    display:   flex;
    flex-wrap: wrap;
  }
}

/* ---- Base tab button ---- */
.adn-motor-tabs__tab {
  background:     none;
  border:         none;
  padding:        1.1rem 2rem;
  font-size:      1.45rem;
  font-weight:    600;
  color:          var(--adn-tabs-tab-text, var(--adn-muted, #a8a8a8));
  cursor:         pointer;
  white-space:    nowrap;
  transition:     color 0.2s, background-color 0.2s, border-color 0.2s;
  letter-spacing: 0.025em;
}

/* ================================================================
   Tab style variants
   ================================================================ */

/* -- Underline -- */
.adn-motor-tabs__nav[data-tab-style="underline"] {
  border-bottom: 2px solid var(--adn-tabs-border, var(--adn-border, #2a2c31));
}
.adn-motor-tabs__nav[data-tab-style="underline"] .adn-motor-tabs__tab {
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.adn-motor-tabs__nav[data-tab-style="underline"] .adn-motor-tabs__tab:hover {
  color: var(--adn-white, #ffffff);
}
.adn-motor-tabs__nav[data-tab-style="underline"] .adn-motor-tabs__tab.is-active {
  color:               var(--adn-tabs-active, var(--adn-red, #e50914));
  border-bottom-color: var(--adn-tabs-active, var(--adn-red, #e50914));
}

/* -- Pill -- */
.adn-motor-tabs__nav[data-tab-style="pill"] {
  gap:     0.6rem;
  padding: 0.4rem 0 0.8rem;
}
.adn-motor-tabs__nav[data-tab-style="pill"] .adn-motor-tabs__tab {
  border-radius: 40px;
  border:        1px solid var(--adn-tabs-border, var(--adn-border, #2a2c31));
  padding:       0.7rem 1.8rem;
}
.adn-motor-tabs__nav[data-tab-style="pill"] .adn-motor-tabs__tab:hover {
  border-color: var(--adn-tabs-active, var(--adn-red, #e50914));
  color:        var(--adn-white, #ffffff);
}
.adn-motor-tabs__nav[data-tab-style="pill"] .adn-motor-tabs__tab.is-active {
  background-color: var(--adn-tabs-active, var(--adn-red, #e50914));
  border-color:     var(--adn-tabs-active, var(--adn-red, #e50914));
  color:            #ffffff;
}

/* -- Boxed -- */
.adn-motor-tabs__nav[data-tab-style="boxed"] {
  gap: 0.5rem;
}
.adn-motor-tabs__nav[data-tab-style="boxed"] .adn-motor-tabs__tab {
  border:        1px solid var(--adn-tabs-border, var(--adn-border, #2a2c31));
  border-radius: var(--adn-tabs-radius, 10px) var(--adn-tabs-radius, 10px) 0 0;
  border-bottom: none;
}
.adn-motor-tabs__nav[data-tab-style="boxed"] .adn-motor-tabs__tab:hover {
  color: var(--adn-white, #ffffff);
}
.adn-motor-tabs__nav[data-tab-style="boxed"] .adn-motor-tabs__tab.is-active {
  background-color: var(--adn-tabs-panel-bg, var(--adn-dark-2, #17181b));
  border-color:     var(--adn-tabs-border, var(--adn-border, #2a2c31));
  color:            var(--adn-tabs-active, var(--adn-red, #e50914));
}

/* ================================================================
   Accordion button (mobile <750px only)
   ================================================================ */
.adn-motor-tabs__acc-btn {
  display:         flex;
  width:           100%;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  background:      var(--adn-tabs-panel-bg, var(--adn-dark-2, #17181b));
  border:          1px solid var(--adn-tabs-border, var(--adn-border, #2a2c31));
  border-radius:   8px;
  padding:         1.3rem 1.8rem;
  margin-top:      0.8rem;
  font-size:       1.45rem;
  font-weight:     600;
  color:           var(--adn-white, #ffffff);
  cursor:          pointer;
  text-align:      left;
  transition:      border-color 0.2s, color 0.2s;
}

.adn-motor-tabs__acc-btn:hover,
.adn-motor-tabs__acc-btn.is-acc-open {
  border-color: var(--adn-tabs-active, var(--adn-red, #e50914));
  color:        var(--adn-tabs-active, var(--adn-red, #e50914));
}

.adn-motor-tabs__acc-btn.is-acc-open {
  border-radius: 8px 8px 0 0;
}

.adn-motor-tabs__chevron {
  flex-shrink: 0;
  transition:  transform 0.25s ease;
}

.adn-motor-tabs__acc-btn.is-acc-open .adn-motor-tabs__chevron {
  transform: rotate(180deg);
}

@media screen and (min-width: 750px) {
  .adn-motor-tabs__acc-btn {
    display: none;
  }
}

/* ================================================================
   Panels
   ================================================================ */
.adn-motor-tabs__panel {
  display:          none;
  padding:          var(--adn-tabs-pad-mobile, 20px);
  background-color: var(--adn-tabs-panel-bg, var(--adn-dark-2, #17181b));
  border:           1px solid var(--adn-tabs-border, var(--adn-border, #2a2c31));
  border-top:       none;
  border-radius:    0 0 8px 8px;
}

.adn-motor-tabs__panel.is-active {
  display: block;
}

@media screen and (min-width: 750px) {
  .adn-motor-tabs__panel {
    padding:       var(--adn-tabs-pad-desktop, 32px);
    border-radius: 0 0 var(--adn-tabs-radius, 10px) var(--adn-tabs-radius, 10px);
  }
}

/* ================================================================
   Description
   ================================================================ */
.adn-motor-tabs__desc {
  color:       var(--adn-white, #ffffff);
  font-size:   1.5rem;
  line-height: 1.8;
}

.adn-motor-tabs__desc p              { margin-bottom: 1.4rem; }
.adn-motor-tabs__desc p:last-child   { margin-bottom: 0; }
.adn-motor-tabs__desc h2,
.adn-motor-tabs__desc h3,
.adn-motor-tabs__desc h4             { color: var(--adn-white, #ffffff); margin-top: 2rem; margin-bottom: 1rem; }
.adn-motor-tabs__desc ul,
.adn-motor-tabs__desc ol             { padding-left: 2rem; margin-bottom: 1.4rem; }
.adn-motor-tabs__desc li             { margin-bottom: 0.4rem; }

.adn-motor-tabs__empty {
  color:     var(--adn-tabs-muted, var(--adn-muted, #a8a8a8));
  font-size: 1.4rem;
  margin:    0;
}

/* ================================================================
   Premium specification grid  (vehicle-style, 3-col desktop)
   ================================================================ */
.adn-spec-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   1rem;
}

@media screen and (min-width: 750px) {
  .adn-spec-grid { grid-template-columns: 1fr 1fr; }
}

@media screen and (min-width: 990px) {
  .adn-spec-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.adn-spec-grid__item {
  display:          flex;
  flex-direction:   column;
  gap:              0.5rem;
  padding:          1.8rem 2rem;
  background-color: rgba(255, 255, 255, 0.03);
  border:           1px solid var(--adn-tabs-border, var(--adn-border, #2a2c31));
  border-radius:    8px;
}

.adn-spec-grid__label {
  font-size:      1.1rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--adn-tabs-muted, var(--adn-muted, #a8a8a8));
  line-height:    1;
}

.adn-spec-grid__value {
  font-size:   2rem;
  font-weight: 700;
  color:       var(--adn-white, #ffffff);
  line-height: 1.2;
}

/* ================================================================
   Options list  (bullet items from newline-split metafield)
   ================================================================ */
.adn-motor-tabs__opties-list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.adn-motor-tabs__opties-list li {
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  font-size:     1.45rem;
  color:         var(--adn-white, #ffffff);
  line-height:   1.6;
  padding:       0.9rem 0;
  border-bottom: 1px solid var(--adn-tabs-border, var(--adn-border, #2a2c31));
}

.adn-motor-tabs__opties-list li:last-child {
  border-bottom: none;
}

.adn-motor-tabs__opties-list li::before {
  content:      '';
  display:      inline-block;
  min-width:    7px;
  height:       7px;
  border-radius: 50%;
  background:   var(--adn-tabs-active, var(--adn-red, #e50914));
  margin-top:   0.55rem;
  flex-shrink:  0;
}

/* ================================================================
   Custom richtext tabs
   ================================================================ */
.adn-motor-tabs__custom {
  color:       var(--adn-white, #ffffff);
  font-size:   1.5rem;
  line-height: 1.8;
}

.adn-motor-tabs__custom p            { margin-bottom: 1.2rem; }
.adn-motor-tabs__custom p:last-child { margin-bottom: 0; }

/* ================================================================
   Contact tab
   ================================================================ */
.adn-motor-tabs__contact-wrap {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
}

.adn-mp-btn--tab {
  margin-bottom: 0;
}

.adn-motor-tabs__cta-block {
  display:        flex;
  flex-direction: column;
  gap:            1.2rem;
}

.adn-motor-tabs__cta-label {
  margin:      0;
  font-size:   1.7rem;
  font-weight: 600;
  color:       var(--adn-white, #ffffff);
}

.adn-motor-tabs__cta-btn {
  align-self: flex-start;
}

/* ================================================================
   Section 32 — CTA Buttons  (adn_cta_buttons block)
   ================================================================ */
.adn-cta-buttons {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--adn-cta-gap, 10px);
}

.adn-cta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.7rem;
  padding:         1.2rem 2.2rem;
  border-radius:   var(--adn-cta-radius, 8px);
  font-size:       1.5rem;
  font-weight:     600;
  text-decoration: none;
  border:          2px solid transparent;
  cursor:          pointer;
  transition:      background-color 0.2s, border-color 0.2s, color 0.2s;
  white-space:     nowrap;
}

.adn-cta-btn--solid {
  background-color: var(--adn-cta-bg, #e50914);
  color:            var(--adn-cta-text, #ffffff);
  border-color:     var(--adn-cta-border, #e50914);
}
.adn-cta-btn--solid:hover {
  background-color: var(--adn-cta-hover-bg, #c00710);
  border-color:     var(--adn-cta-hover-bg, #c00710);
  color:            var(--adn-cta-text, #ffffff);
}

.adn-cta-btn--outline {
  background-color: var(--adn-cta-bg, transparent);
  color:            var(--adn-cta-text, #ffffff);
  border-color:     var(--adn-cta-border, #ffffff);
}
.adn-cta-btn--outline:hover {
  background-color: var(--adn-cta-hover-bg, #e50914);
  border-color:     var(--adn-cta-hover-bg, #e50914);
  color:            #ffffff;
}

.adn-cta-btn--ghost {
  background-color: transparent;
  color:            var(--adn-cta-text, #ffffff);
  border-color:     transparent;
}
.adn-cta-btn--ghost:hover {
  background-color: var(--adn-cta-hover-bg, rgba(255, 255, 255, 0.08));
  color:            var(--adn-cta-text, #ffffff);
}

.adn-cta-btn__icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  width:       20px;
  height:      20px;
}
.adn-cta-btn__icon svg,
.adn-cta-btn__icon img {
  width:  20px;
  height: 20px;
}

/* ================================================================
   Section 33 — USP / Trust Row  (adn_usp_row block)
   ================================================================ */
.adn-usp-row {
  margin-top:    3.2rem;
  margin-bottom: 1.6rem;
}
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--adn-usp-gap, 12px);
}

@media screen and (min-width: 750px) {
  .adn-usp-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.adn-usp-card {
  display:          flex;
  align-items:      flex-start;
  gap:              1.2rem;
  padding:          1.6rem;
  background-color: var(--adn-usp-bg, #1e2025);
  border:           1px solid var(--adn-usp-border, #2a2c31);
  border-radius:    var(--adn-usp-radius, 8px);
  transition:       border-color 0.2s;
}

.adn-usp-card:hover {
  border-color: var(--adn-red, #e50914);
}

.adn-usp-card__icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--adn-red, #e50914);
  margin-top:  0.2rem;
}
.adn-usp-card__icon svg,
.adn-usp-card__icon img {
  width:  28px;
  height: 28px;
}

.adn-usp-card__body {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

.adn-usp-card__title {
  display:     block;
  font-size:   1.4rem;
  font-weight: 700;
  color:       var(--adn-usp-text, #ffffff);
  line-height: 1.3;
}

.adn-usp-card__subtitle {
  display:   block;
  font-size: 1.2rem;
  color:     var(--adn-usp-muted, #a8a8a8);
}

/* ================================================================
   Section 34 — Promo Bar  (adn_promo_bar block)
   ================================================================ */
.adn-promo-bar {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--adn-promo-radius, 10px);
  margin-top:    3.2rem;
  margin-bottom: 1.6rem;
}

.adn-promo-bar__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.adn-promo-bar__bg-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.adn-promo-bar__bg--color {
  width:  100%;
  height: 100%;
}

.adn-promo-bar__overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: var(--adn-promo-overlay, rgba(0, 0, 0, 0.55));
}

.adn-promo-bar__content {
  position:       relative;
  z-index:        2;
  padding:        var(--adn-promo-pad-v, 36px) var(--adn-promo-pad-h, 32px);
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  color:          var(--adn-promo-text, #ffffff);
}

.adn-promo-bar__label {
  display:        inline-block;
  font-size:      1.1rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--adn-promo-muted, #a8a8a8);
}

.adn-promo-bar__title {
  margin:      0;
  font-size:   clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  color:       var(--adn-promo-text, #ffffff);
}

.adn-promo-bar__text {
  margin:    0;
  font-size: 1.5rem;
  color:     var(--adn-promo-muted, #a8a8a8);
}

.adn-promo-bar__actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1rem;
  margin-top: 0.5rem;
}

.adn-promo-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         1.1rem 2rem;
  border-radius:   var(--adn-promo-btn-radius, 8px);
  font-size:       1.45rem;
  font-weight:     600;
  text-decoration: none;
  border:          2px solid transparent;
  cursor:          pointer;
  transition:      background-color 0.2s, border-color 0.2s, color 0.2s;
  white-space:     nowrap;
}

.adn-promo-btn--solid {
  background-color: var(--adn-promo-btn-bg, #e50914);
  color:            var(--adn-promo-btn-text, #ffffff);
  border-color:     var(--adn-promo-btn-border, #e50914);
}
.adn-promo-btn--solid:hover {
  filter: brightness(0.88);
  color:  var(--adn-promo-btn-text, #ffffff);
}

.adn-promo-btn--outline {
  background-color: transparent;
  color:            var(--adn-promo-btn-text, #ffffff);
  border-color:     var(--adn-promo-btn-border, #ffffff);
}
.adn-promo-btn--outline:hover {
  background-color: var(--adn-promo-btn-border, #ffffff);
  color:            #000000;
}

.adn-promo-btn--ghost {
  background-color: transparent;
  color:            var(--adn-promo-btn-text, #ffffff);
  border-color:     transparent;
}
.adn-promo-btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color:            var(--adn-promo-btn-text, #ffffff);
}

/* ================================================================
   Section 35 — Status Badge  (adn_status_badge block)
   ================================================================ */
.adn-status-badge-wrap {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.8rem;
}

.adn-status-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        0.5rem 1.4rem;
  border-radius:  4px;
  font-size:      1.2rem;
  font-weight:    800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:     var(--adn-badge-bg, #e50914);
  color:          var(--adn-badge-text, #ffffff);
  line-height:    1;
}

/* ================================================================
   Section 36 — Product info column premium styling
   ================================================================ */
.product__info-container .product__title {
  font-size:   clamp(2.2rem, 3vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
}

.product__info-container .price__current,
.product__info-container .price-item--regular {
  font-size:   2.8rem;
  font-weight: 800;
  color:       var(--adn-red, #e50914);
}

.product__info-container .price-item--sale {
  color: var(--adn-red, #e50914);
}


/* ----------------------------------------------------------------
   37. ADN Card Meta Row (Bouwjaar & Kilometerstand)
   ---------------------------------------------------------------- */

.adn-card-meta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.45rem 1.1rem;
  margin-top:  0.5rem;
  margin-bottom: 0.15rem;
}

.adn-card-meta__item {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  font-size:      var(--adn-card-meta-size, 13px);
  color:          var(--adn-card-meta-color, var(--adn-card-muted, #a8a8a8));
  font-weight:    500;
  letter-spacing: 0.01em;
  line-height:    1;
}

.adn-card-meta__icon {
  color:       var(--adn-card-icon-color, #a8a8a8);
  flex-shrink: 0;
  display:     block;
}

.adn-card-meta__icon-img {
  display:     block;
  object-fit:  contain;
  flex-shrink: 0;
  opacity:     0.75;
}


/* ----------------------------------------------------------------
   38. Product Card VERKOCHT Ribbon
   ---------------------------------------------------------------- */

.adn-card-verkocht-ribbon {
  position:       absolute;
  inset:          0;
  z-index:        3;
  pointer-events: none;
  overflow:       hidden;
}

.adn-card-verkocht-ribbon__text {
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%) rotate(-38deg);
  display:          block;
  width:            180%;
  padding:          0.85rem 0;
  text-align:       center;
  background-color: var(--adn-sold-ribbon-bg, #e50914);
  opacity:          var(--adn-sold-ribbon-opacity, 0.9);
  color:            var(--adn-sold-ribbon-text-color, #ffffff);
  font-size:        1.2rem;
  font-weight:      800;
  letter-spacing:   0.22em;
  text-transform:   uppercase;
  box-shadow:       0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events:   none;
}

/* Shared diagonal ribbon base — used by both --sold and --coming-soon */
.adn-diagonal-ribbon {
  position:       absolute;
  inset:          0;
  z-index:        3;
  pointer-events: none;
  overflow:       hidden;
}

.adn-diagonal-ribbon__text {
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%) rotate(-38deg);
  display:          block;
  width:            180%;
  padding:          0.85rem 0;
  text-align:       center;
  background-color: var(--adn-sold-ribbon-bg, #e50914);
  opacity:          var(--adn-sold-ribbon-opacity, 0.9);
  color:            var(--adn-sold-ribbon-text-color, #ffffff);
  font-size:        1.2rem;
  font-weight:      800;
  letter-spacing:   0.22em;
  text-transform:   uppercase;
  box-shadow:       0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events:   none;
}

/* Coming-soon: smaller font so the longer text fits cleanly */
.adn-diagonal-ribbon--coming-soon .adn-diagonal-ribbon__text {
  font-size:      0.82rem;
  letter-spacing: 0.14em;
}

@media screen and (max-width: 749px) {
  .adn-diagonal-ribbon--coming-soon .adn-diagonal-ribbon__text {
    font-size:      0.68rem;
    letter-spacing: 0.10em;
  }
}

/* Hide placeholder card heading — ribbon replaces it */
.adn-placeholder .card__heading--placeholder {
  display: none;
}


/* ----------------------------------------------------------------
   39. Product Page VERKOCHT Gallery Overlay
   ---------------------------------------------------------------- */

.adn-gallery-viewer-wrap {
  position: relative;
}

.adn-product-sold-overlay {
  position:       absolute;
  inset:          0;
  z-index:        5;
  pointer-events: none;
  overflow:       hidden;
}

.adn-product-sold-overlay__text {
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%) rotate(-38deg);
  display:          block;
  width:            200%;
  padding:          2rem 0;
  text-align:       center;
  background-color: var(--adn-sold-ribbon-bg, #e50914);
  opacity:          var(--adn-sold-ribbon-opacity, 0.9);
  color:            var(--adn-sold-ribbon-text-color, #ffffff);
  font-size:        2.4rem;
  font-weight:      800;
  letter-spacing:   0.3em;
  text-transform:   uppercase;
  box-shadow:       0 4px 20px rgba(0, 0, 0, 0.6);
  pointer-events:   none;
}

@media screen and (max-width: 749px) {
  .adn-product-sold-overlay__text {
    font-size:      1.6rem;
    letter-spacing: 0.2em;
    padding:        1.4rem 0;
  }
}


/* ----------------------------------------------------------------
   40. ADN Motorzoeker Configurator
   ---------------------------------------------------------------- */

.adn-motorzoeker {
  background-color: var(--adn-dark-2, #17181b);
  border-bottom:    1px solid var(--adn-border, #1f2126);
  padding:          2.4rem 0;
}

.adn-motorzoeker__inner {
  display:        flex;
  flex-direction: column;
  gap:            1.6rem;
}

.adn-motorzoeker__header {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.adn-motorzoeker__heading {
  margin:         0;
  font-size:      clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          var(--adn-white, #ffffff);
  display:        flex;
  align-items:    center;
  gap:            1rem;
}

.adn-motorzoeker__heading::before {
  content:          "";
  display:          inline-block;
  flex-shrink:      0;
  width:            3rem;
  height:           3px;
  background-color: var(--adn-red, #e50914);
}

.adn-motorzoeker__subheading {
  margin:    0;
  font-size: 1.4rem;
  color:     var(--adn-silver, #a8a8a8);
}

.adn-motorzoeker__form {
  display:        flex;
  flex-direction: column;
  gap:            1.2rem;
}

@media screen and (min-width: 750px) {
  .adn-motorzoeker__form {
    flex-direction: row;
    align-items:    flex-end;
    flex-wrap:      wrap;
    gap:            1rem;
  }
}

.adn-motorzoeker__dropdowns {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  flex:      1 1 auto;
}

.adn-motorzoeker__field {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  flex:           1 1 13rem;
  min-width:      13rem;
}

.adn-motorzoeker__label {
  font-size:      1.1rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--adn-silver, #a8a8a8);
}

.adn-motorzoeker__select-wrap {
  position: relative;
}

.adn-motorzoeker__select {
  width:              100%;
  padding:            0.85rem 3.2rem 0.85rem 1.2rem;
  appearance:         none;
  -webkit-appearance: none;
  background-color:   var(--adn-dark-1, #0e0f11);
  border:             1px solid var(--adn-border-mid, #2a2c31);
  border-radius:      8px;
  color:              var(--adn-white, #ffffff);
  font-size:          1.4rem;
  font-weight:        500;
  cursor:             pointer;
  transition:         border-color 0.2s, box-shadow 0.2s;
}

.adn-motorzoeker__select:focus {
  border-color: var(--adn-red, #e50914);
  outline:      none;
  box-shadow:   0 0 0 3px rgba(229, 9, 20, 0.15);
}

.adn-motorzoeker__caret {
  position:       absolute;
  right:          1rem;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--adn-silver, #a8a8a8);
  display:        flex;
  align-items:    center;
}

.adn-motorzoeker__caret svg {
  width:  1.2rem;
  height: 1.2rem;
}

.adn-motorzoeker__actions {
  display:    flex;
  gap:        0.8rem;
  flex-wrap:  wrap;
  flex-shrink: 0;
}

.adn-motorzoeker__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.85rem 2rem;
  border-radius:   8px;
  font-size:       1.4rem;
  font-weight:     600;
  letter-spacing:  0.02em;
  text-decoration: none;
  cursor:          pointer;
  white-space:     nowrap;
  border:          1px solid transparent;
  transition:      background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}

.adn-motorzoeker__btn--search {
  background-color: var(--adn-red, #e50914);
  border-color:     var(--adn-red, #e50914);
  color:            var(--adn-white, #ffffff);
}

.adn-motorzoeker__btn--search:hover {
  background-color: #c00710;
  border-color:     #c00710;
  transform:        translateY(-1px);
}

.adn-motorzoeker__btn--reset {
  background-color: transparent;
  border-color:     var(--adn-border-mid, #2a2c31);
  color:            var(--adn-silver, #a8a8a8);
}

.adn-motorzoeker__btn--reset:hover {
  border-color: var(--adn-silver, #a8a8a8);
  color:        var(--adn-white, #ffffff);
}


/* ----------------------------------------------------------------
   41. ADN Filter Sidebar (vertical mode)
   ---------------------------------------------------------------- */

/* Active filter pills */
.adn-facets-container .active-facets__button-inner {
  background-color: var(--adn-dark-2, #17181b);
  border-color:     var(--adn-red, #e50914);
  color:            var(--adn-white, #ffffff);
}

/* Clear-all + remove-pill links */
.adn-facets-container .active-facets__button-remove {
  color: var(--adn-silver, #a8a8a8);
}

.adn-facets-container .active-facets__button-remove:hover {
  color: var(--adn-red, #e50914);
}

/* "Filteren op" heading in vertical sidebar */
.adn-facets-container .facets__heading--vertical {
  color:          var(--adn-silver, #a8a8a8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size:      1.1rem;
}

/* Filter accordion summary / label */
.adn-facets-container .facets__summary {
  color: var(--adn-light, #e0e0e0);
}

.adn-facets-container details[open] > .facets__summary {
  color: var(--adn-white, #ffffff);
}

/* Checkbox label text */
.adn-facets-container .facet-checkbox {
  color: var(--adn-light, #e0e0e0);
}

.adn-facets-container .facet-checkbox:hover {
  color: var(--adn-white, #ffffff);
}


/* ----------------------------------------------------------------
   42. ADN Sort Bar
   ---------------------------------------------------------------- */

.facets-vertical-sort .facet-filters__label,
.facets__form-vertical .facet-filters__label {
  color: var(--adn-silver, #a8a8a8);
}

.facets-vertical-sort .facet-filters__sort,
.facets__form-vertical .facet-filters__sort {
  background-color: var(--adn-dark-2, #17181b);
  border-color:     var(--adn-border-mid, #2a2c31);
  color:            var(--adn-white, #ffffff);
}

.facets-vertical-sort .product-count-vertical .product-count__text,
.facets__form .product-count .product-count__text {
  color: var(--adn-silver, #a8a8a8);
}


/* ----------------------------------------------------------------
   43. ADN Mobile Filter Drawer
   ---------------------------------------------------------------- */

.mobile-facets__open-label {
  color: var(--adn-light, #e0e0e0);
}

.mobile-facets__inner {
  background-color: var(--adn-dark-1, #0e0f11) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 100dvh !important;
  overflow-y: hidden !important;
}

.mobile-facets__main {
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.mobile-facets__header {
  border-bottom-color: var(--adn-border, #1f2126);
}

.mobile-facets__heading {
  color: var(--adn-white, #ffffff);
}

.mobile-facets__count {
  color: var(--adn-silver, #a8a8a8);
}

.mobile-facets__summary {
  color: var(--adn-light, #e0e0e0);
}

.mobile-facets__summary:hover {
  color: var(--adn-white, #ffffff);
}

.mobile-facets__close-button {
  color: var(--adn-light, #e0e0e0);
}

.mobile-facets__close-button:hover {
  color: var(--adn-white, #ffffff);
}

.mobile-facets__details > .mobile-facets__summary {
  border-bottom-color: var(--adn-border, #1f2126);
}

.mobile-facets__footer {
  background-color: var(--adn-dark-2, #17181b);
  border-top-color: var(--adn-border, #1f2126);
}

.mobile-facets__apply {
  background-color: var(--adn-red, #e50914) !important;
  color:            var(--adn-white, #ffffff) !important;
  border-color:     var(--adn-red, #e50914) !important;
}

.mobile-facets__apply:hover {
  background-color: #c00710 !important;
  border-color:     #c00710 !important;
}


/* ----------------------------------------------------------------
   44. ADN Empty State (geen motoren gevonden)
   ---------------------------------------------------------------- */

.adn-empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.6rem;
  padding:         6rem 2rem;
  text-align:      center;
}

.adn-empty-state__icon {
  color:   var(--adn-border-mid, #2a2c31);
  display: flex;
}

.adn-empty-state__heading {
  margin:         0;
  font-size:      clamp(2rem, 3vw, 2.8rem);
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          var(--adn-white, #ffffff);
}

.adn-empty-state__text {
  margin:    0;
  font-size: 1.5rem;
  color:     var(--adn-silver, #a8a8a8);
}

.adn-empty-state__link {
  margin-top: 0.8rem;
}


/* ----------------------------------------------------------------
   45. ADN Sidebar panel shape & structure
   ---------------------------------------------------------------- */

.adn-facets-container .facets__form-vertical {
  width:         28rem;
  background:    var(--adn-dark-2, #17181b);
  border:        1px solid var(--adn-border, #2a2c31);
  border-radius: 12px;
  overflow:      hidden;
}

/* Active-pills row sits inside the panel — give it a bottom separator */
.adn-facets-container .active-facets-desktop {
  padding:       1.2rem 1.6rem;
  border-bottom: 1px solid var(--adn-border, #2a2c31);
}

/* Each filter <details> divider — replace Dawn's near-invisible rgba */
.adn-facets-container .facets__disclosure-vertical {
  border-top: 1px solid var(--adn-border, #2a2c31);
}


/* ----------------------------------------------------------------
   46. ADN Sidebar header block
   ---------------------------------------------------------------- */

.adn-sidebar-header {
  padding:          1.6rem 1.6rem 1.2rem;
  background:       var(--adn-dark-1, #141518);
  border-bottom:    1px solid var(--adn-border, #2a2c31);
}

.adn-sidebar-header__heading {
  margin:         0 0 0.3rem;
  font-size:      1.3rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--adn-white, #ffffff);
  display:        flex;
  align-items:    center;
  gap:            0.7rem;
}

.adn-sidebar-header__heading::before {
  content:          "";
  display:          inline-block;
  flex-shrink:      0;
  width:            2rem;
  height:           2px;
  background-color: var(--adn-red, #e50914);
}

.adn-sidebar-header__subheading {
  margin:    0;
  font-size: 1.2rem;
  color:     var(--adn-silver, #a8a8a8);
  line-height: 1.4;
}


/* ----------------------------------------------------------------
   47. ADN Accordion rows (summary + open state + display panel)
   ---------------------------------------------------------------- */

.adn-facets-container .facets__summary {
  padding:     1.5rem 1.8rem;
  font-size:   1.3rem;
  font-weight: 600;
}

.adn-facets-container details[open] > .facets__summary {
  background: var(--adn-dark-3, #1c1e22);
}

.adn-facets-container .facets__display-vertical {
  background:    var(--adn-dark-3, #1c1e22);
  border-bottom: 1px solid var(--adn-border, #2a2c31);
  padding:       0.8rem 1.4rem 1.2rem;
}

/* "X selected" count in accordion header */
.adn-facets-container .facets__selected {
  color:       var(--adn-red, #e50914);
  font-weight: 600;
}

/* "Show more" button */
.adn-facets-container .js-filter .button-show-more {
  color:      var(--adn-silver, #a8a8a8);
  font-size:  1.2rem;
  padding:    0.4rem 0;
}

.adn-facets-container .js-filter .button-show-more:hover {
  color: var(--adn-red, #e50914);
}

/* "Reset" link per filter */
.adn-facets-container .facets__reset {
  color: var(--adn-silver, #a8a8a8);
  font-size: 1.1rem;
}

.adn-facets-container .facets__reset:hover {
  color: var(--adn-red, #e50914);
}


/* ----------------------------------------------------------------
   48. ADN Checkbox styling in sidebar
   ---------------------------------------------------------------- */

/* Bigger checkbox box (square.svg is 16×16 by default; scale to ~19px) */
.adn-facets-container .facet-checkbox > svg {
  width:       1.9rem;
  height:      1.9rem;
  flex-shrink: 0;
}

/* Thicker border stroke on the checkbox square */
.adn-facets-container .facet-checkbox > svg rect {
  stroke-width: 1.5;
}

/* Unchecked state — mid-grey border */
.adn-facets-container .facet-checkbox > svg {
  color: var(--adn-border-mid, #353840);
}

/* Reposition and enlarge the checkmark overlay to fit the bigger box */
.adn-facets-container .facet-checkbox .svg-wrapper {
  width:  1.35rem;
  height: 1rem;
  top:    1.45rem;
  left:   0.28rem;
}

/* Checkmark SVG fills its wrapper */
.adn-facets-container .facet-checkbox .svg-wrapper svg {
  width:  100%;
  height: 100%;
}

/* Unchecked SVG border (checkmark wrapper — hidden by default, keep hidden) */
.adn-facets-container .facet-checkbox > input[type="checkbox"] ~ .svg-wrapper svg {
  color: var(--adn-border-mid, #353840);
}

/* Checked label text */
.adn-facets-container .facet-checkbox > input[type="checkbox"]:checked ~ label,
.adn-facets-container .facet-checkbox > input[type="checkbox"]:checked ~ .label-wrap label {
  color: var(--adn-white, #ffffff);
}

/* Checked box border → red */
.adn-facets-container .facet-checkbox > input[type="checkbox"]:checked ~ svg,
.adn-facets-container .facet-checkbox > input[type="checkbox"]:checked + svg {
  color: var(--adn-red, #e50914);
}

/* Checked SVG border in wrapper → red */
.adn-facets-container .facet-checkbox > input[type="checkbox"]:checked ~ .svg-wrapper svg {
  color: var(--adn-red, #e50914);
}

/* Checkmark fill → red */
.adn-facets-container .facet-checkbox > input[type="checkbox"]:checked ~ .svg-wrapper svg path {
  fill: var(--adn-red, #e50914);
}

/* Disabled (zero results) option */
.adn-facets-container .facet-checkbox.disabled {
  opacity: 0.35;
}

/* Count number next to each option */
.adn-facets-container .facet-checkbox__label-count {
  color: var(--adn-silver, #a8a8a8);
}


/* ----------------------------------------------------------------
   49. ADN Active filter pills (replace incorrect border-color from §41)
   ---------------------------------------------------------------- */

/* Default pill styling — use box-shadow so Dawn's border: none is respected */
.adn-facets-container .active-facets__button-inner {
  background-color: var(--adn-dark-2, #17181b);
  color:            var(--adn-white, #ffffff);
  box-shadow:       0 0 0 1px var(--adn-border-mid, #353840);
}

.adn-facets-container .active-facets__button-inner:hover {
  box-shadow: 0 0 0 1px var(--adn-red, #e50914);
  color:      var(--adn-red, #e50914);
}

/* Close icon on pill */
.adn-facets-container .active-facets__button-inner .svg-wrapper {
  color: var(--adn-silver, #a8a8a8);
}

.adn-facets-container .active-facets__button-inner:hover .svg-wrapper {
  color: var(--adn-red, #e50914);
}


/* ----------------------------------------------------------------
   50. ADN Sort toolbar (dark panel, reordered items)
   ---------------------------------------------------------------- */

/* Panel background — wraps the entire sort bar */
.adn-sort-toolbar .facets-vertical-form {
  background:     var(--adn-dark-2, #17181b);
  border:         1px solid var(--adn-border, #2a2c31);
  border-radius:  8px;
  padding:        0.8rem 1.6rem;
  justify-content: space-between;
  gap:            1.2rem;
}

/* Product count: order 1 (left side) */
.adn-sort-toolbar .facets-vertical-form .product-count-vertical {
  order:      1;
  margin-left: 0;
}

/* Sort field: order 2 (right side) */
.adn-sort-toolbar .facets-vertical-form .facet-filters__field {
  order: 2;
}

/* Product count text as subtle badge */
.adn-sort-toolbar .facets-vertical-form .product-count__text {
  color:          var(--adn-silver, #a8a8a8);
  font-size:      1.3rem;
  letter-spacing: 0.02em;
}

/* Sort label */
.adn-sort-toolbar .facets-vertical-form .facet-filters__label {
  color:     var(--adn-silver, #a8a8a8);
  font-size: 1.3rem;
}

/* Sort select — needs 3 ancestor selectors to beat component-facets.css (0,2,0) + :hover (0,2,0) */
.adn-sort-toolbar .facets-vertical-form .facet-filters__sort {
  background-color: var(--adn-dark-1, #141518);
  border:           1px solid var(--adn-border-mid, #353840);
  border-radius:    8px;
  color:            var(--adn-white, #ffffff);
  font-size:        1.3rem;
  padding:          0.85rem 3.4rem 0.85rem 1.4rem;
  cursor:           pointer;
  transition:       border-color 0.2s, box-shadow 0.2s;
}

.adn-sort-toolbar .facets-vertical-form .facet-filters__sort:focus {
  border-color: var(--adn-red, #e50914);
  outline:      none;
  box-shadow:   0 0 0 3px rgba(229, 9, 20, 0.15);
}


/* ----------------------------------------------------------------
   51. ADN Mobile filter drawer — refined button + checkbox colors
   ---------------------------------------------------------------- */

/* "Filteren" open button */
.facets-filters-button,
.mobile-facets__open-label {
  color: var(--adn-light, #e0e0e0);
}

/* Each filter row divider inside mobile drawer */
.mobile-facets__details {
  border-bottom: 1px solid var(--adn-border, #2a2c31);
}

/* Checkbox SVGs inside mobile drawer */
.mobile-facets__checkbox > input[type="checkbox"] ~ .svg-wrapper svg {
  color: var(--adn-border-mid, #353840);
}

.mobile-facets__checkbox > input[type="checkbox"]:checked ~ .svg-wrapper svg {
  color: var(--adn-red, #e50914);
}

.mobile-facets__checkbox > input[type="checkbox"]:checked ~ .svg-wrapper svg path {
  fill: var(--adn-red, #e50914);
}

/* Apply / show results button in mobile footer */
.mobile-facets__footer .button--primary {
  background-color: var(--adn-red, #e50914) !important;
  border-color:     var(--adn-red, #e50914) !important;
  color:            var(--adn-white, #ffffff) !important;
}

.mobile-facets__footer .button--primary:hover {
  background-color: var(--adn-red-dark, #b8070f) !important;
  border-color:     var(--adn-red-dark, #b8070f) !important;
}

/* "Wissen" clear link in mobile footer */
.mobile-facets__clear {
  color: var(--adn-silver, #a8a8a8);
}

.mobile-facets__clear:hover {
  color: var(--adn-red, #e50914);
}


/* ----------------------------------------------------------------
   52. Layout spacing — facets wrapper right gap
   ---------------------------------------------------------------- */

@media screen and (min-width: 990px) {
  .facets-vertical .facets-wrapper {
    padding-right: 2.4rem;
  }
}


/* ----------------------------------------------------------------
   53. Premium Refinements Pass
   ---------------------------------------------------------------- */

/* ── Accordion: suppress underline on label hover ── */
.adn-facets-container .facets__summary:hover .facets__summary-label {
  text-decoration: none;
}

/* ── Accordion: smooth caret rotation ── */
.adn-facets-container .facets__summary .icon-caret {
  width:      1.1rem;
  height:     1.1rem;
  transition: transform 0.25s ease;
}

/* Dawn already sets rotate(180deg) on [open] in component-facets.css;
   this ensures the transition animates it smoothly */
.adn-facets-container .facets__disclosure-vertical[open] .facets__summary .icon-caret {
  transform: rotate(180deg);
}

/* ── Accordion: smoother open animation ── */
@keyframes adnFacetOpen {
  from {
    opacity:   0;
    transform: translateY(-6px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.adn-facets-container .facets__display-vertical {
  animation: adnFacetOpen 0.2s ease-out;
}

/* ── Accordion: extra inner display padding ── */
.adn-facets-container .facets__display-vertical {
  padding: 1rem 1.8rem 1.4rem;
}

/* ── Checkbox: padding to space from text ── */
.adn-facets-container .facet-checkbox > svg,
.adn-facets-container .facet-checkbox > .svg-wrapper {
  margin-right: 1.4rem;
}

/* ── Card hover: stronger red glow on card lift ── */
@media screen and (min-width: 750px) {
  .product-card-wrapper:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6),
                0 0 28px rgba(229, 9, 20, 0.28);
  }
}

/* ── Card button: ensure no underline base state ── */
.adn-card-btn {
  text-decoration: none;
}

/* ── Sort toolbar: give the toolbar panel itself more breathing room ── */
.adn-sort-toolbar .facets-vertical-form {
  padding: 1rem 1.8rem;
}


/* ================================================================
   54. ADN Contact Page Section
   ================================================================ */

/* ── Base ── */
.adn-contact-page {
  background: var(--cp-bg, #0f1012);
  color:      var(--cp-text, #ffffff);
}


/* ── Hero ── */
.adn-contact-hero {
  position:   relative;
  padding:    6rem 0 5rem;
  overflow:   hidden;
  background: var(--cp-bg, #0f1012);
}

.adn-contact-hero__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.adn-contact-hero__bg-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.adn-contact-hero__overlay {
  position:   absolute;
  inset:      0;
  background: var(--cp-bg, #0f1012);
}

.adn-contact-hero__inner {
  position: relative;
  z-index:  1;
}

.adn-contact-hero__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            0.8rem;
  font-size:      1.1rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--cp-accent, #e50914);
  margin:         0 0 1.2rem;
}

.adn-contact-hero__eyebrow::before {
  content:    '';
  display:    inline-block;
  flex-shrink:0;
  width:      2.4rem;
  height:     2px;
  background: var(--cp-accent, #e50914);
}

.adn-contact-hero__heading {
  font-size:      clamp(3rem, 5vw, 5.2rem);
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1.08;
  color:          var(--cp-text, #ffffff);
  margin:         0 0 1.6rem;
}

.adn-contact-hero__intro {
  font-size:   1.7rem;
  color:       var(--cp-muted, #a8a8a8);
  max-width:   62rem;
  line-height: 1.65;
  margin:      0;
}

@media screen and (max-width: 749px) {
  .adn-contact-hero {
    padding: 4rem 0 3.6rem;
  }
  .adn-contact-hero__intro {
    font-size: 1.5rem;
  }
}


/* ── Main grid container ── */
.adn-contact-page__inner {
  padding-top:    var(--cp-pad-v, 80px);
  padding-bottom: var(--cp-pad-v, 80px);
}

.adn-contact-page__grid {
  display: grid;
  gap:     3.2rem;
}

@media screen and (min-width: 990px) {
  .adn-contact-page__grid {
    grid-template-columns: 1fr 1.65fr;
    gap:                   4.8rem;
    align-items:           start;
  }
}

.adn-contact-page__grid--form-only {
  grid-template-columns: 1fr;
  max-width:             72rem;
  margin:                0 auto;
}


/* ── Contact cards column ── */
.adn-contact-cards {
  display:        flex;
  flex-direction: column;
  gap:            1.4rem;
}

.adn-cp-card {
  display:          flex;
  gap:              1.6rem;
  align-items:      flex-start;
  padding:          2rem 2rem 2rem 1.8rem;
  background:       var(--cp-panel, #17181b);
  border:           1px solid var(--cp-border, #2a2c31);
  border-radius:    var(--cp-radius, 12px);
  transition:       transform 0.22s ease, box-shadow 0.22s ease;
}

.adn-contact-page--glow .adn-cp-card:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 24px var(--cp-glow, rgba(229, 9, 20, 0.2));
}

.adn-cp-card__icon-wrap {
  flex-shrink:     0;
  width:           4.8rem;
  height:          4.8rem;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--cp-accent, #e50914);
  overflow:        hidden;
}

.adn-cp-card__icon-img {
  width:      2.6rem;
  height:     2.6rem;
  object-fit: contain;
  display:    block;
}

.adn-cp-card__icon-char {
  font-size:   1.9rem;
  line-height: 1;
  display:     block;
}

.adn-cp-card__body {
  flex:      1;
  min-width: 0;
}

.adn-cp-card__title {
  font-size:      1.1rem;
  font-weight:    700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--cp-muted, #a8a8a8);
  margin:         0 0 0.5rem;
}

.adn-cp-card__main {
  font-size:   1.6rem;
  font-weight: 600;
  color:       var(--cp-text, #ffffff);
  margin:      0 0 0.45rem;
  line-height: 1.55;
}

.adn-cp-card__secondary {
  font-size:   1.3rem;
  color:       var(--cp-muted, #a8a8a8);
  margin:      0 0 0.9rem;
  line-height: 1.55;
}

.adn-cp-card__secondary:last-child {
  margin-bottom: 0;
}

.adn-cp-card__link {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  font-size:      1.3rem;
  font-weight:    600;
  color:          var(--cp-accent, #e50914);
  text-decoration:none;
  transition:     gap 0.15s ease;
}

.adn-cp-card__link:hover {
  gap: 0.75rem;
}

.adn-cp-card__link-arrow {
  transition: transform 0.15s ease;
}

.adn-cp-card__link:hover .adn-cp-card__link-arrow {
  transform: translateX(4px);
}


/* ── Contact form card ── */
.adn-contact-form-wrap {
  padding:       3.2rem;
  background:    var(--cp-form-bg, #17181b);
  border:        1px solid var(--cp-form-border, #2a2c31);
  border-radius: var(--cp-radius, 12px);
}

@media screen and (max-width: 749px) {
  .adn-contact-form-wrap {
    padding: 2.4rem 2rem;
  }
}

.adn-cp-form__heading {
  font-size:      2.2rem;
  font-weight:    800;
  letter-spacing: -0.02em;
  color:          var(--cp-text, #ffffff);
  margin:         0 0 0.8rem;
}

.adn-cp-form__intro {
  font-size:   1.4rem;
  color:       var(--cp-muted, #a8a8a8);
  margin:      0 0 2.4rem;
  line-height: 1.6;
}

/* Success state */
.adn-cp-form__success {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1.4rem;
  padding:         3.6rem 2rem;
  text-align:      center;
}

.adn-cp-form__success-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           5.6rem;
  height:          5.6rem;
  border-radius:   50%;
  background:      var(--cp-glow, rgba(229, 9, 20, 0.18));
  color:           var(--cp-accent, #e50914);
  font-size:       2.4rem;
  font-weight:     700;
  line-height:     1;
}

.adn-cp-form__success p {
  font-size:   1.55rem;
  color:       var(--cp-text, #ffffff);
  margin:      0;
  line-height: 1.6;
  max-width:   44rem;
}

/* Fields */
.adn-cp-form__fields {
  display:        flex;
  flex-direction: column;
  gap:            1.6rem;
  margin-bottom:  2.4rem;
}

.adn-cp-form__field {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

.adn-cp-form__label {
  font-size:      1.2rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--cp-muted, #a8a8a8);
}

.adn-cp-form__required {
  color: var(--cp-accent, #e50914);
}

.adn-cp-form__input {
  width:            100%;
  padding:          1.1rem 1.4rem;
  background:       var(--cp-input-bg, #0f1012);
  border:           1px solid var(--cp-input-border, #353840);
  border-radius:    8px;
  color:            var(--cp-input-text, #ffffff);
  font-size:        1.5rem;
  font-family:      inherit;
  line-height:      1.4;
  transition:       border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance:       none;
}

.adn-cp-form__input::placeholder {
  color:   var(--cp-muted, #a8a8a8);
  opacity: 0.55;
}

.adn-cp-form__input:focus {
  border-color: var(--cp-accent, #e50914);
  outline:      none;
  box-shadow:   0 0 0 3px var(--cp-glow, rgba(229, 9, 20, 0.2));
}

.adn-cp-form__textarea {
  resize:     vertical;
  min-height: 14rem;
}

/* Shopify default error messages on dark bg */
.adn-contact-form-wrap .errors {
  background:    rgba(229, 9, 20, 0.08);
  border:        1px solid rgba(229, 9, 20, 0.3);
  border-radius: 8px;
  padding:       1.2rem 1.6rem;
  margin-bottom: 2rem;
  color:         var(--cp-text, #ffffff);
}

.adn-contact-form-wrap .errors li {
  font-size: 1.4rem;
  color:     var(--cp-text, #ffffff);
}

/* Submit button */
.adn-cp-form__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.8rem;
  width:           100%;
  padding:         1.35rem 2.4rem;
  background:      var(--cp-btn-bg, #e50914);
  color:           var(--cp-btn-text, #ffffff);
  border:          1px solid var(--cp-btn-bg, #e50914);
  border-radius:   8px;
  font-size:       1.5rem;
  font-weight:     700;
  letter-spacing:  0.04em;
  text-decoration: none;
  cursor:          pointer;
  font-family:     inherit;
  transition:      filter 0.2s, transform 0.15s, box-shadow 0.2s;
}

.adn-cp-form__btn:hover {
  filter:    brightness(1.1);
  transform: translateY(-1px);
}

.adn-cp-form__btn--glow:hover {
  box-shadow: 0 0 22px var(--cp-glow, rgba(229, 9, 20, 0.3)),
              0 4px 16px rgba(0, 0, 0, 0.35);
}

.adn-cp-form__btn-arrow {
  transition: transform 0.15s ease;
}

.adn-cp-form__btn:hover .adn-cp-form__btn-arrow {
  transform: translateX(4px);
}


/* ── Map section ── */
.adn-contact-map {
  padding-bottom: var(--cp-pad-v, 80px);
}

.adn-contact-map__visual-wrap {
  position: relative;
}

.adn-contact-map__visual {
  height:        480px;
  border-radius: var(--cp-radius, 12px);
  overflow:      hidden;
  border:        1px solid var(--cp-border, #2a2c31);
  background:    var(--cp-panel, #17181b);
}

.adn-contact-map__iframe-wrap,
.adn-contact-map__img-wrap {
  width:  100%;
  height: 100%;
}

.adn-contact-map__iframe-wrap iframe {
  width:   100%;
  height:  100%;
  border:  0;
  display: block;
}

.adn-contact-map__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.adn-contact-map__placeholder {
  width:           100%;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.2rem;
  color:           var(--cp-muted, #a8a8a8);
  font-size:       1.4rem;
  text-align:      center;
  padding:         2rem;
}

.adn-contact-map__placeholder-icon {
  font-size: 3.6rem;
}

/* Address overlay card — desktop: absolute on map */
@media screen and (min-width: 750px) {
  .adn-contact-map__card {
    position:      absolute;
    bottom:        2rem;
    left:          2rem;
    z-index:       2;
    min-width:     22rem;
    max-width:     32rem;
  }
}

.adn-contact-map__card {
  background:    var(--cp-panel, #17181b);
  border:        1px solid var(--cp-border, #2a2c31);
  border-radius: var(--cp-radius, 12px);
  padding:       1.8rem 2rem;
  box-shadow:    0 4px 24px rgba(0, 0, 0, 0.55);
}

.adn-contact-map__card-title {
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--cp-text, #ffffff);
  margin:      0 0 0.5rem;
}

.adn-contact-map__address {
  font-size:   1.3rem;
  color:       var(--cp-muted, #a8a8a8);
  font-style:  normal;
  line-height: 1.55;
  margin:      0 0 1rem;
}

.adn-contact-map__link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  font-size:       1.3rem;
  font-weight:     600;
  color:           var(--cp-accent, #e50914);
  text-decoration: none;
  transition:      gap 0.15s ease;
}

.adn-contact-map__link:hover {
  gap: 0.75rem;
}

/* Mobile: card drops below map with joined border */
@media screen and (max-width: 749px) {
  .adn-contact-map__visual {
    height:        300px;
    border-radius: var(--cp-radius, 12px) var(--cp-radius, 12px) 0 0;
    border-bottom: none;
  }

  .adn-contact-map__card {
    position:        static;
    border-radius:   0 0 var(--cp-radius, 12px) var(--cp-radius, 12px);
    border-top:      none;
    max-width:       100%;
    min-width:       unset;
    box-shadow:      none;
  }
}


/* ── USP / trust bar ── */
.adn-contact-usp {
  background:  var(--cp-panel, #17181b);
  border-top:  1px solid var(--cp-border, #2a2c31);
  padding:     3.2rem 0;
}

.adn-contact-usp__inner {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap:                   2.4rem;
}

.adn-cp-usp-item {
  display:     flex;
  align-items: center;
  gap:         1.4rem;
}

.adn-cp-usp-item__icon-wrap {
  flex-shrink:     0;
  width:           4rem;
  height:          4rem;
  border-radius:   50%;
  background:      rgba(229, 9, 20, 0.12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--cp-accent, #e50914);
}

.adn-cp-usp-item__icon-img {
  width:      2rem;
  height:     2rem;
  object-fit: contain;
  display:    block;
}

.adn-cp-usp-item__icon-char {
  font-size:   1.7rem;
  line-height: 1;
}

.adn-cp-usp-item__text {
  flex: 1;
}

.adn-cp-usp-item__title {
  font-size:   1.4rem;
  font-weight: 700;
  color:       var(--cp-text, #ffffff);
  margin:      0 0 0.2rem;
}

.adn-cp-usp-item__desc {
  font-size: 1.25rem;
  color:     var(--cp-muted, #a8a8a8);
  margin:    0;
}


/* ================================================================
   55. Collection Filter Spacing Refinement Pass
   All rules use .adn-facets-container or .adn-sort-toolbar prefix
   so they win by specificity/source-order over earlier sections.
   ================================================================ */

/* ── 1. Sidebar header — more generous vertical rhythm ── */
.adn-sidebar-header {
  padding: 2.2rem 2.2rem 1.8rem;
}

.adn-sidebar-header__heading {
  margin-bottom: 0.5rem;
}

.adn-sidebar-header__subheading {
  line-height: 1.55;
}

/* ── 2. Active-pills row — more breathing room ── */
.adn-facets-container .active-facets-desktop {
  padding:     1.8rem 2.2rem;
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.8rem;
  align-items: center;
}

/* "Filteren op" heading inside pills row */
.adn-facets-container .facets__heading--vertical {
  margin-bottom: 0;
  line-height:   1;
}

/* "Filters wissen" clear-all link — give it space from pills */
.adn-facets-container .active-facets__button-remove {
  margin-left: auto;
  padding:     0.3rem 0;
  white-space: nowrap;
}

/* ── 3. Accordion summary rows — taller, smoother ── */
.adn-facets-container .facets__summary {
  padding:    1.9rem 2.2rem;
  min-height: 5.6rem;
  display:    flex;
  align-items: center;
  transition: background-color 0.18s ease, color 0.18s ease;
  box-sizing: border-box;
}

/* Subtle bg highlight on hover (closed state only) */
.adn-facets-container .facets__disclosure-vertical:not([open]) > .facets__summary:hover {
  background: rgba(255, 255, 255, 0.025);
}

/* ── 4. Caret — larger icon, intentional gap from label ── */
.adn-facets-container .facets__summary .icon-caret {
  width:       1.3rem;
  height:      1.3rem;
  flex-shrink: 0;
  margin-left: 1.4rem;
}

/* ── 5. Option display area — more padding when open ── */
.adn-facets-container .facets__display-vertical {
  padding: 1.4rem 2.2rem 2rem;
}

/* ── 6. Checkbox rows — taller, vertically centred ── */
.adn-facets-container .facet-checkbox {
  padding-top:    1.25rem;
  padding-bottom: 1.25rem;
  min-height:     4.2rem;
  align-items:    center;
}

/* ── 7. Sort toolbar panel — roomier ── */
.adn-sort-toolbar .facets-vertical-form {
  padding: 1.3rem 2.4rem;
  gap:     2rem;
}

/* Sort label — slightly larger, no wrap */
.adn-sort-toolbar .facets-vertical-form .facet-filters__label {
  font-size:  1.35rem;
  white-space: nowrap;
}

/* ── 8. Sort select — more internal padding ── */
.adn-sort-toolbar .facets-vertical-form .facet-filters__sort {
  padding: 1rem 3.8rem 1rem 1.8rem;
}

/* ── 9. Sidebar-to-product-grid gap ── */
@media screen and (min-width: 990px) {
  .facets-vertical .facets-wrapper {
    padding-right: 3.6rem;
  }
}

@media screen and (max-width: 749px) {
  .adn-contact-usp {
    padding: 2.4rem 0;
  }

  .adn-contact-usp__inner {
    grid-template-columns: repeat(2, 1fr);
    gap:                   1.6rem;
  }
}

/* ================================================================
   Section 56 — Sold Archive Intro Text
   ================================================================ */

.adn-sold-archive-intro {
  padding: 2.4rem 0 0;
}

.adn-sold-archive-intro__text {
  font-size: 1.55rem;
  color: var(--adn-silver, #a8a8a8);
  line-height: 1.65;
  margin: 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--adn-red, #e50914);
  max-width: 70rem;
}

/* ================================================================
   Section 57 — Fix: vertical filter caret breathing room
   Root cause: component-facets.css overrides base.css to set
     .facets__summary .icon-caret { right: 0; }
   The caret is position:absolute — changing summary's padding-right
   has zero effect on an absolutely-positioned child. The fix is to
   override the right value directly at higher specificity (0,4,0).
   ================================================================ */

/* Push caret away from the right edge */
.adn-facets-container .facets__disclosure-vertical .facets__summary .icon-caret {
  right: 2rem;
  width: 1.3rem;
  height: 1.3rem;
  top: calc(50% - 0.65rem);
  transition: transform 0.22s ease;
}

/* Smooth rotation when panel is open */
.adn-facets-container .facets__disclosure-vertical[open] .facets__summary .icon-caret {
  transform: rotate(180deg);
  transition: transform 0.22s ease;
}

/* Widen right padding on the summary so label text cannot overlap the caret.
   Caret at right:2rem with width 1.3rem → protected zone ≈ 3.3rem; use 4.2rem. */
.adn-facets-container .facets__disclosure-vertical .facets__summary {
  padding-right: 4.2rem;
}

/* ================================================================
   Section 58 — Fix: sort dropdown caret breathing room
   Root cause: base.css sets
     .select .svg-wrapper { position: absolute; right: 0; }
   The svg-wrapper is position:absolute — the select element's
   padding-right has zero effect on it. Fix: override right at
   higher specificity, identical approach to Section 57 filter caret.
   Arrow is a custom SVG (not native); appearance:none is already set
   in base.css, so no duplicate native arrow on any browser.
   ================================================================ */

/* Move the caret wrapper away from the right edge */
.adn-sort-toolbar .facets-vertical-form .select .svg-wrapper {
  right: 1.6rem;
  width: 1.2rem;
  height: 0.75rem;
  top: calc(50% - 0.375rem);
}

/* component-facets.css overrides svg width to 10px; restore fill */
.adn-sort-toolbar .facets-vertical-form .select .icon-caret {
  width: 100%;
  height: 100%;
}

/* ================================================================
   Section 59 — ADN Motor Configurator standalone section
   Scoped via #AdnConfigurator-{id} CSS custom properties set inline.
   Uses: --mc-bg, --mc-panel, --mc-text, --mc-muted, --mc-accent,
         --mc-border, --mc-input-bg, --mc-input-fg, --mc-btn-bg,
         --mc-btn-fg, --mc-radius, --mc-glow, --mc-glow-sm
   ================================================================ */

/* ── Outer shell ── */
.adn-configurator {
  background-color: var(--mc-bg, #050608);
  position: relative;
}

/* ── Top visual image strip ── */
.adn-configurator__visual {
  position: relative;
  overflow: hidden;
  max-height: 260px;
  line-height: 0;
}

.adn-configurator__visual-img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
}

/* Gradient blending into panel below */
.adn-configurator__visual::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(to bottom, transparent, var(--mc-panel, #111216));
  pointer-events: none;
}

/* ── Panel ── */
.adn-configurator__panel {
  background-color: var(--mc-panel, #111216);
  border-top:    1px solid var(--mc-border, #2a2c31);
  border-bottom: 1px solid var(--mc-border, #2a2c31);
}

.adn-configurator__inner {
  padding: 3.4rem 2.4rem;
}

/* Wide variant */
.adn-configurator__inner--wide {
  max-width: 1400px;
  margin-left:  auto;
  margin-right: auto;
}

/* ── Header ── */
.adn-configurator__header {
  text-align: center;
  margin-bottom: 3rem;
}

.adn-configurator__heading {
  color: var(--mc-text, #ffffff);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
  line-height: 1.15;
}

.adn-configurator__subheading {
  color: var(--mc-muted, #a8a8a8);
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.55;
}

/* ── Form base ── */
.adn-configurator__form {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: flex-end;
}

/* ── Dropdowns wrapper ── */
.adn-configurator__dropdowns {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  flex: 1 1 auto;
  align-items: flex-end;
}

/* Grid layout: 2-column grid for dropdowns */
.adn-configurator__form--grid .adn-configurator__dropdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
  align-items: end;
}

/* Compact layout: tighter spacing */
.adn-configurator__form--compact {
  gap: 1rem;
}
.adn-configurator__form--compact .adn-configurator__dropdowns {
  gap: 0.8rem;
}

/* ── Individual dropdown field ── */
.adn-configurator__field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 14rem;
  flex: 1 1 14rem;
}

/* ── Label ── */
.adn-configurator__label {
  display: block;
  color: var(--mc-muted, #a8a8a8);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── Select wrapper (custom caret inside) ── */
.adn-configurator__select-wrap {
  position: relative;
}

/* ── Select element ── */
.adn-configurator__select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--mc-input-bg, #1a1c21);
  color: var(--mc-input-fg, #ffffff);
  border: 1px solid var(--mc-border, #2a2c31);
  border-radius: var(--mc-radius, 8px);
  font-size: 1.4rem;
  font-family: inherit;
  padding: 1.15rem 4rem 1.15rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.adn-configurator__select:focus {
  outline: none;
  border-color: var(--mc-accent, #e50914);
  box-shadow: 0 0 0 3px var(--mc-glow-sm, rgba(229, 9, 20, 0.16));
}

/* Compact select size */
.adn-configurator__form--compact .adn-configurator__select {
  padding-top:    0.9rem;
  padding-bottom: 0.9rem;
  font-size: 1.3rem;
}

/* ── Custom caret SVG ──
   .adn-configurator__caret is NOT inside Dawn's .select wrapper,
   so base.css's .select .svg-wrapper { right: 0 } does NOT apply.
   We fully own the caret positioning here. */
.adn-configurator__caret {
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 0.75rem;
  pointer-events: none;
  color: var(--mc-muted, #a8a8a8);
  /* Override base.css .svg-wrapper display/size defaults */
  display: flex;
  align-items: center;
  justify-content: center;
}

.adn-configurator__caret svg {
  width: 100%;
  height: 100%;
}

/* ── Actions ── */
.adn-configurator__actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  flex-shrink: 0;
}

/* Grid layout: actions below the dropdowns */
.adn-configurator__form--grid .adn-configurator__actions {
  width: 100%;
  flex-direction: row;
}

/* ── Buttons base ── */
.adn-configurator__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mc-radius, 8px);
  font-size: 1.4rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.04em;
  padding: 1.15rem 2.6rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
  text-decoration: none;
}

.adn-configurator__form--compact .adn-configurator__btn {
  padding: 0.9rem 2rem;
  font-size: 1.3rem;
}

/* Search / CTA button */
.adn-configurator__btn--search {
  background-color: var(--mc-btn-bg, #e50914);
  color: var(--mc-btn-fg, #ffffff);
  border: none;
}

.adn-configurator__btn--search:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 26px var(--mc-glow, rgba(229, 9, 20, 0.42)),
              0 2px 8px  rgba(0, 0, 0, 0.35);
}

.adn-configurator__btn--search:active {
  transform: translateY(0);
}

/* Reset button */
.adn-configurator__btn--reset {
  background-color: transparent;
  color: var(--mc-muted, #a8a8a8);
  border: 1px solid var(--mc-border, #2a2c31);
}

.adn-configurator__btn--reset:hover {
  color: var(--mc-text, #ffffff);
  border-color: rgba(255, 255, 255, 0.35);
}

/* ── Mobile: stack everything ── */
@media screen and (max-width: 749px) {
  .adn-configurator__inner {
    padding: 2.4rem 1.6rem;
  }

  .adn-configurator__header {
    margin-bottom: 2rem;
  }

  .adn-configurator__form,
  .adn-configurator__form--horizontal,
  .adn-configurator__form--compact {
    flex-direction: column;
    align-items: stretch;
  }

  .adn-configurator__dropdowns,
  .adn-configurator__form--grid .adn-configurator__dropdowns {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .adn-configurator__field {
    min-width: unset;
    flex: none;
  }

  .adn-configurator__actions,
  .adn-configurator__form--grid .adn-configurator__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .adn-configurator__btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .adn-configurator__visual-img {
    height: 180px;
  }

  .adn-configurator__visual {
    max-height: 180px;
  }
}

/* ── Tablet: 2-col dropdowns for horizontal/compact ── */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .adn-configurator__dropdowns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .adn-configurator__field {
    flex: none;
    min-width: unset;
  }

  .adn-configurator__actions {
    width: 100%;
    flex-direction: row;
  }
}

/* ================================================================
   Section 60 — Product page conversion blocks
   60a: ADN Waarom kopen  (.adn-why-buy)
   60b: ADN Stappen       (.adn-steps)
   60c: ADN FAQ           (.adn-faq)
   ================================================================ */

/* ----------------------------------------------------------------
   60a — ADN Waarom kopen
   ---------------------------------------------------------------- */

.adn-why-buy {
  background-color: var(--wb-bg, #050608);
}

/* Two-column layout when image is present */
.adn-why-buy__layout--has-image {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4.8rem;
  align-items: center;
}

.adn-why-buy__layout--has-image.adn-why-buy__layout--img-right {
  direction: rtl;
}

.adn-why-buy__layout--has-image.adn-why-buy__layout--img-right > * {
  direction: ltr;
}

.adn-why-buy__image-col {
  border-radius: var(--wb-radius, 10px);
  overflow: hidden;
  line-height: 0;
}

.adn-why-buy__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wb-radius, 10px);
}

/* Content panel */
.adn-why-buy__content-col {
  background-color: var(--wb-panel, #111216);
  border: 1px solid var(--adn-border, #2a2c31);
  border-radius: var(--wb-radius, 10px);
  padding: 3.6rem 3.2rem;
}

.adn-why-buy__layout:not(.adn-why-buy__layout--has-image) .adn-why-buy__content-col {
  max-width: 72rem;
  margin: 0 auto;
}

.adn-why-buy__heading {
  color: var(--adn-white, #ffffff);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
  line-height: 1.2;
  padding-left: 1.4rem;
  border-left: 3px solid var(--wb-accent, #e50914);
}

.adn-why-buy__body {
  color: var(--adn-silver, #a8a8a8);
  font-size: 1.5rem;
  line-height: 1.65;
  margin-bottom: 2.4rem;
}

.adn-why-buy__body p {
  margin: 0 0 1rem;
}

.adn-why-buy__body p:last-child {
  margin-bottom: 0;
}

.adn-why-buy__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.adn-why-buy__bullet {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--adn-white, #ffffff);
  font-size: 1.45rem;
  font-weight: 500;
}

.adn-why-buy__check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--wb-accent, #e50914);
  width: 2rem;
  height: 2rem;
}

.adn-why-buy__check svg {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 749px) {
  .adn-why-buy__layout--has-image {
    grid-template-columns: 1fr;
    gap: 2rem;
    direction: ltr;
  }

  .adn-why-buy__layout--has-image.adn-why-buy__layout--img-right {
    direction: ltr;
  }

  .adn-why-buy__content-col {
    padding: 2.4rem 2rem;
  }
}

/* ----------------------------------------------------------------
   60b — ADN Stappen
   ---------------------------------------------------------------- */

.adn-steps {
  background-color: var(--st-bg, #050608);
}

.adn-steps__heading {
  color: var(--adn-white, #ffffff);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 3.6rem;
  line-height: 1.2;
}

.adn-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 2rem;
  position: relative;
}

.adn-steps__card {
  position: relative;
  background-color: var(--adn-dark-2, #17181b);
  border: 1px solid var(--adn-border, #2a2c31);
  border-radius: 12px;
  padding: 2.8rem 2.4rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.2s ease;
}

.adn-steps__card:hover {
  border-color: var(--st-accent, #e50914);
}

.adn-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background-color: var(--st-accent, #e50914);
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 0.4rem;
}

.adn-steps__connector {
  display: none;
}

@media screen and (min-width: 990px) {
  .adn-steps__connector {
    display: block;
    position: absolute;
    top: 4.4rem;
    right: -2rem;
    width: 2rem;
    height: 1px;
    background: linear-gradient(to right, var(--adn-border, #2a2c31), transparent);
    pointer-events: none;
  }
}

.adn-steps__title {
  color: var(--adn-white, #ffffff);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}

.adn-steps__text {
  color: var(--adn-silver, #a8a8a8);
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0;
}

@media screen and (max-width: 749px) {
  .adn-steps__grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .adn-steps__card {
    padding: 2rem 1.8rem;
  }

  .adn-steps__heading {
    margin-bottom: 2.4rem;
  }
}

/* ----------------------------------------------------------------
   60c — ADN FAQ
   ---------------------------------------------------------------- */

.adn-faq {
  background-color: var(--fq-bg, #050608);
}

.adn-faq__heading {
  color: var(--fq-text, #ffffff);
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 3.2rem;
  line-height: 1.2;
}

.adn-faq__list {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fq-border, #2a2c31);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--fq-panel, #111216);
}

.adn-faq__item {
  border-bottom: 1px solid var(--fq-border, #2a2c31);
}

.adn-faq__item:last-child {
  border-bottom: none;
}

.adn-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.4rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.18s ease;
}

.adn-faq__question::marker,
.adn-faq__question::-webkit-details-marker {
  display: none;
}

.adn-faq__item[open] > .adn-faq__question,
.adn-faq__question:hover {
  background-color: rgba(255, 255, 255, 0.028);
}

.adn-faq__q-text {
  color: var(--fq-text, #ffffff);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  flex: 1 1 auto;
}

.adn-faq__item[open] > .adn-faq__question .adn-faq__q-text {
  color: var(--fq-accent, #e50914);
}

/* Inline SVG caret — NOT subject to base.css summary .icon-caret rules */
.adn-faq__caret {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--fq-muted, #a8a8a8);
}

.adn-faq__caret-svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.22s ease;
}

.adn-faq__item[open] > .adn-faq__question .adn-faq__caret {
  color: var(--fq-accent, #e50914);
}

.adn-faq__item[open] > .adn-faq__question .adn-faq__caret-svg {
  transform: rotate(180deg);
}

/* Answer panel: CSS grid-template-rows trick for smooth open animation */
.adn-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s ease;
}

.adn-faq__item[open] > .adn-faq__answer {
  grid-template-rows: 1fr;
}

.adn-faq__answer-inner {
  overflow: hidden;
  color: var(--fq-muted, #a8a8a8);
  font-size: 1.45rem;
  line-height: 1.65;
  padding: 0 2.4rem;
  transition: padding-bottom 0.26s ease;
}

.adn-faq__item[open] > .adn-faq__answer > .adn-faq__answer-inner {
  padding-bottom: 2.2rem;
}

@media screen and (max-width: 749px) {
  .adn-faq__question {
    padding: 1.6rem 1.8rem;
  }

  .adn-faq__q-text {
    font-size: 1.4rem;
  }

  .adn-faq__answer-inner {
    padding-left:  1.8rem;
    padding-right: 1.8rem;
    font-size: 1.4rem;
  }

  .adn-faq__heading {
    margin-bottom: 2.2rem;
  }
}

/* ----------------------------------------------------------------
   Section 61 — Footer ADN customisation
   ---------------------------------------------------------------- */

/* Red top border */
.footer {
  border-top: 2px solid var(--adn-f-accent, #e50914);
}

/* All footer links */
.footer a,
.footer .link--text,
.footer .list-menu__item--link {
  color: var(--adn-f-link, #c8c8c8);
  transition: color 0.18s ease;
}

.footer a:hover,
.footer .link--text:hover,
.footer .list-menu__item--link:hover {
  color: var(--adn-f-hover, #ffffff);
}

/* Copyright & powered-by links */
.footer .copyright__content a,
.footer .copyright__content a:visited {
  color: var(--adn-f-muted, #888888);
}

.footer .copyright__content a:hover {
  color: var(--adn-f-link, #c8c8c8);
}

/* Tagline under brand description */
.footer-block__tagline {
  font-size: 1.3rem;
  color: var(--adn-f-muted, #888888);
  line-height: 1.55;
  margin: 0.8rem 0 1.6rem;
}

/* ── ADN Contact block ───────────────────────────────────────── */
.footer-block__contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
}

.footer-block__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  line-height: 1.5;
}

.footer-block__contact-icon {
  flex-shrink: 0;
  color: var(--adn-f-accent, #e50914);
  margin-top: 0.1rem;
  display: flex;
}

.footer-block__contact-link {
  color: var(--adn-f-link, #c8c8c8);
  font-size: 1.4rem;
  transition: color 0.18s ease;
}

.footer-block__contact-link:hover {
  color: var(--adn-f-hover, #ffffff);
}

.footer-block__contact-text {
  font-size: 1.4rem;
  color: var(--adn-f-link, #c8c8c8);
}

/* ── ADN Opening hours block ────────────────────────────────── */
.footer-block__opening-hours {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--adn-f-link, #c8c8c8);
}

/* ── ADN Why ADN block ──────────────────────────────────────── */
.footer-block__why-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}

.footer-block__why-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.4rem;
  color: var(--adn-f-link, #c8c8c8);
}

.footer-block__why-check {
  flex-shrink: 0;
  color: var(--adn-f-accent, #e50914);
  display: flex;
}

/* Footer block headings */
.footer .footer-block__heading {
  color: var(--adn-f-hover, #ffffff);
}

/* Bottom border between blocks */
.footer__content-top {
  border-bottom: 1px solid var(--adn-f-border, #2a2c31);
  padding-bottom: 3.2rem;
}

@media screen and (max-width: 749px) {
  .footer-block__contact-item,
  .footer-block__why-item {
    font-size: 1.5rem;
  }

  .footer-block__tagline {
    font-size: 1.4rem;
  }
}

/* ----------------------------------------------------------------
   Section 62 — Product card micro-copy
   ---------------------------------------------------------------- */

.adn-card-trust {
  margin: 0.7rem 0 0;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--adn-silver, #a8a8a8);
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   Section 63 — Product card: inruil trust text & sold price label
   ---------------------------------------------------------------- */

.adn-card-inruil {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.6rem 0 0;
  font-size: 1.15rem;
  color: var(--adn-silver, #a0a0a0);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.adn-card-inruil__icon {
  flex-shrink: 0;
  color: var(--adn-red, #e50914);
}

.adn-card-sold-price-label {
  margin: 0.4rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--adn-silver, #a0a0a0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ================================================================
   Section 64 — Mobile product card & carousel polish
   ================================================================ */

/* ── PART 1: Carousel card width on mobile ──
   Dawn's base.css gives grid--peek cards ~46vw on mobile (2-col).
   Override to 82vw for a proper single-card carousel feel.
   Specificity (0,4,0) beats Dawn's (0,3,0).
   ────────────────────────────────────────── */
@media screen and (max-width: 749px) {
  .product-grid.slider--tablet.grid--peek .grid__item {
    width: 82vw;
    max-width: 340px;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 1-col slider: use almost full container width */
  .product-grid.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - 3rem);
    max-width: none;
  }
}

/* ── PART 2: Mobile card content — compact typography & spacing ── */
@media screen and (max-width: 749px) {
  /* Card title */
  .product-card-wrapper .card__heading {
    font-size: 14px;
    line-height: 1.35;
  }

  /* Card information padding */
  .product-card-wrapper .card__information {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  /* Year / km meta row */
  .adn-card-meta {
    margin-top: 0.25rem;
    gap: 0.5rem;
  }

  .adn-card-meta__item {
    font-size: 11px;
  }

  /* Price (red, stays prominent but smaller) */
  .card-information > .price {
    font-size: 15px;
  }

  /* Inruil & Garantie trust text */
  .adn-card-inruil {
    font-size: 11px;
    margin-top: 0.35rem;
    gap: 0.2rem;
    line-height: 1.2;
  }

  .adn-card-inruil__icon {
    width: 10px;
    height: 10px;
  }

  /* Verkocht sold label */
  .adn-card-sold-price-label {
    font-size: 1.05rem;
    margin-top: 0.25rem;
  }

  /* Bekijk motor button — compact but still touch-friendly */
  .adn-card-btn {
    font-size: 12px;
    padding: 0.75rem 1rem;
    margin-top: 0.7rem;
  }
}

/* ── PART 3: Slider buttons — ADN dark styling ──
   Dawn renders slider-button with transparent bg + foreground color.
   On ADN dark sections this can be invisible. Scope to .collection
   so this only applies to featured collection / product carousels.
   ────────────────────────────────────────────── */
.collection .slider-button {
  background-color: var(--adn-dark-2, #17181b);
  border: 1px solid var(--adn-border-mid, #353840);
  border-radius: 50%;
  color: var(--adn-light, #e0e0e0);
  width: 40px;
  height: 40px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.collection .slider-button:not([disabled]):hover {
  background-color: var(--adn-red, #e50914);
  border-color: var(--adn-red, #e50914);
  color: var(--adn-white, #ffffff);
}

.collection .slider-button[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.collection .slider-counter {
  color: var(--adn-silver, #a8a8a8);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  min-width: 5rem;
  text-align: center;
}

@media screen and (max-width: 749px) {
  /* Spacing above the controls row */
  .collection .slider-buttons {
    margin-top: 1.4rem;
  }

  /* Slightly smaller touch targets on mobile (still 36px = acceptable) */
  .collection .slider-button {
    width: 36px;
    height: 36px;
  }
}

/* ── PART 4: "Alles weergeven" / View all button ──
   Dawn only shows this when show_view_all=true AND more_in_collection=true.
   No CSS was hiding it, but styling makes it fit ADN style on dark bg.
   ────────────────────────────────────────────── */
.collection__view-all {
  margin-top: 2.4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (max-width: 749px) {
  .collection__view-all {
    margin-top: 2rem;
  }

  /* Full-width CTA on small screens */
  .collection__view-all .button,
  .collection__view-all .button--secondary {
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
  }
}
/* Placeholder cleanup: ribbon replaces old text/content */
.adn-placeholder .card__media .media::before {
  content: none !important;
  display: none !important;
}

.adn-placeholder .card__content,
.adn-placeholder .card__information,
.adn-placeholder .card-information,
.adn-placeholder .card__heading,
.adn-placeholder .price {
  display: none !important;
}
/* ================================================================
   FIX — Coming soon ribbon same size as VERKOCHT ribbon
   Plaats helemaal onderaan assets/adn-custom.css
   ================================================================ */

/* Zorg dat de binnenkort-ribbon exact dezelfde basis gebruikt als verkocht */
.adn-diagonal-ribbon--coming-soon .adn-diagonal-ribbon__text {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(-38deg) !important;
  width: 180% !important;
  padding: 0.85rem 0 !important;
  background-color: var(--adn-sold-ribbon-bg, #e50914) !important;
  opacity: var(--adn-sold-ribbon-opacity, 0.9) !important;
  color: var(--adn-sold-ribbon-text-color, #ffffff) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Mobiel: zelfde balkgrootte houden, alleen iets minder letterruimte zodat tekst past */
@media screen and (max-width: 749px) {
  .adn-diagonal-ribbon--coming-soon .adn-diagonal-ribbon__text {
    font-size: 1.2rem !important;
    letter-spacing: 0.11em !important;
    padding: 0.85rem 0 !important;
  }
}